Merge pull request #914 from SwedbankPay/feature/SWED-2279-color_page…

…_update

SWED-2279 color page update

.github/ISSUE_TEMPLATE/bug_report.md

@@ -5,47 +5,48 @@ about: Create a report to help us improve
 
 <!--- Provide a general summary of the issue in the Title above -->
 
-**Describe the bug**
+## Describe the bug
 
 Provide a more detailed introduction to the issue itself, and why you consider it to be a bug.
 
-**To Reproduce**
+## To Reproduce
+
 Steps to reproduce the behavior:
 
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+## Expected behavior
 
 A clear and concise description of what you expected to happen.
 
-**Actual behavior**
+## Actual behavior
 
 A clear and concise description of what actually happened.
 
-**Possible fix**
+## Possible fix
 
 Not obligatory, but suggest a fix or reason for the bug.
 
-**Screenshots**
+## Screenshots
 
 If applicable, add screenshots to help explain your problem.
 
-**Desktop (please complete the following information):**
+## Desktop (please complete the following information):
 
--   OS: [e.g. iOS]
--   Browser [e.g. chrome, safari]
--   Version [e.g. 22]
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
-**Smartphone (please complete the following information):**
+## Smartphone (please complete the following information):
 
--   Device: [e.g. iPhone6]
--   OS: [e.g. iOS8.1]
--   Browser [e.g. stock browser, safari]
--   Version [e.g. 22]
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
-**Additional context**
+## Additional context
 
 Add any other context about the problem here.

RELEASE_NOTES.md

@@ -6,12 +6,16 @@
 
 ## Component changes
 
-- Topbar - v2 experimental stage - disabled by default (migration involves breaking changes)
+- new Colors
+
+- Colors utilities:
+  - removed the possibility to combine text-color utility classes WITH `.text-muted` to decrease their opacity
+  - `.text-muted` class still exist, but it will always mean a full opacity color
 
 ### Non breaking UI changes
 
 ## Testing
 
 ## Design System website
 
-- Add the new Playbook section in Identity
+- Update the Colors page for SwedbankPay side

src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap

@@ -672,7 +672,7 @@ exports[`Components: ActionList renders 1`] = `
   className="row"
 >
   <div
-    className="doc-body col-12"
+    className="doc-body col-12 "
     id="doc-body"
   >
     <div

src/App/ComponentsDocumentation/components/Breadcrumb/__snapshots__/index.test.js.snap

@@ -5,7 +5,7 @@ exports[`Documentation: Breadcrumb renders 1`] = `
   className="row"
 >
   <div
-    className="doc-body col-12"
+    className="doc-body col-12 "
     id="doc-body"
   >
     <p

src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap

@@ -2497,7 +2497,7 @@ exports[`Dashboard: Charts renders 1`] = `
   className="row"
 >
   <div
-    className="doc-body col-12"
+    className="doc-body col-12 "
     id="doc-body"
   >
     <div

src/App/ComponentsDocumentation/components/Footer/__snapshots__/index.test.js.snap

@@ -5,7 +5,7 @@ exports[`Component: footer renders 1`] = `
   className="row"
 >
   <div
-    className="doc-body col-12"
+    className="doc-body col-12 "
     id="doc-body"
   >
     <p

src/App/ComponentsDocumentation/components/Lists/__snapshots__/index.test.js.snap

@@ -2089,7 +2089,7 @@ exports[`Documentation: Lists renders 1`] = `
   className="row"
 >
   <div
-    className="doc-body col-12"
+    className="doc-body col-12 "
     id="doc-body"
   >
     <p

src/App/ComponentsDocumentation/components/MediaObject/__snapshots__/index.test.js.snap

@@ -761,7 +761,7 @@ exports[`Documentation: MediaObject renders 1`] = `
   className="row"
 >
   <div
-    className="doc-body col-12"
+    className="doc-body col-12 "
     id="doc-body"
   >
     <p

src/App/ComponentsDocumentation/components/Panel/__snapshots__/index.test.js.snap

@@ -897,7 +897,7 @@ exports[`Documentation: Panel renders 1`] = `
   className="row"
 >
   <div
-    className="doc-body col-12"
+    className="doc-body col-12 "
     id="doc-body"
   >
     <p

src/App/ComponentsDocumentation/components/ProgressSteps/__snapshots__/index.test.js.snap

@@ -716,7 +716,7 @@ exports[`Documentation: Progress Steps renders 1`] = `
   className="row"
 >
   <div
-    className="doc-body col-12"
+    className="doc-body col-12 "
     id="doc-body"
   >
     <p