pi-kiosk-shared 2.2.43 → 2.2.44

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.
Files changed (7) hide show
  1. package/dist/ui/LocaleFlags/LocaleFlagToggle.js +7 -7
  2. package/dist/ui/LocaleFlags/LocaleFlagToggle.js.map +1 -1
  3. package/package.json +347 -339
  4. package/src/tokens/admin-theme.css +33 -34
  5. package/src/tokens/brand-bridge.css +23 -15
  6. package/src/tokens/theme.css +19 -19
  7. package/src/tokens/tokens.sync.json +175 -664
package/src/tokens/admin-theme.css CHANGED
@@ -4,22 +4,22 @@
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 dark is violet/indigo kin to the rail sidebar
8
- * (`#1e1b4b`); light stays slate neutrals. Primary / rail accents stay brand-scoped.
7
+ * Light/dark neutrals: admin dark follows the rail sidebar/deep brand surface.
8
+ * Light stays neutral-led while primary / rail accents remain brand-scoped.
9
9
  */
10
10
  @import './brand-bridge.css';
11
11
 
12
12
  @theme {
13
- --color-an-bg: #f8fafc;
14
- --color-an-bg-elevated: #ffffff;
15
- --color-an-surface: #ffffff;
16
- --color-an-surface-muted: #f8fafc;
17
- --color-an-surface-hover: #f1f5f9;
18
- --color-an-surface-disabled: #f1f5f9;
19
- --color-an-text: #0f172a;
13
+ --color-an-bg: var(--color-neutral-100);
14
+ --color-an-bg-elevated: var(--color-surface-default);
15
+ --color-an-surface: var(--color-surface-default);
16
+ --color-an-surface-muted: var(--color-neutral-100);
17
+ --color-an-surface-hover: var(--color-neutral-100);
18
+ --color-an-surface-disabled: var(--color-neutral-100);
19
+ --color-an-text: var(--color-neutral-950);
20
20
  --color-an-text-muted: #475569;
21
21
  --color-an-text-disabled: #94a3b8;
22
- --color-an-border: #e2e8f0;
22
+ --color-an-border: var(--color-neutral-200);
23
23
  --color-an-border-hover: #cbd5e1;
24
24
  --color-an-primary: var(--color-primary);
25
25
  --color-an-primary-hover: #4f46e5;
@@ -45,18 +45,17 @@
45
45
  --color-rail-sidebar-muted: var(--brand-rail-sidebar-muted);
46
46
  --color-rail-sidebar-active: var(--brand-rail-sidebar-active);
47
47
  --color-rail-sidebar-hover: var(--brand-rail-sidebar-hover);
48
- --color-rail-page-bg: #f1f5f9;
49
- --color-rail-card-border: #e2e8f0;
48
+ --color-rail-page-bg: var(--color-neutral-100);
49
+ --color-rail-card-border: var(--color-neutral-200);
50
50
  --color-rail-kpi-up: var(--brand-rail-kpi-up);
51
51
  --color-rail-kpi-down: var(--brand-rail-kpi-down);
52
52
  }
53
53
 
54
54
  @media (prefers-color-scheme: dark) {
55
55
  :root {
56
- /* Violet dark — kin to rail sidebar #1e1b4b (not consumer sailor blue) */
57
56
  --color-an-bg: #12102a;
58
- --color-an-bg-elevated: #1e1b4b;
59
- --color-an-surface: #1e1b4b;
57
+ --color-an-bg-elevated: var(--brand-rail-sidebar-bg);
58
+ --color-an-surface: var(--brand-rail-sidebar-bg);
60
59
  --color-an-surface-muted: #17153a;
61
60
  --color-an-surface-hover: #2a2660;
62
61
  --color-an-surface-disabled: #2a2660;
@@ -77,7 +76,7 @@
77
76
  --color-an-chart-5: #c4b5fd;
78
77
  --color-an-chart-6: #22d3ee;
79
78
  --color-shell-bg: #12102a;
80
- --color-shell-surface: #1e1b4b;
79
+ --color-shell-surface: var(--brand-rail-sidebar-bg);
81
80
  --color-shell-border: #2f2b55;
82
81
  --color-shell-text: #e0e7ff;
83
82
  --color-rail-page-bg: #12102a;
@@ -86,14 +85,14 @@
86
85
  }
87
86
 
88
87
  /**
89
- * C-Hybrid user override — violet dark kin to `--brand-rail-sidebar-bg` (#1e1b4b).
88
+ * C-Hybrid user override — dark mode tracks `--brand-rail-sidebar-bg`.
90
89
  * Admin `applyInitialTheme()` / ThemeProvider toggles `.dark` on documentElement.
91
90
  */
92
91
  .dark {
93
92
  color-scheme: dark;
94
93
  --color-an-bg: #12102a;
95
- --color-an-bg-elevated: #1e1b4b;
96
- --color-an-surface: #1e1b4b;
94
+ --color-an-bg-elevated: var(--brand-rail-sidebar-bg);
95
+ --color-an-surface: var(--brand-rail-sidebar-bg);
97
96
  --color-an-surface-muted: #17153a;
98
97
  --color-an-surface-hover: #2a2660;
99
98
  --color-an-surface-disabled: #2a2660;
@@ -114,7 +113,7 @@
114
113
  --color-an-chart-5: #c4b5fd;
115
114
  --color-an-chart-6: #22d3ee;
116
115
  --color-shell-bg: #12102a;
117
- --color-shell-surface: #1e1b4b;
116
+ --color-shell-surface: var(--brand-rail-sidebar-bg);
118
117
  --color-shell-border: #2f2b55;
119
118
  --color-shell-text: #e0e7ff;
120
119
  --color-rail-page-bg: #12102a;
@@ -127,16 +126,16 @@
127
126
  */
128
127
  .light {
129
128
  color-scheme: light;
130
- --color-an-bg: #f8fafc;
131
- --color-an-bg-elevated: #ffffff;
132
- --color-an-surface: #ffffff;
133
- --color-an-surface-muted: #f8fafc;
134
- --color-an-surface-hover: #f1f5f9;
135
- --color-an-surface-disabled: #f1f5f9;
136
- --color-an-text: #0f172a;
129
+ --color-an-bg: var(--color-neutral-100);
130
+ --color-an-bg-elevated: var(--color-surface-default);
131
+ --color-an-surface: var(--color-surface-default);
132
+ --color-an-surface-muted: var(--color-neutral-100);
133
+ --color-an-surface-hover: var(--color-neutral-100);
134
+ --color-an-surface-disabled: var(--color-neutral-100);
135
+ --color-an-text: var(--color-neutral-950);
137
136
  --color-an-text-muted: #475569;
138
137
  --color-an-text-disabled: #94a3b8;
139
- --color-an-border: #e2e8f0;
138
+ --color-an-border: var(--color-neutral-200);
140
139
  --color-an-border-hover: #cbd5e1;
141
140
  --color-an-primary: var(--color-primary);
142
141
  --color-an-primary-hover: #4f46e5;
@@ -149,10 +148,10 @@
149
148
  --color-an-chart-4: #ef4444;
150
149
  --color-an-chart-5: #8b5cf6;
151
150
  --color-an-chart-6: #06b6d4;
152
- --color-shell-bg: #f8fafc;
153
- --color-shell-surface: #ffffff;
154
- --color-shell-border: #e2e8f0;
155
- --color-shell-text: #0f172a;
156
- --color-rail-page-bg: #f1f5f9;
157
- --color-rail-card-border: #e2e8f0;
151
+ --color-shell-bg: var(--color-neutral-100);
152
+ --color-shell-surface: var(--color-surface-default);
153
+ --color-shell-border: var(--color-neutral-200);
154
+ --color-shell-text: var(--color-neutral-950);
155
+ --color-rail-page-bg: var(--color-neutral-100);
156
+ --color-rail-card-border: var(--color-neutral-200);
158
157
  }
package/src/tokens/brand-bridge.css CHANGED
@@ -14,26 +14,34 @@
14
14
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
15
15
  'Courier New', monospace;
16
16
 
17
- /* ── Canva Up Above (provisional — pending PO hex confirmation) ── */
18
- --brand-canva-sailor-blue: #00203f;
19
- --brand-canva-mint: #adefd1;
17
+ /* ── Foundation + neutrals (ADR-FE-BRAND-002 / COLOR registry) ── */
18
+ --color-brand-primary: #1f6f78;
19
+ --color-brand-deep: #174b52;
20
+ --color-brand-accent: #58a9b5;
21
+ --color-brand-soft: #eef6f7;
22
+ --color-brand-text: #2a3136;
23
+ --color-brand-limestone: #d8d2c8;
24
+ --color-surface-default: #ffffff;
25
+ --color-neutral-950: #0f172a;
26
+ --color-neutral-100: #f1f5f9;
27
+ --color-neutral-200: #e2e8f0;
20
28
 
21
29
  /* ── Semantic brand accents (DECISION-1 Option C) ── */
22
- --brand-consumer-accent: var(--brand-canva-sailor-blue);
23
- --brand-consumer-accent-soft: var(--brand-canva-mint);
24
- --brand-consumer-accent-foreground: #ffffff;
25
- --brand-admin-accent: #7c3aed;
26
- --brand-admin-primary: #6365f0;
30
+ --brand-consumer-accent: var(--color-brand-primary);
31
+ --brand-consumer-accent-soft: var(--color-brand-soft);
32
+ --brand-consumer-accent-foreground: var(--color-surface-default);
33
+ --brand-admin-accent: var(--color-brand-primary);
34
+ --brand-admin-primary: var(--color-brand-primary);
27
35
 
28
36
  /* ── Admin rail palette (MOCKUP_VISUAL_SPEC_CACHE harmonization) ── */
29
- --brand-rail-sidebar-bg: #1e1b4b;
30
- --brand-rail-sidebar-bg-deep: #0f172a;
31
- --brand-rail-sidebar-text: #e0e7ff;
32
- --brand-rail-sidebar-muted: #a5b4fc;
37
+ --brand-rail-sidebar-bg: var(--color-brand-deep);
38
+ --brand-rail-sidebar-bg-deep: #0f3036;
39
+ --brand-rail-sidebar-text: var(--color-brand-soft);
40
+ --brand-rail-sidebar-muted: var(--color-brand-accent);
33
41
  --brand-rail-sidebar-active: var(--brand-admin-accent);
34
- --brand-rail-sidebar-hover: rgba(124, 58, 237, 0.2);
35
- --brand-rail-page-bg: #f1f5f9;
36
- --brand-rail-card-border: #e2e8f0;
42
+ --brand-rail-sidebar-hover: color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
43
+ --brand-rail-page-bg: var(--color-neutral-100);
44
+ --brand-rail-card-border: var(--color-neutral-200);
37
45
  --brand-rail-kpi-up: #05805a;
38
46
  --brand-rail-kpi-down: #da2325;
39
47
 
package/src/tokens/theme.css CHANGED
@@ -8,14 +8,14 @@
8
8
  @import './brand-bridge.css';
9
9
 
10
10
  @theme {
11
- --color-surface: #ffffff;
11
+ --color-surface: var(--color-surface-default);
12
12
  --color-surface-muted: #f8fafc;
13
- --color-surface-elevated: #ffffff;
14
- --color-surface-hover: #f1f5f9;
15
- --color-on-surface: #0f172a;
13
+ --color-surface-elevated: var(--color-surface-default);
14
+ --color-surface-hover: var(--color-neutral-100);
15
+ --color-on-surface: var(--color-neutral-950);
16
16
  --color-on-surface-muted: #475569;
17
17
  --color-on-surface-disabled: #94a3b8;
18
- --color-primary: #0f172a;
18
+ --color-primary: var(--color-neutral-950);
19
19
  --color-primary-foreground: #f8fafc;
20
20
  --color-accent: var(--brand-consumer-accent);
21
21
  --color-accent-foreground: var(--brand-consumer-accent-foreground);
@@ -26,11 +26,11 @@
26
26
  --color-danger-foreground: #fef2f2;
27
27
  --color-warning: #d97706;
28
28
  --color-warning-foreground: #fffbeb;
29
- --color-border: #e2e8f0;
29
+ --color-border: var(--color-neutral-200);
30
30
  --color-border-strong: #cbd5e1;
31
31
  --color-focus-ring: var(--brand-consumer-accent);
32
32
  --color-qr-render-dark: #000000;
33
- --color-qr-render-light: #ffffff;
33
+ --color-qr-render-light: var(--color-surface-default);
34
34
  --color-disabled-opacity: 0.55;
35
35
  --radius-sm: 0.375rem;
36
36
  --radius-md: 0.5rem;
@@ -46,14 +46,14 @@
46
46
  @media (prefers-color-scheme: dark) {
47
47
  @theme {
48
48
  --color-surface: #0b1220;
49
- --color-surface-muted: #0f172a;
49
+ --color-surface-muted: var(--color-neutral-950);
50
50
  --color-surface-elevated: #111a2e;
51
51
  --color-surface-hover: #162031;
52
- --color-on-surface: #e2e8f0;
52
+ --color-on-surface: var(--color-neutral-200);
53
53
  --color-on-surface-muted: #94a3b8;
54
54
  --color-on-surface-disabled: #64748b;
55
55
  --color-primary: #f8fafc;
56
- --color-primary-foreground: #0f172a;
56
+ --color-primary-foreground: var(--color-neutral-950);
57
57
  --color-accent: var(--brand-consumer-accent);
58
58
  --color-accent-foreground: var(--brand-consumer-accent-foreground);
59
59
  --color-accent-hover: var(--brand-consumer-accent-soft);
@@ -79,14 +79,14 @@
79
79
  .dark {
80
80
  color-scheme: dark;
81
81
  --color-surface: #0b1220;
82
- --color-surface-muted: #0f172a;
82
+ --color-surface-muted: var(--color-neutral-950);
83
83
  --color-surface-elevated: #111a2e;
84
84
  --color-surface-hover: #162031;
85
- --color-on-surface: #e2e8f0;
85
+ --color-on-surface: var(--color-neutral-200);
86
86
  --color-on-surface-muted: #94a3b8;
87
87
  --color-on-surface-disabled: #64748b;
88
88
  --color-primary: #f8fafc;
89
- --color-primary-foreground: #0f172a;
89
+ --color-primary-foreground: var(--color-neutral-950);
90
90
  --color-accent: var(--brand-consumer-accent);
91
91
  --color-accent-foreground: var(--brand-consumer-accent-foreground);
92
92
  --color-accent-hover: var(--brand-consumer-accent-soft);
@@ -110,14 +110,14 @@
110
110
  */
111
111
  .light {
112
112
  color-scheme: light;
113
- --color-surface: #ffffff;
113
+ --color-surface: var(--color-surface-default);
114
114
  --color-surface-muted: #f8fafc;
115
- --color-surface-elevated: #ffffff;
116
- --color-surface-hover: #f1f5f9;
117
- --color-on-surface: #0f172a;
115
+ --color-surface-elevated: var(--color-surface-default);
116
+ --color-surface-hover: var(--color-neutral-100);
117
+ --color-on-surface: var(--color-neutral-950);
118
118
  --color-on-surface-muted: #475569;
119
119
  --color-on-surface-disabled: #94a3b8;
120
- --color-primary: #0f172a;
120
+ --color-primary: var(--color-neutral-950);
121
121
  --color-primary-foreground: #f8fafc;
122
122
  --color-accent: var(--brand-consumer-accent);
123
123
  --color-accent-foreground: var(--brand-consumer-accent-foreground);
@@ -128,7 +128,7 @@
128
128
  --color-danger-foreground: #fef2f2;
129
129
  --color-warning: #d97706;
130
130
  --color-warning-foreground: #fffbeb;
131
- --color-border: #e2e8f0;
131
+ --color-border: var(--color-neutral-200);
132
132
  --color-border-strong: #cbd5e1;
133
133
  --color-focus-ring: var(--brand-consumer-accent);
134
134
  --color-disabled-opacity: 0.55;