@deepgram/styles 0.2.9 → 0.2.11

package/lib/deepgram.css

@@ -38,31 +38,31 @@
   }
 
   .dg-btn--primary {
-    @apply border border-transparent relative text-white dg-gradient-border dg-glow-cyan-green;
+    @apply border border-transparent relative text-dg-solid dg-gradient-border dg-glow-cyan-green;
   }
 
   .dg-btn--primary:hover {
-    @apply border-transparent text-black dg-bg-reset bg-white dg-shadow-subtle;
+    @apply border-transparent text-dg-on-solid dg-bg-reset bg-dg-solid dg-shadow-subtle;
   }
 
   .dg-btn--secondary {
-    @apply border border-transparent bg-white text-black;
+    @apply border border-transparent bg-dg-solid text-dg-on-solid;
   }
 
   .dg-btn--secondary:hover {
-    @apply border border-white bg-black text-white;
+    @apply border border-dg-solid bg-dg-on-solid text-dg-solid;
   }
 
   .dg-btn--ghost {
-    @apply border border-dg-slate bg-transparent text-white;
+    @apply border border-dg-slate bg-transparent text-dg-solid;
   }
 
   .dg-btn--ghost:hover {
-    @apply border-transparent text-black dg-bg-reset bg-white dg-shadow-subtle;
+    @apply border-transparent text-dg-on-solid dg-bg-reset bg-dg-solid dg-shadow-subtle;
   }
 
   .dg-btn--danger-ghost {
-    @apply border border-dg-danger bg-transparent text-white;
+    @apply border border-dg-danger bg-transparent text-dg-solid;
   }
 
   .dg-btn--danger-ghost:hover {
@@ -263,7 +263,7 @@
 
   .dg-card--selectable:has(input[type="radio"]:checked) {
     @apply border-dg-primary;
-    background: rgba(19, 239, 149, 0.05);
+    background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
   }
 
   .dg-sr-only {
@@ -279,7 +279,7 @@
   }
 
   .dg-card--selectable__icon {
-    @apply text-white;
+    @apply text-dg-text;
     margin-right: 0.5rem;
   }
 
@@ -288,7 +288,7 @@
   }
 
   .dg-card--selectable .dg-item-title {
-    @apply text-base font-semibold text-white;
+    @apply text-base font-semibold text-dg-text;
     display: flex;
     align-items: center;
   }
@@ -332,7 +332,7 @@
 
   .dg-card--file-upload:has(input[type="checkbox"]:checked) {
     @apply border-dg-primary border-solid;
-    background: rgba(19, 239, 149, 0.05);
+    background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
   }
 
   .dg-card--file-upload input[type="file"], .dg-card--file-upload input[type="checkbox"] {
@@ -340,7 +340,7 @@
   }
 
   .dg-card--file-upload__icon {
-    @apply text-white;
+    @apply text-dg-text;
     margin-right: 0.5rem;
   }
 
@@ -349,7 +349,7 @@
   }
 
   .dg-card--file-upload .dg-item-title {
-    @apply text-base font-semibold text-white;
+    @apply text-base font-semibold text-dg-text;
     display: flex;
     align-items: center;
   }
@@ -579,12 +579,12 @@
 
   .dg-hero__announcement:hover {
     @apply border-dg-primary -translate-y-0.5;
-    background-color: rgba(19, 239, 149, 0.1);
-    box-shadow: 0 0.25rem 0.75rem rgba(19, 239, 149, 0.15);
+    background-color: color-mix(in srgb, var(--dg-primary) 10%, transparent);
+    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--dg-primary) 15%, transparent);
   }
 
   .dg-hero__announcement-text {
-    @apply text-white text-sm font-normal whitespace-nowrap;
+    @apply text-dg-text text-sm font-normal whitespace-nowrap;
   }
 
   .dg-hero__announcement-cta {
@@ -662,7 +662,7 @@
   /* Section Header */
 
   .dg-section-heading {
-    @apply font-semibold font-dg-noto text-2xl text-white mb-6 flex;
+    @apply font-semibold font-dg-noto text-2xl text-dg-text mb-6 flex;
     @apply flex-wrap items-baseline gap-2;
   }
 
@@ -687,7 +687,7 @@
   }
 
   .dg-page-heading__title {
-    @apply font-semibold font-dg-noto text-4xl text-white mb-2 leading-tight;
+    @apply font-semibold font-dg-noto text-4xl text-dg-text mb-2 leading-tight;
   }
 
   .dg-page-heading__description {
@@ -729,7 +729,7 @@
   }
 
   .dg-page-headings__title {
-    @apply text-2xl font-bold text-white sm:truncate sm:text-3xl sm:tracking-tight;
+    @apply text-2xl font-bold text-dg-text sm:truncate sm:text-3xl sm:tracking-tight;
     line-height: 1.75;
   }
 
@@ -738,7 +738,7 @@
   }
 
   .dg-page-headings__title {
-    @apply text-2xl font-bold text-white sm:truncate sm:text-3xl sm:tracking-tight;
+    @apply text-2xl font-bold text-dg-text sm:truncate sm:text-3xl sm:tracking-tight;
     line-height: 1.75;
   }
 
@@ -749,7 +749,7 @@
   /* Card Heading */
 
   .dg-card-heading {
-    @apply font-medium font-dg-noto text-xl text-white mb-3 flex;
+    @apply font-medium font-dg-noto text-xl text-dg-text mb-3 flex;
     @apply flex-wrap items-baseline gap-1.5;
   }
 
@@ -764,13 +764,13 @@
   }
 
   .dg-card-headings__title {
-    @apply text-base font-semibold text-white;
+    @apply text-base font-semibold text-dg-text;
   }
 
   /* Item Title */
 
   .dg-item-title {
-    @apply font-medium font-dg-noto text-base text-white mb-1 flex;
+    @apply font-medium font-dg-noto text-base text-dg-text mb-1 flex;
     @apply flex-wrap items-baseline gap-1;
   }
 
@@ -824,7 +824,7 @@
 
   .dg-input {
     @apply w-full px-4 py-3 rounded border border-dg-pebble;
-    @apply bg-dg-charcoal text-white font-dg-sans text-sm outline-none transition-all;
+    @apply bg-dg-charcoal text-dg-text font-dg-sans text-sm outline-none transition-all;
     @apply duration-300 shadow-dg-sm;
     height: 2.75rem;
   }
@@ -863,7 +863,7 @@
 
   .dg-textarea {
     @apply w-full px-4 py-3 rounded border border-dg-pebble;
-    @apply bg-dg-charcoal text-white font-dg-sans text-sm outline-none transition-all;
+    @apply bg-dg-charcoal text-dg-text font-dg-sans text-sm outline-none transition-all;
     @apply duration-300 shadow-dg-sm;
     min-height: 6.25rem;
     resize: vertical;
@@ -889,7 +889,7 @@
     top: 0.125rem;
     width: 0.3125rem;
     height: 0.625rem;
-    border: solid black;
+    border: solid var(--color-dg-almost-black);
     border-width: 0 0.125rem 0.125rem 0;
     transform: rotate(45deg);
   }
@@ -942,7 +942,7 @@
   }
 
   .dg-form-label {
-    @apply text-sm font-medium text-white;
+    @apply text-sm font-medium text-dg-text;
   }
 
   .dg-form-error {
@@ -992,7 +992,7 @@
   }
 
   .dg-drag-drop-zone__text {
-    @apply text-base text-white font-medium;
+    @apply text-base text-dg-text font-medium;
   }
 
   .dg-drag-drop-zone__hint {
@@ -1062,7 +1062,7 @@
   }
 
   .dg-processing-title {
-    @apply font-medium font-dg-noto text-xl text-white mb-1;
+    @apply font-medium font-dg-noto text-xl text-dg-text mb-1;
   }
 
   /* Modal */
@@ -1143,93 +1143,158 @@
     }
   }
 
-  @media (min-width: 768px) {
-    .dg-columns {
+  @media (min-width: 1024px) {
+    .dg-columns__wrapper {
       @apply flex-row;
     }
+
+    .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;
+    }
   }
 
-  @media (min-width: 768px) and (max-width: 1279px) {
+  @media (min-width: 1280px) {
+    .dg-columns {
+      @apply flex-row;
+    }
+
     .dg-column--sidebar-right {
-      position: fixed;
-      top: 65px;
-      right: 0;
-      height: calc(100vh - 65px);
       width: 16rem;
       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;
+      flex-shrink: 0;
     }
 
     .dg-column--sidebar-right.dg-column--lg {
       width: 24rem;
+      flex-shrink: 0;
     }
 
     .dg-column--sidebar-right.dg-column--xl {
       width: 32rem;
+      flex-shrink: 0;
     }
+  }
 
-    .dg-column--sidebar-right.collapsed {
-      transform: translateX(calc(100% - 2rem));
-    }
+  .dg-columns--fixed {
+    position: relative;
+    height: 100%;
+    --dg-sidebar-width: 18rem;
+    --dg-aside-width: 24rem;
+  }
+
+  .dg-columns--fixed .dg-column--sidebar-left {
+    @apply hidden;
+  }
+
+  .dg-columns--fixed .dg-column--sidebar-right {
+    @apply hidden;
   }
 
   @media (min-width: 1024px) {
-    .dg-columns__wrapper {
-      @apply flex-row;
+    .dg-columns--fixed .dg-column--sidebar-left {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 50;
+      width: var(--dg-sidebar-width);
+      overflow-y: auto;
+      background: var(--color-dg-almost-black);
+      border-right: 1px solid var(--color-dg-border);
     }
 
-    .dg-column--sidebar-left {
-      @apply w-48 flex-shrink-0;
+    .dg-columns--fixed .dg-column--main {
+      padding-left: var(--dg-sidebar-width);
     }
 
-    .dg-column--sidebar-left.dg-column--sm {
-      @apply w-64 flex-shrink-0;
+    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--sm) {
+      --dg-sidebar-width: 16rem;
     }
 
-    .dg-column--sidebar-left.dg-column--lg {
-      @apply w-96 flex-shrink-0;
+    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--lg) {
+      --dg-sidebar-width: 24rem;
     }
 
-    .dg-column--sidebar-left.dg-column--xl {
-      @apply w-128 flex-shrink-0;
+    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--xl) {
+      --dg-sidebar-width: 32rem;
     }
   }
 
   @media (min-width: 1280px) {
-    .dg-column--sidebar-right {
-      width: 16rem;
-      flex-shrink: 0;
+    .dg-columns--fixed .dg-column--sidebar-right {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: var(--dg-sidebar-width);
+      width: var(--dg-aside-width);
+      overflow-y: auto;
+      border-right: 1px solid var(--color-dg-border);
     }
 
-    .dg-column--sidebar-right.dg-column--sm {
-      width: 20rem;
-      flex-shrink: 0;
+    .dg-columns--fixed:has(.dg-column--sidebar-right) .dg-column--main {
+      padding-left: calc(var(--dg-sidebar-width) + var(--dg-aside-width));
     }
 
-    .dg-column--sidebar-right.dg-column--lg {
-      width: 24rem;
-      flex-shrink: 0;
+    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--sm) {
+      --dg-aside-width: 20rem;
     }
 
-    .dg-column--sidebar-right.dg-column--xl {
-      width: 32rem;
-      flex-shrink: 0;
+    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--lg) {
+      --dg-aside-width: 28rem;
+    }
+
+    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--xl) {
+      --dg-aside-width: 32rem;
+    }
+  }
+
+  .dg-columns__mobile-header {
+    @apply flex items-center gap-3 px-4 py-2;
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    background: var(--color-dg-almost-black);
+    border-bottom: 1px solid var(--color-dg-border);
+  }
+
+  @media (min-width: 1024px) {
+    .dg-columns__mobile-header {
+      @apply hidden;
     }
   }
 
+  .dg-columns__sidebar-toggle {
+    @apply inline-flex items-center justify-center -m-2.5 p-2.5;
+    color: var(--color-dg-muted);
+  }
+
   /* Header */
 
   .dg-header {
     @apply w-full;
-    background: #050506;
+    background: var(--color-dg-almost-black);
     padding: 1rem 1.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
   }
 
   .dg-header__container {
@@ -1245,7 +1310,7 @@
   }
 
   .dg-header__logo-text {
-    @apply font-dg-noto font-bold text-xl text-white;
+    @apply font-dg-noto font-bold text-xl text-dg-text;
   }
 
   .dg-header__nav {
@@ -1257,7 +1322,7 @@
   }
 
   .dg-header__profile-avatar {
-    @apply size-8 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10;
+    @apply size-8 rounded-full bg-dg-charcoal outline -outline-offset-1 outline-white/10;
   }
 
   @media (max-width: 768px) {
@@ -1511,7 +1576,7 @@
   }
 
   .dg-alert__dismiss {
-    @apply ml-auto pl-3 shrink-0;
+    @apply ml-auto pl-3 shrink-0 -my-1.5 -mr-1.5;
   }
 
   .dg-alert__dismiss button {
@@ -1525,106 +1590,4 @@
   .dg-alert__dismiss button svg {
     @apply size-5;
   }
-
-  /* Comboboxes */
-
-  .dg-combobox {
-    @apply relative block;
-  }
-
-  .dg-combobox__label {
-    @apply block text-sm font-medium text-white;
-    line-height: 1.5rem;
-  }
-
-  .dg-combobox__wrapper {
-    @apply relative mt-2 block;
-  }
-
-  .dg-combobox__input {
-    @apply block w-full rounded-md bg-white/5 py-1.5 pr-12;
-    @apply pl-3 text-base text-white outline-1 -outline-offset-1 outline-white/10;
-    @apply placeholder:text-dg-slate sm:text-sm;
-    line-height: 1.5rem;
-  }
-
-  .dg-combobox__input:focus {
-    @apply outline-2 -outline-offset-2 outline-dg-primary;
-  }
-
-  .dg-combobox__toggle {
-    @apply absolute inset-y-0 right-0 flex items-center rounded-r-md;
-    @apply px-2;
-  }
-
-  .dg-combobox__toggle-icon {
-    @apply size-5 text-dg-muted;
-  }
-
-  .dg-combobox__options {
-    @apply max-h-60 overflow-auto rounded-md bg-dg-charcoal py-1 text-base;
-    @apply shadow-lg sm:text-sm;
-    outline: 1px solid rgba(255, 255, 255, 0.1);
-    outline-offset: -1px;
-  }
-
-  .dg-combobox__option {
-    @apply block truncate px-3 py-2 text-dg-platinum select-none;
-    @apply cursor-pointer;
-  }
-
-  .dg-combobox__option:hover {
-    @apply bg-dg-primary text-white;
-  }
-
-  .dg-combobox__option.selected {
-    @apply bg-dg-primary text-white;
-  }
-
-  .dg-combobox__option-text {
-    @apply block truncate;
-  }
-
-  .dg-combobox__check {
-    @apply absolute inset-y-0 right-0 flex items-center pr-4;
-    @apply text-white;
-  }
-
-  .dg-combobox__check-icon {
-    @apply size-5;
-  }
-
-  .dg-combobox--with-check .dg-combobox__option {
-    @apply relative pr-9;
-  }
-
-  .dg-combobox--with-check .dg-combobox__option.selected .dg-combobox__check {
-    @apply flex;
-  }
-
-  .dg-combobox--with-avatar .dg-combobox__option {
-    @apply flex items-center;
-    gap: 0.5rem;
-  }
-
-  .dg-combobox__avatar {
-    @apply size-6 shrink-0 rounded-full;
-  }
-
-  .dg-combobox--with-status .dg-combobox__option {
-    @apply flex items-center;
-    gap: 0.5rem;
-  }
-
-  .dg-combobox__status {
-    @apply inline-block size-2 shrink-0 rounded-full;
-  }
-
-  .dg-combobox__status--online {
-    @apply bg-dg-success;
-  }
-
-  .dg-combobox__status--offline {
-    @apply bg-dg-muted;
-  }
 }

package/lib/tailwind-theme.css

@@ -9,7 +9,7 @@
 
 /* Source scanning for class detection */
 @source "./deepgram.css";
-@source inline("collapsed selected visible");
+@source inline("visible");
 
 /* Dark mode support */
 @variant dark (&.dark);
@@ -18,22 +18,24 @@
 @theme {
   --color-dg-primary: var(--dg-primary, #13ef95);
   --color-dg-secondary: var(--dg-secondary, #149afb);
-  --color-dg-almost-black: #050506;
-  --color-dg-background: #0b0b0c;
-  --color-dg-charcoal: #1a1a1f;
-  --color-dg-translucent: rgba(0, 0, 0, 0.5);
-  --color-dg-border: #2c2c33;
-  --color-dg-pebble: #4e4e52;
-  --color-dg-slate: #949498;
-  --color-dg-text: #fbfbff;
-  --color-dg-fog: #edede2;
-  --color-dg-platinum: #e1e1e5;
-  --color-dg-muted: #949498;
-  --color-dg-success: #12b76a;
-  --color-dg-warning: #fec84b;
-  --color-dg-danger: #f04438;
-  --color-dg-gradient-start: #008fc1;
-  --color-dg-gradient-end: #00f099;
+  --color-dg-almost-black: light-dark(#f8f9fa, #050506);
+  --color-dg-background: light-dark(#ffffff, #0b0b0c);
+  --color-dg-charcoal: light-dark(#f3f4f6, #1a1a1f);
+  --color-dg-solid: light-dark(#000000, #ffffff);
+  --color-dg-translucent: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
+  --color-dg-border: light-dark(#d1d5db, #2c2c33);
+  --color-dg-pebble: light-dark(#9ca3af, #4e4e52);
+  --color-dg-slate: light-dark(#6b7280, #949498);
+  --color-dg-text: light-dark(#111827, #fbfbff);
+  --color-dg-fog: light-dark(#1f2937, #edede2);
+  --color-dg-platinum: light-dark(#374151, #e1e1e5);
+  --color-dg-muted: light-dark(#6b7280, #949498);
+  --color-dg-on-solid: light-dark(#ffffff, #000000);
+  --color-dg-success: light-dark(#15803d, #12b76a);
+  --color-dg-warning: light-dark(#a16207, #fec84b);
+  --color-dg-danger: light-dark(#b91c1c, #f04438);
+  --color-dg-gradient-start: light-dark(#0369a1, #008fc1);
+  --color-dg-gradient-end: light-dark(#059669, #00f099);
 
   --font-dg-sans: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
   --font-dg-noto: "Noto Sans", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
@@ -60,10 +62,14 @@
 /* Base styles */
 @layer base {
   :root {
+    color-scheme: light dark;
     --dg-base-font-size: 16px;
     --dg-border-width: 0.125rem;
-    --dg-primary: #13ef95;
-    --dg-secondary: #149afb;
+    --dg-primary: light-dark(#047857, #13ef95);
+    --dg-secondary: light-dark(#0369a1, #149afb);
+    --dg-syntax-keyword: #f97583;
+    --dg-syntax-variable: #79b8ff;
+    --dg-syntax-function: #b392f0;
   }
 
   html {
@@ -141,13 +147,13 @@
 
 /* Custom utilities */
 @utility dg-gradient-border {
-  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-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black));
   background-origin: padding-box, border-box;
   background-clip: padding-box, border-box;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100% 100%;
-  background-color: rgb(0, 0, 0);
+  background-color: var(--color-dg-on-solid);
 }
 
 @utility dg-bg-reset {
@@ -164,5 +170,5 @@
 }
 
 @utility dg-shadow-subtle {
-  box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+  box-shadow: color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem;
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@deepgram/styles",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "Tailwind-based design system and styles library for Deepgram design system and demos",
   "author": "Deepgram",
-  "license": "MIT",
+  "license": "ISC",
   "repository": {
     "type": "git",
     "url": "https://github.com/deepgram/dx-design.git",
@@ -49,6 +49,42 @@
     },
     "./design-system": {
       "default": "./design-system.yaml"
+    },
+    "./logo/wordmark": {
+      "default": "./dist/logo/wordmark.svg"
+    },
+    "./logo/wordmark-light": {
+      "default": "./dist/logo/wordmark-light.svg"
+    },
+    "./logo/wordmark-dark": {
+      "default": "./dist/logo/wordmark-dark.svg"
+    },
+    "./logo/lettermark": {
+      "default": "./dist/logo/lettermark.svg"
+    },
+    "./logo/lettermark-light": {
+      "default": "./dist/logo/lettermark-light.svg"
+    },
+    "./logo/lettermark-dark": {
+      "default": "./dist/logo/lettermark-dark.svg"
+    },
+    "./logo/lettermark-square": {
+      "default": "./dist/logo/lettermark-square.svg"
+    },
+    "./logo/lettermark-square-light": {
+      "default": "./dist/logo/lettermark-square-light.svg"
+    },
+    "./logo/lettermark-square-dark": {
+      "default": "./dist/logo/lettermark-square-dark.svg"
+    },
+    "./logo/lettermark-circle": {
+      "default": "./dist/logo/lettermark-circle.svg"
+    },
+    "./logo/lettermark-circle-light": {
+      "default": "./dist/logo/lettermark-circle-light.svg"
+    },
+    "./logo/lettermark-circle-dark": {
+      "default": "./dist/logo/lettermark-circle-dark.svg"
     }
   },
   "publishConfig": {