From 712c32d3d5f40c826d44b317ea3d172f2baf1dfb Mon Sep 17 00:00:00 2001
From: kritzl <kritzl@kritzl.dev>
Date: Sat, 22 Feb 2025 15:48:40 +0100
Subject: [PATCH] Adjust transition to match Wiki

---
 styleguide/assets/style/base.css       | 20 ++++++++++----------
 styleguide/assets/style/base.scss      |  8 ++++----
 styleguide/assets/style/styleguide.css | 20 ++++++++++----------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/styleguide/assets/style/base.css b/styleguide/assets/style/base.css
index 43af900..3dc32e8 100644
--- a/styleguide/assets/style/base.css
+++ b/styleguide/assets/style/base.css
@@ -133,8 +133,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
   --color-glow-primary: var(--color-white);
   --color-glow-secondary: var(--color-white);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+  border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
 }
 .dark .light-only {
   display: none;
@@ -161,8 +161,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
   --color-glow-primary: var(--color-argon-950);
   --color-glow-secondary: var(--color-krypton-950);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
 }
 .light .light-only {
   display: initial;
@@ -190,8 +190,8 @@ html.light {
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
   --color-glow-primary: var(--color-argon-950);
   --color-glow-secondary: var(--color-krypton-950);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
 }
 html .light-only,
 html.light .light-only {
@@ -220,8 +220,8 @@ html.dark {
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
   --color-glow-primary: var(--color-white);
   --color-glow-secondary: var(--color-white);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+  border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
 }
 html.dark .light-only {
   display: none;
@@ -249,8 +249,8 @@ html.dark .dark-only {
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
     --color-glow-primary: var(--color-white);
     --color-glow-secondary: var(--color-white);
-    --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-      border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+    --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+    border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
   }
   html .light-only {
     display: none;
diff --git a/styleguide/assets/style/base.scss b/styleguide/assets/style/base.scss
index e6f2765..8b7aab7 100644
--- a/styleguide/assets/style/base.scss
+++ b/styleguide/assets/style/base.scss
@@ -149,8 +149,8 @@ $mobile-navigation-height: 4rem;
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
   --color-glow-primary: var(--color-white);
   --color-glow-secondary: var(--color-white);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+  border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
 
   .light-only {
     display: none;
@@ -180,8 +180,8 @@ $mobile-navigation-height: 4rem;
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
   --color-glow-primary: var(--color-argon-950);
   --color-glow-secondary: var(--color-krypton-950);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
 
   .light-only {
     display: initial;
diff --git a/styleguide/assets/style/styleguide.css b/styleguide/assets/style/styleguide.css
index d90c254..a74ffe3 100644
--- a/styleguide/assets/style/styleguide.css
+++ b/styleguide/assets/style/styleguide.css
@@ -133,8 +133,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
   --color-glow-primary: var(--color-white);
   --color-glow-secondary: var(--color-white);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+  border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
 }
 .dark .light-only {
   display: none;
@@ -161,8 +161,8 @@
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
   --color-glow-primary: var(--color-argon-950);
   --color-glow-secondary: var(--color-krypton-950);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
 }
 .light .light-only {
   display: initial;
@@ -190,8 +190,8 @@ html.light {
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
   --color-glow-primary: var(--color-argon-950);
   --color-glow-secondary: var(--color-krypton-950);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+    border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
 }
 html .light-only,
 html.light .light-only {
@@ -220,8 +220,8 @@ html.dark {
   --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
   --color-glow-primary: var(--color-white);
   --color-glow-secondary: var(--color-white);
-  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+  --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+  border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
 }
 html.dark .light-only {
   display: none;
@@ -249,8 +249,8 @@ html.dark .dark-only {
     --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
     --color-glow-primary: var(--color-white);
     --color-glow-secondary: var(--color-white);
-    --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-      border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
+    --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+    border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
   }
   html .light-only {
     display: none;