From b79e2ff3b24d3d788f9f493e3716c905f6a4b264 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 3 Jan 2019 14:44:36 +0100 Subject: [PATCH] feat: import the properties separately --- .../uilib/usage/customisation/styling.md | 3 +- .../src/shared/menu/SidebarMenu.js | 1 + .../src/shared/menu/StickyMenuBar.js | 1 + .../scripts/prepub/tasks/makeLibStyles.js | 2 +- .../__snapshots__/Button.test.js.snap | 30 +++++++++++ .../src/components/button/style/_button.scss | 1 + .../themes/dnb-button-theme-open-banking.scss | 1 + .../style/themes/dnb-button-theme-ui.scss | 1 + .../__snapshots__/Dropdown.test.js.snap | 30 +++++++++++ .../__tests__/__snapshots__/Icon.test.js.snap | 29 ++++++++++ .../__snapshots__/InputMasked.test.js.snap | 30 +++++++++++ .../__snapshots__/Input.test.js.snap | 30 +++++++++++ .../style/themes/dnb-input-theme-ui.scss | 2 + .../__tests__/__snapshots__/Logo.test.js.snap | 29 ++++++++++ .../__snapshots__/Modal.test.js.snap | 30 +++++++++++ .../__snapshots__/Slider.test.js.snap | 29 ++++++++++ .../__snapshots__/Switch.test.js.snap | 29 ++++++++++ .../__tests__/__snapshots__/Tabs.test.js.snap | 29 ++++++++++ .../tabs/style/themes/dnb-tabs-theme-ui.scss | 5 +- .../__snapshots__/ViewTitle.test.js.snap | 29 ++++++++++ .../src/style/component/core-imports.scss | 1 + .../dnb-ui-lib/src/style/core/dnb-core.scss | 1 + .../dnb-ui-lib/src/style/core/dnb-style.scss | 53 ++----------------- .../dnb-ui-lib/src/style/core/properties.scss | 53 +++++++++++++++++++ packages/dnb-ui-lib/src/style/index.js | 5 +- 25 files changed, 397 insertions(+), 57 deletions(-) create mode 100644 packages/dnb-ui-lib/src/style/core/properties.scss diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md index 17929df9c18..5ac2e16d573 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md +++ b/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 diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js index 440583a62d8..57d8c955593 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js +++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js @@ -338,6 +338,7 @@ export default class SidebarLayout extends PureComponent { {({ isOpen, isClosing }) => ( {this.state.showOverlayMenu && ( 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` diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap index 1a83f597088..07c9fb39294 100644 --- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/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; } diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss index 948f856f5c8..75cb5b550fb 100644 --- a/packages/dnb-ui-lib/src/components/button/style/_button.scss +++ b/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 { diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss index 6b0d844c27e..9ceb70823bd 100644 --- a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-open-banking.scss +++ b/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 { diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss index c9e9d46024b..a9a21ef4d27 100644 --- a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss +++ b/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 { diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index 7aec7ffe92a..2c2fe8ed5df 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/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; } diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap index 383622896d5..552d78a6287 100644 --- a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap +++ b/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 * ========================================================================== */ diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index dda0b9f2f4d..babc2ccf71a 100644 --- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/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; } diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap index 0b5d4ab929e..02356b1b8fa 100644 --- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/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; } diff --git a/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss index 789d93c7ae0..28e23fdc509 100644 --- a/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss +++ b/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); diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap index 533a16b866c..be5580d1258 100644 --- a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap +++ b/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 * ========================================================================== */ diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap index a6e2e80d8f2..4d19d8363a0 100644 --- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap +++ b/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; } diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap index ec4c962e131..6f40d5decd7 100644 --- a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap +++ b/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 * ========================================================================== */ diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap index 05d3360dd5a..966cbf6e6bf 100644 --- a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap +++ b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap @@ -77,6 +77,35 @@ exports[`Switch scss have to match snapshot 1`] = ` * DNB Switch * * ======================================================================== */ +/* +* 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 * ========================================================================== */ diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap index 8e244b8a29f..6222e34747b 100644 --- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap +++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap @@ -162,6 +162,35 @@ exports[`Tabs scss have to match snapshot 1`] = ` * DNB Tabs * * ======================================================================== */ +/* +* 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 * ========================================================================== */ diff --git a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss index ea38d242746..3e84bbae617 100644 --- a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss +++ b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss @@ -3,10 +3,7 @@ * * ======================================================================== */ -/* - * Tabs component - * - * ========================================================================== */ +@import '../../../../style/component/core-imports.scss'; .dnb-tabs { &__tabs { diff --git a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap index 381fb9fb062..34855921a8d 100644 --- a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap +++ b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap @@ -13,6 +13,35 @@ exports[`ViewTitle scss have to match snapshot 1`] = ` * DNB ViewTitle * * ======================================================================== */ +/* +* 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 * ========================================================================== */ diff --git a/packages/dnb-ui-lib/src/style/component/core-imports.scss b/packages/dnb-ui-lib/src/style/component/core-imports.scss index a7272120281..c655100a8b2 100644 --- a/packages/dnb-ui-lib/src/style/component/core-imports.scss +++ b/packages/dnb-ui-lib/src/style/component/core-imports.scss @@ -5,6 +5,7 @@ $fonts-path: '../../../../assets/fonts/' !default; // core +@import '../core/properties.scss'; @import '../core/utilities.scss'; // the assets path in typography gets transformed to the right amount back dirs // but as this is not prsent under dev enviroment, we cant use the components directly diff --git a/packages/dnb-ui-lib/src/style/core/dnb-core.scss b/packages/dnb-ui-lib/src/style/core/dnb-core.scss index 18a404bd1ed..dc8f95f4b11 100644 --- a/packages/dnb-ui-lib/src/style/core/dnb-core.scss +++ b/packages/dnb-ui-lib/src/style/core/dnb-core.scss @@ -7,6 +7,7 @@ // core @import './reset.scss'; +@import './properties.scss'; @import './utilities.scss'; @import './typography.scss'; @import './scopes.scss'; diff --git a/packages/dnb-ui-lib/src/style/core/dnb-style.scss b/packages/dnb-ui-lib/src/style/core/dnb-style.scss index 4656f796d34..ab25e284552 100644 --- a/packages/dnb-ui-lib/src/style/core/dnb-style.scss +++ b/packages/dnb-ui-lib/src/style/core/dnb-style.scss @@ -2,58 +2,11 @@ * Theme loader * ======================================================================== */ +@import './properties.scss'; @import './utilities.scss'; -:root { - // UX colors - --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; - - // Undefined - --color-black-border: #ebebeb; - - // Profile colors - --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; - - // Unused Profile colors - // --color-mint-green-alt: #ebfffa; - // --color-indigo-medium: #6e6491; - // --color-indigo-light: #b9afc8; - // --color-violet-medium: #a06eaf; - // --color-violet-light: #cfb9d7; - // --color-sky-blue-medium: #87d2e1; - // --color-sky-blue-light: #c3ebf0; - - // Colors used in mobile - // --color-light-grey: #fafafa; - // --color-outline-grey: #ebebeb; - // + new grey definitions - // --color-subtle-grey: #f8f8f8; - // --color-soft-grey: #ccc; - // --color-charcoal-grey: #333; - // --color-shadow-grey: #757575; -} - -::selection { +.dnb-style-selection ::selection, +.dnb-style ::selection { background: var(--color-mint-green); color: var(--color-black); text-shadow: none; diff --git a/packages/dnb-ui-lib/src/style/core/properties.scss b/packages/dnb-ui-lib/src/style/core/properties.scss new file mode 100644 index 00000000000..038796f1f05 --- /dev/null +++ b/packages/dnb-ui-lib/src/style/core/properties.scss @@ -0,0 +1,53 @@ +/* +* CSS Properties +* +* ======================================================================== */ + +:root { + // UX colors + --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; + + // Undefined + --color-black-border: #ebebeb; + + // Profile colors + --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; + + // Unused Profile colors + // --color-mint-green-alt: #ebfffa; + // --color-indigo-medium: #6e6491; + // --color-indigo-light: #b9afc8; + // --color-violet-medium: #a06eaf; + // --color-violet-light: #cfb9d7; + // --color-sky-blue-medium: #87d2e1; + // --color-sky-blue-light: #c3ebf0; + + // Colors used in mobile + // --color-light-grey: #fafafa; + // --color-outline-grey: #ebebeb; + // + new grey definitions + // --color-subtle-grey: #f8f8f8; + // --color-soft-grey: #ccc; + // --color-charcoal-grey: #333; + // --color-shadow-grey: #757575; +} diff --git a/packages/dnb-ui-lib/src/style/index.js b/packages/dnb-ui-lib/src/style/index.js index c0ac4b614d6..99128b07bd7 100644 --- a/packages/dnb-ui-lib/src/style/index.js +++ b/packages/dnb-ui-lib/src/style/index.js @@ -5,7 +5,10 @@ import './dnb-ui-components.scss' import './themes/dnb-theme-ui.scss' -// import './themes/dnb-theme-open-banking.scss' // just for testing porposes + +// TODO: Remove this as soon as there is no need for it +// just for testing porposes +// import './themes/dnb-theme-open-banking.scss' /** * Only for testing porposes