updates

web/components/src/theme/createUseStyles.ts

@@ -0,0 +1,16 @@
+import type { Styles } from "react-jss";
+import { createUseStyles as ogCreateUseStyles } from "react-jss";
+
+import type commonTheme from "./index";
+
+const createUseStyles = <Props>(
+  styles:
+    | Styles<string | number, Props, typeof commonTheme>
+    | ((
+        theme: typeof commonTheme,
+      ) => Styles<string | number, Props, undefined>),
+) => {
+  return ogCreateUseStyles(styles);
+};
+
+export default createUseStyles;

web/components/src/theme/index.ts

@@ -0,0 +1,91 @@
+const theme = {
+  borderRadius: {
+    /* eslint-disable sort-keys-fix/sort-keys-fix */
+    s: 4,
+    m: 8,
+    l: 16,
+    /* eslint-enable sort-keys-fix/sort-keys-fix */
+  },
+  color: {
+    /* eslint-disable sort-keys-fix/sort-keys-fix */
+    white: "rgba(255, 255, 255, 1)",
+    whiteOpacity: "rgba(255, 255, 255, 0.3)",
+
+    black: "rgba(0, 0, 0, 1)",
+
+    grey: "rgba(238, 238, 238, 1)",
+    darkGrey: "rgba(144, 144, 144, 1)",
+
+    red: "rgba(255, 0, 0, 1)",
+    semiLightRed: "rgba(255, 0, 0, 0.75)",
+    lightRed: "rgba(255, 0, 0, 0.5)",
+
+    lightGreen: "rgba(0, 255, 255, 0.75)",
+    green: "rgba(0, 255, 0, 1)",
+    darkGreen: "rgba(27, 120, 43, 1)",
+
+    warningOrange: "rgba(237, 111, 46, 0.8)",
+
+    yellow: "rgba(255, 255, 0, 0.8)",
+
+    blue: "rgba(0, 0, 255, 1)",
+    /* eslint-enable sort-keys-fix/sort-keys-fix */
+  },
+  font: {
+    letterSpacing: {
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      s: "0.15px",
+      m: "0.32px",
+      l: "0.4px",
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    },
+    lineHeight: {
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      s: 1.2,
+      m: 1.4,
+      l: 1.7,
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    },
+    size: {
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      xxs: 12,
+      xs: 14,
+      s: 16,
+      m: 18,
+      l: 24,
+      xl: 36,
+      xxl: 48,
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    },
+  },
+  media: {
+    /* eslint-disable sort-keys-fix/sort-keys-fix */
+    xs: "@media screen and (min-width: 396px)",
+    sm: "@media screen and (min-width: 576px)",
+    md: "@media screen and (min-width: 768px)",
+    lg: "@media screen and (min-width: 992px)",
+    xl: "@media screen and (min-width: 1200px)",
+    xxl: "@media screen and (min-width: 1350px)",
+    /* eslint-enable sort-keys-fix/sort-keys-fix */
+  },
+  sizes: {
+    maxWidth: "@media screen and (min-width: 1440px)",
+    maxWidthValue: 1440,
+  },
+  spacing: {
+    /* eslint-disable sort-keys-fix/sort-keys-fix */
+    xxs: 2,
+    xs: 4,
+    s: 8,
+    m: 16,
+    l: 24,
+    xl: 32,
+    xxl: 40,
+    "3xl": 48,
+    "4xl": 64,
+    "5xl": 128,
+    /* eslint-enable sort-keys-fix/sort-keys-fix */
+  },
+};
+
+export default theme;

web/components/src/theme/scrollbar.ts

@@ -0,0 +1,22 @@
+export const scrollbarStyles = {
+  "&::-webkit-scrollbar": {
+    background: "#E6E8EC",
+    width: 8,
+  },
+  "&::-webkit-scrollbar-thumb": {
+    "&:hover": {
+      background: "#75787A",
+    },
+    background: "#C3C4C6",
+  },
+};
+
+export const horizontalScrollBar = {
+  "&::-webkit-scrollbar": {
+    background: "#E6E8EC",
+    height: 8,
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "#C3C4C6",
+  },
+};