@codecademy/gamut
73.3.073.3.1-alpha.0e5de6.0
dist/Tag/styles.js~
dist/Tag/styles.jsModified+10−10
Index: package/dist/Tag/styles.js
===================================================================
--- package/dist/Tag/styles.js
+++ package/dist/Tag/styles.js
@@ -1,6 +1,6 @@
import { css, states, theme, variant } from '@codecademy/gamut-styles';
-import { ButtonSelectors, Selectors } from '../ButtonBase/ButtonBase';
+import { InteractiveSelectors, Selectors } from '../ButtonBase/ButtonBase';
export const tagLabelFontSize = 14;
export const tagLabelPadding = 8;
export const tagBaseStyles = {
alignItems: 'center',
@@ -69,9 +69,9 @@
navigation: {
bg: 'background-current',
border: 1,
borderColor: 'border-secondary',
- [ButtonSelectors.ACTIVE]: {
+ [InteractiveSelectors.ACTIVE]: {
bg: 'secondary'
}
},
suggestion: {
@@ -136,33 +136,33 @@
':before': {
display: 'none'
},
color: 'text',
- [ButtonSelectors.FOCUS_VISIBLE]: {
+ [InteractiveSelectors.FOCUS_VISIBLE]: {
outline: 'none',
border: 'none'
},
- [ButtonSelectors.FOCUS]: {
+ [InteractiveSelectors.FOCUS]: {
textDecoration: 'none'
},
- [ButtonSelectors.HOVER]: {
+ [InteractiveSelectors.HOVER]: {
bg: 'background-hover'
},
- [ButtonSelectors.DISABLED]: {
+ [InteractiveSelectors.DISABLED]: {
borderColor: 'border-disabled',
bg: 'background-current'
}
},
variants: {
navigation: {
- [ButtonSelectors.ACTIVE]: {
+ [InteractiveSelectors.ACTIVE]: {
color: 'background',
bg: 'secondary',
textDecoration: 'none'
}
},
suggestion: {
- [ButtonSelectors.ACTIVE]: {
+ [InteractiveSelectors.ACTIVE]: {
bg: 'primary',
color: 'background',
textDecoration: 'none'
}
@@ -174,9 +174,9 @@
'::before, ::after': {
display: 'none'
},
// This removes a black solid outline on focus
- [ButtonSelectors.OUTLINE_FOCUS_VISIBLE]: {
+ [InteractiveSelectors.OUTLINE_FOCUS_VISIBLE]: {
opacity: 0
}
};
export const dismissButtonLargeStyling = states({
@@ -194,9 +194,9 @@
[hoverAndFocus]: {
color: 'background',
bg: 'secondary-hover'
},
- [ButtonSelectors.DISABLED]: {
+ [InteractiveSelectors.DISABLED]: {
bg: 'background-disabled',
color: 'text-disabled'
},
...dismissSharedStyles,