-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Rename `colorMapping` to `propMapping` because we may map other properties as well * feat(Theme): add ˙darkMode` and `contrastMode` props * docs(Theme): create dedicated pages
- Loading branch information
1 parent
173b040
commit 04b350e
Showing
11 changed files
with
290 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
...s/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming/theme.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| --- | ||
| title: 'Theme' | ||
| description: 'The Theme component is a helper component that lets you create nested theming solutions.' | ||
| showTabs: true | ||
| tabs: | ||
| - title: Info | ||
| key: '/info' | ||
| - title: Demos | ||
| key: '/demos' | ||
| - title: Properties | ||
| key: '/properties' | ||
| --- | ||
|
|
||
| import ThemeInfo from 'Docs/uilib/usage/customisation/theming/theme/info' | ||
| import ThemeDemos from 'Docs/uilib/usage/customisation/theming/theme/demos' | ||
|
|
||
| <ThemeInfo /> | ||
| <ThemeDemos /> |
48 changes: 48 additions & 0 deletions
48
...es/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming/theme/Examples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /** | ||
| * UI lib Component Example | ||
| * | ||
| */ | ||
|
|
||
| import ComponentBox from '../../../../../../shared/tags/ComponentBox' | ||
| import styled from '@emotion/styled' | ||
| import { P, Logo } from '@dnb/eufemia/src' | ||
| import { Theme } from '@dnb/eufemia/src/shared' | ||
|
|
||
| export const ThemeBasis = () => ( | ||
| <ComponentBox scope={{ Theme }} data-visual-test="theme-basis"> | ||
| {() => { | ||
| return ( | ||
| <Theme name="sbanken"> | ||
| <Logo size={40} /> | ||
| </Theme> | ||
| ) | ||
| }} | ||
| </ComponentBox> | ||
| ) | ||
|
|
||
| export const ThemeMapping = () => ( | ||
| <ComponentBox | ||
| scope={{ P, Theme }} | ||
| // data-visual-test="theme-basis" | ||
| > | ||
| {() => { | ||
| const MyMapping = styled.div` | ||
| .eufemia-theme__sbanken.eufemia-theme__prop-mapping--my-mapping { | ||
| --color-sea-green: var(--sb-color-purple-alternative); | ||
| } | ||
| ` | ||
| const CustomComponent = styled(P)` | ||
| color: var(--color-sea-green); | ||
| ` | ||
| return ( | ||
| <MyMapping> | ||
| <Theme name="sbanken"> | ||
| <Theme propMapping="my-mapping"> | ||
| <CustomComponent>Text with custom color</CustomComponent> | ||
| </Theme> | ||
| </Theme> | ||
| </MyMapping> | ||
| ) | ||
| }} | ||
| </ComponentBox> | ||
| ) |
21 changes: 21 additions & 0 deletions
21
...design-system-portal/src/docs/uilib/usage/customisation/theming/theme/demos.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| import { | ||
| ThemeBasis, | ||
| ThemeMapping, | ||
| } from 'Docs/uilib/usage/customisation/theming/theme/Examples' | ||
| import ChangeStyleTheme from '../../../../../../core/ChangeStyleTheme' | ||
|
|
||
| ## Demos | ||
|
|
||
| <ChangeStyleTheme label="Change the brand:" /> | ||
|
|
||
| ### Basis example | ||
|
|
||
| <ThemeBasis /> | ||
|
|
||
| ### Basis example `propMapping` | ||
|
|
||
| <ThemeMapping /> |
128 changes: 128 additions & 0 deletions
128
...-design-system-portal/src/docs/uilib/usage/customisation/theming/theme/info.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| ## Description | ||
|
|
||
| The Theme component is a helper component that lets you create nested theming solutions. | ||
|
|
||
| `<Theme>` Will by default create a `div` wrapper, when no custom element is defined (e.g. `element="span"`). | ||
|
|
||
| ```tsx | ||
| import { Theme, useTheme } from '@dnb/eufemia/shared' | ||
|
|
||
| const Component = () => { | ||
| const { name, propMapping } = useTheme() | ||
| return 'My Component' | ||
| } | ||
|
|
||
| render( | ||
| <Theme name="theme-name"> | ||
| <App> | ||
| <Theme propMapping="my-class"> | ||
| <MyComponent /> | ||
| </Theme> | ||
| </App> | ||
| </Theme> | ||
| ) | ||
| ``` | ||
|
|
||
| Will create the following HTML/CSS classes: | ||
|
|
||
| **Outer Theme** | ||
|
|
||
| - `eufemia-theme__theme-name` | ||
|
|
||
| **Nested Theme** | ||
|
|
||
| - `eufemia-theme__theme-name` | ||
| - `eufemia-theme__prop-mapping--my-class` | ||
|
|
||
| With that, you can create your own styles that contains the wanted style mapping. | ||
|
|
||
| ### Mapping of properties with `propMapping` | ||
|
|
||
| **WIP:** This API may change in future, as it is currently under development. Please get in touch with us before you use it. | ||
|
|
||
| In order to change or map CSS properties, you can make use of the `propMapping` solution. | ||
|
|
||
| The main motivation of this feature is to provide a set of maps you can use in your app. But it lets you create your own sets as well. To do so; | ||
|
|
||
| 1. Define an area in your app – it could be your component – and give it a declarative name: | ||
|
|
||
| ```tsx | ||
| import { Theme } from '@dnb/eufemia/shared' | ||
|
|
||
| render( | ||
| <Theme propMapping="my-maps"> | ||
| <MyComponent /> | ||
| </Theme> | ||
| ) | ||
| ``` | ||
|
|
||
| 2. Define the needed CSS properties: | ||
|
|
||
| ```css | ||
| .eufemia-theme__theme-name.eufemia-theme__prop-mapping--my-maps { | ||
| --color-sea-green: var(--sb-color-purple-alternative); | ||
| } | ||
| ``` | ||
|
|
||
| #### Use your component as the wrapper element | ||
|
|
||
| You can provide your component as the wrapper. This way no additional HTML Element will be created. | ||
|
|
||
| ```tsx | ||
| import { Theme } from '@dnb/eufemia/shared' | ||
|
|
||
| const Component = ({ classNamem ...props }) => { | ||
| return <div className={classNamem+' more-classes'}></div> | ||
| } | ||
|
|
||
| render( | ||
| <Theme name="theme-name"> | ||
| <App> | ||
| <Theme propMapping="my-maps" element={Component}> | ||
| ... | ||
| </Theme> | ||
| </App> | ||
| </Theme> | ||
| ) | ||
| ``` | ||
|
|
||
| ### Hide or show parts of your component (filter) | ||
|
|
||
| With this helper function you show or hide content based on inherited theme properties. | ||
|
|
||
| ```tsx | ||
| import { Theme, VisibilityByTheme } from '@dnb/eufemia/shared' | ||
|
|
||
| render( | ||
| <Theme name="..."> | ||
| <VisibilityByTheme visible="sbanken"> | ||
| Only shown in Sbanken theme | ||
| </VisibilityByTheme> | ||
|
|
||
| <VisibilityByTheme hidden="eiendom"> | ||
| Only hidden in Eiendom theme | ||
| </VisibilityByTheme> | ||
|
|
||
| <VisibilityByTheme visible={['sbanken', 'eiendom']}> | ||
| Only shown in Sbanken or Eiendom theme | ||
| </VisibilityByTheme> | ||
|
|
||
| <VisibilityByTheme | ||
| visible={[{ name: 'sbanken' }, { name: 'eiendom' }]} | ||
| > | ||
| Only shown in Sbanken or Eiendom theme | ||
| </VisibilityByTheme> | ||
|
|
||
| <VisibilityByTheme | ||
| visible={[{ name: 'sbanken' }, { name: 'eiendom', variant: 'blue' }]} | ||
| > | ||
| Only shown in Sbanken then or Eiendom theme – that also includes the | ||
| fictive variant="blue". | ||
| </VisibilityByTheme> | ||
| </Theme> | ||
| ) | ||
| ``` |
14 changes: 14 additions & 0 deletions
14
...n-system-portal/src/docs/uilib/usage/customisation/theming/theme/properties.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| ## Properties | ||
|
|
||
| | Properties | Description | | ||
| | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `name` | _(optional)_ The name of a branding theme. Can be `ui` (universal identity), `eiendom` or `sbanken` | | ||
| | `size` (WIP) | _(optional)_ Will define what sizes of components are used. | | ||
| | `variant` (WIP) | _(optional)_ WIP | | ||
| | `propMapping` (WIP) | _(optional)_ Defines a specific CSS class so you get a declarative way of mapping CSS properties. A set of predefined maps will be available (WIP). | | ||
| | `contrastMode` | _(optional)_ When a component supports a contrast style, it will be used instead for the dedicated area. | | ||
| | `darkMode` | _(optional)_ When a component supports a dark mode style, it will be used instead for the dedicated area. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.