@deepgram/styles 0.0.3 → 0.0.4

package/lib/deepgram.css

@@ -34,14 +34,14 @@
     @apply outline-none w-fit;
     @apply disabled:opacity-50 disabled:cursor-not-allowed;
     gap: 0.5rem;
-    height: 3rem; /* 48px */
+    height: 3rem;
   }
 
   /* Button Modifier: Small */
   .dg-btn--sm {
     @apply px-5 py-2;
     @apply font-bold text-sm;
-    height: 2.25rem; /* 36px */
+    height: 2.25rem;
   }
 
   /* Button Modifier: Primary - Gradient border with glow effect */
@@ -249,6 +249,150 @@
     @apply p-0 justify-between;
   }
 
+  /* Selectable Card */
+  .dg-card--selectable {
+    @apply cursor-pointer transition-all duration-200;
+    @apply border-2 border-dg-pebble;
+    padding: 1.25rem;
+  }
+
+  .dg-card--selectable:hover {
+    @apply border-dg-slate;
+  }
+
+  .dg-card--selectable:has(input[type="radio"]:checked) {
+    @apply border-dg-primary;
+    background: rgba(19, 239, 149, 0.05);
+  }
+
+  /* Screen reader only utility */
+  .dg-sr-only {
+    @apply sr-only;
+  }
+
+  .dg-card--selectable input[type="radio"] {
+    @apply sr-only;
+  }
+
+  .dg-card--selectable__indicator {
+    @apply hidden;
+  }
+
+  .dg-card--selectable__icon {
+    @apply dg-text-white;
+    margin-right: 0.5rem;
+  }
+
+  .dg-card--selectable__content {
+    @apply flex-1 flex flex-col gap-1;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--selectable__content {
+      @apply flex-row items-center gap-3;
+    }
+  }
+
+  .dg-card--selectable .dg-item-title {
+    @apply text-base font-semibold dg-text-white;
+    display: flex;
+    align-items: center;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--selectable .dg-item-title {
+      margin-bottom: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .dg-card--selectable .dg-item-title {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  .dg-card--selectable .dg-prose {
+    @apply text-sm dg-text-muted;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--selectable .dg-prose {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  /* File Upload Card */
+  .dg-card--file-upload {
+    @apply cursor-pointer transition-all duration-200;
+    @apply border-2 border-dashed border-dg-pebble;
+    padding: 1.25rem;
+  }
+
+  .dg-card--file-upload:hover {
+    @apply border-dg-slate;
+  }
+
+  .dg-card--file-upload:has(input[type="checkbox"]:checked) {
+    @apply border-dg-primary border-solid;
+    background: rgba(19, 239, 149, 0.05);
+  }
+
+  .dg-card--file-upload input[type="file"],
+  .dg-card--file-upload input[type="checkbox"] {
+    @apply sr-only;
+  }
+
+  .dg-card--file-upload__icon {
+    @apply dg-text-white;
+    margin-right: 0.5rem;
+  }
+
+  .dg-card--file-upload__content {
+    @apply flex-1 flex flex-col gap-1;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--file-upload__content {
+      @apply flex-row items-center gap-3;
+    }
+  }
+
+  .dg-card--file-upload .dg-item-title {
+    @apply text-base font-semibold dg-text-white;
+    display: flex;
+    align-items: center;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--file-upload .dg-item-title {
+      margin-bottom: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .dg-card--file-upload .dg-item-title {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  .dg-card--file-upload .dg-prose {
+    @apply text-sm dg-text-muted;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--file-upload .dg-prose {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
   /* Card Image */
   .dg-card__image {
     @apply w-full overflow-hidden flex-shrink-0;
@@ -261,15 +405,15 @@
 
   /* Card Image Size Modifiers */
   .dg-card__image--small {
-    @apply h-[120px];
+    @apply h-[7.5rem];
   }
 
   .dg-card__image--medium {
-    @apply h-[160px];
+    @apply h-[10rem];
   }
 
   .dg-card__image--large {
-    @apply h-[240px];
+    @apply h-[15rem];
   }
 
   .dg-card__image--aspect-4-3 {
@@ -370,19 +514,19 @@
   /* Code Block Component */
   .dg-code-block {
     @apply w-full rounded-lg border border-dg-pebble bg-dg-charcoal overflow-auto;
-    @apply p-2 my-3 max-h-[200px];
+    @apply p-2 my-3 max-h-[12.5rem];
     -webkit-overflow-scrolling: touch;
   }
 
   @media (min-width: 640px) {
     .dg-code-block {
-      @apply p-3 my-4 max-h-[250px];
+      @apply p-3 my-4 max-h-[15.625rem];
     }
   }
 
   @media (min-width: 1024px) {
     .dg-code-block {
-      @apply max-h-[300px];
+      @apply max-h-[18.75rem];
     }
   }
 
@@ -398,28 +542,28 @@
   }
 
   .dg-code-block--compact {
-    @apply max-h-[120px] p-1;
+    @apply max-h-[7.5rem] p-1;
   }
 
   @media (min-width: 640px) {
     .dg-code-block--compact {
-      @apply max-h-[150px] p-2;
+      @apply max-h-[9.375rem] p-2;
     }
   }
 
   .dg-code-block--tall {
-    @apply max-h-[300px];
+    @apply max-h-[18.75rem];
   }
 
   @media (min-width: 640px) {
     .dg-code-block--tall {
-      @apply max-h-[400px];
+      @apply max-h-[25rem];
     }
   }
 
   @media (min-width: 1024px) {
     .dg-code-block--tall {
-      @apply max-h-[500px];
+      @apply max-h-[31.25rem];
     }
   }
 
@@ -478,7 +622,7 @@
 
   /* Hero Content Container */
   .dg-hero__content {
-    @apply flex flex-col gap-6 mx-auto max-w-[850px];
+    @apply flex flex-col gap-6 mx-auto max-w-[53.125rem];
   }
 
   @media (max-width: 768px) {
@@ -497,7 +641,7 @@
   .dg-hero__announcement:hover {
     @apply border-dg-primary -translate-y-0.5;
     background-color: rgba(19, 239, 149, 0.1);
-    box-shadow: 0 4px 12px rgba(19, 239, 149, 0.15);
+    box-shadow: 0 0.25rem 0.75rem rgba(19, 239, 149, 0.15);
   }
 
   .dg-hero__announcement-text {
@@ -526,7 +670,7 @@
 
   /* Hero Body Text */
   .dg-hero__body {
-    @apply text-center dg-text-fog text-lg leading-7 font-normal mx-auto max-w-[850px];
+    @apply text-center dg-text-fog text-lg leading-7 font-normal mx-auto max-w-[53.125rem];
   }
 
   @media (max-width: 768px) {
@@ -537,7 +681,7 @@
 
   @media (max-width: 640px) {
     .dg-hero__body {
-      @apply text-[15px] leading-normal;
+      @apply text-[0.9375rem] leading-normal;
     }
   }
 
@@ -618,7 +762,7 @@
 
   @media (max-width: 640px) {
     .dg-page-heading__description {
-      @apply text-[15px];
+      @apply text-[0.9375rem];
     }
   }
 
@@ -695,7 +839,7 @@
     @apply dg-text-white font-dg-sans text-sm;
     @apply outline-none transition-all duration-300;
     @apply shadow-dg-sm;
-    height: 44px;
+    height: 2.75rem;
   }
 
   .dg-input::placeholder {
@@ -704,7 +848,7 @@
 
   .dg-input:focus {
     @apply border-dg-primary;
-    box-shadow: 0 0 0 1px theme("colors.dg-primary");
+    box-shadow: 0 0 0 0.0625rem theme("colors.dg-primary");
   }
 
   .dg-input:disabled {
@@ -712,17 +856,28 @@
   }
 
   .dg-input--inline {
-    @apply min-w-[200px];
+    @apply min-w-[12.5rem];
   }
 
   .dg-input--full {
     @apply max-w-none;
   }
 
+  /* Select (dropdown) specific */
+  .dg-input[type="select"],
+  select.dg-input {
+    @apply appearance-none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.75rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+  }
+
   /* Textarea */
   .dg-textarea {
     @apply dg-input;
-    min-height: 100px;
+    min-height: 6.25rem;
     resize: vertical;
     height: auto;
   }
@@ -742,18 +897,18 @@
   .dg-checkbox:checked::after {
     content: "";
     position: absolute;
-    left: 6px;
-    top: 2px;
-    width: 5px;
-    height: 10px;
+    left: 0.375rem;
+    top: 0.125rem;
+    width: 0.3125rem;
+    height: 0.625rem;
     border: solid black;
-    border-width: 0 2px 2px 0;
+    border-width: 0 0.125rem 0.125rem 0;
     transform: rotate(45deg);
   }
 
   .dg-checkbox:focus {
     @apply outline-none;
-    box-shadow: 0 0 0 2px theme("colors.dg-primary/50");
+    box-shadow: 0 0 0 0.125rem theme("colors.dg-primary/50");
   }
 
   /* Checkbox Label */
@@ -834,7 +989,7 @@
     @apply flex flex-col items-center justify-center gap-3;
     @apply cursor-pointer;
     padding: 3rem 2rem;
-    min-height: 200px;
+    min-height: 12.5rem;
   }
 
   .dg-drag-drop-zone:hover {
@@ -953,7 +1108,7 @@
   }
 
   .dg-modal-content {
-    @apply text-center max-w-[400px] m-3;
+    @apply text-center max-w-[25rem] m-3;
   }
 
   /* ==========================================================================
@@ -967,7 +1122,7 @@
 
   @media (min-width: 640px) {
     .dg-constrain-width {
-      @apply max-w-[960px] mx-auto;
+      @apply max-w-[70rem] mx-auto;
     }
   }
 
@@ -1006,6 +1161,52 @@
     }
   }
 
+  /* Header */
+  .dg-header {
+    @apply w-full;
+    background: #050506; /* dg-almost-black */
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .dg-header__container {
+    @apply flex items-center justify-between max-w-screen-2xl mx-auto;
+  }
+
+  .dg-header__logo {
+    @apply flex items-center gap-3;
+  }
+
+  .dg-header__logo-image {
+    @apply h-8 w-auto;
+  }
+
+  .dg-header__logo-text {
+    @apply font-dg-noto font-bold text-xl dg-text-white;
+  }
+
+  .dg-header__nav {
+    @apply flex items-center gap-4;
+  }
+
+  .dg-header__profile-link {
+    @apply -m-1.5 p-1.5 block;
+  }
+
+  .dg-header__profile-avatar {
+    @apply size-8 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10;
+  }
+
+  @media (max-width: 768px) {
+    .dg-header {
+      padding: 0.75rem 1rem;
+    }
+
+    .dg-header__logo-text {
+      @apply text-lg;
+    }
+  }
+
   /* Footer */
   .dg-footer {
     @apply text-center border-t border-dg-pebble mt-16;
@@ -1135,6 +1336,134 @@
     @apply text-xs dg-text-muted text-center;
   }
 
+  /* ==========================================================================
+     MULTI-COLUMN LAYOUT COMPONENTS
+
+     Responsive collapse pattern:
+     - Mobile (< 768px): All columns stacked vertically
+     - Tablet (768px+): Right sidebar moves to side, left stacked on top
+     - Desktop (1024px+): All three columns side-by-side
+     ========================================================================== */
+
+  /* Column Container - parent wrapper for all columns */
+  .dg-columns {
+    @apply flex flex-col w-full;
+  }
+
+  /* At tablet: show right sidebar on the side */
+  @media (min-width: 768px) {
+    .dg-columns {
+      @apply flex-row;
+    }
+  }
+
+  /* Column Wrapper - groups left sidebar and main content together */
+  .dg-columns__wrapper {
+    @apply flex flex-col flex-1 min-w-0;
+  }
+
+  /* At desktop: show left sidebar on the side */
+  @media (min-width: 1024px) {
+    .dg-columns__wrapper {
+      @apply flex-row;
+    }
+  }
+
+  /* Base Column - padding for all columns */
+  .dg-column {
+    @apply px-4 py-6 min-w-0;
+  }
+
+  @media (min-width: 640px) {
+    .dg-column {
+      @apply px-6;
+    }
+  }
+
+  /* Main Content Column - always fills available space */
+  .dg-column--main {
+    @apply flex-1;
+  }
+
+  /* Left Sidebar - fixed width on desktop, full width on mobile/tablet */
+  .dg-column--sidebar-left {
+    /* Layout only - no colors */
+  }
+
+  @media (min-width: 1024px) {
+    .dg-column--sidebar-left {
+      @apply w-48 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-left.dg-column--sm {
+      @apply w-64 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-left.dg-column--lg {
+      @apply w-96 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-left.dg-column--xl {
+      @apply w-128 flex-shrink-0;
+    }
+  }
+
+  /* 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) {
+    .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);
+    }
+
+    .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;
+    }
+
+    .dg-column--sidebar-right.dg-column--xl {
+      @apply w-128 flex-shrink-0;
+    }
+  }
+
   /* ==========================================================================
      LINK COMPONENTS
      ========================================================================== */

package/package.json

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

package/tailwind.config.js

@@ -12,10 +12,12 @@ module.exports = {
     extend: {
       colors: {
         // Deepgram Brand Colors (from marketing site)
-        "dg-primary": "#13ef95",
-        "dg-secondary": "#149afb",
+        // These can be overridden by setting CSS variables
+        "dg-primary": "var(--dg-primary, #13ef95)",
+        "dg-secondary": "var(--dg-secondary, #149afb)",
 
         // Background Colors
+        "dg-almost-black": "#050506", // Almost Black (darkest)
         "dg-background": "#0b0b0c", // Black
         "dg-charcoal": "#1a1a1f", // Charcoal (cards, modals)
         "dg-translucent": "rgba(0, 0, 0, 0.5)",
@@ -70,17 +72,20 @@ module.exports = {
         "dg-lg": "1.5rem",
         "dg-xl": "2rem",
         "dg-2xl": "3rem",
+        128: "32rem", // 512px - for extra large column widths
       },
       borderRadius: {
-        "dg-sm": "4px",
-        "dg-md": "8px",
-        "dg-lg": "12px",
-        "dg-xl": "16px",
+        "dg-sm": "0.25rem",
+        "dg-md": "0.5rem",
+        "dg-lg": "0.75rem",
+        "dg-xl": "1rem",
       },
       boxShadow: {
-        "dg-sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-        "dg-md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-        "dg-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        "dg-sm": "0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05)",
+        "dg-md":
+          "0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06)",
+        "dg-lg":
+          "0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05)",
       },
     },
   },
@@ -88,9 +93,13 @@ module.exports = {
     function ({ addBase, addUtilities, theme }) {
       addBase({
         ":root": {
-          "--dg-border-width": "2px",
+          "--dg-base-font-size": "16px",
+          "--dg-border-width": "0.125rem",
+          "--dg-primary": "#13ef95",
+          "--dg-secondary": "#149afb",
         },
         html: {
+          fontSize: "var(--dg-base-font-size, 16px)",
           scrollBehavior: "smooth",
         },
         body: {
@@ -146,7 +155,7 @@ module.exports = {
       addUtilities({
         ".dg-gradient-border": {
           backgroundImage:
-            "linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, rgb(0, 143, 193), rgb(0, 240, 153), rgb(0, 143, 193), rgb(0, 240, 153))",
+            "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))",
           backgroundOrigin: "padding-box, border-box",
           backgroundClip: "padding-box, border-box",
           backgroundRepeat: "no-repeat",
@@ -163,10 +172,11 @@ module.exports = {
           backgroundSize: "auto",
         },
         ".dg-glow-cyan-green": {
-          boxShadow: "rgba(56, 237, 172, 0.2) 6px 0 15px 0, rgba(20, 154, 251, 0.2) -6px 0 15px 0",
+          boxShadow:
+            "color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0",
         },
         ".dg-shadow-subtle": {
-          boxShadow: "rgba(38, 44, 52, 0.05) 0 1px 2px",
+          boxShadow: "rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem",
         },
       });
     },