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

package/src/foundations/color.stories.tsx

@@ -0,0 +1,719 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'Foundations',
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PaletteColor = ({ bgColor }: { bgColor: string }) => {
+  // 빈 색상인 경우 빈 div 반환
+  if (!bgColor) {
+    return <div className='w-full h-16' />;
+  }
+
+  // 실제 색상 값이 정의되어 있는지 확인
+  const actualColorValue = getComputedStyle(document.documentElement).getPropertyValue(bgColor).trim();
+  if (!actualColorValue) {
+    return <div className='w-full h-16' />;
+  }
+
+  const opacity = Number(bgColor.split('-').reverse()[0]);
+  let fontColorClassName = 'text-static-black';
+  switch (bgColor) {
+    case '--white-100':
+      fontColorClassName = 'text-static-black';
+      break;
+    case '--black-100':
+      fontColorClassName = 'text-static-white';
+      break;
+    default:
+      fontColorClassName = opacity >= 50 ? 'text-static-white' : 'text-static-black';
+      break;
+  }
+
+  return (
+    <div
+      className={`px-2 py-1.5  text-xs w-full h-16 ${fontColorClassName}`}
+      style={{
+        backgroundColor: `var(${bgColor})`,
+      }}
+    >
+      <p>{opacity}</p>
+      <p>{actualColorValue}</p>
+    </div>
+  );
+};
+
+// Palette section component
+const PaletteSection = ({ title, colors }: { title: string; colors: string[] }) => (
+  <div>
+    <p className='font-semibold mb-6'>{title}</p>
+    <div className='flex w-full'>
+      {colors.map((color, index) => (
+        <PaletteColor key={index} bgColor={color} />
+      ))}
+    </div>
+  </div>
+);
+
+export const Palette: Story = {
+  render: () => {
+    const colorNames = [
+      'neutral',
+      'cool-neutral',
+      'navy',
+      'blue',
+      'red',
+      'orange',
+      'yellow',
+      'lime',
+      'green',
+      'teal',
+      'cyan',
+      'sky',
+      'indigo',
+      'violet',
+      'purple',
+      'pink',
+    ];
+
+    const shades = [0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95];
+
+    const generateColors = (colorName: string) => {
+      return shades.map((shade) => `--${colorName}-${shade}`);
+    };
+
+    const getTitle = (colorName: string) => {
+      return colorName
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+    };
+
+    return (
+      <div className='w-full gap-12 grid'>
+        <div className='flex w-full'>
+          <div className='w-full'>
+            <p className='font-semibold mb-6'> White</p>
+            <div className='border border-border-main box-border'>
+              <PaletteColor bgColor='--white-100' />
+            </div>
+          </div>
+          <div className='w-full'>
+            <p className='font-semibold mb-6'>Black</p>
+            <div className='border border-static-black box-border'>
+              <PaletteColor bgColor='--black-100' />
+            </div>
+          </div>
+        </div>
+        {colorNames.map((colorName, index) => (
+          <PaletteSection key={index} title={getTitle(colorName)} colors={generateColors(colorName)} />
+        ))}
+      </div>
+    );
+  },
+};
+
+interface ColorItem {
+  token: string;
+  role: string;
+  value: string;
+  preview: string;
+}
+
+const ColorTable = ({ title, description, colors }: { title: string; description?: string; colors: ColorItem[] }) => (
+  <div>
+    <h2 className='text-lg font-bold '>{title}</h2>
+    {description && <p className='mb-4 text-sm' dangerouslySetInnerHTML={{ __html: description }} />}
+    <table className='w-full border-collapse text-sm bg-background-alternative rounded-md '>
+      <colgroup>
+        <col className='w-1/3' />
+        <col className='w-1/3' />
+        <col className='w-1/3' />
+      </colgroup>
+      <thead className='shadow shadow-sm'>
+        <tr>
+          <th className=' p-3 text-left'>Token</th>
+          <th className=' p-3 text-left'>Role</th>
+          <th className=' p-3 text-left'>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {colors.map((color, colorIndex) => (
+          <tr key={colorIndex}>
+            <td className='p-3 font-medium'>{color.token}</td>
+            <td className='p-3 text-sm'>{color.role}</td>
+            <td className='p-3 text-sm '>
+              <div className='flex justify-between items-center'>
+                {color.value}
+                <div className={`w-12 h-12 border border-gray-200 rounded-full ${color.preview}`} />
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+export const Color: Story = {
+  render: () => {
+    const data = [
+      {
+        title: 'Static',
+        description: '테마에 상관없이 변하지 않는 고정 색상을 정의합니다.',
+        data: [
+          {
+            token: 'static-white',
+            role: '배경 및 밝은 요소에 사용되는 고정 색상',
+            value: 'white-100',
+            preview: 'bg-static-white',
+          },
+          {
+            token: 'static-black',
+            role: '어두운 요소에 사용되는 고정 색상',
+            value: 'black-100',
+            preview: 'bg-static-black',
+          },
+        ],
+      },
+      {
+        title: 'Primary',
+        description:
+          '각 제품의 주요 행동과 브랜드 아이덴티티를 나타내는 핵심 컬러입니다. (ex. 로고, Accent 컬러, Button, Active 상태의 Border 등)<br/>각 제품별로 정의할 수 있습니다.',
+        data: [
+          {
+            token: 'primary-main',
+            role: '메인 컬러',
+            value: 'violet-60',
+            preview: 'bg-primary-main',
+          },
+          {
+            token: 'primary-alternative',
+            role: '어두운 톤의 보조 컬러 (Main 배경위에 겹쳐지는 더 깊은 위계를 가짐)',
+            value: 'violet-80',
+            preview: 'bg-primary-alternative',
+          },
+          {
+            token: 'primary-subtle',
+            role: '밝은 톤의 보조 컬러 (Main 배경 위에 겹쳐지는 더 깊은 위계를 가짐)',
+            value: 'violet-40',
+            preview: 'bg-primary-subtle',
+          },
+        ],
+      },
+      {
+        title: 'Secondary',
+        description:
+          'Primary 컬러를 보조하거나 다른 중요한 요소를 강조하는 데 사용되는 컬러입니다. Primary 색상과 조화로운 색상을 적용합니다.<br/>각 제품별로 정의할 수 있습니다.',
+        data: [
+          {
+            token: 'secondary-main',
+            role: 'Secondary의 메인 컬러',
+            value: 'indigo-60',
+            preview: 'bg-secondary-main',
+          },
+          {
+            token: 'secondary-alternative',
+            role: '어두운 톤의 보조 컬러 (Main 배경위에 겹쳐지는 더 깊은 위계를 가짐)',
+            value: 'indigo-80',
+            preview: 'bg-secondary-alternative',
+          },
+          {
+            token: 'secondary-subtle',
+            role: '밝은 톤의 보조 컬러 (Main 배경 위에 겹쳐지는 더 깊은 위계를 가짐)',
+            value: 'indigo-40',
+            preview: 'bg-secondary-subtle',
+          },
+        ],
+      },
+      {
+        title: 'Tertiary',
+        description:
+          '가장 낮은 위계의 요소에 사용되며, 시각적 노이즈를 줄이는 역할을 합니다.<br/>각 제품별로 정의할 수 있습니다.',
+        data: [
+          {
+            token: 'tertiary-main',
+            role: 'Tertiary의 메인 컬러',
+            value: 'navy-60',
+            preview: 'bg-tertiary-main',
+          },
+          {
+            token: 'tertiary-alternative',
+            role: '어두운 톤의 보조 컬러 (Main 배경위에 겹쳐지는 더 깊은 위계를 가짐)',
+            value: 'navy-80',
+            preview: 'bg-tertiary-alternative',
+          },
+          {
+            token: 'tertiary-subtle',
+            role: '밝은 톤의 보조 컬러 (Main 배경 위에 겹쳐지는 더 깊은 위계를 가짐)',
+            value: 'navy-40',
+            preview: 'bg-tertiary-subtle',
+          },
+        ],
+      },
+      {
+        title: 'Background',
+        description: '애플리케이션의 배경에 사용되는 색상으로, 콘텐츠를 돋보이게 하고 시각적 위계를 형성합니다.',
+        data: [
+          {
+            token: 'background-main',
+            role: '서비스의 주요 배경색',
+            value: 'white-100',
+            preview: 'bg-background-main',
+          },
+          {
+            token: 'background-alternative',
+            role: '사이드 패널이나 특정 섹션의 배경색(primary 배경과 시각적 위계를 구분됨)',
+            value: 'cool-neutral-5',
+            preview: 'bg-background-alternative',
+          },
+          {
+            token: 'background-subtle',
+            role: '사이드 패널이나 특정 섹션의 배경색(alternative 배경과 시각적 위계를 구분됨)',
+            value: 'cool-neutral-0',
+            preview: 'bg-background-subtle',
+          },
+          {
+            token: 'background-elevated-main',
+            role: '배경 위에 겹쳐지는 더 깊은 위계를 가진 영역에 사용(Component의 배경색)',
+            value: 'cool-neutral-10',
+            preview: 'bg-background-elevated-main',
+          },
+          {
+            token: 'background-elevated-alternative',
+            role: '배경 위에 겹쳐지는 더 깊은 위계를 가진 영역에 사용(Component의 배경색)',
+            value: 'cool-neutral-20',
+            preview: 'bg-background-elevated-alternative',
+          },
+          {
+            token: 'background-emphize',
+            role: 'UI의 기본 배경과 대비되는 색상 (깊이감이나 강조 효과)',
+            value: 'cool-neutral-90',
+            preview: 'bg-background-emphize',
+          },
+          {
+            token: 'background-quiet',
+            role: '비활성화된 Component의 배경색',
+            value: 'cool-neutral-90 / 5%',
+            preview: 'bg-background-quiet',
+          },
+          {
+            token: 'background-success',
+            role: '성공 상태를 나타내는 배경 색상',
+            value: 'green-50',
+            preview: 'bg-background-success',
+          },
+          {
+            token: 'background-error',
+            role: '에러 상태를 나타내는 배경 색상',
+            value: 'red-50',
+            preview: 'bg-background-error',
+          },
+          {
+            token: 'background-info-subtle',
+            role: '정보 혹은 팁을 나타내는 보조 배경색',
+            value: 'blue-50 / 5%',
+            preview: 'bg-background-info-subtle',
+          },
+          {
+            token: 'background-success-subtle',
+            role: '성공 상황를 나타내는 보조 배경색',
+            value: 'green-50 / 5%',
+            preview: 'bg-background-success-subtle',
+          },
+          {
+            token: 'background-warning-subtle',
+            role: '주의 사항을 나타내는 보조 배경색',
+            value: 'yellow-50 / 5%',
+            preview: 'bg-background-warning-subtle',
+          },
+          {
+            token: 'background-error-subtle',
+            role: '위험 상황를 나타내는 보조 배경색',
+            value: 'red-50 / 5%',
+            preview: 'bg-background-error-subtle',
+          },
+        ],
+      },
+      {
+        title: 'Text',
+        description: '애플리케이션의 텍스트에 사용되는 색상으로, 가독성과 시각적 위계를 제공합니다.',
+        data: [
+          {
+            token: 'text-main',
+            role: '본문, 제목 등 가장 중요한 텍스트 색상',
+            value: 'cool-neutral-90',
+            preview: 'bg-text-main',
+          },
+          {
+            token: 'text-alternative',
+            role: '보조 정보, 캡션, 부제목 등 상대적으로 덜 중요한 텍스트 색상 1',
+            value: 'cool-neutral-80',
+            preview: 'bg-text-alternative',
+          },
+          {
+            token: 'text-subtle',
+            role: '보조 정보, 캡션, 부제목 등 상대적으로 덜 중요한 텍스트 색상 2',
+            value: 'cool-neutral-60',
+            preview: 'bg-text-subtle',
+          },
+          {
+            token: 'text-ghost',
+            role: '보조 정보, 캡션, 부제목 등 상대적으로 덜 중요한 텍스트 색상 3',
+            value: 'cool-neutral-30',
+            preview: 'bg-text-ghost',
+          },
+          {
+            token: 'text-quiet',
+            role: '비활성화된 텍스트 색상',
+            value: 'cool-neutral-25',
+            preview: 'bg-text-quiet',
+          },
+          {
+            token: 'text-emphize',
+            role: '기본 텍스트 컬러와 대비되는 색상 (깊이감이나 강조 효과)',
+            value: 'cool-neutral-10',
+            preview: 'bg-text-emphize',
+          },
+          {
+            token: 'text-interactive',
+            role: '클릭 가능한 링크의 텍스트 색상',
+            value: 'violet-60',
+            preview: 'bg-text-interactive',
+          },
+          {
+            token: 'text-info',
+            role: '정보 혹은 팁을 나타내는 텍스트 색상',
+            value: 'blue-70',
+            preview: 'bg-text-info',
+          },
+          {
+            token: 'text-success',
+            role: '성공의 상황를 나타내는 텍스트 색상',
+            value: 'green-70',
+            preview: 'bg-text-success',
+          },
+          {
+            token: 'text-warning',
+            role: '주의의 상황를 나타내는 텍스트 색상',
+            value: 'yellow-70',
+            preview: 'bg-text-warning',
+          },
+          {
+            token: 'text-error',
+            role: '위험의 상황를 나타내는텍스트 색상',
+            value: 'red-70',
+            preview: 'bg-text-error',
+          },
+        ],
+      },
+      {
+        title: 'Border',
+        description: '컴포넌트와 레이아웃을 구분하는 경계선에 사용되는 색상입니다.',
+        data: [
+          {
+            token: 'border-main',
+            role: '기본 테두리 색상',
+            value: 'cool-neutral-10',
+            preview: 'bg-border-main',
+          },
+          {
+            token: 'border-alternative',
+            role: '대체 테두리 색상 (더 진한 톤)',
+            value: 'cool-neutral-30',
+            preview: 'bg-border-alternative',
+          },
+          {
+            token: 'border-subtle',
+            role: '미묘한 테두리 색상 (더 연한 톤)',
+            value: 'cool-neutral-0',
+            preview: 'bg-border-subtle',
+          },
+          {
+            token: 'border-emphize',
+            role: '강조된 테두리 색상',
+            value: 'cool-neutral-90',
+            preview: 'bg-border-emphize',
+          },
+          {
+            token: 'border-quiet',
+            role: '비활성화된 테두리 색상',
+            value: 'cool-neutral-5',
+            preview: 'bg-border-quiet',
+          },
+          {
+            token: 'border-main-focusRing',
+            role: '기본 포커스 링 색상',
+            value: 'cool-neutral-10 / 50%',
+            preview: 'bg-border-main-focusRing',
+          },
+          {
+            token: 'border-emphize--focusRing',
+            role: '강조된 포커스 링 색상',
+            value: 'cool-neutral-90 / 50%',
+            preview: 'bg-border-emphize--focusRing',
+          },
+          {
+            token: 'border-control-default-focusRing',
+            role: '컨트롤 요소의 기본 포커스 링 색상',
+            value: 'cool-neutral-20 / 50%',
+            preview: 'bg-border-control-default-focusRing',
+          },
+          {
+            token: 'border-info',
+            role: '정보를 전달하는 테두리 색상',
+            value: 'blue-50',
+            preview: 'bg-border-info',
+          },
+          {
+            token: 'border-success',
+            role: '성공 상태를 나타내는 테두리 색상',
+            value: 'green-50',
+            preview: 'bg-border-success',
+          },
+          {
+            token: 'border-warning',
+            role: '경고를 나타내는 테두리 색상',
+            value: 'orange-50',
+            preview: 'bg-border-warning',
+          },
+          {
+            token: 'border-error',
+            role: '에러를 나타내는 테두리 색상',
+            value: 'red-50',
+            preview: 'bg-border-error',
+          },
+          {
+            token: 'border-success-focusRing',
+            role: '성공 상태의 포커스 링 색상',
+            value: 'green-50 / 50%',
+            preview: 'bg-border-success-focusRing',
+          },
+          {
+            token: 'border-warning-focusRing',
+            role: '경고 상태의 포커스 링 색상',
+            value: 'orange-50 / 50%',
+            preview: 'bg-border-warning-focusRing',
+          },
+          {
+            token: 'border-error-focusRing',
+            role: '에러 상태의 포커스 링 색상',
+            value: 'red-50 / 50%',
+            preview: 'bg-border-error-focusRing',
+          },
+        ],
+      },
+      {
+        title: 'Icon',
+        description: '아이콘에 사용되는 색상으로, 시각적 위계와 상태를 나타냅니다.',
+        data: [
+          {
+            token: 'icon-main',
+            role: '기본 아이콘 색상',
+            value: 'cool-neutral-90',
+            preview: 'bg-icon-main',
+          },
+          {
+            token: 'icon-alternative',
+            role: '대체 아이콘 색상',
+            value: 'cool-neutral-70',
+            preview: 'bg-icon-alternative',
+          },
+          {
+            token: 'icon-quiet',
+            role: '비활성화된 아이콘 색상',
+            value: 'cool-neutral-20',
+            preview: 'bg-icon-quiet',
+          },
+          {
+            token: 'icon-emphize',
+            role: '강조된 아이콘 색상 (어두운 배경 위)',
+            value: 'cool-neutral-0',
+            preview: 'bg-icon-emphize',
+          },
+          {
+            token: 'icon-disable',
+            role: '비활성 상태 아이콘 색상',
+            value: 'cool-neutral-30',
+            preview: 'bg-icon-disable',
+          },
+          {
+            token: 'icon-info',
+            role: '정보를 전달하는 아이콘 색상',
+            value: 'blue-50',
+            preview: 'bg-icon-info',
+          },
+          {
+            token: 'icon-success',
+            role: '성공 상태를 나타내는 아이콘 색상',
+            value: 'green-50',
+            preview: 'bg-icon-success',
+          },
+          {
+            token: 'icon-warning',
+            role: '경고를 나타내는 아이콘 색상',
+            value: 'orange-50',
+            preview: 'bg-icon-warning',
+          },
+          {
+            token: 'icon-error',
+            role: '에러를 나타내는 아이콘 색상',
+            value: 'red-50',
+            preview: 'bg-icon-error',
+          },
+        ],
+      },
+      {
+        title: 'State',
+        description: '인터랙티브 요소의 상태를 나타내는 색상입니다.',
+        data: [
+          {
+            token: 'state-default',
+            role: '기본 상태 색상',
+            value: 'cool-neutral-0 / 100%',
+            preview: 'bg-state-default',
+          },
+          {
+            token: 'state-hovered',
+            role: '호버 상태 색상',
+            value: 'cool-neutral-5 / 100%',
+            preview: 'bg-state-hovered',
+          },
+          {
+            token: 'state-focused',
+            role: '포커스 상태 색상',
+            value: 'cool-neutral-10 / 100%',
+            preview: 'bg-state-focused',
+          },
+          {
+            token: 'state-pressed',
+            role: '눌림 상태 색상',
+            value: 'cool-neutral-15 / 100%',
+            preview: 'bg-state-pressed',
+          },
+          {
+            token: 'state-disabled',
+            role: '비활성화 상태 색상',
+            value: 'static-white / 50%',
+            preview: 'bg-state-disabled',
+          },
+        ],
+      },
+      {
+        title: 'Status',
+        description: '상태 메시지와 알림에 사용되는 색상입니다.',
+        data: [
+          {
+            token: 'status-info-main',
+            role: '정보 상태의 메인 색상',
+            value: 'blue-50',
+            preview: 'bg-status-info-main',
+          },
+          {
+            token: 'status-info-alternative',
+            role: '정보 상태의 대체 색상',
+            value: 'blue-70',
+            preview: 'bg-status-info-alternative',
+          },
+          {
+            token: 'status-info-ghost',
+            role: '정보 상태의 미묘한 색상',
+            value: 'blue-10',
+            preview: 'bg-status-info-ghost',
+          },
+          {
+            token: 'status-success-main',
+            role: '성공 상태의 메인 색상',
+            value: 'green-50',
+            preview: 'bg-status-success-main',
+          },
+          {
+            token: 'status-success-alternative',
+            role: '성공 상태의 대체 색상',
+            value: 'green-70',
+            preview: 'bg-status-success-alternative',
+          },
+          {
+            token: 'status-success-ghost',
+            role: '성공 상태의 미묘한 색상',
+            value: 'green-10',
+            preview: 'bg-status-success-ghost',
+          },
+          {
+            token: 'status-warning-main',
+            role: '경고 상태의 메인 색상',
+            value: 'orange-50',
+            preview: 'bg-status-warning-main',
+          },
+          {
+            token: 'status-warning-alternative',
+            role: '경고 상태의 대체 색상',
+            value: 'orange-70',
+            preview: 'bg-status-warning-alternative',
+          },
+          {
+            token: 'status-warning-ghost',
+            role: '경고 상태의 미묘한 색상',
+            value: 'orange-10',
+            preview: 'bg-status-warning-ghost',
+          },
+          {
+            token: 'status-error-main',
+            role: '에러 상태의 메인 색상',
+            value: 'red-50',
+            preview: 'bg-status-error-main',
+          },
+          {
+            token: 'status-error-alternative',
+            role: '에러 상태의 대체 색상',
+            value: 'red-70',
+            preview: 'bg-status-error-alternative',
+          },
+          {
+            token: 'status-error-ghost',
+            role: '에러 상태의 미묘한 색상',
+            value: 'red-10',
+            preview: 'bg-status-error-ghost',
+          },
+        ],
+      },
+      {
+        title: 'Overlay',
+        description: '모달, 팝업 등에 사용되는 오버레이 색상입니다.',
+        data: [
+          {
+            token: 'overlay-main',
+            role: '메인 오버레이 색상',
+            value: 'cool-neutral-90 / 40%',
+            preview: 'bg-overlay-main',
+          },
+          {
+            token: 'overlay-alternative',
+            role: '대체 오버레이 색상 (더 연한 톤)',
+            value: 'cool-neutral-90 / 20%',
+            preview: 'bg-overlay-alternative',
+          },
+        ],
+      },
+    ];
+
+    return (
+      <div className='space-y-6'>
+        {data.map((colorGroup, groupIndex) => (
+          <ColorTable
+            key={groupIndex}
+            title={colorGroup.title}
+            description={colorGroup.description}
+            colors={colorGroup.data}
+          />
+        ))}
+      </div>
+    );
+  },
+};