@deepgram/styles 0.0.1 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +452 -48
  2. package/dist/deepgram.css +2 -1595
  3. package/dist/deepgram.expanded.css +2220 -18
  4. package/lib/deepgram.css +940 -224
  5. package/package.json +1 -1
  6. package/tailwind.config.js +40 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deepgram/styles",
3
- "version": "0.0.1",
3
+ "version": "0.0.4",
4
4
  "description": "Tailwind-based design system and styles library for Deepgram design system and demos",
5
5
  "author": "Deepgram",
6
6
  "license": "MIT",
package/tailwind.config.js CHANGED
@@ -12,19 +12,31 @@ module.exports = {
12
12
  extend: {
13
13
  colors: {
14
14
  // Deepgram Brand Colors (from marketing site)
15
- "dg-primary": "#13ef95",
16
- "dg-secondary": "#201cff",
15
+ // These can be overridden by setting CSS variables
16
+ "dg-primary": "var(--dg-primary, #13ef95)",
17
+ "dg-secondary": "var(--dg-secondary, #149afb)",
17
18
 
18
19
  // Background Colors
19
- "dg-background": "#0b0b0c",
20
- "dg-modal-background": "#1a1a1f",
21
- "dg-card-background": "#1a1a1f",
22
- "dg-translucent-background": "#00000080",
20
+ "dg-almost-black": "#050506", // Almost Black (darkest)
21
+ "dg-background": "#0b0b0c", // Black
22
+ "dg-charcoal": "#1a1a1f", // Charcoal (cards, modals)
23
+ "dg-translucent": "rgba(0, 0, 0, 0.5)",
23
24
 
24
- // Border & Text
25
+ // Border Colors
25
26
  "dg-border": "#2c2c33",
26
- "dg-text": "#fbfbff",
27
- "dg-muted": "#949498",
27
+ "dg-pebble": "#4e4e52", // Pebble (default borders)
28
+ "dg-slate": "#949498", // Slate (muted borders)
29
+
30
+ // Text Colors
31
+ "dg-text": "#fbfbff", // Ghost White (primary text)
32
+ "dg-fog": "#edede2", // Fog Gray (secondary text)
33
+ "dg-platinum": "#e1e1e5", // Platinum (tertiary text)
34
+ "dg-muted": "#949498", // Slate (muted text)
35
+
36
+ // Status Colors
37
+ "dg-success": "#12b76a",
38
+ "dg-warning": "#fec84b",
39
+ "dg-danger": "#f04438",
28
40
 
29
41
  // Gradient colors for primary button
30
42
  "dg-gradient-start": "#008fc1",
@@ -60,17 +72,20 @@ module.exports = {
60
72
  "dg-lg": "1.5rem",
61
73
  "dg-xl": "2rem",
62
74
  "dg-2xl": "3rem",
75
+ 128: "32rem", // 512px - for extra large column widths
63
76
  },
64
77
  borderRadius: {
65
- "dg-sm": "4px",
66
- "dg-md": "8px",
67
- "dg-lg": "12px",
68
- "dg-xl": "16px",
78
+ "dg-sm": "0.25rem",
79
+ "dg-md": "0.5rem",
80
+ "dg-lg": "0.75rem",
81
+ "dg-xl": "1rem",
69
82
  },
70
83
  boxShadow: {
71
- "dg-sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
72
- "dg-md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
73
- "dg-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
84
+ "dg-sm": "0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05)",
85
+ "dg-md":
86
+ "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)",
87
+ "dg-lg":
88
+ "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)",
74
89
  },
75
90
  },
76
91
  },
@@ -78,9 +93,13 @@ module.exports = {
78
93
  function ({ addBase, addUtilities, theme }) {
79
94
  addBase({
80
95
  ":root": {
81
- "--dg-border-width": "2px",
96
+ "--dg-base-font-size": "16px",
97
+ "--dg-border-width": "0.125rem",
98
+ "--dg-primary": "#13ef95",
99
+ "--dg-secondary": "#149afb",
82
100
  },
83
101
  html: {
102
+ fontSize: "var(--dg-base-font-size, 16px)",
84
103
  scrollBehavior: "smooth",
85
104
  },
86
105
  body: {
@@ -136,7 +155,7 @@ module.exports = {
136
155
  addUtilities({
137
156
  ".dg-gradient-border": {
138
157
  backgroundImage:
139
- "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))",
158
+ "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))",
140
159
  backgroundOrigin: "padding-box, border-box",
141
160
  backgroundClip: "padding-box, border-box",
142
161
  backgroundRepeat: "no-repeat",
@@ -153,10 +172,11 @@ module.exports = {
153
172
  backgroundSize: "auto",
154
173
  },
155
174
  ".dg-glow-cyan-green": {
156
- boxShadow: "rgba(56, 237, 172, 0.2) 6px 0 15px 0, rgba(20, 154, 251, 0.2) -6px 0 15px 0",
175
+ boxShadow:
176
+ "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",
157
177
  },
158
178
  ".dg-shadow-subtle": {
159
- boxShadow: "rgba(38, 44, 52, 0.05) 0 1px 2px",
179
+ boxShadow: "rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem",
160
180
  },
161
181
  });
162
182
  },