@repobit/dex-system-design 0.5.0 → 0.6.0

package/src/tokens/tokens.stories.js

@@ -0,0 +1,67 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Design Tokens/Colors',
+};
+
+const colorGroups = {
+  blue: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
+  red: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
+  green: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
+  yellow: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
+  neutral: ['0', '25', '50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950', '1000'],
+};
+
+export const Colors = () => html`
+  <style>
+    .color-group {
+      margin-bottom: 32px;
+    }
+    .color-group-title {
+      font-family: var(--font-family-sans);
+      font-weight: 600;
+      font-size: var(--heading-medium);
+      margin-bottom: 16px;
+      text-transform: capitalize;
+    }
+    .color-swatch {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 80px;
+      height: 80px;
+      margin: 6px;
+      border-radius: 8px;
+      box-shadow: 0 0 4px rgba(0,0,0,0.1);
+      color: white;
+      font-family: var(--font-family-mono);
+      font-size: 12px;
+      text-align: center;
+      user-select: none;
+    }
+    .color-label {
+      margin-top: 6px;
+      color: var(--color-neutral-900);
+      font-weight: 600;
+      font-family: var(--font-family-sans);
+      font-size: 10px;
+      white-space: nowrap;
+    }
+  </style>
+
+  ${Object.entries(colorGroups).map(([group, shades]) => html`
+    <section class="color-group">
+      <h3 class="color-group-title">${group}</h3>
+      ${shades.map(shade => {
+        const varName = `--color-${group}-${shade}`;
+        return html`
+          <div class="color-swatch" style="background-color: var(${varName})">
+            <div>${shade}</div>
+            <div class="color-label">${varName}</div>
+          </div>
+        `;
+      })}
+    </section>
+  `)}
+`;

package/src/tokens/typography.stories.js

@@ -0,0 +1,69 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Design Tokens/Typography',
+};
+
+const typographyTokens = {
+  families: {
+    'Sans': 'var(--font-family-sans, "IBM Plex Sans", Arial, sans-serif)',
+    'Mono': 'var(--font-family-mono, "IBM Plex Mono", monospace)',
+  },
+  sizes: {
+    xs: 'var(--font-size-xs, 0.75rem)',
+    sm: 'var(--font-size-sm, 0.875rem)',
+    md: 'var(--font-size-md, 1rem)',
+    lg: 'var(--font-size-lg, 1.25rem)',
+    xl: 'var(--font-size-xl, 1.5rem)',
+  },
+  weights: {
+    regular: 'var(--font-weight-regular, 400)',
+    semibold: 'var(--font-weight-semibold, 600)',
+    bold: 'var(--font-weight-bold, 700)',
+  },
+};
+
+export const Typography = () => html`
+  <style>
+    h3 {
+      font-family: var(--font-family-sans);
+      font-weight: 600;
+      font-size: var(--heading-medium);
+      margin-bottom: 16px;
+      text-transform: capitalize;
+    }
+    .typo-family-sample {
+      margin-bottom: 12px;
+      font-size: 1rem;
+    }
+    .typo-size-sample {
+      margin-bottom: 8px;
+    }
+    .typo-weight-sample {
+      margin-bottom: 8px;
+    }
+  </style>
+
+  <section>
+    <h3>Font Families</h3>
+    ${Object.entries(typographyTokens.families).map(([name, family]) => html`
+      <div class="typo-family-sample" style="font-family: ${family}">
+        This text uses <strong>${name}</strong> font family.
+      </div>
+    `)}
+
+    <h3>Font Sizes</h3>
+    ${Object.entries(typographyTokens.sizes).map(([sizeName, sizeValue]) => html`
+      <div class="typo-size-sample" style="font-size: ${sizeValue}">
+        Font size <strong>${sizeName}</strong> (${sizeValue})
+      </div>
+    `)}
+
+    <h3>Font Weights</h3>
+    ${Object.entries(typographyTokens.weights).map(([weightName, weightValue]) => html`
+      <div class="typo-weight-sample" style="font-weight: ${weightValue}">
+        Font weight <strong>${weightName}</strong> (${weightValue})
+      </div>
+    `)}
+  </section>
+`;

package/src/tokens/tokens.js

@@ -1,206 +0,0 @@
-export const tokens = {
-  colors: {
-    blue: {
-      50 : '#F0F7FF',
-      100: '#D6E8FF',
-      200: '#9EC8FF',
-      300: '#6BABFF',
-      400: '#338BFF',
-      500: '#006dff',
-      600: '#0059D6',
-      700: '#0045AD',
-      800: '#003385',
-      900: '#00225C',
-      950: '#001947'
-    },
-    red: {
-      50 : '#FFF0F0',
-      100: '#FFD6D6',
-      200: '#FF9E9E',
-      300: '#FF6B6B',
-      400: '#FF3333',
-      500: '#FF0000',
-      600: '#D60000',
-      700: '#AD0000',
-      800: '#850000',
-      900: '#5C0000',
-      950: '#470000'
-    },
-    green: {
-      50 : '#EDFDF1',
-      100: '#D1FADC',
-      200: '#9AF4B4',
-      300: '#63EE8D',
-      400: '#2CE767',
-      500: '#15C14F',
-      600: '#12A641',
-      700: '#0E8532',
-      800: '#0B6A26',
-      900: '#084A1A',
-      950: '#063C14'
-    },
-    yellow: {
-      50 : '#FFFBF0',
-      100: '#FFF5D6',
-      200: '#FFE89E',
-      300: '#FFDC6B',
-      400: '#FFCF33',
-      500: '#FFC400',
-      600: '#D6A000',
-      700: '#AD7F00',
-      800: '#855F00',
-      900: '#5C4000',
-      950: '#473100'
-    },
-    neutral: {
-      0   : '#FFFFFF',
-      25  : '#FAFAFA',
-      50  : '#f1f2f3',
-      100 : '#e1e3e5',
-      200 : '#c5c9ce',
-      300 : '#a6adb4',
-      400 : '#88909b',
-      500 : '#6c7580',
-      600 : '#565e66',
-      700 : '#41474d',
-      800 : '#2c3035',
-      900 : '#151719',
-      950 : '#0c0d0e',
-      1000: '#000000'
-    }
-  },
-
-  fontSize: {
-    display: {
-      default: {
-        xxsmall: '44px',
-        xsmall : '48px',
-        small  : '52px',
-        medium : '56px',
-        large  : '60px',
-        xlarge : '64px'
-      },
-      mobile: {
-        xxsmall: '34px',
-        xsmall : '36px',
-        small  : '38px',
-        medium : '40px',
-        large  : '44px',
-        xlarge : '48px'
-      }
-    },
-    heading: {
-      xxsmall: '18px',
-      xsmall : '20px',
-      small  : '24px',
-      medium : '28px',
-      large  : '32px',
-      xlarge : '36px',
-      xxlarge: '40px'
-    },
-    body: {
-      small : '13px',
-      medium: '14px',
-      large : '16px',
-      xlarge: '18px'
-    },
-    caption: {
-      small: '11px',
-      large: '12px'
-    }
-  },
-
-  spacing: {
-    0   : '0',
-    1   : '1px',
-    2   : '2px',
-    4   : '4px',
-    6   : '6px',
-    8   : '8px',
-    10  : '10px',
-    12  : '12px',
-    14  : '14px',
-    16  : '16px',
-    18  : '18px',
-    20  : '20px',
-    24  : '24px',
-    32  : '32px',
-    36  : '36px',
-    40  : '40px',
-    44  : '44px',
-    52  : '52px',
-    64  : '64px',
-    full: '99999999999999999999'
-  },
-
-  fonts: {
-    mono: {
-      family : "'IBM Plex Mono', monospace",
-      weights: {
-        light   : 300,
-        regular : 400,
-        medium  : 500,
-        semibold: 600,
-        bold    : 700
-      },
-      styles: {
-        normal: 'normal',
-        italic: 'italic'
-      }
-    },
-    sans: {
-      family : "'IBM Plex Sans', sans-serif",
-      weights: {
-        light   : 300,
-        regular : 400,
-        medium  : 500,
-        semibold: 600,
-        bold    : 700
-      },
-      styles: {
-        normal: 'normal',
-        italic: 'italic'
-      }
-    }
-  },
-
-  fontFiles: {
-    mono: {
-      bold          : '/assets/fonts/IBMPlexMono-Bold.woff2',
-      boldItalic    : '/assets/fonts/IBMPlexMono-BoldItalic.woff2',
-      italic        : '/assets/fonts/IBMPlexMono-Italic.woff2',
-      light         : '/assets/fonts/IBMPlexMono-Light.woff2',
-      lightItalic   : '/assets/fonts/IBMPlexMono-LightItalic.woff2',
-      medium        : '/assets/fonts/IBMPlexMono-Medium.woff2',
-      mediumItalic  : '/assets/fonts/IBMPlexMono-MediumItalic.woff2',
-      regular       : '/assets/fonts/IBMPlexMono-Regular.woff2',
-      semiBold      : '/assets/fonts/IBMPlexMono-SemiBold.woff2',
-      semiBoldItalic: '/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2'
-    },
-    sans: {
-      bold          : '/assets/fonts/IBMPlexSans-Bold.woff2',
-      boldItalic    : '/assets/fonts/IBMPlexSans-BoldItalic.woff2',
-      italic        : '/assets/fonts/IBMPlexSans-Italic.woff2',
-      light         : '/assets/fonts/IBMPlexSans-Light.woff2',
-      lightItalic   : '/assets/fonts/IBMPlexSans-LightItalic.woff2',
-      medium        : '/assets/fonts/IBMPlexSans-Medium.woff2',
-      mediumItalic  : '/assets/fonts/IBMPlexSans-MediumItalic.woff2',
-      regular       : '/assets/fonts/IBMPlexSans-Regular.woff2',
-      semiBold      : '/assets/fonts/IBMPlexSans-SemiBold.woff2',
-      semiBoldItalic: '/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2'
-    }
-  }
-};
-
-// Helper functions to access tokens
-export const getColor = (color, shade) => tokens.colors[color]?.[shade];
-export const getFontSize = (category, size, variant = 'default') => {
-  if (category === 'display' && variant !== 'default') {
-    return tokens.fontSize[category][variant]?.[size];
-  }
-  return tokens.fontSize[category]?.[size];
-};
-export const getSpacing = (size) => tokens.spacing[size];
-export const getFont = (family) => tokens.fonts[family];
-
-export default tokens;