@licklist/design 0.78.19 → 0.78.21

package/src/v2/components/Colors/Colors.stories.tsx

@@ -0,0 +1,143 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { ColorsShowcase } from './Colors'
+
+export default {
+    title: 'v2/Design System/Colors',
+    component: ColorsShowcase,
+    parameters: {
+        layout: 'padded',
+    },
+} as Meta
+
+type Story = StoryObj<typeof ColorsShowcase>
+
+const purples = {
+    title: 'Purples',
+    colors: [
+        { name: 'purple.50', hex: '#efe6fd', rgb: 'RGB: 239, 230, 253' },
+        { name: 'purple.100', hex: '#dccefb', rgb: 'RGB: 220, 206, 251' },
+        { name: 'purple.200', hex: '#c49af7', rgb: 'RGB: 196, 154, 247' },
+        { name: 'purple.300', hex: '#a866f3', rgb: 'RGB: 168, 102, 243' },
+        { name: 'purple.400', hex: '#8c33ef', rgb: 'RGB: 140, 51, 239' },
+        { name: 'purple.500', hex: '#7000eb', rgb: 'RGB: 112, 0, 235' },
+        { name: 'purple.600', hex: '#5a00bc', rgb: 'RGB: 90, 0, 188' },
+        { name: 'purple.700', hex: '#450091', rgb: 'RGB: 69, 0, 145' },
+        { name: 'purple.800', hex: '#2f0064', rgb: 'RGB: 47, 0, 100' },
+        { name: 'purple.900', hex: '#1a0036', rgb: 'RGB: 26, 0, 54' },
+    ],
+}
+
+const labels = {
+    title: 'Labels - Text Colors',
+    colors: [
+        { name: 'label.primary', hex: '#121e52', description: 'Main text color' },
+        { name: 'label.secondary', hex: '#626a90', description: 'Secondary text' },
+        { name: 'label.tertiary', hex: '#979db2', description: 'Tertiary text' },
+        { name: 'label.disabled', hex: '#c2c7d4', description: 'Disabled text' },
+        { name: 'label.inverse', hex: '#ffffff', description: 'Text on dark backgrounds' },
+    ],
+}
+
+const surfaces = {
+    title: 'Surfaces - Background Colors',
+    colors: [
+        { name: 'surface.primary', hex: '#ffffff', description: 'Main background' },
+        { name: 'surface.secondary', hex: '#f8f8fa', description: 'Secondary background' },
+        { name: 'surface.tertiary', hex: '#e8e9ef', description: 'Tertiary background' },
+        { name: 'surface.hover', hex: '#f0f0f2', description: 'Hover state' },
+        { name: 'surface.active', hex: '#e8e9ef', description: 'Active state' },
+    ],
+}
+
+const borders = {
+    title: 'Borders',
+    colors: [
+        { name: 'border.primary', hex: '#e8e9ef', description: 'Main border color' },
+        { name: 'border.secondary', hex: '#d4d6dd', description: 'Secondary border' },
+        { name: 'border.focus', hex: '#7000eb', description: 'Focus border' },
+    ],
+}
+
+const brand = {
+    title: 'Brand Colors',
+    colors: [
+        { name: 'primary', hex: '#7000eb', description: 'Main brand color' },
+        { name: 'primary.hover', hex: '#5a00bc', description: 'Hover state' },
+        { name: 'primary.active', hex: '#450091', description: 'Active state' },
+        { name: 'primary.focus', hex: '#8c33ef', description: 'Focus state' },
+    ],
+}
+
+const status = {
+    title: 'Status Colors (Legacy)',
+    colors: [
+        { name: 'success', hex: '#10b981', description: 'Success state' },
+        { name: 'success.light', hex: '#d1fae5', description: 'Success background' },
+        { name: 'error', hex: '#ef4444', description: 'Error state' },
+        { name: 'error.light', hex: '#fee2e2', description: 'Error background' },
+        { name: 'warning', hex: '#f59e0b', description: 'Warning state' },
+        { name: 'warning.light', hex: '#fef3c7', description: 'Warning background' },
+        { name: 'info', hex: '#3b82f6', description: 'Info state' },
+        { name: 'info.light', hex: '#dbeafe', description: 'Info background' },
+    ],
+}
+
+const statusTokens = {
+    title: 'Status Colors (Figma Alerts & Errors)',
+    colors: [
+        { name: 'success.fill', hex: '#2d6b18', description: 'Success fill/icon color' },
+        { name: 'success.background', hex: '#eef9ea', description: 'Success background' },
+        { name: 'success.border', hex: '#c9ecbd', description: 'Success border color' },
+        { name: 'error.fill', hex: '#cc3c35', description: 'Error fill/icon color' },
+        { name: 'error.background', hex: '#fceceb', description: 'Error background' },
+        { name: 'error.border', hex: '#f5c4c2', description: 'Error border color' },
+        { name: 'alert.fill', hex: '#fd7e14', description: 'Alert fill/icon color' },
+        { name: 'alert.background', hex: '#fcf6e7', description: 'Alert background' },
+        { name: 'alert.border', hex: '#f6e3b4', description: 'Alert border color' },
+        { name: 'info.fill', hex: '#0e8ce2', description: 'Info fill/icon color' },
+        { name: 'info.background', hex: '#e7f4fc', description: 'Info background' },
+        { name: 'info.border', hex: '#b4dbf6', description: 'Info border color' },
+    ],
+}
+
+export const PurpleScale: Story = {
+    render: () => <ColorsShowcase {...purples} />,
+}
+
+export const Labels: Story = {
+    render: () => <ColorsShowcase {...labels} />,
+}
+
+export const Surfaces: Story = {
+    render: () => <ColorsShowcase {...surfaces} />,
+}
+
+export const Borders: Story = {
+    render: () => <ColorsShowcase {...borders} />,
+}
+
+export const Brand: Story = {
+    render: () => <ColorsShowcase {...brand} />,
+}
+
+export const Status: Story = {
+    render: () => <ColorsShowcase {...status} />,
+}
+
+export const StatusTokens: Story = {
+    render: () => <ColorsShowcase {...statusTokens} />,
+}
+
+export const AllColors: Story = {
+    render: () => (
+        <div>
+            <ColorsShowcase {...purples} />
+            <ColorsShowcase {...labels} />
+            <ColorsShowcase {...surfaces} />
+            <ColorsShowcase {...borders} />
+            <ColorsShowcase {...brand} />
+            <ColorsShowcase {...status} />
+        </div>
+    ),
+}

package/src/v2/components/Colors/Colors.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import './Colors.scss'
+
+interface ColorSwatchProps {
+    name: string
+    hex: string
+    rgb?: string
+    className?: string
+}
+
+export const ColorSwatch: React.FC<ColorSwatchProps> = ({ name, hex, rgb, className }) => {
+    return (
+        <div className={`color-swatch ${className || ''}`}>
+            <div className="color-swatch__preview" style={{ backgroundColor: hex }} />
+            <div className="color-swatch__details">
+                <div className="color-swatch__name">{name}</div>
+                <div className="color-swatch__hex">{hex}</div>
+                {rgb && <div className="color-swatch__rgb">{rgb}</div>}
+            </div>
+        </div>
+    )
+}
+
+export interface ColorGroup {
+    title: string
+    colors: {
+        name: string
+        hex: string
+        rgb?: string
+        description?: string
+    }[]
+}
+
+export const ColorsShowcase: React.FC<ColorGroup> = ({ title, colors }) => {
+    return (
+        <div className="colors-showcase">
+            <h3 className="colors-showcase__title">{title}</h3>
+            <div className="colors-showcase__grid">
+                {colors.map((color) => (
+                    <ColorSwatch
+                        key={color.name}
+                        name={color.name}
+                        hex={color.hex}
+                        rgb={color.rgb}
+                        className={color.description ? 'color-swatch--with-description' : ''}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}

package/src/v2/components/Colors/ColorsAliases.stories.tsx

@@ -0,0 +1,285 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+export default {
+    title: 'v2/Design System/Color Aliases',
+    parameters: {
+        layout: 'padded',
+    },
+} as Meta
+
+type Story = StoryObj
+
+export const Labels: Story = {
+    render: () => (
+        <div>
+            <h2>Label Colors - Text Alias Tokens</h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '24px' }}>
+                <div style={{ padding: '16px', backgroundColor: '#ffffff', border: '1px solid #e8e9ef', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-primary, #121e52)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        label-primary
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-primary, #121e52)' }}>
+                        var(--labels-main-label-primary, #121e52)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #121e52
+                    </div>
+                </div>
+
+                <div style={{ padding: '16px', backgroundColor: '#ffffff', border: '1px solid #e8e9ef', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-secondary, #626a90)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        label-secondary
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-secondary, #626a90)' }}>
+                        var(--labels-main-label-secondary, #626a90)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #626a90
+                    </div>
+                </div>
+
+                <div style={{ padding: '16px', backgroundColor: '#ffffff', border: '1px solid #e8e9ef', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-tertiary, #979db2)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        label-tertiary
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-tertiary, #979db2)' }}>
+                        var(--labels-main-label-tertiary, #979db2)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #979db2
+                    </div>
+                </div>
+
+                <div style={{ padding: '16px', backgroundColor: '#ffffff', border: '1px solid #e8e9ef', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-disabled, #c2c7d4)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        label-disabled
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-disabled, #c2c7d4)' }}>
+                        var(--labels-main-label-disabled, #c2c7d4)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #c2c7d4
+                    </div>
+                </div>
+
+                <div style={{ padding: '16px', backgroundColor: '#14215a', border: '1px solid #e8e9ef', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-inverse, #ffffff)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        label-inverse
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-inverse, #ffffff)' }}>
+                        var(--labels-main-label-inverse, #ffffff)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #ffffff
+                    </div>
+                </div>
+            </div>
+        </div>
+    ),
+}
+
+export const Surfaces: Story = {
+    render: () => (
+        <div>
+            <h2>Surface Colors - Background Alias Tokens</h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '24px' }}>
+                <div style={{ padding: '16px', backgroundColor: 'var(--surfaces-main-background-primary, #ffffff)', border: '1px solid #e8e9ef', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-primary, #121e52)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        background-primary
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-primary, #121e52)' }}>
+                        var(--surfaces-main-background-primary, #ffffff)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #ffffff
+                    </div>
+                </div>
+
+                <div style={{ padding: '16px', backgroundColor: 'var(--surfaces-main-background-secondary, #f8f8fa)', border: '1px solid #e8e9ef', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-primary, #121e52)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        background-secondary
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-primary, #121e52)' }}>
+                        var(--surfaces-main-background-secondary, #f8f8fa)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #f8f8fa
+                    </div>
+                </div>
+
+                <div style={{ padding: '16px', backgroundColor: 'var(--surfaces-main-background-secondary-hover, #e8e9ef)', border: '1px solid #e8e9ef', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-primary, #121e52)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        background-secondary-hover
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-primary, #121e52)' }}>
+                        var(--surfaces-main-background-secondary-hover, #e8e9ef)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #e8e9ef
+                    </div>
+                </div>
+            </div>
+        </div>
+    ),
+}
+
+export const Borders: Story = {
+    render: () => (
+        <div>
+            <h2>Border Colors - Alias Tokens</h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '24px' }}>
+                <div style={{ padding: '16px', backgroundColor: '#ffffff', border: '2px solid var(--borders-main-border-primary, #e8e9ef)', borderRadius: '8px' }}>
+                    <div style={{ color: 'var(--labels-main-label-primary, #121e52)', fontSize: '15px', fontWeight: 600, marginBottom: '8px' }}>
+                        border-primary
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--labels-main-label-primary, #121e52)' }}>
+                        var(--borders-main-border-primary, #e8e9ef)
+                    </div>
+                    <div style={{ fontFamily: 'monospace', fontSize: '12px', marginTop: '4px', color: '#626a90' }}>
+                        #e8e9ef
+                    </div>
+                </div>
+            </div>
+        </div>
+    ),
+}
+
+export const AdditionalAliases: Story = {
+    render: () => (
+        <div>
+            <h2>Additional Alias Tokens</h2>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', marginTop: '24px' }}>
+                {/* Labels */}
+                <div>
+                    <h3 style={{ marginBottom: '12px', color: 'var(--labels-main-label-primary, #121e52)', fontSize: '18px', fontWeight: 600 }}>Labels</h3>
+                    {['primary', 'secondary', 'tertiary', 'disabled', 'inverse'].map((label) => (
+                        <div key={label} style={{ padding: '8px', backgroundColor: label === 'inverse' ? '#14215a' : '#ffffff', borderRadius: '4px', marginBottom: '8px' }}>
+                            <div style={{ fontFamily: 'monospace', fontSize: '12px', color: label === 'inverse' ? '#ffffff' : '#121e52' }}>
+                                --labels-main-label-{label}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Surfaces */}
+                <div>
+                    <h3 style={{ marginBottom: '12px', color: 'var(--labels-main-label-primary, #121e52)', fontSize: '18px', fontWeight: 600 }}>Surfaces</h3>
+                    {['primary', 'secondary', 'secondary-hover', 'tertiary', 'active', 'focus'].map((surface) => (
+                        <div key={surface} style={{ padding: '8px', backgroundColor: '#ffffff', borderRadius: '4px', marginBottom: '8px' }}>
+                            <div style={{ fontFamily: 'monospace', fontSize: '12px', color: '#121e52' }}>
+                                --surfaces-main-background-{surface.replace(/-/g, '-')}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Borders */}
+                <div>
+                    <h3 style={{ marginBottom: '12px', color: 'var(--labels-main-label-primary, #121e52)', fontSize: '18px', fontWeight: 600 }}>Borders</h3>
+                    {['primary', 'secondary', 'colour-overlay', 'focus'].map((border) => (
+                        <div key={border} style={{ padding: '8px', backgroundColor: '#ffffff', borderRadius: '4px', marginBottom: '8px' }}>
+                            <div style={{ fontFamily: 'monospace', fontSize: '12px', color: '#121e52' }}>
+                                --borders-main-border-{border.replace(/-/g, '-')}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Fills */}
+                <div>
+                    <h3 style={{ marginBottom: '12px', color: 'var(--labels-main-label-primary, #121e52)', fontSize: '18px', fontWeight: 600 }}>Fills</h3>
+                    {['primary', 'secondary', 'disabled'].map((fill) => (
+                        <div key={fill} style={{ padding: '8px', backgroundColor: '#ffffff', borderRadius: '4px', marginBottom: '8px' }}>
+                            <div style={{ fontFamily: 'monospace', fontSize: '12px', color: '#121e52' }}>
+                                --fills-main-fill-{fill}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Color Surfaces */}
+                <div>
+                    <h3 style={{ marginBottom: '12px', color: 'var(--labels-main-label-primary, #121e52)', fontSize: '18px', fontWeight: 600 }}>Color Surfaces</h3>
+                    {['teal', 'orange', 'green', 'red'].map((colour) => (
+                        <div key={colour} style={{ padding: '8px', backgroundColor: '#ffffff', borderRadius: '4px', marginBottom: '8px' }}>
+                            <div style={{ fontFamily: 'monospace', fontSize: '12px', color: '#121e52' }}>
+                                --surfaces-colour-{colour}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Spacing Shortcuts */}
+                <div>
+                    <h3 style={{ marginBottom: '12px', color: 'var(--labels-main-label-primary, #121e52)', fontSize: '18px', fontWeight: 600 }}>Spacing Shortcuts</h3>
+                    {['25', '50', '100'].map((spacing) => (
+                        <div key={spacing} style={{ padding: '8px', backgroundColor: '#ffffff', borderRadius: '4px', marginBottom: '8px' }}>
+                            <div style={{ fontFamily: 'monospace', fontSize: '12px', color: '#121e52' }}>
+                                --spacing-{spacing}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Radius Shortcuts */}
+                <div>
+                    <h3 style={{ marginBottom: '12px', color: 'var(--labels-main-label-primary, #121e52)', fontSize: '18px', fontWeight: 600 }}>Radius Shortcuts</h3>
+                    <div style={{ padding: '8px', backgroundColor: '#ffffff', borderRadius: '4px' }}>
+                        <div style={{ fontFamily: 'monospace', fontSize: '12px', color: '#121e52' }}>
+                            --radius-50
+                        </div>
+                    </div>
+                </div>
+
+                {/* Opacity Tokens */}
+                <div>
+                    <h3 style={{ marginBottom: '12px', color: 'var(--labels-main-label-primary, #121e52)', fontSize: '18px', fontWeight: 600 }}>Opacity Aliases</h3>
+                    {[100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0].map((opacity) => (
+                        <div key={opacity} style={{ padding: '8px', backgroundColor: '#ffffff', borderRadius: '4px', marginBottom: '8px' }}>
+                            <div style={{ fontFamily: 'monospace', fontSize: '12px', color: '#121e52' }}>
+                                --opacity-{opacity}-percent
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    ),
+}
+
+export const Usage: Story = {
+    render: () => (
+        <div>
+            <h2>Using Color Aliases</h2>
+            <div style={{ marginTop: '24px' }}>
+                <h3 style={{ marginBottom: '16px', color: 'var(--labels-main-label-primary, #121e52)' }}>In CSS:</h3>
+                <pre style={{ background: '#f8f8fa', padding: '16px', borderRadius: '8px', fontFamily: 'monospace', fontSize: '14px' }}>
+                    {`.my-text {
+  color: var(--labels-main-label-primary, #121e52);
+}
+
+.my-background {
+  background-color: var(--surfaces-main-background-primary, #ffffff);
+  border: 1px solid var(--borders-main-border-primary, #e8e9ef);
+}`}
+                </pre>
+            </div>
+            <div style={{ marginTop: '24px' }}>
+                <h3 style={{ marginBottom: '16px', color: 'var(--labels-main-label-primary, #121e52)' }}>In SCSS (using mixins):</h3>
+                <pre style={{ background: '#f8f8fa', padding: '16px', borderRadius: '8px', fontFamily: 'monospace', fontSize: '14px' }}>
+                    {`@import 'styles/tokens/aliases';
+
+.my-text {
+  @include label-primary;
+}
+
+.my-background {
+  @include surface-primary;
+  @include border-primary;
+}`}
+                </pre>
+            </div>
+        </div>
+    ),
+}

package/src/v2/components/Colors/Sizes.stories.tsx

@@ -0,0 +1,141 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+export default {
+    title: 'v2/Design System/Size Tokens',
+    parameters: {
+        layout: 'padded',
+    },
+} as Meta
+
+type Story = StoryObj
+
+export const Radius: Story = {
+    render: () => (
+        <div>
+            <h2>Radius Tokens - Border Radius</h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '24px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
+                        zero
+                    </div>
+                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-zero)', backgroundColor: '#121e52' }} />
+                    <div style={{ flex: 1 }} />
+                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>0px</div>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
+                        xs
+                    </div>
+                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-xs)', backgroundColor: '#121e52' }} />
+                    <div style={{ flex: 1 }} />
+                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>1px</div>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
+                        sm
+                    </div>
+                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-sm)', backgroundColor: '#121e52' }} />
+                    <div style={{ flex: 1 }} />
+                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>2px</div>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
+                        md
+                    </div>
+                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-md)', backgroundColor: '#121e52' }} />
+                    <div style={{ flex: 1 }} />
+                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>4px</div>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
+                        reg
+                    </div>
+                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-reg)', backgroundColor: '#121e52' }} />
+                    <div style={{ flex: 1 }} />
+                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>8px</div>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
+                        lg
+                    </div>
+                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-lg)', backgroundColor: '#121e52' }} />
+                    <div style={{ flex: 1 }} />
+                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>16px</div>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+                    <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '50px' }}>
+                        xl
+                    </div>
+                    <div style={{ width: '41px', height: '41px', border: '1px solid #e7e8ea', borderRadius: 'var(--radius-xl)', backgroundColor: '#121e52' }} />
+                    <div style={{ flex: 1 }} />
+                    <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right' }}>24px</div>
+                </div>
+            </div>
+        </div>
+    ),
+}
+
+export const Spacing: Story = {
+    render: () => (
+        <div>
+            <h2>Spacing Tokens</h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '24px' }}>
+                {[
+                    { token: 'zero', value: '0px' },
+                    { token: 'xxs', value: '1px' },
+                    { token: 'xs', value: '2px' },
+                    { token: 'sm', value: '4px' },
+                    { token: 'md', value: '8px' },
+                    { token: 'reg', value: '16px' },
+                    { token: 'lg', value: '24px' },
+                    { token: 'xl', value: '32px' },
+                    { token: 'xxl', value: '64px' },
+                    { token: 'super', value: '128px' },
+                ].map(({ token, value }) => (
+                    <div key={token} style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+                        <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', minWidth: '80px' }}>
+                            {token}
+                        </div>
+                        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+                            <div style={{ width: '32px', height: '32px', backgroundColor: '#121e52', borderRadius: '4px' }} />
+                            <div style={{ height: '32px', backgroundColor: '#1f9ab5', opacity: 0.4, width: value, borderLeft: '1px solid #71e6ff', borderRight: '1px solid #71e6ff' }} />
+                            <div style={{ width: '32px', height: '32px', backgroundColor: '#121e52', borderRadius: '4px' }} />
+                        </div>
+                        <div style={{ fontFamily: 'Geist', fontSize: '16px', color: '#121e52', textAlign: 'right', minWidth: '60px' }}>{value}</div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    ),
+}
+
+export const Opacity: Story = {
+    render: () => (
+        <div>
+            <h2>Opacity Tokens</h2>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: '16px', marginTop: '24px' }}>
+                {[100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0].map((opacity) => (
+                    <div key={opacity} style={{ textAlign: 'center' }}>
+                        <div style={{ width: '94px', height: '94px', backgroundColor: '#121e52', opacity: `var(--opacity-${opacity})`, border: '1px solid #e8e9ef', borderRadius: '47px', margin: '0 auto 16px' }} />
+                        <div style={{ fontFamily: 'Geist', fontSize: '15px', fontWeight: 600, color: '#121e52', marginBottom: '8px' }}>
+                            {opacity}%
+                        </div>
+                        <div style={{ fontFamily: 'Geist Mono', fontSize: '14px', color: '#121e52', backgroundColor: '#e8e9ef', padding: '4px 8px', borderRadius: '4px', display: 'inline-block' }}>
+                            {opacity}
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <p style={{ marginTop: '24px', fontFamily: 'Geist', fontSize: '18px', color: '#121e52' }}>
+                We can interpolate for more refined opacities between the bands eg: 23% = 23 token value.
+            </p>
+        </div>
+    ),
+}

package/src/v2/components/Colors/index.ts

@@ -0,0 +1,2 @@
+export { ColorsShowcase, ColorSwatch } from './Colors'
+export type { ColorGroup } from './Colors'