From c709711dea66afda566c814613a10b4f4997bd74 Mon Sep 17 00:00:00 2001
From: westtle <103447524+westtle@users.noreply.github.com>
Date: Sun, 11 Feb 2024 16:55:58 +0700
Subject: [PATCH] changed :focus-visible

used it as css reset, removed --focus-* in :root, added fallback in custom properties used by :focus-visible.
---
 assets/styles/style.css | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/assets/styles/style.css b/assets/styles/style.css
index 41bfa4a..09d41b3 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -41,17 +41,11 @@
     --color-1: var(--black), 80%;
     --color-2: var(--white);
     --color-3: var(--boulder), 80%; /* Placeholder and Icons */
-
-    /* Other */
-    --focus-outline: 0.125rem solid hsl(var(--color-1));
-    --focus-offset: 0;
 }
 
 :root[data-theme="dark"] {
     --color-1: var(--white), 80%;
     --color-2: var(--cod-gray);
-
-    --focus-outline: 0.125rem solid hsl(var(--color-1));
 }
 
 :root[data-theme="light"] .settings__svg--theme-sun { display: none; }
@@ -112,6 +106,11 @@ ul { list-style: none; }
     opacity: 1;
 }
 
+:focus-visible {
+    outline: 0.125rem solid hsl(var(--color-1, 0, 0%, 0%));
+    outline-offset: var(--focus-offset, 0);
+}
+
 /* Helper */
 
 .--flex-column {
@@ -193,8 +192,6 @@ body {
     --focus-offset: 0.125rem;
 
     color: hsl(var(--color-1));
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-offset);
 }
 
 @media (hover:hover) {
@@ -255,11 +252,6 @@ body {
     transition: color ease-in-out 0.1s;
 }
 
-.simple-note__input:focus-visible {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-offset);
-}
-
 .simple-note__input--title {
     font-family: var(--font-2);
     font-size: 1.5rem;