chore: apply primary-color in more places (ToolJet#4025)

* chore: apply primary-color in more places, ensure svg use currentColor too * fix: remove hard-coded colors to use defaults * fix: those images were intruducing noise when switch to dark-mode * fix: setup colors for rc-slider * fix: empty all predefined-colors to use defaults * Use primary-rgb-darker
JPatil22 · Sep 29, 2022 · c824eb3 · c824eb3
1 parent caa288a
commit c824eb3
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 105 deletions.
diff --git a/frontend/src/Editor/Components/Button.jsx b/frontend/src/Editor/Components/Button.jsx
@@ -38,7 +38,7 @@ export const Button = function Button({
     width: '100%',
     borderRadius: `${borderRadius}px`,
     height,
-    display: visibility ? 'flex' : 'none',
+    display: visibility ? '' : 'none',
     '--tblr-btn-color-darker': tinycolor(backgroundColor).darken(8).toString(),
     '--loader-color': tinycolor(loaderColor ?? '#fff').toString(),
   };
@@ -79,12 +79,18 @@ export const Button = function Button({
     [setLoading]
   );
 
+  const hasCustomBackground = backgroundColor.charAt() === '#';
+  if (hasCustomBackground) {
+    computedStyles['--tblr-btn-color-darker'] = tinycolor(backgroundColor).darken(8).toString();
+  }
+
   return (
     <div className="widget-button">
       <button
         disabled={disable}
         className={cx('jet-button btn btn-primary p-1 overflow-hidden', {
           'btn-loading': loading,
+          'btn-custom': hasCustomBackground,
         })}
         style={computedStyles}
         onClick={(event) => {

diff --git a/frontend/src/Editor/Icons/desktop-selected.svg b/frontend/src/Editor/Icons/desktop-selected.svg
diff --git a/frontend/src/Editor/Icons/mobile-selected.svg b/frontend/src/Editor/Icons/mobile-selected.svg
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -351,7 +351,7 @@ export const widgets = [
       },
       events: [],
       styles: {
-        textColor: { value: '#000' },
+        textColor: { value: '' },
         actionButtonRadius: { value: '0' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
@@ -482,9 +482,9 @@ export const widgets = [
       },
       events: [],
       styles: {
-        backgroundColor: { value: '#375FCF' },
-        textColor: { value: '#fff' },
-        loaderColor: { value: '#fff' },
+        backgroundColor: { value: '' },
+        textColor: { value: '' },
+        loaderColor: { value: '' },
         visibility: { value: '{{true}}' },
         borderRadius: { value: '{{0}}' },
         disabledState: { value: '{{false}}' },
@@ -630,7 +630,7 @@ export const widgets = [
       },
       properties: {
         title: { value: 'This title can be changed' },
-        markerColor: { value: '#CDE1F8' },
+        markerColor: { value: '' },
         showAxes: { value: '{{true}}' },
         showGridLines: { value: '{{true}}' },
         plotFromJson: { value: '{{false}}' },
@@ -1300,8 +1300,8 @@ export const widgets = [
       },
       events: [],
       styles: {
-        textColor: { value: '#000' },
-        checkboxColor: { value: '#3c92dc' },
+        textColor: { value: '' },
+        checkboxColor: { value: '' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },
@@ -1410,8 +1410,8 @@ export const widgets = [
       },
       events: [],
       styles: {
-        textColor: { value: '#000' },
-        activeColor: { value: '#4D72FA' },
+        textColor: { value: '' },
+        activeColor: { value: '' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },
@@ -1493,8 +1493,8 @@ export const widgets = [
       },
       events: [],
       styles: {
-        textColor: { value: '#000' },
-        toggleSwitchColor: { value: '#3c92dc' },
+        textColor: { value: '' },
+        toggleSwitchColor: { value: '' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },
@@ -1838,8 +1838,8 @@ export const widgets = [
       },
       events: [],
       styles: {
-        backgroundColor: { value: '#ffffff00' },
-        textColor: { value: '#000' },
+        backgroundColor: { value: '' },
+        textColor: { value: '' },
         textSize: { value: 14 },
         textAlign: { value: 'left' },
         fontWeight: { value: 'normal' },
@@ -1986,7 +1986,7 @@ export const widgets = [
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
         imageFit: { value: 'contain' },
-        backgroundColor: { value: '#ffffff00' },
+        backgroundColor: { value: '' },
       },
     },
   },
@@ -2049,7 +2049,7 @@ export const widgets = [
       },
       events: [],
       styles: {
-        backgroundColor: { value: '#fff' },
+        backgroundColor: { value: '' },
         borderRadius: { value: '0' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
@@ -2674,8 +2674,8 @@ export const widgets = [
       },
       events: [],
       styles: {
-        textColor: { value: '#ffb400' },
-        labelColor: { value: '#333' },
+        textColor: { value: '' },
+        labelColor: { value: '' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },
@@ -2724,7 +2724,7 @@ export const widgets = [
       events: [],
       styles: {
         visibility: { value: '{{true}}' },
-        dividerColor: { value: '#E7E8EA' },
+        dividerColor: { value: '' },
       },
     },
   },
@@ -3320,7 +3320,7 @@ export const widgets = [
       },
       events: [],
       styles: {
-        highlightColor: { value: '#0565FE' },
+        highlightColor: { value: '' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
         tabWidth: { value: 'auto' },
@@ -3546,7 +3546,7 @@ export const widgets = [
       },
       events: [],
       styles: {
-        backgroundColor: { value: '#fff' },
+        backgroundColor: { value: '' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
         borderRadius: { value: '{{0}}' },
@@ -3780,8 +3780,8 @@ export const widgets = [
       },
       events: [],
       styles: {
-        color: { value: '#4D72FA' },
-        textColor: { value: '#4D72FA' },
+        color: { value: '' },
+        textColor: { value: '' },
         textSize: { value: '{{16}}' },
         strokeWidth: { value: '{{8}}' },
         counterClockwise: { value: '{{false}}' },
@@ -4033,9 +4033,9 @@ export const widgets = [
       },
       events: [],
       styles: {
-        lineColor: { value: '#E9E9E9' },
-        handleColor: { value: '#4D72FA' },
-        trackColor: { value: '#4D72FA' },
+        lineColor: { value: '' },
+        handleColor: { value: '' },
+        trackColor: { value: '' },
         visibility: { value: '{{true}}' },
       },
     },
@@ -4243,7 +4243,7 @@ export const widgets = [
       events: [],
       styles: {
         visibility: { value: '{{true}}' },
-        dividerColor: { value: '#E7E8EA' },
+        dividerColor: { value: '' },
       },
     },
   },
@@ -4444,13 +4444,13 @@ ReactDOM.render(<ConnectedComponent />, document.body);`,
       },
       events: [],
       styles: {
-        backgroundColor: { value: '#fff' },
-        textColor: { value: '#000' },
+        backgroundColor: { value: '' },
+        textColor: { value: '' },
         visibility: { value: '{{true}}' },
         borderRadius: { value: '{{0}}' },
         disabledState: { value: '{{false}}' },
-        selectedTextColor: { value: '#fff' },
-        selectedBackgroundColor: { value: '#4D72FA' },
+        selectedTextColor: { value: '' },
+        selectedBackgroundColor: { value: '' },
       },
     },
   },
@@ -4609,8 +4609,8 @@ ReactDOM.render(<ConnectedComponent />, document.body);`,
       styles: {
         visibility: { value: '{{true}}' },
         theme: { value: 'titles' },
-        color: { value: '#4d72fa' },
-        textColor: { value: '#000' },
+        color: { value: '' },
+        textColor: { value: '' },
       },
     },
   },
@@ -4676,7 +4676,7 @@ ReactDOM.render(<ConnectedComponent />, document.body);`,
         disabledState: { value: '{{false}}' },
         width: { value: '{{400}}' },
         minWidth: { value: '{{200}}' },
-        textColor: { value: '#4d72fa' },
+        textColor: { value: '' },
       },
     },
   },
@@ -4800,8 +4800,8 @@ ReactDOM.render(<ConnectedComponent />, document.body);`,
       },
       events: [],
       styles: {
-        textColor: { value: '#000' },
-        checkboxColor: { value: '#4D72FA' },
+        textColor: { value: '' },
+        checkboxColor: { value: '' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },

diff --git a/frontend/src/_styles/colors.scss b/frontend/src/_styles/colors.scss
@@ -6,13 +6,17 @@ $border-grey-light: #D9DCDE;
 $border-grey-dark: #333C48;
 $light-green: #82bf99;
 $dark-green: #3b734f;
-$primary: #4D72FA;
+
 $disabled: #9E9EA8;
 $dark-background: #1f2936;
 $bg-light: #EEF3F9;
 $bg-dark: #22272E;
 $bg-dark-light: #232e3c;
-$primary-light: #7A95FB;
+
+$primary-rgb: 77, 114, 250;
+$primary-rgb-darker: 77, 94, 240;
+$primary: unquote("rgb(#{$primary-rgb})");
+$primary-light: unquote("rgb(#{$primary-rgb-darker})");
 
 .color-primary {
   color: $primary !important;
@@ -51,4 +55,4 @@ $primary-light: #7A95FB;
 }
 .color-whitish-darkmode{
   color :#c9cbcf !important;
-}
+}
diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
@@ -122,13 +122,13 @@
 
 .datasource-modal-button {
   background: #ffffff;
-  border: 1px solid #4d72fa;
+  border: 1px solid $primary;
   box-sizing: border-box;
   border-radius: 4px;
-  color: #4d72fa;
+  color: $primary;
   height: 36px;
   &:hover {
-    background: #4d72fa;
+    background: $primary;
     color: #fffffc;
   }
 }
@@ -137,7 +137,7 @@
   @extend .datasource-modal-button;
   background: transparent !important;
   &:hover {
-    background: #4d72fa !important;
+    background: $primary !important;
     color: #fffffc !important;
   }
 }

diff --git a/frontend/src/_styles/mixins.scss b/frontend/src/_styles/mixins.scss
@@ -23,15 +23,15 @@
     @if $light-theme {
       background: $white;
       &:hover {
-        background: #4d72fa;
+        background: $primary;
         color: #FFFFFC;
       }
     } @else {
       background: transparent!important;
       &:hover {
-        background: #4d72fa!important;
+        background: $primary!important;
         color: #FFFFFC!important;
 
       }
     }
-}
+}