pi-kiosk-shared 2.2.43 → 2.2.45

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 (23) hide show
  1. package/dist/ui/Button/Button.d.ts +14 -0
  2. package/dist/ui/Button/Button.d.ts.map +1 -1
  3. package/dist/ui/Button/Button.js +56 -17
  4. package/dist/ui/Button/Button.js.map +1 -1
  5. package/dist/ui/Checkbox/Checkbox.d.ts +5 -1
  6. package/dist/ui/Checkbox/Checkbox.d.ts.map +1 -1
  7. package/dist/ui/Checkbox/Checkbox.js +5 -1
  8. package/dist/ui/Checkbox/Checkbox.js.map +1 -1
  9. package/dist/ui/LocaleFlags/LocaleFlagToggle.js +7 -7
  10. package/dist/ui/LocaleFlags/LocaleFlagToggle.js.map +1 -1
  11. package/dist/ui/Radio/Radio.d.ts +5 -1
  12. package/dist/ui/Radio/Radio.d.ts.map +1 -1
  13. package/dist/ui/Radio/Radio.js +5 -1
  14. package/dist/ui/Radio/Radio.js.map +1 -1
  15. package/dist/ui/Switch/Switch.d.ts +5 -1
  16. package/dist/ui/Switch/Switch.d.ts.map +1 -1
  17. package/dist/ui/Switch/Switch.js +5 -1
  18. package/dist/ui/Switch/Switch.js.map +1 -1
  19. package/package.json +347 -339
  20. package/src/tokens/admin-theme.css +33 -34
  21. package/src/tokens/brand-bridge.css +21 -12
  22. package/src/tokens/theme.css +19 -19
  23. package/src/tokens/tokens.sync.json +156 -605
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
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Brand bridge — Canva Up Above SSOT → theme.css / admin-theme.css consumers
3
3
  *
4
- * DECISION-1 Option C: --brand-consumer-accent (Canva) + --brand-admin-accent (PO mockups)
4
+ * DECISION-1 Option C: --brand-consumer-accent (Canva teal) + --brand-admin-accent (PO violet)
5
5
  * Import before theme.css or admin-theme.css once MFE-v3-S-01 wires consumers.
6
6
  *
7
7
  * @see rpappp/up-backend/docs/FRONTEND/brand-palette.md
@@ -14,26 +14,35 @@
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) — consumer Canva ── */
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;
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
+ /* Admin PO mockup violet — do not collapse onto consumer teal */
25
34
  --brand-admin-accent: #7c3aed;
26
- --brand-admin-primary: #6365f0;
35
+ --brand-admin-primary: #6366f1;
27
36
 
28
- /* ── Admin rail palette (MOCKUP_VISUAL_SPEC_CACHE harmonization) ── */
37
+ /* ── Admin rail palette (MOCKUP_VISUAL_SPEC_CACHE / brand-palette.md) ── */
29
38
  --brand-rail-sidebar-bg: #1e1b4b;
30
- --brand-rail-sidebar-bg-deep: #0f172a;
39
+ --brand-rail-sidebar-bg-deep: var(--color-neutral-950);
31
40
  --brand-rail-sidebar-text: #e0e7ff;
32
41
  --brand-rail-sidebar-muted: #a5b4fc;
33
42
  --brand-rail-sidebar-active: var(--brand-admin-accent);
34
43
  --brand-rail-sidebar-hover: rgba(124, 58, 237, 0.2);
35
- --brand-rail-page-bg: #f1f5f9;
36
- --brand-rail-card-border: #e2e8f0;
44
+ --brand-rail-page-bg: var(--color-neutral-100);
45
+ --brand-rail-card-border: var(--color-neutral-200);
37
46
  --brand-rail-kpi-up: #05805a;
38
47
  --brand-rail-kpi-down: #da2325;
39
48
 
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;