Skip to content

Commit 3f060f6

Browse files
ThunearThunear
committed
Some fixes
1 parent 392e607 commit 3f060f6

File tree

5 files changed

+82
-47
lines changed

5 files changed

+82
-47
lines changed

‎apps/theme/app/globals.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ code {
4343
display: flex;
4444
flex-direction: column;
4545
gap: 12px;
46-
width: 390px;
46+
width: 400px;
4747
padding: 24px;
4848
border-right: 1px solid var(--ds-color-neutral-border-subtle);
4949
position: relative;
@@ -54,7 +54,7 @@ code {
5454
grid-template-columns: repeat(1, 1fr);
5555
grid-auto-rows: min-content;
5656
width: 100%;
57-
gap: 16px;
57+
gap: 12px;
5858
padding: 28px;
5959
background-color: var(--ds-color-neutral-background-subtle);
6060
border-radius: 0 8px 8px 0;

‎apps/theme/components/ColorContrasts/ColorContrasts.module.css‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,20 @@
2828
.tagGroup {
2929
display: inline-flex;
3030
flex-direction: column;
31-
gap: 8px;
31+
gap: 9px;
3232
align-items: flex-start;
33-
margin-top: 8px;
33+
border-top: 1px solid var(--ds-color-neutral-border-subtle);
34+
margin-left: -24px;
35+
width: calc(100% + 48px);
36+
padding: 20px 24px;
37+
}
38+
39+
.tagGroups {
40+
margin-top: 12px;
41+
}
42+
43+
.tagGroup:last-child {
44+
border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
3445
}
3546

3647
.tagGroup .tag {
@@ -128,3 +139,7 @@
128139
.select {
129140
width: 25%;
130141
}
142+
143+
.desc {
144+
width: 90%;
145+
}

‎apps/theme/components/ColorContrasts/ColorContrasts.tsx‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ export const ColorContrasts = () => {
2727
const [selectedColor, setSelectedColor] = useState('');
2828
const [selectedBaseColor, setSelectedBaseColor] = useState('');
2929

30-
const indexBaseOne = [9, 10, 11];
31-
const indexBaseTwo = [14, 15];
30+
const indexBaseOne = [0, 1, 2, 3, 14, 15];
31+
const indexBaseTwo = [9, 10, 11];
3232
const [reducedBaseLight, setReducedBaseLight] = useState({
3333
themeRange1: theme.light.filter((color) =>
3434
indexBaseOne.includes(color.number),
@@ -127,49 +127,54 @@ export const ColorContrasts = () => {
127127
return (
128128
<div className='panelContainer'>
129129
<div className='panelLeft'>
130-
<Heading data-size='xs'> Se kontraster</Heading>
130+
<Heading data-size='xs'>Kontraster mellom farger</Heading>
131131
<Paragraph data-size='sm'>
132-
Her ser du kontrastene mellom de ulike stegene i fargeskalaene dine.
132+
Her vises kontrastene mellom de ulike trinnene i fargeskalaene, samt
133+
om fargene oppfyller WCAG-kravene.
133134
</Paragraph>
134-
<Heading data-size='2xs' className={classes.subHeading}>
135-
Tagger og betydning
136-
</Heading>
137-
<div className={classes.tagGroup}>
138-
<div className={cl(classes.tag, classes.AAA)}>AAA</div>
139-
<Paragraph data-size='sm'>
140-
Tekst og bakgrunn må ha minst 7:1 kontrast for å dekke WCAG AAA
141-
kravet.
142-
</Paragraph>
143-
</div>
144-
<div className={classes.tagGroup}>
145-
<div className={cl(classes.tag, classes.AA)}>AA</div>
146-
<Paragraph data-size='sm'>
147-
Tekst og bakgrunn må ha minst 4,5:1 kontrast for å dekke WCAG AA
148-
kravet.
149-
</Paragraph>
150-
</div>
151-
<div className={classes.tagGroup}>
152-
<div className={cl(classes.tag, classes.AA18)}>AA18</div>
153-
<Paragraph data-size='sm'>
154-
Tekst og bakgrunn må ha minst 3:1 kontrast og ha en font på 18px
155-
eller mer for å dekke WCAG AA kravet.
156-
</Paragraph>
157-
</div>
158-
<div className={classes.tagGroup}>
159-
<div className={cl(classes.tag, classes.FAIL)}>FAIL</div>
160-
<Paragraph data-size='sm'>
161-
Dekker ingen kontrastkrav i WCAG og må brukes kun dekorativt.
162-
</Paragraph>
135+
136+
<div className={classes.tagGroups}>
137+
<div className={classes.tagGroup}>
138+
<div className={cl(classes.tag, classes.AAA)}>AAA</div>
139+
<Paragraph data-size='sm'>
140+
Tekst og bakgrunn må ha en kontrast på minst 7:1 for å oppfylle
141+
WCAG AAA-kravet.
142+
</Paragraph>
143+
</div>
144+
<div className={classes.tagGroup}>
145+
<div className={cl(classes.tag, classes.AA)}>AA</div>
146+
<Paragraph data-size='sm'>
147+
Tekst og bakgrunn må ha en kontrast på minst 4.5:1 for å oppfylle
148+
WCAG AA-kravet.
149+
</Paragraph>
150+
</div>
151+
<div className={classes.tagGroup}>
152+
<div className={cl(classes.tag, classes.AA18)}>AA18</div>
153+
<Paragraph data-size='sm'>
154+
Tekst og bakgrunn må ha en kontrast på minst 3:1 og en
155+
skriftstørrelse på 18 px eller større for å oppfylle WCAG
156+
AA-kravet.
157+
</Paragraph>
158+
</div>
159+
<div className={classes.tagGroup}>
160+
<div className={cl(classes.tag, classes.FAIL)}>FAIL</div>
161+
<Paragraph data-size='sm'>
162+
Oppfyller ingen kontrastkrav i WCAG og bør kun brukes til
163+
dekorative formål.
164+
</Paragraph>
165+
</div>
163166
</div>
164167
</div>
165168
<div className='panelRight'>
166-
<Heading data-size='xs'>
169+
<Heading data-size='2xs'>
167170
Text og Border mot Background og Surface
168171
</Heading>
169-
<Paragraph data-size='sm'>
170-
Når du bytter mellom fargeskalaene dine så vil du se at kontrastene
171-
mellom fargene i seksjonen under er nesten helt like. Dette betyr at
172-
du trenger bare lære deg disse reglene en gang.
172+
<Paragraph data-size='sm' className={classes.desc}>
173+
Når du bytter mellom fargeskalaene, vil du se at kontrastene mellom
174+
fargene i seksjonen nedenfor er nesten identiske. Dette gjør at du kun
175+
trenger å vurdere kontrastene for én fargeskala for å forstå hvordan
176+
alle fungerer. Siden kontrastene er konsistente, kan du også kombinere
177+
ulike farger på tvers av skalaene.
173178
</Paragraph>
174179
<Field className={classes.fieldGroup}>
175180
<Select
@@ -204,8 +209,15 @@ export const ColorContrasts = () => {
204209
</tr>
205210
))}
206211
</table>
207-
<Heading data-size='xs'>Base fargene</Heading>
208-
<Paragraph data-size='sm'>Base fargene er litt spesielle</Paragraph>
212+
<Heading data-size='2xs'>Base fargene</Heading>
213+
<Paragraph data-size='sm' className={classes.desc}>
214+
Fargene som blir valgt i verktøyet får tokenet Base Default i hver
215+
fargeskala. Dette betyr at det er viktig å velge en farge som har over
216+
3:1 kontrast mot overflatefarger om den skal brukes som en viktig,
217+
meningsbærende farge. Verktøyet lager også to kontrastfarger som trygt
218+
kan brukes oppå base fargene. Disse kontrastfargene blir enten lyse
219+
eller mørke avhengig av base fargen.
220+
</Paragraph>
209221
<Field className={classes.fieldGroup}>
210222
<Select
211223
data-size='sm'

‎apps/theme/components/ColorPreview/ColorPreview.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,13 @@ export const ColorPreview = () => {
142142
<div className='panelLeft'>
143143
<Heading data-size='xs'>Se fargene dine i bruk</Heading>
144144
<Paragraph data-size='sm'>
145-
TODO: Litt dokumentasjon om fargesystemet, kontraster og bruk av
146-
farger
145+
Hver farge som blir valgt med verktøyet får sitt eget kort i seksjonen
146+
til høyre slik at du kan se hvordan fargene harmonerer sammen.
147+
</Paragraph>
148+
<Paragraph data-size='sm'>
149+
Merk at kontrastfargen inne i knappen endrer seg fra hvit til svart,
150+
avhengig av om den valgte fargen er lys eller mørk for å oppnå best
151+
mulig kontrast.
147152
</Paragraph>
148153
<div className='panelBottom'>
149154
<div className={classes.label}>Visning:</div>

‎apps/theme/components/ColorTokens/ColorTokens.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ export const ColorTokens = () => {
66
<div className='panelContainer'>
77
<div className='panelLeft'>
88
<Heading data-size='xs'>Se fargetokens</Heading>
9-
<Paragraph data-size='sm'>Todo</Paragraph>
9+
<Paragraph data-size='sm'>
10+
Her ser du hvilke tokens som er brukt for å lage kortene i seksjonen
11+
over.
12+
</Paragraph>
1013
</div>
1114
<div className={cl('panelRight', classes.right)}>
1215
<img className={classes.img} src='img/color-tokens.png' alt='' />

0 commit comments

Comments
 (0)