fix(Typography): match medium heading font size in Sbanken theme (#4039)

The css variable `--font-size-medium` is markedly larger in Sbanken than in DNB theme. Since this variable is mainly used for "larger" text, we have decided to make it match across themes. * `--font-size-medium` now the same size in Sbanken as in DNB `1.25rem` (this also fixes some unusually large text in Sbanken input components) * added new size for Sbanken `--sb-font-size-medium--plus` to be used by `h4` headings. ### Adjustments * `<Dialog>` for Sbanken now has title sizes that match Figma design * `<ProgressIndicator>` for Sbanken countdown text slightly decreased * `.dnb-lead` and `.dnb-h--medium` with `<small>` correctly adjusts to one size lower. * Sbanken headings with `<small>` correctly adjusts to one size lower.
dnbexperience · Oct 7, 2024 · ce50529 · ce50529
1 parent 59cf6c5
commit ce50529
Show file tree

Hide file tree

Showing 31 changed files with 64 additions and 28 deletions.
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
@@ -51,16 +51,19 @@ export const HeadingModifiersExample = () => (
   <ComponentBox hideCode data-visual-test="heading-additional">
     <article>
       <h1 className="dnb-h--xx-large">
-        <small>dnb-h--x-large</small> Normal dnb-h--xx-large
+        .dnb-h--xx-large <small>small</small>
       </h1>
+      <h2 className="dnb-h--x-large">
+        .dnb-h--x-large <small>small</small>
+      </h2>
       <h2 className="dnb-h--large">
-        Normal dnb-h--large <small>dnb-h--medium</small>
+        .dnb-h--large <small>small</small>
       </h2>
       <h3 className="dnb-h--medium">
-        Normal dnb-h--medium <small>dnb-h--basis</small>
+        .dnb-h--medium <small>small</small>
       </h3>
       <h3 className="dnb-lead">
-        Normal dnb-lead <small>small</small>
+        .dnb-lead <small>small</small>
       </h3>
     </article>
   </ComponentBox>

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
@@ -15,8 +15,9 @@ export default {
   '--sb-font-size-small': '0.875rem',
   '--sb-font-size-basis': '1rem',
   '--sb-font-size-basis--em': '1em',
-  '--sb-font-size-lead': '1.25rem',
-  '--sb-font-size-medium': '1.625rem',
+  '--sb-font-size-lead': 'var(--font-size-medium)',
+  '--sb-font-size-medium': '1.25rem',
+  '--sb-font-size-medium--plus': '1.625rem',
   '--sb-font-size-large': '2rem',
   '--sb-font-size-x-large': '2.375rem',
   '--sb-font-size-xx-large': '3rem',
@@ -196,8 +197,9 @@ export default {
   '--sb-font-size-small': '0.875rem',
   '--sb-font-size-basis': '1rem',
   '--sb-font-size-basis--em': '1em',
-  '--sb-font-size-lead': '1.25rem',
-  '--sb-font-size-medium': '1.625rem',
+  '--sb-font-size-lead': 'var(--font-size-medium)',
+  '--sb-font-size-medium': '1.25rem',
+  '--sb-font-size-medium--plus': '1.625rem',
   '--sb-font-size-large': '2rem',
   '--sb-font-size-x-large': '2.375rem',
   '--sb-font-size-xx-large': '3rem',

diff --git a/..._snapshots__/autocomplete-for-sbanken-have-to-match-custom-input-width.snap.png b/..._snapshots__/autocomplete-for-sbanken-have-to-match-custom-input-width.snap.png
diff --git a/...age_snapshots__/autocomplete-for-sbanken-have-to-match-different-sizes.snap.png b/...age_snapshots__/autocomplete-for-sbanken-have-to-match-different-sizes.snap.png
diff --git a/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss b/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss
@@ -36,7 +36,7 @@
 
   &__group {
     --avatar-font-size-left--medium: var(--font-size-basis);
-    --avatar-font-size-left--large: var(--font-size-medium);
-    --avatar-font-size-left--x-large: var(--font-size-medium);
+    --avatar-font-size-left--large: var(--sb-font-size-medium--plus);
+    --avatar-font-size-left--x-large: var(--sb-font-size-medium--plus);
   }
 }
diff --git a/...ots__/dialog-for-sbanken-have-to-match-the-cookie-concent-confirmation.snap.png b/...ots__/dialog-for-sbanken-have-to-match-the-cookie-concent-confirmation.snap.png
diff --git a/..._snapshots__/dialog-for-sbanken-have-to-match-the-custom-dialog-window.snap.png b/..._snapshots__/dialog-for-sbanken-have-to-match-the-custom-dialog-window.snap.png
diff --git a/..._snapshots__/dialog-for-sbanken-have-to-match-the-default-confirmation.snap.png b/..._snapshots__/dialog-for-sbanken-have-to-match-the-default-confirmation.snap.png
diff --git a/...snapshots__/dialog-for-sbanken-have-to-match-the-default-dialog-window.snap.png b/...snapshots__/dialog-for-sbanken-have-to-match-the-default-dialog-window.snap.png
diff --git a/...e_snapshots__/dialog-for-sbanken-have-to-match-the-delete-confirmation.snap.png b/...e_snapshots__/dialog-for-sbanken-have-to-match-the-delete-confirmation.snap.png
diff --git a/...ge_snapshots__/dialog-for-sbanken-have-to-match-the-dialog-help-window.snap.png b/...ge_snapshots__/dialog-for-sbanken-have-to-match-the-dialog-help-window.snap.png
diff --git a/...ialog-for-sbanken-have-to-match-the-dialog-window-using-custom-trigger.snap.png b/...ialog-for-sbanken-have-to-match-the-dialog-window-using-custom-trigger.snap.png
diff --git a/...apshots__/dialog-for-sbanken-have-to-match-the-logged-out-confirmation.snap.png b/...apshots__/dialog-for-sbanken-have-to-match-the-logged-out-confirmation.snap.png
diff --git a/...dialog-for-sbanken-scrollable-content-have-to-match-scrolled-to-bottom.snap.png b/...dialog-for-sbanken-scrollable-content-have-to-match-scrolled-to-bottom.snap.png
diff --git a/...__/dialog-for-sbanken-scrollable-content-have-to-match-scrolled-to-top.snap.png b/...__/dialog-for-sbanken-scrollable-content-have-to-match-scrolled-to-top.snap.png
diff --git a/packages/dnb-eufemia/src/components/dialog/style/themes/dnb-dialog-theme-sbanken.scss b/packages/dnb-eufemia/src/components/dialog/style/themes/dnb-dialog-theme-sbanken.scss
@@ -22,4 +22,11 @@
     margin-top: calc(var(--dialog-icon-positioning) * -1);
     margin-bottom: calc(var(--dialog-icon-positioning) * -1);
   }
+
+  &__title {
+    @include allBetween(small, medium) {
+      font-size: var(--sb-font-size-medium--plus) !important;
+      line-height: var(--line-height-medium) !important;
+    }
+  }
 }
diff --git a/...image_snapshots__/input-for-sbanken-have-to-match-text-align-with-icon.snap.png b/...image_snapshots__/input-for-sbanken-have-to-match-text-align-with-icon.snap.png
diff --git a/...ots__/progressindicator-for-sbanken-have-to-match-customized-countdown.snap.png b/...ots__/progressindicator-for-sbanken-have-to-match-customized-countdown.snap.png
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/...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/...__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/...ading-mobile-for-sbanken-have-to-match-the-additional-heading-examples.snap.png b/...ading-mobile-for-sbanken-have-to-match-the-additional-heading-examples.snap.png
diff --git a/..._snapshots__/heading-mobile-for-sbanken-matches-all-sizes-and-variants.snap.png b/..._snapshots__/heading-mobile-for-sbanken-matches-all-sizes-and-variants.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/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
@@ -21,18 +21,37 @@
   --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-small-font-size: var(--sb-font-size-medium--plus);
   --typography-h-large-weight: var(--font-weight-regular);
+  --typography-lead-small-font-size: var(--font-size-basis);
+  --typography-lead-small-line-height: var(--line-height-basis);
   --typography-lead-weight: var(--font-weight-regular);
+  --typography-h-medium-font-size: var(--sb-font-size-medium--plus);
+  --typography-h-medium-small-font-size: var(--font-size-medium);
   --typography-h-medium-weight: var(--font-weight-regular);
 
   @include utilities.allBelow(small) {
+    // xx-large
     --typography-h-xx-large-font-size: var(--font-size-x-large);
     --typography-h-xx-large-line-height: var(--line-height-x-large);
+    --typography-h-xx-large-small-font-size: var(--font-size-large);
+    --typography-h-xx-large-small-line-height: var(--line-height-large);
+    // x-large
     --typography-h-x-large-font-size: var(--font-size-large);
     --typography-h-x-large-line-height: var(--line-height-large);
-    --typography-h-large-font-size: var(--font-size-medium);
+    --typography-h-x-large-small-font-size: var(
+      --sb-font-size-medium--plus
+    );
+    --typography-h-x-large-small-line-height: var(--line-height-medium);
+    // large
+    --typography-h-large-font-size: var(--sb-font-size-medium--plus);
     --typography-h-large-line-height: var(--line-height-medium);
-    --typography-h-medium-font-size: var(--font-size-lead);
+    --typography-h-large-small-font-size: var(--font-size-medium);
+    --typography-h-large-small-line-height: var(--line-height-lead);
+    // medium
+    --typography-h-medium-font-size: var(--font-size-medium);
     --typography-h-medium-line-height: var(--line-height-lead);
+    --typography-h-medium-small-font-size: var(--font-size-basis);
+    --typography-h-medium-small-line-height: var(--line-height-basis);
   }
 }
diff --git a/...dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap b/...dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap
@@ -32,8 +32,9 @@ exports[`PaymentCard scss has to match style dependencies css 1`] = `
   --sb-font-size-small: 0.875rem;
   --sb-font-size-basis: 1rem;
   --sb-font-size-basis--em: 1em;
-  --sb-font-size-lead: 1.25rem;
-  --sb-font-size-medium: 1.625rem;
+  --sb-font-size-lead: var(--font-size-medium);
+  --sb-font-size-medium: 1.25rem;
+  --sb-font-size-medium--plus: 1.625rem;
   --sb-font-size-large: 2rem;
   --sb-font-size-x-large: 2.375rem;
   --sb-font-size-xx-large: 3rem;

diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js b/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js
@@ -12,8 +12,9 @@ export default {
   '--sb-font-size-small': '0.875rem',
   '--sb-font-size-basis': '1rem',
   '--sb-font-size-basis--em': '1em',
-  '--sb-font-size-lead': '1.25rem',
-  '--sb-font-size-medium': '1.625rem',
+  '--sb-font-size-lead': 'var(--font-size-medium)',
+  '--sb-font-size-medium': '1.25rem',
+  '--sb-font-size-medium--plus': '1.625rem',
   '--sb-font-size-large': '2rem',
   '--sb-font-size-x-large': '2.375rem',
   '--sb-font-size-xx-large': '3rem',

diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js
@@ -12,8 +12,9 @@ export default {
   '--sb-font-size-small': '0.875rem',
   '--sb-font-size-basis': '1rem',
   '--sb-font-size-basis--em': '1em',
-  '--sb-font-size-lead': '1.25rem',
-  '--sb-font-size-medium': '1.625rem',
+  '--sb-font-size-lead': 'var(--font-size-medium)',
+  '--sb-font-size-medium': '1.25rem',
+  '--sb-font-size-medium--plus': '1.625rem',
   '--sb-font-size-large': '2rem',
   '--sb-font-size-x-large': '2.375rem',
   '--sb-font-size-xx-large': '3rem',

diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss
@@ -18,15 +18,16 @@
   --sb-font-weight-bold: 700;
 
   // Typography Sizes
-  --sb-font-size-x-small: 0.75rem;
-  --sb-font-size-small: 0.875rem;
-  --sb-font-size-basis: 1rem;
+  --sb-font-size-x-small: 0.75rem; // 12px
+  --sb-font-size-small: 0.875rem; // 14px
+  --sb-font-size-basis: 1rem; // 16px
   --sb-font-size-basis--em: 1em;
-  --sb-font-size-lead: 1.25rem;
-  --sb-font-size-medium: 1.625rem;
-  --sb-font-size-large: 2rem;
-  --sb-font-size-x-large: 2.375rem;
-  --sb-font-size-xx-large: 3rem;
+  --sb-font-size-lead: var(--font-size-medium); // 20px
+  --sb-font-size-medium: 1.25rem; // 20px
+  --sb-font-size-medium--plus: 1.625rem; // 26px extra for Sbanken theme
+  --sb-font-size-large: 2rem; // 32px
+  --sb-font-size-x-large: 2.375rem; // 38px
+  --sb-font-size-xx-large: 3rem; // 48px
 
   // Typography Line heights
   --sb-line-height-x-small: 1.125rem;

diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js
@@ -12,8 +12,9 @@ export default {
   '--sb-font-size-small': '0.875rem',
   '--sb-font-size-basis': '1rem',
   '--sb-font-size-basis--em': '1em',
-  '--sb-font-size-lead': '1.25rem',
-  '--sb-font-size-medium': '1.625rem',
+  '--sb-font-size-lead': 'var(--font-size-medium)',
+  '--sb-font-size-medium': '1.25rem',
+  '--sb-font-size-medium--plus': '1.625rem',
   '--sb-font-size-large': '2rem',
   '--sb-font-size-x-large': '2.375rem',
   '--sb-font-size-xx-large': '3rem',