[TOOL-4987] SDK: Restore CSS resets, remove biome rules for sorting attributes and properties (#7567)

.changeset/hip-tips-grow.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Restore CSS resets on react components

biome.json

@@ -4,8 +4,8 @@
     "actions": {
       "source": {
         "organizeImports": "on",
-        "useSortedAttributes": "on",
-        "useSortedKeys": "on"
+        "useSortedAttributes": "off",
+        "useSortedKeys": "off"
       }
     },
     "enabled": true

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -1153,6 +1153,7 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
       transition: "background 250ms ease",
     },
     alignItems: "center",
+    all: "unset",
     animation: `${fadeInAnimation} 300ms ease`,
     background: theme.colors.connectedButtonBg,
     border: `1px solid ${theme.colors.borderColor}`,

packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx

@@ -25,6 +25,7 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
+    all: "unset",
     backgroundColor: "transparent",
     borderRadius: radius.md,
     // border: `1px solid ${theme.colors.borderColor}`,

packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx

@@ -739,6 +739,7 @@ export const TabButton = /* @__PURE__ */ (() =>
         background: theme.colors.secondaryButtonBg,
         color: theme.colors.primaryText,
       },
+      all: "unset",
       borderRadius: radius.lg,
       color: theme.colors.secondaryText,
       cursor: "pointer",
@@ -784,6 +785,7 @@ export const NetworkButton = /* @__PURE__ */ StyledButton((_) => {
       background: theme.colors.secondaryButtonBg,
     },
     alignItems: "center",
+    all: "unset",
     borderRadius: radius.md,
     boxSizing: "border-box",
     color: theme.colors.primaryText,

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

@@ -102,6 +102,7 @@ export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => {
     '&[data-active="true"]': {
       backgroundColor: theme.colors.tertiaryBg,
     },
+    all: "unset",
     alignItems: "center",
     borderRadius: radius.md,
     boxSizing: "border-box",

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -720,6 +720,7 @@ const ShowAllWalletsIcon = /* @__PURE__ */ StyledDiv(() => {
 });
 
 const WalletList = /* @__PURE__ */ StyledUl({
+  all: "unset",
   boxSizing: "border-box",
   display: "flex",
   flex: 1,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx

@@ -88,6 +88,7 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
     "&:hover": {
       borderColor: theme.colors.accentText,
     },
+    all: "unset",
     border: `1px solid ${theme.colors.borderColor}`,
     borderRadius: radius.md,
     boxSizing: "border-box",

packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx

@@ -286,6 +286,7 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
     "&:hover": {
       borderColor: theme.colors.accentText,
     },
+    all: "unset",
     border: `1px solid ${theme.colors.borderColor}`,
     borderRadius: `0 0 ${radius.md} ${radius.md}`,
     boxSizing: "border-box",

packages/thirdweb/src/react/web/ui/components/buttons.tsx

@@ -38,6 +38,7 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
+    all: "unset",
     background: (() => {
       if (props.bg) {
         return theme.colors[props.bg];
@@ -151,6 +152,7 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
+    all: "unset",
     borderRadius: radius.sm,
     color: theme.colors.secondaryIconColor,
     cursor: "pointer",

packages/thirdweb/src/react/web/ui/components/text.tsx

@@ -48,6 +48,7 @@ export const Link = /* @__PURE__ */ StyledAnchor<LinkProps>((p) => {
       color: theme.colors[p.hoverColor || "primaryText"],
       textDecoration: "none",
     },
+    all: "unset",
     color: theme.colors[p.color || "accentText"],
     cursor: "pointer",
     display: p.inline ? "inline" : "block",

packages/thirdweb/src/react/web/wallets/shared/GetStartedScreen.tsx

@@ -218,6 +218,7 @@ const ButtonLink = /* @__PURE__ */ StyledButton((_) => {
       textDecoration: "none",
     },
     alignItems: "center",
+    all: "unset",
     background: theme.colors.secondaryButtonBg,
     borderRadius: radius.sm,
     boxSizing: "border-box",

packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx

@@ -345,6 +345,7 @@ const LinkButton = /* @__PURE__ */ StyledButton((_) => {
     "&:hover": {
       color: theme.colors.primaryText,
     },
+    all: "unset",
     color: theme.colors.accentText,
     cursor: "pointer",
     fontSize: fontSize.sm,