@pattern-stack/frontend-patterns 0.1.1 → 0.1.3

package/src/index.css

@@ -1,704 +0,0 @@
-@import "tailwindcss";
-@import "./atoms/shared/styles/color-palettes.css";
-
-@layer base {
-  :root {
-    /* Base colors - optimized for modern light mode */
-    --background: 0 0% 100%;
-    --foreground: 215 25% 27%;
-    --card: 0 0% 100%;
-    --card-foreground: 215 25% 27%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 215 25% 27%;
-    --primary: 220 70% 50%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 214 15% 91%;
-    --secondary-foreground: 215 25% 27%;
-    --muted: 214 15% 91%;
-    --muted-foreground: 215 16% 47%;
-    --accent: 214 15% 91%;
-    --accent-foreground: 215 25% 27%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 213 27% 84%;
-    --input: 213 27% 84%;
-    --ring: 220 70% 50%;
-    
-    /* Data categorization colors - distinct, accessible palette */
-    --category-1: 220 70% 50%;  /* Blue */
-    --category-2: 160 60% 45%;  /* Teal */
-    --category-3: 30 80% 55%;   /* Orange */
-    --category-4: 280 65% 60%;  /* Purple */
-    --category-5: 340 75% 55%;  /* Pink */
-    --category-6: 120 50% 45%;  /* Green */
-    --category-7: 45 85% 60%;   /* Yellow */
-    --category-8: 15 75% 50%;   /* Red */
-    
-    /* Status colors */
-    --status-success: 142 76% 36%;
-    --status-warning: 45 93% 47%;
-    --status-error: 0 84% 60%;
-    --status-info: 217 91% 60%;
-    --status-neutral: 215 16% 47%;
-    
-    /* Status colors as single properties for easier use */
-    --success: var(--status-success);
-    --warning: var(--status-warning);
-    --error: var(--status-error);
-    --info: var(--status-info);
-    --danger: var(--status-error);  /* Alias for error */
-    
-    /* Additional semantic colors */
-    --positive: 142 76% 36%;  /* Same as success but semantic */
-    --negative: 0 84% 60%;    /* Same as error but semantic */
-    --pending: 45 93% 47%;    /* Same as warning for pending states */
-    --disabled: 215 16% 47%;  /* Muted gray for disabled states */
-    
-    /* Surface and overlay colors */
-    --surface: 0 0% 100%;     /* Elevated backgrounds */
-    --overlay: 0 0% 0% / 0.5; /* Modal overlays */
-    --backdrop: 0 0% 0% / 0.3; /* Backdrop dimming */
-    
-    /* Standard gray scale (Tailwind compatible) */
-    --gray-50: 210 20% 98%;
-    --gray-100: 214 15% 91%;
-    --gray-200: 213 27% 84%;
-    --gray-300: 215 25% 77%;
-    --gray-400: 215 20% 65%;
-    --gray-500: 215 16% 47%;
-    --gray-600: 215 19% 35%;
-    --gray-700: 215 25% 27%;
-    --gray-800: 217 33% 17%;
-    --gray-900: 222 47% 11%;
-    --gray-950: 224 71% 4%;
-    
-    /* Extended grays for data interfaces (legacy/custom) */
-    --gray-25: 210 20% 98%;
-    --gray-75: 214 15% 91%;
-    --gray-150: 213 27% 84%;
-    --gray-250: 215 25% 77%;
-    --gray-350: 215 20% 65%;
-    --gray-450: 215 16% 47%;
-    --gray-550: 215 19% 35%;
-    --gray-650: 215 25% 27%;
-    --gray-750: 217 33% 17%;
-    --gray-850: 222 47% 11%;
-    --gray-925: 224 71% 4%;
-    
-    /* Spacing system */
-    --card-padding: 1.5rem;
-    --card-gap: 1rem;
-    --nested-offset: 0.75rem;
-    --edge-xs: 0.5rem;
-    --edge-sm: 0.75rem;
-    --edge-md: 1rem;
-    --edge-lg: 1.5rem;
-    --edge-xl: 2rem;
-    
-    /* Enhanced design system spacing */
-    --section-gap: 3rem;
-    --component-gap: 1.5rem;
-    --content-max-width: 80rem;
-    
-    /* Border radius */
-    --radius: 0.5rem;
-    
-    /* Interactive state colors */
-    --primary-hover: 222.2 47.4% 15%;
-    --primary-active: 222.2 47.4% 8%;
-    --primary-disabled: 215 16% 47%;
-    --secondary-hover: 210 40% 92%;
-    --secondary-active: 210 40% 88%;
-    --destructive-hover: 0 84.2% 65%;
-    --destructive-active: 0 84.2% 55%;
-    
-    /* Chart colors (legacy compatibility) */
-    --chart-1: var(--category-1);
-    --chart-2: var(--category-2);
-    --chart-3: var(--category-3);
-    --chart-4: var(--category-4);
-    --chart-5: var(--category-5);
-  }
-
-  .dark {
-    /* Base colors - much better background/card contrast */
-    --background: 222 47% 2%;
-    --foreground: 210 40% 98%;
-    --card: 220 13% 15%;
-    --card-foreground: 210 40% 98%;
-    --popover: 220 13% 15%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 220 91% 70%;
-    --primary-foreground: 222 47% 2%;
-    --secondary: 217 10% 18%;
-    --secondary-foreground: 210 40% 88%;
-    --muted: 217 10% 18%;
-    --muted-foreground: 215 20% 65%;
-    --accent: 217 10% 18%;
-    --accent-foreground: 210 40% 88%;
-    --destructive: 0 63% 65%;
-    --destructive-foreground: 222 47% 2%;
-    --border: 217 27% 20%;
-    --input: 217 27% 18%;
-    --ring: 220 91% 70%;
-    
-    /* Data categorization colors - refined for dark mode elegance */
-    --category-1: 220 91% 70%;  /* Vibrant blue */
-    --category-2: 168 76% 64%;  /* Refined teal */
-    --category-3: 25 95% 68%;   /* Balanced orange */
-    --category-4: 280 65% 75%;  /* Elegant purple */
-    --category-5: 330 81% 72%;  /* Sophisticated pink */
-    --category-6: 142 69% 58%;  /* Natural green */
-    --category-7: 48 96% 68%;   /* Warm yellow */
-    --category-8: 0 72% 67%;    /* Refined red */
-    
-    /* Status colors - better contrast and readability */
-    --status-success: 142 69% 58%;
-    --status-warning: 48 96% 68%;
-    --status-error: 0 72% 67%;
-    --status-info: 220 91% 70%;
-    --status-neutral: 215 20% 65%;
-    
-    /* Additional semantic colors - dark mode */
-    --positive: 142 69% 58%;
-    --negative: 0 72% 67%;
-    --pending: 48 96% 68%;
-    --disabled: 215 15% 35%;
-    --danger: var(--status-error);
-    
-    /* Surface and overlay colors - refined dark mode */
-    --surface: 220 13% 15%;
-    --overlay: 0 0% 0% / 0.75;
-    --backdrop: 0 0% 0% / 0.6;
-    
-    /* Interactive state colors - dark mode */
-    --primary-hover: 210 40% 94%;
-    --primary-active: 210 40% 90%;
-    --primary-disabled: 215 16% 35%;
-    --secondary-hover: 217.2 32.6% 22%;
-    --secondary-active: 217.2 32.6% 15%;
-    --destructive-hover: 0 62.8% 35%;
-    --destructive-active: 0 62.8% 25%;
-    
-    /* Standard gray scale - inverted for dark mode */
-    --gray-50: 224 71% 4%;
-    --gray-100: 222 47% 11%;
-    --gray-200: 217 33% 17%;
-    --gray-300: 215 25% 27%;
-    --gray-400: 215 19% 35%;
-    --gray-500: 215 16% 47%;
-    --gray-600: 215 20% 65%;
-    --gray-700: 215 25% 77%;
-    --gray-800: 213 27% 84%;
-    --gray-900: 214 15% 91%;
-    --gray-950: 210 20% 98%;
-    
-    /* Extended grays - inverted for dark mode */
-    --gray-25: 224 71% 4%;
-    --gray-75: 222 47% 11%;
-    --gray-150: 217 33% 17%;
-    --gray-250: 215 25% 27%;
-    --gray-350: 215 19% 35%;
-    --gray-450: 215 16% 47%;
-    --gray-550: 215 20% 65%;
-    --gray-650: 215 25% 77%;
-    --gray-750: 213 27% 84%;
-    --gray-850: 214 15% 91%;
-    --gray-925: 210 20% 98%;
-    
-    /* Chart colors - dark mode */
-    --chart-1: var(--category-1);
-    --chart-2: var(--category-2);
-    --chart-3: var(--category-3);
-    --chart-4: var(--category-4);
-    --chart-5: var(--category-5);
-  }
-}
-
-@layer base {
-  * {
-    border-color: hsl(var(--border));
-  }
-  body {
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
-    margin: 0;
-    font-feature-settings: "rlig" 1, "calt" 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  /* Modern typography improvements */
-  h1, h2, h3, h4, h5, h6 {
-    letter-spacing: -0.025em;
-    font-weight: 600;
-  }
-  
-  /* Clean button defaults */
-  button {
-    font-weight: 500;
-  }
-}
-
-@layer components {
-  /* Enhanced design system layout utilities */
-  .content-container {
-    max-width: var(--content-max-width);
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: var(--edge-md);
-    padding-right: var(--edge-md);
-  }
-  
-  .section-spacing {
-    margin-bottom: var(--section-gap);
-  }
-  
-  .component-spacing {
-    margin-bottom: var(--component-gap);
-  }
-
-  /* Enhanced card system */
-  .card-container {
-    background-color: hsl(var(--card));
-    color: hsl(var(--card-foreground));
-    border: 1px solid hsl(var(--border));
-    border-radius: calc(var(--radius) * 1.5);
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
-    padding: var(--card-padding);
-    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
-  }
-  
-  .card-container:hover {
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
-  }
-  
-  .card-nested {
-    background-color: hsl(var(--gray-25));
-    border: 1px solid hsl(var(--gray-150));
-    border-radius: calc(var(--radius) * 1.25);
-    padding: calc(var(--card-padding) - var(--nested-offset));
-    margin: var(--nested-offset);
-  }
-  
-  .card-flush {
-    margin: calc(-1 * var(--card-padding));
-    padding: var(--card-padding);
-    border-left: 0;
-    border-right: 0;
-    border-radius: 0;
-  }
-  
-  .card-flush:first-child {
-    border-top: 0;
-    border-top-left-radius: calc(var(--radius) * 1.5);
-    border-top-right-radius: calc(var(--radius) * 1.5);
-  }
-  
-  .card-flush:last-child {
-    border-bottom: 0;
-    border-bottom-left-radius: calc(var(--radius) * 1.5);
-    border-bottom-right-radius: calc(var(--radius) * 1.5);
-  }
-  
-  /* Category badges */
-  .badge-category-1 { 
-    background-color: hsl(var(--category-1) / 0.1);
-    color: hsl(var(--category-1));
-    border-color: hsl(var(--category-1) / 0.2);
-  }
-  .badge-category-2 { 
-    background-color: hsl(var(--category-2) / 0.1);
-    color: hsl(var(--category-2));
-    border-color: hsl(var(--category-2) / 0.2);
-  }
-  .badge-category-3 { 
-    background-color: hsl(var(--category-3) / 0.1);
-    color: hsl(var(--category-3));
-    border-color: hsl(var(--category-3) / 0.2);
-  }
-  .badge-category-4 { 
-    background-color: hsl(var(--category-4) / 0.1);
-    color: hsl(var(--category-4));
-    border-color: hsl(var(--category-4) / 0.2);
-  }
-  .badge-category-5 { 
-    background-color: hsl(var(--category-5) / 0.1);
-    color: hsl(var(--category-5));
-    border-color: hsl(var(--category-5) / 0.2);
-  }
-  .badge-category-6 { 
-    background-color: hsl(var(--category-6) / 0.1);
-    color: hsl(var(--category-6));
-    border-color: hsl(var(--category-6) / 0.2);
-  }
-  .badge-category-7 { 
-    background-color: hsl(var(--category-7) / 0.1);
-    color: hsl(var(--category-7));
-    border-color: hsl(var(--category-7) / 0.2);
-  }
-  .badge-category-8 { 
-    background-color: hsl(var(--category-8) / 0.1);
-    color: hsl(var(--category-8));
-    border-color: hsl(var(--category-8) / 0.2);
-  }
-  
-  /* Category cards */
-  .card-category-1 {
-    border-left-color: hsl(var(--category-1));
-    background-color: hsl(var(--category-1) / 0.02);
-  }
-  .card-category-1:hover {
-    background-color: hsl(var(--category-1) / 0.04);
-    border-left-color: hsl(var(--category-1) / 0.8);
-  }
-  .card-category-2 {
-    border-left-color: hsl(var(--category-2));
-    background-color: hsl(var(--category-2) / 0.02);
-  }
-  .card-category-2:hover {
-    background-color: hsl(var(--category-2) / 0.04);
-    border-left-color: hsl(var(--category-2) / 0.8);
-  }
-  .card-category-3 {
-    border-left-color: hsl(var(--category-3));
-    background-color: hsl(var(--category-3) / 0.02);
-  }
-  .card-category-3:hover {
-    background-color: hsl(var(--category-3) / 0.04);
-    border-left-color: hsl(var(--category-3) / 0.8);
-  }
-  .card-category-4 {
-    border-left-color: hsl(var(--category-4));
-    background-color: hsl(var(--category-4) / 0.02);
-  }
-  .card-category-4:hover {
-    background-color: hsl(var(--category-4) / 0.04);
-    border-left-color: hsl(var(--category-4) / 0.8);
-  }
-  .card-category-5 {
-    border-left-color: hsl(var(--category-5));
-    background-color: hsl(var(--category-5) / 0.02);
-  }
-  .card-category-5:hover {
-    background-color: hsl(var(--category-5) / 0.04);
-    border-left-color: hsl(var(--category-5) / 0.8);
-  }
-  .card-category-6 {
-    border-left-color: hsl(var(--category-6));
-    background-color: hsl(var(--category-6) / 0.02);
-  }
-  .card-category-6:hover {
-    background-color: hsl(var(--category-6) / 0.04);
-    border-left-color: hsl(var(--category-6) / 0.8);
-  }
-  .card-category-7 {
-    border-left-color: hsl(var(--category-7));
-    background-color: hsl(var(--category-7) / 0.02);
-  }
-  .card-category-7:hover {
-    background-color: hsl(var(--category-7) / 0.04);
-    border-left-color: hsl(var(--category-7) / 0.8);
-  }
-  .card-category-8 {
-    border-left-color: hsl(var(--category-8));
-    background-color: hsl(var(--category-8) / 0.02);
-  }
-  .card-category-8:hover {
-    background-color: hsl(var(--category-8) / 0.04);
-    border-left-color: hsl(var(--category-8) / 0.8);
-  }
-  
-  /* Category background colors */
-  .bg-category-1 { background-color: hsl(var(--category-1)); }
-  .bg-category-2 { background-color: hsl(var(--category-2)); }
-  .bg-category-3 { background-color: hsl(var(--category-3)); }
-  .bg-category-4 { background-color: hsl(var(--category-4)); }
-  .bg-category-5 { background-color: hsl(var(--category-5)); }
-  .bg-category-6 { background-color: hsl(var(--category-6)); }
-  .bg-category-7 { background-color: hsl(var(--category-7)); }
-  .bg-category-8 { background-color: hsl(var(--category-8)); }
-  
-  /* Category text colors */
-  .text-category-1 { color: hsl(var(--category-1)); }
-  .text-category-2 { color: hsl(var(--category-2)); }
-  .text-category-3 { color: hsl(var(--category-3)); }
-  .text-category-4 { color: hsl(var(--category-4)); }
-  .text-category-5 { color: hsl(var(--category-5)); }
-  .text-category-6 { color: hsl(var(--category-6)); }
-  .text-category-7 { color: hsl(var(--category-7)); }
-  .text-category-8 { color: hsl(var(--category-8)); }
-  
-  /* Category shadow colors */
-  .shadow-category-1 { box-shadow: 0 4px 6px -1px hsl(var(--category-1) / 0.1), 0 2px 4px -1px hsl(var(--category-1) / 0.06); }
-  .shadow-category-2 { box-shadow: 0 4px 6px -1px hsl(var(--category-2) / 0.1), 0 2px 4px -1px hsl(var(--category-2) / 0.06); }
-  .shadow-category-3 { box-shadow: 0 4px 6px -1px hsl(var(--category-3) / 0.1), 0 2px 4px -1px hsl(var(--category-3) / 0.06); }
-  .shadow-category-4 { box-shadow: 0 4px 6px -1px hsl(var(--category-4) / 0.1), 0 2px 4px -1px hsl(var(--category-4) / 0.06); }
-  .shadow-category-5 { box-shadow: 0 4px 6px -1px hsl(var(--category-5) / 0.1), 0 2px 4px -1px hsl(var(--category-5) / 0.06); }
-  .shadow-category-6 { box-shadow: 0 4px 6px -1px hsl(var(--category-6) / 0.1), 0 2px 4px -1px hsl(var(--category-6) / 0.06); }
-  .shadow-category-7 { box-shadow: 0 4px 6px -1px hsl(var(--category-7) / 0.1), 0 2px 4px -1px hsl(var(--category-7) / 0.06); }
-  .shadow-category-8 { box-shadow: 0 4px 6px -1px hsl(var(--category-8) / 0.1), 0 2px 4px -1px hsl(var(--category-8) / 0.06); }
-  
-  /* Status indicators */
-  .status-success { 
-    background-color: hsl(var(--status-success) / 0.1);
-    color: hsl(var(--status-success));
-    border-color: hsl(var(--status-success) / 0.2);
-  }
-  .status-warning { 
-    background-color: hsl(var(--status-warning) / 0.1);
-    color: hsl(var(--status-warning));
-    border-color: hsl(var(--status-warning) / 0.2);
-  }
-  .status-error { 
-    background-color: hsl(var(--status-error) / 0.1);
-    color: hsl(var(--status-error));
-    border-color: hsl(var(--status-error) / 0.2);
-  }
-  .status-info { 
-    background-color: hsl(var(--status-info) / 0.1);
-    color: hsl(var(--status-info));
-    border-color: hsl(var(--status-info) / 0.2);
-  }
-  .status-neutral { 
-    background-color: hsl(var(--status-neutral) / 0.1);
-    color: hsl(var(--status-neutral));
-    border-color: hsl(var(--status-neutral) / 0.2);
-  }
-  
-  /* Edge alignment helpers */
-  .edge-align-start { margin-left: calc(-1 * var(--edge-md)); }
-  .edge-align-end { margin-right: calc(-1 * var(--edge-md)); }
-  .edge-align-both { 
-    margin-left: calc(-1 * var(--edge-md)); 
-    margin-right: calc(-1 * var(--edge-md)); 
-  }
-  
-  /* Enhanced typography system */
-  .text-display-lg {
-    font-size: 4rem;
-    line-height: 4.5rem;
-    letter-spacing: -0.05em;
-    font-weight: 800;
-  }
-  
-  .text-display-md {
-    font-size: 3rem;
-    line-height: 3.5rem;
-    letter-spacing: -0.025em;
-    font-weight: 700;
-  }
-  
-  .text-display-sm {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-    letter-spacing: -0.025em;
-    font-weight: 700;
-  }
-  
-  .text-heading-xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-    letter-spacing: -0.025em;
-    font-weight: 700;
-  }
-  
-  .text-heading-lg {
-    font-size: 1.5rem;
-    line-height: 2rem;
-    letter-spacing: -0.025em;
-    font-weight: 600;
-  }
-  
-  .text-heading-md {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-    letter-spacing: -0.025em;
-    font-weight: 600;
-  }
-  
-  .text-heading-sm {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-    letter-spacing: -0.025em;
-    font-weight: 600;
-  }
-  
-  .text-body-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-    letter-spacing: -0.025em;
-  }
-  
-  .text-body-md {
-    font-size: 1rem;
-    line-height: 1.5rem;
-    letter-spacing: 0;
-  }
-  
-  .text-body-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    letter-spacing: 0;
-  }
-  
-  .text-caption {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    letter-spacing: 0.025em;
-    color: hsl(var(--muted-foreground));
-  }
-  
-  .text-overline {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    letter-spacing: 0.1em;
-    font-weight: 500;
-    text-transform: uppercase;
-    color: hsl(var(--muted-foreground));
-  }
-
-  /* Data typography (legacy compatibility) */
-  .text-data-label { 
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    letter-spacing: 0.025em;
-    font-weight: 500;
-    color: hsl(var(--muted-foreground));
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-  .text-data-value { 
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-weight: 600;
-  }
-  .text-data-meta { 
-    font-size: 0.75rem;
-    line-height: 1rem;
-    letter-spacing: 0.025em;
-    color: hsl(var(--muted-foreground));
-  }
-  
-  /* Enhanced UI component utilities */
-  .button-primary {
-    background-color: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    border: 1px solid hsl(var(--primary));
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius);
-    font-weight: 500;
-    transition: all 0.2s ease-in-out;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-  }
-  
-  .button-primary:hover {
-    background-color: hsl(var(--primary-hover));
-    border-color: hsl(var(--primary-hover));
-    transform: translateY(-1px);
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  }
-  
-  .button-secondary {
-    background-color: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-    border: 1px solid hsl(var(--border));
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius);
-    font-weight: 500;
-    transition: all 0.2s ease-in-out;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-  }
-  
-  .button-secondary:hover {
-    background-color: hsl(var(--secondary-hover));
-    transform: translateY(-1px);
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  }
-  
-  .input-field {
-    border: 1px solid hsl(var(--border));
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
-    padding: 0.75rem;
-    border-radius: var(--radius);
-    transition: all 0.2s ease-in-out;
-    font-size: 0.875rem;
-  }
-  
-  .input-field:focus {
-    outline: none;
-    border-color: hsl(var(--ring));
-    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
-  }
-  
-  .badge-default {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.75rem;
-    border-radius: calc(var(--radius) * 0.75);
-    font-size: 0.75rem;
-    font-weight: 500;
-    line-height: 1;
-    background-color: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-  }
-  
-  .badge-secondary {
-    background-color: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-  }
-  
-  .badge-outline {
-    background-color: transparent;
-    color: hsl(var(--foreground));
-    border: 1px solid hsl(var(--border));
-  }
-  
-  /* Grid and layout utilities */
-  .grid-showcase {
-    display: grid;
-    gap: var(--component-gap);
-  }
-  
-  .grid-2-cols {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .grid-3-cols {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  
-  .grid-4-cols {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  
-  .grid-6-cols {
-    grid-template-columns: repeat(6, 1fr);
-  }
-  
-  @media (max-width: 768px) {
-    .grid-2-cols,
-    .grid-3-cols,
-    .grid-4-cols,
-    .grid-6-cols {
-      grid-template-columns: 1fr;
-    }
-  }
-  
-  @media (min-width: 768px) and (max-width: 1024px) {
-    .grid-3-cols,
-    .grid-4-cols,
-    .grid-6-cols {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-}

package/src/index.ts

@@ -1,13 +0,0 @@
-// Frontend Template - Main entry point for library distribution
-import './atoms/shared/styles/color-palettes.css';
-import './index.css';
-
-export * from './atoms';
-export * from './molecules';
-export * from './features';
-export * from './templates';
-export * from './organisms';
-
-// Re-export commonly used utilities
-export { cn } from './atoms/utils/utils';
-export { apiClient } from './atoms/services/api/client';