From 0161b1c924fb62d85e75bd7f4ef8d5c599170e1b Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 22 Jan 2019 10:33:08 +0100 Subject: [PATCH] feat: Color change: Sea Green 4% -> Mint Green 12% --- .../assets/ExampleAarsoppgaveGuides.svg | 6 +++--- .../assets/example-aarsoppgave-guides.svg | 6 +++--- .../assets/example-aarsoppgave.svg | 6 +++--- .../src/pages/quickguide-designer/colors-table.md | 14 +++++++------- .../pages/uilib/demos/example-app-2/LoanSausage.js | 2 +- .../shared/inlineTags/themes/dnb-prism-theme.js | 4 ++-- .../src/shared/menu/SidebarMenu.js | 4 ++-- .../src/shared/parts/Layout.js | 2 +- .../dnb-design-system-portal/src/uilib/AllParts.js | 2 +- .../__tests__/__snapshots__/Button.test.js.snap | 2 +- .../__tests__/__snapshots__/Dropdown.test.js.snap | 14 +++++++------- .../src/components/dropdown/style/_dropdown.scss | 2 +- .../style/themes/dnb-form-status-theme-ui.scss | 2 +- .../icon/__tests__/__snapshots__/Icon.test.js.snap | 2 +- .../__snapshots__/InputMasked.test.js.snap | 2 +- .../__tests__/__snapshots__/Input.test.js.snap | 4 ++-- .../input/style/themes/dnb-input-theme-ui.scss | 2 +- .../logo/__tests__/__snapshots__/Logo.test.js.snap | 2 +- .../__tests__/__snapshots__/Modal.test.js.snap | 2 +- .../__tests__/__snapshots__/Slider.test.js.snap | 2 +- .../__snapshots__/StepIndicator.test.js.snap | 2 +- .../__tests__/__snapshots__/Switch.test.js.snap | 2 +- .../tabs/__tests__/__snapshots__/Tabs.test.js.snap | 2 +- .../patterns/form/assets/FormSpacingDetails.svg | 2 +- .../src/patterns/form/assets/form-division.svg | 4 ++-- .../patterns/form/assets/form-spacing-details.svg | 2 +- .../src/patterns/form/assets/form-spacing.svg | 2 +- .../patterns/form/assets/form-summary-pattern.svg | 2 +- .../src/patterns/form/assets/form-summary.svg | 2 +- .../src/patterns/form/assets/progress-steps.svg | 2 +- .../dnb-ui-lib/src/patterns/form/description.md | 10 +++++----- .../summary-table/style/_summary-table.scss | 2 +- .../__tests__/__snapshots__/ViewTitle.test.js.snap | 2 +- packages/dnb-ui-lib/src/style/core/dnb-core.scss | 2 +- packages/dnb-ui-lib/src/style/core/dnb-style.scss | 4 ++-- packages/dnb-ui-lib/src/style/core/properties.scss | 2 +- 36 files changed, 63 insertions(+), 63 deletions(-) diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/ExampleAarsoppgaveGuides.svg b/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/ExampleAarsoppgaveGuides.svg index 8f0d509a917..1ae363323b7 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/ExampleAarsoppgaveGuides.svg +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/ExampleAarsoppgaveGuides.svg @@ -1,5 +1,5 @@ - + @@ -29,7 +29,7 @@ - + @@ -49,7 +49,7 @@ - + diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/example-aarsoppgave-guides.svg b/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/example-aarsoppgave-guides.svg index 8f0d509a917..1ae363323b7 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/example-aarsoppgave-guides.svg +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/example-aarsoppgave-guides.svg @@ -1,5 +1,5 @@ - + @@ -29,7 +29,7 @@ - + @@ -49,7 +49,7 @@ - + diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/example-aarsoppgave.svg b/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/example-aarsoppgave.svg index b3a0e33f00e..d853b52332e 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/example-aarsoppgave.svg +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/example-aarsoppgave.svg @@ -1,6 +1,6 @@ - + @@ -30,7 +30,7 @@ - + @@ -50,7 +50,7 @@ - + diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/colors-table.md b/packages/dnb-design-system-portal/src/pages/quickguide-designer/colors-table.md index a78b0edc59a..15ac9c5bfad 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/colors-table.md +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/colors-table.md @@ -155,12 +155,12 @@ export default ({ children }) => {
UX - Sea Green 4 - #F5FAFA - 245 250 250 - Sea Green 4 - --color-sea-green-4 - $color-sea-green-4 + Mint Green 12 + #F4FBF9 + 244 251 249 + Mint Green 12 + --color-mint-green-12 + $color-mint-green-12
UX @@ -187,7 +187,7 @@ export default ({ children }) => { 253 235 244 Cherry Red 8 --color-cherry-red-8 - $color-cherry-red-8 + $color-cherry-red-8
UX diff --git a/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/LoanSausage.js b/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/LoanSausage.js index e7a88ae2144..9c044b5d8e4 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/LoanSausage.js +++ b/packages/dnb-design-system-portal/src/pages/uilib/demos/example-app-2/LoanSausage.js @@ -16,7 +16,7 @@ const style = css` &.dnb-loan-sausage { margin: 2rem 0; padding: 2rem 0; - background: var(--color-sea-green-4); + background: var(--color-mint-green-12); ${'' /* .dnb-loan-sausage__inner { } */}; diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/themes/dnb-prism-theme.js b/packages/dnb-design-system-portal/src/shared/inlineTags/themes/dnb-prism-theme.js index 9fa04da042c..3d10dbfed96 100644 --- a/packages/dnb-design-system-portal/src/shared/inlineTags/themes/dnb-prism-theme.js +++ b/packages/dnb-design-system-portal/src/shared/inlineTags/themes/dnb-prism-theme.js @@ -16,7 +16,7 @@ const prismStyle = /* @css */ ` background-color: #222; border-radius: 8px; - color: var(--color-sea-green-4); + color: var(--color-mint-green-12); white-space: pre; vertical-align: baseline; @@ -52,7 +52,7 @@ const prismStyle = /* @css */ ` .token.number, .token.constant, .token.symbol { - color: var(--color-sea-green-4); + color: var(--color-mint-green-12); } .token.tag { color: var(--color-sea-green-alt); 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 e65467c68fd..2291531ca1f 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js +++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js @@ -115,7 +115,7 @@ const StyledListItem = styled.li` } } &.is-inside { - background-color: var(--color-sea-green-4); + background-color: var(--color-mint-green-12); font-weight: 500; } } @@ -146,7 +146,7 @@ const StyledListItem = styled.li` &.l-6 { font-size: 0.875rem; /* small size */ &.is-inside { - background-color: var(--color-sea-green-4); + background-color: var(--color-mint-green-12); } } diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js index 9156fa1b35d..e61d23abd74 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/Layout.js +++ b/packages/dnb-design-system-portal/src/shared/parts/Layout.js @@ -181,7 +181,7 @@ const FooterWrapper = styled.footer` .is-fullscreen & { padding: 1rem; - background: var(--color-sea-green-4); + background: var(--color-mint-green-12); } a { diff --git a/packages/dnb-design-system-portal/src/uilib/AllParts.js b/packages/dnb-design-system-portal/src/uilib/AllParts.js index a479602750a..47dca84006f 100644 --- a/packages/dnb-design-system-portal/src/uilib/AllParts.js +++ b/packages/dnb-design-system-portal/src/uilib/AllParts.js @@ -29,6 +29,6 @@ const Wrapper = styled.div` padding: 1rem; border-top: 1px solid var(--color-black-border); - background: var(--color-sea-green-4); + background: var(--color-mint-green-12); } ` 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 04c2f9d4e40..1b77260f1e5 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 @@ -442,7 +442,7 @@ exports[`Button scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 63ff1cce5c1..a4e7e8f5564 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 @@ -212,7 +212,7 @@ exports[`Dropdown scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; @@ -731,12 +731,12 @@ a.dnb-button { .no-touch .dnb-dropdown__option__inner:hover[disabled] { cursor: not-allowed; } .no-touch .dnb-dropdown__option__inner:hover:not([disabled]) { - background-color: var(--color-sea-green-4); } + background-color: var(--color-mint-green-12); } .dnb-dropdown__option { padding: 2px; background-color: white; } .dnb-dropdown__option--active { - background-color: var(--color-sea-green-4); } + background-color: var(--color-mint-green-12); } .dnb-dropdown__option--active .dnb-dropdown__option__inner { box-shadow: 0 0 0 2px; outline: none; } @@ -746,13 +746,13 @@ a.dnb-button { .no-touch .dnb-dropdown__option:hover[disabled] { cursor: not-allowed; } .no-touch .dnb-dropdown__option:hover:not([disabled]) { - background-color: var(--color-sea-green-4); } + background-color: var(--color-mint-green-12); } .no-touch .dnb-dropdown__option:hover:not([disabled]) .dnb-dropdown__option__inner { - background-color: var(--color-sea-green-4); } + background-color: var(--color-mint-green-12); } .dnb-dropdown__option.dnb-dropdown__option--selected { - background-color: var(--color-sea-green-4); } + background-color: var(--color-mint-green-12); } .dnb-dropdown__option.dnb-dropdown__option--selected .dnb-dropdown__option__inner { - background-color: var(--color-sea-green-4); } + background-color: var(--color-mint-green-12); } .dnb-dropdown--hidden .dnb-dropdown__options { visibility: hidden; opacity: 0; diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss index 26a814dcf33..bf242adb5a8 100644 --- a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss +++ b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss @@ -9,7 +9,7 @@ $dropdown-trigger-color: #58595b; $dropdown-text-padding: 0.3rem; $dropdown-trigger-color-active: #000; $dropdown-options-offset: 1.3rem; -$option-selected-color: #{var(--color-sea-green-4)}; +$option-selected-color: #{var(--color-mint-green-12)}; :root { --dropdown-padding-horizontal: 1rem; diff --git a/packages/dnb-ui-lib/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss b/packages/dnb-ui-lib/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss index 0381174fa1e..9dbbdfe4de0 100644 --- a/packages/dnb-ui-lib/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss +++ b/packages/dnb-ui-lib/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss @@ -10,6 +10,6 @@ } &--info { color: var(--color-summer-green); - background-color: var(--color-sea-green-4); + background-color: var(--color-mint-green-12); } } 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 b7196d83ee7..7c035d84d63 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 @@ -86,7 +86,7 @@ exports[`Icon scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 0ccb5ad14d0..d144df79c78 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 @@ -69,7 +69,7 @@ exports[`InputMasked scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 d0ad65f47ea..39f7842fd34 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 @@ -194,7 +194,7 @@ exports[`Input scss have to match default theme snapshot 1`] = ` .dnb-input { color: var(--color-emerald-green); } .dnb-input__shell { - background-color: var(--color-sea-green-4); + background-color: var(--color-mint-green-12); border: var(--input-border-width) solid var(--input-border-color); } .no-touch .dnb-input__shell:not([data-input-state='disabled']):hover[disabled] { cursor: not-allowed; } @@ -259,7 +259,7 @@ exports[`Input scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 99bc7f7eedb..0f2a5bccaec 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 @@ -15,7 +15,7 @@ color: var(--color-emerald-green); &__shell { - background-color: var(--color-sea-green-4); + background-color: var(--color-mint-green-12); border: var(--input-border-width) solid var(--input-border-color); &:not([data-input-state='disabled']) { 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 24e3562938c..d53d5b6b136 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 @@ -69,7 +69,7 @@ exports[`Logo scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 ab7b80b38cc..752a96e670b 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 @@ -442,7 +442,7 @@ exports[`Modal scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 7b04a1e6c10..0766d865a14 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 @@ -89,7 +89,7 @@ exports[`Slider scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; diff --git a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap index fb4aec10c93..01df3c86dc1 100644 --- a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap +++ b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap @@ -316,7 +316,7 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 9e48d7eac95..549ae029bed 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 @@ -109,7 +109,7 @@ exports[`Switch scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 0b8d7ebb3b1..a9a2db29cac 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 @@ -351,7 +351,7 @@ exports[`Tabs scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/FormSpacingDetails.svg b/packages/dnb-ui-lib/src/patterns/form/assets/FormSpacingDetails.svg index 4ad2d7f4c2a..3d0ac40eae6 100644 --- a/packages/dnb-ui-lib/src/patterns/form/assets/FormSpacingDetails.svg +++ b/packages/dnb-ui-lib/src/patterns/form/assets/FormSpacingDetails.svg @@ -1,5 +1,5 @@ - + diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/form-division.svg b/packages/dnb-ui-lib/src/patterns/form/assets/form-division.svg index 06fd0819cf3..38a6124b59c 100644 --- a/packages/dnb-ui-lib/src/patterns/form/assets/form-division.svg +++ b/packages/dnb-ui-lib/src/patterns/form/assets/form-division.svg @@ -1,5 +1,5 @@ - + @@ -14,7 +14,7 @@ - + diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing-details.svg b/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing-details.svg index 4ad2d7f4c2a..3d0ac40eae6 100644 --- a/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing-details.svg +++ b/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing-details.svg @@ -1,5 +1,5 @@ - + diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing.svg b/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing.svg index a706e1db0af..c9d2379a598 100644 --- a/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing.svg +++ b/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing.svg @@ -1,5 +1,5 @@ - + diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/form-summary-pattern.svg b/packages/dnb-ui-lib/src/patterns/form/assets/form-summary-pattern.svg index 8c339715b4b..80c2c1ebef5 100644 --- a/packages/dnb-ui-lib/src/patterns/form/assets/form-summary-pattern.svg +++ b/packages/dnb-ui-lib/src/patterns/form/assets/form-summary-pattern.svg @@ -1,6 +1,6 @@ - + diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/form-summary.svg b/packages/dnb-ui-lib/src/patterns/form/assets/form-summary.svg index 20522f5d6af..1b9145b0890 100644 --- a/packages/dnb-ui-lib/src/patterns/form/assets/form-summary.svg +++ b/packages/dnb-ui-lib/src/patterns/form/assets/form-summary.svg @@ -1,5 +1,5 @@ - + diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/progress-steps.svg b/packages/dnb-ui-lib/src/patterns/form/assets/progress-steps.svg index 43044b3731d..4fd1da159dd 100644 --- a/packages/dnb-ui-lib/src/patterns/form/assets/progress-steps.svg +++ b/packages/dnb-ui-lib/src/patterns/form/assets/progress-steps.svg @@ -1,6 +1,6 @@ - + diff --git a/packages/dnb-ui-lib/src/patterns/form/description.md b/packages/dnb-ui-lib/src/patterns/form/description.md index 0f4d3eceaa6..ddcc2ec520b 100644 --- a/packages/dnb-ui-lib/src/patterns/form/description.md +++ b/packages/dnb-ui-lib/src/patterns/form/description.md @@ -38,11 +38,11 @@ When designing forms, make sure to design for small, as well as desktop-sized di ##### General Guidelines - All input fields have a border-radius equal to half their height. -- All input fields have a border color of Sea Green Alt (#008484). -- All input fields have a background color of Sea Green 4 (#f5fafa). -- All input fields have a ‘hover’ border color of of Sea Green 4 (#f5fafa). -- All input fields have a 'focus' border color of of Signal Orange (#ff5400). -- All input fields text is always Emerald Green (#14555A)) color. +- All input fields have a border color of --color-sea-green-alt. +- All input fields have a background color of --color-mint-green-12. +- All input fields have a ‘hover’ border color of of --color-mint-green-12. +- All input fields have a 'focus' border color of of --color-signal-orange. +- All input fields text is always --color-emerald-green color. - Text on regular inputs (or labels for checkboxes and radio buttons) use the xxx text style. - Form labels use the xxx text style. - Text input, textarea and select have xxx left/right padding. diff --git a/packages/dnb-ui-lib/src/patterns/summary-table/style/_summary-table.scss b/packages/dnb-ui-lib/src/patterns/summary-table/style/_summary-table.scss index d49569b9390..27ca77ed3c9 100644 --- a/packages/dnb-ui-lib/src/patterns/summary-table/style/_summary-table.scss +++ b/packages/dnb-ui-lib/src/patterns/summary-table/style/_summary-table.scss @@ -5,7 +5,7 @@ .dnb-summary-table { padding: 2.5rem 0; - background: var(--color-sea-green-4); + background: var(--color-mint-green-12); &__title, &__body { 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 9630ca1f4f2..4284d0ff739 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 @@ -43,7 +43,7 @@ exports[`ViewTitle scss have to match snapshot 1`] = ` --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076; 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 063ae6e08a1..c5048e7567e 100644 --- a/packages/dnb-ui-lib/src/style/core/dnb-core.scss +++ b/packages/dnb-ui-lib/src/style/core/dnb-core.scss @@ -69,7 +69,7 @@ html[data-whatinput='keyboard'] .dnb-style *:not(a):not(div):focus { .dnb-belt { padding: 1rem 0; width: 100%; - background: var(--color-sea-green-4); + background: var(--color-mint-green-12); } .dnb-nudge { display: inline-flex; 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 78d1733d866..bee84bf60fb 100644 --- a/packages/dnb-ui-lib/src/style/core/dnb-style.scss +++ b/packages/dnb-ui-lib/src/style/core/dnb-style.scss @@ -138,7 +138,7 @@ text-align: left; color: var(--color-emerald-green); - background-color: var(--color-sea-green-4); + background-color: var(--color-mint-green-12); border-bottom: 1px solid var(--color-mint-green); } table td { @@ -151,7 +151,7 @@ background-color: #fff; } table tr:nth-child(2n) { - background-color: var(--color-sea-green-4); + background-color: var(--color-mint-green-12); } // General Layout and Spacing + some Styling diff --git a/packages/dnb-ui-lib/src/style/core/properties.scss b/packages/dnb-ui-lib/src/style/core/properties.scss index 5699a93c8f7..1d4b2ee1834 100644 --- a/packages/dnb-ui-lib/src/style/core/properties.scss +++ b/packages/dnb-ui-lib/src/style/core/properties.scss @@ -28,7 +28,7 @@ --color-sea-green-alt: #008484; --color-mint-green-50: #d2f0e9; --color-mint-green-25: #e9f8f4; - --color-sea-green-4: #f5fafa; + --color-mint-green-12: #f4fbf9; --color-sea-green-alt-30: #b3dada; --color-signal-yellow-30: #ffffd7; --color-cherry-red: #e10076;