Dark Mode: Swap hex colors in ui/components/ui folder (#14191)

ui/components/ui/actionable-message/actionable-message.stories.js

@@ -110,7 +110,7 @@ export const WithIcon = (args) => <ActionableMessage {...args} />;
 WithIcon.args = {
   className: 'actionable-message--left-aligned actionable-message--warning',
   useIcon: true,
-  iconFillColor: '#f8c000',
+  iconFillColor: 'var(--color-waring-default)',
 };
 
 export const PrimaryV2Action = (args) => <ActionableMessage {...args} />;
@@ -119,7 +119,7 @@ PrimaryV2Action.args = {
   message:
     'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
   useIcon: true,
-  iconFillColor: '#d73a49',
+  iconFillColor: 'var(--color-error-default)',
   type: 'danger',
   primaryActionV2: {
     label: 'I want to proceed anyway',

ui/components/ui/breadcrumbs/breadcrumbs.component.js

@@ -21,7 +21,10 @@ export default class Breadcrumbs extends PureComponent {
               key={i}
               className="breadcrumb"
               style={{
-                backgroundColor: i === currentIndex ? '#D8D8D8' : '#FFFFFF',
+                backgroundColor:
+                  i === currentIndex
+                    ? 'var(--color-background-alternative)'
+                    : 'var(--color-background-default)',
               }}
             />
           ))}

ui/components/ui/breadcrumbs/breadcrumbs.component.test.js

@@ -11,12 +11,12 @@ describe('Breadcrumbs Component', () => {
     expect(wrapper.find('.breadcrumb')).toHaveLength(3);
     expect(
       wrapper.find('.breadcrumb').at(0).props().style.backgroundColor,
-    ).toStrictEqual('#FFFFFF');
+    ).toStrictEqual('var(--color-background-default)');
     expect(
       wrapper.find('.breadcrumb').at(1).props().style.backgroundColor,
-    ).toStrictEqual('#D8D8D8');
+    ).toStrictEqual('var(--color-background-alternative)');
     expect(
       wrapper.find('.breadcrumb').at(2).props().style.backgroundColor,
-    ).toStrictEqual('#FFFFFF');
+    ).toStrictEqual('var(--color-background-default)');
   });
 });

ui/components/ui/export-text-container/export-text-container.component.js

@@ -21,7 +21,7 @@ function ExportTextContainer({ text = '' }) {
             handleCopy(text);
           }}
         >
-          <Copy size={17} color="#3098DC" />
+          <Copy size={17} color="var(--color-primary-default)" />
           <div className="export-text-container__button-text">
             {copied ? t('copiedExclamation') : t('copyToClipboard')}
           </div>

ui/components/ui/form-field/form-field.stories.js

@@ -55,7 +55,11 @@ export const FormFieldWithTitleDetail = (args) => {
     text: <div style={{ fontSize: '12px' }}>Detail</div>,
     button: (
       <button
-        style={{ backgroundColor: clicked ? 'orange' : 'rgb(239, 239, 239)' }}
+        style={{
+          backgroundColor: clicked
+            ? 'var(--color-secondary-default)'
+            : 'var(--color-background-alternative)',
+        }}
         onClick={() => setClicked(!clicked)}
       >
         Click Me

ui/components/ui/icon/README.mdx

@@ -7,7 +7,6 @@ import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 import Interaction from './interaction-icon.component';
-import PaperAirplane from './paper-airplane-icon';
 import Preloader from './preloader';
 import ReceiveIcon from './receive-icon.component';
 import SendIcon from './send-icon.component';
@@ -176,12 +175,6 @@ Use the `className` prop to add an additional class to the icon. This additional
 
 <ArgsTable of={SwapIconComponent} />
 
-## PaperAirplane
-
-<Canvas>
-  <Story id="ui-components-ui-icon-icon-stories-js--paper-airplane-story" />
-</Canvas>
-
 ## CopyIcon
 
 <Canvas>

ui/components/ui/icon/icon.stories.js

@@ -17,7 +17,6 @@ import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 import Interaction from './interaction-icon.component';
-import PaperAirplane from './paper-airplane-icon';
 import Preloader from './preloader';
 import ReceiveIcon from './receive-icon.component';
 import SendIcon from './send-icon.component';
@@ -152,7 +151,6 @@ export const DefaultStory = (args) => (
         <IconItem Component={<BuyIcon {...args} />} />
         <IconItem Component={<SwapIcon {...args} />} />
         <IconItem Component={<SwapIconComponent {...args} />} />
-        <IconItem Component={<PaperAirplane {...args} />} />
         <IconItem Component={<CopyIcon {...args} />} />
         <IconItem Component={<Preloader {...args} />} />
         <IconItem Component={<IconEye {...args} />} />
@@ -279,7 +277,7 @@ export const BuyIconStory = (args) => <BuyIcon {...args} />;
 BuyIconStory.args = {
   width: '17',
   height: '21',
-  fill: '#2F80ED',
+  fill: 'var(--color-primary-default)',
 };
 BuyIconStory.storyName = 'BuyIcon';
 
@@ -287,7 +285,7 @@ export const SwapIconStory = (args) => <SwapIcon {...args} />;
 SwapIconStory.args = {
   width: '17',
   height: '21',
-  fill: '#2F80ED',
+  fill: 'var(--color-primary-default)',
 };
 SwapIconStory.storyName = 'SwapIcon';
 
@@ -299,13 +297,6 @@ SendSwapIconStory.args = {
 };
 SendSwapIconStory.storyName = 'Send/SwapIcon';
 
-export const PaperAirplaneStory = (args) => <PaperAirplane {...args} />;
-PaperAirplaneStory.args = {
-  size: 40,
-  color: 'var(--color-icon-default)',
-};
-PaperAirplaneStory.storyName = 'PaperAirplane';
-
 export const CopyIconStory = (args) => <CopyIcon {...args} />;
 CopyIconStory.args = {
   size: 40,

ui/components/ui/icon/paper-airplane-icon.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function PaperAirplane({ size, className, color }) {
-  return (
-    <svg
-      className={className}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M22.6001 0.0846465C22.9027 -0.0485745 23.2611 -0.0263377 23.5508 0.164104C23.9463 0.424137 24.1048 0.926235 23.9302 1.36621L15.1985 23.3701C15.0453 23.7562 14.6689 24.0071 14.2535 23.9999C13.8381 23.9926 13.4707 23.7289 13.3309 23.3376L9.99771 14.0046L0.662377 10.6706C0.271138 10.5308 0.00736766 10.1634 0.000151723 9.74798C-0.00706558 9.3326 0.24378 8.95619 0.629931 8.80296L22.6001 0.0846465ZM11.9306 13.4818L20.2936 5.11878L14.32 20.1722L11.9306 13.4818ZM18.8812 3.70792L3.82785 9.68148L10.5182 12.0709L18.8812 3.70792Z"
-        fill={color}
-      />
-    </svg>
-  );
-}
-
-PaperAirplane.defaultProps = {
-  color: '#FFFFFF',
-};
-
-PaperAirplane.propTypes = {
-  /**
-   * Additional className
-   */
-  className: PropTypes.string,
-  /**
-   * Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40 and is required
-   */
-  size: PropTypes.number.isRequired,
-  /**
-   * Color of the icon should be a valid design system color
-   */
-  color: PropTypes.string,
-};

ui/components/ui/icon/sun-check-icon.component.js

@@ -2,8 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export default function SunCheck({ reverseColors }) {
-  const sunColor = reverseColors ? '#037DD6' : 'white';
+  const sunColor = reverseColors
-  const checkColor = reverseColors ? 'white' : '#037DD6';
+    ? 'var(--color-primary-default)'
+    : 'var(--color-primary-inverse)';
+  const checkColor = reverseColors
+    ? 'var(--color-primary-inverse)'
+    : 'var(--color-primary-default)';
   return (
     <svg
       width="15"

ui/components/ui/info-tooltip/info-tooltip-icon.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function InfoTooltipIcon({ fillColor = '#b8b8b8' }) {
+export default function InfoTooltipIcon({
+  fillColor = 'var(--color-icon-default)',
+}) {
   return (
     <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
       <path

ui/components/ui/info-tooltip/info-tooltip.js

@@ -17,7 +17,7 @@ export default function InfoTooltip({
   containerClassName,
   wrapperClassName,
   wide,
-  iconFillColor = '#b8b8b8',
+  iconFillColor = 'var(--color-icon-default)',
 }) {
   return (
     <div className="info-tooltip">

ui/components/ui/list-item/list-item.stories.js

@@ -28,13 +28,13 @@ Currencies.propTypes = {
   secondary: PropTypes.string,
 };
 
-const okColor = '#2F80ED';
+const okColor = 'var(--color-primary-default)';
-const failColor = '#D73A49';
+const failColor = 'var(--color-error-default';
 
 export const SendComponent = () => (
   <ListItem
     icon={<Send color={okColor} size={28} />}
-    titleIcon={<Preloader size={16} color="#D73A49" />}
+    titleIcon={<Preloader size={16} color={failColor} />}
     title={text('title', 'Send DAI')}
     className="list-item"
     subtitle={text('subtitle', 'Sept 20 · To: 00X4...3058')}
@@ -61,7 +61,10 @@ export const PendingComponent = () => (
     className="list-item"
     subtitleStatus={
       <span>
-        <span style={{ color: '#F56821' }}>Unapproved</span> ·{' '}
+        <span style={{ color: 'var(--color-warning-default)' }}>
+          Unapproved
+        </span>{' '}
+        ·{' '}
       </span>
     }
     subtitle={text('subtitle', 'Turtlefarm.com')}

ui/components/ui/loading-screen/loading-screen.component.js

@@ -34,7 +34,10 @@ class LoadingScreen extends Component {
         {this.props.header}
         <div className="loading-overlay__container">
           {this.props.showLoadingSpinner && (
-            <Spinner color="#F7C06C" className="loading-overlay__spinner" />
+            <Spinner
+              color="var(--color-secondary-muted)"
+              className="loading-overlay__spinner"
+            />
           )}
           {this.renderMessage()}
         </div>

ui/components/ui/nickname-popover/nickname-popover.component.js

@@ -51,7 +51,7 @@ const NicknamePopover = ({
               }}
               title=""
             >
-              <CopyIcon size={11} color="#989a9b" />
+              <CopyIcon size={11} color="var(--color-icon-default)" />
             </button>
           </Tooltip>
         </div>

ui/components/ui/slider/slider.component.js

@@ -19,12 +19,12 @@ const styles = {
   },
   rail: {
     borderRadius: 50,
-    background: '#D6D9DC',
+    background: 'var(--color-background-alternative)',
     height: 6,
   },
   track: {
     borderRadius: 50,
-    background: '#037DD6',
+    background: 'var(--color-primary-default)',
     height: 6,
   },
   thumb: {
@@ -32,8 +32,8 @@ const styles = {
     width: 20,
     marginTop: -7,
     marginLeft: -7,
-    backgroundColor: '#037DD6',
+    backgroundColor: 'var(--color-primary-default)',
-    border: '1px solid #EAF6FF',
+    border: '1px solid var(--color-border-muted)',
     boxSizing: 'border-box',
     boxShadow: '0px 0px 14px 0px rgba(0, 0, 0, 0.18)',
     '&:focus, &$active': {

ui/components/ui/spinner/spinner.component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Spinner = ({ className = '', color = '#000000' }) => {
+const Spinner = ({ className = '', color = 'var(--color-text-default)' }) => {
   return (
     <div className={`spinner ${className}`}>
       <svg

ui/components/ui/text-field/text-field.component.js

@@ -27,7 +27,7 @@ const styles = {
       borderBottom: '1px solid var(--color-text-default) !important', // Visible bottom border
     },
     '&:after': {
-      borderBottom: `2px solid rgb(3, 125, 214)`, // Animated bottom border
+      borderBottom: `2px solid var(--color-primary-default)`, // Animated bottom border
     },
   },
   materialError: {},
@@ -46,16 +46,16 @@ const styles = {
   },
   materialWhitePaddedUnderline: {
     '&:after': {
-      borderBottom: '2px solid #fff',
+      borderBottom: '2px solid var(--color-background-default)', // @TODO: Replace with border-muted ?
     },
   },
   // Non-material styles
   formLabel: {
     '&$formLabelFocused': {
-      color: '#5b5b5b',
+      color: 'var(--color-text-alternative)',
     },
     '&$materialError': {
-      color: '#5b5b5b',
+      color: 'var(--color-text-alternative)',
     },
   },
   formLabelFocused: {},

ui/components/ui/toggle-button/toggle-button.component.js

@@ -8,7 +8,7 @@ const trackStyle = {
   height: '24px',
   padding: '0px',
   borderRadius: '26px',
-  border: '2px solid rgb(3, 125, 214)',
+  border: '2px solid var(--color-primary-default)',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -16,7 +16,7 @@ const trackStyle = {
 
 const offTrackStyle = {
   ...trackStyle,
-  border: '2px solid #8E8E8E',
+  border: '2px solid var(--color-border-default)',
 };
 
 const thumbStyle = {
@@ -31,18 +31,18 @@ const thumbStyle = {
 
 const colors = {
   activeThumb: {
-    base: '#037DD6',
+    base: 'var(--color-primary-default)',
   },
   inactiveThumb: {
-    base: '#6A737D',
+    base: 'var(--color-icon-default)',
   },
   active: {
-    base: '#ffffff',
+    base: 'var(--color-background-default)',
-    hover: '#ffffff',
+    hover: 'var(--color-background-default)',
   },
   inactive: {
-    base: '#DADADA',
+    base: 'var(--color-background-alternative)',
-    hover: '#DADADA',
+    hover: 'var(color-background-alternative)',
   },
 };