@shohojdhara/atomix 0.1.27 → 0.1.28

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

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

@@ -1,167 +0,0 @@
-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 = {};