Remove Salt icon color and style overrides

.changeset/nervous-cougars-sparkle.md

@@ -0,0 +1,7 @@
+---
+'@jpmorganchase/mosaic-components': patch
+'@jpmorganchase/mosaic-theme': patch
+---
+
+Removed overrides for Salt icon color and size.
+Mosaic Icon component now uses number for size.

packages/components/src/AudioPlayer/index.tsx

@@ -136,7 +136,7 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, title, skipDurati
         <div>
           <a href={src} download target="_blank" rel="noreferrer">
             <OrderedButton variant="secondary" className={styles.button}>
-              <Icon name="download" size="small" />
+              <Icon name="download" />
             </OrderedButton>
           </a>
         </div>

packages/components/src/Callout/index.tsx

@@ -54,7 +54,7 @@ export const Callout: React.FC<CalloutProps> = ({
   const titleText = titleProp !== undefined ? titleProp : title;
   return (
     <div className={classnames(styles.root, styles[`${variant}Border`], className)} {...rest}>
-      <Icon className={classnames(styles.icon, styles[variant])} size="medium" name={iconName} />
+      <Icon className={classnames(styles.icon, styles[variant])} size={2} name={iconName} />
       <span className={styles.title}>{titleText}</span>
       <div className={styles.content}>{children}</div>
     </div>

packages/components/src/FilterToolbar/FilterDropdown/index.tsx

@@ -49,7 +49,7 @@ export function FilterDropdown({
       source={listItems}
       triggerComponent={
         <span className={styles.triggerRoot}>
-          <Icon name="filter" size="small" />
+          <Icon name="filter" />
           <DropdownButton
             label={labelButton ? labelButton(filters) : defaultButtonLabel(filters)}
           />

packages/components/src/FilterToolbar/SortDropdown/index.tsx

@@ -42,7 +42,7 @@ export function FilterSortDropdown({
       source={source}
       triggerComponent={
         <span className={styles.triggerRoot}>
-          <Icon name="swap" size="small" />
+          <Icon name="swap" />
           <DropdownButton label={labelButton ? labelButton(sort) : sort} />
         </span>
       }

packages/components/src/Icon/index.tsx

@@ -1,25 +1,29 @@
 import React from 'react';
 import { icons, IconNames } from '@jpmorganchase/mosaic-theme';
 
-import styles from './styles.css';
-
 export interface IconProps {
   /** Additional class name for root class override. */
   className?: string;
   /** Name of the icon */
   name: IconNames;
   /** Size of Icon */
-  size?: 'small' | 'medium' | 'large';
+  size?: number | 'small' | 'medium' | 'large';
 }
 
+const iconSizeMap = {
+  small: 1,
+  medium: 2,
+  large: 3
+};
+
 const deprecatedIcons = {
   tick: 'successTick'
 };
 
 export const Icon: React.FC<React.PropsWithChildren<IconProps>> = ({
   className,
   name,
-  size = 'small',
+  size = 1,
   ...rest
 }) => {
   if (name === 'none') {
@@ -37,9 +41,10 @@ export const Icon: React.FC<React.PropsWithChildren<IconProps>> = ({
     throw new Error(`icon ${currentIconName} is not supported`);
   }
   const IconComponent = icons[currentIconName];
+  const iconSize = typeof size === 'string' ? iconSizeMap[size] : size;
   return (
     <span className={className} {...rest}>
-      <IconComponent className={styles[size]} />
+      <IconComponent size={iconSize} />
     </span>
   );
 };

packages/components/src/styles.ts

@@ -23,7 +23,6 @@ import './Grid/styles.css';
 import './GridBase/styles.css';
 import './HelpLinks/styles.css';
 import './Hero/styles.css';
-import './Icon/styles.css';
 import './Impact/styles.css';
 import './Link/styles.css';
 import './LinkText/styles.css';

packages/theme/src/icon/index.ts

@@ -1,2 +1 @@
-export * from './icons.css';
 export * from './icons';

packages/theme/src/salt/salt.css.ts

@@ -24,22 +24,6 @@ createGlobalTheme('.saltAccordionSection', accordionVars, {
   }
 });
 
-export const iconSizeVars = createGlobalThemeContract({
-  size: '--saltIcon-size-multiplier'
-});
-
-createGlobalTheme('.saltIcon', iconSizeVars, {
-  size: '1'
-});
-
-export const iconColorVars = createGlobalThemeContract({
-  fill: '--saltIcon-color'
-});
-
-createGlobalTheme('.saltIcon', iconColorVars, {
-  fill: 'currentColor'
-});
-
 const densities = [
   '.salt-density-high',
   '.salt-density-medium',