@roadlittledawn/docs-design-system-react 0.1.2 → 0.2.1
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 +49 -0
- package/dist/components/Callout.js +6 -7
- package/dist/components/Heading.d.ts +3 -1
- package/dist/components/Heading.js +6 -2
- package/dist/styles.css +392 -72
- package/dist/utils/slugify.d.ts +7 -0
- package/dist/utils/slugify.js +20 -0
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -116,6 +116,55 @@ Action button with variants.
|
|
|
116
116
|
</Button>
|
|
117
117
|
```
|
|
118
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>
|
|
166
|
+
```
|
|
167
|
+
|
|
119
168
|
## Hooks
|
|
120
169
|
|
|
121
170
|
### useKeyPress
|
|
@@ -7,13 +7,12 @@ var defaultTitles = {
|
|
|
7
7
|
};
|
|
8
8
|
export function Callout(_a) {
|
|
9
9
|
var variant = _a.variant, title = _a.title, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
|
|
10
|
-
var calloutClasses = [
|
|
11
|
-
"dds-callout",
|
|
12
|
-
"dds-callout-".concat(variant),
|
|
13
|
-
className,
|
|
14
|
-
]
|
|
10
|
+
var calloutClasses = ["dds-callout", "dds-callout-".concat(variant), className]
|
|
15
11
|
.filter(Boolean)
|
|
16
12
|
.join(" ");
|
|
17
|
-
var titleClasses = [
|
|
18
|
-
|
|
13
|
+
var titleClasses = [
|
|
14
|
+
"dds-callout-title",
|
|
15
|
+
"dds-callout-title-".concat(variant),
|
|
16
|
+
].join(" ");
|
|
17
|
+
return (_jsxs("div", { className: calloutClasses, children: [title !== null && (_jsx("p", { className: titleClasses, children: title || defaultTitles[variant] })), children] }));
|
|
19
18
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
interface HeadingProps {
|
|
3
|
+
/** Optionally override auto-generation of `id` attribute */
|
|
4
|
+
id?: string;
|
|
3
5
|
/** Heading level (h1, h2, h3, or h4) */
|
|
4
6
|
level: 1 | 2 | 3 | 4;
|
|
5
7
|
/** Heading content */
|
|
@@ -7,5 +9,5 @@ interface HeadingProps {
|
|
|
7
9
|
/** Additional CSS classes */
|
|
8
10
|
className?: string;
|
|
9
11
|
}
|
|
10
|
-
export declare function Heading({ level, children, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function Heading({ level, children, id, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
export {};
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import slugify from "../utils/slugify";
|
|
2
3
|
export function Heading(_a) {
|
|
3
|
-
var
|
|
4
|
+
var _b;
|
|
5
|
+
var level = _a.level, children = _a.children, id = _a.id, _c = _a.className, className = _c === void 0 ? "" : _c;
|
|
4
6
|
var Tag = "h".concat(level);
|
|
5
7
|
var classNames = "dds-heading dds-heading-".concat(level, " ").concat(className).trim();
|
|
6
|
-
|
|
8
|
+
var generatedId = typeof children === "string" ? (_b = slugify({ value: children })) !== null && _b !== void 0 ? _b : undefined : undefined;
|
|
9
|
+
var idAttr = id !== null && id !== void 0 ? id : generatedId;
|
|
10
|
+
return (_jsx(Tag, { id: idAttr, className: classNames, children: children }));
|
|
7
11
|
}
|
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 */
|
|
@@ -107,6 +108,7 @@
|
|
|
107
108
|
/* Callout Colors and Styles */
|
|
108
109
|
--dds-callout-text: #374151; /* gray-700 */
|
|
109
110
|
--dds-callout-padding: 1.25rem; /* p-5 */
|
|
111
|
+
--dds-callout-margin: 1rem 0;
|
|
110
112
|
--dds-callout-radius: 0.25rem; /* rounded */
|
|
111
113
|
--dds-callout-title-size: 0.75rem; /* text-xs */
|
|
112
114
|
--dds-callout-title-margin-bottom: 0.5rem; /* mb-2 */
|
|
@@ -131,15 +133,329 @@
|
|
|
131
133
|
--dds-callout-course-bg: #f0fdf4; /* green-50 */
|
|
132
134
|
--dds-callout-course-title: #065f46; /* emerald-800 */
|
|
133
135
|
|
|
136
|
+
/* Typography - Caption */
|
|
137
|
+
--dds-typography-caption-color: #4b5563; /* gray-600 */
|
|
138
|
+
|
|
139
|
+
/* Focus Ring */
|
|
140
|
+
--dds-focus-ring-bg: #ffffff;
|
|
141
|
+
|
|
142
|
+
/* CodeBlock */
|
|
143
|
+
--dds-code-block-border: #e5e7eb; /* gray-200 */
|
|
144
|
+
--dds-code-block-radius: 8px;
|
|
145
|
+
--dds-code-block-bg: #ffffff;
|
|
146
|
+
--dds-code-block-margin: 1rem 0;
|
|
147
|
+
--dds-code-block-header-bg: #ffffff;
|
|
148
|
+
--dds-code-block-header-gap: 0.75rem;
|
|
149
|
+
--dds-code-block-header-padding: 0.75rem 1rem;
|
|
150
|
+
--dds-code-block-tab-padding: 0.5rem 1rem;
|
|
151
|
+
--dds-code-block-tab-bg: #f3f4f6; /* gray-100 */
|
|
152
|
+
--dds-code-block-tab-text: #6b7280; /* gray-500 */
|
|
153
|
+
--dds-code-block-tab-radius: 6px;
|
|
154
|
+
--dds-code-block-tab-text-hover: #374151; /* gray-700 */
|
|
155
|
+
--dds-code-block-tab-bg-hover: #e5e7eb; /* gray-200 */
|
|
156
|
+
--dds-code-block-tab-text-active: #111827; /* gray-900 */
|
|
157
|
+
--dds-code-block-tab-bg-active: #ffffff;
|
|
158
|
+
--dds-code-block-select-padding: 0.375rem 0.75rem;
|
|
159
|
+
--dds-code-block-select-border: #d1d5db; /* gray-300 */
|
|
160
|
+
--dds-code-block-select-radius: 4px;
|
|
161
|
+
--dds-code-block-select-bg: #ffffff;
|
|
162
|
+
--dds-code-block-select-text: #374151; /* gray-700 */
|
|
163
|
+
--dds-code-block-select-size: 0.875rem;
|
|
164
|
+
--dds-code-block-select-border-hover: #9ca3af; /* gray-400 */
|
|
165
|
+
--dds-code-block-select-border-focus: #3b82f6; /* blue-500 */
|
|
166
|
+
--dds-code-block-select-focus-ring: rgba(59, 130, 246, 0.1);
|
|
167
|
+
--dds-code-block-label-size: 0.875rem;
|
|
168
|
+
--dds-code-block-label-text: #6b7280; /* gray-500 */
|
|
169
|
+
--dds-code-block-copy-padding: 0.375rem 0.75rem;
|
|
170
|
+
--dds-code-block-copy-bg: #ffffff;
|
|
171
|
+
--dds-code-block-copy-border: #d1d5db; /* gray-300 */
|
|
172
|
+
--dds-code-block-copy-radius: 4px;
|
|
173
|
+
--dds-code-block-copy-text: #374151; /* gray-700 */
|
|
174
|
+
--dds-code-block-copy-size: 0.875rem;
|
|
175
|
+
--dds-code-block-copy-bg-hover: #f9fafb; /* gray-50 */
|
|
176
|
+
--dds-code-block-copy-border-hover: #9ca3af; /* gray-400 */
|
|
177
|
+
--dds-code-block-copy-bg-active: #f3f4f6; /* gray-100 */
|
|
178
|
+
--dds-code-block-content-bg: #f9fafb; /* gray-50 */
|
|
179
|
+
--dds-code-block-pre-padding: 1rem;
|
|
180
|
+
--dds-code-block-text: #111827; /* gray-900 */
|
|
181
|
+
--dds-code-block-highlight-bg: rgba(59, 130, 246, 0.2);
|
|
182
|
+
--dds-code-block-highlight-border: #3b82f6; /* blue-500 */
|
|
183
|
+
--dds-code-block-message-padding: 1rem;
|
|
184
|
+
--dds-code-block-loading-text: #6b7280; /* gray-500 */
|
|
185
|
+
--dds-code-block-error-text: #dc2626; /* red-600 */
|
|
186
|
+
--dds-code-block-message-size: 0.875rem;
|
|
187
|
+
|
|
188
|
+
/* Prism Syntax Highlighting */
|
|
189
|
+
--dds-prism-comment: #6b7280; /* gray-500 */
|
|
190
|
+
--dds-prism-punctuation: #374151; /* gray-700 */
|
|
191
|
+
--dds-prism-property: #dc2626; /* red-600 */
|
|
192
|
+
--dds-prism-string: #059669; /* emerald-600 */
|
|
193
|
+
--dds-prism-operator: #d97706; /* amber-600 */
|
|
194
|
+
--dds-prism-keyword: #2563eb; /* blue-600 */
|
|
195
|
+
--dds-prism-function: #7c3aed; /* violet-600 */
|
|
196
|
+
--dds-prism-regex: #ea580c; /* orange-600 */
|
|
197
|
+
|
|
134
198
|
/* Collapser Colors and Styles */
|
|
135
199
|
--dds-collapser-radius: 0.375rem; /* rounded-md */
|
|
136
200
|
--dds-collapser-border: #e5e7eb; /* gray-200 */
|
|
137
|
-
--dds-collapser-shadow:
|
|
201
|
+
--dds-collapser-shadow:
|
|
202
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
138
203
|
--dds-collapser-button-padding: 0.75rem; /* p-3 */
|
|
139
204
|
--dds-collapser-button-hover-bg: #f9fafb; /* gray-50 */
|
|
140
205
|
--dds-collapser-icon-color: #6b7280; /* gray-500 */
|
|
206
|
+
--dds-collapser-text: #374151; /* gray-700 */
|
|
141
207
|
--dds-collapser-content-padding: 1rem; /* p-4 */
|
|
142
208
|
}
|
|
209
|
+
/* ==========================================================================
|
|
210
|
+
Dark Mode Tokens
|
|
211
|
+
Transparent backgrounds, readable foregrounds.
|
|
212
|
+
Activated via .dds-dark class, data-dds-theme="dark", or OS preference.
|
|
213
|
+
========================================================================== */
|
|
214
|
+
/* Explicit dark mode activation */
|
|
215
|
+
.dds-dark,
|
|
216
|
+
[data-dds-theme="dark"] {
|
|
217
|
+
/* Heading / Typography */
|
|
218
|
+
--dds-heading-color: #f9fafb; /* gray-50 */
|
|
219
|
+
--dds-typography-caption-color: #9ca3af; /* gray-400 */
|
|
220
|
+
|
|
221
|
+
/* Button - Primary (keep fill bg as accent) */
|
|
222
|
+
--dds-button-primary-bg: #3b82f6; /* blue-500 */
|
|
223
|
+
--dds-button-primary-bg-hover: #2563eb; /* blue-600 */
|
|
224
|
+
--dds-button-primary-text: #ffffff;
|
|
225
|
+
--dds-button-primary-focus-ring: #60a5fa; /* blue-400 */
|
|
226
|
+
|
|
227
|
+
/* Button - Secondary */
|
|
228
|
+
--dds-button-secondary-bg: transparent;
|
|
229
|
+
--dds-button-secondary-bg-hover: rgba(255, 255, 255, 0.1);
|
|
230
|
+
--dds-button-secondary-text: #e5e7eb; /* gray-200 */
|
|
231
|
+
--dds-button-secondary-focus-ring: #9ca3af; /* gray-400 */
|
|
232
|
+
|
|
233
|
+
/* Button - Outline */
|
|
234
|
+
--dds-button-outline-bg: transparent;
|
|
235
|
+
--dds-button-outline-bg-hover: rgba(255, 255, 255, 0.05);
|
|
236
|
+
--dds-button-outline-border: #6b7280; /* gray-500 */
|
|
237
|
+
--dds-button-outline-text: #e5e7eb; /* gray-200 */
|
|
238
|
+
--dds-button-outline-focus-ring: #9ca3af; /* gray-400 */
|
|
239
|
+
|
|
240
|
+
/* Focus Ring */
|
|
241
|
+
--dds-focus-ring-bg: transparent;
|
|
242
|
+
|
|
243
|
+
/* Card */
|
|
244
|
+
--dds-card-bg-blue: rgba(59, 130, 246, 0.08);
|
|
245
|
+
--dds-card-bg-green: rgba(34, 197, 94, 0.08);
|
|
246
|
+
--dds-card-bg-purple: rgba(168, 85, 247, 0.08);
|
|
247
|
+
--dds-card-bg-red: rgba(239, 68, 68, 0.08);
|
|
248
|
+
--dds-card-bg-yellow: rgba(234, 179, 8, 0.08);
|
|
249
|
+
--dds-card-bg-gray: rgba(156, 163, 175, 0.08);
|
|
250
|
+
--dds-card-bg-white: transparent;
|
|
251
|
+
--dds-card-border: #4b5563; /* gray-600 */
|
|
252
|
+
--dds-card-border-hover: #9ca3af; /* gray-400 */
|
|
253
|
+
--dds-card-shadow-hover: none;
|
|
254
|
+
|
|
255
|
+
--dds-card-title-blue: #93c5fd; /* blue-300 */
|
|
256
|
+
--dds-card-title-green: #86efac; /* green-300 */
|
|
257
|
+
--dds-card-title-purple: #d8b4fe; /* purple-300 */
|
|
258
|
+
--dds-card-title-red: #fca5a5; /* red-300 */
|
|
259
|
+
--dds-card-title-yellow: #fde047; /* yellow-300 */
|
|
260
|
+
--dds-card-title-gray: #e5e7eb; /* gray-200 */
|
|
261
|
+
|
|
262
|
+
--dds-card-text-blue: #bfdbfe; /* blue-200 */
|
|
263
|
+
--dds-card-text-green: #bbf7d0; /* green-200 */
|
|
264
|
+
--dds-card-text-purple: #e9d5ff; /* purple-200 */
|
|
265
|
+
--dds-card-text-red: #fecaca; /* red-200 */
|
|
266
|
+
--dds-card-text-yellow: #fef08a; /* yellow-200 */
|
|
267
|
+
--dds-card-text-gray: #d1d5db; /* gray-300 */
|
|
268
|
+
|
|
269
|
+
/* Link */
|
|
270
|
+
--dds-link-color: #60a5fa; /* blue-400 */
|
|
271
|
+
--dds-link-color-hover: #93c5fd; /* blue-300 */
|
|
272
|
+
--dds-link-decoration: #3b82f6; /* blue-500 */
|
|
273
|
+
--dds-link-decoration-hover: #60a5fa; /* blue-400 */
|
|
274
|
+
|
|
275
|
+
/* Callout */
|
|
276
|
+
--dds-callout-text: #e5e7eb; /* gray-200 */
|
|
277
|
+
|
|
278
|
+
--dds-callout-caution-bg: transparent;
|
|
279
|
+
--dds-callout-caution-title: #fca5a5; /* red-300 */
|
|
280
|
+
|
|
281
|
+
--dds-callout-important-bg: transparent;
|
|
282
|
+
--dds-callout-important-title: #fcd34d; /* amber-300 */
|
|
283
|
+
|
|
284
|
+
--dds-callout-tip-bg: transparent;
|
|
285
|
+
--dds-callout-tip-title: #93c5fd; /* blue-300 */
|
|
286
|
+
|
|
287
|
+
--dds-callout-course-bg: transparent;
|
|
288
|
+
--dds-callout-course-title: #6ee7b7; /* emerald-300 */
|
|
289
|
+
|
|
290
|
+
/* Collapser */
|
|
291
|
+
--dds-collapser-border: #4b5563; /* gray-600 */
|
|
292
|
+
--dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
|
|
293
|
+
--dds-collapser-icon-color: #9ca3af; /* gray-400 */
|
|
294
|
+
--dds-collapser-text: #e5e7eb; /* gray-200 */
|
|
295
|
+
|
|
296
|
+
/* CodeBlock */
|
|
297
|
+
--dds-code-block-bg: transparent;
|
|
298
|
+
--dds-code-block-border: #4b5563; /* gray-600 */
|
|
299
|
+
--dds-code-block-header-bg: transparent;
|
|
300
|
+
--dds-code-block-tab-bg: rgba(255, 255, 255, 0.05);
|
|
301
|
+
--dds-code-block-tab-text: #9ca3af; /* gray-400 */
|
|
302
|
+
--dds-code-block-tab-text-hover: #e5e7eb; /* gray-200 */
|
|
303
|
+
--dds-code-block-tab-bg-hover: rgba(255, 255, 255, 0.1);
|
|
304
|
+
--dds-code-block-tab-text-active: #f9fafb; /* gray-50 */
|
|
305
|
+
--dds-code-block-tab-bg-active: transparent;
|
|
306
|
+
--dds-code-block-select-border: #4b5563; /* gray-600 */
|
|
307
|
+
--dds-code-block-select-bg: transparent;
|
|
308
|
+
--dds-code-block-select-text: #e5e7eb; /* gray-200 */
|
|
309
|
+
--dds-code-block-select-border-hover: #6b7280; /* gray-500 */
|
|
310
|
+
--dds-code-block-select-border-focus: #60a5fa; /* blue-400 */
|
|
311
|
+
--dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
|
|
312
|
+
--dds-code-block-label-text: #9ca3af; /* gray-400 */
|
|
313
|
+
--dds-code-block-copy-bg: transparent;
|
|
314
|
+
--dds-code-block-copy-border: #4b5563; /* gray-600 */
|
|
315
|
+
--dds-code-block-copy-text: #e5e7eb; /* gray-200 */
|
|
316
|
+
--dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.05);
|
|
317
|
+
--dds-code-block-copy-border-hover: #6b7280; /* gray-500 */
|
|
318
|
+
--dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.1);
|
|
319
|
+
--dds-code-block-content-bg: transparent;
|
|
320
|
+
--dds-code-block-text: #e2e8f0; /* slate-200 */
|
|
321
|
+
--dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
|
|
322
|
+
--dds-code-block-highlight-border: #60a5fa; /* blue-400 */
|
|
323
|
+
--dds-code-block-loading-text: #9ca3af; /* gray-400 */
|
|
324
|
+
--dds-code-block-error-text: #f87171; /* red-400 */
|
|
325
|
+
|
|
326
|
+
/* Prism Syntax - Dark palette */
|
|
327
|
+
--dds-prism-comment: #9ca3af; /* gray-400 */
|
|
328
|
+
--dds-prism-punctuation: #d1d5db; /* gray-300 */
|
|
329
|
+
--dds-prism-property: #f87171; /* red-400 */
|
|
330
|
+
--dds-prism-string: #34d399; /* emerald-400 */
|
|
331
|
+
--dds-prism-operator: #fbbf24; /* amber-400 */
|
|
332
|
+
--dds-prism-keyword: #60a5fa; /* blue-400 */
|
|
333
|
+
--dds-prism-function: #a78bfa; /* violet-400 */
|
|
334
|
+
--dds-prism-regex: #fb923c; /* orange-400 */
|
|
335
|
+
}
|
|
336
|
+
/* Auto dark mode — follows OS preference, opt-out with .dds-light */
|
|
337
|
+
@media (prefers-color-scheme: dark) {
|
|
338
|
+
:root:not(.dds-light):not([data-dds-theme="light"]) {
|
|
339
|
+
/* Heading / Typography */
|
|
340
|
+
--dds-heading-color: #f9fafb;
|
|
341
|
+
--dds-typography-caption-color: #9ca3af;
|
|
342
|
+
|
|
343
|
+
/* Button - Primary */
|
|
344
|
+
--dds-button-primary-bg: #3b82f6;
|
|
345
|
+
--dds-button-primary-bg-hover: #2563eb;
|
|
346
|
+
--dds-button-primary-text: #ffffff;
|
|
347
|
+
--dds-button-primary-focus-ring: #60a5fa;
|
|
348
|
+
|
|
349
|
+
/* Button - Secondary */
|
|
350
|
+
--dds-button-secondary-bg: transparent;
|
|
351
|
+
--dds-button-secondary-bg-hover: rgba(255, 255, 255, 0.1);
|
|
352
|
+
--dds-button-secondary-text: #e5e7eb;
|
|
353
|
+
--dds-button-secondary-focus-ring: #9ca3af;
|
|
354
|
+
|
|
355
|
+
/* Button - Outline */
|
|
356
|
+
--dds-button-outline-bg: transparent;
|
|
357
|
+
--dds-button-outline-bg-hover: rgba(255, 255, 255, 0.05);
|
|
358
|
+
--dds-button-outline-border: #6b7280;
|
|
359
|
+
--dds-button-outline-text: #e5e7eb;
|
|
360
|
+
--dds-button-outline-focus-ring: #9ca3af;
|
|
361
|
+
|
|
362
|
+
/* Focus Ring */
|
|
363
|
+
--dds-focus-ring-bg: transparent;
|
|
364
|
+
|
|
365
|
+
/* Card */
|
|
366
|
+
--dds-card-bg-blue: rgba(59, 130, 246, 0.08);
|
|
367
|
+
--dds-card-bg-green: rgba(34, 197, 94, 0.08);
|
|
368
|
+
--dds-card-bg-purple: rgba(168, 85, 247, 0.08);
|
|
369
|
+
--dds-card-bg-red: rgba(239, 68, 68, 0.08);
|
|
370
|
+
--dds-card-bg-yellow: rgba(234, 179, 8, 0.08);
|
|
371
|
+
--dds-card-bg-gray: rgba(156, 163, 175, 0.08);
|
|
372
|
+
--dds-card-bg-white: transparent;
|
|
373
|
+
--dds-card-border: #4b5563;
|
|
374
|
+
--dds-card-border-hover: #9ca3af;
|
|
375
|
+
--dds-card-shadow-hover: none;
|
|
376
|
+
|
|
377
|
+
--dds-card-title-blue: #93c5fd;
|
|
378
|
+
--dds-card-title-green: #86efac;
|
|
379
|
+
--dds-card-title-purple: #d8b4fe;
|
|
380
|
+
--dds-card-title-red: #fca5a5;
|
|
381
|
+
--dds-card-title-yellow: #fde047;
|
|
382
|
+
--dds-card-title-gray: #e5e7eb;
|
|
383
|
+
|
|
384
|
+
--dds-card-text-blue: #bfdbfe;
|
|
385
|
+
--dds-card-text-green: #bbf7d0;
|
|
386
|
+
--dds-card-text-purple: #e9d5ff;
|
|
387
|
+
--dds-card-text-red: #fecaca;
|
|
388
|
+
--dds-card-text-yellow: #fef08a;
|
|
389
|
+
--dds-card-text-gray: #d1d5db;
|
|
390
|
+
|
|
391
|
+
/* Link */
|
|
392
|
+
--dds-link-color: #60a5fa;
|
|
393
|
+
--dds-link-color-hover: #93c5fd;
|
|
394
|
+
--dds-link-decoration: #3b82f6;
|
|
395
|
+
--dds-link-decoration-hover: #60a5fa;
|
|
396
|
+
|
|
397
|
+
/* Callout */
|
|
398
|
+
--dds-callout-text: #e5e7eb;
|
|
399
|
+
|
|
400
|
+
--dds-callout-caution-bg: transparent;
|
|
401
|
+
--dds-callout-caution-title: #fca5a5;
|
|
402
|
+
|
|
403
|
+
--dds-callout-important-bg: transparent;
|
|
404
|
+
--dds-callout-important-title: #fcd34d;
|
|
405
|
+
|
|
406
|
+
--dds-callout-tip-bg: transparent;
|
|
407
|
+
--dds-callout-tip-title: #93c5fd;
|
|
408
|
+
|
|
409
|
+
--dds-callout-course-bg: transparent;
|
|
410
|
+
--dds-callout-course-title: #6ee7b7;
|
|
411
|
+
|
|
412
|
+
/* Collapser */
|
|
413
|
+
--dds-collapser-border: #4b5563;
|
|
414
|
+
--dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
|
|
415
|
+
--dds-collapser-icon-color: #9ca3af;
|
|
416
|
+
--dds-collapser-text: #e5e7eb;
|
|
417
|
+
|
|
418
|
+
/* CodeBlock */
|
|
419
|
+
--dds-code-block-bg: transparent;
|
|
420
|
+
--dds-code-block-border: #4b5563;
|
|
421
|
+
--dds-code-block-header-bg: transparent;
|
|
422
|
+
--dds-code-block-tab-bg: rgba(255, 255, 255, 0.05);
|
|
423
|
+
--dds-code-block-tab-text: #9ca3af;
|
|
424
|
+
--dds-code-block-tab-text-hover: #e5e7eb;
|
|
425
|
+
--dds-code-block-tab-bg-hover: rgba(255, 255, 255, 0.1);
|
|
426
|
+
--dds-code-block-tab-text-active: #f9fafb;
|
|
427
|
+
--dds-code-block-tab-bg-active: transparent;
|
|
428
|
+
--dds-code-block-select-border: #4b5563;
|
|
429
|
+
--dds-code-block-select-bg: transparent;
|
|
430
|
+
--dds-code-block-select-text: #e5e7eb;
|
|
431
|
+
--dds-code-block-select-border-hover: #6b7280;
|
|
432
|
+
--dds-code-block-select-border-focus: #60a5fa;
|
|
433
|
+
--dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
|
|
434
|
+
--dds-code-block-label-text: #9ca3af;
|
|
435
|
+
--dds-code-block-copy-bg: transparent;
|
|
436
|
+
--dds-code-block-copy-border: #4b5563;
|
|
437
|
+
--dds-code-block-copy-text: #e5e7eb;
|
|
438
|
+
--dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.05);
|
|
439
|
+
--dds-code-block-copy-border-hover: #6b7280;
|
|
440
|
+
--dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.1);
|
|
441
|
+
--dds-code-block-content-bg: transparent;
|
|
442
|
+
--dds-code-block-text: #e2e8f0;
|
|
443
|
+
--dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
|
|
444
|
+
--dds-code-block-highlight-border: #60a5fa;
|
|
445
|
+
--dds-code-block-loading-text: #9ca3af;
|
|
446
|
+
--dds-code-block-error-text: #f87171;
|
|
447
|
+
|
|
448
|
+
/* Prism Syntax - Dark palette */
|
|
449
|
+
--dds-prism-comment: #9ca3af;
|
|
450
|
+
--dds-prism-punctuation: #d1d5db;
|
|
451
|
+
--dds-prism-property: #f87171;
|
|
452
|
+
--dds-prism-string: #34d399;
|
|
453
|
+
--dds-prism-operator: #fbbf24;
|
|
454
|
+
--dds-prism-keyword: #60a5fa;
|
|
455
|
+
--dds-prism-function: #a78bfa;
|
|
456
|
+
--dds-prism-regex: #fb923c;
|
|
457
|
+
}
|
|
458
|
+
}
|
|
143
459
|
/* Import PrismJS theme */
|
|
144
460
|
/**
|
|
145
461
|
* prism.js default theme for JavaScript, CSS and HTML
|
|
@@ -306,7 +622,7 @@ pre[class*="language-"] {
|
|
|
306
622
|
background-color: var(--dds-button-primary-bg-hover);
|
|
307
623
|
}
|
|
308
624
|
.dds-button-primary:focus {
|
|
309
|
-
box-shadow: 0 0 0 var(--dds-focus-ring-offset)
|
|
625
|
+
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
626
|
}
|
|
311
627
|
.dds-button-secondary {
|
|
312
628
|
background-color: var(--dds-button-secondary-bg);
|
|
@@ -316,7 +632,7 @@ pre[class*="language-"] {
|
|
|
316
632
|
background-color: var(--dds-button-secondary-bg-hover);
|
|
317
633
|
}
|
|
318
634
|
.dds-button-secondary:focus {
|
|
319
|
-
box-shadow: 0 0 0 var(--dds-focus-ring-offset)
|
|
635
|
+
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
636
|
}
|
|
321
637
|
.dds-button-outline {
|
|
322
638
|
border: 1px solid var(--dds-button-outline-border);
|
|
@@ -327,7 +643,7 @@ pre[class*="language-"] {
|
|
|
327
643
|
background-color: var(--dds-button-outline-bg-hover);
|
|
328
644
|
}
|
|
329
645
|
.dds-button-outline:focus {
|
|
330
|
-
box-shadow: 0 0 0 var(--dds-focus-ring-offset)
|
|
646
|
+
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
647
|
}
|
|
332
648
|
/* Sizes */
|
|
333
649
|
.dds-button-sm {
|
|
@@ -344,6 +660,7 @@ pre[class*="language-"] {
|
|
|
344
660
|
}
|
|
345
661
|
.dds-callout {
|
|
346
662
|
padding: var(--dds-callout-padding);
|
|
663
|
+
margin: var(--dds-callout-margin);
|
|
347
664
|
border-radius: var(--dds-callout-radius);
|
|
348
665
|
border: 1px solid;
|
|
349
666
|
border-left-width: 6px;
|
|
@@ -394,13 +711,15 @@ a.no-text-decoration {
|
|
|
394
711
|
.dds-card {
|
|
395
712
|
padding: var(--dds-card-padding);
|
|
396
713
|
border-radius: var(--dds-card-radius);
|
|
714
|
+
border: 1px solid var(--dds-card-border);
|
|
397
715
|
}
|
|
398
716
|
.dds-card-clickable {
|
|
399
717
|
cursor: pointer;
|
|
400
|
-
transition: var(--dds-transition-shadow);
|
|
718
|
+
transition: var(--dds-transition-shadow), border-color 150ms ease-in-out;
|
|
401
719
|
}
|
|
402
720
|
.dds-card-clickable:hover {
|
|
403
721
|
box-shadow: var(--dds-card-shadow-hover);
|
|
722
|
+
border-color: var(--dds-card-border-hover);
|
|
404
723
|
}
|
|
405
724
|
.dds-card-clickable > * {
|
|
406
725
|
text-decoration: none;
|
|
@@ -426,7 +745,6 @@ a.no-text-decoration {
|
|
|
426
745
|
}
|
|
427
746
|
.dds-card-bg-white {
|
|
428
747
|
background-color: var(--dds-card-bg-white);
|
|
429
|
-
border: 1px solid var(--dds-card-border);
|
|
430
748
|
}
|
|
431
749
|
/* Title color variants */
|
|
432
750
|
.dds-card-title {
|
|
@@ -558,21 +876,22 @@ a.no-text-decoration {
|
|
|
558
876
|
.dds-collapser-content {
|
|
559
877
|
border-top: 1px solid var(--dds-collapser-border);
|
|
560
878
|
padding: var(--dds-collapser-content-padding);
|
|
879
|
+
color: var(--dds-collapser-text);
|
|
561
880
|
}
|
|
562
881
|
.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
|
|
882
|
+
border: 1px solid var(--dds-code-block-border);
|
|
883
|
+
border-radius: var(--dds-code-block-radius);
|
|
884
|
+
background-color: var(--dds-code-block-bg);
|
|
566
885
|
overflow: hidden;
|
|
567
|
-
margin: var(--dds-code-block-margin
|
|
886
|
+
margin: var(--dds-code-block-margin);
|
|
568
887
|
}
|
|
569
888
|
.dds-code-block-header {
|
|
570
889
|
display: flex;
|
|
571
890
|
justify-content: space-between;
|
|
572
891
|
align-items: flex-end;
|
|
573
892
|
padding: 0;
|
|
574
|
-
background-color: var(--dds-code-block-header-bg
|
|
575
|
-
border-bottom: 1px solid var(--dds-code-block-border
|
|
893
|
+
background-color: var(--dds-code-block-header-bg);
|
|
894
|
+
border-bottom: 1px solid var(--dds-code-block-border);
|
|
576
895
|
min-height: 2.75rem;
|
|
577
896
|
overflow: hidden;
|
|
578
897
|
}
|
|
@@ -585,9 +904,9 @@ a.no-text-decoration {
|
|
|
585
904
|
.dds-code-block-header-right {
|
|
586
905
|
display: flex;
|
|
587
906
|
align-items: center;
|
|
588
|
-
gap: var(--dds-code-block-header-gap
|
|
907
|
+
gap: var(--dds-code-block-header-gap);
|
|
589
908
|
margin-left: auto;
|
|
590
|
-
padding: var(--dds-code-block-header-padding
|
|
909
|
+
padding: var(--dds-code-block-header-padding);
|
|
591
910
|
padding-left: 0.5rem;
|
|
592
911
|
}
|
|
593
912
|
.dds-code-block-tabs {
|
|
@@ -605,13 +924,13 @@ a.no-text-decoration {
|
|
|
605
924
|
display: none; /* Chrome, Safari, Opera */
|
|
606
925
|
}
|
|
607
926
|
.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
|
|
927
|
+
padding: var(--dds-code-block-tab-padding);
|
|
928
|
+
background-color: var(--dds-code-block-tab-bg);
|
|
929
|
+
border: 1px solid var(--dds-code-block-border);
|
|
611
930
|
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
|
|
931
|
+
border-top-left-radius: var(--dds-code-block-tab-radius);
|
|
932
|
+
border-top-right-radius: var(--dds-code-block-tab-radius);
|
|
933
|
+
color: var(--dds-code-block-tab-text);
|
|
615
934
|
font-size: var(--dds-code-block-tab-size, 0.875rem);
|
|
616
935
|
font-weight: var(--dds-font-medium);
|
|
617
936
|
cursor: pointer;
|
|
@@ -621,80 +940,77 @@ a.no-text-decoration {
|
|
|
621
940
|
position: relative;
|
|
622
941
|
}
|
|
623
942
|
.dds-code-block-tab:hover {
|
|
624
|
-
color: var(--dds-code-block-tab-text-hover
|
|
625
|
-
background-color: var(--dds-code-block-tab-bg-hover
|
|
943
|
+
color: var(--dds-code-block-tab-text-hover);
|
|
944
|
+
background-color: var(--dds-code-block-tab-bg-hover);
|
|
626
945
|
}
|
|
627
946
|
.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);
|
|
947
|
+
color: var(--dds-code-block-tab-text-active);
|
|
948
|
+
background-color: var(--dds-code-block-tab-bg-active);
|
|
949
|
+
border-color: var(--dds-code-block-border);
|
|
635
950
|
}
|
|
636
951
|
.dds-code-block-tab-active:hover {
|
|
637
|
-
background-color: var(--dds-code-block-tab-bg-active
|
|
952
|
+
background-color: var(--dds-code-block-tab-bg-active);
|
|
638
953
|
}
|
|
639
954
|
.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
|
|
955
|
+
padding: var(--dds-code-block-select-padding);
|
|
956
|
+
border: 1px solid var(--dds-code-block-select-border);
|
|
957
|
+
border-radius: var(--dds-code-block-select-radius);
|
|
958
|
+
background-color: var(--dds-code-block-select-bg);
|
|
959
|
+
color: var(--dds-code-block-select-text);
|
|
960
|
+
font-size: var(--dds-code-block-select-size);
|
|
646
961
|
cursor: pointer;
|
|
647
962
|
transition: var(--dds-transition-colors);
|
|
648
963
|
}
|
|
649
964
|
.dds-code-block-language-select:hover {
|
|
650
|
-
border-color: var(--dds-code-block-select-border-hover
|
|
965
|
+
border-color: var(--dds-code-block-select-border-hover);
|
|
651
966
|
}
|
|
652
967
|
.dds-code-block-language-select:focus {
|
|
653
968
|
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
|
|
969
|
+
border-color: var(--dds-code-block-select-border-focus);
|
|
970
|
+
box-shadow: 0 0 0 3px var(--dds-code-block-select-focus-ring);
|
|
656
971
|
}
|
|
657
972
|
.dds-code-block-language-label {
|
|
658
|
-
font-size: var(--dds-code-block-label-size
|
|
659
|
-
color: var(--dds-code-block-label-text
|
|
973
|
+
font-size: var(--dds-code-block-label-size);
|
|
974
|
+
color: var(--dds-code-block-label-text);
|
|
660
975
|
font-weight: var(--dds-font-medium);
|
|
661
976
|
text-transform: uppercase;
|
|
662
977
|
letter-spacing: 0.05em;
|
|
663
978
|
}
|
|
664
979
|
.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
|
|
980
|
+
padding: var(--dds-code-block-copy-padding);
|
|
981
|
+
background-color: var(--dds-code-block-copy-bg);
|
|
982
|
+
border: 1px solid var(--dds-code-block-copy-border);
|
|
983
|
+
border-radius: var(--dds-code-block-copy-radius);
|
|
984
|
+
color: var(--dds-code-block-copy-text);
|
|
985
|
+
font-size: var(--dds-code-block-copy-size);
|
|
671
986
|
font-weight: var(--dds-font-medium);
|
|
672
987
|
cursor: pointer;
|
|
673
988
|
transition: var(--dds-transition-colors);
|
|
674
989
|
white-space: nowrap;
|
|
675
990
|
}
|
|
676
991
|
.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
|
|
992
|
+
background-color: var(--dds-code-block-copy-bg-hover);
|
|
993
|
+
border-color: var(--dds-code-block-copy-border-hover);
|
|
679
994
|
}
|
|
680
995
|
.dds-code-block-copy-button:active {
|
|
681
|
-
background-color: var(--dds-code-block-copy-bg-active
|
|
996
|
+
background-color: var(--dds-code-block-copy-bg-active);
|
|
682
997
|
}
|
|
683
998
|
.dds-code-block-content {
|
|
684
999
|
position: relative;
|
|
685
1000
|
overflow-x: auto;
|
|
686
1001
|
overflow-y: hidden;
|
|
687
|
-
background-color: var(--dds-code-block-content-bg
|
|
1002
|
+
background-color: var(--dds-code-block-content-bg);
|
|
688
1003
|
}
|
|
689
1004
|
.dds-code-block-content pre {
|
|
690
1005
|
margin: 0;
|
|
691
|
-
padding: var(--dds-code-block-pre-padding
|
|
1006
|
+
padding: var(--dds-code-block-pre-padding);
|
|
692
1007
|
overflow: visible;
|
|
693
1008
|
font-family: var(--dds-code-block-font-family, 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace);
|
|
694
1009
|
font-size: var(--dds-code-block-font-size, 0.875rem);
|
|
695
1010
|
line-height: var(--dds-code-block-line-height, 1.5);
|
|
696
|
-
color: var(--dds-code-block-text
|
|
1011
|
+
color: var(--dds-code-block-text);
|
|
697
1012
|
background-color: transparent;
|
|
1013
|
+
text-shadow: none;
|
|
698
1014
|
-webkit-font-smoothing: antialiased;
|
|
699
1015
|
-moz-osx-font-smoothing: grayscale;
|
|
700
1016
|
text-rendering: optimizeLegibility;
|
|
@@ -705,6 +1021,7 @@ a.no-text-decoration {
|
|
|
705
1021
|
font-size: inherit;
|
|
706
1022
|
color: inherit;
|
|
707
1023
|
background-color: transparent !important;
|
|
1024
|
+
text-shadow: none !important;
|
|
708
1025
|
padding: 0;
|
|
709
1026
|
border-radius: 0;
|
|
710
1027
|
-webkit-font-smoothing: antialiased;
|
|
@@ -731,34 +1048,37 @@ a.no-text-decoration {
|
|
|
731
1048
|
left: 0;
|
|
732
1049
|
right: 0;
|
|
733
1050
|
height: 1.5em;
|
|
734
|
-
background-color: var(--dds-code-block-highlight-bg
|
|
735
|
-
border-left: 3px solid var(--dds-code-block-highlight-border
|
|
1051
|
+
background-color: var(--dds-code-block-highlight-bg);
|
|
1052
|
+
border-left: 3px solid var(--dds-code-block-highlight-border);
|
|
736
1053
|
}
|
|
737
1054
|
.dds-code-block-loading,
|
|
738
1055
|
.dds-code-block-error {
|
|
739
|
-
padding: var(--dds-code-block-message-padding
|
|
1056
|
+
padding: var(--dds-code-block-message-padding);
|
|
740
1057
|
text-align: center;
|
|
741
|
-
border: 1px solid var(--dds-code-block-border
|
|
742
|
-
border-radius: var(--dds-code-block-radius
|
|
1058
|
+
border: 1px solid var(--dds-code-block-border);
|
|
1059
|
+
border-radius: var(--dds-code-block-radius);
|
|
743
1060
|
}
|
|
744
1061
|
.dds-code-block-loading-text {
|
|
745
|
-
color: var(--dds-code-block-loading-text
|
|
746
|
-
font-size: var(--dds-code-block-message-size
|
|
1062
|
+
color: var(--dds-code-block-loading-text);
|
|
1063
|
+
font-size: var(--dds-code-block-message-size);
|
|
747
1064
|
}
|
|
748
1065
|
.dds-code-block-error-text {
|
|
749
|
-
color: var(--dds-code-block-error-text
|
|
750
|
-
font-size: var(--dds-code-block-message-size
|
|
1066
|
+
color: var(--dds-code-block-error-text);
|
|
1067
|
+
font-size: var(--dds-code-block-message-size);
|
|
1068
|
+
}
|
|
1069
|
+
/* Prism theme overrides */
|
|
1070
|
+
.dds-code-block-content .token {
|
|
1071
|
+
text-shadow: none;
|
|
751
1072
|
}
|
|
752
|
-
/* Prism theme overrides for light mode */
|
|
753
1073
|
.dds-code-block-content .token.comment,
|
|
754
1074
|
.dds-code-block-content .token.prolog,
|
|
755
1075
|
.dds-code-block-content .token.doctype,
|
|
756
1076
|
.dds-code-block-content .token.cdata {
|
|
757
|
-
color:
|
|
1077
|
+
color: var(--dds-prism-comment);
|
|
758
1078
|
font-style: italic;
|
|
759
1079
|
}
|
|
760
1080
|
.dds-code-block-content .token.punctuation {
|
|
761
|
-
color:
|
|
1081
|
+
color: var(--dds-prism-punctuation);
|
|
762
1082
|
}
|
|
763
1083
|
.dds-code-block-content .token.property,
|
|
764
1084
|
.dds-code-block-content .token.tag,
|
|
@@ -767,7 +1087,7 @@ a.no-text-decoration {
|
|
|
767
1087
|
.dds-code-block-content .token.constant,
|
|
768
1088
|
.dds-code-block-content .token.symbol,
|
|
769
1089
|
.dds-code-block-content .token.deleted {
|
|
770
|
-
color:
|
|
1090
|
+
color: var(--dds-prism-property);
|
|
771
1091
|
}
|
|
772
1092
|
.dds-code-block-content .token.selector,
|
|
773
1093
|
.dds-code-block-content .token.attr-name,
|
|
@@ -775,14 +1095,14 @@ a.no-text-decoration {
|
|
|
775
1095
|
.dds-code-block-content .token.char,
|
|
776
1096
|
.dds-code-block-content .token.builtin,
|
|
777
1097
|
.dds-code-block-content .token.inserted {
|
|
778
|
-
color:
|
|
1098
|
+
color: var(--dds-prism-string);
|
|
779
1099
|
}
|
|
780
1100
|
.dds-code-block-content .token.operator,
|
|
781
1101
|
.dds-code-block-content .token.entity,
|
|
782
1102
|
.dds-code-block-content .token.url,
|
|
783
1103
|
.dds-code-block-content .language-css .token.string,
|
|
784
1104
|
.dds-code-block-content .style .token.string {
|
|
785
|
-
color:
|
|
1105
|
+
color: var(--dds-prism-operator);
|
|
786
1106
|
background-color: transparent !important;
|
|
787
1107
|
background: none !important;
|
|
788
1108
|
}
|
|
@@ -794,16 +1114,16 @@ a.no-text-decoration {
|
|
|
794
1114
|
.dds-code-block-content .token.atrule,
|
|
795
1115
|
.dds-code-block-content .token.attr-value,
|
|
796
1116
|
.dds-code-block-content .token.keyword {
|
|
797
|
-
color:
|
|
1117
|
+
color: var(--dds-prism-keyword);
|
|
798
1118
|
}
|
|
799
1119
|
.dds-code-block-content .token.function,
|
|
800
1120
|
.dds-code-block-content .token.class-name {
|
|
801
|
-
color:
|
|
1121
|
+
color: var(--dds-prism-function);
|
|
802
1122
|
}
|
|
803
1123
|
.dds-code-block-content .token.regex,
|
|
804
1124
|
.dds-code-block-content .token.important,
|
|
805
1125
|
.dds-code-block-content .token.variable {
|
|
806
|
-
color:
|
|
1126
|
+
color: var(--dds-prism-regex);
|
|
807
1127
|
}
|
|
808
1128
|
.dds-typography {
|
|
809
1129
|
color: var(--dds-heading-color);
|
|
@@ -834,7 +1154,7 @@ a.no-text-decoration {
|
|
|
834
1154
|
}
|
|
835
1155
|
.dds-typography-caption {
|
|
836
1156
|
font-size: var(--dds-text-sm-size);
|
|
837
|
-
color:
|
|
1157
|
+
color: var(--dds-typography-caption-color);
|
|
838
1158
|
}
|
|
839
1159
|
.dds-link {
|
|
840
1160
|
color: var(--dds-link-color);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import slug from "slug";
|
|
2
|
+
slug.extend({
|
|
3
|
+
"/": "-",
|
|
4
|
+
"\\": "-",
|
|
5
|
+
_: "-",
|
|
6
|
+
"-": "-",
|
|
7
|
+
"&": "and",
|
|
8
|
+
});
|
|
9
|
+
export default function slugify(_a) {
|
|
10
|
+
var value = _a.value, options = _a.options;
|
|
11
|
+
if (!value || value.match(/^\s+$/))
|
|
12
|
+
return null;
|
|
13
|
+
var slugified = typeof options === "string" ? slug(value, options) : slug(value, options);
|
|
14
|
+
// remove repetitive dashes
|
|
15
|
+
var repetitiveRemoved = slugified.replace(/-{2,}/g, "-");
|
|
16
|
+
// strip leading and trailing dashes
|
|
17
|
+
var dashesTrimmed = repetitiveRemoved.replace(/^-+/, "").replace(/-+$/, "");
|
|
18
|
+
// return null when empty
|
|
19
|
+
return dashesTrimmed || null;
|
|
20
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roadlittledawn/docs-design-system-react",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "React components for documentation design system",
|
|
6
6
|
"repository": {
|
|
@@ -25,11 +25,13 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"prismjs": "^1.29.0",
|
|
27
27
|
"react": "^18.0.0",
|
|
28
|
-
"react-dom": "^18.0.0"
|
|
28
|
+
"react-dom": "^18.0.0",
|
|
29
|
+
"slug": "^9.0.0"
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|
|
31
32
|
"@types/react": "^18.0.0",
|
|
32
33
|
"@types/react-dom": "^18.0.0",
|
|
34
|
+
"@types/slug": "^5.0.9",
|
|
33
35
|
"postcss": "^8.4.0",
|
|
34
36
|
"postcss-cli": "^11.0.0",
|
|
35
37
|
"postcss-import": "^16.0.0",
|