@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/scss/core/core.scss

@@ -1,21 +0,0 @@
-@import "functions";
-@import "variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "typography";
-@import "grid";
-// The react-loading-skeleton package.json defines an 'exports' field which specifies a '.css'
-// extension on this export.  Without the '.css' on the end of this line, webpack can't find the file
-// and the build fails.
-// See https://webpack.js.org/guides/package-exports/ for more information on how webpack uses
-// the 'exports' field.
-@import "~react-loading-skeleton/dist/skeleton.css";
-@import "~bootstrap/scss/transitions";
-@import "utilities";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/print";
-
-// Paragon components
-@import "../../src/index";

package/src/ActionRow/_variables.scss

@@ -1,2 +0,0 @@
-$action-row-gap-x:                   .5rem !default;
-$action-row-gap-y:                   .5rem !default;

package/src/Alert/_variables.scss

@@ -1,24 +0,0 @@
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-$alert-padding-y:                   1.5rem !default;
-$alert-padding-x:                   1.5rem !default;
-$alert-margin-bottom:               1rem !default;
-$alert-border-radius:               $border-radius !default;
-$alert-link-font-weight:            $font-weight-normal !default;
-$alert-border-width:                0 !default;
-$alert-title-color:                 #000000 !default;
-$alert-box-shadow:                  0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
-
-$alert-bg-level:                    -10 !default;
-$alert-border-level:                -9 !default;
-$alert-color-level:                 6 !default;
-
-$alert-icon-space:                  .8rem !default;
-
-$alert-font-size:                   .875rem !default;
-$alert-line-height:                 1.5rem !default;
-$alert-content-color:               $gray-700 !default;
-
-$alert-actions-gap:                 map-get($spacers, 3);

package/src/Annotation/_variables.scss

@@ -1,18 +0,0 @@
-$annotation-padding:               .5rem !default;
-$annotation-box-shadow:            drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
-$annotation-border-radius:         .25rem !default;
-$annotation-max-width:             18.75rem !default;
-$annotation-font-size:             $font-size-sm !default;
-$annotation-line-height:           $line-height-sm !default;
-
-$annotation-variants: (
-  "success": ( "background-color": $success, "color": $white ),
-  "warning": ( "background-color": $accent-b, "color": $black ),
-  "error":   ( "background-color": $danger, "color": $white ),
-  "light":   ( "background-color": $white, "color": $primary-500 ),
-  "dark":    ( "background-color": $dark, "color": $white ),
-) !default;
-
-$annotation-arrow-side-margin:     .25rem !default;
-$annotation-arrow-border-width:    .5rem !default;

package/src/Avatar/_variables.scss

@@ -1,10 +0,0 @@
-$avatar-border-radius:               100% !default;
-$avatar-border:                      solid 1px $light-300 !default;
-
-$avatar-size-xs:                     1.5rem !default;
-$avatar-size-sm:                     2.25rem !default;
-$avatar-size:                        3rem !default;
-$avatar-size-lg:                     4rem !default;
-$avatar-size-xl:                     6rem !default;
-$avatar-size-xxl:                    11.5rem !default;
-$avatar-size-huge:                   18.75rem !default;

package/src/AvatarButton/_variables.scss

@@ -1,3 +0,0 @@
-$avatar-button-padding-left: .25em !default;
-$avatar-button-padding-left-sm: .25em !default;
-$avatar-button-padding-left-lg: .25em !default;

package/src/Badge/_variables.scss

@@ -1,16 +0,0 @@
-// Badges
-
-$badge-font-size:                   75% !default;
-$badge-font-weight:                 $font-weight-bold !default;
-$badge-padding-y:                   .125rem !default;
-$badge-padding-x:                   .5rem !default;
-$badge-border-radius:               .25rem !default;
-
-$badge-transition:                  none !default;
-$badge-focus-width:                 $input-btn-focus-width !default;
-
-$badge-pill-padding-x:              .6em !default;
-
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius:          10rem !default;

package/src/Breadcrumb/_variables.scss

@@ -1,27 +0,0 @@
-// Breadcrumbs
-
-$breadcrumb-font-size:              null !default;
-
-$breadcrumb-padding-y:              .75rem !default;
-$breadcrumb-padding-x:              1rem !default;
-$breadcrumb-item-padding:           .5rem !default;
-
-$breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-margin-left:           .5rem !default;
-
-$breadcrumb-border-focus-axis-x:    .25rem !default;
-$breadcrumb-border-focus-axis-y:    .5rem !default;
-
-$breadcrumb-border-focus-width:     .0625rem !default;
-
-$breadcrumb-bg:                     $gray-200 !default;
-$breadcrumb-divider-color:          $gray-600 !default;
-$breadcrumb-active-color:           $gray-500 !default;
-$breadcrumb-inverse-active:         $light-500 !default;
-$breadcrumb-inverse-spacer:         $light-700 !default;
-$breadcrumb-color:                  $primary-500 !default;
-$breadcrumb-inverse-color:          $white !default;
-$breadcrumb-divider:                "/" !default;
-
-$breadcrumb-border-radius:          $border-radius !default;
-$breadcrumb-focus-border-radius:          .125rem !default;

package/src/Bubble/_variables.scss

@@ -1,8 +0,0 @@
-$bubble-variants: (
-  "success":    ( "background-color": $success, "color": $white ),
-  "warning":    ( "background-color": $warning, "color": $white ),
-  "error":      ( "background-color": $danger, "color": $white ),
-  "primary":    ( "background-color": $primary, "color": $white ),
-) !default;
-$bubble-expandable-padding-x:              .25rem !default;
-$bubble-expandable-padding-y:              0 !default;

package/src/Button/_variables.scss

@@ -1,52 +0,0 @@
-$btn-padding-y:               $input-btn-padding-y !default;
-$btn-padding-x:               $input-btn-padding-x !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $input-btn-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
-$btn-line-height-sm:          $input-btn-line-height-sm !default;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            $input-btn-font-size-lg !default;
-$btn-line-height-lg:          $input-btn-line-height-lg !default;
-
-$btn-border-width:            $input-btn-border-width !default;
-
-$btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             2px !default;
-$btn-focus-gap:               $btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       none;
-
-$btn-tertiary-color:          $gray-700 !default;
-$btn-tertiary-bg:             transparent !default;
-$btn-tertiary-hover-bg:       $light-500 !default;
-$btn-tertiary-active-bg:      $light-500 !default;
-$btn-inverse-tertiary-color:          $white !default;
-$btn-inverse-tertiary-bg:             transparent !default;
-$btn-inverse-tertiary-hover-bg:       rgba(255, 255, 255, .1) !default;
-$btn-inverse-tertiary-active-bg:      rgba(255, 255, 255, .1) !default;
-
-$btn-link-disabled-color:     theme-color("gray", "light-text") !default;
-
-$btn-block-spacing-y:         .5rem !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-
-$btn-transition: null;
-
-$btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
-$btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
-
-$btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
-$btn-focus-border-radius-lg: $btn-focus-border-radius !default;
-$btn-focus-border-radius-sm: $btn-border-radius !default;

package/src/Button/deprecated/Button.test.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Button from '.';
-
-const defaultProps = {
-  label: 'Click me!',
-};
-
-describe('<Button />', () => {
-  it('renders', () => {
-    const { getByText } = render(<Button {...defaultProps} />);
-    const button = getByText(defaultProps.label);
-    expect(button).toBeInTheDocument();
-  });
-
-  it('puts focus on button on click', () => {
-    const { getByText } = render(<Button {...defaultProps} />);
-    const button = getByText(defaultProps.label);
-
-    expect(button).not.toHaveFocus();
-    userEvent.click(button);
-    expect(button).toHaveFocus();
-  });
-
-  it('calls onClick prop on click', () => {
-    const onClickSpy = jest.fn();
-    const { getByText } = render(<Button {...defaultProps} onClick={onClickSpy} />);
-    const button = getByText(defaultProps.label);
-
-    userEvent.click(button);
-    expect(onClickSpy).toHaveBeenCalledTimes(1);
-  });
-});

package/src/Button/deprecated/index.jsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import withDeprecatedProps, { DeprTypes } from '../../withDeprecatedProps';
-
-class DeprecatedButton extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const {
-      onBlur,
-      onKeyDown,
-    } = props;
-
-    this.onBlur = onBlur.bind(this);
-    this.onKeyDown = onKeyDown.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.setRefs = this.setRefs.bind(this);
-  }
-
-  /*
-    The button component is given focus explicitly in its onClick to account
-    for the fact that an HTML <button> element in Firefox and Safari does not get
-    focus on onClick.
-
-    See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button.
-  */
-  onClick(e) {
-    this.buttonRef.focus();
-    this.props.onClick(e);
-  }
-
-  /*
-    The button component needs a ref to itself to be able to force
-    focus in its onClick function (buttonRef). It also needs to accept
-    a callback function from parent components to give those parents
-    a reference to their child button (e.g. for the modal component).
-    Therefore, both have been wrapped in a function bound on the class,
-    since one cannot set two ref attributes on a component.
-  */
-  setRefs(input) {
-    this.buttonRef = input;
-    this.props.inputRef(input);
-  }
-
-  render() {
-    const {
-      buttonType,
-      className,
-      children,
-      isClose,
-      type,
-      /* inputRef is not used directly in the render, but it needs to be assigned
-        here to prevent it from being passed to the HTML button component as part
-        of other.
-      */
-      inputRef,
-      ...other
-    } = this.props;
-
-    return (
-      <button
-        {...other}
-        className={classNames([
-          'btn',
-          className,
-        ], {
-          [`btn-${buttonType}`]: buttonType !== undefined,
-        }, {
-          close: isClose,
-        })}
-        onBlur={this.onBlur}
-        onClick={this.onClick}
-        onKeyDown={this.onKeyDown}
-        // eslint-disable-next-line react/button-has-type
-        type={type}
-        ref={this.setRefs}
-
-      >
-        {children}
-      </button>
-    );
-  }
-}
-
-export const buttonPropTypes = {
-  /** Used to determine the type of button to be rendered.  See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable button types. For example, `buttonType="light"`. The default is `undefined`. */
-  buttonType: PropTypes.string,
-  /** Specifies Bootstrap class names to apply to the button. See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable class names. The default is an empty array. */
-  className: PropTypes.string,
-  /** Specifies the text that is displayed within the button. */
-  children: PropTypes.node.isRequired,
-  // eslint-disable-next-line max-len
-  /** A function that defines a reference for the button. An example `inputRef` from the calling component could look something like: `inputRef={(input) => { this.button = input; }}`. The default is an empty function. */
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
-  ]),
-  /** Used to determine if the button is a "Close" style button to leverage bootstrap styling. Example use case is with the Status Alert [dismiss button](https://getbootstrap.com/docs/4.0/components/alerts/#dismissing). The default is false. */
-  isClose: PropTypes.bool,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onBlur` event is triggered. For example, the button could change in color or `buttonType` when focus is changed. The default is an empty function. */
-  onBlur: PropTypes.func,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onClick` event is triggered. For example, the button could launch a `Modal`. The default is an empty function. */
-  onClick: PropTypes.func,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.  For example, this could handle using the `Escape` key to trigger the button's action. The default is an empty function. */
-  onKeyDown: PropTypes.func,
-  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */
-  type: PropTypes.string,
-  /** Specifies variant to use. */
-  variant: PropTypes.oneOf([
-    'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link', 'outline-primary',
-    'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light',
-  ]),
-};
-
-DeprecatedButton.propTypes = buttonPropTypes;
-
-DeprecatedButton.defaultProps = {
-  buttonType: undefined,
-  className: undefined,
-  inputRef: () => {},
-  isClose: false,
-  onBlur: () => {},
-  onKeyDown: () => {},
-  onClick: () => {},
-  type: 'button',
-  variant: 'outline-primary',
-};
-
-export default withDeprecatedProps(DeprecatedButton, 'Button', {
-  label: {
-    deprType: DeprTypes.MOVED,
-    newName: 'children',
-  },
-  className: {
-    deprType: DeprTypes.FORMAT,
-    expect: value => typeof value === 'string',
-    transform: value => (Array.isArray(value) ? value.join(' ') : value),
-    message: 'It should be a string.',
-  },
-});

package/src/Button/index.tsx

@@ -1,159 +0,0 @@
-import React from 'react';
-import PropTypes, { type Requireable } from 'prop-types';
-import classNames from 'classnames';
-import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';
-import BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';
-import BaseButtonToolbar, { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';
-import type { ComponentWithAsProp } from '../utils/types/bootstrap';
-// @ts-ignore - we're not going to bother adding types for the deprecated button
-import ButtonDeprecated from './deprecated';
-
-import Icon from '../Icon';
-
-interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
-  /**
-   * An icon component to render. Example:
-   * ```
-   * import { Close } from '@openedx/paragon/icons';
-   * <Button iconBefore={Close}>Close</Button>
-   * ```
-   */
-  iconBefore?: React.ComponentType;
-  /**
-   * An icon component to render. Example:
-   * ```
-   * import { Close } from '@openedx/paragon/icons';
-   * <Button iconAfter={Close}>Close</Button>
-   * ```
-   */
-  iconAfter?: React.ComponentType;
-  size?: 'sm' | 'md' | 'lg' | 'inline';
-}
-
-type ButtonType = ComponentWithAsProp<'button', ButtonProps> & { Deprecated?: any };
-
-const Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({
-  children,
-  iconAfter,
-  iconBefore,
-  size,
-  ...props
-}, ref) => (
-  <BaseButton
-    size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
-    {...props}
-    className={classNames(props.className)}
-    ref={ref}
-  >
-    {iconBefore && <Icon className="btn-icon-before" size={size} src={iconBefore} />}
-    {children}
-    {iconAfter && <Icon className="btn-icon-after" size={size} src={iconAfter} />}
-  </BaseButton>
-));
-
-Button.propTypes = {
-  /** Specifies class name to apply to the button */
-  className: PropTypes.string,
-  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
-  disabled: PropTypes.bool,
-  /** Specifies the text that is displayed within the button. */
-  children: PropTypes.node.isRequired,
-  /** A function that would specify what the button should do when the `onClick` event is triggered.
-   * For example, the button could launch a `Modal`. The default is an empty function. */
-  onClick: PropTypes.func,
-  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.
-   * For example, this could handle using the `Escape` key to trigger the button's action.
-   * The default is an empty function. */
-  onKeyDown: PropTypes.func,
-  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */
-  type: PropTypes.string,
-  /** Specifies variant to use.
-   * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,
-   * `light`, `link`
-   *
-   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`
-   * or `inverse-outline-`)
-   * */
-  variant: PropTypes.string,
-  /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
-  // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally
-  // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.
-  // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).
-};
-
-Button.defaultProps = {
-  ...Button.defaultProps,
-  children: undefined,
-  className: undefined,
-  iconBefore: undefined,
-  iconAfter: undefined,
-  disabled: false,
-};
-
-Button.Deprecated = ButtonDeprecated;
-
-// We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently
-// override them to add propTypes validation at runtime, since most Paragon
-// consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'
-// prop to accept our custom values of 'md' and 'inline' which are used in
-// Paragon but not used in the base Bootstrap classes.
-
-interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
-  size?: 'sm' | 'md' | 'lg' | 'inline';
-}
-
-const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (
-  React.forwardRef<HTMLButtonElement, ButtonGroupProps>(({ size, ...props }, ref) => (
-    <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />
-  ))
-);
-
-ButtonGroup.propTypes = {
-  /** Specifies element type for this component. */
-  as: PropTypes.elementType,
-  /** An ARIA role describing the button group. */
-  role: PropTypes.string,
-  /** Specifies the size for all Buttons in the group. */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),
-  /** Display as a button toggle group. */
-  toggle: PropTypes.bool,
-  /** Specifies if the set of Buttons should appear vertically stacked. */
-  vertical: PropTypes.bool,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
-
-ButtonGroup.defaultProps = {
-  as: 'div',
-  role: 'group',
-  toggle: false,
-  vertical: false,
-  bsPrefix: 'btn-group',
-  size: 'md',
-};
-
-const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (
-  React.forwardRef<HTMLButtonElement, ButtonToolbarProps>((props, ref) => (
-    <BaseButtonToolbar {...props} ref={ref} />
-  ))
-);
-
-ButtonToolbar.propTypes = {
-  /** An ARIA role describing the button group. */
-  role: PropTypes.string,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
-
-ButtonToolbar.defaultProps = {
-  role: 'toolbar',
-  bsPrefix: 'btn-toolbar',
-};
-
-export default Button;
-export { ButtonGroup, ButtonToolbar };

package/src/Card/_variables.scss

@@ -1,55 +0,0 @@
-// Card
-
-$card-spacer-y:                      .75rem !default;
-$card-spacer-x:                      1.25rem !default;
-$card-border-width:                  $border-width !default;
-$card-border-radius:                 $border-radius !default;
-$card-border-color:                  rgba($black, .125) !default;
-$card-border-focus-color:            $primary-500 !default;
-$card-border-focus-color-dark:       theme-color("primary", "focus") !default;
-$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
-$card-cap-bg:                        rgba($black, .03) !default;
-$card-cap-color:                     null !default;
-$card-height:                        null !default;
-$card-color:                         null !default;
-$card-bg:                            $white !default;
-$card-bg-dark:                       $primary-500 !default;
-$card-bg-muted:                      $light-200 !default;
-
-$card-img-overlay-padding:           1.25rem !default;
-
-$card-group-margin:                  calc($grid-gutter-width / 2) !default;
-$card-deck-margin:                   $card-group-margin !default;
-$card-grid-margin:                   $card-group-margin !default;
-$card-deck-margin-bottom:            map_get($spacers, 3) !default;
-$card-grid-margin-bottom:            map_get($spacers, 3) !default;
-
-$card-columns-count:                 3 !default;
-$card-columns-gap:                   1.25rem !default;
-$card-columns-margin:                $card-spacer-y !default;
-
-$card-divider-bg:                    $light-400 !default;
-
-$card-footer-actions-gap:            .5rem !default;
-
-$card-logo-left-offset:              1.5rem !default;
-$card-logo-bottom-offset:            1rem !default;
-$card-logo-left-offset-horizontal:   .4375rem !default;
-$card-logo-bottom-offset-horizontal: .4375rem !default;
-
-$card-logo-width:                    7.25rem !default;
-$card-logo-height:                   4.125rem !default;
-
-$card-image-border-radius:           $card-border-radius !default;
-$card-logo-border-radius:            .25rem !default;
-
-$card-footer-text-font-size:         $x-small-font-size;
-
-$card-image-horizontal-max-width:    240px !default;
-$card-image-horizontal-min-width:    $card-image-horizontal-max-width !default;
-$card-image-vertical-max-height:     140px !default;
-$loading-skeleton-spacer:            .313rem !default;
-
-$card-focus-border-offset:           5px !default;
-$card-focus-border-width:            2px !default;
-$card-focus-border-radius:           calc($card-focus-border-offset + $card-border-radius) !default;

package/src/Carousel/_variables.scss

@@ -1,27 +0,0 @@
-// Carousel
-
-$carousel-control-color:             $white !default;
-$carousel-control-width:             15% !default;
-$carousel-control-opacity:           .5 !default;
-$carousel-control-hover-opacity:     .9 !default;
-$carousel-control-transition:        opacity .15s ease !default;
-
-$carousel-indicator-width:           30px !default;
-$carousel-indicator-height:          3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer:          3px !default;
-$carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
-
-$carousel-caption-width:             70% !default;
-$carousel-caption-color:             $white !default;
-
-$carousel-control-icon-width:        20px !default;
-
-$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
-
-$carousel-transition-duration:       .6s !default;
-
-// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default;