@micha.bigler/ui-core-micha 3.14.4 → 4.0.0

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 (341) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +7 -0
  3. package/dist/chat/kitSxRegistry.js +9 -0
  4. package/dist/components/charts/kitSxRegistry.js +6 -0
  5. package/dist/entries/charts.js +6 -0
  6. package/dist/entries/chat.js +8 -0
  7. package/dist/entries/markdown.js +1 -0
  8. package/dist/index.js +0 -14
  9. package/dist/pages/AccountPage.js +1 -2
  10. package/dist/pages/LoginPage.js +1 -2
  11. package/dist/pages/PasswordChangePage.js +1 -2
  12. package/dist/pages/PasswordInvitePage.js +1 -2
  13. package/dist/pages/PasswordResetRequestPage.js +1 -2
  14. package/dist/pages/SignUpPage.js +1 -2
  15. package/dist/pages/SignupConfirmPage.js +1 -2
  16. package/dist/theme/kitSxEntry.js +11 -0
  17. package/dist/theme/kitSxRegistry.js +2 -15
  18. package/package.json +32 -7
  19. package/.github/workflows/ci.yml +0 -35
  20. package/.github/workflows/publish.yml +0 -126
  21. package/DESIGN.md +0 -60
  22. package/WORK_ORDERS.md +0 -150
  23. package/dev/entries.jsx +0 -721
  24. package/dev/fixtures.js +0 -26
  25. package/dev/main.jsx +0 -75
  26. package/dev/mockTransport.jsx +0 -128
  27. package/docs/CHART-LAYOUT.md +0 -157
  28. package/docs/DARK-TOKENS.md +0 -140
  29. package/docs/TYPE-SCALE.md +0 -111
  30. package/docs/messaging-deviations.md +0 -118
  31. package/index.html +0 -12
  32. package/renovate.json +0 -10
  33. package/scripts/chart-api-census.mjs +0 -415
  34. package/src/auth/AuthContext.jsx +0 -158
  35. package/src/auth/ReauthModal.jsx +0 -82
  36. package/src/auth/UserMenu.jsx +0 -121
  37. package/src/auth/apiClient.jsx +0 -232
  38. package/src/auth/authApi.jsx +0 -539
  39. package/src/auth/authConfig.jsx +0 -34
  40. package/src/auth/reauth.js +0 -47
  41. package/src/chat/ChatComposer.jsx +0 -36
  42. package/src/chat/ChatList.jsx +0 -87
  43. package/src/chat/ChatThread.jsx +0 -128
  44. package/src/chat/ChatWorkspace.jsx +0 -244
  45. package/src/chat/MarkdownReply.jsx +0 -22
  46. package/src/chat/ModelPicker.jsx +0 -85
  47. package/src/chat/api.js +0 -18
  48. package/src/chat/useChatSocket.js +0 -32
  49. package/src/chat/wire.js +0 -7
  50. package/src/components/AccessCodeManager.jsx +0 -288
  51. package/src/components/AccessCodeSingleUseToggle.jsx +0 -92
  52. package/src/components/AllowedEmailDomainsManager.jsx +0 -92
  53. package/src/components/AuthFactorRequirementCard.jsx +0 -95
  54. package/src/components/BulkInviteCsvTab.jsx +0 -198
  55. package/src/components/EmptyState.jsx +0 -38
  56. package/src/components/LoginForm.jsx +0 -159
  57. package/src/components/MFAComponent.jsx +0 -350
  58. package/src/components/MfaLoginComponent.jsx +0 -252
  59. package/src/components/MobileBottomNav.jsx +0 -82
  60. package/src/components/PasskeysComponent.jsx +0 -252
  61. package/src/components/PasswordChangeForm.jsx +0 -87
  62. package/src/components/PasswordResetRequestForm.jsx +0 -43
  63. package/src/components/PasswordSetForm.jsx +0 -97
  64. package/src/components/ProfileComponent.jsx +0 -348
  65. package/src/components/QrSignupManager.jsx +0 -404
  66. package/src/components/QrSignupValidityManager.jsx +0 -106
  67. package/src/components/RegistrationMethodsManager.jsx +0 -150
  68. package/src/components/SecurityComponent.jsx +0 -141
  69. package/src/components/SocialLoginButtons.jsx +0 -83
  70. package/src/components/SoftChip.jsx +0 -93
  71. package/src/components/StatTile.jsx +0 -39
  72. package/src/components/SupportRecoveryRequestsTab.jsx +0 -482
  73. package/src/components/TurnstileWidget.jsx +0 -99
  74. package/src/components/UserInviteComponent.jsx +0 -76
  75. package/src/components/UserListComponent.jsx +0 -618
  76. package/src/components/charts/BarChart.jsx +0 -102
  77. package/src/components/charts/ChartFrame.jsx +0 -214
  78. package/src/components/charts/LineChart.jsx +0 -126
  79. package/src/components/charts/ScatterChart.jsx +0 -299
  80. package/src/components/charts/TimeSeriesChart.jsx +0 -300
  81. package/src/components/charts/chartDefaults.js +0 -644
  82. package/src/components/charts/chartLabels.js +0 -36
  83. package/src/components/charts/exportChart.js +0 -258
  84. package/src/components/charts/formatters.js +0 -39
  85. package/src/components/charts/palette.js +0 -33
  86. package/src/components/charts/yearTickInterval.js +0 -7
  87. package/src/i18n/authTranslations.ts +0 -2651
  88. package/src/i18n/chartsTranslations.ts +0 -91
  89. package/src/i18n/chatTranslations.ts +0 -55
  90. package/src/i18n/messagingTranslations.ts +0 -120
  91. package/src/i18n/notificationsTranslations.ts +0 -32
  92. package/src/i18n/onboardingTranslations.ts +0 -29
  93. package/src/i18n/sectionNavTranslations.ts +0 -20
  94. package/src/i18n/uiCoreTranslations.js +0 -29
  95. package/src/i18n/userMenuTranslations.ts +0 -5
  96. package/src/index.js +0 -158
  97. package/src/layout/PageLayout.jsx +0 -36
  98. package/src/layout/SectionNav.jsx +0 -320
  99. package/src/messaging/AttachmentList.jsx +0 -145
  100. package/src/messaging/Composer.jsx +0 -197
  101. package/src/messaging/ConversationLaunchers.jsx +0 -51
  102. package/src/messaging/ConversationList.jsx +0 -109
  103. package/src/messaging/DirectMessageLauncher.jsx +0 -112
  104. package/src/messaging/MessageBubble.jsx +0 -183
  105. package/src/messaging/MessagingProvider.jsx +0 -0
  106. package/src/messaging/MessagingScopeConfig.jsx +0 -24
  107. package/src/messaging/PollCard.jsx +0 -163
  108. package/src/messaging/ReactionBar.jsx +0 -43
  109. package/src/messaging/ReadTicks.jsx +0 -82
  110. package/src/messaging/Thread.jsx +0 -195
  111. package/src/messaging/api.js +0 -48
  112. package/src/messaging/composerImageCompression.js +0 -35
  113. package/src/messaging/linkifyText.jsx +0 -37
  114. package/src/notifications/NotificationBell.jsx +0 -84
  115. package/src/notifications/NotificationSettings.jsx +0 -330
  116. package/src/notifications/NotificationsProvider.jsx +0 -224
  117. package/src/notifications/PopupSurface.jsx +0 -105
  118. package/src/notifications/api.js +0 -55
  119. package/src/notifications/feedApi.js +0 -18
  120. package/src/notifications/realtime.jsx +0 -138
  121. package/src/notifications/serviceWorker/sw.js +0 -50
  122. package/src/onboarding/OnboardingProvider.jsx +0 -326
  123. package/src/onboarding/OnboardingWizard.jsx +0 -61
  124. package/src/onboarding/WizardDialogShell.jsx +0 -51
  125. package/src/onboarding/api.js +0 -13
  126. package/src/onboarding/stepSelection.js +0 -16
  127. package/src/onboarding/steps/BrowserPushStep.jsx +0 -121
  128. package/src/onboarding/steps/CompleteNameStep.jsx +0 -46
  129. package/src/onboarding/steps/CookieConsentStep.jsx +0 -133
  130. package/src/onboarding/steps/PwaInstallStep.jsx +0 -47
  131. package/src/pages/AccountPage.jsx +0 -394
  132. package/src/pages/LoginPage.jsx +0 -343
  133. package/src/pages/PasswordChangePage.jsx +0 -62
  134. package/src/pages/PasswordInvitePage.jsx +0 -177
  135. package/src/pages/PasswordResetRequestPage.jsx +0 -68
  136. package/src/pages/SignUpPage.jsx +0 -268
  137. package/src/pages/SignupConfirmPage.jsx +0 -155
  138. package/src/testing/checkKitIntegration.js +0 -233
  139. package/src/theme/createAppTheme.js +0 -423
  140. package/src/theme/fonts.js +0 -3
  141. package/src/theme/index.js +0 -21
  142. package/src/theme/kitSxRegistry.js +0 -285
  143. package/src/theme/themeCompleteness.js +0 -1045
  144. package/src/theme/tokens.js +0 -478
  145. package/src/utils/auth-errors.js +0 -76
  146. package/src/utils/authService.js +0 -223
  147. package/src/utils/resolveErrorText.js +0 -28
  148. package/src/utils/webauthn.js +0 -51
  149. package/tests/AccountPage.profileStatements.test.jsx +0 -162
  150. package/tests/AccountPage.test.jsx +0 -200
  151. package/tests/AuthContext.test.jsx +0 -129
  152. package/tests/BarChart.test.jsx +0 -112
  153. package/tests/BrowserPushStep.test.jsx +0 -110
  154. package/tests/ChartFrame.test.jsx +0 -336
  155. package/tests/ConversationList.test.jsx +0 -144
  156. package/tests/CookieConsentStep.test.jsx +0 -69
  157. package/tests/EmptyState.test.jsx +0 -62
  158. package/tests/LineChart.test.jsx +0 -80
  159. package/tests/MessagingProvider.test.jsx +0 -50
  160. package/tests/MobileBottomNav.test.jsx +0 -319
  161. package/tests/NotificationBell.test.jsx +0 -60
  162. package/tests/NotificationSettings.test.jsx +0 -276
  163. package/tests/NotificationsProvider.test.jsx +0 -240
  164. package/tests/OnboardingProvider.test.jsx +0 -294
  165. package/tests/OnboardingWizard.test.jsx +0 -143
  166. package/tests/PasswordChangeForm.test.jsx +0 -70
  167. package/tests/PasswordInvitePage.test.jsx +0 -142
  168. package/tests/PasswordSetForm.test.jsx +0 -70
  169. package/tests/PopupSurface.test.jsx +0 -142
  170. package/tests/ProfileComponent.refresh.test.jsx +0 -194
  171. package/tests/QrSignupManager.registrationContext.test.jsx +0 -106
  172. package/tests/QrSignupManagerInfoBox.test.jsx +0 -49
  173. package/tests/ScatterChart.test.jsx +0 -270
  174. package/tests/SectionNav.test.jsx +0 -363
  175. package/tests/SignUpPage.test.jsx +0 -208
  176. package/tests/SoftChip.test.jsx +0 -105
  177. package/tests/StatTile.test.jsx +0 -57
  178. package/tests/Thread.test.jsx +0 -151
  179. package/tests/TimeSeriesChart.test.jsx +0 -367
  180. package/tests/UserListComponent.test.jsx +0 -192
  181. package/tests/UserMenu.test.jsx +0 -171
  182. package/tests/apiClientLanguage.test.js +0 -33
  183. package/tests/apiClientPublicPaths.test.js +0 -178
  184. package/tests/authApiLogin.test.js +0 -42
  185. package/tests/authApiRegistration.test.js +0 -31
  186. package/tests/authErrorCodeRendering.test.jsx +0 -77
  187. package/tests/authErrors.test.js +0 -74
  188. package/tests/authTranslations.test.js +0 -74
  189. package/tests/chart-api-census.test.js +0 -366
  190. package/tests/chartAxisTickBand.test.jsx +0 -95
  191. package/tests/chartDefaults.test.js +0 -902
  192. package/tests/chartLabels.test.js +0 -50
  193. package/tests/chartsPalette.test.js +0 -99
  194. package/tests/chatApi.test.js +0 -48
  195. package/tests/chatDriverNames.test.jsx +0 -71
  196. package/tests/chatExports.test.js +0 -3
  197. package/tests/chatList.test.jsx +0 -84
  198. package/tests/chatPicker.test.jsx +0 -82
  199. package/tests/chatSocket.test.jsx +0 -26
  200. package/tests/chatThread.test.jsx +0 -116
  201. package/tests/chatTranslations.test.js +0 -47
  202. package/tests/chatWorkspace.test.jsx +0 -234
  203. package/tests/checkKitIntegration.test.jsx +0 -219
  204. package/tests/createAppTheme.test.js +0 -132
  205. package/tests/createAppThemeDark.test.js +0 -127
  206. package/tests/createAppThemeLightGuard.test.js +0 -40
  207. package/tests/createAppThemePageContrast.test.js +0 -108
  208. package/tests/createAppThemeTypography.test.js +0 -53
  209. package/tests/errorCallSiteGuard.test.js +0 -32
  210. package/tests/exportChart.test.js +0 -313
  211. package/tests/feedApi.test.js +0 -46
  212. package/tests/fixtures/light-theme-baseline.json +0 -2234
  213. package/tests/i18nAggregate.test.js +0 -120
  214. package/tests/i18nGermanVariant.test.js +0 -65
  215. package/tests/loginPageErrorResolution.test.jsx +0 -102
  216. package/tests/messagingApi.test.js +0 -32
  217. package/tests/messagingChunk6.test.jsx +0 -116
  218. package/tests/messagingCompactBubble.test.jsx +0 -64
  219. package/tests/messagingComposer.test.jsx +0 -136
  220. package/tests/messagingComposerChunk5.test.jsx +0 -113
  221. package/tests/messagingContractConformance.test.js +0 -69
  222. package/tests/messagingDirectMessageLauncher.test.jsx +0 -151
  223. package/tests/messagingExports.test.js +0 -21
  224. package/tests/messagingInteractions.test.jsx +0 -136
  225. package/tests/messagingLastMessagePreview.test.jsx +0 -93
  226. package/tests/messagingLinkify.test.jsx +0 -51
  227. package/tests/messagingMessageActions.test.jsx +0 -163
  228. package/tests/messagingMsg6.test.jsx +0 -105
  229. package/tests/messagingMsg6f.test.jsx +0 -155
  230. package/tests/messagingMsg6g.test.jsx +0 -166
  231. package/tests/messagingMsg6h.test.jsx +0 -136
  232. package/tests/messagingMsg6i.test.jsx +0 -129
  233. package/tests/messagingPollRendering.test.jsx +0 -142
  234. package/tests/messagingReactionMerge.test.jsx +0 -77
  235. package/tests/messagingReadTicksTooltip.test.jsx +0 -36
  236. package/tests/messagingThreadReceipts.test.jsx +0 -178
  237. package/tests/messagingThreadingQuoting.test.jsx +0 -87
  238. package/tests/messagingUnreadLifecycle.test.jsx +0 -78
  239. package/tests/notificationsApi.test.js +0 -41
  240. package/tests/notificationsExports.test.js +0 -34
  241. package/tests/onboardingDescriptors.test.js +0 -132
  242. package/tests/packageTreeShaking.test.js +0 -126
  243. package/tests/realtime.test.jsx +0 -219
  244. package/tests/resolveErrorText.test.js +0 -72
  245. package/tests/stepSelection.test.js +0 -53
  246. package/tests/themeCompleteness.test.js +0 -626
  247. package/tests/timeSeriesLegend.test.js +0 -99
  248. package/tests/userScreenTranslations.test.jsx +0 -218
  249. package/tsconfig.build.json +0 -18
  250. package/vite.config.mjs +0 -6
  251. package/work-orders/AUTH-1.md +0 -74
  252. package/work-orders/AUTH-2.md +0 -74
  253. package/work-orders/AUTH-4.md +0 -183
  254. package/work-orders/AUTH-5.md +0 -154
  255. package/work-orders/AUTH-7.md +0 -181
  256. package/work-orders/AUTH-8.md +0 -184
  257. package/work-orders/CHART-1.md +0 -285
  258. package/work-orders/CHART-2.md +0 -222
  259. package/work-orders/CHART-3.md +0 -163
  260. package/work-orders/CHART-4.md +0 -203
  261. package/work-orders/CHART-5.md +0 -226
  262. package/work-orders/CHART-6.md +0 -428
  263. package/work-orders/CHART-7.md +0 -175
  264. package/work-orders/DX-1.md +0 -169
  265. package/work-orders/DX-2.md +0 -188
  266. package/work-orders/DX-3.md +0 -195
  267. package/work-orders/I18N-1.md +0 -254
  268. package/work-orders/I18N-3.md +0 -207
  269. package/work-orders/MSG-3.md +0 -375
  270. package/work-orders/MSG-3b.md +0 -1002
  271. package/work-orders/MSG-3c.md +0 -378
  272. package/work-orders/MSG-3d.md +0 -268
  273. package/work-orders/MSG-3e.md +0 -164
  274. package/work-orders/MSG-3f.md +0 -391
  275. package/work-orders/MSG-6e.md +0 -308
  276. package/work-orders/MSG-6f.md +0 -214
  277. package/work-orders/MSG-6g.md +0 -244
  278. package/work-orders/MSG-6h.md +0 -238
  279. package/work-orders/MSG-6i.md +0 -271
  280. package/work-orders/MSG-6j.md +0 -117
  281. package/work-orders/NOTIF-12.md +0 -214
  282. package/work-orders/NOTIF-13.md +0 -142
  283. package/work-orders/NOTIF-14.md +0 -151
  284. package/work-orders/PRIM-1.md +0 -177
  285. package/work-orders/SHELL-1.md +0 -255
  286. package/work-orders/SHELL-2.md +0 -197
  287. package/work-orders/SHELL-3.md +0 -359
  288. package/work-orders/SHELL-4.md +0 -351
  289. package/work-orders/SHELL-5.md +0 -345
  290. package/work-orders/SHELL-6.md +0 -210
  291. package/work-orders/THEME-1.md +0 -587
  292. package/work-orders/THEME-10.md +0 -303
  293. package/work-orders/THEME-11.md +0 -208
  294. package/work-orders/THEME-2.md +0 -339
  295. package/work-orders/THEME-3.md +0 -210
  296. package/work-orders/THEME-4.md +0 -271
  297. package/work-orders/THEME-5.md +0 -341
  298. package/work-orders/THEME-6.md +0 -247
  299. package/work-orders/THEME-7.md +0 -82
  300. package/work-orders/THEME-8.md +0 -211
  301. package/work-orders/THEME-9.md +0 -194
  302. package/work-orders/UCM-AUTH-10.md +0 -490
  303. package/work-orders/UCM-AUTH-11.md +0 -185
  304. package/work-orders/UCM-AUTH-12.md +0 -98
  305. package/work-orders/UCM-AUTH-13.md +0 -47
  306. package/work-orders/UCM-AUTH-9.md +0 -207
  307. package/work-orders/UCM-CHART-10.md +0 -150
  308. package/work-orders/UCM-CHART-11.md +0 -132
  309. package/work-orders/UCM-CHART-12.md +0 -348
  310. package/work-orders/UCM-CHART-13.md +0 -122
  311. package/work-orders/UCM-CHART-14.md +0 -198
  312. package/work-orders/UCM-CHART-15.md +0 -187
  313. package/work-orders/UCM-CHART-16.md +0 -169
  314. package/work-orders/UCM-CHART-17.md +0 -195
  315. package/work-orders/UCM-CHART-18.md +0 -200
  316. package/work-orders/UCM-CHART-8.md +0 -147
  317. package/work-orders/UCM-CHART-9.md +0 -265
  318. package/work-orders/UCM-CHAT-1.md +0 -190
  319. package/work-orders/UCM-CHAT-2.md +0 -75
  320. package/work-orders/UCM-CI-1.md +0 -65
  321. package/work-orders/UCM-DEP-1.md +0 -63
  322. package/work-orders/UCM-I18N-4.md +0 -226
  323. package/work-orders/UCM-I18N-5.md +0 -211
  324. package/work-orders/UCM-MSG-20.md +0 -192
  325. package/work-orders/UCM-PRIM-2.md +0 -114
  326. package/work-orders/UCM-SHELL-7.md +0 -134
  327. package/work-orders/UCM-SHELL-8.md +0 -125
  328. package/work-orders/UCM-TEST-1.md +0 -304
  329. package/work-orders/UCM-THEME-13.md +0 -69
  330. package/work-orders/UCM-THEME-14.md +0 -312
  331. package/work-orders/UCM-THEME-15.md +0 -356
  332. package/work-orders/UCM-THEME-16.md +0 -80
  333. package/work-orders/UCM-THEME-17.md +0 -111
  334. package/work-orders/UCM-THEME-18.md +0 -184
  335. package/work-orders/assets/AUTH-4-user-list-card.html +0 -407
  336. package/work-orders/assets/PRIM-1-dashboard-primitives.html +0 -624
  337. package/work-orders/assets/SHELL-2-account-navigation.html +0 -1159
  338. package/work-orders/assets/THEME-1-baseline-reference-sheet.html +0 -1352
  339. package/work-orders/assets/UCM-CHAT-1-ai-chat.html +0 -447
  340. package/work-orders/assets/UCM-THEME-13-dark-prototype.html +0 -390
  341. package/work-orders/assets/UCM-THEME-17-type-scale.html +0 -391
package/work-orders/assets/UCM-THEME-13-dark-prototype.html DELETED
@@ -1,390 +0,0 @@
1
- <!doctype html>
2
- <html lang="de">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6
- <title>Dunkelmodus-Baseline</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Cormorant+Garamond:wght@400;500&family=Jost:wght@300;400;500&display=swap">
9
- <style>
10
- /* Layout: a control bar, then one 1280 px frame (scaled to fit) and three 375 px frames side by side,
11
- then the contrast table. The page chrome follows the viewer theme; the specimen screens use only
12
- their own computed tokens and never the chrome's. */
13
- :root {
14
- --c-bg: #F3F4F5; --c-surface: #FFFFFF; --c-ink: #1E2226; --c-ink2: #5B6670; --c-line: #DADDE0;
15
- --c-accent: #3D5A99; --c-ok: #1B8038; --c-bad: #BF3227;
16
- --f-ui: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
17
- color-scheme: light;
18
- }
19
- @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
20
- --c-bg: #101214; --c-surface: #181B1F; --c-ink: #E6E9EC; --c-ink2: #A2ABB4; --c-line: #2C3238;
21
- --c-accent: #8FA8D8; --c-ok: #7BC496; --c-bad: #E58B80; color-scheme: dark; } }
22
- :root[data-theme="dark"] {
23
- --c-bg: #101214; --c-surface: #181B1F; --c-ink: #E6E9EC; --c-ink2: #A2ABB4; --c-line: #2C3238;
24
- --c-accent: #8FA8D8; --c-ok: #7BC496; --c-bad: #E58B80; color-scheme: dark; }
25
- * { box-sizing: border-box; }
26
- html, body { margin: 0; }
27
- body { background: var(--c-bg); color: var(--c-ink); font: 14px/1.5 var(--f-ui); padding-inline: 16px; padding-block: 20px 48px; }
28
- .wrap { max-width: 1320px; margin-inline: auto; display: grid; gap: 22px; }
29
- h1 { font-size: 22px; font-weight: 600; margin: 0; text-wrap: balance; }
30
- h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
31
- p.lead { margin: 4px 0 0; color: var(--c-ink2); max-width: 70ch; }
32
- .bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 8px; padding: 12px 14px; }
33
- .group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
34
- .group > span { font-size: 12px; color: var(--c-ink2); margin-right: 4px; }
35
- .seg { font: 500 13px var(--f-ui); color: var(--c-ink); background: transparent; border: 1px solid var(--c-line); border-radius: 3px; padding: 5px 10px; cursor: pointer; }
36
- .seg[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-surface); }
37
- .seg:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
38
- .frame-label { font-size: 12px; color: var(--c-ink2); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
39
- .scaler { width: 100%; overflow: hidden; border: 1px solid var(--c-line); border-radius: 8px; }
40
- .scaler > .screen { width: 1280px; transform-origin: 0 0; }
41
- .row375 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 375px)); gap: 18px; justify-content: start; }
42
- .f375 { width: 100%; max-width: 375px; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; }
43
- .coverage { font-size: 12.5px; color: var(--c-ink2); max-width: 90ch; }
44
- .tablewrap { overflow-x: auto; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 8px; }
45
- table.ct { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
46
- table.ct th, table.ct td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
47
- table.ct th { font-weight: 600; font-size: 12px; color: var(--c-ink2); }
48
- .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(127,127,127,.4); }
49
- .pass { color: var(--c-ok); font-weight: 600; } .fail { color: var(--c-bad); font-weight: 600; }
50
-
51
- /* ---- specimen screen: every colour comes from tokens set on the element by script ---- */
52
- .screen { background: var(--page); color: var(--ink1); font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; position: relative; }
53
- .screen .appbar { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 56px; background: var(--paper); border-bottom: 1px solid var(--divider); }
54
- .screen .brand { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
55
- .screen .nav { display: flex; gap: 4px; margin-left: 16px; }
56
- .screen .nav a { color: var(--ink2); text-decoration: none; padding: 6px 10px; border-radius: var(--r-control); font-weight: 500; font-size: 13.5px; }
57
- .screen .nav a.on { color: var(--primary); background: var(--primary-tint); }
58
- .screen .avatar { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 13px; }
59
- .screen main { padding: 24px; display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
60
- .screen h3 { font-family: var(--font-head); font-size: var(--fs-h); font-weight: 600; margin: 0; line-height: 1.3; }
61
- .screen .sub { color: var(--ink2); font-size: 13px; margin: 2px 0 0; }
62
- .screen .card { background: var(--paper); border: 1px solid var(--divider); border-radius: var(--r-card); padding: 16px; display: grid; gap: 14px; align-content: start; }
63
- .screen .head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
64
- .screen .head .actions { margin-left: auto; display: flex; gap: 8px; }
65
- .screen table.users { width: 100%; border-collapse: collapse; font-size: 13.5px; }
66
- .screen table.users th { text-align: left; font-weight: 500; color: var(--ink2); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--divider); }
67
- .screen table.users td { padding: 10px; border-bottom: 1px solid var(--divider); }
68
- .screen table.users tr:last-child td { border-bottom: 0; }
69
- .screen td.mail { color: var(--ink2); }
70
- .screen .btn { font: 500 13.5px var(--font); border-radius: var(--r-control); padding: 7px 14px; min-height: 36px; cursor: pointer; border: 1px solid transparent; }
71
- .screen .btn.contained { background: var(--primary); color: var(--on-primary); }
72
- .screen .btn.outlined { background: transparent; color: var(--primary); border-color: var(--cb-main); }
73
- .screen .btn.text { background: transparent; color: var(--primary); padding-inline: 8px; }
74
- .screen .btn.danger { background: transparent; color: var(--st-error-text); border-color: var(--cb-main); }
75
- .screen .btn:focus-visible, .screen .field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
76
- .screen .chip { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: var(--r-chip); }
77
- .screen .chip.success { background: var(--st-success-bg); color: var(--st-success-text); }
78
- .screen .chip.warning { background: var(--st-warning-bg); color: var(--st-warning-text); }
79
- .screen .chip.error { background: var(--st-error-bg); color: var(--st-error-text); }
80
- .screen .chip.neutral { background: var(--subtle); color: var(--ink2); }
81
- .screen .alerts { display: grid; gap: 8px; }
82
- .screen .alert { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-card); font-size: 13.5px; }
83
- .screen .alert .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
84
- .screen .alert.success { background: var(--st-success-bg); color: var(--st-success-text); } .screen .alert.success .dot { background: var(--st-success-main); }
85
- .screen .alert.warning { background: var(--st-warning-bg); color: var(--st-warning-text); } .screen .alert.warning .dot { background: var(--st-warning-main); }
86
- .screen .alert.error { background: var(--st-error-bg); color: var(--st-error-text); } .screen .alert.error .dot { background: var(--st-error-main); }
87
- .screen .alert.info { background: var(--st-info-bg); color: var(--st-info-text); } .screen .alert.info .dot { background: var(--st-info-main); }
88
- .screen .field { display: grid; gap: 4px; }
89
- .screen .field label { font-size: 12.5px; color: var(--ink2); font-weight: 500; }
90
- .screen .field input { font: 14px var(--font); color: var(--ink1); background: var(--paper); border: 1px solid var(--cb-main); border-radius: var(--r-control); padding: 9px 11px; min-height: 40px; width: 100%; }
91
- .screen .field.err input { border-color: var(--cb-error); }
92
- .screen .field.err small { color: var(--st-error-text); font-size: 12.5px; }
93
- .screen .field.autofill input { background: var(--autofill-bg); color: var(--autofill-ink); }
94
- .screen .chart { display: grid; gap: 6px; }
95
- .screen .bars { display: grid; gap: 7px; }
96
- .screen .barrow { display: grid; grid-template-columns: 96px 1fr 28px; gap: 8px; align-items: center; font-size: 12.5px; }
97
- .screen .barrow .lbl { color: var(--ink2); }
98
- .screen .barrow .track { height: 14px; background: var(--subtle); border-radius: 2px; overflow: hidden; }
99
- .screen .barrow .fill { height: 100%; }
100
- .screen .barrow .val { text-align: right; font-variant-numeric: tabular-nums; }
101
- .screen .axis { font-size: 11.5px; color: var(--ink3); }
102
- .screen .scrim { position: absolute; inset: 56px 0 0 0; background: var(--scrim); }
103
- .screen .dialog { position: absolute; right: 48px; top: 120px; width: 380px; background: var(--overlay); border: 1px solid var(--divider); border-radius: var(--r-card); box-shadow: var(--overlay-shadow); padding: 18px; display: grid; gap: 12px; }
104
- .screen .dialog p { margin: 0; color: var(--ink2); font-size: 13.5px; }
105
- .screen .dialog .actions { display: flex; gap: 8px; justify-content: flex-end; }
106
- .screen .muted { color: var(--ink3); font-size: 12.5px; }
107
- /* 375 px: one column, the dialog sits inline as the last block (no scrim) */
108
- .f375 .screen main { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 14px; }
109
- .f375 .screen .nav { display: none; }
110
- .f375 .screen .scrim { display: none; }
111
- .f375 .screen .dialog { position: static; width: auto; margin: 0 16px 16px; }
112
- .f375 .screen table.users td.mail, .f375 .screen table.users th.mail { display: none; }
113
- @media (prefers-reduced-motion: no-preference) { .seg { transition: background-color 120ms, color 120ms; } }
114
- </style>
115
- </head>
116
- <body>
117
- <div class="wrap">
118
- <header>
119
- <h1>Dunkelmodus-Baseline</h1>
120
- <p class="lead">Prototyp zu UCM-THEME-13, Runde 2. Neutrale Basis A ist entschieden (Seite #14181B). Offen ist der Helligkeitsabstand von Seite, Karte und Dialog, dazu die abgeleitete Primärfarbe und die festen Statusfarben. Kontraste werden im Browser berechnet.</p>
121
- </header>
122
-
123
- <div class="bar" role="toolbar" aria-label="Varianten">
124
- <div class="group" id="g-variant"><span>Helligkeit</span>
125
- <button class="seg" type="button" id="s-1" data-v="S1">Stufe 1 eng</button>
126
- <button class="seg" type="button" id="s-2" data-v="S2">Stufe 2 mittel</button>
127
- <button class="seg" type="button" id="s-3" data-v="S3">Stufe 3 deutlich</button>
128
- </div>
129
- <div class="group" id="g-app"><span>App</span>
130
- <button class="seg" type="button" id="a-tpl" data-a="tpl">Template #468AB2</button>
131
- <button class="seg" type="button" id="a-hram" data-a="hram">hram #2F4F96</button>
132
- <button class="seg" type="button" id="a-sva" data-a="sva">survey_app #432CA1</button>
133
- <button class="seg" type="button" id="a-wsg" data-a="wsg">webshop (Marke)</button>
134
- </div>
135
- </div>
136
-
137
- <section>
138
- <p class="frame-label" id="lbl-1280">1280 px</p>
139
- <div class="scaler" id="scaler"></div>
140
- </section>
141
-
142
- <section>
143
- <h2>Helligkeitsstufen nebeneinander</h2>
144
- <div class="row375">
145
- <div><p class="frame-label" id="lbl-s1">375 px · Stufe 1 eng</p><div class="f375" id="f-s1"></div></div>
146
- <div><p class="frame-label" id="lbl-s2">375 px · Stufe 2 mittel</p><div class="f375" id="f-s2"></div></div>
147
- <div><p class="frame-label" id="lbl-s3">375 px · Stufe 3 deutlich</p><div class="f375" id="f-s3"></div></div>
148
- </div>
149
- </section>
150
-
151
- <section>
152
- <h2>Gegen hell und gegen den MUI-Standard</h2>
153
- <div class="row375">
154
- <div><p class="frame-label" id="lbl-d375">375 px · Vorschlag dunkel</p><div class="f375" id="f-dark"></div></div>
155
- <div><p class="frame-label" id="lbl-l375">375 px · helle Baseline heute</p><div class="f375" id="f-light"></div></div>
156
- <div><p class="frame-label">375 px · MUI-Standard dunkel (zum Vergleich)</p><div class="f375" id="f-mui"></div></div>
157
- </div>
158
- </section>
159
-
160
- <section>
161
- <h2>Kontraste der gewählten Stufe</h2>
162
- <div class="tablewrap"><table class="ct" id="ct"><thead><tr><th>Paar</th><th>Vordergrund</th><th>Hintergrund</th><th>Verhältnis</th><th>Schwelle</th><th></th></tr></thead><tbody></tbody></table></div>
163
- </section>
164
-
165
- <p class="coverage"><strong>Abdeckung:</strong> Tokens der dunklen Baseline auf einem typischen Screen aus ui-core-micha (Kopfzeile, Benutzerliste, Formular mit Fehler- und Autofill-Zustand, Statusmeldungen, Buttons, kategorisches Chart, Dialog). Nicht abgedeckt: Bewegung, Hover und Fokus im laufenden Betrieb, native Auswahllisten, Datumsfelder. Werte mit (erfunden) haben im Bestand kein Vorbild; dazu gehören die Stufen 2 und 3 und die dunkle Info-Farbe. Alles andere ist aus cockpit OBS-10, KB-23 und ucm SHELL-2 übernommen. Runde 1 (2026-10-02): neutrale Basis A gewählt; B (#121212, ohne Farbstich) und C (#16181B, Fortsetzung der hellen Tinte) verworfen, weil sie bei dieser Helligkeit nicht von A zu unterscheiden waren und A im Bestand belegt ist. Runde 2: Stufe 1 gewählt, Stufen 2 und 3 verworfen. Eingefroren am 2026-10-02; die gültigen Werte stehen in docs/DARK-TOKENS.md.</p>
166
- </div>
167
-
168
- <template id="tpl-screen">
169
- <div class="appbar"><span class="brand" data-brand></span>
170
- <nav class="nav" aria-label="Hauptnavigation"><a href="#" class="on">Konto</a><a href="#">Belege</a><a href="#">Auswertung</a></nav>
171
- <span class="avatar" aria-label="Anna Meier">AM</span></div>
172
- <main>
173
- <div class="card">
174
- <div class="head"><div><h3>Benutzer</h3><p class="sub">4 Personen in dieser Organisation</p></div>
175
- <div class="actions"><button class="btn outlined" type="button">Exportieren</button><button class="btn contained" type="button">Einladen</button></div></div>
176
- <table class="users"><thead><tr><th>Name</th><th class="mail">E-Mail</th><th>Rolle</th><th>Status</th></tr></thead>
177
- <tbody>
178
- <tr><td>Anna Meier</td><td class="mail">anna.meier@example.ch</td><td>Admin</td><td><span class="chip success">Aktiv</span></td></tr>
179
- <tr><td>Jonas Keller</td><td class="mail">jonas.keller@example.ch</td><td>Mitglied</td><td><span class="chip warning">Eingeladen</span></td></tr>
180
- <tr><td>Lea Frei</td><td class="mail">lea.frei@example.ch</td><td>Mitglied</td><td><span class="chip error">Gesperrt</span></td></tr>
181
- <tr><td>Marco Rossi</td><td class="mail">marco.rossi@example.ch</td><td>Leser</td><td><span class="chip neutral">Inaktiv</span></td></tr>
182
- </tbody></table>
183
- <div class="alerts">
184
- <div class="alert success" role="status"><span class="dot"></span>Die Rolle wurde aktualisiert.</div>
185
- <div class="alert warning"><span class="dot"></span>Die Einladung an Jonas Keller läuft in 2 Tagen ab.</div>
186
- <div class="alert error" role="alert"><span class="dot"></span>Die Benutzerliste konnte nicht geladen werden.</div>
187
- <div class="alert info"><span class="dot"></span>Neue Rollen gelten ab der nächsten Anmeldung.</div>
188
- </div>
189
- </div>
190
- <div style="display:grid;gap:20px;align-content:start;min-width:0">
191
- <div class="card">
192
- <div><h3>Profil</h3><p class="sub">Angaben für Belege und Benachrichtigungen</p></div>
193
- <div class="field autofill"><label for="x-name">Name</label><input id="x-name" value="Anna Meier" readonly></div>
194
- <div class="field err"><label for="x-mail">E-Mail-Adresse</label><input id="x-mail" value="micha.bigler2@gmail.com2" readonly aria-invalid="true"><small>Bitte geben Sie eine gültige E-Mail-Adresse ein.</small></div>
195
- <div style="display:flex;gap:8px;flex-wrap:wrap"><button class="btn contained" type="button">Speichern</button><button class="btn text" type="button">Abbrechen</button></div>
196
- </div>
197
- <div class="card chart" role="img" aria-label="Belege nach Kategorie, Anzahl im 3. Quartal">
198
- <div><h3>Belege nach Kategorie</h3><p class="sub">Anzahl, Juli bis September</p></div>
199
- <div class="bars" data-bars></div>
200
- <div class="axis">0 bis 50 Belege</div>
201
- </div>
202
- </div>
203
- </main>
204
- <div class="scrim" aria-hidden="true"></div>
205
- <div class="dialog" role="dialog" aria-label="Benutzer sperren">
206
- <h3>Lea Frei sperren?</h3>
207
- <p>Lea Frei kann sich danach nicht mehr anmelden. Belege bleiben erhalten.</p>
208
- <div class="actions"><button class="btn text" type="button">Abbrechen</button><button class="btn danger" type="button">Sperren</button></div>
209
- </div>
210
- </template>
211
-
212
- <script>
213
- (function () {
214
- // ---------- colour maths (WCAG 2.x, alpha composited over the given ground) ----------
215
- const hex = (h) => { h = h.replace('#', ''); if (h.length === 3) h = h.split('').map((c) => c + c).join(''); return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)); };
216
- const toHex = (c) => '#' + c.map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0')).join('').toUpperCase();
217
- const parse = (s) => { s = s.trim(); if (s.startsWith('#')) return { c: hex(s), a: 1 }; const m = s.match(/rgba?\(([^)]+)\)/); const p = m[1].split(',').map(Number); return { c: p.slice(0, 3), a: p.length > 3 ? p[3] : 1 }; };
218
- const over = (fg, bg) => { const f = parse(fg), b = parse(bg).c; return f.c.map((v, i) => v * f.a + b[i] * (1 - f.a)); };
219
- const lum = (c) => { const l = c.map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * l[0] + 0.7152 * l[1] + 0.0722 * l[2]; };
220
- const ratio = (fg, bg) => { const a = lum(over(fg, bg)), b = lum(parse(bg).c); return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05); };
221
- const lighten = (h, k) => toHex(hex(h).map((v) => v + (255 - v) * k));
222
- const darken = (h, k) => toHex(hex(h).map((v) => v * (1 - k)));
223
- const alpha = (h, a) => { const c = hex(h); return `rgba(${c[0]},${c[1]},${c[2]},${a})`; };
224
- // Smallest lightening step (0.05) that clears `min` against every ground; capped at 0.9.
225
- const lightenUntil = (h, grounds, min) => { for (let k = 0; k <= 0.9001; k += 0.05) { const c = lighten(h, k); if (grounds.every((g) => ratio(c, g) >= min)) return c; } return lighten(h, 0.9); };
226
- // Smallest alpha (0.02 steps) of an ink that clears `min` against every ground.
227
- const alphaUntil = (ink, grounds, min, start) => { for (let a = start; a <= 1.0001; a += 0.02) { const c = alpha(ink, +a.toFixed(2)); if (grounds.every((g) => ratio(c, g) >= min)) return c; } return alpha(ink, 1); };
228
- const bestText = (fill, dark) => (ratio('#FFFFFF', fill) >= ratio(dark, fill) ? '#FFFFFF' : dark);
229
-
230
- // ---------- inputs ----------
231
- const SERIES = ['#3D5A99', '#3E80B8', '#2E8F8A', '#7A5FA8', '#9C4F86', '#8A7355'];
232
- const CATS = [['Reise', 42], ['Material', 31], ['Verpflegung', 18], ['Unterkunft', 12], ['Weiterbildung', 9], ['Sonstiges', 6]];
233
- const APPS = {
234
- tpl: { name: 'Template-App', primary: '#468AB2' },
235
- hram: { name: 'hram', primary: '#2F4F96' },
236
- sva: { name: 'Survey', primary: '#432CA1' },
237
- wsg: { name: 'Les Abeilles Günter', primary: '#C8771A', brand: true },
238
- };
239
- // Neutral base A, decided in round 1 (2026-10-02): the estate convergence (cockpit OBS-10/KB-23, ucm SHELL-2).
240
- const NEUTRAL = { page: '#14181B', ink1: '#E6EBEF', ink2: '#AAB5BF', ink3: '#87919A' };
241
- // Round 2: how far card, subtle surface, dialog and border step up from the page.
242
- // S1 is the estate's own step; S2 and S3 are proposals (invented) on the same hue.
243
- const VARIANTS = {
244
- S1: { label: 'Stufe 1 eng', paper: '#1B2126', subtle: '#20262C', overlay: '#232A31', divider: '#2B333A' },
245
- S2: { label: 'Stufe 2 mittel', paper: '#1F262C', subtle: '#252C33', overlay: '#29313A', divider: '#313A42', invented: true },
246
- S3: { label: 'Stufe 3 deutlich', paper: '#232B32', subtle: '#29323A', overlay: '#2F3942', divider: '#37414A', invented: true },
247
- };
248
- // Fixed dark status set: text on a dark tint. From the estate prototypes except info (invented).
249
- const STATUS_DARK = {
250
- success: { text: '#7BC496', bg: '#1C2A22' },
251
- warning: { text: '#D8BD7E', bg: '#2A2418' },
252
- error: { text: '#E58B80', bg: '#3A2320' },
253
- info: { text: '#8FB8E0', bg: '#1A2633', invented: true },
254
- };
255
- const WSG_DARK = { page: '#0E0B08', paper: '#171209', subtle: '#1E1710', overlay: '#211910', divider: 'rgba(255,255,255,0.09)', ink1: '#EDE3CC', ink2: '#9A7F60', ink3: '#86704F', primary: '#D49040', onPrimary: '#0E0B08' };
256
- const LIGHT = {
257
- page: '#FAFAFA', paper: '#FFFFFF', subtle: '#F4F5F6', overlay: '#FFFFFF', divider: 'rgba(33,37,41,.10)', ink1: '#212529', ink2: '#5B6670', ink3: '#6A7178',
258
- cbMain: 'rgba(33,37,41,.50)', status: { success: ['#35794A', '#E5F4E9', '#1B8038'], warning: ['#976100', '#FBF0DC', '#976100'], error: ['#BF3227', '#FBEAE8', '#BF3227'], info: ['#01579B', '#E5F6FD', '#01579B'] },
259
- shadow: '0 8px 24px rgba(20,26,31,.16), 0 2px 8px rgba(20,26,31,.08)',
260
- };
261
-
262
- // ---------- token sets ----------
263
- function darkTokens(vk, ak) {
264
- const app = APPS[ak];
265
- const n = app.brand ? WSG_DARK : { ...NEUTRAL, ...VARIANTS[vk] };
266
- const grounds = [n.page, n.paper];
267
- const primary = app.brand ? WSG_DARK.primary : lightenUntil(app.primary, [n.page], 4.5);
268
- const st = {};
269
- for (const [k, v] of Object.entries(STATUS_DARK)) {
270
- // The safety net: lighten only where a page (e.g. webshop's warm black) makes the fixed value fail.
271
- const text = lightenUntil(v.text, [v.bg, n.page], 4.5);
272
- st[k] = { text, bg: v.bg, main: text, moved: text !== v.text.toUpperCase(), invented: !!v.invented };
273
- }
274
- const cbMain = alphaUntil(n.ink1, grounds, 3, 0.30);
275
- return {
276
- mode: 'dark', name: app.name, font: app.brand ? "'Jost', sans-serif" : "'DM Sans', sans-serif",
277
- fontHead: app.brand ? "'Cormorant Garamond', serif" : "'DM Sans', sans-serif", fsH: app.brand ? '20px' : '16px', fsBody: '14px',
278
- r: app.brand ? [0, 0, 0] : [3, 8, 16],
279
- ...n, primary, onPrimary: app.brand ? WSG_DARK.onPrimary : bestText(primary, n.page), primaryTint: alpha(primary, 0.14),
280
- focus: lightenUntil(app.brand ? WSG_DARK.primary : app.primary, grounds, 3),
281
- cbMain, cbError: lightenUntil(st.error.text, grounds, 3), st,
282
- series: SERIES.map((c) => lightenUntil(c, [n.paper], 3)),
283
- autofillBg: n.paper, autofillInk: n.ink1,
284
- scrim: 'rgba(0,0,0,.55)', overlayShadow: '0 8px 28px rgba(0,0,0,.45)', base: app.primary,
285
- };
286
- }
287
- function lightTokens(ak) {
288
- const app = APPS[ak];
289
- const n = app.brand ? { ...LIGHT, page: '#FAF6EE', paper: '#FFFDF7', overlay: '#FFFDF7' } : LIGHT;
290
- const st = {}; for (const [k, v] of Object.entries(LIGHT.status)) st[k] = { text: v[0], bg: v[1], main: v[2] };
291
- return {
292
- mode: 'light', name: app.name, font: app.brand ? "'Jost', sans-serif" : "'DM Sans', sans-serif",
293
- fontHead: app.brand ? "'Cormorant Garamond', serif" : "'DM Sans', sans-serif", fsH: app.brand ? '20px' : '16px', fsBody: '14px',
294
- r: app.brand ? [0, 0, 0] : [3, 8, 16], ...n, primary: app.primary, onPrimary: bestText(app.primary, '#212529'), primaryTint: alpha(app.primary, 0.10),
295
- focus: app.primary, cbMain: LIGHT.cbMain, cbError: LIGHT.status.error[0], st, series: SERIES,
296
- autofillBg: n.paper, autofillInk: LIGHT.ink1, scrim: 'rgba(20,26,31,.32)', overlayShadow: LIGHT.shadow,
297
- };
298
- }
299
- function muiTokens(ak) {
300
- // MUI v7 dark defaults; standard alerts use darken(main, .9) as ground and lighten(main, .6) as text.
301
- const m = { success: '#66BB6A', warning: '#FFA726', error: '#F44336', info: '#29B6F6' };
302
- const st = {}; for (const [k, v] of Object.entries(m)) st[k] = { text: lighten(v, 0.6), bg: darken(v, 0.9), main: v };
303
- return {
304
- mode: 'mui', name: APPS[ak].name, font: "'DM Sans', sans-serif", fontHead: "'DM Sans', sans-serif", fsH: '16px', fsBody: '14px', r: [4, 4, 16],
305
- page: '#121212', paper: '#121212', subtle: '#1E1E1E', overlay: '#383838', divider: 'rgba(255,255,255,0.12)',
306
- ink1: '#FFFFFF', ink2: 'rgba(255,255,255,0.7)', ink3: 'rgba(255,255,255,0.5)', primary: '#90CAF9', onPrimary: 'rgba(0,0,0,0.87)',
307
- primaryTint: 'rgba(144,202,249,0.16)', focus: '#90CAF9', cbMain: 'rgba(255,255,255,0.23)', cbError: '#F44336', st,
308
- series: ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'],
309
- autofillBg: '#E8F0FE', autofillInk: '#000000', scrim: 'rgba(0,0,0,.5)', overlayShadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14)',
310
- };
311
- }
312
-
313
- // ---------- render ----------
314
- const tpl = document.getElementById('tpl-screen');
315
- function buildScreen(t) {
316
- const el = document.createElement('div');
317
- el.className = 'screen';
318
- el.appendChild(tpl.content.cloneNode(true));
319
- const set = (k, v) => el.style.setProperty(k, v);
320
- set('--font', t.font); set('--font-head', t.fontHead); set('--fs-h', t.fsH); set('--fs-body', t.fsBody);
321
- set('--r-control', t.r[0] + 'px'); set('--r-card', t.r[1] + 'px'); set('--r-chip', t.r[2] + 'px');
322
- for (const k of ['page', 'paper', 'subtle', 'overlay', 'divider', 'ink1', 'ink2', 'ink3', 'primary', 'focus', 'scrim']) set('--' + k, t[k]);
323
- set('--on-primary', t.onPrimary); set('--primary-tint', t.primaryTint); set('--cb-main', t.cbMain); set('--cb-error', t.cbError);
324
- set('--autofill-bg', t.autofillBg); set('--autofill-ink', t.autofillInk); set('--overlay-shadow', t.overlayShadow);
325
- for (const [k, v] of Object.entries(t.st)) { set(`--st-${k}-text`, v.text); set(`--st-${k}-bg`, v.bg); set(`--st-${k}-main`, v.main); }
326
- el.querySelector('[data-brand]').textContent = t.name;
327
- el.querySelector('[data-bars]').innerHTML = CATS.map(([l, v], i) =>
328
- `<div class="barrow"><span class="lbl">${l}</span><span class="track"><span class="fill" style="display:block;width:${v * 2}%;background:${t.series[i]}"></span></span><span class="val">${v}</span></div>`).join('');
329
- return el;
330
- }
331
-
332
- let state = { v: 'S1', a: 'tpl' };
333
- try { const s = JSON.parse(localStorage.getItem('ucm-theme-13-proto-r2') || 'null'); if (s && VARIANTS[s.v] && APPS[s.a]) state = s; } catch (e) { /* storage unavailable */ }
334
-
335
- const scaler = document.getElementById('scaler');
336
- function fit() {
337
- const s = scaler.firstElementChild; if (!s) return;
338
- const k = Math.min(1, scaler.clientWidth / 1280);
339
- s.style.transform = `scale(${k})`;
340
- scaler.style.height = Math.ceil(s.offsetHeight * k) + 'px';
341
- }
342
-
343
- function row(label, fg, bg, min, note) {
344
- const r = ratio(fg, bg); const ok = r >= min;
345
- return `<tr><td>${label}${note ? ' <span class="muted">' + note + '</span>' : ''}</td><td><span class="sw" style="background:${fg}"></span>${fg}</td><td><span class="sw" style="background:${bg}"></span>${bg}</td><td>${r.toFixed(2)} : 1</td><td>${min} : 1</td><td class="${ok ? 'pass' : 'fail'}">${ok ? 'besteht' : 'zu schwach'}</td></tr>`;
346
- }
347
-
348
- function render() {
349
- const d = darkTokens(state.v, state.a);
350
- scaler.replaceChildren(buildScreen(d));
351
- document.getElementById('f-dark').replaceChildren(buildScreen(d));
352
- for (const k of ['S1', 'S2', 'S3']) document.getElementById('f-' + k.toLowerCase()).replaceChildren(buildScreen(darkTokens(k, state.a)));
353
- document.getElementById('f-light').replaceChildren(buildScreen(lightTokens(state.a)));
354
- document.getElementById('f-mui').replaceChildren(buildScreen(muiTokens(state.a)));
355
- const vlabel = APPS[state.a].brand ? 'Marke webshop-guenter (die Stufen gelten hier nicht, die Marke setzt ihre Flächen selbst)' : VARIANTS[state.v].label;
356
- document.getElementById('lbl-1280').textContent = `1280 px · ${vlabel} · ${APPS[state.a].name}`;
357
- document.getElementById('lbl-d375').textContent = `375 px · ${vlabel}`;
358
- for (const b of document.querySelectorAll('[data-v]')) b.setAttribute('aria-pressed', String(b.dataset.v === state.v));
359
- for (const b of document.querySelectorAll('[data-a]')) b.setAttribute('aria-pressed', String(b.dataset.a === state.a));
360
-
361
- const rows = [];
362
- // Surface steps: no WCAG threshold applies; the number shows how far each surface stands off.
363
- const step = (label, fg, bg) => `<tr><td>${label} <span class="muted">(Helligkeitsabstand)</span></td><td><span class="sw" style="background:${fg}"></span>${fg}</td><td><span class="sw" style="background:${bg}"></span>${bg}</td><td>${ratio(fg, bg).toFixed(2)} : 1</td><td>–</td><td></td></tr>`;
364
- rows.push(step('Karte gegen Seite', d.paper, d.page));
365
- rows.push(step('Dialog gegen Karte', d.overlay, d.paper));
366
- if (!d.divider.startsWith('rgba')) rows.push(step('Rahmen gegen Karte', d.divider, d.paper));
367
- rows.push(row('Text 1 auf Seite', d.ink1, d.page, 4.5));
368
- rows.push(row('Text 2 auf Karte', d.ink2, d.paper, 4.5));
369
- rows.push(row('Text 3 auf Karte', d.ink3, d.paper, 3, '(Hilfstext, Achse)'));
370
- rows.push(row('Primär auf Seite', d.primary, d.page, 4.5, APPS[state.a].brand ? '(Marke)' : `(abgeleitet aus ${d.base})`));
371
- rows.push(row('Text auf Primär-Button', d.onPrimary, d.primary, 4.5));
372
- rows.push(row('Fokusring auf Karte', d.focus, d.paper, 3));
373
- rows.push(row('Feldrahmen auf Karte', d.cbMain, d.paper, 3));
374
- rows.push(row('Feldrahmen Fehler auf Karte', d.cbError, d.paper, 3));
375
- for (const [k, v] of Object.entries(d.st)) rows.push(row(`Status ${k}: Text auf Grund`, v.text, v.bg, 4.5, (v.invented ? '(erfunden) ' : '') + (v.moved ? '(vom Netz aufgehellt)' : '')));
376
- d.series.forEach((c, i) => rows.push(row(`Chart-Farbe ${i + 1} auf Karte`, c, d.paper, 3, c !== SERIES[i] ? `(aus ${SERIES[i]})` : '')));
377
- document.querySelector('#ct tbody').innerHTML = rows.join('');
378
- requestAnimationFrame(fit);
379
- try { localStorage.setItem('ucm-theme-13-proto-r2', JSON.stringify(state)); } catch (e) { /* storage unavailable */ }
380
- }
381
-
382
- document.getElementById('g-variant').addEventListener('click', (e) => { const b = e.target.closest('[data-v]'); if (b) { state.v = b.dataset.v; render(); } });
383
- document.getElementById('g-app').addEventListener('click', (e) => { const b = e.target.closest('[data-a]'); if (b) { state.a = b.dataset.a; render(); } });
384
- if ('ResizeObserver' in window) new ResizeObserver(fit).observe(scaler); else window.addEventListener('resize', fit);
385
- if (document.fonts && document.fonts.ready) document.fonts.ready.then(fit);
386
- render();
387
- })();
388
- </script>
389
- </body>
390
- </html>