Skip to content

Commit

Permalink
Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Thunear
Thunear committed Oct 15, 2024
1 parent b65a285 commit 0a7f3a1
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 74 deletions.
101 changes: 29 additions & 72 deletions apps/theme/app/slik-bruker-du-verktoyet/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,86 +14,43 @@ export default function Home() {
Slik bruker du verktøyet
</Heading>
<Paragraph className={classes.ingress}>
Her vil du lære hvordan du bruke temabyggeren til å bygge ditt
eget tema. Du vil også finne anbefalinger fra designsystemet på
fargevalg og informasjon rundt feilmeldinger som dukker opp i
verktøyet.
Her vil du lære hvordan du bruker temabyggeren til å skape ditt
eget tema. I tillegg får du anbefalinger fra designsystemet om
fargevalg, samt veiledning for å håndtere feilmeldinger som kan
oppstå i verktøyet. Mer informasjon vil komme her etterhvert som
temabyggeren blir ferdigstilt.
</Paragraph>

<Heading level={2} size='md'>
Valg av farger
</Heading>
<Paragraph>
Når du skal velge en farge i verktøyet så er det enkelte ting det
er viktig å være klar over.
</Paragraph>

<Heading level={3} size='sm'>
Accent fargen
</Heading>
<Paragraph>
Accent fargen blir brukt som farge for å lyse opp viktige
elementer på en side. Det er derfor viktig at denne fargen er
sterk nok for å skille seg tydelig ut fra bakgrunnen.
Designsystemet anbefaler at fargen man velger har minst 3:1
kontrast mot bakgrunnsfargene for å både støtte WCAG sitt{' '}
<a href='https://www.uutilsynet.no/wcag-standarden/1411-kontrast-ikke-tekstlig-innhold-niva-aa/145'>
1.4.11 Kontrast for ikke-tekstlig innhold{' '}
</a>{' '}
krav og gjøre kontrastfargen som blir generert hvit.
</Paragraph>

<Heading level={3} size='sm'>
Neutral fargen
</Heading>
<Paragraph>
Vi anbefaler minst 3:1 kontrast mot bakgrunnsfargene for neutral
fargen også.{' '}
</Paragraph>

<Heading level={3} size='sm'>
Brand fargene
</Heading>
<Paragraph>
Base fargene for brand fargene blir ikke brukt på viktige
elementer på komponentene som Designsystemet leverer. Det er
derfor litt mer fleksibelt hvilken farge man velger. Om man ønsker
å bruke disse base fargene på viktige elementer på siden så må man
være klar over 3:1 og 4.5:1 kontrastkravene til WCAG for AA.
Når du velger en farge i verktøyet så vil{' '}
<code>Base Default</code> fargen få den samme hex koden som fargen
du har valgt. Om fargen har mindre enn 3:1 kontast mot
bakgrunnsfargene så vil du få en advarsel om dette i verktøyet.
WCAG kravet{' '}
<Link href='https://www.uutilsynet.no/wcag-standarden/1411-kontrast-ikke-tekstlig-innhold-niva-aa/145#:~:text=KORT%20FORTALT%3A%20Ikke%2Dtekstlig%20innhold,som%20ligger%20ved%20siden%20av.'>
1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)
</Link>{' '}
sier at "Ikke-tekstlig innhold skal ha et kontrastforhold på minst
3:1 mot farge(r) som ligger ved siden av". Designsystemet bruker
for eksempel <code>Accent - Base Default</code> fargen på både{' '}
<code>Checkbox</code> og <code>Switch</code> når de er i valgt
tilstand.
</Paragraph>

<Heading level={2} size='md'>
Feilmeldinger og ting å være obs på
</Heading>
<Paragraph>
Temabyggeren lar deg velge 5 farger for å bygge et tema: Accent,
Neutral, Brand 1, Brand 2 og Brand 3. Disse fargekodene vil bli
til <code>Base Default</code> i fargeskalaene. Det er derfor
enkelte ting man må passe på når man velger en farge for at det
skal fungere optimalt i systemet.
</Paragraph>

<Heading level={3} size='sm'>
Fargen har mindre enn 3:1 kontrast mot bakgrunnsfargene
</Heading>

<img src='img/test.png' alt='' />

<Paragraph>
Om du velger en farge som har mindre enn 3:1 kontrast mot
bakgrunnsfargene så vil du få en advarsel om dette i verktøyet.
Det er spesielt viktig at <code>Accent</code> og{' '}
<code>Neutral</code> fargene er innenfor denne kontrastgrensen
fordi <code>Base</code> fargene blir brukt på for eksempel{' '}
<code>Button</code> og <code>Checkbox</code> komponentene. Mindre
kontrast enn dette bryter WCAG kravet:{' '}
<a href='https://www.uutilsynet.no/wcag-standarden/1411-kontrast-ikke-tekstlig-innhold-niva-aa/145'>
1.4.11 Kontrast for ikke-tekstlig innhold{' '}
</a>
. For Brand fargene er dette mindre viktig siden det ikke brukes{' '}
<code>Base</code> farger på viktige elementer på siden. Det er
viktig å være klar over dette om man velger å bruke{' '}
<code>Base</code> fargene til å lage sine egne ting.
<br />
<code>Accent</code> og <code>Neutral</code> fargene må begge ha
minst 3:1 kontrast mot bakgrunnsfargene for å ikke bryte kravet
som er nevnt over. Dette er fordi disse fargene blir brukt inne i
komponentene til Designsystemet. Når det gjelder{' '}
<code>Brand</code> fargene så er ikke <code>Base</code> fargene
brukt på viktige interaktive eller meningsbærende elementer inne i
komponentene. Det er derfor litt mer fleksibilitet i valg av
farger her. Det er fortsatt viktig å tenke på kontrasten mot
bakgrunnsfargene om <code>Base</code> fargene skal brukes på
aktive brukergrensesnittkomponenter eller meningsbærende grafikk.
</Paragraph>
</div>
</Container>
Expand Down
5 changes: 3 additions & 2 deletions apps/theme/components/ColorPicker/ColorPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,9 @@ export const ColorPicker = ({
<div>
{colorError === 'decorative' && (
<div>
Fargen har mindre enn 3:1 kontrast mot bakgrunnsfargene. <br />{' '}
<br /> Les mer om hva dette betyr på <br />
Fargen har mindre enn 3:1 kontrast mot bakgrunnsfargene. I slike
tilfeller er det noen viktige hensyn du bør være klar over.{' '}
<br /> <br /> Les mer om hva dette betyr inne på
<Link href='slik-bruker-du-verktoyet'>
{' '}
Slik bruker du verktøyet
Expand Down

0 comments on commit 0a7f3a1

Please sign in to comment.