feat(defaultProps): replace theme variables with classes (#3701)

* feat(defaultProps): replace theme variables with prop classes * chore: replace theme var * chore: remove remaining variables * chore: fix rebase lint error * chore: fixe typecheck error * chore: cleaned package-lock, remove unused css * chore: remove unnecessary code and fix value * chore: remove static component names tipification, fix color variable definition
lumada-design · Oct 12, 2023 · d84c30d · d84c30d
1 parent d6d481c
commit d84c30d
Show file tree

Hide file tree

Showing 113 changed files with 2,024 additions and 2,497 deletions.
diff --git a/packages/core/src/components/ActionBar/ActionBar.styles.tsx b/packages/core/src/components/ActionBar/ActionBar.styles.tsx
@@ -6,7 +6,7 @@ export const { staticClasses, useClasses } = createClasses("HvActionBar", {
   root: {
     width: "100%",
     padding: theme.space.sm,
-    borderTop: theme.actionBar.borderTop,
+    borderTop: `1px solid ${theme.colors.atmo3}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",

diff --git a/packages/core/src/components/BaseCheckBox/BaseCheckBox.styles.ts b/packages/core/src/components/BaseCheckBox/BaseCheckBox.styles.ts
@@ -6,10 +6,10 @@ import { createClasses } from "@core/utils/classes";
 export const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
   root: {
     padding: 0,
-    borderRadius: theme.baseCheckBox.borderRadius,
+    borderRadius: theme.radii.base,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: theme.baseCheckBox.hoverColor,
+      backgroundColor: theme.colors.containerBackgroundHover,
     },
   },
   disabled: {

diff --git a/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx b/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx
@@ -19,25 +19,24 @@ export const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     position: "relative",
     background: theme.colors.atmo1,
     boxSizing: "border-box",
-    border: `1px solid ${theme.baseDropdown.borderColor}`,
+    border: `1px solid ${theme.colors.secondary_80}`,
     borderRadius: theme.radii.base,
     "&:hover": {
-      border: `1px solid ${theme.baseDropdown.hoverBorderColor}`,
+      border: `1px solid ${theme.colors.primary}`,
     },
     "&:focus": {
       outline: "none",
     },
     "&:focus-visible": {
       ...outlineStyles,
-      border: `1px solid ${theme.baseDropdown.hoverBorderColor}`,
+      border: `1px solid ${theme.colors.primary}`,
     },
   },
   headerOpen: {
-    border: `1px solid ${theme.baseDropdown.openBorderColor}`,
-    boxShadow: theme.baseDropdown.shadow,
+    border: `1px solid ${theme.colors.secondary_80}`,
+
     "&:hover": {
-      border: `1px solid ${theme.baseDropdown.openBorderColor}`,
-      boxShadow: theme.baseDropdown.shadow,
+      border: `1px solid ${theme.colors.secondary_80}`,
     },
   },
   headerOpenUp: {
@@ -49,21 +48,21 @@ export const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    border: `1px solid ${theme.baseDropdown.disabledBorderColor}`,
-    background: theme.baseDropdown.disabledBackgroundColor,
+    border: `1px solid ${theme.colors.secondary_60}`,
+    background: theme.colors.atmo2,
     "&:hover": {
-      border: `1px solid ${theme.baseDropdown.disabledBorderColor}`,
+      border: `1px solid ${theme.colors.secondary_60}`,
     },
   },
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    border: theme.baseDropdown.readOnlyBorder,
-    background: theme.baseDropdown.readOnlyBackgroundColor,
+    border: `1px solid ${theme.colors.secondary_60}`,
+    background: theme.colors.atmo2,
     userSelect: "text",
     "&:focus-visible": {
       outline: "none",
-      border: theme.baseDropdown.readOnlyBorder,
+      border: `1px solid ${theme.colors.secondary_60}`,
     },
   },
   arrowContainer: {
@@ -86,14 +85,14 @@ export const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     ...theme.typography.body,
-    color: theme.baseDropdown.placeholderColor,
+    color: theme.colors.secondary_80,
   },
   selectionDisabled: { color: theme.colors.secondary_60 },
   panel: {
     position: "relative",
-    boxShadow: theme.baseDropdown.shadow,
+
     backgroundColor: theme.colors.atmo1,
-    border: `1px solid ${theme.baseDropdown.openBorderColor}`,
+    border: `1px solid ${theme.colors.secondary_80}`,
   },
   panelOpenedUp: {
     top: 1,
@@ -104,12 +103,12 @@ export const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,
   },
   inputExtensionOpen: {
-    height: theme.dropDownMenu.extensionHeight,
+    height: "0px",
     backgroundColor: theme.colors.atmo1,
     borderTop: "none",
     borderBottom: "none",
-    borderRight: `1px solid ${theme.dropDownMenu.extensionBorderColor}`,
-    borderLeft: `1px solid ${theme.dropDownMenu.extensionBorderColor}`,
+    borderRight: `1px solid ${theme.colors.secondary_80}`,
+    borderLeft: `1px solid ${theme.colors.secondary_80}`,
   },
   inputExtensionLeftPosition: { marginLeft: "auto" },
   inputExtensionOpenShadow: {

diff --git a/packages/core/src/components/BaseInput/BaseInput.styles.tsx b/packages/core/src/components/BaseInput/BaseInput.styles.tsx
@@ -12,11 +12,11 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     position: "relative",
 
     "&:hover $inputBorderContainer": {
-      backgroundColor: theme.baseInput.hoverColor,
+      backgroundColor: theme.colors.primary,
     },
 
     "&:focus-within $inputBorderContainer": {
-      backgroundColor: theme.baseInput.hoverColor,
+      backgroundColor: theme.colors.primary,
     },
   },
   disabled: {
@@ -29,21 +29,21 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     },
 
     "&& $input": {
-      color: theme.baseInput.disabledTextColor,
-      WebkitTextFillColor: theme.baseInput.disabledTextColor,
+      color: theme.colors.secondary_60,
+      WebkitTextFillColor: theme.colors.secondary_60,
     },
 
     "& $inputRootMultiline": {
       "& $input": {
-        backgroundColor: theme.baseInput.disabledBackgroundColor,
-        border: `1px solid ${theme.baseInput.multilineDisabledBorderColor}`,
+        backgroundColor: theme.colors.atmo2,
+        border: `1px solid ${theme.colors.secondary_60}`,
       },
     },
 
     "&:hover $inputRootMultiline": {
       "& $input": {
-        backgroundColor: theme.baseInput.disabledBackgroundColor,
-        border: `1px solid ${theme.baseInput.multilineDisabledBorderColor}`,
+        backgroundColor: theme.colors.atmo2,
+        border: `1px solid ${theme.colors.secondary_60}`,
       },
     },
   },
@@ -92,51 +92,51 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
 
     "& $inputRootMultiline": {
       "& $input": {
-        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,
-        backgroundColor: theme.baseInput.readOnlyBackgroundColor,
+        border: `1px solid ${theme.colors.secondary_60}`,
+        backgroundColor: "transparent",
       },
     },
 
     "&:hover $inputRootMultiline": {
       "& $input": {
-        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,
-        backgroundColor: theme.baseInput.readOnlyBackgroundColor,
+        border: `1px solid ${theme.colors.secondary_60}`,
+        backgroundColor: "transparent",
       },
     },
 
     "&:focus-within $inputRootMultiline": {
       "& $input": {
-        border: `1px solid ${theme.baseInput.readOnlyBorderColor}`,
-        backgroundColor: theme.baseInput.readOnlyBackgroundColor,
+        border: `1px solid ${theme.colors.secondary_60}`,
+        backgroundColor: "transparent",
       },
     },
   },
   inputBorderContainer: {
     position: "absolute",
     width: "calc(100% - 4px)",
-    height: theme.baseInput.underlineHeight,
+    height: "0px",
     top: "31px",
     left: "2px",
     backgroundColor: theme.colors.atmo4,
   },
   inputRootInvalid: { borderColor: theme.colors.negative },
   inputRootReadOnly: {
-    borderColor: theme.baseInput.readOnlyBorderColor,
-    backgroundColor: theme.baseInput.readOnlyBackgroundColor,
+    borderColor: theme.colors.secondary_60,
+    backgroundColor: "transparent",
   },
   inputRoot: {
     margin: 0,
     width: "100%",
     borderRadius: theme.radii.base,
     height: "32px",
-    border: `1px solid ${theme.baseInput.borderColor}`,
+    border: `1px solid ${theme.colors.secondary_80}`,
     boxSizing: "border-box",
     backgroundColor: theme.colors.atmo1,
     fontFamily: theme.fontFamily.body,
 
     "&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)":
       {
-        borderColor: theme.baseInput.hoverColor,
+        borderColor: theme.colors.primary,
       },
 
     "&:hover:not($inputRootDisabled)::before": {
@@ -160,16 +160,16 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     },
 
     "& $inputRootReadOnly": {
-      backgroundColor: theme.baseInput.readOnlyBackgroundColor,
+      backgroundColor: "transparent",
     },
   },
   inputRootDisabled: {
-    background: theme.baseInput.disabledBackgroundColor,
-    borderColor: theme.baseInput.disabledBorderColor,
+    background: theme.colors.atmo2,
+    borderColor: theme.colors.secondary_60,
     cursor: "not-allowed",
 
     "&:hover": {
-      background: theme.baseInput.disabledBackgroundColor,
+      background: theme.colors.atmo2,
       cursor: "not-allowed",
     },
 
@@ -185,7 +185,7 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     height: "auto",
 
     "& $input": {
-      border: `1px solid ${theme.baseInput.multilineBorderColor}`,
+      border: `1px solid ${theme.colors.secondary_80}`,
       borderRadius: theme.radii.base,
       backgroundColor: theme.colors.atmo1,
       height: "auto",
@@ -196,7 +196,7 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
       marginRight: "0px",
 
       "&:hover": {
-        border: `1px solid ${theme.baseInput.hoverColor}`,
+        border: `1px solid ${theme.colors.primary}`,
       },
     },
   },
@@ -214,7 +214,7 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
 
     "&::placeholder": {
       opacity: 1,
-      color: theme.baseInput.placeholderColor,
+      color: theme.colors.secondary_80,
     },
 
     "&::-ms-clear": {
@@ -223,7 +223,7 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   },
   inputDisabled: {},
   inputReadOnly: {
-    color: theme.baseInput.readOnlyTextColor,
+    color: theme.colors.secondary_80,
   },
   inputResizable: { resize: "both", width: "100%" },
 });
diff --git a/packages/core/src/components/BaseRadio/BaseRadio.styles.tsx b/packages/core/src/components/BaseRadio/BaseRadio.styles.tsx
@@ -8,8 +8,8 @@ export const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
     padding: 0,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: theme.baseRadio.hoverColor,
-      borderRadius: theme.baseRadio.hoverBorderRadius,
+      backgroundColor: theme.colors.containerBackgroundHover,
+      borderRadius: theme.radii.base,
     },
     borderRadius: 0,
   },