Merge pull request #12260 from ToolJet/feat/custom-themes-modular

Feat/custom themes modular

frontend/ee

@@ -1 +1 @@
-Subproject commit 4b950ed3d0ba15edddf217936e9c9ae1ca3cf11a
+Subproject commit 163491658728c21213de4fd1e5469373c9bd4720

frontend/src/AppBuilder/CodeBuilder/Elements/Color.jsx

@@ -9,12 +9,16 @@ export const Color = ({
   value,
   onChange,
   pickerStyle = {},
+  colorMap = {},
   cyLabel,
   asBoxShadowPopover = true,
   meta,
   outerWidth = '142px',
   component,
   styleDefinition,
+  componentType = 'color',
+  CustomOptionList = () => {},
+  SwatchesToggle = () => {},
 }) => {
   value = component == 'Button' ? computeColor(styleDefinition, value, meta) : value;
   const [showPicker, setShowPicker] = useState(false);
@@ -68,9 +72,11 @@ export const Color = ({
   const ColorPicker = () => {
     return (
       <>
-        {showPicker && (
+        {SwatchesToggle()}
+        {showPicker && componentType === 'swatches' && CustomOptionList()}
+        {showPicker && componentType === 'color' && (
           <div>
-            <div style={coverStyles} onClick={() => setShowPicker(false)} />
+            {/* <div style={coverStyles} onClick={() => setShowPicker(false)} /> */}
             <div style={pickerStyle}>
               <SketchPicker
                 onFocus={() => setShowPicker(true)}
@@ -107,7 +113,9 @@ export const Color = ({
         ></div>
 
         <div className="col tj-text-xsm p-0 color-slate12" data-cy={`${String(cyLabel)}-value`}>
-          {value}
+          {colorMap?.[value]
+            ? 'Brand/' + colorMap?.[value]?.charAt(0).toUpperCase() + colorMap?.[value]?.slice(1)
+            : value}
         </div>
       </div>
     );

frontend/src/AppBuilder/CodeEditor/DynamicFxTypeRenderer.jsx

@@ -18,9 +18,11 @@ import { NumberInput } from '../CodeBuilder/Elements/NumberInput';
 import { Datepicker } from '../CodeBuilder/Elements/Datepicker';
 import TableRowHeightInput from '../CodeBuilder/Elements/TableRowHeightInput';
 import { TimePicker } from '../CodeBuilder/Elements/TimePicker';
+import { ColorSwatches } from '@/modules/Appbuilder/components';
 
 const AllElements = {
   Color,
+  ColorSwatches,
   Json,
   Toggle,
   Select,

frontend/src/AppBuilder/CodeEditor/utils.js

@@ -337,6 +337,7 @@ export const FxParamTypeMapping = Object.freeze({
   color: 'Color',
   json: 'Json',
   code: 'Code',
+  colorSwatches: 'ColorSwatches',
   toggle: 'Toggle',
   select: 'Select',
   alignButtons: 'AlignButtons',

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppExport.jsx

@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/Button/Button';
 import ExportAppModal from '@/HomePage/ExportAppModal';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
+import cx from 'classnames';
 
 const AppExport = ({ darkMode }) => {
   const { app } = useStore(
@@ -28,22 +29,20 @@ const AppExport = ({ darkMode }) => {
           darkMode={darkMode}
         />
       )}
-      <div className="d-flex align-items-center  global-popover-div-wrap mb-3">
-        <p className="tj-text-xsm color-slate12 w-full m-auto">Export app</p>
-        <div>
-          <Button
-            fill="var(--indigo9)"
-            leadingIcon="fileupload"
-            className="tw-w-[158px] !tw-text-[var(--indigo9)] !tw-bg-[var(--indigo3)] hover:!tw-text-[var(--indigo10)] hover:!tw-bg-[var(--indigo4)] active:!tw-text-[var(--indigo9)] active:!tw-bg-[var(--indigo5) focus-visible:!tw-text-[var(--indigo10)] focus-visible:!tw-bg-[var(--indigo3)]"
-            onClick={() => {
-              setIsExportingApp(true);
-              document.getElementById('maintenance-app-modal').click();
-            }}
-            data-cy="button-user-status-change"
-          >
-            Export this app
-          </Button>
-        </div>
+      <div className={cx({ 'dark-theme': darkMode })}>
+        <Button
+          fill="rgb(172, 178, 185)"
+          leadingIcon="fileupload"
+          variant="tertiary"
+          className={cx('app-export-btn')}
+          onClick={() => {
+            setIsExportingApp(true);
+            document.getElementById('maintenance-app-modal').click();
+          }}
+          data-cy="button-user-status-change"
+        >
+          Export app
+        </Button>
       </div>
       {/* {isExportingApp && <ExportAppModal app={app} setIsExportingApp={toggleExportingApp} darkMode={darkMode} />} */}
     </>

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx

@@ -34,7 +34,7 @@ const AppModeToggle = ({ darkMode }) => {
               exposedTheme = darkMode ? 'dark' : 'light';
             }
             onAppModeChange({ appMode: value });
-            globalSettingsChanged({ theme: { name: exposedTheme } });
+            // globalSettingsChanged({ theme: { name: exposedTheme } });
             setResolvedGlobals('theme', { name: exposedTheme });
           }}
           defaultValue={appMode}

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/CanvasSettings.jsx

@@ -13,20 +13,11 @@ import { Confirm } from '@/Editor/Viewer/Confirm';
 import { shallow } from 'zustand/shallow';
 
 const CanvasSettings = ({ darkMode }) => {
-  const {
-    globalSettings,
-    globalSettingsChanged,
-    isMaintenanceOn,
-    toggleAppMaintenance,
-    resolveOthers,
-    getCanvasBackgroundColor,
-  } = useStore(
+  const { globalSettings, globalSettingsChanged, resolveOthers, getCanvasBackgroundColor } = useStore(
     (state) => ({
       globalSettings: state.globalSettings,
       updateGlobalSettings: state.updateGlobalSettings,
-      isMaintenanceOn: state.app.isMaintenanceOn,
       globalSettingsChanged: state.globalSettingsChanged,
-      toggleAppMaintenance: state.toggleAppMaintenance,
       resolveOthers: state.resolveOthers,
       getCanvasBackgroundColor: state.getCanvasBackgroundColor,
     }),
@@ -73,43 +64,10 @@ const CanvasSettings = ({ darkMode }) => {
     boxShadow: showPicker && '0px 0px 0px 1px #C6D4F9',
   };
 
-  const { hideHeader, canvasMaxWidth, canvasMaxWidthType, backgroundFxQuery } = globalSettings ?? {};
+  const { canvasMaxWidth, canvasMaxWidthType, backgroundFxQuery } = globalSettings ?? {};
 
   return (
     <>
-      <Confirm
-        show={showConfirmation}
-        message={
-          isMaintenanceOn
-            ? 'Users will now be able to launch the released version of this app, do you wish to continue?'
-            : 'Users will not be able to launch the app until maintenance mode is turned off, do you wish to continue?'
-        }
-        onConfirm={() => toggleAppMaintenance()}
-        onCancel={() => setConfirmationShow(false)}
-        darkMode={darkMode}
-      />
-      <div className="tw-flex tw-mb-3">
-        <SwitchComponent
-          align="right"
-          label="Hide header for launched apps"
-          size="default"
-          checked={hideHeader}
-          onCheckedChange={(e) => globalSettingsChanged({ hideHeader: e })}
-          data-cy={`toggle-hide-header-for-launched-apps`}
-          className="tw-w-full"
-        />
-      </div>
-      <div className="tw-flex tw-mb-3">
-        <SwitchComponent
-          align="right"
-          label="Maintenance mode"
-          size="default"
-          checked={isMaintenanceOn}
-          onCheckedChange={() => setConfirmationShow(true)}
-          data-cy={`toggle-maintenance-mode`}
-          className="tw-w-full"
-        />
-      </div>
       <div className="d-flex mb-3">
         <span data-cy={`label-max-canvas-width`} className="w-full m-auto">
           {t('leftSidebar.Settings.maxWidthOfCanvas', 'Max width of canvas')}

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/HideHeaderToggle.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import SwitchComponent from '@/components/ui/Switch/Index';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+const HideHeaderToggle = () => {
+  const { globalSettings, globalSettingsChanged } = useStore(
+    (state) => ({
+      globalSettings: state.globalSettings,
+      globalSettingsChanged: state.globalSettingsChanged,
+    }),
+    shallow
+  );
+
+  const { hideHeader } = globalSettings || {};
+
+  return (
+    <div className="tw-flex tw-mb-3">
+      <SwitchComponent
+        align="right"
+        label="Hide header for launched apps"
+        size="default"
+        checked={hideHeader}
+        onCheckedChange={(e) => globalSettingsChanged({ hideHeader: e })}
+        data-cy={`toggle-hide-header-for-launched-apps`}
+        className="tw-w-full"
+      />
+    </div>
+  );
+};
+
+export default HideHeaderToggle;

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/MaintenanceMode.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import useStore from '@/AppBuilder/_stores/store';
+import SwitchComponent from '@/components/ui/Switch/Index';
+import { shallow } from 'zustand/shallow';
+import { Confirm } from '@/Editor/Viewer/Confirm';
+
+const MaintenanceMode = ({ darkMode }) => {
+  const [showConfirmation, setConfirmationShow] = useState(false);
+  const { isMaintenanceOn, toggleAppMaintenance } = useStore(
+    (state) => ({
+      isMaintenanceOn: state.app.isMaintenanceOn,
+      toggleAppMaintenance: state.toggleAppMaintenance,
+    }),
+    shallow
+  );
+
+  return (
+    <>
+      <Confirm
+        show={showConfirmation}
+        message={
+          isMaintenanceOn
+            ? 'Users will now be able to launch the released version of this app, do you wish to continue?'
+            : 'Users will not be able to launch the app until maintenance mode is turned off, do you wish to continue?'
+        }
+        onConfirm={() => toggleAppMaintenance()}
+        onCancel={() => setConfirmationShow(false)}
+        darkMode={darkMode}
+      />
+      <div className="tw-flex tw-mb-3">
+        <SwitchComponent
+          align="right"
+          label="Maintenance mode"
+          size="default"
+          checked={isMaintenanceOn}
+          onCheckedChange={() => setConfirmationShow(true)}
+          data-cy={`toggle-maintenance-mode`}
+          className="tw-w-full"
+        />
+      </div>
+    </>
+  );
+};
+
+export default MaintenanceMode;

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/SlugInput.jsx

@@ -132,7 +132,11 @@ const SlugInput = () => {
             </div>
           )}
         </div>
-        <label className="label label-success label-updated" data-cy="app-link-success-label">
+        <label
+          className="label label-success label-updated"
+          data-cy="app-link-success-label"
+          style={{ padding: '0px' }}
+        >
           {isSlugUpdated ? `Link updated successfully!` : ''}
         </label>
       </div>

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx

@@ -7,6 +7,9 @@ import AppExport from './AppExport';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
 import AppModeToggle from './AppModeToggle';
+import { ThemeSelect } from '@/modules/Appbuilder/components';
+import MaintenanceMode from './MaintenanceMode';
+import HideHeaderToggle from './HideHeaderToggle';
 
 const GlobalSettings = ({ darkMode }) => {
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
@@ -16,16 +19,27 @@ const GlobalSettings = ({ darkMode }) => {
       <div>
         <div bsPrefix="global-settings-popover" className="global-settings-panel">
           <HeaderSection>
-            <HeaderSection.PanelHeader title="Global settings" />
+            <HeaderSection.PanelHeader title="Global settings">
+              <div className="d-flex w-100 justify-content-end">
+                <AppExport darkMode={darkMode} />
+              </div>
+            </HeaderSection.PanelHeader>
           </HeaderSection>
-          <div className="card-body">
+          <div className="card-body" style={{ paddingBottom: '0px' }}>
             <SlugInput />
           </div>
+          <div style={{ padding: '12px 16px' }} className={cx({ disabled: shouldFreeze })}>
+            <MaintenanceMode darkMode={darkMode} />
+            <HideHeaderToggle darkMode={darkMode} />
+          </div>
+          <div className={cx({ 'dark-theme': darkMode })}>
+            <span className="canvas-styles-header">Canvas Styles</span>
+          </div>
           <div style={{ padding: '12px 16px' }} className={cx({ disabled: shouldFreeze })}>
             <div className="tj-text-xsm color-slate12 ">
               <CanvasSettings darkMode={darkMode} />
               <AppModeToggle darkMode={darkMode} />
-              <AppExport darkMode={darkMode} />
+              <ThemeSelect darkMode={darkMode} />
             </div>
           </div>
         </div>

frontend/src/AppBuilder/WidgetManager/widgets/button.js

@@ -61,7 +61,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -74,7 +74,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -83,7 +83,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -92,7 +92,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     loaderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Loader color',
       validation: {
         schema: { type: 'string' },
@@ -110,7 +110,7 @@ export const buttonConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' } },
       accordian: 'button',
@@ -219,10 +219,10 @@ export const buttonConfig = {
     events: [],
     styles: {
       textColor: { value: '#FFFFFF' },
-      borderColor: { value: '#4368E3' },
+      borderColor: { value: 'var(--primary-brand)' },
       loaderColor: { value: '#FFFFFF' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#4368E3' },
+      backgroundColor: { value: 'var(--primary-brand)' },
       iconColor: { value: '#FFFFFF' },
       direction: { value: 'left' },
       padding: { value: 'default' },

frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js

@@ -68,7 +68,7 @@ export const buttonGroupConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -76,7 +76,7 @@ export const buttonGroupConfig = {
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -108,7 +108,7 @@ export const buttonGroupConfig = {
       },
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected text colour',
       validation: {
         schema: { type: 'string' },
@@ -116,11 +116,11 @@ export const buttonGroupConfig = {
       },
     },
     selectedBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#007bff',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     alignment: {
@@ -162,7 +162,7 @@ export const buttonGroupConfig = {
       borderRadius: { value: '{{4}}' },
       disabledState: { value: '{{false}}' },
       selectedTextColor: { value: '#FFFFFF' },
-      selectedBackgroundColor: { value: '#4368E3' },
+      selectedBackgroundColor: { value: 'var(--primary-brand)' },
       alignment: { value: 'left' },
     },
   },

frontend/src/AppBuilder/WidgetManager/widgets/chart.js

@@ -39,13 +39,13 @@ export const chartConfig = {
       },
     },
     markerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Marker color',
       validation: {
         schema: {
           type: 'string',
         },
-        defaultValue: '#CDE1F8',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     showAxes: {
@@ -134,7 +134,7 @@ export const chartConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
     },
@@ -192,7 +192,7 @@ export const chartConfig = {
     },
     properties: {
       title: { value: 'This title can be changed' },
-      markerColor: { value: '#CDE1F8' },
+      markerColor: { value: 'var(--primary-brand)' },
       showAxes: { value: '{{true}}' },
       showGridLines: { value: '{{true}}' },
       plotFromJson: { value: '{{false}}' },

frontend/src/AppBuilder/WidgetManager/widgets/checkbox.js

@@ -70,7 +70,7 @@ export const checkboxConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -78,7 +78,7 @@ export const checkboxConfig = {
       accordian: 'label',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -86,7 +86,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     checkboxColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked color',
       validation: {
         schema: { type: 'string' },
@@ -94,7 +94,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     uncheckedColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked color',
       validation: {
         schema: { type: 'string' },
@@ -102,7 +102,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -183,7 +183,7 @@ export const checkboxConfig = {
     styles: {
       disabledState: { value: '{{false}}' },
       textColor: { value: '#1B1F24' },
-      checkboxColor: { value: '#4368E3' },
+      checkboxColor: { value: 'var(--primary-brand)' },
       uncheckedColor: { value: '#E4E7EB' },
       borderColor: { value: '#CCD1D5' },
       handleColor: { value: '#FFFFFF' },

frontend/src/AppBuilder/WidgetManager/widgets/circularProgressbar.js

@@ -32,15 +32,15 @@ export const circularProgressbarConfig = {
   events: {},
   styles: {
     color: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -104,7 +104,7 @@ export const circularProgressbarConfig = {
     },
     events: [],
     styles: {
-      color: { value: '' },
+      color: { value: 'var(--primary-brand)' },
       textColor: { value: '' },
       textSize: { value: '{{16}}' },
       strokeWidth: { value: '{{8}}' },

frontend/src/AppBuilder/WidgetManager/widgets/colorPicker.js

@@ -4,7 +4,7 @@ export const colorPickerConfig = {
   description: 'Choose colors from a palette',
   component: 'ColorPicker',
   properties: {
-    defaultColor: { type: 'color', displayName: 'Default color' },
+    defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
   },
   defaultSize: {
     width: 9,
@@ -14,7 +14,9 @@ export const colorPickerConfig = {
     {
       displayName: 'Set Color',
       handle: 'setColor',
-      params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }],
+      params: [
+        { handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
+      ],
     },
   ],
   others: {

frontend/src/AppBuilder/WidgetManager/widgets/container.js

@@ -71,7 +71,7 @@ export const containerConfig = {
   events: {},
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -80,7 +80,7 @@ export const containerConfig = {
       accordian: 'container',
     },
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -89,7 +89,7 @@ export const containerConfig = {
       accordian: 'header',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/datepickerV2.js

@@ -169,8 +169,8 @@ export const datePickerV2Config = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -220,31 +220,31 @@ export const datePickerV2Config = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -257,7 +257,7 @@ export const datePickerV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

frontend/src/AppBuilder/WidgetManager/widgets/daterangepicker.js

@@ -199,8 +199,8 @@ export const daterangepickerConfig = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -250,31 +250,31 @@ export const daterangepickerConfig = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -287,7 +287,7 @@ export const daterangepickerConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

frontend/src/AppBuilder/WidgetManager/widgets/datetimepickerV2.js

@@ -214,8 +214,8 @@ export const datetimePickerV2Config = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -265,31 +265,31 @@ export const datetimePickerV2Config = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -302,7 +302,7 @@ export const datetimePickerV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

frontend/src/AppBuilder/WidgetManager/widgets/divider.js

@@ -15,7 +15,7 @@ export const dividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js

@@ -128,7 +128,7 @@ export const dropdownConfig = {
       defaultValue: true,
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected text color',
       validation: {
         schema: {

frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js

@@ -101,7 +101,7 @@ export const dropdownV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -153,31 +153,31 @@ export const dropdownV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -190,7 +190,7 @@ export const dropdownV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

frontend/src/AppBuilder/WidgetManager/widgets/form.js

@@ -333,7 +333,7 @@ export const formConfig = {
       },
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -351,7 +351,7 @@ export const formConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/icon.js

@@ -61,7 +61,7 @@ export const iconConfig = {
   },
   styles: {
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/image.js

@@ -153,7 +153,7 @@ export const imageConfig = {
       accordian: 'Image',
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -162,7 +162,7 @@ export const imageConfig = {
       accordian: 'Container',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/kanban.js

@@ -77,7 +77,7 @@ export const kanbanConfig = {
   styles: {
     disabledState: { type: 'toggle', displayName: 'Disable' },
     visibility: { type: 'toggle', displayName: 'Visibility' },
-    accentColor: { type: 'color', displayName: 'Accent color' },
+    accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
   },
   actions: [
     {
@@ -157,7 +157,7 @@ export const kanbanConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
-      accentColor: { value: '#4d72fa' },
+      accentColor: { value: 'var(--primary-brand)' },
     },
   },
 };

frontend/src/AppBuilder/WidgetManager/widgets/kanbanBoard.js

@@ -30,7 +30,7 @@ export const kanbanBoardConfig = {
     visibility: { type: 'toggle', displayName: 'Visibility' },
     width: { type: 'number', displayName: 'Width' },
     minWidth: { type: 'number', displayName: 'Min Width' },
-    accentColor: { type: 'color', displayName: 'Accent color' },
+    accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
   },
   exposedVariables: {
     columns: {},

frontend/src/AppBuilder/WidgetManager/widgets/link.js

@@ -74,7 +74,7 @@ export const linkConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/listview.js

@@ -125,7 +125,7 @@ export const listviewConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -133,7 +133,7 @@ export const listviewConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/modal.js

@@ -81,7 +81,7 @@ export const modalConfig = {
   },
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
@@ -89,7 +89,7 @@ export const modalConfig = {
       },
     },
     headerTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header title color',
       validation: {
         schema: { type: 'string' },
@@ -97,7 +97,7 @@ export const modalConfig = {
       },
     },
     bodyBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
@@ -121,7 +121,7 @@ export const modalConfig = {
       },
     },
     triggerButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button background color',
       validation: {
         schema: { type: 'string' },
@@ -129,7 +129,7 @@ export const modalConfig = {
       },
     },
     triggerButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button text color',
       validation: {
         schema: { type: 'string' },
@@ -175,7 +175,7 @@ export const modalConfig = {
       bodyBackgroundColor: { value: '#ffffffff' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },

frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js

@@ -165,7 +165,7 @@ export const multiselectV2Config = {
 
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -218,32 +218,32 @@ export const multiselectV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
 
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error Text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -256,7 +256,7 @@ export const multiselectV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: {
         schema: { type: 'string' },
@@ -365,7 +365,7 @@ export const multiselectV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
     },
   },
 };

frontend/src/AppBuilder/WidgetManager/widgets/numberinput.js

@@ -72,7 +72,7 @@ export const numberinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -124,31 +124,31 @@ export const numberinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -161,7 +161,7 @@ export const numberinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -279,7 +279,7 @@ export const numberinputConfig = {
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       textColor: { value: '#1B1F24' },
       color: { value: '#1B1F24' },

frontend/src/AppBuilder/WidgetManager/widgets/passwordinput.js

@@ -84,7 +84,7 @@ export const passinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -136,31 +136,31 @@ export const passinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -173,7 +173,7 @@ export const passinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -278,7 +278,7 @@ export const passinputConfig = {
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       textColor: { value: '#1B1F24' },
       iconColor: { value: '#CFD3D859' },

frontend/src/AppBuilder/WidgetManager/widgets/radioButtonV2.js

@@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
       isFxNotRequired: true,
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
@@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     switchOnBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked background',
       validation: {
         schema: { type: 'string' },
@@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     switchOffBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked background',
       validation: {
         schema: { type: 'string' },
@@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     optionsTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/radiobutton.js

@@ -53,7 +53,7 @@ export const radiobuttonConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -61,11 +61,11 @@ export const radiobuttonConfig = {
       },
     },
     activeColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Active color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     visibility: {
@@ -113,7 +113,7 @@ export const radiobuttonConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      activeColor: { value: '' },
+      activeColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },

frontend/src/AppBuilder/WidgetManager/widgets/rangeslider.js

@@ -53,7 +53,7 @@ export const rangeSliderConfig = {
   },
   styles: {
     lineColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Line color',
       validation: {
         schema: { type: 'string' },
@@ -61,7 +61,7 @@ export const rangeSliderConfig = {
       },
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -69,7 +69,7 @@ export const rangeSliderConfig = {
       },
     },
     trackColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Track color',
       validation: {
         schema: { type: 'string' },
@@ -109,7 +109,7 @@ export const rangeSliderConfig = {
     styles: {
       lineColor: { value: '' },
       handleColor: { value: '' },
-      trackColor: { value: '' },
+      trackColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
     },
   },

frontend/src/AppBuilder/WidgetManager/widgets/spinner.js

@@ -23,11 +23,11 @@ export const spinnerConfig = {
       },
     },
     colour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Colour',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#0565ff',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     size: {
@@ -54,7 +54,7 @@ export const spinnerConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       size: { value: 'sm' },
-      colour: { value: '#0565ff' },
+      colour: { value: 'var(--primary-brand)' },
     },
   },
 };

frontend/src/AppBuilder/WidgetManager/widgets/starrating.js

@@ -58,7 +58,7 @@ export const starratingConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Star color',
       validation: {
         schema: { type: 'string' },
@@ -66,7 +66,7 @@ export const starratingConfig = {
       },
     },
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Label color',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/statistics.js

@@ -55,22 +55,22 @@ export const statisticsConfig = {
   events: {},
   styles: {
     primaryLabelColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Primary label colour',
       validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
     },
     primaryTextColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Primary text  colour',
       validation: { schema: { type: 'string' }, defaultValue: '#000000' },
     },
     secondaryLabelColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Secondary label colour',
       validation: { schema: { type: 'string' }, defaultValue: '#8092AB' },
     },
     secondaryTextColour: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Secondary text colour',
       validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' },
     },

frontend/src/AppBuilder/WidgetManager/widgets/steps.js

@@ -45,15 +45,15 @@ export const stepsConfig = {
   },
   styles: {
     color: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -101,7 +101,7 @@ export const stepsConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       theme: { value: 'titles' },
-      color: { value: '' },
+      color: { value: 'var(--primary-brand)' },
       textColor: { value: '' },
     },
   },

frontend/src/AppBuilder/WidgetManager/widgets/table.js

@@ -157,7 +157,7 @@ export const tableConfig = {
       defaultValue: 'clientSide',
     },
     actionButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -165,7 +165,7 @@ export const tableConfig = {
       },
     },
     actionButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -293,7 +293,7 @@ export const tableConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -404,7 +404,7 @@ export const tableConfig = {
       accordian: 'Container',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/tabs.js

@@ -110,11 +110,11 @@ export const tabsConfig = {
   events: { onTabSwitch: { displayName: 'On tab switch' } },
   styles: {
     highlightColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Highlight color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     visibility: {
@@ -175,7 +175,7 @@ export const tabsConfig = {
     },
     events: [],
     styles: {
-      highlightColor: { value: '#375FCF' },
+      highlightColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       tabWidth: { value: 'auto' },

frontend/src/AppBuilder/WidgetManager/widgets/text.js

@@ -105,7 +105,7 @@ export const textConfig = {
       accordian: 'Text',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: {
         schema: { type: 'string' },
@@ -185,7 +185,7 @@ export const textConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -195,7 +195,7 @@ export const textConfig = {
       colorPickerPosition: 'top',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/WidgetManager/widgets/textinput.js

@@ -80,7 +80,7 @@ export const textinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -132,31 +132,31 @@ export const textinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -169,7 +169,7 @@ export const textinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -283,7 +283,7 @@ export const textinputConfig = {
     styles: {
       textColor: { value: '#1B1F24' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },

frontend/src/AppBuilder/WidgetManager/widgets/timeline.js

@@ -48,7 +48,7 @@ export const timelineConfig = {
     properties: {
       data: {
         value:
-          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: '#4d72fa'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: '#4d72fa'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: '#4d72fa'} \n] }}",
+          "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: 'var(--primary-brand)'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: 'var(--primary-brand)'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: 'var(--primary-brand)'} \n] }}",
       },
       hideDate: { value: '{{false}}' },
     },

frontend/src/AppBuilder/WidgetManager/widgets/timepicker.js

@@ -164,7 +164,7 @@ export const timePickerConfig = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -215,31 +215,31 @@ export const timePickerConfig = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -252,7 +252,7 @@ export const timePickerConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

frontend/src/AppBuilder/WidgetManager/widgets/toggleswitch.js

@@ -32,14 +32,14 @@ export const toggleswitchConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
       },
     },
     toggleSwitchColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Toggle switch color',
       validation: {
         schema: { type: 'string' },
@@ -75,7 +75,7 @@ export const toggleswitchConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      toggleSwitchColor: { value: '' },
+      toggleSwitchColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },

frontend/src/AppBuilder/WidgetManager/widgets/toggleswitchv2.js

@@ -71,7 +71,7 @@ export const toggleSwitchV2Config = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -79,7 +79,7 @@ export const toggleSwitchV2Config = {
       accordian: 'label',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -87,7 +87,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     toggleSwitchColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked color',
       validation: {
         schema: { type: 'string' },
@@ -95,7 +95,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     uncheckedColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked color',
       validation: {
         schema: { type: 'string' },
@@ -103,7 +103,7 @@ export const toggleSwitchV2Config = {
       accordian: 'switch',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -181,7 +181,7 @@ export const toggleSwitchV2Config = {
     events: [],
     styles: {
       textColor: { value: '#1B1F24' },
-      toggleSwitchColor: { value: '#4368E3' }, //keeping same key for backward comopatibility
+      toggleSwitchColor: { value: 'var(--primary-brand)' }, //keeping same key for backward comopatibility
       uncheckedColor: { value: '#E4E7EB' },
       borderColor: { value: '#E4E7EB' },
       handleColor: { value: '#FFFFFF' },

frontend/src/AppBuilder/WidgetManager/widgets/treeSelect.js

@@ -23,8 +23,8 @@ export const treeSelectConfig = {
     onUnCheck: { displayName: 'On uncheck' },
   },
   styles: {
-    textColor: { type: 'color', displayName: 'Text Color' },
-    checkboxColor: { type: 'color', displayName: 'Checkbox color' },
+    textColor: { type: 'colorSwatches', displayName: 'Text Color' },
+    checkboxColor: { type: 'colorSwatches', displayName: 'Checkbox color' },
     visibility: { type: 'toggle', displayName: 'Visibility' },
     disabledState: { type: 'toggle', displayName: 'Disable' },
   },
@@ -71,7 +71,7 @@ export const treeSelectConfig = {
     events: [],
     styles: {
       textColor: { value: '' },
-      checkboxColor: { value: '' },
+      checkboxColor: { value: 'var(--primary-brand)' },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
     },

frontend/src/AppBuilder/WidgetManager/widgets/verticalDivider.js

@@ -15,7 +15,7 @@ export const verticalDividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },

frontend/src/AppBuilder/Widgets/Modal.jsx

@@ -180,6 +180,7 @@ export const Modal = function Modal({
       display: visibility ? '' : 'none',
       '--tblr-btn-color-darker': tinycolor(triggerButtonBackgroundColor).darken(8).toString(),
       boxShadow,
+      borderColor: 'var(--primary-brand)',
     },
   };
 

frontend/src/AppBuilder/_hooks/useAppData.js

@@ -24,9 +24,10 @@ import { fetchAndSetWindowTitle, pageTitles, retrieveWhiteLabelText } from '@whi
 import { initEditorWalkThrough } from '@/AppBuilder/_helpers/createWalkThrough';
 import queryString from 'query-string';
 import { distinctUntilChanged } from 'rxjs';
-import { convertAllKeysToSnakeCase } from '../_stores/utils';
+import { baseTheme, convertAllKeysToSnakeCase } from '../_stores/utils';
 import { getPreviewQueryParams } from '@/_helpers/routes';
 import { useLocation, useMatch, useParams } from 'react-router-dom';
+import useThemeAccess from './useThemeAccess';
 
 /**
  * this is to normalize the query transformation options to match the expected schema. Takes care of corrupted data.
@@ -101,12 +102,14 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v
   const selectedEnvironment = useStore((state) => state.selectedEnvironment);
   const setIsEditorFreezed = useStore((state) => state.setIsEditorFreezed);
   const appMode = useStore((state) => state.globalSettings.appMode);
+  const selectedTheme = useStore((state) => state.globalSettings.theme);
   const previousEnvironmentId = usePrevious(selectedEnvironment?.id);
   const isComponentLayoutReady = useStore((state) => state.isComponentLayoutReady, shallow);
   const pageSwitchInProgress = useStore((state) => state.pageSwitchInProgress);
   const setPageSwitchInProgress = useStore((state) => state.setPageSwitchInProgress);
   const selectedVersion = useStore((state) => state.selectedVersion);
   const setIsPublicAccess = useStore((state) => state.setIsPublicAccess);
+  const themeAccess = useThemeAccess();
 
   const setConversation = useStore((state) => state.ai?.setConversation);
   const setDocsConversation = useStore((state) => state.ai?.setDocsConversation);
@@ -297,10 +300,14 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v
         creationMode: appData.creation_mode,
       });
       setIsEditorFreezed(appData.should_freeze_editor);
-      setGlobalSettings(
-        mapKeys(appData.editing_version?.global_settings || appData.global_settings, (value, key) => camelCase(key))
+      const global_settings = mapKeys(
+        appData.editing_version?.global_settings || appData.global_settings,
+        (value, key) => camelCase(key)
       );
-
+      if (!global_settings?.theme) {
+        global_settings.theme = baseTheme;
+      }
+      setGlobalSettings(global_settings);
       setPages(pages, moduleId);
       setPageSettings(
         computePageSettings(deepCamelCase(appData?.editing_version?.page_settings ?? appData?.page_settings))
@@ -443,6 +450,16 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v
     fetchAndSetWindowTitle({ page: pageTitles.EDITOR, appName: app.appName });
   }, [app.appName]);
 
+  useEffect(() => {
+    if (!themeAccess) return;
+    const root = document.documentElement;
+    const brandColors = selectedTheme?.definition?.brand?.colors || {};
+    Object.keys(brandColors).forEach((colorType) => {
+      const color = brandColors[colorType][darkMode ? 'dark' : 'light'];
+      root.style.setProperty(`--${colorType}-brand`, `${color}`);
+    });
+  }, [darkMode, selectedTheme, themeAccess]);
+
   useEffect(() => {
     const exposedTheme =
       appMode && appMode !== 'auto' ? appMode : localStorage.getItem('darkMode') === 'true' ? 'dark' : 'light';

frontend/src/AppBuilder/_hooks/useThemeAccess.js

@@ -0,0 +1,10 @@
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+
+const useThemeAccess = () => {
+  const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
+  const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
+  return licenseValid && featureAccess?.customThemes;
+};
+
+export default useThemeAccess;

frontend/src/AppBuilder/_stores/slices/appSlice.js

@@ -6,14 +6,16 @@ import DependencyGraph from './DependencyClass';
 import { getWorkspaceId } from '@/_helpers/utils';
 import { navigate } from '@/AppBuilder/_utils/misc';
 import queryString from 'query-string';
-import { replaceEntityReferencesWithIds } from '../utils';
+import { replaceEntityReferencesWithIds, baseTheme } from '../utils';
 import _ from 'lodash';
 
 const initialState = {
   app: {},
   canvasHeight: null,
   isSaving: false,
-  globalSettings: {},
+  globalSettings: {
+    theme: baseTheme,
+  },
   pageSwitchInProgress: false,
   isTJDarkMode: localStorage.getItem('darkMode') === 'true',
   isViewer: false,

frontend/src/AppBuilder/_stores/utils.js

@@ -710,3 +710,15 @@ export const parsePropertyPath = (property) => {
 
   return result;
 };
+
+export const baseTheme = {
+  definition: {
+    brand: {
+      colors: {
+        primary: { light: '#4368E3', dark: '#4A6DD9' },
+        secondary: { light: '#6A727C', dark: '#CFD3D8' },
+        tertiary: { light: '#1E823B', dark: '#318344' },
+      },
+    },
+  },
+};

frontend/src/Editor/Components/DropDown.jsx

@@ -236,7 +236,7 @@ export const DropDown = function DropDown({
             minWidth: 'max-content',
           }
         : {
-            backgroundColor: state.value === currentValue ? '#7A95FB' : 'white',
+            backgroundColor: state.value === currentValue ? 'var(--primary-brand)' : 'white',
             color: state.isDisabled ? '#88909694' : state.value === currentValue ? 'white' : 'black',
             ':hover': {
               backgroundColor: state.isDisabled ? 'transparent' : state.value === currentValue ? '#3650AF' : '#d8dce9',

frontend/src/Editor/Components/FilePicker.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line import/no-unresolved
 import { useDropzone } from 'react-dropzone';
 import { toast } from 'react-hot-toast';
 // eslint-disable-next-line import/no-unresolved
@@ -311,7 +312,11 @@ export const FilePicker = ({
     <section>
       <div className="container" {...getRootProps({ style, className: 'dropzone' })} data-cy={dataCy}>
         <input {...getInputProps()} />
-        <FilePicker.Signifiers signifier={accepted} feedback={null} cls="spinner-border text-azure p-0" />
+        <FilePicker.Signifiers
+          signifier={accepted}
+          feedback={null}
+          cls="spinner-border text-azure p-0 spinner-border-filepicker"
+        />
 
         {showSelectedFiles && !accepted ? (
           <FilePicker.AcceptedFiles width={width - 10} height={height}>

frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx

@@ -8,7 +8,7 @@ import { highlightText } from '../DropdownV2/utils';
 const CustomOption = (props) => {
   return (
     <Option {...props}>
-      <div className="d-flex">
+      <div className="d-flex multiselct-widget-option">
         <FormCheck checked={props.isSelected} disabled={props?.isDisabled} />
         <span style={{ marginLeft: '5px' }}>
           {highlightText(props.label?.toString(), props.selectProps.inputValue)}

frontend/src/Editor/Components/Timer.jsx

@@ -164,19 +164,25 @@ export const Timer = function Timer({ height, properties = {}, styles, setExpose
         <div className="btn-list justify-content-end">
           {state === 'initial' && (
             <a
-              className={`btn btn-primary${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
+              className={`btn btn-primary timer-btn${styles.disabledState || isStartDisabled() ? ' disabled' : ''}`}
               onClick={() => onStart()}
             >
               Start
             </a>
           )}
           {state === 'running' && (
-            <a className={`btn btn-outline-primary${styles.disabledState ? ' disabled' : ''}`} onClick={onPause}>
+            <a
+              className={`btn btn-outline-primary timer-btn-hover ${styles.disabledState ? ' disabled' : ''}`}
+              onClick={onPause}
+            >
               Pause
             </a>
           )}
           {state === 'paused' && (
-            <a className={`btn btn-outline-primary${styles.disabledState ? ' disabled' : ''}`} onClick={onResume}>
+            <a
+              className={`btn btn-outline-primary timer-btn-hover ${styles.disabledState ? ' disabled' : ''}`}
+              onClick={onResume}
+            >
               Resume
             </a>
           )}

frontend/src/LicenseTooltip/index.jsx

@@ -25,6 +25,7 @@ const LicenseTooltip = ({
     'Multi-environments': 'multiEnvironment',
     'Import from git': 'gitSync',
     GitSync: 'gitSync',
+    'Custom themes': 'customThemes',
   };
 
   const generateMessage = () => {

frontend/src/_styles/designtheme.scss

@@ -164,7 +164,7 @@
 
 
     // new design theme
-    --primary-brand: #4A6DD9;
+    
     --primary-accent-strong: #4A6DD9;
     --primary-accent-subtle: rgba(74, 109, 217, 30%);
     --primary-white: #FAFCFF;

frontend/src/_styles/tabler.scss

@@ -6126,11 +6126,22 @@ fieldset:disabled .btn {
     vertical-align: text-bottom;
     border: 2px solid currentColor;
     border-right-color: transparent;
-    border-radius: 50%;
+    border-radius: 50%; 
     -webkit-animation: .75s linear infinite spinner-border;
     animation: .75s linear infinite spinner-border
 }
 
+.spinner-border-filepicker {
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    vertical-align: text-bottom;
+    border: 2px solid var(--primary-brand);
+    border-right-color: transparent;
+    border-radius: 50%; 
+    -webkit-animation: .75s linear infinite spinner-border;
+    animation: .75s linear infinite spinner-border
+}
 .spinner-light {
     color: var(--indigo9) !important;
 }

frontend/src/_styles/theme.scss

@@ -346,9 +346,9 @@ button {
 }
 
 .accordion-item-trigger {
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M8.83684 3L4.4484 3C3.86955 3 3.5089 3.62791 3.80056 4.1279L5.99478 7.88943C6.28419 8.38556 7.00104 8.38556 7.29045 7.88943L9.48467 4.1279C9.77634 3.62791 9.41568 3 8.83684 3Z" fill="%2311181C"/></svg>') !important;
-  height: 16px !important;
-  width: 16px !important;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M8.83684 3L4.4484 3C3.86955 3 3.5089 3.62791 3.80056 4.1279L5.99478 7.88943C6.28419 8.38556 7.00104 8.38556 7.29045 7.88943L9.48467 4.1279C9.77634 3.62791 9.41568 3 8.83684 3Z" fill="%23ACB2B9"/></svg>') !important;
+  height: 12px !important;
+  width: 12px !important;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -1654,7 +1654,7 @@ button {
 .pagination {
   .page-item.active {
     a.page-link {
-      background-color: $primary-light;
+      background-color: var(--primary-brand);
     }
   }
 }
@@ -2475,32 +2475,32 @@ body {
 .CalendarDay__selected,
 .CalendarDay__selected:active,
 .CalendarDay__selected:hover {
-  background: $primary;
-  border: 1px double $primary;
+  background: var(--primary-brand);
+  border: 1px double var(--primary-brand);
 }
 
 .CalendarDay__selected_span {
-  background: $primary;
-  border: $primary;
+  background: var(--primary-brand);
+  border: var(--primary-brand);
 }
 
 .CalendarDay__selected_span:active,
 .CalendarDay__selected_span:hover {
-  background: $primary;
-  border: 1px double $primary;
+  background: var(--primary-brand);
+  border: 1px double var(--primary-brand);
   color: #ffffff;
 }
 
 .CalendarDay__hovered_span:active,
 .CalendarDay__hovered_span:hover {
-  background: $primary;
-  border: 1px double $primary;
+  background: var(--primary-brand);
+  border: 1px double var(--primary-brand);
   color: #ffffff;
 }
 
 .CalendarDay__hovered_span {
-  background: #83b8e7;
-  border: 1px double #83b8e7;
+  background: var(--primary-brand);
+  border: 1px double var(--primary-brand);
   color: #ffffff;
 }
 
@@ -3866,7 +3866,7 @@ input[type="text"] {
   }
 
   .react-datepicker__day--selected {
-    background-color: $primary-light;
+    background-color: var(--primary-brand);
   }
 }
 
@@ -4119,6 +4119,8 @@ input[type="text"] {
     .rbc-event-label {
       display: none;
     }
+    background-color: var(--primary-brand) !important;
+    border: transparent
   }
 
   .rbc-off-range-bg {
@@ -4410,6 +4412,15 @@ input[type="text"] {
   }
 }
 
+.color-icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  background-color: #0091FF;
+  border: 1px solid var(--Border-default, #CCD1D5);
+  box-shadow: 0px 1px 0px 0px #e5e5e5;
+}
+
 .portal-header {
   display: flex;
   align-items: center;
@@ -18616,6 +18627,186 @@ section.ai-message-prompt-input-wrapper {
 }
 
 
+.codebuilder-color-swatches-wrapper {
+  min-width: 231.333px;
+  width: 100%;
+  height: 48px;
+  padding: 8px;
+
+
+  .codebuilder-color-swatches {
+    display: flex;
+    padding: 2px;
+    flex-wrap: wrap;
+
+    .ToggleGroup {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+}
+
+.codebuilder-color-swatches-options {
+  width:100%;
+  height:30px;
+  padding: 6px 8px;
+  border-radius: 6px;
+
+  &:hover {
+    background-color: #f0f1f2 !important;
+  }
+
+  .color-icon {
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    border: 1.5px solid #CCD1D5;
+    background-color: #0091FF;
+  }
+}
+
+
+.theme-dropdown-wrapper {
+  gap: 75px;
+  height: 32px;
+  margin-bottom: 20px !important;
+  justify-content: space-between;
+}
+
+.theme-custom-menu-list-header {
+  margin: 16px 14px 0px 16px !important;
+  font-size: 12px;
+}
+
+.theme-create-btn {
+  width: 100%;
+  margin-bottom: 8px;
+  height:32px;
+  color:#000;
+  border: 1px solid var(--Border-brand-weak, #97AEFC);
+}
+
+
+.theme-default-pill {
+  font-size: 11px;
+  background-color: #CCD1D54D;
+  color: #6A727C;
+  width: 49px;
+  height: 18px;
+  border-radius: 20px
+}
+
+.no-scroll {
+  overflow: hidden;
+}
+
+
+.textarea-widget:focus {
+  border-color: var(--primary-brand);
+}
+
+.multiselct-widget-option{
+  input:checked {
+    background-color: var(--primary-brand);
+  }
+}
+
+.multiselect-box {
+  .options{
+    input:checked {
+      background-color: var(--primary-brand);
+    }
+  }
+}
+
+.timer-btn {
+  background-color: var(--primary-brand);
+  &:hover {
+    background-color: var(--primary-brand);
+  }
+}
+
+.timer-btn-hover:hover {
+  background-color: var(--primary-brand);
+}
+
+.canvas-styles-header {
+  display: flex;
+  width: 100%;
+  padding: 6px 16px;
+  font-family: IBM Plex Sans;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  background: var(--Background-surface-layer-02, #F6F8FA);
+  color: #6A727C;
+
+
+}
+
+.app-export-btn {
+  background-color: #FFFFFF;
+  border: 1px solid var(--Border-default, #CCD1D5);
+  box-shadow: 0px 1px 0px 0px var(--Dropshadow000);
+}
+
+.dark-theme {
+  .app-export-btn {
+    background-color: #313b46;
+    color: #ffffff;
+    border: 1px solid transparent;
+  }
+  .canvas-styles-header {
+    background-color: #212325;
+    color: #ffffff;
+  }
+}
+
+.dark-theme {
+  .codebuilder-color-swatches-options:hover {
+    background-color: #313b46 !important;
+  }
+}
+
+.codebuilder-color-picker {
+  .sketch-picker {
+    border: none !important;
+  }
+}
+
+.accordion-button.inspector {
+  width: 300;
+  height: 32px;
+  justify-content: space-between;
+  padding-top: 6px;
+  padding-right: 16px;
+  padding-bottom: 6px;
+  padding-left: 16px;
+  border-bottom-width: 1px;
+  font-family: IBM Plex Sans;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  background: var(--Background-surface-layer-02, #F6F8FA);
+  color: var(--Text-placeholder, #6A727C) !important;
+
+}
+
+.dark-theme {
+  .accordion-button.inspector {
+    background: var(--slate3);
+    color: var(--slate12);
+  }
+}
+
+#inspector-tabpane-properties .accordion-header {
+  height:32px;
+}
 .cm-tooltip {
   z-index: 9999 !important;
 }

frontend/src/components/ui/Checkbox/CheckboxUtils/CheckIcon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const CheckIcon = ({ size }) => {
+const CheckIcon = ({ size, fill = 'white' }) => {
   const className = size === 'large' ? 'tw-h-[20px] tw-w-[20px]' : 'tw-h-[16px] tw-w-[16px]';
   return (
     <svg
@@ -15,7 +15,7 @@ const CheckIcon = ({ size }) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M8.93064 0.811811C9.20532 1.03656 9.24581 1.44146 9.02106 1.71616L4.64307 7.12414C3.98209 8.00969 3.34866 7.75601 2.80188 7.27755L1.05248 5.74684C0.785368 5.5131 0.758301 5.10709 0.992027 4.83998C1.22575 4.57286 1.63177 4.54579 1.89888 4.77952L3.64828 6.31027L8.02628 0.902247C8.25102 0.627539 8.6559 0.58705 8.93064 0.811811Z"
-        fill="white"
+        fill={fill}
       />
     </svg>
   );

frontend/src/modules/Appbuilder/components/ColorSwatches/ColorSwatches.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { withEditionSpecificComponent } from '@/modules/common/helpers';
+import BaseColorSwatches from '@/modules/common/components/BaseColorSwatches';
+
+const ColorSwatches = (props) => {
+  return <BaseColorSwatches {...props} />;
+};
+
+export default withEditionSpecificComponent(ColorSwatches, 'Appbuilder');

frontend/src/modules/Appbuilder/components/ColorSwatches/index.js

@@ -0,0 +1 @@
+export { default } from './ColorSwatches';

frontend/src/modules/Appbuilder/components/ThemeSelect/ThemeSelect.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { withEditionSpecificComponent } from '@/modules/common/helpers';
+const ThemeSelect = () => {
+  return <></>;
+};
+export default withEditionSpecificComponent(ThemeSelect, 'Appbuilder');

frontend/src/modules/Appbuilder/components/ThemeSelect/index.js

@@ -0,0 +1 @@
+export { default } from './ThemeSelect';

frontend/src/modules/Appbuilder/components/index.js

@@ -2,5 +2,7 @@ import CreateVersionModal from './CreateVersionModal';
 import PromoteReleaseButton from './PromoteReleaseButton';
 import LogoNavDropdown from './LogoNavDropdown';
 import AppEnvironments from './AppEnvironments';
+import ThemeSelect from './ThemeSelect';
+import ColorSwatches from './ColorSwatches';
 
-export { CreateVersionModal, PromoteReleaseButton, LogoNavDropdown, AppEnvironments };
+export { CreateVersionModal, PromoteReleaseButton, LogoNavDropdown, AppEnvironments, ThemeSelect, ColorSwatches };

frontend/src/modules/common/components/BaseColorSwatches/BaseColorSwatches.jsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { SketchPicker } from 'react-color';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+import classNames from 'classnames';
+import { computeColor } from '@/_helpers/utils';
+
+const BaseColorSwatches = ({
+  value,
+  onChange,
+  pickerStyle = {},
+  colorMap = {},
+  cyLabel,
+  asBoxShadowPopover = true,
+  meta,
+  outerWidth = '142px',
+  component,
+  styleDefinition,
+  componentType = 'color',
+  CustomOptionList = () => {},
+  SwatchesToggle = () => {},
+}) => {
+  value = component == 'Button' ? computeColor(styleDefinition, value, meta) : value;
+  const [showPicker, setShowPicker] = useState(false);
+  const darkMode = localStorage.getItem('darkMode') === 'true';
+  const colorPickerPosition = meta?.colorPickerPosition ?? '';
+  const coverStyles = {
+    position: 'fixed',
+    top: '0px',
+    right: '0px',
+    bottom: '0px',
+    left: '0px',
+  };
+  const outerStyles = {
+    width: outerWidth,
+    height: '32px',
+    borderRadius: ' 6px',
+    border: 'none',
+    display: 'flex',
+    paddingLeft: '4px',
+    alignItems: 'center',
+    gap: '4px',
+    background: showPicker && 'var(--indigo2)',
+    outline: showPicker && '1px solid var(--indigo9)',
+    boxShadow: showPicker && '0px 0px 0px 1px #C6D4F9',
+  };
+
+  const decimalToHex = (alpha) => {
+    let aHex = Math.round(255 * alpha).toString(16);
+    return alpha === 0 ? '00' : aHex.length < 2 ? `0${aHex}` : aHex;
+  };
+  const handleColorChange = (color) => {
+    const hexCode = `${color.hex}${decimalToHex(color?.rgb?.a ?? 1.0)}`;
+    onChange(hexCode);
+  };
+  const eventPopover = () => {
+    return (
+      <Popover
+        className={classNames(
+          { 'dark-theme': darkMode },
+          // This is fix when color picker don't have much space to open in bottom side
+          { 'inspector-color-input-popover': colorPickerPosition === 'top' }
+        )}
+        style={{ zIndex: 10000 }}
+      >
+        <Popover.Body className={!asBoxShadowPopover && 'boxshadow-picker'} style={{ padding: '0px' }}>
+          <>{ColorPicker()}</>
+        </Popover.Body>
+      </Popover>
+    );
+  };
+
+  const ColorPicker = () => {
+    return (
+      <div className="codebuilder-color-picker">
+        {SwatchesToggle()}
+        {showPicker && componentType === 'swatches' && CustomOptionList()}
+        {showPicker && componentType === 'color' && (
+          <div>
+            {/* <div style={coverStyles} onClick={() => setShowPicker(false)} /> */}
+            <div style={pickerStyle}>
+              <SketchPicker
+                onFocus={() => setShowPicker(true)}
+                color={value}
+                onChangeComplete={handleColorChange}
+                style={{ bottom: 0 }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+  const ColorPickerInputBox = () => {
+    return (
+      <div
+        className="row mx-0 color-picker-input d-flex"
+        onClick={() => setShowPicker(true)}
+        data-cy={`${String(cyLabel)}-picker`}
+        style={outerStyles}
+      >
+        <div className="color-icon" style={{ backgroundColor: value, marginLeft: '8px' }} />
+
+        <div className="col tj-text-xsm p-0 color-slate12" data-cy={`${String(cyLabel)}-value`}>
+          {colorMap?.[value]
+            ? 'Brand/' + colorMap?.[value]?.charAt(0).toUpperCase() + colorMap?.[value]?.slice(1)
+            : value}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="row fx-container" data-cy="color-picker-parent">
+      <div className="col">
+        <div className="field">
+          {!asBoxShadowPopover ? (
+            <>
+              {ColorPicker()}
+              {ColorPickerInputBox()}
+            </>
+          ) : (
+            <OverlayTrigger
+              onToggle={(showPicker) => {
+                setShowPicker(showPicker);
+              }}
+              show={showPicker}
+              trigger="click"
+              placement={!colorPickerPosition ? 'bottom' : colorPickerPosition}
+              flip={true}
+              fallbackPlacements={['top', 'left']}
+              rootClose={true}
+              overlay={eventPopover()}
+            >
+              {ColorPickerInputBox()}
+            </OverlayTrigger>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BaseColorSwatches;

frontend/src/modules/common/components/BaseColorSwatches/index.js

@@ -0,0 +1 @@
+export { default } from './BaseColorSwatches';

frontend/src/modules/common/components/index.js

@@ -25,6 +25,7 @@ import EditRoleErrorModal from './ErrorModal';
 import BaseOnboardingQuestions from './BaseOnboardingQuestions';
 import BaseSetupAdminPage from './BaseSetupAdminPage';
 import UsersTable from './UsersTable';
+import BaseColorSwatches from './BaseColorSwatches';
 
 export {
   FormTextInput,
@@ -32,6 +33,7 @@ export {
   GeneralFeatureImage,
   SubmitButton,
   FormHeader,
+  BaseColorSwatches,
   EmailComponent,
   FormDescription,
   SSOAuthModule,

server/ee

@@ -1 +1 @@
-Subproject commit 683647f83d3efeeadbe69c40b8e8dd5ba4e8ea06
+Subproject commit 0eefbb71a1d5288f49641af5efaaab25970f27d1

server/src/modules/apps/services/widget-config/button.js

@@ -61,7 +61,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -74,7 +74,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -83,7 +83,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -92,7 +92,7 @@ export const buttonConfig = {
       accordian: 'button',
     },
     loaderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Loader color',
       validation: {
         schema: { type: 'string' },
@@ -110,7 +110,7 @@ export const buttonConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' } },
       accordian: 'button',
@@ -132,10 +132,7 @@ export const buttonConfig = {
     borderRadius: {
       type: 'numberInput',
       displayName: 'Border radius',
-      validation: {
-        validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
-        defaultValue: false,
-      },
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: false },
       accordian: 'button',
     },
     boxShadow: {
@@ -222,10 +219,10 @@ export const buttonConfig = {
     events: [],
     styles: {
       textColor: { value: '#FFFFFF' },
-      borderColor: { value: '#4368E3' },
+      borderColor: { value: 'var(--primary-brand)' },
       loaderColor: { value: '#FFFFFF' },
       borderRadius: { value: '{{6}}' },
-      backgroundColor: { value: '#4368E3' },
+      backgroundColor: { value: 'var(--primary-brand)' },
       iconColor: { value: '#FFFFFF' },
       direction: { value: 'left' },
       padding: { value: 'default' },

server/src/modules/apps/services/widget-config/buttonGroup.js

@@ -68,7 +68,7 @@ export const buttonGroupConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -76,7 +76,7 @@ export const buttonGroupConfig = {
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -108,7 +108,7 @@ export const buttonGroupConfig = {
       },
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected text colour',
       validation: {
         schema: { type: 'string' },
@@ -116,11 +116,11 @@ export const buttonGroupConfig = {
       },
     },
     selectedBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected background color',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#007bff',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     alignment: {
@@ -163,7 +163,7 @@ export const buttonGroupConfig = {
       borderRadius: { value: '{{4}}' },
       disabledState: { value: '{{false}}' },
       selectedTextColor: { value: '#FFFFFF' },
-      selectedBackgroundColor: { value: '#4368E3' },
+      selectedBackgroundColor: { value: 'var(--primary-brand)' },
       alignment: { value: 'left' },
     },
   },

server/src/modules/apps/services/widget-config/chart.js

@@ -39,13 +39,13 @@ export const chartConfig = {
       },
     },
     markerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Marker color',
       validation: {
         schema: {
           type: 'string',
         },
-        defaultValue: '#CDE1F8',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     showAxes: {
@@ -134,7 +134,7 @@ export const chartConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
     },
@@ -192,7 +192,7 @@ export const chartConfig = {
     },
     properties: {
       title: { value: 'This title can be changed' },
-      markerColor: { value: '#CDE1F8' },
+      markerColor: { value: 'var(--primary-brand)' },
       showAxes: { value: '{{true}}' },
       showGridLines: { value: '{{true}}' },
       plotFromJson: { value: '{{false}}' },

server/src/modules/apps/services/widget-config/checkbox.js

@@ -70,7 +70,7 @@ export const checkboxConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },
@@ -78,7 +78,7 @@ export const checkboxConfig = {
       accordian: 'label',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -86,7 +86,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     checkboxColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked color',
       validation: {
         schema: { type: 'string' },
@@ -94,7 +94,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     uncheckedColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked color',
       validation: {
         schema: { type: 'string' },
@@ -102,7 +102,7 @@ export const checkboxConfig = {
       accordian: 'switch',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -183,7 +183,7 @@ export const checkboxConfig = {
     styles: {
       disabledState: { value: '{{false}}' },
       textColor: { value: '#1B1F24' },
-      checkboxColor: { value: '#4368E3' },
+      checkboxColor: { value: 'var(--primary-brand)' },
       uncheckedColor: { value: '#E4E7EB' },
       borderColor: { value: '#CCD1D5' },
       handleColor: { value: '#FFFFFF' },

server/src/modules/apps/services/widget-config/circularProgressbar.js

@@ -32,15 +32,15 @@ export const circularProgressbarConfig = {
   events: {},
   styles: {
     color: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: {
         schema: { type: 'string' },
-        defaultValue: '#375FCF',
+        defaultValue: 'var(--primary-brand)',
       },
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text Color',
       validation: {
         schema: { type: 'string' },
@@ -104,7 +104,7 @@ export const circularProgressbarConfig = {
     },
     events: [],
     styles: {
-      color: { value: '' },
+      color: { value: 'var(--primary-brand)' },
       textColor: { value: '' },
       textSize: { value: '{{16}}' },
       strokeWidth: { value: '{{8}}' },

server/src/modules/apps/services/widget-config/colorPicker.js

@@ -4,7 +4,7 @@ export const colorPickerConfig = {
   description: 'Choose colors from a palette',
   component: 'ColorPicker',
   properties: {
-    defaultColor: { type: 'color', displayName: 'Default color' },
+    defaultColor: { type: 'colorSwatches', displayName: 'Default color' },
   },
   defaultSize: {
     width: 9,
@@ -14,7 +14,9 @@ export const colorPickerConfig = {
     {
       displayName: 'Set Color',
       handle: 'setColor',
-      params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }],
+      params: [
+        { handle: 'colorSwatches', displayName: 'colorSwatches', defaultValue: '#ffffff', type: 'colorSwatches' },
+      ],
     },
   ],
   others: {

server/src/modules/apps/services/widget-config/container.js

@@ -71,7 +71,7 @@ export const containerConfig = {
   events: {},
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -80,7 +80,7 @@ export const containerConfig = {
       accordian: 'container',
     },
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -89,7 +89,7 @@ export const containerConfig = {
       accordian: 'header',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -153,7 +153,7 @@ export const containerConfig = {
       showOnMobile: { value: '{{false}}' },
     },
     properties: {
-      showHeader: {value: `{{true}}`},
+      showHeader: { value: `{{true}}` },
       loadingState: { value: `{{false}}` },
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },

server/src/modules/apps/services/widget-config/datepickerV2.js

@@ -169,8 +169,8 @@ export const datePickerV2Config = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -220,31 +220,31 @@ export const datePickerV2Config = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -257,7 +257,7 @@ export const datePickerV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

server/src/modules/apps/services/widget-config/daterangepicker.js

@@ -199,8 +199,8 @@ export const daterangepickerConfig = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -250,31 +250,31 @@ export const daterangepickerConfig = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -287,7 +287,7 @@ export const daterangepickerConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

server/src/modules/apps/services/widget-config/datetimepickerV2.js

@@ -214,8 +214,8 @@ export const datetimePickerV2Config = {
   ],
   styles: {
     labelColor: {
-      type: 'color',
-      displayName: 'Color',
+      type: 'colorSwatches',
+      displayName: 'colorSwatches',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
     },
@@ -265,31 +265,31 @@ export const datetimePickerV2Config = {
       isFxNotRequired: true,
     },
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#E54D2E' },
       accordian: 'field',
@@ -302,7 +302,7 @@ export const datetimePickerV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

server/src/modules/apps/services/widget-config/divider.js

@@ -15,7 +15,7 @@ export const dividerConfig = {
   events: {},
   styles: {
     dividerColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Divider color',
       validation: {
         schema: { type: 'string' },

server/src/modules/apps/services/widget-config/dropdown.js

@@ -128,7 +128,7 @@ export const dropdownConfig = {
       defaultValue: true,
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Selected text color',
       validation: {
         schema: {

server/src/modules/apps/services/widget-config/dropdownV2.js

@@ -101,7 +101,7 @@ export const dropdownV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -153,31 +153,31 @@ export const dropdownV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -190,7 +190,7 @@ export const dropdownV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: '',
       showLabel: false,
       validation: {

server/src/modules/apps/services/widget-config/form.js

@@ -333,7 +333,7 @@ export const formConfig = {
       },
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -351,7 +351,7 @@ export const formConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },
@@ -403,6 +403,7 @@ export const formConfig = {
         value:
           "{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
       },
+      buttonToSubmit: { value: '{{"none"}}' },
       showHeader: { value: '{{false}}' },
       showFooter: { value: '{{false}}' },
       visibility: { value: '{{true}}' },

server/src/modules/apps/services/widget-config/icon.js

@@ -61,7 +61,7 @@ export const iconConfig = {
   },
   styles: {
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: {
         schema: { type: 'string' },

server/src/modules/apps/services/widget-config/image.js

@@ -153,7 +153,7 @@ export const imageConfig = {
       accordian: 'Image',
     },
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: {
         schema: { type: 'string' },
@@ -162,7 +162,7 @@ export const imageConfig = {
       accordian: 'Container',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },

server/src/modules/apps/services/widget-config/kanban.js

@@ -77,7 +77,7 @@ export const kanbanConfig = {
   styles: {
     disabledState: { type: 'toggle', displayName: 'Disable' },
     visibility: { type: 'toggle', displayName: 'Visibility' },
-    accentColor: { type: 'color', displayName: 'Accent color' },
+    accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
   },
   actions: [
     {
@@ -157,7 +157,7 @@ export const kanbanConfig = {
     styles: {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
-      accentColor: { value: '#4d72fa' },
+      accentColor: { value: 'var(--primary-brand)' },
     },
   },
 };

server/src/modules/apps/services/widget-config/kanbanBoard.js

@@ -30,7 +30,7 @@ export const kanbanBoardConfig = {
     visibility: { type: 'toggle', displayName: 'Visibility' },
     width: { type: 'number', displayName: 'Width' },
     minWidth: { type: 'number', displayName: 'Min Width' },
-    accentColor: { type: 'color', displayName: 'Accent color' },
+    accentColor: { type: 'colorSwatches', displayName: 'Accent color' },
   },
   exposedVariables: {
     columns: {},

server/src/modules/apps/services/widget-config/link.js

@@ -74,7 +74,7 @@ export const linkConfig = {
   },
   styles: {
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text color',
       validation: {
         schema: { type: 'string' },

server/src/modules/apps/services/widget-config/listview.js

@@ -121,7 +121,7 @@ export const listviewConfig = {
   },
   styles: {
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background color',
       validation: {
         schema: { type: 'string' },
@@ -129,7 +129,7 @@ export const listviewConfig = {
       },
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border color',
       validation: {
         schema: { type: 'string' },

server/src/modules/apps/services/widget-config/modal.js

@@ -20,19 +20,6 @@ export const modalConfig = {
         defaultValue: 'This title can be changed',
       },
     },
-    titleAlignment: {
-      type: 'select',
-      displayName: 'Title alignment',
-      options: [
-        { name: 'left', value: 'left' },
-        { name: 'center', value: 'center' },
-        { name: 'right', value: 'right' },
-      ],
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: 'left',
-      },
-    },
     loadingState: {
       type: 'toggle',
       displayName: 'Loading state',
@@ -94,7 +81,7 @@ export const modalConfig = {
   },
   styles: {
     headerBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header background color',
       validation: {
         schema: { type: 'string' },
@@ -102,7 +89,7 @@ export const modalConfig = {
       },
     },
     headerTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Header title color',
       validation: {
         schema: { type: 'string' },
@@ -110,7 +97,7 @@ export const modalConfig = {
       },
     },
     bodyBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Body background color',
       validation: {
         schema: { type: 'string' },
@@ -134,7 +121,7 @@ export const modalConfig = {
       },
     },
     triggerButtonBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button background color',
       validation: {
         schema: { type: 'string' },
@@ -142,7 +129,7 @@ export const modalConfig = {
       },
     },
     triggerButtonTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Trigger button text color',
       validation: {
         schema: { type: 'string' },
@@ -188,7 +175,7 @@ export const modalConfig = {
       bodyBackgroundColor: { value: '#ffffffff' },
       disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
-      triggerButtonBackgroundColor: { value: '#4D72FA' },
+      triggerButtonBackgroundColor: { value: 'var(--primary-brand)' },
       triggerButtonTextColor: { value: '#ffffffff' },
     },
   },

server/src/modules/apps/services/widget-config/multiselectV2.js

@@ -165,7 +165,7 @@ export const multiselectV2Config = {
 
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -218,32 +218,32 @@ export const multiselectV2Config = {
     },
 
     fieldBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
 
     fieldBorderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
       validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
       accordian: 'field',
     },
     selectedTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error Text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -256,7 +256,7 @@ export const multiselectV2Config = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: {
         schema: { type: 'string' },
@@ -365,7 +365,7 @@ export const multiselectV2Config = {
       icon: { value: 'IconHome2' },
       iconVisibility: { value: false },
       iconColor: { value: '#6A727C' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
     },
   },
 };

server/src/modules/apps/services/widget-config/numberinput.js

@@ -20,10 +20,7 @@ export const numberinputConfig = {
     value: {
       type: 'code',
       displayName: 'Default value',
-      validation: {
-        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
-        defaultValue: 0,
-      },
+      validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 0 },
     },
     placeholder: {
       type: 'code',
@@ -75,7 +72,7 @@ export const numberinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -127,31 +124,31 @@ export const numberinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -164,7 +161,7 @@ export const numberinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -282,7 +279,7 @@ export const numberinputConfig = {
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       textColor: { value: '#1B1F24' },
       color: { value: '#1B1F24' },

server/src/modules/apps/services/widget-config/passwordinput.js

@@ -84,7 +84,7 @@ export const passinputConfig = {
   },
   styles: {
     color: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -136,31 +136,31 @@ export const passinputConfig = {
     },
 
     backgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Background',
       validation: { schema: { type: 'string' }, defaultValue: '#fff' },
       accordian: 'field',
     },
     accentColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Accent',
-      validation: { schema: { type: 'string' }, defaultValue: '#4368E3' },
+      validation: { schema: { type: 'string' }, defaultValue: 'var(--primary-brand)' },
       accordian: 'field',
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' },
       accordian: 'field',
     },
     textColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'field',
     },
     errTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Error text',
       validation: { schema: { type: 'string' }, defaultValue: '#D72D39' },
       accordian: 'field',
@@ -173,7 +173,7 @@ export const passinputConfig = {
       visibility: false,
     },
     iconColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Icon color',
       validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' },
       accordian: 'field',
@@ -278,7 +278,7 @@ export const passinputConfig = {
       borderRadius: { value: '{{6}}' },
       backgroundColor: { value: '#fff' },
       borderColor: { value: '#CCD1D5' },
-      accentColor: { value: '#4368E3' },
+      accentColor: { value: 'var(--primary-brand)' },
       errTextColor: { value: '#D72D39' },
       textColor: { value: '#1B1F24' },
       iconColor: { value: '#CFD3D859' },

server/src/modules/apps/services/widget-config/radioButtonV2.js

@@ -89,7 +89,7 @@ export const radiobuttonV2Config = {
   },
   styles: {
     labelColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Color',
       validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' },
       accordian: 'label',
@@ -139,7 +139,7 @@ export const radiobuttonV2Config = {
       isFxNotRequired: true,
     },
     borderColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Border',
       validation: {
         schema: { type: 'string' },
@@ -147,7 +147,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     switchOnBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Checked background',
       validation: {
         schema: { type: 'string' },
@@ -158,7 +158,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     switchOffBackgroundColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Unchecked background',
       validation: {
         schema: { type: 'string' },
@@ -169,7 +169,7 @@ export const radiobuttonV2Config = {
       tooltipPlacement: 'bottom',
     },
     handleColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Handle color',
       validation: {
         schema: { type: 'string' },
@@ -177,7 +177,7 @@ export const radiobuttonV2Config = {
       accordian: 'switch',
     },
     optionsTextColor: {
-      type: 'color',
+      type: 'colorSwatches',
       displayName: 'Text',
       validation: {
         schema: { type: 'string' },