u

src/components/article/boxes/PriceTaxRow.jsx

@@ -3,6 +3,11 @@ import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
+import {
+  TINT_CHIP,
+  TINT_PILL_ACTIVE,
+  TINT_STRONG,
+} from '../../../colors';
 
 const taxPillSx = {
   height: 28,
@@ -27,12 +32,12 @@ export class TaxRatePills extends Component {
               sx={{
                 ...taxPillSx,
                 visibility: active || !readOnly ? 'visible' : 'hidden',
-                bgcolor: active ? 'rgba(0, 0, 0, 0.14)' : 'rgba(0, 0, 0, 0.06)',
+                bgcolor: active ? TINT_PILL_ACTIVE : TINT_CHIP,
                 ...(readOnly
                   ? {}
                   : {
                       cursor: 'pointer',
-                      '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.12)' },
+                      '&:hover': { bgcolor: TINT_STRONG },
                     }),
               }}
             />