pi-kiosk-shared 2.2.45 → 2.2.46
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/theme/ThemeProvider.d.ts +5 -1
- package/dist/theme/ThemeProvider.d.ts.map +1 -1
- package/dist/theme/ThemeProvider.js +6 -2
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/themeContract.d.ts +12 -1
- package/dist/theme/themeContract.d.ts.map +1 -1
- package/dist/theme/themeContract.js +15 -6
- package/dist/theme/themeContract.js.map +1 -1
- package/dist/ui/Avatar/Avatar.js +2 -2
- package/dist/ui/Button/Button.js +3 -3
- package/dist/ui/Button/Button.js.map +1 -1
- package/dist/ui/ScreenState/ScreenState.js +1 -1
- package/dist/ui/ScreenState/ScreenState.js.map +1 -1
- package/package.json +1 -1
- package/src/tokens/admin-theme.css +94 -94
- package/src/tokens/brand-bridge.css +65 -64
- package/src/tokens/tokens.sync.json +65 -65
|
@@ -12,12 +12,16 @@ export interface ThemeProviderProps {
|
|
|
12
12
|
storageKey: string;
|
|
13
13
|
/** When true, explicit `light` preference adds `.light` to override system dark media. */
|
|
14
14
|
lightOverrideEnabled?: boolean;
|
|
15
|
+
/** When storage empty — admin uses `light` so dark requires an explicit toggle. */
|
|
16
|
+
defaultPreference?: ThemePreference;
|
|
17
|
+
/** When preference is `system`, force this effective theme (admin: `light`). */
|
|
18
|
+
systemResolvesTo?: EffectiveTheme;
|
|
15
19
|
children: ReactNode;
|
|
16
20
|
}
|
|
17
21
|
/**
|
|
18
22
|
* React bridge for DECISION-2 C-Hybrid dark mode.
|
|
19
23
|
* Wrap the app (or subtree) and read/update theme via `useTheme()`.
|
|
20
24
|
*/
|
|
21
|
-
export declare function ThemeProvider({ storageKey, lightOverrideEnabled, children, }: ThemeProviderProps): JSX.Element;
|
|
25
|
+
export declare function ThemeProvider({ storageKey, lightOverrideEnabled, defaultPreference, systemResolvesTo, children, }: ThemeProviderProps): JSX.Element;
|
|
22
26
|
export declare function useTheme(): ThemeContextValue;
|
|
23
27
|
//# sourceMappingURL=ThemeProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACrB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,eAAe,EAAE,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,QAAQ,EACR,KAAK,UAAU,GAChB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,eAAe,CAAC;IAC5B,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAID,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,UAAU,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,oBAA4B,EAC5B,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACrB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,eAAe,EAAE,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,QAAQ,EACR,KAAK,UAAU,GAChB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,eAAe,CAAC;IAC5B,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAID,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,UAAU,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,cAAc,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,oBAA4B,EAC5B,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA0ClC;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}
|
|
@@ -7,8 +7,12 @@ const ThemeContext = createContext(null);
|
|
|
7
7
|
* React bridge for DECISION-2 C-Hybrid dark mode.
|
|
8
8
|
* Wrap the app (or subtree) and read/update theme via `useTheme()`.
|
|
9
9
|
*/
|
|
10
|
-
export function ThemeProvider({ storageKey, lightOverrideEnabled = false, children, }) {
|
|
11
|
-
const api = useMemo(() => createThemeApi(storageKey, {
|
|
10
|
+
export function ThemeProvider({ storageKey, lightOverrideEnabled = false, defaultPreference, systemResolvesTo, children, }) {
|
|
11
|
+
const api = useMemo(() => createThemeApi(storageKey, {
|
|
12
|
+
lightOverrideEnabled,
|
|
13
|
+
defaultPreference,
|
|
14
|
+
systemResolvesTo,
|
|
15
|
+
}), [storageKey, lightOverrideEnabled, defaultPreference, systemResolvesTo]);
|
|
12
16
|
const [preference, setPreference] = useState(() => api.getThemePreference());
|
|
13
17
|
const [effectiveTheme, setEffectiveTheme] = useState(() => api.getEffectiveTheme());
|
|
14
18
|
const syncFromApi = useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GAET,MAAM,OAAO,CAAC;AACf,OAAO,EACL,cAAc,GAKf,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,QAAQ,GAET,MAAM,oBAAoB,CAAC;AAQ5B,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GAET,MAAM,OAAO,CAAC;AACf,OAAO,EACL,cAAc,GAKf,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,QAAQ,GAET,MAAM,oBAAoB,CAAC;AAQ5B,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAcnE;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,EACV,oBAAoB,GAAG,KAAK,EAC5B,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,GACW;IACnB,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CACH,cAAc,CAAC,UAAU,EAAE;QACzB,oBAAoB;QACpB,iBAAiB;QACjB,gBAAgB;KACjB,CAAC,EACJ,CAAC,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,CACxE,CAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB,GAAG,EAAE,CAAC,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAC;IAC9F,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB,GAAG,EAAE,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAEpG,MAAM,WAAW,GAAG,WAAW,CAAC,GAAS,EAAE;QACzC,aAAa,CAAC,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAC;QACxC,iBAAiB,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,iBAAiB,EAAE,CAAC;QACxB,WAAW,EAAE,CAAC;QACd,OAAO,GAAG,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;IAEvB,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,IAAqB,EAAQ,EAAE;QAC9B,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACnB,WAAW,EAAE,CAAC;IAChB,CAAC,EACD,CAAC,GAAG,EAAE,WAAW,CAAC,CACnB,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,UAAU;QACV,cAAc;QACd,QAAQ,EAAE,kBAAkB;KAC7B,CAAC,EACF,CAAC,UAAU,EAAE,cAAc,EAAE,kBAAkB,CAAC,CACjD,CAAC;IAEF,OAAO,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,MAAM,GAAG,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;IAChE,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* DECISION-2 C-Hybrid theme contract — system default + user override.
|
|
3
3
|
*
|
|
4
4
|
* Persists `light` | `dark` | `system` in per-app `localStorage` keys.
|
|
5
|
-
* Effective palette is applied via the `.dark` class on `<html>`.
|
|
5
|
+
* Effective palette is applied via the `.dark` / `.light` class on `<html>`.
|
|
6
6
|
*/
|
|
7
7
|
export type ThemePreference = 'light' | 'dark' | 'system';
|
|
8
8
|
export type EffectiveTheme = 'light' | 'dark';
|
|
@@ -25,6 +25,17 @@ export interface ThemeApi {
|
|
|
25
25
|
export interface ThemeApplyOptions {
|
|
26
26
|
/** When true, explicit `light` preference adds `.light` to override system dark media. */
|
|
27
27
|
readonly lightOverrideEnabled?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Preference when `localStorage` is empty.
|
|
30
|
+
* Admin uses `light` so dark is only on after an explicit toggle.
|
|
31
|
+
* Default: `system` (follow OS).
|
|
32
|
+
*/
|
|
33
|
+
readonly defaultPreference?: ThemePreference;
|
|
34
|
+
/**
|
|
35
|
+
* When preference is `system`, resolve to this instead of OS.
|
|
36
|
+
* Use `light` with admin so legacy `system` values do not auto-dark.
|
|
37
|
+
*/
|
|
38
|
+
readonly systemResolvesTo?: EffectiveTheme;
|
|
28
39
|
}
|
|
29
40
|
/**
|
|
30
41
|
* Imperative theme controller for a single app surface.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeContract.d.ts","sourceRoot":"","sources":["../../src/theme/themeContract.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,qFAAqF;AACrF,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAEzD,MAAM,WAAW,QAAQ;IACvB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,kBAAkB,EAAE,MAAM,eAAe,CAAC;IAC1C,iBAAiB,EAAE,MAAM,cAAc,CAAC;IACxC,uEAAuE;IACvE,sBAAsB,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;CAC/D;
|
|
1
|
+
{"version":3,"file":"themeContract.d.ts","sourceRoot":"","sources":["../../src/theme/themeContract.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,qFAAqF;AACrF,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAEzD,MAAM,WAAW,QAAQ;IACvB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,kBAAkB,EAAE,MAAM,eAAe,CAAC;IAC1C,iBAAiB,EAAE,MAAM,cAAc,CAAC;IACxC,uEAAuE;IACvE,sBAAsB,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;CAC/D;AA6BD,MAAM,WAAW,iBAAiB;IAChC,0FAA0F;IAC1F,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,cAAc,CAAC;CAC5C;AA6BD;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,UAAU,EAAE,MAAM,EAClB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,QAAQ,CA8DV;AAED,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAE1D;AAED,wDAAwD;AACxD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI,CAExE"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* DECISION-2 C-Hybrid theme contract — system default + user override.
|
|
3
3
|
*
|
|
4
4
|
* Persists `light` | `dark` | `system` in per-app `localStorage` keys.
|
|
5
|
-
* Effective palette is applied via the `.dark` class on `<html>`.
|
|
5
|
+
* Effective palette is applied via the `.dark` / `.light` class on `<html>`.
|
|
6
6
|
*/
|
|
7
7
|
/** Per-app `localStorage` keys (isolated so toggles do not leak across surfaces). */
|
|
8
8
|
export const THEME_STORAGE_KEYS = {
|
|
@@ -19,9 +19,9 @@ function resolveSystemTheme() {
|
|
|
19
19
|
? 'dark'
|
|
20
20
|
: 'light';
|
|
21
21
|
}
|
|
22
|
-
function readStoredPreference(storageKey) {
|
|
22
|
+
function readStoredPreference(storageKey, defaultPreference) {
|
|
23
23
|
if (typeof window === 'undefined') {
|
|
24
|
-
return
|
|
24
|
+
return defaultPreference;
|
|
25
25
|
}
|
|
26
26
|
try {
|
|
27
27
|
const raw = window.localStorage.getItem(storageKey);
|
|
@@ -32,7 +32,7 @@ function readStoredPreference(storageKey) {
|
|
|
32
32
|
catch {
|
|
33
33
|
/* ignore quota / privacy errors */
|
|
34
34
|
}
|
|
35
|
-
return
|
|
35
|
+
return defaultPreference;
|
|
36
36
|
}
|
|
37
37
|
function applyThemeClasses(preference, effective, options) {
|
|
38
38
|
if (typeof document === 'undefined') {
|
|
@@ -45,6 +45,10 @@ function applyThemeClasses(preference, effective, options) {
|
|
|
45
45
|
root.classList.add('light');
|
|
46
46
|
return;
|
|
47
47
|
}
|
|
48
|
+
if (lightOverrideEnabled && preference === 'system' && options?.systemResolvesTo === 'light') {
|
|
49
|
+
root.classList.add('light');
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
48
52
|
if (preference === 'dark' || effective === 'dark') {
|
|
49
53
|
root.classList.add('dark');
|
|
50
54
|
}
|
|
@@ -54,11 +58,12 @@ function applyThemeClasses(preference, effective, options) {
|
|
|
54
58
|
* Call `applyInitialTheme()` before the first React paint to avoid flash.
|
|
55
59
|
*/
|
|
56
60
|
export function createThemeApi(storageKey, options) {
|
|
57
|
-
const
|
|
61
|
+
const defaultPreference = options?.defaultPreference ?? 'system';
|
|
62
|
+
const getThemePreference = () => readStoredPreference(storageKey, defaultPreference);
|
|
58
63
|
const getEffectiveTheme = () => {
|
|
59
64
|
const pref = getThemePreference();
|
|
60
65
|
if (pref === 'system') {
|
|
61
|
-
return resolveSystemTheme();
|
|
66
|
+
return options?.systemResolvesTo ?? resolveSystemTheme();
|
|
62
67
|
}
|
|
63
68
|
return pref;
|
|
64
69
|
};
|
|
@@ -83,6 +88,10 @@ export function createThemeApi(storageKey, options) {
|
|
|
83
88
|
if (typeof window === 'undefined') {
|
|
84
89
|
return () => undefined;
|
|
85
90
|
}
|
|
91
|
+
if (options?.systemResolvesTo != null) {
|
|
92
|
+
/* OS changes ignored — preference does not follow system */
|
|
93
|
+
return () => undefined;
|
|
94
|
+
}
|
|
86
95
|
const mq = window.matchMedia?.('(prefers-color-scheme: dark)');
|
|
87
96
|
if (!mq) {
|
|
88
97
|
return () => undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeContract.js","sourceRoot":"","sources":["../../src/theme/themeContract.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,qFAAqF;AACrF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,sBAAsB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,MAAM,EAAE,oBAAoB;CACpB,CAAC;AAaX,SAAS,kBAAkB;IACzB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,OAAO,MAAM,CAAC,UAAU,EAAE,CAAC,8BAA8B,CAAC,CAAC,OAAO;QAChE,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,OAAO,CAAC;AACd,CAAC;AAED,SAAS,oBAAoB,
|
|
1
|
+
{"version":3,"file":"themeContract.js","sourceRoot":"","sources":["../../src/theme/themeContract.ts"],"names":[],"mappings":"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"}
|
package/dist/ui/Avatar/Avatar.js
CHANGED
|
@@ -22,8 +22,8 @@ export function Avatar({ name, avatarUrl, size = 'md', className, alt, testId =
|
|
|
22
22
|
const initials = initialsFromName(name);
|
|
23
23
|
const base = [
|
|
24
24
|
'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full',
|
|
25
|
-
'bg-[var(--color-surface-muted,var(--color-an-primary-soft,#
|
|
26
|
-
'font-semibold text-[var(--color-on-surface,var(--color-an-primary,#
|
|
25
|
+
'bg-[var(--color-surface-muted,var(--color-an-primary-soft,#e4e4e7))]',
|
|
26
|
+
'font-semibold text-[var(--color-on-surface,var(--color-an-primary,#18181b))]',
|
|
27
27
|
SIZE_CLASS[size],
|
|
28
28
|
className,
|
|
29
29
|
]
|
package/dist/ui/Button/Button.js
CHANGED
|
@@ -16,16 +16,16 @@ const adminButton = tv({
|
|
|
16
16
|
variants: {
|
|
17
17
|
intent: {
|
|
18
18
|
primary: [
|
|
19
|
-
'border-0 bg-[var(--color-an-primary)] text-
|
|
19
|
+
'border-0 bg-[var(--color-an-primary)] text-[var(--color-an-on-primary,#ffffff)] shadow-sm',
|
|
20
20
|
'hover:brightness-95 hover:-translate-y-px',
|
|
21
|
-
'hover:shadow-[0_4px_12px_rgba(
|
|
21
|
+
'hover:shadow-[0_4px_12px_rgba(24, 24, 27,0.35)]',
|
|
22
22
|
].join(' '),
|
|
23
23
|
secondary: [
|
|
24
24
|
'border border-[var(--color-gray-300)] bg-[var(--color-gray-200)]',
|
|
25
25
|
'text-[var(--color-gray-800)] shadow-sm',
|
|
26
26
|
'hover:border-[var(--color-an-primary)] hover:bg-[var(--color-an-primary-soft)]',
|
|
27
27
|
'hover:text-[var(--color-an-primary)]',
|
|
28
|
-
'hover:shadow-[0_2px_6px_rgba(
|
|
28
|
+
'hover:shadow-[0_2px_6px_rgba(24, 24, 27,0.2)]',
|
|
29
29
|
].join(' '),
|
|
30
30
|
ghost: [
|
|
31
31
|
'border border-[var(--color-an-border)] bg-[var(--color-an-surface)]',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,cAAc,CAAC;AACrD,OAAO,EAA6B,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,EAAE;QACJ,wDAAwD;QACxD,sDAAsD;QACtD,wEAAwE;QACxE,gDAAgD;QAChD,8DAA8D;QAC9D,wDAAwD;QACxD,iDAAiD;QACjD,iDAAiD;QACjD,8CAA8C;KAC/C,CAAC,IAAI,CAAC,GAAG,CAAC;IACX,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -24,6 +24,6 @@ export function ScreenState({ variant, title, message, hint, icon, error, onRetr
|
|
|
24
24
|
const resolvedMessage = error?.message ?? message;
|
|
25
25
|
const role = variant === 'error' || variant === 'offline' ? 'alert' : 'status';
|
|
26
26
|
const live = variant === 'loading' ? 'polite' : undefined;
|
|
27
|
-
return (_jsxs("div", { className: [panelClass(variant), className].filter(Boolean).join(' '), role: role, "aria-live": live, "aria-busy": variant === 'loading' ? true : undefined, "data-testid": testId ?? `screen-state-${variant}`, "data-variant": variant, children: [icon ? _jsx("div", { className: "mb-2 flex justify-center text-2xl", "aria-hidden": "true", children: icon }) : null, title ? (_jsx("h3", { className: "m-0 text-base font-semibold text-[var(--color-on-surface,var(--color-an-text,#111))]", children: title })) : null, resolvedMessage ? (_jsx("p", { className: "mt-1 mb-0 text-sm text-[var(--color-on-surface-muted,var(--color-an-text-muted,#6b7280))]", children: resolvedMessage })) : null, hint ? (_jsx("p", { className: "mt-1 mb-0 text-xs text-[var(--color-on-surface-muted,var(--color-an-text-muted,#6b7280))]", children: hint })) : null, children, onRetry ? (_jsx("div", { className: "mt-3", children: _jsx("button", { type: "button", className: "inline-flex min-h-[44px] items-center justify-center rounded-md bg-[var(--color-action-primary,var(--color-an-primary,#
|
|
27
|
+
return (_jsxs("div", { className: [panelClass(variant), className].filter(Boolean).join(' '), role: role, "aria-live": live, "aria-busy": variant === 'loading' ? true : undefined, "data-testid": testId ?? `screen-state-${variant}`, "data-variant": variant, children: [icon ? _jsx("div", { className: "mb-2 flex justify-center text-2xl", "aria-hidden": "true", children: icon }) : null, title ? (_jsx("h3", { className: "m-0 text-base font-semibold text-[var(--color-on-surface,var(--color-an-text,#111))]", children: title })) : null, resolvedMessage ? (_jsx("p", { className: "mt-1 mb-0 text-sm text-[var(--color-on-surface-muted,var(--color-an-text-muted,#6b7280))]", children: resolvedMessage })) : null, hint ? (_jsx("p", { className: "mt-1 mb-0 text-xs text-[var(--color-on-surface-muted,var(--color-an-text-muted,#6b7280))]", children: hint })) : null, children, onRetry ? (_jsx("div", { className: "mt-3", children: _jsx("button", { type: "button", className: "inline-flex min-h-[44px] items-center justify-center rounded-md bg-[var(--color-action-primary,var(--color-an-primary,#18181b))] px-4 py-2 text-sm font-semibold text-[var(--color-an-on-primary,#ffffff)]", onClick: onRetry, "data-testid": `${testId ?? 'screen-state'}-retry`, children: retryLabel }) })) : null, action ? (_jsx("div", { className: "mt-3", children: _jsx("button", { type: "button", className: "inline-flex min-h-[44px] items-center justify-center rounded-md border border-[var(--color-border,var(--color-an-border))] px-4 py-2 text-sm font-semibold", onClick: action.onClick, "data-testid": `${testId ?? 'screen-state'}-action`, children: action.label }) })) : null] }));
|
|
28
28
|
}
|
|
29
29
|
//# sourceMappingURL=ScreenState.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenState.js","sourceRoot":"","sources":["../../../src/ui/ScreenState/ScreenState.tsx"],"names":[],"mappings":";AA6BA,SAAS,UAAU,CAAC,OAA2B;IAC7C,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO;YACL,+EAA+E;YAC/E,6FAA6F;YAC7F,iBAAiB;SAClB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACd,CAAC;IACD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO;YACL,qHAAqH;YACrH,+FAA+F;YAC/F,iEAAiE;SAClE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACd,CAAC;IACD,OAAO;QACL,+EAA+E;QAC/E,wDAAwD;QACxD,iBAAiB;KAClB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,UAAU,GAAG,OAAO,EACpB,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACS;IACjB,MAAM,eAAe,GAAG,KAAK,EAAE,OAAO,IAAI,OAAO,CAAC;IAClD,MAAM,IAAI,GAAG,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/E,MAAM,IAAI,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1D,OAAO,CACL,eACE,SAAS,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACrE,IAAI,EAAE,IAAI,eACC,IAAI,eACJ,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,iBACtC,MAAM,IAAI,gBAAgB,OAAO,EAAE,kBAClC,OAAO,aAEpB,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,mCAAmC,iBAAa,MAAM,YAAE,IAAI,GAAO,CAAC,CAAC,CAAC,IAAI,EAChG,KAAK,CAAC,CAAC,CAAC,CACP,aAAI,SAAS,EAAC,sFAAsF,YACjG,KAAK,GACH,CACN,CAAC,CAAC,CAAC,IAAI,EACP,eAAe,CAAC,CAAC,CAAC,CACjB,YAAG,SAAS,EAAC,2FAA2F,YACrG,eAAe,GACd,CACL,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,CAAC,CAAC,CAAC,CACN,YAAG,SAAS,EAAC,2FAA2F,YACrG,IAAI,GACH,CACL,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EACR,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,MAAM,YACnB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"ScreenState.js","sourceRoot":"","sources":["../../../src/ui/ScreenState/ScreenState.tsx"],"names":[],"mappings":";AA6BA,SAAS,UAAU,CAAC,OAA2B;IAC7C,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO;YACL,+EAA+E;YAC/E,6FAA6F;YAC7F,iBAAiB;SAClB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACd,CAAC;IACD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO;YACL,qHAAqH;YACrH,+FAA+F;YAC/F,iEAAiE;SAClE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACd,CAAC;IACD,OAAO;QACL,+EAA+E;QAC/E,wDAAwD;QACxD,iBAAiB;KAClB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,UAAU,GAAG,OAAO,EACpB,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACS;IACjB,MAAM,eAAe,GAAG,KAAK,EAAE,OAAO,IAAI,OAAO,CAAC;IAClD,MAAM,IAAI,GAAG,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/E,MAAM,IAAI,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1D,OAAO,CACL,eACE,SAAS,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACrE,IAAI,EAAE,IAAI,eACC,IAAI,eACJ,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,iBACtC,MAAM,IAAI,gBAAgB,OAAO,EAAE,kBAClC,OAAO,aAEpB,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,mCAAmC,iBAAa,MAAM,YAAE,IAAI,GAAO,CAAC,CAAC,CAAC,IAAI,EAChG,KAAK,CAAC,CAAC,CAAC,CACP,aAAI,SAAS,EAAC,sFAAsF,YACjG,KAAK,GACH,CACN,CAAC,CAAC,CAAC,IAAI,EACP,eAAe,CAAC,CAAC,CAAC,CACjB,YAAG,SAAS,EAAC,2FAA2F,YACrG,eAAe,GACd,CACL,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,CAAC,CAAC,CAAC,CACN,YAAG,SAAS,EAAC,2FAA2F,YACrG,IAAI,GACH,CACL,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EACR,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,MAAM,YACnB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,4MAA4M,EACtN,OAAO,EAAE,OAAO,iBACH,GAAG,MAAM,IAAI,cAAc,QAAQ,YAE/C,UAAU,GACJ,GACL,CACP,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,CAAC,CAAC,CACR,cAAK,SAAS,EAAC,MAAM,YACnB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,4JAA4J,EACtK,OAAO,EAAE,MAAM,CAAC,OAAO,iBACV,GAAG,MAAM,IAAI,cAAc,SAAS,YAEhD,MAAM,CAAC,KAAK,GACN,GACL,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*
|
|
5
5
|
* MFE-v3-S-01: brand-bridge.css + design-tokens.css supply legacy/admin semantics.
|
|
6
6
|
* MFE-v3-S-2: DECISION-2 C-Hybrid — focus/hover/disabled/elevated + dark via media + `.dark`.
|
|
7
|
-
* Light/dark neutrals: admin
|
|
7
|
+
* Light/dark neutrals: admin uses charcoal / grey depth layers (page ≠ card).
|
|
8
8
|
* Light stays neutral-led while primary / rail accents remain brand-scoped.
|
|
9
9
|
*/
|
|
10
10
|
@import './brand-bridge.css';
|
|
@@ -17,25 +17,25 @@
|
|
|
17
17
|
--color-an-surface-hover: var(--color-neutral-100);
|
|
18
18
|
--color-an-surface-disabled: var(--color-neutral-100);
|
|
19
19
|
--color-an-text: var(--color-neutral-950);
|
|
20
|
-
--color-an-text-muted: #
|
|
21
|
-
--color-an-text-disabled: #
|
|
20
|
+
--color-an-text-muted: #52525b;
|
|
21
|
+
--color-an-text-disabled: #71717a;
|
|
22
22
|
--color-an-border: var(--color-neutral-200);
|
|
23
|
-
--color-an-border-hover: #
|
|
24
|
-
--color-an-primary: var(--
|
|
25
|
-
--color-an-primary-hover: #
|
|
26
|
-
--color-an-primary-soft:
|
|
27
|
-
--color-an-focus-ring:
|
|
23
|
+
--color-an-border-hover: #d4d4d8;
|
|
24
|
+
--color-an-primary: var(--brand-admin-primary);
|
|
25
|
+
--color-an-primary-hover: #09090b;
|
|
26
|
+
--color-an-primary-soft: #f4f4f5;
|
|
27
|
+
--color-an-focus-ring: #52525b;
|
|
28
28
|
--color-an-danger: var(--color-error);
|
|
29
29
|
--color-an-success: var(--color-success);
|
|
30
30
|
--color-an-warn: var(--color-warning);
|
|
31
|
-
--color-an-info:
|
|
31
|
+
--color-an-info: #52525b;
|
|
32
32
|
--color-an-disabled-opacity: 0.55;
|
|
33
|
-
--color-an-chart-1:
|
|
34
|
-
--color-an-chart-2: #
|
|
35
|
-
--color-an-chart-3: #
|
|
36
|
-
--color-an-chart-4: #
|
|
37
|
-
--color-an-chart-5: #
|
|
38
|
-
--color-an-chart-6: #
|
|
33
|
+
--color-an-chart-1: #2563eb;
|
|
34
|
+
--color-an-chart-2: #0d9488;
|
|
35
|
+
--color-an-chart-3: #d97706;
|
|
36
|
+
--color-an-chart-4: #dc2626;
|
|
37
|
+
--color-an-chart-5: #9333ea;
|
|
38
|
+
--color-an-chart-6: #0891b2;
|
|
39
39
|
--color-shell-bg: var(--color-an-bg);
|
|
40
40
|
--color-shell-surface: var(--color-an-surface);
|
|
41
41
|
--color-shell-border: var(--color-an-border);
|
|
@@ -53,71 +53,71 @@
|
|
|
53
53
|
|
|
54
54
|
@media (prefers-color-scheme: dark) {
|
|
55
55
|
:root {
|
|
56
|
-
--color-an-bg: #
|
|
57
|
-
--color-an-bg-elevated:
|
|
58
|
-
--color-an-surface:
|
|
59
|
-
--color-an-surface-muted: #
|
|
60
|
-
--color-an-surface-hover: #
|
|
61
|
-
--color-an-surface-disabled: #
|
|
62
|
-
--color-an-text: #
|
|
63
|
-
--color-an-text-muted: #
|
|
64
|
-
--color-an-text-disabled: #
|
|
65
|
-
--color-an-border: #
|
|
66
|
-
--color-an-border-hover: #
|
|
67
|
-
--color-an-primary: #
|
|
68
|
-
--color-an-primary-hover: #
|
|
69
|
-
--color-an-primary-soft: rgba(
|
|
70
|
-
--color-an-focus-ring: #
|
|
56
|
+
--color-an-bg: #09090b;
|
|
57
|
+
--color-an-bg-elevated: #27272a;
|
|
58
|
+
--color-an-surface: #18181b;
|
|
59
|
+
--color-an-surface-muted: #0c0c0e;
|
|
60
|
+
--color-an-surface-hover: #27272a;
|
|
61
|
+
--color-an-surface-disabled: #141416;
|
|
62
|
+
--color-an-text: #fafafa;
|
|
63
|
+
--color-an-text-muted: #a1a1aa;
|
|
64
|
+
--color-an-text-disabled: #71717a;
|
|
65
|
+
--color-an-border: #3f3f46;
|
|
66
|
+
--color-an-border-hover: #52525b;
|
|
67
|
+
--color-an-primary: #fafafa;
|
|
68
|
+
--color-an-primary-hover: #e4e4e7;
|
|
69
|
+
--color-an-primary-soft: rgba(255, 255, 255, 0.1);
|
|
70
|
+
--color-an-focus-ring: #a1a1aa;
|
|
71
71
|
--color-an-disabled-opacity: 0.5;
|
|
72
|
-
--color-an-chart-1: #
|
|
73
|
-
--color-an-chart-2: #
|
|
74
|
-
--color-an-chart-3: #
|
|
75
|
-
--color-an-chart-4: #
|
|
76
|
-
--color-an-chart-5: #
|
|
77
|
-
--color-an-chart-6: #
|
|
78
|
-
--color-shell-bg: #
|
|
79
|
-
--color-shell-surface:
|
|
80
|
-
--color-shell-border: #
|
|
81
|
-
--color-shell-text: #
|
|
82
|
-
--color-rail-page-bg: #
|
|
83
|
-
--color-rail-card-border: #
|
|
72
|
+
--color-an-chart-1: #3b82f6;
|
|
73
|
+
--color-an-chart-2: #14b8a6;
|
|
74
|
+
--color-an-chart-3: #f59e0b;
|
|
75
|
+
--color-an-chart-4: #ef4444;
|
|
76
|
+
--color-an-chart-5: #a855f7;
|
|
77
|
+
--color-an-chart-6: #06b6d4;
|
|
78
|
+
--color-shell-bg: #09090b;
|
|
79
|
+
--color-shell-surface: #18181b;
|
|
80
|
+
--color-shell-border: #3f3f46;
|
|
81
|
+
--color-shell-text: #fafafa;
|
|
82
|
+
--color-rail-page-bg: #09090b;
|
|
83
|
+
--color-rail-card-border: #3f3f46;
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
/**
|
|
88
|
-
* C-Hybrid user override — dark
|
|
88
|
+
* C-Hybrid user override — dark content surfaces are layered charcoal (not flat rail fill).
|
|
89
89
|
* Admin `applyInitialTheme()` / ThemeProvider toggles `.dark` on documentElement.
|
|
90
90
|
*/
|
|
91
91
|
.dark {
|
|
92
92
|
color-scheme: dark;
|
|
93
|
-
--color-an-bg: #
|
|
94
|
-
--color-an-bg-elevated:
|
|
95
|
-
--color-an-surface:
|
|
96
|
-
--color-an-surface-muted: #
|
|
97
|
-
--color-an-surface-hover: #
|
|
98
|
-
--color-an-surface-disabled: #
|
|
99
|
-
--color-an-text: #
|
|
100
|
-
--color-an-text-muted: #
|
|
101
|
-
--color-an-text-disabled: #
|
|
102
|
-
--color-an-border: #
|
|
103
|
-
--color-an-border-hover: #
|
|
104
|
-
--color-an-primary: #
|
|
105
|
-
--color-an-primary-hover: #
|
|
106
|
-
--color-an-primary-soft: rgba(
|
|
107
|
-
--color-an-focus-ring: #
|
|
93
|
+
--color-an-bg: #09090b;
|
|
94
|
+
--color-an-bg-elevated: #27272a;
|
|
95
|
+
--color-an-surface: #18181b;
|
|
96
|
+
--color-an-surface-muted: #0c0c0e;
|
|
97
|
+
--color-an-surface-hover: #27272a;
|
|
98
|
+
--color-an-surface-disabled: #141416;
|
|
99
|
+
--color-an-text: #fafafa;
|
|
100
|
+
--color-an-text-muted: #a1a1aa;
|
|
101
|
+
--color-an-text-disabled: #71717a;
|
|
102
|
+
--color-an-border: #3f3f46;
|
|
103
|
+
--color-an-border-hover: #52525b;
|
|
104
|
+
--color-an-primary: #fafafa;
|
|
105
|
+
--color-an-primary-hover: #e4e4e7;
|
|
106
|
+
--color-an-primary-soft: rgba(255, 255, 255, 0.1);
|
|
107
|
+
--color-an-focus-ring: #a1a1aa;
|
|
108
108
|
--color-an-disabled-opacity: 0.5;
|
|
109
|
-
--color-an-chart-1: #
|
|
110
|
-
--color-an-chart-2: #
|
|
111
|
-
--color-an-chart-3: #
|
|
112
|
-
--color-an-chart-4: #
|
|
113
|
-
--color-an-chart-5: #
|
|
114
|
-
--color-an-chart-6: #
|
|
115
|
-
--color-shell-bg: #
|
|
116
|
-
--color-shell-surface:
|
|
117
|
-
--color-shell-border: #
|
|
118
|
-
--color-shell-text: #
|
|
119
|
-
--color-rail-page-bg: #
|
|
120
|
-
--color-rail-card-border: #
|
|
109
|
+
--color-an-chart-1: #3b82f6;
|
|
110
|
+
--color-an-chart-2: #14b8a6;
|
|
111
|
+
--color-an-chart-3: #f59e0b;
|
|
112
|
+
--color-an-chart-4: #ef4444;
|
|
113
|
+
--color-an-chart-5: #a855f7;
|
|
114
|
+
--color-an-chart-6: #06b6d4;
|
|
115
|
+
--color-shell-bg: #09090b;
|
|
116
|
+
--color-shell-surface: #18181b;
|
|
117
|
+
--color-shell-border: #3f3f46;
|
|
118
|
+
--color-shell-text: #fafafa;
|
|
119
|
+
--color-rail-page-bg: #09090b;
|
|
120
|
+
--color-rail-card-border: #3f3f46;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
/**
|
|
@@ -126,32 +126,32 @@
|
|
|
126
126
|
*/
|
|
127
127
|
.light {
|
|
128
128
|
color-scheme: light;
|
|
129
|
-
--color-an-bg:
|
|
129
|
+
--color-an-bg: #f4f4f5;
|
|
130
130
|
--color-an-bg-elevated: var(--color-surface-default);
|
|
131
131
|
--color-an-surface: var(--color-surface-default);
|
|
132
|
-
--color-an-surface-muted:
|
|
133
|
-
--color-an-surface-hover:
|
|
134
|
-
--color-an-surface-disabled:
|
|
135
|
-
--color-an-text:
|
|
136
|
-
--color-an-text-muted: #
|
|
137
|
-
--color-an-text-disabled: #
|
|
138
|
-
--color-an-border:
|
|
139
|
-
--color-an-border-hover: #
|
|
140
|
-
--color-an-primary: var(--
|
|
141
|
-
--color-an-primary-hover: #
|
|
142
|
-
--color-an-primary-soft:
|
|
143
|
-
--color-an-focus-ring:
|
|
132
|
+
--color-an-surface-muted: #f4f4f5;
|
|
133
|
+
--color-an-surface-hover: #e4e4e7;
|
|
134
|
+
--color-an-surface-disabled: #f4f4f5;
|
|
135
|
+
--color-an-text: #09090b;
|
|
136
|
+
--color-an-text-muted: #52525b;
|
|
137
|
+
--color-an-text-disabled: #71717a;
|
|
138
|
+
--color-an-border: #e4e4e7;
|
|
139
|
+
--color-an-border-hover: #d4d4d8;
|
|
140
|
+
--color-an-primary: var(--brand-admin-primary);
|
|
141
|
+
--color-an-primary-hover: #09090b;
|
|
142
|
+
--color-an-primary-soft: #f4f4f5;
|
|
143
|
+
--color-an-focus-ring: #52525b;
|
|
144
144
|
--color-an-disabled-opacity: 0.55;
|
|
145
|
-
--color-an-chart-1:
|
|
146
|
-
--color-an-chart-2: #
|
|
147
|
-
--color-an-chart-3: #
|
|
148
|
-
--color-an-chart-4: #
|
|
149
|
-
--color-an-chart-5: #
|
|
150
|
-
--color-an-chart-6: #
|
|
151
|
-
--color-shell-bg:
|
|
145
|
+
--color-an-chart-1: #2563eb;
|
|
146
|
+
--color-an-chart-2: #0d9488;
|
|
147
|
+
--color-an-chart-3: #d97706;
|
|
148
|
+
--color-an-chart-4: #dc2626;
|
|
149
|
+
--color-an-chart-5: #9333ea;
|
|
150
|
+
--color-an-chart-6: #0891b2;
|
|
151
|
+
--color-shell-bg: #f4f4f5;
|
|
152
152
|
--color-shell-surface: var(--color-surface-default);
|
|
153
|
-
--color-shell-border:
|
|
154
|
-
--color-shell-text:
|
|
155
|
-
--color-rail-page-bg:
|
|
156
|
-
--color-rail-card-border:
|
|
153
|
+
--color-shell-border: #e4e4e7;
|
|
154
|
+
--color-shell-text: #09090b;
|
|
155
|
+
--color-rail-page-bg: #f4f4f5;
|
|
156
|
+
--color-rail-card-border: #e4e4e7;
|
|
157
157
|
}
|
|
@@ -1,64 +1,65 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Brand bridge — Canva Up Above SSOT → theme.css / admin-theme.css consumers
|
|
3
|
-
*
|
|
4
|
-
* DECISION-1
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* @
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
--color-brand-
|
|
20
|
-
--color-brand-
|
|
21
|
-
--color-brand-
|
|
22
|
-
--color-brand-
|
|
23
|
-
--color-brand-
|
|
24
|
-
--color-
|
|
25
|
-
--color-
|
|
26
|
-
--color-neutral-
|
|
27
|
-
--color-neutral-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
--brand-consumer-accent
|
|
32
|
-
--brand-consumer-accent-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
--brand-admin-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
--brand-rail-sidebar-bg
|
|
40
|
-
--brand-rail-sidebar-
|
|
41
|
-
--brand-rail-sidebar-
|
|
42
|
-
--brand-rail-sidebar-
|
|
43
|
-
--brand-rail-sidebar-
|
|
44
|
-
--brand-rail-
|
|
45
|
-
--brand-rail-
|
|
46
|
-
--brand-rail-
|
|
47
|
-
--brand-rail-kpi-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
--color-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
--color-rail-sidebar-
|
|
56
|
-
--color-rail-sidebar-
|
|
57
|
-
--color-rail-sidebar-
|
|
58
|
-
--color-rail-sidebar-
|
|
59
|
-
--color-rail-
|
|
60
|
-
--color-rail-
|
|
61
|
-
--color-rail-
|
|
62
|
-
--color-rail-kpi-
|
|
63
|
-
--color-
|
|
64
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Brand bridge — Canva Up Above SSOT → theme.css / admin-theme.css consumers
|
|
3
|
+
*
|
|
4
|
+
* DECISION-1: --brand-consumer-accent (Canva teal) + --brand-admin-* (neutral charcoal)
|
|
5
|
+
* Admin chrome is black / white / grey only — consumer apps keep Canva teal.
|
|
6
|
+
* Import before theme.css or admin-theme.css once MFE-v3-S-01 wires consumers.
|
|
7
|
+
*
|
|
8
|
+
* @see rpappp/up-backend/docs/FRONTEND/brand-palette.md
|
|
9
|
+
* @source https://www.canva.com/colors/color-palettes/up-above/
|
|
10
|
+
*/
|
|
11
|
+
:root {
|
|
12
|
+
/* Typography families — shared SSOT (admin also mirrors in design-tokens.css) */
|
|
13
|
+
--font-family-primary: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
14
|
+
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
15
|
+
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
|
16
|
+
'Courier New', monospace;
|
|
17
|
+
|
|
18
|
+
/* ── Foundation + neutrals (ADR-FE-BRAND-002 / COLOR registry) — consumer Canva ── */
|
|
19
|
+
--color-brand-primary: #1f6f78;
|
|
20
|
+
--color-brand-deep: #174b52;
|
|
21
|
+
--color-brand-accent: #58a9b5;
|
|
22
|
+
--color-brand-soft: #eef6f7;
|
|
23
|
+
--color-brand-text: #2a3136;
|
|
24
|
+
--color-brand-limestone: #d8d2c8;
|
|
25
|
+
--color-surface-default: #ffffff;
|
|
26
|
+
--color-neutral-950: #0f172a;
|
|
27
|
+
--color-neutral-100: #f1f5f9;
|
|
28
|
+
--color-neutral-200: #e2e8f0;
|
|
29
|
+
|
|
30
|
+
/* ── Semantic brand accents ── */
|
|
31
|
+
--brand-consumer-accent: var(--color-brand-primary);
|
|
32
|
+
--brand-consumer-accent-soft: var(--color-brand-soft);
|
|
33
|
+
--brand-consumer-accent-foreground: var(--color-surface-default);
|
|
34
|
+
/* Admin — charcoal / near-black (not consumer teal, not violet) */
|
|
35
|
+
--brand-admin-accent: #171717;
|
|
36
|
+
--brand-admin-primary: #18181b;
|
|
37
|
+
|
|
38
|
+
/* ── Admin rail palette — near-black charcoal ── */
|
|
39
|
+
--brand-rail-sidebar-bg: #0a0a0a;
|
|
40
|
+
--brand-rail-sidebar-bg-deep: #000000;
|
|
41
|
+
--brand-rail-sidebar-text: #fafafa;
|
|
42
|
+
--brand-rail-sidebar-muted: #a3a3a3;
|
|
43
|
+
--brand-rail-sidebar-active: var(--brand-admin-accent);
|
|
44
|
+
--brand-rail-sidebar-hover: rgba(255, 255, 255, 0.08);
|
|
45
|
+
--brand-rail-page-bg: var(--color-neutral-100);
|
|
46
|
+
--brand-rail-card-border: var(--color-neutral-200);
|
|
47
|
+
--brand-rail-kpi-up: #05805a;
|
|
48
|
+
--brand-rail-kpi-down: #da2325;
|
|
49
|
+
|
|
50
|
+
/* ── Bridge → theme.css (consumer / kiosk / pickup) — wired in MFE-v3-S-01 ── */
|
|
51
|
+
--color-accent: var(--brand-consumer-accent);
|
|
52
|
+
--color-focus-ring: var(--brand-consumer-accent);
|
|
53
|
+
|
|
54
|
+
/* ── Bridge → admin-theme.css — wired in MFE-v3-S-01 ── */
|
|
55
|
+
--color-rail-sidebar-bg: var(--brand-rail-sidebar-bg);
|
|
56
|
+
--color-rail-sidebar-text: var(--brand-rail-sidebar-text);
|
|
57
|
+
--color-rail-sidebar-muted: var(--brand-rail-sidebar-muted);
|
|
58
|
+
--color-rail-sidebar-active: var(--brand-rail-sidebar-active);
|
|
59
|
+
--color-rail-sidebar-hover: var(--brand-rail-sidebar-hover);
|
|
60
|
+
--color-rail-page-bg: var(--brand-rail-page-bg);
|
|
61
|
+
--color-rail-card-border: var(--brand-rail-card-border);
|
|
62
|
+
--color-rail-kpi-up: var(--brand-rail-kpi-up);
|
|
63
|
+
--color-rail-kpi-down: var(--brand-rail-kpi-down);
|
|
64
|
+
--color-an-chart-1: var(--brand-admin-primary);
|
|
65
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
|
-
"generatedAt": "2026-07-
|
|
3
|
+
"generatedAt": "2026-07-30T06:48:08.022Z",
|
|
4
4
|
"source": "shared/scripts/gate-tokens-sync.mjs",
|
|
5
5
|
"inputs": [
|
|
6
6
|
"brand-bridge.css",
|
|
@@ -26,14 +26,14 @@
|
|
|
26
26
|
"--brand-consumer-accent": "var(--color-brand-primary)",
|
|
27
27
|
"--brand-consumer-accent-soft": "var(--color-brand-soft)",
|
|
28
28
|
"--brand-consumer-accent-foreground": "var(--color-surface-default)",
|
|
29
|
-
"--brand-admin-accent": "#
|
|
30
|
-
"--brand-admin-primary": "#
|
|
31
|
-
"--brand-rail-sidebar-bg": "#
|
|
32
|
-
"--brand-rail-sidebar-bg-deep": "
|
|
33
|
-
"--brand-rail-sidebar-text": "#
|
|
34
|
-
"--brand-rail-sidebar-muted": "#
|
|
29
|
+
"--brand-admin-accent": "#171717",
|
|
30
|
+
"--brand-admin-primary": "#18181b",
|
|
31
|
+
"--brand-rail-sidebar-bg": "#0a0a0a",
|
|
32
|
+
"--brand-rail-sidebar-bg-deep": "#000000",
|
|
33
|
+
"--brand-rail-sidebar-text": "#fafafa",
|
|
34
|
+
"--brand-rail-sidebar-muted": "#a3a3a3",
|
|
35
35
|
"--brand-rail-sidebar-active": "var(--brand-admin-accent)",
|
|
36
|
-
"--brand-rail-sidebar-hover": "rgba(
|
|
36
|
+
"--brand-rail-sidebar-hover": "rgba(255, 255, 255, 0.08)",
|
|
37
37
|
"--brand-rail-page-bg": "var(--color-neutral-100)",
|
|
38
38
|
"--brand-rail-card-border": "var(--color-neutral-200)",
|
|
39
39
|
"--brand-rail-kpi-up": "#05805a",
|
|
@@ -95,43 +95,43 @@
|
|
|
95
95
|
{
|
|
96
96
|
"file": "admin-theme.css",
|
|
97
97
|
"properties": {
|
|
98
|
-
"--color-an-bg": "
|
|
98
|
+
"--color-an-bg": "#f4f4f5",
|
|
99
99
|
"--color-an-bg-elevated": "var(--color-surface-default)",
|
|
100
100
|
"--color-an-surface": "var(--color-surface-default)",
|
|
101
|
-
"--color-an-surface-muted": "
|
|
102
|
-
"--color-an-surface-hover": "
|
|
103
|
-
"--color-an-surface-disabled": "
|
|
104
|
-
"--color-an-text": "
|
|
105
|
-
"--color-an-text-muted": "#
|
|
106
|
-
"--color-an-text-disabled": "#
|
|
107
|
-
"--color-an-border": "
|
|
108
|
-
"--color-an-border-hover": "#
|
|
109
|
-
"--color-an-primary": "var(--
|
|
110
|
-
"--color-an-primary-hover": "#
|
|
111
|
-
"--color-an-primary-soft": "
|
|
112
|
-
"--color-an-focus-ring": "
|
|
101
|
+
"--color-an-surface-muted": "#f4f4f5",
|
|
102
|
+
"--color-an-surface-hover": "#e4e4e7",
|
|
103
|
+
"--color-an-surface-disabled": "#f4f4f5",
|
|
104
|
+
"--color-an-text": "#09090b",
|
|
105
|
+
"--color-an-text-muted": "#52525b",
|
|
106
|
+
"--color-an-text-disabled": "#71717a",
|
|
107
|
+
"--color-an-border": "#e4e4e7",
|
|
108
|
+
"--color-an-border-hover": "#d4d4d8",
|
|
109
|
+
"--color-an-primary": "var(--brand-admin-primary)",
|
|
110
|
+
"--color-an-primary-hover": "#09090b",
|
|
111
|
+
"--color-an-primary-soft": "#f4f4f5",
|
|
112
|
+
"--color-an-focus-ring": "#52525b",
|
|
113
113
|
"--color-an-danger": "var(--color-error)",
|
|
114
114
|
"--color-an-success": "var(--color-success)",
|
|
115
115
|
"--color-an-warn": "var(--color-warning)",
|
|
116
|
-
"--color-an-info": "
|
|
116
|
+
"--color-an-info": "#52525b",
|
|
117
117
|
"--color-an-disabled-opacity": "0.55",
|
|
118
|
-
"--color-an-chart-1": "
|
|
119
|
-
"--color-an-chart-2": "#
|
|
120
|
-
"--color-an-chart-3": "#
|
|
121
|
-
"--color-an-chart-4": "#
|
|
122
|
-
"--color-an-chart-5": "#
|
|
123
|
-
"--color-an-chart-6": "#
|
|
124
|
-
"--color-shell-bg": "
|
|
118
|
+
"--color-an-chart-1": "#2563eb",
|
|
119
|
+
"--color-an-chart-2": "#0d9488",
|
|
120
|
+
"--color-an-chart-3": "#d97706",
|
|
121
|
+
"--color-an-chart-4": "#dc2626",
|
|
122
|
+
"--color-an-chart-5": "#9333ea",
|
|
123
|
+
"--color-an-chart-6": "#0891b2",
|
|
124
|
+
"--color-shell-bg": "#f4f4f5",
|
|
125
125
|
"--color-shell-surface": "var(--color-surface-default)",
|
|
126
|
-
"--color-shell-border": "
|
|
127
|
-
"--color-shell-text": "
|
|
126
|
+
"--color-shell-border": "#e4e4e7",
|
|
127
|
+
"--color-shell-text": "#09090b",
|
|
128
128
|
"--color-rail-sidebar-bg": "var(--brand-rail-sidebar-bg)",
|
|
129
129
|
"--color-rail-sidebar-text": "var(--brand-rail-sidebar-text)",
|
|
130
130
|
"--color-rail-sidebar-muted": "var(--brand-rail-sidebar-muted)",
|
|
131
131
|
"--color-rail-sidebar-active": "var(--brand-rail-sidebar-active)",
|
|
132
132
|
"--color-rail-sidebar-hover": "var(--brand-rail-sidebar-hover)",
|
|
133
|
-
"--color-rail-page-bg": "
|
|
134
|
-
"--color-rail-card-border": "
|
|
133
|
+
"--color-rail-page-bg": "#f4f4f5",
|
|
134
|
+
"--color-rail-card-border": "#e4e4e7",
|
|
135
135
|
"--color-rail-kpi-up": "var(--brand-rail-kpi-up)",
|
|
136
136
|
"--color-rail-kpi-down": "var(--brand-rail-kpi-down)"
|
|
137
137
|
},
|
|
@@ -202,27 +202,27 @@
|
|
|
202
202
|
},
|
|
203
203
|
"--brand-admin-accent": {
|
|
204
204
|
"file": "brand-bridge.css",
|
|
205
|
-
"value": "#
|
|
205
|
+
"value": "#171717"
|
|
206
206
|
},
|
|
207
207
|
"--brand-admin-primary": {
|
|
208
208
|
"file": "brand-bridge.css",
|
|
209
|
-
"value": "#
|
|
209
|
+
"value": "#18181b"
|
|
210
210
|
},
|
|
211
211
|
"--brand-rail-sidebar-bg": {
|
|
212
212
|
"file": "brand-bridge.css",
|
|
213
|
-
"value": "#
|
|
213
|
+
"value": "#0a0a0a"
|
|
214
214
|
},
|
|
215
215
|
"--brand-rail-sidebar-bg-deep": {
|
|
216
216
|
"file": "brand-bridge.css",
|
|
217
|
-
"value": "
|
|
217
|
+
"value": "#000000"
|
|
218
218
|
},
|
|
219
219
|
"--brand-rail-sidebar-text": {
|
|
220
220
|
"file": "brand-bridge.css",
|
|
221
|
-
"value": "#
|
|
221
|
+
"value": "#fafafa"
|
|
222
222
|
},
|
|
223
223
|
"--brand-rail-sidebar-muted": {
|
|
224
224
|
"file": "brand-bridge.css",
|
|
225
|
-
"value": "#
|
|
225
|
+
"value": "#a3a3a3"
|
|
226
226
|
},
|
|
227
227
|
"--brand-rail-sidebar-active": {
|
|
228
228
|
"file": "brand-bridge.css",
|
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
},
|
|
231
231
|
"--brand-rail-sidebar-hover": {
|
|
232
232
|
"file": "brand-bridge.css",
|
|
233
|
-
"value": "rgba(
|
|
233
|
+
"value": "rgba(255, 255, 255, 0.08)"
|
|
234
234
|
},
|
|
235
235
|
"--brand-rail-page-bg": {
|
|
236
236
|
"file": "brand-bridge.css",
|
|
@@ -278,11 +278,11 @@
|
|
|
278
278
|
},
|
|
279
279
|
"--color-rail-page-bg": {
|
|
280
280
|
"file": "admin-theme.css",
|
|
281
|
-
"value": "
|
|
281
|
+
"value": "#f4f4f5"
|
|
282
282
|
},
|
|
283
283
|
"--color-rail-card-border": {
|
|
284
284
|
"file": "admin-theme.css",
|
|
285
|
-
"value": "
|
|
285
|
+
"value": "#e4e4e7"
|
|
286
286
|
},
|
|
287
287
|
"--color-rail-kpi-up": {
|
|
288
288
|
"file": "admin-theme.css",
|
|
@@ -294,7 +294,7 @@
|
|
|
294
294
|
},
|
|
295
295
|
"--color-an-chart-1": {
|
|
296
296
|
"file": "admin-theme.css",
|
|
297
|
-
"value": "
|
|
297
|
+
"value": "#2563eb"
|
|
298
298
|
},
|
|
299
299
|
"--color-surface": {
|
|
300
300
|
"file": "theme.css",
|
|
@@ -422,7 +422,7 @@
|
|
|
422
422
|
},
|
|
423
423
|
"--color-an-bg": {
|
|
424
424
|
"file": "admin-theme.css",
|
|
425
|
-
"value": "
|
|
425
|
+
"value": "#f4f4f5"
|
|
426
426
|
},
|
|
427
427
|
"--color-an-bg-elevated": {
|
|
428
428
|
"file": "admin-theme.css",
|
|
@@ -434,51 +434,51 @@
|
|
|
434
434
|
},
|
|
435
435
|
"--color-an-surface-muted": {
|
|
436
436
|
"file": "admin-theme.css",
|
|
437
|
-
"value": "
|
|
437
|
+
"value": "#f4f4f5"
|
|
438
438
|
},
|
|
439
439
|
"--color-an-surface-hover": {
|
|
440
440
|
"file": "admin-theme.css",
|
|
441
|
-
"value": "
|
|
441
|
+
"value": "#e4e4e7"
|
|
442
442
|
},
|
|
443
443
|
"--color-an-surface-disabled": {
|
|
444
444
|
"file": "admin-theme.css",
|
|
445
|
-
"value": "
|
|
445
|
+
"value": "#f4f4f5"
|
|
446
446
|
},
|
|
447
447
|
"--color-an-text": {
|
|
448
448
|
"file": "admin-theme.css",
|
|
449
|
-
"value": "
|
|
449
|
+
"value": "#09090b"
|
|
450
450
|
},
|
|
451
451
|
"--color-an-text-muted": {
|
|
452
452
|
"file": "admin-theme.css",
|
|
453
|
-
"value": "#
|
|
453
|
+
"value": "#52525b"
|
|
454
454
|
},
|
|
455
455
|
"--color-an-text-disabled": {
|
|
456
456
|
"file": "admin-theme.css",
|
|
457
|
-
"value": "#
|
|
457
|
+
"value": "#71717a"
|
|
458
458
|
},
|
|
459
459
|
"--color-an-border": {
|
|
460
460
|
"file": "admin-theme.css",
|
|
461
|
-
"value": "
|
|
461
|
+
"value": "#e4e4e7"
|
|
462
462
|
},
|
|
463
463
|
"--color-an-border-hover": {
|
|
464
464
|
"file": "admin-theme.css",
|
|
465
|
-
"value": "#
|
|
465
|
+
"value": "#d4d4d8"
|
|
466
466
|
},
|
|
467
467
|
"--color-an-primary": {
|
|
468
468
|
"file": "admin-theme.css",
|
|
469
|
-
"value": "var(--
|
|
469
|
+
"value": "var(--brand-admin-primary)"
|
|
470
470
|
},
|
|
471
471
|
"--color-an-primary-hover": {
|
|
472
472
|
"file": "admin-theme.css",
|
|
473
|
-
"value": "#
|
|
473
|
+
"value": "#09090b"
|
|
474
474
|
},
|
|
475
475
|
"--color-an-primary-soft": {
|
|
476
476
|
"file": "admin-theme.css",
|
|
477
|
-
"value": "
|
|
477
|
+
"value": "#f4f4f5"
|
|
478
478
|
},
|
|
479
479
|
"--color-an-focus-ring": {
|
|
480
480
|
"file": "admin-theme.css",
|
|
481
|
-
"value": "
|
|
481
|
+
"value": "#52525b"
|
|
482
482
|
},
|
|
483
483
|
"--color-an-danger": {
|
|
484
484
|
"file": "admin-theme.css",
|
|
@@ -494,7 +494,7 @@
|
|
|
494
494
|
},
|
|
495
495
|
"--color-an-info": {
|
|
496
496
|
"file": "admin-theme.css",
|
|
497
|
-
"value": "
|
|
497
|
+
"value": "#52525b"
|
|
498
498
|
},
|
|
499
499
|
"--color-an-disabled-opacity": {
|
|
500
500
|
"file": "admin-theme.css",
|
|
@@ -502,27 +502,27 @@
|
|
|
502
502
|
},
|
|
503
503
|
"--color-an-chart-2": {
|
|
504
504
|
"file": "admin-theme.css",
|
|
505
|
-
"value": "#
|
|
505
|
+
"value": "#0d9488"
|
|
506
506
|
},
|
|
507
507
|
"--color-an-chart-3": {
|
|
508
508
|
"file": "admin-theme.css",
|
|
509
|
-
"value": "#
|
|
509
|
+
"value": "#d97706"
|
|
510
510
|
},
|
|
511
511
|
"--color-an-chart-4": {
|
|
512
512
|
"file": "admin-theme.css",
|
|
513
|
-
"value": "#
|
|
513
|
+
"value": "#dc2626"
|
|
514
514
|
},
|
|
515
515
|
"--color-an-chart-5": {
|
|
516
516
|
"file": "admin-theme.css",
|
|
517
|
-
"value": "#
|
|
517
|
+
"value": "#9333ea"
|
|
518
518
|
},
|
|
519
519
|
"--color-an-chart-6": {
|
|
520
520
|
"file": "admin-theme.css",
|
|
521
|
-
"value": "#
|
|
521
|
+
"value": "#0891b2"
|
|
522
522
|
},
|
|
523
523
|
"--color-shell-bg": {
|
|
524
524
|
"file": "admin-theme.css",
|
|
525
|
-
"value": "
|
|
525
|
+
"value": "#f4f4f5"
|
|
526
526
|
},
|
|
527
527
|
"--color-shell-surface": {
|
|
528
528
|
"file": "admin-theme.css",
|
|
@@ -530,11 +530,11 @@
|
|
|
530
530
|
},
|
|
531
531
|
"--color-shell-border": {
|
|
532
532
|
"file": "admin-theme.css",
|
|
533
|
-
"value": "
|
|
533
|
+
"value": "#e4e4e7"
|
|
534
534
|
},
|
|
535
535
|
"--color-shell-text": {
|
|
536
536
|
"file": "admin-theme.css",
|
|
537
|
-
"value": "
|
|
537
|
+
"value": "#09090b"
|
|
538
538
|
}
|
|
539
539
|
}
|
|
540
540
|
}
|