feat: update mat palette colors

BREAKING CHANGE: update of mat palette colors
gravitee-io · Mar 15, 2022 · 2c8b19e · 2c8b19e
1 parent f403985
commit 2c8b19e
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 87 deletions.
diff --git a/ui-particles-angular/projects/ui-particles-angular/src/scss/gio-mat-palettes.scss b/ui-particles-angular/projects/ui-particles-angular/src/scss/gio-mat-palettes.scss
@@ -18,13 +18,13 @@
 // Primary
 $mat-primary-palette: mat.define-palette(
   (
-    darker: #2546c0,
+    darker: #0d298e,
     default: #325afe,
-    lighter: #d6deff,
+    lighter: #e2e8ff,
     contrast: (
       darker: #d6deff,
-      default: #d6deff,
-      lighter: #2546c0,
+      default: #fff,
+      lighter: #0d298e,
     ),
   ),
   default,
@@ -35,13 +35,13 @@ $mat-primary-palette: mat.define-palette(
 // Accent
 $mat-accent-palette: mat.define-palette(
   (
-    darker: #346aa5,
-    default: #01b6ff,
-    lighter: #ebf7ff,
+    darker: #504190,
+    default: #7259de,
+    lighter: #f0edff,
     contrast: (
-      darker: #ebf7ff,
-      default: #292c35,
-      lighter: #346aa5,
+      darker: #f2efff,
+      default: #fff,
+      lighter: #504190,
     ),
   ),
   default,
@@ -52,15 +52,15 @@ $mat-accent-palette: mat.define-palette(
 // Content color
 $mat-content-palette: mat.define-palette(
   (
-    darker: #292c35,
-    default: #828aa1,
+    darker: #100c27,
+    default: #fff,
     disabled: #e0e0e0,
     lighter: #fff,
     contrast: (
       darker: #eee,
-      default: #000,
+      default: #9698a2,
       disabled: #a6a6a6,
-      lighter: #000,
+      lighter: #100c27,
     ),
   ),
   default,
@@ -71,13 +71,13 @@ $mat-content-palette: mat.define-palette(
 // Neutral color
 $mat-neutral-palette: mat.define-palette(
   (
-    darker: #535b76,
+    darker: #434b67,
     default: #e6e8ec,
     lighter: #eff2ff,
     contrast: (
-      darker: #eff2ff,
-      default: #292c35,
-      lighter: #535b76,
+      darker: #fff,
+      default: #100c27,
+      lighter: #434b67,
     ),
   ),
   default,
@@ -88,13 +88,13 @@ $mat-neutral-palette: mat.define-palette(
 // Success color
 $mat-success-palette: mat.define-palette(
   (
-    darker: #2c6249,
-    default: #53d687,
-    lighter: #ebfdee,
+    darker: #2c6161,
+    default: #0ca4a4,
+    lighter: #ecffff,
     contrast: (
-      darker: #ebfdee,
-      default: #292c35,
-      lighter: #2c6249,
+      darker: #fff,
+      default: #100c27,
+      lighter: #2c6161,
     ),
   ),
   default,
@@ -105,13 +105,13 @@ $mat-success-palette: mat.define-palette(
 // Warning color
 $mat-warning-palette: mat.define-palette(
   (
-    darker: #c67700,
-    default: #feaa2e,
-    lighter: #fef9ef,
+    darker: #c94d00,
+    default: #fe733f,
+    lighter: #fff3ef,
     contrast: (
       darker: #fef9ef,
-      default: #292c35,
-      lighter: #c67700,
+      default: #100c27,
+      lighter: #9e3d00,
     ),
   ),
   default,
@@ -122,13 +122,13 @@ $mat-warning-palette: mat.define-palette(
 // Error color
 $mat-error-palette: mat.define-palette(
   (
-    darker: #bf3133,
-    default: #e36160,
-    lighter: #fff5f4,
+    darker: #8b1750,
+    default: #c23a7d,
+    lighter: #fff0f7,
     contrast: (
-      darker: #fff5f4,
-      default: #292c35,
-      lighter: #bf3133,
+      darker: #fff,
+      default: #fff,
+      lighter: #8b1750,
     ),
   ),
   default,
@@ -142,11 +142,11 @@ $mat-decorative-palette: mat.define-palette(
     background: #eff2ff,
     lighter-background: #f7f8fd,
     surface: #fff,
-    divider: #f3f4f9,
+    divider: #e6e7e8,
     contrast: (
-      background: #292c35,
-      default: #292c35,
-      surface: #292c35,
+      background: #100c27,
+      lighter-background: #100c27,
+      surface: #100c27,
       divider: #000,
     ),
   ),
@@ -160,21 +160,21 @@ $mat-method-palette: mat.define-palette(
   (
     patch: #e5fffb,
     post: #ebfdee,
-    put: #fbf2f2,
+    put: #fff5f5,
     get: #ebf7ff,
-    delete: #fff5f4,
+    delete: #fff6fb,
     option: #f4f6ff,
     trace: #eff2ff,
     head: #faf4ff,
     contrast: (
-      patch: #377,
-      post: #2c6249,
-      put: #a15e35,
-      get: #346aa5,
-      delete: #bf3133,
+      patch: #1a5959,
+      post: #124b31,
+      put: #712c01,
+      get: #144881,
+      delete: #8b1750,
       option: #313fbf,
-      trace: #535b76,
-      head: #9a31bf,
+      trace: #313542,
+      head: #730b98,
     ),
   ),
   patch,

diff --git a/...-angular/projects/ui-particles-angular/src/scss/theme/color/showcase-color.component.html b/...-angular/projects/ui-particles-angular/src/scss/theme/color/showcase-color.component.html
@@ -15,32 +15,30 @@
     limitations under the License.
 
 -->
-<mat-card>
-  <table class="sc-table">
-    <thead>
-      <tr>
-        <td>Palettes</td>
-        <td></td>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let colorPalette of colorPalettes">
-        <td class="palette-name">$mat-{{ colorPalette.name }}-palette</td>
-        <td class="palette">
-          <div
-            *ngFor="let color of colorPalette.colors"
-            [style.background-color]="color.color"
-            [style.color]="color.contrast"
-            class="color"
-            title="name / background-color / color"
-          >
-            <div>
-              <b>{{ color.name }}</b>
+<mat-card class="card">
+  <h3 class="title">Color Palettes</h3>
+  <div class="row" *ngFor="let colorPalette of colorPalettes">
+    <h4 class="title">$mat-{{ colorPalette.name }}-palette</h4>
+    <div class="palette">
+      <div class="color" *ngFor="let color of colorPalette.colors">
+        <div
+          class="color__box"
+          [style.background-color]="color.color"
+          [style.color]="color.contrast"
+          title="name / background-color / color"
+        >
+          <div class="color__box__values">
+            <div class="values">
+              <span>{{ color.name }}</span>
+              <span>{{ color.color }}</span>
+            </div>
+            <div class="values">
+              <span>contrast</span>
+              <span>{{ color.contrast }}</span>
             </div>
-            <div>{{ color.color }} - {{ color.contrast }}</div>
           </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+        </div>
+      </div>
+    </div>
+  </div>
 </mat-card>
diff --git a/...-angular/projects/ui-particles-angular/src/scss/theme/color/showcase-color.component.scss b/...-angular/projects/ui-particles-angular/src/scss/theme/color/showcase-color.component.scss
@@ -13,22 +13,48 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.sc-table {
-  width: 100%;
-  text-align: center;
+@use 'sass:map';
+@use '@angular/material' as mat;
 
-  td.palette-name {
-    width: 200px;
-    font-weight: bold;
-  }
+@use '../../../scss' as gio;
+
+.title {
+  flex: 1 1 30%;
+  color: mat.get-color-from-palette(gio.$mat-neutral-palette, default-contrast);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.palette {
+  display: flex;
+  flex: 1 1 100%;
+  flex-wrap: wrap;
+
+  .color {
+    margin: 5px;
+
+    &__box {
+      display: flex;
+      min-width: 140px;
+      height: 72px;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
 
-  td.palette {
-    display: flex;
+      &__values {
+        display: flex;
+        flex-direction: row;
 
-    .color {
-      height: 58px;
-      flex: 1;
-      line-height: 29px;
+        .values {
+          display: flex;
+          flex-direction: column;
+          margin: 5px;
+        }
+      }
     }
   }
 }