@flamingo-stack/openframe-frontend-core 0.0.201 → 0.0.202
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/{chunk-CSW5GYBU.js → chunk-IDULPYOU.js} +3997 -3734
- package/dist/chunk-IDULPYOU.js.map +1 -0
- package/dist/{chunk-UCY537V4.cjs → chunk-JIKTMXTZ.cjs} +952 -689
- package/dist/chunk-JIKTMXTZ.cjs.map +1 -0
- package/dist/components/chat/approval-request-message.d.ts.map +1 -1
- package/dist/components/chat/chat-container.d.ts.map +1 -1
- package/dist/components/chat/chat-message-enhanced.d.ts.map +1 -1
- package/dist/components/chat/chat-message-list.d.ts.map +1 -1
- package/dist/components/chat/types/message.types.d.ts +34 -0
- package/dist/components/chat/types/message.types.d.ts.map +1 -1
- package/dist/components/features/index.cjs +14 -2
- package/dist/components/features/index.cjs.map +1 -1
- package/dist/components/features/index.d.ts +1 -0
- package/dist/components/features/index.d.ts.map +1 -1
- package/dist/components/features/index.js +15 -3
- package/dist/components/index.cjs +14 -2
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.js +13 -1
- package/dist/components/navigation/index.cjs +2 -2
- package/dist/components/navigation/index.js +1 -1
- package/dist/components/providers/theme-provider.d.ts +69 -0
- package/dist/components/providers/theme-provider.d.ts.map +1 -0
- package/dist/components/ui/index.cjs +2 -2
- package/dist/components/ui/index.js +1 -1
- package/dist/components/ui/simple-markdown-renderer.d.ts.map +1 -1
- package/dist/index.cjs +14 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +13 -1
- package/package.json +2 -1
- package/src/components/chat/approval-request-message.tsx +106 -92
- package/src/components/chat/chat-container.tsx +8 -4
- package/src/components/chat/chat-message-enhanced.tsx +51 -9
- package/src/components/chat/chat-message-list.tsx +27 -19
- package/src/components/chat/types/message.types.ts +35 -0
- package/src/components/features/index.ts +15 -0
- package/src/components/providers/theme-provider.tsx +130 -0
- package/src/components/ui/simple-markdown-renderer.tsx +248 -2
- package/src/stories/Theme.stories.tsx +350 -0
- package/src/styles/README.md +271 -174
- package/src/styles/dark_theme.tokens.json +982 -0
- package/src/styles/light_theme.tokens.json +982 -0
- package/src/styles/ods-colors.css +225 -146
- package/src/styles/ods_color_tokens.json +1 -300
- package/dist/chunk-CSW5GYBU.js.map +0 -1
- package/dist/chunk-UCY537V4.cjs.map +0 -1
|
@@ -1,5 +1,39 @@
|
|
|
1
|
-
/* Open Design System – color tokens
|
|
2
|
-
|
|
1
|
+
/* Open Design System – color tokens
|
|
2
|
+
* ───────────────────────────────────────────────────────────────────────
|
|
3
|
+
* THEME ARCHITECTURE
|
|
4
|
+
*
|
|
5
|
+
* The design system is "semantic primitives": the primitive token NAMES
|
|
6
|
+
* (`--ods-*`) are stable across themes — only their VALUES change between
|
|
7
|
+
* light and dark (sourced 1:1 from `dark theme.tokens.json` /
|
|
8
|
+
* `light theme.tokens.json`).
|
|
9
|
+
*
|
|
10
|
+
* Tier 1 — Primitives (`--ods-*`), THEME-SCOPED
|
|
11
|
+
* • `:root, [data-theme="dark"], .theme-dark` → dark values (default)
|
|
12
|
+
* • `[data-theme="light"], .theme-light` → light values
|
|
13
|
+
* A handful of explicitly-named fixed shades (…-dark / …-light) and the
|
|
14
|
+
* third-party social brand colors are theme-stable.
|
|
15
|
+
*
|
|
16
|
+
* Tier 2 — Semantic aliases (`--color-*`), THEME-AGNOSTIC (single source)
|
|
17
|
+
* They reference `--ods-*`, so they resolve to the correct theme
|
|
18
|
+
* automatically — no per-theme duplication. Only a few alpha-based
|
|
19
|
+
* tokens get a light tweak.
|
|
20
|
+
*
|
|
21
|
+
* Platform overrides (`[data-app-type="…"]`) set ONLY brand/accent and
|
|
22
|
+
* reference `--ods-*`, so they too follow the active theme. They never
|
|
23
|
+
* touch bg/text/border, so theme (on <html>) and platform (on <body>)
|
|
24
|
+
* compose cleanly even though they live on different elements.
|
|
25
|
+
*
|
|
26
|
+
* Theme is selected via `data-theme="light|dark"` on <html> (set by the
|
|
27
|
+
* ThemeProvider + the no-flash ThemeScript). Default: dark.
|
|
28
|
+
* ─────────────────────────────────────────────────────────────────────── */
|
|
29
|
+
|
|
30
|
+
/* ===================================================================== */
|
|
31
|
+
/* TIER 1 — PRIMITIVES · DARK (default, lives in :root) */
|
|
32
|
+
/* Removing the theme attribute reverts here automatically. */
|
|
33
|
+
/* ===================================================================== */
|
|
34
|
+
:root,
|
|
35
|
+
:root[data-theme="dark"],
|
|
36
|
+
.theme-dark {
|
|
3
37
|
/* Attention – Success */
|
|
4
38
|
--ods-attention-green-success: #5ea62e;
|
|
5
39
|
--ods-attention-green-success-hover: #549c24;
|
|
@@ -31,12 +65,6 @@
|
|
|
31
65
|
--ods-flamingo-cyan-secondary: #058c83;
|
|
32
66
|
--ods-flamingo-cyan-secondary-hover: #008279;
|
|
33
67
|
--ods-flamingo-cyan-secondary-action: #00786f;
|
|
34
|
-
--ods-flamingo-cyan-dark: #058c83;
|
|
35
|
-
--ods-flamingo-cyan-dark-action: #00786f;
|
|
36
|
-
--ods-flamingo-cyan-dark-hover: #008279;
|
|
37
|
-
--ods-flamingo-cyan-light: #a1fbf5;
|
|
38
|
-
--ods-flamingo-cyan-light-action: #8de7e1;
|
|
39
|
-
--ods-flamingo-cyan-light-hover: #97f1eb;
|
|
40
68
|
|
|
41
69
|
/* Flamingo Pink */
|
|
42
70
|
--ods-flamingo-pink-base: #f357bb;
|
|
@@ -45,12 +73,6 @@
|
|
|
45
73
|
--ods-flamingo-pink-secondary: #792b5d;
|
|
46
74
|
--ods-flamingo-pink-secondary-hover: #6f2153;
|
|
47
75
|
--ods-flamingo-pink-secondary-action: #651749;
|
|
48
|
-
--ods-flamingo-pink-dark: #792b5d;
|
|
49
|
-
--ods-flamingo-pink-dark-action: #651749;
|
|
50
|
-
--ods-flamingo-pink-dark-hover: #6f2153;
|
|
51
|
-
--ods-flamingo-pink-light: #f9abdd;
|
|
52
|
-
--ods-flamingo-pink-light-action: #e597c9;
|
|
53
|
-
--ods-flamingo-pink-light-hover: #efa1d3;
|
|
54
76
|
|
|
55
77
|
/* Open Yellow */
|
|
56
78
|
--ods-open-yellow-base: #ffc008;
|
|
@@ -59,33 +81,158 @@
|
|
|
59
81
|
--ods-open-yellow-secondary: #7f6004;
|
|
60
82
|
--ods-open-yellow-secondary-hover: #755600;
|
|
61
83
|
--ods-open-yellow-secondary-action: #6b4c00;
|
|
62
|
-
--ods-open-yellow-dark: #ffe084;
|
|
63
|
-
--ods-open-yellow-dark-action: #ebcc70;
|
|
64
|
-
--ods-open-yellow-dark-hover: #f5d67a;
|
|
65
|
-
--ods-open-yellow-light: #7f6004;
|
|
66
|
-
--ods-open-yellow-light-action: #6b4c00;
|
|
67
|
-
--ods-open-yellow-light-hover: #755600;
|
|
68
84
|
|
|
69
85
|
/* System Greys */
|
|
70
86
|
--ods-system-greys-background: #161616;
|
|
71
|
-
--ods-system-greys-background-action: #2a2a2a;
|
|
72
87
|
--ods-system-greys-background-hover: #202020;
|
|
88
|
+
--ods-system-greys-background-action: #2a2a2a;
|
|
73
89
|
--ods-system-greys-black: #212121;
|
|
74
|
-
--ods-system-greys-black-action: #353535;
|
|
75
90
|
--ods-system-greys-black-hover: #2b2b2b;
|
|
91
|
+
--ods-system-greys-black-action: #353535;
|
|
76
92
|
--ods-system-greys-grey: #888888;
|
|
77
|
-
--ods-system-greys-grey-action: #747474;
|
|
78
93
|
--ods-system-greys-grey-hover: #7e7e7e;
|
|
94
|
+
--ods-system-greys-grey-action: #747474;
|
|
79
95
|
--ods-system-greys-soft-grey: #3a3a3a;
|
|
80
|
-
--ods-system-greys-soft-grey-action: #4e4e4e;
|
|
81
96
|
--ods-system-greys-soft-grey-hover: #444444;
|
|
97
|
+
--ods-system-greys-soft-grey-action: #4e4e4e;
|
|
82
98
|
--ods-system-greys-white: #fafafa;
|
|
83
|
-
--ods-system-greys-white-action: #f0f0f0;
|
|
84
99
|
--ods-system-greys-white-hover: #f5f5f5;
|
|
100
|
+
--ods-system-greys-white-action: #f0f0f0;
|
|
101
|
+
|
|
102
|
+
/* Shadcn/ui HSL bridge — DARK (mirrors app-globals.css :root).
|
|
103
|
+
* Re-declared here so toggling data-theme also flips shadcn-mapped
|
|
104
|
+
* Tailwind utilities (bg-background, bg-card, text-foreground, …). */
|
|
105
|
+
--background: 0 0% 8.6%;
|
|
106
|
+
--foreground: 0 0% 98%;
|
|
107
|
+
--card: 0 0% 13.1%;
|
|
108
|
+
--card-foreground: 0 0% 98%;
|
|
109
|
+
--popover: 0 0% 13.1%;
|
|
110
|
+
--popover-foreground: 0 0% 98%;
|
|
111
|
+
--secondary: 0 0% 22.7%;
|
|
112
|
+
--secondary-foreground: 0 0% 98%;
|
|
113
|
+
--muted: 0 0% 22.7%;
|
|
114
|
+
--muted-foreground: 0 0% 53.3%;
|
|
115
|
+
--border: 0 0% 22.7%;
|
|
116
|
+
--input: 0 0% 22.7%;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* ===================================================================== */
|
|
120
|
+
/* TIER 1 — PRIMITIVES · LIGHT */
|
|
121
|
+
/* Values sourced 1:1 from `light theme.tokens.json`. Token NAMES are */
|
|
122
|
+
/* identical to dark — only the values differ (semantic primitives). */
|
|
123
|
+
/* ===================================================================== */
|
|
124
|
+
:root[data-theme="light"],
|
|
125
|
+
.theme-light {
|
|
126
|
+
/* Attention – Success */
|
|
127
|
+
--ods-attention-green-success: #4c8924;
|
|
128
|
+
--ods-attention-green-success-hover: #427f1a;
|
|
129
|
+
--ods-attention-green-success-action: #387510;
|
|
130
|
+
--ods-attention-green-success-secondary: #cbe1bd;
|
|
131
|
+
--ods-attention-green-success-secondary-hover: #c1d7b8;
|
|
132
|
+
--ods-attention-green-success-secondary-action: #b7cdae;
|
|
133
|
+
|
|
134
|
+
/* Attention – Error */
|
|
135
|
+
--ods-attention-red-error: #cf4e4e;
|
|
136
|
+
--ods-attention-red-error-hover: #c54444;
|
|
137
|
+
--ods-attention-red-error-action: #bb3a3a;
|
|
138
|
+
--ods-attention-red-error-secondary: #f8cece;
|
|
139
|
+
--ods-attention-red-error-secondary-hover: #eec4c4;
|
|
140
|
+
--ods-attention-red-error-secondary-action: #e4baba;
|
|
141
|
+
|
|
142
|
+
/* Attention – Warning */
|
|
143
|
+
--ods-attention-yellow-warning: #cd9e18;
|
|
144
|
+
--ods-attention-yellow-warning-hover: #c3940e;
|
|
145
|
+
--ods-attention-yellow-warning-action: #b98a04;
|
|
146
|
+
--ods-attention-yellow-warning-secondary: #ebdfbb;
|
|
147
|
+
--ods-attention-yellow-warning-secondary-hover: #e1d5b1;
|
|
148
|
+
--ods-attention-yellow-warning-secondary-action: #d7cba7;
|
|
149
|
+
|
|
150
|
+
/* Flamingo Cyan */
|
|
151
|
+
--ods-flamingo-cyan-base: #058c83;
|
|
152
|
+
--ods-flamingo-cyan-hover: #008279;
|
|
153
|
+
--ods-flamingo-cyan-action: #00786f;
|
|
154
|
+
--ods-flamingo-cyan-secondary: #a1fbf5;
|
|
155
|
+
--ods-flamingo-cyan-secondary-hover: #97f1eb;
|
|
156
|
+
--ods-flamingo-cyan-secondary-action: #8de7e1;
|
|
157
|
+
|
|
158
|
+
/* Flamingo Pink */
|
|
159
|
+
--ods-flamingo-pink-base: #f357bb;
|
|
160
|
+
--ods-flamingo-pink-hover: #e94db1;
|
|
161
|
+
--ods-flamingo-pink-action: #df43a7;
|
|
162
|
+
--ods-flamingo-pink-secondary: #ffc4ea;
|
|
163
|
+
--ods-flamingo-pink-secondary-hover: #f5bae0;
|
|
164
|
+
--ods-flamingo-pink-secondary-action: #ebb0d6;
|
|
165
|
+
|
|
166
|
+
/* Open Yellow */
|
|
167
|
+
--ods-open-yellow-base: #e4aa00;
|
|
168
|
+
--ods-open-yellow-hover: #f5b600;
|
|
169
|
+
--ods-open-yellow-action: #ebac00;
|
|
170
|
+
--ods-open-yellow-secondary: #fafafa;
|
|
171
|
+
--ods-open-yellow-secondary-hover: #f5f5f5;
|
|
172
|
+
--ods-open-yellow-secondary-action: #f0f0f0;
|
|
173
|
+
|
|
174
|
+
/* System Greys */
|
|
175
|
+
--ods-system-greys-background: #fafafa;
|
|
176
|
+
--ods-system-greys-background-hover: #f5f5f5;
|
|
177
|
+
--ods-system-greys-background-action: #f0f0f0;
|
|
178
|
+
--ods-system-greys-black: #ffffff;
|
|
179
|
+
--ods-system-greys-black-hover: #fafafa;
|
|
180
|
+
--ods-system-greys-black-action: #f5f5f5;
|
|
181
|
+
--ods-system-greys-grey: #767676;
|
|
182
|
+
--ods-system-greys-grey-hover: #6c6c6c;
|
|
183
|
+
--ods-system-greys-grey-action: #626262;
|
|
184
|
+
--ods-system-greys-soft-grey: #e7e7e7;
|
|
185
|
+
--ods-system-greys-soft-grey-hover: #dddddd;
|
|
186
|
+
--ods-system-greys-soft-grey-action: #d3d3d3;
|
|
187
|
+
--ods-system-greys-white: #1a1a1a;
|
|
188
|
+
--ods-system-greys-white-hover: #424242;
|
|
189
|
+
--ods-system-greys-white-action: #6a6a6a;
|
|
190
|
+
|
|
191
|
+
/* Shadcn/ui HSL bridge — LIGHT */
|
|
192
|
+
--background: 0 0% 98%; /* #fafafa */
|
|
193
|
+
--foreground: 0 0% 10.2%; /* #1a1a1a */
|
|
194
|
+
--card: 0 0% 100%; /* #ffffff */
|
|
195
|
+
--card-foreground: 0 0% 10.2%;
|
|
196
|
+
--popover: 0 0% 100%;
|
|
197
|
+
--popover-foreground: 0 0% 10.2%;
|
|
198
|
+
--secondary: 0 0% 90.6%; /* #e7e7e7 */
|
|
199
|
+
--secondary-foreground: 0 0% 10.2%;
|
|
200
|
+
--muted: 0 0% 94.1%; /* #f0f0f0 */
|
|
201
|
+
--muted-foreground: 0 0% 46.3%; /* #767676 */
|
|
202
|
+
--border: 0 0% 90.6%; /* #e7e7e7 */
|
|
203
|
+
--input: 0 0% 90.6%;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* ===================================================================== */
|
|
207
|
+
/* TIER 1 — THEME-STABLE PRIMITIVES */
|
|
208
|
+
/* Explicitly-named fixed shades (…-dark / …-light) and third-party */
|
|
209
|
+
/* social brand colors do NOT flip with the theme. */
|
|
210
|
+
/* ===================================================================== */
|
|
211
|
+
:root {
|
|
212
|
+
--ods-flamingo-cyan-dark: #058c83;
|
|
213
|
+
--ods-flamingo-cyan-dark-action: #00786f;
|
|
214
|
+
--ods-flamingo-cyan-dark-hover: #008279;
|
|
215
|
+
--ods-flamingo-cyan-light: #a1fbf5;
|
|
216
|
+
--ods-flamingo-cyan-light-action: #8de7e1;
|
|
217
|
+
--ods-flamingo-cyan-light-hover: #97f1eb;
|
|
218
|
+
|
|
219
|
+
--ods-flamingo-pink-dark: #792b5d;
|
|
220
|
+
--ods-flamingo-pink-dark-action: #651749;
|
|
221
|
+
--ods-flamingo-pink-dark-hover: #6f2153;
|
|
222
|
+
--ods-flamingo-pink-light: #f9abdd;
|
|
223
|
+
--ods-flamingo-pink-light-action: #e597c9;
|
|
224
|
+
--ods-flamingo-pink-light-hover: #efa1d3;
|
|
225
|
+
|
|
226
|
+
--ods-open-yellow-dark: #ffe084;
|
|
227
|
+
--ods-open-yellow-dark-action: #ebcc70;
|
|
228
|
+
--ods-open-yellow-dark-hover: #f5d67a;
|
|
229
|
+
--ods-open-yellow-light: #7f6004;
|
|
230
|
+
--ods-open-yellow-light-action: #6b4c00;
|
|
231
|
+
--ods-open-yellow-light-hover: #755600;
|
|
85
232
|
|
|
86
233
|
/* Social Platform Brand Colors
|
|
87
|
-
|
|
88
|
-
|
|
234
|
+
Official third-party brand colors — must remain exact for proper
|
|
235
|
+
brand recognition per platform guidelines. */
|
|
89
236
|
--social-slack: #4A154B;
|
|
90
237
|
--social-linkedin: #0A66C2;
|
|
91
238
|
--social-facebook: #1877F2;
|
|
@@ -96,8 +243,10 @@
|
|
|
96
243
|
--social-twitter: #1DA1F2;
|
|
97
244
|
}
|
|
98
245
|
|
|
99
|
-
/*
|
|
100
|
-
/*
|
|
246
|
+
/* ===================================================================== */
|
|
247
|
+
/* TIER 2 — SEMANTIC ALIASES (theme-agnostic, single source) */
|
|
248
|
+
/* Reference `--ods-*`, so they resolve to the active theme on their own. */
|
|
249
|
+
/* ===================================================================== */
|
|
101
250
|
:root {
|
|
102
251
|
/* Backgrounds */
|
|
103
252
|
--color-bg: var(--ods-system-greys-background);
|
|
@@ -109,6 +258,9 @@
|
|
|
109
258
|
--color-bg-surface: var(--ods-system-greys-soft-grey);
|
|
110
259
|
--color-bg-inverted: var(--ods-system-greys-white);
|
|
111
260
|
--color-bg-backdrop: rgba(0, 0, 0, 0.6);
|
|
261
|
+
/* Card layers (consumed by platform blocks; theme owns the value) */
|
|
262
|
+
--color-bg-card-primary: var(--ods-system-greys-black);
|
|
263
|
+
--color-bg-card-secondary: var(--ods-system-greys-background);
|
|
112
264
|
|
|
113
265
|
/* Borders */
|
|
114
266
|
--color-border-default: var(--ods-system-greys-soft-grey);
|
|
@@ -131,7 +283,7 @@
|
|
|
131
283
|
--color-text-inverted: var(--ods-system-greys-background);
|
|
132
284
|
--color-text-placeholder: rgba(136, 136, 136, 0.6);
|
|
133
285
|
|
|
134
|
-
/* Accent Colors */
|
|
286
|
+
/* Accent Colors (brand default — yellow; overridden per platform) */
|
|
135
287
|
--color-accent-primary: var(--ods-open-yellow-base);
|
|
136
288
|
--color-accent-hover: var(--ods-open-yellow-hover);
|
|
137
289
|
--color-accent-active: var(--ods-open-yellow-action);
|
|
@@ -172,22 +324,48 @@
|
|
|
172
324
|
--color-link-visited: #b794f6;
|
|
173
325
|
|
|
174
326
|
/* Adaptive Current Color (Platform-Specific) */
|
|
175
|
-
--ods-current: var(--color-text-primary);
|
|
327
|
+
--ods-current: var(--color-text-primary);
|
|
176
328
|
|
|
177
329
|
/* Adaptive Accent Color (Platform-Specific).
|
|
178
330
|
* Defaults to yellow — matches OpenMSP / OpenFrame brand. Every
|
|
179
331
|
* `[data-app-type="X"]` block below overrides this for its platform.
|
|
180
332
|
* Critical: MuxPlayer reads this via `accentColor="var(--ods-accent)"`
|
|
181
|
-
* and falls back to its built-in `#fa50b5` (pink) if
|
|
182
|
-
* undefined. Keeping a `:root` default guarantees the video player
|
|
183
|
-
* never paints with Mux's brand color on a platform we haven't
|
|
184
|
-
* explicitly themed yet. */
|
|
333
|
+
* and falls back to its built-in `#fa50b5` (pink) if undefined. */
|
|
185
334
|
--ods-accent: var(--ods-open-yellow-base);
|
|
186
335
|
}
|
|
187
336
|
|
|
337
|
+
/* Alpha-based semantic tokens that need a light-theme tweak (the only
|
|
338
|
+
* Tier-2 values not derived from a flipping primitive). */
|
|
339
|
+
:root[data-theme="light"],
|
|
340
|
+
.theme-light {
|
|
341
|
+
--color-bg-overlay: rgba(250, 250, 250, 0.8);
|
|
342
|
+
--color-bg-backdrop: rgba(0, 0, 0, 0.4);
|
|
343
|
+
--color-text-subtle: rgba(26, 26, 26, 0.6);
|
|
344
|
+
--color-text-placeholder: rgba(118, 118, 118, 0.6);
|
|
345
|
+
--color-border-subtle: rgba(0, 0, 0, 0.08);
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
/* ===================================================================== */
|
|
349
|
+
/* HIGH CONTRAST (accessibility) */
|
|
350
|
+
/* ===================================================================== */
|
|
351
|
+
.theme-high-contrast {
|
|
352
|
+
--color-bg: #000000;
|
|
353
|
+
--color-bg-card: #000000;
|
|
354
|
+
--color-text-primary: #ffffff;
|
|
355
|
+
--color-text-secondary: #ffffff;
|
|
356
|
+
--color-accent-primary: #00ff00;
|
|
357
|
+
--color-border-default: #ffffff;
|
|
358
|
+
--color-focus-ring: #00ff00;
|
|
359
|
+
}
|
|
188
360
|
|
|
361
|
+
/* ===================================================================== */
|
|
362
|
+
/* PLATFORM OVERRIDES — brand/accent ONLY. */
|
|
363
|
+
/* Reference `--ods-*` so they follow the active theme; never touch */
|
|
364
|
+
/* bg/text/border so theme (data-theme on <html>) and platform */
|
|
365
|
+
/* (data-app-type on <body>) compose across different elements. */
|
|
366
|
+
/* ===================================================================== */
|
|
189
367
|
[data-app-type="openframe"] {
|
|
190
|
-
/* OpenFrame
|
|
368
|
+
/* OpenFrame: yellow accents, cyan links */
|
|
191
369
|
--color-accent-primary: var(--ods-open-yellow-base);
|
|
192
370
|
--color-accent-hover: var(--ods-open-yellow-hover);
|
|
193
371
|
--color-accent-active: var(--ods-open-yellow-action);
|
|
@@ -196,22 +374,11 @@
|
|
|
196
374
|
--color-focus-visible: var(--ods-open-yellow-base);
|
|
197
375
|
--color-link: var(--ods-flamingo-cyan-base);
|
|
198
376
|
--color-link-hover: var(--ods-flamingo-cyan-hover);
|
|
199
|
-
--color-bg: var(--ods-system-greys-background);
|
|
200
|
-
/* Add OpenFrame-specific card backgrounds to match Figma */
|
|
201
|
-
--color-bg-card-primary: var(--ods-system-greys-black);
|
|
202
|
-
--color-bg-card-secondary: var(--ods-system-greys-background);
|
|
203
|
-
|
|
204
|
-
/* OpenFrame uses yellow as adaptive color */
|
|
205
377
|
--ods-current: var(--ods-open-yellow-base);
|
|
206
378
|
--ods-accent: var(--ods-open-yellow-base);
|
|
207
379
|
}
|
|
208
380
|
|
|
209
381
|
[data-app-type="openmsp"] {
|
|
210
|
-
/* OpenMSP brand: yellow primary (#FFC008). Matches `openmsp.config.tsx`
|
|
211
|
-
* brandColors.primary. Before this block existed, OpenMSP had no
|
|
212
|
-
* `--ods-accent` defined, so the MuxPlayer video controls inherited
|
|
213
|
-
* its built-in pink (`#fa50b5`) — wrong brand color on every video
|
|
214
|
-
* surface in the OpenMSP platform. */
|
|
215
382
|
--color-accent-primary: var(--ods-open-yellow-base);
|
|
216
383
|
--color-accent-hover: var(--ods-open-yellow-hover);
|
|
217
384
|
--color-accent-active: var(--ods-open-yellow-action);
|
|
@@ -220,21 +387,11 @@
|
|
|
220
387
|
--color-focus-visible: var(--ods-open-yellow-base);
|
|
221
388
|
--color-link: var(--ods-open-yellow-base);
|
|
222
389
|
--color-link-hover: var(--ods-open-yellow-hover);
|
|
223
|
-
--color-bg: var(--ods-system-greys-background);
|
|
224
|
-
--color-bg-card: var(--ods-system-greys-black);
|
|
225
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
226
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
227
|
-
|
|
228
|
-
/* OpenMSP uses yellow as adaptive color */
|
|
229
390
|
--ods-current: var(--ods-open-yellow-base);
|
|
230
391
|
--ods-accent: var(--ods-open-yellow-base);
|
|
231
392
|
}
|
|
232
393
|
|
|
233
394
|
[data-app-type="flamingo-teaser"] {
|
|
234
|
-
/* Flamingo Teaser uses the same Flamingo pink brand as the full
|
|
235
|
-
* Flamingo app — matches `flamingo-teaser.config.tsx`. Without this
|
|
236
|
-
* block the video player would fall back to MuxPlayer's pink default,
|
|
237
|
-
* which is coincidentally close but not the brand pink. */
|
|
238
395
|
--color-accent-primary: var(--ods-flamingo-pink-base);
|
|
239
396
|
--color-accent-hover: var(--ods-flamingo-pink-hover);
|
|
240
397
|
--color-accent-active: var(--ods-flamingo-pink-action);
|
|
@@ -243,12 +400,6 @@
|
|
|
243
400
|
--color-focus-visible: var(--ods-flamingo-pink-base);
|
|
244
401
|
--color-link: var(--ods-flamingo-pink-base);
|
|
245
402
|
--color-link-hover: var(--ods-flamingo-pink-hover);
|
|
246
|
-
--color-bg: var(--ods-system-greys-background);
|
|
247
|
-
--color-bg-card: var(--ods-system-greys-black);
|
|
248
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
249
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
250
|
-
|
|
251
|
-
/* Flamingo Teaser uses pink as adaptive color */
|
|
252
403
|
--ods-current: var(--ods-flamingo-pink-base);
|
|
253
404
|
--ods-accent: var(--ods-flamingo-pink-base);
|
|
254
405
|
}
|
|
@@ -262,19 +413,9 @@
|
|
|
262
413
|
--color-focus-visible: var(--ods-flamingo-pink-base);
|
|
263
414
|
--color-link: var(--ods-flamingo-pink-base);
|
|
264
415
|
--color-link-hover: var(--ods-flamingo-pink-hover);
|
|
265
|
-
|
|
266
|
-
|
|
416
|
+
/* Intentional brand scrim (preserved from original) — a dark modal
|
|
417
|
+
* backdrop is by-design for this platform in both themes. */
|
|
267
418
|
--color-bg-overlay: rgba(0, 0, 0, 0.7);
|
|
268
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
269
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
270
|
-
--color-text-primary: var(--ods-system-greys-white);
|
|
271
|
-
--color-text-secondary: var(--ods-system-greys-grey);
|
|
272
|
-
--color-text-tertiary: var(--ods-system-greys-soft-grey-hover);
|
|
273
|
-
--color-text-muted: var(--ods-system-greys-grey-action);
|
|
274
|
-
--color-border-default: var(--ods-system-greys-soft-grey);
|
|
275
|
-
--color-divider: var(--ods-system-greys-soft-grey);
|
|
276
|
-
|
|
277
|
-
/* Flamingo uses pink as adaptive color */
|
|
278
419
|
--ods-current: var(--ods-flamingo-pink-base);
|
|
279
420
|
--ods-accent: var(--ods-flamingo-pink-base);
|
|
280
421
|
}
|
|
@@ -288,25 +429,17 @@
|
|
|
288
429
|
--color-focus-visible: var(--ods-flamingo-pink-base);
|
|
289
430
|
--color-link: var(--ods-flamingo-pink-base);
|
|
290
431
|
--color-link-hover: var(--ods-flamingo-pink-hover);
|
|
291
|
-
|
|
292
|
-
|
|
432
|
+
/* TMCG design: cards share the page background (references semantic
|
|
433
|
+
* token, so it still follows the active theme). */
|
|
434
|
+
--color-bg-card: var(--color-bg);
|
|
435
|
+
--color-bg-card-primary: var(--color-bg);
|
|
436
|
+
/* Intentional brand scrim (preserved from original). */
|
|
293
437
|
--color-bg-overlay: rgba(0, 0, 0, 0.7);
|
|
294
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
295
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
296
|
-
--color-text-primary: var(--ods-system-greys-white);
|
|
297
|
-
--color-text-secondary: var(--ods-system-greys-grey);
|
|
298
|
-
--color-text-tertiary: var(--ods-system-greys-soft-grey-hover);
|
|
299
|
-
--color-text-muted: var(--ods-system-greys-grey-action);
|
|
300
|
-
--color-border-default: var(--ods-system-greys-soft-grey);
|
|
301
|
-
--color-divider: var(--ods-system-greys-soft-grey);
|
|
302
|
-
|
|
303
|
-
/* TMCG uses pink as adaptive color */
|
|
304
438
|
--ods-current: var(--ods-flamingo-pink-base);
|
|
305
439
|
--ods-accent: var(--ods-flamingo-pink-base);
|
|
306
440
|
}
|
|
307
441
|
|
|
308
442
|
[data-app-type="marketing-hub"] {
|
|
309
|
-
/* Marketing Hub uses pink for content and campaigns */
|
|
310
443
|
--color-accent-primary: var(--ods-flamingo-pink-base);
|
|
311
444
|
--color-accent-hover: var(--ods-flamingo-pink-hover);
|
|
312
445
|
--color-accent-active: var(--ods-flamingo-pink-action);
|
|
@@ -315,18 +448,11 @@
|
|
|
315
448
|
--color-focus-visible: var(--ods-flamingo-pink-base);
|
|
316
449
|
--color-link: var(--ods-flamingo-pink-base);
|
|
317
450
|
--color-link-hover: var(--ods-flamingo-pink-hover);
|
|
318
|
-
--color-bg: var(--ods-system-greys-background);
|
|
319
|
-
--color-bg-card: var(--ods-system-greys-black);
|
|
320
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
321
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
322
|
-
|
|
323
|
-
/* Marketing Hub uses pink as adaptive color and accent */
|
|
324
451
|
--ods-current: var(--ods-flamingo-pink-base);
|
|
325
452
|
--ods-accent: var(--ods-flamingo-pink-base);
|
|
326
453
|
}
|
|
327
454
|
|
|
328
455
|
[data-app-type="product-hub"] {
|
|
329
|
-
/* Product Hub uses green for user management and releases */
|
|
330
456
|
--color-accent-primary: var(--ods-attention-green-success);
|
|
331
457
|
--color-accent-hover: var(--ods-attention-green-success-hover);
|
|
332
458
|
--color-accent-active: var(--ods-attention-green-success-action);
|
|
@@ -335,18 +461,11 @@
|
|
|
335
461
|
--color-focus-visible: var(--ods-attention-green-success);
|
|
336
462
|
--color-link: var(--ods-attention-green-success);
|
|
337
463
|
--color-link-hover: var(--ods-attention-green-success-hover);
|
|
338
|
-
--color-bg: var(--ods-system-greys-background);
|
|
339
|
-
--color-bg-card: var(--ods-system-greys-black);
|
|
340
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
341
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
342
|
-
|
|
343
|
-
/* Product Hub uses green as adaptive color and accent */
|
|
344
464
|
--ods-current: var(--ods-attention-green-success);
|
|
345
465
|
--ods-accent: var(--ods-attention-green-success);
|
|
346
466
|
}
|
|
347
467
|
|
|
348
468
|
[data-app-type="revenue-hub"] {
|
|
349
|
-
/* Revenue Hub uses yellow for financial operations */
|
|
350
469
|
--color-accent-primary: var(--ods-attention-yellow-warning);
|
|
351
470
|
--color-accent-hover: var(--ods-open-yellow-hover);
|
|
352
471
|
--color-accent-active: var(--ods-open-yellow-action);
|
|
@@ -355,18 +474,11 @@
|
|
|
355
474
|
--color-focus-visible: var(--ods-attention-yellow-warning);
|
|
356
475
|
--color-link: var(--ods-attention-yellow-warning);
|
|
357
476
|
--color-link-hover: var(--ods-open-yellow-hover);
|
|
358
|
-
--color-bg: var(--ods-system-greys-background);
|
|
359
|
-
--color-bg-card: var(--ods-system-greys-black);
|
|
360
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
361
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
362
|
-
|
|
363
|
-
/* Revenue Hub uses yellow as adaptive color and accent */
|
|
364
477
|
--ods-current: var(--ods-attention-yellow-warning);
|
|
365
478
|
--ods-accent: var(--ods-attention-yellow-warning);
|
|
366
479
|
}
|
|
367
480
|
|
|
368
481
|
[data-app-type="people-hub"] {
|
|
369
|
-
/* People Hub uses cyan for HR and talent management */
|
|
370
482
|
--color-accent-primary: var(--ods-flamingo-cyan-base);
|
|
371
483
|
--color-accent-hover: var(--ods-flamingo-cyan-hover);
|
|
372
484
|
--color-accent-active: var(--ods-flamingo-cyan-action);
|
|
@@ -375,18 +487,11 @@
|
|
|
375
487
|
--color-focus-visible: var(--ods-flamingo-cyan-base);
|
|
376
488
|
--color-link: var(--ods-flamingo-cyan-base);
|
|
377
489
|
--color-link-hover: var(--ods-flamingo-cyan-hover);
|
|
378
|
-
--color-bg: var(--ods-system-greys-background);
|
|
379
|
-
--color-bg-card: var(--ods-system-greys-black);
|
|
380
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
381
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
382
|
-
|
|
383
|
-
/* People Hub uses cyan as adaptive color and accent */
|
|
384
490
|
--ods-current: var(--ods-flamingo-cyan-base);
|
|
385
491
|
--ods-accent: var(--ods-flamingo-cyan-base);
|
|
386
492
|
}
|
|
387
493
|
|
|
388
494
|
[data-app-type="company-hub"] {
|
|
389
|
-
/* Company Hub uses red for investor relations and data room */
|
|
390
495
|
--color-accent-primary: var(--ods-attention-red-error);
|
|
391
496
|
--color-accent-hover: var(--ods-attention-red-error-hover);
|
|
392
497
|
--color-accent-active: var(--ods-attention-red-error-action);
|
|
@@ -395,39 +500,13 @@
|
|
|
395
500
|
--color-focus-visible: var(--ods-attention-red-error);
|
|
396
501
|
--color-link: var(--ods-attention-red-error);
|
|
397
502
|
--color-link-hover: var(--ods-attention-red-error-hover);
|
|
398
|
-
--color-bg: var(--ods-system-greys-background);
|
|
399
|
-
--color-bg-card: var(--ods-system-greys-black);
|
|
400
|
-
--color-bg-hover: var(--ods-system-greys-black-hover);
|
|
401
|
-
--color-bg-active: var(--ods-system-greys-black-action);
|
|
402
|
-
|
|
403
|
-
/* Company Hub uses red as adaptive color and accent */
|
|
404
503
|
--ods-current: var(--ods-attention-red-error);
|
|
405
504
|
--ods-accent: var(--ods-attention-red-error);
|
|
406
505
|
}
|
|
407
506
|
|
|
408
|
-
/*
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
--color-bg-card: #ffffff;
|
|
412
|
-
--color-text-primary: var(--ods-system-greys-background);
|
|
413
|
-
--color-text-secondary: var(--ods-system-greys-soft-grey);
|
|
414
|
-
--color-text-tertiary: var(--ods-system-greys-grey);
|
|
415
|
-
--color-border-default: #e5e5e5;
|
|
416
|
-
--color-divider: #e5e5e5;
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
/* High Contrast Theme */
|
|
420
|
-
.theme-high-contrast {
|
|
421
|
-
--color-bg: #000000;
|
|
422
|
-
--color-bg-card: #000000;
|
|
423
|
-
--color-text-primary: #ffffff;
|
|
424
|
-
--color-text-secondary: #ffffff;
|
|
425
|
-
--color-accent-primary: #00ff00;
|
|
426
|
-
--color-border-default: #ffffff;
|
|
427
|
-
--color-focus-ring: #00ff00;
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
/* Convenience shorthand (tier 3) */
|
|
507
|
+
/* ===================================================================== */
|
|
508
|
+
/* TIER 3 — Convenience shorthand */
|
|
509
|
+
/* ===================================================================== */
|
|
431
510
|
:root {
|
|
432
511
|
--bg: var(--color-bg);
|
|
433
512
|
--card: var(--color-bg-card);
|
|
@@ -443,4 +522,4 @@
|
|
|
443
522
|
--info: var(--color-info);
|
|
444
523
|
--disabled: var(--color-disabled);
|
|
445
524
|
--focus: var(--color-focus-ring);
|
|
446
|
-
}
|
|
525
|
+
}
|