Using Tailwind color palette for color picker swatches (#76)

usewaypoint · Apr 15, 2024 · de615c7 · de615c7
1 parent bbfa746
commit de615c7
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 28 deletions.
diff --git a/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx
@@ -29,7 +29,7 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
     <BaseSidebarPanel title="Global">
       <ColorInput
         label="Backdrop color"
-        defaultValue={data.backdropColor ?? '#EEEEEE'}
+        defaultValue={data.backdropColor ?? '#F5F5F5'}
         onChange={(backdropColor) => updateData({ ...data, backdropColor })}
       />
       <ColorInput
@@ -45,7 +45,7 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
       />
       <ColorInput
         label="Text color"
-        defaultValue={data.textColor ?? '#242424'}
+        defaultValue={data.textColor ?? '#262626'}
         onChange={(textColor) => updateData({ ...data, textColor })}
       />
     </BaseSidebarPanel>

diff --git a/.../App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx b/.../App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/ColorInput/Picker.tsx
@@ -6,27 +6,36 @@ import { Box, Stack, SxProps } from '@mui/material';
 import Swatch from './Swatch';
 
 const DEFAULT_PRESET_COLORS = [
-  '#24AF7F',
-  '#3DD8B3',
-  '#D82922',
-  '#Ad5626',
-  '#CFB847',
-  '#FFCF5A',
-  '#D86A07',
-  '#EBA52C',
-  '#03124A',
-  '#2458AF',
-  '#528FD9',
-  '#000000',
-  '#191A1A',
-  '#242424',
-  '#303031',
-  '#474849',
-  '#C9D5D3',
-  '#C6E5DF',
-  '#FAF1E7',
-  '#EEEEEE',
+  '#E11D48',
+  '#DB2777',
+  '#C026D3',
+  '#9333EA',
+  '#7C3AED',
+  '#4F46E5',
+  '#2563EB',
+  '#0284C7',
+  '#0891B2',
+  '#0D9488',
+  '#059669',
+  '#16A34A',
+  '#65A30D',
+  '#CA8A04',
+  '#D97706',
+  '#EA580C',
+  '#DC2626',
   '#FFFFFF',
+  '#FAFAFA',
+  '#F5F5F5',
+  '#E5E5E5',
+  '#D4D4D4',
+  '#A3A3A3',
+  '#737373',
+  '#525252',
+  '#404040',
+  '#262626',
+  '#171717',
+  '#0A0A0A',
+  '#000000',
 ];
 
 const SX: SxProps = {

diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx
@@ -41,8 +41,8 @@ export default function EmailLayoutEditor(props: EmailLayoutProps) {
         setSelectedBlockId(null);
       }}
       style={{
-        backgroundColor: props.backdropColor ?? '#EEEEEE',
-        color: props.textColor ?? '#242424',
+        backgroundColor: props.backdropColor ?? '#F5F5F5',
+        color: props.textColor ?? '#262626',
         fontFamily: getFontFamily(props.fontFamily),
         fontSize: '16px',
         fontWeight: '400',

diff --git a/packages/editor-sample/src/getConfiguration/sample/empty-email-message.ts b/packages/editor-sample/src/getConfiguration/sample/empty-email-message.ts
@@ -4,9 +4,9 @@ const EMPTY_EMAIL_MESSAGE: TEditorConfiguration = {
   root: {
     type: 'EmailLayout',
     data: {
-      backdropColor: '#F8F8F8',
+      backdropColor: '#F5F5F5',
       canvasColor: '#FFFFFF',
-      textColor: '#242424',
+      textColor: '#262626',
       fontFamily: 'MODERN_SANS',
       childrenIds: [],
     },

diff --git a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx
@@ -33,8 +33,8 @@ export default function EmailLayoutReader(props: EmailLayoutProps) {
   return (
     <div
       style={{
-        backgroundColor: props.backdropColor ?? '#EEEEEE',
-        color: props.textColor ?? '#242424',
+        backgroundColor: props.backdropColor ?? '#F5F5F5',
+        color: props.textColor ?? '#262626',
         fontFamily: getFontFamily(props.fontFamily),
         fontSize: '16px',
         fontWeight: '400',