@redocly/theme 0.18.3-patch.0 → 0.18.3

package/lib/ui/darkColors.js

@@ -3,222 +3,90 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.darkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.darkMode = (0, styled_components_1.css) `
-  /* === Dark Theme Colors  === */
-
   /**
-    * @tokens Dark Base Colors
-    * @presenter Color
-    */
-
-  --color-red-1: #2c161c;
-  --color-red-2: #451d25;
-  --color-red-3: #5b252f;
-  --color-red-4: #7e2e3c;
-  --color-red-5: #a61d24;
-  --color-red-6: #d32029;
-  --color-red-7: #e84749;
-  --color-red-8: #f37370;
-  --color-red-9: #f89f9a;
-  --color-red-10: #fac8c3;
-
-  --color-green-1: #162312;
-  --color-green-2: #1d3712;
-  --color-green-3: #274916;
-  --color-green-4: #306317;
-  --color-green-5: #3c8618;
-  --color-green-6: #49aa19;
-  --color-green-7: #6abe39;
-  --color-green-8: #8fd460;
-  --color-green-9: #b2e58b;
-  --color-green-10: #d5f2bb;
-
-  --color-gold-1: #2b2111;
-  --color-gold-2: #443111;
-  --color-gold-3: #594214;
-  --color-gold-4: #7c5914;
-  --color-gold-5: #aa7714;
-  --color-gold-6: #d89614;
-  --color-gold-7: #e8b339;
-  --color-gold-8: #f3cc62;
-  --color-gold-9: #f8df8b;
-  --color-gold-10: #faedb5;
-
-  --color-blue-1: #111a2c;
-  --color-blue-2: #112545;
-  --color-blue-3: #15325b;
-  --color-blue-4: #15417e;
-  --color-blue-5: #1554ad;
-  --color-blue-6: #1668dc;
-  --color-blue-7: #3c89e8;
-  --color-blue-8: #65a9f3;
-  --color-blue-9: #8dc5f8;
-  --color-blue-10: #b7dcfa;
-
-  --color-purple-1: #1a1325;
-  --color-purple-2: #24163a;
-  --color-purple-3: #301c4d;
-  --color-purple-4: #3e2069;
-  --color-purple-5: #51258f;
-  --color-purple-6: #642ab5;
-  --color-purple-7: #854eca;
-  --color-purple-8: #ab7ae0;
-  --color-purple-9: #cda8f0;
-  --color-purple-10: #ebd7fa;
-
-  --color-magneta-1: #291321;
-  --color-magneta-2: #40162f;
-  --color-magneta-3: #551c3b;
-  --color-magneta-4: #75204f;
-  --color-magneta-5: #a02669;
-  --color-magneta-6: #cb2b83;
-  --color-magneta-7: #e0529c;
-  --color-magneta-8: #f37fb7;
-  --color-magneta-9: #f8a8cc;
-  --color-magneta-10: #fad2e3;
-
-  --color-cyan-1: #112123;
-  --color-cyan-2: #113536;
-  --color-cyan-3: #144848;
-  --color-cyan-4: #146262;
-  --color-cyan-5: #138585;
-  --color-cyan-6: #13a8a8;
-  --color-cyan-7: #33bcb7;
-  --color-cyan-8: #58d1c9;
-  --color-cyan-9: #84e2d8;
-  --color-cyan-10: #b2f1e8;
-
-  --color-yellow-1: #2b2611;
-  --color-yellow-2: #443b11;
-  --color-yellow-3: #595014;
-  --color-yellow-4: #7c6e14;
-  --color-yellow-5: #aa9514;
-  --color-yellow-6: #d8bd14;
-  --color-yellow-7: #e8d639;
-  --color-yellow-8: #f3ea62;
-  --color-yellow-9: #f8f48b;
-  --color-yellow-10: #fafab5;
-
-  --color-lime-1: #1f2611;
-  --color-lime-2: #2e3c10;
-  --color-lime-3: #3e4f13;
-  --color-lime-4: #536d13;
-  --color-lime-5: #6f9412;
-  --color-lime-6: #8bbb11;
-  --color-lime-7: #a9d134;
-  --color-lime-8: #c9e75d;
-  --color-lime-9: #e4f88b;
-  --color-lime-10: #f0fab5;
-
-  --color-geekblue-1: #131629;
-  --color-geekblue-2: #161d40;
-  --color-geekblue-3: #1c2755;
-  --color-geekblue-4: #203175;
-  --color-geekblue-5: #263ea0;
-  --color-geekblue-6: #2b4acb;
-  --color-geekblue-7: #5273e0;
-  --color-geekblue-8: #7f9ef3;
-  --color-geekblue-9: #a8c1f8;
-  --color-geekblue-10: #d2e0fa;
-
-  --color-primary-bg: #0d086e;
-  --color-primary-bg-hover: #161087;
-  --color-primary-border: #201dad;
-  --color-primary-border-hover: #2f31d4;
-  --color-primary-hover: #6678ff;
-  --color-primary-base: #434dfa;
-  --color-primary-active: #8a99ff;
-  --color-primary-text-hover: #adbcff;
-  --color-primary-text: #d6dfff;
-  --color-primary-text-active: #ebf0ff;
-
-  --color-success-bg: var(--color-green-1);
-  --color-success-bg-hover: var(--color-green-2);
-  --color-success-border: var(--color-green-3);
-  --color-success-border-hover: var(--color-green-4);
-  --color-success-hover: var(--color-green-7);
-  --color-success-base: var(--color-green-6);
-  --color-success-active: var(--color-green-5);
-  --color-success-text-hover: var(--color-green-8);
-  --color-success-text: var(--color-green-9);
-  --color-success-text-active: var(--color-green-10);
-
-  --color-warning-bg: var(--color-gold-1);
-  --color-warning-bg-hover: var(--color-gold-2);
-  --color-warning-border: var(--color-gold-3);
-  --color-warning-border-hover: var(--color-gold-4);
-  --color-warning-hover: var(--color-gold-7);
-  --color-warning-base: var(--color-gold-6);
-  --color-warning-active: var(--color-gold-5);
-  --color-warning-text-hover: var(--color-gold-8);
-  --color-warning-text: var(--color-gold-9);
-  --color-warning-text-active: var(--color-gold-10);
-
-  --color-error-bg: var(--color-red-1);
-  --color-error-bg-hover: var(--color-red-2);
-  --color-error-border: var(--color-red-3);
-  --color-error-border-hover: var(--color-red-4);
-  --color-error-hover: var(--color-red-7);
-  --color-error-base: var(--color-red-6);
-  --color-error-active: var(--color-red-5);
-  --color-error-text-hover: var(--color-red-8);
-  --color-error-text: var(--color-red-9);
-  --color-error-text-active: var(--color-red-10);
-
-  --color-info-bg: var(--color-blue-1);
-  --color-info-bg-hover: var(--color-blue-2);
-  --color-info-border: var(--color-blue-3);
-  --color-info-border-hover: var(--color-blue-4);
-  --color-info-hover: var(--color-blue-7);
-  --color-info-base: var(--color-blue-6);
-  --color-info-active: var(--color-blue-5);
-  --color-info-text-hover: var(--color-blue-8);
-  --color-info-text: var(--color-blue-9);
-  --color-info-text-active: var(--color-blue-10);
-
-  /**
-    * @tokens Dark Main Colors
-    * @presenter Color
-    */
-  --color-bg-base: #ffffff;
-  --color-primary: var(--color-primary-base);
-  --color-error: var(--color-error-base);
-  --color-warning: var(--color-warning-base);
-  --color-success: var(--color-success-base);
-  --color-info: var(--color-info-base);
-
-  /**
-    * @tokens Font Colors
-    * @presenter Color
-    */
-  --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-link: var(--color-blue-6);
-
-  /**
-    * @tokens Elevation Colors
-    * @presenter Color
-    */
-
-  --bg-sunken: #0d0d0d; // Sunken is the lowest elevation available.
-  --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-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
-  --bg-overlay-shadow: 0px 16px 32px rgba(0, 0, 0, 0.6), 0px 6px 6px rgba(0, 0, 0, 0.4); // Use for dropdowns
-
-  /**
-    * @tokens Border Colors
-    * @presenter Color
-    */
-  --border-primary: #424242; // Raised dividers
-  --border-secondary: #222222; // Default dividers, borders
-
-  // @tokens End
+     * @tokens Dark Colors
+     * @presenter Color
+     */
+  --background-color: #141414;
+  --footer-background-color: #1f1f1f;
+  --navbar-background-color: #1f1f1f;
+  --mobile-menu-background: #141414;
+  --mobile-menu-profile-background: var(--mobile-menu-background);
+  --mobile-menu-login-button-background: var(--mobile-menu-profile-background);
+  --mobile-menu-item-text-color: rgba(255, 255, 255, 0.6);
+  --mobile-menu-item-active-color: #1f1f1f;
+  --mobile-menu-item-active-text-color: rgba(255, 255, 255, 0.85);
+  --mobile-menu-control-button-color: #ffffff;
+  --mobile-menu-profile-border-color: #222222;
+  --color-primary-500: #57a5fd;
+  --color-primary-300: #15396e;
+  --color-secondary-300: #22262e;
+  --colors-translucent: rgb(50 63 75 / 40%);
+  --inline-code-text-color: #f76663;
+  --color-emphasis-400: #fff;
+  --link-hover-text-color: #57a5fd;
+  --link-text-color: #57a5fd;
+  --code-block-background-color: #1e2633;
+  --admonition-attention-background-color: var(--color-primary-300);
+  --admonition-attention-icon-color: var(--color-emphasis-700);
+  --admonition-warning-background-color: #614b17;
+  --admonition-warning-icon-color: #4c3b12;
+  --admonition-success-background-color: #267e74;
+  --admonition-success-icon-color: #38b9a5;
+  --admonition-danger-background-color: #d6524c;
+  --admonition-danger-icon-color: #d13e37;
+  --admonition-info-background-color: #696969;
+  --admonition-info-icon-color: #505050;
+  --inline-code-background-color: #1e2633;
+  --toc-item-active-background-color: #1e2633;
+  --sidebar-item-active-background-color: #1e2633;
+  --panel-response-success-heading-background-color: #38b9a5;
+  --panel-response-success-border-color: #38b9a5;
+  --panel-response-error-heading-background-color: #d6524c;
+  --panel-response-error-border-color: #d6524c;
+  --panel-samples-heading-background-color: #1e2633;
+  --panel-samples-body-background-color: #263041;
+  --panel-samples-tabs-hover-background-color: #1e2633;
+  --panel-samples-tabs-hover-border-color: #3f4f68;
+  --panel-try-it-action-button-hover-border-color: #2b4cc4;
+  --panel-try-it-action-button-hover-background-color: #2b4cc4;
+  --panel-try-it-action-button-background-color: #0065fb;
+  --button-background-color: #0065fb;
+  --button-border-color: #0065fb;
+  --button-hover-background-color: #2b4cc4;
+  --button-hover-border-color: #2b4cc4;
+  --search-input-background-color: #1b2738;
+  --search-popover-background-color: #1b2738;
+  --search-highlight-text-color: #ffff03;
+  --search-item-text-color: #ffffffcf;
+  --search-item-title-text-color: #ffffff;
+  --search-item-active-text-color: var(--text-color);
+  --search-item-active-title-text-color: var(--text-color);
+  --search-item-active-background-color: #1b2738;
+  --panel-try-it-nested-body-background-color: #263041;
+  --panel-try-it-tabs-active-background-color: #11151d;
+  --panel-try-it-tabs-hover-background-color: #141a26;
+  --color-emphasis-100: #16202e;
+  --color-secondary-400: #696969;
+  --color-emphasis-700: #fff;
+  --color-emphasis-800: #fff;
+  --copy-button-tooltip-text-color: #fff;
+  --copy-button-tooltip-background-color: var(--tooltip-background-color);
+  --tooltip-text-color: #fff;
+  --md-table-head-background-color: var(--color-secondary-300);
+  --md-tabs-hover-tab-border-color: var(--color-secondary-500);
+  --thin-tile-background-color: #1d242d;
+  --wide-tile-background-color: #1d242d;
+  --page-404-header-text-color: #fff;
+  --page-404-description-text-color: #fff;
+  --page-403-header-text-color: #fff;
+  --page-403-description-text-color: #fff;
+  --checkbox-backround-color: var(--color-secondary-900);
+  --checkbox-checked-backround-color: var(--color-primary-400);
+  --select-list-item-active-background-color: #282828;
+  --dropdown-list-item-active-background-color: #282828;
+
+  background-color: var(--background-color);
+  color: var(--text-color);
 `;
 //# sourceMappingURL=darkColors.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.18.3-patch.0",
+  "version": "0.18.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.0.1"
+    "@redocly/portal-types": "1.0.2"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/I18n/LanguagePicker.tsx

@@ -5,16 +5,8 @@ import { getPathnameForLocale, withPathPrefix } from '@portal/utils';
 import { usePreloadHistory } from '@portal/usePreloadHistory';
 import { useI18nConfig } from '@portal/hooks';
 import { Select, SelectInput, SelectList, SelectListItem } from '@theme/components/Select';
-import { LanguageIcon } from '@theme/icons';
 
-interface LanguagePickerProps {
-  onChangeLanguage: (newLang: string) => void;
-  onlyIcon?: boolean;
-  placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
-}
-
-export const LanguagePicker = (props: LanguagePickerProps) => {
+export const LanguagePicker = (props: { onChangeLanguage: (newLang: string) => void }) => {
   const { currentLocale, locales, defaultLocale } = useI18nConfig();
   const history = usePreloadHistory();
 
@@ -45,17 +37,7 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
     </LanguageItem>
   ));
 
-  return (
-    <LanguageSelect
-      selected={selected}
-      options={languageItems}
-      triggerEvent="hover"
-      placement={props.placement}
-      alignment={props.alignment}
-      icon={<LanguageIcon />}
-      onlyIcon={props.onlyIcon}
-    />
-  );
+  return <LanguageSelect selected={selected} options={languageItems} triggerEvent="hover" />;
 };
 
 const LanguageSelect = styled(Select).attrs(() => ({
@@ -69,19 +51,12 @@ const LanguageSelect = styled(Select).attrs(() => ({
   line-height: var(--language-picker-line-height);
   border-radius: var(--language-picker-border-radius);
   color: var(--language-picker-text-color);
-  background-color: var(--language-picker-background-color);
 
   ${SelectInput} {
-    min-height: var(--language-picker-min-height);
-    color: var(--language-picker-text-color);
-    border: 1px solid var(--language-picker-border-color);
+    color: var(--navbar-text-color);
     border-radius: var(--language-picker-input-border-radius);
     padding: var(--language-picker-input-padding-vertical)
       var(--language-picker-input-padding-horizontal);
-
-    :hover {
-      border-color: var(--language-picker-hover-border-color);
-    }
   }
 
   ${SelectList} {
@@ -112,7 +87,7 @@ const LanguageSelect = styled(Select).attrs(() => ({
 
   :hover {
     text-decoration: var(--navbar-item-hover-text-decoration);
-    background: var(--language-picker-hover-background-color);
+    background: var(--navbar-item-hover-background-color);
   }
 `;
 const LanguageItem = styled.div``;

package/src/I18n/index.ts

@@ -1,2 +1 @@
 export { LanguagePicker } from '@theme/I18n/LanguagePicker';
-export * from '@theme/I18n/styledVariables';

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -3,14 +3,20 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export const Breadcrumb = (props: { label: string; link?: string; isActive: boolean }) => {
-  const { label, link, isActive } = props;
+export const Breadcrumb = (props: {
+  label: string;
+  link?: string;
+  isActive: boolean;
+  onClick?: () => void;
+}) => {
+  const { label, link, isActive, onClick } = props;
 
   return (
     <BreadcrumbWrapper
       data-component-name="Breadcrumbs/Breadcrumb"
       isLink={link != null}
       isActive={isActive}
+      onClick={onClick}
     >
       {link ? (
         <BreadcrumbLink to={link}>{label}</BreadcrumbLink>
@@ -49,9 +55,8 @@ const BreadcrumbWrapper = styled.div<{ isActive: boolean; isLink: boolean }>`
 
 const BreadcrumbLink = styled(Link)`
   text-decoration: none;
-  color: var(--breadcrumbs-text-color);
 
   &:visited {
-    color: var(--breadcrumbs-text-color);
+    color: inherit;
   }
 `;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useBreadcrumbs } from '@portal/Sidebar/useBreadcrumbs';
+import { telemetry } from '@portal/telemetry';
 
 import { Breadcrumb } from './Breadcrumb';
 
@@ -18,7 +19,18 @@ export const Breadcrumbs = (props: { className?: string }) => {
         const isLast = idx === breadcrumbs.length - 1;
         return (
           <React.Fragment key={idx}>
-            <Breadcrumb link={breadcrumb.link} label={breadcrumb.label} isActive={isLast} />
+            <Breadcrumb
+              link={breadcrumb.link}
+              label={breadcrumb.label}
+              isActive={isLast}
+              onClick={() => {
+                telemetry.send('breadcrumb_clicked', {
+                  link: breadcrumb.link,
+                  position: idx + 1,
+                  total_breadcrumbs: breadcrumbs.length,
+                });
+              }}
+            />
             {isLast ? null : <div>/</div>}
           </React.Fragment>
         );
@@ -36,7 +48,7 @@ const Container = styled.div`
   flex-wrap: wrap;
 
   > div {
-    padding: var(--breadcrumbs-padding);
+    padding-right: var(--breadcrumbs-padding-horizontal);
   }
 
   @media print {

package/src/components/Breadcrumbs/index.ts

@@ -1,3 +1,2 @@
 export * from '@theme/components/Breadcrumbs/Breadcrumbs';
 export * from '@theme/components/Breadcrumbs/Breadcrumb';
-export * from '@theme/components/Breadcrumbs/styledVariables';

package/src/components/Button/Button.tsx

@@ -5,12 +5,11 @@ import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export type ButtonSize = 'default' | 'small' | 'large' | string;
-export type ButtonColor = 'default' | 'primary' | string;
-export type ButtonVariant = 'outlined' | 'contained' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonVariant = 'outlined' | 'contained';
 
 export interface ButtonProps {
-  children?: React.ReactNode;
   color?: ButtonColor;
   disabled?: boolean;
   blinking?: boolean;
@@ -19,8 +18,6 @@ export interface ButtonProps {
   size?: ButtonSize;
   extraClass?: string;
   to?: string;
-  icon?: JSX.Element;
-  title?: string;
   onClick?: (e?: any) => void;
 }
 
@@ -40,57 +37,47 @@ const getBlink = (): Keyframes => keyframes`
   }
 `;
 
-const getSize = (size: ButtonSize = 'default'): FlattenSimpleInterpolation => css`
+const getSize = (size: ButtonSize = 'medium'): FlattenSimpleInterpolation => css`
   font-size: var(--button-${size}-font-size);
   padding: var(--button-${size}-padding);
   min-width: var(--button-${size}-min-width);
 `;
 
 export const baseButtonStyles = css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
   outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
   margin: var(--button-margin);
   cursor: pointer;
+  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   line-height: 1;
 
-  color: var(--button-color);
-  background-color: var(--button-background-color);
-  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
-  border-radius: var(--button-border-radius);
-
-  font-size: var(--button-font-size);
   font-family: var(--button-font-family);
-  font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
-    background-color: var(--button-hover-background-color);
-    border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 
   &:active {
     box-shadow: var(--button-active-box-shadow);
-    background-color: var(--button-active-background-color);
-    border: var(--button-border-width) var(--button-border-style) var(--button-active-border-color);
   }
 `;
 
-const StyledButtonLink = styled(Link)`
-  text-decoration: none;
-`;
-
 const StyledButton = styled.button.attrs(
   ({ color = 'default', extraClass, variant }: ButtonProps) => ({
-    className: `button-${color}${variant ? ` button-${variant}` : ''}${
+    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${
       extraClass ? ` ${extraClass}` : ''
     }`,
     'data-component-name': 'Button/Button',
   }),
 )<ButtonProps>`
+  text-decoration: none;
+  text-align: center;
+
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 
   ${baseButtonStyles}
@@ -98,20 +85,38 @@ const StyledButton = styled.button.attrs(
   ${({ variant }) =>
     variant === 'outlined'
       ? css`
-          background-color: var(--button-background-color);
-        `
-      : variant === 'text'
-      ? css`
-          border-color: transparent;
+          color: var(--button-background-color);
+          border: 2px solid var(--button-border-color);
           background-color: transparent;
-
           &:hover {
-            border-color: transparent;
+            color: var(--button-hover-background-color);
+            border: 2px solid var(--button-hover-border-color);
+          }
+
+          &:active {
+            color: var(--button-active-background-color);
+            border: 2px solid var(--button-active-border-color);
+          }
+
+          &:disabled {
+            color: var(--button-disabled-color);
             background-color: transparent;
-            box-shadow: none;
           }
         `
-      : ''};
+      : css`
+          color: var(--button-color);
+          border: 2px solid var(--button-background-color);
+          background-color: var(--button-background-color);
+          &:hover {
+            border: 2px solid var(--button-hover-background-color);
+            background-color: var(--button-hover-background-color);
+          }
+
+          &:active {
+            border: 2px solid var(--button-active-background-color);
+            background-color: var(--button-active-background-color);
+          }
+        `};
 
   ${({ size }) => getSize(size)}
 
@@ -134,30 +139,21 @@ const StyledButton = styled.button.attrs(
         cursor: default;
         color: var(--button-disabled-color);
         background-color: var(--button-disabled-background-color);
-        border-color: var(--button-disabled-border-color);
+        border-color: var(--button-disabled-background-color);
         pointer-events: none;
       }
     `}
 `;
 
-const StyledIcon = styled.span`
-  display: block;
-  height: var(--button-icon-height);
-  width: var(--button-icon-width);
-`;
-
 const ButtonComponent: React.FC<ButtonProps> = (props) => {
-  const button = (
-    <StyledButton {...props}>
-      {props.icon ? <StyledIcon>{props.icon}</StyledIcon> : null}
-      {props.children}
-    </StyledButton>
-  );
-
   if (props.to) {
-    return <StyledButtonLink to={props.to}>{button}</StyledButtonLink>;
+    return (
+      <Link to={props.to}>
+        <StyledButton {...props} />
+      </Link>
+    );
   } else {
-    return button;
+    return <StyledButton {...props} />;
   }
 };
 

package/src/components/Button/index.ts

@@ -1,2 +1 @@
 export * from '@theme/components/Button/Button';
-export * from '@theme/components/Button/styledVariables';