diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx index fc6da3060f..0542fe4696 100644 --- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx +++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx @@ -24,7 +24,11 @@ export const GlobalView = ({ cat }: { cat: string }) => { {sanitizeName(x.name)} - +
diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx index e37e3f366c..62a6247ea6 100644 --- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx +++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx @@ -12,17 +12,23 @@ export const SemanticView = ({ cat }: { cat: string }) => { if (cat.startsWith("semantic-text")) { return ( - {colors.map((x) => { - const ref = getGlobalReference(x.value); - const c = color(x.value); + {colors.map((token) => { + const ref = getGlobalReference(token.value); + const c = color(token.value); const isLight = c.getLuminance() > 0.9; + const sanitizedName = sanitizeName(token.name.replace("text-", "")); + return ( -
+
{
- {sanitizeName(x.name.replace("text-", ""))} + {sanitizedName} - +
{ref ? ( @@ -45,7 +55,7 @@ export const SemanticView = ({ cat }: { cat: string }) => { {sanitizeName(ref.name)} ) : ( - getColorString(x.value) + getColorString(token.value) )}
@@ -58,12 +68,19 @@ export const SemanticView = ({ cat }: { cat: string }) => { if (cat.startsWith("semantic-icon")) { return ( - {colors.map((x) => { - const ref = getGlobalReference(x.value); - const c = color(x.value); + {colors.map((token) => { + const ref = getGlobalReference(token.value); + const c = color(token.value); const isLight = c.getLuminance() > 0.9; + + const sanitizedName = sanitizeName(token.name.replace("icon-", "")); + return ( -
+
{
- {sanitizeName(x.name.replace("icon-", ""))} + {sanitizedName} - +
{ref ? ( @@ -94,7 +115,7 @@ export const SemanticView = ({ cat }: { cat: string }) => { {sanitizeName(ref.name)} ) : ( - getColorString(x.value) + getColorString(token.value) )}
@@ -108,23 +129,33 @@ export const SemanticView = ({ cat }: { cat: string }) => { if (cat.startsWith("semantic-border")) { return ( - {colors.map((x) => { - const ref = getGlobalReference(x.value); + {colors.map((token) => { + const ref = getGlobalReference(token.value); + + const sanitizedName = sanitizeName(token.name.replace("border-", "")); return ( -
+
- {sanitizeName(x.name.replace("border-", ""))} + {sanitizedName} - +
{ref ? ( @@ -135,7 +166,7 @@ export const SemanticView = ({ cat }: { cat: string }) => { {sanitizeName(ref.name)} ) : ( - getColorString(x.value) + getColorString(token.value) )}
@@ -148,21 +179,25 @@ export const SemanticView = ({ cat }: { cat: string }) => { if (cat.startsWith("semantic-data-border")) { return ( - {colors.map((x) => { - const ref = getGlobalReference(x.value); + {colors.map((token) => { + const ref = getGlobalReference(token.value); + + const sanitizedName = sanitizeName( + token.name.replace("surface-", ""), + ); return (
{ { {
- {sanitizeName(x.name.replace("surface-", ""))} + {sanitizedName} - +
{ref ? ( @@ -205,7 +244,7 @@ export const SemanticView = ({ cat }: { cat: string }) => { {sanitizeName(ref.name)} ) : ( - getColorString(x.value) + getColorString(token.value) )}
@@ -218,35 +257,43 @@ export const SemanticView = ({ cat }: { cat: string }) => { if (cat.startsWith("semantic-data-surface")) { return ( - {colors.map((x) => { - const ref = getGlobalReference(x.value); + {colors.map((token) => { + const ref = getGlobalReference(token.value); + + const sanitizedName = sanitizeName( + token.name.replace("surface-", ""), + ); return (
- {sanitizeName(x.name.replace("surface-", ""))} + {sanitizedName} - +
{ref ? ( @@ -257,7 +304,7 @@ export const SemanticView = ({ cat }: { cat: string }) => { {sanitizeName(ref.name)} ) : ( - getColorString(x.value) + getColorString(token.value) )}
@@ -270,14 +317,20 @@ export const SemanticView = ({ cat }: { cat: string }) => { return ( - {colors.map((x) => { - const ref = getGlobalReference(x.value); + {colors.map((token) => { + const ref = getGlobalReference(token.value); + + const sanitizedName = sanitizeName(token.name.replace("surface-", "")); return ( -
+
{
- {sanitizeName(x.name.replace("surface-", ""))} + {sanitizedName} - +
{ref ? ( @@ -300,7 +357,7 @@ export const SemanticView = ({ cat }: { cat: string }) => { {sanitizeName(ref.name)} ) : ( - getColorString(x.value) + getColorString(token.value) )}
diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx index 102e811972..e80ed6587f 100644 --- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx +++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx @@ -22,7 +22,13 @@ export const ShadowView = ({ cat }: { cat: string }) => { {sanitizeName(x.name.replace("shadow-", ""))} - +
{x.value} diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx index 75c800f58c..cfc633df42 100644 --- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx +++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx @@ -20,7 +20,13 @@ export const ShapesView = ({ cat }: { cat: string }) => { {sanitizeName(x.name.replace("border-radius-", ""))} - +
diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx index 4d66631c66..7701d3f167 100644 --- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx +++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx @@ -39,7 +39,13 @@ export const ZindexView = ({ cat }: { cat: string }) => { {sanitizeName(token.name.replace("z-index-", ""))} - +
{token.value} diff --git a/aksel.nav.no/website/components/website-modules/Table.tsx b/aksel.nav.no/website/components/website-modules/Table.tsx index 672358dba7..bd02013b10 100644 --- a/aksel.nav.no/website/components/website-modules/Table.tsx +++ b/aksel.nav.no/website/components/website-modules/Table.tsx @@ -69,7 +69,12 @@ export function AkselTableRow({ ))} {useCopy && ( - + )}