@deepgram/styles 0.1.4 → 0.2.0

package/README.md

@@ -36,24 +36,17 @@ For development or easier debugging:
 import "@deepgram/styles/expanded";
 ```
 
-### Using with Tailwind CSS
+### Using with Tailwind CSS v4
 
-If you're using Tailwind CSS in your project, you can extend your configuration with the Deepgram theme:
+If you're using Tailwind CSS v4 in your project, import the Deepgram theme CSS in your main stylesheet:
 
-```javascript
-// tailwind.config.js
-const deepgramConfig = require("@deepgram/styles/tailwind-config");
-
-module.exports = {
-  presets: [deepgramConfig],
-  content: [
-    "./src/**/*.{html,js,ts,jsx,tsx}",
-    // your content paths
-  ],
-  // your customizations
-};
+```css
+/* Import Deepgram theme (includes @import "tailwindcss") */
+@import "@deepgram/styles/theme";
 ```
 
+This provides all Deepgram design tokens (`--color-dg-*`, `--font-dg-*`, `--spacing-dg-*`, etc.), base styles, and custom utilities via Tailwind v4's CSS-first configuration.
+
 ### Importing Source Files
 
 To customize and build the styles yourself:

package/design-system.yaml

@@ -95,50 +95,50 @@ base:
       scrollBehavior: "smooth"
   body:
     properties:
-      fontFamily: "theme(fontFamily.dg-sans)"
+      fontFamily: "var(--font-dg-sans)"
       WebkitFontSmoothing: "antialiased"
       MozOsxFontSmoothing: "grayscale"
-      backgroundColor: "theme(colors.dg-background)"
-      color: "theme(colors.dg-text)"
-      lineHeight: "theme(lineHeight.normal)"
+      backgroundColor: "var(--color-dg-background)"
+      color: "var(--color-dg-text)"
+      lineHeight: "1.5"
   "h1, h2, h3, h4, h5, h6":
     properties:
-      fontFamily: "theme(fontFamily.dg-noto)"
-      fontWeight: "theme(fontWeight.bold)"
+      fontFamily: "var(--font-dg-noto)"
+      fontWeight: "700"
   h1:
     properties:
-      fontSize: "theme(fontSize.4xl)"
+      fontSize: "var(--text-4xl)"
     media:
       "(min-width: 768px)":
         properties:
-          fontSize: "theme(fontSize.5xl)"
+          fontSize: "var(--text-5xl)"
   h2:
     properties:
-      fontSize: "theme(fontSize.3xl)"
+      fontSize: "var(--text-3xl)"
     media:
       "(min-width: 768px)":
         properties:
-          fontSize: "theme(fontSize.4xl)"
+          fontSize: "var(--text-4xl)"
   h3:
     properties:
-      fontSize: "theme(fontSize.2xl)"
+      fontSize: "var(--text-2xl)"
     media:
       "(min-width: 768px)":
         properties:
-          fontSize: "theme(fontSize.3xl)"
+          fontSize: "var(--text-3xl)"
   h4:
     properties:
-      fontSize: "theme(fontSize.xl)"
+      fontSize: "var(--text-xl)"
     media:
       "(min-width: 768px)":
         properties:
-          fontSize: "theme(fontSize.2xl)"
+          fontSize: "var(--text-2xl)"
   "code, pre":
     properties:
-      fontFamily: "theme(fontFamily.dg-mono)"
+      fontFamily: "var(--font-dg-mono)"
   a:
     properties:
-      color: "theme(colors.dg-primary)"
+      color: "var(--color-dg-primary)"
       transitionProperty: "color"
       transitionDuration: "200ms"
       "&:hover":
@@ -204,7 +204,7 @@ components:
       primary:
         css:
           ".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":
             apply: "border-transparent text-black dg-bg-reset bg-white dg-shadow-subtle"
       secondary:
@@ -212,19 +212,19 @@ components:
           ".dg-btn--secondary":
             apply: "border border-transparent bg-white text-black"
           ".dg-btn--secondary:hover":
-            apply: "border border-white bg-black dg-text-white"
+            apply: "border border-white bg-black text-white"
       ghost:
         css:
           ".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":
             apply: "border-transparent text-black dg-bg-reset bg-white dg-shadow-subtle"
       danger-ghost:
         css:
           ".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"
       icon-only:
         css:
           ".dg-btn--icon-only":
@@ -788,7 +788,7 @@ components:
             properties:
               padding-top: "2rem"
           ".dg-section--fieldset .dg-section-heading":
-            apply: "absolute bg-dg-background dg-text-muted uppercase tracking-wide font-semibold text-base px-2 m-0"
+            apply: "absolute bg-dg-background text-dg-muted uppercase tracking-wide font-semibold text-base px-2 m-0"
             properties:
               top: "-0.75rem"
               left: "1rem"
@@ -881,18 +881,18 @@ components:
           ".dg-card--selectable__indicator":
             apply: "hidden"
           ".dg-card--selectable__icon":
-            apply: "dg-text-white"
+            apply: "text-white"
             properties:
               margin-right: "0.5rem"
           ".dg-card--selectable__content":
             apply: "flex-1 flex flex-col gap-1"
           ".dg-card--selectable .dg-item-title":
-            apply: "text-base font-semibold dg-text-white"
+            apply: "text-base font-semibold text-white"
             properties:
               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)":
             ".dg-card--selectable__content":
@@ -926,18 +926,18 @@ components:
           ".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"
+            apply: "text-white"
             properties:
               margin-right: "0.5rem"
           ".dg-card--file-upload__content":
             apply: "flex-1 flex flex-col gap-1"
           ".dg-card--file-upload .dg-item-title":
-            apply: "text-base font-semibold dg-text-white"
+            apply: "text-base font-semibold text-white"
             properties:
               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)":
             ".dg-card--file-upload__content":
@@ -978,7 +978,7 @@ components:
           ".dg-card__icon":
             apply: "flex items-center p-3 pt-6"
           ".dg-card__icon i, .dg-card__icon svg":
-            apply: "text-5xl dg-text-primary"
+            apply: "text-5xl text-dg-primary"
           ".dg-card__icon--left":
             apply: "justify-start"
           ".dg-card__icon--center":
@@ -1173,7 +1173,7 @@ components:
         properties:
           -webkit-overflow-scrolling: "touch"
       ".dg-code-block pre":
-        apply: "m-0 p-0 font-dg-mono text-xs dg-text-fog whitespace-pre-wrap break-words"
+        apply: "m-0 p-0 font-dg-mono text-xs text-dg-fog whitespace-pre-wrap break-words"
         properties:
           line-height: "1.3"
     media:
@@ -1251,13 +1251,13 @@ components:
           background-color: "rgba(19, 239, 149, 0.1)"
           box-shadow: "0 0.25rem 0.75rem rgba(19, 239, 149, 0.15)"
       ".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 transition-[gap] duration-200"
+        apply: "inline-flex items-center text-dg-secondary text-sm font-semibold gap-2 transition-[gap] duration-200"
       ".dg-hero__announcement:hover .dg-hero__announcement-cta":
         apply: "gap-3"
       ".dg-hero__body":
-        apply: "text-center dg-text-fog text-lg leading-7 font-normal mx-auto max-w-[53.125rem]"
+        apply: "text-center text-dg-fog text-lg leading-7 font-normal mx-auto max-w-[53.125rem]"
       ".dg-hero__actions":
         apply: "flex items-center justify-center flex-wrap gap-4 mt-2"
     media:
@@ -1404,9 +1404,9 @@ components:
       tags: [heading, section, title]
     css:
       ".dg-section-heading":
-        apply: "font-semibold font-dg-noto text-2xl dg-text-white mb-6 flex flex-wrap items-baseline gap-2"
+        apply: "font-semibold font-dg-noto text-2xl text-white mb-6 flex 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)":
         ".dg-section-heading":
@@ -1444,9 +1444,9 @@ components:
       ".dg-page-heading":
         apply: "mb-8"
       ".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)":
         ".dg-page-heading__title":
@@ -1499,9 +1499,9 @@ components:
       tags: [heading, card, title]
     css:
       ".dg-card-heading":
-        apply: "font-medium font-dg-noto text-xl dg-text-white mb-3 flex flex-wrap items-baseline gap-1.5"
+        apply: "font-medium font-dg-noto text-xl text-white mb-3 flex 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"
     examples:
       - title: "Card Heading"
         ast:
@@ -1521,9 +1521,9 @@ components:
       tags: [heading, item, title]
     css:
       ".dg-item-title":
-        apply: "font-medium font-dg-noto text-base dg-text-white mb-1 flex flex-wrap items-baseline gap-1"
+        apply: "font-medium font-dg-noto text-base text-white mb-1 flex 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"
     examples:
       - title: "Item Title"
         ast:
@@ -1546,7 +1546,7 @@ components:
       tags: [text, prose, body, paragraph]
     css:
       ".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":
         apply: "max-w-none w-full"
     media:
@@ -1568,7 +1568,7 @@ components:
       small:
         css:
           ".dg-prose--small":
-            apply: "text-xs dg-text-muted"
+            apply: "text-xs text-dg-muted"
         media:
           "(min-width: 640px)":
             ".dg-prose--small":
@@ -1595,15 +1595,15 @@ components:
       tags: [input, text, form, field, label]
     css:
       ".dg-input":
-        apply: "w-full px-4 py-3 rounded border border-dg-pebble bg-dg-charcoal dg-text-white font-dg-sans text-sm outline-none transition-all duration-300 shadow-dg-sm"
+        apply: "w-full px-4 py-3 rounded border border-dg-pebble bg-dg-charcoal text-white font-dg-sans text-sm outline-none transition-all duration-300 shadow-dg-sm"
         properties:
           height: "2.75rem"
       ".dg-input::placeholder":
-        apply: "dg-text-muted"
+        apply: "text-dg-muted"
       ".dg-input:focus":
         apply: "border-dg-primary"
         properties:
-          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":
         apply: "opacity-50 cursor-not-allowed"
     variants:
@@ -1695,7 +1695,7 @@ components:
       tags: [textarea, input, form]
     css:
       ".dg-textarea":
-        apply: "dg-input"
+        apply: "w-full px-4 py-3 rounded border border-dg-pebble bg-dg-charcoal text-white font-dg-sans text-sm outline-none transition-all duration-300 shadow-dg-sm"
         properties:
           min-height: "6.25rem"
           resize: "vertical"
@@ -1746,9 +1746,9 @@ components:
       ".dg-checkbox:focus":
         apply: "outline-none"
         properties:
-          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":
         apply: "border-dg-slate"
       ".dg-checkbox-description":
@@ -1808,19 +1808,19 @@ components:
       ".dg-form-field--error .dg-input, .dg-form-field--error .dg-textarea":
         apply: "border-dg-danger"
       ".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":
         apply: "border-dg-success"
       ".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"
         properties:
           margin: "0"
       ".dg-form-helper":
-        apply: "text-xs dg-text-muted block"
+        apply: "text-xs text-dg-muted block"
         properties:
           margin: "0"
     media:
@@ -1866,13 +1866,13 @@ components:
       ".dg-drag-drop-zone__input":
         apply: "absolute inset-0 w-full h-full opacity-0 cursor-pointer"
       ".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"
     examples:
       - title: "File Upload Zone"
         ast:
@@ -1911,7 +1911,7 @@ components:
       tags: [alert, status, notification, banner]
     css:
       ".dg-status":
-        apply: "w-full italic dg-text-fog text-sm leading-snug py-1 my-2"
+        apply: "w-full italic text-dg-fog text-sm leading-snug py-1 my-2"
     media:
       "(min-width: 640px)":
         ".dg-status":
@@ -1920,27 +1920,27 @@ components:
       info:
         css:
           ".dg-status--info":
-            apply: "dg-text-fog"
+            apply: "text-dg-fog"
       success:
         css:
           ".dg-status--success":
-            apply: "dg-text-success"
+            apply: "text-dg-success"
       warning:
         css:
           ".dg-status--warning":
-            apply: "dg-text-warning"
+            apply: "text-dg-warning"
       error:
         css:
           ".dg-status--error":
-            apply: "dg-text-danger"
+            apply: "text-dg-danger"
       primary:
         css:
           ".dg-status--primary":
-            apply: "dg-text-primary"
+            apply: "text-dg-primary"
       secondary:
         css:
           ".dg-status--secondary":
-            apply: "dg-text-secondary"
+            apply: "text-dg-secondary"
       with-icon:
         css:
           ".dg-status--with-icon":
@@ -1997,7 +1997,7 @@ components:
       ".dg-spinner":
         apply: "rounded-full size-10 border-[3px] border-dg-pebble border-t-dg-primary mx-auto mb-3 animate-spin"
       ".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"
     examples:
       - title: "Spinner"
         ast:
@@ -2263,7 +2263,7 @@ components:
       ".dg-header__logo-image":
         apply: "h-8 w-auto"
       ".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":
         apply: "flex items-center gap-4"
       ".dg-header__profile-link":
@@ -2409,13 +2409,13 @@ components:
       tags: [link, navigation]
     css:
       ".dg-link":
-        apply: "dg-text-primary transition-opacity duration-200"
+        apply: "text-dg-primary transition-opacity duration-200"
       ".dg-link:hover":
         apply: "opacity-80"
       ".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"
     examples:
       - title: "Link"
         ast:
@@ -2457,15 +2457,15 @@ components:
       ".dg-text-white":
         apply: "text-white"
       ".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"
     examples:
       - title: "Text Colors"
         ast: