@codecademy/gamut

Index: package/dist/Button/shared/variants.js
===================================================================
--- package/dist/Button/shared/variants.js
+++ package/dist/Button/shared/variants.js
@@ -1,67 +1,67 @@
 import { theme, transitionConcat, variant } from '@codecademy/gamut-styles';
-import { ButtonSelectors } from '../../ButtonBase/ButtonBase';
+import { InteractiveSelectors } from '../../ButtonBase/ButtonBase';
 import { buttonVariants, templateVariants } from './styles';
 const hoverBackgroundTransition = transitionConcat(['background-color', 'box-shadow'], 'fast', 'ease-in');
 export const fillButtonVariants = templateVariants(buttonVariants, variant => ({
   bg: variant,
   color: 'background',
-  [ButtonSelectors.OUTLINE]: {
+  [InteractiveSelectors.OUTLINE]: {
     borderColor: variant
   },
-  [ButtonSelectors.HOVER]: {
+  [InteractiveSelectors.HOVER]: {
     bg: `${variant}-hover`,
     color: 'background',
     transition: hoverBackgroundTransition
   },
-  [ButtonSelectors.ACTIVE]: {
+  [InteractiveSelectors.ACTIVE]: {
     borderColor: 'border-primary',
     bg: variant,
     color: 'background'
   },
-  [ButtonSelectors.DISABLED]: {
+  [InteractiveSelectors.DISABLED]: {
     color: 'text-disabled',
     bg: 'background-disabled'
   }
 }));
 export const textButtonVariants = templateVariants(buttonVariants, variant => ({
   borderColor: 'transparent',
   color: variant === 'interface' ? 'text' : variant,
-  [ButtonSelectors.HOVER]: {
+  [InteractiveSelectors.HOVER]: {
     color: variant,
     bg: 'background-hover',
     transition: hoverBackgroundTransition
   },
-  [ButtonSelectors.FOCUS_VISIBLE]: {
+  [InteractiveSelectors.FOCUS_VISIBLE]: {
     color: variant
   },
-  [ButtonSelectors.OUTLINE]: {
+  [InteractiveSelectors.OUTLINE]: {
     borderColor: variant
   },
-  [ButtonSelectors.ACTIVE]: {
+  [InteractiveSelectors.ACTIVE]: {
     color: 'text'
   },
-  [ButtonSelectors.DISABLED]: {
+  [InteractiveSelectors.DISABLED]: {
     color: 'text-disabled',
     bg: 'transparent'
   }
 }));
 export const strokeButtonVariants = templateVariants(buttonVariants, variant => ({
   borderColor: variant,
   bg: 'transparent',
   color: variant,
-  [ButtonSelectors.HOVER]: {
+  [InteractiveSelectors.HOVER]: {
     bg: 'background-hover',
     transition: hoverBackgroundTransition
   },
-  [ButtonSelectors.OUTLINE]: {
+  [InteractiveSelectors.OUTLINE]: {
     borderColor: variant
   },
-  [ButtonSelectors.ACTIVE]: {
+  [InteractiveSelectors.ACTIVE]: {
     bg: variant,
     color: 'background'
   },
-  [ButtonSelectors.DISABLED]: {
+  [InteractiveSelectors.DISABLED]: {
     borderColor: 'background-disabled',
     color: 'text-disabled',
     bg: 'transparent'
   }
@@ -74,23 +74,23 @@
   color: 'background',
   py: 12,
   px: 24,
   bg: variant,
-  [ButtonSelectors.OUTLINE]: {
+  [InteractiveSelectors.OUTLINE]: {
     borderColor: variant,
     bottom: -9,
     left: -9
   },
-  [ButtonSelectors.HOVER]: {
+  [InteractiveSelectors.HOVER]: {
     bg: `${variant}-hover`,
     transition: hoverBackgroundTransition,
     boxShadow: `-8px 8px 0 0 ${theme.colors.text}`
   },
-  [ButtonSelectors.ACTIVE]: {
+  [InteractiveSelectors.ACTIVE]: {
     boxShadow: 'none',
     bg: 'secondary'
   },
-  [ButtonSelectors.DISABLED]: {
+  [InteractiveSelectors.DISABLED]: {
     boxShadow: 'none',
     color: 'text-disabled',
     bg: 'background-disabled'
   }