chore(storefront): Fix stylings (#1837)

digdir · Apr 18, 2024 · 9555a92 · 9555a92
1 parent 63f6a5c
commit 9555a92
Show file tree

Hide file tree

Showing 21 changed files with 236 additions and 46 deletions.
diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css
@@ -27,7 +27,7 @@
   display: flex;
   align-items: center;
   margin-bottom: var(--fds-spacing-3);
-  font: var(--fds-typography-heading-xlarge);
+  font: var(--fds-typography-heading-large);
 }
 
 .title > span {
@@ -37,7 +37,7 @@
 .desc {
   padding-right: var(--fds-spacing-7);
   margin-bottom: 0;
-  font: var(--fds-typography-ingress-medium);
+  font: var(--fds-typography-ingress-small);
 }
 
 .shapes {

diff --git a/apps/storefront/components/Blog/Card/BlogCard.module.css b/apps/storefront/components/Blog/Card/BlogCard.module.css
@@ -5,7 +5,7 @@
 
 @media screen and (min-width: 1024px) {
   .card[data-featured='true'] .media {
-    padding-bottom: 0 !important;
+    padding-bottom: 0;
   }
 
   .card[data-featured='true'] {
@@ -18,22 +18,22 @@
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: center;
-    padding: var(--fds-spacing-8) var(--fds-spacing-10) !important;
+    padding: var(--fds-spacing-8) var(--fds-spacing-10);
   }
 
   .card[data-featured='true'] .heading {
-    padding-top: 0 !important;
+    padding-top: 0;
   }
 
   .card[data-featured='true'] .footer {
-    padding-bottom: 0 !important;
+    padding-bottom: 0;
   }
 }
 
 .meta {
   display: flex;
   gap: var(--fds-spacing-2);
-  color: var(--fds-semantic-text-neutral-subtle) !important;
+  color: var(--fds-semantic-text-neutral-subtle);
 }
 
 .metaSquare {

diff --git a/apps/storefront/components/Blog/Contributors/Contributors.module.css b/apps/storefront/components/Blog/Contributors/Contributors.module.css
@@ -47,7 +47,7 @@
   text-wrap: nowrap;
   justify-content: center;
   gap: var(--fds-spacing-3);
-  color: var(--fds-semantic-text-neutral-subtle) !important;
+  color: var(--fds-semantic-text-neutral-subtle);
 }
 
 .metaSquare {

diff --git a/apps/storefront/components/ComponentCard/ComponentCard.module.css b/apps/storefront/components/ComponentCard/ComponentCard.module.css
@@ -15,7 +15,7 @@
 }
 
 .title {
-  margin-top: var(--fds-spacing-3) !important;
+  margin-top: var(--fds-spacing-3);
   text-decoration: underline;
   text-underline-offset: 7px;
 }

diff --git a/apps/storefront/components/Header/Header.tsx b/apps/storefront/components/Header/Header.tsx
@@ -116,6 +116,7 @@ const Header = () => {
                 href='https://github.com/digdir/designsystemet'
                 target='_blank'
                 className={cl(classes.linkIcon, classes.github)}
+                title='Designsystemets GitHub-repositorium'
               >
                 <GithubLogo />
               </Link>
@@ -125,6 +126,7 @@ const Header = () => {
                 href='https://www.figma.com/@designsystemet'
                 target='_blank'
                 className={cl(classes.linkIcon, classes.figma)}
+                title='Designsystemets Figma-prosjekt'
               >
                 <FigmaLogo />
               </Link>

diff --git a/apps/storefront/components/ImageSection/ImageSection.module.css b/apps/storefront/components/ImageSection/ImageSection.module.css
@@ -37,7 +37,7 @@
 }
 
 .title {
-  font: var(--fds-typography-heading-large);
+  font: var(--fds-typography-heading-medium);
   margin-bottom: var(--fds-spacing-4);
 }
 
@@ -69,7 +69,7 @@
   border-radius: 4px;
   cursor: pointer;
   transition: 0.1s all;
-  color: var(--fds-semantic-text-neutral-default) !important;
+  color: var(--fds-semantic-text-neutral-default);
   text-decoration: none;
 }
 

diff --git a/apps/storefront/components/Section/Section.tsx b/apps/storefront/components/Section/Section.tsx
@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import cl from 'clsx';
 import Image from 'next/image';
+import { Heading } from '@digdir/designsystemet-react';
 
 import { Container } from '../Container/Container';
 
@@ -23,7 +24,14 @@ const Section = ({
     <div className={cl(classes.section, classes[backgroundColor])}>
       <Container>
         <div className={classes.header}>
-          {title && <h2 className={classes.title}>{title}</h2>}
+          {title && (
+            <Heading
+              levle={2}
+              size='medium'
+            >
+              {title}
+            </Heading>
+          )}
           {detail && (
             <Image
               src='img/diamond-logo.svg'

diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.module.css b/apps/storefront/components/SidebarMenu/SidebarMenu.module.css
@@ -83,7 +83,7 @@
 }
 
 .toggleBtn {
-  display: none !important;
+  display: none;
 }
 
 @media (max-width: 958.98px) {
@@ -93,8 +93,8 @@
   }
 
   .toggleBtn {
-    display: block !important;
-    margin-bottom: var(--fds-spacing-2) !important;
+    display: block;
+    margin-bottom: var(--fds-spacing-2);
   }
 
   .activeMenu {

diff --git a/apps/storefront/components/SubPages/Banner/Banner.module.css b/apps/storefront/components/SubPages/Banner/Banner.module.css
@@ -17,6 +17,7 @@
   text-align: center;
   max-width: 780px;
   text-wrap: balance;
+  font: var(--fds-typography-ingress-small);
 }
 
 .icon {

diff --git a/apps/storefront/components/SubPages/Banner/Banner.tsx b/apps/storefront/components/SubPages/Banner/Banner.tsx
@@ -41,7 +41,7 @@ type BannerHeadingProps = Omit<HeadingProps, 'size'>;
 const BannerHeading = ({ ...props }: BannerHeadingProps) => {
   return (
     <Heading
-      size='xlarge'
+      size='large'
       {...props}
     />
   );

diff --git a/apps/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css b/apps/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css
@@ -6,5 +6,5 @@
   justify-content: center;
   align-items: center;
   background-color: #cfeaff;
-  font-family: 'Inter', sans-serif !important;
+  font-family: 'Inter', sans-serif;
 }
diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.module.css b/apps/storefront/components/Tokens/TokenList/TokenList.module.css
@@ -78,9 +78,9 @@
 
 .title {
   font-weight: 500;
-  font-size: 16px !important;
-  margin-top: -3px !important;
-  margin-bottom: 3px !important;
+  font-size: 16px;
+  margin-top: -3px;
+  margin-bottom: 3px;
   display: flex;
   align-items: center;
 }

diff --git a/apps/storefront/globals.css b/apps/storefront/globals.css
@@ -1,5 +1,7 @@
 @import url('https://altinncdn.no/fonts/inter/inter.css');
 
+@layer normalize, fds;
+
 :root {
   --color-beta: #d6d4ff;
   --color-text-on_inverted-subtle: #dbdbdb;
@@ -22,7 +24,9 @@ body {
 
 * {
   box-sizing: border-box;
-  font-feature-settings: 'cv05' 1;
+
+  /* Still need important here, since we are using `font:` outside of a layer */
+  font-feature-settings: 'cv05' 1 !important;
 }
 
 h1,
@@ -52,3 +56,186 @@ h6 {
 .greyBackground {
   background: var(--fds-semantic-background-subtle);
 }
+
+@layer normalize {
+  html {
+    line-height: 1.15; /* 1 */
+  }
+
+  body {
+    margin: 0;
+  }
+
+  main {
+    display: block;
+  }
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  pre {
+    font-family: monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  a {
+    background-color: transparent;
+  }
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  button,
+  input {
+    /* 1 */
+    overflow: visible;
+  }
+
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    appearance: button;
+  }
+
+  button::-moz-focus-inner,
+  [type='button']::-moz-focus-inner,
+  [type='reset']::-moz-focus-inner,
+  [type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  button:-moz-focusring,
+  [type='button']:-moz-focusring,
+  [type='reset']:-moz-focusring,
+  [type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  textarea {
+    overflow: auto;
+  }
+
+  [type='checkbox'],
+  [type='radio'] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  [type='number']::-webkit-inner-spin-button,
+  [type='number']::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [type='search'] {
+    appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  [type='search']::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  details {
+    display: block;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  template {
+    display: none;
+  }
+
+  [hidden] {
+    display: none;
+  }
+}