From b381a7320969d9af3b3d39786af7ded953cb9d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 11 Oct 2023 14:40:31 +0200 Subject: [PATCH 1/4] docs: update docs about `gatsby-plugin-eufemia-theme-handler` Also, update to the latest version. --- packages/dnb-design-system-portal/package.json | 2 +- .../src/docs/brand/development/import-styles.mdx | 8 ++++++++ .../usage/customisation/styling/consume-styles.mdx | 4 ++++ .../src/docs/uilib/usage/customisation/theming.mdx | 2 +- yarn.lock | 10 +++++----- 5 files changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index e43a223632d..f080f42b1e9 100644 --- a/packages/dnb-design-system-portal/package.json +++ b/packages/dnb-design-system-portal/package.json @@ -80,7 +80,7 @@ "gatsby-plugin-babel-react-live": "1.4.2", "gatsby-plugin-catch-links": "5.12.0", "gatsby-plugin-emotion": "8.12.0", - "gatsby-plugin-eufemia-theme-handler": "1.5.1", + "gatsby-plugin-eufemia-theme-handler": "1.6.4", "gatsby-plugin-gatsby-cloud": "5.12.0", "gatsby-plugin-manifest": "5.12.0", "gatsby-plugin-mdx": "5.12.0", diff --git a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx index 8ecad2d1111..42270e872e4 100644 --- a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx +++ b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx @@ -26,3 +26,11 @@ render( , ) ``` + +## Runtime theme swap + +How ever, the above solution will not work for changing the theme in runtime. + +Changing a theme in runtime, without pre-loading all CSS styles and fonts together, requires a more sufisitcated solution. + +When using Gatsby, you can use this plugin [gatsby-plugin-eufemia-theme-handler](https://github.com/dnbexperience/gatsby-plugin-eufemia-theme-handler). diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/consume-styles.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/consume-styles.mdx index db0d3775062..ae94ebf31c5 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/consume-styles.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/consume-styles.mdx @@ -11,6 +11,10 @@ To include the packages `dnb-ui-core`, `ui-theme-basis` and `ui-theme-components import '@dnb/eufemia/style' ``` +## Gatsby Plugin + +The [gatsby-plugin-eufemia-theme-handler](https://github.com/dnbexperience/gatsby-plugin-eufemia-theme-handler) plugin makes it easy to add the needed styles and provides also a runtime style switch mechanism. + ## Importing styles from within CSS ```css diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.mdx index 4fa1d49cc3b..252cfd08b99 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/theming.mdx @@ -57,7 +57,7 @@ Read more about [how to import styles](/uilib/usage/customisation/styling/consum How ever, giving the user the ability to switch a theme during runtime, is a very much different challenge. -The Eufemia Portal (documentation) uses [gatsby-plugin-eufemia-theme-handler-2](https://github.com/dnbexperience/gatsby-plugin-eufemia-theme-handler) to handle it both in development and production mode. +The Eufemia Portal (documentation) uses [gatsby-plugin-eufemia-theme-handler](https://github.com/dnbexperience/gatsby-plugin-eufemia-theme-handler) to handle it both in development and production mode. ## WIP: Ready to use themes diff --git a/yarn.lock b/yarn.lock index 1d5988c7bf8..c63477138c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12606,7 +12606,7 @@ __metadata: gatsby-plugin-babel-react-live: 1.4.2 gatsby-plugin-catch-links: 5.12.0 gatsby-plugin-emotion: 8.12.0 - gatsby-plugin-eufemia-theme-handler: 1.5.1 + gatsby-plugin-eufemia-theme-handler: 1.6.4 gatsby-plugin-gatsby-cloud: 5.12.0 gatsby-plugin-manifest: 5.12.0 gatsby-plugin-mdx: 5.12.0 @@ -15765,9 +15765,9 @@ __metadata: languageName: node linkType: hard -"gatsby-plugin-eufemia-theme-handler@npm:1.5.1": - version: 1.5.1 - resolution: "gatsby-plugin-eufemia-theme-handler@npm:1.5.1" +"gatsby-plugin-eufemia-theme-handler@npm:1.6.4": + version: 1.6.4 + resolution: "gatsby-plugin-eufemia-theme-handler@npm:1.6.4" dependencies: gatsby-core-utils: 4.12.0 globby: 11.0.4 @@ -15778,7 +15778,7 @@ __metadata: "@dnb/eufemia": ">=10" gatsby: ">=4" react: ">=17" - checksum: 6b72b1ed191ef565cd0e100055445346225ff457f52fc5f60a409719ad311219cf5b27a3e105d09d06695a22841ca5af211583dec1c6b54b037d40d051ff7fb5 + checksum: 2f5f9739e1456737a0c2ca2fff6527df233a1f39fa1ea70f3a288a70b0a9db81000d5b6e7b1e91fd38833a58f1b092de3746ea17859dc236fb04c1fa93daad95 languageName: node linkType: hard From 9531167a2ffff6e3547a871e6fd35d4dea0a33f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Thu, 12 Oct 2023 09:04:40 +0200 Subject: [PATCH 2/4] Update packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx Co-authored-by: Anders --- .../src/docs/brand/development/import-styles.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx index 42270e872e4..368e18f4efd 100644 --- a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx +++ b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx @@ -29,7 +29,7 @@ render( ## Runtime theme swap -How ever, the above solution will not work for changing the theme in runtime. +However, the above solution will not work for changing the theme in runtime. Changing a theme in runtime, without pre-loading all CSS styles and fonts together, requires a more sufisitcated solution. From 6deefb18b97857626fb93ebb3b83c69002abf566 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Thu, 12 Oct 2023 09:04:53 +0200 Subject: [PATCH 3/4] Update packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx Co-authored-by: Anders --- .../src/docs/brand/development/import-styles.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx index 368e18f4efd..5d911b44dfd 100644 --- a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx +++ b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx @@ -31,6 +31,6 @@ render( However, the above solution will not work for changing the theme in runtime. -Changing a theme in runtime, without pre-loading all CSS styles and fonts together, requires a more sufisitcated solution. +Changing theme during runtime, without pre-loading all CSS styles and fonts together, requires a more sophisticated solution. When using Gatsby, you can use this plugin [gatsby-plugin-eufemia-theme-handler](https://github.com/dnbexperience/gatsby-plugin-eufemia-theme-handler). From 024f4658a0a77999913dc7c721be244c1ca1e74f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Thu, 12 Oct 2023 09:05:06 +0200 Subject: [PATCH 4/4] Update packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx Co-authored-by: Anders --- .../src/docs/brand/development/import-styles.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx index 5d911b44dfd..af0c56cbec2 100644 --- a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx +++ b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx @@ -33,4 +33,4 @@ However, the above solution will not work for changing the theme in runtime. Changing theme during runtime, without pre-loading all CSS styles and fonts together, requires a more sophisticated solution. -When using Gatsby, you can use this plugin [gatsby-plugin-eufemia-theme-handler](https://github.com/dnbexperience/gatsby-plugin-eufemia-theme-handler). +When using Gatsby, you can use this plugin [gatsby-plugin-eufemia-theme-handler](https://github.com/dnbexperience/gatsby-plugin-eufemia-theme-handler) to change theme during runtime.