Theme/setting

client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx

@@ -257,10 +257,11 @@ const childrenMap = {
   allowNull: BoolControl,
   onEvent: InputEventHandlerControl,
   viewRef: RefControl<HTMLInputElement>,
-  style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
-  labelStyle: styleControl(LabelStyle),
+  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
+  labelStyle:styleControl(LabelStyle),
+  prefixText : stringExposingStateControl("defaultValue"),
   animationStyle: styleControl(AnimationStyle),
-  prefixText: stringExposingStateControl('defaultValue'),
+
   prefixIcon: IconControl,
   inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) ,
   // validation

client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx

@@ -71,7 +71,7 @@ export const SliderChildren = {
   label: LabelControl,
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
-  style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
+  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
   labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
   prefixIcon: IconControl,
   suffixIcon: IconControl,

client/packages/lowcoder/src/comps/comps/ratingComp.tsx

@@ -43,7 +43,7 @@ const RatingBasicComp = (function () {
     allowHalf: BoolControl,
     disabled: BoolCodeControl,
     onEvent: eventHandlerControl(EventOptions),
-    style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
+    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
     animationStyle: styleControl(AnimationStyle),
     labelStyle: styleControl(
       LabelStyle.filter(

client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

@@ -14,53 +14,53 @@ import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
-const getStyle = (style: RadioStyleType) => {
+const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
     .ant-radio-wrapper:not(.ant-radio-wrapper-disabled) {
-      color: ${style.staticText};
+      color: ${inputFieldStyle?.staticText};
       // height: 22px;
       max-width: calc(100% - 8px);
-      padding: ${style.padding};
+      padding: ${inputFieldStyle?.padding};
       span:not(.ant-radio) {
         ${EllipsisTextCss};
-        font-family:${style.fontFamily};
-        font-size:${style.textSize};
-        font-weight:${style.textWeight};
-        font-style:${style.fontStyle};
-        text-transform:${style.textTransform};
-        text-decoration:${style.textDecoration};
+        font-family:${inputFieldStyle?.fontFamily};
+        font-size:${inputFieldStyle?.textSize};
+        font-weight:${inputFieldStyle?.textWeight};
+        font-style:${inputFieldStyle?.fontStyle};
+        text-transform:${inputFieldStyle?.textTransform};
+        text-decoration:${inputFieldStyle?.textDecoration};
       }
 
       .ant-radio-checked {
         .ant-radio-inner {
-          background-color: ${style.checkedBackground};
-          border-color: ${style.checkedBackground};
+          background-color: ${inputFieldStyle?.checkedBackground};
+          border-color: ${inputFieldStyle?.uncheckedBorder};
         }
 
         &::after {
-          border-color: ${style.checkedBackground};
+          border-color: ${inputFieldStyle?.uncheckedBorder};
         }
       }
 
       .ant-radio-inner {
-        background-color: ${style.uncheckedBackground};
-        border-color: ${style.uncheckedBorder};
-        border-width:${style.borderWidth};
+        background-color: ${inputFieldStyle?.uncheckedBackground};
+        border-color: ${inputFieldStyle?.uncheckedBorder};
+        border-width:${inputFieldStyle?.borderWidth};
         &::after {
-          background-color: ${style.checked};
+          background-color: ${inputFieldStyle?.checked};
         }
       }
 
       &:hover .ant-radio-inner, 
       .ant-radio:hover .ant-radio-inner,
       .ant-radio-input + ant-radio-inner {
-        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+        background-color:${inputFieldStyle?.hoverBackground ? inputFieldStyle?.hoverBackground:'#ffff'};
       }
 
       &:hover .ant-radio-inner,
       .ant-radio:hover .ant-radio-inner,
       .ant-radio-input:focus + .ant-radio-inner {
-        border-color: ${style.checkedBackground};
+        border-color: ${inputFieldStyle?.uncheckedBorder};
       }
     }
   `;
@@ -69,11 +69,12 @@ const getStyle = (style: RadioStyleType) => {
 const Radio = styled(AntdRadioGroup)<{
   $style: RadioStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
+  $inputFieldStyle:RadioStyleType
 }>`
   width: 100%;
   min-height: 32px;
 
-  ${(props) => props.$style && getStyle(props.$style)}
+  ${(props) => props.$style && getStyle(props.$style, props.$inputFieldStyle)}
   ${(props) => {
     if (props.$layout === "horizontal") {
       return css`
@@ -113,6 +114,7 @@ let RadioBasicComp = (function () {
           disabled={props.disabled}
           value={props.value.value}
           $style={props.style}
+          $inputFieldStyle={props.inputFieldStyle}
           $layout={props.layout}
           onChange={(e) => {
             handleChange(e.target.value);

client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx

@@ -22,6 +22,7 @@ import { RefControl } from "comps/controls/refControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { withDefault } from "@lowcoder-ee/index.sdk";
 
 export const RadioLayoutOptions = [
   { label: trans("radio.horizontal"), value: "horizontal" },
@@ -40,7 +41,7 @@ export const RadioChildrenMap = {
   labelStyle:styleControl(LabelStyle),
   layout: dropdownControl(RadioLayoutOptions, "horizontal"),
   viewRef: RefControl<HTMLDivElement>,
-  inputFieldStyle: styleControl(RadioStyle),
+  inputFieldStyle:withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
   animationStyle: styleControl(AnimationStyle),
   ...SelectInputValidationChildren,
   ...formDataChildren,

client/packages/lowcoder/src/comps/comps/textComp.tsx

@@ -26,10 +26,6 @@ const getStyle = (style: TextStyleType) => {
     border-radius: ${(style.radius ? style.radius : "4px")};
     border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
     color: ${style.text};
-    font-size: ${style.textSize} !important;
-    font-weight: ${style.textWeight} !important;
-    font-family: ${style.fontFamily} !important;
-    font-style:${style.fontStyle} !important;
     text-transform:${style.textTransform} !important;
     text-decoration:${style.textDecoration} !important;
     background-color: ${style.background};
@@ -40,6 +36,9 @@ const getStyle = (style: TextStyleType) => {
       margin: ${style.margin} !important;	
       padding: ${style.padding};	
       width: ${widthCalculator(style.margin)};	
+      font-family: ${style.fontFamily} !important;
+      font-style:${style.fontStyle} !important;
+      font-size: ${style.textSize} !important;
       // height: ${heightCalculator(style.margin)};
       h1 {
         line-height: 1.5;
@@ -60,6 +59,7 @@ const getStyle = (style: TextStyleType) => {
       h5,
       h6 {
         color: ${style.text};
+        font-weight: ${style.textWeight} !important;
       }
       img,
       pre {

client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx

@@ -49,11 +49,11 @@ const childrenMap = {
   viewRef: RefControl<InputRef>,
   showCount: BoolControl,
   allowClear: BoolControl,
-  style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
-  labelStyle: styleControl(LabelStyle),
+  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
+  labelStyle:styleControl(LabelStyle), 
   prefixIcon: IconControl,
   suffixIcon: IconControl,
-  inputFieldStyle: styleControl(InputLikeStyle),
+  inputFieldStyle:withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}) ,
   animationStyle: styleControl(AnimationStyle),
 };
 

client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx

@@ -57,10 +57,10 @@ let PasswordTmpComp = (function () {
     validationType: dropdownControl(TextInputValidationOptions, "Regex"),
     visibilityToggle: BoolControl.DEFAULT_TRUE,
     prefixIcon: IconControl,
-    style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
+    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
     labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: styleControl(InputLikeStyle),
-  animationStyle: styleControl(AnimationStyle),
+    inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}), 
+    animationStyle: styleControl(AnimationStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     const [inputProps, validateState] = useTextInputProps(props);

client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx

@@ -71,9 +71,9 @@ let TextAreaTmpComp = (function () {
     viewRef: RefControl<TextAreaRef>,
     allowClear: BoolControl,
     autoHeight: withDefault(AutoHeightControl, "fixed"),
-    style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
+    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
     labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: styleControl(InputLikeStyle),
+    inputFieldStyle:  withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}),
     animationStyle: styleControl(AnimationStyle)
   };
   return new UICompBuilder(childrenMap, (props) => {

client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx

@@ -65,7 +65,7 @@ const childrenMap = {
   allowClear: BoolControl,
   showSearch: BoolControl.DEFAULT_TRUE,
   inputValue: stateComp<string>(""), // search value
-  style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}),
+  style:styleControl(InputFieldStyle),
   labelStyle:styleControl(LabelStyle),
   inputFieldStyle: withDefault(styleControl(TreeSelectStyle), {borderWidth: '1px'}),
   viewRef: RefControl<BaseSelectRef>,

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -563,7 +563,8 @@ const HOVER_BACKGROUND_COLOR = {
   name: "hoverBackground",
   label: trans("style.hoverBackground"),
   hoverBackground: "hoverBackground",
-};
+  color: SECOND_SURFACE_COLOR,
+}
 
 const FONT_FAMILY = {
   name: "fontFamily",
@@ -768,8 +769,8 @@ function replaceAndMergeMultipleStyles(
 }
 
 export const ButtonStyle = [
-  getBackground(),
-  ...STYLING_FIELDS_SEQUENCE,
+  getBackground('primary'),
+  ...STYLING_FIELDS_SEQUENCE
 ] as const;
 
 export const ToggleButtonStyle = [
@@ -1111,7 +1112,7 @@ export const LabelStyle = [
 ];
 
 export const InputFieldStyle = [
-  getStaticBackground(SURFACE_COLOR),
+  getBackground(),
   getStaticBorder(),
   ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(
     (style) => ["border"].includes(style.name) === false
@@ -1199,7 +1200,7 @@ export const MultiSelectStyle = [
 
 export const ChildrenMultiSelectStyle = [
   ...STYLING_FIELDS_SEQUENCE,
-  getStaticBackground(SURFACE_COLOR),
+  getBackground()
 ] as const;
 
 export const TabContainerStyle = [
@@ -1266,6 +1267,7 @@ function checkAndUncheck() {
       name: "uncheckedBorder",
       label: trans("style.uncheckedBorder"),
       depName: "uncheckedBackground",
+      color:SECOND_SURFACE_COLOR,
       transformer: backgroundToBorder,
     },
   ] as const;