@repobit/dex-system-design 0.4.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>
+`;