@deepgram/styles 0.2.10 → 0.2.11

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.10",
+  "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": {