diff --git a/packages/dnb-design-system-portal/cypress/e2e/typography.cy.ts b/packages/dnb-design-system-portal/cypress/e2e/typography.cy.ts index c0daf25d5c5..7bfef0663f8 100644 --- 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 index 1e9c7de51f1..29ddaf98c10 100644 --- 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 = () => ( - - + + Contrast Style - + ( href="/uilib/components/anchor" icon={} > - Anchor with Icon left using a react element + Anchor with Icon left using a html/react element

- text{' '} + text + {' '} Inside a Paragraph - {' '} + + {' '} text

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 index c473795d53a..5715e2c5978 100644 --- 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). + ### 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 index e1a8e34c16d..fd0186026e1 100644 --- 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` 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 index 1d6cd643111..d97e6c87ca7 100644 --- 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 = () => (

Normal dnb-h--large dnb-h--medium

-

+

Normal dnb-h--medium dnb-h--basis

+

+ Normal dnb-lead small +

) diff --git a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts index 27a2b2b71c8..e745c93fa04 100644 --- 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/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap index 57faf15624f..2a87b49424d 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap @@ -16,9 +16,10 @@ 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', @@ -26,7 +27,8 @@ export default { '--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 index 921765bd09f..81ef793322c 100644 --- 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/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-in-heading.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-in-heading.snap.png index e87d6225980..f3aae3314e2 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-in-heading.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-in-heading.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-icon-node.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-icon-node.snap.png index 15f417ae121..0a7d12dbd77 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-icon-node.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-icon-node.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-paragraph.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-paragraph.snap.png index b7ed3b73554..0d00b781c8b 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-paragraph.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-anchor-with-paragraph.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-node.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-node.snap.png index 25199b1230c..1f3209ded42 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-node.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-node.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-sbanken-have-to-match-blank-target-anchor-in-heading.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-sbanken-have-to-match-blank-target-anchor-in-heading.snap.png index 74e3ff6d3cc..259d0736132 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-sbanken-have-to-match-blank-target-anchor-in-heading.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-target-blank-for-sbanken-have-to-match-blank-target-anchor-in-heading.snap.png differ 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 index 0aae93124ac..630b213e8a5 100644 --- 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 index beb3bf5b47a..caf11955443 100644 --- 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 index 81470ac1d19..dde88c9ed42 100644 --- 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/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-eiendom-have-to-match-the-additional-heading-examples.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-eiendom-have-to-match-the-additional-heading-examples.snap.png index d58273dcdce..987a539f4ef 100644 Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-eiendom-have-to-match-the-additional-heading-examples.snap.png and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-eiendom-have-to-match-the-additional-heading-examples.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-eiendom-matches-all-sizes-and-variants.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-eiendom-matches-all-sizes-and-variants.snap.png new file mode 100644 index 00000000000..e4215c7911d Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-eiendom-matches-all-sizes-and-variants.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-have-to-match-the-additional-heading-examples.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-have-to-match-the-additional-heading-examples.snap.png index dc8d1b94729..c51bd444448 100644 Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-have-to-match-the-additional-heading-examples.snap.png and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-have-to-match-the-additional-heading-examples.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-have-to-match-the-default-heading-examples.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-have-to-match-the-default-heading-examples.snap.png index a0766d03cb6..436a44934a3 100644 Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-have-to-match-the-default-heading-examples.snap.png and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-have-to-match-the-default-heading-examples.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-matches-all-sizes-and-variants.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-matches-all-sizes-and-variants.snap.png index 6374b5713bc..50d26044620 100644 Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-matches-all-sizes-and-variants.snap.png and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-sbanken-matches-all-sizes-and-variants.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-ui-have-to-match-the-additional-heading-examples.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-ui-have-to-match-the-additional-heading-examples.snap.png index c617f442b41..7c297a7f38e 100644 Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-ui-have-to-match-the-additional-heading-examples.snap.png and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/heading-for-ui-have-to-match-the-additional-heading-examples.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-matches-all-sizes-and-weights.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-matches-all-sizes-and-weights.snap.png index 1323eb565d1..3035a7fb0d4 100644 Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-matches-all-sizes-and-weights.snap.png and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-matches-all-sizes-and-weights.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/typography-for-sbanken-have-to-match-all-the-typography-variants.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/typography-for-sbanken-have-to-match-all-the-typography-variants.snap.png index 133f48571c3..55a243ed633 100644 Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/typography-for-sbanken-have-to-match-all-the-typography-variants.snap.png and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/typography-for-sbanken-have-to-match-all-the-typography-variants.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss b/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss index 23b66a60689..cee39fa8e81 100644 --- 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 new file mode 100644 index 00000000000..9bcb79e6c77 --- /dev/null +++ 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); +} diff --git a/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss b/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss index 0c25fe6c3e7..d7cc3400c34 100644 --- a/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss +++ b/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss @@ -14,3 +14,14 @@ @include typography.headingClasses() { color: var(--sb-color-text); } + +@include typography.typographySelectors() { + --typography-h-default-font-family: var(--sb-font-family-headings); + --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-lead-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); +} diff --git a/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-ui.scss b/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-ui.scss index 2efad00bcc9..ada9e13f43a 100644 --- a/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-ui.scss +++ b/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-ui.scss @@ -14,6 +14,20 @@ color: var(--theme-color-black-80, currentColor); } +@include typography.typographySelectors() { + --typography-h-xx-large-small-line-height: var(--line-height-large); + --typography-h-x-large-line-height: var(--line-height-large); + --typography-h-x-large-small-font-size: var(--font-size-x-large); + --typography-h-large-line-height: var(--line-height-medium); + --typography-h-large-small-line-height: calc( + var(--line-height-medium) - 0.125rem + ); + --typography-lead-small-font-size: var(--font-size-basis); + --typography-lead-small-line-height: var(--line-height-basis); + --typography-h-medium-line-height: var(--line-height-lead); + --typography-h-small-small-line-height: var(--line-height-small); +} + $useClasses: true !default; @if $useClasses { .dnb-p { diff --git a/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss b/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss index 8a723e5d1b2..242aa2892b9 100644 --- a/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss +++ b/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss @@ -1,5 +1,26 @@ @use '../../../style/elements/ui-spacing.scss'; +// includes all classes, tags, etc. needed for "global" typography rules (like css variables) +@mixin typographySelectors() { + @include headingClasses() { + $selectors: &; + @at-root { + @include headingTags() { + $selectors: #{$selectors}, &; + @at-root { + @include otherSelectos() { + $selectors: #{$selectors}, &; + + @at-root #{$selectors} { + @content; + } + } + } + } + } + } +} + @mixin headingTags() { h1, h2, @@ -33,6 +54,39 @@ } } +@mixin otherSelectos() { + p, + b, + small, + strong, + .dnb-p, + .dnb-small, + .dnb-table, + sub, + sup { + @content; + } +} + +@mixin headingStyle( + $size, + $line, + $smallSize: null, + $smallLine: null, + $weight: null +) { + font-size: $size; + line-height: $line; + font-weight: $weight; + + & > small { + font-size: $smallSize; + line-height: $smallLine; + } + + @content; +} + @mixin headingDefaults() { padding: 0; @@ -40,8 +94,7 @@ margin: 0; } - font-family: var(--font-family-default); - font-weight: var(--font-weight-medium); + font-family: var(--typography-h-default-font-family); // make icons inside heading responsive to the heading size .dnb-icon--default { @@ -65,87 +118,105 @@ } @mixin headingSize_xx-large() { - font-size: var(--font-size-xx-large); - line-height: var(--line-height-x-large); - - & > small { - display: block; - font-size: var(--font-size-x-large); - line-height: var(--line-height-large); - } - - @if mixin-exists('headingSize_xx-largeCustomisation') { - @include headingSize_xx-largeCustomisation(); + @include headingStyle( + var(--typography-h-xx-large-font-size), + var(--typography-h-xx-large-line-height), + var(--typography-h-xx-large-small-font-size), + var(--typography-h-xx-large-small-line-height), + var(--typography-h-xx-large-weight) + ) { + & > small { + display: block; + } + @content; } } @mixin headingSize_x-large() { - font-size: var(--font-size-x-large); - line-height: var(--line-height-large); - - & > small { - display: block; - font-size: var(--font-size-x-large); - line-height: var(--line-height-large); - } - - @if mixin-exists('headingSize_x-largeCustomisation') { - @include headingSize_x-largeCustomisation(); + @include headingStyle( + var(--typography-h-x-large-font-size), + var(--typography-h-x-large-line-height), + var(--typography-h-x-large-small-font-size), + var(--typography-h-x-large-small-line-height), + var(--typography-h-x-large-weight) + ) { + & > small { + display: block; + } + @content; } } @mixin headingSize_large() { - font-size: var(--font-size-large); - line-height: var(--line-height-medium); - - & > small { - font-size: var(--font-size-medium); - line-height: calc(var(--line-height-medium) - 0.125rem); + @include headingStyle( + var(--typography-h-large-font-size), + var(--typography-h-large-line-height), + var(--typography-h-large-small-font-size), + var(--typography-h-large-small-line-height), + var(--typography-h-large-weight) + ) { + @content; } +} - @if mixin-exists('headingSize_largeCustomisation') { - @include headingSize_largeCustomisation(); +@mixin typography_lead() { + @include headingStyle( + var(--typography-lead-font-size), + var(--typography-lead-line-height), + var(--typography-lead-small-font-size), + var(--typography-lead-small-line-height), + var(--typography-lead-weight) + ) { + @content; } } -// Like Lead / --lead @mixin headingSize_medium() { - font-size: var(--font-size-medium); - line-height: var(--line-height-lead); - - & > small { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); - } - - @if mixin-exists('headingSize_mediumCustomisation') { - @include headingSize_mediumCustomisation(); + @include headingStyle( + var(--typography-h-medium-font-size), + var(--typography-h-medium-line-height), + var(--typography-h-medium-small-font-size), + var(--typography-h-medium-small-line-height), + var(--typography-h-medium-weight) + ) { + @content; } } @mixin headingSize_basis() { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); - - & > small { - font-size: var(--font-size-small); - line-height: var(--line-height-small); + @include headingStyle( + var(--typography-h-basis-font-size), + var(--typography-h-basis-line-height), + var(--typography-h-basis-small-font-size), + var(--typography-h-basis-small-line-height), + var(--typography-h-basis-weight) + ) { + @content; } } @mixin headingSize_small() { - font-size: var(--font-size-small); - line-height: var(--line-height-small); - - & > small { - font-size: var(--font-size-x-small); - line-height: var(--line-height-small); + @include headingStyle( + var(--typography-h-small-font-size), + var(--typography-h-small-line-height), + var(--typography-h-small-small-font-size), + var(--typography-h-small-small-line-height), + var(--typography-h-small-weight) + ) { + @content; } } @mixin headingSize_x-small() { - font-size: var(--font-size-x-small); - line-height: var(--line-height-x-small); + @include headingStyle( + var(--typography-h-x-small-font-size), + var(--typography-h-x-small-line-height), + null, + null, + var(--typography-h-x-small-weight) + ) { + @content; + } } @mixin paragraphStyle() { @@ -162,8 +233,7 @@ padding: 0; &--lead { - @include headingSize_medium(); - font-weight: var(--font-weight-medium); + @include typography_lead(); } &--medium { @@ -181,7 +251,7 @@ &__size--xx-large { font-size: var(--font-size-xx-large); - line-height: var(--line-height-x-large); + line-height: var(--line-height-xx-large); } &__size--x-large { diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap index fc63fd77f0c..6ff34e8fc2d 100644 --- a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap +++ b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap @@ -573,147 +573,47 @@ del .dnb-code { * Mainly only the margins are defined in here * */ -.dnb-small { - font-size: var(--font-size-small); -} - -sup, -sub { - font-size: 0.777777em; - line-height: 0.5em; -} - -.dnb-p { - font-size: var(--font-size-basis); - padding: 0; -} -.dnb-p:not([class*=space__top]) { - margin-top: 0; -} -.dnb-p:not([class*=space__bottom]) { - margin-bottom: 0; -} -.dnb-p--lead { - font-size: var(--font-size-medium); - line-height: var(--line-height-lead); - font-weight: var(--font-weight-medium); -} -.dnb-p--lead > small { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); -} -.dnb-p--medium { - font-weight: var(--font-weight-medium); -} -.dnb-p b, -.dnb-p strong { - font-weight: var(--font-weight-medium); -} -.dnb-p--bold { - font-weight: var(--font-weight-bold); -} -.dnb-p__size--xx-large { - font-size: var(--font-size-xx-large); - line-height: var(--line-height-x-large); -} -.dnb-p__size--x-large { - font-size: var(--font-size-x-large); - line-height: var(--line-height-x-large); -} -.dnb-p__size--large { - font-size: var(--font-size-large); - line-height: var(--line-height-large); -} -.dnb-p__size--basis { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); -} -.dnb-p__size--medium { - font-size: var(--font-size-medium); - line-height: var(--line-height-medium); -} -.dnb-p--small, .dnb-p__size--small, .dnb-p > small { - font-size: var(--font-size-small); - line-height: var(--line-height-small); -} -.dnb-p--x-small, .dnb-p__size--x-small { - font-size: var(--font-size-x-small); - line-height: var(--line-height-x-small); -} -.dnb-p > cite { - font-weight: var(--font-weight-medium); - line-height: var(--line-height-basis); - font-style: italic; -} - -.dnb-table b, -.dnb-table strong { - font-weight: var(--font-weight-medium); -} - -.dnb-h--xx-large { - font-size: var(--font-size-xx-large); - line-height: var(--line-height-x-large); -} -.dnb-h--xx-large > small { - display: block; - font-size: var(--font-size-x-large); - line-height: var(--line-height-large); -} - -.dnb-h--x-large { - font-size: var(--font-size-x-large); - line-height: var(--line-height-large); -} -.dnb-h--x-large > small { - display: block; - font-size: var(--font-size-x-large); - line-height: var(--line-height-large); -} - -.dnb-h--large { - font-size: var(--font-size-large); - line-height: var(--line-height-medium); -} -.dnb-h--large > small { - font-size: var(--font-size-medium); - line-height: calc(var(--line-height-medium) - 0.125rem); -} - -/* dnb-h--medium looks the same as .dnb-lead */ -.dnb-lead, -.dnb-h--medium { - font-size: var(--font-size-medium); - line-height: var(--line-height-lead); - font-weight: var(--font-weight-medium); -} -.dnb-lead > small, -.dnb-h--medium > small { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); -} - -.dnb-h--basis { - font-size: var(--font-size-basis); - line-height: var(--line-height-basis); -} -.dnb-h--basis > small { - font-size: var(--font-size-small); - line-height: var(--line-height-small); -} - -.dnb-h--small { - font-size: var(--font-size-small); - line-height: var(--line-height-small); -} -.dnb-h--small > small { - font-size: var(--font-size-x-small); - line-height: var(--line-height-small); -} - -.dnb-h--x-small { - font-size: var(--font-size-x-small); - line-height: var(--line-height-x-small); +.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, .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, h1, h2, h3, h4, h5, h6, p, b, small, strong, .dnb-p, .dnb-small, .dnb-table, sub, sup { + --typography-h-default-font-family: var(--font-family-default); + --typography-h-default-font-weight: var(--font-weight-medium); + --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); + --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); + --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); + --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); + --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); + --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); + --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); + --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); } .dnb-lead, @@ -733,8 +633,7 @@ sub { .dnb-core-style .dnb-h--small, .dnb-core-style .dnb-h--x-small { padding: 0; - font-family: var(--font-family-default); - font-weight: var(--font-weight-medium); + font-family: var(--typography-h-default-font-family); } .dnb-lead:not([class*=dnb-space]), .dnb-h--xx-large:not([class*=dnb-space]), @@ -826,6 +725,165 @@ sub { padding-bottom: 0.03125rem; } +.dnb-small { + font-size: var(--font-size-small); +} + +sup, +sub { + font-size: 0.777777em; + line-height: 0.5em; +} + +.dnb-p { + font-size: var(--font-size-basis); + padding: 0; +} +.dnb-p:not([class*=space__top]) { + margin-top: 0; +} +.dnb-p:not([class*=space__bottom]) { + margin-bottom: 0; +} +.dnb-p--lead { + font-size: var(--typography-lead-font-size); + line-height: var(--typography-lead-line-height); + font-weight: var(--typography-lead-weight); +} +.dnb-p--lead > small { + font-size: var(--typography-lead-small-font-size); + line-height: var(--typography-lead-small-line-height); +} +.dnb-p--medium { + font-weight: var(--font-weight-medium); +} +.dnb-p b, +.dnb-p strong { + font-weight: var(--font-weight-medium); +} +.dnb-p--bold { + font-weight: var(--font-weight-bold); +} +.dnb-p__size--xx-large { + font-size: var(--font-size-xx-large); + line-height: var(--line-height-xx-large); +} +.dnb-p__size--x-large { + font-size: var(--font-size-x-large); + line-height: var(--line-height-x-large); +} +.dnb-p__size--large { + font-size: var(--font-size-large); + line-height: var(--line-height-large); +} +.dnb-p__size--basis { + font-size: var(--font-size-basis); + line-height: var(--line-height-basis); +} +.dnb-p__size--medium { + font-size: var(--font-size-medium); + line-height: var(--line-height-medium); +} +.dnb-p--small, .dnb-p__size--small, .dnb-p > small { + font-size: var(--font-size-small); + line-height: var(--line-height-small); +} +.dnb-p--x-small, .dnb-p__size--x-small { + font-size: var(--font-size-x-small); + line-height: var(--line-height-x-small); +} +.dnb-p > cite { + font-weight: var(--font-weight-medium); + line-height: var(--line-height-basis); + font-style: italic; +} + +.dnb-table b, +.dnb-table strong { + font-weight: var(--font-weight-medium); +} + +.dnb-h--xx-large { + font-size: var(--typography-h-xx-large-font-size); + line-height: var(--typography-h-xx-large-line-height); + font-weight: var(--typography-h-xx-large-weight); +} +.dnb-h--xx-large > small { + font-size: var(--typography-h-xx-large-small-font-size); + line-height: var(--typography-h-xx-large-small-line-height); +} +.dnb-h--xx-large > small { + display: block; +} + +.dnb-h--x-large { + font-size: var(--typography-h-x-large-font-size); + line-height: var(--typography-h-x-large-line-height); + font-weight: var(--typography-h-x-large-weight); +} +.dnb-h--x-large > small { + font-size: var(--typography-h-x-large-small-font-size); + line-height: var(--typography-h-x-large-small-line-height); +} +.dnb-h--x-large > small { + display: block; +} + +.dnb-h--large { + font-size: var(--typography-h-large-font-size); + line-height: var(--typography-h-large-line-height); + font-weight: var(--typography-h-large-weight); +} +.dnb-h--large > small { + font-size: var(--typography-h-large-small-font-size); + line-height: var(--typography-h-large-small-line-height); +} + +.dnb-lead { + font-size: var(--typography-lead-font-size); + line-height: var(--typography-lead-line-height); + font-weight: var(--typography-lead-weight); +} +.dnb-lead > small { + font-size: var(--typography-lead-small-font-size); + line-height: var(--typography-lead-small-line-height); +} + +.dnb-h--medium { + font-size: var(--typography-h-medium-font-size); + line-height: var(--typography-h-medium-line-height); + font-weight: var(--typography-h-medium-weight); +} +.dnb-h--medium > small { + font-size: var(--typography-h-medium-small-font-size); + line-height: var(--typography-h-medium-small-line-height); +} + +.dnb-h--basis { + font-size: var(--typography-h-basis-font-size); + line-height: var(--typography-h-basis-line-height); + font-weight: var(--typography-h-basis-weight); +} +.dnb-h--basis > small { + font-size: var(--typography-h-basis-small-font-size); + line-height: var(--typography-h-basis-small-line-height); +} + +.dnb-h--small { + font-size: var(--typography-h-small-font-size); + line-height: var(--typography-h-small-line-height); + font-weight: var(--typography-h-small-weight); +} +.dnb-h--small > small { + font-size: var(--typography-h-small-small-font-size); + line-height: var(--typography-h-small-small-line-height); +} + +.dnb-h--x-small { + font-size: var(--typography-h-x-small-font-size); + line-height: var(--typography-h-x-small-line-height); + font-weight: var(--typography-h-x-small-weight); +} .dnb-spacing .dnb-h--xx-large:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*=space__top]) { margin-top: 3rem; } diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-basis.scss b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-basis.scss index b0f51b79664..b005a69d6ca 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-basis.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-basis.scss @@ -17,13 +17,7 @@ background-color: var(--color-pistachio); } -// change heading to not use medium -@mixin headingDefaultsCustomisation() { - font-weight: var(--font-weight-basis); -} - -@import './properties.scss'; - // import the default theme, and go from there // will also have all the component themes included @import '../theme-ui/ui-theme-basis.scss'; +@import './eiendom-theme-elements.scss'; diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-elements.scss b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-elements.scss index 233f4ac43c2..1b5592e4f40 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-elements.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-elements.scss @@ -3,12 +3,14 @@ * */ + // import the default theme, and go from there // will also have all the component themes included -@import '../theme-ui/ui-theme-elements.scss'; /** ATTENTION: This file is auto generated by using "styleFactory". Do not change the content above! All the themes get auto generated in here. */ + +@import '../../../elements/typography/style/themes/dnb-typography-theme-eiendom.scss'; diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js b/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js index 66e2114a7d7..06671cd3cdd 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js +++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js @@ -12,6 +12,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', @@ -25,6 +26,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/style/themes/theme-sbanken/properties.js b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js index dbdd35fe8c8..e5d98b5fa4b 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js +++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js @@ -13,9 +13,10 @@ 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', @@ -23,7 +24,8 @@ export default { '--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', diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss index 45deefb213f..c174d6cc0a8 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss @@ -23,9 +23,10 @@ --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; // Typography Line heights --sb-line-height-x-small: 1.125rem; @@ -35,7 +36,8 @@ --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; // UX colors --sb-color-black: #000; diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/theme-mapping.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/theme-mapping.scss index 92494076a68..ce74a0c142b 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/theme-mapping.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/theme-mapping.scss @@ -16,6 +16,7 @@ --font-size-basis: var(--sb-font-size-basis); --font-size-basis--em: var(--sb-font-size-basis--em); --font-size-lead: var(--sb-font-size-lead); + --font-size-medium: var(--sb-font-size-medium); --font-size-large: var(--sb-font-size-large); --font-size-x-large: var(--sb-font-size-x-large); --font-size-xx-large: var(--sb-font-size-xx-large); @@ -29,6 +30,7 @@ --line-height-medium: var(--sb-line-height-medium); --line-height-large: var(--sb-line-height-large); --line-height-x-large: var(--sb-line-height-x-large); + --line-height-xx-large: var(--sb-line-height-xx-large); // Form properties --focus-ring-width: 0.1875rem; diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js index 24abc951982..8a64f4bbb4f 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js +++ b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js @@ -12,6 +12,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', @@ -25,6 +26,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/style/themes/theme-ui/properties.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss index debf04cc4d8..ddd5d4e5599 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss @@ -22,6 +22,7 @@ --font-size-small: 1rem; // 16px --font-size-basis: 1.125rem; // 18px --font-size-basis--em: 1em; // 16px + --font-size-lead: var(--font-size-medium); // 20px --font-size-medium: 1.25rem; // 20px --font-size-large: 1.625rem; // 26px --font-size-x-large: 2.125rem; // 34px @@ -37,6 +38,7 @@ --line-height-medium: 2rem; // 32px --line-height-large: 2.5rem; // 40px --line-height-x-large: 3.5rem; // 56px + --line-height-xx-large: var(--line-height-x-large); // 56px // UX colors --color-mint-green-50: #d2f0e9;