@puredesktop/create-app 2.1.4 → 2.1.6
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/bin/create-puredesktop-app.mjs +319 -319
- package/package.json +1 -1
- package/template/README.md +52 -52
- package/template/agents.md +11 -11
- package/template/docs/README.md +30 -30
- package/template/docs/agent.md +58 -58
- package/template/docs/app-lifecycle.md +60 -60
- package/template/docs/bridge/README.md +84 -84
- package/template/docs/bridge/dialog.md +56 -56
- package/template/docs/bridge/fs.md +95 -95
- package/template/docs/bridge/network.md +38 -38
- package/template/docs/bridge/settings.md +63 -63
- package/template/docs/bridge/storage.md +48 -48
- package/template/docs/plugin-manifest.md +104 -104
- package/template/docs/theme-vars.md +138 -138
- package/template/docs/tool-handlers.md +122 -122
- package/template/docs/ui-and-components.md +57 -56
- package/template/package.json +10 -10
- package/template/plugin.json +20 -20
- package/template/src/App.tsx +4 -4
- package/template/src/bridge/platformBridge.ts +122 -122
- package/template/src/components/AppShell.tsx +9 -9
|
@@ -1,108 +1,108 @@
|
|
|
1
|
-
# Plugin Manifest
|
|
2
|
-
|
|
3
|
-
`plugin.json` is the shell contract for discovery, permissions, routing, and app
|
|
4
|
-
agent tools.
|
|
5
|
-
|
|
6
|
-
## Required Shape
|
|
7
|
-
|
|
8
|
-
```json
|
|
9
|
-
{
|
|
10
|
-
"schemaVersion": 1,
|
|
11
|
-
"id": "{{PLUGIN_ID}}",
|
|
12
|
-
"name": "{{APP_TITLE}}",
|
|
13
|
-
"permissions": ["network", "settings", "agents"],
|
|
14
|
-
"entrypoint": {
|
|
15
|
-
"kind": "dev-url",
|
|
16
|
-
"url": "http://localhost:{{APP_PORT}}"
|
|
17
|
-
},
|
|
18
|
-
"app": {
|
|
19
|
-
"id": "plugin.{{APP_SLUG}}",
|
|
20
|
-
"slug": "{{APP_SLUG}}",
|
|
21
|
-
"name": "{{APP_TITLE}}",
|
|
22
|
-
"navigationLabel": "{{APP_TITLE}}",
|
|
23
|
-
"productName": "pure.{{APP_SLUG}}",
|
|
24
|
-
"kind": "{{APP_SLUG}}",
|
|
25
|
-
"description": "{{APP_TITLE}} - built with PureDesktop.",
|
|
26
|
-
"usePureDesktopAiPanel": true
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
`app.slug` is the API scope for settings, storage, app agent sessions, and tab
|
|
32
|
-
routing. `src/constants.ts` `APP_SLUG` must match `plugin.json` `app.slug`.
|
|
33
|
-
|
|
34
|
-
## Entrypoint
|
|
35
|
-
|
|
36
|
-
Development apps use:
|
|
37
|
-
|
|
38
|
-
```json
|
|
39
|
-
{
|
|
40
|
-
"entrypoint": {
|
|
41
|
-
"kind": "dev-url",
|
|
42
|
-
"url": "http://localhost:{{APP_PORT}}"
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
Built apps use a static bundle registered from `dist/`. The validator checks the
|
|
48
|
-
build output before registration.
|
|
49
|
-
|
|
50
|
-
## Permissions
|
|
51
|
-
|
|
52
|
-
Declare every shell capability used by bridge helpers:
|
|
53
|
-
|
|
54
|
-
| Permission | Enables |
|
|
55
|
-
| --- | --- |
|
|
56
|
-
| `settings` | `settings.*`, app settings, user preferences |
|
|
57
|
-
| `filesystem` | `fs.*`, `dialog.*`, `storage.*`, file open routing |
|
|
58
|
-
| `network` | `network.fetch`, hosted entrypoints, OAuth helpers |
|
|
59
|
-
| `render` | document render and print helpers |
|
|
60
|
-
| `assets` | asset library helpers |
|
|
61
|
-
| `agents` | app agent sessions and runtime tool handlers |
|
|
62
|
-
|
|
63
|
-
## App Agent Tools
|
|
64
|
-
|
|
65
|
-
Declare app-owned tools under `app.agents.tools`:
|
|
66
|
-
|
|
67
|
-
```json
|
|
68
|
-
{
|
|
69
|
-
"app": {
|
|
70
|
-
"agents": {
|
|
71
|
-
"tools": [
|
|
72
|
-
{
|
|
73
|
-
"name": "listItems",
|
|
74
|
-
"description": "List the current items with ids, titles, status, and next action.",
|
|
75
|
-
"inputSchema": {
|
|
76
|
-
"type": "object",
|
|
77
|
-
"properties": {
|
|
78
|
-
"status": {
|
|
79
|
-
"type": "string",
|
|
80
|
-
"description": "Optional status filter."
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
"additionalProperties": false
|
|
84
|
-
},
|
|
85
|
-
"requiresApproval": false
|
|
86
|
-
}
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
The manifest declaration exposes the tool to the shell agent. Runtime handler
|
|
94
|
-
registration in the iframe executes the tool.
|
|
95
|
-
|
|
96
|
-
## Validation
|
|
97
|
-
|
|
98
|
-
Run:
|
|
99
|
-
|
|
100
|
-
```bash
|
|
1
|
+
# Plugin Manifest
|
|
2
|
+
|
|
3
|
+
`plugin.json` is the shell contract for discovery, permissions, routing, and app
|
|
4
|
+
agent tools.
|
|
5
|
+
|
|
6
|
+
## Required Shape
|
|
7
|
+
|
|
8
|
+
```json
|
|
9
|
+
{
|
|
10
|
+
"schemaVersion": 1,
|
|
11
|
+
"id": "{{PLUGIN_ID}}",
|
|
12
|
+
"name": "{{APP_TITLE}}",
|
|
13
|
+
"permissions": ["network", "settings", "agents"],
|
|
14
|
+
"entrypoint": {
|
|
15
|
+
"kind": "dev-url",
|
|
16
|
+
"url": "http://localhost:{{APP_PORT}}"
|
|
17
|
+
},
|
|
18
|
+
"app": {
|
|
19
|
+
"id": "plugin.{{APP_SLUG}}",
|
|
20
|
+
"slug": "{{APP_SLUG}}",
|
|
21
|
+
"name": "{{APP_TITLE}}",
|
|
22
|
+
"navigationLabel": "{{APP_TITLE}}",
|
|
23
|
+
"productName": "pure.{{APP_SLUG}}",
|
|
24
|
+
"kind": "{{APP_SLUG}}",
|
|
25
|
+
"description": "{{APP_TITLE}} - built with PureDesktop.",
|
|
26
|
+
"usePureDesktopAiPanel": true
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
`app.slug` is the API scope for settings, storage, app agent sessions, and tab
|
|
32
|
+
routing. `src/constants.ts` `APP_SLUG` must match `plugin.json` `app.slug`.
|
|
33
|
+
|
|
34
|
+
## Entrypoint
|
|
35
|
+
|
|
36
|
+
Development apps use:
|
|
37
|
+
|
|
38
|
+
```json
|
|
39
|
+
{
|
|
40
|
+
"entrypoint": {
|
|
41
|
+
"kind": "dev-url",
|
|
42
|
+
"url": "http://localhost:{{APP_PORT}}"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Built apps use a static bundle registered from `dist/`. The validator checks the
|
|
48
|
+
build output before registration.
|
|
49
|
+
|
|
50
|
+
## Permissions
|
|
51
|
+
|
|
52
|
+
Declare every shell capability used by bridge helpers:
|
|
53
|
+
|
|
54
|
+
| Permission | Enables |
|
|
55
|
+
| --- | --- |
|
|
56
|
+
| `settings` | `settings.*`, app settings, user preferences |
|
|
57
|
+
| `filesystem` | `fs.*`, `dialog.*`, `storage.*`, file open routing |
|
|
58
|
+
| `network` | `network.fetch`, hosted entrypoints, OAuth helpers |
|
|
59
|
+
| `render` | document render and print helpers |
|
|
60
|
+
| `assets` | asset library helpers |
|
|
61
|
+
| `agents` | app agent sessions and runtime tool handlers |
|
|
62
|
+
|
|
63
|
+
## App Agent Tools
|
|
64
|
+
|
|
65
|
+
Declare app-owned tools under `app.agents.tools`:
|
|
66
|
+
|
|
67
|
+
```json
|
|
68
|
+
{
|
|
69
|
+
"app": {
|
|
70
|
+
"agents": {
|
|
71
|
+
"tools": [
|
|
72
|
+
{
|
|
73
|
+
"name": "listItems",
|
|
74
|
+
"description": "List the current items with ids, titles, status, and next action.",
|
|
75
|
+
"inputSchema": {
|
|
76
|
+
"type": "object",
|
|
77
|
+
"properties": {
|
|
78
|
+
"status": {
|
|
79
|
+
"type": "string",
|
|
80
|
+
"description": "Optional status filter."
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"additionalProperties": false
|
|
84
|
+
},
|
|
85
|
+
"requiresApproval": false
|
|
86
|
+
}
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
The manifest declaration exposes the tool to the shell agent. Runtime handler
|
|
94
|
+
registration in the iframe executes the tool.
|
|
95
|
+
|
|
96
|
+
## Validation
|
|
97
|
+
|
|
98
|
+
Run:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
101
|
npm run typecheck
|
|
102
|
-
npm run build
|
|
103
|
-
npm run puredesktop:check
|
|
104
|
-
```
|
|
105
|
-
|
|
102
|
+
npm run build
|
|
103
|
+
npm run puredesktop:check
|
|
104
|
+
```
|
|
105
|
+
|
|
106
106
|
The validator checks manifest identity, required scripts and dependencies,
|
|
107
107
|
`agents.md`, `app.usePureDesktopAiPanel`, permissions, built output, and declared
|
|
108
108
|
agent tool presence in source and dist.
|
|
@@ -1,138 +1,138 @@
|
|
|
1
|
-
# Theme CSS Variables
|
|
2
|
-
|
|
3
|
-
This file is generated from `packages/ui/src/theme/tokens.ts`.
|
|
4
|
-
|
|
5
|
-
PureDesktop injects these variables through `AppFrame` and the shell bridge
|
|
6
|
-
theme payload. Use them in app styling instead of hardcoded platform colors,
|
|
7
|
-
spacing, typography, radii, shadows, transitions, or app stacking values.
|
|
8
|
-
|
|
9
|
-
This static reference is generated by PureDesktop maintainers before the
|
|
10
|
-
create-app package is released.
|
|
11
|
-
|
|
12
|
-
| Variable | Domain |
|
|
13
|
-
| --- | --- |
|
|
14
|
-
| `--platform-colors-accent` | colors |
|
|
15
|
-
| `--platform-colors-accent-hover` | colors |
|
|
16
|
-
| `--platform-colors-accent-muted` | colors |
|
|
17
|
-
| `--platform-colors-app-viewport` | colors |
|
|
18
|
-
| `--platform-colors-bg` | colors |
|
|
19
|
-
| `--platform-colors-border` | colors |
|
|
20
|
-
| `--platform-colors-border-strong` | colors |
|
|
21
|
-
| `--platform-colors-chrome-tab-strip` | colors |
|
|
22
|
-
| `--platform-colors-chrome-titlebar` | colors |
|
|
23
|
-
| `--platform-colors-danger` | colors |
|
|
24
|
-
| `--platform-colors-divider` | colors |
|
|
25
|
-
| `--platform-colors-elevated` | colors |
|
|
26
|
-
| `--platform-colors-focus` | colors |
|
|
27
|
-
| `--platform-colors-info` | colors |
|
|
28
|
-
| `--platform-colors-selection` | colors |
|
|
29
|
-
| `--platform-colors-semantic-blue` | colors |
|
|
30
|
-
| `--platform-colors-semantic-blue-border` | colors |
|
|
31
|
-
| `--platform-colors-semantic-blue-muted` | colors |
|
|
32
|
-
| `--platform-colors-semantic-blue-text` | colors |
|
|
33
|
-
| `--platform-colors-semantic-green` | colors |
|
|
34
|
-
| `--platform-colors-semantic-green-border` | colors |
|
|
35
|
-
| `--platform-colors-semantic-green-muted` | colors |
|
|
36
|
-
| `--platform-colors-semantic-green-text` | colors |
|
|
37
|
-
| `--platform-colors-semantic-orange` | colors |
|
|
38
|
-
| `--platform-colors-semantic-orange-border` | colors |
|
|
39
|
-
| `--platform-colors-semantic-orange-muted` | colors |
|
|
40
|
-
| `--platform-colors-semantic-orange-text` | colors |
|
|
41
|
-
| `--platform-colors-semantic-red` | colors |
|
|
42
|
-
| `--platform-colors-semantic-red-border` | colors |
|
|
43
|
-
| `--platform-colors-semantic-red-muted` | colors |
|
|
44
|
-
| `--platform-colors-semantic-red-text` | colors |
|
|
45
|
-
| `--platform-colors-success` | colors |
|
|
46
|
-
| `--platform-colors-surface` | colors |
|
|
47
|
-
| `--platform-colors-surface-active` | colors |
|
|
48
|
-
| `--platform-colors-surface-hover` | colors |
|
|
49
|
-
| `--platform-colors-text` | colors |
|
|
50
|
-
| `--platform-colors-text-danger` | colors |
|
|
51
|
-
| `--platform-colors-text-disabled` | colors |
|
|
52
|
-
| `--platform-colors-text-inverse` | colors |
|
|
53
|
-
| `--platform-colors-text-secondary` | colors |
|
|
54
|
-
| `--platform-colors-warning` | colors |
|
|
55
|
-
| `--platform-radius-full` | radius |
|
|
56
|
-
| `--platform-radius-lg` | radius |
|
|
57
|
-
| `--platform-radius-md` | radius |
|
|
58
|
-
| `--platform-radius-sm` | radius |
|
|
59
|
-
| `--platform-shadow-lg` | shadow |
|
|
60
|
-
| `--platform-shadow-md` | shadow |
|
|
61
|
-
| `--platform-shadow-sm` | shadow |
|
|
62
|
-
| `--platform-spacing-lg` | spacing |
|
|
63
|
-
| `--platform-spacing-md` | spacing |
|
|
64
|
-
| `--platform-spacing-sm` | spacing |
|
|
65
|
-
| `--platform-spacing-xl` | spacing |
|
|
66
|
-
| `--platform-spacing-xs` | spacing |
|
|
67
|
-
| `--platform-spacing-xxl` | spacing |
|
|
68
|
-
| `--platform-transition-base` | transition |
|
|
69
|
-
| `--platform-transition-fast` | transition |
|
|
70
|
-
| `--platform-transition-slow` | transition |
|
|
71
|
-
| `--platform-typography-font-family` | typography |
|
|
72
|
-
| `--platform-typography-font-family-content` | typography |
|
|
73
|
-
| `--platform-typography-font-family-mono` | typography |
|
|
74
|
-
| `--platform-typography-font-size-base` | typography |
|
|
75
|
-
| `--platform-typography-font-size-lg` | typography |
|
|
76
|
-
| `--platform-typography-font-size-sm` | typography |
|
|
77
|
-
| `--platform-typography-font-size-xl` | typography |
|
|
78
|
-
| `--platform-typography-font-size-xs` | typography |
|
|
79
|
-
| `--platform-typography-font-weight-bold` | typography |
|
|
80
|
-
| `--platform-typography-font-weight-medium` | typography |
|
|
81
|
-
| `--platform-typography-font-weight-normal` | typography |
|
|
82
|
-
| `--platform-typography-line-height-base` | typography |
|
|
83
|
-
| `--platform-typography-line-height-tight` | typography |
|
|
84
|
-
| `--platform-z-index-zi-app-base` | zIndex |
|
|
85
|
-
| `--platform-z-index-zi-app-chrome` | zIndex |
|
|
86
|
-
| `--platform-z-index-zi-app-menus` | zIndex |
|
|
87
|
-
| `--platform-z-index-zi-app-modal` | zIndex |
|
|
88
|
-
| `--platform-z-index-zi-app-sidebar` | zIndex |
|
|
89
|
-
| `--platform-z-index-zi-app-toast` | zIndex |
|
|
90
|
-
| `--platform-z-index-zi-app-viewport-toolbar` | zIndex |
|
|
91
|
-
|
|
92
|
-
## App-Owned Colors
|
|
93
|
-
|
|
94
|
-
Use platform variables for the base app shell, text, surfaces, borders,
|
|
95
|
-
spacing, typography, radius, shadows, transitions, and z-index.
|
|
96
|
-
|
|
97
|
-
When the app domain needs colors beyond the platform set, define app-prefixed
|
|
98
|
-
variables and keep them synchronized with the shell theme through
|
|
99
|
-
`data-platform-theme`.
|
|
100
|
-
|
|
101
|
-
Good use cases for app-owned colors:
|
|
102
|
-
|
|
103
|
-
- chart series;
|
|
104
|
-
- calendar categories;
|
|
105
|
-
- tags and labels;
|
|
106
|
-
- syntax or document annotations;
|
|
107
|
-
- domain-specific status colors not covered by platform semantic colors.
|
|
108
|
-
|
|
109
|
-
Pattern:
|
|
110
|
-
|
|
111
|
-
```ts
|
|
112
|
-
const Root = styled.div`
|
|
113
|
-
--myapp-chart-blue: #3b73d9;
|
|
114
|
-
--myapp-chart-blue-muted: color-mix(
|
|
115
|
-
in srgb,
|
|
116
|
-
var(--myapp-chart-blue) 12%,
|
|
117
|
-
var(--platform-colors-surface)
|
|
118
|
-
);
|
|
119
|
-
|
|
120
|
-
[data-platform-theme='dark'] & {
|
|
121
|
-
--myapp-chart-blue: #8ab4ff;
|
|
122
|
-
--myapp-chart-blue-muted: color-mix(
|
|
123
|
-
in srgb,
|
|
124
|
-
var(--myapp-chart-blue) 18%,
|
|
125
|
-
var(--platform-colors-surface)
|
|
126
|
-
);
|
|
127
|
-
}
|
|
128
|
-
`
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
Rules for app-owned colors:
|
|
132
|
-
|
|
133
|
-
- prefix app variables with the app slug or a short app namespace;
|
|
134
|
-
- provide dark-mode values inside `[data-platform-theme='dark'] &`;
|
|
135
|
-
- derive muted fills, hovers, selections, and outlines with `color-mix()` and
|
|
136
|
-
platform surface, text, border, or background variables;
|
|
137
|
-
- use `--platform-colors-accent` for primary app identity and actions;
|
|
138
|
-
- reserve app-owned colors for domain meaning.
|
|
1
|
+
# Theme CSS Variables
|
|
2
|
+
|
|
3
|
+
This file is generated from `packages/ui/src/theme/tokens.ts`.
|
|
4
|
+
|
|
5
|
+
PureDesktop injects these variables through `AppFrame` and the shell bridge
|
|
6
|
+
theme payload. Use them in app styling instead of hardcoded platform colors,
|
|
7
|
+
spacing, typography, radii, shadows, transitions, or app stacking values.
|
|
8
|
+
|
|
9
|
+
This static reference is generated by PureDesktop maintainers before the
|
|
10
|
+
create-app package is released.
|
|
11
|
+
|
|
12
|
+
| Variable | Domain |
|
|
13
|
+
| --- | --- |
|
|
14
|
+
| `--platform-colors-accent` | colors |
|
|
15
|
+
| `--platform-colors-accent-hover` | colors |
|
|
16
|
+
| `--platform-colors-accent-muted` | colors |
|
|
17
|
+
| `--platform-colors-app-viewport` | colors |
|
|
18
|
+
| `--platform-colors-bg` | colors |
|
|
19
|
+
| `--platform-colors-border` | colors |
|
|
20
|
+
| `--platform-colors-border-strong` | colors |
|
|
21
|
+
| `--platform-colors-chrome-tab-strip` | colors |
|
|
22
|
+
| `--platform-colors-chrome-titlebar` | colors |
|
|
23
|
+
| `--platform-colors-danger` | colors |
|
|
24
|
+
| `--platform-colors-divider` | colors |
|
|
25
|
+
| `--platform-colors-elevated` | colors |
|
|
26
|
+
| `--platform-colors-focus` | colors |
|
|
27
|
+
| `--platform-colors-info` | colors |
|
|
28
|
+
| `--platform-colors-selection` | colors |
|
|
29
|
+
| `--platform-colors-semantic-blue` | colors |
|
|
30
|
+
| `--platform-colors-semantic-blue-border` | colors |
|
|
31
|
+
| `--platform-colors-semantic-blue-muted` | colors |
|
|
32
|
+
| `--platform-colors-semantic-blue-text` | colors |
|
|
33
|
+
| `--platform-colors-semantic-green` | colors |
|
|
34
|
+
| `--platform-colors-semantic-green-border` | colors |
|
|
35
|
+
| `--platform-colors-semantic-green-muted` | colors |
|
|
36
|
+
| `--platform-colors-semantic-green-text` | colors |
|
|
37
|
+
| `--platform-colors-semantic-orange` | colors |
|
|
38
|
+
| `--platform-colors-semantic-orange-border` | colors |
|
|
39
|
+
| `--platform-colors-semantic-orange-muted` | colors |
|
|
40
|
+
| `--platform-colors-semantic-orange-text` | colors |
|
|
41
|
+
| `--platform-colors-semantic-red` | colors |
|
|
42
|
+
| `--platform-colors-semantic-red-border` | colors |
|
|
43
|
+
| `--platform-colors-semantic-red-muted` | colors |
|
|
44
|
+
| `--platform-colors-semantic-red-text` | colors |
|
|
45
|
+
| `--platform-colors-success` | colors |
|
|
46
|
+
| `--platform-colors-surface` | colors |
|
|
47
|
+
| `--platform-colors-surface-active` | colors |
|
|
48
|
+
| `--platform-colors-surface-hover` | colors |
|
|
49
|
+
| `--platform-colors-text` | colors |
|
|
50
|
+
| `--platform-colors-text-danger` | colors |
|
|
51
|
+
| `--platform-colors-text-disabled` | colors |
|
|
52
|
+
| `--platform-colors-text-inverse` | colors |
|
|
53
|
+
| `--platform-colors-text-secondary` | colors |
|
|
54
|
+
| `--platform-colors-warning` | colors |
|
|
55
|
+
| `--platform-radius-full` | radius |
|
|
56
|
+
| `--platform-radius-lg` | radius |
|
|
57
|
+
| `--platform-radius-md` | radius |
|
|
58
|
+
| `--platform-radius-sm` | radius |
|
|
59
|
+
| `--platform-shadow-lg` | shadow |
|
|
60
|
+
| `--platform-shadow-md` | shadow |
|
|
61
|
+
| `--platform-shadow-sm` | shadow |
|
|
62
|
+
| `--platform-spacing-lg` | spacing |
|
|
63
|
+
| `--platform-spacing-md` | spacing |
|
|
64
|
+
| `--platform-spacing-sm` | spacing |
|
|
65
|
+
| `--platform-spacing-xl` | spacing |
|
|
66
|
+
| `--platform-spacing-xs` | spacing |
|
|
67
|
+
| `--platform-spacing-xxl` | spacing |
|
|
68
|
+
| `--platform-transition-base` | transition |
|
|
69
|
+
| `--platform-transition-fast` | transition |
|
|
70
|
+
| `--platform-transition-slow` | transition |
|
|
71
|
+
| `--platform-typography-font-family` | typography |
|
|
72
|
+
| `--platform-typography-font-family-content` | typography |
|
|
73
|
+
| `--platform-typography-font-family-mono` | typography |
|
|
74
|
+
| `--platform-typography-font-size-base` | typography |
|
|
75
|
+
| `--platform-typography-font-size-lg` | typography |
|
|
76
|
+
| `--platform-typography-font-size-sm` | typography |
|
|
77
|
+
| `--platform-typography-font-size-xl` | typography |
|
|
78
|
+
| `--platform-typography-font-size-xs` | typography |
|
|
79
|
+
| `--platform-typography-font-weight-bold` | typography |
|
|
80
|
+
| `--platform-typography-font-weight-medium` | typography |
|
|
81
|
+
| `--platform-typography-font-weight-normal` | typography |
|
|
82
|
+
| `--platform-typography-line-height-base` | typography |
|
|
83
|
+
| `--platform-typography-line-height-tight` | typography |
|
|
84
|
+
| `--platform-z-index-zi-app-base` | zIndex |
|
|
85
|
+
| `--platform-z-index-zi-app-chrome` | zIndex |
|
|
86
|
+
| `--platform-z-index-zi-app-menus` | zIndex |
|
|
87
|
+
| `--platform-z-index-zi-app-modal` | zIndex |
|
|
88
|
+
| `--platform-z-index-zi-app-sidebar` | zIndex |
|
|
89
|
+
| `--platform-z-index-zi-app-toast` | zIndex |
|
|
90
|
+
| `--platform-z-index-zi-app-viewport-toolbar` | zIndex |
|
|
91
|
+
|
|
92
|
+
## App-Owned Colors
|
|
93
|
+
|
|
94
|
+
Use platform variables for the base app shell, text, surfaces, borders,
|
|
95
|
+
spacing, typography, radius, shadows, transitions, and z-index.
|
|
96
|
+
|
|
97
|
+
When the app domain needs colors beyond the platform set, define app-prefixed
|
|
98
|
+
variables and keep them synchronized with the shell theme through
|
|
99
|
+
`data-platform-theme`.
|
|
100
|
+
|
|
101
|
+
Good use cases for app-owned colors:
|
|
102
|
+
|
|
103
|
+
- chart series;
|
|
104
|
+
- calendar categories;
|
|
105
|
+
- tags and labels;
|
|
106
|
+
- syntax or document annotations;
|
|
107
|
+
- domain-specific status colors not covered by platform semantic colors.
|
|
108
|
+
|
|
109
|
+
Pattern:
|
|
110
|
+
|
|
111
|
+
```ts
|
|
112
|
+
const Root = styled.div`
|
|
113
|
+
--myapp-chart-blue: #3b73d9;
|
|
114
|
+
--myapp-chart-blue-muted: color-mix(
|
|
115
|
+
in srgb,
|
|
116
|
+
var(--myapp-chart-blue) 12%,
|
|
117
|
+
var(--platform-colors-surface)
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
[data-platform-theme='dark'] & {
|
|
121
|
+
--myapp-chart-blue: #8ab4ff;
|
|
122
|
+
--myapp-chart-blue-muted: color-mix(
|
|
123
|
+
in srgb,
|
|
124
|
+
var(--myapp-chart-blue) 18%,
|
|
125
|
+
var(--platform-colors-surface)
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
`
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
Rules for app-owned colors:
|
|
132
|
+
|
|
133
|
+
- prefix app variables with the app slug or a short app namespace;
|
|
134
|
+
- provide dark-mode values inside `[data-platform-theme='dark'] &`;
|
|
135
|
+
- derive muted fills, hovers, selections, and outlines with `color-mix()` and
|
|
136
|
+
platform surface, text, border, or background variables;
|
|
137
|
+
- use `--platform-colors-accent` for primary app identity and actions;
|
|
138
|
+
- reserve app-owned colors for domain meaning.
|