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

package/src/foundations/color.stories.tsx

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