Small branding changes in Seletable

Author: FalkWolsky

client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

@@ -5,21 +5,24 @@ import { generate } from "@ant-design/colors/es";
 extend([namesPlugin]);
 
 export const gradientColors = [
-  "linear-gradient(90deg, #1CB5E0 0%, #000851 100%)",
-  "linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)",
-  "linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%)",
-  "linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%)",
-  "linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%)",
-  "linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%)",
+  "linear-gradient(0deg, #fdfbfb 0%, #ebedee 100%)",
+  "linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%)",
   "linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%)",
-  "linear-gradient(90deg, #4b6cb7 0%, #182848 100%)",
-  "linear-gradient(90deg, #9ebd13 0%, #008552 100%)",
-  "linear-gradient(90deg, #0700b8 0%, #00ff88 100%)",
-  "linear-gradient(90deg, #d53369 0%, #daae51 100%)",
-  "linear-gradient(90deg, #efd5ff 0%, #515ada 100%)",
-  "linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%)",
-  "linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%)",
-  "linear-gradient(90deg, #fcff9e 0%, #c67700 100%)",
+
+  "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
+  "linear-gradient(0deg, #fbc2eb 0%, #a6c1ee 100%)",
+  "linear-gradient(45deg, #efd5ff 0%, #515ada 100%)",
+  "linear-gradient(90deg, #4b6cb7 0%, #72afd3 100%)",
+  "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+
+  "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+  "linear-gradient(45deg, #d53369 0%, #daae51 100%)",
+  "linear-gradient(0deg, #f43b47 0%, #453a94 100%)",
+  
+  "linear-gradient(135deg, #00d2ff 0%, #3a47d5 100%)",
+  "linear-gradient(0deg, #f8ff00 0%, #3ad59f 100%)",
+  "linear-gradient(45deg, #fcff9e 0%, #c67700 100%)",
+  "linear-gradient(90deg, #fad0c4 0%, #ffd1ff 100%)",
 ];
 
 // Color Palette

client/packages/lowcoder/src/constants/style.ts

@@ -1,5 +1,5 @@
 // brand color
-export const PrimaryColor = "#3377ff";
+export const PrimaryColor = "#b85fff";
 
 // module
 export const ModulePrimaryColor = "#F27A24";
@@ -21,10 +21,10 @@ export const DarkActiveTextColor = "#222222";
 export const ActiveTextColor = "#315efb";
 
 // icon
-export const NormalMenuIconColor = "#8B8FA3";
+export const NormalMenuIconColor = "#b480de";
 
 // Ui Comp
-export const UiCompBorderRadius = "2px";
+export const UiCompBorderRadius = "4px";
 
 // Tab
 export const TabActiveColor = "#222222";

client/packages/lowcoder/src/layout/compSelectionWrapper.tsx

@@ -35,7 +35,7 @@ const NameDiv = styled.div<{
     }
     return "#B8B9BF";
   }};
-  border-radius: ${(props) => (props.$position === "top" ? "2px 2px 0 0" : "0 0 2px 2px")};
+  border-radius: ${(props) => (props.$position === "top" ? "4px 4px 0 0" : "0 0 4px 4px")};
   font-weight: 500;
   color: #ffffff;
   position: absolute;
@@ -97,6 +97,7 @@ function getLineStyle(
 }
 
 // padding: ${props => props.hover || props.showDashline ? 3 : 4}px;
+
 const SelectableDiv = styled.div<{
   $hover?: boolean;
   $showDashLine: boolean;
@@ -174,7 +175,7 @@ const dragCss = (props: DragHandleProps, handle: ResizeHandleAxis) => css`
   height: 8px;
   width: 8px;
   border: 1px solid ${props.$compType === "module" ? ModulePrimaryColor : PrimaryColor};
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: #f5f5f6;
   z-index: 11;
   pointer-events: none;

client/packages/lowcoder/vite.config.mts

@@ -102,9 +102,9 @@ export const viteConfig: UserConfig = {
     preprocessorOptions: {
       less: {
         modifyVars: {
-          "@primary-color": "#3377FF",
+          "@primary-color": "#b480de",
           "@link-color": "#3377FF",
-          "@border-color-base": "#D7D9E0",
+          "@border-color-base": "#b480de",
           "@border-radius-base": "4px",
         },
         javascriptEnabled: true,