From 82d33abbc10f78ffd25df96261b289831301ecfe Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Wed, 5 Dec 2018 14:34:48 +0100
Subject: [PATCH] feat: add #table default style to the core styling

---
 .../src/shared/menu/SidebarMenu.js            | 64 ++++++++++---------
 .../src/shared/parts/Layout.js                |  5 +-
 .../src/shared/parts/PortalStyle.js           | 44 ++-----------
 .../__snapshots__/Button.test.js.snap         |  9 ++-
 .../__snapshots__/Dropdown.test.js.snap       | 13 +++-
 .../__tests__/__snapshots__/Icon.test.js.snap |  7 ++
 .../__snapshots__/InputMasked.test.js.snap    | 13 +++-
 .../__snapshots__/Input.test.js.snap          | 11 +++-
 .../__tests__/__snapshots__/Logo.test.js.snap |  9 ++-
 .../__snapshots__/Modal.test.js.snap          | 11 +++-
 .../__snapshots__/Slider.test.js.snap         |  9 ++-
 .../__snapshots__/Switch.test.js.snap         |  9 ++-
 .../__tests__/__snapshots__/Tabs.test.js.snap |  9 ++-
 .../src/patterns/article/style/_article.scss  |  1 -
 .../__snapshots__/ViewTitle.test.js.snap      |  9 ++-
 .../dnb-ui-lib/src/style/core/dnb-theme.scss  | 51 ++++++++++++++-
 .../dnb-ui-lib/src/style/core/scopes.scss     |  2 +-
 .../dnb-ui-lib/src/style/core/typography.scss | 22 +++----
 18 files changed, 196 insertions(+), 102 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
index ea3637b05c2..8c25b01d8f3 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
+++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -43,9 +43,7 @@ const Sidebar = styled.aside`
     max-height: calc(100vmin - 4em - 10px);
 
     margin: 0;
-    padding: 0;
-    padding-top: 2em;
-    padding-bottom: 1em;
+    padding: 2rem 0 1rem;
   }
 
   /*
@@ -89,6 +87,8 @@ const StyledListItem = styled.li`
     flex-direction: column;
     justify-content: center;
 
+    line-height: 1.5rem;
+
     /* external link icon */
     svg {
       float: right;
@@ -133,32 +133,6 @@ const StyledListItem = styled.li`
     font-size: 0.875em;
   }
 
-  .status-badge {
-    position: absolute;
-    right: 1.5rem;
-
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    padding: 2px 0 0;
-
-    height: 1.25rem;
-    width: 1.25rem;
-    border-radius: 50%;
-
-    background-color: var(--color-sea-green-alt-30);
-    color: var(--color-black);
-
-    font-size: 0.5rem;
-    font-weight: 300;
-    text-align: center;
-    text-transform: uppercase;
-  }
-  ${'' /* &.status-wip .status-badge {
-    color: red;
-  } */}
-
   &.active a {
     color: var(--color-ocean-green);
 
@@ -222,6 +196,38 @@ const StyledListItem = styled.li`
     animation: hide-mobile-menu 300ms cubic-bezier(0.19, 1, 0.22, 1) 1
       calc(10ms - var(--delay)) forwards;
   }
+
+  .status-badge {
+    position: absolute;
+    z-index: 2;
+    right: 1.5rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: baseline; /* then we can set line-height */
+
+    font-size: 0.4375rem;
+    line-height: 1.3125rem; /* same as height + 1px */
+    font-weight: 100;
+    text-align: center;
+    text-transform: uppercase;
+    color: var(--color-black);
+
+    /* bg */
+    height: 1.25rem;
+    width: 1.25rem;
+    border-radius: 50%;
+
+    background-color: var(--color-sea-green-alt-30);
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 1;
+    }
+  }
+  ${'' /* &.status-wip .status-badge {
+    color: red;
+  } */}
 `
 
 const showAlwaysMenuItems = [] // like "uilib" som someting like that
diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
index c9e62345bcd..2469f747aba 100644
--- a/packages/dnb-design-system-portal/src/shared/parts/Layout.js
+++ b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -17,7 +17,8 @@ import PropTypes from 'prop-types'
 import Sidebar from '../menu/SidebarMenu'
 import StickyMenuBar from '../menu/StickyMenuBar'
 import { markdownStyle } from './Markdown'
-import styled, { cx } from 'react-emotion'
+import styled from 'react-emotion'
+import classnames from 'classnames'
 import { buildVersion } from '../../../package.json'
 import { SidebarMenuProvider } from '../menu/SidebarMenuContext'
 
@@ -94,7 +95,7 @@ const Wrapper = styled.div`
 
 const Content = ({ className, children }) => (
   <Main
-    className={cx(
+    className={classnames(
       'dnb-style',
       'dnb-page-content',
       'dnb-no-focus',
diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
index 29dac60b6b0..3851368f94f 100644
--- a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
+++ b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
@@ -8,45 +8,6 @@ import bluegridSvg from '../../../static/assets/images/grid-32x32-blue.svg'
 import greygridSvg from '../../../static/assets/images/grid-32x32.svg'
 
 export default css`
-  /* TODO: Have to be moved into a seperate Table style sheet */
-  table {
-    display: block;
-    width: 100%;
-
-    overflow: auto;
-    margin-top: 0;
-    margin-bottom: 1rem;
-
-    border-spacing: 0;
-    border-collapse: collapse;
-    border-top: 8px solid var(--border-color);
-  }
-  table th {
-    font-weight: 600;
-    white-space: nowrap;
-  }
-  table th,
-  table td {
-    padding: 0.5rem 0.5rem 0.4375rem 0.5rem;
-
-    font-size: 1em;
-    line-height: 1rem;
-
-    border-bottom: 1px solid var(--border-color);
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-  }
-  table tr {
-    background-color: #fff;
-    border-top: 0;
-  }
-  table tr:nth-child(2n) {
-    background-color: var(--table-color);
-  }
-  table td {
-    white-space: nowrap;
-  }
-
   table td.selectable {
     position: relative;
     z-index: 1;
@@ -61,6 +22,9 @@ export default css`
     transform: scale(1.1);
     user-select: all;
   }
+  table td em {
+    padding-right: 0.5em;
+  }
 
   hr {
     box-sizing: content-box;
@@ -70,7 +34,7 @@ export default css`
 
     background: transparent;
     border: 0;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--color-black-border);
   }
 
   hr::before {
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
index 26ab8ad9b7b..30e30fd11e1 100644
--- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -253,6 +253,13 @@ exports[`Button scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -300,7 +307,7 @@ exports[`Button scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
index d4999da3050..104d27c8e57 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -237,6 +237,13 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -292,7 +299,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
@@ -442,7 +449,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-input *,
   .dnb-input ::before,
@@ -624,7 +631,7 @@ input[type='range']:focus {
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-dropdown *,
   .dnb-dropdown ::before,
diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
index f6b454a492c..53d284514cc 100644
--- a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -113,6 +113,13 @@ exports[`Icon scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index 9792456c231..d04640b3c60 100644
--- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -93,6 +93,13 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -148,7 +155,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
@@ -298,7 +305,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-input *,
   .dnb-input ::before,
@@ -480,7 +487,7 @@ input[type='range']:focus {
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-input-masked *,
   .dnb-input-masked ::before,
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
index 6ba987b51ef..a536b2d8a6a 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -179,6 +179,13 @@ exports[`Input scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -230,7 +237,7 @@ exports[`Input scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
@@ -380,7 +387,7 @@ exports[`Input scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-input *,
   .dnb-input ::before,
diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
index f196dac3b88..e52e1b4c099 100644
--- a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -96,6 +96,13 @@ exports[`Logo scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -111,7 +118,7 @@ exports[`Logo scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-logo *,
   .dnb-logo ::before,
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index 66415685a5b..e92f1014a78 100644
--- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -309,6 +309,13 @@ exports[`Modal scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -360,7 +367,7 @@ exports[`Modal scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-button *,
   .dnb-button ::before,
@@ -510,7 +517,7 @@ exports[`Modal scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-modal *,
   .dnb-modal ::before,
diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
index 1a09ce068dc..744cf5492ff 100644
--- a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -114,6 +114,13 @@ exports[`Slider scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -129,7 +136,7 @@ exports[`Slider scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-slider *,
   .dnb-slider ::before,
diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
index 99f85f1c5e7..353f03755e7 100644
--- a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -134,6 +134,13 @@ exports[`Switch scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -149,7 +156,7 @@ exports[`Switch scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-switch *,
   .dnb-switch ::before,
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
index d45b6b0204a..35bea02c5fb 100644
--- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -195,6 +195,13 @@ exports[`Tabs scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -210,7 +217,7 @@ exports[`Tabs scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-tabs *,
   .dnb-tabs ::before,
diff --git a/packages/dnb-ui-lib/src/patterns/article/style/_article.scss b/packages/dnb-ui-lib/src/patterns/article/style/_article.scss
index 9284a5232ff..cc63959af30 100644
--- a/packages/dnb-ui-lib/src/patterns/article/style/_article.scss
+++ b/packages/dnb-ui-lib/src/patterns/article/style/_article.scss
@@ -5,7 +5,6 @@
 
 .dnb-article {
   --border-color: #dfe2e5;
-  --table-color: #f6f8fa;
 
   p {
     margin-bottom: 1em;
diff --git a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
index dc763e23994..2fd80cde0af 100644
--- a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
+++ b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
@@ -70,6 +70,13 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
   font-weight: normal;
   font-style: normal; }
 
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal; }
+
 @font-face {
   font-family: 'Fedra Sans Std Demi';
   src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
@@ -85,7 +92,7 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333); }
   .dnb-view-title *,
   .dnb-view-title ::before,
diff --git a/packages/dnb-ui-lib/src/style/core/dnb-theme.scss b/packages/dnb-ui-lib/src/style/core/dnb-theme.scss
index 6e6daf4917f..75cec37807e 100644
--- a/packages/dnb-ui-lib/src/style/core/dnb-theme.scss
+++ b/packages/dnb-ui-lib/src/style/core/dnb-theme.scss
@@ -19,6 +19,9 @@
   --color-black-30: #b3b3b3;
   --color-white: #fff;
 
+  // Undefined
+  --color-black-border: #ebebeb;
+
   // Profile colors
   --color-sea-green: #007272;
   --color-mint-green: #a5e1d2;
@@ -145,6 +148,50 @@
     font-size: 1rem; // 16px
   }
 
+  table {
+    display: block;
+    width: 100%;
+
+    overflow: auto;
+    margin-top: 0;
+    margin-bottom: 1rem;
+
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+  table th,
+  table td {
+    white-space: nowrap;
+
+    // to make sure we have the ability to have a border where ever we want
+    border-bottom: 1px solid transparent;
+
+    font-size: 1em;
+    line-height: 1.5rem;
+  }
+  table th {
+    padding: 3rem 1rem 0.5rem;
+
+    font-weight: 600;
+    text-align: left;
+    color: var(--color-emerald-green);
+
+    background-color: var(--color-sea-green-4);
+    border-bottom: 1px solid var(--color-mint-green);
+  }
+  table td {
+    padding: 1.0625rem 1rem;
+    border-bottom: 1px solid transparent;
+
+    line-height: 1.5rem;
+  }
+  table tr {
+    background-color: #fff;
+  }
+  table tr:nth-child(2n) {
+    background-color: var(--color-sea-green-4);
+  }
+
   // General Layout and Spacing + some Styling
   *:not([class^='dnb-']) + {
     p {
@@ -272,8 +319,8 @@
       padding: 0.2em 0.4em;
 
       font-size: 0.875em;
-      background-color: rgba(27, 31, 35, 0.05);
-      border-radius: 3px;
+      background-color: var(--color-mint-green-25);
+      border-radius: 0.1875em;
     }
     pre,
     * pre {
diff --git a/packages/dnb-ui-lib/src/style/core/scopes.scss b/packages/dnb-ui-lib/src/style/core/scopes.scss
index 7c25b14a272..86e46d705c3 100644
--- a/packages/dnb-ui-lib/src/style/core/scopes.scss
+++ b/packages/dnb-ui-lib/src/style/core/scopes.scss
@@ -7,7 +7,7 @@
   font-size: 1rem;
   font-weight: normal;
   font-style: normal;
-  line-height: 1.5rem;
+  line-height: 1rem;
   color: var(--color-black-80, #333);
 
   @content;
diff --git a/packages/dnb-ui-lib/src/style/core/typography.scss b/packages/dnb-ui-lib/src/style/core/typography.scss
index 0e258574ee4..688e733567c 100644
--- a/packages/dnb-ui-lib/src/style/core/typography.scss
+++ b/packages/dnb-ui-lib/src/style/core/typography.scss
@@ -59,17 +59,17 @@ $fonts-path: '../../assets/fonts/' !default;
 
 // Font #1. Std Medium (our main fallback font with font weight 600 or more)
 // As we save over 70kB by just faking the medium font, we skip this
-// @font-face {
-//   font-family: 'Fedra Sans Std';
-//   src: url('#{$fonts-path}/FedraSansStd-Medium.eot');
-//   src: url('#{$fonts-path}/FedraSansStd-Medium.eot?#iefix')
-//       format('embedded-opentype'),
-//     url('#{$fonts-path}/FedraSansStd-Medium.woff2') format('woff2'),
-//     url('#{$fonts-path}/FedraSansStd-Medium.woff') format('woff'),
-//     url('#{$fonts-path}/FedraSansStd-Medium.ttf') format('truetype');
-//   font-weight: 600;
-//   font-style: normal;
-// }
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url('#{$fonts-path}/FedraSansStd-Medium.eot');
+  src: url('#{$fonts-path}/FedraSansStd-Medium.eot?#iefix')
+      format('embedded-opentype'),
+    url('#{$fonts-path}/FedraSansStd-Medium.woff2') format('woff2'),
+    url('#{$fonts-path}/FedraSansStd-Medium.woff') format('woff'),
+    url('#{$fonts-path}/FedraSansStd-Medium.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
 
 // Font #3. Demi
 @font-face {