Merge pull request #20 from cat-crosswalk/SSlime/decomposition-card

♻️ Card を border, shadow, border-radius に分解

apps/client/app/routes/tokens.tsx

@@ -1,4 +1,4 @@
-import { card, colors, typography } from "@/theme";
+import { border, colors, rounded, shadow, typography } from "@/theme";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import type React from "react";
@@ -58,7 +58,9 @@ export default function Tokens() {
 }
 
 const Card = styled.section`
-  ${card.default}
+  ${border.default}
+  ${shadow.default}
+  ${rounded.default}
 
   padding: 2rem 3rem;
   margin: 2rem;

apps/client/app/theme/Box.mdx

@@ -0,0 +1,83 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+import { border, shadow, rounded } from "./index";
+import styled from "@emotion/styled";
+
+<Meta title="theme/Box" />
+
+# Box
+
+## Rounded + Shadow + Border
+
+```ts
+const Box = styled.div`
+  ${border.default}
+  ${shadow.default}
+  ${rounded.default}
+`;
+```
+
+export const Box1 = styled.div`
+${border.default}
+${shadow.default}
+${rounded.default}
+
+width: 300px;
+height: 100px;
+`;
+
+<Box1 />
+
+## Shadow + Border
+
+```ts
+const Box = styled.div`
+  ${border.default}
+  ${shadow.default}
+`;
+```
+
+export const Box2 = styled.div`
+${border.default}
+${shadow.default}
+
+width: 300px;
+height: 100px;
+`;
+
+<Box2 />
+
+## Border + Rounded
+
+```ts
+const Box = styled.div`
+  ${border.default}
+  ${rounded.default}
+`;
+```
+
+export const Box3 = styled.div`
+${border.default}
+${rounded.default}
+
+width: 300px;
+height: 100px;
+`;
+
+<Box3 />
+
+## Border
+
+```ts
+const Box = styled.div`
+  ${border.default}
+`;
+```
+
+export const Box4 = styled.div`
+${border.default}
+
+width: 300px;
+height: 100px;
+`;
+
+<Box4 />

apps/client/app/theme/border.tsx

@@ -0,0 +1,7 @@
+import { colors } from "@/theme";
+
+export default {
+  default: {
+    border: `2px solid ${colors.border.primary.default}`,
+  },
+} as const satisfies Record<string, React.CSSProperties>;

apps/client/app/theme/index.tsx

@@ -1,3 +1,5 @@
 export { default as colors } from "@/theme/colors";
+export { default as rounded } from "@/theme/rounded";
 export { default as typography } from "@/theme/typography";
-export { default as card } from "@/theme/card";
+export { default as shadow } from "@/theme/shadow";
+export { default as border } from "@/theme/border";

apps/client/app/theme/rounded.tsx

@@ -0,0 +1,5 @@
+export default {
+  default: {
+    borderRadius: "3px",
+  },
+} as const satisfies Record<string, React.CSSProperties>;

apps/client/app/theme/card.ts → apps/client/app/theme/shadow.tsx

@@ -2,7 +2,6 @@ import { colors } from "@/theme";
 
 export default {
   default: {
-    border: `2px solid ${colors.border.primary.default}`,
     boxShadow: `6px 6px 0 0 ${colors.border.primary.default}`,
   },
 } as const satisfies Record<string, React.CSSProperties>;