pi-kiosk-shared 2.2.44 → 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.
Files changed (31) hide show
  1. package/dist/theme/ThemeProvider.d.ts +5 -1
  2. package/dist/theme/ThemeProvider.d.ts.map +1 -1
  3. package/dist/theme/ThemeProvider.js +6 -2
  4. package/dist/theme/ThemeProvider.js.map +1 -1
  5. package/dist/theme/themeContract.d.ts +12 -1
  6. package/dist/theme/themeContract.d.ts.map +1 -1
  7. package/dist/theme/themeContract.js +15 -6
  8. package/dist/theme/themeContract.js.map +1 -1
  9. package/dist/ui/Avatar/Avatar.js +2 -2
  10. package/dist/ui/Button/Button.d.ts +14 -0
  11. package/dist/ui/Button/Button.d.ts.map +1 -1
  12. package/dist/ui/Button/Button.js +59 -20
  13. package/dist/ui/Button/Button.js.map +1 -1
  14. package/dist/ui/Checkbox/Checkbox.d.ts +5 -1
  15. package/dist/ui/Checkbox/Checkbox.d.ts.map +1 -1
  16. package/dist/ui/Checkbox/Checkbox.js +5 -1
  17. package/dist/ui/Checkbox/Checkbox.js.map +1 -1
  18. package/dist/ui/Radio/Radio.d.ts +5 -1
  19. package/dist/ui/Radio/Radio.d.ts.map +1 -1
  20. package/dist/ui/Radio/Radio.js +5 -1
  21. package/dist/ui/Radio/Radio.js.map +1 -1
  22. package/dist/ui/ScreenState/ScreenState.js +1 -1
  23. package/dist/ui/ScreenState/ScreenState.js.map +1 -1
  24. package/dist/ui/Switch/Switch.d.ts +5 -1
  25. package/dist/ui/Switch/Switch.d.ts.map +1 -1
  26. package/dist/ui/Switch/Switch.js +5 -1
  27. package/dist/ui/Switch/Switch.js.map +1 -1
  28. package/package.json +1 -1
  29. package/src/tokens/admin-theme.css +94 -94
  30. package/src/tokens/brand-bridge.css +65 -63
  31. package/src/tokens/tokens.sync.json +143 -103
package/src/tokens/admin-theme.css 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 dark follows the rail sidebar/deep brand surface.
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: #475569;
21
- --color-an-text-disabled: #94a3b8;
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: #cbd5e1;
24
- --color-an-primary: var(--color-primary);
25
- --color-an-primary-hover: #4f46e5;
26
- --color-an-primary-soft: var(--color-primary-light);
27
- --color-an-focus-ring: var(--brand-admin-primary);
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: var(--color-info);
31
+ --color-an-info: #52525b;
32
32
  --color-an-disabled-opacity: 0.55;
33
- --color-an-chart-1: var(--brand-admin-primary);
34
- --color-an-chart-2: #14b8a6;
35
- --color-an-chart-3: #f59e0b;
36
- --color-an-chart-4: #ef4444;
37
- --color-an-chart-5: #8b5cf6;
38
- --color-an-chart-6: #06b6d4;
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: #12102a;
57
- --color-an-bg-elevated: var(--brand-rail-sidebar-bg);
58
- --color-an-surface: var(--brand-rail-sidebar-bg);
59
- --color-an-surface-muted: #17153a;
60
- --color-an-surface-hover: #2a2660;
61
- --color-an-surface-disabled: #2a2660;
62
- --color-an-text: #e0e7ff;
63
- --color-an-text-muted: #a5b4fc;
64
- --color-an-text-disabled: #818cf8;
65
- --color-an-border: #2f2b55;
66
- --color-an-border-hover: #3d3870;
67
- --color-an-primary: #a78bfa;
68
- --color-an-primary-hover: #c4b5fd;
69
- --color-an-primary-soft: rgba(124, 58, 237, 0.22);
70
- --color-an-focus-ring: #a78bfa;
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: #a78bfa;
73
- --color-an-chart-2: #2dd4bf;
74
- --color-an-chart-3: #fbbf24;
75
- --color-an-chart-4: #f87171;
76
- --color-an-chart-5: #c4b5fd;
77
- --color-an-chart-6: #22d3ee;
78
- --color-shell-bg: #12102a;
79
- --color-shell-surface: var(--brand-rail-sidebar-bg);
80
- --color-shell-border: #2f2b55;
81
- --color-shell-text: #e0e7ff;
82
- --color-rail-page-bg: #12102a;
83
- --color-rail-card-border: #2f2b55;
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 mode tracks `--brand-rail-sidebar-bg`.
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: #12102a;
94
- --color-an-bg-elevated: var(--brand-rail-sidebar-bg);
95
- --color-an-surface: var(--brand-rail-sidebar-bg);
96
- --color-an-surface-muted: #17153a;
97
- --color-an-surface-hover: #2a2660;
98
- --color-an-surface-disabled: #2a2660;
99
- --color-an-text: #e0e7ff;
100
- --color-an-text-muted: #a5b4fc;
101
- --color-an-text-disabled: #818cf8;
102
- --color-an-border: #2f2b55;
103
- --color-an-border-hover: #3d3870;
104
- --color-an-primary: #a78bfa;
105
- --color-an-primary-hover: #c4b5fd;
106
- --color-an-primary-soft: rgba(124, 58, 237, 0.22);
107
- --color-an-focus-ring: #a78bfa;
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: #a78bfa;
110
- --color-an-chart-2: #2dd4bf;
111
- --color-an-chart-3: #fbbf24;
112
- --color-an-chart-4: #f87171;
113
- --color-an-chart-5: #c4b5fd;
114
- --color-an-chart-6: #22d3ee;
115
- --color-shell-bg: #12102a;
116
- --color-shell-surface: var(--brand-rail-sidebar-bg);
117
- --color-shell-border: #2f2b55;
118
- --color-shell-text: #e0e7ff;
119
- --color-rail-page-bg: #12102a;
120
- --color-rail-card-border: #2f2b55;
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: var(--color-neutral-100);
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: 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);
136
- --color-an-text-muted: #475569;
137
- --color-an-text-disabled: #94a3b8;
138
- --color-an-border: var(--color-neutral-200);
139
- --color-an-border-hover: #cbd5e1;
140
- --color-an-primary: var(--color-primary);
141
- --color-an-primary-hover: #4f46e5;
142
- --color-an-primary-soft: var(--color-primary-light);
143
- --color-an-focus-ring: var(--brand-admin-primary);
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: var(--brand-admin-primary);
146
- --color-an-chart-2: #14b8a6;
147
- --color-an-chart-3: #f59e0b;
148
- --color-an-chart-4: #ef4444;
149
- --color-an-chart-5: #8b5cf6;
150
- --color-an-chart-6: #06b6d4;
151
- --color-shell-bg: var(--color-neutral-100);
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: 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);
153
+ --color-shell-border: #e4e4e7;
154
+ --color-shell-text: #09090b;
155
+ --color-rail-page-bg: #f4f4f5;
156
+ --color-rail-card-border: #e4e4e7;
157
157
  }
package/src/tokens/brand-bridge.css CHANGED
@@ -1,63 +1,65 @@
1
- /**
2
- * Brand bridge — Canva Up Above SSOT → theme.css / admin-theme.css consumers
3
- *
4
- * DECISION-1 Option C: --brand-consumer-accent (Canva) + --brand-admin-accent (PO mockups)
5
- * Import before theme.css or admin-theme.css once MFE-v3-S-01 wires consumers.
6
- *
7
- * @see rpappp/up-backend/docs/FRONTEND/brand-palette.md
8
- * @source https://www.canva.com/colors/color-palettes/up-above/
9
- */
10
- :root {
11
- /* Typography families — shared SSOT (admin also mirrors in design-tokens.css) */
12
- --font-family-primary: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
13
- 'Segoe UI Symbol', 'Noto Color Emoji';
14
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
15
- 'Courier New', monospace;
16
-
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;
28
-
29
- /* ── Semantic brand accents (DECISION-1 Option C) ── */
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);
35
-
36
- /* ── Admin rail palette (MOCKUP_VISUAL_SPEC_CACHE harmonization) ── */
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);
41
- --brand-rail-sidebar-active: var(--brand-admin-accent);
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);
45
- --brand-rail-kpi-up: #05805a;
46
- --brand-rail-kpi-down: #da2325;
47
-
48
- /* ── Bridge → theme.css (consumer / kiosk / pickup) — wired in MFE-v3-S-01 ── */
49
- --color-accent: var(--brand-consumer-accent);
50
- --color-focus-ring: var(--brand-consumer-accent);
51
-
52
- /* ── Bridge → admin-theme.css — wired in MFE-v3-S-01 ── */
53
- --color-rail-sidebar-bg: var(--brand-rail-sidebar-bg);
54
- --color-rail-sidebar-text: var(--brand-rail-sidebar-text);
55
- --color-rail-sidebar-muted: var(--brand-rail-sidebar-muted);
56
- --color-rail-sidebar-active: var(--brand-rail-sidebar-active);
57
- --color-rail-sidebar-hover: var(--brand-rail-sidebar-hover);
58
- --color-rail-page-bg: var(--brand-rail-page-bg);
59
- --color-rail-card-border: var(--brand-rail-card-border);
60
- --color-rail-kpi-up: var(--brand-rail-kpi-up);
61
- --color-rail-kpi-down: var(--brand-rail-kpi-down);
62
- --color-an-chart-1: var(--brand-admin-primary);
63
- }
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
+ }