helpwave · felixevers · Jan 28, 2026 · Jan 28, 2026 · Jan 28, 2026 · Jan 28, 2026
diff --git a/locales/de.arb → locales/de-DE.arb b/locales/de.arb → locales/de-DE.arb
@@ -1,5 +1,5 @@
 {
-  "@@locale": "de",
+  "@@locale": "de-DE",
   "helpwaveId": "helpwave id",
   "@helpwaveId": {
     "description": "Titel für helpwave id Badge"

diff --git a/locales/en.arb → locales/en-US.arb b/locales/en.arb → locales/en-US.arb
@@ -1,5 +1,5 @@
 {
-  "@@locale": "en",
+  "@@locale": "en-US",
   "helpwaveId": "helpwave id",
   "@helpwaveId": {
     "description": "Title for helpwave id badge"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "id.helpwave.de",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "repository": {
     "type": "git",
     "url": "git://github.com/helpwave/id.helpwave.de.git"

diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
@@ -5,7 +5,7 @@
 import type { Translation } from '@helpwave/internationalization'
 import { TranslationGen } from '@helpwave/internationalization'
 
-export const helpwaveIdTranslationLocales = ['de', 'en'] as const
+export const helpwaveIdTranslationLocales = ['de-DE', 'en-US'] as const
 
 export type HelpwaveIdTranslationLocales = typeof helpwaveIdTranslationLocales[number]
 
@@ -78,7 +78,7 @@ export type HelpwaveIdTranslationEntries = {
 }
 
 export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Partial<HelpwaveIdTranslationEntries>> = {
-  'de': {
+  'de-DE': {
     'acceptTerms': `Ich akzeptiere die Allgemeinen Geschäftsbedingungen`,
     'backToApplication': `Zurück zur Anwendung`,
     'backToLogin': `Zurück zur Anmeldung`,
@@ -150,7 +150,7 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
     'x509InfoMessage': `Bitte geben Sie Ihre X.509 Zertifikatsinformationen an`,
     'x509InfoTitle': `X.509 Zertifikatsinformationen`
   },
-  'en': {
+  'en-US': {
     'acceptTerms': `I accept the terms and conditions`,
     'backToApplication': `Back to Application`,
     'backToLogin': `Back to Login`,

diff --git a/src/i18n/useTranslation.ts b/src/i18n/useTranslation.ts
@@ -1,8 +1,4 @@
-import { combineTranslation } from '@helpwave/internationalization'
-import { helpwaveIdTranslation, type HelpwaveIdTranslationLocales } from './translations'
+import { helpwaveIdTranslation } from './translations'
+import { useHightideTranslation } from '@helpwave/hightide'
 
-export function useTranslation(locale?: string) {
-    const lang = (locale ?? 'en') as HelpwaveIdTranslationLocales
-    console.log(locale, lang)
-    return combineTranslation(helpwaveIdTranslation, lang)
-}
+export const useTranslation = () => useHightideTranslation(helpwaveIdTranslation)
diff --git a/src/index.css b/src/index.css
@@ -1,21 +1,9 @@
 @import "tailwindcss";
-
-:root {
-    --hw-color-secondary-50: #f9fafb;
-    --hw-color-secondary-100: #f3f4f6;
-    --hw-color-secondary-200: #e5e7eb;
-    --hw-color-secondary-300: #d1d5db;
-    --hw-color-secondary-400: #9ca3af;
-    --hw-color-secondary-500: #6b7280;
-    --hw-color-secondary-600: #4b5563;
-    --hw-color-secondary-700: #374151;
-    --hw-color-secondary-800: #1f2937;
-    --hw-color-secondary-900: #111827;
-}
+@import "@helpwave/hightide/style/uncompiled/globals.css";
+@source "./node_modules/@helpwave/hightide";
 
 @layer base {
-    body {
-        min-height: 100vh;
-        background-color: var(--hw-color-background) !important;
+    html, body, main {
+        @apply bg-background text-on-background;
     }
 }
diff --git a/src/login/components/Branding.tsx b/src/login/components/Branding.tsx
@@ -4,9 +4,9 @@ export function Branding() {
     return (
         <div className="flex flex-col items-center gap-4 mb-8 sm:gap-3 sm:mb-6">
             <HelpwaveLogo height={64} width={64} />
-            <div className="font-['Space_Grotesk',_'Helvetica_Neue',_Helvetica,_sans-serif] text-2xl font-bold text-black tracking-[-0.5px] sm:text-xl">
+            <div className="font-space text-2xl font-bold tracking-[-0.5px] sm:text-xl">
                 helpwave id
             </div>
         </div>
     )
-}
+}
diff --git a/src/login/components/Footer.tsx b/src/login/components/Footer.tsx
@@ -1,25 +1,18 @@
-import type { KcContext } from '../KcContext'
 import { useTranslation } from '../../i18n/useTranslation'
 
-type FooterProps = {
-    kcContext: KcContext,
-}
-
-export function Footer({ kcContext }: FooterProps) {
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+export function Footer() {
+    const t = useTranslation()
 
     return (
         <div
-            className="text-center text-[13px] mt-8 pt-4 border-t border-[var(--hw-color-neutral-200)] sm:text-xs sm:mt-6 sm:pt-3"
-            style={{ color: 'var(--hw-color-neutral-600)' }}
+            className="text-center text-sm mt-8 pt-4"
         >
             <div className="mb-2">
                 <a
                     href="https://cdn.helpwave.de/imprint.html"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline mx-2 sm:mx-1"
+                    className="mx-2 sm:mx-1"
                     style={{ color: 'var(--hw-color-neutral-600)' }}
                 >
                     {t('imprint')}
@@ -29,12 +22,12 @@ export function Footer({ kcContext }: FooterProps) {
                     href="https://cdn.helpwave.de/privacy.html"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline mx-2 sm:mx-1"
+                    className="mx-2 sm:mx-1"
                     style={{ color: 'var(--hw-color-neutral-600)' }}
                 >
                     {t('privacy')}
                 </a>
             </div>
         </div>
     )
-}
+}
diff --git a/src/login/components/LanguageSwitcher.tsx b/src/login/components/LanguageSwitcher.tsx
@@ -20,7 +20,7 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
         <>
             <Button
                 type="button"
-                color="secondary"
+                color="neutral"
                 onClick={() => setIsOpen(true)}
                 style={{ padding: '0.5rem', minWidth: 'auto' }}
                 aria-label="Change language"
@@ -35,7 +35,7 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
                     <Button
                         key={lang.languageTag}
                         type="button"
-                        color={kcContext.locale?.currentLanguageTag === lang.languageTag ? 'primary' : 'secondary'}
+                        color={kcContext.locale?.currentLanguageTag === lang.languageTag ? 'primary' : 'neutral'}
                         onClick={() => {
                             handleLanguageChange(lang.languageTag)
                             setIsOpen(false)
@@ -47,4 +47,4 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
             </LanguageDialog>
         </>
     )
-}
+}
diff --git a/src/login/components/PageLayout.tsx b/src/login/components/PageLayout.tsx
@@ -18,10 +18,6 @@ export function PageLayout({ kcContext, children }: PageLayoutProps) {
             <style>{hideKeycloakStyles}</style>
             <div
                 className="flex flex-col min-h-screen p-4 relative"
-                style={{
-                    backgroundColor:
-                        'var(--hw-color-background, var(--hw-color-neutral-0, #ffffff))'
-                }}
             >
                 <div className="absolute top-4 right-4 flex gap-2 z-[1000] sm:top-2 sm:right-2 sm:gap-1">
                     <ThemeSwitcher />
@@ -37,8 +33,8 @@ export function PageLayout({ kcContext, children }: PageLayoutProps) {
                     </div>
                 </div>
 
-                <Footer kcContext={kcContext} />
+                <Footer />
             </div>
         </>
     )
-}
+}
diff --git a/src/login/components/ThemeSwitcher.tsx b/src/login/components/ThemeSwitcher.tsx
@@ -9,7 +9,7 @@ export function ThemeSwitcher() {
         <>
             <Button
                 type="button"
-                color="secondary"
+                color="neutral"
                 onClick={() => setIsOpen(true)}
                 style={{ padding: '0.5rem', minWidth: 'auto' }}
                 aria-label="Change theme"

diff --git a/src/login/pages/Code.tsx b/src/login/pages/Code.tsx
@@ -12,8 +12,7 @@ type CodeProps = {
 
 export default function Code({ kcContext }: CodeProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [code, setCode] = useState('')
 
     const codeError = kcContext.messagesPerField?.existsError('code')

diff --git a/src/login/pages/DeleteAccountConfirm.tsx b/src/login/pages/DeleteAccountConfirm.tsx
@@ -11,8 +11,7 @@ type DeleteAccountConfirmProps = {
 
 export default function DeleteAccountConfirm({ kcContext }: DeleteAccountConfirmProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -30,7 +29,7 @@ export default function DeleteAccountConfirm({ kcContext }: DeleteAccountConfirm
                         <Button type="submit" name="submitAction" value="Delete Account" color="primary">
                             {t('doDeleteAccount')}
                         </Button>
-                        <Button type="submit" name="submitAction" value="Cancel" color="secondary">
+                        <Button type="submit" name="submitAction" value="Cancel" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>

diff --git a/src/login/pages/DeleteCredential.tsx b/src/login/pages/DeleteCredential.tsx
@@ -11,8 +11,7 @@ type DeleteCredentialProps = {
 
 export default function DeleteCredential({ kcContext }: DeleteCredentialProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -30,7 +29,7 @@ export default function DeleteCredential({ kcContext }: DeleteCredentialProps) {
                         <Button type="submit" name="submitAction" value="Delete" color="primary">
                             {t('doDelete')}
                         </Button>
-                        <Button type="submit" name="submitAction" value="Cancel" color="secondary">
+                        <Button type="submit" name="submitAction" value="Cancel" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>

diff --git a/src/login/pages/Error.tsx b/src/login/pages/Error.tsx
@@ -12,8 +12,7 @@ type ErrorProps = {
 
 export default function Error({ kcContext }: ErrorProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -53,7 +52,7 @@ export default function Error({ kcContext }: ErrorProps) {
                     {kcContext.url.loginUrl && (
                         <Button
                             type="button"
-                            color="secondary"
+                            color="neutral"
                             onClick={() => {
                                 window.location.href = kcContext.url.loginUrl
                             }}

diff --git a/src/login/pages/ForgotPassword.tsx b/src/login/pages/ForgotPassword.tsx
@@ -13,8 +13,7 @@ type ForgotPasswordProps = {
 
 export default function ForgotPassword({ kcContext }: ForgotPasswordProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [username, setUsername] = useState(kcContext.auth?.attemptedUsername ?? '')
 
     const usernameError = kcContext.messagesPerField?.existsError('username')
@@ -94,7 +93,7 @@ export default function ForgotPassword({ kcContext }: ForgotPasswordProps) {
 
                         <Button
                             type="button"
-                            color="secondary"
+                            color="neutral"
                             onClick={() => {
                                 window.location.href = kcContext.url.loginUrl
                             }}

diff --git a/src/login/pages/FrontchannelLogout.tsx b/src/login/pages/FrontchannelLogout.tsx
@@ -12,8 +12,7 @@ type FrontchannelLogoutProps = {
 
 export default function FrontchannelLogout({ kcContext }: FrontchannelLogoutProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     useEffect(() => {
         const form = document.getElementById('kc-frontchannel-logout-form') as HTMLFormElement

diff --git a/src/login/pages/IdpReviewUserProfile.tsx b/src/login/pages/IdpReviewUserProfile.tsx
@@ -12,8 +12,7 @@ type IdpReviewUserProfileProps = {
 
 export default function IdpReviewUserProfile({ kcContext }: IdpReviewUserProfileProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     const profile = kcContext.profile
     const attributes = profile?.attributesByName ?? {}

diff --git a/src/login/pages/Info.tsx b/src/login/pages/Info.tsx
@@ -12,8 +12,7 @@ type InfoProps = {
 
 export default function Info({ kcContext }: InfoProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template

diff --git a/src/login/pages/LinkIdpAction.tsx b/src/login/pages/LinkIdpAction.tsx
@@ -12,8 +12,7 @@ type LinkIdpActionProps = {
 
 export default function LinkIdpAction({ kcContext }: LinkIdpActionProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     useEffect(() => {
         const form = document.getElementById('kc-link-idp-form') as HTMLFormElement

diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
@@ -12,8 +12,7 @@ type LoginProps = {
 
 export default function Login({ kcContext }: LoginProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [username, setUsername] = useState(kcContext.login?.username ?? '')
     const [password, setPassword] = useState('')
     const [rememberMe, setRememberMe] = useState(false)
@@ -140,7 +139,7 @@ export default function Login({ kcContext }: LoginProps) {
                         {kcContext.realm?.resetPasswordAllowed && (
                             <Button
                                 type="button"
-                                color="secondary"
+                                color="neutral"
                                 onClick={() => {
                                     window.location.href = kcContext.url.loginResetCredentialsUrl
                                 }}
@@ -152,7 +151,7 @@ export default function Login({ kcContext }: LoginProps) {
                         {kcContext.realm?.registrationAllowed && (
                             <Button
                                 type="button"
-                                color="secondary"
+                                color="neutral"
                                 onClick={() => {
                                     window.location.href = kcContext.url.registrationUrl
                                 }}
@@ -170,7 +169,7 @@ export default function Login({ kcContext }: LoginProps) {
                             <Button
                                 key={provider.alias}
                                 type="button"
-                                color="secondary"
+                                color="neutral"
                                 onClick={() => {
                                     window.location.href = provider.loginUrl
                                 }}

diff --git a/src/login/pages/LoginConfigTotp.tsx b/src/login/pages/LoginConfigTotp.tsx
@@ -12,8 +12,7 @@ type LoginConfigTotpProps = {
 
 export default function LoginConfigTotp({ kcContext }: LoginConfigTotpProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [totp, setTotp] = useState('')
 
     const totpError = kcContext.messagesPerField?.existsError('totp')

diff --git a/src/login/pages/LoginIdpLinkConfirm.tsx b/src/login/pages/LoginIdpLinkConfirm.tsx
@@ -11,8 +11,7 @@ type LoginIdpLinkConfirmProps = {
 
 export default function LoginIdpLinkConfirm({ kcContext }: LoginIdpLinkConfirmProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -30,7 +29,7 @@ export default function LoginIdpLinkConfirm({ kcContext }: LoginIdpLinkConfirmPr
                         <Button type="submit" name="submitAction" value="Link" color="primary">
                             {t('doLink')}
                         </Button>
-                        <Button type="submit" name="submitAction" value="Cancel" color="secondary">
+                        <Button type="submit" name="submitAction" value="Cancel" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>