@micha.bigler/ui-core-micha 3.14.3 → 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 (367) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/README.md +7 -0
  3. package/dist/auth/UserMenu.js +1 -1
  4. package/dist/auth/apiClient.js +7 -6
  5. package/dist/chat/ChatList.js +1 -1
  6. package/dist/chat/ChatThread.js +2 -1
  7. package/dist/chat/ChatWorkspace.js +1 -1
  8. package/dist/chat/ModelPicker.js +2 -5
  9. package/dist/chat/kitSxRegistry.js +9 -0
  10. package/dist/chat/useChatSocket.js +1 -1
  11. package/dist/components/LoginForm.js +1 -1
  12. package/dist/components/SecurityComponent.js +1 -1
  13. package/dist/components/UserListComponent.js +2 -8
  14. package/dist/components/charts/ChartFrame.js +1 -1
  15. package/dist/components/charts/ScatterChart.js +2 -1
  16. package/dist/components/charts/kitSxRegistry.js +6 -0
  17. package/dist/entries/charts.js +6 -0
  18. package/dist/entries/chat.js +8 -0
  19. package/dist/entries/markdown.js +1 -0
  20. package/dist/index.js +0 -14
  21. package/dist/layout/SectionNav.js +1 -1
  22. package/dist/messaging/AttachmentList.js +2 -2
  23. package/dist/messaging/Composer.js +2 -1
  24. package/dist/messaging/ConversationLaunchers.js +1 -4
  25. package/dist/messaging/ConversationList.js +1 -1
  26. package/dist/messaging/DirectMessageLauncher.js +1 -1
  27. package/dist/messaging/MessagingProvider.js +0 -0
  28. package/dist/messaging/PollCard.js +7 -5
  29. package/dist/messaging/ReadTicks.js +2 -2
  30. package/dist/messaging/Thread.js +5 -3
  31. package/dist/notifications/NotificationBell.js +4 -7
  32. package/dist/notifications/NotificationSettings.js +1 -1
  33. package/dist/onboarding/OnboardingProvider.js +3 -6
  34. package/dist/pages/AccountPage.js +1 -2
  35. package/dist/pages/LoginPage.js +2 -3
  36. package/dist/pages/PasswordChangePage.js +2 -3
  37. package/dist/pages/PasswordInvitePage.js +2 -3
  38. package/dist/pages/PasswordResetRequestPage.js +2 -3
  39. package/dist/pages/SignUpPage.js +2 -3
  40. package/dist/pages/SignupConfirmPage.js +2 -3
  41. package/dist/theme/createAppTheme.js +5 -4
  42. package/dist/theme/kitSxEntry.js +11 -0
  43. package/dist/theme/kitSxRegistry.js +2 -15
  44. package/dist/theme/themeCompleteness.js +3 -12
  45. package/dist/utils/auth-errors.js +4 -3
  46. package/package.json +41 -16
  47. package/.github/workflows/publish.yml +0 -126
  48. package/DESIGN.md +0 -60
  49. package/WORK_ORDERS.md +0 -148
  50. package/dev/entries.jsx +0 -721
  51. package/dev/fixtures.js +0 -26
  52. package/dev/main.jsx +0 -75
  53. package/dev/mockTransport.jsx +0 -128
  54. package/docs/CHART-LAYOUT.md +0 -157
  55. package/docs/DARK-TOKENS.md +0 -140
  56. package/docs/TYPE-SCALE.md +0 -111
  57. package/docs/messaging-deviations.md +0 -118
  58. package/index.html +0 -12
  59. package/renovate.json +0 -10
  60. package/scripts/chart-api-census.mjs +0 -415
  61. package/src/auth/AuthContext.jsx +0 -158
  62. package/src/auth/ReauthModal.jsx +0 -82
  63. package/src/auth/UserMenu.jsx +0 -121
  64. package/src/auth/apiClient.jsx +0 -232
  65. package/src/auth/authApi.jsx +0 -539
  66. package/src/auth/authConfig.jsx +0 -34
  67. package/src/auth/reauth.js +0 -47
  68. package/src/chat/ChatComposer.jsx +0 -36
  69. package/src/chat/ChatList.jsx +0 -87
  70. package/src/chat/ChatThread.jsx +0 -128
  71. package/src/chat/ChatWorkspace.jsx +0 -244
  72. package/src/chat/MarkdownReply.jsx +0 -22
  73. package/src/chat/ModelPicker.jsx +0 -85
  74. package/src/chat/api.js +0 -18
  75. package/src/chat/useChatSocket.js +0 -32
  76. package/src/chat/wire.js +0 -7
  77. package/src/components/AccessCodeManager.jsx +0 -288
  78. package/src/components/AccessCodeSingleUseToggle.jsx +0 -92
  79. package/src/components/AllowedEmailDomainsManager.jsx +0 -92
  80. package/src/components/AuthFactorRequirementCard.jsx +0 -95
  81. package/src/components/BulkInviteCsvTab.jsx +0 -198
  82. package/src/components/EmptyState.jsx +0 -38
  83. package/src/components/LoginForm.jsx +0 -159
  84. package/src/components/MFAComponent.jsx +0 -350
  85. package/src/components/MfaLoginComponent.jsx +0 -252
  86. package/src/components/MobileBottomNav.jsx +0 -82
  87. package/src/components/PasskeysComponent.jsx +0 -252
  88. package/src/components/PasswordChangeForm.jsx +0 -87
  89. package/src/components/PasswordResetRequestForm.jsx +0 -43
  90. package/src/components/PasswordSetForm.jsx +0 -97
  91. package/src/components/ProfileComponent.jsx +0 -348
  92. package/src/components/QrSignupManager.jsx +0 -404
  93. package/src/components/QrSignupValidityManager.jsx +0 -106
  94. package/src/components/RegistrationMethodsManager.jsx +0 -150
  95. package/src/components/SecurityComponent.jsx +0 -141
  96. package/src/components/SocialLoginButtons.jsx +0 -83
  97. package/src/components/SoftChip.jsx +0 -93
  98. package/src/components/StatTile.jsx +0 -39
  99. package/src/components/SupportRecoveryRequestsTab.jsx +0 -482
  100. package/src/components/TurnstileWidget.jsx +0 -99
  101. package/src/components/UserInviteComponent.jsx +0 -76
  102. package/src/components/UserListComponent.jsx +0 -618
  103. package/src/components/charts/BarChart.jsx +0 -102
  104. package/src/components/charts/ChartFrame.jsx +0 -214
  105. package/src/components/charts/LineChart.jsx +0 -126
  106. package/src/components/charts/ScatterChart.jsx +0 -299
  107. package/src/components/charts/TimeSeriesChart.jsx +0 -300
  108. package/src/components/charts/chartDefaults.js +0 -644
  109. package/src/components/charts/chartLabels.js +0 -36
  110. package/src/components/charts/exportChart.js +0 -258
  111. package/src/components/charts/formatters.js +0 -39
  112. package/src/components/charts/palette.js +0 -33
  113. package/src/components/charts/yearTickInterval.js +0 -7
  114. package/src/i18n/authTranslations.ts +0 -2651
  115. package/src/i18n/chartsTranslations.ts +0 -91
  116. package/src/i18n/chatTranslations.ts +0 -55
  117. package/src/i18n/messagingTranslations.ts +0 -120
  118. package/src/i18n/notificationsTranslations.ts +0 -32
  119. package/src/i18n/onboardingTranslations.ts +0 -29
  120. package/src/i18n/sectionNavTranslations.ts +0 -20
  121. package/src/i18n/uiCoreTranslations.js +0 -29
  122. package/src/i18n/userMenuTranslations.ts +0 -5
  123. package/src/index.js +0 -158
  124. package/src/layout/PageLayout.jsx +0 -36
  125. package/src/layout/SectionNav.jsx +0 -320
  126. package/src/messaging/AttachmentList.jsx +0 -145
  127. package/src/messaging/Composer.jsx +0 -197
  128. package/src/messaging/ConversationLaunchers.jsx +0 -51
  129. package/src/messaging/ConversationList.jsx +0 -109
  130. package/src/messaging/DirectMessageLauncher.jsx +0 -112
  131. package/src/messaging/MessageBubble.jsx +0 -183
  132. package/src/messaging/MessagingProvider.jsx +0 -0
  133. package/src/messaging/MessagingScopeConfig.jsx +0 -24
  134. package/src/messaging/PollCard.jsx +0 -163
  135. package/src/messaging/ReactionBar.jsx +0 -43
  136. package/src/messaging/ReadTicks.jsx +0 -82
  137. package/src/messaging/Thread.jsx +0 -195
  138. package/src/messaging/api.js +0 -48
  139. package/src/messaging/composerImageCompression.js +0 -35
  140. package/src/messaging/linkifyText.jsx +0 -37
  141. package/src/notifications/NotificationBell.jsx +0 -84
  142. package/src/notifications/NotificationSettings.jsx +0 -330
  143. package/src/notifications/NotificationsProvider.jsx +0 -224
  144. package/src/notifications/PopupSurface.jsx +0 -105
  145. package/src/notifications/api.js +0 -55
  146. package/src/notifications/feedApi.js +0 -18
  147. package/src/notifications/realtime.jsx +0 -138
  148. package/src/notifications/serviceWorker/sw.js +0 -50
  149. package/src/onboarding/OnboardingProvider.jsx +0 -326
  150. package/src/onboarding/OnboardingWizard.jsx +0 -61
  151. package/src/onboarding/WizardDialogShell.jsx +0 -51
  152. package/src/onboarding/api.js +0 -13
  153. package/src/onboarding/stepSelection.js +0 -16
  154. package/src/onboarding/steps/BrowserPushStep.jsx +0 -121
  155. package/src/onboarding/steps/CompleteNameStep.jsx +0 -46
  156. package/src/onboarding/steps/CookieConsentStep.jsx +0 -133
  157. package/src/onboarding/steps/PwaInstallStep.jsx +0 -47
  158. package/src/pages/AccountPage.jsx +0 -394
  159. package/src/pages/LoginPage.jsx +0 -343
  160. package/src/pages/PasswordChangePage.jsx +0 -62
  161. package/src/pages/PasswordInvitePage.jsx +0 -177
  162. package/src/pages/PasswordResetRequestPage.jsx +0 -68
  163. package/src/pages/SignUpPage.jsx +0 -268
  164. package/src/pages/SignupConfirmPage.jsx +0 -155
  165. package/src/testing/checkKitIntegration.js +0 -233
  166. package/src/theme/createAppTheme.js +0 -423
  167. package/src/theme/fonts.js +0 -3
  168. package/src/theme/index.js +0 -21
  169. package/src/theme/kitSxRegistry.js +0 -285
  170. package/src/theme/themeCompleteness.js +0 -1045
  171. package/src/theme/tokens.js +0 -478
  172. package/src/utils/auth-errors.js +0 -76
  173. package/src/utils/authService.js +0 -223
  174. package/src/utils/resolveErrorText.js +0 -28
  175. package/src/utils/webauthn.js +0 -51
  176. package/tests/AccountPage.profileStatements.test.jsx +0 -162
  177. package/tests/AccountPage.test.jsx +0 -200
  178. package/tests/AuthContext.test.jsx +0 -129
  179. package/tests/BarChart.test.jsx +0 -112
  180. package/tests/BrowserPushStep.test.jsx +0 -110
  181. package/tests/ChartFrame.test.jsx +0 -336
  182. package/tests/ConversationList.test.jsx +0 -144
  183. package/tests/CookieConsentStep.test.jsx +0 -69
  184. package/tests/EmptyState.test.jsx +0 -62
  185. package/tests/LineChart.test.jsx +0 -80
  186. package/tests/MessagingProvider.test.jsx +0 -50
  187. package/tests/MobileBottomNav.test.jsx +0 -319
  188. package/tests/NotificationBell.test.jsx +0 -60
  189. package/tests/NotificationSettings.test.jsx +0 -276
  190. package/tests/NotificationsProvider.test.jsx +0 -240
  191. package/tests/OnboardingProvider.test.jsx +0 -294
  192. package/tests/OnboardingWizard.test.jsx +0 -143
  193. package/tests/PasswordChangeForm.test.jsx +0 -70
  194. package/tests/PasswordInvitePage.test.jsx +0 -142
  195. package/tests/PasswordSetForm.test.jsx +0 -70
  196. package/tests/PopupSurface.test.jsx +0 -142
  197. package/tests/ProfileComponent.refresh.test.jsx +0 -194
  198. package/tests/QrSignupManager.registrationContext.test.jsx +0 -106
  199. package/tests/QrSignupManagerInfoBox.test.jsx +0 -49
  200. package/tests/ScatterChart.test.jsx +0 -270
  201. package/tests/SectionNav.test.jsx +0 -363
  202. package/tests/SignUpPage.test.jsx +0 -208
  203. package/tests/SoftChip.test.jsx +0 -105
  204. package/tests/StatTile.test.jsx +0 -57
  205. package/tests/Thread.test.jsx +0 -151
  206. package/tests/TimeSeriesChart.test.jsx +0 -367
  207. package/tests/UserListComponent.test.jsx +0 -192
  208. package/tests/UserMenu.test.jsx +0 -171
  209. package/tests/apiClientLanguage.test.js +0 -33
  210. package/tests/apiClientPublicPaths.test.js +0 -178
  211. package/tests/authApiLogin.test.js +0 -42
  212. package/tests/authApiRegistration.test.js +0 -31
  213. package/tests/authErrorCodeRendering.test.jsx +0 -77
  214. package/tests/authErrors.test.js +0 -74
  215. package/tests/authTranslations.test.js +0 -74
  216. package/tests/chart-api-census.test.js +0 -366
  217. package/tests/chartAxisTickBand.test.jsx +0 -95
  218. package/tests/chartDefaults.test.js +0 -902
  219. package/tests/chartLabels.test.js +0 -50
  220. package/tests/chartsPalette.test.js +0 -99
  221. package/tests/chatApi.test.js +0 -48
  222. package/tests/chatDriverNames.test.jsx +0 -71
  223. package/tests/chatExports.test.js +0 -3
  224. package/tests/chatList.test.jsx +0 -84
  225. package/tests/chatPicker.test.jsx +0 -82
  226. package/tests/chatSocket.test.jsx +0 -26
  227. package/tests/chatThread.test.jsx +0 -116
  228. package/tests/chatTranslations.test.js +0 -47
  229. package/tests/chatWorkspace.test.jsx +0 -234
  230. package/tests/checkKitIntegration.test.jsx +0 -219
  231. package/tests/createAppTheme.test.js +0 -132
  232. package/tests/createAppThemeDark.test.js +0 -127
  233. package/tests/createAppThemeLightGuard.test.js +0 -40
  234. package/tests/createAppThemePageContrast.test.js +0 -108
  235. package/tests/createAppThemeTypography.test.js +0 -53
  236. package/tests/errorCallSiteGuard.test.js +0 -32
  237. package/tests/exportChart.test.js +0 -313
  238. package/tests/feedApi.test.js +0 -46
  239. package/tests/fixtures/light-theme-baseline.json +0 -2234
  240. package/tests/i18nAggregate.test.js +0 -120
  241. package/tests/i18nGermanVariant.test.js +0 -65
  242. package/tests/loginPageErrorResolution.test.jsx +0 -102
  243. package/tests/messagingApi.test.js +0 -32
  244. package/tests/messagingChunk6.test.jsx +0 -116
  245. package/tests/messagingCompactBubble.test.jsx +0 -64
  246. package/tests/messagingComposer.test.jsx +0 -136
  247. package/tests/messagingComposerChunk5.test.jsx +0 -113
  248. package/tests/messagingContractConformance.test.js +0 -69
  249. package/tests/messagingDirectMessageLauncher.test.jsx +0 -151
  250. package/tests/messagingExports.test.js +0 -21
  251. package/tests/messagingInteractions.test.jsx +0 -136
  252. package/tests/messagingLastMessagePreview.test.jsx +0 -93
  253. package/tests/messagingLinkify.test.jsx +0 -51
  254. package/tests/messagingMessageActions.test.jsx +0 -163
  255. package/tests/messagingMsg6.test.jsx +0 -105
  256. package/tests/messagingMsg6f.test.jsx +0 -155
  257. package/tests/messagingMsg6g.test.jsx +0 -166
  258. package/tests/messagingMsg6h.test.jsx +0 -136
  259. package/tests/messagingMsg6i.test.jsx +0 -129
  260. package/tests/messagingPollRendering.test.jsx +0 -142
  261. package/tests/messagingReactionMerge.test.jsx +0 -77
  262. package/tests/messagingReadTicksTooltip.test.jsx +0 -36
  263. package/tests/messagingThreadReceipts.test.jsx +0 -178
  264. package/tests/messagingThreadingQuoting.test.jsx +0 -87
  265. package/tests/messagingUnreadLifecycle.test.jsx +0 -78
  266. package/tests/notificationsApi.test.js +0 -41
  267. package/tests/notificationsExports.test.js +0 -34
  268. package/tests/onboardingDescriptors.test.js +0 -132
  269. package/tests/packageTreeShaking.test.js +0 -126
  270. package/tests/realtime.test.jsx +0 -219
  271. package/tests/resolveErrorText.test.js +0 -72
  272. package/tests/stepSelection.test.js +0 -53
  273. package/tests/themeCompleteness.test.js +0 -626
  274. package/tests/timeSeriesLegend.test.js +0 -99
  275. package/tests/userScreenTranslations.test.jsx +0 -218
  276. package/tsconfig.build.json +0 -18
  277. package/vite.config.mjs +0 -6
  278. package/work-orders/AUTH-1.md +0 -74
  279. package/work-orders/AUTH-2.md +0 -74
  280. package/work-orders/AUTH-4.md +0 -183
  281. package/work-orders/AUTH-5.md +0 -154
  282. package/work-orders/AUTH-7.md +0 -181
  283. package/work-orders/AUTH-8.md +0 -184
  284. package/work-orders/CHART-1.md +0 -285
  285. package/work-orders/CHART-2.md +0 -222
  286. package/work-orders/CHART-3.md +0 -163
  287. package/work-orders/CHART-4.md +0 -203
  288. package/work-orders/CHART-5.md +0 -226
  289. package/work-orders/CHART-6.md +0 -428
  290. package/work-orders/CHART-7.md +0 -175
  291. package/work-orders/DX-1.md +0 -169
  292. package/work-orders/DX-2.md +0 -188
  293. package/work-orders/DX-3.md +0 -195
  294. package/work-orders/I18N-1.md +0 -254
  295. package/work-orders/I18N-3.md +0 -207
  296. package/work-orders/MSG-3.md +0 -375
  297. package/work-orders/MSG-3b.md +0 -1002
  298. package/work-orders/MSG-3c.md +0 -378
  299. package/work-orders/MSG-3d.md +0 -268
  300. package/work-orders/MSG-3e.md +0 -164
  301. package/work-orders/MSG-3f.md +0 -391
  302. package/work-orders/MSG-6e.md +0 -308
  303. package/work-orders/MSG-6f.md +0 -214
  304. package/work-orders/MSG-6g.md +0 -244
  305. package/work-orders/MSG-6h.md +0 -238
  306. package/work-orders/MSG-6i.md +0 -271
  307. package/work-orders/MSG-6j.md +0 -117
  308. package/work-orders/NOTIF-12.md +0 -214
  309. package/work-orders/NOTIF-13.md +0 -142
  310. package/work-orders/NOTIF-14.md +0 -151
  311. package/work-orders/PRIM-1.md +0 -177
  312. package/work-orders/SHELL-1.md +0 -255
  313. package/work-orders/SHELL-2.md +0 -197
  314. package/work-orders/SHELL-3.md +0 -359
  315. package/work-orders/SHELL-4.md +0 -351
  316. package/work-orders/SHELL-5.md +0 -345
  317. package/work-orders/SHELL-6.md +0 -210
  318. package/work-orders/THEME-1.md +0 -587
  319. package/work-orders/THEME-10.md +0 -303
  320. package/work-orders/THEME-11.md +0 -208
  321. package/work-orders/THEME-2.md +0 -339
  322. package/work-orders/THEME-3.md +0 -210
  323. package/work-orders/THEME-4.md +0 -271
  324. package/work-orders/THEME-5.md +0 -341
  325. package/work-orders/THEME-6.md +0 -247
  326. package/work-orders/THEME-7.md +0 -82
  327. package/work-orders/THEME-8.md +0 -211
  328. package/work-orders/THEME-9.md +0 -194
  329. package/work-orders/UCM-AUTH-10.md +0 -490
  330. package/work-orders/UCM-AUTH-11.md +0 -185
  331. package/work-orders/UCM-AUTH-12.md +0 -98
  332. package/work-orders/UCM-AUTH-13.md +0 -47
  333. package/work-orders/UCM-AUTH-9.md +0 -207
  334. package/work-orders/UCM-CHART-10.md +0 -150
  335. package/work-orders/UCM-CHART-11.md +0 -132
  336. package/work-orders/UCM-CHART-12.md +0 -348
  337. package/work-orders/UCM-CHART-13.md +0 -122
  338. package/work-orders/UCM-CHART-14.md +0 -198
  339. package/work-orders/UCM-CHART-15.md +0 -187
  340. package/work-orders/UCM-CHART-16.md +0 -169
  341. package/work-orders/UCM-CHART-17.md +0 -195
  342. package/work-orders/UCM-CHART-18.md +0 -200
  343. package/work-orders/UCM-CHART-8.md +0 -147
  344. package/work-orders/UCM-CHART-9.md +0 -265
  345. package/work-orders/UCM-CHAT-1.md +0 -190
  346. package/work-orders/UCM-CHAT-2.md +0 -75
  347. package/work-orders/UCM-DEP-1.md +0 -63
  348. package/work-orders/UCM-I18N-4.md +0 -226
  349. package/work-orders/UCM-I18N-5.md +0 -211
  350. package/work-orders/UCM-MSG-20.md +0 -192
  351. package/work-orders/UCM-PRIM-2.md +0 -114
  352. package/work-orders/UCM-SHELL-7.md +0 -134
  353. package/work-orders/UCM-SHELL-8.md +0 -125
  354. package/work-orders/UCM-TEST-1.md +0 -304
  355. package/work-orders/UCM-THEME-13.md +0 -69
  356. package/work-orders/UCM-THEME-14.md +0 -312
  357. package/work-orders/UCM-THEME-15.md +0 -356
  358. package/work-orders/UCM-THEME-16.md +0 -80
  359. package/work-orders/UCM-THEME-17.md +0 -111
  360. package/work-orders/UCM-THEME-18.md +0 -184
  361. package/work-orders/assets/AUTH-4-user-list-card.html +0 -407
  362. package/work-orders/assets/PRIM-1-dashboard-primitives.html +0 -624
  363. package/work-orders/assets/SHELL-2-account-navigation.html +0 -1159
  364. package/work-orders/assets/THEME-1-baseline-reference-sheet.html +0 -1352
  365. package/work-orders/assets/UCM-CHAT-1-ai-chat.html +0 -447
  366. package/work-orders/assets/UCM-THEME-13-dark-prototype.html +0 -390
  367. 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>