feat: update color schemas and theme provider (#176)

* feat: update color schemas and theme provider

* style: iconBadge component

* feat: add mode to palette

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/react"
-import { CssBaseline, ThemeProvider } from "@mui/material"
+import { CssBaseline } from "@mui/material"
+import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles"
 import { withThemeFromJSXProvider } from "@storybook/addon-themes"
 import { light, dark } from "../src/theme"
 
@@ -10,7 +11,7 @@ export const decorators = [
       dark: dark,
     },
     defaultTheme: "light",
-    Provider: ThemeProvider,
+    Provider: CssVarsProvider,
     GlobalStyles: CssBaseline,
   }),
 ]
@@ -39,11 +40,12 @@ const preview: Preview = {
         },
         {
           name: "dark",
-          value: "#161518",
+          value: "#1a091c",
         },
       ],
     },
   },
+  decorators: decorators,
 }
 
 export default preview

src/components/IconBadge/IconBadge.styled.ts

@@ -1,45 +1,44 @@
 import styled from "@emotion/styled"
-import { ButtonBase as ButtonMui, Typography, useTheme } from "@mui/material"
+import { Box, ButtonBase as ButtonMui, Typography } from "@mui/material"
+import { neutral, textOnNeutral } from "../../theme/colors"
 import { IconBadgeProps } from "./IconBadge.types"
 
 const IconBadgeButtonContainer = styled(ButtonMui)((
   props: Pick<IconBadgeProps, "inline" | "onClick">
 ) => {
-  const theme = useTheme()
-
+  const { inline, onClick } = props
   return {
-    display: props.inline ? "inline-flex" : "flex",
-    backgroundColor: theme.palette.secondary.main,
+    display: inline ? "inline-flex" : "flex",
+    backgroundColor: neutral.gray1,
     alignItems: "center",
     justifyContent: "center",
-    color: theme.palette.text.primary,
+    color: textOnNeutral.gray1,
     verticalAlign: "middle",
     fontSize: "13px",
     lineHeight: "inherit",
     textTransform: "uppercase" as const,
     padding: "2px 8px",
     borderRadius: "5px",
-    cursor: props.onClick ? "pointer" : "default",
+    cursor: onClick ? "pointer" : "default",
     "& + &": {
       marginLeft: "0.3em",
     },
   }
 })
 
-const ImageContainer = styled("div")(() => {
-  const theme = useTheme()
-  return {
-    display: "flex",
-    paddingRight: "0.3em",
-    "& svg path": {
-      fill: theme.palette.text.primary,
-    },
-  }
+const ImageContainer = styled(Box)({
+  display: "flex",
+  "& svg path": {
+    fill: textOnNeutral.gray1,
+  },
 })
 
 const TextContainer = styled(Typography)({
   fontSize: "inherit",
   color: "inherit",
+  ":not(:first-child)": {
+    paddingLeft: "0.3em",
+  },
 })
 
 export { IconBadgeButtonContainer, ImageContainer, TextContainer }

src/components/IconBadge/IconBadge.tsx

@@ -111,9 +111,11 @@ const IconBadge = React.memo((props: IconBadgeProps) => {
   const { icon, text, children, ...rest } = props
   return (
     <IconBadgeButtonContainer {...rest}>
-      <ImageContainer>
-        {children && icon ? { children } : icon ? getIcon(icon) : null}
-      </ImageContainer>
+      {icon && (
+        <ImageContainer>
+          {children ? { children } : getIcon(icon)}
+        </ImageContainer>
+      )}
       {text ? <TextContainer>{text}</TextContainer> : null}
     </IconBadgeButtonContainer>
   )

src/components/Mana/Mana.stories.tsx

@@ -32,7 +32,9 @@ const meta: Meta<ManaProps> = {
 type Story = StoryObj<ManaProps>
 
 const Symbol: Story = {
-  args: {},
+  args: {
+    primary: true,
+  },
 }
 
 const SymbolMana: Story = {