@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/src/Badge/index.scss

@@ -1,112 +1,2 @@
-.badge {
-  display: inline-block;
-  padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base);
-  color: var(--pgn-badge-color, inherit);
-  background-color: var(--pgn-badge-bg, transparent);
-
-  @include font-size(var(--pgn-typography-badge-font-size));
-
-  font-weight: var(--pgn-typography-badge-font-weight);
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  transition: var(--pgn-transition-badge);
-
-  @include border-radius(var(--pgn-size-badge-border-radius-base));
-
-  @at-root a#{&} {
-    &:hover,
-    &:focus {
-      text-decoration: none;
-      color: var(--pgn-badge-focus-color, inherit);
-      background-color: var(--pgn-badge-focus-bg, transparent);
-    }
-
-    &:focus,
-    &.focus {
-      outline: 0;
-      box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, .15));
-    }
-  }
-
-  &:empty {
-    display: none;
-  }
-}
-
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
-
-.badge-pill {
-  padding-right: var(--pgn-spacing-badge-padding-x-pill);
-  padding-left: var(--pgn-spacing-badge-padding-x-pill);
-
-  @include border-radius(var(--pgn-size-badge-border-radius-pill));
-}
-
-.badge-primary {
-  --pgn-badge-color: var(--pgn-color-badge-text-primary);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-primary);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-primary);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary);
-}
-
-.badge-secondary {
-  --pgn-badge-color: var(--pgn-color-badge-text-secondary);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-secondary);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary);
-}
-
-.badge-success {
-  --pgn-badge-color: var(--pgn-color-badge-text-success);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-success);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-success);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success);
-}
-
-.badge-danger {
-  --pgn-badge-color: var(--pgn-color-badge-text-danger);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-danger);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-danger);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger);
-}
-
-.badge-warning {
-  --pgn-badge-color: var(--pgn-color-badge-text-warning);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-warning);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-warning);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning);
-}
-
-.badge-info {
-  --pgn-badge-color: var(--pgn-color-badge-text-info);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-info);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-info);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info);
-}
-
-.badge-light {
-  --pgn-badge-color: var(--pgn-color-badge-text-light);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-light);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-light);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light);
-}
-
-.badge-dark {
-  --pgn-badge-color: var(--pgn-color-badge-text-dark);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-dark);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-dark);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark);
-}
+@import "variables";
+@import "~bootstrap/scss/badge";

package/src/Breadcrumb/_variables.scss

@@ -0,0 +1,27 @@
+// 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/Breadcrumb/index.scss

@@ -1,11 +1,13 @@
+@import "variables";
+
 .pgn__breadcrumb {
   .list-inline-item {
     &.active {
-      color: var(--pgn-color-breadcrumb-active);
+      color: $breadcrumb-active-color;
     }
 
     a.link-muted {
-      color: var(--pgn-color-breadcrumb-base);
+      color: $breadcrumb-color;
 
       &:focus {
         position: relative;
@@ -17,18 +19,18 @@
       &:focus::before {
         content: "";
         position: absolute;
-        top: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1);
-        right: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1);
-        bottom: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1);
-        left: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1);
-        border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-base);
-        border-radius: var(--pgn-size-breadcrumb-border-radius-focus);
+        top: -$breadcrumb-border-focus-axis-y;
+        right: -$breadcrumb-border-focus-axis-x;
+        bottom: -$breadcrumb-border-focus-axis-y;
+        left: -$breadcrumb-border-focus-axis-x;
+        border: $breadcrumb-border-focus-width solid $breadcrumb-color;
+        border-radius: $breadcrumb-focus-border-radius;
       }
     }
 
     [dir="rtl"] & {
       margin-right: 0;
-      margin-left: var(--pgn-spacing-breadcrumb-margin-left);
+      margin-left: $breadcrumb-margin-left;
     }
 
     .pgn__icon {
@@ -41,21 +43,21 @@
   &-dark {
     .list-inline-item {
       &.active {
-        color: var(--pgn-color-breadcrumb-inverse-active);
+        color: $breadcrumb-inverse-active;
       }
 
       a.link-muted {
-        color: var(--pgn-color-breadcrumb-inverse-base);
+        color: $breadcrumb-inverse-color;
 
         &:focus::before {
-          border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-inverse-base);
+          border: $breadcrumb-border-focus-width solid $breadcrumb-inverse-color;
         }
       }
     }
 
     .pgn__icon,
     .custom-spacer {
-      color: var(--pgn-color-breadcrumb-inverse-spacer);
+      color: $breadcrumb-inverse-spacer;
     }
   }
 
@@ -69,7 +71,7 @@
 
       .list-inline-item:not(:last-child) {
         margin-right: 0;
-        margin-left: var(--pgn-spacing-breadcrumb-margin-left);
+        margin-left: $breadcrumb-margin-left;
       }
 
       .pgn__icon {

package/src/Bubble/_variables.scss

@@ -0,0 +1,8 @@
+$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/Bubble/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__bubble {
   line-height: normal;
   min-height: 1.5rem;
@@ -6,36 +8,21 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--pgn-typography-font-size-xs);
-  color: var(--pgn-bubble-color, inherit);
-  background-color: var(--pgn-bubble-bg, transparent);
+  font-size: $font-size-xs;
+
+  @each $name, $colors in $bubble-variants {
+    &.pgn__bubble-#{$name} {
+      background-color: map-get($colors, "background-color");
+      color: map-get($colors, "color");
+    }
+  }
 
   &:disabled,
   &.disabled {
-    background: var(--pgn-color-gray-500);
+    background: $gray-500;
   }
 
   &.expandable {
-    padding: var(--pgn-spacing-bubble-expandable-padding-y) var(--pgn-spacing-bubble-expandable-padding-x);
+    padding: $bubble-expandable-padding-y $bubble-expandable-padding-x;
   }
 }
-
-.pgn__bubble-primary {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-primary);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-primary);
-}
-
-.pgn__bubble-success {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-success);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-success);
-}
-
-.pgn__bubble-warning {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-warning);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-warning);
-}
-
-.pgn__bubble-error {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-error);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-error);
-}

package/src/Button/README.md

@@ -8,6 +8,8 @@ categories:
 status: 'Stable'
 designStatus: 'Done'
 devStatus: 'Done'
+notes: |
+  TODO: Remove subcomponent of deprecated implementation soon
 ---
 
 This component utilizes `Button` from React-Bootstrap and extends it with an ability to add icons before and after button label, see [below](#with-icons-before-or-after) for usage example.<br/> <a href="https://react-bootstrap-v4.netlify.app/components/buttons/" target="_blank" rel="noopener noreferrer"> See React-Bootstrap for additional documentation. </a>
@@ -20,11 +22,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
   return (
     <Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>
-      <Button variant="brand" className="mb-2 mb-sm-0">Brand</Button>
-      <Button variant="outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
-      <Button variant="primary" className="mb-2 mb-sm-0">Primary</Button>
-      <Button variant="outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
-      <Button variant="tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
+      <Button variant="brand">Brand</Button>
+      <Button variant="outline-brand">Outline Brand</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="outline-primary">Outline Primary</Button>
+      <Button variant="tertiary">Tertiary</Button>
     </Stack>
 )}
 ```
@@ -41,11 +43,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
       gap={2}
       direction={ isExtraSmall ? "vertical" : "horizontal" }
     >
-      <Button variant="inverse-brand" className="mb-2 mb-sm-0">Brand</Button>
-      <Button variant="inverse-outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>
-      <Button variant="inverse-primary" className="mb-2 mb-sm-0">Primary</Button>
-      <Button variant="inverse-outline-primary" className="mb-2 mb-sm-0">Outline Primary</Button>
-      <Button variant="inverse-tertiary" className="mb-2 mb-sm-0">Tertiary</Button>
+      <Button variant="inverse-brand">Brand</Button>
+      <Button variant="inverse-outline-brand">Outline Brand</Button>
+      <Button variant="inverse-primary">Primary</Button>
+      <Button variant="inverse-outline-primary">Outline Primary</Button>
+      <Button variant="inverse-tertiary">Tertiary</Button>
     </Stack>
 )}
 ```
@@ -63,20 +65,20 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
         gap={2}
         direction={ isExtraSmall ? "vertical" : "horizontal" }
       >
-        <Button variant="success" className="mb-2 mb-sm-0">Success</Button>
-        <Button variant="danger" className="mb-2 mb-sm-0">Danger</Button>
-        <Button variant="outline-success" className="mb-2 mb-sm-0">Success</Button>
-        <Button variant="outline-danger" className="mb-2 mb-sm-0">Danger</Button>
+        <Button variant="success">Success</Button>
+        <Button variant="danger">Danger</Button>
+        <Button variant="outline-success">Success</Button>
+        <Button variant="outline-danger">Danger</Button>
       </Stack>
       <Stack
         gap={2}
         direction={ isExtraSmall ? "vertical" : "horizontal" }
       >
-        <Button variant="link" className="mb-2 mb-sm-0">Link</Button>
-        <Button variant="light" className="mb-2 mb-sm-0">Light</Button>
-        <Button variant="dark" className="mb-2 mb-sm-0">Dark</Button>
-        <Button variant="outline-light" className="mb-2 mb-sm-0">Light</Button>
-        <Button variant="outline-dark" className="mb-2 mb-sm-0">Dark</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="light">Light</Button>
+        <Button variant="dark">Dark</Button>
+        <Button variant="outline-light">Light</Button>
+        <Button variant="outline-dark">Dark</Button>
       </Stack>
     </>
 )}
@@ -90,34 +92,41 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
   return (
     <>
-        <Stack
-          className="mb-2"
-          gap={2}
-          direction={ isExtraSmall ? "vertical" : "horizontal" }
-        >
-          <Button variant="primary" size="lg" className="mb-2 mb-sm-0">
-            Large button
-          </Button>
-          <Button variant="outline-primary" size="lg" className="mb-2 mb-sm-0">
-            Large button
-          </Button>
-        </Stack>
-        <Stack
-          className="mb-2"
-          gap={2}
-          direction={ isExtraSmall ? "vertical" : "horizontal" }
-        >
-          <Button variant="primary" size="sm" className="mb-2 mb-sm-0">
-            Small button
-          </Button>
-          <Button variant="outline-primary" size="sm" className="mb-2 mb-sm-0">
-            Small button
-          </Button>
-        </Stack>
-        <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
-        <Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="primary" size="lg">
+          Large button
+        </Button>
+        <Button variant="outline-primary" size="lg">
+          Large button
+        </Button>
+      </Stack>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="primary" size="sm">
+          Small button
+        </Button>
+        <Button variant="outline-primary" size="sm">
+          Small button
+        </Button>
+      </Stack>
+      <Stack
+        className="mb-2"
+        gap={2}
+        direction={ isExtraSmall ? "vertical" : "horizontal" }
+      >
+        <Button variant="link" size="inline">Inline button</Button>
+        <Button variant="link" size="inline">Inline button</Button>
+      </Stack>
     </>
-)}
+  )
+}
 ```
 
 ### When to use the inline size
@@ -125,13 +134,11 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 Use inline size buttons for when a button sits with a line of text.
 
 ```jsx live
-<>
-  <p>
-    <span className="mr-1">2 items selected.</span>
-    <Button variant="link" size="inline" className="mr-1">Select all</Button>
-    <Button variant="link" size="inline">Clear</Button>
-  </p>
-</>
+<p>
+  <span className="mr-1">2 items selected.</span>
+  <Button variant="link" size="inline" className="mr-1">Select all</Button>
+  <Button variant="link" size="inline">Clear</Button>
+</p>
 ```
 
 ## Block Buttons
@@ -150,21 +157,41 @@ Use inline size buttons for when a button sits with a line of text.
 ### Disabled
 
 ```jsx live
-<>
-  <Button variant="primary" disabled>Primary disabled</Button>
-  <Button variant="secondary" disabled>Secondary disabled</Button>
-  <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
-</>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button variant="primary" disabled>Primary disabled</Button>
+      <Button variant="secondary" disabled>Secondary disabled</Button>
+      <Button as="a" href="https://edx.org" disabled>Link disabled</Button>
+    </Stack>
+    )
+}
 ```
 
 ### With empty href
 For link to be `disabled`, it must have href defined with some value.
 
 ```jsx live
-<>
-  <Button as='a' disabled>No href</Button>
-  <Button as='a' href='' disabled>Empty string href</Button>
-</>
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button as="a" disabled>No href</Button>
+      <Button as="a" href="" disabled>Empty string href</Button>
+    </Stack>
+  )
+}
 ```
 
 ### With Icons before or after
@@ -179,23 +206,24 @@ For link to be `disabled`, it must have href defined with some value.
       gap={2}
       direction={ isExtraSmall ? "vertical" : "horizontal" }
     >
-      <Button variant="brand" iconBefore={ArrowBack} className="mb-2 mb-sm-0">
+      <Button variant="brand" iconBefore={ArrowBack}>
         Brand
       </Button>
-      <Button variant="outline-brand" iconAfter={ArrowDropDown} className="mb-2 mb-sm-0">
+      <Button variant="outline-brand" iconAfter={ArrowDropDown}>
         Outline Brand
       </Button>
-      <Button variant="primary" iconBefore={Remove} iconAfter={Add} className="mb-2 mb-sm-0">
+      <Button variant="primary" iconBefore={Remove} iconAfter={Add}>
         Primary
       </Button>
-      <Button variant="outline-primary" iconBefore={Highlight} className="mb-2 mb-sm-0">
+      <Button variant="outline-primary" iconBefore={Highlight}>
         Outline Primary
       </Button>
-      <Button variant="tertiary" iconAfter={Add} className="mb-2 mb-sm-0">
+      <Button variant="tertiary" iconAfter={Add}>
         Tertiary
       </Button>
     </Stack>
-)}
+  )
+}
 ```
 
 ## Stateful buttons
@@ -203,3 +231,85 @@ To implement loading state using a `Button` component, the [StatefulButton](http
 is available for use. <br/>
 This specialized component is designed to seamlessly manage and display boot states, providing a more efficient and 
 user-friendly experience.
+
+***
+
+## Button.Deprecated
+
+### (Deprecated) basic usage
+
+```jsx live
+<Button.Deprecated className="btn-primary">Hello World!</Button.Deprecated>
+```
+
+### (Deprecated) color variants
+
+```jsx live
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
+      <Button.Deprecated className="btn-light">Light</Button.Deprecated>
+      <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
+    </Stack>
+  )
+}
+```
+
+### (Deprecated) outline variants
+
+```jsx live
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
+```
+
+### (Deprecated) inverse variants
+
+```jsx live
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2 p-3 bg-gray-700"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
+```
+
+### (Deprecated) link variant
+
+```jsx live
+<div className="bg-gray-200 p-3">
+  <Button.Deprecated className="btn-link">Link with button container</Button.Deprecated>
+  <br />
+  <Button.Deprecated className="btn-link px-0">Button with no horizontal padding</Button.Deprecated>
+</div>
+```

package/src/Button/_variables.scss

@@ -0,0 +1,52 @@
+$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;