@licklist/design 0.78.5-dev.8 → 0.78.5-dev.81

package/src/v2/design-system/colors/ColorSystem.stories.tsx

@@ -0,0 +1,730 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import './ColorSystem.scss';
+import '../../styles/tokens/_colors.scss';
+
+const meta: Meta = {
+  title: 'v2/Design System/Colors',
+  parameters: {
+    docs: {
+      description: {
+        component: 'BKIT Design System color tokens including base colors, semantic colors, and theme mappings.'
+      }
+    }
+  }
+};
+
+export default meta;
+
+const ColorPalette = ({ title, colors }: { title: string; colors: Array<{ name: string; value: string; description?: string }> }) => (
+  <div className="color-palette">
+    <h3 className="color-palette__title">{title}</h3>
+    <div className="color-palette__grid">
+      {colors.map(({ name, value, description }) => (
+        <div key={name} className="color-swatch">
+          <div 
+            className="color-swatch__color" 
+            style={{ backgroundColor: value }}
+          />
+          <div className="color-swatch__info">
+            <div className="color-swatch__name">{name}</div>
+            <div className="color-swatch__value">{value}</div>
+            {description && <div className="color-swatch__description">{description}</div>}
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const BaseColors = () => (
+  <div className="design-tokens-story">
+    <div className="story-header">
+      <h1>Base Colors</h1>
+      <p>Foundational color palette for the BKIT design system</p>
+    </div>
+    
+    <ColorPalette
+      title="Neutrals"
+      colors={[
+        { name: 'White', value: 'var(--neutral-white)', description: 'Pure white' },
+        { name: 'Neutral 25', value: 'var(--neutral-25)', description: 'Almost white background' },
+        { name: 'Neutral 50', value: 'var(--neutral-50)', description: 'Light border' },
+        { name: 'Neutral 100', value: 'var(--neutral-100)', description: 'Disabled text' },
+        { name: 'Neutral 300', value: 'var(--neutral-300)', description: 'Secondary text' },
+        { name: 'Neutral 600', value: 'var(--neutral-600)', description: 'Primary text' },
+        { name: 'Black', value: 'var(--neutral-black)', description: 'Pure black' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Blues"
+      colors={[
+        { name: 'Blue 50', value: 'var(--blue-50)', description: 'Lightest blue background' },
+        { name: 'Blue 100', value: 'var(--blue-100)', description: 'Very light blue' },
+        { name: 'Blue 200', value: 'var(--blue-200)', description: 'Light blue' },
+        { name: 'Blue 300', value: 'var(--blue-300)', description: 'Medium light blue' },
+        { name: 'Blue 400', value: 'var(--blue-400)', description: 'Medium blue' },
+        { name: 'Blue 500', value: 'var(--blue-500)', description: 'Primary blue' },
+        { name: 'Blue 600', value: 'var(--blue-600)', description: 'Medium dark blue' },
+        { name: 'Blue 700', value: 'var(--blue-700)', description: 'Dark blue' },
+        { name: 'Blue 800', value: 'var(--blue-800)', description: 'Very dark blue' },
+        { name: 'Blue 900', value: 'var(--blue-900)', description: 'Darkest blue' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Cyans"
+      colors={[
+        { name: 'Cyan 50', value: 'var(--cyan-50)', description: 'Lightest cyan background' },
+        { name: 'Cyan 75', value: 'var(--cyan-75)', description: 'Extra light cyan' },
+        { name: 'Cyan 100', value: 'var(--cyan-100)', description: 'Very light cyan' },
+        { name: 'Cyan 200', value: 'var(--cyan-200)', description: 'Light cyan' },
+        { name: 'Cyan 300', value: 'var(--cyan-300)', description: 'Medium light cyan' },
+        { name: 'Cyan 400', value: 'var(--cyan-400)', description: 'Medium cyan' },
+        { name: 'Cyan 500', value: 'var(--cyan-500)', description: 'Primary cyan' },
+        { name: 'Cyan 600', value: 'var(--cyan-600)', description: 'Medium dark cyan' },
+        { name: 'Cyan 700', value: 'var(--cyan-700)', description: 'Dark cyan' },
+        { name: 'Cyan 800', value: 'var(--cyan-800)', description: 'Very dark cyan' },
+        { name: 'Cyan 900', value: 'var(--cyan-900)', description: 'Darkest cyan' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Greens"
+      colors={[
+        { name: 'Green 50', value: 'var(--green-50)', description: 'Lightest green background' },
+        { name: 'Green 100', value: 'var(--green-100)', description: 'Very light green' },
+        { name: 'Green 200', value: 'var(--green-200)', description: 'Light green' },
+        { name: 'Green 300', value: 'var(--green-300)', description: 'Medium light green' },
+        { name: 'Green 400', value: 'var(--green-400)', description: 'Medium green' },
+        { name: 'Green 500', value: 'var(--green-500)', description: 'Primary success green' },
+        { name: 'Green 600', value: 'var(--green-600)', description: 'Medium dark green' },
+        { name: 'Green 700', value: 'var(--green-700)', description: 'Dark green' },
+        { name: 'Green 800', value: 'var(--green-800)', description: 'Very dark green' },
+        { name: 'Green 900', value: 'var(--green-900)', description: 'Darkest green' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Reds"
+      colors={[
+        { name: 'Red 50', value: 'var(--red-50)', description: 'Lightest red background' },
+        { name: 'Red 100', value: 'var(--red-100)', description: 'Very light red' },
+        { name: 'Red 200', value: 'var(--red-200)', description: 'Light red' },
+        { name: 'Red 300', value: 'var(--red-300)', description: 'Medium light red' },
+        { name: 'Red 400', value: 'var(--red-400)', description: 'Medium red' },
+        { name: 'Red 500', value: 'var(--red-500)', description: 'Primary error red' },
+        { name: 'Red 600', value: 'var(--red-600)', description: 'Medium dark red' },
+        { name: 'Red 700', value: 'var(--red-700)', description: 'Dark red' },
+        { name: 'Red 800', value: 'var(--red-800)', description: 'Very dark red' },
+        { name: 'Red 900', value: 'var(--red-900)', description: 'Darkest red' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Oranges"
+      colors={[
+        { name: 'Orange 50', value: 'var(--orange-50)', description: 'Lightest orange background' },
+        { name: 'Orange 100', value: 'var(--orange-100)', description: 'Very light orange' },
+        { name: 'Orange 200', value: 'var(--orange-200)', description: 'Light orange' },
+        { name: 'Orange 300', value: 'var(--orange-300)', description: 'Medium light orange' },
+        { name: 'Orange 400', value: 'var(--orange-400)', description: 'Medium orange' },
+        { name: 'Orange 500', value: 'var(--orange-500)', description: 'Primary orange' },
+        { name: 'Orange 600', value: 'var(--orange-600)', description: 'Medium dark orange' },
+        { name: 'Orange 700', value: 'var(--orange-700)', description: 'Dark orange' },
+        { name: 'Orange 800', value: 'var(--orange-800)', description: 'Very dark orange' },
+        { name: 'Orange 900', value: 'var(--orange-900)', description: 'Darkest orange' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Yellows"
+      colors={[
+        { name: 'Yellow 50', value: 'var(--yellow-50)', description: 'Lightest yellow background' },
+        { name: 'Yellow 100', value: 'var(--yellow-100)', description: 'Very light yellow' },
+        { name: 'Yellow 200', value: 'var(--yellow-200)', description: 'Light yellow' },
+        { name: 'Yellow 300', value: 'var(--yellow-300)', description: 'Medium light yellow' },
+        { name: 'Yellow 400', value: 'var(--yellow-400)', description: 'Medium yellow' },
+        { name: 'Yellow 500', value: 'var(--yellow-500)', description: 'Primary yellow' },
+        { name: 'Yellow 600', value: 'var(--yellow-600)', description: 'Medium dark yellow' },
+        { name: 'Yellow 700', value: 'var(--yellow-700)', description: 'Dark yellow' },
+        { name: 'Yellow 800', value: 'var(--yellow-800)', description: 'Very dark yellow' },
+        { name: 'Yellow 900', value: 'var(--yellow-900)', description: 'Darkest yellow' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Pinks"
+      colors={[
+        { name: 'Pink 50', value: 'var(--pink-50)', description: 'Lightest pink background' },
+        { name: 'Pink 100', value: 'var(--pink-100)', description: 'Very light pink' },
+        { name: 'Pink 200', value: 'var(--pink-200)', description: 'Light pink' },
+        { name: 'Pink 300', value: 'var(--pink-300)', description: 'Medium light pink' },
+        { name: 'Pink 400', value: 'var(--pink-400)', description: 'Medium pink' },
+        { name: 'Pink 500', value: 'var(--pink-500)', description: 'Primary pink' },
+        { name: 'Pink 600', value: 'var(--pink-600)', description: 'Medium dark pink' },
+        { name: 'Pink 700', value: 'var(--pink-700)', description: 'Dark pink' },
+        { name: 'Pink 800', value: 'var(--pink-800)', description: 'Very dark pink' },
+        { name: 'Pink 900', value: 'var(--pink-900)', description: 'Darkest pink' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Teals"
+      colors={[
+        { name: 'Teal 50', value: 'var(--teal-50)', description: 'Lightest teal background' },
+        { name: 'Teal 100', value: 'var(--teal-100)', description: 'Very light teal' },
+        { name: 'Teal 200', value: 'var(--teal-200)', description: 'Light teal' },
+        { name: 'Teal 300', value: 'var(--teal-300)', description: 'Medium light teal' },
+        { name: 'Teal 400', value: 'var(--teal-400)', description: 'Medium teal' },
+        { name: 'Teal 500', value: 'var(--teal-500)', description: 'Primary teal' },
+        { name: 'Teal 600', value: 'var(--teal-600)', description: 'Medium dark teal' },
+        { name: 'Teal 700', value: 'var(--teal-700)', description: 'Dark teal' },
+        { name: 'Teal 800', value: 'var(--teal-800)', description: 'Very dark teal' },
+        { name: 'Teal 900', value: 'var(--teal-900)', description: 'Darkest teal' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Indigos"
+      colors={[
+        { name: 'Indigo 50', value: 'var(--indigo-50)', description: 'Lightest indigo background' },
+        { name: 'Indigo 100', value: 'var(--indigo-100)', description: 'Very light indigo' },
+        { name: 'Indigo 200', value: 'var(--indigo-200)', description: 'Light indigo' },
+        { name: 'Indigo 300', value: 'var(--indigo-300)', description: 'Medium light indigo' },
+        { name: 'Indigo 400', value: 'var(--indigo-400)', description: 'Medium indigo' },
+        { name: 'Indigo 500', value: 'var(--indigo-500)', description: 'Primary indigo' },
+        { name: 'Indigo 600', value: 'var(--indigo-600)', description: 'Medium dark indigo' },
+        { name: 'Indigo 700', value: 'var(--indigo-700)', description: 'Dark indigo' },
+        { name: 'Indigo 800', value: 'var(--indigo-800)', description: 'Very dark indigo' },
+        { name: 'Indigo 900', value: 'var(--indigo-900)', description: 'Darkest indigo' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Actions"
+      colors={[
+        { name: 'Actions Lightest', value: 'var(--actions-lightest)', description: 'Light action background' },
+        { name: 'Actions Light', value: 'var(--actions-light)', description: 'Light action accent' },
+        { name: 'Actions Regular', value: 'var(--actions-regular)', description: 'Primary action' },
+        { name: 'Actions Dark', value: 'var(--actions-dark)', description: 'Dark action' },
+        { name: 'Actions Darkest', value: 'var(--actions-darkest)', description: 'Darkest action' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Success"
+      colors={[
+        { name: 'Success Lightest', value: 'var(--success-lightest)', description: 'Success background' },
+        { name: 'Success Light', value: 'var(--success-light)', description: 'Light success' },
+        { name: 'Success Regular', value: 'var(--success-regular)', description: 'Primary success' },
+        { name: 'Success Dark', value: 'var(--success-dark)', description: 'Dark success' },
+        { name: 'Success Darkest', value: 'var(--success-darkest)', description: 'Darkest success' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Errors"
+      colors={[
+        { name: 'Error Lightest', value: 'var(--errors-lightest)', description: 'Error background' },
+        { name: 'Error Light', value: 'var(--errors-light)', description: 'Light error' },
+        { name: 'Error Regular', value: 'var(--errors-regular)', description: 'Primary error' },
+        { name: 'Error Dark', value: 'var(--errors-dark)', description: 'Dark error' },
+        { name: 'Error Darkest', value: 'var(--errors-darkest)', description: 'Darkest error' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Information"
+      colors={[
+        { name: 'Info Lightest', value: 'var(--information-lightest)', description: 'Info background' },
+        { name: 'Info Light', value: 'var(--information-light)', description: 'Light info' },
+        { name: 'Info Regular', value: 'var(--information-regular)', description: 'Primary info' },
+        { name: 'Info Dark', value: 'var(--information-dark)', description: 'Dark info' },
+        { name: 'Info Darkest', value: 'var(--information-darkest)', description: 'Darkest info' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Alert/Warning"
+      colors={[
+        { name: 'Alert Lightest', value: 'var(--alert-lightest)', description: 'Warning background' },
+        { name: 'Alert Light', value: 'var(--alert-light)', description: 'Light warning' },
+        { name: 'Alert Regular', value: 'var(--alert-regular)', description: 'Primary warning' },
+        { name: 'Alert Darker', value: 'var(--alert-darker)', description: 'Dark warning' },
+        { name: 'Alert Darkest', value: 'var(--alert-darkest)', description: 'Darkest warning' }
+      ]}
+    />
+  </div>
+);
+
+export const MainColors = () => (
+  <div className="design-tokens-story">
+    <div className="story-header">
+      <h1>Main Colors</h1>
+      <p>Semantic color abstractions using lightest → darkest naming conventions</p>
+    </div>
+
+    <ColorPalette
+      title="Purple Scale"
+      colors={[
+        { name: 'Purple Lightest', value: 'var(--purple-lightest)', description: 'Light purple background' },
+        { name: 'Purple Lighter', value: 'var(--purple-lighter)', description: 'Very light purple' },
+        { name: 'Purple Light', value: 'var(--purple-light)', description: 'Light purple accent' },
+        { name: 'Purple Regular', value: 'var(--purple-regular)', description: 'Primary purple' },
+        { name: 'Purple Dark', value: 'var(--purple-dark)', description: 'Dark purple' },
+        { name: 'Purple Darker', value: 'var(--purple-darker)', description: 'Very dark purple' },
+        { name: 'Purple Darkest', value: 'var(--purple-darkest)', description: 'Darkest purple' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Blue Scale"
+      colors={[
+        { name: 'Blue Lightest', value: 'var(--blue-lightest)', description: 'Light blue background' },
+        { name: 'Blue Lighter', value: 'var(--blue-lighter)', description: 'Very light blue' },
+        { name: 'Blue Light', value: 'var(--blue-light)', description: 'Light blue accent' },
+        { name: 'Blue Regular', value: 'var(--blue-regular)', description: 'Primary blue' },
+        { name: 'Blue Dark', value: 'var(--blue-dark)', description: 'Dark blue' },
+        { name: 'Blue Darker', value: 'var(--blue-darker)', description: 'Very dark blue' },
+        { name: 'Blue Darkest', value: 'var(--blue-darkest)', description: 'Darkest blue' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Green Scale"
+      colors={[
+        { name: 'Green Lightest', value: 'var(--green-lightest)', description: 'Light green background' },
+        { name: 'Green Lighter', value: 'var(--green-lighter)', description: 'Very light green' },
+        { name: 'Green Light', value: 'var(--green-light)', description: 'Light green accent' },
+        { name: 'Green Regular', value: 'var(--green-regular)', description: 'Primary green' },
+        { name: 'Green Dark', value: 'var(--green-dark)', description: 'Dark green' },
+        { name: 'Green Darker', value: 'var(--green-darker)', description: 'Very dark green' },
+        { name: 'Green Darkest', value: 'var(--green-darkest)', description: 'Darkest green' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Red Scale"
+      colors={[
+        { name: 'Red Lightest', value: 'var(--red-lightest)', description: 'Light red background' },
+        { name: 'Red Lighter', value: 'var(--red-lighter)', description: 'Very light red' },
+        { name: 'Red Light', value: 'var(--red-light)', description: 'Light red accent' },
+        { name: 'Red Regular', value: 'var(--red-regular)', description: 'Primary red' },
+        { name: 'Red Dark', value: 'var(--red-dark)', description: 'Dark red' },
+        { name: 'Red Darker', value: 'var(--red-darker)', description: 'Very dark red' },
+        { name: 'Red Darkest', value: 'var(--red-darkest)', description: 'Darkest red' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Tone & Shade Scales"
+      colors={[
+        { name: 'Tone Lightest', value: 'var(--tone-lightest)', description: 'Pure white' },
+        { name: 'Tone Lighter', value: 'var(--tone-lighter)', description: 'Almost white' },
+        { name: 'Tone Light', value: 'var(--tone-light)', description: 'Light neutral' },
+        { name: 'Tone Regular', value: 'var(--tone-regular)', description: 'Regular neutral' },
+        { name: 'Tone Dark', value: 'var(--tone-dark)', description: 'Dark neutral' },
+        { name: 'Tone Darker', value: 'var(--tone-darker)', description: 'Darker neutral' },
+        { name: 'Tone Darkest', value: 'var(--tone-darkest)', description: 'Darkest neutral' },
+        { name: 'Shade Lightest', value: 'var(--shade-lightest)', description: 'Light shade' },
+        { name: 'Shade Lighter', value: 'var(--shade-lighter)', description: 'Lighter shade' },
+        { name: 'Shade Light', value: 'var(--shade-light)', description: 'Light shade accent' },
+        { name: 'Shade Regular', value: 'var(--shade-regular)', description: 'Regular shade' },
+        { name: 'Shade Dark', value: 'var(--shade-dark)', description: 'Dark shade' },
+        { name: 'Shade Darker', value: 'var(--shade-darker)', description: 'Darker shade' },
+        { name: 'Shade Darkest', value: 'var(--shade-darkest)', description: 'Pure black' }
+      ]}
+    />
+  </div>
+);
+
+export const SemanticColors = () => (
+  <div className="design-tokens-story">
+    <div className="story-header">
+      <h1>Semantic Colors</h1>
+      <p>Purpose-driven color abstractions that communicate meaning and intent</p>
+    </div>
+
+    <ColorPalette
+      title="Highlight Colors"
+      colors={[
+        { name: 'Highlight Lightest', value: 'var(--highlight-lightest)', description: 'Lightest highlight color' },
+        { name: 'Highlight Lighter', value: 'var(--highlight-lighter)', description: 'Very light highlight' },
+        { name: 'Highlight Light', value: 'var(--highlight-light)', description: 'Light highlight accent' },
+        { name: 'Highlight Regular', value: 'var(--highlight-regular)', description: 'Primary highlight' },
+        { name: 'Highlight Dark', value: 'var(--highlight-dark)', description: 'Dark highlight' },
+        { name: 'Highlight Darker', value: 'var(--highlight-darker)', description: 'Very dark highlight' },
+        { name: 'Highlight Darkest', value: 'var(--highlight-darkest)', description: 'Darkest highlight' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Success Colors"
+      colors={[
+        { name: 'Success Lightest', value: 'var(--success-lightest)', description: 'Lightest success color' },
+        { name: 'Success Lighter', value: 'var(--success-lighter)', description: 'Very light success' },
+        { name: 'Success Light', value: 'var(--success-light)', description: 'Light success accent' },
+        { name: 'Success Regular', value: 'var(--success-regular)', description: 'Primary success' },
+        { name: 'Success Dark', value: 'var(--success-dark)', description: 'Dark success' },
+        { name: 'Success Darker', value: 'var(--success-darker)', description: 'Very dark success' },
+        { name: 'Success Darkest', value: 'var(--success-darkest)', description: 'Darkest success' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Error Colors"
+      colors={[
+        { name: 'Error Lightest', value: 'var(--errors-lightest)', description: 'Lightest error color' },
+        { name: 'Error Lighter', value: 'var(--errors-lighter)', description: 'Very light error' },
+        { name: 'Error Light', value: 'var(--errors-light)', description: 'Light error accent' },
+        { name: 'Error Regular', value: 'var(--errors-regular)', description: 'Primary error' },
+        { name: 'Error Dark', value: 'var(--errors-dark)', description: 'Dark error' },
+        { name: 'Error Darker', value: 'var(--errors-darker)', description: 'Very dark error' },
+        { name: 'Error Darkest', value: 'var(--errors-darkest)', description: 'Darkest error' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Action Colors"
+      colors={[
+        { name: 'Action Lightest', value: 'var(--actions-lightest)', description: 'Lightest action color' },
+        { name: 'Action Lighter', value: 'var(--actions-lighter)', description: 'Very light action' },
+        { name: 'Action Light', value: 'var(--actions-light)', description: 'Light action accent' },
+        { name: 'Action Regular', value: 'var(--actions-regular)', description: 'Primary action' },
+        { name: 'Action Dark', value: 'var(--actions-dark)', description: 'Dark action' },
+        { name: 'Action Darker', value: 'var(--actions-darker)', description: 'Very dark action' },
+        { name: 'Action Darkest', value: 'var(--actions-darkest)', description: 'Darkest action' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Information Colors"
+      colors={[
+        { name: 'Information Lightest', value: 'var(--information-lightest)', description: 'Lightest info color' },
+        { name: 'Information Lighter', value: 'var(--information-lighter)', description: 'Very light info' },
+        { name: 'Information Light', value: 'var(--information-light)', description: 'Light info accent' },
+        { name: 'Information Regular', value: 'var(--information-regular)', description: 'Primary info' },
+        { name: 'Information Dark', value: 'var(--information-dark)', description: 'Dark info' },
+        { name: 'Information Darker', value: 'var(--information-darker)', description: 'Very dark info' },
+        { name: 'Information Darkest', value: 'var(--information-darkest)', description: 'Darkest info' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Alert/Warning Colors"
+      colors={[
+        { name: 'Alert Lightest', value: 'var(--alert-lightest)', description: 'Lightest alert color' },
+        { name: 'Alert Lighter', value: 'var(--alert-lighter)', description: 'Very light alert' },
+        { name: 'Alert Light', value: 'var(--alert-light)', description: 'Light alert accent' },
+        { name: 'Alert Regular', value: 'var(--alert-regular)', description: 'Primary alert' },
+        { name: 'Alert Darker', value: 'var(--alert-darker)', description: 'Very dark alert' },
+        { name: 'Alert Darkest', value: 'var(--alert-darkest)', description: 'Darkest alert' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Danger Colors"
+      colors={[
+        { name: 'Danger Lightest', value: 'var(--danger-lightest)', description: 'Lightest danger color' },
+        { name: 'Danger Lighter', value: 'var(--danger-lighter)', description: 'Very light danger' },
+        { name: 'Danger Light', value: 'var(--danger-light)', description: 'Light danger accent' },
+        { name: 'Danger Regular', value: 'var(--danger-regular)', description: 'Primary danger' },
+        { name: 'Danger Dark', value: 'var(--danger-dark)', description: 'Dark danger' },
+        { name: 'Danger Darker', value: 'var(--danger-darker)', description: 'Very dark danger' },
+        { name: 'Danger Darkest', value: 'var(--danger-darkest)', description: 'Darkest danger' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Disabled Colors"
+      colors={[
+        { name: 'Disabled Lightest', value: 'var(--disabled-lightest)', description: 'Lightest disabled color' },
+        { name: 'Disabled Lighter', value: 'var(--disabled-lighter)', description: 'Very light disabled' },
+        { name: 'Disabled Light', value: 'var(--disabled-light)', description: 'Light disabled accent' },
+        { name: 'Disabled Regular', value: 'var(--disabled-regular)', description: 'Primary disabled' },
+        { name: 'Disabled Dark', value: 'var(--disabled-dark)', description: 'Dark disabled' },
+        { name: 'Disabled Darker', value: 'var(--disabled-darker)', description: 'Very dark disabled' },
+        { name: 'Disabled Darkest', value: 'var(--disabled-darkest)', description: 'Darkest disabled' }
+      ]}
+    />
+  </div>
+);
+
+export const LightThemeColors = () => (
+  <div className="design-tokens-story">
+    <div className="story-header">
+      <h1>Light Theme Colors</h1>
+      <p>Color palette optimized for light backgrounds</p>
+    </div>
+
+    <ColorPalette
+      title="Light Labels"
+      colors={[
+        { name: 'Label Primary', value: 'var(--label-primary)', description: 'Primary text on light' },
+        { name: 'Label Secondary', value: 'var(--label-secondary)', description: 'Secondary text' },
+        { name: 'Label Secondary Hover', value: 'var(--label-secondary-hover)', description: 'Secondary text hover' },
+        { name: 'Label White', value: 'var(--label-white)', description: 'White text' },
+        { name: 'Label Highlight', value: 'var(--label-highlight)', description: 'Highlighted text' },
+        { name: 'Label Action', value: 'var(--label-action)', description: 'Action text' },
+        { name: 'Label Danger', value: 'var(--label-danger)', description: 'Danger text' },
+        { name: 'Label Status Error', value: 'var(--label-status-error)', description: 'Error status text' },
+        { name: 'Label Status Success', value: 'var(--label-status-success)', description: 'Success status text' },
+        { name: 'Label Status Info', value: 'var(--label-status-info)', description: 'Info status text' },
+        { name: 'Label Status Alert', value: 'var(--label-status-alert)', description: 'Alert status text' },
+        { name: 'Label Status Disabled', value: 'var(--label-status-disabled)', description: 'Disabled text' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Light Surfaces"
+      colors={[
+        { name: 'Surface Primary', value: 'var(--surface-primary)', description: 'Main light background' },
+        { name: 'Surface Primary Hover', value: 'var(--surface-primary-hover)', description: 'Primary hover' },
+        { name: 'Surface Primary Pressed', value: 'var(--surface-primary-pressed)', description: 'Primary pressed' },
+        { name: 'Surface Secondary', value: 'var(--surface-secondary)', description: 'Secondary background' },
+        { name: 'Surface Secondary Hover', value: 'var(--surface-secondary-hover)', description: 'Secondary hover' },
+        { name: 'Surface Secondary Pressed', value: 'var(--surface-secondary-pressed)', description: 'Secondary pressed' },
+        { name: 'Surface Tertiary', value: 'var(--surface-tertiary)', description: 'Tertiary background' },
+        { name: 'Surface Tertiary Hover', value: 'var(--surface-tertiary-hover)', description: 'Tertiary hover' },
+        { name: 'Surface Tertiary Pressed', value: 'var(--surface-tertiary-pressed)', description: 'Tertiary pressed' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Light Status Surfaces"
+      colors={[
+        { name: 'Surface Status Success', value: 'var(--surface-status-success)', description: 'Light success background' },
+        { name: 'Surface Status Error', value: 'var(--surface-status-error)', description: 'Light error background' },
+        { name: 'Surface Status Alert', value: 'var(--surface-status-alert)', description: 'Light alert background' },
+        { name: 'Surface Status Info', value: 'var(--surface-status-info)', description: 'Light info background' },
+        { name: 'Surface Status Disabled', value: 'var(--surface-status-disabled)', description: 'Light disabled background' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Light Action & Danger Surfaces"
+      colors={[
+        { name: 'Surface Action Soft', value: 'var(--surface-action-soft)', description: 'Light action background' },
+        { name: 'Surface Action Soft Hover', value: 'var(--surface-action-soft-hover)', description: 'Action hover' },
+        { name: 'Surface Action Soft Pressed', value: 'var(--surface-action-soft-pressed)', description: 'Action pressed' },
+        { name: 'Surface Danger Soft', value: 'var(--surface-danger-soft)', description: 'Light danger background' },
+        { name: 'Surface Danger Soft Hover', value: 'var(--surface-danger-soft-hover)', description: 'Danger hover' },
+        { name: 'Surface Danger Soft Pressed', value: 'var(--surface-danger-soft-pressed)', description: 'Danger pressed' },
+        { name: 'Surface Highlight Soft', value: 'var(--surface-highlight-soft)', description: 'Light highlight background' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Light Color Surfaces"
+      colors={[
+        { name: 'Surface Red Soft', value: 'var(--surface-colour-red-soft)', description: 'Light red surface' },
+        { name: 'Surface Green Soft', value: 'var(--surface-colour-green-soft)', description: 'Light green surface' },
+        { name: 'Surface Blue Soft', value: 'var(--surface-colour-blue-soft)', description: 'Light blue surface' },
+        { name: 'Surface Orange Soft', value: 'var(--surface-colour-orange-soft)', description: 'Light orange surface' },
+        { name: 'Surface Yellow Soft', value: 'var(--surface-colour-yellow-soft)', description: 'Light yellow surface' },
+        { name: 'Surface Purple Soft', value: 'var(--surface-colour-purple-soft)', description: 'Light purple surface' },
+        { name: 'Surface Indigo Soft', value: 'var(--surface-colour-indigo-soft)', description: 'Light indigo surface' },
+        { name: 'Surface Cyan Soft', value: 'var(--surface-colour-cyan-soft)', description: 'Light cyan surface' },
+        { name: 'Surface Pink Soft', value: 'var(--surface-colour-pink-soft)', description: 'Light pink surface' },
+        { name: 'Surface Teal Soft', value: 'var(--surface-colour-teal-soft)', description: 'Light teal surface' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Light Borders"
+      colors={[
+        { name: 'Border Primary', value: 'var(--border-primary)', description: 'Primary border on light' },
+        { name: 'Border Secondary', value: 'var(--border-secondary)', description: 'Secondary border' },
+        { name: 'Border Selected', value: 'var(--border-selected)', description: 'Selected border' },
+        { name: 'Border Action', value: 'var(--border-action)', description: 'Action border' },
+        { name: 'Border Status Error', value: 'var(--border-status-error)', description: 'Error border' },
+        { name: 'Border Status Success', value: 'var(--border-status-success)', description: 'Success border' },
+        { name: 'Border Status Alert', value: 'var(--border-status-alert)', description: 'Alert border' },
+        { name: 'Border Status Info', value: 'var(--border-status-info)', description: 'Info border' },
+        { name: 'Border Status Disabled', value: 'var(--border-status-disabled)', description: 'Disabled border' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Light Fills"
+      colors={[
+        { name: 'Fill Primary', value: 'var(--fill-primary)', description: 'Primary fill on light' },
+        { name: 'Fill Secondary', value: 'var(--fill-secondary)', description: 'Secondary fill' },
+        { name: 'Fill White', value: 'var(--fill-white)', description: 'White fill' },
+        { name: 'Fill Action', value: 'var(--fill-action)', description: 'Action fill' },
+        { name: 'Fill Highlight', value: 'var(--fill-highlight)', description: 'Highlight fill' },
+        { name: 'Fill Danger', value: 'var(--fill-danger)', description: 'Danger fill' },
+        { name: 'Fill Status Success', value: 'var(--fill-status-success)', description: 'Success fill' },
+        { name: 'Fill Status Error', value: 'var(--fill-status-error)', description: 'Error fill' },
+        { name: 'Fill Status Alert', value: 'var(--fill-status-alert)', description: 'Alert fill' },
+        { name: 'Fill Status Info', value: 'var(--fill-status-info)', description: 'Info fill' },
+        { name: 'Fill Status Disabled', value: 'var(--fill-status-disabled)', description: 'Disabled fill' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Light Gradients"
+      colors={[
+        { name: 'Gradient Stop 1', value: 'var(--gradient-stop1)', description: 'First gradient stop' },
+        { name: 'Gradient Stop 2', value: 'var(--gradient-stop2)', description: 'Second gradient stop' },
+        { name: 'Gradient Stop 3', value: 'var(--gradient-stop3)', description: 'Third gradient stop' }
+      ]}
+    />
+  </div>
+);
+
+export const DarkThemeColors = () => (
+  <div className="design-tokens-story" data-theme="dark">
+    <div className="story-header">
+      <h1>Dark Theme Colors</h1>
+      <p>Color palette optimized for dark backgrounds</p>
+    </div>
+
+    <ColorPalette
+      title="Dark Labels"
+      colors={[
+        { name: 'Label Primary', value: 'var(--label-primary)', description: 'Primary text on dark' },
+        { name: 'Label Secondary', value: 'var(--label-secondary)', description: 'Secondary text' },
+        { name: 'Label Secondary Hover', value: 'var(--label-secondary-hover)', description: 'Secondary text hover' },
+        { name: 'Label White', value: 'var(--label-white)', description: 'White text' },
+        { name: 'Label Highlight', value: 'var(--label-highlight)', description: 'Highlighted text' },
+        { name: 'Label Action', value: 'var(--label-action)', description: 'Action text' },
+        { name: 'Label Danger', value: 'var(--label-danger)', description: 'Danger text' },
+        { name: 'Label Status Error', value: 'var(--label-status-error)', description: 'Error status text' },
+        { name: 'Label Status Success', value: 'var(--label-status-success)', description: 'Success status text' },
+        { name: 'Label Status Info', value: 'var(--label-status-info)', description: 'Info status text' },
+        { name: 'Label Status Alert', value: 'var(--label-status-alert)', description: 'Alert status text' },
+        { name: 'Label Status Disabled', value: 'var(--label-status-disabled)', description: 'Disabled text' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Dark Surfaces"
+      colors={[
+        { name: 'Surface Primary', value: 'var(--surface-primary)', description: 'Main dark background' },
+        { name: 'Surface Primary Hover', value: 'var(--surface-primary-hover)', description: 'Primary hover' },
+        { name: 'Surface Primary Pressed', value: 'var(--surface-primary-pressed)', description: 'Primary pressed' },
+        { name: 'Surface Secondary', value: 'var(--surface-secondary)', description: 'Secondary background' },
+        { name: 'Surface Secondary Hover', value: 'var(--surface-secondary-hover)', description: 'Secondary hover' },
+        { name: 'Surface Secondary Pressed', value: 'var(--surface-secondary-pressed)', description: 'Secondary pressed' },
+        { name: 'Surface Tertiary', value: 'var(--surface-tertiary)', description: 'Tertiary background' },
+        { name: 'Surface Tertiary Hover', value: 'var(--surface-tertiary-hover)', description: 'Tertiary hover' },
+        { name: 'Surface Tertiary Pressed', value: 'var(--surface-tertiary-pressed)', description: 'Tertiary pressed' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Dark Status Surfaces"
+      colors={[
+        { name: 'Surface Status Success', value: 'var(--surface-status-success)', description: 'Dark success background' },
+        { name: 'Surface Status Error', value: 'var(--surface-status-error)', description: 'Dark error background' },
+        { name: 'Surface Status Alert', value: 'var(--surface-status-alert)', description: 'Dark alert background' },
+        { name: 'Surface Status Info', value: 'var(--surface-status-info)', description: 'Dark info background' },
+        { name: 'Surface Status Disabled', value: 'var(--surface-status-disabled)', description: 'Dark disabled background' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Dark Action & Danger Surfaces"
+      colors={[
+        { name: 'Surface Action Soft', value: 'var(--surface-action-soft)', description: 'Dark action background' },
+        { name: 'Surface Action Soft Hover', value: 'var(--surface-action-soft-hover)', description: 'Action hover' },
+        { name: 'Surface Action Soft Pressed', value: 'var(--surface-action-soft-pressed)', description: 'Action pressed' },
+        { name: 'Surface Danger Soft', value: 'var(--surface-danger-soft)', description: 'Dark danger background' },
+        { name: 'Surface Danger Soft Hover', value: 'var(--surface-danger-soft-hover)', description: 'Danger hover' },
+        { name: 'Surface Danger Soft Pressed', value: 'var(--surface-danger-soft-pressed)', description: 'Danger pressed' },
+        { name: 'Surface Highlight Soft', value: 'var(--surface-highlight-soft)', description: 'Dark highlight background' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Dark Color Surfaces"
+      colors={[
+        { name: 'Surface Red Soft', value: 'var(--surface-colour-red-soft)', description: 'Dark red surface' },
+        { name: 'Surface Green Soft', value: 'var(--surface-colour-green-soft)', description: 'Dark green surface' },
+        { name: 'Surface Blue Soft', value: 'var(--surface-colour-blue-soft)', description: 'Dark blue surface' },
+        { name: 'Surface Orange Soft', value: 'var(--surface-colour-orange-soft)', description: 'Dark orange surface' },
+        { name: 'Surface Yellow Soft', value: 'var(--surface-colour-yellow-soft)', description: 'Dark yellow surface' },
+        { name: 'Surface Purple Soft', value: 'var(--surface-colour-purple-soft)', description: 'Dark purple surface' },
+        { name: 'Surface Indigo Soft', value: 'var(--surface-colour-indigo-soft)', description: 'Dark indigo surface' },
+        { name: 'Surface Cyan Soft', value: 'var(--surface-colour-cyan-soft)', description: 'Dark cyan surface' },
+        { name: 'Surface Pink Soft', value: 'var(--surface-colour-pink-soft)', description: 'Dark pink surface' },
+        { name: 'Surface Teal Soft', value: 'var(--surface-colour-teal-soft)', description: 'Dark teal surface' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Dark Borders"
+      colors={[
+        { name: 'Border Primary', value: 'var(--border-primary)', description: 'Primary border on dark' },
+        { name: 'Border Secondary', value: 'var(--border-secondary)', description: 'Secondary border' },
+        { name: 'Border Selected', value: 'var(--border-selected)', description: 'Selected border' },
+        { name: 'Border Action', value: 'var(--border-action)', description: 'Action border' },
+        { name: 'Border Status Error', value: 'var(--border-status-error)', description: 'Error border' },
+        { name: 'Border Status Success', value: 'var(--border-status-success)', description: 'Success border' },
+        { name: 'Border Status Alert', value: 'var(--border-status-alert)', description: 'Alert border' },
+        { name: 'Border Status Info', value: 'var(--border-status-info)', description: 'Info border' },
+        { name: 'Border Status Disabled', value: 'var(--border-status-disabled)', description: 'Disabled border' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Dark Fills"
+      colors={[
+        { name: 'Fill Primary', value: 'var(--fill-primary)', description: 'Primary fill on dark' },
+        { name: 'Fill Secondary', value: 'var(--fill-secondary)', description: 'Secondary fill' },
+        { name: 'Fill White', value: 'var(--fill-white)', description: 'White fill' },
+        { name: 'Fill Action', value: 'var(--fill-action)', description: 'Action fill' },
+        { name: 'Fill Highlight', value: 'var(--fill-highlight)', description: 'Highlight fill' },
+        { name: 'Fill Danger', value: 'var(--fill-danger)', description: 'Danger fill' },
+        { name: 'Fill Status Success', value: 'var(--fill-status-success)', description: 'Success fill' },
+        { name: 'Fill Status Error', value: 'var(--fill-status-error)', description: 'Error fill' },
+        { name: 'Fill Status Alert', value: 'var(--fill-status-alert)', description: 'Alert fill' },
+        { name: 'Fill Status Info', value: 'var(--fill-status-info)', description: 'Info fill' },
+        { name: 'Fill Status Disabled', value: 'var(--fill-status-disabled)', description: 'Disabled fill' }
+      ]}
+    />
+
+    <ColorPalette
+      title="Dark Gradients"
+      colors={[
+        { name: 'Gradient Stop 1', value: 'var(--gradient-stop1)', description: 'First gradient stop' },
+        { name: 'Gradient Stop 2', value: 'var(--gradient-stop2)', description: 'Second gradient stop' },
+        { name: 'Gradient Stop 3', value: 'var(--gradient-stop3)', description: 'Third gradient stop' }
+      ]}
+    />
+  </div>
+);
+
+export const Usage = () => (
+  <div className="design-tokens-story">
+    <div className="story-header">
+      <h1>Color Usage Guidelines</h1>
+      <p>Best practices for implementing BKIT colors</p>
+    </div>
+
+    <div className="usage-section">
+      <h3>Implementation</h3>
+      <div className="code-examples">
+        <div className="code-example">
+          <h4>CSS Custom Properties</h4>
+          <code>
+{`/* Use semantic tokens */
+.button-primary {
+  background: var(--actions-regular);
+  color: var(--tone-lightest);
+}
+
+/* Avoid direct color values */
+.button-primary {
+  background: #6200EE; /* ❌ Don't do this */
+}`}
+          </code>
+        </div>
+        
+      </div>
+    </div>
+  </div>
+);