@licklist/design 0.78.21 → 0.78.25

package/dist/v2/components/Typography/Typography.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,iBAAiB,GACzB,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,YAAY,GACZ,cAAc,GACd,YAAY,GACZ,qBAAqB,GACrB,iBAAiB,GACjB,SAAS,GACT,cAAc,CAAA;AAElB,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2BhD,CAAA"}

package/dist/v2/components/Typography/index.d.ts

@@ -1,3 +0,0 @@
-export { Typography } from './Typography';
-export type { TypographyProps, TypographyVariant } from './Typography';
-//# sourceMappingURL=index.d.ts.map

package/dist/v2/components/Typography/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/Typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA"}

package/src/v2/components/Colors/Colors.scss

@@ -1,64 +0,0 @@
-@import '../../styles/tokens/colors';
-
-.color-swatch {
-    display: flex;
-    gap: 24px;
-    align-items: center;
-    width: 100%;
-
-    &__preview {
-        width: 142px;
-        height: 48px;
-        border-radius: 16px;
-        border: 1px solid var(--color-border-primary);
-        flex-shrink: 0;
-    }
-
-    &__details {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    &__name {
-        font-family: 'Geist', sans-serif;
-        font-size: 15px;
-        font-weight: 600;
-        line-height: 18px;
-        color: var(--color-label-primary);
-    }
-
-    &__hex,
-    &__rgb {
-        font-family: 'Geist Mono', monospace;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 24px;
-        color: var(--color-label-primary);
-        background-color: var(--color-surface-hover);
-        padding: 4px 8px;
-        border-radius: 4px;
-        display: inline-block;
-        width: fit-content;
-    }
-}
-
-.colors-showcase {
-    margin-bottom: 48px;
-
-    &__title {
-        font-family: 'Geist', sans-serif;
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 24px;
-        color: var(--color-label-primary);
-        margin-bottom: 16px;
-    }
-
-    &__grid {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-    }
-}

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

@@ -1,143 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

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