@licklist/design 0.78.18 → 0.78.20

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'

package/src/v2/components/Typography/Typography.scss

@@ -0,0 +1,72 @@
+@import '../../styles/tokens/typography';
+
+.typography {
+  margin: 0;
+  padding: 0;
+}
+
+// Heading styles
+.typography-heading-xxl {
+  @include typography('heading.xxl');
+}
+
+.typography-heading-xl {
+  @include typography('heading.xl');
+}
+
+.typography-heading-h1 {
+  @include typography('heading.h1');
+}
+
+.typography-heading-h2 {
+  @include typography('heading.h2');
+}
+
+.typography-heading-h3 {
+  @include typography('heading.h3');
+}
+
+.typography-heading-h4 {
+  @include typography('heading.h4');
+}
+
+.typography-heading-h5 {
+  @include typography('heading.h5');
+}
+
+.typography-heading-h6 {
+  @include typography('heading.h6');
+}
+
+// Body text styles
+.typography-text-xl {
+  @include typography('text.xl');
+}
+
+.typography-text-large {
+  @include typography('text.large');
+}
+
+.typography-text-regular {
+  @include typography('text.regular');
+}
+
+.typography-text-small {
+  @include typography('text.small');
+}
+
+.typography-text-small-emphasis {
+  @include typography('text.small.emphasis');
+}
+
+.typography-text-small-bold {
+  @include typography('text.small.bold');
+}
+
+.typography-text-xs {
+  @include typography('text.xs');
+}
+
+.typography-text-xs-bold {
+  @include typography('text.xs.bold');
+}