glow-filter and -transition for light mode

styleguide/assets/style/base.css

@@ -125,8 +125,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) 50ms,
+  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-  border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
 
 .light {
@@ -143,6 +143,12 @@
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
+  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
+  --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;
 }
 
 html,
@@ -160,6 +166,12 @@ html.light {
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
+  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
+  --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;
 }
 
 html.dark {
@@ -180,8 +192,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) 50ms,
+  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-  border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -203,8 +215,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) 50ms,
+    --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+      border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
   }
 }
 @font-face {
@@ -372,7 +384,8 @@ table {
   width: fit-content;
   border-collapse: collapse;
 }
-table th, table td {
+table th,
+table td {
   padding: 0.25rem 0.5rem;
   border: solid 0.1em var(--color-shade-4);
 }

styleguide/assets/style/base.scss

@@ -141,8 +141,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) 50ms,
+  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-  border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
 
 @mixin theme_light() {
@@ -159,6 +159,13 @@ $mobile-navigation-height: 4rem;
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
+
+  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
+  --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;
 }
 
 .dark {
@@ -372,7 +379,8 @@ table {
   border-collapse: collapse;
 
 
-  th, td {
+  th,
+  td {
     padding: 0.25rem 0.5rem;
     border: solid 0.1em var(--color-shade-4);
   }

styleguide/assets/style/styleguide.css

@@ -125,8 +125,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) 50ms,
+  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-  border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
 
 .light {
@@ -143,6 +143,12 @@
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
+  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
+  --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;
 }
 
 html,
@@ -160,6 +166,12 @@ html.light {
   --color-accent-1: var(--color-light-accent-1);
   --color-accent-2: var(--color-light-accent-2);
   --color-accent-3: var(--color-light-accent-3);
+  --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
+  --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;
 }
 
 html.dark {
@@ -180,8 +192,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) 50ms,
+  --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-  border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -203,8 +215,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) 50ms,
+    --transition-glow: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms,
-    border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
+      border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 100ms;
   }
 }
 @font-face {
@@ -372,7 +384,8 @@ table {
   width: fit-content;
   border-collapse: collapse;
 }
-table th, table td {
+table th,
+table td {
   padding: 0.25rem 0.5rem;
   border: solid 0.1em var(--color-shade-4);
 }
@@ -599,6 +612,7 @@ body > div nav ul li:hover a:visited, body > div nav ul li:hover a:focus, body >
   color: var(--color-glow-primary);
 }
 body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-back a {
+  border: solid 0.1em var(--color-glow-secondary);
   filter: var(--filter-glow-secondary);
 }
 body > div nav ul li:hover.link-back a:visited, body > div nav ul li:hover.link-back a:focus, body > div nav ul li:hover.link-back a:active, body > div nav ul li:hover.link-back a:hover, body > div nav ul li:focus-within.link-back a:visited, body > div nav ul li:focus-within.link-back a:focus, body > div nav ul li:focus-within.link-back a:active, body > div nav ul li:focus-within.link-back a:hover {
@@ -625,7 +639,7 @@ i[data-icon] {
   box-sizing: content-box;
 }
 i[data-icon]::before {
-  content: "";
+  content: '';
   display: block;
   width: 100%;
   height: 100%;
@@ -634,25 +648,25 @@ i[data-icon]::before {
   mask-repeat: no-repeat;
   background-color: currentColor;
 }
-i[data-icon][data-icon=arrow-left]::before {
+i[data-icon][data-icon='arrow-left']::before {
   mask-image: url("../icon/arrow_left.svg");
 }
-i[data-icon][data-icon=arrow-top]::before {
+i[data-icon][data-icon='arrow-top']::before {
   mask-image: url("../icon/arrow_top.svg");
 }
-i[data-icon][data-icon=arrow-right]::before {
+i[data-icon][data-icon='arrow-right']::before {
   mask-image: url("../icon/arrow_right.svg");
 }
-i[data-icon][data-icon=arrow-down]::before {
+i[data-icon][data-icon='arrow-down']::before {
   mask-image: url("../icon/arrow_down.svg");
 }
-i[data-icon][data-icon=info]::before {
+i[data-icon][data-icon='info']::before {
   mask-image: url("../icon/info.svg");
 }
-i[data-icon][data-icon=home]::before {
+i[data-icon][data-icon='home']::before {
   mask-image: url("../icon/home.svg");
 }
-i[data-icon][data-icon=menu-small]::before {
+i[data-icon][data-icon='menu-small']::before {
   mask-image: url("../icon/menu_small.svg");
 }
 

styleguide/assets/style/styleguide.scss

@@ -61,6 +61,7 @@ body {
         top: 1rem;
         height: fit-content;
         overflow: visible;
+
         button {
           display: none;
         }
@@ -119,7 +120,8 @@ body {
             background-color: var(--color-shade-2);
           }
 
-          &.link-back, &.active {
+          &.link-back,
+          &.active {
             a {
               border-color: var(--color-shade-4);
             }
@@ -141,7 +143,10 @@ body {
             transition-duration: 400ms;
             transition-timing-function: ease-in;
 
-            &:visited, &:focus, &:active, &:hover {
+            &:visited,
+            &:focus,
+            &:active,
+            &:hover {
               color: var(--color-foreground);
             }
 
@@ -153,7 +158,8 @@ body {
             }
           }
 
-          &:hover, &:focus-within {
+          &:hover,
+          &:focus-within {
             background-color: transparent;
 
             a {
@@ -162,15 +168,22 @@ body {
               filter: var(--filter-glow-primary);
               transition: var(--transition-glow);
 
-              &:visited, &:focus, &:active, &:hover {
+              &:visited,
+              &:focus,
+              &:active,
+              &:hover {
                 color: var(--color-glow-primary);
               }
             }
 
             &.link-back a {
+              border: solid 0.1em var(--color-glow-secondary);
               filter: var(--filter-glow-secondary);
 
-              &:visited, &:focus, &:active, &:hover {
+              &:visited,
+              &:focus,
+              &:active,
+              &:hover {
                 color: var(--color-glow-secondary);
               }
             }