@roadlittledawn/docs-design-system-react 0.1.0 → 0.2.0
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 +68 -9
- package/dist/styles.css +388 -71
- package/package.json +7 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
React components for building documentation interfaces.
|
|
4
4
|
|
|
5
|
+
See [package on NPM](https://www.npmjs.com/package/@roadlittledawn/docs-design-system-react).
|
|
6
|
+
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
7
9
|
```bash
|
|
@@ -11,7 +13,11 @@ npm install @roadlittledawn/docs-design-system-react
|
|
|
11
13
|
## Usage
|
|
12
14
|
|
|
13
15
|
```tsx
|
|
14
|
-
import {
|
|
16
|
+
import {
|
|
17
|
+
Callout,
|
|
18
|
+
CodeBlock,
|
|
19
|
+
Card,
|
|
20
|
+
} from "@roadlittledawn/docs-design-system-react";
|
|
15
21
|
```
|
|
16
22
|
|
|
17
23
|
### Importing Styles
|
|
@@ -19,7 +25,7 @@ import { Callout, CodeBlock, Card } from '@roadlittledawn/docs-design-system-rea
|
|
|
19
25
|
Import the component styles in your app:
|
|
20
26
|
|
|
21
27
|
```tsx
|
|
22
|
-
import
|
|
28
|
+
import "@roadlittledawn/docs-design-system-react/styles.css";
|
|
23
29
|
```
|
|
24
30
|
|
|
25
31
|
## Components
|
|
@@ -47,9 +53,7 @@ Syntax-highlighted code with copy functionality.
|
|
|
47
53
|
Expandable/collapsible sections for optional or detailed content.
|
|
48
54
|
|
|
49
55
|
```tsx
|
|
50
|
-
<Collapser title="More details">
|
|
51
|
-
Hidden content revealed on expand.
|
|
52
|
-
</Collapser>
|
|
56
|
+
<Collapser title="More details">Hidden content revealed on expand.</Collapser>
|
|
53
57
|
```
|
|
54
58
|
|
|
55
59
|
### Card
|
|
@@ -68,8 +72,12 @@ Grid layout for organizing multiple cards.
|
|
|
68
72
|
|
|
69
73
|
```tsx
|
|
70
74
|
<CardGrid columns={3}>
|
|
71
|
-
<Card title="Guide 1" href="/guide-1">
|
|
72
|
-
|
|
75
|
+
<Card title="Guide 1" href="/guide-1">
|
|
76
|
+
Description
|
|
77
|
+
</Card>
|
|
78
|
+
<Card title="Guide 2" href="/guide-2">
|
|
79
|
+
Description
|
|
80
|
+
</Card>
|
|
73
81
|
</CardGrid>
|
|
74
82
|
```
|
|
75
83
|
|
|
@@ -103,7 +111,58 @@ Styled anchor with external link detection.
|
|
|
103
111
|
Action button with variants.
|
|
104
112
|
|
|
105
113
|
```tsx
|
|
106
|
-
<Button variant="primary" onClick={handleClick}>
|
|
114
|
+
<Button variant="primary" onClick={handleClick}>
|
|
115
|
+
Click me
|
|
116
|
+
</Button>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Dark Mode
|
|
120
|
+
|
|
121
|
+
The package includes built-in dark mode support. All components use transparent backgrounds (unless background color specified via props) in dark mode so they don't clash with your site's own dark theme.
|
|
122
|
+
|
|
123
|
+
### Auto (zero-config)
|
|
124
|
+
|
|
125
|
+
Dark mode follows OS preference automatically when you import `styles.css` — no extra setup needed.
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
import "@roadlittledawn/docs-design-system-react/styles.css";
|
|
129
|
+
// Components automatically adapt to OS dark/light preference
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Explicit toggle
|
|
133
|
+
|
|
134
|
+
Add `class="dds-dark"` or `data-dds-theme="dark"` to any ancestor element:
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<html class="dds-dark">
|
|
138
|
+
<!-- all components render in dark mode -->
|
|
139
|
+
</html>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<html data-dds-theme="dark">
|
|
144
|
+
<!-- same effect -->
|
|
145
|
+
</html>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Force light mode
|
|
149
|
+
|
|
150
|
+
Override OS dark preference by adding `class="dds-light"` or `data-dds-theme="light"`:
|
|
151
|
+
|
|
152
|
+
```html
|
|
153
|
+
<html class="dds-light">
|
|
154
|
+
<!-- components stay light even if OS prefers dark -->
|
|
155
|
+
</html>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Component-level dark islands
|
|
159
|
+
|
|
160
|
+
Apply dark mode to a specific section:
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<div class="dds-dark">
|
|
164
|
+
<!-- only components inside this div use dark mode -->
|
|
165
|
+
</div>
|
|
107
166
|
```
|
|
108
167
|
|
|
109
168
|
## Hooks
|
|
@@ -113,7 +172,7 @@ Action button with variants.
|
|
|
113
172
|
Listen for keyboard events.
|
|
114
173
|
|
|
115
174
|
```tsx
|
|
116
|
-
const isPressed = useKeyPress(
|
|
175
|
+
const isPressed = useKeyPress("Escape");
|
|
117
176
|
```
|
|
118
177
|
|
|
119
178
|
## Documentation
|
package/dist/styles.css
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
--dds-card-bg-gray: #f9fafb; /* gray-50 */
|
|
30
30
|
--dds-card-bg-white: #ffffff;
|
|
31
31
|
--dds-card-border: #e5e7eb; /* gray-200 */
|
|
32
|
+
--dds-card-border-hover: #d1d5db; /* gray-300 */
|
|
32
33
|
|
|
33
34
|
--dds-card-title-blue: #1e3a8a; /* blue-900 */
|
|
34
35
|
--dds-card-title-green: #14532d; /* green-900 */
|
|
@@ -131,6 +132,68 @@
|
|
|
131
132
|
--dds-callout-course-bg: #f0fdf4; /* green-50 */
|
|
132
133
|
--dds-callout-course-title: #065f46; /* emerald-800 */
|
|
133
134
|
|
|
135
|
+
/* Typography - Caption */
|
|
136
|
+
--dds-typography-caption-color: #4b5563; /* gray-600 */
|
|
137
|
+
|
|
138
|
+
/* Focus Ring */
|
|
139
|
+
--dds-focus-ring-bg: #ffffff;
|
|
140
|
+
|
|
141
|
+
/* CodeBlock */
|
|
142
|
+
--dds-code-block-border: #e5e7eb; /* gray-200 */
|
|
143
|
+
--dds-code-block-radius: 8px;
|
|
144
|
+
--dds-code-block-bg: #ffffff;
|
|
145
|
+
--dds-code-block-margin: 1rem 0;
|
|
146
|
+
--dds-code-block-header-bg: #ffffff;
|
|
147
|
+
--dds-code-block-header-gap: 0.75rem;
|
|
148
|
+
--dds-code-block-header-padding: 0.75rem 1rem;
|
|
149
|
+
--dds-code-block-tab-padding: 0.5rem 1rem;
|
|
150
|
+
--dds-code-block-tab-bg: #f3f4f6; /* gray-100 */
|
|
151
|
+
--dds-code-block-tab-text: #6b7280; /* gray-500 */
|
|
152
|
+
--dds-code-block-tab-radius: 6px;
|
|
153
|
+
--dds-code-block-tab-text-hover: #374151; /* gray-700 */
|
|
154
|
+
--dds-code-block-tab-bg-hover: #e5e7eb; /* gray-200 */
|
|
155
|
+
--dds-code-block-tab-text-active: #111827; /* gray-900 */
|
|
156
|
+
--dds-code-block-tab-bg-active: #ffffff;
|
|
157
|
+
--dds-code-block-select-padding: 0.375rem 0.75rem;
|
|
158
|
+
--dds-code-block-select-border: #d1d5db; /* gray-300 */
|
|
159
|
+
--dds-code-block-select-radius: 4px;
|
|
160
|
+
--dds-code-block-select-bg: #ffffff;
|
|
161
|
+
--dds-code-block-select-text: #374151; /* gray-700 */
|
|
162
|
+
--dds-code-block-select-size: 0.875rem;
|
|
163
|
+
--dds-code-block-select-border-hover: #9ca3af; /* gray-400 */
|
|
164
|
+
--dds-code-block-select-border-focus: #3b82f6; /* blue-500 */
|
|
165
|
+
--dds-code-block-select-focus-ring: rgba(59, 130, 246, 0.1);
|
|
166
|
+
--dds-code-block-label-size: 0.875rem;
|
|
167
|
+
--dds-code-block-label-text: #6b7280; /* gray-500 */
|
|
168
|
+
--dds-code-block-copy-padding: 0.375rem 0.75rem;
|
|
169
|
+
--dds-code-block-copy-bg: #ffffff;
|
|
170
|
+
--dds-code-block-copy-border: #d1d5db; /* gray-300 */
|
|
171
|
+
--dds-code-block-copy-radius: 4px;
|
|
172
|
+
--dds-code-block-copy-text: #374151; /* gray-700 */
|
|
173
|
+
--dds-code-block-copy-size: 0.875rem;
|
|
174
|
+
--dds-code-block-copy-bg-hover: #f9fafb; /* gray-50 */
|
|
175
|
+
--dds-code-block-copy-border-hover: #9ca3af; /* gray-400 */
|
|
176
|
+
--dds-code-block-copy-bg-active: #f3f4f6; /* gray-100 */
|
|
177
|
+
--dds-code-block-content-bg: #f9fafb; /* gray-50 */
|
|
178
|
+
--dds-code-block-pre-padding: 1rem;
|
|
179
|
+
--dds-code-block-text: #111827; /* gray-900 */
|
|
180
|
+
--dds-code-block-highlight-bg: rgba(59, 130, 246, 0.2);
|
|
181
|
+
--dds-code-block-highlight-border: #3b82f6; /* blue-500 */
|
|
182
|
+
--dds-code-block-message-padding: 1rem;
|
|
183
|
+
--dds-code-block-loading-text: #6b7280; /* gray-500 */
|
|
184
|
+
--dds-code-block-error-text: #dc2626; /* red-600 */
|
|
185
|
+
--dds-code-block-message-size: 0.875rem;
|
|
186
|
+
|
|
187
|
+
/* Prism Syntax Highlighting */
|
|
188
|
+
--dds-prism-comment: #6b7280; /* gray-500 */
|
|
189
|
+
--dds-prism-punctuation: #374151; /* gray-700 */
|
|
190
|
+
--dds-prism-property: #dc2626; /* red-600 */
|
|
191
|
+
--dds-prism-string: #059669; /* emerald-600 */
|
|
192
|
+
--dds-prism-operator: #d97706; /* amber-600 */
|
|
193
|
+
--dds-prism-keyword: #2563eb; /* blue-600 */
|
|
194
|
+
--dds-prism-function: #7c3aed; /* violet-600 */
|
|
195
|
+
--dds-prism-regex: #ea580c; /* orange-600 */
|
|
196
|
+
|
|
134
197
|
/* Collapser Colors and Styles */
|
|
135
198
|
--dds-collapser-radius: 0.375rem; /* rounded-md */
|
|
136
199
|
--dds-collapser-border: #e5e7eb; /* gray-200 */
|
|
@@ -138,8 +201,259 @@
|
|
|
138
201
|
--dds-collapser-button-padding: 0.75rem; /* p-3 */
|
|
139
202
|
--dds-collapser-button-hover-bg: #f9fafb; /* gray-50 */
|
|
140
203
|
--dds-collapser-icon-color: #6b7280; /* gray-500 */
|
|
204
|
+
--dds-collapser-text: #374151; /* gray-700 */
|
|
141
205
|
--dds-collapser-content-padding: 1rem; /* p-4 */
|
|
142
206
|
}
|
|
207
|
+
/* ==========================================================================
|
|
208
|
+
Dark Mode Tokens
|
|
209
|
+
Transparent backgrounds, readable foregrounds.
|
|
210
|
+
Activated via .dds-dark class, data-dds-theme="dark", or OS preference.
|
|
211
|
+
========================================================================== */
|
|
212
|
+
/* Explicit dark mode activation */
|
|
213
|
+
.dds-dark,
|
|
214
|
+
[data-dds-theme="dark"] {
|
|
215
|
+
/* Heading / Typography */
|
|
216
|
+
--dds-heading-color: #f9fafb; /* gray-50 */
|
|
217
|
+
--dds-typography-caption-color: #9ca3af; /* gray-400 */
|
|
218
|
+
|
|
219
|
+
/* Button - Primary (keep fill bg as accent) */
|
|
220
|
+
--dds-button-primary-bg: #3b82f6; /* blue-500 */
|
|
221
|
+
--dds-button-primary-bg-hover: #2563eb; /* blue-600 */
|
|
222
|
+
--dds-button-primary-text: #ffffff;
|
|
223
|
+
--dds-button-primary-focus-ring: #60a5fa; /* blue-400 */
|
|
224
|
+
|
|
225
|
+
/* Button - Secondary */
|
|
226
|
+
--dds-button-secondary-bg: transparent;
|
|
227
|
+
--dds-button-secondary-bg-hover: rgba(255, 255, 255, 0.1);
|
|
228
|
+
--dds-button-secondary-text: #e5e7eb; /* gray-200 */
|
|
229
|
+
--dds-button-secondary-focus-ring: #9ca3af; /* gray-400 */
|
|
230
|
+
|
|
231
|
+
/* Button - Outline */
|
|
232
|
+
--dds-button-outline-bg: transparent;
|
|
233
|
+
--dds-button-outline-bg-hover: rgba(255, 255, 255, 0.05);
|
|
234
|
+
--dds-button-outline-border: #6b7280; /* gray-500 */
|
|
235
|
+
--dds-button-outline-text: #e5e7eb; /* gray-200 */
|
|
236
|
+
--dds-button-outline-focus-ring: #9ca3af; /* gray-400 */
|
|
237
|
+
|
|
238
|
+
/* Focus Ring */
|
|
239
|
+
--dds-focus-ring-bg: transparent;
|
|
240
|
+
|
|
241
|
+
/* Card */
|
|
242
|
+
--dds-card-bg-blue: rgba(59, 130, 246, 0.08);
|
|
243
|
+
--dds-card-bg-green: rgba(34, 197, 94, 0.08);
|
|
244
|
+
--dds-card-bg-purple: rgba(168, 85, 247, 0.08);
|
|
245
|
+
--dds-card-bg-red: rgba(239, 68, 68, 0.08);
|
|
246
|
+
--dds-card-bg-yellow: rgba(234, 179, 8, 0.08);
|
|
247
|
+
--dds-card-bg-gray: rgba(156, 163, 175, 0.08);
|
|
248
|
+
--dds-card-bg-white: transparent;
|
|
249
|
+
--dds-card-border: #4b5563; /* gray-600 */
|
|
250
|
+
--dds-card-border-hover: #9ca3af; /* gray-400 */
|
|
251
|
+
--dds-card-shadow-hover: none;
|
|
252
|
+
|
|
253
|
+
--dds-card-title-blue: #93c5fd; /* blue-300 */
|
|
254
|
+
--dds-card-title-green: #86efac; /* green-300 */
|
|
255
|
+
--dds-card-title-purple: #d8b4fe; /* purple-300 */
|
|
256
|
+
--dds-card-title-red: #fca5a5; /* red-300 */
|
|
257
|
+
--dds-card-title-yellow: #fde047; /* yellow-300 */
|
|
258
|
+
--dds-card-title-gray: #e5e7eb; /* gray-200 */
|
|
259
|
+
|
|
260
|
+
--dds-card-text-blue: #bfdbfe; /* blue-200 */
|
|
261
|
+
--dds-card-text-green: #bbf7d0; /* green-200 */
|
|
262
|
+
--dds-card-text-purple: #e9d5ff; /* purple-200 */
|
|
263
|
+
--dds-card-text-red: #fecaca; /* red-200 */
|
|
264
|
+
--dds-card-text-yellow: #fef08a; /* yellow-200 */
|
|
265
|
+
--dds-card-text-gray: #d1d5db; /* gray-300 */
|
|
266
|
+
|
|
267
|
+
/* Link */
|
|
268
|
+
--dds-link-color: #60a5fa; /* blue-400 */
|
|
269
|
+
--dds-link-color-hover: #93c5fd; /* blue-300 */
|
|
270
|
+
--dds-link-decoration: #3b82f6; /* blue-500 */
|
|
271
|
+
--dds-link-decoration-hover: #60a5fa; /* blue-400 */
|
|
272
|
+
|
|
273
|
+
/* Callout */
|
|
274
|
+
--dds-callout-text: #e5e7eb; /* gray-200 */
|
|
275
|
+
|
|
276
|
+
--dds-callout-caution-bg: transparent;
|
|
277
|
+
--dds-callout-caution-title: #fca5a5; /* red-300 */
|
|
278
|
+
|
|
279
|
+
--dds-callout-important-bg: transparent;
|
|
280
|
+
--dds-callout-important-title: #fcd34d; /* amber-300 */
|
|
281
|
+
|
|
282
|
+
--dds-callout-tip-bg: transparent;
|
|
283
|
+
--dds-callout-tip-title: #93c5fd; /* blue-300 */
|
|
284
|
+
|
|
285
|
+
--dds-callout-course-bg: transparent;
|
|
286
|
+
--dds-callout-course-title: #6ee7b7; /* emerald-300 */
|
|
287
|
+
|
|
288
|
+
/* Collapser */
|
|
289
|
+
--dds-collapser-border: #4b5563; /* gray-600 */
|
|
290
|
+
--dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
|
|
291
|
+
--dds-collapser-icon-color: #9ca3af; /* gray-400 */
|
|
292
|
+
--dds-collapser-text: #e5e7eb; /* gray-200 */
|
|
293
|
+
|
|
294
|
+
/* CodeBlock */
|
|
295
|
+
--dds-code-block-bg: transparent;
|
|
296
|
+
--dds-code-block-border: #4b5563; /* gray-600 */
|
|
297
|
+
--dds-code-block-header-bg: transparent;
|
|
298
|
+
--dds-code-block-tab-bg: rgba(255, 255, 255, 0.05);
|
|
299
|
+
--dds-code-block-tab-text: #9ca3af; /* gray-400 */
|
|
300
|
+
--dds-code-block-tab-text-hover: #e5e7eb; /* gray-200 */
|
|
301
|
+
--dds-code-block-tab-bg-hover: rgba(255, 255, 255, 0.1);
|
|
302
|
+
--dds-code-block-tab-text-active: #f9fafb; /* gray-50 */
|
|
303
|
+
--dds-code-block-tab-bg-active: transparent;
|
|
304
|
+
--dds-code-block-select-border: #4b5563; /* gray-600 */
|
|
305
|
+
--dds-code-block-select-bg: transparent;
|
|
306
|
+
--dds-code-block-select-text: #e5e7eb; /* gray-200 */
|
|
307
|
+
--dds-code-block-select-border-hover: #6b7280; /* gray-500 */
|
|
308
|
+
--dds-code-block-select-border-focus: #60a5fa; /* blue-400 */
|
|
309
|
+
--dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
|
|
310
|
+
--dds-code-block-label-text: #9ca3af; /* gray-400 */
|
|
311
|
+
--dds-code-block-copy-bg: transparent;
|
|
312
|
+
--dds-code-block-copy-border: #4b5563; /* gray-600 */
|
|
313
|
+
--dds-code-block-copy-text: #e5e7eb; /* gray-200 */
|
|
314
|
+
--dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.05);
|
|
315
|
+
--dds-code-block-copy-border-hover: #6b7280; /* gray-500 */
|
|
316
|
+
--dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.1);
|
|
317
|
+
--dds-code-block-content-bg: transparent;
|
|
318
|
+
--dds-code-block-text: #e2e8f0; /* slate-200 */
|
|
319
|
+
--dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
|
|
320
|
+
--dds-code-block-highlight-border: #60a5fa; /* blue-400 */
|
|
321
|
+
--dds-code-block-loading-text: #9ca3af; /* gray-400 */
|
|
322
|
+
--dds-code-block-error-text: #f87171; /* red-400 */
|
|
323
|
+
|
|
324
|
+
/* Prism Syntax - Dark palette */
|
|
325
|
+
--dds-prism-comment: #9ca3af; /* gray-400 */
|
|
326
|
+
--dds-prism-punctuation: #d1d5db; /* gray-300 */
|
|
327
|
+
--dds-prism-property: #f87171; /* red-400 */
|
|
328
|
+
--dds-prism-string: #34d399; /* emerald-400 */
|
|
329
|
+
--dds-prism-operator: #fbbf24; /* amber-400 */
|
|
330
|
+
--dds-prism-keyword: #60a5fa; /* blue-400 */
|
|
331
|
+
--dds-prism-function: #a78bfa; /* violet-400 */
|
|
332
|
+
--dds-prism-regex: #fb923c; /* orange-400 */
|
|
333
|
+
}
|
|
334
|
+
/* Auto dark mode — follows OS preference, opt-out with .dds-light */
|
|
335
|
+
@media (prefers-color-scheme: dark) {
|
|
336
|
+
:root:not(.dds-light):not([data-dds-theme="light"]) {
|
|
337
|
+
/* Heading / Typography */
|
|
338
|
+
--dds-heading-color: #f9fafb;
|
|
339
|
+
--dds-typography-caption-color: #9ca3af;
|
|
340
|
+
|
|
341
|
+
/* Button - Primary */
|
|
342
|
+
--dds-button-primary-bg: #3b82f6;
|
|
343
|
+
--dds-button-primary-bg-hover: #2563eb;
|
|
344
|
+
--dds-button-primary-text: #ffffff;
|
|
345
|
+
--dds-button-primary-focus-ring: #60a5fa;
|
|
346
|
+
|
|
347
|
+
/* Button - Secondary */
|
|
348
|
+
--dds-button-secondary-bg: transparent;
|
|
349
|
+
--dds-button-secondary-bg-hover: rgba(255, 255, 255, 0.1);
|
|
350
|
+
--dds-button-secondary-text: #e5e7eb;
|
|
351
|
+
--dds-button-secondary-focus-ring: #9ca3af;
|
|
352
|
+
|
|
353
|
+
/* Button - Outline */
|
|
354
|
+
--dds-button-outline-bg: transparent;
|
|
355
|
+
--dds-button-outline-bg-hover: rgba(255, 255, 255, 0.05);
|
|
356
|
+
--dds-button-outline-border: #6b7280;
|
|
357
|
+
--dds-button-outline-text: #e5e7eb;
|
|
358
|
+
--dds-button-outline-focus-ring: #9ca3af;
|
|
359
|
+
|
|
360
|
+
/* Focus Ring */
|
|
361
|
+
--dds-focus-ring-bg: transparent;
|
|
362
|
+
|
|
363
|
+
/* Card */
|
|
364
|
+
--dds-card-bg-blue: rgba(59, 130, 246, 0.08);
|
|
365
|
+
--dds-card-bg-green: rgba(34, 197, 94, 0.08);
|
|
366
|
+
--dds-card-bg-purple: rgba(168, 85, 247, 0.08);
|
|
367
|
+
--dds-card-bg-red: rgba(239, 68, 68, 0.08);
|
|
368
|
+
--dds-card-bg-yellow: rgba(234, 179, 8, 0.08);
|
|
369
|
+
--dds-card-bg-gray: rgba(156, 163, 175, 0.08);
|
|
370
|
+
--dds-card-bg-white: transparent;
|
|
371
|
+
--dds-card-border: #4b5563;
|
|
372
|
+
--dds-card-border-hover: #9ca3af;
|
|
373
|
+
--dds-card-shadow-hover: none;
|
|
374
|
+
|
|
375
|
+
--dds-card-title-blue: #93c5fd;
|
|
376
|
+
--dds-card-title-green: #86efac;
|
|
377
|
+
--dds-card-title-purple: #d8b4fe;
|
|
378
|
+
--dds-card-title-red: #fca5a5;
|
|
379
|
+
--dds-card-title-yellow: #fde047;
|
|
380
|
+
--dds-card-title-gray: #e5e7eb;
|
|
381
|
+
|
|
382
|
+
--dds-card-text-blue: #bfdbfe;
|
|
383
|
+
--dds-card-text-green: #bbf7d0;
|
|
384
|
+
--dds-card-text-purple: #e9d5ff;
|
|
385
|
+
--dds-card-text-red: #fecaca;
|
|
386
|
+
--dds-card-text-yellow: #fef08a;
|
|
387
|
+
--dds-card-text-gray: #d1d5db;
|
|
388
|
+
|
|
389
|
+
/* Link */
|
|
390
|
+
--dds-link-color: #60a5fa;
|
|
391
|
+
--dds-link-color-hover: #93c5fd;
|
|
392
|
+
--dds-link-decoration: #3b82f6;
|
|
393
|
+
--dds-link-decoration-hover: #60a5fa;
|
|
394
|
+
|
|
395
|
+
/* Callout */
|
|
396
|
+
--dds-callout-text: #e5e7eb;
|
|
397
|
+
|
|
398
|
+
--dds-callout-caution-bg: transparent;
|
|
399
|
+
--dds-callout-caution-title: #fca5a5;
|
|
400
|
+
|
|
401
|
+
--dds-callout-important-bg: transparent;
|
|
402
|
+
--dds-callout-important-title: #fcd34d;
|
|
403
|
+
|
|
404
|
+
--dds-callout-tip-bg: transparent;
|
|
405
|
+
--dds-callout-tip-title: #93c5fd;
|
|
406
|
+
|
|
407
|
+
--dds-callout-course-bg: transparent;
|
|
408
|
+
--dds-callout-course-title: #6ee7b7;
|
|
409
|
+
|
|
410
|
+
/* Collapser */
|
|
411
|
+
--dds-collapser-border: #4b5563;
|
|
412
|
+
--dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
|
|
413
|
+
--dds-collapser-icon-color: #9ca3af;
|
|
414
|
+
--dds-collapser-text: #e5e7eb;
|
|
415
|
+
|
|
416
|
+
/* CodeBlock */
|
|
417
|
+
--dds-code-block-bg: transparent;
|
|
418
|
+
--dds-code-block-border: #4b5563;
|
|
419
|
+
--dds-code-block-header-bg: transparent;
|
|
420
|
+
--dds-code-block-tab-bg: rgba(255, 255, 255, 0.05);
|
|
421
|
+
--dds-code-block-tab-text: #9ca3af;
|
|
422
|
+
--dds-code-block-tab-text-hover: #e5e7eb;
|
|
423
|
+
--dds-code-block-tab-bg-hover: rgba(255, 255, 255, 0.1);
|
|
424
|
+
--dds-code-block-tab-text-active: #f9fafb;
|
|
425
|
+
--dds-code-block-tab-bg-active: transparent;
|
|
426
|
+
--dds-code-block-select-border: #4b5563;
|
|
427
|
+
--dds-code-block-select-bg: transparent;
|
|
428
|
+
--dds-code-block-select-text: #e5e7eb;
|
|
429
|
+
--dds-code-block-select-border-hover: #6b7280;
|
|
430
|
+
--dds-code-block-select-border-focus: #60a5fa;
|
|
431
|
+
--dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
|
|
432
|
+
--dds-code-block-label-text: #9ca3af;
|
|
433
|
+
--dds-code-block-copy-bg: transparent;
|
|
434
|
+
--dds-code-block-copy-border: #4b5563;
|
|
435
|
+
--dds-code-block-copy-text: #e5e7eb;
|
|
436
|
+
--dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.05);
|
|
437
|
+
--dds-code-block-copy-border-hover: #6b7280;
|
|
438
|
+
--dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.1);
|
|
439
|
+
--dds-code-block-content-bg: transparent;
|
|
440
|
+
--dds-code-block-text: #e2e8f0;
|
|
441
|
+
--dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
|
|
442
|
+
--dds-code-block-highlight-border: #60a5fa;
|
|
443
|
+
--dds-code-block-loading-text: #9ca3af;
|
|
444
|
+
--dds-code-block-error-text: #f87171;
|
|
445
|
+
|
|
446
|
+
/* Prism Syntax - Dark palette */
|
|
447
|
+
--dds-prism-comment: #9ca3af;
|
|
448
|
+
--dds-prism-punctuation: #d1d5db;
|
|
449
|
+
--dds-prism-property: #f87171;
|
|
450
|
+
--dds-prism-string: #34d399;
|
|
451
|
+
--dds-prism-operator: #fbbf24;
|
|
452
|
+
--dds-prism-keyword: #60a5fa;
|
|
453
|
+
--dds-prism-function: #a78bfa;
|
|
454
|
+
--dds-prism-regex: #fb923c;
|
|
455
|
+
}
|
|
456
|
+
}
|
|
143
457
|
/* Import PrismJS theme */
|
|
144
458
|
/**
|
|
145
459
|
* prism.js default theme for JavaScript, CSS and HTML
|
|
@@ -306,7 +620,7 @@ pre[class*="language-"] {
|
|
|
306
620
|
background-color: var(--dds-button-primary-bg-hover);
|
|
307
621
|
}
|
|
308
622
|
.dds-button-primary:focus {
|
|
309
|
-
box-shadow: 0 0 0 var(--dds-focus-ring-offset)
|
|
623
|
+
box-shadow: 0 0 0 var(--dds-focus-ring-offset) var(--dds-focus-ring-bg), 0 0 0 calc(var(--dds-focus-ring-offset) + 2px) var(--dds-button-primary-focus-ring);
|
|
310
624
|
}
|
|
311
625
|
.dds-button-secondary {
|
|
312
626
|
background-color: var(--dds-button-secondary-bg);
|
|
@@ -316,7 +630,7 @@ pre[class*="language-"] {
|
|
|
316
630
|
background-color: var(--dds-button-secondary-bg-hover);
|
|
317
631
|
}
|
|
318
632
|
.dds-button-secondary:focus {
|
|
319
|
-
box-shadow: 0 0 0 var(--dds-focus-ring-offset)
|
|
633
|
+
box-shadow: 0 0 0 var(--dds-focus-ring-offset) var(--dds-focus-ring-bg), 0 0 0 calc(var(--dds-focus-ring-offset) + 2px) var(--dds-button-secondary-focus-ring);
|
|
320
634
|
}
|
|
321
635
|
.dds-button-outline {
|
|
322
636
|
border: 1px solid var(--dds-button-outline-border);
|
|
@@ -327,7 +641,7 @@ pre[class*="language-"] {
|
|
|
327
641
|
background-color: var(--dds-button-outline-bg-hover);
|
|
328
642
|
}
|
|
329
643
|
.dds-button-outline:focus {
|
|
330
|
-
box-shadow: 0 0 0 var(--dds-focus-ring-offset)
|
|
644
|
+
box-shadow: 0 0 0 var(--dds-focus-ring-offset) var(--dds-focus-ring-bg), 0 0 0 calc(var(--dds-focus-ring-offset) + 2px) var(--dds-button-outline-focus-ring);
|
|
331
645
|
}
|
|
332
646
|
/* Sizes */
|
|
333
647
|
.dds-button-sm {
|
|
@@ -394,13 +708,15 @@ a.no-text-decoration {
|
|
|
394
708
|
.dds-card {
|
|
395
709
|
padding: var(--dds-card-padding);
|
|
396
710
|
border-radius: var(--dds-card-radius);
|
|
711
|
+
border: 1px solid var(--dds-card-border);
|
|
397
712
|
}
|
|
398
713
|
.dds-card-clickable {
|
|
399
714
|
cursor: pointer;
|
|
400
|
-
transition: var(--dds-transition-shadow);
|
|
715
|
+
transition: var(--dds-transition-shadow), border-color 150ms ease-in-out;
|
|
401
716
|
}
|
|
402
717
|
.dds-card-clickable:hover {
|
|
403
718
|
box-shadow: var(--dds-card-shadow-hover);
|
|
719
|
+
border-color: var(--dds-card-border-hover);
|
|
404
720
|
}
|
|
405
721
|
.dds-card-clickable > * {
|
|
406
722
|
text-decoration: none;
|
|
@@ -426,7 +742,6 @@ a.no-text-decoration {
|
|
|
426
742
|
}
|
|
427
743
|
.dds-card-bg-white {
|
|
428
744
|
background-color: var(--dds-card-bg-white);
|
|
429
|
-
border: 1px solid var(--dds-card-border);
|
|
430
745
|
}
|
|
431
746
|
/* Title color variants */
|
|
432
747
|
.dds-card-title {
|
|
@@ -558,21 +873,22 @@ a.no-text-decoration {
|
|
|
558
873
|
.dds-collapser-content {
|
|
559
874
|
border-top: 1px solid var(--dds-collapser-border);
|
|
560
875
|
padding: var(--dds-collapser-content-padding);
|
|
876
|
+
color: var(--dds-collapser-text);
|
|
561
877
|
}
|
|
562
878
|
.dds-code-block {
|
|
563
|
-
border: 1px solid var(--dds-code-block-border
|
|
564
|
-
border-radius: var(--dds-code-block-radius
|
|
565
|
-
background-color: var(--dds-code-block-bg
|
|
879
|
+
border: 1px solid var(--dds-code-block-border);
|
|
880
|
+
border-radius: var(--dds-code-block-radius);
|
|
881
|
+
background-color: var(--dds-code-block-bg);
|
|
566
882
|
overflow: hidden;
|
|
567
|
-
margin: var(--dds-code-block-margin
|
|
883
|
+
margin: var(--dds-code-block-margin);
|
|
568
884
|
}
|
|
569
885
|
.dds-code-block-header {
|
|
570
886
|
display: flex;
|
|
571
887
|
justify-content: space-between;
|
|
572
888
|
align-items: flex-end;
|
|
573
889
|
padding: 0;
|
|
574
|
-
background-color: var(--dds-code-block-header-bg
|
|
575
|
-
border-bottom: 1px solid var(--dds-code-block-border
|
|
890
|
+
background-color: var(--dds-code-block-header-bg);
|
|
891
|
+
border-bottom: 1px solid var(--dds-code-block-border);
|
|
576
892
|
min-height: 2.75rem;
|
|
577
893
|
overflow: hidden;
|
|
578
894
|
}
|
|
@@ -585,9 +901,9 @@ a.no-text-decoration {
|
|
|
585
901
|
.dds-code-block-header-right {
|
|
586
902
|
display: flex;
|
|
587
903
|
align-items: center;
|
|
588
|
-
gap: var(--dds-code-block-header-gap
|
|
904
|
+
gap: var(--dds-code-block-header-gap);
|
|
589
905
|
margin-left: auto;
|
|
590
|
-
padding: var(--dds-code-block-header-padding
|
|
906
|
+
padding: var(--dds-code-block-header-padding);
|
|
591
907
|
padding-left: 0.5rem;
|
|
592
908
|
}
|
|
593
909
|
.dds-code-block-tabs {
|
|
@@ -605,13 +921,13 @@ a.no-text-decoration {
|
|
|
605
921
|
display: none; /* Chrome, Safari, Opera */
|
|
606
922
|
}
|
|
607
923
|
.dds-code-block-tab {
|
|
608
|
-
padding: var(--dds-code-block-tab-padding
|
|
609
|
-
background-color: var(--dds-code-block-tab-bg
|
|
610
|
-
border: 1px solid var(--dds-code-block-border
|
|
924
|
+
padding: var(--dds-code-block-tab-padding);
|
|
925
|
+
background-color: var(--dds-code-block-tab-bg);
|
|
926
|
+
border: 1px solid var(--dds-code-block-border);
|
|
611
927
|
border-bottom: none;
|
|
612
|
-
border-top-left-radius: var(--dds-code-block-tab-radius
|
|
613
|
-
border-top-right-radius: var(--dds-code-block-tab-radius
|
|
614
|
-
color: var(--dds-code-block-tab-text
|
|
928
|
+
border-top-left-radius: var(--dds-code-block-tab-radius);
|
|
929
|
+
border-top-right-radius: var(--dds-code-block-tab-radius);
|
|
930
|
+
color: var(--dds-code-block-tab-text);
|
|
615
931
|
font-size: var(--dds-code-block-tab-size, 0.875rem);
|
|
616
932
|
font-weight: var(--dds-font-medium);
|
|
617
933
|
cursor: pointer;
|
|
@@ -621,80 +937,77 @@ a.no-text-decoration {
|
|
|
621
937
|
position: relative;
|
|
622
938
|
}
|
|
623
939
|
.dds-code-block-tab:hover {
|
|
624
|
-
color: var(--dds-code-block-tab-text-hover
|
|
625
|
-
background-color: var(--dds-code-block-tab-bg-hover
|
|
940
|
+
color: var(--dds-code-block-tab-text-hover);
|
|
941
|
+
background-color: var(--dds-code-block-tab-bg-hover);
|
|
626
942
|
}
|
|
627
943
|
.dds-code-block-tab-active {
|
|
628
|
-
color: var(--dds-code-block-tab-text-active
|
|
629
|
-
background-color: var(--dds-code-block-tab-bg-active
|
|
630
|
-
border-color: var(--dds-code-block-border
|
|
631
|
-
z-index: 1;
|
|
632
|
-
/* Connect to content area */
|
|
633
|
-
margin-bottom: -1px;
|
|
634
|
-
padding-bottom: calc(var(--dds-code-block-tab-padding, 0.5rem) + 1px);
|
|
944
|
+
color: var(--dds-code-block-tab-text-active);
|
|
945
|
+
background-color: var(--dds-code-block-tab-bg-active);
|
|
946
|
+
border-color: var(--dds-code-block-border);
|
|
635
947
|
}
|
|
636
948
|
.dds-code-block-tab-active:hover {
|
|
637
|
-
background-color: var(--dds-code-block-tab-bg-active
|
|
949
|
+
background-color: var(--dds-code-block-tab-bg-active);
|
|
638
950
|
}
|
|
639
951
|
.dds-code-block-language-select {
|
|
640
|
-
padding: var(--dds-code-block-select-padding
|
|
641
|
-
border: 1px solid var(--dds-code-block-select-border
|
|
642
|
-
border-radius: var(--dds-code-block-select-radius
|
|
643
|
-
background-color: var(--dds-code-block-select-bg
|
|
644
|
-
color: var(--dds-code-block-select-text
|
|
645
|
-
font-size: var(--dds-code-block-select-size
|
|
952
|
+
padding: var(--dds-code-block-select-padding);
|
|
953
|
+
border: 1px solid var(--dds-code-block-select-border);
|
|
954
|
+
border-radius: var(--dds-code-block-select-radius);
|
|
955
|
+
background-color: var(--dds-code-block-select-bg);
|
|
956
|
+
color: var(--dds-code-block-select-text);
|
|
957
|
+
font-size: var(--dds-code-block-select-size);
|
|
646
958
|
cursor: pointer;
|
|
647
959
|
transition: var(--dds-transition-colors);
|
|
648
960
|
}
|
|
649
961
|
.dds-code-block-language-select:hover {
|
|
650
|
-
border-color: var(--dds-code-block-select-border-hover
|
|
962
|
+
border-color: var(--dds-code-block-select-border-hover);
|
|
651
963
|
}
|
|
652
964
|
.dds-code-block-language-select:focus {
|
|
653
965
|
outline: none;
|
|
654
|
-
border-color: var(--dds-code-block-select-border-focus
|
|
655
|
-
box-shadow: 0 0 0 3px var(--dds-code-block-select-focus-ring
|
|
966
|
+
border-color: var(--dds-code-block-select-border-focus);
|
|
967
|
+
box-shadow: 0 0 0 3px var(--dds-code-block-select-focus-ring);
|
|
656
968
|
}
|
|
657
969
|
.dds-code-block-language-label {
|
|
658
|
-
font-size: var(--dds-code-block-label-size
|
|
659
|
-
color: var(--dds-code-block-label-text
|
|
970
|
+
font-size: var(--dds-code-block-label-size);
|
|
971
|
+
color: var(--dds-code-block-label-text);
|
|
660
972
|
font-weight: var(--dds-font-medium);
|
|
661
973
|
text-transform: uppercase;
|
|
662
974
|
letter-spacing: 0.05em;
|
|
663
975
|
}
|
|
664
976
|
.dds-code-block-copy-button {
|
|
665
|
-
padding: var(--dds-code-block-copy-padding
|
|
666
|
-
background-color: var(--dds-code-block-copy-bg
|
|
667
|
-
border: 1px solid var(--dds-code-block-copy-border
|
|
668
|
-
border-radius: var(--dds-code-block-copy-radius
|
|
669
|
-
color: var(--dds-code-block-copy-text
|
|
670
|
-
font-size: var(--dds-code-block-copy-size
|
|
977
|
+
padding: var(--dds-code-block-copy-padding);
|
|
978
|
+
background-color: var(--dds-code-block-copy-bg);
|
|
979
|
+
border: 1px solid var(--dds-code-block-copy-border);
|
|
980
|
+
border-radius: var(--dds-code-block-copy-radius);
|
|
981
|
+
color: var(--dds-code-block-copy-text);
|
|
982
|
+
font-size: var(--dds-code-block-copy-size);
|
|
671
983
|
font-weight: var(--dds-font-medium);
|
|
672
984
|
cursor: pointer;
|
|
673
985
|
transition: var(--dds-transition-colors);
|
|
674
986
|
white-space: nowrap;
|
|
675
987
|
}
|
|
676
988
|
.dds-code-block-copy-button:hover {
|
|
677
|
-
background-color: var(--dds-code-block-copy-bg-hover
|
|
678
|
-
border-color: var(--dds-code-block-copy-border-hover
|
|
989
|
+
background-color: var(--dds-code-block-copy-bg-hover);
|
|
990
|
+
border-color: var(--dds-code-block-copy-border-hover);
|
|
679
991
|
}
|
|
680
992
|
.dds-code-block-copy-button:active {
|
|
681
|
-
background-color: var(--dds-code-block-copy-bg-active
|
|
993
|
+
background-color: var(--dds-code-block-copy-bg-active);
|
|
682
994
|
}
|
|
683
995
|
.dds-code-block-content {
|
|
684
996
|
position: relative;
|
|
685
997
|
overflow-x: auto;
|
|
686
998
|
overflow-y: hidden;
|
|
687
|
-
background-color: var(--dds-code-block-content-bg
|
|
999
|
+
background-color: var(--dds-code-block-content-bg);
|
|
688
1000
|
}
|
|
689
1001
|
.dds-code-block-content pre {
|
|
690
1002
|
margin: 0;
|
|
691
|
-
padding: var(--dds-code-block-pre-padding
|
|
1003
|
+
padding: var(--dds-code-block-pre-padding);
|
|
692
1004
|
overflow: visible;
|
|
693
1005
|
font-family: var(--dds-code-block-font-family, 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace);
|
|
694
1006
|
font-size: var(--dds-code-block-font-size, 0.875rem);
|
|
695
1007
|
line-height: var(--dds-code-block-line-height, 1.5);
|
|
696
|
-
color: var(--dds-code-block-text
|
|
1008
|
+
color: var(--dds-code-block-text);
|
|
697
1009
|
background-color: transparent;
|
|
1010
|
+
text-shadow: none;
|
|
698
1011
|
-webkit-font-smoothing: antialiased;
|
|
699
1012
|
-moz-osx-font-smoothing: grayscale;
|
|
700
1013
|
text-rendering: optimizeLegibility;
|
|
@@ -705,6 +1018,7 @@ a.no-text-decoration {
|
|
|
705
1018
|
font-size: inherit;
|
|
706
1019
|
color: inherit;
|
|
707
1020
|
background-color: transparent !important;
|
|
1021
|
+
text-shadow: none !important;
|
|
708
1022
|
padding: 0;
|
|
709
1023
|
border-radius: 0;
|
|
710
1024
|
-webkit-font-smoothing: antialiased;
|
|
@@ -731,34 +1045,37 @@ a.no-text-decoration {
|
|
|
731
1045
|
left: 0;
|
|
732
1046
|
right: 0;
|
|
733
1047
|
height: 1.5em;
|
|
734
|
-
background-color: var(--dds-code-block-highlight-bg
|
|
735
|
-
border-left: 3px solid var(--dds-code-block-highlight-border
|
|
1048
|
+
background-color: var(--dds-code-block-highlight-bg);
|
|
1049
|
+
border-left: 3px solid var(--dds-code-block-highlight-border);
|
|
736
1050
|
}
|
|
737
1051
|
.dds-code-block-loading,
|
|
738
1052
|
.dds-code-block-error {
|
|
739
|
-
padding: var(--dds-code-block-message-padding
|
|
1053
|
+
padding: var(--dds-code-block-message-padding);
|
|
740
1054
|
text-align: center;
|
|
741
|
-
border: 1px solid var(--dds-code-block-border
|
|
742
|
-
border-radius: var(--dds-code-block-radius
|
|
1055
|
+
border: 1px solid var(--dds-code-block-border);
|
|
1056
|
+
border-radius: var(--dds-code-block-radius);
|
|
743
1057
|
}
|
|
744
1058
|
.dds-code-block-loading-text {
|
|
745
|
-
color: var(--dds-code-block-loading-text
|
|
746
|
-
font-size: var(--dds-code-block-message-size
|
|
1059
|
+
color: var(--dds-code-block-loading-text);
|
|
1060
|
+
font-size: var(--dds-code-block-message-size);
|
|
747
1061
|
}
|
|
748
1062
|
.dds-code-block-error-text {
|
|
749
|
-
color: var(--dds-code-block-error-text
|
|
750
|
-
font-size: var(--dds-code-block-message-size
|
|
1063
|
+
color: var(--dds-code-block-error-text);
|
|
1064
|
+
font-size: var(--dds-code-block-message-size);
|
|
1065
|
+
}
|
|
1066
|
+
/* Prism theme overrides */
|
|
1067
|
+
.dds-code-block-content .token {
|
|
1068
|
+
text-shadow: none;
|
|
751
1069
|
}
|
|
752
|
-
/* Prism theme overrides for light mode */
|
|
753
1070
|
.dds-code-block-content .token.comment,
|
|
754
1071
|
.dds-code-block-content .token.prolog,
|
|
755
1072
|
.dds-code-block-content .token.doctype,
|
|
756
1073
|
.dds-code-block-content .token.cdata {
|
|
757
|
-
color:
|
|
1074
|
+
color: var(--dds-prism-comment);
|
|
758
1075
|
font-style: italic;
|
|
759
1076
|
}
|
|
760
1077
|
.dds-code-block-content .token.punctuation {
|
|
761
|
-
color:
|
|
1078
|
+
color: var(--dds-prism-punctuation);
|
|
762
1079
|
}
|
|
763
1080
|
.dds-code-block-content .token.property,
|
|
764
1081
|
.dds-code-block-content .token.tag,
|
|
@@ -767,7 +1084,7 @@ a.no-text-decoration {
|
|
|
767
1084
|
.dds-code-block-content .token.constant,
|
|
768
1085
|
.dds-code-block-content .token.symbol,
|
|
769
1086
|
.dds-code-block-content .token.deleted {
|
|
770
|
-
color:
|
|
1087
|
+
color: var(--dds-prism-property);
|
|
771
1088
|
}
|
|
772
1089
|
.dds-code-block-content .token.selector,
|
|
773
1090
|
.dds-code-block-content .token.attr-name,
|
|
@@ -775,14 +1092,14 @@ a.no-text-decoration {
|
|
|
775
1092
|
.dds-code-block-content .token.char,
|
|
776
1093
|
.dds-code-block-content .token.builtin,
|
|
777
1094
|
.dds-code-block-content .token.inserted {
|
|
778
|
-
color:
|
|
1095
|
+
color: var(--dds-prism-string);
|
|
779
1096
|
}
|
|
780
1097
|
.dds-code-block-content .token.operator,
|
|
781
1098
|
.dds-code-block-content .token.entity,
|
|
782
1099
|
.dds-code-block-content .token.url,
|
|
783
1100
|
.dds-code-block-content .language-css .token.string,
|
|
784
1101
|
.dds-code-block-content .style .token.string {
|
|
785
|
-
color:
|
|
1102
|
+
color: var(--dds-prism-operator);
|
|
786
1103
|
background-color: transparent !important;
|
|
787
1104
|
background: none !important;
|
|
788
1105
|
}
|
|
@@ -794,16 +1111,16 @@ a.no-text-decoration {
|
|
|
794
1111
|
.dds-code-block-content .token.atrule,
|
|
795
1112
|
.dds-code-block-content .token.attr-value,
|
|
796
1113
|
.dds-code-block-content .token.keyword {
|
|
797
|
-
color:
|
|
1114
|
+
color: var(--dds-prism-keyword);
|
|
798
1115
|
}
|
|
799
1116
|
.dds-code-block-content .token.function,
|
|
800
1117
|
.dds-code-block-content .token.class-name {
|
|
801
|
-
color:
|
|
1118
|
+
color: var(--dds-prism-function);
|
|
802
1119
|
}
|
|
803
1120
|
.dds-code-block-content .token.regex,
|
|
804
1121
|
.dds-code-block-content .token.important,
|
|
805
1122
|
.dds-code-block-content .token.variable {
|
|
806
|
-
color:
|
|
1123
|
+
color: var(--dds-prism-regex);
|
|
807
1124
|
}
|
|
808
1125
|
.dds-typography {
|
|
809
1126
|
color: var(--dds-heading-color);
|
|
@@ -834,7 +1151,7 @@ a.no-text-decoration {
|
|
|
834
1151
|
}
|
|
835
1152
|
.dds-typography-caption {
|
|
836
1153
|
font-size: var(--dds-text-sm-size);
|
|
837
|
-
color:
|
|
1154
|
+
color: var(--dds-typography-caption-color);
|
|
838
1155
|
}
|
|
839
1156
|
.dds-link {
|
|
840
1157
|
color: var(--dds-link-color);
|
package/package.json
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roadlittledawn/docs-design-system-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"license": "MIT",
|
|
4
5
|
"description": "React components for documentation design system",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/roadlittledawn/docs-design-system",
|
|
9
|
+
"directory": "packages/react"
|
|
10
|
+
},
|
|
5
11
|
"main": "dist/index.js",
|
|
6
12
|
"types": "dist/index.d.ts",
|
|
7
13
|
"files": [
|