@deepgram/styles 0.1.4 → 0.2.0

package/lib/deepgram.css

@@ -14,13 +14,11 @@
  * @author Deepgram Starter UIs Team
  */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "./tailwind-theme.css";
 
 /* ==========================================================================
    COMPONENTS LAYER - Reusable UI Components
-   Base styles (html, body, headings, etc.) are defined in tailwind.config.js
+   Base styles (html, body, headings, etc.) are defined in tailwind-theme.css
    ========================================================================== */
 
 @layer components {
@@ -40,7 +38,7 @@
   }
 
   .dg-btn--primary {
-    @apply border border-transparent relative dg-text-white dg-gradient-border dg-glow-cyan-green;
+    @apply border border-transparent relative text-white dg-gradient-border dg-glow-cyan-green;
   }
 
   .dg-btn--primary:hover {
@@ -52,11 +50,11 @@
   }
 
   .dg-btn--secondary:hover {
-    @apply border border-white bg-black dg-text-white;
+    @apply border border-white bg-black text-white;
   }
 
   .dg-btn--ghost {
-    @apply border border-dg-slate bg-transparent dg-text-white;
+    @apply border border-dg-slate bg-transparent text-white;
   }
 
   .dg-btn--ghost:hover {
@@ -64,11 +62,11 @@
   }
 
   .dg-btn--danger-ghost {
-    @apply border border-dg-danger bg-transparent dg-text-white;
+    @apply border border-dg-danger bg-transparent text-white;
   }
 
   .dg-btn--danger-ghost:hover {
-    @apply border-transparent bg-dg-danger dg-text-white;
+    @apply border-transparent bg-dg-danger text-white;
   }
 
   .dg-btn--icon-only {
@@ -181,7 +179,7 @@
   }
 
   .dg-section--fieldset .dg-section-heading {
-    @apply absolute bg-dg-background dg-text-muted uppercase tracking-wide font-semibold;
+    @apply absolute bg-dg-background text-dg-muted uppercase tracking-wide font-semibold;
     @apply text-base px-2 m-0;
     top: -0.75rem;
     left: 1rem;
@@ -281,7 +279,7 @@
   }
 
   .dg-card--selectable__icon {
-    @apply dg-text-white;
+    @apply text-white;
     margin-right: 0.5rem;
   }
 
@@ -290,13 +288,13 @@
   }
 
   .dg-card--selectable .dg-item-title {
-    @apply text-base font-semibold dg-text-white;
+    @apply text-base font-semibold text-white;
     display: flex;
     align-items: center;
   }
 
   .dg-card--selectable .dg-prose {
-    @apply text-sm dg-text-muted;
+    @apply text-sm text-dg-muted;
   }
 
   @media (max-width: 767px) {
@@ -342,7 +340,7 @@
   }
 
   .dg-card--file-upload__icon {
-    @apply dg-text-white;
+    @apply text-white;
     margin-right: 0.5rem;
   }
 
@@ -351,13 +349,13 @@
   }
 
   .dg-card--file-upload .dg-item-title {
-    @apply text-base font-semibold dg-text-white;
+    @apply text-base font-semibold text-white;
     display: flex;
     align-items: center;
   }
 
   .dg-card--file-upload .dg-prose {
-    @apply text-sm dg-text-muted;
+    @apply text-sm text-dg-muted;
   }
 
   @media (max-width: 767px) {
@@ -414,7 +412,7 @@
   }
 
   .dg-card__icon i, .dg-card__icon svg {
-    @apply text-5xl dg-text-primary;
+    @apply text-5xl text-dg-primary;
   }
 
   .dg-card__icon--left {
@@ -503,7 +501,7 @@
   }
 
   .dg-code-block pre {
-    @apply m-0 p-0 font-dg-mono text-xs dg-text-fog whitespace-pre-wrap;
+    @apply m-0 p-0 font-dg-mono text-xs text-dg-fog whitespace-pre-wrap;
     @apply break-words;
     line-height: 1.3;
   }
@@ -586,11 +584,11 @@
   }
 
   .dg-hero__announcement-text {
-    @apply dg-text-white text-sm font-normal whitespace-nowrap;
+    @apply text-white text-sm font-normal whitespace-nowrap;
   }
 
   .dg-hero__announcement-cta {
-    @apply inline-flex items-center dg-text-secondary text-sm font-semibold gap-2;
+    @apply inline-flex items-center text-dg-secondary text-sm font-semibold gap-2;
     @apply transition-[gap] duration-200;
   }
 
@@ -599,7 +597,7 @@
   }
 
   .dg-hero__body {
-    @apply text-center dg-text-fog text-lg leading-7 font-normal mx-auto;
+    @apply text-center text-dg-fog text-lg leading-7 font-normal mx-auto;
     @apply max-w-[53.125rem];
   }
 
@@ -664,12 +662,12 @@
   /* Section Header */
 
   .dg-section-heading {
-    @apply font-semibold font-dg-noto text-2xl dg-text-white mb-6 flex;
+    @apply font-semibold font-dg-noto text-2xl text-white mb-6 flex;
     @apply flex-wrap items-baseline gap-2;
   }
 
   .dg-section-heading small {
-    @apply font-normal text-base dg-text-muted;
+    @apply font-normal text-base text-dg-muted;
   }
 
   @media (max-width: 640px) {
@@ -689,11 +687,11 @@
   }
 
   .dg-page-heading__title {
-    @apply font-semibold font-dg-noto text-4xl dg-text-white mb-2 leading-tight;
+    @apply font-semibold font-dg-noto text-4xl text-white mb-2 leading-tight;
   }
 
   .dg-page-heading__description {
-    @apply dg-text-muted text-lg leading-relaxed m-0 max-w-[65ch];
+    @apply text-dg-muted text-lg leading-relaxed m-0 max-w-[65ch];
   }
 
   @media (max-width: 768px) {
@@ -723,29 +721,29 @@
   /* Card Heading */
 
   .dg-card-heading {
-    @apply font-medium font-dg-noto text-xl dg-text-white mb-3 flex;
+    @apply font-medium font-dg-noto text-xl text-white mb-3 flex;
     @apply flex-wrap items-baseline gap-1.5;
   }
 
   .dg-card-heading small {
-    @apply font-normal text-sm dg-text-muted;
+    @apply font-normal text-sm text-dg-muted;
   }
 
   /* Item Title */
 
   .dg-item-title {
-    @apply font-medium font-dg-noto text-base dg-text-white mb-1 flex;
+    @apply font-medium font-dg-noto text-base text-white mb-1 flex;
     @apply flex-wrap items-baseline gap-1;
   }
 
   .dg-item-title small {
-    @apply font-normal text-xs dg-text-muted;
+    @apply font-normal text-xs text-dg-muted;
   }
 
   /* Prose */
 
   .dg-prose {
-    @apply w-full dg-text-fog text-sm leading-snug mb-3;
+    @apply w-full text-dg-fog text-sm leading-snug mb-3;
   }
 
   .dg-prose.dg-prose--block {
@@ -775,7 +773,7 @@
   }
 
   .dg-prose--small {
-    @apply text-xs dg-text-muted;
+    @apply text-xs text-dg-muted;
   }
 
   @media (min-width: 640px) {
@@ -788,18 +786,18 @@
 
   .dg-input {
     @apply w-full px-4 py-3 rounded border border-dg-pebble;
-    @apply bg-dg-charcoal dg-text-white font-dg-sans text-sm outline-none transition-all;
+    @apply bg-dg-charcoal text-white font-dg-sans text-sm outline-none transition-all;
     @apply duration-300 shadow-dg-sm;
     height: 2.75rem;
   }
 
   .dg-input::placeholder {
-    @apply dg-text-muted;
+    @apply text-dg-muted;
   }
 
   .dg-input:focus {
     @apply border-dg-primary;
-    box-shadow: 0 0 0 0.0625rem theme(colors.dg-primary);
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-primary);
   }
 
   .dg-input:disabled {
@@ -826,7 +824,9 @@
   /* Textarea */
 
   .dg-textarea {
-    @apply 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 duration-300 shadow-dg-sm;
     min-height: 6.25rem;
     resize: vertical;
     height: auto;
@@ -858,11 +858,11 @@
 
   .dg-checkbox:focus {
     @apply outline-none;
-    box-shadow: 0 0 0 0.125rem theme(colors.dg-primary/50);
+    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-dg-primary) 50%, transparent);
   }
 
   .dg-checkbox-label {
-    @apply flex items-start gap-2 cursor-pointer text-sm dg-text-fog;
+    @apply flex items-start gap-2 cursor-pointer text-sm text-dg-fog;
   }
 
   .dg-checkbox-label:hover .dg-checkbox {
@@ -892,7 +892,7 @@
   }
 
   .dg-form-field--error .dg-form-helper {
-    @apply dg-text-danger;
+    @apply text-dg-danger;
   }
 
   .dg-form-field--success .dg-input, .dg-form-field--success .dg-textarea {
@@ -900,20 +900,20 @@
   }
 
   .dg-form-field--success .dg-form-helper {
-    @apply dg-text-success;
+    @apply text-dg-success;
   }
 
   .dg-form-label {
-    @apply text-sm font-medium dg-text-white;
+    @apply text-sm font-medium text-white;
   }
 
   .dg-form-error {
-    @apply text-xs dg-text-danger block;
+    @apply text-xs text-dg-danger block;
     margin: 0;
   }
 
   .dg-form-helper {
-    @apply text-xs dg-text-muted block;
+    @apply text-xs text-dg-muted block;
     margin: 0;
   }
 
@@ -946,25 +946,25 @@
   }
 
   .dg-drag-drop-zone__icon {
-    @apply text-5xl dg-text-muted;
+    @apply text-5xl text-dg-muted;
   }
 
   .dg-drag-drop-zone:hover .dg-drag-drop-zone__icon {
-    @apply dg-text-primary;
+    @apply text-dg-primary;
   }
 
   .dg-drag-drop-zone__text {
-    @apply text-base dg-text-white font-medium;
+    @apply text-base text-white font-medium;
   }
 
   .dg-drag-drop-zone__hint {
-    @apply text-sm dg-text-muted;
+    @apply text-sm text-dg-muted;
   }
 
   /* Status Banner */
 
   .dg-status {
-    @apply w-full italic dg-text-fog text-sm leading-snug py-1;
+    @apply w-full italic text-dg-fog text-sm leading-snug py-1;
     @apply my-2;
   }
 
@@ -975,27 +975,27 @@
   }
 
   .dg-status--info {
-    @apply dg-text-fog;
+    @apply text-dg-fog;
   }
 
   .dg-status--success {
-    @apply dg-text-success;
+    @apply text-dg-success;
   }
 
   .dg-status--warning {
-    @apply dg-text-warning;
+    @apply text-dg-warning;
   }
 
   .dg-status--error {
-    @apply dg-text-danger;
+    @apply text-dg-danger;
   }
 
   .dg-status--primary {
-    @apply dg-text-primary;
+    @apply text-dg-primary;
   }
 
   .dg-status--secondary {
-    @apply dg-text-secondary;
+    @apply text-dg-secondary;
   }
 
   .dg-status--with-icon {
@@ -1024,7 +1024,7 @@
   }
 
   .dg-processing-title {
-    @apply font-medium font-dg-noto text-xl dg-text-white mb-1;
+    @apply font-medium font-dg-noto text-xl text-white mb-1;
   }
 
   /* Modal */
@@ -1207,7 +1207,7 @@
   }
 
   .dg-header__logo-text {
-    @apply font-dg-noto font-bold text-xl dg-text-white;
+    @apply font-dg-noto font-bold text-xl text-white;
   }
 
   .dg-header__nav {
@@ -1241,7 +1241,7 @@
   /* Link */
 
   .dg-link {
-    @apply dg-text-primary transition-opacity duration-200;
+    @apply text-dg-primary transition-opacity duration-200;
   }
 
   .dg-link:hover {
@@ -1249,11 +1249,11 @@
   }
 
   .dg-social-link {
-    @apply dg-text-fog transition-colors duration-200 text-xl;
+    @apply text-dg-fog transition-colors duration-200 text-xl;
   }
 
   .dg-social-link:hover {
-    @apply dg-text-primary;
+    @apply text-dg-primary;
   }
 
   /* Text Utilities */
@@ -1295,23 +1295,23 @@
   }
 
   .dg-text-tagline {
-    @apply text-center dg-text-fog text-sm;
+    @apply text-center text-dg-fog text-sm;
   }
 
   .dg-text-subtitle {
-    @apply dg-text-fog text-sm;
+    @apply text-dg-fog text-sm;
   }
 
   .dg-text-heading {
-    @apply dg-text-white text-base font-medium;
+    @apply text-white text-base font-medium;
   }
 
   .dg-text-heading--with-margin {
-    @apply dg-text-white text-base font-medium mb-1;
+    @apply text-white text-base font-medium mb-1;
   }
 
   .dg-text-legal {
-    @apply text-xs dg-text-muted text-center;
+    @apply text-xs text-dg-muted text-center;
   }
 
   /* Newsletter Signup */

package/lib/tailwind-theme.css

@@ -0,0 +1,168 @@
+/**
+ * Deepgram Design System — Tailwind v4 Theme Configuration
+ *
+ * Auto-generated from design-system.yaml. Do not edit manually.
+ * This file replaces the old tailwind.config.js with CSS-first config.
+ */
+
+@import "tailwindcss";
+
+/* Source scanning for class detection */
+@source "./deepgram.css";
+@source inline("collapsed visible");
+
+/* Dark mode support */
+@variant dark (&.dark);
+
+/* Design tokens */
+@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;
+
+  --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;
+  --font-dg-mono: "Fira Code", "Monaco", "Consolas", "Courier New", monospace;
+
+  --spacing-128: 32rem;
+  --spacing-dg-xs: 0.25rem;
+  --spacing-dg-sm: 0.5rem;
+  --spacing-dg-md: 1rem;
+  --spacing-dg-lg: 1.5rem;
+  --spacing-dg-xl: 2rem;
+  --spacing-dg-2xl: 3rem;
+
+  --radius-dg-sm: 0.25rem;
+  --radius-dg-md: 0.5rem;
+  --radius-dg-lg: 0.75rem;
+  --radius-dg-xl: 1rem;
+
+  --shadow-dg-sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
+  --shadow-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);
+  --shadow-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);
+}
+
+/* Base styles */
+@layer base {
+  :root {
+    --dg-base-font-size: 16px;
+    --dg-border-width: 0.125rem;
+    --dg-primary: #13ef95;
+    --dg-secondary: #149afb;
+  }
+
+  html {
+    font-size: var(--dg-base-font-size, 16px);
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-family: var(--font-dg-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--color-dg-background);
+    color: var(--color-dg-text);
+    line-height: 1.5;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-dg-noto);
+    font-weight: 700;
+  }
+
+  h1 {
+    font-size: var(--text-4xl);
+  }
+  
+  @media (min-width: 768px) {
+    h1 {
+      font-size: var(--text-5xl);
+    }
+  }
+
+  h2 {
+    font-size: var(--text-3xl);
+  }
+  
+  @media (min-width: 768px) {
+    h2 {
+      font-size: var(--text-4xl);
+    }
+  }
+
+  h3 {
+    font-size: var(--text-2xl);
+  }
+  
+  @media (min-width: 768px) {
+    h3 {
+      font-size: var(--text-3xl);
+    }
+  }
+
+  h4 {
+    font-size: var(--text-xl);
+  }
+  
+  @media (min-width: 768px) {
+    h4 {
+      font-size: var(--text-2xl);
+    }
+  }
+
+  code, pre {
+    font-family: var(--font-dg-mono);
+  }
+
+  a {
+    color: var(--color-dg-primary);
+    transition-property: color;
+    transition-duration: 200ms;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+/* 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-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);
+}
+
+@utility dg-bg-reset {
+  background-image: none;
+  background-origin: padding-box;
+  background-clip: border-box;
+  background-repeat: repeat;
+  background-position: 0% 0%;
+  background-size: auto;
+}
+
+@utility dg-glow-cyan-green {
+  box-shadow: 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;
+}
+
+@utility dg-shadow-subtle {
+  box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepgram/styles",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Tailwind-based design system and styles library for Deepgram design system and demos",
   "author": "Deepgram",
   "license": "MIT",
@@ -24,8 +24,6 @@
   "files": [
     "dist/",
     "lib/",
-    "tailwind.config.js",
-    "postcss.config.js",
     "design-system.yaml",
     "README.md",
     "LICENSE"
@@ -44,7 +42,10 @@
       "default": "./lib/deepgram.css"
     },
     "./tailwind-config": {
-      "default": "./tailwind.config.js"
+      "default": "./lib/tailwind-theme.css"
+    },
+    "./theme": {
+      "default": "./lib/tailwind-theme.css"
     },
     "./design-system": {
       "default": "./design-system.yaml"
@@ -54,7 +55,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {

package/postcss.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-