📑 :: b1nd-styled-components-theme 작성

packages/b1nd-styled-components-theme/@types/styled.d.ts

@@ -0,0 +1,20 @@
+import "styled-components";
+
+declare module "styled-components" {
+  export interface B1ndTheme {
+    backgroundColor: string;
+    backgroundColor2: string;
+    backgroundColor3: string;
+    backgroundColor4: string;
+    desableBackground: string;
+    borderColor: string;
+    borderColor2: string;
+    contrast: string;
+    contrast2: string;
+    contrast3: string;
+    hoverColor: string;
+    headerBoxShadow: string;
+    darkmodeButtonColor: string;
+    footerBackground: string;
+  }
+}

packages/b1nd-styled-components-theme/README.md

@@ -0,0 +1 @@
+# b1nd-styled-components-theme

packages/b1nd-styled-components-theme/esbuild.config.js

@@ -0,0 +1,19 @@
+const { build } = require("esbuild");
+const pkg = require("./package.json");
+const { pnpPlugin } = require("@yarnpkg/esbuild-plugin-pnp");
+
+const external = Object.keys({
+  ...pkg.dependencies,
+  ...pkg.peerDependencies,
+});
+
+build({
+  entryPoints: ["./src/index.ts"],
+  outfile: pkg.main,
+  format: "cjs",
+  platform: "node",
+  sourcemap: true,
+  bundle: true,
+  external: [...external],
+  plugins: [pnpPlugin()],
+}).catch(() => process.exit(1));

packages/b1nd-styled-components-theme/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@b1nd/b1nd-styled-components-theme",
+  "version": "1.0.0",
+  "packageManager": "[email protected]",
+  "description": "b1nd styled-components theme",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "npm run build:clean && npm run build:dist && npm run build:declaration",
+    "build:clean": "rm -rf ./dist",
+    "build:dist": "node esbuild.config.js",
+    "build:declaration": "yarn pnpify tsc"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts"
+  },
+  "sideEffects": false,
+  "author": "baekseungha <[email protected]>",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/styled-components": "^5.1.26",
+    "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.15",
+    "@yarnpkg/pnpify": "^4.0.0-rc.33",
+    "esbuild": "^0.16.7",
+    "react": "^18.2.0",
+    "styled-components": "5.3.6"
+  }
+}

packages/b1nd-styled-components-theme/src/B1ndThemeProvider.tsx

@@ -0,0 +1,17 @@
+import { ThemeProvider } from "styled-components";
+import { ReactNode } from "react";
+import React from "react";
+import { darkTheme, lightTheme } from "./b1ndTheme";
+
+interface Props {
+  children: ReactNode;
+  mode: "LIGHT" | "DARK";
+}
+
+export const B1ndThemeProvider = ({ children, mode }: Props) => {
+  return (
+    <ThemeProvider theme={mode === "LIGHT" ? lightTheme : darkTheme}>
+      {children}
+    </ThemeProvider>
+  );
+};

packages/b1nd-styled-components-theme/src/b1ndTheme.ts

@@ -0,0 +1,35 @@
+import { B1ndTheme } from "styled-components";
+
+export const lightTheme: B1ndTheme = {
+  backgroundColor: "#f0f2f4",
+  backgroundColor2: "#ffffff",
+  backgroundColor3: "#ffffff",
+  backgroundColor4: "#f0f2f4",
+  desableBackground: "#f7f7f7",
+  borderColor: "#d2d2d2",
+  borderColor2: "#3d3d3d",
+  contrast: "#000000",
+  contrast2: "#5c5c5c",
+  contrast3: "#a1a1a1",
+  hoverColor: "#e2e2e2",
+  headerBoxShadow: "0 1px 1px 0 hsl(0deg 0% 80% / 80%)",
+  darkmodeButtonColor: "#efefef",
+  footerBackground: "#292c33",
+};
+
+export const darkTheme = {
+  backgroundColor: "#1a1a1a",
+  backgroundColor2: "#292929",
+  backgroundColor3: "#1a1a1a",
+  backgroundColor4: "#292929",
+  desableBackground: "#1a1a1a",
+  borderColor: "#3d3d3d",
+  borderColor2: "#1a1a1a",
+  contrast: "#ffffff",
+  contrast2: "#e2e2e2",
+  contrast3: "#ffffff",
+  hoverColor: "#3d3d3d",
+  headerBoxShadow: "0 1px 1px 0 rgba(61,61,61,.8)",
+  darkmodeButtonColor: "#3d3d3d",
+  footerBackground: "#292929",
+};

packages/b1nd-styled-components-theme/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./B1ndThemeProvider";
+export * from "./b1ndTheme";

packages/b1nd-styled-components-theme/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "emitDeclarationOnly": true,
+    "declaration": true
+  },
+  "include": ["./src", "./@types"]
+}