@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/design-tokens/Colors/colors.scss

@@ -0,0 +1,121 @@
+.design-tokens {
+  padding: 2rem;
+  min-height: 100vh;
+  background-color: var(--atomix-primary-bg);
+  color: var(--atomix-primary-text-emphasis);
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+
+  h1,
+  h2,
+  h3 {
+    margin-top: 0;
+    color: var(--atomix-primary-text-emphasis);
+  }
+
+  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);
+  }
+
+  h2 {
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--atomix-primary-border);
+  }
+
+  h3 {
+    margin-bottom: 1rem;
+    color: var(--atomix-secondary-text-emphasis);
+  }
+}
+
+.color-palette {
+  margin-bottom: 2rem;
+
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    margin-top: 1rem;
+    row-gap: 1rem;
+  }
+}
+
+.color-swatch {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.1s ease-out;
+
+  &:hover {
+    transform: translateY(-20px);
+    border-radius: var(--atomix-border-radius) var(--atomix-border-radius) 0 0;
+  }
+
+  &.is-right-hover {
+    border-radius: 4px 0 4px 0px;
+  }
+
+  &.is-left-hover {
+    border-radius: 0 4px 0 4px;
+  }
+
+  .color-box {
+    height: 80px;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    padding: 0.5rem;
+    box-sizing: border-box;
+  }
+
+  .color-info {
+    padding: 0.75rem;
+    background-color: var(--atomix-primary-bg);
+  }
+
+  .color-name {
+    font-weight: 500;
+    font-size: var(atomix-fo);
+    margin-bottom: 0.25rem;
+    color: var(--atomix-primary-text);
+  }
+
+  .color-value {
+    font-family: monospace;
+    font-size: 0.8rem;
+    color: var(--atomix-secondary-text-emphasis);
+    word-break: break-all;
+  }
+}
+
+/* Dark mode specific styles */
+.design-tokens.dark {
+  .color-swatch {
+    .color-info {
+      background-color: var(--atomix-primary-bg-dark);
+      border-top-color: var(--atomix-primary-border-dark);
+    }
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .color-palette .color-grid {
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .design-tokens {
+    padding: 1rem;
+  }
+
+  .color-palette .color-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/src/design-tokens/Colors/colors.stories.tsx

@@ -0,0 +1,313 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import './colors.scss';
+
+interface ColorSwatchProps {
+  name: string;
+  value: string;
+  isDark?: boolean;
+}
+
+const ColorSwatch = ({ name, value, isDark = false }: ColorSwatchProps) => (
+  <div className={`color-swatch`}>
+    <div
+      className="color-box"
+      style={{
+        backgroundColor: value,
+      }}
+    />
+    <div className="color-info">
+      <div className="color-name">{name}</div>
+      <div className="color-value">{value}</div>
+    </div>
+  </div>
+);
+
+interface ColorPaletteProps {
+  title: string;
+  colors: Record<string, string>;
+  isDark?: boolean;
+}
+
+function useWindowWidth() {
+  const [width, setWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => setWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return width;
+}
+
+const ColorPalette = ({ title, colors, isDark = false }: ColorPaletteProps) => {
+  const colorEntries = Object.entries(colors);
+  const width = useWindowWidth();
+  const paletteRef = useRef<HTMLDivElement>(null);
+  const [mousePosX, setMousePosX] = useState<number | null>(null);
+  const [closestSwatchIdx, setClosestSwatchIdx] = useState<number | null>(null);
+
+  let maxLift = -20;
+  if (width < 480) {
+    maxLift = -10;
+  } else if (width < 768) {
+    maxLift = -15;
+  }
+
+  useEffect(() => {
+    const paletteElement = paletteRef.current;
+    if (!paletteElement) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = paletteElement.getBoundingClientRect();
+      const currentMouseX = e.clientX - rect.left;
+      setMousePosX(currentMouseX);
+
+      let minDistance = Infinity;
+      let closestIndex: number | null = null;
+
+      const colorGridElement = paletteElement.children[1] as HTMLDivElement;
+      if (!colorGridElement) return;
+
+      for (let i = 0; i < colorGridElement.children.length; i++) {
+        const swatchElement = colorGridElement.children[i] as HTMLDivElement;
+        if (swatchElement) {
+          const swatchRect = swatchElement.getBoundingClientRect();
+          const swatchCenterX = (swatchRect.left + swatchRect.right) / 2 - rect.left;
+          const distance = Math.abs(currentMouseX - swatchCenterX);
+
+          if (distance < minDistance) {
+            minDistance = distance;
+            closestIndex = i;
+          }
+        }
+      }
+      setClosestSwatchIdx(closestIndex);
+    };
+
+    const handleMouseLeave = () => {
+      setMousePosX(null);
+      setClosestSwatchIdx(null);
+    };
+
+    paletteElement.addEventListener('mousemove', handleMouseMove);
+    paletteElement.addEventListener('mouseleave', handleMouseLeave);
+
+    return () => {
+      paletteElement.removeEventListener('mousemove', handleMouseMove);
+      paletteElement.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  }, [paletteRef]);
+
+  return (
+    <div className="color-palette" ref={paletteRef}>
+      <h3>{title}</h3>
+      <div className="color-grid">
+        {colorEntries.map(([name, value], idx) => {
+          let translateY = 0;
+          let isLeftHover = false;
+          let isRightHover = false;
+
+          if (mousePosX !== null && paletteRef.current) {
+            const swatchElement = paletteRef.current.children[1].children[idx] as HTMLDivElement;
+            if (swatchElement) {
+              const swatchRect = swatchElement.getBoundingClientRect();
+              const paletteRect = paletteRef.current.getBoundingClientRect();
+              const swatchCenterX = (swatchRect.left + swatchRect.right) / 2 - paletteRect.left;
+              const distance = Math.abs(mousePosX - swatchCenterX);
+
+              const currentSwatchWidth = swatchRect.width;
+              const maxEffectDistance = currentSwatchWidth * 3;
+
+              if (distance < maxEffectDistance) {
+                const normalizedDistance = distance / maxEffectDistance;
+                const animationProgress = 1 - Math.pow(normalizedDistance, 2);
+                translateY = Math.round(maxLift * animationProgress);
+                if (maxLift < 0) {
+                  translateY = Math.max(maxLift, translateY);
+                } else {
+                  translateY = Math.min(maxLift, translateY);
+                }
+              }
+            }
+
+            if (closestSwatchIdx !== null) {
+              if (idx < closestSwatchIdx) {
+                isRightHover = true; // All elements to the left of the closest
+              } else if (idx > closestSwatchIdx) {
+                isLeftHover = true; // All elements to the right of the closest
+              }
+            }
+          } else {
+            translateY = 0;
+            isLeftHover = false;
+            isRightHover = false;
+          }
+
+          return (
+            <div
+              key={name}
+              className={`color-swatch${isLeftHover ? ' is-left-hover' : ''}${isRightHover ? ' is-right-hover' : ''}`}
+              style={{
+                transform: `translateY(${translateY}px)`,
+              }}
+            >
+              <div className="color-box" style={{ backgroundColor: value }} />
+              <div className="color-info">
+                <div className="color-name">{name}</div>
+                <div className="color-value">{value}</div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const DesignTokens = () => {
+  const isDark = false;
+
+  const colorScales = {
+    primary: {
+      'primary-1': '#F2E8FD',
+      'primary-2': '#E4D0FA',
+      'primary-3': '#D0B2F5',
+      'primary-4': '#B88CEF',
+      'primary-5': '#9C63E9',
+      'primary-6': '#7C3AED',
+      'primary-7': '#6425CA',
+      'primary-8': '#501BA6',
+      'primary-9': '#3C1583',
+      'primary-10': '#2A0E60',
+    },
+    gray: {
+      'gray-1': '#F9FAFB',
+      'gray-2': '#F3F4F6',
+      'gray-3': '#E5E7EB',
+      'gray-4': '#D1D5DB',
+      'gray-5': '#9CA3AF',
+      'gray-6': '#6B7280',
+      'gray-7': '#4B5563',
+      'gray-8': '#374151',
+      'gray-9': '#1F2937',
+      'gray-10': '#111827',
+    },
+    red: {
+      'red-1': '#FEF2F2',
+      'red-2': '#FEE2E2',
+      'red-3': '#FECACA',
+      'red-4': '#FCA5A5',
+      'red-5': '#F87171',
+      'red-6': '#EF4444',
+      'red-7': '#DC2626',
+      'red-8': '#B91C1C',
+      'red-9': '#991B1B',
+      'red-10': '#7F1D1D',
+    },
+    green: {
+      'green-1': '#F0FDF4',
+      'green-2': '#DCFCE7',
+      'green-3': '#BBF7D0',
+      'green-4': '#86EFAC',
+      'green-5': '#4ADE80',
+      'green-6': '#22C55E',
+      'green-7': '#16A34A',
+      'green-8': '#15803D',
+      'green-9': '#166534',
+      'green-10': '#14532D',
+    },
+    blue: {
+      'blue-1': '#EFF6FF',
+      'blue-2': '#DBEAFE',
+      'blue-3': '#BFDBFE',
+      'blue-4': '#93C5FD',
+      'blue-5': '#60A5FA',
+      'blue-6': '#3B82F6',
+      'blue-7': '#2563EB',
+      'blue-8': '#1D4ED8',
+      'blue-9': '#1E40AF',
+      'blue-10': '#1E3A8A',
+    },
+    yellow: {
+      'yellow-1': '#FEFCE8',
+      'yellow-2': '#FEF9C3',
+      'yellow-3': '#FEF08A',
+      'yellow-4': '#FDE047',
+      'yellow-5': '#FACC15',
+      'yellow-6': '#EAB308',
+      'yellow-7': '#CA8A04',
+      'yellow-8': '#A16207',
+      'yellow-9': '#854D0E',
+      'yellow-10': '#713F12',
+    },
+  };
+
+  const themeColors = {
+    primary: '#7C3AED',
+    secondary: '#E5E7EB',
+    success: '#22C55E',
+    info: '#3B82F6',
+    warning: '#EAB308',
+    error: '#EF4444',
+    light: '#F9FAFB',
+    dark: '#1F2937',
+  };
+
+  const textColors = {
+    'primary-text': '#1F2937',
+    'secondary-text': '#374151',
+    'tertiary-text': '#6B7280',
+    'disabled-text': '#9CA3AF',
+    'invert-text': '#1F2937',
+    'brand-text': '#7C3AED',
+    'error-text': '#EF4444',
+    'success-text': '#22C55E',
+    'warning-text': '#EAB308',
+    'info-text': '#3B82F6',
+  };
+
+  return (
+    <div className={`design-tokens ${isDark ? 'dark' : 'light'}`}>
+      <h1>Design Tokens</h1>
+
+      <section>
+        <h2>Theme Colors</h2>
+        <ColorPalette title="Theme Colors" colors={themeColors} isDark={isDark} />
+      </section>
+
+      <section>
+        <h2>Color Scales</h2>
+        {Object.entries(colorScales).map(([name, colors]) => (
+          <ColorPalette
+            key={name}
+            title={name.charAt(0).toUpperCase() + name.slice(1)}
+            colors={colors}
+            isDark={isDark}
+          />
+        ))}
+      </section>
+
+      <section>
+        <h2>Text Colors</h2>
+        <ColorPalette title="Text Colors" colors={textColors} isDark={isDark} />
+      </section>
+    </div>
+  );
+};
+
+export default {
+  title: 'Design Tokens',
+  component: DesignTokens,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Design tokens for the Atomix design system.',
+      },
+    },
+  },
+} as Meta<typeof DesignTokens>;
+
+type Story = StoryObj<typeof DesignTokens>;
+
+export const Colors: Story = {};

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

@@ -0,0 +1,62 @@
+// Spacing Preview Styles
+.spacing-preview {
+  color: var(--atomix-primary-text);
+  background-color: var(--atomix-brand-bg-subtle);
+  min-height: 100vh;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+
+  .section-description {
+    max-width: 800px;
+  }
+}
+
+.spacing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.spacing-example {
+  .spacing-visual {
+    width: 100%;
+    background-color: var(--atomix-secondary-bg-subtle);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    overflow: hidden;
+
+    .spacing-visual-inner {
+      height: 1.5rem;
+      width: var(--spacing-size);
+      background-color: var(--atomix-brand-bg-subtle);
+      border-radius: 3px;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0px;
+        height: 100%;
+        background-color: var(--atomix-brand-bg);
+        border-radius: 3px;
+        transition:
+          width 0.3s ease-out,
+          background-color 0.3s ease-in-out;
+      }
+    }
+  }
+
+  &:hover {
+    .spacing-visual-inner {
+      &::after {
+        width: var(--spacing-size);
+        background-color: var(--atomix-primary);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import './Spacing.scss';
+
+interface SpacingExampleProps {
+  name: string;
+  size: string;
+  value: string;
+  isDark?: boolean;
+}
+
+const SpacingExample = ({ name, size, value, isDark = false }: SpacingExampleProps) => {
+  const sizeInPx = parseFloat(value) * 16; // Convert rem to px for display
+
+  return (
+    <div className="spacing-example u-d-flex u-flex-column u-gap-2">
+      <div className="spacing-info u-d-flex u-gap-2 u-justify-content-between u-items-center">
+        <span className="spacing-name u-fs-sm u-fw-bold">{name}</span>
+        <div className="spacing-details u-d-flex u-gap-2 u-items-center">
+          <code className="spacing-value u-fs-xs u-text-error u-bg-error-subtle u-rounded-sm u-px-2 u-py-1">
+            {value}
+          </code>
+          <span className="spacing-px u-fs-xs">{sizeInPx}px</span>
+        </div>
+      </div>
+      <div
+        className="spacing-visual"
+        style={
+          {
+            '--spacing-size': value,
+          } as React.CSSProperties
+        }
+      >
+        <div className="spacing-visual-inner"></div>
+      </div>
+    </div>
+  );
+};
+
+const SpacingPreview = () => {
+  const isDark = false;
+
+  const spacingScale = [
+    { name: '0', value: '0rem' },
+    { name: '1', value: '0.25rem' },
+    { name: '2', value: '0.5rem' },
+    { name: '3', value: '0.75rem' },
+    { name: '4', value: '1rem' },
+    { name: '5', value: '1.25rem' },
+    { name: '6', value: '1.5rem' },
+    { name: '7', value: '1.75rem' },
+    { name: '8', value: '2rem' },
+    { name: '9', value: '2.25rem' },
+    { name: '10', value: '2.5rem' },
+    { name: '11', value: '2.75rem' },
+    { name: '12', value: '3rem' },
+    { name: '14', value: '3.5rem' },
+    { name: '16', value: '4rem' },
+    { name: '20', value: '5rem' },
+    { name: '24', value: '6rem' },
+    { name: '28', value: '7rem' },
+    { name: '32', value: '8rem' },
+    { name: '36', value: '9rem' },
+    { name: '40', value: '10rem' },
+    { name: '44', value: '11rem' },
+    { name: '48', value: '12rem' },
+    { name: '52', value: '13rem' },
+    { name: '56', value: '14rem' },
+    { name: '60', value: '15rem' },
+    { name: '64', value: '16rem' },
+    { name: '72', value: '18rem' },
+    { name: '80', value: '20rem' },
+    { name: '90', value: '22.5rem' },
+  ];
+
+  return (
+    <div
+      className={`spacing-preview o-container o-container-fluid u-py-2 u-my-4 u-rounded-md ${isDark ? 'dark' : ''}`}
+    >
+      <h1 className="u-fs-xl u-text-primary u-mb-2">Spacing Scale</h1>
+
+      <section className="spacing-section u-bg-primary-subtle u-p-4 u-rounded-md">
+        <h2>Spacing Units</h2>
+        <p className="section-description u-fs-sm u-text-secondary u-mb-4">
+          The spacing scale is based on a 4px unit system. Each step in the scale represents a
+          multiple of 4px. Use these values for margin, padding, and other spacing-related
+          properties.
+        </p>
+
+        <div className="spacing-grid">
+          {spacingScale.map(({ name, value }) => (
+            <SpacingExample key={name} name={name} size={name} value={value} isDark={isDark} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default {
+  title: 'Design Tokens/Spacing',
+  component: SpacingPreview,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Spacing scale and utilities for the Atomix design system.',
+      },
+    },
+  },
+} as Meta<typeof SpacingPreview>;
+
+type Story = StoryObj<typeof SpacingPreview>;
+
+export const Spacing: Story = {};