@puredesktop/create-app 2.1.6 → 2.1.7
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 +1 -1
- package/template/docs/theme-vars.md +138 -138
- package/template/package.json +1 -1
package/package.json
CHANGED
|
@@ -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 | Light value | Dark value |
|
|
13
|
+
| --- | --- | --- | --- |
|
|
14
|
+
| `--platform-colors-accent` | colors | `#1b1b1e` | `#e5e5e9` |
|
|
15
|
+
| `--platform-colors-accent-hover` | colors | `#1b1b1e` | `#eaeaee` |
|
|
16
|
+
| `--platform-colors-accent-muted` | colors | `#eaeaee` | `#313135` |
|
|
17
|
+
| `--platform-colors-app-viewport` | colors | `#fbfbfc` | `#202024` |
|
|
18
|
+
| `--platform-colors-bg` | colors | `#fbfbfc` | `#202024` |
|
|
19
|
+
| `--platform-colors-border` | colors | `#e5e5e9` | `#313135` |
|
|
20
|
+
| `--platform-colors-border-strong` | colors | `#dadade` | `#43434a` |
|
|
21
|
+
| `--platform-colors-chrome-tab-strip` | colors | `#ececef` | `#1b1b1e` |
|
|
22
|
+
| `--platform-colors-chrome-titlebar` | colors | `#fbfbfc` | `#202024` |
|
|
23
|
+
| `--platform-colors-danger` | colors | `#b23a2e` | `#e0796e` |
|
|
24
|
+
| `--platform-colors-divider` | colors | `#e5e5e9` | `#313135` |
|
|
25
|
+
| `--platform-colors-elevated` | colors | `#ffffff` | `#26262a` |
|
|
26
|
+
| `--platform-colors-focus` | colors | `#1b1b1e` | `#e5e5e9` |
|
|
27
|
+
| `--platform-colors-info` | colors | `#3b6fb0` | `#6fa0e0` |
|
|
28
|
+
| `--platform-colors-selection` | colors | `#eaeaee` | `#313135` |
|
|
29
|
+
| `--platform-colors-semantic-blue` | colors | `#3b6fb0` | `#6fa0e0` |
|
|
30
|
+
| `--platform-colors-semantic-blue-border` | colors | `#b9cbe4` | `#365373` |
|
|
31
|
+
| `--platform-colors-semantic-blue-muted` | colors | `#e8f0fb` | `#1c2a3c` |
|
|
32
|
+
| `--platform-colors-semantic-blue-text` | colors | `#244f87` | `#a8c8f0` |
|
|
33
|
+
| `--platform-colors-semantic-green` | colors | `#1f8a55` | `#57b988` |
|
|
34
|
+
| `--platform-colors-semantic-green-border` | colors | `#1f8a55` | `#32684d` |
|
|
35
|
+
| `--platform-colors-semantic-green-muted` | colors | `#eef7f1` | `#18342a` |
|
|
36
|
+
| `--platform-colors-semantic-green-text` | colors | `#16683f` | `#8fe0b6` |
|
|
37
|
+
| `--platform-colors-semantic-orange` | colors | `#c98a2b` | `#e0b257` |
|
|
38
|
+
| `--platform-colors-semantic-orange-border` | colors | `#e3c98f` | `#6d5b2f` |
|
|
39
|
+
| `--platform-colors-semantic-orange-muted` | colors | `#f3e5c8` | `#3a3322` |
|
|
40
|
+
| `--platform-colors-semantic-orange-text` | colors | `#7a5114` | `#f0ce8a` |
|
|
41
|
+
| `--platform-colors-semantic-red` | colors | `#b23a2e` | `#e0796e` |
|
|
42
|
+
| `--platform-colors-semantic-red-border` | colors | `#dfb7b1` | `#753f38` |
|
|
43
|
+
| `--platform-colors-semantic-red-muted` | colors | `#f4dfdc` | `#3a211d` |
|
|
44
|
+
| `--platform-colors-semantic-red-text` | colors | `#8a2d24` | `#f0a89e` |
|
|
45
|
+
| `--platform-colors-success` | colors | `#1f8a55` | `#57b988` |
|
|
46
|
+
| `--platform-colors-surface` | colors | `#f8f8fa` | `#26262a` |
|
|
47
|
+
| `--platform-colors-surface-active` | colors | `#eaeaee` | `#161619` |
|
|
48
|
+
| `--platform-colors-surface-hover` | colors | `#eaeaee` | `#2c2c30` |
|
|
49
|
+
| `--platform-colors-text` | colors | `#1b1b1e` | `#ececef` |
|
|
50
|
+
| `--platform-colors-text-danger` | colors | `#b23a2e` | `#e0796e` |
|
|
51
|
+
| `--platform-colors-text-disabled` | colors | `#9a9aa0` | `#6e6e74` |
|
|
52
|
+
| `--platform-colors-text-inverse` | colors | `#ffffff` | `#1b1b1e` |
|
|
53
|
+
| `--platform-colors-text-secondary` | colors | `#3a3a3e` | `#c9c9cf` |
|
|
54
|
+
| `--platform-colors-warning` | colors | `#c98a2b` | `#e0b257` |
|
|
55
|
+
| `--platform-radius-full` | radius | `999px` | `999px` |
|
|
56
|
+
| `--platform-radius-lg` | radius | `0px` | `0px` |
|
|
57
|
+
| `--platform-radius-md` | radius | `0px` | `0px` |
|
|
58
|
+
| `--platform-radius-sm` | radius | `0px` | `0px` |
|
|
59
|
+
| `--platform-shadow-lg` | shadow | `0 18px 48px rgb(18 18 22 / 0.13)` | `0 18px 44px rgba(0, 0, 0, 0.38)` |
|
|
60
|
+
| `--platform-shadow-md` | shadow | `0 8px 24px rgb(18 18 22 / 0.08)` | `0 8px 24px rgba(0, 0, 0, 0.3)` |
|
|
61
|
+
| `--platform-shadow-sm` | shadow | `none` | `none` |
|
|
62
|
+
| `--platform-spacing-lg` | spacing | `16px` | `16px` |
|
|
63
|
+
| `--platform-spacing-md` | spacing | `12px` | `12px` |
|
|
64
|
+
| `--platform-spacing-sm` | spacing | `8px` | `8px` |
|
|
65
|
+
| `--platform-spacing-xl` | spacing | `24px` | `24px` |
|
|
66
|
+
| `--platform-spacing-xs` | spacing | `4px` | `4px` |
|
|
67
|
+
| `--platform-spacing-xxl` | spacing | `32px` | `32px` |
|
|
68
|
+
| `--platform-transition-base` | transition | `200ms ease` | `200ms ease` |
|
|
69
|
+
| `--platform-transition-fast` | transition | `120ms ease` | `120ms ease` |
|
|
70
|
+
| `--platform-transition-slow` | transition | `320ms ease` | `320ms ease` |
|
|
71
|
+
| `--platform-typography-font-family` | typography | `"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif` | `"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif` |
|
|
72
|
+
| `--platform-typography-font-family-content` | typography | `'Source Serif 4', Georgia, serif` | `'Source Serif 4', Georgia, serif` |
|
|
73
|
+
| `--platform-typography-font-family-mono` | typography | `'JetBrains Mono', ui-monospace, monospace` | `'JetBrains Mono', ui-monospace, monospace` |
|
|
74
|
+
| `--platform-typography-font-size-base` | typography | `14.5px` | `14.5px` |
|
|
75
|
+
| `--platform-typography-font-size-lg` | typography | `17px` | `17px` |
|
|
76
|
+
| `--platform-typography-font-size-sm` | typography | `13px` | `13px` |
|
|
77
|
+
| `--platform-typography-font-size-xl` | typography | `24px` | `24px` |
|
|
78
|
+
| `--platform-typography-font-size-xs` | typography | `11px` | `11px` |
|
|
79
|
+
| `--platform-typography-font-weight-bold` | typography | `600` | `600` |
|
|
80
|
+
| `--platform-typography-font-weight-medium` | typography | `500` | `500` |
|
|
81
|
+
| `--platform-typography-font-weight-normal` | typography | `400` | `400` |
|
|
82
|
+
| `--platform-typography-line-height-base` | typography | `1.6` | `1.6` |
|
|
83
|
+
| `--platform-typography-line-height-tight` | typography | `1.25` | `1.25` |
|
|
84
|
+
| `--platform-z-index-zi-app-base` | zIndex | `0` | `0` |
|
|
85
|
+
| `--platform-z-index-zi-app-chrome` | zIndex | `20` | `20` |
|
|
86
|
+
| `--platform-z-index-zi-app-menus` | zIndex | `100` | `100` |
|
|
87
|
+
| `--platform-z-index-zi-app-modal` | zIndex | `300` | `300` |
|
|
88
|
+
| `--platform-z-index-zi-app-sidebar` | zIndex | `10` | `10` |
|
|
89
|
+
| `--platform-z-index-zi-app-toast` | zIndex | `200` | `200` |
|
|
90
|
+
| `--platform-z-index-zi-app-viewport-toolbar` | zIndex | `25` | `25` |
|
|
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.
|
package/template/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"puredesktop:check": "node scripts/validate-puredesktop-app.mjs"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@puredesktop/puredesktop-ui-bridge": "2.1.
|
|
13
|
+
"@puredesktop/puredesktop-ui-bridge": "2.1.7",
|
|
14
14
|
"react": "^19.1.0",
|
|
15
15
|
"react-dom": "^19.1.0",
|
|
16
16
|
"styled-components": "^6.1.18"
|