add boson theme from cc

package.json

@@ -47,6 +47,7 @@
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
     "@bosonprotocol/react-kit": "^0.35.1-alpha.7",
+    "@bosonprotocol/roblox-sdk": "^1.0.0-alpha.14",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.7.0",

src/components/app/index.tsx

@@ -1,10 +1,11 @@
+import { BosonThemeProvider } from "@bosonprotocol/react-kit";
 import { IconContext } from "phosphor-react";
 import { ThemeProvider } from "styled-components";
 
 import ModalProvider from "../../components/modal/ModalProvider";
 import { getCurrentViewMode, ViewMode } from "../../lib/viewMode";
 import ChatProvider from "../../pages/chat/ChatProvider/ChatProvider";
-import theme from "../../theme";
+import theme, { themeVars } from "../../theme";
 import CookieBanner from "../cookie/CookieBanner";
 import { AppView } from "./AppView";
 import { Container } from "./index.styles";
@@ -39,8 +40,11 @@ export default function App({
         }}
       >
         <ChatProvider>
-          <ModalProvider>
-            <>
+          <BosonThemeProvider
+            roundness={themeVars.roundness}
+            theme={themeVars.themeKey}
+          >
+            <ModalProvider>
               <Container>
                 <AppView
                   wrapper={Wrapper}
@@ -53,8 +57,8 @@ export default function App({
                 </AppView>
               </Container>
               <CookieBanner isDapp={getCurrentViewMode() === ViewMode.DAPP} />
-            </>
-          </ModalProvider>
+            </ModalProvider>
+          </BosonThemeProvider>
         </ChatProvider>
       </IconContext.Provider>
     </ThemeProvider>

src/components/header/web3Status/index.tsx

@@ -15,7 +15,7 @@ import useENSName from "lib/utils/hooks/useENSName";
 import { useLast } from "lib/utils/hooks/useLast";
 import { memo, useCallback, useEffect, useRef } from "react";
 import { useAppSelector } from "state/hooks";
-import styled from "styled-components";
+import styled, { CSSProperties } from "styled-components";
 
 import { breakpoint, breakpointNumbers } from "../../../lib/styles/breakpoint";
 import { formatAddress } from "../../../lib/utils/address";
@@ -98,9 +98,9 @@ const Text = styled.p`
   font-weight: 500;
 `;
 
-const StyledConnectButton = styled(Button)`
+const StyledConnectButton = styled(Button)<{ $color: CSSProperties["color"] }>`
   background-color: var(--buttonBgColor);
-  color: inherit;
+  color: ${({ $color }) => $color};
 `;
 
 const getCommonWalletButtonProps = (isXXS: boolean) =>
@@ -224,9 +224,9 @@ function Web3StatusInner({ showOnlyIcon }: { showOnlyIcon?: boolean }) {
           {...getCommonWalletButtonProps(isXXS)}
           variant="primaryFill"
           style={{
-            ...getCommonWalletButtonProps(isXXS).style,
-            color: connectedButtonTextColor
+            ...getCommonWalletButtonProps(isXXS).style
           }}
+          $color={connectedButtonTextColor}
         >
           Connect Wallet
         </StyledConnectButton>

src/lib/styles/GlobalStyle.tsx

@@ -1,3 +1,4 @@
+import { cssVars } from "@bosonprotocol/react-kit";
 import { createGlobalStyle } from "styled-components";
 
 import barlowRegular from "../../assets/fonts/Barlow-Regular.ttf";
@@ -101,6 +102,8 @@ const GlobalStyle = createGlobalStyle<{
         ? props.$lowerCardBgColor
         : colors.white};
 
+    ${cssVars};
+
     font-size: 0.75rem;
     ${breakpoint.xs} {
       font-size: 0.75rem;

src/lib/utils/hooks/useCSSVariable.ts

@@ -1,3 +1,4 @@
+import { CssVarKeys } from "@bosonprotocol/react-kit";
 import { useEffect, useState } from "react";
 
 // all css variables can be found in src/components/app/index.tsx
@@ -18,6 +19,7 @@ export const useCSSVariable = (
     | "--buttonTextColor"
     | "--upperCardBgColor"
     | "--lowerCardBgColor"
+    | CssVarKeys
 ) => {
   const [value, setValue] = useState<string>();
   useEffect(() => {

src/theme.ts

@@ -2,13 +2,20 @@ import "styled-components";
 
 import { BaseTagsInputProps, getThemes } from "@bosonprotocol/react-kit";
 import { colors } from "lib/styles/colors";
-
-const theme = getThemes({ roundness: "min" })["light"];
+export const themeVars = {
+  roundness: "min",
+  themeKey: "light"
+} as const;
+const theme = getThemes({ roundness: themeVars.roundness })[themeVars.themeKey];
 
 export const inputTheme = {
   background: colors.greyLight,
   borderColor: colors.border,
   borderRadius: 0,
+  color: "inherit",
+  placeholder: {
+    color: "inherit"
+  },
   focus: {
     caretColor: "initial"
   },