fix: couple css improvements for webkit-based browsers

introduces a new mixin to handle webkit-based shenanigans.
also adds a mixin to make keyboard navigation easier.
and other small tweaks to css(like accent color and color scheme).

src/styles/abstracts/_mixins.scss

@@ -78,3 +78,21 @@
     background-size: 100% $height;
   }
 }
+
+////////////////////////////////////////////////////////////////
+//           CHECK IF BROWSER IS SAFARI(it's the new IE)
+////////////////////////////////////////////////////////////////
+
+@mixin fix-for-safari {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    @content;
+  }
+}
+
+////////////////////////////////////////////////////////////////
+//           
+////////////////////////////////////////////////////////////////
+@mixin focus-rules {
+  outline: 3px solid var(--clr-highlight);
+  outline-offset: 0.2em;
+}

src/styles/abstracts/variables/_themes.scss

@@ -34,7 +34,9 @@ $_light: (
         transparent 70%
       ),
       radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.2) 0px, transparent 50%)
-    )
+    ),
+  // changes color of native html elemnts, either 'light' or 'dark' must be set.
+  scheme: light
 );
 
 $_dark: (
@@ -54,6 +56,7 @@ $_dark: (
     radial-gradient(at 23% 32%, hsla(344, 79%, 40%, 0.04) 0px, transparent 70%),
     radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.05) 0px, transparent 50%),
   ),
+  scheme: dark,
 );
 
 $themes: (

src/styles/base/_base.scss

@@ -9,11 +9,17 @@ body {
 #__next {
   display: grid;
   grid-template-rows: min-content 1fr min-content;
+
+  &:has(span[role='progressbar']) {
+    cursor: progress;
+  }
 }
 
 body {
   color: var(--clr-text);
   background-color: var(--clr-bg);
+  color-scheme: var(--clr-scheme);
+  accent-color: var(--clr-fill);
 }
 
 // restricting to 1600px width
@@ -22,3 +28,20 @@ body {
   width: min(100%, var(--max-width));
   margin-inline: auto;
 }
+
+////////////////////////////////////////////////////////
+//                 KEYBOARD NAVIGATION
+////////////////////////////////////////////////////////
+:focus {
+  @include helper.focus-rules;
+}
+
+@supports selector(:focus-visible) {
+  :focus {
+    outline: none;
+  }
+
+  :focus-visible {
+    @include helper.focus-rules;
+  }
+}

src/styles/base/_index.scss

@@ -1,5 +1,5 @@
 @forward './reset';
-// @forward './helpers';
+@forward './helpers';
 @forward './root';
 @forward './base';
 @forward './fonts';

src/styles/base/_root.scss

@@ -24,4 +24,9 @@
   @include helper.bp('bp-700') {
     @include helper.typescale('mobile');
   }
+
+  // not using any external fonts on webkit because of many issues
+  @include helper.fix-for-safari {
+    --ff-accent: var(--ff-base);
+  }
 }

src/styles/modules/pages/about/about.module.scss

@@ -96,6 +96,11 @@
       content: '+';
       font-weight: bold;
     }
+
+    // fix for webkit(not including blink)
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
 
   &__description {