chore(storefront): Add CSS tokens to components (#818)

Co-authored-by: Michael Marszalek <[email protected]>

storefront/components/Banner/Banner.module.css

@@ -1,45 +1,43 @@
 .banner {
-  min-height: 460px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  padding-top: var(--spacing-7);
-  padding-bottom: var(--spacing-7);
-  gap: var(--spacing-5);
+  gap: var(--fds-spacing-6);
+  min-height: 460px;
+  padding-top: var(--fds-spacing-12);
+  padding-bottom: var(--fds-spacing-12);
 }
 
 .left {
-  flex-basis: calc(53% - (var(--spacing-5) / 2));
+  flex-basis: calc(53% - (var(--fds-spacing-6) / 2));
   flex-grow: 1;
 }
 
 .right {
-  flex-basis: calc(47% - (var(--spacing-5) / 2));
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 275px;
+  flex-basis: calc(47% - (var(--fds-spacing-6) / 2));
   flex-grow: 1;
+  height: 275px;
 }
 
 .title {
-  font-weight: 500;
-  font-size: var(--font-900);
-  margin-bottom: var(--spacing-3);
   display: flex;
   align-items: center;
+  margin-bottom: var(--fds-spacing-3);
+  font: var(--fds-typography-heading-xlarge);
 }
 
 .title > span {
-  margin-left: 20px;
+  margin-left: var(--fds-spacing-4);
 }
 
 .desc {
-  font-size: var(--font-400);
-  line-height: 1.7em;
-  padding-right: 30px;
+  padding-right: var(--fds-spacing-7);
   margin-bottom: 0;
+  font: var(--fds-typography-ingress-medium);
 }
 
 .shapes {
@@ -58,30 +56,30 @@
 }
 
 .one {
-  left: 0;
   top: 0;
-  border-color: #f45f63;
+  left: 0;
+  border-color: var(--fds-brand-alt1-600);
   animation: one 1.5s forwards ease-out;
 }
 
 .two {
-  right: 0;
   top: 0;
-  border-color: #1e98f5;
+  right: 0;
+  border-color: var(--fds-brand-alt3-600);
   animation: two 1.5s forwards ease-out;
 }
 
 .three {
   right: 0;
   bottom: 0;
-  border-color: #68707c;
+  border-color: var(--fds-semantic-border-neutral-default);
   animation: three 1.5s forwards ease-out;
 }
 
 .four {
   left: 0;
   bottom: 0;
-  border-color: #e5aa20;
+  border-color: var(--fds-brand-alt2-600);
   animation: four 1.5s forwards ease-out;
 }
 

storefront/components/CodeSnippet/CodeSnippet.module.css

@@ -1,28 +1,24 @@
-.code-snippet {
+.codeSnippet {
   position: relative;
 }
 
-.code-snippet pre {
-  /* border-radius: 4px; */
-}
-
-.code-snippet__icon {
+.icon {
   position: absolute;
   top: 6px;
   right: 6px;
-  color: white;
   height: 40px;
   width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #1a1a1a;
-  border-radius: 4px;
+  background-color: var(--fds-semantic-text-neutral-default);
+  color: white;
+  border-radius: var(--fds-border_radius-medium);
   border: none;
   transition: 0.15s all;
   cursor: pointer;
 }
 
-.code-snippet__icon:hover {
-  background-color: #464646;
+.icon:hover {
+  background-color: var(--fds-semantic-text-neutral-subtle);
 }

storefront/components/CodeSnippet/CodeSnippet.tsx

@@ -52,18 +52,18 @@ const CodeSnippet = ({ language = 'markup', children = '' }) => {
   };
 
   return (
-    <div className={classes['code-snippet']}>
+    <div className={classes.codeSnippet}>
       <Tippy
         content={toolTipText}
         hideOnClick={false}
       >
         <button
           onMouseEnter={() => setToolTipText('Kopier')}
           onClick={() => onButtonClick()}
-          className={classes['code-snippet__icon']}
+          className={classes.icon}
           title='Kopier'
         >
-          <FilesIcon scale={16} />
+          <FilesIcon fontSize={20} />
         </button>
       </Tippy>
       <SyntaxHighlighter

storefront/components/Footer/Footer.module.css

@@ -1,34 +1,33 @@
 .footer {
-  background-color: #1e2b3c;
-  color: #e6e6e6;
+  background-color: var(--fds-semantic-surface-neutral-inverted);
+  color: var(--color-text-on_inverted-subtle);
   font-weight: 300;
   letter-spacing: 0.3px;
 }
 
 .container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
-  gap: 40px;
+  gap: var(--fds-spacing-10);
 }
 
 .title {
-  font-size: 20px;
-  font-weight: 500;
-  margin-bottom: 16px;
+  font: var(--fds-typography-heading-xsmall);
+  margin-bottom: var(--fds-spacing-4);
 }
 
 .footer .logos img {
-  margin-right: 10px;
   height: 26px;
   width: auto;
+  margin-right: var(--fds-spacing-2);
 }
 
 .logos {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 32px;
-  margin-top: 30px;
+  gap: var(--fds-spacing-8);
+  margin-top: var(--fds-spacing-8);
 }
 
 .links {
@@ -38,42 +37,41 @@
 
 .links li {
   list-style: none;
-  margin-bottom: 22px;
+  margin-bottom: var(--fds-spacing-5);
 }
 
 .links li:last-child {
   margin-bottom: 0;
 }
 
 .top {
-  padding: var(--spacing-8) 0;
+  padding: var(--fds-spacing-18) 0;
 }
 
 .bottom {
-  background-color: #17202e;
-  padding: 30px 0;
-  color: #d4d4d4;
-  font-size: 15px;
+  background-color: var(--color-surface-neutral-inverted-darker);
+  padding: var(--fds-spacing-7) 0;
+  color: var(--color-text-on_inverted-subtle);
+  font: var(--fds-typography-paragraph-short-small);
 }
 
 .button {
-  border: 1px dashed #e6e6e6;
-  height: 48px;
-  padding: 0 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #e6e6e6;
   text-decoration: none;
-  margin-top: 32px;
+  height: 48px;
+  padding: 0 var(--fds-spacing-5);
+  margin-top: var(--fds-spacing-7);
   border-radius: 2px;
-  font-weight: 400;
   transition: 0.1s all;
-  font-size: 15px;
+  font: var(--fds-typography-paragraph-short-small);
+  color: var(--color-text-on_inverted-subtle);
+  border: 1px dashed var(--color-text-on_inverted-subtle);
 }
 
 .button:hover {
-  background-color: #17202e;
+  background-color: var(--color-surface-neutral-inverted-darker);
   border-color: white;
   color: white;
 }

storefront/components/Grid/Grid.module.css

@@ -1,8 +1,8 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 32px;
-  margin: 30px 0;
+  gap: var(--grid-gap);
+  margin: var(--fds-spacing-7) 0;
 }
 
 @media (max-width: 1200px) {

storefront/components/Header/Header.module.css

@@ -2,7 +2,7 @@
   height: 96px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
   background-color: white;
 }
 
@@ -11,15 +11,15 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0 var(--spacing-5);
+  padding: 0 var(--fds-spacing-7);
 }
 
 .logo {
   height: 30px;
   width: auto;
 }
 
-.logo-link {
+.logoLink {
   display: flex;
   align-items: center;
 }
@@ -38,28 +38,28 @@
 
 .item {
   list-style: none;
-  margin-left: 32px;
+  margin-left: var(--fds-spacing-7);
 }
 
-.item a {
+.link {
   color: inherit;
   text-decoration: none;
-  font-size: 18px;
+  font: var(--fds-typography-paragraph-medium);
   border-bottom: 3px solid transparent;
-  padding-bottom: 8px;
+  padding-bottom: var(--fds-spacing-2);
   transition: 0.1s all ease-out;
 }
 
-.item .active {
-  border-color: #6db6ea;
+.link:hover {
+  border-color: var(--fds-semantic-border-neutral-divider);
 }
 
-.item a:hover {
-  border-color: #c3c3c3;
+.item .active {
+  border-color: var(--fds-brand-alt3-600);
 }
 
 .item .active.link:hover {
-  border-color: #6db6ea;
+  border-color: var(--fds-brand-alt3-600);
 }
 
 @media (max-width: 991.98px) {
@@ -79,7 +79,7 @@
     right: 0;
     top: 71px;
     background-color: white;
-    box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
+    box-shadow: var(--fds-shadow-large);
     flex-direction: column;
     display: none;
     padding: 20px 0;