@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/design-tokens/Typography/Typography.scss

@@ -0,0 +1,240 @@
+// Typography Preview Styles
+.typography-preview {
+  padding: 2rem;
+  color: var(--atomix-primary-text-emphasis);
+  background-color: var(--atomix-primary-bg);
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+  min-height: 100vh;
+
+  h1,
+  h2,
+  h3 {
+    margin-top: 0;
+    color: var(--atomix-primary-text-emphasis);
+  }
+
+  h1 {
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--atomix-primary-border-subtle);
+  }
+
+  h2 {
+    margin: 2rem 0 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--atomix-primary-border-subtle);
+  }
+
+  h3 {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+  }
+}
+
+.typography-section {
+  margin-bottom: 3rem;
+  padding: 1.5rem;
+  background-color: var(--atomix-secondary-bg);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+// Font Family Preview
+.font-family-preview {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 1.5rem;
+
+  .font-family-item {
+    padding: 1.5rem;
+    background-color: var(--atomix-primary-bg);
+    border-radius: 6px;
+    border: 1px solid var(--atomix-primary-border-subtle);
+
+    p {
+      margin: 0;
+      line-height: 1.6;
+    }
+  }
+
+  .font-helvetica {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+
+  .font-system {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen-Sans,
+      Ubuntu,
+      Cantarell,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
+  }
+
+  .font-mono {
+    font-family:
+      SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 0.9em;
+  }
+}
+
+// Font Weights Preview
+.font-weights-preview {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+
+  .font-weight-item {
+    padding: 1rem;
+    background-color: var(--atomix-primary-bg);
+    border-radius: 6px;
+    border: 1px solid var(--atomix-primary-border-subtle);
+
+    .font-weight-name {
+      display: block;
+      font-size: 0.85rem;
+      color: var(--atomix-secondary-text-emphasis);
+      margin-bottom: 0.5rem;
+    }
+
+    p {
+      margin: 0;
+      line-height: 1.5;
+    }
+  }
+}
+
+// Type Scale Preview
+.type-scale-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.typography-scale {
+  padding: 1rem;
+  background-color: var(--atomix-primary-bg);
+  border-radius: 6px;
+  border: 1px solid var(--atomix-primary-border-subtle);
+
+  .typography-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px dashed var(--atomix-primary-border-subtle);
+
+    .typography-name {
+      font-weight: 500;
+      color: var(--atomix-primary-text-emphasis);
+    }
+
+    .typography-details {
+      font-size: 0.8rem;
+      color: var(--atomix-secondary-text-emphasis);
+      font-family: monospace;
+    }
+  }
+
+  // Apply text styles
+  &.display-1 {
+    font-size: 4rem;
+    line-height: 1.2;
+  }
+  &.h1 {
+    font-size: 2.5rem;
+    line-height: 1.2;
+  }
+  &.h2 {
+    font-size: 2rem;
+    line-height: 1.25;
+  }
+  &.h3 {
+    font-size: 1.75rem;
+    line-height: 1.3;
+  }
+  &.h4 {
+    font-size: 1.5rem;
+    line-height: 1.35;
+  }
+  &.h5 {
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+  &.h6 {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+  &.text-lg {
+    font-size: 1.125rem;
+  }
+  &.text-base {
+    font-size: 1rem;
+  }
+  &.text-md {
+    font-size: 0.875rem;
+  }
+  &.text-sm {
+    font-size: 0.875rem;
+  }
+  &.text-xs {
+    font-size: 0.75rem;
+  }
+
+  // Text styles
+  &.italic {
+    font-style: italic;
+  }
+  &.uppercase {
+    text-transform: uppercase;
+  }
+  &.underline {
+    text-decoration: underline;
+  }
+  &.line-through {
+    text-decoration: line-through;
+  }
+}
+
+// Text Styles Preview
+.text-styles-preview {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .font-family-preview,
+  .font-weights-preview,
+  .text-styles-preview {
+    grid-template-columns: 1fr;
+  }
+
+  .typography-scale {
+    &.display-1 {
+      font-size: 3rem;
+    }
+    &.h1 {
+      font-size: 2rem;
+    }
+    &.h2 {
+      font-size: 1.75rem;
+    }
+    &.h3 {
+      font-size: 1.5rem;
+    }
+  }
+}

package/src/design-tokens/Typography/Typography.stories.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import './Typography.scss';
+
+interface TypographyScaleProps {
+  name: string;
+  className?: string;
+  weight?: number | string;
+  children: React.ReactNode;
+  isDark?: boolean;
+}
+
+const TypographyScale = ({
+  name,
+  className = '',
+  weight = 400,
+  children,
+  isDark = false,
+}: TypographyScaleProps) => (
+  <div className="typography-scale">
+    <div className="typography-info">
+      <span className="typography-name">{name}</span>
+      <span className="typography-details">
+        {weight} • {className || 'base'}
+      </span>
+    </div>
+    <div className={`${className}`} style={{ fontWeight: weight }}>
+      {children}
+    </div>
+  </div>
+);
+
+const TypographyPreview = () => {
+  const isDark = false;
+
+  const fontWeights = [
+    { name: 'Light', value: 300 },
+    { name: 'Regular', value: 400 },
+    { name: 'Medium', value: 500 },
+    { name: 'Semibold', value: 600 },
+    { name: 'Bold', value: 700 },
+    { name: 'Heavy', value: 800 },
+    { name: 'Black', value: 900 },
+  ];
+
+  const fontSizes = [
+    { name: 'Display 1', className: 'display-1' },
+    { name: 'Heading 1', className: 'h1' },
+    { name: 'Heading 2', className: 'h2' },
+    { name: 'Heading 3', className: 'h3' },
+    { name: 'Heading 4', className: 'h4' },
+    { name: 'Heading 5', className: 'h5' },
+    { name: 'Heading 6', className: 'h6' },
+    { name: 'Large', className: 'u-fs-lg' },
+    { name: 'Base', className: 'u-fs-base' },
+    { name: 'Medium', className: 'u-fs-md' },
+    { name: 'Small', className: 'u-fs-sm' },
+    { name: 'Extra Small', className: 'u-fs-xs' },
+  ];
+
+  const sampleText = 'The quick brown fox jumps over the lazy dog.';
+  const sampleTextLong =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.';
+
+  return (
+    <div className={`typography-preview`}>
+      <h1>Typography</h1>
+
+      <section className="typography-section">
+        <h2>Font Family</h2>
+        <div className="font-family-preview">
+          <div className="font-family-item">
+            <h3>Helvetica Neue</h3>
+            <p className="font-helvetica">
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ
+              <br />
+              abcdefghijklmnopqrstuvwxyz
+              <br />
+              0123456789!@#$%^&*()
+            </p>
+          </div>
+          <div className="font-family-item">
+            <h3>System Font Stack</h3>
+            <p className="font-system">
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ
+              <br />
+              abcdefghijklmnopqrstuvwxyz
+              <br />
+              0123456789!@#$%^&*()
+            </p>
+          </div>
+          <div className="font-family-item">
+            <h3>Monospace</h3>
+            <p className="font-mono">
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ
+              <br />
+              abcdefghijklmnopqrstuvwxyz
+              <br />
+              0123456789!@#$%^&*()
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="typography-section">
+        <h2>Font Weights</h2>
+        <div className="font-weights-preview">
+          {fontWeights.map(({ name, value }) => (
+            <div key={value} className="font-weight-item">
+              <span className="font-weight-name">
+                {name} ({value})
+              </span>
+              <p style={{ fontWeight: value }}>{sampleText}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="typography-section">
+        <h2>Type Scale</h2>
+        <div className="type-scale-preview">
+          {fontSizes.map(({ name, className }) => (
+            <TypographyScale key={className} name={name} className={className} isDark={isDark}>
+              {sampleText}
+            </TypographyScale>
+          ))}
+        </div>
+      </section>
+
+      <section className="typography-section">
+        <h2>Text Styles</h2>
+        <div className="text-styles-preview">
+          <TypographyScale name="Normal">{sampleTextLong}</TypographyScale>
+          <TypographyScale name="Italic" className="u-fst-italic">
+            {sampleTextLong}
+          </TypographyScale>
+          <TypographyScale name="Uppercase" className="u-text-uppercase">
+            {sampleTextLong}
+          </TypographyScale>
+          <TypographyScale name="Underline" className="u-td-underline">
+            {sampleTextLong}
+          </TypographyScale>
+          <TypographyScale name="Line Through" className="u-td-line-through">
+            {sampleTextLong}
+          </TypographyScale>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default {
+  title: 'Design Tokens/Typography',
+  component: TypographyPreview,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Typography system for the Atomix design system.',
+      },
+    },
+  },
+} as Meta<typeof TypographyPreview>;
+
+type Story = StoryObj<typeof TypographyPreview>;
+
+export const Typography: Story = {};