@deepgram/styles 0.2.12 → 0.2.14
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.
- package/README.md +343 -313
- package/design-system.yaml +25 -1
- package/dist/deepgram.css +1 -1
- package/dist/deepgram.expanded.css +86 -7
- package/dist/mcp/server.d.ts +12 -0
- package/dist/mcp/server.js +477 -0
- package/package.json +17 -3
- package/src/mcp/server.ts +724 -0
- package/dist/react/BtnCollapse.d.ts +0 -4
- package/dist/react/BtnCollapse.js +0 -9
- package/dist/react/BtnDangerGhost.d.ts +0 -4
- package/dist/react/BtnDangerGhost.js +0 -9
- package/dist/react/BtnGhost.d.ts +0 -4
- package/dist/react/BtnGhost.js +0 -9
- package/dist/react/BtnIcon.d.ts +0 -4
- package/dist/react/BtnIcon.js +0 -9
- package/dist/react/BtnSecondary.d.ts +0 -4
- package/dist/react/BtnSecondary.js +0 -9
- package/dist/react/BtnSmall.d.ts +0 -4
- package/dist/react/BtnSmall.js +0 -9
- package/dist/react/Header.d.ts +0 -25
- package/dist/react/Header.js +0 -58
- package/dist/react/Link.d.ts +0 -4
- package/dist/react/Link.js +0 -9
- package/dist/react/Modal.d.ts +0 -8
- package/dist/react/Modal.js +0 -17
- package/src/react/BtnCollapse.tsx +0 -14
- package/src/react/BtnDangerGhost.tsx +0 -14
- package/src/react/BtnGhost.tsx +0 -14
- package/src/react/BtnIcon.tsx +0 -14
- package/src/react/BtnSecondary.tsx +0 -14
- package/src/react/BtnSmall.tsx +0 -14
- package/src/react/Header.tsx +0 -105
- package/src/react/Link.tsx +0 -14
- package/src/react/Modal.tsx +0 -29
package/README.md
CHANGED
|
@@ -2,315 +2,444 @@
|
|
|
2
2
|
|
|
3
3
|
A comprehensive, YAML-driven design system and CSS component library for building consistent Deepgram applications. Built on Tailwind CSS v4 with automatic light/dark mode, BEM methodology, and zero-config theming.
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
### Automatic Light/Dark Mode
|
|
5
|
+
## Quick Start
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
### CDN
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
- **Overridable**: Force a specific mode with a single line of CSS (`color-scheme: dark`)
|
|
13
|
-
- **No JS required**: Pure CSS implementation — no class toggling, no build-time config
|
|
14
|
-
- **WCAG-compliant**: Light mode brand colors are tuned for AA contrast ratios on white
|
|
9
|
+
Add to your HTML `<head>`:
|
|
15
10
|
|
|
16
|
-
|
|
11
|
+
```html
|
|
12
|
+
<!-- Deepgram Styles -->
|
|
13
|
+
<link rel="stylesheet" href="https://unpkg.com/@deepgram/styles/dist/deepgram.css">
|
|
17
14
|
|
|
18
|
-
|
|
15
|
+
<!-- Font Awesome for icons -->
|
|
16
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
|
|
17
|
+
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
|
|
18
|
+
crossorigin="anonymous" referrerpolicy="no-referrer">
|
|
19
|
+
```
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
- **Typography**: Font families, sizes, and weights with Tailwind integration
|
|
22
|
-
- **Spacing**: Consistent spacing scale in `rem` units
|
|
23
|
-
- **Border radius**: Rounded corner presets
|
|
24
|
-
- **Shadows**: Elevation levels from subtle to prominent
|
|
25
|
-
- **Logos**: 12 SVG logo variants (adaptive, light, dark) across wordmark, lettermark, square, and circle types
|
|
21
|
+
jsDelivr alternative:
|
|
26
22
|
|
|
27
|
-
|
|
23
|
+
```html
|
|
24
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@deepgram/styles/dist/deepgram.css">
|
|
25
|
+
```
|
|
28
26
|
|
|
29
|
-
|
|
30
|
-
- **BEM naming**: `.dg-{block}`, `.dg-{block}__{element}`, `.dg-{block}--{modifier}`
|
|
31
|
-
- **Custom utilities**: `dg-gradient-border`, `dg-glow-cyan-green`, `dg-bg-reset`, `dg-shadow-subtle`
|
|
32
|
-
- **Responsive**: Mobile-first breakpoints with progressive enhancement
|
|
33
|
-
- **Adaptive contrast tokens**: `dg-solid` / `dg-on-solid` for elements that invert between modes
|
|
27
|
+
### npm
|
|
34
28
|
|
|
35
|
-
|
|
29
|
+
```bash
|
|
30
|
+
npm install @deepgram/styles @fortawesome/fontawesome-free
|
|
31
|
+
```
|
|
36
32
|
|
|
37
|
-
|
|
33
|
+
Import in your JS/TS entry file:
|
|
38
34
|
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
--dg-secondary: #4ecdc4; /* Your secondary brand color */
|
|
43
|
-
}
|
|
35
|
+
```javascript
|
|
36
|
+
import '@deepgram/styles';
|
|
37
|
+
import '@fortawesome/fontawesome-free/css/all.min.css';
|
|
44
38
|
```
|
|
45
39
|
|
|
46
|
-
###
|
|
40
|
+
### Verify it works
|
|
47
41
|
|
|
48
|
-
|
|
42
|
+
Paste this into your page — you should see a styled green button:
|
|
49
43
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
Adaptive variants use embedded CSS `@media (prefers-color-scheme)` to switch automatically.
|
|
44
|
+
```html
|
|
45
|
+
<button class="dg-btn dg-btn--primary">
|
|
46
|
+
<i class="fas fa-check"></i>
|
|
47
|
+
It works!
|
|
48
|
+
</button>
|
|
49
|
+
```
|
|
58
50
|
|
|
59
51
|
---
|
|
60
52
|
|
|
61
|
-
##
|
|
53
|
+
## Using the Stylesheet
|
|
62
54
|
|
|
63
|
-
|
|
55
|
+
### BEM Naming
|
|
64
56
|
|
|
65
|
-
|
|
57
|
+
All classes use the `dg-` prefix with BEM methodology:
|
|
66
58
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
59
|
+
| Pattern | Purpose | Example |
|
|
60
|
+
|---------|---------|---------|
|
|
61
|
+
| `.dg-{name}` | Block (root component) | `.dg-btn`, `.dg-card` |
|
|
62
|
+
| `.dg-{name}__{element}` | Element (child part) | `.dg-card__header`, `.dg-card__body` |
|
|
63
|
+
| `.dg-{name}--{modifier}` | Modifier (variant) | `.dg-btn--primary`, `.dg-card--compact` |
|
|
72
64
|
|
|
73
|
-
|
|
74
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">
|
|
75
|
-
```
|
|
65
|
+
### Light/Dark Mode
|
|
76
66
|
|
|
77
|
-
|
|
67
|
+
The stylesheet uses CSS `light-dark()` for all color tokens — theme switching is automatic:
|
|
78
68
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
```
|
|
69
|
+
- **Automatic**: Follows OS preference out of the box (`color-scheme: light dark` on `:root`)
|
|
70
|
+
- **No JS required**: Pure CSS implementation — no class toggling
|
|
82
71
|
|
|
83
|
-
|
|
72
|
+
Force a mode:
|
|
84
73
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
npm install @deepgram/styles @fortawesome/fontawesome-free
|
|
74
|
+
```css
|
|
75
|
+
:root { color-scheme: dark; } /* Always dark */
|
|
76
|
+
:root { color-scheme: light; } /* Always light */
|
|
89
77
|
```
|
|
90
78
|
|
|
91
|
-
|
|
79
|
+
Or via JavaScript:
|
|
92
80
|
|
|
93
81
|
```javascript
|
|
94
|
-
|
|
95
|
-
|
|
82
|
+
document.documentElement.style.colorScheme = 'dark'; // Force dark
|
|
83
|
+
document.documentElement.style.colorScheme = 'light'; // Force light
|
|
84
|
+
document.documentElement.style.removeProperty('color-scheme'); // System
|
|
96
85
|
```
|
|
97
86
|
|
|
98
|
-
|
|
87
|
+
### Theme Utilities
|
|
99
88
|
|
|
100
|
-
|
|
89
|
+
For apps with a theme toggle and localStorage persistence:
|
|
101
90
|
|
|
102
|
-
|
|
91
|
+
```javascript
|
|
92
|
+
import { setLight, setDark, setSystem, getTheme, restoreTheme, onThemeChange } from '@deepgram/styles/utils';
|
|
103
93
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
94
|
+
setLight(); // Force light (persists to localStorage)
|
|
95
|
+
setDark(); // Force dark
|
|
96
|
+
setSystem(); // Follow OS preference
|
|
107
97
|
|
|
108
|
-
|
|
98
|
+
const theme = getTheme(); // 'light' | 'dark' | 'system'
|
|
109
99
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
100
|
+
restoreTheme(); // Call in <head> to prevent flash of wrong theme
|
|
101
|
+
|
|
102
|
+
const unsubscribe = onThemeChange((theme) => {
|
|
103
|
+
console.log('Theme changed to:', theme);
|
|
104
|
+
});
|
|
115
105
|
```
|
|
116
106
|
|
|
117
|
-
###
|
|
107
|
+
### Brand Customization
|
|
118
108
|
|
|
119
|
-
|
|
109
|
+
Two CSS variables control the entire brand palette — gradients, glows, buttons, and links all derive from them:
|
|
120
110
|
|
|
121
|
-
```
|
|
122
|
-
|
|
111
|
+
```css
|
|
112
|
+
:root {
|
|
113
|
+
--dg-primary: #ff6b35; /* Your primary color */
|
|
114
|
+
--dg-secondary: #4ecdc4; /* Your secondary color */
|
|
115
|
+
}
|
|
123
116
|
```
|
|
124
117
|
|
|
125
|
-
|
|
118
|
+
In light mode, brand colors automatically switch to WCAG-compliant darker variants. You can scope to a section:
|
|
126
119
|
|
|
127
|
-
```
|
|
128
|
-
|
|
120
|
+
```css
|
|
121
|
+
.partner-section {
|
|
122
|
+
--dg-primary: #a855f7;
|
|
123
|
+
--dg-secondary: #ec4899;
|
|
124
|
+
}
|
|
129
125
|
```
|
|
130
126
|
|
|
131
|
-
###
|
|
127
|
+
### Base Font Size
|
|
132
128
|
|
|
133
|
-
|
|
129
|
+
Everything uses `rem` units. Change the base and everything scales:
|
|
134
130
|
|
|
135
|
-
```
|
|
136
|
-
|
|
131
|
+
```css
|
|
132
|
+
:root {
|
|
133
|
+
--dg-base-font-size: 18px;
|
|
134
|
+
}
|
|
137
135
|
```
|
|
138
136
|
|
|
139
|
-
###
|
|
137
|
+
### Tailwind CSS v4 Integration
|
|
140
138
|
|
|
141
|
-
If
|
|
139
|
+
If your project uses Tailwind v4, import the theme for all design tokens as Tailwind utilities:
|
|
142
140
|
|
|
143
141
|
```css
|
|
144
|
-
/* Import Deepgram theme (includes @import "tailwindcss") */
|
|
145
142
|
@import "@deepgram/styles/theme";
|
|
146
143
|
```
|
|
147
144
|
|
|
148
|
-
This provides
|
|
145
|
+
This provides `--color-dg-*`, `--font-dg-*`, `--spacing-dg-*` tokens, base styles, custom utilities, and includes `@import "tailwindcss"`.
|
|
149
146
|
|
|
150
|
-
|
|
147
|
+
---
|
|
151
148
|
|
|
152
|
-
|
|
149
|
+
## React Components
|
|
153
150
|
|
|
154
|
-
|
|
155
|
-
|
|
151
|
+
Typed React wrappers with boolean variant props, ref forwarding, and className merging.
|
|
152
|
+
|
|
153
|
+
### Setup
|
|
154
|
+
|
|
155
|
+
```bash
|
|
156
|
+
npm install @deepgram/styles react @fortawesome/fontawesome-free
|
|
156
157
|
```
|
|
157
158
|
|
|
158
|
-
|
|
159
|
+
```tsx
|
|
160
|
+
// Entry point — import CSS once
|
|
161
|
+
import '@deepgram/styles';
|
|
162
|
+
import '@fortawesome/fontawesome-free/css/all.min.css';
|
|
159
163
|
|
|
160
|
-
|
|
164
|
+
// Any component file
|
|
165
|
+
import { Btn, Card, CardHeader, CardBody, Prose } from '@deepgram/styles/react';
|
|
166
|
+
```
|
|
161
167
|
|
|
162
|
-
|
|
163
|
-
|
|
168
|
+
### API
|
|
169
|
+
|
|
170
|
+
- **Boolean variant props**: `<Btn primary>` renders `.dg-btn.dg-btn--primary`
|
|
171
|
+
- **className merging**: Pass `className` to add your own classes
|
|
172
|
+
- **Ref forwarding**: All components use `forwardRef`
|
|
173
|
+
- **Native props**: All extra props spread onto the underlying HTML element
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
// HTML
|
|
177
|
+
<button class="dg-btn dg-btn--primary dg-btn--sm">Save</button>
|
|
178
|
+
|
|
179
|
+
// React
|
|
180
|
+
<Btn primary sm>Save</Btn>
|
|
181
|
+
|
|
182
|
+
// With extras
|
|
183
|
+
<Btn primary sm className="my-class" onClick={handleSave} disabled={loading}>
|
|
184
|
+
Save
|
|
185
|
+
</Btn>
|
|
164
186
|
```
|
|
165
187
|
|
|
166
|
-
|
|
188
|
+
### Component Reference
|
|
189
|
+
|
|
190
|
+
| Component | CSS Class | Variant Props |
|
|
191
|
+
|-----------|-----------|---------------|
|
|
192
|
+
| `Btn` | `.dg-btn` | `primary`, `secondary`, `ghost`, `dangerGhost`, `iconOnly`, `sm`, `collapse` |
|
|
193
|
+
| `Card` | `.dg-card` | `structured`, `compact`, `spacious`, `bordered` |
|
|
194
|
+
| `CardImage` | `.dg-card__image` | Use `className="dg-card__image--medium"` etc. |
|
|
195
|
+
| `CardHeader` | `.dg-card__header` | — |
|
|
196
|
+
| `CardBody` | `.dg-card__body` | — |
|
|
197
|
+
| `CardFooter` | `.dg-card__footer` | — |
|
|
198
|
+
| `Section` | `.dg-section` | `compact`, `spacious`, `bordered`, `elevated`, `fieldset` |
|
|
199
|
+
| `SectionHeading` | `.dg-section-heading` | — |
|
|
200
|
+
| `PageHeading` | `.dg-page-heading` | — |
|
|
201
|
+
| `Input` | `.dg-input` | `inline` |
|
|
202
|
+
| `Textarea` | `.dg-textarea` | — |
|
|
203
|
+
| `Checkbox` | `.dg-checkbox` | — |
|
|
204
|
+
| `Select` | `.dg-select` | — |
|
|
205
|
+
| `Radio` | `.dg-radio` | — |
|
|
206
|
+
| `Toggle` | `.dg-toggle` | — |
|
|
207
|
+
| `FormField` | `.dg-form-field` | `error`, `success` |
|
|
208
|
+
| `FormLabel` | `.dg-form-label` | — |
|
|
209
|
+
| `FormHelper` | `.dg-form-helper` | — |
|
|
210
|
+
| `Alert` | `.dg-alert` | `info`, `success`, `warning`, `danger` |
|
|
211
|
+
| `Status` | `.dg-status` | `info`, `success`, `warning`, `error`, `primary`, `secondary` |
|
|
212
|
+
| `Spinner` | `.dg-spinner` | — |
|
|
213
|
+
| `Prose` | `.dg-prose` | `large`, `small`, `block` |
|
|
214
|
+
| `Hero` | `.dg-hero` | — |
|
|
215
|
+
| `CodeBlock` | `.dg-code-block` | `compact`, `tall`, `noScroll` — add [`prismjs`](https://www.npmjs.com/package/prismjs) for syntax highlighting |
|
|
216
|
+
| `Footer` | `.dg-footer` | — |
|
|
217
|
+
| `Newsletter` | `.dg-newsletter-container` | — |
|
|
218
|
+
| `ActionGroup` | `.dg-action-group` | — |
|
|
219
|
+
| `ConstrainWidth` | `.dg-constrain-width` | — |
|
|
220
|
+
| `GridMobileStack` | `.dg-grid-mobile-stack` | — |
|
|
221
|
+
|
|
222
|
+
Sub-components for `Card`, `Hero`, `Alert`, `DragDropZone`, `Columns`, `Footer`, and `Newsletter` are also exported — see [full exports](./src/react/index.ts).
|
|
223
|
+
|
|
224
|
+
### CodeBlock with Syntax Highlighting
|
|
225
|
+
|
|
226
|
+
The `CodeBlock` component provides container styling. For syntax highlighting, add `prismjs`:
|
|
167
227
|
|
|
168
|
-
|
|
228
|
+
```bash
|
|
229
|
+
npm install prismjs
|
|
230
|
+
```
|
|
169
231
|
|
|
170
|
-
|
|
232
|
+
```tsx
|
|
233
|
+
import { CodeBlock } from '@deepgram/styles/react';
|
|
234
|
+
import Prism from 'prismjs';
|
|
235
|
+
import 'prismjs/components/prism-javascript';
|
|
236
|
+
import 'prismjs/themes/prism-tomorrow.css';
|
|
237
|
+
import { useEffect } from 'react';
|
|
238
|
+
|
|
239
|
+
function CodeExample({ code, language }: { code: string; language: string }) {
|
|
240
|
+
useEffect(() => { Prism.highlightAll(); }, [code]);
|
|
241
|
+
|
|
242
|
+
return (
|
|
243
|
+
<CodeBlock>
|
|
244
|
+
<pre><code className={`language-${language}`}>{code}</code></pre>
|
|
245
|
+
</CodeBlock>
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
```
|
|
171
249
|
|
|
172
|
-
|
|
250
|
+
`prismjs` is optional — you can use any highlighting library (Shiki, Highlight.js, etc.).
|
|
173
251
|
|
|
174
|
-
|
|
175
|
-
/* Force dark mode */
|
|
176
|
-
:root { color-scheme: dark; }
|
|
252
|
+
### Theme Toggle in React
|
|
177
253
|
|
|
178
|
-
|
|
179
|
-
|
|
254
|
+
```tsx
|
|
255
|
+
import { Btn, ActionGroup } from '@deepgram/styles/react';
|
|
256
|
+
import { setLight, setDark, setSystem, getTheme, onThemeChange } from '@deepgram/styles/utils';
|
|
257
|
+
import { useState, useEffect } from 'react';
|
|
258
|
+
|
|
259
|
+
function ThemeToggle() {
|
|
260
|
+
const [theme, setTheme] = useState(getTheme());
|
|
261
|
+
useEffect(() => onThemeChange(setTheme), []);
|
|
262
|
+
|
|
263
|
+
return (
|
|
264
|
+
<ActionGroup>
|
|
265
|
+
<Btn primary={theme === 'light'} ghost={theme !== 'light'} sm onClick={setLight}>Light</Btn>
|
|
266
|
+
<Btn primary={theme === 'dark'} ghost={theme !== 'dark'} sm onClick={setDark}>Dark</Btn>
|
|
267
|
+
<Btn primary={theme === 'system'} ghost={theme !== 'system'} sm onClick={setSystem}>System</Btn>
|
|
268
|
+
</ActionGroup>
|
|
269
|
+
);
|
|
270
|
+
}
|
|
180
271
|
```
|
|
181
272
|
|
|
182
|
-
|
|
273
|
+
---
|
|
183
274
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
275
|
+
## Web Components (Experimental)
|
|
276
|
+
|
|
277
|
+
Auto-generated custom elements with Shadow DOM, built from the same YAML source.
|
|
187
278
|
|
|
188
|
-
|
|
189
|
-
|
|
279
|
+
```html
|
|
280
|
+
<script type="module">
|
|
281
|
+
import '@deepgram/styles/dist/components/web-components/btn.js';
|
|
282
|
+
</script>
|
|
190
283
|
|
|
191
|
-
|
|
192
|
-
document.documentElement.style.colorScheme = 'light';
|
|
284
|
+
<dg-btn primary>Get Started</dg-btn>
|
|
193
285
|
```
|
|
194
286
|
|
|
195
|
-
|
|
287
|
+
- Tag names match YAML keys with `dg-` prefix: `btn` → `<dg-btn>`
|
|
288
|
+
- Variants become boolean attributes: `<dg-btn primary sm>`
|
|
289
|
+
- Content projected via `<slot>` elements
|
|
196
290
|
|
|
197
|
-
|
|
291
|
+
> **Note**: Web Components are currently experimental. For production, use CSS classes or React components.
|
|
198
292
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
293
|
+
---
|
|
294
|
+
|
|
295
|
+
## MCP Server (AI Agent Integration)
|
|
296
|
+
|
|
297
|
+
The package includes a built-in [Model Context Protocol](https://modelcontextprotocol.io/) server that gives AI coding agents direct access to the design system — component names, BEM classes, rendered HTML examples, and design tokens.
|
|
298
|
+
|
|
299
|
+
### Setup
|
|
300
|
+
|
|
301
|
+
Install the package, then configure your AI tool:
|
|
302
|
+
|
|
303
|
+
**Claude Code** (CLI or `.mcp.json`):
|
|
304
|
+
|
|
305
|
+
```bash
|
|
306
|
+
claude mcp add deepgram-styles --scope project -- npx deepgram-styles-mcp
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
**Claude Desktop** (`claude_desktop_config.json`), **Cursor** (`.cursor/mcp.json`), or **Windsurf** (`.windsurf/mcp.json`):
|
|
203
310
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
311
|
+
```json
|
|
312
|
+
{
|
|
313
|
+
"mcpServers": {
|
|
314
|
+
"deepgram-styles": {
|
|
315
|
+
"command": "npx",
|
|
316
|
+
"args": ["deepgram-styles-mcp"]
|
|
317
|
+
}
|
|
207
318
|
}
|
|
208
319
|
}
|
|
209
320
|
```
|
|
210
321
|
|
|
211
|
-
###
|
|
322
|
+
### Available Tools
|
|
212
323
|
|
|
213
|
-
|
|
324
|
+
| Tool | Description |
|
|
325
|
+
|------|-------------|
|
|
326
|
+
| `list_components` | List all components with metadata, tags, and counts. Filter by category. |
|
|
327
|
+
| `get_component` | Full details for a component: BEM classes, variants, rendered HTML examples. |
|
|
328
|
+
| `get_design_tokens` | Design tokens (colors, spacing, fonts, shadows, border-radius). |
|
|
329
|
+
| `search_components` | Keyword search across names, titles, tags, and descriptions. |
|
|
214
330
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
331
|
+
### Custom YAML
|
|
332
|
+
|
|
333
|
+
To point the server at a custom design system YAML:
|
|
334
|
+
|
|
335
|
+
```json
|
|
336
|
+
{
|
|
337
|
+
"mcpServers": {
|
|
338
|
+
"deepgram-styles": {
|
|
339
|
+
"command": "npx",
|
|
340
|
+
"args": ["deepgram-styles-mcp", "--yaml", "./path/to/design-system.yaml"]
|
|
341
|
+
}
|
|
342
|
+
}
|
|
219
343
|
}
|
|
220
344
|
```
|
|
221
345
|
|
|
222
|
-
|
|
346
|
+
### Testing
|
|
223
347
|
|
|
224
|
-
|
|
225
|
-
/* Theme variations */
|
|
226
|
-
.theme-purple {
|
|
227
|
-
--dg-primary: #a855f7;
|
|
228
|
-
--dg-secondary: #ec4899;
|
|
229
|
-
}
|
|
348
|
+
Use the MCP Inspector to test interactively:
|
|
230
349
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
--dg-secondary: #3498db;
|
|
234
|
-
}
|
|
350
|
+
```bash
|
|
351
|
+
npx @modelcontextprotocol/inspector npx deepgram-styles-mcp
|
|
235
352
|
```
|
|
236
353
|
|
|
237
354
|
---
|
|
238
355
|
|
|
239
|
-
##
|
|
240
|
-
|
|
241
|
-
All color tokens are available as CSS custom properties and Tailwind utilities:
|
|
356
|
+
## Package Exports
|
|
242
357
|
|
|
243
|
-
|
|
358
|
+
| Import | Description |
|
|
359
|
+
|--------|-------------|
|
|
360
|
+
| `@deepgram/styles` | Minified production CSS (default) |
|
|
361
|
+
| `@deepgram/styles/expanded` | Non-minified CSS for debugging |
|
|
362
|
+
| `@deepgram/styles/theme` | Tailwind v4 theme CSS with all tokens |
|
|
363
|
+
| `@deepgram/styles/source` | Source CSS with `@apply` directives |
|
|
364
|
+
| `@deepgram/styles/react` | Typed React components |
|
|
365
|
+
| `@deepgram/styles/utils` | Theme utility functions |
|
|
366
|
+
| `@deepgram/styles/design-system` | Raw YAML design tokens |
|
|
367
|
+
| `@deepgram/styles/mcp` | MCP server for AI agent integration |
|
|
368
|
+
| `@deepgram/styles/logo/*` | 12 SVG logo variants |
|
|
244
369
|
|
|
245
|
-
|
|
246
|
-
|-------|----------|------|-------|
|
|
247
|
-
| `dg-almost-black` | `--color-dg-almost-black` | `#050506` | `#f8f9fa` |
|
|
248
|
-
| `dg-background` | `--color-dg-background` | `#0b0b0c` | `#ffffff` |
|
|
249
|
-
| `dg-charcoal` | `--color-dg-charcoal` | `#1a1a1f` | `#f3f4f6` |
|
|
250
|
-
| `dg-solid` | `--color-dg-solid` | `#ffffff` | `#000000` |
|
|
370
|
+
---
|
|
251
371
|
|
|
252
|
-
|
|
372
|
+
## Design Tokens
|
|
253
373
|
|
|
254
|
-
|
|
255
|
-
|-------|----------|------|-------|
|
|
256
|
-
| `dg-border` | `--color-dg-border` | `#2c2c33` | `#d1d5db` |
|
|
257
|
-
| `dg-pebble` | `--color-dg-pebble` | `#4e4e52` | `#9ca3af` |
|
|
258
|
-
| `dg-slate` | `--color-dg-slate` | `#949498` | `#6b7280` |
|
|
374
|
+
All tokens are CSS custom properties and Tailwind utilities (`bg-dg-*`, `text-dg-*`, `border-dg-*`, etc.).
|
|
259
375
|
|
|
260
|
-
###
|
|
376
|
+
### Colors
|
|
261
377
|
|
|
262
378
|
| Token | Variable | Dark | Light |
|
|
263
379
|
|-------|----------|------|-------|
|
|
380
|
+
| `dg-primary` | `--dg-primary` | `#13ef95` | `#047857` |
|
|
381
|
+
| `dg-secondary` | `--dg-secondary` | `#149afb` | `#0369a1` |
|
|
382
|
+
| `dg-background` | `--color-dg-background` | `#0b0b0c` | `#ffffff` |
|
|
383
|
+
| `dg-almost-black` | `--color-dg-almost-black` | `#050506` | `#f8f9fa` |
|
|
384
|
+
| `dg-charcoal` | `--color-dg-charcoal` | `#1a1a1f` | `#f3f4f6` |
|
|
385
|
+
| `dg-solid` | `--color-dg-solid` | `#ffffff` | `#000000` |
|
|
264
386
|
| `dg-text` | `--color-dg-text` | `#fbfbff` | `#111827` |
|
|
265
387
|
| `dg-fog` | `--color-dg-fog` | `#edede2` | `#1f2937` |
|
|
266
388
|
| `dg-platinum` | `--color-dg-platinum` | `#e1e1e5` | `#374151` |
|
|
267
389
|
| `dg-muted` | `--color-dg-muted` | `#949498` | `#6b7280` |
|
|
268
390
|
| `dg-on-solid` | `--color-dg-on-solid` | `#000000` | `#ffffff` |
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
| Token | Variable | Dark | Light |
|
|
273
|
-
|-------|----------|------|-------|
|
|
391
|
+
| `dg-border` | `--color-dg-border` | `#2c2c33` | `#d1d5db` |
|
|
392
|
+
| `dg-pebble` | `--color-dg-pebble` | `#4e4e52` | `#9ca3af` |
|
|
393
|
+
| `dg-slate` | `--color-dg-slate` | `#949498` | `#6b7280` |
|
|
274
394
|
| `dg-success` | `--color-dg-success` | `#12b76a` | `#15803d` |
|
|
275
395
|
| `dg-warning` | `--color-dg-warning` | `#fec84b` | `#a16207` |
|
|
276
396
|
| `dg-danger` | `--color-dg-danger` | `#f04438` | `#b91c1c` |
|
|
277
397
|
|
|
278
|
-
###
|
|
398
|
+
### Spacing
|
|
279
399
|
|
|
280
|
-
| Token |
|
|
281
|
-
|
|
282
|
-
| `
|
|
283
|
-
| `
|
|
400
|
+
| Token | Value | CSS Variable | Tailwind |
|
|
401
|
+
|-------|-------|-------------|----------|
|
|
402
|
+
| `xs` | `0.25rem` | `--spacing-dg-xs` | `p-dg-xs`, `m-dg-xs`, `gap-dg-xs` |
|
|
403
|
+
| `sm` | `0.5rem` | `--spacing-dg-sm` | `p-dg-sm`, `m-dg-sm`, `gap-dg-sm` |
|
|
404
|
+
| `md` | `1rem` | `--spacing-dg-md` | `p-dg-md`, `m-dg-md`, `gap-dg-md` |
|
|
405
|
+
| `lg` | `1.5rem` | `--spacing-dg-lg` | `p-dg-lg`, `m-dg-lg`, `gap-dg-lg` |
|
|
406
|
+
| `xl` | `2rem` | `--spacing-dg-xl` | `p-dg-xl`, `m-dg-xl`, `gap-dg-xl` |
|
|
407
|
+
| `2xl` | `3rem` | `--spacing-dg-2xl` | `p-dg-2xl`, `m-dg-2xl`, `gap-dg-2xl` |
|
|
408
|
+
|
|
409
|
+
### Border Radius
|
|
410
|
+
|
|
411
|
+
| Token | Value | CSS Variable | Tailwind |
|
|
412
|
+
|-------|-------|-------------|----------|
|
|
413
|
+
| `sm` | `0.25rem` | `--radius-dg-sm` | `rounded-dg-sm` |
|
|
414
|
+
| `md` | `0.5rem` | `--radius-dg-md` | `rounded-dg-md` |
|
|
415
|
+
| `lg` | `0.75rem` | `--radius-dg-lg` | `rounded-dg-lg` |
|
|
416
|
+
| `xl` | `1rem` | `--radius-dg-xl` | `rounded-dg-xl` |
|
|
284
417
|
|
|
285
|
-
|
|
418
|
+
### Shadows
|
|
419
|
+
|
|
420
|
+
| Token | CSS Variable | Tailwind |
|
|
421
|
+
|-------|-------------|----------|
|
|
422
|
+
| `sm` | `--shadow-dg-sm` | `shadow-dg-sm` |
|
|
423
|
+
| `md` | `--shadow-dg-md` | `shadow-dg-md` |
|
|
424
|
+
| `lg` | `--shadow-dg-lg` | `shadow-dg-lg` |
|
|
286
425
|
|
|
287
426
|
---
|
|
288
427
|
|
|
289
428
|
## Components
|
|
290
429
|
|
|
291
|
-
All components use BEM naming with the `dg-` prefix.
|
|
430
|
+
All components use BEM naming with the `dg-` prefix. Browse the [Component Showcase](https://design.dx.deepgram.com) for live examples.
|
|
292
431
|
|
|
293
432
|
### Buttons
|
|
294
433
|
|
|
295
434
|
```html
|
|
296
|
-
<button class="dg-btn dg-btn--primary">Primary
|
|
435
|
+
<button class="dg-btn dg-btn--primary">Primary</button>
|
|
297
436
|
<button class="dg-btn dg-btn--secondary">Secondary</button>
|
|
298
437
|
<button class="dg-btn dg-btn--ghost">Ghost</button>
|
|
299
|
-
<button class="dg-btn dg-btn--danger-ghost">
|
|
438
|
+
<button class="dg-btn dg-btn--danger-ghost">Danger</button>
|
|
300
439
|
<button class="dg-btn dg-btn--icon-only"><i class="fas fa-play"></i></button>
|
|
440
|
+
<button class="dg-btn dg-btn--primary dg-btn--sm">Small</button>
|
|
301
441
|
```
|
|
302
442
|
|
|
303
|
-
| Class | Description |
|
|
304
|
-
|-------|-------------|
|
|
305
|
-
| `.dg-btn` | Base button with flexbox centering, font styles, and disabled states |
|
|
306
|
-
| `.dg-btn--primary` | Gradient border with brand colors and glow effect |
|
|
307
|
-
| `.dg-btn--secondary` | Solid contrasting fill (white on dark, black on light) |
|
|
308
|
-
| `.dg-btn--ghost` | Transparent with border, text adapts to theme |
|
|
309
|
-
| `.dg-btn--danger-ghost` | Transparent with danger-colored border |
|
|
310
|
-
| `.dg-btn--icon-only` | Square button for icons |
|
|
311
|
-
| `.dg-btn--sm` | Small variant (2.25rem height) |
|
|
312
|
-
| `.dg-btn--collapse` | Full-width on mobile, inline on desktop |
|
|
313
|
-
|
|
314
443
|
### Cards
|
|
315
444
|
|
|
316
445
|
```html
|
|
@@ -324,74 +453,32 @@ All components use BEM naming with the `dg-` prefix.
|
|
|
324
453
|
<div class="dg-card__body">
|
|
325
454
|
<p class="dg-prose">Card content.</p>
|
|
326
455
|
</div>
|
|
327
|
-
<div class="dg-card__footer">
|
|
456
|
+
<div class="dg-card__footer dg-card__footer--bordered">
|
|
328
457
|
<button class="dg-btn dg-btn--primary">Action</button>
|
|
329
458
|
</div>
|
|
330
459
|
</div>
|
|
331
460
|
```
|
|
332
461
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
| `.dg-card__header` | Header section |
|
|
343
|
-
| `.dg-card__body` | Body content section |
|
|
344
|
-
| `.dg-card__footer` | Footer actions section with optional `--bordered` |
|
|
462
|
+
### Forms
|
|
463
|
+
|
|
464
|
+
```html
|
|
465
|
+
<div class="dg-form-field">
|
|
466
|
+
<label class="dg-form-label">Email</label>
|
|
467
|
+
<input type="email" class="dg-input" placeholder="you@example.com" />
|
|
468
|
+
<p class="dg-form-helper">We'll never share your email.</p>
|
|
469
|
+
</div>
|
|
470
|
+
```
|
|
345
471
|
|
|
346
472
|
### Layout
|
|
347
473
|
|
|
348
474
|
| Class | Description |
|
|
349
475
|
|-------|-------------|
|
|
350
|
-
| `.dg-section` | Content section
|
|
351
|
-
| `.dg-section--compact` | Reduced spacing |
|
|
352
|
-
| `.dg-section--spacious` | Increased spacing |
|
|
353
|
-
| `.dg-section--bordered` | Border and background |
|
|
354
|
-
| `.dg-section--elevated` | Shadow elevation |
|
|
355
|
-
| `.dg-section--fieldset` | Fieldset-style with legend |
|
|
476
|
+
| `.dg-section` | Content section (`--compact`, `--spacious`, `--bordered`, `--elevated`, `--fieldset`) |
|
|
356
477
|
| `.dg-constrain-width` | Max-width container (60rem) |
|
|
357
478
|
| `.dg-center-h` | Center content horizontally |
|
|
358
479
|
| `.dg-grid-mobile-stack` | Responsive grid, stacks on mobile |
|
|
359
480
|
| `.dg-action-group` | Button group container |
|
|
360
481
|
|
|
361
|
-
### Multi-Column Layout
|
|
362
|
-
|
|
363
|
-
```html
|
|
364
|
-
<div class="dg-layout-three-column">
|
|
365
|
-
<header class="dg-layout-three-column__header">...</header>
|
|
366
|
-
<div class="dg-layout-three-column__main">
|
|
367
|
-
<div class="dg-layout-three-column__left-main-wrapper">
|
|
368
|
-
<div class="dg-layout-three-column__sidebar-left">...</div>
|
|
369
|
-
<div class="dg-layout-three-column__content">...</div>
|
|
370
|
-
</div>
|
|
371
|
-
<div class="dg-layout-three-column__sidebar-right">...</div>
|
|
372
|
-
</div>
|
|
373
|
-
</div>
|
|
374
|
-
```
|
|
375
|
-
|
|
376
|
-
### Hero Section
|
|
377
|
-
|
|
378
|
-
```html
|
|
379
|
-
<section class="dg-hero">
|
|
380
|
-
<div class="dg-hero__content">
|
|
381
|
-
<a href="#" class="dg-hero__announcement">
|
|
382
|
-
<span class="dg-hero__announcement-text">New feature announcement</span>
|
|
383
|
-
<span class="dg-hero__announcement-cta">Learn More</span>
|
|
384
|
-
</a>
|
|
385
|
-
<h1 class="dg-hero-title">Your Hero Title</h1>
|
|
386
|
-
<p class="dg-hero__body">Your hero description text.</p>
|
|
387
|
-
<div class="dg-hero__actions">
|
|
388
|
-
<button class="dg-btn dg-btn--primary">Get Started</button>
|
|
389
|
-
<button class="dg-btn dg-btn--ghost">Learn More</button>
|
|
390
|
-
</div>
|
|
391
|
-
</div>
|
|
392
|
-
</section>
|
|
393
|
-
```
|
|
394
|
-
|
|
395
482
|
### Typography
|
|
396
483
|
|
|
397
484
|
| Class | Description |
|
|
@@ -400,111 +487,54 @@ All components use BEM naming with the `dg-` prefix.
|
|
|
400
487
|
| `.dg-section-heading` | Section heading |
|
|
401
488
|
| `.dg-card-heading` | Card heading |
|
|
402
489
|
| `.dg-item-title` | Item title |
|
|
403
|
-
| `.dg-prose` | Body text (
|
|
404
|
-
| `.dg-prose--large` | Larger prose |
|
|
405
|
-
| `.dg-prose--small` | Smaller prose |
|
|
406
|
-
| `.dg-prose--block` | Full-width prose (no max-width) |
|
|
490
|
+
| `.dg-prose` | Body text (`--large`, `--small`, `--block`) |
|
|
407
491
|
| `.dg-text-tagline` | Centered tagline |
|
|
408
492
|
| `.dg-text-subtitle` | Subtitle text |
|
|
409
|
-
| `.dg-text-heading` | Standard heading |
|
|
410
|
-
| `.dg-text-legal` | Fine print |
|
|
411
|
-
|
|
412
|
-
### Forms
|
|
413
|
-
|
|
414
|
-
```html
|
|
415
|
-
<div class="dg-form-field">
|
|
416
|
-
<label class="dg-form-label">Email</label>
|
|
417
|
-
<input type="email" class="dg-input" placeholder="you@example.com" />
|
|
418
|
-
<p class="dg-form-helper">We'll never share your email.</p>
|
|
419
|
-
</div>
|
|
420
|
-
```
|
|
421
|
-
|
|
422
|
-
| Class | Description |
|
|
423
|
-
|-------|-------------|
|
|
424
|
-
| `.dg-input` | Text input with focus/disabled states |
|
|
425
|
-
| `.dg-input--inline` | Inline input (min-width 12.5rem) |
|
|
426
|
-
| `.dg-textarea` | Multi-line text input |
|
|
427
|
-
| `.dg-checkbox` | Custom styled checkbox with animation |
|
|
428
|
-
| `.dg-checkbox-label` | Checkbox label wrapper |
|
|
429
|
-
| `.dg-checkbox-description` | Checkbox with description |
|
|
430
|
-
| `.dg-form-field` | Field container (label + input + helper) |
|
|
431
|
-
| `.dg-form-field--error` | Error validation state |
|
|
432
|
-
| `.dg-form-field--success` | Success validation state |
|
|
433
|
-
| `.dg-form-label` | Form label |
|
|
434
|
-
| `.dg-form-helper` | Helper/validation text |
|
|
435
|
-
| `.dg-drag-drop-zone` | File upload drag-and-drop area |
|
|
436
493
|
|
|
437
494
|
### Feedback
|
|
438
495
|
|
|
439
496
|
| Class | Description |
|
|
440
497
|
|-------|-------------|
|
|
441
|
-
| `.dg-alert` | Alert
|
|
442
|
-
| `.dg-status` | Status badge
|
|
443
|
-
| `.dg-spinner` | Loading spinner
|
|
498
|
+
| `.dg-alert` | Alert (`--info`, `--success`, `--warning`, `--error`) |
|
|
499
|
+
| `.dg-status` | Status badge (`--info`, `--success`, `--warning`, `--error`, `--primary`, `--secondary`) |
|
|
500
|
+
| `.dg-spinner` | Loading spinner |
|
|
444
501
|
| `.dg-modal-overlay` | Modal backdrop |
|
|
445
|
-
| `.dg-modal-content` | Modal content container |
|
|
446
|
-
|
|
447
|
-
### Code
|
|
448
|
-
|
|
449
|
-
| Class | Description |
|
|
450
|
-
|-------|-------------|
|
|
451
|
-
| `.dg-code-block` | Scrollable code block with monospace font |
|
|
452
|
-
| `.dg-code-block--compact` | Reduced height |
|
|
453
|
-
| `.dg-code-block--tall` | Increased height |
|
|
454
|
-
| `.dg-code-block--no-scroll` | No scroll/height limit |
|
|
455
|
-
|
|
456
|
-
### Navigation
|
|
457
|
-
|
|
458
|
-
| Class | Description |
|
|
459
|
-
|-------|-------------|
|
|
460
|
-
| `.dg-navbar` | Top navigation bar |
|
|
461
|
-
| `.dg-link` | Styled link with hover effect |
|
|
462
|
-
| `.dg-footer` | Page footer |
|
|
463
|
-
|
|
464
|
-
### Newsletter
|
|
465
|
-
|
|
466
|
-
| Class | Description |
|
|
467
|
-
|-------|-------------|
|
|
468
|
-
| `.dg-newsletter-container` | Newsletter section container |
|
|
469
|
-
| `.dg-newsletter-form` | Form with standard/compact/inline variants |
|
|
470
|
-
| `.dg-newsletter-header` | Header with content and actions areas |
|
|
471
|
-
| `.dg-logo-container` | Centered logo container |
|
|
472
|
-
| `.dg-social-links` | Social links container |
|
|
473
|
-
| `.dg-social-link` | Individual social link |
|
|
474
502
|
|
|
475
503
|
### Custom Utilities
|
|
476
504
|
|
|
477
505
|
| Utility | Description |
|
|
478
506
|
|---------|-------------|
|
|
479
|
-
|
|
|
480
|
-
|
|
|
481
|
-
|
|
|
482
|
-
|
|
|
507
|
+
| `dg-gradient-border` | Gradient border using brand colors |
|
|
508
|
+
| `dg-glow-cyan-green` | Box shadow glow with brand colors |
|
|
509
|
+
| `dg-bg-reset` | Reset background-image (for hover states) |
|
|
510
|
+
| `dg-shadow-subtle` | Subtle box shadow |
|
|
483
511
|
|
|
484
512
|
---
|
|
485
513
|
|
|
486
|
-
##
|
|
514
|
+
## Logo Assets
|
|
487
515
|
|
|
488
|
-
|
|
516
|
+
12 SVG logos as package exports:
|
|
489
517
|
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
518
|
+
| Type | Adaptive | Light | Dark |
|
|
519
|
+
|------|----------|-------|------|
|
|
520
|
+
| Wordmark | `@deepgram/styles/logo/wordmark` | `@deepgram/styles/logo/wordmark-light` | `@deepgram/styles/logo/wordmark-dark` |
|
|
521
|
+
| Lettermark | `@deepgram/styles/logo/lettermark` | `@deepgram/styles/logo/lettermark-light` | `@deepgram/styles/logo/lettermark-dark` |
|
|
522
|
+
| Square | `@deepgram/styles/logo/lettermark-square` | `@deepgram/styles/logo/lettermark-square-light` | `@deepgram/styles/logo/lettermark-square-dark` |
|
|
523
|
+
| Circle | `@deepgram/styles/logo/lettermark-circle` | `@deepgram/styles/logo/lettermark-circle-light` | `@deepgram/styles/logo/lettermark-circle-dark` |
|
|
524
|
+
|
|
525
|
+
Adaptive variants use embedded `@media (prefers-color-scheme)` to switch automatically.
|
|
526
|
+
|
|
527
|
+
---
|
|
493
528
|
|
|
494
529
|
## Browser Support
|
|
495
530
|
|
|
496
|
-
- Chrome
|
|
531
|
+
- Chrome 123+, Firefox 120+, Safari 17.5+, Edge 123+
|
|
497
532
|
- Requires: CSS Grid, Flexbox, Custom Properties, `light-dark()` function
|
|
498
|
-
- `light-dark()` is supported in Chrome 123+, Firefox 120+, Safari 17.5+
|
|
499
533
|
|
|
500
534
|
## License
|
|
501
535
|
|
|
502
536
|
ISC
|
|
503
537
|
|
|
504
|
-
## Contributing
|
|
505
|
-
|
|
506
|
-
See the [main repository](https://github.com/deepgram/dx-design) for contribution guidelines.
|
|
507
|
-
|
|
508
538
|
## Links
|
|
509
539
|
|
|
510
540
|
- [Component Showcase](https://design.dx.deepgram.com) — Live preview of all components
|