Theme: config updates

raheeliftikhar5 · raheeliftikhar5 · commit 5d20a89b2d22 · 2024-07-03T14:21:39.000+05:00
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -43,14 +43,17 @@ export interface ThemeDetail {
   textLight: string;
   canvas: string; // app bg-color
   primarySurface: string; // comp bg-color
-  borderRadius: string;
-  borderColor?: string;
+  borderRadius?: string; // will be depreceated
+  borderColor?: string; // will be depreceated
+  radius?: string;
+  border?: string;
   borderWidth?: string;
   borderStyle?: string;
   chart?: string;
   margin?: string;
   padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
+  text?: string;
   textSize?: string;
   fontFamily?: string;
   animation?: string;
@@ -70,8 +73,8 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
     case "textLight": return trans("themeDetail.textLight");
     case "canvas": return trans("themeDetail.canvas");
     case "primarySurface": return trans("themeDetail.primarySurface");
-    case "borderRadius": return trans("themeDetail.borderRadius");
-    case "borderColor": return trans("themeDetail.borderColor");
+    case "radius": return trans("themeDetail.borderRadius");
+    case "border": return trans("themeDetail.borderColor");
     case "borderWidth": return trans("themeDetail.borderWidth");
     case "borderStyle": return trans("themeDetail.borderStyle");
     case "fontFamily": return trans("themeDetail.fontFamily");
@@ -92,6 +95,8 @@ export function isThemeColorKey(key: string) {
     case "primarySurface":
     case "borderRadius":
     case "borderColor":
+    case "radius":
+    case "border":
     case "borderWidth":
     case "borderStyle":
     case "fontFamily":
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -212,7 +212,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             settingsKey: 'borderColor',
             name: trans('themeDetail.borderColor'),
             desc: trans('themeDetail.borderColorDesc'),
-            color: this.state.theme.borderColor,
+            color: this.state.theme.border || this.state.theme.borderColor,
           }
         ]
       },
@@ -260,7 +260,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             name: trans('themeDetail.borderRadius'),
             desc: trans('themeDetail.borderRadiusDesc'),
             type: "radius",
-            value: this.state.theme.borderRadius,
+            value: this.state.theme.radius || this.state.theme.borderRadius,
           },
           {
             settingsKey: 'borderWidth',
diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
@@ -27,7 +27,7 @@ export const themeTemplateList = [
       textLight: "#FFFFFF",
       canvas: "#F5F5F6",
       primarySurface: "#FFFFFF",
-      borderRadius: "4px",
+      radius: "4px",
       chart: JSON.stringify(ChartTheme, null, 2),
       gridColumns: "24", //Added By Aqib Mirza
       margin: "3px",
@@ -44,7 +44,7 @@ export const themeTemplateList = [
       textLight: "#FFFFFF",
       canvas: "#29324F",
       primarySurface: "#495780",
-      borderRadius: "4px",
+      radius: "4px",
       chart: JSON.stringify(ChartYellowTheme, null, 2),
       gridColumns: "24", //Added By Aqib Mirza
       margin: "3px",
@@ -61,7 +61,7 @@ export const themeTemplateList = [
       textLight: "#FFFFFF",
       canvas: "#F5F5F6",
       primarySurface: "#FFFFFF",
-      borderRadius: "4px",
+      radius: "4px",
       chart: JSON.stringify(ChartGreenTheme, null, 2),
       gridColumns: "24", //Added By Aqib Mirza
       margin: "3px",

Original file line number	Diff line number	Diff line change
`@@ -212,7 +212,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP`
`212`	`212`	`settingsKey: 'borderColor',`
`213`	`213`	`name: trans('themeDetail.borderColor'),`
`214`	`214`	`desc: trans('themeDetail.borderColorDesc'),`
`215`		`- color: this.state.theme.borderColor,`
	`215`	`+ color: this.state.theme.border \|\| this.state.theme.borderColor,`
`216`	`216`	`}`
`217`	`217`	`]`
`218`	`218`	`},`
`@@ -260,7 +260,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP`
`260`	`260`	`name: trans('themeDetail.borderRadius'),`
`261`	`261`	`desc: trans('themeDetail.borderRadiusDesc'),`
`262`	`262`	`type: "radius",`
`263`		`- value: this.state.theme.borderRadius,`
	`263`	`+ value: this.state.theme.radius \|\| this.state.theme.borderRadius,`
`264`	`264`	`},`
`265`	`265`	`{`
`266`	`266`	`settingsKey: 'borderWidth',`