@pattern-stack/frontend-patterns 0.1.0 → 0.1.1

package/src/index.css

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

@@ -0,0 +1,13 @@
+// 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';