cleanup more css variables

Emurgo · Oct 12, 2021 · 973744b · 973744b
1 parent 7fe348f
commit 973744b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 95 deletions.
diff --git a/packages/yoroi-extension/app/components/widgets/QrCodeWrapper.js b/packages/yoroi-extension/app/components/widgets/QrCodeWrapper.js
@@ -9,15 +9,17 @@ type Props = {|
   +size: number,
 |};
 
+function readCssVar(varName: string): string {
+  varName = varName.startsWith('--') ? varName : '--' + varName;
+  return window.getComputedStyle(document.documentElement).getPropertyValue(varName);
+}
+
 @observer
 export default class QrCodeWrapper extends Component<Props> {
   render(): Node {
-
     // Get QRCode color value from active theme's CSS variable
-    const qrCodeBackgroundColor = document.documentElement ?
-      document.documentElement.style.getPropertyValue('--theme-receive-qr-code-background-color') : 'transparent';
-    const qrCodeForegroundColor = document.documentElement ?
-      document.documentElement.style.getPropertyValue('--theme-receive-qr-code-foreground-color') : '#000';
+    const qrCodeBackgroundColor = readCssVar('--th-qr-code-background');
+    const qrCodeForegroundColor = readCssVar('--th-qr-code-foreground');
 
     return (
       <QRCode

diff --git a/packages/yoroi-extension/app/styles/globalStyles.js b/packages/yoroi-extension/app/styles/globalStyles.js
@@ -63,6 +63,8 @@ const globalStyles = (theme: Object): Node => (
         '--th-palette-tx-status-low-background': theme.palette.txStatus.low.background,
         '--th-palette-tx-status-low-text': theme.palette.txStatus.low.text,
 
+        '--th-palette-background-banner-warning': theme.palette.background.banner.warning,
+
         /* === BUTTON === */
         // button primary variant
         '--component-button-primary-background': 'var(--th-palette-secondary-300)',
@@ -133,6 +135,28 @@ const globalStyles = (theme: Object): Node => (
         '--component-dialog-text': 'var(--th-palette-gray-900)',
         '--component-dialog-overlay-background-color': 'var(--th-palette-background-overlay)',
         '--component-dialog-min-width-cmn': '540px',
+
+        '--th-sidebar-text': theme.palette.background.sidebar.text,
+        '--th-sidebar-background': `linear-gradient(22.58deg, ${theme.palette.background.sidebar.start} 0%, ${theme.palette.background.sidebar.end} 100%)`,
+        '--th-sidebar-end': theme.palette.background.sidebar.end,
+
+        '--th-notification-message-background': 'rgba(21, 209, 170, 0.8)',
+
+        /* === QR CODE === */
+        '--th-qr-code-background': 'transparent',
+        '--th-qr-code-foreground': 'var(--th-palette-gray-800)',
+
+        /* === TO FIX: === */
+
+        '--th-transactions-icon-type-expend-background-color': '#15d1aa',
+        '--th-transactions-icon-type-income-background-color': '#9ab2d9',
+        '--th-transactions-icon-type-exchange-background-color': '#10aca4',
+        '--th-transactions-icon-type-failed-background-color': '#eb6d7a',
+
+        '--scrollbar-thumb-background': '#c8ccce',
+
+        '--warning-box-bg-shadow': '0 2px 40px 0 rgba(242, 242, 242, 0.5)',
+        '--topbar-height': '64px',
       },
 
       /* === GLOBAL STYLES === */

diff --git a/packages/yoroi-extension/app/themes/prebuilt/YoroiClassic.js b/packages/yoroi-extension/app/themes/prebuilt/YoroiClassic.js
@@ -3,42 +3,12 @@
 
 // TABS
 
-// OPTION CARD
-
-// Sidebar gradient
-const sidebarGradient = {
-  start: '#373f52',
-  end: '#373f52',
-};
-
 const YoroiClassic = {
   // COLORS
 
-  '--theme-receive-qr-code-background-color': 'transparent',
-  '--theme-receive-qr-code-foreground-color': '#121327',
-
   '--theme-send-confirmation-dialog-send-values-color': '#ea4c5b',
   '--theme-hw-send-confirmation-info-block-background-color': '#f3f3f5',
 
-  '--theme-settings-pane-background-color': '#ffffff',
-  '--theme-settings-pane-border': '1px solid #ffffff',
-  '--theme-settings-menu-box-background-color': '#f3f3f5',
-  '--theme-settings-menu-box-border': '1px solid #f3f3f5',
-  '--theme-settings-menu-item-text-color': '#121327',
-  '--theme-settings-menu-item-text-color-active': '#121327',
-  '--theme-settings-menu-item-text-color-enabled-hover': '#121327',
-  '--theme-settings-menu-item-text-color-disabled': '#b3b3b3',
-  '--theme-settings-menu-item-background-color-active': '#ffffff',
-  '--theme-settings-menu-item-left-border-color-active': '#daa49a',
-  '--theme-settings-theme-select-title-color': '#121327',
-
-  '--theme-topbar-background-color-gradient-start': sidebarGradient.start,
-  '--theme-topbar-background-color-gradient-end': sidebarGradient.end,
-  '--theme-topbar-background-color': `linear-gradient(to right, ${sidebarGradient.start}, ${sidebarGradient.end})`,
-  '--theme-topbar-wallet-name-color': '#fafbfc',
-  '--theme-topbar-wallet-info-color': '#fafbfc',
-  '--theme-topbar-layout-body-background-color': '#ffffff',
-
   '--theme-transactions-state-pending-background-color': '#F0F3F5',
   '--theme-transactions-state-pending-stripes-color': 'rgba(217, 221, 224, 0.2)', // #D9DDE0
   '--theme-transactions-state-pending-text-color': '#ADAEB6',
@@ -84,22 +54,7 @@ const YoroiClassic = {
   '--theme-widgets-hash-dark-color': '#000000',
   '--theme-widgets-hash-light-color': '#929293',
 
-
   '--theme-wallet-navigation-tab-height': '40px',
-  '--theme-wallet-navigation-tab-text-color': '#6B7384',
-  '--theme-wallet-navigation-tab-text-color-active': '#DAA49A',
-  '--theme-wallet-navigation-tab-text-color-hover': '#17D1AA',
-  '--theme-wallet-navigation-tab-text-color-disabled': '#C4CAD7',
-
-  '--theme-warning-box-bg-color': 'rgba(233, 72, 61, 0.06)', // #E9483D
-
-  '--theme-warning-color': `#E9483D`,
-  '--theme-warning-button-color': `#CC3F35`,
-  '--theme-warning-button-color-active': `#CC3F35`,
-  '--theme-warning-button-color-hover': `#FF4F42`,
-  '--theme-warning-button-color-disabled': `rgba(204, 63, 53, 0.35)`, // CC3F35
-
-  '--theme-tooltipbox-border-color': 'rgba(77,32,192,0.08)', // 4d20c0
 };
 
 export const getThemeVars: ('shelley' | void) => { ... } = _env => {

diff --git a/packages/yoroi-extension/app/themes/prebuilt/YoroiModern.js b/packages/yoroi-extension/app/themes/prebuilt/YoroiModern.js
@@ -1,14 +1,6 @@
 // @flow
 //  ==== Theme: Yoroi Modern === //
 
-// OPTION CARD
-
-// Sidebar gradient
-const sidebarGradient = {
-  start: '#1e46bd',
-  end: '#4760ff',
-};
-
 // Modal Margin
 const modalMargin = {
   top: 24,
@@ -20,31 +12,9 @@ const modalMargin = {
 const YoroiModern = {
   // COLORS
 
-  '--theme-receive-qr-code-background-color': 'transparent',
-  '--theme-receive-qr-code-foreground-color': '#353535',
-
   '--theme-send-confirmation-dialog-send-values-color': '#15d1aa',
   '--theme-hw-send-confirmation-info-block-background-color': '#f0f3f5',
 
-  '--theme-settings-pane-background-color': '#ffffff',
-  '--theme-settings-pane-border': '1px solid #ffffff',
-  '--theme-settings-menu-box-background-color': '#f0f3f5',
-  '--theme-settings-menu-box-border': '1px solid #f0f3f5',
-  '--theme-settings-menu-item-text-color': '#adaeb6',
-  '--theme-settings-menu-item-text-color-active': '#2b2c32',
-  '--theme-settings-menu-item-text-color-enabled-hover': '#2b2c32',
-  '--theme-settings-menu-item-text-color-disabled': '#D9DAE1',
-  '--theme-settings-menu-item-background-color-active': '#ffffff',
-  '--theme-settings-menu-item-left-border-color-active': '#3d5cdb',
-  '--theme-settings-theme-select-title-color': '#2b2c32',
-
-  '--theme-topbar-background-color-gradient-start': sidebarGradient.start,
-  '--theme-topbar-background-color-gradient-end': sidebarGradient.end,
-  '--theme-topbar-background-color': `linear-gradient(to right, ${sidebarGradient.start}, ${sidebarGradient.end})`,
-  '--theme-topbar-wallet-name-color': '#ffffff',
-  '--theme-topbar-wallet-info-color': '#ffffff',
-  '--theme-topbar-layout-body-background-color': '#ffffff',
-
   '--theme-transactions-state-pending-background-color': '#F0F3F5',
   '--theme-transactions-state-pending-stripes-color': 'rgba(217, 221, 224, 0.2)', // #D9DDE0
   '--theme-transactions-state-pending-text-color': '#ADAEB6',
@@ -91,7 +61,6 @@ const YoroiModern = {
   '--theme-widgets-hash-dark-color': '#464749',
   '--theme-widgets-hash-light-color': '#adaeB6',
 
-
   '--theme-default-color-blue': '#2249BE',
 
   // OTHERS
@@ -100,20 +69,6 @@ const YoroiModern = {
   '--theme-modal-min-max-width-lg': `${680 - (modalMargin.left + modalMargin.right)}px`,
 
   '--theme-wallet-navigation-tab-height': '62px',
-  '--theme-wallet-navigation-tab-text-color': '#6B7384',
-  '--theme-wallet-navigation-tab-text-color-active': '#17D1AA',
-  '--theme-wallet-navigation-tab-text-color-hover': '#17D1AA',
-  '--theme-wallet-navigation-tab-text-color-disabled': '#C4CAD7',
-
-  '--theme-warning-box-bg-color': 'rgba(255, 19, 81, 0.06)', // #FF1351
-
-  '--theme-warning-color': `#FF1351`,
-  '--theme-warning-button-color': `#CC0E41`,
-  '--theme-warning-button-color-active': `#CC0E41`,
-  '--theme-warning-button-color-hover': `#FF1351`,
-  '--theme-warning-button-color-disabled': `rgba(204, 14, 65, 0.35)`, // CC0E41
-
-  '--theme-tooltipbox-border-color': 'rgba(77,32,192,0.08)', // 4d20c0
 
   // Dashboard
   '--theme-dashboard-page-background-color': '#ffffff',