@mzc-fe/design-system 0.0.5 → 0.0.7-rc.0

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export { Label } from './components/label';
 export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from './components/menubar';
 export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, } from './components/navigation-menu';
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from './components/pagination';
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from './components/popover';
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription, } from './components/popover';
 export { Progress } from './components/progress';
 export { RadioGroup, RadioGroupItem } from './components/radio-group';
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle, } from './components/resizable';

package/foundations/ThemeProvider.tsx

@@ -0,0 +1,77 @@
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+
+export type Theme = string; //"dark" | "light" | "system" | "test";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+  const prevTheme = useRef<Theme>(theme);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove(prevTheme.current);
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme((prev) => {
+        prevTheme.current = prev;
+        return theme;
+      });
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

package/foundations/color.css

@@ -0,0 +1,232 @@
+@import './palette.css';
+
+/* Color */
+/**
+ * Token에 매칭된 Color 값을 설정합니다.
+ */
+@theme inline {
+  --color-static-white: var(--static-white);
+  --color-static-black: var(--static-black);
+
+  --color-primary-main: var(--primary-main);
+  --color-primary-alternative: var(--primary-alternative);
+  --color-primary-subtle: var(--primary-subtle);
+
+  --color-secondary-main: var(--secondary-main);
+  --color-secondary-alternative: var(--secondary-alternative);
+  --color-secondary-subtle: var(--secondary-subtle);
+
+  --color-tertiary-main: var(--tertiary-main);
+  --color-tertiary-alternative: var(--tertiary-alternative);
+  --color-tertiary-subtle: var(--tertiary-subtle);
+
+  --color-background-main: var(--background-main);
+  --color-background-alternative: var(--background-alternative);
+  --color-background-subtle: var(--background-subtle);
+  --color-background-elevated-main: var(--background-elevated-main);
+  --color-background-elevated-alternative: var(--background-elevated-alternative);
+  --color-background-emphize: var(--background-emphize);
+  --color-background-quiet: var(--background-quiet);
+  --color-background-error: var(--background-error);
+  --color-background-success: var(--background-success);
+  --color-background-info-subtle: var(--background-info-subtle);
+  --color-background-success-subtle: var(--background-success-subtle);
+  --color-background-warning-subtle: var(--background-warning-subtle);
+  --color-background-error-subtle: var(--background-error-subtle);
+
+  --color-text-main: var(--text-main);
+  --color-text-alternative: var(--text-alternative);
+  --color-text-subtle: var(--text-subtle);
+  --color-text-ghost: var(--text-ghost);
+  --color-text-quiet: var(--text-quiet);
+  --color-text-emphize: var(--text-emphize);
+  --color-text-interactive: var(--text-interactive);
+  --color-text-info: var(--text-info);
+  --color-text-success: var(--text-success);
+  --color-text-warning: var(--text-warning);
+  --color-text-error: var(--text-error);
+
+  --color-border-main: var(--border-main);
+  --color-border-alternative: var(--border-alternative);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-emphize: var(--border-emphize);
+  --color-border-quiet: var(--border-quiet);
+  --color-border-main-focusRing: var(--border-main-focusRing);
+  --color-border-emphize-focusRing: var(--border-emphize--focusRing);
+  --color-border-control-default-focusRing: var(--border-control-default-focusRing);
+  --color-border-info: var(--border-info);
+  --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-error: var(--border-error);
+  --color-border-success-focusRing: var(--border-success-focusRing);
+  --color-border-warning-focusRing: var(--border-warning-focusRing);
+  --color-border-error-focusRing: var(--border-error-focusRing);
+
+  --coon-main: var(--icon-main);
+  --color-icon-alternative: var(--icon-alternative);
+  --color-icon-quiet: var(--icon-quiet);
+  --color-icon-emphize: var(--icon-emphize);
+  --color-icon-disable: var(--icon-disable);
+  --color-icon-info: var(--icon-info);
+  --color-icon-success: var(--icon-success);
+  --color-icon-warning: var(--icon-warning);
+  --color-icon-error: var(--icon-error);
+
+  --color-state-default: var(--state-default);
+  --color-state-hovered: var(--state-hovered);
+  --color-state-focused: var(--state-focused);
+  --color-state-pressed: var(--state-pressed);
+  --color-state-disabled: var(--state-disabled);
+
+  --color-status-info-main: var(--status-info-main);
+  --color-status-info-alternative: var(--status-info-alternative);
+  --color-status-info-ghost: var(--status-info-ghost);
+  --color-status-success-main: var(--status-success-main);
+  --color-status-success-alternative: var(--status-success-alternative);
+  --color-status-success-ghost: var(--status-success-ghost);
+  --color-status-warning-main: var(--status-warning-main);
+  --color-status-warning-alternative: var(--status-warning-alternative);
+  --color-status-warning-ghost: var(--status-warning-ghost);
+  --color-status-error-main: var(--status-error-main);
+  --color-status-error-alternative: var(--status-error-alternative);
+  --color-status-error-ghost: var(--status-error-ghost);
+
+  --color-overlay-main: var(--overlay-main);
+  --color-overlay-alternative: var(--overlay-alternative);
+}
+
+/**
+ * 기본 테마의 Color 값을 설정합니다.
+ */
+:root {
+  /**
+   * 1. Static
+   */
+  --static-white: var(--white-100);
+  --static-black: var(--black-100);
+
+  /**
+   * 2. Primary
+   */
+  --primary-main: var(--violet-60);
+  --primary-alternative: var(--violet-80);
+  --primary-subtle: var(--violet-40);
+
+  /**
+   * 3. Secondary
+   */
+  --secondary-main: var(--indigo-60);
+  --secondary-alternative: var(--indigo-80);
+  --secondary-subtle: var(--indigo-40);
+
+  /**
+   * 4. Tertiary
+   */
+  --tertiary-main: var(--navy-60);
+  --tertiary-alternative: var(--navy-80);
+  --tertiary-subtle: var(--navy-40);
+
+  /**
+   * 5. Background
+   */
+  --background-main: var(--white-100);
+  --background-alternative: var(--cool-neutral-5);
+  --background-subtle: var(--cool-neutral-0);
+  --background-elevated-main: var(--cool-neutral-10);
+  --background-elevated-alternative: var(--cool-neutral-20);
+  --background-emphize: var(--cool-neutral-90);
+  --background-quiet: --alpha(var(--cool-neutral-90) / 5%);
+  --background-success: var(--green-50);
+  --background-error: var(--red-50);
+  --background-info-subtle: --alpha(var(--blue-50) / 5%);
+  --background-success-subtle: --alpha(var(--green-50) / 5%);
+  --background-warning-subtle: --alpha(var(--yellow-50) / 5%);
+  --background-error-subtle: --alpha(var(--red-50) / 5%);
+
+  /**
+   * 6. Text
+   */
+  --text-main: var(--cool-neutral-90);
+  --text-alternative: var(--cool-neutral-80);
+  --text-subtle: var(--cool-neutral-60);
+  --text-ghost: var(--cool-neutral-30);
+  --text-quiet: var(--cool-neutral-25);
+  --text-emphize: var(--cool-neutral-10);
+  --text-interactive: var(--violet-60);
+  --text-info: var(--blue-70);
+  --text-success: var(--green-70);
+  --text-warning: var(--yellow-70);
+  --text-error: var(--red-70);
+
+  /**
+   * 7. Border
+   */
+  --border-main: var(--cool-neutral-10);
+  --border-alternative: var(--cool-neutral-30);
+  --border-subtle: var(--cool-neutral-0);
+  --border-emphize: var(--cool-neutral-90);
+  --border-quiet: var(--cool-neutral-5);
+  --border-main-focusRing: --alpha(var(--cool-neutral-10) / 50%);
+  --border-emphize--focusRing: --alpha(var(--cool-neutral-90) / 50%);
+  --border-control-default-focusRing: --alpha(var(--cool-neutral-20) / 50%);
+  --border-info: var(--blue-50);
+  --border-success: var(--green-50);
+  --border-warning: var(--orange-50);
+  --border-error: var(--red-50);
+  --border-success-focusRing: --alpha(var(--green-50) / 50%);
+  --border-warning-focusRing: --alpha(var(--orange-50) / 50%);
+  --border-error-focusRing: --alpha(var(--red-50) / 50%);
+
+  /**
+   * 8. Icon
+   */
+  --icon-main: var(--cool-neutral-90);
+  --icon-alternative: var(--cool-neutral-70);
+  --icon-quiet: var(--cool-neutral-20);
+  --icon-emphize: var(--cool-neutral-0);
+  --icon-disable: var(--cool-neutral-30);
+  --icon-info: var(--blue-50);
+  --icon-success: var(--green-50);
+  --icon-warning: var(--orange-50);
+  --icon-error: var(--red-50);
+
+  /**
+ * 9. State
+ */
+  --state-default: alpha(var(--cool-neutral-0) / 100%);
+  --state-hovered: alpha(var(--cool-neutral-5) / 100%);
+  --state-focused: alpha(var(--cool-neutral-10) / 100%);
+  --state-pressed: alpha(var(--cool-neutral-15) / 100%);
+  --state-disabled: alpha(var(--static-white) / 50%);
+
+  /**
+   * 10. Status
+   */
+  --status-info-main: var(--blue-50);
+  --status-info-alternative: var(--blue-70);
+  --status-info-ghost: var(--blue-10);
+  --status-success-main: var(--green-50);
+  --status-success-alternative: var(--green-70);
+  --status-success-ghost: var(--green-10);
+  --status-warning-main: var(--orange-50);
+  --status-warning-alternative: var(--orange-70);
+  --status-warning-ghost: var(--orange-10);
+  --status-error-main: var(--red-50);
+  --status-error-alternative: var(--red-70);
+  --status-error-ghost: var(--red-10);
+
+  /**
+   * 11. Overlay
+   */
+  --overlay-main: alpha(var(--cool-neutral-90) / 40%);
+  --overlay-alternative: alpha(var(--cool-neutral-90) / 20%);
+}
+
+/** 
+ * Dark 테마에서의 Color 값을 설정합니다.
+ */
+.dark {
+  /**
+   * TBD
+   */
+}

package/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/foundations/spacing.css

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

package/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;
+}