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

package/src/foundations/palette.css

@@ -0,0 +1,249 @@
+: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

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

package/src/foundations/typography.css

@@ -0,0 +1,143 @@
+/**
+ * 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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,176 @@
+@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;
+  }
+}