feat(Typography): Use text color on typography for Sbanken (#2363)

* feat(Typography): Use text color on typography for Sbanen * Update snapshots
dnbexperience · May 31, 2023 · 0f3ad0b · 0f3ad0b
1 parent 5016e4b
commit 0f3ad0b
Show file tree

Hide file tree

Showing 15 changed files with 59 additions and 25 deletions.
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/...icon-usage-for-sbanken-have-to-match-anchor-with-paragraph-legacy-icon.snap.png b/...icon-usage-for-sbanken-have-to-match-anchor-with-paragraph-legacy-icon.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/..._snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-example.snap.png b/..._snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-example.snap.png
diff --git a/...graph-for-sbanken-have-to-match-the-paragraph-with-additional-elements.snap.png b/...graph-for-sbanken-have-to-match-the-paragraph-with-additional-elements.snap.png
diff --git a/...ots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-modifiers.snap.png b/...ots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-modifiers.snap.png
diff --git a/...ts__/paragraph-for-sbanken-have-to-match-the-paragraph-with-small-text.snap.png b/...ts__/paragraph-for-sbanken-have-to-match-the-paragraph-with-small-text.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/themes/dnb-typography-theme-sbanken.scss b/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss
@@ -0,0 +1,16 @@
+@use '../typography-mixins.scss' as typography;
+
+// Paragraphs
+.dnb-p {
+  color: var(--sb-color-text);
+}
+
+// Setting the default headings color
+@include typography.headingTags() {
+  color: var(--sb-color-text);
+}
+
+// Headings
+@include typography.headingClasses() {
+  color: var(--sb-color-text);
+}
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
@@ -1,35 +1,16 @@
+@use '../typography-mixins.scss' as typography;
+
 // Paragraphs
 .dnb-p {
   color: var(--theme-color-black-80, currentColor);
 }
 
 // Setting the default headings color
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+@include typography.headingTags() {
   color: var(--theme-color-black-80, currentColor);
 }
 
 // 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 typography.headingClasses() {
   color: var(--theme-color-black-80, currentColor);
 }
diff --git 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,38 @@
 @use '../../../style/elements/ui-spacing.scss';
 
+@mixin headingTags() {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+}
+
+@mixin headingClasses() {
+  .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 {
+    @content;
+  }
+}
+
 @mixin headingDefaults() {
   padding: 0;
 

diff --git a/packages/dnb-eufemia/src/style/core/scopes.scss b/packages/dnb-eufemia/src/style/core/scopes.scss
@@ -11,7 +11,7 @@
   font-size: var(--font-size-small); // has to be 16px
   font-style: normal;
   line-height: var(--line-height-basis);
-  color: var(--color-black-80, #333);
+  color: var(--theme-color-body, var(--color-black-80, #333));
 }
 
 @mixin coreDefault() {

diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-basis.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-basis.scss
@@ -13,6 +13,10 @@
 
 @import './sbanken-theme-elements.scss';
 
+:root {
+  --theme-color-body: var(--sb-color-text);
+}
+
 // ::selection appearance helper
 .dnb-selection::selection,
 .dnb-selection ::selection,

diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-elements.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-elements.scss
@@ -16,8 +16,8 @@ $THEME_FALLBACK: 'ui';
 
 @import '../../../elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss';
 @import '../../../elements/code/style/themes/dnb-code-theme-sbanken.scss';
+@import '../../../elements/typography/style/themes/dnb-typography-theme-sbanken.scss';
 @import '../../../elements/hr/style/themes/dnb-hr-theme-ui.scss';
 @import '../../../elements/img/style/themes/dnb-img-theme-ui.scss';
 @import '../../../elements/label/style/themes/dnb-label-theme-ui.scss';
 @import '../../../elements/lists/style/themes/dnb-lists-theme-ui.scss';
-@import '../../../elements/typography/style/themes/dnb-typography-theme-ui.scss';