refactor(front): update background color variables and add transition…

…s where used (#1304)

Closes: #1304

front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css

@@ -19,6 +19,9 @@
 .skill-graph {
   display: flex;
   position: relative;
+  transition-duration: var(--transition-duration);
+  transition-property: box-shadow;
+  transition-timing-function: var(--transition-timing-function);
   margin: 1.5rem auto 0 auto;
   box-shadow: var(--shadow-elevation-low);
   border-radius: 0.25rem;
@@ -36,7 +39,7 @@
       animation-delay: var(--transition-duration-slower);
       animation-fill-mode: forwards;
       transition-duration: var(--transition-duration-fast);
-      transition-property: width, transform, z-index;
+      transition-property: box-shadow, width, transform, z-index;
       transition-timing-function: var(--transition-timing-function);
       cursor: pointer;
       padding: 1rem 0;

front/src/lib/styles/base/theme.css

@@ -3,7 +3,7 @@
 
 :root {
   /* https://www.joshwcomeau.com/shadow-palette/ */
-  --shadow-elevation-low: -0.7px 0.9px 1.3px hsl(var(--shadow-color) / 0.34),
+  /* --shadow-elevation-low: -0.7px 0.9px 1.3px hsl(var(--shadow-color) / 0.34),
     -1.2px 1.5px 2.2px -1.2px hsl(var(--shadow-color) / 0.34),
     -2.8px 3.6px 5.1px -2.5px hsl(var(--shadow-color) / 0.34);
   --shadow-elevation-medium: -0.7px 0.9px 1.3px hsl(var(--shadow-color) / 0.36),
@@ -17,7 +17,7 @@
     -20.3px 25.8px 36.9px -1.4px hsl(var(--shadow-color) / 0.34),
     -31.7px 40.3px 57.7px -1.8px hsl(var(--shadow-color) / 0.34),
     -48.3px 61.2px 87.7px -2.1px hsl(var(--shadow-color) / 0.34),
-    -71.1px 90.2px 129.2px -2.5px hsl(var(--shadow-color) / 0.34);
+    -71.1px 90.2px 129.2px -2.5px hsl(var(--shadow-color) / 0.34); */
 
   --clr-neut-50: #f6f6f6;
   --clr-neut-100: #ececec;
@@ -87,6 +87,18 @@
     --headshot-filter: sepia(100%) saturate(70%) brightness(85%)
       hue-rotate(61deg);
     --shadow-color: var(--sunshine-shadow-clr);
+    --shadow-elevation-low: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+      -9px 9px 9px -0.5px rgba(100, 100, 100, 0.04),
+      -18px 18px 18px -1.5px rgba(100, 100, 100, 0.08);
+    --shadow-elevation-medium: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+      -9px 9px 9px -0.5px rgba(100, 100, 100, 0.04),
+      -18px 18px 18px -1.5px rgba(100, 100, 100, 0.08),
+      -37px 37px 37px -3px rgba(155, 155, 155, 0.16);
+    --shadow-elevation-high: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+      -9px 9px 9px -0.5px rgba(100, 100, 100, 0.04),
+      -18px 18px 18px -1.5px rgba(100, 100, 100, 0.08),
+      -37px 37px 37px -3px rgba(155, 155, 155, 0.16),
+      -75px 75px 75px -6px rgba(155, 155, 155, 0.24);
     --tag-clr: var(--sand-a50);
     --tag-border-clr: var(--jasper-a50);
     --posts-item-filter: brightness(100%);
@@ -172,6 +184,18 @@ html.light-theme {
   --mark-bg-clr: var(--green);
   --headshot-filter: sepia(100%) saturate(70%) brightness(85%) hue-rotate(61deg);
   --shadow-color: var(--sunshine-shadow-clr);
+  --shadow-elevation-low: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+    -9px 9px 9px -0.5px rgba(100, 100, 100, 0.04),
+    -18px 18px 18px -1.5px rgba(100, 100, 100, 0.08);
+  --shadow-elevation-medium: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+    -9px 9px 9px -0.5px rgba(100, 100, 100, 0.04),
+    -18px 18px 18px -1.5px rgba(100, 100, 100, 0.08),
+    -37px 37px 37px -3px rgba(155, 155, 155, 0.16);
+  --shadow-elevation-high: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+    -9px 9px 9px -0.5px rgba(100, 100, 100, 0.04),
+    -18px 18px 18px -1.5px rgba(100, 100, 100, 0.08),
+    -37px 37px 37px -3px rgba(155, 155, 155, 0.16),
+    -75px 75px 75px -6px rgba(155, 155, 155, 0.24);
   --tag-clr: var(--sand-a50);
   --tag-border-clr: var(--jasper-a50);
   --posts-item-filter: brightness(100%);
@@ -262,6 +286,18 @@ html.light-theme {
       var(--content-bg-clr) 333px
     );
     --shadow-color: var(--moonshine-shadow-clr);
+    --shadow-elevation-low: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+      -9px 9px 9px -0.5px rgba(0, 0, 0, 0.08),
+      -18px 18px 18px -1.5px rgba(0, 0, 0, 0.16);
+    --shadow-elevation-medium: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+      -9px 9px 9px -0.5px rgba(0, 0, 0, 0.08),
+      -18px 18px 18px -1.5px rgba(0, 0, 0, 0.16),
+      -37px 37px 37px -3px rgba(0, 0, 0, 0.48);
+    --shadow-elevation-high: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+      -9px 9px 9px -0.5px rgba(0, 0, 0, 0.08),
+      -18px 18px 18px -1.5px rgba(0, 0, 0, 0.16),
+      -37px 37px 37px -3px rgba(0, 0, 0, 0.48),
+      -75px 75px 75px -6px rgba(0, 0, 0, 0.72);
     --rim-clr: var(--moonshine);
     --link-clr: var(--fg-clr-oo);
     --link-clr--hover: var(--celestial);
@@ -336,6 +372,18 @@ html.dark-theme {
     var(--content-bg-clr) 333px
   );
   --shadow-color: var(--moonshine-shadow-clr);
+  --shadow-elevation-low: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+    -9px 9px 9px -0.5px rgba(0, 0, 0, 0.04),
+    -18px 18px 18px -1.5px rgba(0, 0, 0, 0.08);
+  --shadow-elevation-medium: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+    -9px 9px 9px -0.5px rgba(0, 0, 0, 0.04),
+    -18px 18px 18px -1.5px rgba(0, 0, 0, 0.08),
+    -37px 37px 37px -3px rgba(0, 0, 0, 0.16);
+  --shadow-elevation-high: 0px 0px 0px 1px rgba(165, 165, 165, 0.04),
+    -9px 9px 9px -0.5px rgba(0, 0, 0, 0.04),
+    -18px 18px 18px -1.5px rgba(0, 0, 0, 0.08),
+    -37px 37px 37px -3px rgba(0, 0, 0, 0.16),
+    -75px 75px 75px -6px rgba(0, 0, 0, 0.24);
   --primary-clr: var(--celestial);
   --rim-clr: var(--moonshine);
   --link-clr: var(--fg-clr-oo);

front/src/lib/styles/components/animated-image.css

@@ -169,6 +169,9 @@
 
 .animation-player {
   position: relative;
+  transition-duration: var(--transition-duration);
+  transition-property: box-shadow;
+  transition-timing-function: var(--transition-timing-function);
   box-shadow: var(--shadow-elevation-low);
   max-width: 100%;
 

front/src/lib/styles/components/nav.css

@@ -9,6 +9,7 @@
   opacity: 0;
   z-index: 1;
   transition:
+    box-shadow 0.3s ease,
     top 0.3s ease,
     opacity 0.3s ease,
     color 0.3s ease;

front/src/lib/styles/components/page-nav.css

@@ -79,7 +79,7 @@
     opacity: 0.8;
     z-index: 1;
     transition-duration: var(--transition-duration);
-    transition-property: background-color, color;
+    transition-property: box-shadow, background-color, color;
     transition-timing-function: var(--transition-timing-function);
     cursor: pointer;
     box-shadow: var(--shadow-elevation-low);

front/src/lib/styles/components/post-hero.css

@@ -33,7 +33,7 @@
   z-index: 4;
   filter: var(--post-hero-filter);
   transition-duration: 1s;
-  transition-property: opacity, filter;
+  transition-property: box-shadow, opacity, filter;
   transition-timing-function: var(--transform-timing-function);
   box-shadow: var(--shadow-elevation-low);
   border-radius: 0.75rem;

front/src/lib/styles/components/posts-grid.css

@@ -15,7 +15,7 @@
   z-index: 1;
   filter: var(--posts-item-filter);
   transition-duration: var(--transition-duration);
-  transition-property: filter;
+  transition-property: box-shadow, filter;
   transition-timing-function: ease-out;
   will-change: opacity;
   cursor: pointer;

front/src/lib/styles/pages/category.css

@@ -218,6 +218,9 @@
     padding-right: 0;
   }
   .category .category-posts-list .post-item .category-tag a {
+    transition-duration: var(--transition-duration);
+    transition-property: box-shadow;
+    transition-timing-function: var(--transition-timing-function);
     margin-bottom: 0.33rem;
     box-shadow: var(--shadow-elevation-low);
     border: thin solid var(--tag-border-clr);

front/src/lib/styles/pages/home.css

@@ -46,7 +46,7 @@
   z-index: 5;
   filter: var(--headshot-filter);
   transition-duration: var(--transition-duration);
-  transition-property: border-color, opacity, filter;
+  transition-property: border-color, box-shadow, opacity, filter;
   transition-timing-function: var(--transition-timing-function);
   margin-top: 1rem;
   box-shadow: var(--shadow-elevation-low);