From b5af6089e33fa7a841d535f545b78e110abc60d4 Mon Sep 17 00:00:00 2001
From: Maxime Robert <maxime.robert@smile.fr>
Date: Mon, 7 Oct 2024 18:54:50 +0200
Subject: [PATCH] Story #13488: Improve shadows

---
 .../design-system/src/app/app.module.ts       |  2 -
 .../elevations/elevations.component.html      | 56 ++++----------
 .../elevations/elevations.component.scss      | 14 +++-
 .../elevations/elevations.component.ts        | 18 ++++-
 .../elevations/elevations.module.ts           | 10 ---
 .../projects/vitamui-library/ng-package.json  |  3 +-
 .../accordion/accordion.component.scss        |  4 +-
 .../logbook-operation-facet.component.scss    | 10 +--
 ...multiple-options-datepicker.component.scss |  5 +-
 .../vitamui-facet.component.scss              | 10 +--
 .../src/sass/mixins/_elevation.scss           | 77 ++++++++++++-------
 11 files changed, 105 insertions(+), 104 deletions(-)
 delete mode 100644 ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.module.ts

diff --git a/ui/ui-frontend/projects/design-system/src/app/app.module.ts b/ui/ui-frontend/projects/design-system/src/app/app.module.ts
index 720d234e947..b5f15148f3d 100644
--- a/ui/ui-frontend/projects/design-system/src/app/app.module.ts
+++ b/ui/ui-frontend/projects/design-system/src/app/app.module.ts
@@ -64,7 +64,6 @@ import { ArraysModule } from './components/arrays/arrays.module';
 import { BreadcrumbModule } from './components/breadcrumb/breadcrumb.module';
 import { ButtonsModule } from './components/buttons/buttons.module';
 import { ColorsModule } from './components/colors/colors.module';
-import { ElevationModule } from './components/elevations/elevations.module';
 import { IconsModule } from './components/icons/icons.module';
 import { InputsModule } from './components/inputs/inputs.module';
 import { MiscellaneousModule } from './components/miscellaneous/miscellaneous.module';
@@ -98,7 +97,6 @@ export function httpLoaderFactory(httpClient: HttpClient): MultiTranslateHttpLoa
     ChipsModule,
     ColorsModule,
     DesignSystemModule,
-    ElevationModule,
     IconsModule,
     InputsModule,
     LoggerModule.forRoot(),
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.html b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.html
index 0efdcb5ba74..4ea146ac61c 100644
--- a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.html
+++ b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.html
@@ -1,45 +1,15 @@
 <h2>{{ 'ELEVATIONS.TITLE' | translate }}</h2>
 
-<h3>{{ 'ELEVATIONS.DARK' | translate }}</h3>
-<div class="d-flex mb-5">
-  <div class="elevation-box elevation dark-1">2dp-dark</div>
-  <div class="elevation-box elevation dark-2">4dp-dark</div>
-  <div class="elevation-box elevation dark-3">8dp-dark</div>
-  <div class="elevation-box elevation dark-4">16dp-dark</div>
-  <div class="elevation-box elevation dark-5">32dp-dark</div>
-  <div class="elevation-box elevation dark-6">64p-dark</div>
-  <div class="elevation-box elevation dark-7">128dp-dark</div>
-</div>
-
-<h3>{{ 'ELEVATIONS.PRIMARY' | translate }}</h3>
-<div class="d-flex mb-5">
-  <div class="elevation-box elevation primary-1">2dp-primary</div>
-  <div class="elevation-box elevation primary-2">4dp-primary</div>
-  <div class="elevation-box elevation primary-3">8dp-primary</div>
-  <div class="elevation-box elevation primary-4">16dp-primary</div>
-  <div class="elevation-box elevation primary-5">32dp-primary</div>
-  <div class="elevation-box elevation primary-6">64dp-primary</div>
-  <div class="elevation-box elevation primary-7">128dp-primary</div>
-</div>
-
-<h3>{{ 'ELEVATIONS.SECONDARY' | translate }}</h3>
-<div class="d-flex mb-5">
-  <div class="elevation-box elevation secondary-1">2dp-secondary</div>
-  <div class="elevation-box elevation secondary-2">4dp-secondary</div>
-  <div class="elevation-box elevation secondary-3">8dp-secondary</div>
-  <div class="elevation-box elevation secondary-4">16dp-secondary</div>
-  <div class="elevation-box elevation secondary-5">32dp-secondary</div>
-  <div class="elevation-box elevation secondary-6">64dp-secondary</div>
-  <div class="elevation-box elevation secondary-7">128dp-secondary</div>
-</div>
-
-<h3>{{ 'ELEVATIONS.TERTIARY' | translate }}</h3>
-<div class="d-flex mb-5">
-  <div class="elevation-box elevation tertiary-1">2dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-2">4dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-3">8dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-4">16dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-5">32dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-6">64dp-tertiary</div>
-  <div class="elevation-box elevation tertiary-7">128dp-tertiary</div>
-</div>
+@for (color of colors; track color) {
+  <h3>{{ 'ELEVATIONS.' + (color | uppercase) | translate }}</h3>
+  <div class="d-flex mb-5 overflow-auto">
+    @for (elevation of elevations; track elevation) {
+      <div #element class="elevation-box elevation {{ color }}-{{ elevation }}">
+        <strong>{{ name(elevation, color) }}</strong>
+        @for (part of getBoxShadow(element); track part) {
+          <div class="text-nowrap">{{ part }}</div>
+        }
+      </div>
+    }
+  </div>
+}
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.scss b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.scss
index 9a37d5526e8..ce29466edf5 100644
--- a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.scss
+++ b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.scss
@@ -5,9 +5,21 @@ div {
   padding: 20px;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
+.text-nowrap {
+  text-wrap: nowrap;
+}
+
 .elevation-box {
   border-radius: 10px;
-  margin-right: 20px;
+  margin: 50px;
+
+  div {
+    padding: 0;
+  }
 
   &.dark-1 {
     @include elevation-1-dark;
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.ts b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.ts
index 5221b47e949..4d6918fb522 100644
--- a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.ts
+++ b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.ts
@@ -1,8 +1,24 @@
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { UpperCasePipe } from '@angular/common';
 
 @Component({
   selector: 'design-system-elevations',
   templateUrl: './elevations.component.html',
   styleUrls: ['./elevations.component.scss'],
+  imports: [TranslateModule, UpperCasePipe],
+  standalone: true,
 })
-export class ElevationComponent {}
+export class ElevationComponent {
+  colors = ['dark', 'primary', 'secondary', 'tertiary'];
+  elevations = Array.from({ length: 7 }, (_, i) => i + 1);
+  name = (elevation: number, color: string) => `${Math.pow(2, elevation)}dp-${color}`;
+
+  getBoxShadow(element: HTMLElement) {
+    return element
+      .computedStyleMap()
+      .get('box-shadow')
+      .toString()
+      .match(/rgba([^)]+)[^,]+/g);
+  }
+}
diff --git a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.module.ts b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.module.ts
deleted file mode 100644
index 51dd55fad4e..00000000000
--- a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { VitamUICommonModule } from 'vitamui-library';
-import { ElevationComponent } from './elevations.component';
-
-@NgModule({
-  imports: [CommonModule, VitamUICommonModule],
-  declarations: [ElevationComponent],
-})
-export class ElevationModule {}
diff --git a/ui/ui-frontend/projects/vitamui-library/ng-package.json b/ui/ui-frontend/projects/vitamui-library/ng-package.json
index 9e2537b1a91..4ef8cac1d3a 100644
--- a/ui/ui-frontend/projects/vitamui-library/ng-package.json
+++ b/ui/ui-frontend/projects/vitamui-library/ng-package.json
@@ -4,6 +4,7 @@
   "assets": ["./src/sass"],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "cssUrl": "inline"
+    "cssUrl": "inline",
+    "styleIncludePaths": ["src/sass"]
   }
 }
diff --git a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/accordion/accordion.component.scss b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/accordion/accordion.component.scss
index 511c368f713..2a9408cfd3e 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/accordion/accordion.component.scss
+++ b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/accordion/accordion.component.scss
@@ -28,9 +28,7 @@
 }
 
 .header {
-  box-shadow:
-    0 0 2px 0 rgba(33, 33, 33, 0.2),
-    0 1px 4px 0 rgba(33, 33, 33, 0.05);
+  @include shadow-2dp-dark;
   min-height: 50px;
   padding: 0px 16px;
   border-radius: 5px;
diff --git a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/logbook-operation-facet/logbook-operation-facet.component.scss b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/logbook-operation-facet/logbook-operation-facet.component.scss
index 0e32d8b69a6..d0519ea1949 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/logbook-operation-facet/logbook-operation-facet.component.scss
+++ b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/logbook-operation-facet/logbook-operation-facet.component.scss
@@ -1,3 +1,5 @@
+@import 'mixins/elevation';
+
 .clickable {
   cursor: pointer;
 }
@@ -25,9 +27,7 @@
   height: 100%;
   min-height: 70px;
   background: #ffffff;
-  box-shadow:
-    0 2px 8px rgba(33, 33, 33, 0.2),
-    0 4px 16px rgba(33, 33, 33, 0.05);
+  @include shadow-8dp-dark;
   border-radius: 5px;
   order: 0;
   padding: 2px;
@@ -67,8 +67,6 @@
   width: 100%;
   height: 60px;
   background: #ffffff;
-  box-shadow:
-    0 2px 8px rgba(33, 33, 33, 0.2),
-    0 4px 16px rgba(33, 33, 33, 0.05);
+  @include shadow-8dp-dark;
   border-radius: 5px;
 }
diff --git a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/multiple-options-datepicker/multiple-options-datepicker.component.scss b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/multiple-options-datepicker/multiple-options-datepicker.component.scss
index 3a9aafb4519..3bb94370f23 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/multiple-options-datepicker/multiple-options-datepicker.component.scss
+++ b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/multiple-options-datepicker/multiple-options-datepicker.component.scss
@@ -1,4 +1,5 @@
 @import '../../../../sass/variables/colors';
+@import '../../../../sass/mixins/elevation';
 
 :host {
   &.ng-invalid:not(.ng-pristine) .vitamui-input {
@@ -24,9 +25,7 @@ mat-datepicker-toggle mat-icon {
 }
 
 ::ng-deep .mat-datepicker-content {
-  box-shadow:
-    0 0.2px 0.6px 0 rgba(117, 117, 117, 1),
-    0 0.6px 2px 0 rgba(33, 33, 33, 0.2) !important;
+  @include shadow-8dp-dark;
 
   .mat-calendar {
     height: fit-content !important;
diff --git a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/vitamui-facet/vitamui-facet.component.scss b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/vitamui-facet/vitamui-facet.component.scss
index 6df7bf01066..aa90972b5c7 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/vitamui-facet/vitamui-facet.component.scss
+++ b/ui/ui-frontend/projects/vitamui-library/src/app/modules/components/vitamui-facet/vitamui-facet.component.scss
@@ -1,3 +1,5 @@
+@import 'mixins/elevation';
+
 .clickable {
   cursor: pointer;
 }
@@ -52,9 +54,7 @@
   height: 100%;
   min-height: 90px;
   background: #ffffff;
-  box-shadow:
-    0 2px 8px rgba(33, 33, 33, 0.2),
-    0 4px 16px rgba(33, 33, 33, 0.05);
+  @include shadow-8dp-dark;
   border-radius: 5px;
   order: 0;
   padding: 2px;
@@ -95,8 +95,6 @@
   width: 100%;
   height: 60px;
   background: #ffffff;
-  box-shadow:
-    0 2px 8px rgba(33, 33, 33, 0.2),
-    0 4px 16px rgba(33, 33, 33, 0.05);
+  @include shadow-8dp-dark;
   border-radius: 5px;
 }
diff --git a/ui/ui-frontend/projects/vitamui-library/src/sass/mixins/_elevation.scss b/ui/ui-frontend/projects/vitamui-library/src/sass/mixins/_elevation.scss
index 51a5dc4e88f..6c4deb932fb 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/sass/mixins/_elevation.scss
+++ b/ui/ui-frontend/projects/vitamui-library/src/sass/mixins/_elevation.scss
@@ -6,196 +6,217 @@
 @mixin elevation-1-dark {
   box-shadow:
     0 0 2px rgba(var(--vitamui-grey-900-rgb), 0.2),
-    0 1px 4px rgba(var(--vitamui-grey-900-rgb), 0.05);
+    0 1px 4px rgba(var(--vitamui-grey-900-rgb), 0.05) !important;
+}
+@mixin shadow-2dp-dark {
+  @include elevation-1-dark;
 }
 
 /* X_Primary/2dp-primary */
 @mixin elevation-1-primary {
   box-shadow:
     0 0 2px rgba(var(--vitamui-primary-rgb), 0.4),
-    0 1px 4px rgba(var(--vitamui-primary-rgb), 0.2);
+    0 1px 4px rgba(var(--vitamui-primary-rgb), 0.2) !important;
 }
 
 /* X_Secondary/2dp-secondary */
 @mixin elevation-1-secondary {
   box-shadow:
     0 0 2px rgba(var(--vitamui-secondary-rgb), 0.4),
-    0 1px 4px rgba(var(--vitamui-secondary-rgb), 0.2);
+    0 1px 4px rgba(var(--vitamui-secondary-rgb), 0.2) !important;
 }
 
 /* X_Tertiary/2dp-tertiary */
 @mixin elevation-1-tertiary {
   box-shadow:
     0 0 2px rgba(var(--vitamui-tertiary-rgb), 0.4),
-    0 1px 4px rgba(var(--vitamui-tertiary-rgb), 0.2);
+    0 1px 4px rgba(var(--vitamui-tertiary-rgb), 0.2) !important;
 }
 
 /* X_Dark/4dp-dark */
 @mixin elevation-2-dark {
   box-shadow:
     0 1px 4px rgba(var(--vitamui-grey-900-rgb), 0.2),
-    0 2px 8px rgba(var(--vitamui-grey-900-rgb), 0.05);
+    0 2px 8px rgba(var(--vitamui-grey-900-rgb), 0.05) !important;
+}
+@mixin shadow-4dp-dark {
+  @include elevation-2-dark;
 }
 
 /* X_Primary/4dp-primary */
 @mixin elevation-2-primary {
   box-shadow:
     0 1px 4px rgba(var(--vitamui-primary-rgb), 0.4),
-    0 2px 8px rgba(var(--vitamui-primary-rgb), 0.2);
+    0 2px 8px rgba(var(--vitamui-primary-rgb), 0.2) !important;
 }
 
 /* X_Secondary/4dp-secondary */
 @mixin elevation-2-secondary {
   box-shadow:
     0 1px 4px rgba(var(--vitamui-secondary-rgb), 0.4),
-    0 2px 8px rgba(var(--vitamui-secondary-rgb), 0.2);
+    0 2px 8px rgba(var(--vitamui-secondary-rgb), 0.2) !important;
 }
 
 /* X_Tertiary/4dp-tertiary */
 @mixin elevation-2-tertiary {
   box-shadow:
     0 1px 4px rgba(var(--vitamui-tertiary-rgb), 0.4),
-    0 2px 8px rgba(var(--vitamui-tertiary-rgb), 0.2);
+    0 2px 8px rgba(var(--vitamui-tertiary-rgb), 0.2) !important;
 }
 
 /* X_Dark/8dp-dark */
 @mixin elevation-3-dark {
   box-shadow:
     0 2px 8px rgba(var(--vitamui-grey-900-rgb), 0.2),
-    0 4px 16px rgba(var(--vitamui-grey-900-rgb), 0.05);
+    0 4px 16px rgba(var(--vitamui-grey-900-rgb), 0.05) !important;
+}
+@mixin shadow-8dp-dark {
+  @include elevation-3-dark;
 }
 
 /* X_Primary/8dp-primary */
 @mixin elevation-3-primary {
   box-shadow:
     0 2px 8px rgba(var(--vitamui-primary-rgb), 0.4),
-    0 4px 16px rgba(var(--vitamui-primary-rgb), 0.2);
+    0 4px 16px rgba(var(--vitamui-primary-rgb), 0.2) !important;
 }
 
 /* X_Secondary/8dp-secondary */
 @mixin elevation-3-secondary {
   box-shadow:
     0 2px 8px rgba(var(--vitamui-secondary-rgb), 0.4),
-    0 4px 16px rgba(var(--vitamui-secondary-rgb), 0.2);
+    0 4px 16px rgba(var(--vitamui-secondary-rgb), 0.2) !important;
 }
 
 /* X_Tertiary/8dp-tertiary */
 @mixin elevation-3-tertiary {
   box-shadow:
     0 2px 8px rgba(var(--vitamui-tertiary-rgb), 0.4),
-    0 4px 16px rgba(var(--vitamui-tertiary-rgb), 0.2);
+    0 4px 16px rgba(var(--vitamui-tertiary-rgb), 0.2) !important;
 }
 
 /* X_Dark/16dp-dark */
 @mixin elevation-4-dark {
   box-shadow:
     0 4px 16px rgba(var(--vitamui-grey-900-rgb), 0.2),
-    0 8px 32px rgba(var(--vitamui-grey-900-rgb), 0.05);
+    0 8px 32px rgba(var(--vitamui-grey-900-rgb), 0.05) !important;
+}
+@mixin shadow-16dp-dark {
+  @include elevation-4-dark;
 }
 
 /* X_Primary/16dp-primary */
 @mixin elevation-4-primary {
   box-shadow:
     0 4px 16px rgba(var(--vitamui-primary-rgb), 0.4),
-    0 8px 32px rgba(var(--vitamui-primary-rgb), 0.2);
+    0 8px 32px rgba(var(--vitamui-primary-rgb), 0.2) !important;
 }
 
 /* X_Secondary/16dp-secondary */
 @mixin elevation-4-secondary {
   box-shadow:
     0 4px 16px rgba(var(--vitamui-secondary-rgb), 0.4),
-    0 8px 32px rgba(var(--vitamui-secondary-rgb), 0.2);
+    0 8px 32px rgba(var(--vitamui-secondary-rgb), 0.2) !important;
 }
 
 /* X_Tertiary/16dp-tertiary */
 @mixin elevation-4-tertiary {
   box-shadow:
     0 4px 16px rgba(var(--vitamui-tertiary-rgb), 0.4),
-    0 8px 32px rgba(var(--vitamui-tertiary-rgb), 0.2);
+    0 8px 32px rgba(var(--vitamui-tertiary-rgb), 0.2) !important;
 }
 
 /* X_Dark/32dp-dark */
 @mixin elevation-5-dark {
   box-shadow:
     0 6px 24px rgba(var(--vitamui-grey-900-rgb), 0.2),
-    0 12px 48px rgba(var(--vitamui-grey-900-rgb), 0.05);
+    0 12px 48px rgba(var(--vitamui-grey-900-rgb), 0.05) !important;
+}
+@mixin shadow-32dp-dark {
+  @include elevation-5-dark;
 }
 
 /* X_Primary/32dp-primary */
 @mixin elevation-5-primary {
   box-shadow:
     0 6px 24px rgba(var(--vitamui-primary-rgb), 0.4),
-    0 12px 48px rgba(var(--vitamui-primary-rgb), 0.2);
+    0 12px 48px rgba(var(--vitamui-primary-rgb), 0.2) !important;
 }
 
 /* X_Secondary/32dp-secondary */
 @mixin elevation-5-secondary {
   box-shadow:
     0 6px 24px rgba(var(--vitamui-secondary-rgb), 0.4),
-    0 12px 48px rgba(var(--vitamui-secondary-rgb), 0.2);
+    0 12px 48px rgba(var(--vitamui-secondary-rgb), 0.2) !important;
 }
 
 /* X_Tertiary/32dp-tertiary */
 @mixin elevation-5-tertiary {
   box-shadow:
     0 6px 24px rgba(var(--vitamui-tertiary-rgb), 0.4),
-    0 12px 48px rgba(var(--vitamui-tertiary-rgb), 0.2);
+    0 12px 48px rgba(var(--vitamui-tertiary-rgb), 0.2) !important;
 }
 
 /* X_Dark/64dp-dark */
 @mixin elevation-6-dark {
   box-shadow:
     0 8px 32px rgba(var(--vitamui-grey-900-rgb), 0.2),
-    0 16px 64px rgba(var(--vitamui-grey-900-rgb), 0.05);
+    0 16px 64px rgba(var(--vitamui-grey-900-rgb), 0.05) !important;
+}
+@mixin shadow-64dp-dark {
+  @include elevation-6-dark;
 }
 
 /* X_Primary/64dp-primary */
 @mixin elevation-6-primary {
   box-shadow:
     0 8px 32px rgba(var(--vitamui-primary-rgb), 0.4),
-    0 16px 64px rgba(var(--vitamui-primary-rgb), 0.2);
+    0 16px 64px rgba(var(--vitamui-primary-rgb), 0.2) !important;
 }
 
 /* X_Secondary/64dp-secondary */
 @mixin elevation-6-secondary {
   box-shadow:
     0 8px 32px rgba(var(--vitamui-secondary-rgb), 0.4),
-    0 16px 64px rgba(var(--vitamui-secondary-rgb), 0.2);
+    0 16px 64px rgba(var(--vitamui-secondary-rgb), 0.2) !important;
 }
 
 /* X_Tertiary/64dp-tertiary */
 @mixin elevation-6-tertiary {
   box-shadow:
     0 8px 32px rgba(var(--vitamui-tertiary-rgb), 0.4),
-    0 16px 64px rgba(var(--vitamui-tertiary-rgb), 0.2);
+    0 16px 64px rgba(var(--vitamui-tertiary-rgb), 0.2) !important;
 }
 
 /* X_Dark/128dp-dark */
 @mixin elevation-7-dark {
   box-shadow:
     0 10px 40px rgba(var(--vitamui-grey-900-rgb), 0.2),
-    0 20px 80px rgba(var(--vitamui-grey-900-rgb), 0.05);
+    0 20px 80px rgba(var(--vitamui-grey-900-rgb), 0.05) !important;
+}
+@mixin shadow-128dp-dark {
+  @include elevation-7-dark;
 }
 
 /* X_Primary/128dp-primary */
 @mixin elevation-7-primary {
   box-shadow:
     0 10px 40px rgba(var(--vitamui-primary-rgb), 0.4),
-    0 20px 80px rgba(var(--vitamui-primary-rgb), 0.2);
+    0 20px 80px rgba(var(--vitamui-primary-rgb), 0.2) !important;
 }
 
 /* X_Secondary/128dp-secondary */
 @mixin elevation-7-secondary {
   box-shadow:
     0 10px 40px rgba(var(--vitamui-secondary-rgb), 0.4),
-    0 20px 80px rgba(var(--vitamui-secondary-rgb), 0.2);
+    0 20px 80px rgba(var(--vitamui-secondary-rgb), 0.2) !important;
 }
 
 /* X_Tertiary/128dp-secondary */
 @mixin elevation-7-tertiary {
   box-shadow:
     0 10px 40px rgba(var(--vitamui-tertiary-rgb), 0.4),
-    0 20px 80px rgba(var(--vitamui-tertiary-rgb), 0.2);
+    0 20px 80px rgba(var(--vitamui-tertiary-rgb), 0.2) !important;
 }
 
 @mixin input-elevation-dark {