From d7b0fc4d278980b8ea3ceb235f5ac93934a4e5f9 Mon Sep 17 00:00:00 2001 From: SSlime-s <62363188+SSlime-s@users.noreply.github.com> Date: Fri, 24 May 2024 16:47:49 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Card=20=E3=82=92=20bor?= =?UTF-8?q?der,=20shadow,=20border-radius=20=E3=81=AB=E5=88=86=E8=A7=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/app/routes/tokens.tsx | 6 +- apps/client/app/theme/Box.mdx | 83 +++++++++++++++++++ apps/client/app/theme/Card.mdx | 18 ---- apps/client/app/theme/border.tsx | 7 ++ apps/client/app/theme/index.tsx | 4 +- apps/client/app/theme/rounded.tsx | 5 ++ apps/client/app/theme/{card.ts => shadow.tsx} | 1 - 7 files changed, 102 insertions(+), 22 deletions(-) create mode 100644 apps/client/app/theme/Box.mdx delete mode 100644 apps/client/app/theme/Card.mdx create mode 100644 apps/client/app/theme/border.tsx create mode 100644 apps/client/app/theme/rounded.tsx rename apps/client/app/theme/{card.ts => shadow.tsx} (76%) diff --git a/apps/client/app/routes/tokens.tsx b/apps/client/app/routes/tokens.tsx index 331cd56..b9c0ca8 100644 --- a/apps/client/app/routes/tokens.tsx +++ b/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; diff --git a/apps/client/app/theme/Box.mdx b/apps/client/app/theme/Box.mdx new file mode 100644 index 0000000..90094c9 --- /dev/null +++ b/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"; + + + +# Box + +## Rounded + Shadow + Border + +```ts +const Card = styled.div` + ${border.default} + ${shadow.default} + ${rounded.default} +`; +``` + +export const Card1 = styled.div` +${border.default} +${shadow.default} +${rounded.default} + +width: 300px; +height: 100px; +`; + + + +## Shadow + Border + +```ts +const Card = styled.div` + ${border.default} + ${shadow.default} +`; +``` + +export const Card2 = styled.div` +${border.default} +${shadow.default} + +width: 300px; +height: 100px; +`; + + + +## Border + Rounded + +```ts +const Card = styled.div` + ${border.default} + ${rounded.default} +`; +``` + +export const Card3 = styled.div` +${border.default} +${rounded.default} + +width: 300px; +height: 100px; +`; + + + +## Border + +```ts +const Card = styled.div` + ${border.default} +`; +``` + +export const Card4 = styled.div` +${border.default} + +width: 300px; +height: 100px; +`; + + diff --git a/apps/client/app/theme/Card.mdx b/apps/client/app/theme/Card.mdx deleted file mode 100644 index 0673a30..0000000 --- a/apps/client/app/theme/Card.mdx +++ /dev/null @@ -1,18 +0,0 @@ -import { Meta, ColorPalette, ColorItem } from "@storybook/blocks"; -import card from "./card"; -import styled from "@emotion/styled"; - - - -# Card - -border と box-shadow を指定します - -export const Card = styled.div` - ${card.default} - -width: 300px; -height: 100px; -`; - - diff --git a/apps/client/app/theme/border.tsx b/apps/client/app/theme/border.tsx new file mode 100644 index 0000000..53e75a7 --- /dev/null +++ b/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; diff --git a/apps/client/app/theme/index.tsx b/apps/client/app/theme/index.tsx index fa4fbb2..701f95e 100644 --- a/apps/client/app/theme/index.tsx +++ b/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"; diff --git a/apps/client/app/theme/rounded.tsx b/apps/client/app/theme/rounded.tsx new file mode 100644 index 0000000..5fe0a7e --- /dev/null +++ b/apps/client/app/theme/rounded.tsx @@ -0,0 +1,5 @@ +export default { + default: { + borderRadius: "3px", + }, +} as const satisfies Record; diff --git a/apps/client/app/theme/card.ts b/apps/client/app/theme/shadow.tsx similarity index 76% rename from apps/client/app/theme/card.ts rename to apps/client/app/theme/shadow.tsx index 33bc9c2..fd97ec0 100644 --- a/apps/client/app/theme/card.ts +++ b/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; From c0791e24b0000ff7459f49405489da2537ec98aa Mon Sep 17 00:00:00 2001 From: SSlime-s <62363188+SSlime-s@users.noreply.github.com> Date: Fri, 24 May 2024 20:00:23 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Card=20->=20Box=20?= =?UTF-8?q?=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/app/theme/Box.mdx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/client/app/theme/Box.mdx b/apps/client/app/theme/Box.mdx index 90094c9..32caeb1 100644 --- a/apps/client/app/theme/Box.mdx +++ b/apps/client/app/theme/Box.mdx @@ -9,14 +9,14 @@ import styled from "@emotion/styled"; ## Rounded + Shadow + Border ```ts -const Card = styled.div` +const Box = styled.div` ${border.default} ${shadow.default} ${rounded.default} `; ``` -export const Card1 = styled.div` +export const Box1 = styled.div` ${border.default} ${shadow.default} ${rounded.default} @@ -25,18 +25,18 @@ width: 300px; height: 100px; `; - + ## Shadow + Border ```ts -const Card = styled.div` +const Box = styled.div` ${border.default} ${shadow.default} `; ``` -export const Card2 = styled.div` +export const Box2 = styled.div` ${border.default} ${shadow.default} @@ -44,18 +44,18 @@ width: 300px; height: 100px; `; - + ## Border + Rounded ```ts -const Card = styled.div` +const Box = styled.div` ${border.default} ${rounded.default} `; ``` -export const Card3 = styled.div` +export const Box3 = styled.div` ${border.default} ${rounded.default} @@ -63,21 +63,21 @@ width: 300px; height: 100px; `; - + ## Border ```ts -const Card = styled.div` +const Box = styled.div` ${border.default} `; ``` -export const Card4 = styled.div` +export const Box4 = styled.div` ${border.default} width: 300px; height: 100px; `; - +