@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/src/Modal/index.jsx

@@ -1,319 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { FocusOn } from 'react-focus-on';
-import { tabbable } from 'tabbable';
-
-import { Close } from '../../icons';
-import Button from '../Button';
-import Icon from '../Icon';
-import newId from '../utils/newId';
-import Variant from '../utils/constants';
-
-class Modal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.close = this.close.bind(this);
-
-    this.headerId = newId();
-    this.modalBodyRef = React.createRef();
-
-    if (typeof document !== 'undefined') {
-      this.el = document.createElement('div');
-      // Sets true for IE11, false otherwise: https://stackoverflow.com/a/22082397/6620612
-      this.isIE11 = !!global.MSInputMethodContext && !!document.documentMode;
-    }
-
-    this.state = {
-      open: props.open,
-    };
-  }
-
-  componentDidMount() {
-    const { parentSelector } = this.props;
-    this.parentElement = document.querySelector(parentSelector);
-    if (this.parentElement === null) {
-      throw new Error(`Modal received invalid parentSelector: ${parentSelector}, no matching element found`);
-    }
-    this.parentElement.appendChild(this.el);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { open } = this.props;
-    if (open !== prevProps.open || open !== prevState.open) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({ open });
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.parentElement) {
-      ReactDOM.unmountComponentAtNode(this.parentElement);
-    }
-  }
-
-  getVariantIconClassName() {
-    const { variant } = this.props;
-    let variantIconClassName;
-
-    switch (variant.status) {
-      case Variant.status.WARNING:
-        variantIconClassName = classNames(
-          'fa',
-          'fa-exclamation-triangle',
-          'fa-3x',
-          `text-${variant.status.toLowerCase()}`,
-        );
-        break;
-      default:
-        break;
-    }
-
-    return variantIconClassName;
-  }
-
-  getVariantGridBody(body) {
-    const { variant } = this.props;
-
-    return (
-      <div className="container-fluid">
-        <div className="row">
-          <div className="col-md-10">
-            <div>
-              {body}
-            </div>
-          </div>
-          <div className="col-md-2" data-testid="modal-icon">
-            <Icon
-              id={newId(`Modal-${variant.status}`)}
-              className={this.getVariantIconClassName()}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  getTabbableBodyElements() {
-    if (this.modalBodyRef?.current) {
-      return tabbable(this.modalBodyRef.current);
-    }
-    return [];
-  }
-
-  isValidVariantStatus() {
-    const { variant } = this.props;
-    return Object.values(Variant.status).includes(variant.status);
-  }
-
-  close(e) {
-    if (e) {
-      e.stopPropagation();
-    }
-
-    this.setState({ open: false });
-    this.props.onClose();
-  }
-
-  renderButtons() {
-    return this.props.buttons.map((button) => {
-      // button is either a React component that we want clone or a set of props
-      if (React.isValidElement(button)) {
-        return React.cloneElement(button, {
-          key: button.props.children,
-        });
-      }
-
-      const { label, ...buttonProps } = button;
-
-      return (
-        <Button.Deprecated
-          {...buttonProps}
-          key={label}
-        >
-          {label}
-        </Button.Deprecated>
-      );
-    });
-  }
-
-  renderBody() {
-    let { body } = this.props;
-
-    if (typeof body === 'string') {
-      body = <p>{body}</p>;
-    }
-
-    if (this.isValidVariantStatus()) {
-      body = this.getVariantGridBody(body);
-    }
-
-    return body;
-  }
-
-  renderModal() {
-    const { open } = this.state;
-    const {
-      dialogClassName,
-      renderDefaultCloseButton,
-      renderHeaderCloseButton,
-      buttons,
-      closeText,
-      title,
-    } = this.props;
-
-    const hasTabbableElements = (
-      renderDefaultCloseButton
-      || renderHeaderCloseButton
-      || buttons.length > 0
-      || this.getTabbableBodyElements().length > 0
-    );
-    const renderModalFooter = renderDefaultCloseButton || buttons.length > 0;
-
-    return (
-      <>
-        <div
-          className={classNames({
-            'modal-backdrop': open,
-            show: open,
-            fade: !open,
-          })}
-          role="presentation"
-          data-testid="modal-backdrop"
-        />
-        <div
-          className={classNames(
-            'modal',
-            {
-              show: open,
-              fade: !open,
-              'd-block': open,
-              'is-ie11': this.isIE11,
-            },
-          )}
-          role="presentation"
-          data-testid="modal"
-        >
-          <div
-            className={classNames(
-              {
-                'modal-dialog': open,
-              },
-              dialogClassName,
-            )}
-            role="dialog"
-            aria-modal
-            aria-labelledby={this.headerId}
-          >
-            <FocusOn
-              enabled={open}
-              onClickOutside={this.close}
-              onEscapeKey={this.close}
-            >
-              <div
-                className="modal-content"
-                data-testid="modal-content"
-                // if the modal doesn't contain any tabbable elements, make this element programmatically focusable.
-                {...(!hasTabbableElements ? { tabIndex: -1 } : {})}
-              >
-                <div className="modal-header">
-                  <h2 className="modal-title" id={this.headerId}>{title}</h2>
-                  {renderHeaderCloseButton && (
-                    <Button.Deprecated
-                      className="p-1"
-                      onClick={this.close}
-                      data-testid="modal-header-btn"
-                    >
-                      <Icon src={Close} screenReaderText={closeText} />
-                    </Button.Deprecated>
-                  )}
-                </div>
-                <div className="modal-body" ref={this.modalBodyRef} data-testid="modal-body">
-                  {this.renderBody()}
-                </div>
-                {renderModalFooter && (
-                  <div className="modal-footer">
-                    {renderDefaultCloseButton && (
-                      <Button
-                        variant="link"
-                        onClick={this.close}
-                        data-testid="modal-footer-btn"
-                      >
-                        {closeText}
-                      </Button>
-                    )}
-                    {this.renderButtons()}
-                  </div>
-                )}
-              </div>
-            </FocusOn>
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  render() {
-    if (!this.el) {
-      return null;
-    }
-
-    return ReactDOM.createPortal(
-      this.renderModal(),
-      this.el,
-    );
-  }
-}
-
-Modal.propTypes = {
-  /** specifies whether the modal renders open or closed on the initial render. It defaults to false. */
-  open: PropTypes.bool,
-  /** is the selector for an element in the dom which the modal should be rendered under.
-   * It uses querySelector to find the first element that matches that selector,
-   * and then creates a React portal to a div underneath the parent element.
-   */
-  parentSelector: PropTypes.string,
-  /** a string or an element that is rendered inside of the modal title, above the modal body. */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  /** a string or an element that is rendered inside of the modal body, between the title and the footer. */
-  body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  /** an array of either elements or shapes that take the form of the buttonPropTypes.
-   * See the [buttonPropTypes](https://github.com/openedx/paragon/blob/master/src/Button/index.jsx#L40)
-   * for a list of acceptable props to pass as part of a button. */
-  buttons: PropTypes.arrayOf(PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.shape({}), // TODO: Only accept nodes in the future
-  ])),
-  /** specifies the display text of the default Close button. It defaults to "Close". */
-  closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  /** a function that is called on close. It can be used to perform actions upon closing of the modal,
-   * such as restoring focus to the previous logical focusable element. */
-  onClose: PropTypes.func.isRequired,
-  variant: PropTypes.shape({
-    status: PropTypes.string,
-  }),
-  /** specifies whether the default close button is rendered in the footer. It defaults to true. */
-  renderDefaultCloseButton: PropTypes.bool,
-  /** specifies whether a close button is rendered in the modal header. It defaults to true. */
-  renderHeaderCloseButton: PropTypes.bool,
-  /**
-   * Specifies optional classes to add to the element with the '.modal-dialog' class.
-   * See Bootstrap documentation for possible classes.  Some options: modal-lg, modal-sm, modal-dialog-centered
-   */
-  dialogClassName: PropTypes.string,
-};
-
-Modal.defaultProps = {
-  open: false,
-  parentSelector: 'body',
-  buttons: [],
-  closeText: 'Close',
-  variant: {},
-  renderDefaultCloseButton: true,
-  renderHeaderCloseButton: true,
-  dialogClassName: undefined,
-};
-
-export default Modal;

package/src/Modal/tests/Modal.test.jsx

@@ -1,261 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Modal from '..';
-import { Button } from '../..';
-import Variant from '../../utils/constants';
-
-const modalOpen = (isOpen, container) => {
-  if (!isOpen) {
-    expect(container.getByTestId('modal').classList).not.toContain('d-block');
-    expect(container.getByTestId('modal').classList).not.toContain('show');
-    expect(container.getByTestId('modal').classList).toContain('fade');
-    expect(container.queryByTestId('modal-backdrop').classList).not.toContain('modal-backdrop');
-  } else {
-    expect(container.getByTestId('modal').classList).toContain('d-block');
-    expect(container.getByTestId('modal').classList).toContain('show');
-    expect(container.queryByTestId('modal').classList).not.toContain('fade');
-    expect(container.queryByTestId('modal-backdrop').classList).toContain('modal-backdrop');
-  }
-};
-
-const title = 'Modal title';
-const body = 'Modal body';
-const defaultProps = {
-  title,
-  body,
-  open: true,
-  onClose: () => { },
-};
-const closeText = 'GO AWAY!';
-
-describe('<Modal />', () => {
-  describe('correct rendering', () => {
-    const buttons = [
-      <Button.Deprecated buttonType="primary">Blue button!</Button.Deprecated>,
-      {
-        label: 'Red button!',
-        buttonType: 'danger',
-      },
-      <Button.Deprecated buttonType="success">Green button!</Button.Deprecated>,
-    ];
-
-    it('renders default buttons', () => {
-      render(<Modal {...defaultProps} />);
-      const modalTitle = screen.getByText(title);
-      const modalBody = screen.getByText(body);
-
-      expect(modalTitle).toBeInTheDocument();
-      expect(modalBody).toBeInTheDocument();
-      expect(screen.queryAllByRole('button')).toHaveLength(2);
-    });
-
-    it('renders custom buttons', () => {
-      render(<Modal {...defaultProps} buttons={buttons} />);
-      expect(screen.queryAllByRole('button')).toHaveLength(buttons.length + 2);
-    });
-
-    it('renders Warning Variant', () => {
-      render(
-        <Modal {...defaultProps} variant={{ status: Variant.status.WARNING }} />,
-      );
-
-      const modalBody = screen.getByTestId('modal-body');
-
-      expect(modalBody.firstChild.classList).toContain('container-fluid');
-      expect(screen.getByText(body)).toBeInTheDocument();
-
-      const icon = screen.getByTestId('modal-icon').firstChild;
-      expect(icon.classList).toContain('fa-exclamation-triangle');
-      expect(icon.classList).toContain('fa-3x');
-      expect(icon.classList).toContain('text-warning');
-    });
-
-    it('renders invalid Variant properly', () => {
-      render(<Modal {...defaultProps} variant={{ status: 'foo' }} />);
-      const modalTitle = screen.getByText(title);
-      const modalBody = screen.getByText(body);
-
-      expect(modalTitle).toBeInTheDocument();
-      expect(modalBody).toBeInTheDocument();
-      expect(screen.queryAllByRole('button')).toHaveLength(2);
-    });
-
-    it('render of the header close button is optional', () => {
-      render(<Modal {...defaultProps} renderHeaderCloseButton={false} />);
-      const modalHeaderBtn = screen.queryByTestId('modal-header-btn');
-      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
-
-      expect(modalHeaderBtn).not.toBeInTheDocument();
-      expect(modalFooterBtn).toBeInTheDocument();
-    });
-
-    it('render of the default footer close button is optional', () => {
-      render(<Modal {...defaultProps} renderDefaultCloseButton={false} />);
-      const modalHeaderBtn = screen.getByTestId('modal-header-btn');
-      const modalFooterBtn = screen.queryByTestId('modal-footer-btn');
-
-      expect(modalHeaderBtn).toBeInTheDocument();
-      expect(modalFooterBtn).not.toBeInTheDocument();
-    });
-
-    it('renders custom close button string', () => {
-      render(<Modal {...defaultProps} closeText={closeText} />);
-      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
-      expect(modalFooterBtn).toBeInTheDocument();
-      expect(modalFooterBtn).toHaveTextContent(closeText);
-    });
-
-    it('renders custom close button element', () => {
-      const closeElem = <span className="is-close-text">{closeText}</span>;
-      render(<Modal {...defaultProps} closeText={closeElem} />);
-      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
-
-      expect(modalFooterBtn).toBeInTheDocument();
-      expect(modalFooterBtn.firstChild.classList).toContain('is-close-text');
-      expect(modalFooterBtn.firstChild).toHaveTextContent(closeText);
-    });
-
-    it('renders with IE11-specific styling when IE11 is detected', () => {
-      const { MSInputMethodContext } = global;
-      const { documentMode } = global.document;
-
-      // mimic IE11
-      global.MSInputMethodContext = true;
-      global.document.documentMode = true;
-      render(<Modal {...defaultProps} />);
-      const modal = screen.queryByTestId('modal');
-      expect(modal.classList).toContain('is-ie11');
-
-      global.MSInputMethodContext = MSInputMethodContext;
-      global.document.documentMode = documentMode;
-    });
-
-    it('renders without IE11-specific styling when IE11 is not detected', () => {
-      const { MSInputMethodContext } = global;
-      const { documentMode } = global.document;
-
-      // mimic non-IE11 browser
-      global.MSInputMethodContext = false;
-      global.document.documentMode = false;
-      render(<Modal {...defaultProps} />);
-      const modal = screen.queryByTestId('modal');
-      expect(modal).not.toContain('is-ie11');
-
-      global.MSInputMethodContext = MSInputMethodContext;
-      global.document.documentMode = documentMode;
-    });
-  });
-
-  describe('props received correctly', () => {
-    it('component receives props', () => {
-      const { rerender } = render(<Modal {...defaultProps} open={false} />);
-
-      modalOpen(false, screen);
-      rerender(<Modal {...defaultProps} open />);
-      modalOpen(true, screen);
-    });
-
-    it('component receives props and ignores prop change', () => {
-      const { rerender } = render(<Modal {...defaultProps} />);
-
-      modalOpen(true, screen);
-      rerender(<Modal {...defaultProps} title="Changed modal title" />);
-      modalOpen(true, screen);
-    });
-
-    it('throws an error when an invalid parentSelector prop is passed', () => {
-      expect(() => render(
-        <Modal
-          {...defaultProps}
-          parentSelector=".this-selector-does-not-exist"
-        />,
-      )).toThrow('Modal received invalid parentSelector: .this-selector-does-not-exist, no matching element found');
-    });
-  });
-
-  describe('close functions properly', () => {
-    it('closes when x button pressed', async () => {
-      render(<Modal {...defaultProps} />);
-
-      modalOpen(true, screen);
-      await userEvent.click(screen.queryAllByRole('button')[0]);
-      modalOpen(false, screen);
-    });
-
-    it('closes when Close button pressed', async () => {
-      render(<Modal {...defaultProps} />);
-
-      modalOpen(true, screen);
-      await userEvent.click(screen.queryAllByRole('button')[1]);
-      modalOpen(false, screen);
-    });
-
-    it('calls callback function on close', async () => {
-      const spy = jest.fn();
-      render(<Modal {...defaultProps} onClose={spy} />);
-
-      expect(spy).toHaveBeenCalledTimes(0);
-
-      // press X button
-      await userEvent.click(screen.queryAllByRole('button')[0]);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    it('reopens after closed', async () => {
-      const { rerender } = render(<Modal {...defaultProps} />);
-
-      modalOpen(true, screen);
-      await userEvent.click(screen.queryAllByRole('button')[0]);
-      modalOpen(false, screen);
-      rerender(<Modal {...defaultProps} open />);
-      modalOpen(true, screen);
-    });
-  });
-
-  describe('focus changes correctly', () => {
-    it('has correct initial focus', () => {
-      render(<Modal {...defaultProps} />);
-      const buttons = screen.queryAllByRole('button');
-      expect(buttons[0]).toHaveFocus();
-    });
-
-    it('has reset focus after close and reopen', () => {
-      const { rerender } = render(<Modal {...defaultProps} />);
-      const buttons = screen.queryAllByRole('button');
-      expect(buttons[0]).toHaveFocus();
-      rerender(<Modal {...defaultProps} open={false} />);
-      modalOpen(false, screen);
-      rerender(<Modal {...defaultProps} open />);
-      modalOpen(true, screen);
-      expect(buttons[0]).toHaveFocus();
-    });
-
-    it('has focus on input in modal body', () => {
-      const { getByTestId } = render(
-        <Modal
-          {...defaultProps}
-          open
-          renderDefaultCloseButton={false}
-          renderHeaderCloseButton={false}
-          body={<div><input data-testid="modal-input" /></div>}
-        />,
-      );
-      const input = getByTestId('modal-input');
-      expect(input).toHaveFocus();
-    });
-
-    it('has focus on `.modal-content` when nothing else is tabbable', () => {
-      const { getByTestId } = render(
-        <Modal
-          {...defaultProps}
-          renderDefaultCloseButton={false}
-          renderHeaderCloseButton={false}
-        />,
-      );
-      const modalContent = getByTestId('modal-content');
-      expect(modalContent).toHaveFocus();
-    });
-  });
-});

package/src/Nav/_variables.scss

@@ -1,58 +0,0 @@
-// Navs
-
-$nav-link-padding-y:                               .5rem !default;
-$nav-link-padding-x:                               1rem !default;
-$nav-link-color:                                   $gray-700 !default;
-$nav-link-disabled-color:                          $gray-300 !default;
-$nav-link-font-weight:                             500 !default;
-
-$nav-tabs-border-color:                            $light-400 !default;
-$nav-tabs-border-width:                            2px !default;
-$nav-tabs-border-radius:                           0 !default;
-$nav-tabs-hover-bg:                                transparent !default;
-$nav-tabs-focus-border-color:                      $nav-tabs-hover-bg !default;
-$nav-tabs-disabled-bg:                             $nav-tabs-hover-bg !default;
-$nav-tabs-link-hover-border-color:                 transparent transparent $nav-tabs-border-color !default;
-$nav-tabs-link-hover-bg:                           $light-400 !default;
-$nav-tabs-link-active-color:                       $primary-500 !default;
-$nav-tabs-link-active-border-color:                $nav-tabs-link-active-color !default;
-$nav-tabs-link-active-bg:                          transparent !default;
-$nav-tabs-link-focus-border-color:                 $nav-tabs-link-active-color !default;
-$nav-tabs-link-distance-to-border:                 4px !default;
-$nav-tabs-link-border-color:                       transparent !default;
-$nav-tabs-link-disabled-border-color:              $nav-tabs-link-border-color !default;
-
-$nav-pills-border-radius:                          $border-radius !default;
-$nav-pills-link-active-color:                      $component-active-color !default;
-$nav-pills-link-active-bg:                         $component-active-bg !default;
-$nav-pills-link-active-border-color:               $white !default;
-$nav-pills-link-border-color:                      $nav-tabs-border-color !default;
-$nav-pills-link-border-width:                      1px !default;
-
-$nav-inverse-pills-link-color:                     $white !default;
-$nav-inverse-pills-link-border-color:              $dark-300 !default;
-$nav-inverse-pills-link-hover-bg:                  $nav-inverse-pills-link-border-color !default;
-$nav-inverse-pills-link-focus-color:               $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-bg:                 $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-color:              $primary-500 !default;
-$nav-inverse-pills-link-active-border-color:       $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-hover-bg:           $nav-inverse-pills-link-border-color !default;
-$nav-inverse-pills-link-active-hover-color:        $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default;
-$nav-inverse-pills-link-active-focus-hover-bg:     $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-focus-color:        $nav-inverse-pills-link-active-color !default;
-$nav-inverse-pills-link-active-focus-border-color: $primary !default;
-$nav-inverse-pills-link-active-focus-hover-border-color: $nav-inverse-pills-link-active-focus-border-color !default;
-$nav-inverse-pills-link-border-width:              $nav-pills-link-border-width !default;
-$nav-inverse-pills-tab-content-color:              $nav-inverse-pills-link-color !default;
-
-$nav-inverse-tabs-link-color:                      $white !default;
-$nav-inverse-tabs-link-border-bottom-color:        $dark-300 !default;
-$nav-inverse-tabs-link-hover-bg:                   $nav-inverse-tabs-link-border-bottom-color !default;
-$nav-inverse-tabs-link-active-hover-bg:            transparent !default;
-$nav-inverse-tabs-link-focus-bg:                   $nav-inverse-tabs-link-color !default;
-$nav-inverse-tabs-link-active-border-color:        $nav-inverse-tabs-link-color !default;
-$nav-inverse-tabs-link-active-bg:                  $nav-inverse-tabs-link-hover-bg !default;
-$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-border-width !default;
-$nav-inverse-tabs-tab-content-color:               $nav-inverse-tabs-link-color !default;
-$nav-inverse-tabs-dropdown-border-color:           $nav-inverse-tabs-link-active-hover-bg !default;

package/src/Navbar/_variables.scss

@@ -1,40 +0,0 @@
-// Navbar
-
-$navbar-padding-y:                  calc($spacer / 2) !default;
-$navbar-padding-x:                  $spacer !default;
-
-$navbar-nav-link-padding-x:         .5rem !default;
-
-$navbar-brand-font-size:            $font-size-lg !default;
-
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-// The default for $nav-link-padding-y is .5rem. Copied here for modularization
-$nav-link-height:                   $font-size-base * $line-height-base + .5rem * 2 !default;
-$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            calc(($nav-link-height - $navbar-brand-height) / 2) !default;
-
-$navbar-toggler-padding-y:          .25rem !default;
-$navbar-toggler-padding-x:          .75rem !default;
-$navbar-toggler-font-size:          $font-size-lg !default;
-$navbar-toggler-border-radius:      $btn-border-radius !default;
-
-$navbar-nav-scroll-max-height:      75vh !default;
-
-$navbar-dark-color:                 rgba($white, .5) !default;
-$navbar-dark-hover-color:           rgba($white, .75) !default;
-$navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
-$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-
-$navbar-light-color:                rgba($black, .5) !default;
-$navbar-light-hover-color:          rgba($black, .7) !default;
-$navbar-light-active-color:         rgba($black, .9) !default;
-$navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
-
-$navbar-light-brand-color:                $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;

package/src/OverflowScroll/_variables.scss

@@ -1,5 +0,0 @@
-.pgn__overflow-scroll-overflow-container {
-  --pgn-overflow-scroll-opacity-mask-transparent: rgba(0, 0, 0, .4);
-}
-
-$overflow-scroll-opacity-mask-transparent: var(--pgn-overflow-scroll-opacity-mask-transparent) !default;

package/src/OverflowScroll/index.scss

@@ -1 +0,0 @@
-@import "variables";