unsttyle things,

apps/storefront/app/bloggen/2024/altinn-studio/page.mdx

@@ -51,6 +51,7 @@ Designsystemet tilbyr en hel rekke av grunnleggende komponenter, som kan utforme
   alt='Illustrasjonen viser flere knapper i ulike varianter og farger.'
   boxShadow={false}
   caption='Figur 1: Illustrasjon som viser varianter av knapper.'
+  dataUnstyled
 />
 
 Selv om knappkomponenten kommer i mange varianter betyr ikke det at du og ditt team skal ta i bruk alle variantene. Designsystemet tilbyr disse mulighetene for at det skal være fleksibelt, og kunne tilby deg funksjonalitet som både er ofte brukt men også kjente mønstre.

apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css

@@ -64,6 +64,14 @@
   background-color: var(--ds-color-neutral-background-subtle);
 }
 
+.content video,
+.content [data-iframe-video] {
+  display: block;
+  width: 860px;
+  margin-left: calc((100% - 860px) / 2) !important;
+  background-color: var(--ds-color-neutral-background-subtle);
+}
+
 .main > figure {
   margin: auto;
   width: 100%;

apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx

@@ -36,7 +36,7 @@ For å sikre god lesbarhet skal all tekst ha tilstrekkelig kontrast mot bakgrunn
 
 Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjenester. Web Content Accessibility Guidelines (WCAG) inneholder suksesskriterier og forslag til løsninger for å lykkes. Men det er ikke samsvar mellom dagens kontrastregler og kravet om at alle skal kunne se innholdet.
 
-<Card color='brand3'>
+<Card color='brand3' data-unstyled>
   <Heading
     level={3}
     size='xs'
@@ -60,7 +60,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen
 
 <br />
 
-<Card color='brand2'>
+<Card color='brand2' data-unstyled>
   <Heading
     level={3}
     size='xs'
@@ -123,7 +123,7 @@ Vi vet at selv om en løsning oppfyller de konkrete kravene fra regelverket om u
 
 Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til universell utforming, men det betyr ikke at innholdet er tilgjengelig eller universelt utformet. Derfor strekker vi oss langt i å også oppfylle de fremtidige WCAG-3 kravene som bruker APCA-metoden.
 
-<Card color='brand3'>
+<Card color='brand3' data-unstyled>
   **Kontrast i WCAG 2 «luminosity contrast algorithm** <br />
   _«I WCAG 2 er kontrast en måleenhet for forskjellen i den opplevde lysintensiteten
   mellom to farger. Denne forskjellen er beskrevet som et forhold fra 1:1 (for
@@ -135,7 +135,7 @@ Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til univer
 
 <br />
 
-<Card color='brand2'>
+<Card color='brand2' data-unstyled>
   **Kontrast i WCAG 3 «visual contrast algorithm»** <br />I WCAG 3 benyttes en
   visuell-kontrast algoritme som kalles for APCA, det er fremdeles
   fargeverdiene som benyttes for å kalkulere kontrasten, men også om fargen er
@@ -175,7 +175,7 @@ I variant B er teksten svart, og bakgrunnen er farge #6D7879. Teksten er noe min
 
 <br />
 <br />
-<Card color='brand1'>
+<Card color='brand1' data-unstyled>
   **Bidra til artikkelen?** <br />
   Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en
   e-post på: [email protected] eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new).

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

@@ -49,6 +49,7 @@ Vi skal kunne vise feilmeldinger sammen med alle typer felt i et skjema. Melding
   src='/img/errormessage-co-1.png'
   alt='Skjermbilde av skjema med en feilmelding. Brukeren har skrevet "fdgdfgfdg" inn i et felt for fødselsnummer. Feilmeldingen sier at Fødselsnummer  skal inneholde 11 siffer.'
   boxShadow={false}
+  dataUnstyled
 />
 
 ### Oppsummering av flere feilmeldinger
@@ -74,6 +75,7 @@ Pass på at
   src='/img/errormessage-co-3.png'
   alt='Skjermbilde av skjema med en feilmelding. Brukeren har skrevet "fdgdfgfdg" inn i et felt for fødselsnummer. Feilmeldingen sier at Fødselsnummer  skal inneholde 11 siffer.'
   boxShadow={false}
+  dataUnstyled
 />
 
 ### Det er best om vi kan unngå å gi feilmeldinger
@@ -135,6 +137,7 @@ Når det oppstår feil i et felt er det viktig at feltet blir godt synlig, slik
   src='/img/errormessage-design.png'
   alt='Et skjemafelt som viser feil på informasjonen som er fylt ut. På feltet blir de visuelle elementene som skiller det fra et vanlig felt fremhevet: Det er tykkere kant rundt feltet, det er farget rødt og det er en rød tekst med et tilhørende fareikon som beskriver feilen på feltet.'
   boxShadow={false}
+  dataUnstyled
 />
 
 Når den tekniske løsningen sjekker for feil, det vi kaller validerer, ønsker vi å vise hvilke felt som har feil. Til det kan vi bruke flere virkemidler.
@@ -154,6 +157,7 @@ Vi viser feilmeldingen under feltet med feil. Dette er det vanligste mønsteret,
 
 <Card
   color='brand1'
+  data-unstyled
 >
   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).
 </Card>
@@ -241,7 +245,7 @@ Vi kan bruke disse aria-attributtene og rollene:
 - Vi setter `aria-invalid="true"` på felt med feil, for å si fra om at det er en feil der.
 - Vi bruker `aria-describedby` for å koble feilmelding til feltet.
 
-<Card color='brand1'>
+<Card color='brand1' data-unstyled>
   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)
 </Card>
 
@@ -267,7 +271,7 @@ For feilmeldinger som dukker opp dynamisk må vi bruke `aria-live` for at meldin
 <br />
 <br />
 
-<Card color='brand3'>
+<Card color='brand3' data-unstyled>
   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).
 </Card>
 

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

@@ -18,7 +18,7 @@ export default ({ children }) => (
   />
 );
 
-<Card color='brand3'>
+<Card color='brand3' data-unstyled>
   *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/1801) 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).
 </Card>
 

apps/storefront/components/ResponsiveIframe/ResponsiveIframe.module.css

@@ -2,16 +2,14 @@
   position: relative;
   overflow: hidden;
   width: 100%;
-  max-width: var(--media-max-width);
-  padding-top: 56.25%;
-  box-shadow: var(--ds-shadow-md);
   border-radius: 4px;
   margin-top: var(--ds-spacing-10);
   margin-bottom: var(--ds-spacing-10);
+  aspect-ratio: 16 / 9;
 }
 
 .aspectFourThree {
-  padding-top: 75%;
+  aspect-ratio: 4 / 3;
 }
 
 .iframe {

apps/storefront/components/ResponsiveIframe/ResponsiveIframe.tsx

@@ -20,6 +20,7 @@ const ResponsiveIframe = ({
       className={cl(classes.container, {
         [classes.aspectFourThree]: aspectRatio === '4-3',
       })}
+      data-iframe-video
     >
       <iframe
         title={title}

apps/storefront/components/Tokens/TokenList/TokenList.tsx

@@ -207,7 +207,7 @@ const TokenList = ({
 
   return (
     <div className={classes.tokens}>
-      <div className={classes.package}>
+      <div className={classes.package} data-unstyled>
         <Link href='https://www.npmjs.com/package/@digdir/designsystemet-theme'>
           <img
             src='https://img.shields.io/npm/v/@digdir/designsystemet-theme?label=latest%20release&color=0051be'

apps/storefront/components/VersionBanner/VersionBanner.module.css

@@ -5,4 +5,6 @@
   place-items: center;
   width: 100%;
   height: var(--ds-sizing-12);
+  position: relative;
+  z-index: 100;
 }