@mzc-fe/design-system 0.0.1 → 0.0.2-rc.0

package/src/foundations/palette.css

@@ -1,249 +0,0 @@
-:root {
-  /**
-   * 1. Static
-   */
-  --white-100: #ffffff;
-  --black-100: #000000;
-
-  /**
-   * 2. Neutral
-   */
-  --neutral-0: #fafafa;
-  --neutral-5: #f2f2f2;
-  --neutral-10: #e5e5e5;
-  --neutral-20: #d4d4d4;
-  --neutral-30: #b5b5b5;
-  --neutral-40: #989898;
-  --neutral-50: #737373;
-  --neutral-60: #525252;
-  --neutral-70: #404040;
-  --neutral-80: #282828;
-  --neutral-90: #171717;
-  --neutral-95: #0a0a0a;
-
-  /**
-   * 3. Cool Neutral
-   */
-  --cool-neutral-0: #f8f9fa;
-  --cool-neutral-5: #f1f3f5;
-  --cool-neutral-10: #e5e7ed;
-  --cool-neutral-20: #d3d7df;
-  --cool-neutral-30: #b9bdc6;
-  --cool-neutral-40: #9ea1aa;
-  --cool-neutral-50: #7e818b;
-  --cool-neutral-60: #5e626e;
-  --cool-neutral-70: #40424a;
-  --cool-neutral-80: #2d2f34;
-  --cool-neutral-90: #17181c;
-  --cool-neutral-95: #0c0a09;
-
-  /**
-   * 4. Navy
-   */
-  --navy-5: #f1f5f9;
-  --navy-10: #e2e8f0;
-  --navy-20: #d0d9e5;
-  --navy-30: #b6c2d1;
-  --navy-40: #94a3b8;
-  --navy-50: #72849e;
-  --navy-60: #51637e;
-  --navy-70: #3d4e66;
-  --navy-80: #2d3c52;
-  --navy-90: #1e293b;
-  --navy-95: #0f172a;
-
-  /**
-   * 5. Blue
-   */
-  --blue-5: #eff6ff;
-  --blue-10: #dbeafe;
-  --blue-20: #bfdbfe;
-  --blue-30: #93c5fd;
-  --blue-40: #60a5fa;
-  --blue-50: #3b82f6;
-  --blue-60: #2563eb;
-  --blue-70: #1d4ed8;
-  --blue-80: #1e40af;
-  --blue-90: #1e3a8a;
-  --blue-95: #172554;
-
-  /**
-   * 6. Red
-   */
-  --red-5: #fef2f2;
-  --red-10: #ffe2e2;
-  --red-20: #fecaca;
-  --red-30: #fca5a5;
-  --red-40: #f87171;
-  --red-50: #ef4444;
-  --red-60: #dc2626;
-  --red-70: #b91c1c;
-  --red-80: #991b1b;
-  --red-90: #7f1d1d;
-  --red-95: #450a0a;
-
-  /**
-   * 7. Orange
-   */
-  --orange-5: #fff7ed;
-  --orange-10: #ffedd5;
-  --orange-20: #fed7aa;
-  --orange-30: #fdba74;
-  --orange-40: #fb923c;
-  --orange-50: #f97316;
-  --orange-60: #ea580c;
-  --orange-70: #c2410c;
-  --orange-80: #9a3412;
-  --orange-90: #7c2d12;
-  --orange-95: #431407;
-
-  /**
-   * 8. Yellow
-   */
-  --yellow-5: #fefce8;
-  --yellow-10: #fef9c3;
-  --yellow-20: #fef08a;
-  --yellow-30: #fde047;
-  --yellow-40: #facc15;
-  --yellow-50: #eab308;
-  --yellow-60: #ca8a04;
-  --yellow-70: #a16207;
-  --yellow-80: #854d0e;
-  --yellow-90: #6c3c10;
-  --yellow-95: #422006;
-
-  /**
-   * 9. Lime
-   */
-  --lime-5: #f7fee7;
-  --lime-10: #ecfccb;
-  --lime-20: #d9f99d;
-  --lime-30: #bef264;
-  --lime-40: #a3e635;
-  --lime-50: #84cc16;
-  --lime-60: #65a30d;
-  --lime-70: #4d7c0f;
-  --lime-80: #3f6212;
-  --lime-90: #314e0f;
-  --lime-95: #1a2e05;
-
-  /**
-   * 10. Green
-   */
-  --green-5: #f0fdf4;
-  --green-10: #dcfce7;
-  --green-20: #bbf7d0;
-  --green-30: #86efac;
-  --green-40: #4ade80;
-  --green-50: #22c55e;
-  --green-60: #16a34a;
-  --green-70: #15803d;
-  --green-80: #166534;
-  --green-90: #104826;
-  --green-95: #052e16;
-
-  /**
-   * 11. Teal
-   */
-  --teal-5: #f0fdfa;
-  --teal-10: #ccfbf1;
-  --teal-20: #99f6e4;
-  --teal-30: #5eead4;
-  --teal-40: #2dd4bf;
-  --teal-50: #14b8a6;
-  --teal-60: #0d9488;
-  --teal-70: #0f766e;
-  --teal-80: #115e59;
-  --teal-90: #104440;
-  --teal-95: #042f2e;
-
-  /**
-   * 12. Cyan
-   */
-  --cyan-5: #ecfeff;
-  --cyan-10: #cffafe;
-  --cyan-20: #a5f3fc;
-  --cyan-30: #67e8f9;
-  --cyan-40: #22d3ee;
-  --cyan-50: #06b6d4;
-  --cyan-60: #0891b2;
-  --cyan-70: #0e7490;
-  --cyan-80: #155e75;
-  --cyan-90: #104154;
-  --cyan-95: #072f3e;
-
-  /**
-   * 13. Sky
-   */
-  --sky-5: #f0f9ff;
-  --sky-10: #e0f2fe;
-  --sky-20: #bae6fd;
-  --sky-30: #7dd3fc;
-  --sky-40: #38bdf8;
-  --sky-50: #0ea5e9;
-  --sky-60: #0284c7;
-  --sky-70: #0369a1;
-  --sky-80: #075985;
-  --sky-90: #0c4465;
-  --sky-95: #082f49;
-
-  /**
-   * 14. Indigo
-   */
-  --indigo-5: #eef2ff;
-  --indigo-10: #e0e7ff;
-  --indigo-20: #c7d2fe;
-  --indigo-30: #a5b4fc;
-  --indigo-40: #818cf8;
-  --indigo-50: #6366f1;
-  --indigo-60: #4f46e5;
-  --indigo-70: #4338ca;
-  --indigo-80: #3730a3;
-  --indigo-90: #2d2888;
-  --indigo-95: #1f1b59;
-
-  /**
-   * 15. Violet
-   */
-  --violet-5: #f5f3ff;
-  --violet-10: #ede9fe;
-  --violet-20: #ddd6fe;
-  --violet-30: #c4b5fd;
-  --violet-40: #a78bfa;
-  --violet-50: #8b5cf6;
-  --violet-60: #7c3aed;
-  --violet-70: #6d28d9;
-  --violet-80: #5b21b6;
-  --violet-90: #4c1d95;
-  --violet-95: #2d0964;
-
-  /**
-   * 16. Purple
-   */
-  --purple-5: #faf5ff;
-  --purple-10: #f9edff;
-  --purple-20: #f2d6ff;
-  --purple-30: #e9baff;
-  --purple-40: #db8cff;
-  --purple-50: #ce64ff;
-  --purple-60: #c042fa;
-  --purple-70: #a633db;
-  --purple-80: #861cb8;
-  --purple-90: #580a7d;
-  --purple-95: #290247;
-
-  /**
-   * 17. Pink
-   */
-  --pink-5: #fdf2f8;
-  --pink-10: #fce7f3;
-  --pink-20: #fbcfe8;
-  --pink-30: #f9a8d4;
-  --pink-40: #f472b6;
-  --pink-50: #ec4899;
-  --pink-60: #db2777;
-  --pink-70: #be185d;
-  --pink-80: #9b144a;
-  --pink-90: #76133b;
-  --pink-95: #3c061b;
-}

package/src/foundations/spacing.css

@@ -1,8 +0,0 @@
-/**
- * Spacing의 기본 단위를 정의합니다.
- * @examples 
- * .p-2 -> padding: 8px;
- */
-@theme inline {
-  --spacing: 4px;
-}

package/src/foundations/typography.css

@@ -1,143 +0,0 @@
-/**
- * Typography 값을 Utility Class로 정의합니다.
- */
-
-@utility font-h1-800 {
-  font-size: calc(var(--spacing) * 9);
-  font-weight: 800;
-}
-
-@utility font-h1-700 {
-  font-size: calc(var(--spacing) * 9);
-  font-weight: 700;
-}
-
-@utility font-h2-800 {
-  font-size: calc(var(--spacing) * 8);
-  font-weight: 800;
-}
-
-@utility font-h2-700 {
-  font-size: calc(var(--spacing) * 8);
-  font-weight: 700;
-}
-
-@utility font-h3-800 {
-  font-size: calc(var(--spacing) * 7);
-  font-weight: 800;
-}
-
-@utility font-h3-700 {
-  font-size: calc(var(--spacing) * 7);
-  font-weight: 700;
-}
-
-@utility font-h4-800 {
-  font-size: calc(var(--spacing) * 6);
-  font-weight: 800;
-}
-
-@utility font-h4-700 {
-  font-size: calc(var(--spacing) * 6);
-  font-weight: 700;
-}
-
-@utility font-h5-800 {
-  font-size: calc(var(--spacing) * 5);
-  font-weight: 800;
-}
-
-@utility font-h5-700 {
-  font-size: calc(var(--spacing) * 5);
-  font-weight: 700;
-}
-
-@utility font-subtitle1-700 {
-  font-size: calc(var(--spacing) * 4.5);
-  font-weight: 700;
-}
-
-@utility font-subtitle1-500 {
-  font-size: calc(var(--spacing) * 4.5);
-  font-weight: 500;
-}
-
-@utility font-subtitle2-700 {
-  font-size: calc(var(--spacing) * 4);
-  font-weight: 700;
-}
-
-@utility font-subtitle2-500 {
-  font-size: calc(var(--spacing) * 4);
-  font-weight: 500;
-}
-
-@utility font-subtitle3-700 {
-  font-size: calc(var(--spacing) * 3.75);
-  font-weight: 700;
-}
-
-@utility font-subtitle3-500 {
-  font-size: calc(var(--spacing) * 3.75);
-  font-weight: 500;
-}
-
-@utility font-body1-700 {
-  font-size: calc(var(--spacing) * 3.5);
-  font-weight: 700;
-}
-
-@utility font-body1-500 {
-  font-size: calc(var(--spacing) * 3.5);
-  font-weight: 500;
-}
-
-@utility font-body1-400 {
-  font-size: calc(var(--spacing) * 3.5);
-  font-weight: 400;
-}
-
-@utility font-body2-700 {
-  font-size: calc(var(--spacing) * 3.25);
-  font-weight: 700;
-}
-
-@utility font-body2-500 {
-  font-size: calc(var(--spacing) * 3.25);
-  font-weight: 500;
-}
-
-@utility font-body2-400 {
-  font-size: calc(var(--spacing) * 3.25);
-  font-weight: 400;
-}
-
-@utility font-body3-700 {
-  font-size: calc(var(--spacing) * 3);
-  font-weight: 700;
-}
-
-@utility font-body3-500 {
-  font-size: calc(var(--spacing) * 3);
-  font-weight: 500;
-}
-
-@utility font-body3-400 {
-  font-size: calc(var(--spacing) * 3);
-  font-weight: 400;
-}
-
-@utility font-body4-700 {
-  font-size: calc(var(--spacing) * 2.75);
-  font-weight: 700;
-}
-
-@utility font-body4-500 {
-  font-size: calc(var(--spacing) * 2.75);
-  font-weight: 500;
-}
-
-@utility font-body4-400 {
-  font-size: calc(var(--spacing) * 2.75);
-  font-weight: 400;
-}

package/src/foundations/typography.stories.tsx

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-const meta = {
-  title: "Foundations",
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Background colors story
-export const Typography: Story = {
-  render: () => <p className="font-h1-800">font-h1-800</p>,
-};

package/src/hooks/use-mobile.ts

@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}

package/src/index.css

@@ -1,176 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "./foundations/color.css";
-@import "./foundations/spacing.css";
-@import "./foundations/typography.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-.test {
-  --background: oklch(0.9721 0.0158 110.5501);
-  --foreground: oklch(0.5066 0.2501 271.8903);
-  --card: oklch(0.9721 0.0158 110.5501);
-  --card-foreground: oklch(0.5066 0.2501 271.8903);
-  --popover: oklch(0.9721 0.0158 110.5501);
-  --popover-foreground: oklch(0.5066 0.2501 271.8903);
-  --primary: oklch(0.5066 0.2501 271.8903);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(1 0 0);
-  --secondary-foreground: oklch(0.5066 0.2501 271.8903);
-  --muted: oklch(0.9189 0.0147 106.6853);
-  --muted-foreground: oklch(0.5066 0.2501 271.8903);
-  --accent: oklch(0.9168 0.0214 109.7161);
-  --accent-foreground: oklch(0.4486 0.2266 271.5512);
-  --destructive: oklch(0.63 0.19 23.03);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.5066 0.2501 271.8903);
-  --input: oklch(0.5066 0.2501 271.8903);
-  --ring: oklch(0.468 0.2721 279.6007);
-  --chart-1: oklch(0.5066 0.2501 271.8903);
-  --chart-2: oklch(0.55 0.22 264.53);
-  --chart-3: oklch(0.72 0 0);
-  --chart-4: oklch(0.92 0 0);
-  --chart-5: oklch(0.56 0 0);
-  --sidebar: oklch(0.9721 0.0158 110.5501);
-  --sidebar-foreground: oklch(0.5066 0.2501 271.8903);
-  --sidebar-primary: oklch(0.5066 0.2501 271.8903);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.9168 0.0214 109.7161);
-  --sidebar-accent-foreground: oklch(0.4486 0.2266 271.5512);
-  --sidebar-border: oklch(0.4486 0.2266 271.5512);
-  --sidebar-ring: oklch(0.4486 0.2266 271.5512);
-  --font-sans: Geist Mono, sans-serif;
-  --radius: 0rem;
-  --shadow-2xs: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.07);
-  --shadow-xs: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.07);
-  --shadow-sm: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
-    4px 1px 2px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
-  --shadow: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
-    4px 1px 2px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
-  --shadow-md: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
-    4px 2px 4px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
-  --shadow-lg: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
-    4px 4px 6px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
-  --shadow-xl: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15),
-    4px 8px 10px -1px hsl(238.3146 85.5769% 59.2157% / 0.15);
-  --shadow-2xl: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.38);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}