@deepgram/styles 0.0.7 → 0.0.9

package/dist/deepgram.css

@@ -708,7 +708,7 @@ a:hover {
   position: relative;
   border-width: 1px;
   border-color: transparent;
-  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
+  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
   background-origin: padding-box, border-box;
   background-clip: padding-box, border-box;
   background-repeat: no-repeat;
@@ -2877,57 +2877,19 @@ a:hover {
 
 .dg-column--sidebar-right {
   /* Layout only - no colors */
-  position: relative;
 }
 
-/* Between 768px and 1280px: Floating sidebar with toggle */
-
-@media (min-width: 768px) and (max-width: 1279px) {
+@media (min-width: 1024px) {
   .dg-column--sidebar-right {
-    position: fixed;
-    top: 65px;
-    /* Account for header height */
-    right: 0;
-    height: calc(100vh - 65px);
-    width: 16rem;
+    width: 12rem;
     flex-shrink: 0;
-    transition: transform 300ms ease;
-    z-index: 20;
-    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
   }
 
   .dg-column--sidebar-right.dg-column--sm {
-    width: 20rem;
-  }
-
-  .dg-column--sidebar-right.dg-column--lg {
-    width: 24rem;
-  }
-
-  .dg-column--sidebar-right.dg-column--xl {
-    width: 32rem;
-  }
-
-  /* Collapsed state - slide mostly off screen but leave button visible */
-
-  .dg-column--sidebar-right.collapsed {
-    transform: translateX(calc(100% - 2rem));
-  }
-}
-
-/* Above 1280px: Normal sidebar behavior */
-
-@media (min-width: 1280px) {
-  .dg-column--sidebar-right {
     width: 16rem;
     flex-shrink: 0;
   }
 
-  .dg-column--sidebar-right.dg-column--sm {
-    width: 20rem;
-    flex-shrink: 0;
-  }
-
   .dg-column--sidebar-right.dg-column--lg {
     width: 24rem;
     flex-shrink: 0;
@@ -2973,7 +2935,7 @@ a:hover {
 }
 
 .dg-gradient-border {
-  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
+  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
   background-origin: padding-box, border-box;
   background-clip: padding-box, border-box;
   background-repeat: no-repeat;

package/dist/deepgram.expanded.css

@@ -708,7 +708,7 @@ a:hover {
   position: relative;
   border-width: 1px;
   border-color: transparent;
-  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
+  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
   background-origin: padding-box, border-box;
   background-clip: padding-box, border-box;
   background-repeat: no-repeat;
@@ -2973,7 +2973,7 @@ a:hover {
 }
 
 .dg-gradient-border {
-  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
+  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
   background-origin: padding-box, border-box;
   background-clip: padding-box, border-box;
   background-repeat: no-repeat;

package/lib/deepgram.css

@@ -1411,50 +1411,17 @@
   /* Right Sidebar - fixed width on tablet+, full width on mobile */
   .dg-column--sidebar-right {
     /* Layout only - no colors */
-    position: relative;
   }
 
-  /* Between 768px and 1280px: Floating sidebar with toggle */
-  @media (min-width: 768px) and (max-width: 1279px) {
+  @media (min-width: 1024px) {
     .dg-column--sidebar-right {
-      position: fixed;
-      top: 65px; /* Account for header height */
-      right: 0;
-      height: calc(100vh - 65px);
-      @apply w-64 flex-shrink-0;
-      transition: transform 300ms ease;
-      z-index: 20;
-      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
+      @apply w-48 flex-shrink-0;
     }
 
     .dg-column--sidebar-right.dg-column--sm {
-      @apply w-80;
-    }
-
-    .dg-column--sidebar-right.dg-column--lg {
-      @apply w-96;
-    }
-
-    .dg-column--sidebar-right.dg-column--xl {
-      @apply w-128;
-    }
-
-    /* Collapsed state - slide mostly off screen but leave button visible */
-    .dg-column--sidebar-right.collapsed {
-      transform: translateX(calc(100% - 2rem));
-    }
-  }
-
-  /* Above 1280px: Normal sidebar behavior */
-  @media (min-width: 1280px) {
-    .dg-column--sidebar-right {
       @apply w-64 flex-shrink-0;
     }
 
-    .dg-column--sidebar-right.dg-column--sm {
-      @apply w-80 flex-shrink-0;
-    }
-
     .dg-column--sidebar-right.dg-column--lg {
       @apply w-96 flex-shrink-0;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepgram/styles",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Tailwind-based design system and styles library for Deepgram design system and demos",
   "author": "Deepgram",
   "license": "MIT",

package/tailwind.config.js

@@ -155,7 +155,7 @@ module.exports = {
       addUtilities({
         ".dg-gradient-border": {
           backgroundImage:
-            "linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95))",
+            "linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000))",
           backgroundOrigin: "padding-box, border-box",
           backgroundClip: "padding-box, border-box",
           backgroundRepeat: "no-repeat",