feat: import the properties separately

packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md

@@ -24,7 +24,8 @@ You could also set this class on the document body.
 
 ### The Reason
 
-The benefits of explicitly defining the style class `dnb-style`, is that we could use the components by their own, without effecting all the existing styled core tags. This gives use a kind of backwards compatibility.
+The benefits of explicitly defining the style class `dnb-style`, is that we then can use the components by their own, without effecting all the existing styled browser elements and tags. This gives use a kind of backwards compatibility.
+But it makes it also more flexible, like if we only want to apply our DNB style to a certain area of our web application.
 
 ## For Node based environments
 

packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js

@@ -338,6 +338,7 @@ export default class SidebarLayout extends PureComponent {
                 {({ isOpen, isClosing }) => (
                   <Sidebar
                     className={classnames(
+                      'dnb-style-selection',
                       isOpen && 'show-mobile-menu',
                       isClosing && 'hide-mobile-menu'
                     )}

packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js

@@ -119,6 +119,7 @@ export default class StickyMenuBar extends PureComponent {
             barStyle,
             hideSiebarToggleButton && hideSiebarToggleButtonStyle
           ]}
+          className="dnb-style-selection"
         >
           {this.state.showOverlayMenu && (
             <MainMenu

packages/dnb-ui-lib/scripts/prepub/tasks/makeLibStyles.js

@@ -19,7 +19,7 @@ export default () =>
     log.text = '> PrePublish: converting sass to css'
 
     try {
-      await runFactory('./src/components/**/style/dnb-*.scss')
+      await runFactory('./src/components/**/style/**/dnb-*.scss')
       await runFactory('./src/patterns/**/style/dnb-*.scss')
       log.succeed(
         `> PrePublish: "makeLibStyles" converting sass to css done`

packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap

@@ -196,6 +196,35 @@ exports[`Button scss have to match snapshot 1`] = `
 * DNB Button
 *
 * ======================================================================== */
+/*
+* CSS Properties
+*
+* ======================================================================== */
+:root {
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #ebebeb;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
 /*
  * Utilities
  * ========================================================================== */
@@ -399,6 +428,7 @@ exports[`Button scss have to match snapshot 1`] = `
     padding-right: 1.5em;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
+    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5em; }

packages/dnb-ui-lib/src/components/button/style/_button.scss

@@ -101,6 +101,7 @@
     width: auto;
   }
   &--has-text &__icon {
+    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2);
   }
   // &--has-text#{&}--size-large &__icon {

packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss

@@ -3,6 +3,7 @@
 *
 * ======================================================================== */
 
+@import '../../../../style/component/core-imports.scss';
 @import './dnb-button-theme-ui.scss';
 
 :root {

packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss

@@ -3,6 +3,7 @@
 *
 * ======================================================================== */
 
+@import '../../../../style/component/core-imports.scss';
 @import '../_button-mixins.scss';
 
 .dnb-button--primary {

packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap

@@ -180,6 +180,35 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 * DNB Dropdown
 *
 * ======================================================================== */
+/*
+* CSS Properties
+*
+* ======================================================================== */
+:root {
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #ebebeb;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
 /*
  * Utilities
  * ========================================================================== */
@@ -391,6 +420,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     padding-right: 1.5em;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
+    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5em; }

packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap

@@ -56,6 +56,35 @@ exports[`Icon scss have to match snapshot 1`] = `
 * DNB icon
 *
 * ======================================================================== */
+/*
+* CSS Properties
+*
+* ======================================================================== */
+:root {
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #ebebeb;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
 /*
  * Utilities
  * ========================================================================== */

packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap

@@ -37,6 +37,35 @@ exports[`InputMasked scss have to match snapshot 1`] = `
 * DNB Input
 *
 * ======================================================================== */
+/*
+* CSS Properties
+*
+* ======================================================================== */
+:root {
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #ebebeb;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
 /*
  * Utilities
  * ========================================================================== */
@@ -248,6 +277,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     padding-right: 1.5em;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
+    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5em; }

packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap

@@ -123,6 +123,35 @@ exports[`Input scss have to match snapshot 1`] = `
 * DNB Input
 *
 * ======================================================================== */
+/*
+* CSS Properties
+*
+* ======================================================================== */
+:root {
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #ebebeb;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
 /*
  * Utilities
  * ========================================================================== */
@@ -330,6 +359,7 @@ exports[`Input scss have to match snapshot 1`] = `
     padding-right: 1.5em;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
+    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5em; }

packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss

@@ -3,6 +3,8 @@
 *
 * ======================================================================== */
 
+@import '../../../../style/component/core-imports.scss';
+
 .dnb-input {
   color: var(--color-emerald-green);
 

packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap

@@ -39,6 +39,35 @@ exports[`Logo scss have to match snapshot 1`] = `
 * DNB Logo
 *
 * ======================================================================== */
+/*
+* CSS Properties
+*
+* ======================================================================== */
+:root {
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #ebebeb;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
 /*
  * Utilities
  * ========================================================================== */

packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -408,6 +408,35 @@ exports[`Modal scss have to match snapshot 1`] = `
 * DNB Modal
 *
 * ======================================================================== */
+/*
+* CSS Properties
+*
+* ======================================================================== */
+:root {
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #ebebeb;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
 /*
  * Utilities
  * ========================================================================== */
@@ -615,6 +644,7 @@ exports[`Modal scss have to match snapshot 1`] = `
     padding-right: 1.5em;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
+    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5em; }

packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap

@@ -57,6 +57,35 @@ exports[`Slider scss have to match snapshot 1`] = `
 * DNB Slider
 *
 * ======================================================================== */
+/*
+* CSS Properties
+*
+* ======================================================================== */
+:root {
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #ebebeb;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
 /*
  * Utilities
  * ========================================================================== */