@duro-app/cli 5.13.0 → 5.15.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 +296 -20
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@duro-app/cli",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.15.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.15.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/
|
|
65
|
-
"@duro-app/
|
|
63
|
+
"@duro-app/eslint-plugin": "^5.15.0",
|
|
64
|
+
"@duro-app/tokens": "^5.15.0",
|
|
65
|
+
"@duro-app/ui": "^5.15.0"
|
|
66
66
|
},
|
|
67
67
|
"scripts": {
|
|
68
68
|
"registry": "node scripts/build-registry.mjs",
|
package/registry.json
CHANGED
|
@@ -1341,7 +1341,7 @@
|
|
|
1341
1341
|
"ColorModeProvider"
|
|
1342
1342
|
]
|
|
1343
1343
|
},
|
|
1344
|
-
"description": "Color-mode controller + toggle. ColorModeProvider owns the preference (system/light/dark/high-contrast), resolves \"system\" against the OS scheme, persists it to localStorage, and applies the resolved theme via ThemeProvider. ColorModeToggle is an icon button that cycles the preference; useColorMode() reads it.",
|
|
1344
|
+
"description": "Color-mode controller + toggle. ColorModeProvider owns the preference (system/light/dark/high-contrast), resolves \"system\" against the OS scheme, persists it to localStorage, and applies the resolved theme via ThemeProvider. ColorModeToggle is an icon button that cycles the preference; useColorMode() reads it. On React Native \"system\" follows the OS appearance (useColorScheme) and nothing is stored: persist the preference yourself through preference and onPreferenceChange.",
|
|
1345
1345
|
"example": "// At the app root — replaces a bare <ThemeProvider>:\n<ColorModeProvider defaultPreference=\"system\" modes={['light', 'dark']}>\n <App />\n</ColorModeProvider>\n\n// Anywhere inside (e.g. the top bar):\n<ColorModeToggle />\n\n// Or read the resolved theme:\nconst {theme, preference, setPreference} = useColorMode()",
|
|
1346
1346
|
"relatedTo": [
|
|
1347
1347
|
{
|
|
@@ -1366,7 +1366,7 @@
|
|
|
1366
1366
|
]
|
|
1367
1367
|
},
|
|
1368
1368
|
"name": "ColorModeProvider",
|
|
1369
|
-
"native":
|
|
1369
|
+
"native": true,
|
|
1370
1370
|
"props": [
|
|
1371
1371
|
{
|
|
1372
1372
|
"name": "children",
|
|
@@ -1401,7 +1401,7 @@
|
|
|
1401
1401
|
},
|
|
1402
1402
|
{
|
|
1403
1403
|
"default": "'duro-color-mode'",
|
|
1404
|
-
"description": "localStorage key for persistence; `null` disables it. Default `'duro-color-mode'`.",
|
|
1404
|
+
"description": "localStorage key for persistence; `null` disables it. Default `'duro-color-mode'`. Native has no localStorage: persist through `preference` and `onPreferenceChange`.",
|
|
1405
1405
|
"name": "storageKey",
|
|
1406
1406
|
"required": false,
|
|
1407
1407
|
"type": "string | null"
|
|
@@ -1429,7 +1429,7 @@
|
|
|
1429
1429
|
"ColorModeProvider"
|
|
1430
1430
|
]
|
|
1431
1431
|
},
|
|
1432
|
-
"description": "Color-mode controller + toggle. ColorModeProvider owns the preference (system/light/dark/high-contrast), resolves \"system\" against the OS scheme, persists it to localStorage, and applies the resolved theme via ThemeProvider. ColorModeToggle is an icon button that cycles the preference; useColorMode() reads it.",
|
|
1432
|
+
"description": "Color-mode controller + toggle. ColorModeProvider owns the preference (system/light/dark/high-contrast), resolves \"system\" against the OS scheme, persists it to localStorage, and applies the resolved theme via ThemeProvider. ColorModeToggle is an icon button that cycles the preference; useColorMode() reads it. On React Native \"system\" follows the OS appearance (useColorScheme) and nothing is stored: persist the preference yourself through preference and onPreferenceChange.",
|
|
1433
1433
|
"example": "// At the app root — replaces a bare <ThemeProvider>:\n<ColorModeProvider defaultPreference=\"system\" modes={['light', 'dark']}>\n <App />\n</ColorModeProvider>\n\n// Anywhere inside (e.g. the top bar):\n<ColorModeToggle />\n\n// Or read the resolved theme:\nconst {theme, preference, setPreference} = useColorMode()",
|
|
1434
1434
|
"relatedTo": [
|
|
1435
1435
|
{
|
|
@@ -1454,7 +1454,7 @@
|
|
|
1454
1454
|
]
|
|
1455
1455
|
},
|
|
1456
1456
|
"name": "ColorModeToggle",
|
|
1457
|
-
"native":
|
|
1457
|
+
"native": true,
|
|
1458
1458
|
"props": [
|
|
1459
1459
|
{
|
|
1460
1460
|
"default": "'md'",
|
|
@@ -1494,7 +1494,7 @@
|
|
|
1494
1494
|
"Item"
|
|
1495
1495
|
]
|
|
1496
1496
|
},
|
|
1497
|
-
"description": "Searchable dropdown for selecting a value from a filterable list. Combines a text input with a popup listbox. Compound component — Root is required.",
|
|
1497
|
+
"description": "Searchable dropdown for selecting a value from a filterable list. Combines a text input with a popup listbox. Compound component — Root is required. Combobox.Popup takes label (the list's accessible name). On React Native the field opens a bottom sheet at its large detent, above the keyboard, titled by label with a Cancel text button (cancelLabel): a search field is pinned under the header and focused, the list below filters as you type, Combobox.Empty shows when nothing matches, and a press picks an option and closes the sheet. The sheet's search text starts empty each time; Combobox.Trigger renders nothing on native.",
|
|
1498
1498
|
"example": "<Combobox.Root name=\"country\" defaultValue=\"us\" initialLabels={{us: 'United States'}}>\n <Combobox.Input placeholder=\"Search countries…\" />\n <Combobox.Popup>\n <Combobox.Item value=\"us\">United States</Combobox.Item>\n <Combobox.Item value=\"gb\">United Kingdom</Combobox.Item>\n <Combobox.Item value=\"fr\">France</Combobox.Item>\n <Combobox.Item value=\"de\">Germany</Combobox.Item>\n <Combobox.Empty>No countries found</Combobox.Empty>\n </Combobox.Popup>\n</Combobox.Root>",
|
|
1499
1499
|
"relatedTo": [
|
|
1500
1500
|
{
|
|
@@ -1530,7 +1530,7 @@
|
|
|
1530
1530
|
]
|
|
1531
1531
|
},
|
|
1532
1532
|
"name": "Combobox",
|
|
1533
|
-
"native":
|
|
1533
|
+
"native": true,
|
|
1534
1534
|
"parts": {
|
|
1535
1535
|
"Empty": {
|
|
1536
1536
|
"name": "Empty",
|
|
@@ -1593,6 +1593,18 @@
|
|
|
1593
1593
|
"name": "children",
|
|
1594
1594
|
"required": true,
|
|
1595
1595
|
"type": "ReactNode"
|
|
1596
|
+
},
|
|
1597
|
+
{
|
|
1598
|
+
"description": "The list's accessible name; on native also the sheet's title.",
|
|
1599
|
+
"name": "label",
|
|
1600
|
+
"required": false,
|
|
1601
|
+
"type": "string"
|
|
1602
|
+
},
|
|
1603
|
+
{
|
|
1604
|
+
"description": "Native only: the sheet header's text button that closes it unchanged. Default: 'Cancel'",
|
|
1605
|
+
"name": "cancelLabel",
|
|
1606
|
+
"required": false,
|
|
1607
|
+
"type": "string"
|
|
1596
1608
|
}
|
|
1597
1609
|
],
|
|
1598
1610
|
"sourcePath": "packages/ui/src/components/Combobox/Combobox.tsx"
|
|
@@ -2503,7 +2515,7 @@
|
|
|
2503
2515
|
"Portal"
|
|
2504
2516
|
]
|
|
2505
2517
|
},
|
|
2506
|
-
"description": "Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Swipe yields to an inner Duro ScrollArea: a drag there scrolls it, and dismisses only toward the edge from the scroll start (a native overflow:auto child is not covered — use ScrollArea). A bottom drawer with snapPoints (medium and large) is a phone sheet: it rests at its detents, a grabber steps through them on a tap, a drag moves between them and dismisses below the lowest; its Body is the scroll the drag defers to. Header titleAlign=\"center\" centres the title with a text close at the end. Use for secondary workflows, settings panels, or mobile-friendly detail views.",
|
|
2518
|
+
"description": "Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Swipe yields to an inner Duro ScrollArea: a drag there scrolls it, and dismisses only toward the edge from the scroll start (a native overflow:auto child is not covered — use ScrollArea). A bottom drawer with snapPoints (medium and large) is a phone sheet: it rests at its detents, a grabber steps through them on a tap, a drag moves between them and dismisses below the lowest; its Body is the scroll the drag defers to. Header titleAlign=\"center\" centres the title with a text close at the end. Body flush drops its side padding, so rows run to the panel's edges (a picker's list); on React Native a bottom drawer rides above the on-screen keyboard. Use for secondary workflows, settings panels, or mobile-friendly detail views.",
|
|
2507
2519
|
"example": "<Drawer.Root anchor=\"right\" open={open} onOpenChange={setOpen}>\n <Drawer.Trigger>\n <Button>Open drawer</Button>\n </Drawer.Trigger>\n <Drawer.Portal size=\"md\">\n <Drawer.Header>\n <Drawer.Title>Settings</Drawer.Title>\n <Drawer.Close />\n </Drawer.Header>\n <Drawer.Body>\n <Stack gap=\"md\">\n <Text>Drawer content goes here.</Text>\n </Stack>\n </Drawer.Body>\n <Drawer.Footer>\n <Button variant=\"secondary\" onClick={() => setOpen(false)}>Done</Button>\n </Drawer.Footer>\n </Drawer.Portal>\n</Drawer.Root>",
|
|
2508
2520
|
"relatedTo": [
|
|
2509
2521
|
{
|
|
@@ -2546,6 +2558,13 @@
|
|
|
2546
2558
|
"name": "children",
|
|
2547
2559
|
"required": true,
|
|
2548
2560
|
"type": "ReactNode"
|
|
2561
|
+
},
|
|
2562
|
+
{
|
|
2563
|
+
"default": "false",
|
|
2564
|
+
"description": "No side padding: rows that run to the panel's edges, as a picker's list.",
|
|
2565
|
+
"name": "flush",
|
|
2566
|
+
"required": false,
|
|
2567
|
+
"type": "boolean"
|
|
2549
2568
|
}
|
|
2550
2569
|
],
|
|
2551
2570
|
"sourcePath": "packages/ui/src/components/Drawer/Drawer.tsx"
|
|
@@ -3112,7 +3131,7 @@
|
|
|
3112
3131
|
"importPath": "@duro-app/ui/form",
|
|
3113
3132
|
"kind": "component",
|
|
3114
3133
|
"meta": {
|
|
3115
|
-
"description": "Form wrapper with Effect Schema validation and react-hook-form integration. Provides FormContext to child Field components.",
|
|
3134
|
+
"description": "Form wrapper with Effect Schema validation and react-hook-form integration. Provides FormContext to child Field components. On React Native, @duro-app/ui/form resolves to a native Form (a view, not a <form>): a Button type=\"submit\" inside it runs the validated submit, since there is no DOM submit event.",
|
|
3116
3135
|
"example": "import {Schema} from 'effect'\n\nconst MySchema = Schema.Struct({\n email: Schema.String.pipe(\n Schema.pattern(/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/, {message: () => 'Invalid email'}),\n ),\n})\n\n<Form schema={MySchema} defaultValues={{email: ''}} onSubmit={handleSubmit}>\n {({formState}) => (\n <Fieldset.Root gap=\"md\">\n <Field.Root name=\"email\">\n <Field.Label>Email</Field.Label>\n <Input type=\"email\" />\n <Field.Error />\n </Field.Root>\n <Button type=\"submit\" disabled={!formState.isValid}>Submit</Button>\n </Fieldset.Root>\n )}\n</Form>",
|
|
3117
3136
|
"relatedTo": [
|
|
3118
3137
|
{
|
|
@@ -4115,7 +4134,7 @@
|
|
|
4115
4134
|
"Option"
|
|
4116
4135
|
]
|
|
4117
4136
|
},
|
|
4118
|
-
"description": "Popup list of options for an input that keeps focus — an editor typeahead (mentions, slash commands) or a custom combobox. The anchor owns focus and the keyboard: it sets the controlled highlightedId and spreads Listbox.getAnchorProps() for aria-controls / aria-expanded / aria-activedescendant. A press on an option never takes focus from the anchor. Portalled and placed against anchor() (an input rect or a caret rect), capped at a size-token maxHeight (default listMaxH).",
|
|
4137
|
+
"description": "Popup list of options for an input that keeps focus — an editor typeahead (mentions, slash commands) or a custom combobox. The anchor owns focus and the keyboard: it sets the controlled highlightedId and spreads Listbox.getAnchorProps() for aria-controls / aria-expanded / aria-activedescendant. A press on an option never takes focus from the anchor. Portalled and placed against anchor() (an input rect or a caret rect), capped at a size-token maxHeight (default listMaxH). On React Native it is a plain list laid out where it is rendered (inside a Select or Combobox sheet): nothing is anchored or highlighted, the selected option is filled with a trailing check, and a press calls onSelect.",
|
|
4119
4138
|
"example": "const id = useId()\nconst [highlightedId, setHighlightedId] = useState<string | null>(null)\nconst optionId = (value: string) => `${id}-${value}`\n// On the editor root: Object.entries(Listbox.getAnchorProps({id, open, highlightedId}))\n<Listbox.Root\n id={id}\n open={open}\n anchor={() => caretRect()}\n highlightedId={highlightedId}\n onHighlight={setHighlightedId}\n onSelect={(value) => insertMention(value)}\n getOptionId={optionId}\n aria-label=\"Mentions\"\n>\n {people.map((p) => (\n <Listbox.Option key={p.id} value={p.id}>{p.name}</Listbox.Option>\n ))}\n {people.length === 0 && <Listbox.Empty>No match</Listbox.Empty>}\n</Listbox.Root>",
|
|
4120
4139
|
"relatedTo": [
|
|
4121
4140
|
{
|
|
@@ -4140,7 +4159,7 @@
|
|
|
4140
4159
|
]
|
|
4141
4160
|
},
|
|
4142
4161
|
"name": "Listbox",
|
|
4143
|
-
"native":
|
|
4162
|
+
"native": true,
|
|
4144
4163
|
"parts": {
|
|
4145
4164
|
"Empty": {
|
|
4146
4165
|
"name": "Empty",
|
|
@@ -5225,6 +5244,39 @@
|
|
|
5225
5244
|
],
|
|
5226
5245
|
"sourcePath": "packages/ui/src/components/Prose/Prose.tsx"
|
|
5227
5246
|
},
|
|
5247
|
+
"QrCode": {
|
|
5248
|
+
"importPath": "@duro-app/ui",
|
|
5249
|
+
"kind": "component",
|
|
5250
|
+
"meta": {
|
|
5251
|
+
"description": "A QR code for another device to scan: dark modules on a fixed light square, as wide as its container, announced by its label as one image. The same on web and native.",
|
|
5252
|
+
"example": "<Stack gap=\"sm\">\n <QrCode value=\"https://example.com/pair?key=abc\" label=\"Scan to sign in on this device\" />\n <Text>Scan with a signed-in phone</Text>\n</Stack>",
|
|
5253
|
+
"whenNotToUse": [
|
|
5254
|
+
"Decoration or branding: a QR code is a machine-readable payload, not an illustration",
|
|
5255
|
+
"The only way to reach something: also give the text or a link beside it"
|
|
5256
|
+
],
|
|
5257
|
+
"whenToUse": [
|
|
5258
|
+
"Pairing or sign-in by scanning from a second device",
|
|
5259
|
+
"Handing a URL or a short secret to a phone camera"
|
|
5260
|
+
]
|
|
5261
|
+
},
|
|
5262
|
+
"name": "QrCode",
|
|
5263
|
+
"native": true,
|
|
5264
|
+
"props": [
|
|
5265
|
+
{
|
|
5266
|
+
"description": "The text the code carries: a URL, a pairing link.",
|
|
5267
|
+
"name": "value",
|
|
5268
|
+
"required": true,
|
|
5269
|
+
"type": "string"
|
|
5270
|
+
},
|
|
5271
|
+
{
|
|
5272
|
+
"description": "What the code is for, read by assistive tech in place of the image.",
|
|
5273
|
+
"name": "label",
|
|
5274
|
+
"required": true,
|
|
5275
|
+
"type": "string"
|
|
5276
|
+
}
|
|
5277
|
+
],
|
|
5278
|
+
"sourcePath": "packages/ui/src/components/QrCode/QrCode.tsx"
|
|
5279
|
+
},
|
|
5228
5280
|
"RadioGroup": {
|
|
5229
5281
|
"importPath": "@duro-app/ui",
|
|
5230
5282
|
"kind": "compound",
|
|
@@ -5357,7 +5409,7 @@
|
|
|
5357
5409
|
"Thumb"
|
|
5358
5410
|
]
|
|
5359
5411
|
},
|
|
5360
|
-
"description": "Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start.",
|
|
5412
|
+
"description": "Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start. On React Native the Viewport is an RN ScrollView with the platform scroll indicator, capped by the same maxHeight token key; Scrollbar and Thumb render nothing.",
|
|
5361
5413
|
"example": "<ScrollArea.Root>\n <ScrollArea.Viewport maxHeight=\"listMaxH\">\n <ScrollArea.Content>\n {/* Long content here */}\n </ScrollArea.Content>\n </ScrollArea.Viewport>\n <ScrollArea.Scrollbar orientation=\"vertical\">\n <ScrollArea.Thumb orientation=\"vertical\" />\n </ScrollArea.Scrollbar>\n</ScrollArea.Root>",
|
|
5362
5414
|
"whenNotToUse": [
|
|
5363
5415
|
"Simple page-level scrolling — browser scroll is fine",
|
|
@@ -5369,7 +5421,7 @@
|
|
|
5369
5421
|
]
|
|
5370
5422
|
},
|
|
5371
5423
|
"name": "ScrollArea",
|
|
5372
|
-
"native":
|
|
5424
|
+
"native": true,
|
|
5373
5425
|
"parts": {
|
|
5374
5426
|
"Content": {
|
|
5375
5427
|
"name": "Content",
|
|
@@ -5472,7 +5524,7 @@
|
|
|
5472
5524
|
"Item"
|
|
5473
5525
|
]
|
|
5474
5526
|
},
|
|
5475
|
-
"description": "Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it). Select.Trigger takes size=\"small\" to match small Toggles and Buttons in a toolbar.",
|
|
5527
|
+
"description": "Dropdown select for choosing one value from a list. Compound component — Root is required (throws without it). Select.Trigger takes size=\"small\" to match small Toggles and Buttons in a toolbar. Select.Popup takes label (the list's accessible name) and empty (shown in place of the list when it has no items). On React Native the trigger opens a bottom sheet (a Drawer at the medium and large detents) titled by label, with a Cancel text button (cancelLabel); the chosen option is filled with a trailing check, and a press picks an option and closes the sheet. Native has no arrow keys: each option is its own screen-reader stop.",
|
|
5476
5528
|
"example": "<Select.Root name=\"role\" defaultValue=\"viewer\">\n <Select.Trigger>\n <Select.Value placeholder=\"Select role\" />\n <Select.Icon />\n </Select.Trigger>\n <Select.Popup>\n <Select.Item value=\"admin\">Admin</Select.Item>\n <Select.Item value=\"editor\">Editor</Select.Item>\n <Select.Item value=\"viewer\">Viewer</Select.Item>\n </Select.Popup>\n</Select.Root>",
|
|
5477
5529
|
"relatedTo": [
|
|
5478
5530
|
{
|
|
@@ -5502,7 +5554,7 @@
|
|
|
5502
5554
|
]
|
|
5503
5555
|
},
|
|
5504
5556
|
"name": "Select",
|
|
5505
|
-
"native":
|
|
5557
|
+
"native": true,
|
|
5506
5558
|
"parts": {
|
|
5507
5559
|
"Icon": {
|
|
5508
5560
|
"name": "Icon",
|
|
@@ -5549,6 +5601,24 @@
|
|
|
5549
5601
|
"name": "children",
|
|
5550
5602
|
"required": true,
|
|
5551
5603
|
"type": "ReactNode"
|
|
5604
|
+
},
|
|
5605
|
+
{
|
|
5606
|
+
"description": "The list's accessible name; on native also the sheet's title.",
|
|
5607
|
+
"name": "label",
|
|
5608
|
+
"required": false,
|
|
5609
|
+
"type": "string"
|
|
5610
|
+
},
|
|
5611
|
+
{
|
|
5612
|
+
"description": "Native only: the sheet header's text button that closes it unchanged. Default: 'Cancel'",
|
|
5613
|
+
"name": "cancelLabel",
|
|
5614
|
+
"required": false,
|
|
5615
|
+
"type": "string"
|
|
5616
|
+
},
|
|
5617
|
+
{
|
|
5618
|
+
"description": "Shown in place of the list when there are no items.",
|
|
5619
|
+
"name": "empty",
|
|
5620
|
+
"required": false,
|
|
5621
|
+
"type": "ReactNode"
|
|
5552
5622
|
}
|
|
5553
5623
|
],
|
|
5554
5624
|
"sourcePath": "packages/ui/src/components/Select/Select.tsx"
|
|
@@ -7496,7 +7566,7 @@
|
|
|
7496
7566
|
"importPath": "@duro-app/ui",
|
|
7497
7567
|
"kind": "provider",
|
|
7498
7568
|
"meta": {
|
|
7499
|
-
"description": "Theme context provider. Must wrap the entire app at the root level. Sets dark, light, or high-contrast theme for all child components via CSS custom properties.",
|
|
7569
|
+
"description": "Theme context provider. Must wrap the entire app at the root level. Sets dark, light, or high-contrast theme for all child components via CSS custom properties. overrides replaces colours by token key ({accent: \"#ff5a1f\"}) and updates in place, without a re-mount: a scoped rule on the web (values that are not a colour are dropped), a runtime theme on React Native, where useResolvedColors() follows too. Overrides replace a colour whatever the theme, so pass per-mode values when the mode can change. A nested provider on the same theme keeps the outer overrides and lays its own over them; on another theme it starts from that theme's colours.",
|
|
7500
7570
|
"example": "<ThemeProvider theme=\"dark\">\n <App />\n</ThemeProvider>",
|
|
7501
7571
|
"whenNotToUse": [
|
|
7502
7572
|
"Never omit — all Duro components require ThemeProvider"
|
|
@@ -7520,6 +7590,12 @@
|
|
|
7520
7590
|
"high-contrast"
|
|
7521
7591
|
]
|
|
7522
7592
|
},
|
|
7593
|
+
{
|
|
7594
|
+
"description": "Colours that replace the theme's own, by token key (`{accent: '#ff5a1f'}`). They update in place, without a re-mount. A nested provider on the same theme keeps these and lays its own over them.",
|
|
7595
|
+
"name": "overrides",
|
|
7596
|
+
"required": false,
|
|
7597
|
+
"type": "ColorOverrides"
|
|
7598
|
+
},
|
|
7523
7599
|
{
|
|
7524
7600
|
"name": "children",
|
|
7525
7601
|
"required": true,
|
|
@@ -8608,7 +8684,7 @@
|
|
|
8608
8684
|
"ColorModeProvider"
|
|
8609
8685
|
]
|
|
8610
8686
|
},
|
|
8611
|
-
"description": "Color-mode controller + toggle. ColorModeProvider owns the preference (system/light/dark/high-contrast), resolves \"system\" against the OS scheme, persists it to localStorage, and applies the resolved theme via ThemeProvider. ColorModeToggle is an icon button that cycles the preference; useColorMode() reads it.",
|
|
8687
|
+
"description": "Color-mode controller + toggle. ColorModeProvider owns the preference (system/light/dark/high-contrast), resolves \"system\" against the OS scheme, persists it to localStorage, and applies the resolved theme via ThemeProvider. ColorModeToggle is an icon button that cycles the preference; useColorMode() reads it. On React Native \"system\" follows the OS appearance (useColorScheme) and nothing is stored: persist the preference yourself through preference and onPreferenceChange.",
|
|
8612
8688
|
"example": "// At the app root — replaces a bare <ThemeProvider>:\n<ColorModeProvider defaultPreference=\"system\" modes={['light', 'dark']}>\n <App />\n</ColorModeProvider>\n\n// Anywhere inside (e.g. the top bar):\n<ColorModeToggle />\n\n// Or read the resolved theme:\nconst {theme, preference, setPreference} = useColorMode()",
|
|
8613
8689
|
"relatedTo": [
|
|
8614
8690
|
{
|
|
@@ -8633,7 +8709,7 @@
|
|
|
8633
8709
|
]
|
|
8634
8710
|
},
|
|
8635
8711
|
"name": "useColorMode",
|
|
8636
|
-
"native":
|
|
8712
|
+
"native": true,
|
|
8637
8713
|
"props": [],
|
|
8638
8714
|
"sourcePath": "packages/ui/src/components/ColorMode/ColorMode.tsx"
|
|
8639
8715
|
},
|
|
@@ -8766,7 +8842,7 @@
|
|
|
8766
8842
|
"importPath": "@duro-app/ui",
|
|
8767
8843
|
"kind": "hook",
|
|
8768
8844
|
"meta": {
|
|
8769
|
-
"description": "Theme context provider. Must wrap the entire app at the root level. Sets dark, light, or high-contrast theme for all child components via CSS custom properties.",
|
|
8845
|
+
"description": "Theme context provider. Must wrap the entire app at the root level. Sets dark, light, or high-contrast theme for all child components via CSS custom properties. overrides replaces colours by token key ({accent: \"#ff5a1f\"}) and updates in place, without a re-mount: a scoped rule on the web (values that are not a colour are dropped), a runtime theme on React Native, where useResolvedColors() follows too. Overrides replace a colour whatever the theme, so pass per-mode values when the mode can change. A nested provider on the same theme keeps the outer overrides and lays its own over them; on another theme it starts from that theme's colours.",
|
|
8770
8846
|
"example": "<ThemeProvider theme=\"dark\">\n <App />\n</ThemeProvider>",
|
|
8771
8847
|
"whenNotToUse": [
|
|
8772
8848
|
"Never omit — all Duro components require ThemeProvider"
|
|
@@ -9728,6 +9804,206 @@
|
|
|
9728
9804
|
"highContrast": "rgba(0, 0, 0, 0.42)",
|
|
9729
9805
|
"light": "rgba(255, 255, 255, 0.33)"
|
|
9730
9806
|
}
|
|
9807
|
+
},
|
|
9808
|
+
{
|
|
9809
|
+
"key": "bgInset",
|
|
9810
|
+
"values": {
|
|
9811
|
+
"dark": "#0a0a0a",
|
|
9812
|
+
"highContrast": "#0a0a0a",
|
|
9813
|
+
"light": "#f0f0f0"
|
|
9814
|
+
}
|
|
9815
|
+
},
|
|
9816
|
+
{
|
|
9817
|
+
"key": "bgElevated",
|
|
9818
|
+
"values": {
|
|
9819
|
+
"dark": "#242424",
|
|
9820
|
+
"highContrast": "#1a1a1a",
|
|
9821
|
+
"light": "#ffffff"
|
|
9822
|
+
}
|
|
9823
|
+
},
|
|
9824
|
+
{
|
|
9825
|
+
"key": "bgSelected",
|
|
9826
|
+
"values": {
|
|
9827
|
+
"dark": "rgba(106, 175, 252, 0.15)",
|
|
9828
|
+
"highContrast": "rgba(96, 165, 250, 0.25)",
|
|
9829
|
+
"light": "rgba(30, 64, 175, 0.12)"
|
|
9830
|
+
}
|
|
9831
|
+
},
|
|
9832
|
+
{
|
|
9833
|
+
"key": "pressOverlay",
|
|
9834
|
+
"values": {
|
|
9835
|
+
"dark": "rgba(255, 255, 255, 0.08)",
|
|
9836
|
+
"highContrast": "rgba(255, 255, 255, 0.15)",
|
|
9837
|
+
"light": "rgba(0, 0, 0, 0.08)"
|
|
9838
|
+
}
|
|
9839
|
+
},
|
|
9840
|
+
{
|
|
9841
|
+
"key": "ripple",
|
|
9842
|
+
"values": {
|
|
9843
|
+
"dark": "rgba(255, 255, 255, 0.12)",
|
|
9844
|
+
"highContrast": "rgba(255, 255, 255, 0.2)",
|
|
9845
|
+
"light": "rgba(0, 0, 0, 0.12)"
|
|
9846
|
+
}
|
|
9847
|
+
},
|
|
9848
|
+
{
|
|
9849
|
+
"key": "bgSectionTint",
|
|
9850
|
+
"values": {
|
|
9851
|
+
"dark": "rgba(255, 255, 255, 0.03)",
|
|
9852
|
+
"highContrast": "rgba(255, 255, 255, 0.06)",
|
|
9853
|
+
"light": "rgba(0, 0, 0, 0.03)"
|
|
9854
|
+
}
|
|
9855
|
+
},
|
|
9856
|
+
{
|
|
9857
|
+
"key": "borderSubtle",
|
|
9858
|
+
"values": {
|
|
9859
|
+
"dark": "#242424",
|
|
9860
|
+
"highContrast": "#333333",
|
|
9861
|
+
"light": "#ebebeb"
|
|
9862
|
+
}
|
|
9863
|
+
},
|
|
9864
|
+
{
|
|
9865
|
+
"key": "borderStrong",
|
|
9866
|
+
"values": {
|
|
9867
|
+
"dark": "#555555",
|
|
9868
|
+
"highContrast": "#888888",
|
|
9869
|
+
"light": "#a3a3a3"
|
|
9870
|
+
}
|
|
9871
|
+
},
|
|
9872
|
+
{
|
|
9873
|
+
"key": "surfaceHighlight",
|
|
9874
|
+
"values": {
|
|
9875
|
+
"dark": "rgba(255, 255, 255, 0.06)",
|
|
9876
|
+
"highContrast": "rgba(255, 255, 255, 0.15)",
|
|
9877
|
+
"light": "rgba(255, 255, 255, 0.7)"
|
|
9878
|
+
}
|
|
9879
|
+
},
|
|
9880
|
+
{
|
|
9881
|
+
"key": "textSubtle",
|
|
9882
|
+
"values": {
|
|
9883
|
+
"dark": "#8a8a8a",
|
|
9884
|
+
"highContrast": "#a3a3a3",
|
|
9885
|
+
"light": "#6b6b6b"
|
|
9886
|
+
}
|
|
9887
|
+
},
|
|
9888
|
+
{
|
|
9889
|
+
"key": "textDisabled",
|
|
9890
|
+
"values": {
|
|
9891
|
+
"dark": "#6b6b6b",
|
|
9892
|
+
"highContrast": "#808080",
|
|
9893
|
+
"light": "#a3a3a3"
|
|
9894
|
+
}
|
|
9895
|
+
},
|
|
9896
|
+
{
|
|
9897
|
+
"key": "neutral",
|
|
9898
|
+
"values": {
|
|
9899
|
+
"dark": "#a3a3a3",
|
|
9900
|
+
"highContrast": "#d4d4d4",
|
|
9901
|
+
"light": "#525252"
|
|
9902
|
+
}
|
|
9903
|
+
},
|
|
9904
|
+
{
|
|
9905
|
+
"key": "neutralBg",
|
|
9906
|
+
"values": {
|
|
9907
|
+
"dark": "rgba(163, 163, 163, 0.1)",
|
|
9908
|
+
"highContrast": "rgba(212, 212, 212, 0.15)",
|
|
9909
|
+
"light": "rgba(82, 82, 82, 0.08)"
|
|
9910
|
+
}
|
|
9911
|
+
},
|
|
9912
|
+
{
|
|
9913
|
+
"key": "neutralBorder",
|
|
9914
|
+
"values": {
|
|
9915
|
+
"dark": "rgba(163, 163, 163, 0.3)",
|
|
9916
|
+
"highContrast": "rgba(212, 212, 212, 0.5)",
|
|
9917
|
+
"light": "rgba(82, 82, 82, 0.3)"
|
|
9918
|
+
}
|
|
9919
|
+
},
|
|
9920
|
+
{
|
|
9921
|
+
"key": "neutralText",
|
|
9922
|
+
"values": {
|
|
9923
|
+
"dark": "#d4d4d4",
|
|
9924
|
+
"highContrast": "#e5e5e5",
|
|
9925
|
+
"light": "#404040"
|
|
9926
|
+
}
|
|
9927
|
+
},
|
|
9928
|
+
{
|
|
9929
|
+
"key": "active",
|
|
9930
|
+
"values": {
|
|
9931
|
+
"dark": "#6aaffc",
|
|
9932
|
+
"highContrast": "#60a5fa",
|
|
9933
|
+
"light": "#1e40af"
|
|
9934
|
+
}
|
|
9935
|
+
},
|
|
9936
|
+
{
|
|
9937
|
+
"key": "activeBg",
|
|
9938
|
+
"values": {
|
|
9939
|
+
"dark": "rgba(106, 175, 252, 0.1)",
|
|
9940
|
+
"highContrast": "rgba(96, 165, 250, 0.15)",
|
|
9941
|
+
"light": "rgba(30, 64, 175, 0.08)"
|
|
9942
|
+
}
|
|
9943
|
+
},
|
|
9944
|
+
{
|
|
9945
|
+
"key": "activeBorder",
|
|
9946
|
+
"values": {
|
|
9947
|
+
"dark": "rgba(106, 175, 252, 0.3)",
|
|
9948
|
+
"highContrast": "rgba(96, 165, 250, 0.5)",
|
|
9949
|
+
"light": "rgba(30, 64, 175, 0.3)"
|
|
9950
|
+
}
|
|
9951
|
+
},
|
|
9952
|
+
{
|
|
9953
|
+
"key": "activeText",
|
|
9954
|
+
"values": {
|
|
9955
|
+
"dark": "#93c5fd",
|
|
9956
|
+
"highContrast": "#bfdbfe",
|
|
9957
|
+
"light": "#1e40af"
|
|
9958
|
+
}
|
|
9959
|
+
},
|
|
9960
|
+
{
|
|
9961
|
+
"key": "accentDisabled",
|
|
9962
|
+
"values": {
|
|
9963
|
+
"dark": "rgba(106, 175, 252, 0.4)",
|
|
9964
|
+
"highContrast": "rgba(96, 165, 250, 0.5)",
|
|
9965
|
+
"light": "rgba(30, 64, 175, 0.4)"
|
|
9966
|
+
}
|
|
9967
|
+
},
|
|
9968
|
+
{
|
|
9969
|
+
"key": "segmentTrack",
|
|
9970
|
+
"values": {
|
|
9971
|
+
"dark": "rgba(255, 255, 255, 0.06)",
|
|
9972
|
+
"highContrast": "rgba(255, 255, 255, 0.12)",
|
|
9973
|
+
"light": "rgba(0, 0, 0, 0.06)"
|
|
9974
|
+
}
|
|
9975
|
+
},
|
|
9976
|
+
{
|
|
9977
|
+
"key": "segmentActive",
|
|
9978
|
+
"values": {
|
|
9979
|
+
"dark": "#333333",
|
|
9980
|
+
"highContrast": "#333333",
|
|
9981
|
+
"light": "#ffffff"
|
|
9982
|
+
}
|
|
9983
|
+
},
|
|
9984
|
+
{
|
|
9985
|
+
"key": "scrimSoft",
|
|
9986
|
+
"values": {
|
|
9987
|
+
"dark": "rgba(0, 0, 0, 0.2)",
|
|
9988
|
+
"highContrast": "rgba(0, 0, 0, 0.3)",
|
|
9989
|
+
"light": "rgba(0, 0, 0, 0.2)"
|
|
9990
|
+
}
|
|
9991
|
+
},
|
|
9992
|
+
{
|
|
9993
|
+
"key": "scrimStrong",
|
|
9994
|
+
"values": {
|
|
9995
|
+
"dark": "rgba(0, 0, 0, 0.6)",
|
|
9996
|
+
"highContrast": "rgba(0, 0, 0, 0.7)",
|
|
9997
|
+
"light": "rgba(0, 0, 0, 0.6)"
|
|
9998
|
+
}
|
|
9999
|
+
},
|
|
10000
|
+
{
|
|
10001
|
+
"key": "onScrimMuted",
|
|
10002
|
+
"values": {
|
|
10003
|
+
"dark": "rgba(255, 255, 255, 0.72)",
|
|
10004
|
+
"highContrast": "rgba(255, 255, 255, 0.72)",
|
|
10005
|
+
"light": "rgba(255, 255, 255, 0.72)"
|
|
10006
|
+
}
|
|
9731
10007
|
}
|
|
9732
10008
|
],
|
|
9733
10009
|
"exportName": "colors",
|
|
@@ -10528,7 +10804,7 @@
|
|
|
10528
10804
|
"importPath": "@duro-app/tokens/tokens/typography.css"
|
|
10529
10805
|
}
|
|
10530
10806
|
},
|
|
10531
|
-
"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-dark: #000000;\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-app-bar-h: 61px;\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-drag-thumb-h: 99px;\n --duro-size-drag-thumb-w: 132px;\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-clamp-max: 160px;\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-media-tile-min-w: 108px;\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-sheet-grabber-h: 4px;\n --duro-size-sheet-grabber-w: 40px;\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-thumb-sm: 40px;\n --duro-size-time-gutter-w: 64px;\n --duro-size-timeline-label-w: 180px;\n --duro-size-time-readout-w: 74px;\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-floating-raised: 60;\n --duro-layer-modal: 1001;\n --duro-layer-modal-raised: 1002;\n --duro-layer-overlay: 1000;\n --duro-layer-popover: 1040;\n --duro-layer-popover-raised: 1041;\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 --duro-effect-surface-blur: blur(6px);\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-dark: #000000;\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-dark: #000000;\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"
|
|
10807
|
+
"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-disabled: rgba(106, 175, 252, 0.4);\n --duro-color-accent-hover: #93c5fd;\n --duro-color-active: #6aaffc;\n --duro-color-active-bg: rgba(106, 175, 252, 0.1);\n --duro-color-active-border: rgba(106, 175, 252, 0.3);\n --duro-color-active-text: #93c5fd;\n --duro-color-bg: #0f0f0f;\n --duro-color-bg-card: #1a1a1a;\n --duro-color-bg-card-hover: #242424;\n --duro-color-bg-elevated: #242424;\n --duro-color-bg-inset: #0a0a0a;\n --duro-color-bg-section-tint: rgba(255, 255, 255, 0.03);\n --duro-color-bg-selected: rgba(106, 175, 252, 0.15);\n --duro-color-border: #333333;\n --duro-color-border-strong: #555555;\n --duro-color-border-subtle: #242424;\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-dark: #000000;\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-neutral: #a3a3a3;\n --duro-color-neutral-bg: rgba(163, 163, 163, 0.1);\n --duro-color-neutral-border: rgba(163, 163, 163, 0.3);\n --duro-color-neutral-text: #d4d4d4;\n --duro-color-on-contrast-surface: #1a1a1a;\n --duro-color-on-scrim-muted: rgba(255, 255, 255, 0.72);\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-press-overlay: rgba(255, 255, 255, 0.08);\n --duro-color-ripple: rgba(255, 255, 255, 0.12);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-scrim-soft: rgba(0, 0, 0, 0.2);\n --duro-color-scrim-strong: rgba(0, 0, 0, 0.6);\n --duro-color-segment-active: #333333;\n --duro-color-segment-track: rgba(255, 255, 255, 0.06);\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-surface-highlight: rgba(255, 255, 255, 0.06);\n --duro-color-text: #e5e5e5;\n --duro-color-text-disabled: #6b6b6b;\n --duro-color-text-muted: #b0b0b0;\n --duro-color-text-subtle: #8a8a8a;\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-app-bar-h: 61px;\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-drag-thumb-h: 99px;\n --duro-size-drag-thumb-w: 132px;\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-clamp-max: 160px;\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-media-tile-min-w: 108px;\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-sheet-grabber-h: 4px;\n --duro-size-sheet-grabber-w: 40px;\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-thumb-sm: 40px;\n --duro-size-time-gutter-w: 64px;\n --duro-size-timeline-label-w: 180px;\n --duro-size-time-readout-w: 74px;\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-floating-raised: 60;\n --duro-layer-modal: 1001;\n --duro-layer-modal-raised: 1002;\n --duro-layer-overlay: 1000;\n --duro-layer-popover: 1040;\n --duro-layer-popover-raised: 1041;\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 --duro-effect-surface-blur: blur(6px);\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-disabled: rgba(30, 64, 175, 0.4);\n --duro-color-accent-hover: #1a3799;\n --duro-color-active: #1e40af;\n --duro-color-active-bg: rgba(30, 64, 175, 0.08);\n --duro-color-active-border: rgba(30, 64, 175, 0.3);\n --duro-color-active-text: #1e40af;\n --duro-color-bg: #ffffff;\n --duro-color-bg-card: #f5f5f5;\n --duro-color-bg-card-hover: #ebebeb;\n --duro-color-bg-elevated: #ffffff;\n --duro-color-bg-inset: #f0f0f0;\n --duro-color-bg-section-tint: rgba(0, 0, 0, 0.03);\n --duro-color-bg-selected: rgba(30, 64, 175, 0.12);\n --duro-color-border: #d4d4d4;\n --duro-color-border-strong: #a3a3a3;\n --duro-color-border-subtle: #ebebeb;\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-dark: #000000;\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-neutral: #525252;\n --duro-color-neutral-bg: rgba(82, 82, 82, 0.08);\n --duro-color-neutral-border: rgba(82, 82, 82, 0.3);\n --duro-color-neutral-text: #404040;\n --duro-color-on-contrast-surface: #e5e5e5;\n --duro-color-on-scrim-muted: rgba(255, 255, 255, 0.72);\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-press-overlay: rgba(0, 0, 0, 0.08);\n --duro-color-ripple: rgba(0, 0, 0, 0.12);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-scrim-soft: rgba(0, 0, 0, 0.2);\n --duro-color-scrim-strong: rgba(0, 0, 0, 0.6);\n --duro-color-segment-active: #ffffff;\n --duro-color-segment-track: rgba(0, 0, 0, 0.06);\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-surface-highlight: rgba(255, 255, 255, 0.7);\n --duro-color-text: #1a1a1a;\n --duro-color-text-disabled: #a3a3a3;\n --duro-color-text-muted: #4a4a4a;\n --duro-color-text-subtle: #6b6b6b;\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-disabled: rgba(96, 165, 250, 0.5);\n --duro-color-accent-hover: #93c5fd;\n --duro-color-active: #60a5fa;\n --duro-color-active-bg: rgba(96, 165, 250, 0.15);\n --duro-color-active-border: rgba(96, 165, 250, 0.5);\n --duro-color-active-text: #bfdbfe;\n --duro-color-bg: #000000;\n --duro-color-bg-card: #111111;\n --duro-color-bg-card-hover: #1a1a1a;\n --duro-color-bg-elevated: #1a1a1a;\n --duro-color-bg-inset: #0a0a0a;\n --duro-color-bg-section-tint: rgba(255, 255, 255, 0.06);\n --duro-color-bg-selected: rgba(96, 165, 250, 0.25);\n --duro-color-border: #555555;\n --duro-color-border-strong: #888888;\n --duro-color-border-subtle: #333333;\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-dark: #000000;\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-neutral: #d4d4d4;\n --duro-color-neutral-bg: rgba(212, 212, 212, 0.15);\n --duro-color-neutral-border: rgba(212, 212, 212, 0.5);\n --duro-color-neutral-text: #e5e5e5;\n --duro-color-on-contrast-surface: #000000;\n --duro-color-on-scrim-muted: rgba(255, 255, 255, 0.72);\n --duro-color-overlay-light: rgba(255, 255, 255, 0.78);\n --duro-color-press-overlay: rgba(255, 255, 255, 0.15);\n --duro-color-ripple: rgba(255, 255, 255, 0.2);\n --duro-color-scrim: rgba(0, 0, 0, 0.4);\n --duro-color-scrim-soft: rgba(0, 0, 0, 0.3);\n --duro-color-scrim-strong: rgba(0, 0, 0, 0.7);\n --duro-color-segment-active: #333333;\n --duro-color-segment-track: rgba(255, 255, 255, 0.12);\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-surface-highlight: rgba(255, 255, 255, 0.15);\n --duro-color-text: #ffffff;\n --duro-color-text-disabled: #808080;\n --duro-color-text-muted: #b0b0b0;\n --duro-color-text-subtle: #a3a3a3;\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"
|
|
10532
10808
|
},
|
|
10533
10809
|
"unions": {
|
|
10534
10810
|
"AlertVariant": [
|