style(Typography): added css variables needed for heading theming (#2348

) ## Summary Theming the typography requires us to add some more css variables. In particular, headings need some more granularity. Since there's no common css class for headings we have to generate a class/tag namespace that covers alle of typography. --------- Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · Jun 23, 2023 · 224d8b2 · 224d8b2 · vercel · Jun 23, 2023
1 parent 5f5ff8e
commit 224d8b2
Show file tree

Hide file tree

Showing 38 changed files with 510 additions and 287 deletions.
diff --git a/packages/dnb-design-system-portal/cypress/e2e/typography.cy.ts b/packages/dnb-design-system-portal/cypress/e2e/typography.cy.ts
@@ -141,7 +141,7 @@ describe('Typography for Sbanken', () => {
     cy.get('.typography-box > .dnb-h--xx-large').should(
       'have.css',
       'font-size',
-      '48px'
+      '50px'
     )
   })
 
@@ -150,7 +150,7 @@ describe('Typography for Sbanken', () => {
     cy.get('.typography-box > .dnb-h--x-large').should(
       'have.css',
       'font-size',
-      '34px'
+      '42px'
     )
   })
 
@@ -159,7 +159,7 @@ describe('Typography for Sbanken', () => {
     cy.get('.typography-box > .dnb-h--large').should(
       'have.css',
       'font-size',
-      '26px'
+      '34px'
     )
   })
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx
@@ -25,7 +25,7 @@ const Example = styled.div`
     margin: 0 !important;
   }
 `
-const Contrast = styled(Example)`
+const ContrastExample = styled(Example)`
   display: inline-block;
   padding: 0.5rem;
 
@@ -87,15 +87,15 @@ export const AnchorExampleStates = () => (
 
 export const AnchorExampleHelperClasses = () => (
   <Wrapper>
-    <ComponentBox hideCode scope={{ Example, Contrast }}>
-      <Contrast data-visual-test="anchor-contrast">
+    <ComponentBox hideCode scope={{ Example, ContrastExample }}>
+      <ContrastExample data-visual-test="anchor-contrast">
         <Anchor
           href="/uilib/components/anchor"
           className="dnb-anchor--contrast"
         >
           Contrast Style
         </Anchor>
-      </Contrast>
+      </ContrastExample>
       <Example>
         <Anchor
           href="/uilib/components/anchor"
@@ -185,19 +185,21 @@ export const AnchorExampleIcons = () => (
           href="/uilib/components/anchor"
           icon={<IconPrimary icon="question" />}
         >
-          Anchor with Icon left using a react element
+          Anchor with Icon left using a html/react element
         </Anchor>
       </Example>
       <Example data-visual-test="anchor-paragraph">
         <P>
-          text{' '}
+          text
+          {' '}
           <Anchor
             href="/uilib/components/anchor"
             icon="bell"
             iconPosition="right"
           >
             Inside a Paragraph
-          </Anchor>{' '}
+          </Anchor>
+          {' '}
           text
         </P>
       </Example>

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx
@@ -47,6 +47,8 @@ To force a specific state of style, use the following classes to do so:
 
 ### Anchor with icons
 
+Icons can be adde with the `icon` and `iconPosition` props. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).
+
 <AnchorExampleIcons />
 
 ### Anchor with `target="_blank"`

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/heading.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/heading.mdx
@@ -59,6 +59,7 @@ import { Heading } from '@dnb/eufemia/components'
 ```jsx
 import { H1, H2, ... } from '@dnb/eufemia'
 ```
+
 ### The most basic use of headings
 
 Just using the `H1, H2, etc.` components will give you the basic headings.
@@ -67,7 +68,7 @@ Just using the `H1, H2, etc.` components will give you the basic headings.
 
 ### Heading typography using React JSX
 
-The visual size of a heading can be customized using the `size` prop with values: `xx-large | x-large  | large  | medium  | basis  | small  | x-small`
+The visual size of a heading can be customized using the `size` prop with values: `xx-large | x-large | large | medium | basis | small | x-small`
 
 <HeadingTypographyExample />
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/heading/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/heading/Examples.tsx
@@ -56,9 +56,12 @@ export const HeadingModifiersExample = () => (
       <h2 className="dnb-h--large">
         Normal dnb-h--large <small>dnb-h--medium</small>
       </h2>
-      <h3 className="dnb-lead">
+      <h3 className="dnb-h--medium">
         Normal dnb-h--medium <small>dnb-h--basis</small>
       </h3>
+      <h3 className="dnb-lead">
+        Normal dnb-lead <small>small</small>
+      </h3>
     </article>
   </ComponentBox>
 )

diff --git a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts
@@ -419,8 +419,9 @@ describe('style build', () => {
 }`)
       expect(content).toContain(`
 .dnb-h--basis {
-  font-size: var(--font-size-basis);
-  line-height: var(--line-height-basis);
+  font-size: var(--typography-h-basis-font-size);
+  line-height: var(--typography-h-basis-line-height);
+  font-weight: var(--typography-h-basis-weight);
 }`)
     }
 
@@ -434,19 +435,15 @@ describe('style build', () => {
       )
       expect(content).toContain(`font-family: MaisonNeueHeadings;`)
       expect(content).toContain(`
-.dnb-h--basis {
-  font-size: var(--font-size-basis);
-  line-height: var(--line-height-basis);
-}`)
-      expect(content).toContain(`
 .dnb-p {
   font-size: var(--font-size-basis);
   padding: 0;
 }`)
       expect(content).toContain(`
 .dnb-h--basis {
-  font-size: var(--font-size-basis);
-  line-height: var(--line-height-basis);
+  font-size: var(--typography-h-basis-font-size);
+  line-height: var(--typography-h-basis-line-height);
+  font-weight: var(--typography-h-basis-weight);
 }`)
     }
 

diff --git a/...nb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap b/...nb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap
@@ -16,17 +16,19 @@ export default {
   '--sb-font-size-basis': '1rem',
   '--sb-font-size-basis--em': '1em',
   '--sb-font-size-lead': '1.25rem',
-  '--sb-font-size-large': '1.625rem',
-  '--sb-font-size-x-large': '2.125rem',
-  '--sb-font-size-xx-large': '3rem',
+  '--sb-font-size-medium': '1.625rem',
+  '--sb-font-size-large': '2.125rem',
+  '--sb-font-size-x-large': '2.625rem',
+  '--sb-font-size-xx-large': '3.125rem',
   '--sb-line-height-x-small': '1.125rem',
   '--sb-line-height-small': '1.25rem',
   '--sb-line-height-basis': '1.5rem',
   '--sb-line-height-basis--em': '1.5em',
   '--sb-line-height-lead': '1.75rem',
   '--sb-line-height-medium': '2rem',
   '--sb-line-height-large': '2.5rem',
-  '--sb-line-height-x-large': '3.5rem',
+  '--sb-line-height-x-large': '3rem',
+  '--sb-line-height-xx-large': '3.5rem',
   '--sb-color-black': '#000',
   '--sb-color-text': '#18172a',
   '--sb-color-gray-dark-3': '#3a3970',
@@ -109,6 +111,7 @@ export default {
   '--font-size-small': '1rem',
   '--font-size-basis': '1.125rem',
   '--font-size-basis--em': '1em',
+  '--font-size-lead': 'var(--font-size-medium)',
   '--font-size-medium': '1.25rem',
   '--font-size-large': '1.625rem',
   '--font-size-x-large': '2.125rem',
@@ -122,6 +125,7 @@ export default {
   '--line-height-medium': '2rem',
   '--line-height-large': '2.5rem',
   '--line-height-x-large': '3.5rem',
+  '--line-height-xx-large': 'var(--line-height-x-large)',
   '--color-mint-green-50': '#d2f0e9',
   '--color-mint-green-25': '#e9f8f4',
   '--color-mint-green-12': '#f4fbf9',

diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts
@@ -69,9 +69,6 @@ describe.each(['ui', 'sbanken'])('Anchor for %s', (themeName) => {
   it('have to match anchor in heading', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="anchor-heading"]',
-      matchConfig: {
-        failureThreshold: 0.0016,
-      },
     })
     expect(screenshot).toMatchImageSnapshot()
   })

diff --git a/...__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-in-heading.snap.png b/...__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-in-heading.snap.png
diff --git a/...age_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-icon-node.snap.png b/...age_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-icon-node.snap.png
diff --git a/...age_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-paragraph.snap.png b/...age_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-paragraph.snap.png
diff --git a/.../__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-node.snap.png b/.../__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-node.snap.png
diff --git a/...-target-blank-for-sbanken-have-to-match-blank-target-anchor-in-heading.snap.png b/...-target-blank-for-sbanken-have-to-match-blank-target-anchor-in-heading.snap.png
diff --git a/packages/dnb-eufemia/src/components/logo/__tests__/Logo.screenshot.test.ts b/packages/dnb-eufemia/src/components/logo/__tests__/Logo.screenshot.test.ts
@@ -16,6 +16,9 @@ describe.each(['ui', 'sbanken'])('Logo for %s', (themeName) => {
   it('have to match the default "Logo"', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="logo-default"]',
+      matchConfig: {
+        failureThreshold: 0.19,
+      },
     })
     expect(screenshot).toMatchImageSnapshot()
   })

diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/Heading.screenshot.test.ts b/packages/dnb-eufemia/src/elements/typography/__tests__/Heading.screenshot.test.ts
@@ -32,8 +32,7 @@ describe.each(['ui', 'sbanken', 'eiendom'])(
   }
 )
 
-
-describe.each(['ui', 'sbanken'])(
+describe.each(['ui', 'sbanken', 'eiendom'])(
   'Heading for %s',
   (themeName) => {
     setupPageScreenshot({

diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/Paragraph.screenshot.test.ts b/packages/dnb-eufemia/src/elements/typography/__tests__/Paragraph.screenshot.test.ts
@@ -38,24 +38,24 @@ describe.each(['ui', 'sbanken'])('Paragraph for %s', (themeName) => {
   it('have to match the paragraph with additional elements', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="paragraph-additional"]',
+      matchConfig: {
+        failureThreshold: 0.0099, // the underlines gets blurry in the build version
+      },
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 })
 
-describe.each(['ui', 'sbanken'])(
-  'Paragraph for %s',
-  (themeName) => {
-    setupPageScreenshot({
-      themeName,
-      url: '/uilib/elements/paragraph',
-    })
+describe.each(['ui', 'sbanken'])('Paragraph for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/elements/paragraph',
+  })
 
-    it('matches all sizes and weights', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="paragraph-sizes"]',
-      })
-      expect(screenshot).toMatchImageSnapshot()
+  it('matches all sizes and weights', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="paragraph-sizes"]',
     })
-  }
-)
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/...ts__/heading-for-eiendom-have-to-match-the-additional-heading-examples.snap.png b/...ts__/heading-for-eiendom-have-to-match-the-additional-heading-examples.snap.png
diff --git a/...__image_snapshots__/heading-for-eiendom-matches-all-sizes-and-variants.snap.png b/...__image_snapshots__/heading-for-eiendom-matches-all-sizes-and-variants.snap.png
diff --git a/...ts__/heading-for-sbanken-have-to-match-the-additional-heading-examples.snap.png b/...ts__/heading-for-sbanken-have-to-match-the-additional-heading-examples.snap.png
diff --git a/...shots__/heading-for-sbanken-have-to-match-the-default-heading-examples.snap.png b/...shots__/heading-for-sbanken-have-to-match-the-default-heading-examples.snap.png
diff --git a/...__image_snapshots__/heading-for-sbanken-matches-all-sizes-and-variants.snap.png b/...__image_snapshots__/heading-for-sbanken-matches-all-sizes-and-variants.snap.png
diff --git a/...apshots__/heading-for-ui-have-to-match-the-additional-heading-examples.snap.png b/...apshots__/heading-for-ui-have-to-match-the-additional-heading-examples.snap.png
diff --git a/..._image_snapshots__/paragraph-for-sbanken-matches-all-sizes-and-weights.snap.png b/..._image_snapshots__/paragraph-for-sbanken-matches-all-sizes-and-weights.snap.png
diff --git a/...ots__/typography-for-sbanken-have-to-match-all-the-typography-variants.snap.png b/...ots__/typography-for-sbanken-have-to-match-all-the-typography-variants.snap.png
diff --git a/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss b/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss
@@ -6,6 +6,69 @@
 @use '../../../style/elements/ui-spacing.scss';
 @import './typography-mixins.scss';
 
+@include typographySelectors() {
+  --typography-h-default-font-family: var(--font-family-default);
+  --typography-h-default-font-weight: var(--font-weight-medium);
+
+  // Heading xx-large
+  --typography-h-xx-large-font-size: var(--font-size-xx-large);
+  --typography-h-xx-large-line-height: var(--line-height-xx-large);
+  --typography-h-xx-large-small-font-size: var(--font-size-x-large);
+  --typography-h-xx-large-small-line-height: var(--line-height-x-large);
+  --typography-h-xx-large-weight: var(--font-weight-medium);
+
+  // Heading x-large
+  --typography-h-x-large-font-size: var(--font-size-x-large);
+  --typography-h-x-large-line-height: var(--line-height-x-large);
+  --typography-h-x-large-small-font-size: var(--font-size-large);
+  --typography-h-x-large-small-line-height: var(--line-height-large);
+  --typography-h-x-large-weight: var(--font-weight-medium);
+
+  // Heading large
+  --typography-h-large-font-size: var(--font-size-large);
+  --typography-h-large-line-height: var(--line-height-large);
+  --typography-h-large-small-font-size: var(--font-size-medium);
+  --typography-h-large-small-line-height: var(--line-height-medium);
+  --typography-h-large-weight: var(--font-weight-medium);
+
+  // Lead
+  --typography-lead-font-size: var(--font-size-lead);
+  --typography-lead-line-height: var(--line-height-lead);
+  --typography-lead-small-font-size: var(--font-size-lead);
+  --typography-lead-small-line-height: var(--line-height-lead);
+  --typography-lead-weight: var(--font-weight-medium);
+
+  // Heading medium
+  --typography-h-medium-font-size: var(--font-size-medium);
+  --typography-h-medium-line-height: var(--line-height-medium);
+  --typography-h-medium-small-font-size: var(--font-size-basis);
+  --typography-h-medium-small-line-height: var(--line-height-basis);
+  --typography-h-medium-weight: var(--font-weight-medium);
+
+  // Heading basis
+  --typography-h-basis-font-size: var(--font-size-basis);
+  --typography-h-basis-line-height: var(--line-height-basis);
+  --typography-h-basis-small-font-size: var(--font-size-small);
+  --typography-h-basis-small-line-height: var(--line-height-small);
+  --typography-h-basis-weight: var(--font-weight-medium);
+
+  // Heading small
+  --typography-h-small-font-size: var(--font-size-small);
+  --typography-h-small-line-height: var(--line-height-small);
+  --typography-h-small-small-font-size: var(--font-size-x-small);
+  --typography-h-small-small-line-height: var(--line-height-x-small);
+  --typography-h-small-weight: var(--font-weight-medium);
+
+  // Heading x-small
+  --typography-h-x-small-font-size: var(--font-size-x-small);
+  --typography-h-x-small-line-height: var(--line-height-x-small);
+  --typography-h-x-small-weight: var(--font-weight-medium);
+}
+
+@include headingClasses() {
+  @include headingDefaults();
+}
+
 .dnb-small {
   font-size: var(--font-size-small);
 }
@@ -48,11 +111,12 @@ sub {
   @include headingSize_large();
 }
 
-/* dnb-h--medium looks the same as .dnb-lead */
-.dnb-lead,
+.dnb-lead {
+  @include typography_lead();
+}
+
 .dnb-h--medium {
   @include headingSize_medium();
-  font-weight: var(--font-weight-medium);
 }
 
 // The rest of the Headings are nod defned by the Eufemia Typography
@@ -68,27 +132,6 @@ sub {
   @include headingSize_x-small();
 }
 
-// Headings
-.dnb-lead,
-.dnb-h--xx-large,
-.dnb-h--x-large,
-.dnb-h--large,
-.dnb-h--medium,
-.dnb-h--basis,
-.dnb-h--small,
-.dnb-h--x-small,
-// make exception on headings which are inside of dnb-core-style
-.dnb-core-style .dnb-lead,
-.dnb-core-style .dnb-h--xx-large,
-.dnb-core-style .dnb-h--x-large,
-.dnb-core-style .dnb-h--large,
-.dnb-core-style .dnb-h--medium,
-.dnb-core-style .dnb-h--basis,
-.dnb-core-style .dnb-h--small,
-.dnb-core-style .dnb-h--x-small {
-  @include headingDefaults();
-}
-
 // Spacing
 .dnb-spacing {
   .dnb-h--xx-large,

diff --git a/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-eiendom.scss b/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-eiendom.scss
@@ -0,0 +1,11 @@
+@use '../typography-mixins.scss' as typography;
+
+@include typography.typographySelectors() {
+  --typography-h-xx-large-weight: var(--font-weight-regular);
+  --typography-h-x-large-weight: var(--font-weight-regular);
+  --typography-h-large-weight: var(--font-weight-regular);
+  --typography-h-medium-weight: var(--font-weight-regular);
+  --typography-h-basis-weight: var(--font-weight-regular);
+  --typography-h-small-weight: var(--font-weight-regular);
+  --typography-h-x-small-weight: var(--font-weight-regular);
+}