Some fixes

digdir · Nov 18, 2024 · 3f060f6 · 3f060f6
1 parent 392e607
commit 3f060f6
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 47 deletions.
diff --git a/apps/theme/app/globals.css b/apps/theme/app/globals.css
@@ -43,7 +43,7 @@ code {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  width: 390px;
+  width: 400px;
   padding: 24px;
   border-right: 1px solid var(--ds-color-neutral-border-subtle);
   position: relative;
@@ -54,7 +54,7 @@ code {
   grid-template-columns: repeat(1, 1fr);
   grid-auto-rows: min-content;
   width: 100%;
-  gap: 16px;
+  gap: 12px;
   padding: 28px;
   background-color: var(--ds-color-neutral-background-subtle);
   border-radius: 0 8px 8px 0;

diff --git a/apps/theme/components/ColorContrasts/ColorContrasts.module.css b/apps/theme/components/ColorContrasts/ColorContrasts.module.css
@@ -28,9 +28,20 @@
 .tagGroup {
   display: inline-flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 9px;
   align-items: flex-start;
-  margin-top: 8px;
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
+  margin-left: -24px;
+  width: calc(100% + 48px);
+  padding: 20px 24px;
+}
+
+.tagGroups {
+  margin-top: 12px;
+}
+
+.tagGroup:last-child {
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
 }
 
 .tagGroup .tag {
@@ -128,3 +139,7 @@
 .select {
   width: 25%;
 }
+
+.desc {
+  width: 90%;
+}
diff --git a/apps/theme/components/ColorContrasts/ColorContrasts.tsx b/apps/theme/components/ColorContrasts/ColorContrasts.tsx
@@ -27,8 +27,8 @@ export const ColorContrasts = () => {
   const [selectedColor, setSelectedColor] = useState('');
   const [selectedBaseColor, setSelectedBaseColor] = useState('');
 
-  const indexBaseOne = [9, 10, 11];
-  const indexBaseTwo = [14, 15];
+  const indexBaseOne = [0, 1, 2, 3, 14, 15];
+  const indexBaseTwo = [9, 10, 11];
   const [reducedBaseLight, setReducedBaseLight] = useState({
     themeRange1: theme.light.filter((color) =>
       indexBaseOne.includes(color.number),
@@ -127,49 +127,54 @@ export const ColorContrasts = () => {
   return (
     <div className='panelContainer'>
       <div className='panelLeft'>
-        <Heading data-size='xs'> Se kontraster</Heading>
+        <Heading data-size='xs'>Kontraster mellom farger</Heading>
         <Paragraph data-size='sm'>
-          Her ser du kontrastene mellom de ulike stegene i fargeskalaene dine.
+          Her vises kontrastene mellom de ulike trinnene i fargeskalaene, samt
+          om fargene oppfyller WCAG-kravene.
         </Paragraph>
-        <Heading data-size='2xs' className={classes.subHeading}>
-          Tagger og betydning
-        </Heading>
-        <div className={classes.tagGroup}>
-          <div className={cl(classes.tag, classes.AAA)}>AAA</div>
-          <Paragraph data-size='sm'>
-            Tekst og bakgrunn må ha minst 7:1 kontrast for å dekke WCAG AAA
-            kravet.
-          </Paragraph>
-        </div>
-        <div className={classes.tagGroup}>
-          <div className={cl(classes.tag, classes.AA)}>AA</div>
-          <Paragraph data-size='sm'>
-            Tekst og bakgrunn må ha minst 4,5:1 kontrast for å dekke WCAG AA
-            kravet.
-          </Paragraph>
-        </div>
-        <div className={classes.tagGroup}>
-          <div className={cl(classes.tag, classes.AA18)}>AA18</div>
-          <Paragraph data-size='sm'>
-            Tekst og bakgrunn må ha minst 3:1 kontrast og ha en font på 18px
-            eller mer for å dekke WCAG AA kravet.
-          </Paragraph>
-        </div>
-        <div className={classes.tagGroup}>
-          <div className={cl(classes.tag, classes.FAIL)}>FAIL</div>
-          <Paragraph data-size='sm'>
-            Dekker ingen kontrastkrav i WCAG og må brukes kun dekorativt.
-          </Paragraph>
+
+        <div className={classes.tagGroups}>
+          <div className={classes.tagGroup}>
+            <div className={cl(classes.tag, classes.AAA)}>AAA</div>
+            <Paragraph data-size='sm'>
+              Tekst og bakgrunn må ha en kontrast på minst 7:1 for å oppfylle
+              WCAG AAA-kravet.
+            </Paragraph>
+          </div>
+          <div className={classes.tagGroup}>
+            <div className={cl(classes.tag, classes.AA)}>AA</div>
+            <Paragraph data-size='sm'>
+              Tekst og bakgrunn må ha en kontrast på minst 4.5:1 for å oppfylle
+              WCAG AA-kravet.
+            </Paragraph>
+          </div>
+          <div className={classes.tagGroup}>
+            <div className={cl(classes.tag, classes.AA18)}>AA18</div>
+            <Paragraph data-size='sm'>
+              Tekst og bakgrunn må ha en kontrast på minst 3:1 og en
+              skriftstørrelse på 18 px eller større for å oppfylle WCAG
+              AA-kravet.
+            </Paragraph>
+          </div>
+          <div className={classes.tagGroup}>
+            <div className={cl(classes.tag, classes.FAIL)}>FAIL</div>
+            <Paragraph data-size='sm'>
+              Oppfyller ingen kontrastkrav i WCAG og bør kun brukes til
+              dekorative formål.
+            </Paragraph>
+          </div>
         </div>
       </div>
       <div className='panelRight'>
-        <Heading data-size='xs'>
+        <Heading data-size='2xs'>
           Text og Border mot Background og Surface
         </Heading>
-        <Paragraph data-size='sm'>
-          Når du bytter mellom fargeskalaene dine så vil du se at kontrastene
-          mellom fargene i seksjonen under er nesten helt like. Dette betyr at
-          du trenger bare lære deg disse reglene en gang.
+        <Paragraph data-size='sm' className={classes.desc}>
+          Når du bytter mellom fargeskalaene, vil du se at kontrastene mellom
+          fargene i seksjonen nedenfor er nesten identiske. Dette gjør at du kun
+          trenger å vurdere kontrastene for én fargeskala for å forstå hvordan
+          alle fungerer. Siden kontrastene er konsistente, kan du også kombinere
+          ulike farger på tvers av skalaene.
         </Paragraph>
         <Field className={classes.fieldGroup}>
           <Select
@@ -204,8 +209,15 @@ export const ColorContrasts = () => {
             </tr>
           ))}
         </table>
-        <Heading data-size='xs'>Base fargene</Heading>
-        <Paragraph data-size='sm'>Base fargene er litt spesielle</Paragraph>
+        <Heading data-size='2xs'>Base fargene</Heading>
+        <Paragraph data-size='sm' className={classes.desc}>
+          Fargene som blir valgt i verktøyet får tokenet Base Default i hver
+          fargeskala. Dette betyr at det er viktig å velge en farge som har over
+          3:1 kontrast mot overflatefarger om den skal brukes som en viktig,
+          meningsbærende farge. Verktøyet lager også to kontrastfarger som trygt
+          kan brukes oppå base fargene. Disse kontrastfargene blir enten lyse
+          eller mørke avhengig av base fargen.
+        </Paragraph>
         <Field className={classes.fieldGroup}>
           <Select
             data-size='sm'

diff --git a/apps/theme/components/ColorPreview/ColorPreview.tsx b/apps/theme/components/ColorPreview/ColorPreview.tsx
@@ -142,8 +142,13 @@ export const ColorPreview = () => {
       <div className='panelLeft'>
         <Heading data-size='xs'>Se fargene dine i bruk</Heading>
         <Paragraph data-size='sm'>
-          TODO: Litt dokumentasjon om fargesystemet, kontraster og bruk av
-          farger
+          Hver farge som blir valgt med verktøyet får sitt eget kort i seksjonen
+          til høyre slik at du kan se hvordan fargene harmonerer sammen.
+        </Paragraph>
+        <Paragraph data-size='sm'>
+          Merk at kontrastfargen inne i knappen endrer seg fra hvit til svart,
+          avhengig av om den valgte fargen er lys eller mørk for å oppnå best
+          mulig kontrast.
         </Paragraph>
         <div className='panelBottom'>
           <div className={classes.label}>Visning:</div>

diff --git a/apps/theme/components/ColorTokens/ColorTokens.tsx b/apps/theme/components/ColorTokens/ColorTokens.tsx
@@ -6,7 +6,10 @@ export const ColorTokens = () => {
     <div className='panelContainer'>
       <div className='panelLeft'>
         <Heading data-size='xs'>Se fargetokens</Heading>
-        <Paragraph data-size='sm'>Todo</Paragraph>
+        <Paragraph data-size='sm'>
+          Her ser du hvilke tokens som er brukt for å lage kortene i seksjonen
+          over.
+        </Paragraph>
       </div>
       <div className={cl('panelRight', classes.right)}>
         <img className={classes.img} src='img/color-tokens.png' alt='' />