@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/lib/components/Admonition/Admonition.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type AdmonitionTypeProps = {
+    type: 'warning' | 'success' | 'danger' | 'info';
+};
+export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
+    name?: string;
+    className?: string;
+    'data-source'?: string;
+    'data-hash'?: string;
+};
+export declare function Admonition({ type, name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
+export {};

package/lib/components/Admonition/Admonition.js

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Admonition = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const WarningFilledIcon_1 = require("../../icons/WarningFilledIcon/WarningFilledIcon");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
+const InformationFilledIcon_1 = require("../../icons/InformationFilledIcon/InformationFilledIcon");
+const IconsMap = {
+    warning: WarningFilledIcon_1.WarningFilledIcon,
+    success: CheckmarkFilledIcon_1.CheckmarkFilledIcon,
+    danger: CloseFilledIcon_1.CloseFilledIcon,
+    info: InformationFilledIcon_1.InformationFilledIcon,
+};
+function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    const Icon = IconsMap[type] || IconsMap['info'];
+    return (react_1.default.createElement(AdmonitionWrapper, { type: type, className: className, "data-component-name": "Admonition/Admonition", "data-source": dataSource, "data-hash": dataHash },
+        react_1.default.createElement(Icon, { color: `--admonition-${type}-icon-color` }),
+        react_1.default.createElement(TextContainer, null,
+            name ? react_1.default.createElement(Heading, { type: type }, name) : null,
+            children ? react_1.default.createElement(Content, null, children) : null)));
+}
+exports.Admonition = Admonition;
+const Content = styled_components_1.default.div `
+  & > p:first-child {
+    margin-top: 0;
+  }
+`;
+const AdmonitionWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
+  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
+  padding: var(--admonition-padding-vertical-xs) var(--admonition-padding-horizontal);
+  border-radius: var(--admonition-border-radius);
+  font-size: var(--admonition-font-size);
+  font-weight: var(--admonition-font-weight);
+  line-height: var(--admonition-line-height);
+
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+
+  ${({ type }) => (0, styled_components_1.css) `
+    background-color: var(--admonition-${type}-bg-color);
+    color: var(--admonition-${type}-text-color);
+    border-left: var(--admonition-${type}-border);
+  `};
+
+  &:has(${Content}) {
+    padding: var(--admonition-padding-vertical-md) var(--admonition-padding-horizontal);
+  }
+
+  &:not(:has(${Content})) {
+    --admonition-heading-font-size: var(--admonition-font-size);
+    --admonition-heading-line-height: var(--admonition-line-height);
+    --admonition-icon-size: 16px;
+
+    align-items: center;
+    gap: calc(var(--spacing-xxs) * 1.5);
+  }
+
+  svg {
+    width: var(--admonition-icon-size);
+    height: var(--admonition-icon-size);
+    flex-shrink: 0;
+
+    fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
+
+    background-image: ${({ type }) => `var(--admonition-${type}-icon)`};
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+`;
+const TextContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+  width: 100%;
+`;
+const Heading = styled_components_1.default.div `
+  letter-spacing: var(--admonition-heading-letter-spacing);
+  color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
+
+  && {
+    font-size: var(--admonition-heading-font-size);
+    font-weight: var(--admonition-heading-font-weight);
+    line-height: var(--admonition-heading-line-height);
+    text-transform: var(--admonition-heading-transform);
+  }
+`;
+//# sourceMappingURL=Admonition.js.map

package/lib/components/Admonition/variables.d.ts

@@ -0,0 +1 @@
+export declare const admonition: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Admonition/variables.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.admonition = void 0;
+const styled_components_1 = require("styled-components");
+exports.admonition = (0, styled_components_1.css) `
+  /* === Admonitions === */
+
+  /**
+  * @tokens Admonition typography
+  */
+
+  --admonition-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-font-size: var(--font-size-lg); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-heading-line-height: var(--line-height-lg); // @presenter LineHeight
+  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-transform: none;
+
+  /**
+  * @tokens Admonition spacing
+  * @presenter Spacing
+  */
+
+  --admonition-margin-horizontal: 0;
+  --admonition-margin-vertical: var(--spacing-lg);
+  --admonition-padding-horizontal: var(--spacing-base);
+  --admonition-padding-vertical-xs: var(--spacing-xs);
+  --admonition-padding-vertical-md: var(--spacing-md);
+  --admonition-icon-size: 24px;
+
+  /**
+  * @tokens Admonition border
+  */
+
+  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-style: var(--border-style);
+  --admonition-border-width: calc(var(--border-width) * 4);
+
+  /**
+  * @tokens Admonition type info
+  */
+
+  --admonition-info-bg-color: var(--color-info-bg); // @presenter Color
+  --admonition-info-heading-text-color: var(--text-color-primary); // @presenter Color
+  --admonition-info-text-color: var(--text-color-secondary); // @presenter Color
+  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
+  --admonition-info-border-color: var(--color-info-border); // @presenter Color
+  --admonition-info-border-style: var(--admonition-border-style);
+  --admonition-info-border-width: var(--admonition-border-width);
+  --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style) var(--admonition-info-border-color); // @presenter Border
+  --admonition-info-icon: none;
+
+  /**
+  * @tokens Admonition type warning
+  */
+
+  /* warning */
+  --admonition-warning-bg-color: var(--color-warning-bg); // @presenter Color
+  --admonition-warning-text-color: var(--text-color-secondary); // @presenter Color
+  --admonition-warning-heading-text-color: var(--text-color-primary); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
+  --admonition-warning-border-color: var(--color-warning-border); // @presenter Color
+  --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-warning-border: var(--admonition-warning-border-width) var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
+  --admonition-warning-icon: none;
+
+  /**
+  * @tokens Admonition type danger
+  */
+
+  --admonition-danger-bg-color: var(--color-error-bg); // @presenter Color
+  --admonition-danger-text-color: var(--text-color-secondary); // @presenter Color
+  --admonition-danger-heading-text-color: var(--text-color-primary); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
+  --admonition-danger-border-color: var(--color-error-border); // @presenter Color
+  --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-danger-border: var(--admonition-danger-border-width) var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
+  --admonition-danger-icon: none;
+
+  /**
+  * @tokens Admonition type success
+  */
+
+  --admonition-success-bg-color: var(--color-success-bg); // @presenter Color
+  --admonition-success-text-color: var(--text-color-secondary); // @presenter Color
+  --admonition-success-heading-text-color: var(--text-color-primary); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
+  --admonition-success-border-color: var(--color-success-border); // @presenter Color
+  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
+  --admonition-success-icon: none;
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Badge/Badge.d.ts

@@ -0,0 +1,5 @@
+export declare const Badge: import("styled-components").StyledComponent<"span", any, {
+    'data-component-name': string;
+} & {
+    deprecated?: boolean | undefined;
+}, "data-component-name">;

package/lib/components/Badge/Badge.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+exports.Badge = styled_components_1.default.span.attrs({
+    'data-component-name': 'Badge/Badge',
+}) `
+  display: inline-block;
+  padding: 0 var(--spacing-xs);
+  vertical-align: middle;
+  line-height: var(--line-height-base);
+  color: var(--badge-text-color);
+  background-color: var(--badge-bg-color);
+  border-radius: var(--badge-border-radius);
+  margin: 0 0 0 0.5em;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+
+  ${({ deprecated }) => deprecated &&
+    (0, styled_components_1.css) `
+      color: var(--badge-deprecated-text-color);
+      background-color: var(--badge-deprecated-bg-color);
+      border-radius: var(--badge-deprecated-border-radius);
+    `}
+`;
+//# sourceMappingURL=Badge.js.map

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
-export declare const Breadcrumb: (props: {
+/// <reference types="react" />
+type BreadcrumbProps = {
     label: string;
     link?: string;
     isActive: boolean;
     onClick?: () => void;
-}) => React.JSX.Element;
+};
+export declare const Breadcrumb: ({ label, link, isActive, onClick }: BreadcrumbProps) => JSX.Element;
+export {};

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Link_1 = require("../../mocks/Link");
-const Breadcrumb = (props) => {
-    const { label, link, isActive, onClick } = props;
+const Link_1 = require("../../components/Link/Link");
+const Breadcrumb = ({ label, link, isActive, onClick }) => {
     return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive, onClick: onClick }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
 };
 exports.Breadcrumb = Breadcrumb;
@@ -21,13 +20,13 @@ const BreadcrumbWrapper = styled_components_1.default.div `
   ${(props) => props.isLink &&
     `
     &:hover {
-      text-decoration: var(--breadcrumbs-hover-text-decoration);
+      text-decoration: var(--breadcrumbs-text-decoration-hover);
     }
   `}
 
   ${(props) => props.isActive &&
     `
-    color: var(--breadcrumbs-active-text-color);
+    color: var(--breadcrumbs-text-color-active);
   `}
 `;
 const BreadcrumbLink = (0, styled_components_1.default)(Link_1.Link) `

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -6,19 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumbs = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const useBreadcrumbs_1 = require("../../mocks/Sidebar/useBreadcrumbs");
-const telemetry_1 = require("../../mocks/telemetry");
+const hooks_1 = require("../../core/hooks");
 const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
 const Breadcrumbs = (props) => {
-    const breadcrumbs = (0, useBreadcrumbs_1.useBreadcrumbs)();
+    const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const breadcrumbs = useBreadcrumbs();
     if (breadcrumbs.length === 0) {
         return null;
     }
-    return (react_1.default.createElement(Container, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, breadcrumbs.map((breadcrumb, idx) => {
+    return (react_1.default.createElement(BreadcrumbsWrapper, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, breadcrumbs.map((breadcrumb, idx) => {
         const isLast = idx === breadcrumbs.length - 1;
         return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
             react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast, onClick: () => {
-                    telemetry_1.telemetry.send('breadcrumb_clicked', {
+                    telemetry.send('breadcrumb_clicked', {
                         link: breadcrumb.link,
                         position: idx + 1,
                         total_breadcrumbs: breadcrumbs.length,
@@ -28,7 +29,7 @@ const Breadcrumbs = (props) => {
     })));
 };
 exports.Breadcrumbs = Breadcrumbs;
-const Container = styled_components_1.default.div `
+const BreadcrumbsWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
   align-items: center;

package/lib/components/Breadcrumbs/variables.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbs = void 0;
+const styled_components_1 = require("styled-components");
+exports.breadcrumbs = (0, styled_components_1.css) `
+  /**
+   * @tokens Breadcrumbs
+   */
+
+  --breadcrumbs-text-color: var(--text-color-description); // @presenter Color
+  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
+  --breadcrumbs-text-color-active: var(--text-color-primary); // @presenter Color
+  --breadcrumbs-text-decoration-hover: underline; // @presenter TextDecoration
+  --breadcrumbs-padding: 0; // @presenter Spacing
+  --breadcrumbs-gap: var(--spacing-xs);
+  --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Button/Button.d.ts

@@ -1,22 +1,23 @@
 import React from 'react';
-import type { FlattenSimpleInterpolation } from 'styled-components';
-export type ButtonSize = 'default' | 'small' | 'large' | string;
-export type ButtonColor = 'default' | 'primary' | string;
-export type ButtonVariant = 'outlined' | 'contained' | 'text';
-export interface ButtonProps {
+export type ButtonSize = 'small' | 'medium' | 'large' | string;
+export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text' | 'link' | 'ghost' | string;
+type ButtonTone = 'default' | 'danger';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children?: React.ReactNode;
-    color?: ButtonColor;
     disabled?: boolean;
     blinking?: boolean;
     fullWidth?: boolean;
     variant?: ButtonVariant;
+    tone?: ButtonTone;
     size?: ButtonSize;
     extraClass?: string;
     to?: string;
     icon?: JSX.Element;
+    iconPosition?: 'left' | 'right';
     title?: string;
     onClick?: (e?: any) => void;
     type?: 'button' | 'submit' | 'reset';
 }
-export declare const baseButtonStyles: FlattenSimpleInterpolation;
-export declare const Button: import("styled-components").StyledComponent<React.FC<ButtonProps>, any, {}, never>;
+export declare function generateClassName({ variant, tone, size, extraClass, }: ButtonProps): string;
+export declare const Button: import("styled-components").StyledComponent<React.FC<ButtonProps>, any, ButtonProps, never>;
+export {};

package/lib/components/Button/Button.js

@@ -26,129 +26,147 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.baseButtonStyles = void 0;
+exports.Button = exports.generateClassName = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const Link_1 = require("../../mocks/Link");
+const Link_1 = require("../../components/Link/Link");
 const getBlink = () => (0, styled_components_1.keyframes) `
-  0% {
-    color: var(--button-color);
-    background-color: var(--button-active-background-color);
-  }
+    0% {
+        color: var(--button-content-color);
+        background-color: var(--button-bg-color-active);
+    }
 
-  50% {
-    background-color: var(--button-background-color);
-  }
+    50% {
+        background-color: var(--button-bg-color);
+    }
 
-  100% {
-    color: var(--button-color);
-    background-color: var(--button-active-background-color);
-  }
+    100% {
+        color: var(--button-content-color);
+        background-color: var(--button-bg-color-active);
+    }
 `;
-const getSize = (size = 'default') => (0, styled_components_1.css) `
-  font-size: var(--button-${size}-font-size);
-  padding: var(--button-${size}-padding);
-  min-width: var(--button-${size}-min-width);
+const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+  & + & {
+    margin-left: var(--spacing-xs);
+  }
+  &:focus-visible {
+    outline: 1px solid var(--button-border-color-focused);
+  }
+  border-radius: var(--button-border-radius);
 `;
-exports.baseButtonStyles = (0, styled_components_1.css) `
+function generateClassName({ variant = 'secondary', tone = 'default', size = 'medium', extraClass = '', }) {
+    const classNames = [
+        extraClass,
+        `button-tone-${tone}`,
+        `button-variant-${variant}`,
+        `button-size-${size}`,
+    ];
+    return classNames
+        .filter((className) => className)
+        .join(' ')
+        .trim();
+}
+exports.generateClassName = generateClassName;
+const StyledButton = styled_components_1.default.button.attrs((props) => ({
+    className: generateClassName(props),
+})) `
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-xs);
-  outline: none;
+  gap: var(--button-gap);
   margin: var(--button-margin);
   cursor: pointer;
-  line-height: 1;
+  text-wrap: var(--button-text-wrap);
 
   color: var(--button-color);
-  background-color: var(--button-background-color);
+  background-color: var(--button-bg-color);
   border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
-  border-radius: var(--button-border-radius);
+  box-shadow: var(--button-box-shadow);
 
-  font-size: var(--button-font-size);
-  font-family: var(--button-font-family);
   font-weight: var(--button-font-weight);
-  box-shadow: var(--button-box-shadow);
-  text-wrap: var(--button-text-wrap);
+  font-size: var(--button-font-size);
+  line-height: var(--button-line-height);
+  padding: ${({ icon, iconPosition, iconOnly }) => icon
+    ? `var(--button-icon-${iconOnly ? '' : `${iconPosition || 'left'}-`}padding)`
+    : 'var(--button-padding)'};
+  border-radius: var(--button-border-radius);
+
+  svg {
+    width: var(--button-icon-size);
+    height: var(--button-icon-size);
+  }
 
   &:hover {
-    box-shadow: var(--button-hover-box-shadow);
-    background-color: var(--button-hover-background-color);
-    color: var(--button-hover-color, var(--button-color));
-    border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
+    background-color: var(--button-bg-color-hover);
+    color: var(--button-color-hover);
+    border-color: var(--button-border-color-hover);
   }
 
-  &: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);
+  &:active,
+  &.active {
+    background-color: var(--button-bg-color-active);
+    border-color: var(--button-border-color-active);
+    color: var(--button-color-active);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--button-border-color-focused);
   }
-`;
-const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
-  text-decoration: none;
-`;
-const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
-    className: `button-${color}${variant ? ` button-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
-    'data-component-name': 'Button/Button',
-})) `
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 
-  ${exports.baseButtonStyles}
-
-  ${({ variant }) => variant === 'outlined'
-    ? (0, styled_components_1.css) `
-          background-color: var(--button-background-color);
-        `
-    : variant === 'text'
-        ? (0, styled_components_1.css) `
-          color: var(--button-color);
-          border-color: var(--button-border-color);
-          background-color: var(--button-background-color);
-
-          &:hover {
-            color: var(--button-hover-color);
-            border-color: var(--button-hover-border-color);
-            background-color: var(--button-hover-background-color);
-            box-shadow: none;
-          }
-        `
-        : ''};
-
-  ${({ size }) => getSize(size)}
+  &.button-tone-danger {
+    color: var(--button-content-color-danger);
+    border-color: var(--button-border-color-danger);
+    background-color: var(--button-bg-color-danger);
+
+    &:hover {
+      color: var(--button-content-color-danger-hover);
+      border-color: var(--button-border-color-danger-hover);
+      background-color: var(--button-bg-color-danger-hover);
+    }
+
+    &:active {
+      color: var(--button-content-color-danger-pressed);
+      border-color: var(--button-border-color-danger-pressed);
+      background-color: var(--button-bg-color-danger-pressed);
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+    background-color: var(--button-bg-color-disabled);
+    color: var(--button-content-color-disabled);
+    border-color: var(--button-border-color-disabled);
+    border-width: var(--button-border-width-disabled);
+  }
 
   & + & {
-    margin-left: 0.85em;
+    margin-left: var(--spacing-xs);
   }
 
-  ${({ blinking }) => blinking &&
+  ${({ variant, size }) => (variant === 'link' || variant === 'ghost') &&
+    size === 'small' &&
     (0, styled_components_1.css) `
-      pointer-events: none;
-      animation: ${getBlink()} 1.2s infinite;
+      --button-font-size: var(--font-size-sm);
+      --button-line-height: var(--line-height-sm);
+      --button-icon-padding: var(--button-icon-padding-small) !important;
     `}
 
-  ${({ disabled }) => disabled &&
+  ${({ blinking }) => blinking &&
     (0, styled_components_1.css) `
-      &,
-      &:hover {
-        cursor: default;
-        color: var(--button-disabled-color);
-        background-color: var(--button-disabled-background-color);
-        border-color: var(--button-disabled-border-color);
-        pointer-events: none;
-      }
+      pointer-events: none;
+      animation: ${getBlink()} 1.2s infinite;
     `}
 `;
-const StyledIcon = styled_components_1.default.span `
-  display: block;
-  height: var(--button-icon-height);
-  width: var(--button-icon-width);
-`;
 const ButtonComponent = (props) => {
-    const button = (react_1.default.createElement(StyledButton, Object.assign({}, props),
-        props.icon ? react_1.default.createElement(StyledIcon, null, props.icon) : null,
-        props.children));
+    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, props, { iconOnly: !props.children && props.icon !== null, tabIndex: props.to ? -1 : 0 }),
+        props.icon && props.iconPosition !== 'right' && props.icon,
+        props.children,
+        props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return (react_1.default.createElement(StyledButtonLink, { to: props.to, onClick: props.onClick }, button));
+        return react_1.default.createElement(StyledButtonLink, { to: props.to }, button);
     }
     else {
         return button;