refactor(front): refactor transition variables and overrides (#1025)

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

@@ -33,34 +33,20 @@
     height: 0.33rem;
     @media screen and (min-width: 640px) {
       animation: graphOut 0s;
-      animation-delay: 1s;
+      animation-delay: var(--transition-duration-slower);
       animation-fill-mode: forwards;
       transition-duration: var(--transition-duration-fast);
-      transition-property: width, transform;
+      transition-property: width, transform, z-index;
       transition-timing-function: var(--transition-timing-function);
       cursor: pointer;
       padding: 1rem 0;
-      @media (prefers-reduced-motion: reduce) and (width >= 1px) {
-        animation-duration: 0.001s !important;
-        animation-iteration-count: 1 !important;
-        transition-delay: 0.001s !important;
-        transition-duration: 0.001s !important;
-        scroll-behavior: auto !important;
-      }
       &:not(:hover),
       &:not(:focus),
       &:not(:focus-visible),
       &:not(:active) {
+        z-index: 0;
         &::before {
-          transition-delay: 50ms;
-          transition-duration: 500ms;
-          @media (prefers-reduced-motion: reduce) and (width >= 1px) {
-            animation-duration: 0.001s !important;
-            animation-iteration-count: 1 !important;
-            transition-delay: 0.001s !important;
-            transition-duration: 0.001s !important;
-            scroll-behavior: auto !important;
-          }
+          transition-duration: var(--transition-duration-slow);
         }
       }
       &:hover,
@@ -72,16 +58,8 @@
         z-index: 1;
         animation: graphIn 0s;
         animation-delay: 0s;
-        transition-delay: (333ms);
         box-shadow: var(--shadow-elevation-low);
         width: calc(var(--width) * 2 * 100%);
-        @media (prefers-reduced-motion: reduce) and (width >= 1px) {
-          animation-duration: 0.001s !important;
-          animation-iteration-count: 1 !important;
-          transition-delay: 0.001s !important;
-          transition-duration: 0.001s !important;
-          scroll-behavior: auto !important;
-        }
         /* overflow: visible; */
         /* filter: brightness(1.1); */
         /* transform: scale(1.01); */
@@ -90,13 +68,6 @@
           filter: contrast(10%) brightness(100%);
           transition-delay: 0s;
           transition-duration: var(--transition-duration-fast);
-          @media (prefers-reduced-motion: reduce) and (width >= 1px) {
-            animation-duration: 0.001s !important;
-            animation-iteration-count: 1 !important;
-            transition-delay: 0.001s !important;
-            transition-duration: 0.001s !important;
-            scroll-behavior: auto !important;
-          }
         }
         &:first-of-type {
           border-left: none;
@@ -121,7 +92,6 @@
       mix-blend-mode: var(--skill-graph-blend);
       /* mix-blend-mode: multiply; */
       filter: contrast(10%) brightness(100%) blur(0);
-      transition-delay: 1s;
       transition-duration: var(--transition-duration-fast);
       transition-property: background-color, filter, opacity, transform;
       will-change: opacity, background-color, filter, transform;
@@ -133,13 +103,6 @@
       width: 100%;
       height: 100%;
       content: '';
-      @media (prefers-reduced-motion: reduce) and (width >= 1px) {
-        animation-duration: 0.001s !important;
-        animation-iteration-count: 1 !important;
-        transition-delay: 0.001s !important;
-        transition-duration: 0.001s !important;
-        scroll-behavior: auto !important;
-      }
     }
     &__details {
       position: absolute;
@@ -153,13 +116,6 @@
       box-sizing: border-box;
       width: 100%;
       text-align: center;
-      @media (prefers-reduced-motion: reduce) and (width >= 1px) {
-        animation-duration: 0.001s !important;
-        animation-iteration-count: 1 !important;
-        transition-delay: 0.001s !important;
-        transition-duration: 0.001s !important;
-        scroll-behavior: auto !important;
-      }
       &__term,
       &__def,
       & dd,
@@ -186,13 +142,6 @@
         transition-property: max-height;
         transition-timing-function: var(--transition-timing-function);
         max-height: 0.5rem;
-        @media (prefers-reduced-motion: reduce) and (width >= 1px) {
-          animation-duration: 0.001s !important;
-          animation-iteration-count: 1 !important;
-          transition-delay: 0.001s !important;
-          transition-duration: 0.001s !important;
-          scroll-behavior: auto !important;
-        }
       }
     }
     &:first-of-type {

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

@@ -106,7 +106,7 @@ body.ready .header.scroll-transition {
 
   a {
     display: inline-block;
-    transition-duration: var(--transition-duration-md);
+    transition-duration: var(--transition-duration-slow);
     transition-property: border color;
     border-bottom-width: thin;
     border-bottom-style: solid;
@@ -119,8 +119,8 @@ body.ready .header.scroll-transition {
   p {
     transform-style: preserve-3d;
     opacity: 0.3;
-    transition-delay: 1s;
-    transition-duration: 2s;
+    transition-delay: var(--transition-duration-slower);
+    transition-duration: var(--transition-duration-slowest);
     transition-property: opacity, filter;
     transition-timing-function: var(--transition-timing-function);
     padding-bottom: 0.25rem;

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

@@ -1,4 +1,24 @@
+:root {
+  --transition-duration-fastest: 100ms;
+  --transition-duration-faster: 150ms;
+  --transition-duration-fast: 215ms;
+  --transition-duration: 333ms;
+  --transition-duration-slow: 500ms;
+  --transition-duration-slower: 1s;
+  --transition-duration-slowest: 2s;
+  --transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
 @media (prefers-reduced-motion: reduce) {
+  :root {
+    --transition-duration: 0.001s !important;
+    --transition-duration-fastest: 0.001s !important;
+    --transition-duration-faster: 0.001s !important;
+    --transition-duration-fast: 0.001s !important;
+    --transition-duration-slow: 0.001s !important;
+    --transition-duration-slower: 0.001s !important;
+    --transition-duration-slowest: 0.001s !important;
+  }
   *,
   ::before,
   ::after,

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

@@ -135,8 +135,8 @@
       position: absolute;
       opacity: 0;
       transition:
-        opacity var(--transition-duration-md) ease-in-out,
-        color var(--transition-duration-md);
+        opacity var(--transition-duration-slow) ease-in-out,
+        color var(--transition-duration-slow);
       box-sizing: content-box;
       inset: 0 0 auto auto;
       border: none;

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

@@ -1,10 +1,3 @@
-:root {
-  --transition-duration: 333ms;
-  --transition-duration-fast: 150ms;
-  --transition-duration-md: 500ms;
-  --transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-}
-
 .hidden {
   display: none;
 }

front/src/lib/styles/components/cv-timeline.css

@@ -1,16 +1,9 @@
 label.date-toggle,
 label.date-toggle time,
 svg .calback {
-  transition-duration: var(--transition-duration-md);
+  transition-duration: var(--transition-duration-slow);
   transition-property: color, opacity, fill;
   transition-timing-function: var(--transition-timing-function);
-  @media (prefers-reduced-motion: reduce) {
-    animation-duration: 0.001s !important;
-    animation-iteration-count: 1 !important;
-    transition-delay: 0.001s !important;
-    transition-duration: 0.001s !important;
-    scroll-behavior: auto !important;
-  }
 }
 label.date-toggle {
   display: block;
@@ -42,13 +35,6 @@ label.date-toggle {
     color: var(--fg-clr);
     font-size: 1.25rem;
     text-align: center;
-    @media (prefers-reduced-motion: reduce) {
-      animation-duration: 0.001s !important;
-      animation-iteration-count: 1 !important;
-      transition-delay: 0.001s !important;
-      transition-duration: 0.001s !important;
-      scroll-behavior: auto !important;
-    }
   }
   svg .calback {
     fill: var(--bg-clr);

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

@@ -30,7 +30,7 @@
 .nav-home {
   vertical-align: bottom;
   transition: unset;
-  transition-duration: var(--transition-duration-md);
+  transition-duration: var(--transition-duration-slow);
   transition-property: font-size, color;
   transition-timing-function: var(--transition-timing-function);
   will-change: color;

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

@@ -90,21 +90,20 @@
   }
   &:hover,
   &:focus,
-  &:focus,
   &:focus-visible,
   &:active {
     box-shadow: var(--posts-item-link-hover-box-shadow);
     background-color: rgba(0, 0, 0, 0);
     .link-bg {
-      transition-delay: 133ms;
+      transition-delay: var(--transition-duration-faster);
       background-color: rgba(var(--clr-neut-900-rgb), 0.6);
       color: rgba(255, 255, 255, 1);
     }
   }
   .link-bg {
     align-self: center;
     transition-delay: 0;
-    transition-duration: var(--transition-duration-md);
+    transition-duration: var(--transition-duration-slow);
     transition-property: background-color, color;
     transition-timing-function: ease-out;
     border-radius: 0.5rem;

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

@@ -21,15 +21,15 @@
       opacity: 0.3;
       transition:
         color var(--transition-duration),
-        opacity 200ms;
+        opacity var(--transition-duration-fast);
       transition-timing-function: var(--transition-timing-function);
       padding: 0.25rem;
       height: 100%;
       &:hover,
       &:focus {
         opacity: 1;
         transition:
-          color 200ms,
+          color var(--transition-duration-fast),
           opacity var(--transition-duration);
         transition-timing-function: var(--transition-timing-function);
         color: var(--highlight-clr);

front/src/lib/styles/global.css

@@ -10,7 +10,7 @@
 :root {
   --white: 223, 224, 224;
   --black: 19, 19, 20;
-  transition-duration: var(--transition-duration-md);
+  transition-duration: var(--transition-duration-slow);
   transition-property: background;
   transition-timing-function: var(--transition-timing-function);
   background: var(--bg-lightsource);
@@ -30,7 +30,7 @@ html {
   display: block;
   position: relative;
   transition: background-color;
-  transition-duration: var(--transition-duration-md);
+  transition-duration: var(--transition-duration-slow);
   background-color: var(--bg-clr);
   min-height: 100%;
   overflow: clip;