From 0adaff08add8f9fce5c2d9cb1b6cf9d6ffe8e3c9 Mon Sep 17 00:00:00 2001 From: Dan Grebb Date: Tue, 4 Jun 2024 20:44:07 -0400 Subject: [PATCH] refactor(front): update background color variables and add transitions where used (#1304) Closes: #1304 --- .../cv/SkillBreakdown/SkillBreakdown.css | 5 +- front/src/lib/styles/base/theme.css | 52 ++++++++++++++++++- .../lib/styles/components/animated-image.css | 3 ++ front/src/lib/styles/components/nav.css | 1 + front/src/lib/styles/components/page-nav.css | 2 +- front/src/lib/styles/components/post-hero.css | 2 +- .../src/lib/styles/components/posts-grid.css | 2 +- front/src/lib/styles/pages/category.css | 3 ++ front/src/lib/styles/pages/home.css | 2 +- 9 files changed, 65 insertions(+), 7 deletions(-) diff --git a/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css b/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css index b5f6f2ea1..a122da1df 100644 --- a/front/src/lib/components/cv/SkillBreakdown/SkillBreakdown.css +++ b/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; diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css index c8cee6c6b..aac2288e0 100644 --- a/front/src/lib/styles/base/theme.css +++ b/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); diff --git a/front/src/lib/styles/components/animated-image.css b/front/src/lib/styles/components/animated-image.css index c20a2e9d4..e92f82bc5 100644 --- a/front/src/lib/styles/components/animated-image.css +++ b/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%; diff --git a/front/src/lib/styles/components/nav.css b/front/src/lib/styles/components/nav.css index 0678c4ad4..b43441d67 100644 --- a/front/src/lib/styles/components/nav.css +++ b/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; diff --git a/front/src/lib/styles/components/page-nav.css b/front/src/lib/styles/components/page-nav.css index 9ae7a654b..d602f827a 100644 --- a/front/src/lib/styles/components/page-nav.css +++ b/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); diff --git a/front/src/lib/styles/components/post-hero.css b/front/src/lib/styles/components/post-hero.css index 849a27c6d..62a482550 100644 --- a/front/src/lib/styles/components/post-hero.css +++ b/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; diff --git a/front/src/lib/styles/components/posts-grid.css b/front/src/lib/styles/components/posts-grid.css index d7d82e64d..c8345986b 100644 --- a/front/src/lib/styles/components/posts-grid.css +++ b/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; diff --git a/front/src/lib/styles/pages/category.css b/front/src/lib/styles/pages/category.css index 333b0623f..4dadd2dc1 100644 --- a/front/src/lib/styles/pages/category.css +++ b/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); diff --git a/front/src/lib/styles/pages/home.css b/front/src/lib/styles/pages/home.css index 2f3bba168..e178f5e86 100644 --- a/front/src/lib/styles/pages/home.css +++ b/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);