diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 00000000..cf6965d0 --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,45 @@ +name: Storybook Chromatic Deployment + +on: + pull_request: + branches: [main] + +jobs: + storybook-preview: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: "22" + cache: "pnpm" + + - name: Install dependencies + run: pnpm install + + - name: Publish to Chromatic + id: chromatic + uses: chromaui/action@latest + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.GITHUB_TOKEN }} + onlyChanged: true + autoAcceptChanges: true + + - name: Comment PR + if: always() + uses: thollander/actions-comment-pull-request@v3 + with: + comment-tag: chromatic-preview-${{ github.event.number }} + message: | + 🎨 **Storybook Preview**: ${{ steps.chromatic.outputs.storybookUrl }} + 🔗 **Chromatic Build**: ${{ steps.chromatic.outputs.buildUrl }} diff --git a/.storybook/main.ts b/.storybook/main.ts index 3cd1d793..1375e6c5 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,4 +1,6 @@ import type { StorybookConfig } from "@storybook/experimental-nextjs-vite"; +import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"; +import tsconfigPaths from "vite-tsconfig-paths"; const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], @@ -8,5 +10,13 @@ const config: StorybookConfig = { options: {}, }, staticDirs: ["../public"], + viteFinal: async config => { + config.plugins = [ + ...(config.plugins || []), + tsconfigPaths(), + vanillaExtractPlugin(), + ]; + return config; + }, }; export default config; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index cfa30243..1aa6532f 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,14 +1,16 @@ -import type { Preview } from '@storybook/react' +import "@/styles/reset.css.ts"; + +import type { Preview } from "@storybook/react"; const preview: Preview = { parameters: { controls: { matchers: { - color: /(background|color)$/i, - date: /Date$/i, + color: /(background|color)$/i, + date: /Date$/i, }, }, }, }; -export default preview; \ No newline at end of file +export default preview; diff --git a/package.json b/package.json index 82254184..ce673070 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@tanstack/react-query": "^5.77.0", "@tanstack/react-query-devtools": "^5.77.0", "@vanilla-extract/css": "^1.17.2", + "@vanilla-extract/recipes": "^0.5.7", "next": "15.3.2", "react": "^19.0.0", "react-dom": "^19.0.0" @@ -42,10 +43,12 @@ "@types/react": "^19", "@types/react-dom": "^19", "@vanilla-extract/next-plugin": "^2.4.11", + "@vanilla-extract/vite-plugin": "^5.0.7", "@vitejs/plugin-react": "^4.5.0", "@vitest/browser": "^3.1.4", "@vitest/coverage-v8": "^3.1.4", "@vitest/eslint-plugin": "^1.2.1", + "chromatic": "^13.0.1", "commitizen": "^4.3.1", "eslint": "^9", "eslint-config-next": "15.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e569509..e7a453a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@vanilla-extract/css': specifier: ^1.17.2 version: 1.17.2 + '@vanilla-extract/recipes': + specifier: ^0.5.7 + version: 0.5.7(@vanilla-extract/css@1.17.2) next: specifier: 15.3.2 version: 15.3.2(@babel/core@7.27.1)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -81,6 +84,9 @@ importers: '@vanilla-extract/next-plugin': specifier: ^2.4.11 version: 2.4.11(next@15.3.2(@babel/core@7.27.1)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(webpack@5.99.9(esbuild@0.25.4)) + '@vanilla-extract/vite-plugin': + specifier: ^5.0.7 + version: 5.0.7(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0))(yaml@2.8.0) '@vitejs/plugin-react': specifier: ^4.5.0 version: 4.5.0(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0)) @@ -93,6 +99,9 @@ importers: '@vitest/eslint-plugin': specifier: ^1.2.1 version: 1.2.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)(vitest@3.1.4(@types/node@20.17.50)(@vitest/browser@3.1.4)(jiti@2.4.2)(jsdom@26.1.0)(msw@2.8.4(@types/node@20.17.50)(typescript@5.8.3))(terser@5.39.2)(yaml@2.8.0)) + chromatic: + specifier: ^13.0.1 + version: 13.0.1 commitizen: specifier: ^4.3.1 version: 4.3.1(@types/node@20.17.50)(typescript@5.8.3) @@ -1645,12 +1654,24 @@ packages: '@vanilla-extract/babel-plugin-debug-ids@1.2.0': resolution: {integrity: sha512-z5nx2QBnOhvmlmBKeRX5sPVLz437wV30u+GJL+Hzj1rGiJYVNvgIIlzUpRNjVQ0MgAgiQIqIUbqPnmMc6HmDlQ==} + '@vanilla-extract/babel-plugin-debug-ids@1.2.2': + resolution: {integrity: sha512-MeDWGICAF9zA/OZLOKwhoRlsUW+fiMwnfuOAqFVohL31Agj7Q/RBWAYweqjHLgFBCsdnr6XIfwjJnmb2znEWxw==} + + '@vanilla-extract/compiler@0.2.3': + resolution: {integrity: sha512-SFEDLbvd5rhpjhrLp9BtvvVNHNxWupiUht/yrsHQ7xfkpEn4xg45gbfma7aX9fsOpi82ebqFmowHd/g6jHDQnA==} + '@vanilla-extract/css@1.17.2': resolution: {integrity: sha512-gowpfR1zJSplDO7NkGf2Vnw9v9eG1P3aUlQpxa1pOjcknbgWw7UPzIboB6vGJZmoUvDZRFmipss3/Q+RRfhloQ==} + '@vanilla-extract/css@1.17.4': + resolution: {integrity: sha512-m3g9nQDWPtL+sTFdtCGRMI1Vrp86Ay4PBYq1Bo7Bnchj5ElNtAJpOqD+zg+apthVA4fB7oVpMWNjwpa6ElDWFQ==} + '@vanilla-extract/integration@8.0.2': resolution: {integrity: sha512-w9OvWwsYkqyuyHf9NLnOJ8ap0FGTy2pAeWftgxAEkKE3tF1aYeyEtYRHKxfVH6JRgi8JIeQqELHGMSwz+BxwiA==} + '@vanilla-extract/integration@8.0.4': + resolution: {integrity: sha512-cmOb7tR+g3ulKvFtSbmdw3YUyIS1d7MQqN+FcbwNhdieyno5xzUyfDCMjeWJhmCSMvZ6WlinkrOkgs6SHB+FRg==} + '@vanilla-extract/next-plugin@2.4.11': resolution: {integrity: sha512-xfrwHTZKujMPGvo8SK8jKdQCkZtGo05mLhVnY4nPy0BnSiBnY0FoCQ4gSwvgukN7FUqtLlNd4A3lzWEitZIOtw==} peerDependencies: @@ -1659,6 +1680,19 @@ packages: '@vanilla-extract/private@1.0.7': resolution: {integrity: sha512-v9Yb0bZ5H5Kr8ciwPXyEToOFD7J/fKKH93BYP7NCSZg02VYsA/pNFrLeVDJM2OO/vsygduPKuiEI6ORGQ4IcBw==} + '@vanilla-extract/private@1.0.9': + resolution: {integrity: sha512-gT2jbfZuaaCLrAxwXbRgIhGhcXbRZCG3v4TTUnjw0EJ7ArdBRxkq4msNJkbuRkCgfIK5ATmprB5t9ljvLeFDEA==} + + '@vanilla-extract/recipes@0.5.7': + resolution: {integrity: sha512-Fvr+htdyb6LVUu+PhH61UFPhwkjgDEk8L4Zq9oIdte42sntpKrgFy90MyTRtGwjVALmrJ0pwRUVr8UoByYeW8A==} + peerDependencies: + '@vanilla-extract/css': ^1.0.0 + + '@vanilla-extract/vite-plugin@5.0.7': + resolution: {integrity: sha512-UyUma9HEl2qHl0CFlTwPKU7SkyuOwNQOgLT1yMShjqiQqg8k+9oma2Z5GigGtEUhUDizCAxeR4b4bP9KAviDdQ==} + peerDependencies: + vite: ^5.0.0 || ^6.0.0 + '@vanilla-extract/webpack-plugin@2.3.19': resolution: {integrity: sha512-GDphiVib3EMeNkMNyzc7zOs35lBs1GzlALi93dawl/V4e6CsCsGKBNrPzGpDSFvzf4Vq51MNuUkyzwAdfbayPQ==} peerDependencies: @@ -2047,6 +2081,18 @@ packages: resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==} engines: {node: '>= 16'} + chromatic@13.0.1: + resolution: {integrity: sha512-vX0Rs/pAeFAnGuQiVrA4h0XD36MYbTUp9Mlm1jFqXo3Cejd2BdBY1CA+vd6CkeO5CRSc6TRWmCz0zQAsE1q3Hw==} + hasBin: true + peerDependencies: + '@chromatic-com/cypress': ^0.*.* || ^1.0.0 + '@chromatic-com/playwright': ^0.*.* || ^1.0.0 + peerDependenciesMeta: + '@chromatic-com/cypress': + optional: true + '@chromatic-com/playwright': + optional: true + chrome-trace-event@1.0.4: resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} engines: {node: '>=6.0'} @@ -4328,6 +4374,11 @@ packages: engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} hasBin: true + vite-node@3.2.4: + resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + vite-plugin-storybook-nextjs@1.1.5: resolution: {integrity: sha512-doFAXLvfEtIgMbDA+0VzyanoWoAUAwMLMfTpFnv3rxaN/tGHtWAwyhK73OA3UJzyXrp6rDPTqbjWUYJ6noxNww==} peerDependencies: @@ -6001,6 +6052,33 @@ snapshots: transitivePeerDependencies: - supports-color + '@vanilla-extract/babel-plugin-debug-ids@1.2.2': + dependencies: + '@babel/core': 7.27.1 + transitivePeerDependencies: + - supports-color + + '@vanilla-extract/compiler@0.2.3(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0)': + dependencies: + '@vanilla-extract/css': 1.17.4 + '@vanilla-extract/integration': 8.0.4 + vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + vite-node: 3.2.4(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - jiti + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + '@vanilla-extract/css@1.17.2': dependencies: '@emotion/hash': 0.9.2 @@ -6018,6 +6096,23 @@ snapshots: transitivePeerDependencies: - babel-plugin-macros + '@vanilla-extract/css@1.17.4': + dependencies: + '@emotion/hash': 0.9.2 + '@vanilla-extract/private': 1.0.9 + css-what: 6.1.0 + cssesc: 3.0.0 + csstype: 3.1.3 + dedent: 1.6.0 + deep-object-diff: 1.1.9 + deepmerge: 4.3.1 + lru-cache: 10.4.3 + media-query-parser: 2.0.2 + modern-ahocorasick: 1.1.0 + picocolors: 1.1.1 + transitivePeerDependencies: + - babel-plugin-macros + '@vanilla-extract/integration@8.0.2': dependencies: '@babel/core': 7.27.1 @@ -6034,6 +6129,22 @@ snapshots: - babel-plugin-macros - supports-color + '@vanilla-extract/integration@8.0.4': + dependencies: + '@babel/core': 7.27.1 + '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.27.1) + '@vanilla-extract/babel-plugin-debug-ids': 1.2.2 + '@vanilla-extract/css': 1.17.4 + dedent: 1.6.0 + esbuild: 0.25.4 + eval: 0.1.8 + find-up: 5.0.0 + javascript-stringify: 2.1.0 + mlly: 1.7.4 + transitivePeerDependencies: + - babel-plugin-macros + - supports-color + '@vanilla-extract/next-plugin@2.4.11(next@15.3.2(@babel/core@7.27.1)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(webpack@5.99.9(esbuild@0.25.4))': dependencies: '@vanilla-extract/webpack-plugin': 2.3.19(webpack@5.99.9(esbuild@0.25.4)) @@ -6045,6 +6156,32 @@ snapshots: '@vanilla-extract/private@1.0.7': {} + '@vanilla-extract/private@1.0.9': {} + + '@vanilla-extract/recipes@0.5.7(@vanilla-extract/css@1.17.2)': + dependencies: + '@vanilla-extract/css': 1.17.2 + + '@vanilla-extract/vite-plugin@5.0.7(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0))(yaml@2.8.0)': + dependencies: + '@vanilla-extract/compiler': 0.2.3(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + '@vanilla-extract/integration': 8.0.4 + vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - jiti + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + '@vanilla-extract/webpack-plugin@2.3.19(webpack@5.99.9(esbuild@0.25.4))': dependencies: '@vanilla-extract/integration': 8.0.2 @@ -6529,6 +6666,8 @@ snapshots: check-error@2.1.1: {} + chromatic@13.0.1: {} + chrome-trace-event@1.0.4: {} cli-cursor@3.1.0: @@ -9095,6 +9234,27 @@ snapshots: - tsx - yaml + vite-node@3.2.4(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0): + dependencies: + cac: 6.7.14 + debug: 4.4.1 + es-module-lexer: 1.7.0 + pathe: 2.0.3 + vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0) + transitivePeerDependencies: + - '@types/node' + - jiti + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + vite-plugin-storybook-nextjs@1.1.5(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.3)))(next@15.3.2(@babel/core@7.27.1)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(storybook@8.6.14(prettier@3.5.3))(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(terser@5.39.2)(yaml@2.8.0)): dependencies: '@next/env': 15.3.2 diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5bdd0b76..f0ac02ed 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,10 +1,12 @@ +import "@/styles/reset.css"; + import type { Metadata } from "next"; import { RegisterServiceWorkerClient } from "@/lib/pwa"; import { MSWProvider, QueryProvider } from "@/providers"; export const metadata: Metadata = { - title: "Timeat", + title: "Eat-da", description: "Generated by create next app", }; diff --git a/src/components/ui/Button/Button.css.ts b/src/components/ui/Button/Button.css.ts new file mode 100644 index 00000000..7e5ffdc5 --- /dev/null +++ b/src/components/ui/Button/Button.css.ts @@ -0,0 +1,74 @@ +import { recipe } from "@vanilla-extract/recipes"; + +import { colors, radius } from "@/styles"; + +export const button = recipe({ + base: { + display: "flex", + alignItems: "center", + justifyContent: "center", + fontWeight: 600, + transition: "background-color 0.2s ease", + whiteSpace: "nowrap", + + selectors: { + "&:disabled": { + backgroundColor: colors.coolNeutral[96], + color: colors.neutral[70], + cursor: "not-allowed", + }, + "&:disabled:hover": { + backgroundColor: colors.coolNeutral[96], + }, + }, + }, + variants: { + variant: { + primary: { + color: colors.common[100], + backgroundColor: colors.redOrange[50], + ":hover": { backgroundColor: colors.redOrange[40] }, + }, + dark: { + color: colors.common[100], + backgroundColor: colors.neutral[10], + ":hover": { backgroundColor: colors.neutral[30] }, + }, + assistive: { + color: colors.neutral[10], + backgroundColor: colors.coolNeutral[99], + ":hover": { backgroundColor: colors.coolNeutral[97] }, + }, + }, + size: { + small: { + width: "63px", + height: "32px", + padding: "9px 20px", + fontSize: "13px", + borderRadius: radius[80], + }, + medium: { + padding: "9px 20px", + fontSize: "15px", + borderRadius: radius[100], + }, + large: { + padding: "12px 28px", + fontSize: "16px", + borderRadius: radius[120], + }, + fullWidth: { + width: "100%", + height: "52px", + padding: "12px 28px", + fontSize: "16px", + borderRadius: radius[160], + }, + }, + }, + defaultVariants: { + variant: "primary", + size: "medium", + }, +}); diff --git a/src/components/ui/Button/Button.stories.tsx b/src/components/ui/Button/Button.stories.tsx new file mode 100644 index 00000000..2a772e76 --- /dev/null +++ b/src/components/ui/Button/Button.stories.tsx @@ -0,0 +1,65 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Button } from "./Button"; + +const meta: Meta = { + title: "Components/Button", + component: Button, + tags: ["autodocs"], + args: { + children: "텍스트", + }, + argTypes: { + children: { + control: "text", + }, + variant: { + control: "select", + options: ["primary", "dark", "assistive", "disabled"], + }, + size: { + control: "select", + options: ["small", "medium", "large", "fullWidth"], + }, + disabled: { + control: "boolean", + }, + onClick: { action: "clicked" }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + variant: "primary", + size: "medium", + }, +}; + +export const Dark: Story = { + args: { + variant: "dark", + size: "medium", + }, +}; + +export const Assistive: Story = { + args: { + variant: "assistive", + size: "medium", + }, +}; + +export const Sizes: Story = { + render: args => ( +
+
+ ), +}; diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx new file mode 100644 index 00000000..be633a42 --- /dev/null +++ b/src/components/ui/Button/Button.tsx @@ -0,0 +1,28 @@ +import type { ComponentProps } from "react"; + +import { button } from "./Button.css"; + +type ButtonVariant = "primary" | "dark" | "assistive"; +type ButtonSize = "small" | "medium" | "large" | "fullWidth"; + +export type ButtonProps = { + variant?: ButtonVariant; + size?: ButtonSize; + className?: string; +} & ComponentProps<"button">; + +export const Button = ({ + children, + variant = "primary", + size = "medium", + className, + ...props +}: ButtonProps) => { + const variantClass = button({ variant, size }); + + return ( + + ); +}; diff --git a/src/components/ui/Button/index.ts b/src/components/ui/Button/index.ts new file mode 100644 index 00000000..0064dee8 --- /dev/null +++ b/src/components/ui/Button/index.ts @@ -0,0 +1 @@ +export { Button } from "./Button"; diff --git a/src/styles/colors.css.ts b/src/styles/colors.css.ts new file mode 100644 index 00000000..1416b894 --- /dev/null +++ b/src/styles/colors.css.ts @@ -0,0 +1,88 @@ +import { createGlobalTheme } from "@vanilla-extract/css"; + +export const colors = createGlobalTheme(":root", { + common: { + 100: "#FFFFFF", + 0: "#000000", + }, + neutral: { + 99: "#F7F7F7", + 95: "#DCDCDC", + 90: "#C4C4C4", + 80: "#B0B0B0", + 70: "#9B9B9B", + 60: "#8A8A8A", + 50: "#737373", + 40: "#5C5C5C", + 30: "#474747", + 20: "#2A2A2A", + 10: "#171717", + 5: "#0F0F0F", + }, + coolNeutral: { + 99: "#F7F7F8", + 98: "#F4F4F5", + 97: "#EAEBEC", + 96: "#E1E2E4", + 95: "#DBDCDF", + 90: "#C2C4C8", + 80: "#AEB0B6", + 70: "#989BA2", + 60: "#878A93", + 50: "#70737C", + 40: "#5A5C63", + 30: "#46474C", + 20: "#292A2D", + 10: "#171719", + 5: "#0F0F10", + }, + red: { + 95: "#FEECEC", + 90: "#FED5D5", + 80: "#FFB5B5", + 70: "#FF8C8C", + 60: "#FF6363", + 50: "#FF4242", + 40: "#E52222", + 30: "#B00C0C", + 20: "#730303", + 10: "#3B0101", + }, + green: { + 95: "#D9FFE6", + 90: "#ACFCC7", + 80: "#7DF5A5", + 70: "#49E57D", + 60: "#1ED45A", + 50: "#00BF40", + 40: "#009632", + 30: "#006E25", + 20: "#004517", + 10: "#00240C", + }, + orange: { + 95: "#FEF4E6", + 90: "#FEE6C6", + 80: "#FFD49C", + 70: "#FFC06E", + 60: "#FFA938", + 50: "#FF9200", + 40: "#D47800", + 30: "#9C5800", + 20: "#663A00", + 10: "#361E00", + }, + redOrange: { + 95: "#FFF9F4", + 90: "#FFF4EA", + 80: "#FEDEC1", + 70: "#FFBD84", + 60: "#FE9F4C", + 50: "#FF6F0F", + 45: "#F47200", + 40: "#E56B00", + 30: "#B35809", + 20: "#89480F", + 10: "#633711", + }, +}); diff --git a/src/styles/index.ts b/src/styles/index.ts new file mode 100644 index 00000000..cb02efe5 --- /dev/null +++ b/src/styles/index.ts @@ -0,0 +1,2 @@ +export { colors } from "./colors.css"; +export { radius } from "./radius.css"; diff --git a/src/styles/layers.css.ts b/src/styles/layers.css.ts new file mode 100644 index 00000000..1dd54fb4 --- /dev/null +++ b/src/styles/layers.css.ts @@ -0,0 +1,3 @@ +import { globalLayer } from "@vanilla-extract/css"; + +export const reset = globalLayer("reset"); diff --git a/src/styles/radius.css.ts b/src/styles/radius.css.ts new file mode 100644 index 00000000..022e0638 --- /dev/null +++ b/src/styles/radius.css.ts @@ -0,0 +1,12 @@ +import { createGlobalTheme } from "@vanilla-extract/css"; + +export const radius = createGlobalTheme(":root", { + 20: "2px", + 40: "4px", + 60: "6px", + 80: "8px", + 100: "10px", + 120: "12px", + 160: "16px", + circle: "999px", +}); diff --git a/src/styles/reset.css.ts b/src/styles/reset.css.ts new file mode 100644 index 00000000..899f309d --- /dev/null +++ b/src/styles/reset.css.ts @@ -0,0 +1,126 @@ +import { globalStyle } from "@vanilla-extract/css"; + +import { reset } from "./layers.css"; + +globalStyle( + "html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video", + { + "@layer": { + [reset]: { + margin: 0, + padding: 0, + border: 0, + font: "inherit", + verticalAlign: "baseline", + }, + }, + } +); + +globalStyle( + "article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section", + { + "@layer": { + [reset]: { + display: "block", + }, + }, + } +); + +globalStyle("body", { + "@layer": { + [reset]: { + lineHeight: 1, + }, + }, +}); + +globalStyle("ol, ul", { + "@layer": { + [reset]: { + listStyle: "none", + }, + }, +}); + +globalStyle("button", { + "@layer": { + [reset]: { + padding: 0, + border: "none", + background: "none", + outline: "none", + boxShadow: "none", + cursor: "pointer", + }, + }, +}); + +globalStyle("a", { + "@layer": { + [reset]: { + textDecoration: "none", + color: "inherit", + }, + }, +}); + +globalStyle("textarea", { + "@layer": { + [reset]: { + padding: 0, + border: "none", + height: "auto", + resize: "none", + }, + }, +}); + +globalStyle("html", { + "@layer": { + [reset]: { + MozTextSizeAdjust: "none", + WebkitTextSizeAdjust: "none", + textSizeAdjust: "none", + }, + }, +}); + +globalStyle("img", { + "@layer": { + [reset]: { + maxInlineSize: "100%", + maxBlockSize: "100%", + }, + }, +}); + +globalStyle("*", { + "@layer": { + [reset]: { + boxSizing: "border-box", + fontFamily: "var(--font-family)", + fontWeight: 500, + WebkitFontSmoothing: "antialiased", + MozOsxFontSmoothing: "grayscale", + }, + }, +}); + +globalStyle("main", { + "@layer": { + [reset]: { + position: "relative", + width: "100%", + }, + }, +}); + +globalStyle("input:disabled", { + "@layer": { + [reset]: { + cursor: "not-allowed", + }, + }, +});