@duro-app/cli 5.2.0 → 5.3.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/package.json +5 -5
- package/registry.json +218 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@duro-app/cli",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Machine-queryable docs for the Duro design system: components, props, recipes, tokens and rules as CLI output, JSON, or an MCP server.",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@modelcontextprotocol/sdk": ">=1.0.0",
|
|
48
|
-
"@duro-app/ui": "^5.
|
|
48
|
+
"@duro-app/ui": "^5.3.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependenciesMeta": {
|
|
51
51
|
"@duro-app/ui": {
|
|
@@ -60,9 +60,9 @@
|
|
|
60
60
|
"@types/node": "^24.0.0",
|
|
61
61
|
"ts-morph": "^26.0.0",
|
|
62
62
|
"typescript": "^5.7.0",
|
|
63
|
-
"@duro-app/eslint-plugin": "^5.
|
|
64
|
-
"@duro-app/ui": "^5.
|
|
65
|
-
"@duro-app/tokens": "^5.
|
|
63
|
+
"@duro-app/eslint-plugin": "^5.3.0",
|
|
64
|
+
"@duro-app/ui": "^5.3.0",
|
|
65
|
+
"@duro-app/tokens": "^5.3.0"
|
|
66
66
|
},
|
|
67
67
|
"scripts": {
|
|
68
68
|
"registry": "node scripts/build-registry.mjs",
|
package/registry.json
CHANGED
|
@@ -251,7 +251,8 @@
|
|
|
251
251
|
"success",
|
|
252
252
|
"warning",
|
|
253
253
|
"error",
|
|
254
|
-
"info"
|
|
254
|
+
"info",
|
|
255
|
+
"highlight"
|
|
255
256
|
]
|
|
256
257
|
},
|
|
257
258
|
{
|
|
@@ -383,9 +384,19 @@
|
|
|
383
384
|
"importPath": "@duro-app/ui",
|
|
384
385
|
"kind": "component",
|
|
385
386
|
"meta": {
|
|
386
|
-
"description": "Groups related buttons together with consistent spacing and layout. Supports horizontal and vertical orientation with alignment control.",
|
|
387
|
+
"description": "Groups related buttons together with consistent spacing and layout. Supports horizontal and vertical orientation with alignment control. With `attached`, the group renders one joined control (shared borders, square inner corners) from any mix of Button, Toggle and Select/Menu/Popover triggers.",
|
|
387
388
|
"example": "<ButtonGroup align=\"end\" gap=\"sm\">\n <Button variant=\"secondary\">Cancel</Button>\n <Button variant=\"primary\">Save</Button>\n</ButtonGroup>",
|
|
388
389
|
"relatedTo": [
|
|
390
|
+
{
|
|
391
|
+
"component": "Toolbar",
|
|
392
|
+
"kind": "composition",
|
|
393
|
+
"relationship": "Put attached groups in a Toolbar for one tab stop and arrow keys across them; a ButtonGroup alone leaves every control its own tab stop"
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"component": "ToggleGroup",
|
|
397
|
+
"kind": "contrast",
|
|
398
|
+
"relationship": "ToggleGroup owns a selection (single or multiple) across Toggles; ButtonGroup attached only joins controls visually, each keeps its own state"
|
|
399
|
+
},
|
|
389
400
|
{
|
|
390
401
|
"component": "Inline",
|
|
391
402
|
"kind": "contrast",
|
|
@@ -405,7 +416,8 @@
|
|
|
405
416
|
"whenToUse": [
|
|
406
417
|
"Dialog footers with Save/Cancel actions",
|
|
407
418
|
"Toolbar-style groupings of related actions",
|
|
408
|
-
"Form submission areas with multiple actions"
|
|
419
|
+
"Form submission areas with multiple actions",
|
|
420
|
+
"`attached`: a segmented control of mixed controls — [Normal | Arial | 15px] as three Selects, [B | I | U | link] as Toggles and a Popover trigger"
|
|
409
421
|
]
|
|
410
422
|
},
|
|
411
423
|
"name": "ButtonGroup",
|
|
@@ -438,10 +450,23 @@
|
|
|
438
450
|
},
|
|
439
451
|
{
|
|
440
452
|
"default": "'sm'",
|
|
441
|
-
"description": "Gap between buttons. Default: 'sm'",
|
|
453
|
+
"description": "Gap between buttons. Default: 'sm' (ignored when `attached`)",
|
|
442
454
|
"name": "gap",
|
|
443
455
|
"required": false,
|
|
444
456
|
"type": "ButtonGroupGap"
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
"default": "false",
|
|
460
|
+
"description": "One joined control: no gap, shared borders, square inner corners. Holds Buttons, Toggles and the Select, Menu and Popover triggers, in any mix.",
|
|
461
|
+
"name": "attached",
|
|
462
|
+
"required": false,
|
|
463
|
+
"type": "boolean"
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
"description": "Names the group for assistive tech (a toolbar segment: \"Text style\").",
|
|
467
|
+
"name": "aria-label",
|
|
468
|
+
"required": false,
|
|
469
|
+
"type": "string"
|
|
445
470
|
}
|
|
446
471
|
],
|
|
447
472
|
"sourcePath": "packages/ui/src/components/ButtonGroup/ButtonGroup.tsx"
|
|
@@ -4173,6 +4198,18 @@
|
|
|
4173
4198
|
"name": "children",
|
|
4174
4199
|
"required": true,
|
|
4175
4200
|
"type": "ReactNode"
|
|
4201
|
+
},
|
|
4202
|
+
{
|
|
4203
|
+
"description": "Accessible name: required when the label is an icon only.",
|
|
4204
|
+
"name": "aria-label",
|
|
4205
|
+
"required": false,
|
|
4206
|
+
"type": "string"
|
|
4207
|
+
},
|
|
4208
|
+
{
|
|
4209
|
+
"description": "The trigger <button>, e.g. to measure it or return focus to it.",
|
|
4210
|
+
"name": "ref",
|
|
4211
|
+
"required": false,
|
|
4212
|
+
"type": "Ref<HTMLButtonElement>"
|
|
4176
4213
|
}
|
|
4177
4214
|
],
|
|
4178
4215
|
"sourcePath": "packages/ui/src/components/Popover/Popover.tsx"
|
|
@@ -6416,6 +6453,76 @@
|
|
|
6416
6453
|
],
|
|
6417
6454
|
"sourcePath": "packages/ui/src/components/ToggleGroup/ToggleGroup.tsx"
|
|
6418
6455
|
},
|
|
6456
|
+
"Toolbar": {
|
|
6457
|
+
"importPath": "@duro-app/ui",
|
|
6458
|
+
"kind": "component",
|
|
6459
|
+
"meta": {
|
|
6460
|
+
"anatomy": {
|
|
6461
|
+
"optional": [
|
|
6462
|
+
"ButtonGroup attached",
|
|
6463
|
+
"Toggle",
|
|
6464
|
+
"Button",
|
|
6465
|
+
"Select",
|
|
6466
|
+
"Menu",
|
|
6467
|
+
"Popover"
|
|
6468
|
+
],
|
|
6469
|
+
"required": [
|
|
6470
|
+
"Toolbar",
|
|
6471
|
+
"aria-label"
|
|
6472
|
+
]
|
|
6473
|
+
},
|
|
6474
|
+
"description": "A row of controls with one tab stop (the WAI-ARIA toolbar pattern): Tab enters at the last focused control, Left/Right move across every control inside — through attached ButtonGroups too — and Home/End jump to the ends. A Select or Menu trigger keeps its own keys, and a control whose popup is open keeps Left/Right.",
|
|
6475
|
+
"example": "<Toolbar aria-label=\"Formatting\">\n <ButtonGroup attached aria-label=\"Text style\">\n <Toggle aria-label=\"Bold\" pressed={bold} onPressedChange={setBold}>B</Toggle>\n <Toggle aria-label=\"Italic\" pressed={italic} onPressedChange={setItalic}>I</Toggle>\n </ButtonGroup>\n <Menu.Root>\n <Menu.Trigger>Insert</Menu.Trigger>\n <Menu.Popup>…</Menu.Popup>\n </Menu.Root>\n</Toolbar>",
|
|
6476
|
+
"relatedTo": [
|
|
6477
|
+
{
|
|
6478
|
+
"component": "ButtonGroup",
|
|
6479
|
+
"kind": "composition",
|
|
6480
|
+
"relationship": "Place attached ButtonGroups inside a Toolbar: the group joins the controls visually, the toolbar gives them one tab stop and arrow keys"
|
|
6481
|
+
},
|
|
6482
|
+
{
|
|
6483
|
+
"component": "ToggleGroup",
|
|
6484
|
+
"kind": "composition",
|
|
6485
|
+
"relationship": "A ToggleGroup inside a Toolbar hands its arrow keys to the toolbar (one roving handler)"
|
|
6486
|
+
},
|
|
6487
|
+
{
|
|
6488
|
+
"component": "ActionBar",
|
|
6489
|
+
"kind": "contrast",
|
|
6490
|
+
"relationship": "ActionBar floats over a selection; Toolbar sits in the layout"
|
|
6491
|
+
}
|
|
6492
|
+
],
|
|
6493
|
+
"whenNotToUse": [
|
|
6494
|
+
"A dialog footer or a form action row — use ButtonGroup (every button its own tab stop)",
|
|
6495
|
+
"A floating bulk-selection bar — use ActionBar",
|
|
6496
|
+
"A vertical toolbar holding a Select: a closed Select takes ArrowDown/ArrowUp to open, so use the horizontal orientation (a Menu is fine: its closed trigger handles no arrow key, Enter or Space opens it)"
|
|
6497
|
+
],
|
|
6498
|
+
"whenToUse": [
|
|
6499
|
+
"An editor toolbar: text style, format toggles, insert menus",
|
|
6500
|
+
"A dense set of related actions that should cost one Tab, not one per control"
|
|
6501
|
+
]
|
|
6502
|
+
},
|
|
6503
|
+
"name": "Toolbar",
|
|
6504
|
+
"props": [
|
|
6505
|
+
{
|
|
6506
|
+
"description": "Names the toolbar (\"Formatting\"). Required: a toolbar is a landmark-like widget.",
|
|
6507
|
+
"name": "aria-label",
|
|
6508
|
+
"required": true,
|
|
6509
|
+
"type": "string"
|
|
6510
|
+
},
|
|
6511
|
+
{
|
|
6512
|
+
"default": "'horizontal'",
|
|
6513
|
+
"description": "Arrow keys follow the orientation: Left/Right (default) or Up/Down. A vertical toolbar cannot hold a Select, whose closed trigger opens on ArrowDown/ArrowUp. A Menu can: its closed trigger handles no arrow key, so Up/Down move past it and Enter or Space opens it.",
|
|
6514
|
+
"name": "orientation",
|
|
6515
|
+
"required": false,
|
|
6516
|
+
"type": "Orientation"
|
|
6517
|
+
},
|
|
6518
|
+
{
|
|
6519
|
+
"name": "children",
|
|
6520
|
+
"required": true,
|
|
6521
|
+
"type": "ReactNode"
|
|
6522
|
+
}
|
|
6523
|
+
],
|
|
6524
|
+
"sourcePath": "packages/ui/src/components/Toolbar/Toolbar.tsx"
|
|
6525
|
+
},
|
|
6419
6526
|
"Tooltip": {
|
|
6420
6527
|
"importPath": "@duro-app/ui",
|
|
6421
6528
|
"kind": "compound",
|
|
@@ -7433,6 +7540,18 @@
|
|
|
7433
7540
|
},
|
|
7434
7541
|
"severity": "error"
|
|
7435
7542
|
},
|
|
7543
|
+
{
|
|
7544
|
+
"description": "Prefer the layers (z-index) and effects tokens over raw z-index and blur values in css.create styles",
|
|
7545
|
+
"fixable": "suggestion",
|
|
7546
|
+
"id": "duro/no-raw-layer-values",
|
|
7547
|
+
"messages": {
|
|
7548
|
+
"offScaleZIndex": "{{value}} on `zIndex` is not a layer; it sits {{nearest}}. Use a `layers.*` token from {{pkg}}/tokens/layers.css when it plays that role; a stacking value local to one component has no token yet.",
|
|
7549
|
+
"rawEffect": "'{{value}}' on `{{property}}` is a raw effect{{tokenText}}. Use the `effects.*` tokens from {{pkg}}/tokens/effects.css.",
|
|
7550
|
+
"rawZIndex": "{{value}} on `zIndex` is the layers.{{token}} token. Use it from {{pkg}}/tokens/layers.css.",
|
|
7551
|
+
"replaceWithToken": "Replace with {{replacement}}"
|
|
7552
|
+
},
|
|
7553
|
+
"severity": "warn"
|
|
7554
|
+
},
|
|
7436
7555
|
{
|
|
7437
7556
|
"description": "Require deep imports from @duro-app/tokens (barrel imports break StyleX)",
|
|
7438
7557
|
"fixable": "autofix",
|
|
@@ -7733,6 +7852,38 @@
|
|
|
7733
7852
|
"light": "#1e40af"
|
|
7734
7853
|
}
|
|
7735
7854
|
},
|
|
7855
|
+
{
|
|
7856
|
+
"key": "highlight",
|
|
7857
|
+
"values": {
|
|
7858
|
+
"dark": "#c084fc",
|
|
7859
|
+
"highContrast": "#d8b4fe",
|
|
7860
|
+
"light": "#6b21a8"
|
|
7861
|
+
}
|
|
7862
|
+
},
|
|
7863
|
+
{
|
|
7864
|
+
"key": "highlightBg",
|
|
7865
|
+
"values": {
|
|
7866
|
+
"dark": "rgba(192, 132, 252, 0.1)",
|
|
7867
|
+
"highContrast": "rgba(216, 180, 254, 0.15)",
|
|
7868
|
+
"light": "rgba(107, 33, 168, 0.08)"
|
|
7869
|
+
}
|
|
7870
|
+
},
|
|
7871
|
+
{
|
|
7872
|
+
"key": "highlightBorder",
|
|
7873
|
+
"values": {
|
|
7874
|
+
"dark": "rgba(192, 132, 252, 0.3)",
|
|
7875
|
+
"highContrast": "rgba(216, 180, 254, 0.5)",
|
|
7876
|
+
"light": "rgba(107, 33, 168, 0.3)"
|
|
7877
|
+
}
|
|
7878
|
+
},
|
|
7879
|
+
{
|
|
7880
|
+
"key": "highlightText",
|
|
7881
|
+
"values": {
|
|
7882
|
+
"dark": "#d8b4fe",
|
|
7883
|
+
"highContrast": "#e9d5ff",
|
|
7884
|
+
"light": "#581c87"
|
|
7885
|
+
}
|
|
7886
|
+
},
|
|
7736
7887
|
{
|
|
7737
7888
|
"key": "scrim",
|
|
7738
7889
|
"values": {
|
|
@@ -7817,6 +7968,16 @@
|
|
|
7817
7968
|
"exportName": "colors",
|
|
7818
7969
|
"importPath": "@duro-app/tokens/tokens/colors.css"
|
|
7819
7970
|
},
|
|
7971
|
+
"effects": {
|
|
7972
|
+
"entries": [
|
|
7973
|
+
{
|
|
7974
|
+
"key": "overlayBlur",
|
|
7975
|
+
"value": "blur(2px)"
|
|
7976
|
+
}
|
|
7977
|
+
],
|
|
7978
|
+
"exportName": "effects",
|
|
7979
|
+
"importPath": "@duro-app/tokens/tokens/effects.css"
|
|
7980
|
+
},
|
|
7820
7981
|
"iconSizes": {
|
|
7821
7982
|
"entries": [
|
|
7822
7983
|
{
|
|
@@ -7843,6 +8004,48 @@
|
|
|
7843
8004
|
"exportName": "ICON_SIZES",
|
|
7844
8005
|
"importPath": "@duro-app/tokens/keys"
|
|
7845
8006
|
},
|
|
8007
|
+
"layers": {
|
|
8008
|
+
"entries": [
|
|
8009
|
+
{
|
|
8010
|
+
"key": "raised",
|
|
8011
|
+
"value": "1"
|
|
8012
|
+
},
|
|
8013
|
+
{
|
|
8014
|
+
"key": "floating",
|
|
8015
|
+
"value": "50"
|
|
8016
|
+
},
|
|
8017
|
+
{
|
|
8018
|
+
"key": "overlay",
|
|
8019
|
+
"value": "1000"
|
|
8020
|
+
},
|
|
8021
|
+
{
|
|
8022
|
+
"key": "modal",
|
|
8023
|
+
"value": "1001"
|
|
8024
|
+
},
|
|
8025
|
+
{
|
|
8026
|
+
"key": "popover",
|
|
8027
|
+
"value": "1040"
|
|
8028
|
+
},
|
|
8029
|
+
{
|
|
8030
|
+
"key": "popupBackdrop",
|
|
8031
|
+
"value": "1049"
|
|
8032
|
+
},
|
|
8033
|
+
{
|
|
8034
|
+
"key": "popup",
|
|
8035
|
+
"value": "1050"
|
|
8036
|
+
},
|
|
8037
|
+
{
|
|
8038
|
+
"key": "toast",
|
|
8039
|
+
"value": "1060"
|
|
8040
|
+
},
|
|
8041
|
+
{
|
|
8042
|
+
"key": "portal",
|
|
8043
|
+
"value": "1100"
|
|
8044
|
+
}
|
|
8045
|
+
],
|
|
8046
|
+
"exportName": "layers",
|
|
8047
|
+
"importPath": "@duro-app/tokens/tokens/layers.css"
|
|
8048
|
+
},
|
|
7846
8049
|
"layoutSpacing": {
|
|
7847
8050
|
"entries": [
|
|
7848
8051
|
{
|
|
@@ -8346,6 +8549,14 @@
|
|
|
8346
8549
|
{
|
|
8347
8550
|
"key": "deviceBarW",
|
|
8348
8551
|
"value": "96px"
|
|
8552
|
+
},
|
|
8553
|
+
{
|
|
8554
|
+
"key": "timeGutterW",
|
|
8555
|
+
"value": "64px"
|
|
8556
|
+
},
|
|
8557
|
+
{
|
|
8558
|
+
"key": "dayHeaderH",
|
|
8559
|
+
"value": "46px"
|
|
8349
8560
|
}
|
|
8350
8561
|
],
|
|
8351
8562
|
"exportName": "sizes",
|
|
@@ -8496,7 +8707,7 @@
|
|
|
8496
8707
|
"importPath": "@duro-app/tokens/tokens/typography.css"
|
|
8497
8708
|
}
|
|
8498
8709
|
},
|
|
8499
|
-
"mockupCss": "/*\n * GENERATED by scripts/generate-mockup-css.mjs — do not edit.\n *\n * The design tokens as resolved values, for HTML that loads no stylesheet\n * (mockup artboards, static previews). Same names as vars.css; where vars.css\n * follows the live theme, this file carries every theme and switches on\n * <html data-theme=\"light|high-contrast\">.\n *\n * Inside the component library and the apps, never use this: go through\n * css.create() and the token imports, or vars.css from plain CSS.\n */\n:root {\n color-scheme: dark;\n /* colors */\n --duro-color-accent: #6aaffc;\n --duro-color-accent-contrast: #000000;\n --duro-color-accent-hover: #93c5fd;\n --duro-color-bg: #0f0f0f;\n --duro-color-bg-card: #1a1a1a;\n --duro-color-bg-card-hover: #242424;\n --duro-color-border: #333333;\n --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n --duro-color-contrast-surface: #f5f5f5;\n --duro-color-error: #f87171;\n --duro-color-error-bg: rgba(248, 113, 113, 0.1);\n --duro-color-error-border: rgba(248, 113, 113, 0.3);\n --duro-color-error-contrast: #000000;\n --duro-color-error-hover: #fca5a5;\n --duro-color-error-text: #fca5a5;\n --duro-color-fixed-light: #ffffff;\n --duro-color-info: #6aaffc;\n --duro-color-info-bg: rgba(106, 175, 252, 0.1);\n --duro-color-info-border: rgba(106, 175, 252, 0.3);\n --duro-color-info-text: #93c5fd;\n --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n --duro-color-on-contrast-surface: #1a1a1a;\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-success: #22c55e;\n --duro-color-success-bg: rgba(34, 197, 94, 0.1);\n --duro-color-success-border: rgba(34, 197, 94, 0.3);\n --duro-color-success-text: #86efac;\n --duro-color-text: #e5e5e5;\n --duro-color-text-muted: #b0b0b0;\n --duro-color-warning: #fbbf24;\n --duro-color-warning-bg: rgba(251, 191, 36, 0.1);\n --duro-color-warning-border: rgba(251, 191, 36, 0.3);\n --duro-color-warning-text: #fde68a;\n /* shadows */\n --duro-shadow-drop-over: inset 0 0 0 2px #6aaffc;\n --duro-shadow-drop-ready: inset 0 0 0 1px #333333;\n --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);\n --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);\n --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);\n /* spacing */\n --duro-spacing-lg: 24px;\n --duro-spacing-md: 16px;\n --duro-spacing-ms: 12px;\n --duro-spacing-sm: 8px;\n --duro-spacing-xl: 32px;\n --duro-spacing-xs: 4px;\n --duro-spacing-xxl: 48px;\n --duro-spacing-xxxl: 64px;\n /* microSpacing */\n --duro-micro-spacing-px1: 1px;\n --duro-micro-spacing-px2: 2px;\n --duro-micro-spacing-px3: 3px;\n --duro-micro-spacing-px5: 5px;\n --duro-micro-spacing-px6: 6px;\n /* radii */\n --duro-radius-full: 9999px;\n --duro-radius-lg: 16px;\n --duro-radius-md: 12px;\n --duro-radius-px6: 6px;\n --duro-radius-sm: 8px;\n --duro-radius-xs: 4px;\n /* sizes */\n --duro-size-aside-w: 320px;\n --duro-size-bar-h: 4px;\n --duro-size-canvas-min-h: 480px;\n --duro-size-check-mark-h: 9px;\n --duro-size-check-mark-w: 5px;\n --duro-size-chip: 24px;\n --duro-size-color-area-h: 150px;\n --duro-size-color-picker-w: 196px;\n --duro-size-color-preview-h: 22px;\n --duro-size-color-swatch: 20px;\n --duro-size-color-track-h: 12px;\n --duro-size-control-lg: 40px;\n --duro-size-control-md: 39px;\n --duro-size-control-sm: 28px;\n --duro-size-device-bar-w: 96px;\n --duro-size-dialog-lg: 680px;\n --duro-size-dialog-md: 520px;\n --duro-size-dialog-sm: 400px;\n --duro-size-divider: 1px;\n --duro-size-drop-zone-min-h: 128px;\n --duro-size-edge-fade: 32px;\n --duro-size-editor-min-h: 160px;\n --duro-size-embed-w: 550px;\n --duro-size-field-min-w: 160px;\n --duro-size-field-min-w-sm: 80px;\n --duro-size-glyph-md: 16px;\n --duro-size-glyph-sm: 12px;\n --duro-size-glyph-xs: 10px;\n --duro-size-grid-col-md: 280px;\n --duro-size-grid-col-sm: 240px;\n --duro-size-grid-col-xs: 200px;\n --duro-size-handle: 16px;\n --duro-size-icon-button: 32px;\n --duro-size-icon-button-sm: 28px;\n --duro-size-icon-lg: 24px;\n --duro-size-icon-md: 18px;\n --duro-size-icon-sm: 16px;\n --duro-size-icon-xl: 36px;\n --duro-size-icon-xxl: 48px;\n --duro-size-indicator: 18px;\n --duro-size-indicator-dot: 8px;\n --duro-size-label-min-w: 120px;\n --duro-size-list-max-h: 280px;\n --duro-size-list-max-h-sm: 200px;\n --duro-size-meter-h: 6px;\n --duro-size-nav-marker-h: 18px;\n --duro-size-nav-marker-w: 3px;\n --duro-size-page-lg: 1200px;\n --duro-size-page-md: 800px;\n --duro-size-page-sm: 600px;\n --duro-size-page-xl: 1440px;\n --duro-size-page-xs: 480px;\n --duro-size-palette-min-w: 96px;\n --duro-size-panel-lg: 640px;\n --duro-size-panel-md: 480px;\n --duro-size-panel-sm: 360px;\n --duro-size-placeholder-min-h: 80px;\n --duro-size-popover-w: 320px;\n --duro-size-popover-w-sm: 240px;\n --duro-size-popup-max-w: 280px;\n --duro-size-popup-min-w: 160px;\n --duro-size-preview-max-h: 320px;\n --duro-size-readout-w: 40px;\n --duro-size-scrollbar: 8px;\n --duro-size-sidebar-w: 240px;\n --duro-size-skeleton-chip-w: 96px;\n --duro-size-slider-w: 96px;\n --duro-size-spinner-lg: 40px;\n --duro-size-spinner-md: 24px;\n --duro-size-spinner-sm: 16px;\n --duro-size-swatch-h: 34px;\n --duro-size-swatch-w: 44px;\n --duro-size-switch-thumb: 16px;\n --duro-size-switch-track-h: 20px;\n --duro-size-switch-track-w: 36px;\n --duro-size-tab-indicator: 2px;\n --duro-size-toast-max-w: 440px;\n --duro-size-toolbar-h: 36px;\n --duro-size-touch-target: 44px;\n /* borders */\n --duro-border-accent: 3px;\n --duro-border-focus-offset: 2px;\n --duro-border-focus-offset-sm: 1px;\n --duro-border-focus-ring: 2px;\n --duro-border-hairline: 1px;\n --duro-border-strong: 2px;\n /* layoutSpacing */\n --duro-layout-spacing-container-lg: 32px;\n --duro-layout-spacing-container-md: 24px;\n --duro-layout-spacing-container-sm: 16px;\n --duro-layout-spacing-inline-lg: 24px;\n --duro-layout-spacing-inline-md: 16px;\n --duro-layout-spacing-inline-sm: 8px;\n --duro-layout-spacing-inline-xs: 4px;\n --duro-layout-spacing-stack-lg: 24px;\n --duro-layout-spacing-stack-md: 16px;\n --duro-layout-spacing-stack-sm: 8px;\n --duro-layout-spacing-stack-xl: 48px;\n --duro-layout-spacing-stack-xs: 4px;\n /* typography */\n --duro-typography-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n --duro-typography-font-family-mono: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace;\n --duro-typography-font-size-heading: 1.5rem;\n --duro-typography-font-size-lg: 1.125rem;\n --duro-typography-font-size-md: 1rem;\n --duro-typography-font-size-sm: 0.875rem;\n --duro-typography-font-size-xl: 1.25rem;\n --duro-typography-font-size-xs: 0.75rem;\n --duro-typography-font-weight-bold: 700;\n --duro-typography-font-weight-medium: 500;\n --duro-typography-font-weight-normal: 400;\n --duro-typography-font-weight-semibold: 600;\n --duro-typography-line-height: 1.5;\n /* typeScale */\n --duro-type-scale-display-lg: clamp(3.5rem, 2rem + 3.5vw, 4.5rem);\n --duro-type-scale-display-md: clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem);\n --duro-type-scale-display-sm: clamp(2.25rem, 1.5rem + 2vw, 3rem);\n --duro-type-scale-font-size1: 0.75rem;\n --duro-type-scale-font-size2: 0.8125rem;\n --duro-type-scale-font-size3: 0.875rem;\n --duro-type-scale-font-size4: 1rem;\n --duro-type-scale-font-size5: 1.125rem;\n --duro-type-scale-font-size6: 1.25rem;\n --duro-type-scale-font-size7: 1.5rem;\n --duro-type-scale-font-size8: 1.875rem;\n --duro-type-scale-font-size9: 2.25rem;\n --duro-type-scale-letter-spacing-normal: 0;\n --duro-type-scale-letter-spacing-tight: -0.02em;\n --duro-type-scale-letter-spacing-wide: 0.04em;\n --duro-type-scale-line-height1: 1rem;\n --duro-type-scale-line-height2: 1.25rem;\n --duro-type-scale-line-height3: 1.25rem;\n --duro-type-scale-line-height4: 1.5rem;\n --duro-type-scale-line-height5: 1.5rem;\n --duro-type-scale-line-height6: 1.75rem;\n --duro-type-scale-line-height7: 2rem;\n --duro-type-scale-line-height8: 2.25rem;\n --duro-type-scale-line-height9: 2.75rem;\n /* duration */\n --duro-duration-base: 200ms;\n --duro-duration-brisk: 160ms;\n --duro-duration-fast: 150ms;\n --duro-duration-instant: 0ms;\n --duro-duration-minimal: 1ms;\n --duro-duration-quick: 120ms;\n --duro-duration-slow: 280ms;\n /* easing */\n --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);\n --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n --duro-easing-linear: linear;\n --duro-easing-standard: ease;\n /* breakpoints */\n --duro-breakpoint-lg: 1024px;\n --duro-breakpoint-md: 768px;\n --duro-breakpoint-sm: 640px;\n --duro-breakpoint-xl: 1280px;\n --duro-breakpoint-xs: 480px;\n}\n\n:root[data-theme=\"light\"] {\n color-scheme: light;\n /* colors */\n --duro-color-accent: #1e40af;\n --duro-color-accent-contrast: #ffffff;\n --duro-color-accent-hover: #1a3799;\n --duro-color-bg: #ffffff;\n --duro-color-bg-card: #f5f5f5;\n --duro-color-bg-card-hover: #ebebeb;\n --duro-color-border: #d4d4d4;\n --duro-color-contrast-border: rgba(255, 255, 255, 0.33);\n --duro-color-contrast-surface: #1a1a1a;\n --duro-color-error: #991b1b;\n --duro-color-error-bg: rgba(153, 27, 27, 0.08);\n --duro-color-error-border: rgba(153, 27, 27, 0.3);\n --duro-color-error-contrast: #ffffff;\n --duro-color-error-hover: #7f1d1d;\n --duro-color-error-text: #7f1d1d;\n --duro-color-fixed-light: #ffffff;\n --duro-color-info: #1e40af;\n --duro-color-info-bg: rgba(30, 64, 175, 0.08);\n --duro-color-info-border: rgba(30, 64, 175, 0.3);\n --duro-color-info-text: #1e40af;\n --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n --duro-color-on-contrast-surface: #e5e5e5;\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-success: #166534;\n --duro-color-success-bg: rgba(22, 101, 52, 0.08);\n --duro-color-success-border: rgba(22, 101, 52, 0.3);\n --duro-color-success-text: #14532d;\n --duro-color-text: #1a1a1a;\n --duro-color-text-muted: #4a4a4a;\n --duro-color-warning: #92400e;\n --duro-color-warning-bg: rgba(146, 64, 14, 0.08);\n --duro-color-warning-border: rgba(146, 64, 14, 0.3);\n --duro-color-warning-text: #78350f;\n /* shadows */\n --duro-shadow-drop-over: inset 0 0 0 2px #1e40af;\n --duro-shadow-drop-ready: inset 0 0 0 1px #d4d4d4;\n --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);\n --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);\n --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n:root[data-theme=\"high-contrast\"] {\n color-scheme: dark;\n /* colors */\n --duro-color-accent: #60a5fa;\n --duro-color-accent-contrast: #000000;\n --duro-color-accent-hover: #93c5fd;\n --duro-color-bg: #000000;\n --duro-color-bg-card: #111111;\n --duro-color-bg-card-hover: #1a1a1a;\n --duro-color-border: #555555;\n --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n --duro-color-contrast-surface: #ffffff;\n --duro-color-error: #f87171;\n --duro-color-error-bg: rgba(248, 113, 113, 0.15);\n --duro-color-error-border: rgba(248, 113, 113, 0.5);\n --duro-color-error-contrast: #000000;\n --duro-color-error-hover: #fca5a5;\n --duro-color-error-text: #fca5a5;\n --duro-color-fixed-light: #ffffff;\n --duro-color-info: #60a5fa;\n --duro-color-info-bg: rgba(96, 165, 250, 0.15);\n --duro-color-info-border: rgba(96, 165, 250, 0.5);\n --duro-color-info-text: #bfdbfe;\n --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n --duro-color-on-contrast-surface: #000000;\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-success: #4ade80;\n --duro-color-success-bg: rgba(74, 222, 128, 0.15);\n --duro-color-success-border: rgba(74, 222, 128, 0.5);\n --duro-color-success-text: #86efac;\n --duro-color-text: #ffffff;\n --duro-color-text-muted: #b0b0b0;\n --duro-color-warning: #fcd34d;\n --duro-color-warning-bg: rgba(252, 211, 77, 0.15);\n --duro-color-warning-border: rgba(252, 211, 77, 0.5);\n --duro-color-warning-text: #fef08a;\n /* shadows */\n --duro-shadow-drop-over: inset 0 0 0 2px #60a5fa;\n --duro-shadow-drop-ready: inset 0 0 0 1px #555555;\n --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);\n --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);\n --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);\n}\n"
|
|
8710
|
+
"mockupCss": "/*\n * GENERATED by scripts/generate-mockup-css.mjs — do not edit.\n *\n * The design tokens as resolved values, for HTML that loads no stylesheet\n * (mockup artboards, static previews). Same names as vars.css; where vars.css\n * follows the live theme, this file carries every theme and switches on\n * <html data-theme=\"light|high-contrast\">.\n *\n * Inside the component library and the apps, never use this: go through\n * css.create() and the token imports, or vars.css from plain CSS.\n */\n:root {\n color-scheme: dark;\n /* colors */\n --duro-color-accent: #6aaffc;\n --duro-color-accent-contrast: #000000;\n --duro-color-accent-hover: #93c5fd;\n --duro-color-bg: #0f0f0f;\n --duro-color-bg-card: #1a1a1a;\n --duro-color-bg-card-hover: #242424;\n --duro-color-border: #333333;\n --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n --duro-color-contrast-surface: #f5f5f5;\n --duro-color-error: #f87171;\n --duro-color-error-bg: rgba(248, 113, 113, 0.1);\n --duro-color-error-border: rgba(248, 113, 113, 0.3);\n --duro-color-error-contrast: #000000;\n --duro-color-error-hover: #fca5a5;\n --duro-color-error-text: #fca5a5;\n --duro-color-fixed-light: #ffffff;\n --duro-color-highlight: #c084fc;\n --duro-color-highlight-bg: rgba(192, 132, 252, 0.1);\n --duro-color-highlight-border: rgba(192, 132, 252, 0.3);\n --duro-color-highlight-text: #d8b4fe;\n --duro-color-info: #6aaffc;\n --duro-color-info-bg: rgba(106, 175, 252, 0.1);\n --duro-color-info-border: rgba(106, 175, 252, 0.3);\n --duro-color-info-text: #93c5fd;\n --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n --duro-color-on-contrast-surface: #1a1a1a;\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-success: #22c55e;\n --duro-color-success-bg: rgba(34, 197, 94, 0.1);\n --duro-color-success-border: rgba(34, 197, 94, 0.3);\n --duro-color-success-text: #86efac;\n --duro-color-text: #e5e5e5;\n --duro-color-text-muted: #b0b0b0;\n --duro-color-warning: #fbbf24;\n --duro-color-warning-bg: rgba(251, 191, 36, 0.1);\n --duro-color-warning-border: rgba(251, 191, 36, 0.3);\n --duro-color-warning-text: #fde68a;\n /* shadows */\n --duro-shadow-drop-over: inset 0 0 0 2px #6aaffc;\n --duro-shadow-drop-ready: inset 0 0 0 1px #333333;\n --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);\n --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);\n --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);\n /* spacing */\n --duro-spacing-lg: 24px;\n --duro-spacing-md: 16px;\n --duro-spacing-ms: 12px;\n --duro-spacing-sm: 8px;\n --duro-spacing-xl: 32px;\n --duro-spacing-xs: 4px;\n --duro-spacing-xxl: 48px;\n --duro-spacing-xxxl: 64px;\n /* microSpacing */\n --duro-micro-spacing-px1: 1px;\n --duro-micro-spacing-px2: 2px;\n --duro-micro-spacing-px3: 3px;\n --duro-micro-spacing-px5: 5px;\n --duro-micro-spacing-px6: 6px;\n /* radii */\n --duro-radius-full: 9999px;\n --duro-radius-lg: 16px;\n --duro-radius-md: 12px;\n --duro-radius-px6: 6px;\n --duro-radius-sm: 8px;\n --duro-radius-xs: 4px;\n /* sizes */\n --duro-size-aside-w: 320px;\n --duro-size-bar-h: 4px;\n --duro-size-canvas-min-h: 480px;\n --duro-size-check-mark-h: 9px;\n --duro-size-check-mark-w: 5px;\n --duro-size-chip: 24px;\n --duro-size-color-area-h: 150px;\n --duro-size-color-picker-w: 196px;\n --duro-size-color-preview-h: 22px;\n --duro-size-color-swatch: 20px;\n --duro-size-color-track-h: 12px;\n --duro-size-control-lg: 40px;\n --duro-size-control-md: 39px;\n --duro-size-control-sm: 28px;\n --duro-size-day-header-h: 46px;\n --duro-size-device-bar-w: 96px;\n --duro-size-dialog-lg: 680px;\n --duro-size-dialog-md: 520px;\n --duro-size-dialog-sm: 400px;\n --duro-size-divider: 1px;\n --duro-size-drop-zone-min-h: 128px;\n --duro-size-edge-fade: 32px;\n --duro-size-editor-min-h: 160px;\n --duro-size-embed-w: 550px;\n --duro-size-field-min-w: 160px;\n --duro-size-field-min-w-sm: 80px;\n --duro-size-glyph-md: 16px;\n --duro-size-glyph-sm: 12px;\n --duro-size-glyph-xs: 10px;\n --duro-size-grid-col-md: 280px;\n --duro-size-grid-col-sm: 240px;\n --duro-size-grid-col-xs: 200px;\n --duro-size-handle: 16px;\n --duro-size-icon-button: 32px;\n --duro-size-icon-button-sm: 28px;\n --duro-size-icon-lg: 24px;\n --duro-size-icon-md: 18px;\n --duro-size-icon-sm: 16px;\n --duro-size-icon-xl: 36px;\n --duro-size-icon-xxl: 48px;\n --duro-size-indicator: 18px;\n --duro-size-indicator-dot: 8px;\n --duro-size-label-min-w: 120px;\n --duro-size-list-max-h: 280px;\n --duro-size-list-max-h-sm: 200px;\n --duro-size-meter-h: 6px;\n --duro-size-nav-marker-h: 18px;\n --duro-size-nav-marker-w: 3px;\n --duro-size-page-lg: 1200px;\n --duro-size-page-md: 800px;\n --duro-size-page-sm: 600px;\n --duro-size-page-xl: 1440px;\n --duro-size-page-xs: 480px;\n --duro-size-palette-min-w: 96px;\n --duro-size-panel-lg: 640px;\n --duro-size-panel-md: 480px;\n --duro-size-panel-sm: 360px;\n --duro-size-placeholder-min-h: 80px;\n --duro-size-popover-w: 320px;\n --duro-size-popover-w-sm: 240px;\n --duro-size-popup-max-w: 280px;\n --duro-size-popup-min-w: 160px;\n --duro-size-preview-max-h: 320px;\n --duro-size-readout-w: 40px;\n --duro-size-scrollbar: 8px;\n --duro-size-sidebar-w: 240px;\n --duro-size-skeleton-chip-w: 96px;\n --duro-size-slider-w: 96px;\n --duro-size-spinner-lg: 40px;\n --duro-size-spinner-md: 24px;\n --duro-size-spinner-sm: 16px;\n --duro-size-swatch-h: 34px;\n --duro-size-swatch-w: 44px;\n --duro-size-switch-thumb: 16px;\n --duro-size-switch-track-h: 20px;\n --duro-size-switch-track-w: 36px;\n --duro-size-tab-indicator: 2px;\n --duro-size-time-gutter-w: 64px;\n --duro-size-toast-max-w: 440px;\n --duro-size-toolbar-h: 36px;\n --duro-size-touch-target: 44px;\n /* borders */\n --duro-border-accent: 3px;\n --duro-border-focus-offset: 2px;\n --duro-border-focus-offset-sm: 1px;\n --duro-border-focus-ring: 2px;\n --duro-border-hairline: 1px;\n --duro-border-strong: 2px;\n /* layers */\n --duro-layer-floating: 50;\n --duro-layer-modal: 1001;\n --duro-layer-overlay: 1000;\n --duro-layer-popover: 1040;\n --duro-layer-popup: 1050;\n --duro-layer-popup-backdrop: 1049;\n --duro-layer-portal: 1100;\n --duro-layer-raised: 1;\n --duro-layer-toast: 1060;\n /* effects */\n --duro-effect-overlay-blur: blur(2px);\n /* layoutSpacing */\n --duro-layout-spacing-container-lg: 32px;\n --duro-layout-spacing-container-md: 24px;\n --duro-layout-spacing-container-sm: 16px;\n --duro-layout-spacing-inline-lg: 24px;\n --duro-layout-spacing-inline-md: 16px;\n --duro-layout-spacing-inline-sm: 8px;\n --duro-layout-spacing-inline-xs: 4px;\n --duro-layout-spacing-stack-lg: 24px;\n --duro-layout-spacing-stack-md: 16px;\n --duro-layout-spacing-stack-sm: 8px;\n --duro-layout-spacing-stack-xl: 48px;\n --duro-layout-spacing-stack-xs: 4px;\n /* typography */\n --duro-typography-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n --duro-typography-font-family-mono: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace;\n --duro-typography-font-size-heading: 1.5rem;\n --duro-typography-font-size-lg: 1.125rem;\n --duro-typography-font-size-md: 1rem;\n --duro-typography-font-size-sm: 0.875rem;\n --duro-typography-font-size-xl: 1.25rem;\n --duro-typography-font-size-xs: 0.75rem;\n --duro-typography-font-weight-bold: 700;\n --duro-typography-font-weight-medium: 500;\n --duro-typography-font-weight-normal: 400;\n --duro-typography-font-weight-semibold: 600;\n --duro-typography-line-height: 1.5;\n /* typeScale */\n --duro-type-scale-display-lg: clamp(3.5rem, 2rem + 3.5vw, 4.5rem);\n --duro-type-scale-display-md: clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem);\n --duro-type-scale-display-sm: clamp(2.25rem, 1.5rem + 2vw, 3rem);\n --duro-type-scale-font-size1: 0.75rem;\n --duro-type-scale-font-size2: 0.8125rem;\n --duro-type-scale-font-size3: 0.875rem;\n --duro-type-scale-font-size4: 1rem;\n --duro-type-scale-font-size5: 1.125rem;\n --duro-type-scale-font-size6: 1.25rem;\n --duro-type-scale-font-size7: 1.5rem;\n --duro-type-scale-font-size8: 1.875rem;\n --duro-type-scale-font-size9: 2.25rem;\n --duro-type-scale-letter-spacing-normal: 0;\n --duro-type-scale-letter-spacing-tight: -0.02em;\n --duro-type-scale-letter-spacing-wide: 0.04em;\n --duro-type-scale-line-height1: 1rem;\n --duro-type-scale-line-height2: 1.25rem;\n --duro-type-scale-line-height3: 1.25rem;\n --duro-type-scale-line-height4: 1.5rem;\n --duro-type-scale-line-height5: 1.5rem;\n --duro-type-scale-line-height6: 1.75rem;\n --duro-type-scale-line-height7: 2rem;\n --duro-type-scale-line-height8: 2.25rem;\n --duro-type-scale-line-height9: 2.75rem;\n /* duration */\n --duro-duration-base: 200ms;\n --duro-duration-brisk: 160ms;\n --duro-duration-fast: 150ms;\n --duro-duration-instant: 0ms;\n --duro-duration-minimal: 1ms;\n --duro-duration-quick: 120ms;\n --duro-duration-slow: 280ms;\n /* easing */\n --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);\n --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);\n --duro-easing-linear: linear;\n --duro-easing-standard: ease;\n /* breakpoints */\n --duro-breakpoint-lg: 1024px;\n --duro-breakpoint-md: 768px;\n --duro-breakpoint-sm: 640px;\n --duro-breakpoint-xl: 1280px;\n --duro-breakpoint-xs: 480px;\n}\n\n:root[data-theme=\"light\"] {\n color-scheme: light;\n /* colors */\n --duro-color-accent: #1e40af;\n --duro-color-accent-contrast: #ffffff;\n --duro-color-accent-hover: #1a3799;\n --duro-color-bg: #ffffff;\n --duro-color-bg-card: #f5f5f5;\n --duro-color-bg-card-hover: #ebebeb;\n --duro-color-border: #d4d4d4;\n --duro-color-contrast-border: rgba(255, 255, 255, 0.33);\n --duro-color-contrast-surface: #1a1a1a;\n --duro-color-error: #991b1b;\n --duro-color-error-bg: rgba(153, 27, 27, 0.08);\n --duro-color-error-border: rgba(153, 27, 27, 0.3);\n --duro-color-error-contrast: #ffffff;\n --duro-color-error-hover: #7f1d1d;\n --duro-color-error-text: #7f1d1d;\n --duro-color-fixed-light: #ffffff;\n --duro-color-highlight: #6b21a8;\n --duro-color-highlight-bg: rgba(107, 33, 168, 0.08);\n --duro-color-highlight-border: rgba(107, 33, 168, 0.3);\n --duro-color-highlight-text: #581c87;\n --duro-color-info: #1e40af;\n --duro-color-info-bg: rgba(30, 64, 175, 0.08);\n --duro-color-info-border: rgba(30, 64, 175, 0.3);\n --duro-color-info-text: #1e40af;\n --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n --duro-color-on-contrast-surface: #e5e5e5;\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-success: #166534;\n --duro-color-success-bg: rgba(22, 101, 52, 0.08);\n --duro-color-success-border: rgba(22, 101, 52, 0.3);\n --duro-color-success-text: #14532d;\n --duro-color-text: #1a1a1a;\n --duro-color-text-muted: #4a4a4a;\n --duro-color-warning: #92400e;\n --duro-color-warning-bg: rgba(146, 64, 14, 0.08);\n --duro-color-warning-border: rgba(146, 64, 14, 0.3);\n --duro-color-warning-text: #78350f;\n /* shadows */\n --duro-shadow-drop-over: inset 0 0 0 2px #1e40af;\n --duro-shadow-drop-ready: inset 0 0 0 1px #d4d4d4;\n --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);\n --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);\n --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n:root[data-theme=\"high-contrast\"] {\n color-scheme: dark;\n /* colors */\n --duro-color-accent: #60a5fa;\n --duro-color-accent-contrast: #000000;\n --duro-color-accent-hover: #93c5fd;\n --duro-color-bg: #000000;\n --duro-color-bg-card: #111111;\n --duro-color-bg-card-hover: #1a1a1a;\n --duro-color-border: #555555;\n --duro-color-contrast-border: rgba(0, 0, 0, 0.42);\n --duro-color-contrast-surface: #ffffff;\n --duro-color-error: #f87171;\n --duro-color-error-bg: rgba(248, 113, 113, 0.15);\n --duro-color-error-border: rgba(248, 113, 113, 0.5);\n --duro-color-error-contrast: #000000;\n --duro-color-error-hover: #fca5a5;\n --duro-color-error-text: #fca5a5;\n --duro-color-fixed-light: #ffffff;\n --duro-color-highlight: #d8b4fe;\n --duro-color-highlight-bg: rgba(216, 180, 254, 0.15);\n --duro-color-highlight-border: rgba(216, 180, 254, 0.5);\n --duro-color-highlight-text: #e9d5ff;\n --duro-color-info: #60a5fa;\n --duro-color-info-bg: rgba(96, 165, 250, 0.15);\n --duro-color-info-border: rgba(96, 165, 250, 0.5);\n --duro-color-info-text: #bfdbfe;\n --duro-color-inverse-border: rgba(0, 0, 0, 0.55);\n --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);\n --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);\n --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);\n --duro-color-on-contrast-surface: #000000;\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-success: #4ade80;\n --duro-color-success-bg: rgba(74, 222, 128, 0.15);\n --duro-color-success-border: rgba(74, 222, 128, 0.5);\n --duro-color-success-text: #86efac;\n --duro-color-text: #ffffff;\n --duro-color-text-muted: #b0b0b0;\n --duro-color-warning: #fcd34d;\n --duro-color-warning-bg: rgba(252, 211, 77, 0.15);\n --duro-color-warning-border: rgba(252, 211, 77, 0.5);\n --duro-color-warning-text: #fef08a;\n /* shadows */\n --duro-shadow-drop-over: inset 0 0 0 2px #60a5fa;\n --duro-shadow-drop-ready: inset 0 0 0 1px #555555;\n --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);\n --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);\n --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);\n}\n"
|
|
8500
8711
|
},
|
|
8501
8712
|
"unions": {
|
|
8502
8713
|
"AlertVariant": [
|
|
@@ -8514,7 +8725,8 @@
|
|
|
8514
8725
|
"success",
|
|
8515
8726
|
"warning",
|
|
8516
8727
|
"error",
|
|
8517
|
-
"info"
|
|
8728
|
+
"info",
|
|
8729
|
+
"highlight"
|
|
8518
8730
|
],
|
|
8519
8731
|
"Breakpoint": [
|
|
8520
8732
|
"xs",
|