@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,118 +0,0 @@
-.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

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

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

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