@duro-app/cli 5.13.0 → 5.14.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 +263 -20
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@duro-app/cli",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.14.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.14.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.14.0",
|
|
64
|
+
"@duro-app/tokens": "^5.14.0",
|
|
65
|
+
"@duro-app/ui": "^5.14.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",
|
|
@@ -5357,7 +5376,7 @@
|
|
|
5357
5376
|
"Thumb"
|
|
5358
5377
|
]
|
|
5359
5378
|
},
|
|
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.",
|
|
5379
|
+
"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
5380
|
"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
5381
|
"whenNotToUse": [
|
|
5363
5382
|
"Simple page-level scrolling — browser scroll is fine",
|
|
@@ -5369,7 +5388,7 @@
|
|
|
5369
5388
|
]
|
|
5370
5389
|
},
|
|
5371
5390
|
"name": "ScrollArea",
|
|
5372
|
-
"native":
|
|
5391
|
+
"native": true,
|
|
5373
5392
|
"parts": {
|
|
5374
5393
|
"Content": {
|
|
5375
5394
|
"name": "Content",
|
|
@@ -5472,7 +5491,7 @@
|
|
|
5472
5491
|
"Item"
|
|
5473
5492
|
]
|
|
5474
5493
|
},
|
|
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.",
|
|
5494
|
+
"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
5495
|
"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
5496
|
"relatedTo": [
|
|
5478
5497
|
{
|
|
@@ -5502,7 +5521,7 @@
|
|
|
5502
5521
|
]
|
|
5503
5522
|
},
|
|
5504
5523
|
"name": "Select",
|
|
5505
|
-
"native":
|
|
5524
|
+
"native": true,
|
|
5506
5525
|
"parts": {
|
|
5507
5526
|
"Icon": {
|
|
5508
5527
|
"name": "Icon",
|
|
@@ -5549,6 +5568,24 @@
|
|
|
5549
5568
|
"name": "children",
|
|
5550
5569
|
"required": true,
|
|
5551
5570
|
"type": "ReactNode"
|
|
5571
|
+
},
|
|
5572
|
+
{
|
|
5573
|
+
"description": "The list's accessible name; on native also the sheet's title.",
|
|
5574
|
+
"name": "label",
|
|
5575
|
+
"required": false,
|
|
5576
|
+
"type": "string"
|
|
5577
|
+
},
|
|
5578
|
+
{
|
|
5579
|
+
"description": "Native only: the sheet header's text button that closes it unchanged. Default: 'Cancel'",
|
|
5580
|
+
"name": "cancelLabel",
|
|
5581
|
+
"required": false,
|
|
5582
|
+
"type": "string"
|
|
5583
|
+
},
|
|
5584
|
+
{
|
|
5585
|
+
"description": "Shown in place of the list when there are no items.",
|
|
5586
|
+
"name": "empty",
|
|
5587
|
+
"required": false,
|
|
5588
|
+
"type": "ReactNode"
|
|
5552
5589
|
}
|
|
5553
5590
|
],
|
|
5554
5591
|
"sourcePath": "packages/ui/src/components/Select/Select.tsx"
|
|
@@ -7496,7 +7533,7 @@
|
|
|
7496
7533
|
"importPath": "@duro-app/ui",
|
|
7497
7534
|
"kind": "provider",
|
|
7498
7535
|
"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.",
|
|
7536
|
+
"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
7537
|
"example": "<ThemeProvider theme=\"dark\">\n <App />\n</ThemeProvider>",
|
|
7501
7538
|
"whenNotToUse": [
|
|
7502
7539
|
"Never omit — all Duro components require ThemeProvider"
|
|
@@ -7520,6 +7557,12 @@
|
|
|
7520
7557
|
"high-contrast"
|
|
7521
7558
|
]
|
|
7522
7559
|
},
|
|
7560
|
+
{
|
|
7561
|
+
"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.",
|
|
7562
|
+
"name": "overrides",
|
|
7563
|
+
"required": false,
|
|
7564
|
+
"type": "ColorOverrides"
|
|
7565
|
+
},
|
|
7523
7566
|
{
|
|
7524
7567
|
"name": "children",
|
|
7525
7568
|
"required": true,
|
|
@@ -8608,7 +8651,7 @@
|
|
|
8608
8651
|
"ColorModeProvider"
|
|
8609
8652
|
]
|
|
8610
8653
|
},
|
|
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.",
|
|
8654
|
+
"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
8655
|
"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
8656
|
"relatedTo": [
|
|
8614
8657
|
{
|
|
@@ -8633,7 +8676,7 @@
|
|
|
8633
8676
|
]
|
|
8634
8677
|
},
|
|
8635
8678
|
"name": "useColorMode",
|
|
8636
|
-
"native":
|
|
8679
|
+
"native": true,
|
|
8637
8680
|
"props": [],
|
|
8638
8681
|
"sourcePath": "packages/ui/src/components/ColorMode/ColorMode.tsx"
|
|
8639
8682
|
},
|
|
@@ -8766,7 +8809,7 @@
|
|
|
8766
8809
|
"importPath": "@duro-app/ui",
|
|
8767
8810
|
"kind": "hook",
|
|
8768
8811
|
"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.",
|
|
8812
|
+
"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
8813
|
"example": "<ThemeProvider theme=\"dark\">\n <App />\n</ThemeProvider>",
|
|
8771
8814
|
"whenNotToUse": [
|
|
8772
8815
|
"Never omit — all Duro components require ThemeProvider"
|
|
@@ -9728,6 +9771,206 @@
|
|
|
9728
9771
|
"highContrast": "rgba(0, 0, 0, 0.42)",
|
|
9729
9772
|
"light": "rgba(255, 255, 255, 0.33)"
|
|
9730
9773
|
}
|
|
9774
|
+
},
|
|
9775
|
+
{
|
|
9776
|
+
"key": "bgInset",
|
|
9777
|
+
"values": {
|
|
9778
|
+
"dark": "#0a0a0a",
|
|
9779
|
+
"highContrast": "#0a0a0a",
|
|
9780
|
+
"light": "#f0f0f0"
|
|
9781
|
+
}
|
|
9782
|
+
},
|
|
9783
|
+
{
|
|
9784
|
+
"key": "bgElevated",
|
|
9785
|
+
"values": {
|
|
9786
|
+
"dark": "#242424",
|
|
9787
|
+
"highContrast": "#1a1a1a",
|
|
9788
|
+
"light": "#ffffff"
|
|
9789
|
+
}
|
|
9790
|
+
},
|
|
9791
|
+
{
|
|
9792
|
+
"key": "bgSelected",
|
|
9793
|
+
"values": {
|
|
9794
|
+
"dark": "rgba(106, 175, 252, 0.15)",
|
|
9795
|
+
"highContrast": "rgba(96, 165, 250, 0.25)",
|
|
9796
|
+
"light": "rgba(30, 64, 175, 0.12)"
|
|
9797
|
+
}
|
|
9798
|
+
},
|
|
9799
|
+
{
|
|
9800
|
+
"key": "pressOverlay",
|
|
9801
|
+
"values": {
|
|
9802
|
+
"dark": "rgba(255, 255, 255, 0.08)",
|
|
9803
|
+
"highContrast": "rgba(255, 255, 255, 0.15)",
|
|
9804
|
+
"light": "rgba(0, 0, 0, 0.08)"
|
|
9805
|
+
}
|
|
9806
|
+
},
|
|
9807
|
+
{
|
|
9808
|
+
"key": "ripple",
|
|
9809
|
+
"values": {
|
|
9810
|
+
"dark": "rgba(255, 255, 255, 0.12)",
|
|
9811
|
+
"highContrast": "rgba(255, 255, 255, 0.2)",
|
|
9812
|
+
"light": "rgba(0, 0, 0, 0.12)"
|
|
9813
|
+
}
|
|
9814
|
+
},
|
|
9815
|
+
{
|
|
9816
|
+
"key": "bgSectionTint",
|
|
9817
|
+
"values": {
|
|
9818
|
+
"dark": "rgba(255, 255, 255, 0.03)",
|
|
9819
|
+
"highContrast": "rgba(255, 255, 255, 0.06)",
|
|
9820
|
+
"light": "rgba(0, 0, 0, 0.03)"
|
|
9821
|
+
}
|
|
9822
|
+
},
|
|
9823
|
+
{
|
|
9824
|
+
"key": "borderSubtle",
|
|
9825
|
+
"values": {
|
|
9826
|
+
"dark": "#242424",
|
|
9827
|
+
"highContrast": "#333333",
|
|
9828
|
+
"light": "#ebebeb"
|
|
9829
|
+
}
|
|
9830
|
+
},
|
|
9831
|
+
{
|
|
9832
|
+
"key": "borderStrong",
|
|
9833
|
+
"values": {
|
|
9834
|
+
"dark": "#555555",
|
|
9835
|
+
"highContrast": "#888888",
|
|
9836
|
+
"light": "#a3a3a3"
|
|
9837
|
+
}
|
|
9838
|
+
},
|
|
9839
|
+
{
|
|
9840
|
+
"key": "surfaceHighlight",
|
|
9841
|
+
"values": {
|
|
9842
|
+
"dark": "rgba(255, 255, 255, 0.06)",
|
|
9843
|
+
"highContrast": "rgba(255, 255, 255, 0.15)",
|
|
9844
|
+
"light": "rgba(255, 255, 255, 0.7)"
|
|
9845
|
+
}
|
|
9846
|
+
},
|
|
9847
|
+
{
|
|
9848
|
+
"key": "textSubtle",
|
|
9849
|
+
"values": {
|
|
9850
|
+
"dark": "#8a8a8a",
|
|
9851
|
+
"highContrast": "#a3a3a3",
|
|
9852
|
+
"light": "#6b6b6b"
|
|
9853
|
+
}
|
|
9854
|
+
},
|
|
9855
|
+
{
|
|
9856
|
+
"key": "textDisabled",
|
|
9857
|
+
"values": {
|
|
9858
|
+
"dark": "#6b6b6b",
|
|
9859
|
+
"highContrast": "#808080",
|
|
9860
|
+
"light": "#a3a3a3"
|
|
9861
|
+
}
|
|
9862
|
+
},
|
|
9863
|
+
{
|
|
9864
|
+
"key": "neutral",
|
|
9865
|
+
"values": {
|
|
9866
|
+
"dark": "#a3a3a3",
|
|
9867
|
+
"highContrast": "#d4d4d4",
|
|
9868
|
+
"light": "#525252"
|
|
9869
|
+
}
|
|
9870
|
+
},
|
|
9871
|
+
{
|
|
9872
|
+
"key": "neutralBg",
|
|
9873
|
+
"values": {
|
|
9874
|
+
"dark": "rgba(163, 163, 163, 0.1)",
|
|
9875
|
+
"highContrast": "rgba(212, 212, 212, 0.15)",
|
|
9876
|
+
"light": "rgba(82, 82, 82, 0.08)"
|
|
9877
|
+
}
|
|
9878
|
+
},
|
|
9879
|
+
{
|
|
9880
|
+
"key": "neutralBorder",
|
|
9881
|
+
"values": {
|
|
9882
|
+
"dark": "rgba(163, 163, 163, 0.3)",
|
|
9883
|
+
"highContrast": "rgba(212, 212, 212, 0.5)",
|
|
9884
|
+
"light": "rgba(82, 82, 82, 0.3)"
|
|
9885
|
+
}
|
|
9886
|
+
},
|
|
9887
|
+
{
|
|
9888
|
+
"key": "neutralText",
|
|
9889
|
+
"values": {
|
|
9890
|
+
"dark": "#d4d4d4",
|
|
9891
|
+
"highContrast": "#e5e5e5",
|
|
9892
|
+
"light": "#404040"
|
|
9893
|
+
}
|
|
9894
|
+
},
|
|
9895
|
+
{
|
|
9896
|
+
"key": "active",
|
|
9897
|
+
"values": {
|
|
9898
|
+
"dark": "#6aaffc",
|
|
9899
|
+
"highContrast": "#60a5fa",
|
|
9900
|
+
"light": "#1e40af"
|
|
9901
|
+
}
|
|
9902
|
+
},
|
|
9903
|
+
{
|
|
9904
|
+
"key": "activeBg",
|
|
9905
|
+
"values": {
|
|
9906
|
+
"dark": "rgba(106, 175, 252, 0.1)",
|
|
9907
|
+
"highContrast": "rgba(96, 165, 250, 0.15)",
|
|
9908
|
+
"light": "rgba(30, 64, 175, 0.08)"
|
|
9909
|
+
}
|
|
9910
|
+
},
|
|
9911
|
+
{
|
|
9912
|
+
"key": "activeBorder",
|
|
9913
|
+
"values": {
|
|
9914
|
+
"dark": "rgba(106, 175, 252, 0.3)",
|
|
9915
|
+
"highContrast": "rgba(96, 165, 250, 0.5)",
|
|
9916
|
+
"light": "rgba(30, 64, 175, 0.3)"
|
|
9917
|
+
}
|
|
9918
|
+
},
|
|
9919
|
+
{
|
|
9920
|
+
"key": "activeText",
|
|
9921
|
+
"values": {
|
|
9922
|
+
"dark": "#93c5fd",
|
|
9923
|
+
"highContrast": "#bfdbfe",
|
|
9924
|
+
"light": "#1e40af"
|
|
9925
|
+
}
|
|
9926
|
+
},
|
|
9927
|
+
{
|
|
9928
|
+
"key": "accentDisabled",
|
|
9929
|
+
"values": {
|
|
9930
|
+
"dark": "rgba(106, 175, 252, 0.4)",
|
|
9931
|
+
"highContrast": "rgba(96, 165, 250, 0.5)",
|
|
9932
|
+
"light": "rgba(30, 64, 175, 0.4)"
|
|
9933
|
+
}
|
|
9934
|
+
},
|
|
9935
|
+
{
|
|
9936
|
+
"key": "segmentTrack",
|
|
9937
|
+
"values": {
|
|
9938
|
+
"dark": "rgba(255, 255, 255, 0.06)",
|
|
9939
|
+
"highContrast": "rgba(255, 255, 255, 0.12)",
|
|
9940
|
+
"light": "rgba(0, 0, 0, 0.06)"
|
|
9941
|
+
}
|
|
9942
|
+
},
|
|
9943
|
+
{
|
|
9944
|
+
"key": "segmentActive",
|
|
9945
|
+
"values": {
|
|
9946
|
+
"dark": "#333333",
|
|
9947
|
+
"highContrast": "#333333",
|
|
9948
|
+
"light": "#ffffff"
|
|
9949
|
+
}
|
|
9950
|
+
},
|
|
9951
|
+
{
|
|
9952
|
+
"key": "scrimSoft",
|
|
9953
|
+
"values": {
|
|
9954
|
+
"dark": "rgba(0, 0, 0, 0.2)",
|
|
9955
|
+
"highContrast": "rgba(0, 0, 0, 0.3)",
|
|
9956
|
+
"light": "rgba(0, 0, 0, 0.2)"
|
|
9957
|
+
}
|
|
9958
|
+
},
|
|
9959
|
+
{
|
|
9960
|
+
"key": "scrimStrong",
|
|
9961
|
+
"values": {
|
|
9962
|
+
"dark": "rgba(0, 0, 0, 0.6)",
|
|
9963
|
+
"highContrast": "rgba(0, 0, 0, 0.7)",
|
|
9964
|
+
"light": "rgba(0, 0, 0, 0.6)"
|
|
9965
|
+
}
|
|
9966
|
+
},
|
|
9967
|
+
{
|
|
9968
|
+
"key": "onScrimMuted",
|
|
9969
|
+
"values": {
|
|
9970
|
+
"dark": "rgba(255, 255, 255, 0.72)",
|
|
9971
|
+
"highContrast": "rgba(255, 255, 255, 0.72)",
|
|
9972
|
+
"light": "rgba(255, 255, 255, 0.72)"
|
|
9973
|
+
}
|
|
9731
9974
|
}
|
|
9732
9975
|
],
|
|
9733
9976
|
"exportName": "colors",
|
|
@@ -10528,7 +10771,7 @@
|
|
|
10528
10771
|
"importPath": "@duro-app/tokens/tokens/typography.css"
|
|
10529
10772
|
}
|
|
10530
10773
|
},
|
|
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"
|
|
10774
|
+
"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
10775
|
},
|
|
10533
10776
|
"unions": {
|
|
10534
10777
|
"AlertVariant": [
|