make typography documentation theme sensitive

dnbexperience · Nov 21, 2024 · d44cd5a · d44cd5a
1 parent 808dda8
commit d44cd5a
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 44 deletions.
diff --git a/packages/dnb-design-system-portal/src/core/ChangeStyleTheme.tsx b/packages/dnb-design-system-portal/src/core/ChangeStyleTheme.tsx
@@ -7,7 +7,7 @@ import {
   setTheme,
 } from 'gatsby-plugin-eufemia-theme-handler'
 
-export default function ChangeStyleTheme({ label = null } = {}) {
+export default function ChangeStyleTheme({ label = null, ...rest } = {}) {
   const themes = getThemes()
   const { name } = getTheme()
   const { update } = React.useContext(Context)
@@ -31,6 +31,7 @@ export default function ChangeStyleTheme({ label = null } = {}) {
           update({ skeleton: false })
         })
       }}
+      {...rest}
     />
   )
 }

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx
@@ -7,6 +7,8 @@ import React from 'react'
 import styled from '@emotion/styled'
 import ComponentBox from '../../../shared/tags/ComponentBox'
 import { Code, H4, Lead, P } from '@dnb/eufemia/src'
+import { useTheme } from '@dnb/eufemia/shared'
+
 import { TypographyBox } from '../../../shared/parts/TypographyBox'
 
 const Wrapper = styled.div`
@@ -29,7 +31,38 @@ const FontUsageExample = ({ typo_class, font_family }) => (
   </TypographyBox>
 )
 
-export function FontWeightExample() {
+export function FontWeightByThemeExample() {
+  const theme = useTheme()
+
+  if (theme?.name === 'sbanken') {
+    return (
+      <Wrapper>
+        {/* Regular */}
+        <FontUsageExample
+          font_family="Roboto Regular"
+          typo_class="dnb-t__weight--regular"
+        />
+
+        {/* Medium */}
+        <FontUsageExample
+          font_family="Roboto Medium"
+          typo_class="dnb-t__weight--medium"
+        />
+
+        {/* Bold */}
+        <FontUsageExample
+          font_family="Roboto Bold"
+          typo_class="dnb-t__weight--bold"
+        />
+
+        {/* Mono Regular */}
+        <FontUsageExample
+          font_family="Monospace Regular"
+          typo_class="dnb-t__weight--regular dnb-t__family--monospace"
+        />
+      </Wrapper>
+    )
+  }
   return (
     <Wrapper>
       {/* Regular */}

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/_helpers.tsx b/packages/dnb-design-system-portal/src/docs/uilib/typography/_helpers.tsx
@@ -0,0 +1,31 @@
+import { useTheme } from '@dnb/eufemia/shared'
+
+import propertiesSbanken from '@dnb/eufemia/src/style/themes/theme-sbanken/properties'
+import propertiesUi from '@dnb/eufemia/src/style/themes/theme-ui/properties'
+import propertiesEiendom from '@dnb/eufemia/src/style/themes/theme-eiendom/properties'
+
+const properties = {
+  sbanken: propertiesSbanken,
+  ui: propertiesUi,
+  eiendom: propertiesEiendom,
+}
+
+export const GetPropValue = (prop) => {
+  const theme = useTheme()
+  const p = properties[theme.name][prop]
+  if (p && p.startsWith('var(')) {
+    return GetPropValue(p.substring(4, p.indexOf(')')))
+  }
+  return p
+}
+
+export const GetPropAsPx = (prop) => {
+  return RemToPx(GetPropValue(prop))
+}
+
+const RemToPx = (rem = '') => {
+  if (rem.endsWith('rem')) {
+    return parseFloat(rem) * 16 + 'px'
+  }
+  return rem
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/font-size.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/font-size.mdx
@@ -3,38 +3,44 @@ title: 'Font Size'
 order: 3
 ---
 
-# Font Size
+import { GetPropValue, GetPropAsPx } from './_helpers.tsx'
+import ChangeStyleTheme from '../../../core/ChangeStyleTheme'
 
-For details about what values Typographic elements do use, have a look at the [Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.
+# Font Size for <VisibilityByTheme.Name />
+
+<ChangeStyleTheme label="Change the brand:" bottom="large" />
+
+For details about what values Typographic elements do use, have a look at the
+[Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.
 
 ## Default `font-size` **rem** table
 
-| Pixel | Type       | Rem          | CSS variable / property | CSS Classname            | Info                            |
-| ----- | ---------- | ------------ | ----------------------- | ------------------------ | ------------------------------- |
-| 14px  | `x-small`  | **0.875rem** | `--font-size-x-small`   | `.dnb-t__size--x-small`  | Do not use for texts            |
-| 16px  | `small`    | **1rem**     | `--font-size-small`     | `.dnb-t__size--small`    | [Fallback](#fallback-font-size) |
-| 18px  | `basis`    | **1.125rem** | `--font-size-basis`     | `.dnb-t__size--basis`    | Default size                    |
-| 20px  | `medium`   | **1.25rem**  | `--font-size-medium`    | `.dnb-t__size--medium`   |                                 |
-| 26px  | `large`    | **1.625rem** | `--font-size-large`     | `.dnb-t__size--large`    |                                 |
-| 34px  | `x-large`  | **2.125rem** | `--font-size-x-large`   | `.dnb-t__size--x-large`  |                                 |
-| 48px  | `xx-large` | **3rem**     | `--font-size-xx-large`  | `.dnb-t__size--xx-large` |                                 |
+| Pixel                                 | Type       | Rem                                        | CSS variable / property | CSS Classname            | Info                            |
+| ------------------------------------- | ---------- | ------------------------------------------ | ----------------------- | ------------------------ | ------------------------------- |
+| {GetPropAsPx('--font-size-x-small')}  | `x-small`  | **{GetPropValue('--font-size-x-small')}**  | `--font-size-x-small`   | `.dnb-t__size--x-small`  | Do not use for texts            |
+| {GetPropAsPx('--font-size-small')}    | `small`    | **{GetPropValue('--font-size-small')}**    | `--font-size-small`     | `.dnb-t__size--small`    | [Fallback](#fallback-font-size) |
+| {GetPropAsPx('--font-size-basis')}    | `basis`    | **{GetPropValue('--font-size-basis')}**    | `--font-size-basis`     | `.dnb-t__size--basis`    | Default size                    |
+| {GetPropAsPx('--font-size-medium')}   | `medium`   | **{GetPropValue('--font-size-medium')}**   | `--font-size-medium`    | `.dnb-t__size--medium`   |                                 |
+| {GetPropAsPx('--font-size-large')}    | `large`    | **{GetPropValue('--font-size-large')}**    | `--font-size-large`     | `.dnb-t__size--large`    |                                 |
+| {GetPropAsPx('--font-size-x-large')}  | `x-large`  | **{GetPropValue('--font-size-x-large')}**  | `--font-size-x-large`   | `.dnb-t__size--x-large`  |                                 |
+| {GetPropAsPx('--font-size-xx-large')} | `xx-large` | **{GetPropValue('--font-size-xx-large')}** | `--font-size-xx-large`  | `.dnb-t__size--xx-large` |                                 |
 
 ### Code Editor Extensions
 
 You may be interested to install an [Eufemia code editor extension](/uilib/helpers/tools/#code-editor-extensions) that allows you to quickly auto complete the correct `font-size`.
 
 ## Additional `font-size` **em** table
 
-| Pixel | Type        | Em      | Custom Property         | Info |
-| ----- | ----------- | ------- | ----------------------- | ---- |
-| 16px  | `basis--em` | **1em** | `--font-size-basis--em` |      |
+| Pixel | Type        | Em                                          | Custom Property         | Info |
+| ----- | ----------- | ------------------------------------------- | ----------------------- | ---- |
+| 16px  | `basis--em` | **{GetPropValue('--font-size-basis--em')}** | `--font-size-basis--em` |      |
 
 ## How to use the sizes (CSS)
 
 ```css
 /* I have a default size */
 .dnb-p {
-  font-size: var(--font-size-basis); /* 1.125 = 18px */
+  font-size: var(--font-size-basis); /* 1.125rem = 18px (in Ui theme) */
 }
 ```
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/font-weight.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/font-weight.mdx
@@ -5,19 +5,23 @@ redirect_from:
   - /uilib/typography/font-weights
 ---
 
-import { FontWeightExample } from 'Docs/uilib/typography/Examples'
+import { FontWeightByThemeExample } from 'Docs/uilib/typography/Examples'
+import { GetPropValue, GetPropAsPx } from './_helpers.tsx'
+import ChangeStyleTheme from '../../../core/ChangeStyleTheme'
 
-# Font Weights
+# Font Weights for <VisibilityByTheme.Name />
+
+<ChangeStyleTheme label="Change the brand:" bottom="large" />
 
 For details about what values Typographic elements do use, have a look at the [Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.
 
 ## Eufemia has three (3) font-weights
 
-| Type                                                             | CSS variable / property | CSS Classname             |
-| ---------------------------------------------------------------- | ----------------------- | ------------------------- |
-| <span className="dnb-t__weight--regular">Regular (normal)</span> | `--font-weight-regular` | `.dnb-t__weight--regular` |
-| <span className="dnb-t__weight--medium">Medium (500)</span>      | `--font-weight-medium`  | `.dnb-t__weight--medium`  |
-| <span className="dnb-t__weight--bold">Bold (600)</span>          | `--font-weight-bold`    | `.dnb-t__weight--bold`    |
+| Type                                                                                              | CSS variable / property | CSS Classname             |
+| ------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------- |
+| <span className="dnb-t__weight--regular">Regular ({GetPropValue('--font-weight-regular')})</span> | `--font-weight-regular` | `.dnb-t__weight--regular` |
+| <span className="dnb-t__weight--medium">Medium ({GetPropValue('--font-weight-medium')})</span>    | `--font-weight-medium`  | `.dnb-t__weight--medium`  |
+| <span className="dnb-t__weight--bold">Bold ({GetPropValue('--font-weight-bold')})</span>          | `--font-weight-bold`    | `.dnb-t__weight--bold`    |
 
 ### How to use the weights (CSS)
 
@@ -34,7 +38,7 @@ p {
 
 /* I am Bold */
 p {
-  font-weight: var(--font-weight-bold); /* 600 */
+  font-weight: var(--font-weight-bold); /* 600 (in Ui theme) */
 }
 
 /* This will result in loading the Bold Font */
@@ -52,6 +56,6 @@ p {
 <span class="dnb-t__weight--bold">Third Tag</span>
 ```
 
-## Examples
+## <VisibilityByTheme.Name /> weight examples
 
-<FontWeightExample />
+<FontWeightByThemeExample />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/line-height.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/line-height.mdx
@@ -3,41 +3,46 @@ title: 'Line Height'
 order: 4
 ---
 
-# Line Height
+import { GetPropValue, GetPropAsPx } from './_helpers.tsx'
+import ChangeStyleTheme from '../../../core/ChangeStyleTheme'
+
+# Line Height for <VisibilityByTheme.Name />
+
+<ChangeStyleTheme label="Change the brand:" bottom="large" />
 
 For details about what values Typographic elements do use, have a look at the [Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.
 
 ## Default `line-height` **rem** table
 
-| Pixel | Type       | Rem          | CSS variable / property  | CSS Classname            | Info                             |
-| ----- | ---------- | ------------ | ------------------------ | ------------------------ | -------------------------------- |
-| 18px  | `x-small`  | **1.125rem** | `--line-height-x-small`  | `.dnb-t__line--x-small`  |                                  |
-| 20px  | `small`    | **1.25rem**  | `--line-height-small`    | `.dnb-t__line--small`    |                                  |
-| 24px  | `basis`    | **1.5rem**   | `--line-height-basis`    | `.dnb-t__line--basis`    |                                  |
-| 28px  | `lead`     | **1.75rem**  | `--line-height-lead`     | `.dnb-t__line--lead`     | Unique line-height for `<Lead>`. |
-| 32px  | `medium`   | **2rem**     | `--line-height-medium`   | `.dnb-t__line--medium`   |                                  |
-| 40px  | `large`    | **2.5rem**   | `--line-height-large`    | `.dnb-t__line--large`    |                                  |
-| 56px  | `x-large`  | **3.5rem**   | `--line-height-x-large`  | `.dnb-t__line--x-large`  |                                  |
-| 56px  | `xx-large` | **3.5rem**   | `--line-height-xx-large` | `.dnb-t__line--xx-large` | Same as `x-large`                |
+| Pixel                                   | Type       | Rem                                          | CSS variable / property  | CSS Classname            | Info                             |
+| --------------------------------------- | ---------- | -------------------------------------------- | ------------------------ | ------------------------ | -------------------------------- |
+| {GetPropAsPx('--line-height-x-small')}  | `x-small`  | **{GetPropValue('--line-height-x-small')}**  | `--line-height-x-small`  | `.dnb-t__line--x-small`  |                                  |
+| {GetPropAsPx('--line-height-small')}    | `small`    | **{GetPropValue('--line-height-small')}**    | `--line-height-small`    | `.dnb-t__line--small`    |                                  |
+| {GetPropAsPx('--line-height-basis')}    | `basis`    | **{GetPropValue('--line-height-basis')}**    | `--line-height-basis`    | `.dnb-t__line--basis`    |                                  |
+| {GetPropAsPx('--line-height-lead')}     | `lead`     | **{GetPropValue('--line-height-lead')}**     | `--line-height-lead`     | `.dnb-t__line--lead`     | Unique line-height for `<Lead>`. |
+| {GetPropAsPx('--line-height-medium')}   | `medium`   | **{GetPropValue('--line-height-medium')}**   | `--line-height-medium`   | `.dnb-t__line--medium`   |                                  |
+| {GetPropAsPx('--line-height-large')}    | `large`    | **{GetPropValue('--line-height-large')}**    | `--line-height-large`    | `.dnb-t__line--large`    |                                  |
+| {GetPropAsPx('--line-height-x-large')}  | `x-large`  | **{GetPropValue('--line-height-x-large')}**  | `--line-height-x-large`  | `.dnb-t__line--x-large`  |                                  |
+| {GetPropAsPx('--line-height-xx-large')} | `xx-large` | **{GetPropValue('--line-height-xx-large')}** | `--line-height-xx-large` | `.dnb-t__line--xx-large` | Same as `x-large`                |
 
 ### Code Editor Extensions
 
 You may be interested to install an [Eufemia code editor extension](/uilib/helpers/tools/#code-editor-extensions) that allows you to quickly auto complete the correct `line-height`.
 
 ## Additional `line-height` **em** table
 
-| Pixel | Type           | Em          | Custom Property              | Info   |
-| ----- | -------------- | ----------- | ---------------------------- | ------ |
-| 16px  | `xx-small--em` | **1em**     | `--line-height-xx-small--em` |        |
-| 24px  | `basis--em`    | **1.333em** | `--line-height-basis--em`    | **\*** |
+| Pixel | Type           | Em                                               | Custom Property              | Info   |
+| ----- | -------------- | ------------------------------------------------ | ---------------------------- | ------ |
+| 16px  | `xx-small--em` | **{GetPropValue('--line-height-xx-small--em')}** | `--line-height-xx-small--em` |        |
+| 24px  | `basis--em`    | **{GetPropValue('--line-height-basis--em')}**    | `--line-height-basis--em`    | **\*** |
 
-**\*** If we sum 1.33333333333\*18 we get 24. Browsers do round CSS values, so we do not need all the decimal numbers for now.
+**\*** For example: if we sum 1.33333333333\*18 we get 24. Browsers do round CSS values, so we do not need all the decimal numbers for now.
 
 ### How to use the line heights (CSS)
 
 ```css
 /* I have a default height */
 .dnb-p {
-  line-height: var(--line-height-basis); /* 1.5rem = 24px */
+  line-height: var(--line-height-basis); /* 1.5rem = 24px (in Ui theme) */
 }
 ```
diff --git a/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx b/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx
@@ -61,3 +61,16 @@ export default function VisibilityByTheme({
     })
   }
 }
+
+VisibilityByTheme.Name = function ThemeName() {
+  const theme = useTheme()
+  if (theme.isEiendom) {
+    return 'Eiendom'
+  }
+  if (theme.isSbanken) {
+    return 'Sbanken'
+  }
+  if (theme.isUi) {
+    return 'DNB'
+  }
+}