chore(storefront): fix cards in mdx content (#2289)

fixes cards using wrong `color`.
fixes margin and padding in cards after we started using our own
components.
fixes siteconfig having double of one page.

Author: Barsnes

apps/storefront/app/monstre/feilmeldinger/page.mdx

@@ -153,14 +153,9 @@ Feltet må ha 3:1 kontrast til bakgrunnsfargen. Hvis vi også bruker rød tekst
 Vi viser feilmeldingen under feltet med feil. Dette er det vanligste mønsteret, selv om det også diskuteres om den skal stå mellom ledeteksten og feltet.
 
 <Card
-  color='first'
+  color='brand1'
 >
-  <CardContent
-  style={{
-    paddingTop: '0px',
-    paddingBottom: '0px'
-  }}
-  >
+  <CardContent>
   Merk: Vi ønsker å holde oss oppdatert om andre anbefalinger om plassering, og har [pågående diskusjon om dette på Git](https://github.com/digdir/designsystemet/discussions/1684#discussioncomment-9339006).
 
   </CardContent>
@@ -250,16 +245,10 @@ Vi kan bruke disse aria-attributtene og rollene:
 - Vi bruker `aria-describedby` for å koble feilmelding til feltet.
 
 <Card
-  color='first'
+  color='brand1'
 >
-  <CardContent
-  style={{
-    paddingTop: '0px',
-    paddingBottom: '0px'
-  }}
-  >
+  <CardContent>
   Vi unngår inntill videre å bruke `aria-errormessage` da den ikke har full støtte av hjelpemidler per nå. Men vi kommer til å oppdatere retningslinjene om støtten blir bedre i fremtiden. [Se diskusjon på github](https://github.com/digdir/designsystemet/discussions/1684)
-
   </CardContent>
 </Card>
 
@@ -286,18 +275,13 @@ For feilmeldinger som dukker opp dynamisk må vi bruke `aria-live` for at meldin
 <br />
 
 <Card
-  color='third'
+  color='brand3'
 >
-  <CardContent
-  style={{
-    paddingTop: '0px',
-    paddingBottom: '0px'
-  }}
-  >
+  <CardContent>
     Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/1684) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
-
   </CardContent>
 </Card>
+
 <Contributors
   authors={[
     'Roy Halvor Frimanslund (Brreg)',

apps/storefront/app/monstre/obligatoriske-og-valgfrie-felt/page.mdx

@@ -4,8 +4,8 @@ import { MenuPageLayout } from '@layouts';
 import { Image } from '@components';
 
 export const metadata = {
-  title: 'Validering og feilmeldinger',
-  description: 'Slik forteller du brukeren at noe har gått galt eller mangler.',
+  title: 'Obligatoriske og valgfrie skjemafelt',
+  description: 'Det er flere måter å markere obligatoriske felt på som oppfyller kravene til merking.',
 };
 
 export default ({ children }) => (
@@ -20,20 +20,6 @@ export default ({ children }) => (
 
 Det er flere måter å markere obligatoriske felt på som [oppfyller kravene til merking](https://www.uutilsynet.no/veiledning/skjema/38#ledetekster_og_instruksjoner). I dag gjør vi dette ulikt på tvers. Noen bruker asterisk (stjerne), noen bruker ord, andre informerer i forkant om hva som må fylles ut. Klarer vi å gjøre dette mer likt på tvers blir det lettere for innbygger å forstå og kjenne igjen mønsteret på tvers av løsningene våre. Det vil alltid være unntak og ulike kontekster som krever ulik merking.
 
-<Card
-  color='third'
->
-  <CardContent
-  style={{
-    paddingTop: '0px',
-    paddingBottom: '0px'
-  }}
-  >
-    *Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg og Oslo Origo. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/issues/new) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
-
-  </CardContent>
-</Card>
-
 En generell retningslinje er at vi bør unngå å be om informasjon vi ikke trenger, altså unngå valgfrie felt.
 
 Her tar vi for oss 3 eksempler.
@@ -98,3 +84,13 @@ En kombinasjon av obligatoriske og valgfrie felt er ikke ideellt! Men det vil v
 - [UU-tilsynet](https://www.uutilsynet.no/veiledning/skjema/38#ledetekster_og_instruksjoner)<br/>
 - [Gov UK - Question pages](https://design-system.service.gov.uk/patterns/question-pages/)
 - [NN Group - Marking Required Fields in Forms](https://www.nngroup.com/articles/required-fields/)
+
+<br />
+
+<Card
+  color='brand3'
+>
+  <CardContent>
+    *Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg og Oslo Origo. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/issues/new) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
+  </CardContent>
+</Card>

apps/storefront/app/monstre/systemvarsler/page.mdx

@@ -19,16 +19,10 @@ export default ({ children }) => (
 );
 
 <Card
-  color='third'
+  color='brand3'
 >
-  <CardContent
-  style={{
-    paddingTop: '0px',
-    paddingBottom: '0px'
-  }}
-  >
+  <CardContent>
     *Retningslinjene er under arbeid fra 5. juni 2024 i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Alle er velkommen til å påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/2083) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
-
   </CardContent>
 </Card>
 

apps/storefront/components/MdxContent/MdxContent.module.css

@@ -134,3 +134,11 @@
 .content > *:last-child {
   margin-bottom: 0;
 }
+
+.content [class~='ds-card'] p {
+  margin: 0;
+}
+
+.content [class~='ds-card'] {
+  margin: var(--ds-spacing-3) 0;
+}

apps/storefront/siteConfig.tsx

@@ -164,24 +164,6 @@ export const SiteConfig = {
             },
           ],
         },
-        {
-          name: 'Kommende',
-          url: 'monstre/skjema',
-          children: [
-            {
-              name: 'Systemvarsler *',
-              url: 'monstre/systemvarsler',
-            },
-            {
-              name: 'Dato',
-              url: 'monstre/dato',
-            },
-            {
-              name: 'Obligatoriske felt *',
-              url: 'monstre/obligatoriske-og-valgfrie-felt',
-            },
-          ],
-        },
         {
           name: 'Kommende',
           url: 'monstre/skjema',