@redocly/theme/lib/components/Button/variables.js

Shared UI components lib

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.button = void 0;
const styled_components_1 = require("styled-components");
exports.button = (0, styled_components_1.css) `
  /** 
    * @tokens Button colors token 
    */

  --button-content-color: var(--color-warm-grey-10); // @presenter Color
  --button-content-color-ghost: var(--text-color-secondary); // @presenter Color
  --button-content-color-inverse: var(--color-white); // @presenter Color
  --button-content-color-disabled: var(--color-warm-grey-5); // @presenter Color

  --button-border-color: var(--color-warm-grey-3); // @presenter Color
  --button-border-color-focused: var(--color-blue-4); // @presenter Color
  --button-border-color-disabled: var(--color-warm-grey-2); // @presenter Color
  --button-border-color-danger: var(--color-raspberry-6); // @presenter Color
  --button-border-color-danger-hover: var(--color-raspberry-7); // @presenter Color
  --button-border-color-danger-pressed: var(--color-raspberry-8); // @presenter Color
  --button-border-width-disabled: 0px;

  --button-bg-color-disabled: var(--color-warm-grey-1); // @presenter Color

  --button-content-color-primary: var(--color-blue-6); // @presenter Color
  --button-content-color-primary-hover: var(--color-blue-7); // @presenter Color
  --button-content-color-primary-pressed: var(--color-blue-8); // @presenter Color

  --button-bg-color-primary: var(--color-blue-6); // @presenter Color
  --button-bg-color-primary-hover: var(--color-blue-7); // @presenter Color
  --button-bg-color-primary-pressed: var(--color-blue-8); // @presenter Color

  --button-bg-color-primary-danger: var(--color-raspberry-6); // @presenter Color
  --button-bg-color-primary-danger-hover: var(--color-raspberry-7); // @presenter Color
  --button-bg-color-primary-danger-pressed: var(--color-raspberry-8); // @presenter Color

  --button-content-color-danger: var(--color-raspberry-6); // @presenter Color
  --button-content-color-danger-hover: var(--color-raspberry-7); // @presenter Color
  --button-content-color-danger-pressed: var(--color-raspberry-8); // @presenter Color

  --button-bg-color-secondary: var(--color-warm-grey-2); // @presenter Color
  --button-bg-color-secondary-hover: var(--color-warm-grey-3); // @presenter Color
  --button-bg-color-secondary-pressed: var(--color-warm-grey-4); // @presenter Color
  --button-bg-color-secondary-danger: var(--color-raspberry-1); // @presenter Color
  --button-bg-color-secondary-danger-hover: var(--color-raspberry-2); // @presenter Color
  --button-bg-color-secondary-danger-pressed: var(--color-raspberry-3); // @presenter Color

  --button-content-color-custom: var(--color-warm-grey-8); // @presenter Color
  --button-content-color-custom-hover: var(--color-warm-grey-11); // @presenter Color
  --button-bg-color-custom: var(--color-white); // @presenter Color

  --button-content-color-link: var(--link-color-primary);
  --button-content-color-link-hover: var(--link-color-primary-hover);
  --button-content-color-link-pressed: var(--link-color-primary-pressed);

  /**
   * @tokens Button default values
   */

  --button-color: var(--button-content-color); // @presenter Color
  --button-color-hover: var(--button-content-color);
  --button-color-active: var(--button-content-color);

  --button-bg-color: transparent; // @presenter Color
  --button-bg-color-hover: transparent; // @presenter Color

  --button-border-color-hover: transparent; // @presenter Color
  --button-border-color-active: transparent; // @presenter Color

  --button-font-weight: var(--font-weight-regular);
  --button-font-size: var(--font-size-base);
  --button-line-height: var(--line-height-base);
  --button-border-radius: var(--border-radius-md);
  --button-padding: 5px var(--spacing-sm);
  --button-text-wrap: nowrap;
  --button-gap: var(--spacing-xs);

  --button-border-width: 0px; //@presenter Border
  --button-border-style: solid; //@presenter Border
  --button-margin: 0; // @presenter Spacing
  --button-box-shadow: none; // @presenter Shadow
  --button-hover-box-shadow: none; // @presenter Shadow
  --button-active-box-shadow: none; // @presenter Shadow

  --button-icon-size: 16px;
  --button-icon-padding: var(--spacing-xs); /* Padding for buttons with only icon */
  --button-icon-padding-small: 3px; /* Padding for small link and ghost buttons with only icon */
  --button-icon-left-padding: 5px var(--spacing-base) 5px 14px; /* Padding for buttons with icon on the left */
  --button-icon-right-padding: 5px 14px 5px var(--spacing-base); /* Padding for buttons with icon on the right */


  /**
    * @tokens Button size
    */

  .button-size-small {
    --button-border-radius: var(--border-radius);
    --button-padding: 1px var(--spacing-sm);
    
    --button-icon-size: 14px;
    --button-icon-padding: 5px; /* Padding for small buttons with only icon */
    --button-icon-left-padding: 1px var(--spacing-sm) 1px 10px; /* Padding for small buttons with icon on the left */
    --button-icon-right-padding: 1px 10px 1px var(--spacing-sm); /* Padding for small buttons with icon on the right */
  }

  .button-size-large {
    --button-font-size: var(--font-size-lg); // @presenter FontSize
    --button-line-height: var(--line-height-lg); // @presenter LineHeight
    --border-radius: var(--border-radius-lg);
    --button-padding: var(--spacing-xs) var(--spacing-md);
    
    --button-icon-size: 18px;
    --button-icon-padding: 11px; /* Padding for large buttons with only icon */
    --button-icon-left-padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) 18px; /* Padding for large buttons with icon on the left */
    --button-icon-right-padding: var(--spacing-xs) 18px var(--spacing-xs) var(--spacing-md); /* Padding for large buttons with icon on the right */
  }

  /**
    * @tokens Button variants
    */

  .button-variant-primary {
    --button-color: var(--button-content-color-inverse); // @presenter Color
    --button-color-hover: var(--button-content-color-inverse);
    --button-color-active: var(--button-content-color-inverse);
    --button-bg-color: var(--button-bg-color-primary); // @presenter Color
    --button-bg-color-hover: var(--button-bg-color-primary-hover); // @presenter Color
    --button-bg-color-active: var(--button-bg-color-primary-pressed); // @presenter Color
    --button-border-color: transparent; // @presenter Color

    --button-bg-color-danger: var(--button-bg-color-primary-danger);
    --button-bg-color-danger-hover: var(--button-bg-color-primary-danger-hover);
    --button-bg-color-danger-pressed: var(--button-bg-color-primary-danger-pressed);
    --button-border-color-danger: transparent;
    --button-border-color-danger-hover: transparent;
    --button-border-color-danger-pressed: transparent;
    --button-content-color-danger: var(--button-content-color-inverse);
    --button-content-color-danger-hover: var(--button-content-color-inverse);
    --button-content-color-danger-pressed: var(--button-content-color-inverse);
    --button-border-width-disabled: 0px;
  }

  .button-variant-secondary {
    --button-bg-color: var(--button-bg-color-secondary); // @presenter Color
    --button-bg-color-hover: var(--button-bg-color-secondary-hover); // @presenter Color
    --button-bg-color-active: var(--button-bg-color-secondary-pressed); // @presenter Color
    --button-border-color: transparent; // @presenter Color
    --button-border-color-disabled: transparent; // @presenter Color
     
    --button-bg-color-danger: var(--button-bg-color-secondary-danger);
    --button-bg-color-danger-hover: var(--button-bg-color-secondary-danger-hover);
    --button-bg-color-danger-pressed: var(--button-bg-color-secondary-danger-pressed);
    --button-border-color-danger: transparent;
    --button-border-color-danger-hover: transparent;
    --button-border-color-danger-pressed: transparent;
  }

  .button-variant-outlined {
    --button-color: var(--button-content-color-custom); // @presenter Color
    --button-color-hover: var(--button-content-color-custom-hover); // @presenter Color
    --button-color-active: var(--button-content-color-custom-hover); // @presenter Color
    --button-border-color: var(--border-color-primary); // @presenter Color
    --button-border-color-hover: var(--border-color-primary); // @presenter Color
    --button-border-color-active: var(--border-color-primary); // @presenter Color
    --button-bg-color-disabled: transparent; // @presenter Color
    --button-border-width: 1px; 
    --button-border-width-disabled: 1px;
  }

  .button-variant-text {
    --button-bg-color-hover: var(--button-bg-color-secondary); // @presenter Color
    --button-bg-color-active: var(--button-bg-color-secondary-hover); // @presenter Color
    --button-bg-color-disabled: transparent; // @presenter Color
    --button-border-color: transparent; // @presenter Color
    --button-border-color-disabled: transparent; // @presenter Color

    --button-bg-color-danger-hover: var(--button-bg-color-secondary-danger);
    --button-bg-color-danger-pressed: var(--button-bg-color-secondary-danger-hover);
    --button-border-color-danger: transparent;
    --button-border-color-danger-hover: transparent;
    --button-border-color-danger-pressed: transparent;
  }

  .button-variant-link {
    --button-color: var(--button-content-color-link);
    --button-color-hover: var(--button-content-color-link-hover); 
    --button-color-active: var(--button-content-color-link-pressed);
      
    --button-bg-color-disabled: transparent; // @presenter Color

    --button-border-color: transparent; // @presenter Color
    --button-border-color-disabled: transparent; // @presenter Color

    --button-border-color-danger: transparent;
    --button-border-color-danger-hover: transparent;
    --button-border-color-danger-pressed: transparent;
    --button-padding: 0;
    --button-icon-left-padding: 0;
    --button-icon-right-padding: 0;
  }

  .button-variant-ghost {
    --button-color: var(--button-content-color-ghost); // @presenter Color
    --button-color-hover: var(--button-content-color); // @presenter Color

    --button-bg-color-disabled: transparent; // @presenter Color

    --button-border-color: transparent; // @presenter Color
    --button-border-color-disabled: transparent; // @presenter Color

    --button-border-color-danger: transparent; // @presenter Color
    --button-border-color-danger-hover: transparent; // @presenter Color
    --button-border-color-danger-pressed: transparent; // @presenter Color
    --button-padding: 0;
    --button-icon-left-padding: 0;
    --button-icon-right-padding: 0;
  }

  // @tokens End
`;
//# sourceMappingURL=variables.js.map