@xeonr/platform-ui 0.3.16 → 0.3.17
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/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -0
- package/dist/index.js.map +1 -1
- package/dist/theme/ThemeProvider.d.ts +21 -1
- package/dist/theme/ThemeProvider.d.ts.map +1 -1
- package/dist/theme/ThemeProvider.js +18 -3
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/brand.d.ts +49 -0
- package/dist/theme/brand.d.ts.map +1 -0
- package/dist/theme/brand.js +215 -0
- package/dist/theme/brand.js.map +1 -0
- package/dist/theme/tokens.js +6 -6
- package/package.json +1 -1
- package/scripts/check-colour-literals.mjs +5 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { BRAND, GRAD, GRAD_90, cssVariables, globalCss, v } from "./theme/tokens.ts";
|
|
2
2
|
export { AppThemeProvider, useTheme, useThemeMaybe, type ThemePref, type AppThemeProviderProps } from "./theme/ThemeProvider.tsx";
|
|
3
|
+
export { brandCss, brandRamp, type BrandRamp } from "./theme/brand.ts";
|
|
3
4
|
export { Icon, extendIcons, type IconName } from "./kit/Icon.tsx";
|
|
4
5
|
export { AppButton, IconButton, ButtonRow, type AppButtonProps } from "./kit/Button.tsx";
|
|
5
6
|
export { StatusPill, Tag, LiveDot, InitialsTile, RemovableTag, type Tone } from "./kit/Badge.tsx";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,SAAS,EAAE,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -4,6 +4,11 @@
|
|
|
4
4
|
// light), the tri-state ThemeProvider, and `v` for styled-components.
|
|
5
5
|
export { BRAND, GRAD, GRAD_90, cssVariables, globalCss, v } from "./theme/tokens.js";
|
|
6
6
|
export { AppThemeProvider, useTheme, useThemeMaybe } from "./theme/ThemeProvider.js";
|
|
7
|
+
// Per-product branding: derive the whole --x-brand family from one registry
|
|
8
|
+
// hex, so a console wears its product's colour. @xeonr/console-shell applies
|
|
9
|
+
// this for anything mounting the shell; `brandCss` is for SSR hosts that inline
|
|
10
|
+
// the sheet themselves.
|
|
11
|
+
export { brandCss, brandRamp } from "./theme/brand.js";
|
|
7
12
|
// Kit: the same names and props container-platform/ui and functions/ui use,
|
|
8
13
|
// so adopting the package is an import-path change.
|
|
9
14
|
export { Icon, extendIcons } from "./kit/Icon.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,EAAE;AACF,2EAA2E;AAC3E,sEAAsE;AACtE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,aAAa,EAA8C,MAAM,0BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,EAAE;AACF,2EAA2E;AAC3E,sEAAsE;AACtE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,aAAa,EAA8C,MAAM,0BAA2B,CAAC;AAClI,4EAA4E;AAC5E,6EAA6E;AAC7E,gFAAgF;AAChF,wBAAwB;AACxB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAkB,MAAM,kBAAkB,CAAC;AAEvE,4EAA4E;AAC5E,oDAAoD;AACpD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAiB,MAAM,eAAgB,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAuB,MAAM,iBAAkB,CAAC;AACzF,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAa,MAAM,gBAAiB,CAAC;AAClG,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,gBAAiB,CAAC;AAC3H,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAoB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAkB,CAAC;AAC1C,OAAO,EACL,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EACtE,WAAW,EAAE,WAAW,EAAE,WAAW,EACrC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAe,QAAQ,EAAE,UAAU,GAC9D,MAAM,eAAgB,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gBAAiB,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAe,MAAM,oBAAqB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAC;AACpG,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,uBAAwB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAgB,MAAM,kBAAmB,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAc,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAkB,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAkB,MAAM,gBAAiB,CAAC;AAEtF,4EAA4E;AAC5E,oDAAoD;AACpD,OAAO,EACL,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAC7C,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,GACvD,MAAM,eAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,eAAgB,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,eAAgB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAgB,CAAC;AACtE,OAAO,EACL,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAC5E,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAClE,aAAa,EAAE,cAAc,EAAE,WAAW,GAC3C,MAAM,iBAAkB,CAAC;AAE1B,0EAA0E;AAC1E,6DAA6D;AAC7D,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAoB,MAAM,gBAAiB,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAoC,MAAM,gBAAiB,CAAC;AACvK,OAAO,EAAE,SAAS,EAAE,SAAS,EAA0D,MAAM,iBAAkB,CAAC;AAEhH,4EAA4E;AAC5E,2CAA2C;AAC3C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAsB,MAAM,eAAgB,CAAC;AAExE,yEAAyE;AACzE,0EAA0E;AAC1E,8EAA8E;AAC9E,2BAA2B;AAC3B,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,iBAAkB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAgB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAoB,MAAM,mBAAoB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAyB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAkB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAiC,MAAM,mBAAoB,CAAC;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,qCAAqC;AACrC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAqB,MAAM,kBAAmB,CAAC;AACpH,OAAO,EACL,QAAQ,GACT,MAAM,mBAAoB,CAAC;AAE5B,4EAA4E;AAC5E,+EAA+E;AAC/E,+CAA+C;AAC/C,OAAO,EAAE,KAAK,EAAmB,MAAM,gBAAiB,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAkB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAmB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAkB,MAAM,gBAAiB,CAAC;AACtG,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAoB,CAAC;AACnD,+EAA+E;AAC/E,4CAA4C"}
|
|
@@ -6,6 +6,18 @@ interface ThemeCtx {
|
|
|
6
6
|
setPref: (p: ThemePref) => void;
|
|
7
7
|
/** system → the opposite of what's resolved → … (the rail's theme button) */
|
|
8
8
|
cycle: () => void;
|
|
9
|
+
/**
|
|
10
|
+
* The product brand colour currently overriding the platform violet, or null
|
|
11
|
+
* when this console wears the platform's own. See `setBrand`.
|
|
12
|
+
*/
|
|
13
|
+
brand: string | null;
|
|
14
|
+
/**
|
|
15
|
+
* Re-point the whole --x-brand family at one hex (see theme/brand.ts), or
|
|
16
|
+
* null to restore the platform violet. @xeonr/console-shell calls this with
|
|
17
|
+
* the registry colour for the console it is mounted in, which is why a
|
|
18
|
+
* product console turns its own colour without the host wiring anything.
|
|
19
|
+
*/
|
|
20
|
+
setBrand: (hex: string | null) => void;
|
|
9
21
|
}
|
|
10
22
|
export interface AppThemeProviderProps {
|
|
11
23
|
children: ReactNode;
|
|
@@ -20,8 +32,16 @@ export interface AppThemeProviderProps {
|
|
|
20
32
|
onPrefChange?: ((pref: ThemePref) => void) | undefined;
|
|
21
33
|
/** false when the host inlines `globalCss()` itself (SSR without a styled sheet). */
|
|
22
34
|
globalStyle?: boolean | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* The product's brand colour, as the FIRST-PAINT value. Optional: a console
|
|
37
|
+
* mounting @xeonr/console-shell gets it from the product registry as soon as
|
|
38
|
+
* that loads, so passing it here only buys the window before then — which is
|
|
39
|
+
* the window in which the chrome would otherwise flash platform violet.
|
|
40
|
+
* Server-rendered hosts should also inline `brandCss(colour)` in <head>.
|
|
41
|
+
*/
|
|
42
|
+
brand?: string | null | undefined;
|
|
23
43
|
}
|
|
24
|
-
export declare function AppThemeProvider({ children, storageKey, initialPref, onPrefChange, globalStyle, }: AppThemeProviderProps): import("react").JSX.Element;
|
|
44
|
+
export declare function AppThemeProvider({ children, storageKey, initialPref, onPrefChange, globalStyle, brand: initialBrand, }: AppThemeProviderProps): import("react").JSX.Element;
|
|
25
45
|
export declare function useTheme(): ThemeCtx;
|
|
26
46
|
/** Null outside a provider — for a component that may render in either place. */
|
|
27
47
|
export declare function useThemeMaybe(): ThemeCtx | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiB7G,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAMpD,UAAU,QAAQ;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,OAAO,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAChC,6EAA6E;IAC7E,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AA0BD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACpC,oFAAoF;IACpF,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,qFAAqF;IACrF,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACnC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAgC,EAChC,WAAW,EACX,YAAY,EACZ,WAAkB,EAClB,KAAK,EAAE,YAAmB,GAC3B,EAAE,qBAAqB,+BAsEvB;AAED,wBAAgB,QAAQ,IAAI,QAAQ,CAInC;AAED,iFAAiF;AACjF,wBAAgB,aAAa,IAAI,QAAQ,GAAG,IAAI,CAE/C"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
3
3
|
import { createGlobalStyle } from "styled-components";
|
|
4
|
+
import { brandCss } from "./brand.js";
|
|
4
5
|
import { cssVariables, globalCss } from "./tokens.js";
|
|
5
6
|
// One preference for every console: the key is shared so a theme choice on
|
|
6
7
|
// one product host is picked up by the next (same-origin storage only — the
|
|
@@ -28,10 +29,18 @@ function storedPref(key) {
|
|
|
28
29
|
return undefined;
|
|
29
30
|
}
|
|
30
31
|
}
|
|
31
|
-
export function AppThemeProvider({ children, storageKey = DEFAULT_STORAGE_KEY, initialPref, onPrefChange, globalStyle = true, }) {
|
|
32
|
+
export function AppThemeProvider({ children, storageKey = DEFAULT_STORAGE_KEY, initialPref, onPrefChange, globalStyle = true, brand: initialBrand = null, }) {
|
|
32
33
|
const STORAGE_KEY = storageKey;
|
|
33
34
|
const [pref, setPrefState] = useState(() => storedPref(STORAGE_KEY) ?? normalise(initialPref));
|
|
34
35
|
const [sys, setSys] = useState(() => (hasDOM ? systemScheme() : "dark"));
|
|
36
|
+
const [brand, setBrand] = useState(initialBrand);
|
|
37
|
+
// A host that changes its `brand` prop (a console that only learns its colour
|
|
38
|
+
// after a fetch of its own) is followed; a later setBrand from the shell still
|
|
39
|
+
// wins, because that is the registry talking.
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (initialBrand)
|
|
42
|
+
setBrand(initialBrand);
|
|
43
|
+
}, [initialBrand]);
|
|
35
44
|
useEffect(() => {
|
|
36
45
|
if (!hasDOM || typeof window.matchMedia !== "function")
|
|
37
46
|
return;
|
|
@@ -75,8 +84,8 @@ export function AppThemeProvider({ children, storageKey = DEFAULT_STORAGE_KEY, i
|
|
|
75
84
|
const cycle = useCallback(() => {
|
|
76
85
|
setPref(pref === "system" ? (resolved === "dark" ? "light" : "dark") : pref === "dark" ? "light" : "system");
|
|
77
86
|
}, [pref, resolved, setPref]);
|
|
78
|
-
const ctx = useMemo(() => ({ pref, resolved, setPref, cycle }), [pref, resolved, setPref, cycle]);
|
|
79
|
-
return (_jsxs(Ctx.Provider, { value: ctx, children: [globalStyle ? _jsx(GlobalStyle, {}) : null, children] }));
|
|
87
|
+
const ctx = useMemo(() => ({ pref, resolved, setPref, cycle, brand, setBrand }), [pref, resolved, setPref, cycle, brand]);
|
|
88
|
+
return (_jsxs(Ctx.Provider, { value: ctx, children: [globalStyle ? _jsx(GlobalStyle, {}) : null, brand ? _jsx(BrandStyle, { "$brand": brand }) : null, children] }));
|
|
80
89
|
}
|
|
81
90
|
export function useTheme() {
|
|
82
91
|
const c = useContext(Ctx);
|
|
@@ -92,4 +101,10 @@ const GlobalStyle = createGlobalStyle `
|
|
|
92
101
|
${cssVariables()}
|
|
93
102
|
${globalCss()}
|
|
94
103
|
`;
|
|
104
|
+
// Its selectors are doubled (`:root:root`), so it beats the base sheet whichever
|
|
105
|
+
// order the two <style> tags land in — styled-components gives no guarantee
|
|
106
|
+
// about the relative order of two createGlobalStyle components.
|
|
107
|
+
const BrandStyle = createGlobalStyle `
|
|
108
|
+
${(p) => brandCss(p.$brand)}
|
|
109
|
+
`;
|
|
95
110
|
//# sourceMappingURL=ThemeProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAetD,2EAA2E;AAC3E,4EAA4E;AAC5E,wEAAwE;AACxE,MAAM,mBAAmB,GAAG,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/** The brand family, resolved to concrete colours for one product. */
|
|
2
|
+
export interface BrandRamp {
|
|
3
|
+
/** the registry colour, normalised to #rrggbb */
|
|
4
|
+
primary: string;
|
|
5
|
+
/** the four gradient stops, g2 === primary */
|
|
6
|
+
g1: string;
|
|
7
|
+
g2: string;
|
|
8
|
+
g3: string;
|
|
9
|
+
g4: string;
|
|
10
|
+
grad: string;
|
|
11
|
+
grad90: string;
|
|
12
|
+
/** #fff or near-black, whichever is legible on `primary` */
|
|
13
|
+
onBrand: string;
|
|
14
|
+
/** primary at 8/12/16/22/55% alpha */
|
|
15
|
+
a08: string;
|
|
16
|
+
a12: string;
|
|
17
|
+
a16: string;
|
|
18
|
+
a22: string;
|
|
19
|
+
a55: string;
|
|
20
|
+
/** the page-background bloom: g3 at 16% */
|
|
21
|
+
glow: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Derive the whole brand family from one hex. Invalid input falls back to the
|
|
25
|
+
* platform violet, because a malformed registry colour should leave a console
|
|
26
|
+
* looking like the platform rather than unstyled.
|
|
27
|
+
*/
|
|
28
|
+
export declare function brandRamp(input: string): BrandRamp;
|
|
29
|
+
/**
|
|
30
|
+
* The override sheet for one product's brand.
|
|
31
|
+
*
|
|
32
|
+
* Deliberately NOT in it: --x-info. That tone is the brand hue in the base
|
|
33
|
+
* sheet, and following the brand here made "building" read green on Databases
|
|
34
|
+
* and amber on Dev — i.e. exactly like success and warning. The four status
|
|
35
|
+
* tones are the one part of the sheet a product does not get to repaint, so a
|
|
36
|
+
* verdict means the same thing on every console.
|
|
37
|
+
*
|
|
38
|
+
* To be injected *after*
|
|
39
|
+
* `cssVariables()`. Selectors are doubled (`:root:root`) so this wins over the
|
|
40
|
+
* base sheet regardless of which order the two style tags end up in — two
|
|
41
|
+
* `createGlobalStyle` components have no guaranteed relative order.
|
|
42
|
+
*
|
|
43
|
+
* A server-rendered console inlines `cssVariables() + brandCss(colour) +
|
|
44
|
+
* globalCss()` in a <style> in <head>; a client-rendered one passes
|
|
45
|
+
* `brand` to AppThemeProvider (or lets @xeonr/console-shell set it from the
|
|
46
|
+
* registry) and this is injected for it.
|
|
47
|
+
*/
|
|
48
|
+
export declare function brandCss(input: string): string;
|
|
49
|
+
//# sourceMappingURL=brand.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../../src/theme/brand.ts"],"names":[],"mappings":"AAkBA,sEAAsE;AACtE,MAAM,WAAW,SAAS;IACxB,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;CACd;AA6ID;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CA8ClD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAiB9C"}
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
// Per-product brand ramps.
|
|
2
|
+
//
|
|
3
|
+
// The token sheet in tokens.ts hardcodes one brand family — the platform
|
|
4
|
+
// violet. A product console wants its *own* colour there: the rail logo, the
|
|
5
|
+
// top stripe, primary buttons, focus rings, the active nav item and the page
|
|
6
|
+
// background glow all read from --x-brand and friends, so re-pointing that one
|
|
7
|
+
// family is what turns the Databases console green and the Dev console amber.
|
|
8
|
+
//
|
|
9
|
+
// The registry gives us a single hex per product (bff/registry/products.yaml).
|
|
10
|
+
// Everything else in the family is derived from it here, in OKLCH, so the
|
|
11
|
+
// derived stops keep the *perceptual* relationship the hand-tuned violet ramp
|
|
12
|
+
// has rather than the RGB one — rotating hue in sRGB swings lightness around
|
|
13
|
+
// and a green ramp built that way looks nothing like the violet it replaces.
|
|
14
|
+
//
|
|
15
|
+
// This file is allowlisted by the colour-literal ratchet along with tokens.ts:
|
|
16
|
+
// it is where colour is computed, which is the same exemption for the same
|
|
17
|
+
// reason.
|
|
18
|
+
const clamp01 = (x) => (x < 0 ? 0 : x > 1 ? 1 : x);
|
|
19
|
+
function parseHex(hex) {
|
|
20
|
+
const s = hex.trim().replace(/^#/, "");
|
|
21
|
+
const full = s.length === 3 ? s.split("").map((ch) => ch + ch).join("") : s;
|
|
22
|
+
if (!/^[0-9a-fA-F]{6}$/.test(full))
|
|
23
|
+
return null;
|
|
24
|
+
return [
|
|
25
|
+
parseInt(full.slice(0, 2), 16) / 255,
|
|
26
|
+
parseInt(full.slice(2, 4), 16) / 255,
|
|
27
|
+
parseInt(full.slice(4, 6), 16) / 255,
|
|
28
|
+
];
|
|
29
|
+
}
|
|
30
|
+
function toHex(rgb) {
|
|
31
|
+
const part = (x) => Math.round(clamp01(x) * 255).toString(16).padStart(2, "0");
|
|
32
|
+
return "#" + part(rgb[0]) + part(rgb[1]) + part(rgb[2]);
|
|
33
|
+
}
|
|
34
|
+
const toLinear = (x) => (x <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4));
|
|
35
|
+
const toGamma = (x) => (x <= 0.0031308 ? x * 12.92 : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
|
|
36
|
+
/** Björn Ottosson's OKLab matrices. */
|
|
37
|
+
function srgbToOklch([r, g, b]) {
|
|
38
|
+
const lr = toLinear(r);
|
|
39
|
+
const lg = toLinear(g);
|
|
40
|
+
const lb = toLinear(b);
|
|
41
|
+
const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
|
|
42
|
+
const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
|
|
43
|
+
const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
|
|
44
|
+
const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
|
|
45
|
+
const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
|
|
46
|
+
const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
|
|
47
|
+
const C = Math.sqrt(A * A + B * B);
|
|
48
|
+
let h = (Math.atan2(B, A) * 180) / Math.PI;
|
|
49
|
+
if (h < 0)
|
|
50
|
+
h += 360;
|
|
51
|
+
return { l: L, c: C, h };
|
|
52
|
+
}
|
|
53
|
+
function oklchToSrgb({ l: L, c: C, h }) {
|
|
54
|
+
const hr = (h * Math.PI) / 180;
|
|
55
|
+
const A = C * Math.cos(hr);
|
|
56
|
+
const B = C * Math.sin(hr);
|
|
57
|
+
const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
|
|
58
|
+
const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
|
|
59
|
+
const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
|
|
60
|
+
return [
|
|
61
|
+
toGamma(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
|
|
62
|
+
toGamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
|
|
63
|
+
toGamma(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
|
|
64
|
+
];
|
|
65
|
+
}
|
|
66
|
+
const inGamut = ([r, g, b]) => r >= -0.0005 && r <= 1.0005 && g >= -0.0005 && g <= 1.0005 && b >= -0.0005 && b <= 1.0005;
|
|
67
|
+
/**
|
|
68
|
+
* OKLCH → hex, reducing chroma until the colour fits sRGB. Clipping the
|
|
69
|
+
* channels instead (the naive fix) shifts the hue, which is exactly what this
|
|
70
|
+
* module exists to avoid: a chroma that is out of gamut at this lightness is a
|
|
71
|
+
* saturation we cannot show, not a different colour.
|
|
72
|
+
*/
|
|
73
|
+
function hexFrom(lch) {
|
|
74
|
+
let rgb = oklchToSrgb(lch);
|
|
75
|
+
if (inGamut(rgb))
|
|
76
|
+
return toHex(rgb);
|
|
77
|
+
let lo = 0;
|
|
78
|
+
let hi = lch.c;
|
|
79
|
+
for (let i = 0; i < 24; i++) {
|
|
80
|
+
const mid = (lo + hi) / 2;
|
|
81
|
+
rgb = oklchToSrgb({ ...lch, c: mid });
|
|
82
|
+
if (inGamut(rgb))
|
|
83
|
+
lo = mid;
|
|
84
|
+
else
|
|
85
|
+
hi = mid;
|
|
86
|
+
}
|
|
87
|
+
return toHex(oklchToSrgb({ ...lch, c: lo }));
|
|
88
|
+
}
|
|
89
|
+
/** WCAG 2.1 relative luminance, for picking the legible side of a fill. */
|
|
90
|
+
function luminance([r, g, b]) {
|
|
91
|
+
return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
|
|
92
|
+
}
|
|
93
|
+
function contrast(a, b) {
|
|
94
|
+
const la = luminance(a);
|
|
95
|
+
const lb = luminance(b);
|
|
96
|
+
return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
|
|
97
|
+
}
|
|
98
|
+
function alpha(hex, a) {
|
|
99
|
+
const rgb = parseHex(hex) ?? [0, 0, 0];
|
|
100
|
+
const n = (x) => Math.round(clamp01(x) * 255);
|
|
101
|
+
return `rgba(${n(rgb[0])}, ${n(rgb[1])}, ${n(rgb[2])}, ${a})`;
|
|
102
|
+
}
|
|
103
|
+
// ---------------------------------------------------------------------------
|
|
104
|
+
// The ramp
|
|
105
|
+
// ---------------------------------------------------------------------------
|
|
106
|
+
// Measured off the hand-tuned platform gradient (#9C4699 → #A354A2 → #9B3EE4 →
|
|
107
|
+
// #5726BE) in OKLCH, relative to g2, which is the brand itself: a touch darker
|
|
108
|
+
// at the near end, then the same lightness but far more saturated, ending deep
|
|
109
|
+
// and dark, rotating anticlockwise throughout. Applying deltas rather than
|
|
110
|
+
// absolutes is what keeps a pale product colour pale and a deep one deep
|
|
111
|
+
// instead of dragging every product back to violet's lightness.
|
|
112
|
+
//
|
|
113
|
+
// HUE_DAMP: the violet's own −39° sweep is a lot of hue for a gradient, and it
|
|
114
|
+
// gets away with it because violet→blue-violet are neighbours we read as one
|
|
115
|
+
// colour. The same rotation turns Dev's amber frankly orange-red, which reads
|
|
116
|
+
// as a second product rather than a gradient, so a derived ramp takes 45% of
|
|
117
|
+
// it — enough for the stripe to have depth, not enough for Burrow's rose to
|
|
118
|
+
// finish hot pink or Dev's orange to finish red. The platform violet itself is
|
|
119
|
+
// unaffected: an unbranded console keeps the literal stops in tokens.ts and
|
|
120
|
+
// never comes through here.
|
|
121
|
+
const HUE_DAMP = 0.45;
|
|
122
|
+
const RAMP = [
|
|
123
|
+
{ dl: -0.033, dc: +0.010, dh: +1.1 }, // g1
|
|
124
|
+
{ dl: 0, dc: 0, dh: 0 }, // g2 — the registry colour, untouched
|
|
125
|
+
{ dl: +0.003, dc: +0.093, dh: -22.2 }, // g3
|
|
126
|
+
{ dl: -0.129, dc: +0.070, dh: -38.9 }, // g4
|
|
127
|
+
];
|
|
128
|
+
// Chroma floor: a near-grey registry colour would otherwise produce a gradient
|
|
129
|
+
// of four greys and a console with no brand at all. 0.04 is enough for the
|
|
130
|
+
// stripe and the rail logo to read as coloured without inventing a hue.
|
|
131
|
+
const MIN_C = 0.04;
|
|
132
|
+
/**
|
|
133
|
+
* Derive the whole brand family from one hex. Invalid input falls back to the
|
|
134
|
+
* platform violet, because a malformed registry colour should leave a console
|
|
135
|
+
* looking like the platform rather than unstyled.
|
|
136
|
+
*/
|
|
137
|
+
export function brandRamp(input) {
|
|
138
|
+
const rgb = parseHex(input) ?? parseHex("#A354A2");
|
|
139
|
+
const base = srgbToOklch(rgb);
|
|
140
|
+
const c = Math.max(base.c, MIN_C);
|
|
141
|
+
const stops = RAMP.map((d, i) => i === 1
|
|
142
|
+
? toHex(rgb)
|
|
143
|
+
: hexFrom({
|
|
144
|
+
l: clamp01(base.l + d.dl),
|
|
145
|
+
c: Math.max(0, c + d.dc),
|
|
146
|
+
h: (base.h + d.dh * HUE_DAMP + 360) % 360,
|
|
147
|
+
}));
|
|
148
|
+
const [g1, g2, g3, g4] = stops;
|
|
149
|
+
const grad = `linear-gradient(135deg, ${g1}, ${g2} 34%, ${g3} 68%, ${g4})`;
|
|
150
|
+
const grad90 = `linear-gradient(90deg, ${g1}, ${g2} 34%, ${g3} 68%, ${g4})`;
|
|
151
|
+
// White on #FFC46B is unreadable, and Dev's amber is a registry colour today.
|
|
152
|
+
// The test is against the *lightest* stop, not the brand: the fill these sit
|
|
153
|
+
// on is the gradient (the rail logo, primary buttons), so white has to
|
|
154
|
+
// survive the pale end of it. 2.6:1 is where it stops doing so for the hues
|
|
155
|
+
// in the registry — above it white, below it the light theme's ink.
|
|
156
|
+
const WHITE = [1, 1, 1];
|
|
157
|
+
const lightest = stops
|
|
158
|
+
.map((s) => parseHex(s) ?? rgb)
|
|
159
|
+
.reduce((a, b) => (luminance(a) >= luminance(b) ? a : b));
|
|
160
|
+
const onBrand = contrast(lightest, WHITE) >= 2.6 ? "#ffffff" : "#1a1b22";
|
|
161
|
+
return {
|
|
162
|
+
primary: toHex(rgb),
|
|
163
|
+
g1,
|
|
164
|
+
g2,
|
|
165
|
+
g3,
|
|
166
|
+
g4,
|
|
167
|
+
grad,
|
|
168
|
+
grad90,
|
|
169
|
+
onBrand,
|
|
170
|
+
a08: alpha(g2, 0.08),
|
|
171
|
+
a12: alpha(g2, 0.12),
|
|
172
|
+
a16: alpha(g2, 0.16),
|
|
173
|
+
a22: alpha(g2, 0.22),
|
|
174
|
+
a55: alpha(g2, 0.55),
|
|
175
|
+
glow: alpha(g3, 0.16),
|
|
176
|
+
};
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* The override sheet for one product's brand.
|
|
180
|
+
*
|
|
181
|
+
* Deliberately NOT in it: --x-info. That tone is the brand hue in the base
|
|
182
|
+
* sheet, and following the brand here made "building" read green on Databases
|
|
183
|
+
* and amber on Dev — i.e. exactly like success and warning. The four status
|
|
184
|
+
* tones are the one part of the sheet a product does not get to repaint, so a
|
|
185
|
+
* verdict means the same thing on every console.
|
|
186
|
+
*
|
|
187
|
+
* To be injected *after*
|
|
188
|
+
* `cssVariables()`. Selectors are doubled (`:root:root`) so this wins over the
|
|
189
|
+
* base sheet regardless of which order the two style tags end up in — two
|
|
190
|
+
* `createGlobalStyle` components have no guaranteed relative order.
|
|
191
|
+
*
|
|
192
|
+
* A server-rendered console inlines `cssVariables() + brandCss(colour) +
|
|
193
|
+
* globalCss()` in a <style> in <head>; a client-rendered one passes
|
|
194
|
+
* `brand` to AppThemeProvider (or lets @xeonr/console-shell set it from the
|
|
195
|
+
* registry) and this is injected for it.
|
|
196
|
+
*/
|
|
197
|
+
export function brandCss(input) {
|
|
198
|
+
const b = brandRamp(input);
|
|
199
|
+
return `
|
|
200
|
+
:root:root {
|
|
201
|
+
--x-brand: ${b.primary};
|
|
202
|
+
--x-g1: ${b.g1}; --x-g2: ${b.g2}; --x-g3: ${b.g3}; --x-g4: ${b.g4};
|
|
203
|
+
--x-grad: ${b.grad};
|
|
204
|
+
--x-grad-90: ${b.grad90};
|
|
205
|
+
--x-on-brand: ${b.onBrand};
|
|
206
|
+
--x-brand-08: ${b.a08};
|
|
207
|
+
--x-brand-12: ${b.a12};
|
|
208
|
+
--x-brand-16: ${b.a16};
|
|
209
|
+
--x-brand-22: ${b.a22};
|
|
210
|
+
--x-brand-55: ${b.a55};
|
|
211
|
+
--x-violet-glow: ${b.glow};
|
|
212
|
+
}
|
|
213
|
+
`;
|
|
214
|
+
}
|
|
215
|
+
//# sourceMappingURL=brand.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"brand.js","sourceRoot":"","sources":["../../src/theme/brand.ts"],"names":[],"mappings":"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"}
|
package/dist/theme/tokens.js
CHANGED
|
@@ -87,8 +87,8 @@ export function cssVariables() {
|
|
|
87
87
|
color-scheme: light;
|
|
88
88
|
--x-canvas: #f6f7f9;
|
|
89
89
|
--x-bg:
|
|
90
|
-
radial-gradient(560px 300px at 82% -100px,
|
|
91
|
-
radial-gradient(640px 340px at 12% -140px,
|
|
90
|
+
radial-gradient(560px 300px at 82% -100px, color-mix(in srgb, var(--x-g3) 7%, transparent), transparent 70%),
|
|
91
|
+
radial-gradient(640px 340px at 12% -140px, color-mix(in srgb, var(--x-brand) 6%, transparent), transparent 70%),
|
|
92
92
|
#f6f7f9;
|
|
93
93
|
--x-sidebar: #fdfdfe;
|
|
94
94
|
--x-surface: #ffffff;
|
|
@@ -101,7 +101,7 @@ export function cssVariables() {
|
|
|
101
101
|
--x-field: #ffffff;
|
|
102
102
|
--x-field-line: #e2dceb;
|
|
103
103
|
--x-hover: rgba(28, 20, 48, 0.035);
|
|
104
|
-
--x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px
|
|
104
|
+
--x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px color-mix(in srgb, var(--x-g4) 18%, transparent);
|
|
105
105
|
--x-scrim: rgba(24, 18, 40, 0.38);
|
|
106
106
|
--x-danger: #c0362f;
|
|
107
107
|
--x-danger-bg: rgba(192, 54, 47, 0.08);
|
|
@@ -124,8 +124,8 @@ export function cssVariables() {
|
|
|
124
124
|
color-scheme: light;
|
|
125
125
|
--x-canvas: #f6f7f9;
|
|
126
126
|
--x-bg:
|
|
127
|
-
radial-gradient(560px 300px at 82% -100px,
|
|
128
|
-
radial-gradient(640px 340px at 12% -140px,
|
|
127
|
+
radial-gradient(560px 300px at 82% -100px, color-mix(in srgb, var(--x-g3) 7%, transparent), transparent 70%),
|
|
128
|
+
radial-gradient(640px 340px at 12% -140px, color-mix(in srgb, var(--x-brand) 6%, transparent), transparent 70%),
|
|
129
129
|
#f6f7f9;
|
|
130
130
|
--x-sidebar: #fdfdfe;
|
|
131
131
|
--x-surface: #ffffff;
|
|
@@ -138,7 +138,7 @@ export function cssVariables() {
|
|
|
138
138
|
--x-field: #ffffff;
|
|
139
139
|
--x-field-line: #e2dceb;
|
|
140
140
|
--x-hover: rgba(28, 20, 48, 0.035);
|
|
141
|
-
--x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px
|
|
141
|
+
--x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px color-mix(in srgb, var(--x-g4) 18%, transparent);
|
|
142
142
|
--x-scrim: rgba(24, 18, 40, 0.38);
|
|
143
143
|
--x-danger: #c0362f;
|
|
144
144
|
--x-danger-bg: rgba(192, 54, 47, 0.08);
|
package/package.json
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
// contexts (plain code and comments don't count), then fails with a
|
|
7
7
|
// file:line listing for any hit outside the allowlisted files.
|
|
8
8
|
//
|
|
9
|
-
// Allowlist rationale: tokens.ts is where literals are supposed to live
|
|
9
|
+
// Allowlist rationale: tokens.ts is where literals are supposed to live and
|
|
10
|
+
// theme/brand.ts is where they are computed (the per-product brand ramp);
|
|
10
11
|
// ConsoleTerminal.tsx hands xterm.js a theme object that requires concrete
|
|
11
12
|
// colour strings; monacoSetup.ts may need the same for monaco theme plumbing.
|
|
12
13
|
//
|
|
@@ -20,8 +21,9 @@ const ROOT = process.cwd();
|
|
|
20
21
|
const SRC = join(ROOT, "src");
|
|
21
22
|
|
|
22
23
|
// Consumers run this as `xeonr-check-colour-literals [extra allowlisted paths…]`
|
|
23
|
-
// from their own package root; the kit's
|
|
24
|
-
|
|
24
|
+
// from their own package root; the kit's own theme files are the defaults (a
|
|
25
|
+
// consumer has neither, so listing them costs nothing there).
|
|
26
|
+
const ALLOWLIST = new Set(["src/theme/tokens.ts", "src/theme/brand.ts", ...process.argv.slice(2)]);
|
|
25
27
|
|
|
26
28
|
/** Hex runs; length checked afterwards so 12+-char content hashes don't match. */
|
|
27
29
|
const HEX = /#[0-9a-fA-F]+/g;
|