Merge pull request #1988 from ProgrammeVitam/design_system-elevation

Story #11854 clean code: align elevation with Figma
ProgrammeVitam · Aug 14, 2024 · 8275b44 · 8275b44
2 parents c295fe4 + 72ccdad
commit 8275b44
Showing 1 changed file with 14 additions and 18 deletions.
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
@@ -5,8 +5,8 @@
 /* X_Dark/2dp-dark */
 @mixin elevation-1-dark {
   box-shadow:
-    0 0 2px rgba(var(--vitamui-grey-rgb), 0.2),
-    0 1px 4px rgba(var(--vitamui-grey-rgb), 0.05);
+    0 0 2px rgba(var(--vitamui-grey-900-rgb), 0.2),
+    0 1px 4px rgba(var(--vitamui-grey-900-rgb), 0.05);
 }
 
 /* X_Primary/2dp-primary */
@@ -33,8 +33,8 @@
 /* X_Dark/4dp-dark */
 @mixin elevation-2-dark {
   box-shadow:
-    0 1px 4px rgba(var(--vitamui-grey-rgb), 0.2),
-    0 2px 8px rgba(var(--vitamui-grey-rgb), 0.05);
+    0 1px 4px rgba(var(--vitamui-grey-900-rgb), 0.2),
+    0 2px 8px rgba(var(--vitamui-grey-900-rgb), 0.05);
 }
 
 /* X_Primary/4dp-primary */
@@ -61,8 +61,8 @@
 /* X_Dark/8dp-dark */
 @mixin elevation-3-dark {
   box-shadow:
-    0 2px 8px rgba(var(--vitamui-grey-rgb), 0.2),
-    0 4px 16px rgba(var(--vitamui-grey-rgb), 0.05);
+    0 2px 8px rgba(var(--vitamui-grey-900-rgb), 0.2),
+    0 4px 16px rgba(var(--vitamui-grey-900-rgb), 0.05);
 }
 
 /* X_Primary/8dp-primary */
@@ -89,8 +89,8 @@
 /* X_Dark/16dp-dark */
 @mixin elevation-4-dark {
   box-shadow:
-    0 4px 16px rgba(var(--vitamui-grey-rgb), 0.2),
-    0 8px 32px rgba(var(--vitamui-grey-rgb), 0.05);
+    0 4px 16px rgba(var(--vitamui-grey-900-rgb), 0.2),
+    0 8px 32px rgba(var(--vitamui-grey-900-rgb), 0.05);
 }
 
 /* X_Primary/16dp-primary */
@@ -117,8 +117,8 @@
 /* X_Dark/32dp-dark */
 @mixin elevation-5-dark {
   box-shadow:
-    0 6px 24px rgba(var(--vitamui-grey-rgb), 0.2),
-    0 12px 48px rgba(var(--vitamui-grey-rgb), 0.05);
+    0 6px 24px rgba(var(--vitamui-grey-900-rgb), 0.2),
+    0 12px 48px rgba(var(--vitamui-grey-900-rgb), 0.05);
 }
 
 /* X_Primary/32dp-primary */
@@ -145,8 +145,8 @@
 /* X_Dark/64dp-dark */
 @mixin elevation-6-dark {
   box-shadow:
-    0 8px 32px rgba(var(--vitamui-grey-rgb), 0.2),
-    0 16px 64px rgba(var(--vitamui-grey-rgb), 0.05);
+    0 8px 32px rgba(var(--vitamui-grey-900-rgb), 0.2),
+    0 16px 64px rgba(var(--vitamui-grey-900-rgb), 0.05);
 }
 
 /* X_Primary/64dp-primary */
@@ -173,8 +173,8 @@
 /* X_Dark/128dp-dark */
 @mixin elevation-7-dark {
   box-shadow:
-    0 10px 40px rgba(var(--vitamui-grey-rgb), 0.2),
-    0 20px 80px rgba(var(--vitamui-grey-rgb), 0.05);
+    0 10px 40px rgba(var(--vitamui-grey-900-rgb), 0.2),
+    0 20px 80px rgba(var(--vitamui-grey-900-rgb), 0.05);
 }
 
 /* X_Primary/128dp-primary */
@@ -202,10 +202,6 @@
   &:not(.disabled),
   &:not(:disabled) {
     @include elevation-2-dark;
-
-    &:hover {
-      @include elevation-3-dark;
-    }
   }
   &.disabled,
   &:disabled {