@salesmind-ai/design-system 0.3.13 → 0.4.0

package/dist/index.css

@@ -537,6 +537,46 @@
   }
 }
 
+/* src/components/GradientText/GradientText.css */
+.ds-gradient-text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline;
+}
+.ds-gradient-text--brand {
+  background-image:
+    linear-gradient(
+      135deg,
+      rgba(var(--accent-rgb), 1) 0%,
+      rgba(var(--accent-secondary-rgb), 1) 100%);
+}
+.ds-gradient-text--rainbow {
+  background-image:
+    linear-gradient(
+      135deg,
+      var(--gradient-indigo, #667eea) 0%,
+      var(--gradient-purple, #764ba2) 25%,
+      var(--gradient-pink, #f093fb) 50%,
+      var(--gradient-coral, #f5576c) 75%,
+      var(--gradient-gold, #ffc200) 100%);
+}
+.ds-gradient-text--sunset {
+  background-image:
+    linear-gradient(
+      135deg,
+      var(--gradient-pink, #f093fb) 0%,
+      rgba(var(--accent-rgb), 1) 50%,
+      var(--gradient-gold, #ffc200) 100%);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-gradient-text {
+    background-image: none;
+    -webkit-text-fill-color: rgba(var(--accent-rgb), 1);
+    color: rgba(var(--accent-rgb), 1);
+  }
+}
+
 /* src/components/ButtonGroup/ButtonGroup.css */
 .ds-button-group {
   display: inline-flex;
@@ -4908,6 +4948,21 @@
       rgba(var(--brand-pink-rgb), 0.15),
       transparent 70%);
 }
+.ds-section--bg-transparent {
+  background-color: transparent;
+}
+.ds-section--bg-dark {
+  background-color: var(--void-base);
+  color: var(--dark-text-primary, rgba(255, 255, 255, 0.98));
+  background-image:
+    radial-gradient(
+      ellipse at 50% 0%,
+      rgba(var(--brand-pink-rgb), 0.08) 0%,
+      transparent 60%);
+  --text-primary: var(--dark-text-primary, rgba(255, 255, 255, 0.98));
+  --text-secondary: var(--dark-text-secondary, rgba(255, 255, 255, 0.8));
+  --surface-alpha-1: var(--dark-surface-alpha, rgba(255, 255, 255, 0.06));
+}
 .ds-section--padding-none {
   padding: 0;
 }
@@ -4921,7 +4976,9 @@
   padding: var(--space-20) 0;
 }
 .ds-section-header {
-  margin-bottom: var(--space-12);
+  --ds-section-header-margin-bottom: var(--space-12);
+  --ds-section-header-title-size: var(--font-size-3xl);
+  margin-bottom: var(--ds-section-header-margin-bottom);
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
@@ -4938,17 +4995,25 @@
   text-align: right;
   align-items: flex-end;
 }
+.ds-section-header--compact {
+  --ds-section-header-margin-bottom: var(--space-6);
+  --ds-section-header-title-size: var(--font-size-2xl);
+}
+.ds-section-header--large {
+  --ds-section-header-margin-bottom: var(--space-16);
+  --ds-section-header-title-size: var(--font-size-4xl);
+}
 .ds-section-header__eyebrow {
   font-family: var(--font-family-mono);
   font-size: var(--font-size-xs);
-  color: var(--brand-pink);
+  color: var(--brand-pink-readable, var(--brand-pink));
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-wide);
   font-weight: var(--font-weight-medium);
 }
 .ds-section-header__title {
   font-family: var(--font-family);
-  font-size: var(--font-size-3xl);
+  font-size: var(--ds-section-header-title-size);
   font-weight: var(--font-weight-bold);
   color: var(--text-primary);
   line-height: var(--line-height-tight);
@@ -4969,8 +5034,14 @@
   .ds-section--padding-lg {
     padding: var(--space-12) 0;
   }
-  .ds-section-header__title {
-    font-size: var(--font-size-2xl);
+  .ds-section-header {
+    --ds-section-header-title-size: var(--font-size-2xl);
+  }
+  .ds-section-header--compact {
+    --ds-section-header-title-size: var(--font-size-xl);
+  }
+  .ds-section-header--large {
+    --ds-section-header-title-size: var(--font-size-3xl);
   }
 }
 @media (min-width: 1920px) {
@@ -4987,10 +5058,16 @@
     padding: calc(var(--space-20) * 1.25) 0;
   }
   .ds-section-header {
-    margin-bottom: var(--space-16);
+    --ds-section-header-margin-bottom: var(--space-16);
+    --ds-section-header-title-size: var(--font-size-4xl);
   }
-  .ds-section-header__title {
-    font-size: var(--font-size-4xl);
+  .ds-section-header--compact {
+    --ds-section-header-margin-bottom: var(--space-12);
+    --ds-section-header-title-size: var(--font-size-3xl);
+  }
+  .ds-section-header--large {
+    --ds-section-header-margin-bottom: var(--space-20);
+    --ds-section-header-title-size: var(--font-size-5xl);
   }
 }
 @media (min-width: 2560px) {
@@ -5001,11 +5078,17 @@
     padding: calc(var(--space-20) * 1.75) 0;
   }
   .ds-section-header {
-    margin-bottom: var(--space-20);
+    --ds-section-header-margin-bottom: var(--space-20);
+    --ds-section-header-title-size: var(--font-size-5xl);
     gap: var(--space-6);
   }
-  .ds-section-header__title {
-    font-size: var(--font-size-5xl);
+  .ds-section-header--compact {
+    --ds-section-header-margin-bottom: var(--space-16);
+    --ds-section-header-title-size: var(--font-size-4xl);
+  }
+  .ds-section-header--large {
+    --ds-section-header-margin-bottom: calc(var(--space-20) * 1.25);
+    --ds-section-header-title-size: var(--font-size-6xl);
   }
   .ds-section-header__subtitle {
     font-size: var(--font-size-xl);
@@ -5018,8 +5101,11 @@
   .ds-section--padding-lg {
     padding: calc(var(--space-20) * 2.5) 0;
   }
-  .ds-section-header__title {
-    font-size: var(--font-size-6xl);
+  .ds-section-header {
+    --ds-section-header-title-size: var(--font-size-6xl);
+  }
+  .ds-section-header--compact {
+    --ds-section-header-title-size: var(--font-size-5xl);
   }
 }
 
@@ -6025,7 +6111,7 @@
 }
 @media (min-width: 768px) {
   .ds-stats-grid {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(var(--stats-columns, 4), 1fr);
     gap: var(--space-12);
   }
 }