@dmsej108/design-system 2.2.0

package/src/tokens/Tokens.stories.tsx

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Foundation/Design Tokens',
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+};
+export default meta;
+type Story = StoryObj;
+
+/* ── Color Swatch ── */
+function Swatch({ name, cssVar }: { name: string; cssVar: string }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, minWidth: 64 }}>
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: 8,
+          backgroundColor: `var(${cssVar})`,
+          border: '1px solid rgba(0,0,0,0.08)',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+        }}
+      />
+      <span style={{ fontSize: 11, color: 'var(--color-neutral-500)', textAlign: 'center' }}>{name}</span>
+    </div>
+  );
+}
+
+function ColorRow({ label, prefix, shades }: { label: string; prefix: string; shades: string[] }) {
+  return (
+    <div style={{ marginBottom: 32 }}>
+      <p style={{ margin: '0 0 12px', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--color-neutral-500)' }}>
+        {label}
+      </p>
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+        {shades.map((shade) => (
+          <Swatch key={shade} name={shade} cssVar={`--color-${prefix}-${shade}`} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const Colors: Story = {
+  name: '색상',
+  render: () => {
+    const shades = ['50','100','200','300','400','500','600','700','800','900'];
+    return (
+      <div style={{ padding: 32, fontFamily: 'var(--font-family-base)' }}>
+        <ColorRow label="Primary / KB Yellow" prefix="primary" shades={shades} />
+        <ColorRow label="Secondary / KB Gray" prefix="secondary" shades={shades} />
+        <ColorRow label="Neutral" prefix="neutral" shades={shades} />
+
+        <div style={{ marginBottom: 32 }}>
+          <p style={{ margin: '0 0 12px', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--color-neutral-500)' }}>KB Brand</p>
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            <Swatch name="yellow-positive" cssVar="--color-brand-yellow-positive" />
+            <Swatch name="yellow-negative" cssVar="--color-brand-yellow-negative" />
+            <Swatch name="gray" cssVar="--color-brand-gray" />
+            <Swatch name="dark-gray" cssVar="--color-brand-dark-gray" />
+            <Swatch name="gold" cssVar="--color-brand-gold" />
+            <Swatch name="silver" cssVar="--color-brand-silver" />
+          </div>
+        </div>
+
+        <div style={{ marginBottom: 32 }}>
+          <p style={{ margin: '0 0 12px', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--color-neutral-500)' }}>Semantic</p>
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            <Swatch name="success" cssVar="--color-success" />
+            <Swatch name="success-light" cssVar="--color-success-light" />
+            <Swatch name="warning" cssVar="--color-warning" />
+            <Swatch name="warning-light" cssVar="--color-warning-light" />
+            <Swatch name="error" cssVar="--color-error" />
+            <Swatch name="error-light" cssVar="--color-error-light" />
+            <Swatch name="info" cssVar="--color-info" />
+            <Swatch name="info-light" cssVar="--color-info-light" />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Typography: Story = {
+  name: '타이포그래피',
+  render: () => (
+    <div style={{ padding: 32, fontFamily: 'var(--font-family-base)' }}>
+      <p style={{ margin: '0 0 24px', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--color-neutral-500)' }}>Font Size</p>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 40 }}>
+        {[
+          ['xs', '12px'], ['sm', '14px'], ['md', '16px'], ['lg', '18px'],
+          ['xl', '20px'], ['2xl', '24px'], ['3xl', '30px'], ['4xl', '36px'],
+        ].map(([key, px]) => (
+          <div key={key} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
+            <span style={{ fontSize: 'var(--font-size-' + key + ')', color: 'var(--ds-text)', lineHeight: 1.3 }}>
+              StarBanking
+            </span>
+            <span style={{ fontSize: 11, color: 'var(--ds-text-muted)' }}>{key} / {px}</span>
+          </div>
+        ))}
+      </div>
+
+      <p style={{ margin: '0 0 16px', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--color-neutral-500)' }}>Font Weight</p>
+      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', marginBottom: 40 }}>
+        {[
+          ['Regular (400)', '400'], ['Medium (500)', '500'],
+          ['Semibold (600)', '600'], ['Bold (700)', '700'],
+        ].map(([label, weight]) => (
+          <div key={weight} style={{ fontWeight: weight, fontSize: 16, color: 'var(--ds-text)' }}>{label}</div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const Spacing: Story = {
+  name: '스페이싱',
+  render: () => (
+    <div style={{ padding: 32, fontFamily: 'var(--font-family-base)' }}>
+      <p style={{ margin: '0 0 24px', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--color-neutral-500)' }}>Spacing Scale</p>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {[
+          ['--space-1', '4px'], ['--space-2', '8px'], ['--space-3', '12px'],
+          ['--space-4', '16px'], ['--space-5', '20px'], ['--space-6', '24px'],
+          ['--space-8', '32px'], ['--space-10', '40px'], ['--space-12', '48px'],
+          ['--space-16', '64px'],
+        ].map(([token, px]) => (
+          <div key={token} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+            <div style={{ width: `var(${token})`, height: 20, backgroundColor: 'var(--color-primary-400)', borderRadius: 3, flexShrink: 0 }} />
+            <span style={{ fontSize: 12, color: 'var(--color-neutral-500)', whiteSpace: 'nowrap' }}>
+              {token} · {px}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const Shadows: Story = {
+  name: '그림자',
+  render: () => (
+    <div style={{ padding: 32, fontFamily: 'var(--font-family-base)' }}>
+      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
+        {['xs','sm','md','lg','xl'].map((s) => (
+          <div key={s} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+            <div style={{
+              width: 80, height: 80, borderRadius: 12,
+              backgroundColor: '#fff',
+              boxShadow: `var(--shadow-${s})`,
+              border: '1px solid var(--color-neutral-100)',
+            }} />
+            <span style={{ fontSize: 12, color: 'var(--color-neutral-500)' }}>shadow-{s}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const BorderRadius: Story = {
+  name: '테두리 반경',
+  render: () => (
+    <div style={{ padding: 32, fontFamily: 'var(--font-family-base)' }}>
+      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'flex-end' }}>
+        {[
+          ['sm', '4px'], ['md', '8px'], ['lg', '12px'], ['xl', '16px'], ['full', '9999px'],
+        ].map(([key, px]) => (
+          <div key={key} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+            <div style={{
+              width: 64, height: 64,
+              backgroundColor: 'var(--color-primary-100)',
+              border: '2px solid var(--color-primary-400)',
+              borderRadius: `var(--radius-${key})`,
+            }} />
+            <span style={{ fontSize: 12, color: 'var(--color-neutral-500)', textAlign: 'center' }}>
+              radius-{key}<br />{px}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};

package/src/tokens/index.css

@@ -0,0 +1,295 @@
+:root {
+  /* ── Colors ── */
+  /* Primary / KB Yellow */
+  --color-primary-50:  #FFF9E6;
+  --color-primary-100: #FFEDB3;
+  --color-primary-200: #FFE080;
+  --color-primary-300: #FFD54D;
+  --color-primary-400: #FFCC00;  /* KB Yellow Negative */
+  --color-primary-500: #FFBC00;  /* KB Yellow Positive */
+  --color-primary-600: #CC9600;
+  --color-primary-700: #997000;
+  --color-primary-800: #664B00;
+  --color-primary-900: #332500;
+
+  /* Secondary / KB Gray */
+  --color-secondary-50:  #F7F5F2;
+  --color-secondary-100: #EDEAE5;
+  --color-secondary-200: #D8D2CA;
+  --color-secondary-300: #BCB3A8;
+  --color-secondary-400: #9A9186;
+  --color-secondary-500: #7D7468;
+  --color-secondary-600: #60584C;  /* KB Gray */
+  --color-secondary-700: #545045;  /* KB Dark Gray */
+  --color-secondary-800: #3C3730;
+  --color-secondary-900: #261F19;
+
+  /* Neutral */
+  --color-neutral-0:   #ffffff;
+  --color-neutral-50:  #f7f8fa;
+  --color-neutral-100: #f1f3f5;
+  --color-neutral-200: #e4e7ec;
+  --color-neutral-300: #d0d5dd;
+  --color-neutral-400: #98a2b3;
+  --color-neutral-500: #667085;
+  --color-neutral-600: #475467;
+  --color-neutral-700: #344054;
+  --color-neutral-800: #1d2939;
+  --color-neutral-900: #101828;
+
+  /* Semantic */
+  --color-success-light: #d1fae5;
+  --color-success:       #36b37e;
+  --color-success-dark:  #1d7a57;
+
+  --color-warning-light: #fff3cd;
+  --color-warning:       #ff8b00;
+  --color-warning-dark:  #b85e00;
+
+  --color-error-light:   #fee2e2;
+  --color-error:         #ff5630;
+  --color-error-dark:    #b91c1c;
+
+  --color-info-light:    #dbeafe;
+  --color-info:          #2563eb;
+  --color-info-dark:     #1e40af;
+
+  /* ── Typography ── */
+  --font-family-base:    'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+
+  --font-size-xs:   0.75rem;   /* 12px */
+  --font-size-sm:   0.875rem;  /* 14px */
+  --font-size-md:   1rem;      /* 16px */
+  --font-size-lg:   1.125rem;  /* 18px */
+  --font-size-xl:   1.25rem;   /* 20px */
+  --font-size-2xl:  1.5rem;    /* 24px */
+  --font-size-3xl:  1.875rem;  /* 30px */
+  --font-size-4xl:  2.25rem;   /* 36px */
+
+  --font-weight-regular: 400;
+  --font-weight-medium:  500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:    700;
+
+  --line-height-tight:   1.25;
+  --line-height-snug:    1.375;
+  --line-height-normal:  1.5;
+  --line-height-relaxed: 1.625;
+
+  /* ── Spacing ── */
+  --space-1:  0.25rem;   /* 4px */
+  --space-2:  0.5rem;    /* 8px */
+  --space-3:  0.75rem;   /* 12px */
+  --space-4:  1rem;      /* 16px */
+  --space-5:  1.25rem;   /* 20px */
+  --space-6:  1.5rem;    /* 24px */
+  --space-8:  2rem;      /* 32px */
+  --space-10: 2.5rem;    /* 40px */
+  --space-12: 3rem;      /* 48px */
+  --space-16: 4rem;      /* 64px */
+
+  /* ── Border Radius ── */
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   12px;
+  --radius-xl:   16px;
+  --radius-full: 9999px;
+
+  /* ── Shadows ── */
+  --shadow-xs:  0 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-sm:  0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-md:  0 4px 8px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
+  --shadow-lg:  0 12px 24px rgba(16, 24, 40, 0.1), 0 4px 8px rgba(16, 24, 40, 0.04);
+  --shadow-xl:  0 24px 48px rgba(16, 24, 40, 0.12);
+
+  /* ── Transitions ── */
+  --transition-fast:   100ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow:   300ms ease;
+
+  /* ── KB Brand ── */
+  --color-brand-yellow-positive: #FFBC00;  /* KB Yellow Positive (Pantone 130 C) */
+  --color-brand-yellow-negative: #FFCC00;  /* KB Yellow Negative (Pantone 1235 C) */
+  --color-brand-gray:            #60584C;  /* KB Gray (Pantone 404 C) */
+  --color-brand-dark-gray:       #545045;  /* KB Dark Gray (Pantone 411C) */
+  --color-brand-gold:            #C5A028;  /* KB Gold (Pantone 872 C) */
+  --color-brand-silver:          #A8AAAD;  /* KB Silver (Pantone 877 C) */
+
+  /* ── Legacy variable aliases (maps css/ folder variables to design tokens) ── */
+  --base-txt-color:        var(--color-neutral-600);
+  --strong-txt-color:      var(--color-neutral-900);
+  --primary-txt-color:     #ffbc00;
+  --point-txt-color:       #287eff;
+  --error-txt-color:       #ff3232;
+  --placeholder-txt-color: var(--color-neutral-400);
+  --base-bg-color:         var(--color-neutral-50);
+  --base-bd-color:         var(--color-neutral-300);
+  --bd1-color:             var(--color-neutral-300);
+  --bd2-color:             var(--color-neutral-200);
+
+  /* ── Semantic design system tokens (dark-mode aware) ── */
+  --ds-surface:          #ffffff;
+  --ds-surface-hover:    #f2f2f2;
+  --ds-surface-disabled: #f2f2f2;
+  --ds-surface-nav:      #253349;
+  --ds-surface-nav-hover:#464646;
+  --ds-surface-primary:         var(--color-primary-500);  /* #FFBC00 KB Yellow Positive */
+  --ds-surface-primary-hover:   var(--color-primary-600);  /* #CC9600 */
+  --ds-surface-secondary:       var(--ds-surface-nav);      /* #253349 dark navy */
+  --ds-surface-secondary-hover: var(--ds-surface-nav-hover);/* #464646 */
+
+  --ds-text:             #222222;
+  --ds-text-2:           #444444;
+  --ds-text-muted:       #767676;
+  --ds-text-placeholder: #999999;
+  --ds-text-disabled:    #ababab;
+  --ds-text-on-dark:     #ffffff;
+  --ds-text-error:       #ff3232;
+
+  --ds-border:           #d2d2d2;
+  --ds-border-light:     #ebebeb;
+  --ds-border-strong:    #444444;
+  --ds-border-focus:     #999999;
+  --ds-border-error:     #ff3232;
+
+  --ds-danger:           #ff3232;
+  --ds-danger-hover:     #cc0000;
+
+  /* badge variants */
+  --ds-badge-success-bg:    #d1fae5;
+  --ds-badge-success-text:  #1d7a57;
+  --ds-badge-warning-bg:    #fff3cd;
+  --ds-badge-warning-text:  #b85e00;
+  --ds-badge-error-bg:      #fee2e2;
+  --ds-badge-error-text:    #b91c1c;
+  --ds-badge-info-bg:       #dbeafe;
+  --ds-badge-info-text:     #1e40af;
+}
+
+/* ── Dark mode overrides ── */
+/* Applied via data-theme="dark" on <html> (manual toggle) */
+:root[data-theme="dark"] {
+  /* Neutral scale (flipped for dark) */
+  --color-neutral-0:   #1c1f28;
+  --color-neutral-50:  #13151c;
+  --color-neutral-100: #1e2130;
+  --color-neutral-200: #2c3044;
+  --color-neutral-300: #3c4055;
+  --color-neutral-400: #6b6e82;
+  --color-neutral-500: #9295a8;
+  --color-neutral-600: #b8bace;
+  --color-neutral-700: #d0d2e0;
+  --color-neutral-800: #e4e6f2;
+  --color-neutral-900: #f2f3f8;
+
+  /* Semantic status (dark-friendly) */
+  --color-success-light: #0a2e1c;
+  --color-success:       #34d980;
+  --color-success-dark:  #86efac;
+  --color-warning-light: #2e1d00;
+  --color-warning:       #fbbf24;
+  --color-warning-dark:  #fde68a;
+  --color-error-light:   #2e0909;
+  --color-error:         #f87171;
+  --color-error-dark:    #fca5a5;
+  --color-info-light:    #08163a;
+  --color-info:          #60a5fa;
+  --color-info-dark:     #93c5fd;
+
+  /* Semantic ds tokens (dark) */
+  --ds-surface:          #1c1f28;
+  --ds-surface-hover:    #252830;
+  --ds-surface-disabled: #1e2130;
+  --ds-surface-nav:      #121924;
+  --ds-surface-nav-hover:#2a3548;
+
+  --ds-text:             #f0f0f4;
+  --ds-text-2:           #c8cad8;
+  --ds-text-muted:       #8a8d9e;
+  --ds-text-placeholder: #5c5f70;
+  --ds-text-disabled:    #44475a;
+  --ds-text-on-dark:     #f0f0f4;
+  --ds-text-error:       #ff6b6b;
+
+  --ds-border:           #353848;
+  --ds-border-light:     #272a38;
+  --ds-border-strong:    #8a8d9e;
+  --ds-border-focus:     #6b6e82;
+  --ds-border-error:     #ff6b6b;
+
+  --ds-danger:           #ff5252;
+  --ds-danger-hover:     #d32f2f;
+
+  /* badge variants (dark) */
+  --ds-badge-success-bg:    #0a2e1c;
+  --ds-badge-success-text:  #34d980;
+  --ds-badge-warning-bg:    #2e1d00;
+  --ds-badge-warning-text:  #fbbf24;
+  --ds-badge-error-bg:      #2e0909;
+  --ds-badge-error-text:    #f87171;
+  --ds-badge-info-bg:       #08163a;
+  --ds-badge-info-text:     #60a5fa;
+}
+
+/* Applied via OS-level dark preference */
+/* @media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-neutral-0:   #1c1f28;
+    --color-neutral-50:  #13151c;
+    --color-neutral-100: #1e2130;
+    --color-neutral-200: #2c3044;
+    --color-neutral-300: #3c4055;
+    --color-neutral-400: #6b6e82;
+    --color-neutral-500: #9295a8;
+    --color-neutral-600: #b8bace;
+    --color-neutral-700: #d0d2e0;
+    --color-neutral-800: #e4e6f2;
+    --color-neutral-900: #f2f3f8;
+
+    --color-success-light: #0a2e1c;
+    --color-success:       #34d980;
+    --color-success-dark:  #86efac;
+    --color-warning-light: #2e1d00;
+    --color-warning:       #fbbf24;
+    --color-warning-dark:  #fde68a;
+    --color-error-light:   #2e0909;
+    --color-error:         #f87171;
+    --color-error-dark:    #fca5a5;
+    --color-info-light:    #08163a;
+    --color-info:          #60a5fa;
+    --color-info-dark:     #93c5fd;
+
+    --ds-surface:          #1c1f28;
+    --ds-surface-hover:    #252830;
+    --ds-surface-disabled: #1e2130;
+    --ds-surface-nav:      #121924;
+    --ds-surface-nav-hover:#2a3548;
+
+    --ds-text:             #f0f0f4;
+    --ds-text-2:           #c8cad8;
+    --ds-text-muted:       #8a8d9e;
+    --ds-text-placeholder: #5c5f70;
+    --ds-text-disabled:    #44475a;
+    --ds-text-on-dark:     #f0f0f4;
+    --ds-text-error:       #ff6b6b;
+
+    --ds-border:           #353848;
+    --ds-border-light:     #272a38;
+    --ds-border-strong:    #8a8d9e;
+    --ds-border-focus:     #6b6e82;
+    --ds-border-error:     #ff6b6b;
+
+    --ds-danger:           #ff5252;
+    --ds-danger-hover:     #d32f2f;
+
+    --ds-badge-success-bg:    #0a2e1c;
+    --ds-badge-success-text:  #34d980;
+    --ds-badge-warning-bg:    #2e1d00;
+    --ds-badge-warning-text:  #fbbf24;
+    --ds-badge-error-bg:      #2e0909;
+    --ds-badge-error-text:    #f87171;
+    --ds-badge-info-bg:       #08163a;
+    --ds-badge-info-text:     #60a5fa;
+  }
+} */