From 60beff96a3d0aaf38caddc53bd9656aeac2e6a06 Mon Sep 17 00:00:00 2001 From: Jungwoo LEE Date: Tue, 22 Oct 2024 23:56:16 +0900 Subject: [PATCH] =?UTF-8?q?feat(mobile):=20GlobalStyle=EC=9D=84=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=95=A9=EB=8B=88=EB=8B=A4.=20(#39)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/wild-icons-punch.md | 5 + apps/mobile/app/globals.css | 39 ------ apps/mobile/app/layout.tsx | 13 +- apps/mobile/app/page.module.css | 188 ---------------------------- apps/mobile/app/page.tsx | 62 +-------- apps/mobile/styles/globals.css | 186 +++++++++++++++++++++++++++ packages/design-token/index.ts | 7 +- packages/design-token/src/global.ts | 17 --- 8 files changed, 197 insertions(+), 320 deletions(-) create mode 100644 .changeset/wild-icons-punch.md delete mode 100644 packages/design-token/src/global.ts diff --git a/.changeset/wild-icons-punch.md b/.changeset/wild-icons-punch.md new file mode 100644 index 0000000..b0b0e80 --- /dev/null +++ b/.changeset/wild-icons-punch.md @@ -0,0 +1,5 @@ +--- +"@setaday/design-token": minor +--- + +Remove global.ts diff --git a/apps/mobile/app/globals.css b/apps/mobile/app/globals.css index 9147fcd..e69de29 100644 --- a/apps/mobile/app/globals.css +++ b/apps/mobile/app/globals.css @@ -1,39 +0,0 @@ -:root { - --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - -body { - color: var(--foreground); - background: var(--background); -} - -* { - box-sizing: border-box; - padding: 0; - margin: 0; -} - -a { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} diff --git a/apps/mobile/app/layout.tsx b/apps/mobile/app/layout.tsx index f38c494..96625e9 100644 --- a/apps/mobile/app/layout.tsx +++ b/apps/mobile/app/layout.tsx @@ -2,15 +2,6 @@ import "./globals.css"; import type { Metadata } from "next"; import localFont from "next/font/local"; -const geistSans = localFont({ - src: "./fonts/GeistVF.woff", - variable: "--font-geist-sans", -}); -const geistMono = localFont({ - src: "./fonts/GeistMonoVF.woff", - variable: "--font-geist-mono", -}); - export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", @@ -22,8 +13,8 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - {children} + + {children} ); } diff --git a/apps/mobile/app/page.module.css b/apps/mobile/app/page.module.css index 3630662..e69de29 100644 --- a/apps/mobile/app/page.module.css +++ b/apps/mobile/app/page.module.css @@ -1,188 +0,0 @@ -.page { - --gray-rgb: 0, 0, 0; - --gray-alpha-200: rgba(var(--gray-rgb), 0.08); - --gray-alpha-100: rgba(var(--gray-rgb), 0.05); - - --button-primary-hover: #383838; - --button-secondary-hover: #f2f2f2; - - display: grid; - grid-template-rows: 20px 1fr 20px; - align-items: center; - justify-items: center; - min-height: 100svh; - padding: 80px; - gap: 64px; - font-synthesis: none; -} - -@media (prefers-color-scheme: dark) { - .page { - --gray-rgb: 255, 255, 255; - --gray-alpha-200: rgba(var(--gray-rgb), 0.145); - --gray-alpha-100: rgba(var(--gray-rgb), 0.06); - - --button-primary-hover: #ccc; - --button-secondary-hover: #1a1a1a; - } -} - -.main { - display: flex; - flex-direction: column; - gap: 32px; - grid-row-start: 2; -} - -.main ol { - font-family: var(--font-geist-mono); - padding-left: 0; - margin: 0; - font-size: 14px; - line-height: 24px; - letter-spacing: -0.01em; - list-style-position: inside; -} - -.main li:not(:last-of-type) { - margin-bottom: 8px; -} - -.main code { - font-family: inherit; - background: var(--gray-alpha-100); - padding: 2px 4px; - border-radius: 4px; - font-weight: 600; -} - -.ctas { - display: flex; - gap: 16px; -} - -.ctas a { - appearance: none; - border-radius: 128px; - height: 48px; - padding: 0 20px; - border: none; - font-family: var(--font-geist-sans); - border: 1px solid transparent; - transition: background 0.2s, color 0.2s, border-color 0.2s; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - line-height: 20px; - font-weight: 500; -} - -a.primary { - background: var(--foreground); - color: var(--background); - gap: 8px; -} - -a.secondary { - border-color: var(--gray-alpha-200); - min-width: 180px; -} - -button.secondary { - appearance: none; - border-radius: 128px; - height: 48px; - padding: 0 20px; - border: none; - font-family: var(--font-geist-sans); - border: 1px solid transparent; - transition: background 0.2s, color 0.2s, border-color 0.2s; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - line-height: 20px; - font-weight: 500; - background: transparent; - border-color: var(--gray-alpha-200); - min-width: 180px; -} - -.footer { - font-family: var(--font-geist-sans); - grid-row-start: 3; - display: flex; - gap: 24px; -} - -.footer a { - display: flex; - align-items: center; - gap: 8px; -} - -.footer img { - flex-shrink: 0; -} - -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - a.primary:hover { - background: var(--button-primary-hover); - border-color: transparent; - } - - a.secondary:hover { - background: var(--button-secondary-hover); - border-color: transparent; - } - - .footer a:hover { - text-decoration: underline; - text-underline-offset: 4px; - } -} - -@media (max-width: 600px) { - .page { - padding: 32px; - padding-bottom: 80px; - } - - .main { - align-items: center; - } - - .main ol { - text-align: center; - } - - .ctas { - flex-direction: column; - } - - .ctas a { - font-size: 14px; - height: 40px; - padding: 0 16px; - } - - a.secondary { - min-width: auto; - } - - .footer { - flex-wrap: wrap; - align-items: center; - justify-content: center; - } -} - -@media (prefers-color-scheme: dark) { - .logo { - filter: invert(); - } -} diff --git a/apps/mobile/app/page.tsx b/apps/mobile/app/page.tsx index 2054e4d..71d0ff3 100644 --- a/apps/mobile/app/page.tsx +++ b/apps/mobile/app/page.tsx @@ -1,65 +1,5 @@ import "../styles/globals.css"; -import styles from "./page.module.css"; -import Image from "next/image"; export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing app/page.tsx -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
- ); + return
dd
; } diff --git a/apps/mobile/styles/globals.css b/apps/mobile/styles/globals.css index b5c61c9..4fd0551 100644 --- a/apps/mobile/styles/globals.css +++ b/apps/mobile/styles/globals.css @@ -1,3 +1,189 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + /* Reset CSS */ + 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, + main, + menu, + nav, + output, + ruby, + section, + summary, + time, + mark, + audio, + video { + @apply m-0 border-0 p-0 align-baseline; + font-size: 100%; + } + + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + main, + menu, + nav, + section { + @apply block; + } + + *[hidden] { + @apply hidden; + } + + body { + @apply relative antialiased; + overscroll-behavior: none; + line-height: 1; + touch-action: manipulation; + } + + menu, + ol, + ul { + @apply list-none; + } + + blockquote, + q { + quotes: none; + } + + blockquote::before, + blockquote::after, + q::before, + q::after { + content: ""; + content: none; + } + + table { + @apply border-collapse border-spacing-0; + } + + #root, + body, + html { + @apply m-0 mx-auto min-h-[100dvh] max-w-[43rem] bg-[#f5f5f5]; + -ms-overflow-style: none; + scrollbar-width: none; + } + + #root::-webkit-scrollbar { + @apply hidden; + } + + * { + @apply box-border; + } + + html { + @apply flex select-none justify-center scroll-smooth text-[62.5%]; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgb(0 0 0 / 0%); + } + + ul, + li { + @apply list-none pl-0; + } + + a { + @apply text-inherit no-underline; + } + + input, + button { + @apply border-0 bg-transparent outline-none; + } + + button { + @apply cursor-pointer p-0; + } + + input { + appearance: none; + } + + input:focus { + @apply outline-none; + } +} diff --git a/packages/design-token/index.ts b/packages/design-token/index.ts index 4fc9e42..333eee4 100644 --- a/packages/design-token/index.ts +++ b/packages/design-token/index.ts @@ -1,5 +1,4 @@ -import color from './src/color'; -import font from './src/font'; -import globalStyle from './src/global'; +import color from "./src/color"; +import font from "./src/font"; -export { color, font, globalStyle }; \ No newline at end of file +export { color, font }; diff --git a/packages/design-token/src/global.ts b/packages/design-token/src/global.ts deleted file mode 100644 index e4c7bd6..0000000 --- a/packages/design-token/src/global.ts +++ /dev/null @@ -1,17 +0,0 @@ -const globalStyle = { - html: { - fontSize: "62.5%", - boxSizing: "border-box", - }, - "*, *:before, *:after": { - boxSizing: "inherit", - }, - body: { - margin: 0, - padding: 0, - WebkitFontSmoothing: "antialiased", - MozOsxFontSmoothing: "grayscale", - }, -}; - -export default globalStyle;