diff --git a/apps/themebuilder/app/_components/color-tokens/color-tokens.tsx b/apps/themebuilder/app/_components/color-tokens/color-tokens.tsx
index 057b94a4e2..8cf93335b6 100644
--- a/apps/themebuilder/app/_components/color-tokens/color-tokens.tsx
+++ b/apps/themebuilder/app/_components/color-tokens/color-tokens.tsx
@@ -1,16 +1,15 @@
import { Heading, Paragraph } from '@digdir/designsystemet-react';
import cl from 'clsx/lite';
+import { useTranslation } from 'react-i18next';
import classes from './color-tokens.module.css';
export const ColorTokens = () => {
+ const { t } = useTranslation();
return (
-
Se fargetokens
-
- Her ser du hvilke tokens som er brukt for å lage kortene i seksjonen
- over.
-
+
{t('color-tokens.title')}
+
{t('color-tokens.description')}
diff --git a/apps/themebuilder/app/locales/en.ts b/apps/themebuilder/app/locales/en.ts
index cdd5778512..2c03b944f5 100644
--- a/apps/themebuilder/app/locales/en.ts
+++ b/apps/themebuilder/app/locales/en.ts
@@ -148,6 +148,11 @@ export default {
'set-to': 'Set to',
view: 'view',
},
+ 'color-tokens': {
+ title: 'Color Tokens',
+ description:
+ 'Here you can see which tokens have been used to create the cards in the section above.',
+ },
colorContrasts: {
title: 'Contrasts between colours',
description:
diff --git a/apps/themebuilder/app/locales/no.ts b/apps/themebuilder/app/locales/no.ts
index c8cd745135..37c1627fe6 100644
--- a/apps/themebuilder/app/locales/no.ts
+++ b/apps/themebuilder/app/locales/no.ts
@@ -147,6 +147,11 @@ export default {
'set-to': 'Sett til',
view: 'visning',
},
+ 'color-tokens': {
+ title: 'Fargetokens',
+ description:
+ 'Her ser du hvilke tokens som er brukt for å lage kortene i seksjonen over.',
+ },
colorContrasts: {
title: 'Kontraster mellom farger',
description: