@opencode/theme 0.0.0-dev-19793 → 0.0.0-dev-19795
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/dist/tui/defaults.js +125 -125
- package/dist/tui/index.d.ts +1 -1
- package/dist/tui/resolve.d.ts +1 -1
- package/dist/tui/resolve.js +30 -7
- package/dist/tui/syntax.d.ts +2 -2
- package/dist/tui/syntax.js +2 -2
- package/dist/tui/types.d.ts +4 -3
- package/dist/tui/v1-migrate.js +16 -16
- package/package.json +1 -1
package/dist/tui/defaults.js
CHANGED
|
@@ -11,92 +11,92 @@ export const DEFAULT_THEME = {
|
|
|
11
11
|
light: {
|
|
12
12
|
hue: {
|
|
13
13
|
gray: {
|
|
14
|
-
100: "#
|
|
15
|
-
200: "#
|
|
16
|
-
300: "#
|
|
17
|
-
400: "#
|
|
14
|
+
100: "#111827",
|
|
15
|
+
200: "#1f2937",
|
|
16
|
+
300: "#374151",
|
|
17
|
+
400: "#4b5563",
|
|
18
18
|
500: "#6b7280",
|
|
19
|
-
600: "#
|
|
20
|
-
700: "#
|
|
21
|
-
800: "#
|
|
22
|
-
900: "#
|
|
19
|
+
600: "#9ca3af",
|
|
20
|
+
700: "#d1d5db",
|
|
21
|
+
800: "#e5e7eb",
|
|
22
|
+
900: "#f3f4f6",
|
|
23
23
|
},
|
|
24
24
|
red: {
|
|
25
|
-
100: "#
|
|
26
|
-
200: "#
|
|
27
|
-
300: "#
|
|
28
|
-
400: "#
|
|
25
|
+
100: "#7f1d1d",
|
|
26
|
+
200: "#991b1b",
|
|
27
|
+
300: "#b91c1c",
|
|
28
|
+
400: "#dc2626",
|
|
29
29
|
500: "#ef4444",
|
|
30
|
-
600: "#
|
|
31
|
-
700: "#
|
|
32
|
-
800: "#
|
|
33
|
-
900: "#
|
|
30
|
+
600: "#f87171",
|
|
31
|
+
700: "#fca5a5",
|
|
32
|
+
800: "#fecaca",
|
|
33
|
+
900: "#fee2e2",
|
|
34
34
|
},
|
|
35
35
|
orange: {
|
|
36
|
-
100: "#
|
|
37
|
-
200: "#
|
|
38
|
-
300: "#
|
|
39
|
-
400: "#
|
|
36
|
+
100: "#7c2d12",
|
|
37
|
+
200: "#9a3412",
|
|
38
|
+
300: "#c2410c",
|
|
39
|
+
400: "#ea580c",
|
|
40
40
|
500: "#f97316",
|
|
41
|
-
600: "#
|
|
42
|
-
700: "#
|
|
43
|
-
800: "#
|
|
44
|
-
900: "#
|
|
41
|
+
600: "#fb923c",
|
|
42
|
+
700: "#fdba74",
|
|
43
|
+
800: "#fed7aa",
|
|
44
|
+
900: "#ffedd5",
|
|
45
45
|
},
|
|
46
46
|
yellow: {
|
|
47
|
-
100: "#
|
|
48
|
-
200: "#
|
|
49
|
-
300: "#
|
|
50
|
-
400: "#
|
|
47
|
+
100: "#713f12",
|
|
48
|
+
200: "#854d0e",
|
|
49
|
+
300: "#a16207",
|
|
50
|
+
400: "#ca8a04",
|
|
51
51
|
500: "#eab308",
|
|
52
|
-
600: "#
|
|
53
|
-
700: "#
|
|
54
|
-
800: "#
|
|
55
|
-
900: "#
|
|
52
|
+
600: "#facc15",
|
|
53
|
+
700: "#fde047",
|
|
54
|
+
800: "#fef08a",
|
|
55
|
+
900: "#fef9c3",
|
|
56
56
|
},
|
|
57
57
|
green: {
|
|
58
|
-
100: "#
|
|
59
|
-
200: "#
|
|
60
|
-
300: "#
|
|
61
|
-
400: "#
|
|
58
|
+
100: "#14532d",
|
|
59
|
+
200: "#166534",
|
|
60
|
+
300: "#15803d",
|
|
61
|
+
400: "#16a34a",
|
|
62
62
|
500: "#22c55e",
|
|
63
|
-
600: "#
|
|
64
|
-
700: "#
|
|
65
|
-
800: "#
|
|
66
|
-
900: "#
|
|
63
|
+
600: "#4ade80",
|
|
64
|
+
700: "#86efac",
|
|
65
|
+
800: "#bbf7d0",
|
|
66
|
+
900: "#dcfce7",
|
|
67
67
|
},
|
|
68
68
|
cyan: {
|
|
69
|
-
100: "#
|
|
70
|
-
200: "#
|
|
71
|
-
300: "#
|
|
72
|
-
400: "#
|
|
69
|
+
100: "#164e63",
|
|
70
|
+
200: "#155e75",
|
|
71
|
+
300: "#0e7490",
|
|
72
|
+
400: "#0891b2",
|
|
73
73
|
500: "#06b6d4",
|
|
74
|
-
600: "#
|
|
75
|
-
700: "#
|
|
76
|
-
800: "#
|
|
77
|
-
900: "#
|
|
74
|
+
600: "#22d3ee",
|
|
75
|
+
700: "#67e8f9",
|
|
76
|
+
800: "#a5f3fc",
|
|
77
|
+
900: "#cffafe",
|
|
78
78
|
},
|
|
79
79
|
blue: {
|
|
80
|
-
100: "#
|
|
81
|
-
200: "#
|
|
82
|
-
300: "#
|
|
83
|
-
400: "#
|
|
80
|
+
100: "#1e3a8a",
|
|
81
|
+
200: "#1e40af",
|
|
82
|
+
300: "#1d4ed8",
|
|
83
|
+
400: "#2563eb",
|
|
84
84
|
500: "#3b82f6",
|
|
85
|
-
600: "#
|
|
86
|
-
700: "#
|
|
87
|
-
800: "#
|
|
88
|
-
900: "#
|
|
85
|
+
600: "#60a5fa",
|
|
86
|
+
700: "#93c5fd",
|
|
87
|
+
800: "#bfdbfe",
|
|
88
|
+
900: "#dbeafe",
|
|
89
89
|
},
|
|
90
90
|
purple: {
|
|
91
|
-
100: "#
|
|
92
|
-
200: "#
|
|
93
|
-
300: "#
|
|
94
|
-
400: "#
|
|
91
|
+
100: "#581c87",
|
|
92
|
+
200: "#6b21a8",
|
|
93
|
+
300: "#7e22ce",
|
|
94
|
+
400: "#9333ea",
|
|
95
95
|
500: "#a855f7",
|
|
96
|
-
600: "#
|
|
97
|
-
700: "#
|
|
98
|
-
800: "#
|
|
99
|
-
900: "#
|
|
96
|
+
600: "#c084fc",
|
|
97
|
+
700: "#d8b4fe",
|
|
98
|
+
800: "#e9d5ff",
|
|
99
|
+
900: "#f3e8ff",
|
|
100
100
|
},
|
|
101
101
|
accent: "$hue.blue",
|
|
102
102
|
interactive: "$hue.blue",
|
|
@@ -104,64 +104,64 @@ export const DEFAULT_THEME = {
|
|
|
104
104
|
},
|
|
105
105
|
categorical: DEFAULT_CATEGORICAL,
|
|
106
106
|
text: {
|
|
107
|
-
default: "$hue.neutral.
|
|
108
|
-
subdued: "$hue.neutral.
|
|
107
|
+
default: "$hue.neutral.200",
|
|
108
|
+
subdued: "$hue.neutral.400",
|
|
109
109
|
action: {
|
|
110
|
-
primary: { default: "$hue.neutral.
|
|
110
|
+
primary: { default: "$hue.neutral.800", $disabled: "$hue.neutral.500" },
|
|
111
111
|
secondary: { default: "$text.subdued", $hovered: "$text.default" },
|
|
112
|
-
destructive: { default: "$hue.red.
|
|
112
|
+
destructive: { default: "$hue.red.800", $disabled: "$hue.neutral.500" },
|
|
113
113
|
},
|
|
114
114
|
formfield: {
|
|
115
|
-
default: "$hue.neutral.
|
|
115
|
+
default: "$hue.neutral.200",
|
|
116
116
|
$focused: "$text.action.primary.default",
|
|
117
|
-
$pressed: "$hue.neutral.
|
|
117
|
+
$pressed: "$hue.neutral.800",
|
|
118
118
|
$disabled: "$hue.neutral.500",
|
|
119
|
-
$selected: "$hue.interactive.
|
|
119
|
+
$selected: "$hue.interactive.300",
|
|
120
120
|
},
|
|
121
121
|
status: {
|
|
122
|
-
running: "$hue.interactive.
|
|
122
|
+
running: "$hue.interactive.200",
|
|
123
123
|
question: "$text.status.unread",
|
|
124
124
|
permission: "$text.status.unread",
|
|
125
|
-
unread: "$hue.accent.
|
|
125
|
+
unread: "$hue.accent.200",
|
|
126
126
|
},
|
|
127
127
|
feedback: {
|
|
128
|
-
error: { default: "$hue.red.
|
|
129
|
-
warning: { default: "$hue.yellow.
|
|
130
|
-
success: { default: "$hue.green.
|
|
131
|
-
info: { default: "$hue.cyan.
|
|
128
|
+
error: { default: "$hue.red.300", subdued: "$hue.red.400" },
|
|
129
|
+
warning: { default: "$hue.yellow.200", subdued: "$hue.yellow.300" },
|
|
130
|
+
success: { default: "$hue.green.300", subdued: "$hue.green.400" },
|
|
131
|
+
info: { default: "$hue.cyan.300", subdued: "$hue.cyan.400" },
|
|
132
132
|
},
|
|
133
133
|
},
|
|
134
134
|
background: {
|
|
135
|
-
default: "$hue.neutral.
|
|
135
|
+
default: "$hue.neutral.800",
|
|
136
136
|
raised: {
|
|
137
|
-
base: "$hue.neutral.
|
|
138
|
-
high: "$hue.neutral.
|
|
137
|
+
base: "$hue.neutral.700",
|
|
138
|
+
high: "$hue.neutral.600",
|
|
139
139
|
max: "$hue.neutral.500",
|
|
140
140
|
},
|
|
141
141
|
action: {
|
|
142
142
|
primary: {
|
|
143
|
-
default: "$hue.interactive.
|
|
144
|
-
$hovered: "$hue.interactive.
|
|
145
|
-
$focused: "$hue.interactive.
|
|
146
|
-
$pressed: "$hue.interactive.
|
|
147
|
-
$selected: "$hue.interactive.
|
|
148
|
-
$disabled: "$hue.neutral.
|
|
143
|
+
default: "$hue.interactive.400",
|
|
144
|
+
$hovered: "$hue.interactive.300",
|
|
145
|
+
$focused: "$hue.interactive.300",
|
|
146
|
+
$pressed: "$hue.interactive.200",
|
|
147
|
+
$selected: "$hue.interactive.300",
|
|
148
|
+
$disabled: "$hue.neutral.700",
|
|
149
149
|
},
|
|
150
150
|
secondary: { default: "transparent" },
|
|
151
151
|
destructive: {
|
|
152
|
-
default: "$hue.red.
|
|
153
|
-
$hovered: "$hue.red.
|
|
154
|
-
$focused: "$hue.red.
|
|
155
|
-
$pressed: "$hue.red.
|
|
156
|
-
$selected: "$hue.red.
|
|
157
|
-
$disabled: "$hue.neutral.
|
|
152
|
+
default: "$hue.red.400",
|
|
153
|
+
$hovered: "$hue.red.300",
|
|
154
|
+
$focused: "$hue.red.300",
|
|
155
|
+
$pressed: "$hue.red.200",
|
|
156
|
+
$selected: "$hue.red.300",
|
|
157
|
+
$disabled: "$hue.neutral.700",
|
|
158
158
|
},
|
|
159
159
|
},
|
|
160
160
|
formfield: {
|
|
161
161
|
default: "$background.default",
|
|
162
162
|
$hovered: "$background.raised.base",
|
|
163
163
|
$focused: "$background.action.primary.default",
|
|
164
|
-
$pressed: "$hue.interactive.
|
|
164
|
+
$pressed: "$hue.interactive.200",
|
|
165
165
|
$disabled: "$background.default",
|
|
166
166
|
$selected: "$background.formfield.default",
|
|
167
167
|
},
|
|
@@ -172,51 +172,51 @@ export const DEFAULT_THEME = {
|
|
|
172
172
|
info: { default: "$background.default" },
|
|
173
173
|
},
|
|
174
174
|
},
|
|
175
|
-
border: { default: "$hue.neutral.
|
|
176
|
-
scrollbar: { default: "$hue.neutral.
|
|
175
|
+
border: { default: "$hue.neutral.700" },
|
|
176
|
+
scrollbar: { default: "$hue.neutral.600" },
|
|
177
177
|
diff: {
|
|
178
178
|
text: {
|
|
179
|
-
added: "$hue.green.
|
|
180
|
-
removed: "$hue.red.
|
|
181
|
-
context: "$hue.neutral.
|
|
182
|
-
hunkHeader: "$hue.purple.
|
|
179
|
+
added: "$hue.green.300",
|
|
180
|
+
removed: "$hue.red.300",
|
|
181
|
+
context: "$hue.neutral.100",
|
|
182
|
+
hunkHeader: "$hue.purple.400",
|
|
183
183
|
},
|
|
184
|
-
background: { added: "$hue.green.
|
|
185
|
-
highlight: { added: "$hue.green.
|
|
184
|
+
background: { added: "$hue.green.900", removed: "$hue.red.900", context: "$hue.neutral.900" },
|
|
185
|
+
highlight: { added: "$hue.green.400", removed: "$hue.red.400" },
|
|
186
186
|
lineNumber: {
|
|
187
|
-
text: "$hue.neutral.
|
|
188
|
-
background: { added: "$hue.green.
|
|
187
|
+
text: "$hue.neutral.400",
|
|
188
|
+
background: { added: "$hue.green.800", removed: "$hue.red.800" },
|
|
189
189
|
},
|
|
190
190
|
},
|
|
191
191
|
syntax: {
|
|
192
|
-
comment: "$hue.neutral.
|
|
193
|
-
keyword: "$hue.purple.
|
|
194
|
-
function: "$hue.accent.
|
|
195
|
-
variable: "$hue.neutral.
|
|
196
|
-
string: "$hue.green.
|
|
197
|
-
number: "$hue.yellow.
|
|
192
|
+
comment: "$hue.neutral.400",
|
|
193
|
+
keyword: "$hue.purple.400",
|
|
194
|
+
function: "$hue.accent.400",
|
|
195
|
+
variable: "$hue.neutral.100",
|
|
196
|
+
string: "$hue.green.300",
|
|
197
|
+
number: "$hue.yellow.200",
|
|
198
198
|
type: "$hue.yellow.500",
|
|
199
|
-
operator: "$hue.cyan.
|
|
200
|
-
punctuation: "$hue.neutral.
|
|
199
|
+
operator: "$hue.cyan.400",
|
|
200
|
+
punctuation: "$hue.neutral.100",
|
|
201
201
|
},
|
|
202
202
|
markdown: {
|
|
203
|
-
text: "$hue.neutral.
|
|
204
|
-
heading: "$hue.purple.
|
|
205
|
-
link: "$hue.accent.
|
|
206
|
-
linkText: "$hue.cyan.
|
|
207
|
-
code: "$hue.green.
|
|
208
|
-
blockQuote: "$hue.neutral.
|
|
203
|
+
text: "$hue.neutral.100",
|
|
204
|
+
heading: "$hue.purple.400",
|
|
205
|
+
link: "$hue.accent.400",
|
|
206
|
+
linkText: "$hue.cyan.400",
|
|
207
|
+
code: "$hue.green.300",
|
|
208
|
+
blockQuote: "$hue.neutral.400",
|
|
209
209
|
emphasis: "$hue.yellow.500",
|
|
210
|
-
strong: "$hue.neutral.
|
|
211
|
-
horizontalRule: "$hue.neutral.
|
|
212
|
-
listItem: "$hue.accent.
|
|
213
|
-
listEnumeration: "$hue.cyan.
|
|
214
|
-
image: "$hue.accent.
|
|
215
|
-
imageText: "$hue.cyan.
|
|
216
|
-
codeBlock: "$hue.neutral.
|
|
210
|
+
strong: "$hue.neutral.100",
|
|
211
|
+
horizontalRule: "$hue.neutral.700",
|
|
212
|
+
listItem: "$hue.accent.400",
|
|
213
|
+
listEnumeration: "$hue.cyan.400",
|
|
214
|
+
image: "$hue.accent.400",
|
|
215
|
+
imageText: "$hue.cyan.400",
|
|
216
|
+
codeBlock: "$hue.neutral.100",
|
|
217
217
|
},
|
|
218
218
|
"@dialog": {
|
|
219
|
-
text: { action: { primary: { default: "$hue.neutral.
|
|
219
|
+
text: { action: { primary: { default: "$hue.neutral.900" } } },
|
|
220
220
|
background: {
|
|
221
221
|
default: "$background.raised.base",
|
|
222
222
|
action: { primary: { default: "$hue.interactive.500", $hovered: "$background.raised.high" } },
|
package/dist/tui/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { ActionState, type ActionStateKey, ActionVariant, BaseHue, CategoricalDefinition, FeedbackKind, FormfieldState, type FormfieldStateKey, HueAlias, HueName, HueStep, MarkdownDefinition, MarkdownToken, ModeDefinition, SurfaceName, SyntaxDefinition, SyntaxToken, ThemeDefinition, ThemeDocument, type BackgroundDefinition, type DiffDefinition, type FileThemeDefinition, type FormfieldColorDefinition, type HueDefinition, type HueOverrideDefinition, type MergeModeDefinition, type Mode, type StatefulColorDefinition, type TextDefinition, type ThemeTokensDefinition, } from "./schema.js";
|
|
2
|
-
export type { Categorical, FormfieldColor, Hue, HueSource, HueScale, ResolvedActionState, ResolvedFormfieldState, ResolvedTheme, ResolvedThemeTokens, StatefulColor, } from "./types.js";
|
|
2
|
+
export type { ActionStates, Categorical, FormfieldColor, Hue, HueSource, HueScale, ResolvedActionState, ResolvedFormfieldState, ResolvedTheme, ResolvedThemeTokens, StatefulColor, } from "./types.js";
|
|
3
3
|
export { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults.js";
|
|
4
4
|
export { expandTheme } from "./expand.js";
|
|
5
5
|
export { migrateV1 } from "./v1-migrate.js";
|
package/dist/tui/resolve.d.ts
CHANGED
|
@@ -2,4 +2,4 @@ import { ThemeDefinition, ThemeDocument } from "./schema.js";
|
|
|
2
2
|
import type { Mode, ResolvedTheme } from "./index.js";
|
|
3
3
|
export declare function themeDecodeError(error: unknown, name: string): Error;
|
|
4
4
|
export declare function resolveThemeDocument(document: ThemeDocument, mode?: Mode): ResolvedTheme;
|
|
5
|
-
export declare function resolveTheme(definition: ThemeDefinition
|
|
5
|
+
export declare function resolveTheme(definition: ThemeDefinition): ResolvedTheme;
|
package/dist/tui/resolve.js
CHANGED
|
@@ -30,21 +30,19 @@ export function resolveThemeDocument(document, mode) {
|
|
|
30
30
|
return resolveExpandedTheme({
|
|
31
31
|
...merged,
|
|
32
32
|
categorical: merged["categorical"] ?? DEFAULT_CATEGORICAL,
|
|
33
|
-
}
|
|
33
|
+
});
|
|
34
34
|
}
|
|
35
|
-
export function resolveTheme(definition
|
|
36
|
-
return resolveExpandedTheme(expandTheme(decodeThemeDefinition(definition))
|
|
35
|
+
export function resolveTheme(definition) {
|
|
36
|
+
return resolveExpandedTheme(expandTheme(decodeThemeDefinition(definition)));
|
|
37
37
|
}
|
|
38
|
-
function resolveExpandedTheme(definition
|
|
38
|
+
function resolveExpandedTheme(definition) {
|
|
39
39
|
const hue = resolveHue(definition.hue);
|
|
40
40
|
const categorical = (definition.categorical ?? DEFAULT_CATEGORICAL).map((name) => hue[name]);
|
|
41
41
|
const hueSteps = compileHueSteps(hue);
|
|
42
|
-
const raise = (color) => (mode === "light" ? hueSteps.increase(color) : hueSteps.decrease(color));
|
|
43
42
|
const base = tokens(definition);
|
|
44
43
|
const views = {};
|
|
45
44
|
const view = (tokens) => ({
|
|
46
45
|
...resolveView(tokens, hue, categorical, hueSteps),
|
|
47
|
-
raise,
|
|
48
46
|
surface: (name) => views[name],
|
|
49
47
|
});
|
|
50
48
|
views.dialog = definition["@dialog"] ? view(contextualize(base, definition["@dialog"])) : view(base);
|
|
@@ -92,7 +90,32 @@ function contextualActions(base, surface) {
|
|
|
92
90
|
}
|
|
93
91
|
function resolveView(definition, hue, categorical, hueSteps) {
|
|
94
92
|
const source = { hue, ...definition };
|
|
95
|
-
|
|
93
|
+
const resolved = createResolver(source)(source, "theme");
|
|
94
|
+
return {
|
|
95
|
+
...resolved,
|
|
96
|
+
hue,
|
|
97
|
+
categorical,
|
|
98
|
+
text: {
|
|
99
|
+
...resolved.text,
|
|
100
|
+
action: statefulActions(resolved.text.action),
|
|
101
|
+
formfield: statefulColor(resolved.text.formfield),
|
|
102
|
+
},
|
|
103
|
+
background: {
|
|
104
|
+
...resolved.background,
|
|
105
|
+
action: statefulActions(resolved.background.action),
|
|
106
|
+
formfield: statefulColor(resolved.background.formfield),
|
|
107
|
+
},
|
|
108
|
+
...hueSteps,
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
function statefulActions(actions) {
|
|
112
|
+
return Object.fromEntries(ActionVariant.literals.map((variant) => [variant, statefulColor(actions[variant])]));
|
|
113
|
+
}
|
|
114
|
+
function statefulColor(color) {
|
|
115
|
+
return {
|
|
116
|
+
...color,
|
|
117
|
+
state: (states) => color[ActionState.literals.find((state) => states[state]) ?? "default"],
|
|
118
|
+
};
|
|
96
119
|
}
|
|
97
120
|
function compileHueSteps(hue) {
|
|
98
121
|
const index = new WeakMap();
|
package/dist/tui/syntax.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { SyntaxStyle } from "@opentui/core";
|
|
2
|
-
import type {
|
|
3
|
-
export declare function generateSyntax(theme: ResolvedThemeTokens
|
|
2
|
+
import type { ResolvedThemeTokens } from "./index.js";
|
|
3
|
+
export declare function generateSyntax(theme: ResolvedThemeTokens): SyntaxStyle;
|
package/dist/tui/syntax.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SyntaxStyle } from "@opentui/core";
|
|
2
|
-
export function generateSyntax(theme
|
|
3
|
-
const step =
|
|
2
|
+
export function generateSyntax(theme) {
|
|
3
|
+
const step = 200;
|
|
4
4
|
const syntax = theme.syntax;
|
|
5
5
|
const markdown = theme.markdown;
|
|
6
6
|
const feedback = theme.text.feedback;
|
package/dist/tui/types.d.ts
CHANGED
|
@@ -9,7 +9,10 @@ export type HueSource = Readonly<{
|
|
|
9
9
|
step: HueStep;
|
|
10
10
|
}>;
|
|
11
11
|
export type Categorical = readonly HueScale[];
|
|
12
|
-
export type
|
|
12
|
+
export type ActionStates = Readonly<Partial<Record<ActionState, boolean>>>;
|
|
13
|
+
export type StatefulColor = Readonly<Record<ResolvedActionState, RGBA>> & {
|
|
14
|
+
readonly state: (states: ActionStates) => RGBA;
|
|
15
|
+
};
|
|
13
16
|
export type FormfieldColor = StatefulColor;
|
|
14
17
|
export type ResolvedThemeTokens = {
|
|
15
18
|
readonly hue: Hue;
|
|
@@ -80,8 +83,6 @@ export type ResolvedThemeTokens = {
|
|
|
80
83
|
readonly markdown: Readonly<Record<MarkdownToken, RGBA>>;
|
|
81
84
|
};
|
|
82
85
|
export type ResolvedTheme = ResolvedThemeTokens & {
|
|
83
|
-
/** Lift a ramp color one step away from the background: lighter in light mode, darker in dark mode. */
|
|
84
|
-
readonly raise: (color: RGBA) => RGBA;
|
|
85
86
|
/** The same theme re-resolved on a raised surface. Absolute: every view's surfaces are the base theme's. */
|
|
86
87
|
readonly surface: (name: SurfaceName) => ResolvedTheme;
|
|
87
88
|
};
|
package/dist/tui/v1-migrate.js
CHANGED
|
@@ -41,16 +41,16 @@ function migrateMode(theme, mode) {
|
|
|
41
41
|
return hue ? [hue] : [];
|
|
42
42
|
});
|
|
43
43
|
const uniqueCategorical = categorical.filter((hue, index) => categorical.indexOf(hue) === index);
|
|
44
|
-
const text =
|
|
45
|
-
const textMuted =
|
|
46
|
-
const primary =
|
|
47
|
-
const background =
|
|
48
|
-
const backgroundPanel =
|
|
49
|
-
const backgroundMenu =
|
|
44
|
+
const text = "$hue.neutral.200";
|
|
45
|
+
const textMuted = "$hue.neutral.400";
|
|
46
|
+
const primary = "$hue.interactive.200";
|
|
47
|
+
const background = "$hue.neutral.800";
|
|
48
|
+
const backgroundPanel = "$hue.neutral.700";
|
|
49
|
+
const backgroundMenu = "$hue.neutral.600";
|
|
50
50
|
const backgroundRaisedMax = "$hue.neutral.500";
|
|
51
51
|
return referenceHues({
|
|
52
52
|
hue: {
|
|
53
|
-
gray: neutralScale(theme
|
|
53
|
+
gray: neutralScale(theme),
|
|
54
54
|
...Object.fromEntries(chromaticHues.map((name) => {
|
|
55
55
|
const match = hues.byHue[name];
|
|
56
56
|
return [name, match ? hueScale(match.color, mode) : "$hue.gray"];
|
|
@@ -259,7 +259,7 @@ function inferHue(color, mode) {
|
|
|
259
259
|
const value = toOklch(color);
|
|
260
260
|
if (ambiguous(color, value.c))
|
|
261
261
|
return;
|
|
262
|
-
const anchor = inferenceAnchor(value.l);
|
|
262
|
+
const anchor = inferenceAnchor(value.l, mode);
|
|
263
263
|
return chromaticHues
|
|
264
264
|
.map((name) => ({
|
|
265
265
|
name,
|
|
@@ -267,7 +267,9 @@ function inferHue(color, mode) {
|
|
|
267
267
|
}))
|
|
268
268
|
.sort((first, second) => first.distance - second.distance)[0];
|
|
269
269
|
}
|
|
270
|
-
function inferenceAnchor(lightness) {
|
|
270
|
+
function inferenceAnchor(lightness, mode) {
|
|
271
|
+
if (mode === "light")
|
|
272
|
+
return lightness >= lightThreshold ? 700 : 300;
|
|
271
273
|
return lightness >= lightThreshold ? 300 : 700;
|
|
272
274
|
}
|
|
273
275
|
function hueDistance(first, second) {
|
|
@@ -327,13 +329,13 @@ function selectedForeground(theme, background) {
|
|
|
327
329
|
}
|
|
328
330
|
function hueScale(color, mode) {
|
|
329
331
|
const value = toOklch(color);
|
|
330
|
-
const anchor =
|
|
332
|
+
const anchor = 200;
|
|
331
333
|
const endpoint = mode === "light" ? Math.max(0.97, value.l) : Math.min(0.18, value.l);
|
|
332
334
|
const alpha = color.toInts()[3];
|
|
333
335
|
return Object.fromEntries(HueStep.literals.map((step) => {
|
|
334
336
|
if (step === anchor)
|
|
335
337
|
return [step, hex(color)];
|
|
336
|
-
const progress =
|
|
338
|
+
const progress = (step - anchor) / (900 - anchor);
|
|
337
339
|
const generated = oklchToHex({
|
|
338
340
|
l: value.l + (endpoint - value.l) * progress,
|
|
339
341
|
c: value.c * (1 - progress * 0.5),
|
|
@@ -342,8 +344,8 @@ function hueScale(color, mode) {
|
|
|
342
344
|
return [step, alpha === 255 ? generated : `${generated}${byte(alpha)}`];
|
|
343
345
|
}));
|
|
344
346
|
}
|
|
345
|
-
function neutralScale(theme
|
|
346
|
-
const anchors = neutralAnchors(theme
|
|
347
|
+
function neutralScale(theme) {
|
|
348
|
+
const anchors = neutralAnchors(theme);
|
|
347
349
|
return Object.fromEntries(HueStep.literals.map((step) => {
|
|
348
350
|
const exact = anchors.find((anchor) => anchor.step === step);
|
|
349
351
|
if (exact)
|
|
@@ -358,7 +360,7 @@ function neutralScale(theme, mode) {
|
|
|
358
360
|
return [step, interpolate(lower.color, upper.color, (step - lower.step) / (upper.step - lower.step))];
|
|
359
361
|
}));
|
|
360
362
|
}
|
|
361
|
-
function neutralAnchors(theme
|
|
363
|
+
function neutralAnchors(theme) {
|
|
362
364
|
const light = [
|
|
363
365
|
{ step: 200, color: theme.background },
|
|
364
366
|
{ step: 300, color: theme.backgroundPanel },
|
|
@@ -366,8 +368,6 @@ function neutralAnchors(theme, mode) {
|
|
|
366
368
|
{ step: 600, color: theme.textMuted },
|
|
367
369
|
{ step: 800, color: theme.text },
|
|
368
370
|
];
|
|
369
|
-
if (mode === "light")
|
|
370
|
-
return light;
|
|
371
371
|
return light.toReversed().map((source) => ({ ...source, step: (1000 - source.step) }));
|
|
372
372
|
}
|
|
373
373
|
function interpolate(first, second, amount) {
|