@glyphjs/runtime 0.6.0 → 0.7.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/dist/index.cjs +285 -142
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -1
- package/dist/index.d.ts +22 -1
- package/dist/index.js +283 -143
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -366,6 +366,27 @@ declare const lightTheme: GlyphTheme;
|
|
|
366
366
|
*/
|
|
367
367
|
declare const darkTheme: GlyphTheme;
|
|
368
368
|
|
|
369
|
+
/**
|
|
370
|
+
* Canonical theme variable maps.
|
|
371
|
+
*
|
|
372
|
+
* These are the single source of truth for all `--glyph-*` CSS custom
|
|
373
|
+
* properties. Both the built-in themes (`lightTheme` / `darkTheme`) and
|
|
374
|
+
* the Storybook decorator import from here.
|
|
375
|
+
*/
|
|
376
|
+
declare const LIGHT_THEME_VARS: Record<string, string>;
|
|
377
|
+
declare const DARK_THEME_VARS: Record<string, string>;
|
|
378
|
+
/**
|
|
379
|
+
* Convert a theme variable map to a CSS string suitable for injection
|
|
380
|
+
* into a `<style>` tag or inline style attribute.
|
|
381
|
+
*
|
|
382
|
+
* @example
|
|
383
|
+
* ```ts
|
|
384
|
+
* const css = themeVarsToCSS(LIGHT_THEME_VARS);
|
|
385
|
+
* // => "--glyph-bg: transparent; --glyph-text: #1a2035; ..."
|
|
386
|
+
* ```
|
|
387
|
+
*/
|
|
388
|
+
declare function themeVarsToCSS(vars: Record<string, string>): string;
|
|
389
|
+
|
|
369
390
|
/**
|
|
370
391
|
* Resolves a theme value — either a string shortcut (`'light'` / `'dark'`)
|
|
371
392
|
* or a full `GlyphTheme` object — into a concrete `GlyphTheme`.
|
|
@@ -599,4 +620,4 @@ declare function SSRPlaceholder({ width, height, className, children, }: SSRPlac
|
|
|
599
620
|
*/
|
|
600
621
|
declare function debounceInteractions(callback: (event: InteractionEvent) => void, delay?: number): (event: InteractionEvent) => void;
|
|
601
622
|
|
|
602
|
-
export { AnimationContext, AnimationProvider, type AnimationState, type BlockAnimationResult, BlockDiagnosticIndicator, BlockRenderer, PluginRegistry as ComponentRegistry, ContainerMeasure, DashboardLayout, DiagnosticsOverlay, DocumentLayout, ErrorBoundary, FallbackRenderer, GlyphBlockquote, GlyphCodeBlock, GlyphDocument, GlyphHeading, GlyphImage, GlyphList, GlyphParagraph, GlyphRawHtml, GlyphThematicBreak, InlineRenderer, LayoutProvider, type NavigationResult, PluginRegistry, PresentationLayout, ReferenceIndicator, type RegistryChangeListener, RichText, type RichTextProps, type RuntimeContextValue, RuntimeProvider, type RuntimeProviderProps, SSRPlaceholder, type SSRPlaceholderProps, ThemeProvider, type ThemeProviderProps, type ValidationResult, builtInRenderers, createGlyphRuntime, createResolveVar, darkTheme, debounceInteractions, isDarkTheme, lightTheme, mergeThemeDefaults, resolveComponentProps, resolveTheme, resolveTier, useAnimation, useBlockAnimation, useGlyphTheme, useIsClient, useLayout, useNavigation, useReferences, useRuntime, validateComponentDefinition };
|
|
623
|
+
export { AnimationContext, AnimationProvider, type AnimationState, type BlockAnimationResult, BlockDiagnosticIndicator, BlockRenderer, PluginRegistry as ComponentRegistry, ContainerMeasure, DARK_THEME_VARS, DashboardLayout, DiagnosticsOverlay, DocumentLayout, ErrorBoundary, FallbackRenderer, GlyphBlockquote, GlyphCodeBlock, GlyphDocument, GlyphHeading, GlyphImage, GlyphList, GlyphParagraph, GlyphRawHtml, GlyphThematicBreak, InlineRenderer, LIGHT_THEME_VARS, LayoutProvider, type NavigationResult, PluginRegistry, PresentationLayout, ReferenceIndicator, type RegistryChangeListener, RichText, type RichTextProps, type RuntimeContextValue, RuntimeProvider, type RuntimeProviderProps, SSRPlaceholder, type SSRPlaceholderProps, ThemeProvider, type ThemeProviderProps, type ValidationResult, builtInRenderers, createGlyphRuntime, createResolveVar, darkTheme, debounceInteractions, isDarkTheme, lightTheme, mergeThemeDefaults, resolveComponentProps, resolveTheme, resolveTier, themeVarsToCSS, useAnimation, useBlockAnimation, useGlyphTheme, useIsClient, useLayout, useNavigation, useReferences, useRuntime, validateComponentDefinition };
|
package/dist/index.d.ts
CHANGED
|
@@ -366,6 +366,27 @@ declare const lightTheme: GlyphTheme;
|
|
|
366
366
|
*/
|
|
367
367
|
declare const darkTheme: GlyphTheme;
|
|
368
368
|
|
|
369
|
+
/**
|
|
370
|
+
* Canonical theme variable maps.
|
|
371
|
+
*
|
|
372
|
+
* These are the single source of truth for all `--glyph-*` CSS custom
|
|
373
|
+
* properties. Both the built-in themes (`lightTheme` / `darkTheme`) and
|
|
374
|
+
* the Storybook decorator import from here.
|
|
375
|
+
*/
|
|
376
|
+
declare const LIGHT_THEME_VARS: Record<string, string>;
|
|
377
|
+
declare const DARK_THEME_VARS: Record<string, string>;
|
|
378
|
+
/**
|
|
379
|
+
* Convert a theme variable map to a CSS string suitable for injection
|
|
380
|
+
* into a `<style>` tag or inline style attribute.
|
|
381
|
+
*
|
|
382
|
+
* @example
|
|
383
|
+
* ```ts
|
|
384
|
+
* const css = themeVarsToCSS(LIGHT_THEME_VARS);
|
|
385
|
+
* // => "--glyph-bg: transparent; --glyph-text: #1a2035; ..."
|
|
386
|
+
* ```
|
|
387
|
+
*/
|
|
388
|
+
declare function themeVarsToCSS(vars: Record<string, string>): string;
|
|
389
|
+
|
|
369
390
|
/**
|
|
370
391
|
* Resolves a theme value — either a string shortcut (`'light'` / `'dark'`)
|
|
371
392
|
* or a full `GlyphTheme` object — into a concrete `GlyphTheme`.
|
|
@@ -599,4 +620,4 @@ declare function SSRPlaceholder({ width, height, className, children, }: SSRPlac
|
|
|
599
620
|
*/
|
|
600
621
|
declare function debounceInteractions(callback: (event: InteractionEvent) => void, delay?: number): (event: InteractionEvent) => void;
|
|
601
622
|
|
|
602
|
-
export { AnimationContext, AnimationProvider, type AnimationState, type BlockAnimationResult, BlockDiagnosticIndicator, BlockRenderer, PluginRegistry as ComponentRegistry, ContainerMeasure, DashboardLayout, DiagnosticsOverlay, DocumentLayout, ErrorBoundary, FallbackRenderer, GlyphBlockquote, GlyphCodeBlock, GlyphDocument, GlyphHeading, GlyphImage, GlyphList, GlyphParagraph, GlyphRawHtml, GlyphThematicBreak, InlineRenderer, LayoutProvider, type NavigationResult, PluginRegistry, PresentationLayout, ReferenceIndicator, type RegistryChangeListener, RichText, type RichTextProps, type RuntimeContextValue, RuntimeProvider, type RuntimeProviderProps, SSRPlaceholder, type SSRPlaceholderProps, ThemeProvider, type ThemeProviderProps, type ValidationResult, builtInRenderers, createGlyphRuntime, createResolveVar, darkTheme, debounceInteractions, isDarkTheme, lightTheme, mergeThemeDefaults, resolveComponentProps, resolveTheme, resolveTier, useAnimation, useBlockAnimation, useGlyphTheme, useIsClient, useLayout, useNavigation, useReferences, useRuntime, validateComponentDefinition };
|
|
623
|
+
export { AnimationContext, AnimationProvider, type AnimationState, type BlockAnimationResult, BlockDiagnosticIndicator, BlockRenderer, PluginRegistry as ComponentRegistry, ContainerMeasure, DARK_THEME_VARS, DashboardLayout, DiagnosticsOverlay, DocumentLayout, ErrorBoundary, FallbackRenderer, GlyphBlockquote, GlyphCodeBlock, GlyphDocument, GlyphHeading, GlyphImage, GlyphList, GlyphParagraph, GlyphRawHtml, GlyphThematicBreak, InlineRenderer, LIGHT_THEME_VARS, LayoutProvider, type NavigationResult, PluginRegistry, PresentationLayout, ReferenceIndicator, type RegistryChangeListener, RichText, type RichTextProps, type RuntimeContextValue, RuntimeProvider, type RuntimeProviderProps, SSRPlaceholder, type SSRPlaceholderProps, ThemeProvider, type ThemeProviderProps, type ValidationResult, builtInRenderers, createGlyphRuntime, createResolveVar, darkTheme, debounceInteractions, isDarkTheme, lightTheme, mergeThemeDefaults, resolveComponentProps, resolveTheme, resolveTier, themeVarsToCSS, useAnimation, useBlockAnimation, useGlyphTheme, useIsClient, useLayout, useNavigation, useReferences, useRuntime, validateComponentDefinition };
|
package/dist/index.js
CHANGED
|
@@ -153,156 +153,296 @@ var PluginRegistry = class {
|
|
|
153
153
|
}
|
|
154
154
|
};
|
|
155
155
|
|
|
156
|
+
// src/theme/variables.ts
|
|
157
|
+
var LIGHT_THEME_VARS = {
|
|
158
|
+
// ── Core colors ────────────────────────────────────────────
|
|
159
|
+
"--glyph-bg": "transparent",
|
|
160
|
+
"--glyph-text": "#1a2035",
|
|
161
|
+
"--glyph-text-muted": "#6b7a94",
|
|
162
|
+
"--glyph-heading": "#0a0e1a",
|
|
163
|
+
"--glyph-link": "#0a9d7c",
|
|
164
|
+
"--glyph-link-hover": "#088a6c",
|
|
165
|
+
"--glyph-border": "#d0d8e4",
|
|
166
|
+
"--glyph-border-strong": "#a8b5c8",
|
|
167
|
+
"--glyph-surface": "#e8ecf3",
|
|
168
|
+
"--glyph-surface-raised": "#f4f6fa",
|
|
169
|
+
// ── Accent ─────────────────────────────────────────────────
|
|
170
|
+
"--glyph-accent": "#0a9d7c",
|
|
171
|
+
"--glyph-accent-hover": "#088a6c",
|
|
172
|
+
"--glyph-accent-subtle": "#e6f6f2",
|
|
173
|
+
"--glyph-accent-muted": "#b0ddd0",
|
|
174
|
+
// ── Code ───────────────────────────────────────────────────
|
|
175
|
+
"--glyph-code-bg": "#e8ecf3",
|
|
176
|
+
"--glyph-code-text": "#1a2035",
|
|
177
|
+
// ── Blockquote ─────────────────────────────────────────────
|
|
178
|
+
"--glyph-blockquote-border": "#0a9d7c",
|
|
179
|
+
"--glyph-blockquote-bg": "#e6f6f2",
|
|
180
|
+
// ── Typography ─────────────────────────────────────────────
|
|
181
|
+
"--glyph-font-body": '"Inter", "Helvetica Neue", system-ui, sans-serif',
|
|
182
|
+
"--glyph-font-heading": '"Inter", "Helvetica Neue", system-ui, sans-serif',
|
|
183
|
+
"--glyph-font-mono": 'ui-monospace, "Cascadia Code", "Fira Code", monospace',
|
|
184
|
+
// ── Spacing ────────────────────────────────────────────────
|
|
185
|
+
"--glyph-spacing-xs": "0.25rem",
|
|
186
|
+
"--glyph-spacing-sm": "0.5rem",
|
|
187
|
+
"--glyph-spacing-md": "1rem",
|
|
188
|
+
"--glyph-spacing-lg": "1.5rem",
|
|
189
|
+
"--glyph-spacing-xl": "2rem",
|
|
190
|
+
// ── Border radius ──────────────────────────────────────────
|
|
191
|
+
"--glyph-radius-sm": "0.375rem",
|
|
192
|
+
"--glyph-radius-md": "0.5rem",
|
|
193
|
+
"--glyph-radius-lg": "0.75rem",
|
|
194
|
+
// ── Callouts ───────────────────────────────────────────────
|
|
195
|
+
"--glyph-callout-info-bg": "#e6f2fa",
|
|
196
|
+
"--glyph-callout-info-border": "#38bdf8",
|
|
197
|
+
"--glyph-callout-warning-bg": "#fef3e2",
|
|
198
|
+
"--glyph-callout-warning-border": "#fb923c",
|
|
199
|
+
"--glyph-callout-error-bg": "#fde8e8",
|
|
200
|
+
"--glyph-callout-error-border": "#f87171",
|
|
201
|
+
"--glyph-callout-tip-bg": "#e6f6f0",
|
|
202
|
+
"--glyph-callout-tip-border": "#22c55e",
|
|
203
|
+
// ── Table ──────────────────────────────────────────────────
|
|
204
|
+
"--glyph-table-border": "#d0d8e4",
|
|
205
|
+
"--glyph-table-header-bg": "#e8ecf3",
|
|
206
|
+
// ── Grid / Tooltip ─────────────────────────────────────────
|
|
207
|
+
"--glyph-grid": "#d0d8e4",
|
|
208
|
+
"--glyph-tooltip-bg": "rgba(10, 14, 26, 0.9)",
|
|
209
|
+
"--glyph-tooltip-text": "#f4f6fa",
|
|
210
|
+
// ── Timeline ───────────────────────────────────────────────
|
|
211
|
+
"--glyph-timeline-line": "#d0d8e4",
|
|
212
|
+
// ── Effects ────────────────────────────────────────────────
|
|
213
|
+
"--glyph-shadow-sm": "0 1px 3px rgba(0,0,0,0.1)",
|
|
214
|
+
"--glyph-shadow-md": "0 4px 12px rgba(0,0,0,0.15)",
|
|
215
|
+
"--glyph-shadow-lg": "0 8px 30px rgba(0,0,0,0.2)",
|
|
216
|
+
"--glyph-shadow-glow": "none",
|
|
217
|
+
"--glyph-text-shadow": "none",
|
|
218
|
+
"--glyph-backdrop": "none",
|
|
219
|
+
"--glyph-gradient-accent": "linear-gradient(135deg, #0a9d7c, #22c55e)",
|
|
220
|
+
"--glyph-transition": "0.2s ease",
|
|
221
|
+
"--glyph-opacity-muted": "0.7",
|
|
222
|
+
"--glyph-opacity-disabled": "0.4",
|
|
223
|
+
"--glyph-focus-ring": "0 0 0 2px #0a9d7c",
|
|
224
|
+
// ── SVG / Data Visualization ───────────────────────────────
|
|
225
|
+
"--glyph-node-fill-opacity": "0.85",
|
|
226
|
+
"--glyph-node-radius": "3",
|
|
227
|
+
"--glyph-node-stroke-width": "1.5",
|
|
228
|
+
"--glyph-node-label-color": "#fff",
|
|
229
|
+
"--glyph-edge-color": "#a8b5c8",
|
|
230
|
+
"--glyph-icon-stroke": "#fff",
|
|
231
|
+
"--glyph-icon-stroke-width": "1.5",
|
|
232
|
+
// ── KPI ────────────────────────────────────────────────────
|
|
233
|
+
"--glyph-kpi-positive": "#16a34a",
|
|
234
|
+
"--glyph-kpi-negative": "#dc2626",
|
|
235
|
+
"--glyph-kpi-neutral": "#6b7a94",
|
|
236
|
+
// ── Comparison ─────────────────────────────────────────────
|
|
237
|
+
"--glyph-comparison-yes": "#16a34a",
|
|
238
|
+
"--glyph-comparison-no": "#dc2626",
|
|
239
|
+
"--glyph-comparison-partial": "#d97706",
|
|
240
|
+
// ── CodeDiff ───────────────────────────────────────────────
|
|
241
|
+
"--glyph-codediff-add-bg": "rgba(22, 163, 106, 0.1)",
|
|
242
|
+
"--glyph-codediff-add-color": "#166534",
|
|
243
|
+
"--glyph-codediff-del-bg": "rgba(220, 38, 38, 0.1)",
|
|
244
|
+
"--glyph-codediff-del-color": "#991b1b",
|
|
245
|
+
"--glyph-codediff-gutter-bg": "#e8ecf3",
|
|
246
|
+
// ── Infographic ────────────────────────────────────────────
|
|
247
|
+
"--glyph-infographic-track": "#e0e4ea",
|
|
248
|
+
"--glyph-infographic-color-1": "#3b82f6",
|
|
249
|
+
"--glyph-infographic-color-2": "#22c55e",
|
|
250
|
+
"--glyph-infographic-color-3": "#f59e0b",
|
|
251
|
+
"--glyph-infographic-color-4": "#ef4444",
|
|
252
|
+
"--glyph-infographic-section-divider": "#d0d8e4",
|
|
253
|
+
"--glyph-infographic-star": "#f59e0b",
|
|
254
|
+
"--glyph-infographic-accent": "#3b82f6",
|
|
255
|
+
"--glyph-infographic-value-color": "#1d4ed8",
|
|
256
|
+
"--glyph-infographic-heading-color": "#1e293b",
|
|
257
|
+
"--glyph-infographic-label-color": "#475569",
|
|
258
|
+
"--glyph-infographic-desc-color": "#64748b",
|
|
259
|
+
"--glyph-infographic-section-bg": "rgba(255, 255, 255, 0.5)",
|
|
260
|
+
// ── Poll ───────────────────────────────────────────────────
|
|
261
|
+
"--glyph-poll-bar-bg": "#e8ecf3",
|
|
262
|
+
"--glyph-poll-bar-fill": "#0a9d7c",
|
|
263
|
+
// ── Rating ─────────────────────────────────────────────────
|
|
264
|
+
"--glyph-rating-star-fill": "#f59e0b",
|
|
265
|
+
"--glyph-rating-star-empty": "#d0d8e4",
|
|
266
|
+
"--glyph-rating-hover": "#fbbf24",
|
|
267
|
+
// ── Slider ─────────────────────────────────────────────────
|
|
268
|
+
"--glyph-slider-track": "#d0d8e4",
|
|
269
|
+
"--glyph-slider-fill": "#0a9d7c",
|
|
270
|
+
"--glyph-slider-thumb": "#0a9d7c",
|
|
271
|
+
// ── Kanban ─────────────────────────────────────────────────
|
|
272
|
+
"--glyph-kanban-column-bg": "#e8ecf3",
|
|
273
|
+
"--glyph-kanban-card-bg": "#f4f6fa",
|
|
274
|
+
"--glyph-kanban-card-border": "#d0d8e4",
|
|
275
|
+
"--glyph-kanban-drag-shadow": "0 4px 12px rgba(0,0,0,0.15)",
|
|
276
|
+
"--glyph-kanban-priority-high": "#dc2626",
|
|
277
|
+
"--glyph-kanban-priority-medium": "#f59e0b",
|
|
278
|
+
"--glyph-kanban-priority-low": "#22c55e",
|
|
279
|
+
// ── Annotate ───────────────────────────────────────────────
|
|
280
|
+
"--glyph-annotate-highlight-opacity": "0.3",
|
|
281
|
+
"--glyph-annotate-label-bg": "#f4f6fa",
|
|
282
|
+
"--glyph-annotate-sidebar-bg": "#e8ecf3",
|
|
283
|
+
// ── Form ───────────────────────────────────────────────────
|
|
284
|
+
"--glyph-form-error": "#dc2626",
|
|
285
|
+
// ── Interaction ────────────────────────────────────────────
|
|
286
|
+
"--glyph-interaction-overlay-bg": "rgba(244, 246, 250, 0.8)",
|
|
287
|
+
"--glyph-interaction-overlay-text": "#1a2035",
|
|
288
|
+
"--glyph-interaction-tooltip-bg": "rgba(26, 32, 53, 0.9)",
|
|
289
|
+
"--glyph-interaction-tooltip-text": "#f4f6fa",
|
|
290
|
+
"--glyph-interaction-active-border": "#0a9d7c"
|
|
291
|
+
};
|
|
292
|
+
var DARK_THEME_VARS = {
|
|
293
|
+
// ── Core colors ────────────────────────────────────────────
|
|
294
|
+
"--glyph-bg": "#0a0e1a",
|
|
295
|
+
"--glyph-text": "#d4dae3",
|
|
296
|
+
"--glyph-text-muted": "#6b7a94",
|
|
297
|
+
"--glyph-heading": "#edf0f5",
|
|
298
|
+
"--glyph-link": "#00d4aa",
|
|
299
|
+
"--glyph-link-hover": "#33e0be",
|
|
300
|
+
"--glyph-border": "#1a2035",
|
|
301
|
+
"--glyph-border-strong": "#2a3550",
|
|
302
|
+
"--glyph-surface": "#0f1526",
|
|
303
|
+
"--glyph-surface-raised": "#162038",
|
|
304
|
+
// ── Accent ─────────────────────────────────────────────────
|
|
305
|
+
"--glyph-accent": "#00d4aa",
|
|
306
|
+
"--glyph-accent-hover": "#33e0be",
|
|
307
|
+
"--glyph-accent-subtle": "#0a1a1a",
|
|
308
|
+
"--glyph-accent-muted": "#1a4a3a",
|
|
309
|
+
// ── Code ───────────────────────────────────────────────────
|
|
310
|
+
"--glyph-code-bg": "#0f1526",
|
|
311
|
+
"--glyph-code-text": "#d4dae3",
|
|
312
|
+
// ── Blockquote ─────────────────────────────────────────────
|
|
313
|
+
"--glyph-blockquote-border": "#00d4aa",
|
|
314
|
+
"--glyph-blockquote-bg": "#0a1a1a",
|
|
315
|
+
// ── Typography ─────────────────────────────────────────────
|
|
316
|
+
"--glyph-font-body": '"Inter", "Helvetica Neue", system-ui, sans-serif',
|
|
317
|
+
"--glyph-font-heading": '"Inter", "Helvetica Neue", system-ui, sans-serif',
|
|
318
|
+
"--glyph-font-mono": 'ui-monospace, "Cascadia Code", "Fira Code", monospace',
|
|
319
|
+
// ── Spacing ────────────────────────────────────────────────
|
|
320
|
+
"--glyph-spacing-xs": "0.25rem",
|
|
321
|
+
"--glyph-spacing-sm": "0.5rem",
|
|
322
|
+
"--glyph-spacing-md": "1rem",
|
|
323
|
+
"--glyph-spacing-lg": "1.5rem",
|
|
324
|
+
"--glyph-spacing-xl": "2rem",
|
|
325
|
+
// ── Border radius ──────────────────────────────────────────
|
|
326
|
+
"--glyph-radius-sm": "0.375rem",
|
|
327
|
+
"--glyph-radius-md": "0.5rem",
|
|
328
|
+
"--glyph-radius-lg": "0.75rem",
|
|
329
|
+
// ── Callouts ───────────────────────────────────────────────
|
|
330
|
+
"--glyph-callout-info-bg": "#0a1526",
|
|
331
|
+
"--glyph-callout-info-border": "#38bdf8",
|
|
332
|
+
"--glyph-callout-warning-bg": "#1a1608",
|
|
333
|
+
"--glyph-callout-warning-border": "#fb923c",
|
|
334
|
+
"--glyph-callout-error-bg": "#1f0e0e",
|
|
335
|
+
"--glyph-callout-error-border": "#f87171",
|
|
336
|
+
"--glyph-callout-tip-bg": "#0a1a14",
|
|
337
|
+
"--glyph-callout-tip-border": "#22c55e",
|
|
338
|
+
// ── Table ──────────────────────────────────────────────────
|
|
339
|
+
"--glyph-table-border": "#1a2035",
|
|
340
|
+
"--glyph-table-header-bg": "#0f1526",
|
|
341
|
+
"--glyph-table-header-color": "#d4dae3",
|
|
342
|
+
"--glyph-table-row-alt-bg": "#121a2c",
|
|
343
|
+
"--glyph-table-cell-color": "#d4dae3",
|
|
344
|
+
"--glyph-table-footer-bg": "#0f1526",
|
|
345
|
+
"--glyph-table-footer-color": "#d4dae3",
|
|
346
|
+
// ── Grid / Tooltip ─────────────────────────────────────────
|
|
347
|
+
"--glyph-grid": "#1a2035",
|
|
348
|
+
"--glyph-tooltip-bg": "rgba(0, 0, 0, 0.9)",
|
|
349
|
+
"--glyph-tooltip-text": "#d4dae3",
|
|
350
|
+
// ── Timeline ───────────────────────────────────────────────
|
|
351
|
+
"--glyph-timeline-line": "#2a3550",
|
|
352
|
+
// ── Effects ────────────────────────────────────────────────
|
|
353
|
+
"--glyph-shadow-sm": "0 1px 3px rgba(0,0,0,0.4)",
|
|
354
|
+
"--glyph-shadow-md": "0 4px 12px rgba(0,0,0,0.5)",
|
|
355
|
+
"--glyph-shadow-lg": "0 8px 30px rgba(0,0,0,0.6)",
|
|
356
|
+
"--glyph-shadow-glow": "0 0 15px rgba(0,212,170,0.3)",
|
|
357
|
+
"--glyph-text-shadow": "none",
|
|
358
|
+
"--glyph-backdrop": "none",
|
|
359
|
+
"--glyph-gradient-accent": "linear-gradient(135deg, #00d4aa, #00e5ff)",
|
|
360
|
+
"--glyph-transition": "0.2s ease",
|
|
361
|
+
"--glyph-opacity-muted": "0.7",
|
|
362
|
+
"--glyph-opacity-disabled": "0.4",
|
|
363
|
+
"--glyph-focus-ring": "0 0 0 2px #00d4aa",
|
|
364
|
+
// ── SVG / Data Visualization ───────────────────────────────
|
|
365
|
+
"--glyph-node-fill-opacity": "0.85",
|
|
366
|
+
"--glyph-node-radius": "3",
|
|
367
|
+
"--glyph-node-stroke-width": "1.5",
|
|
368
|
+
"--glyph-node-label-color": "#fff",
|
|
369
|
+
"--glyph-edge-color": "#6b7a94",
|
|
370
|
+
"--glyph-icon-stroke": "#fff",
|
|
371
|
+
"--glyph-icon-stroke-width": "1.5",
|
|
372
|
+
// ── KPI ────────────────────────────────────────────────────
|
|
373
|
+
"--glyph-kpi-positive": "#22c55e",
|
|
374
|
+
"--glyph-kpi-negative": "#f87171",
|
|
375
|
+
"--glyph-kpi-neutral": "#6b7a94",
|
|
376
|
+
// ── Comparison ─────────────────────────────────────────────
|
|
377
|
+
"--glyph-comparison-yes": "#22c55e",
|
|
378
|
+
"--glyph-comparison-no": "#f87171",
|
|
379
|
+
"--glyph-comparison-partial": "#fbbf24",
|
|
380
|
+
// ── CodeDiff ───────────────────────────────────────────────
|
|
381
|
+
"--glyph-codediff-add-bg": "rgba(34, 197, 94, 0.15)",
|
|
382
|
+
"--glyph-codediff-add-color": "#86efac",
|
|
383
|
+
"--glyph-codediff-del-bg": "rgba(248, 113, 113, 0.15)",
|
|
384
|
+
"--glyph-codediff-del-color": "#fca5a5",
|
|
385
|
+
"--glyph-codediff-gutter-bg": "#0f1526",
|
|
386
|
+
// ── Infographic ────────────────────────────────────────────
|
|
387
|
+
"--glyph-infographic-track": "#2a3550",
|
|
388
|
+
"--glyph-infographic-color-1": "#60a5fa",
|
|
389
|
+
"--glyph-infographic-color-2": "#4ade80",
|
|
390
|
+
"--glyph-infographic-color-3": "#fbbf24",
|
|
391
|
+
"--glyph-infographic-color-4": "#f87171",
|
|
392
|
+
"--glyph-infographic-section-divider": "#1a2035",
|
|
393
|
+
"--glyph-infographic-star": "#fbbf24",
|
|
394
|
+
"--glyph-infographic-accent": "#60a5fa",
|
|
395
|
+
"--glyph-infographic-value-color": "#93c5fd",
|
|
396
|
+
"--glyph-infographic-heading-color": "#e2e8f0",
|
|
397
|
+
"--glyph-infographic-label-color": "#94a3b8",
|
|
398
|
+
"--glyph-infographic-desc-color": "#64748b",
|
|
399
|
+
"--glyph-infographic-section-bg": "rgba(255, 255, 255, 0.03)",
|
|
400
|
+
// ── Poll ───────────────────────────────────────────────────
|
|
401
|
+
"--glyph-poll-bar-bg": "#1a2035",
|
|
402
|
+
"--glyph-poll-bar-fill": "#00d4aa",
|
|
403
|
+
// ── Rating ─────────────────────────────────────────────────
|
|
404
|
+
"--glyph-rating-star-fill": "#fbbf24",
|
|
405
|
+
"--glyph-rating-star-empty": "#2a3550",
|
|
406
|
+
"--glyph-rating-hover": "#fcd34d",
|
|
407
|
+
// ── Slider ─────────────────────────────────────────────────
|
|
408
|
+
"--glyph-slider-track": "#1a2035",
|
|
409
|
+
"--glyph-slider-fill": "#00d4aa",
|
|
410
|
+
"--glyph-slider-thumb": "#00d4aa",
|
|
411
|
+
// ── Kanban ─────────────────────────────────────────────────
|
|
412
|
+
"--glyph-kanban-column-bg": "#0f1526",
|
|
413
|
+
"--glyph-kanban-card-bg": "#162038",
|
|
414
|
+
"--glyph-kanban-card-border": "#1a2035",
|
|
415
|
+
"--glyph-kanban-drag-shadow": "0 4px 12px rgba(0,0,0,0.5)",
|
|
416
|
+
"--glyph-kanban-priority-high": "#f87171",
|
|
417
|
+
"--glyph-kanban-priority-medium": "#fbbf24",
|
|
418
|
+
"--glyph-kanban-priority-low": "#4ade80",
|
|
419
|
+
// ── Annotate ───────────────────────────────────────────────
|
|
420
|
+
"--glyph-annotate-highlight-opacity": "0.3",
|
|
421
|
+
"--glyph-annotate-label-bg": "#162038",
|
|
422
|
+
"--glyph-annotate-sidebar-bg": "#0f1526",
|
|
423
|
+
// ── Form ───────────────────────────────────────────────────
|
|
424
|
+
"--glyph-form-error": "#f87171",
|
|
425
|
+
// ── Interaction ────────────────────────────────────────────
|
|
426
|
+
"--glyph-interaction-overlay-bg": "rgba(10, 14, 26, 0.8)",
|
|
427
|
+
"--glyph-interaction-overlay-text": "#d4dae3",
|
|
428
|
+
"--glyph-interaction-tooltip-bg": "rgba(0, 0, 0, 0.9)",
|
|
429
|
+
"--glyph-interaction-tooltip-text": "#d4dae3",
|
|
430
|
+
"--glyph-interaction-active-border": "#00d4aa"
|
|
431
|
+
};
|
|
432
|
+
function themeVarsToCSS(vars) {
|
|
433
|
+
return Object.entries(vars).map(([key, value]) => `${key}: ${value}`).join("; ");
|
|
434
|
+
}
|
|
435
|
+
|
|
156
436
|
// src/theme/light.ts
|
|
157
437
|
var lightTheme = {
|
|
158
438
|
name: "light",
|
|
159
|
-
variables:
|
|
160
|
-
// Colors
|
|
161
|
-
"--glyph-bg": "#f4f6fa",
|
|
162
|
-
"--glyph-text": "#1a2035",
|
|
163
|
-
"--glyph-text-muted": "#6b7a94",
|
|
164
|
-
"--glyph-heading": "#0a0e1a",
|
|
165
|
-
"--glyph-link": "#0a9d7c",
|
|
166
|
-
"--glyph-link-hover": "#088a6c",
|
|
167
|
-
"--glyph-border": "#d0d8e4",
|
|
168
|
-
"--glyph-border-strong": "#a8b5c8",
|
|
169
|
-
"--glyph-surface": "#e8ecf3",
|
|
170
|
-
"--glyph-surface-raised": "#f4f6fa",
|
|
171
|
-
// Accent
|
|
172
|
-
"--glyph-accent": "#0a9d7c",
|
|
173
|
-
"--glyph-accent-hover": "#088a6c",
|
|
174
|
-
"--glyph-accent-subtle": "#e6f6f2",
|
|
175
|
-
"--glyph-accent-muted": "#b0ddd0",
|
|
176
|
-
// Code
|
|
177
|
-
"--glyph-code-bg": "#e8ecf3",
|
|
178
|
-
"--glyph-code-text": "#1a2035",
|
|
179
|
-
// Blockquote
|
|
180
|
-
"--glyph-blockquote-border": "#0a9d7c",
|
|
181
|
-
"--glyph-blockquote-bg": "#e6f6f2",
|
|
182
|
-
// Grid / Tooltip
|
|
183
|
-
"--glyph-grid": "#d0d8e4",
|
|
184
|
-
"--glyph-tooltip-bg": "rgba(10, 14, 26, 0.9)",
|
|
185
|
-
"--glyph-tooltip-text": "#f4f6fa",
|
|
186
|
-
// Callouts
|
|
187
|
-
"--glyph-callout-info-bg": "#e6f2fa",
|
|
188
|
-
"--glyph-callout-info-border": "#38bdf8",
|
|
189
|
-
"--glyph-callout-warning-bg": "#fef3e2",
|
|
190
|
-
"--glyph-callout-warning-border": "#fb923c",
|
|
191
|
-
"--glyph-callout-error-bg": "#fde8e8",
|
|
192
|
-
"--glyph-callout-error-border": "#f87171",
|
|
193
|
-
"--glyph-callout-tip-bg": "#e6f6f0",
|
|
194
|
-
"--glyph-callout-tip-border": "#22c55e",
|
|
195
|
-
// Spacing
|
|
196
|
-
"--glyph-spacing-xs": "0.25rem",
|
|
197
|
-
"--glyph-spacing-sm": "0.5rem",
|
|
198
|
-
"--glyph-spacing-md": "1rem",
|
|
199
|
-
"--glyph-spacing-lg": "1.5rem",
|
|
200
|
-
"--glyph-spacing-xl": "2rem",
|
|
201
|
-
// Typography
|
|
202
|
-
"--glyph-font-body": '"Inter", "Helvetica Neue", system-ui, sans-serif',
|
|
203
|
-
"--glyph-font-heading": '"Inter", "Helvetica Neue", system-ui, sans-serif',
|
|
204
|
-
"--glyph-font-mono": 'ui-monospace, "Cascadia Code", "Fira Code", monospace',
|
|
205
|
-
// Border radius
|
|
206
|
-
"--glyph-radius-sm": "0.375rem",
|
|
207
|
-
"--glyph-radius-md": "0.5rem",
|
|
208
|
-
"--glyph-radius-lg": "0.75rem",
|
|
209
|
-
// Effects
|
|
210
|
-
"--glyph-shadow-sm": "0 1px 3px rgba(0,0,0,0.1)",
|
|
211
|
-
"--glyph-shadow-md": "0 4px 12px rgba(0,0,0,0.15)",
|
|
212
|
-
"--glyph-shadow-lg": "0 8px 30px rgba(0,0,0,0.2)",
|
|
213
|
-
"--glyph-shadow-glow": "none",
|
|
214
|
-
"--glyph-text-shadow": "none",
|
|
215
|
-
"--glyph-backdrop": "none",
|
|
216
|
-
"--glyph-gradient-accent": "linear-gradient(135deg, #0a9d7c, #22c55e)",
|
|
217
|
-
"--glyph-transition": "0.2s ease",
|
|
218
|
-
"--glyph-opacity-muted": "0.7",
|
|
219
|
-
"--glyph-opacity-disabled": "0.4",
|
|
220
|
-
"--glyph-focus-ring": "0 0 0 2px #0a9d7c",
|
|
221
|
-
// SVG / Data Visualization
|
|
222
|
-
"--glyph-node-fill-opacity": "0.85",
|
|
223
|
-
"--glyph-node-radius": "3",
|
|
224
|
-
"--glyph-node-stroke-width": "1.5",
|
|
225
|
-
"--glyph-node-label-color": "#fff",
|
|
226
|
-
"--glyph-edge-color": "#a8b5c8",
|
|
227
|
-
"--glyph-icon-stroke": "#fff",
|
|
228
|
-
"--glyph-icon-stroke-width": "1.5"
|
|
229
|
-
}
|
|
439
|
+
variables: LIGHT_THEME_VARS
|
|
230
440
|
};
|
|
231
441
|
|
|
232
442
|
// src/theme/dark.ts
|
|
233
443
|
var darkTheme = {
|
|
234
444
|
name: "dark",
|
|
235
|
-
variables:
|
|
236
|
-
// Colors
|
|
237
|
-
"--glyph-bg": "#0a0e1a",
|
|
238
|
-
"--glyph-text": "#d4dae3",
|
|
239
|
-
"--glyph-text-muted": "#6b7a94",
|
|
240
|
-
"--glyph-heading": "#edf0f5",
|
|
241
|
-
"--glyph-link": "#00d4aa",
|
|
242
|
-
"--glyph-link-hover": "#33e0be",
|
|
243
|
-
"--glyph-border": "#1a2035",
|
|
244
|
-
"--glyph-border-strong": "#2a3550",
|
|
245
|
-
"--glyph-surface": "#0f1526",
|
|
246
|
-
"--glyph-surface-raised": "#162038",
|
|
247
|
-
// Accent
|
|
248
|
-
"--glyph-accent": "#00d4aa",
|
|
249
|
-
"--glyph-accent-hover": "#33e0be",
|
|
250
|
-
"--glyph-accent-subtle": "#0a1a1a",
|
|
251
|
-
"--glyph-accent-muted": "#1a4a3a",
|
|
252
|
-
// Code
|
|
253
|
-
"--glyph-code-bg": "#0f1526",
|
|
254
|
-
"--glyph-code-text": "#d4dae3",
|
|
255
|
-
// Blockquote
|
|
256
|
-
"--glyph-blockquote-border": "#00d4aa",
|
|
257
|
-
"--glyph-blockquote-bg": "#0a1a1a",
|
|
258
|
-
// Grid / Tooltip
|
|
259
|
-
"--glyph-grid": "#1a2035",
|
|
260
|
-
"--glyph-tooltip-bg": "rgba(0, 0, 0, 0.9)",
|
|
261
|
-
"--glyph-tooltip-text": "#d4dae3",
|
|
262
|
-
// Callouts
|
|
263
|
-
"--glyph-callout-info-bg": "#0a1526",
|
|
264
|
-
"--glyph-callout-info-border": "#38bdf8",
|
|
265
|
-
"--glyph-callout-warning-bg": "#1a1608",
|
|
266
|
-
"--glyph-callout-warning-border": "#fb923c",
|
|
267
|
-
"--glyph-callout-error-bg": "#1f0e0e",
|
|
268
|
-
"--glyph-callout-error-border": "#f87171",
|
|
269
|
-
"--glyph-callout-tip-bg": "#0a1a14",
|
|
270
|
-
"--glyph-callout-tip-border": "#22c55e",
|
|
271
|
-
// Spacing (same as light — spacing is mode-independent)
|
|
272
|
-
"--glyph-spacing-xs": "0.25rem",
|
|
273
|
-
"--glyph-spacing-sm": "0.5rem",
|
|
274
|
-
"--glyph-spacing-md": "1rem",
|
|
275
|
-
"--glyph-spacing-lg": "1.5rem",
|
|
276
|
-
"--glyph-spacing-xl": "2rem",
|
|
277
|
-
// Typography (same as light — font stacks are mode-independent)
|
|
278
|
-
"--glyph-font-body": '"Inter", "Helvetica Neue", system-ui, sans-serif',
|
|
279
|
-
"--glyph-font-heading": '"Inter", "Helvetica Neue", system-ui, sans-serif',
|
|
280
|
-
"--glyph-font-mono": 'ui-monospace, "Cascadia Code", "Fira Code", monospace',
|
|
281
|
-
// Border radius
|
|
282
|
-
"--glyph-radius-sm": "0.375rem",
|
|
283
|
-
"--glyph-radius-md": "0.5rem",
|
|
284
|
-
"--glyph-radius-lg": "0.75rem",
|
|
285
|
-
// Effects
|
|
286
|
-
"--glyph-shadow-sm": "0 1px 3px rgba(0,0,0,0.4)",
|
|
287
|
-
"--glyph-shadow-md": "0 4px 12px rgba(0,0,0,0.5)",
|
|
288
|
-
"--glyph-shadow-lg": "0 8px 30px rgba(0,0,0,0.6)",
|
|
289
|
-
"--glyph-shadow-glow": "0 0 15px rgba(0,212,170,0.3)",
|
|
290
|
-
"--glyph-text-shadow": "none",
|
|
291
|
-
"--glyph-backdrop": "none",
|
|
292
|
-
"--glyph-gradient-accent": "linear-gradient(135deg, #00d4aa, #00e5ff)",
|
|
293
|
-
"--glyph-transition": "0.2s ease",
|
|
294
|
-
"--glyph-opacity-muted": "0.7",
|
|
295
|
-
"--glyph-opacity-disabled": "0.4",
|
|
296
|
-
"--glyph-focus-ring": "0 0 0 2px #00d4aa",
|
|
297
|
-
// SVG / Data Visualization
|
|
298
|
-
"--glyph-node-fill-opacity": "0.85",
|
|
299
|
-
"--glyph-node-radius": "3",
|
|
300
|
-
"--glyph-node-stroke-width": "1.5",
|
|
301
|
-
"--glyph-node-label-color": "#fff",
|
|
302
|
-
"--glyph-edge-color": "#6b7a94",
|
|
303
|
-
"--glyph-icon-stroke": "#fff",
|
|
304
|
-
"--glyph-icon-stroke-width": "1.5"
|
|
305
|
-
}
|
|
445
|
+
variables: DARK_THEME_VARS
|
|
306
446
|
};
|
|
307
447
|
|
|
308
448
|
// src/theme/resolve.ts
|
|
@@ -1748,6 +1888,6 @@ function debounceInteractions(callback, delay = 300) {
|
|
|
1748
1888
|
};
|
|
1749
1889
|
}
|
|
1750
1890
|
|
|
1751
|
-
export { AnimationContext, AnimationProvider, BlockDiagnosticIndicator, BlockRenderer, PluginRegistry as ComponentRegistry, ContainerMeasure, DashboardLayout, DiagnosticsOverlay, DocumentLayout, ErrorBoundary, FallbackRenderer, GlyphBlockquote, GlyphCodeBlock, GlyphDocument, GlyphHeading, GlyphImage, GlyphList, GlyphParagraph, GlyphRawHtml, GlyphThematicBreak, InlineRenderer, LayoutProvider, PluginRegistry, PresentationLayout, ReferenceIndicator, RichText, RuntimeProvider, SSRPlaceholder, ThemeProvider, builtInRenderers, createGlyphRuntime, createResolveVar, darkTheme, debounceInteractions, isDarkTheme, lightTheme, mergeThemeDefaults, resolveComponentProps, resolveTheme, resolveTier, useAnimation, useBlockAnimation, useGlyphTheme, useIsClient, useLayout, useNavigation, useReferences, useRuntime, validateComponentDefinition };
|
|
1891
|
+
export { AnimationContext, AnimationProvider, BlockDiagnosticIndicator, BlockRenderer, PluginRegistry as ComponentRegistry, ContainerMeasure, DARK_THEME_VARS, DashboardLayout, DiagnosticsOverlay, DocumentLayout, ErrorBoundary, FallbackRenderer, GlyphBlockquote, GlyphCodeBlock, GlyphDocument, GlyphHeading, GlyphImage, GlyphList, GlyphParagraph, GlyphRawHtml, GlyphThematicBreak, InlineRenderer, LIGHT_THEME_VARS, LayoutProvider, PluginRegistry, PresentationLayout, ReferenceIndicator, RichText, RuntimeProvider, SSRPlaceholder, ThemeProvider, builtInRenderers, createGlyphRuntime, createResolveVar, darkTheme, debounceInteractions, isDarkTheme, lightTheme, mergeThemeDefaults, resolveComponentProps, resolveTheme, resolveTier, themeVarsToCSS, useAnimation, useBlockAnimation, useGlyphTheme, useIsClient, useLayout, useNavigation, useReferences, useRuntime, validateComponentDefinition };
|
|
1752
1892
|
//# sourceMappingURL=index.js.map
|
|
1753
1893
|
//# sourceMappingURL=index.js.map
|