fix: improve keyboard accessability for anchors and code blocks (#434)

src/sass/_base.scss

@@ -412,23 +412,19 @@ svg.gdoc-icon {
   }
 
   &__anchor {
-    min-width: 30px;
-
-    &--left {
-      position: absolute;
-      margin-left: -25px;
-      text-align: left;
-    }
-
-    &--right {
-      text-align: right;
-    }
+    margin-left: $padding-8;
 
     svg.gdoc-icon {
-      width: 1.4rem;
-      height: 1.4rem;
+      width: 1.4em;
+      height: 1.4em;
       color: transparent;
     }
+
+    &:focus {
+      svg.gdoc-icon {
+        color: var(--control-icons);
+      }
+    }
   }
 
   &__footer {
@@ -523,11 +519,11 @@ svg.gdoc-icon {
     visibility: hidden;
     position: absolute;
     top: 0.5rem;
-    right: 0.5rem;
+    right: 1rem;
 
     border: $border-2 solid var(--code-copy-border-color);
     border-radius: $border-radius;
-    background: var(--code-background);
+    background: var(--code-copy-background);
     width: 2.2rem;
     height: 2.2rem;
 

src/sass/_chroma_base.scss

@@ -2,31 +2,6 @@
   .chroma {
     color: var(--code-font-color);
   }
-  .chroma code {
-    background-color: var(--code-background);
-    display: block;
-    line-height: 1.45em;
-    font-size: 0.85em;
-    border-radius: $border-radius;
-  }
-  .chroma .lntable {
-    max-height: var(--code-max-height);
-
-    code {
-      max-height: none;
-    }
-  }
-  .chroma .lntable td:first-child code {
-    border-radius: 0;
-    border-top-left-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-  }
-  .chroma .lntable td:nth-child(2) code {
-    border-radius: 0;
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    padding-left: 0.5em;
-  }
   .chroma .lntable td:nth-child(2) code .hl {
     width: auto;
     margin-left: -0.5em;
@@ -34,36 +9,39 @@
   }
 
   .highlight {
-    overflow: auto;
-    max-height: var(--code-max-height);
-
     pre.chroma {
       margin: 0;
-    }
-
-    > pre.chroma code {
-      padding: 1rem;
       width: 100%;
-      overflow-x: auto;
+      overflow: auto;
+      max-height: var(--code-max-height);
     }
   }
 
   /* LineTable */
   .chroma .lntable {
+    border: $border-1 solid var(--code-accent-color);
+    border-radius: $border-radius;
     border-spacing: 0;
     padding: 0;
     margin: 0;
-    border: 0;
     width: 100%;
     display: block;
+    max-height: var(--code-max-height);
+    overflow: auto;
+
+    pre.chroma {
+      max-height: none;
+      border-radius: 0;
+    }
   }
-  .chroma .lntable td:first-child code {
-    background-color: var(--code-accent-color-lite);
-    border-right: $border-1 solid var(--code-accent-color);
-    padding: 0.5em 0;
-  }
-  .chroma .lntable td code {
-    padding: 0.5em 0;
+  .chroma .lntable td:first-child {
+    code {
+      background-color: var(--code-accent-color-lite);
+      border-right: $border-1 solid var(--code-accent-color);
+      padding-left: 0;
+      padding-right: 0;
+      border-radius: 0;
+    }
   }
   .chroma .lntable td:nth-child(2) {
     width: 100%;

src/sass/_color_mode.scss

@@ -13,10 +13,6 @@
   --link-color: #{$link-color};
   --link-color-visited: #{$link-color-visited};
 
-  --code-copy-font-color: #{lighten($body-font-color, 24)};
-  --code-copy-border-color: #{lighten($body-font-color, 48)};
-  --code-copy-success-color: #{map.get($hint-colors, "ok")};
-
   --accent-color: #{$gray-200};
   --accent-color-lite: #{$gray-100};
 
@@ -36,8 +32,7 @@
   .gdoc-markdown {
     .gdoc-hint,
     .gdoc-props__tag,
-    .admonitionblock,
-    .gdoc-post__codecopy--success {
+    .admonitionblock {
       filter: none;
     }
 
@@ -63,11 +58,6 @@
   --link-color: #{$link-color-dark};
   --link-color-visited: #{$link-color-visited-dark};
 
-  --code-background: #{$code-background-dark};
-  --code-accent-color: #{darken($code-background-dark, 4)};
-  --code-accent-color-lite: #{darken($code-background-dark, 2)};
-  --code-font-color: #{$code-font-color-dark};
-
   --accent-color: #{darken($body-background-dark, 4)};
   --accent-color-lite: #{darken($body-background-dark, 2)};
 
@@ -87,8 +77,7 @@
   .gdoc-markdown {
     .gdoc-hint,
     .gdoc-props__tag,
-    .admonitionblock,
-    .gdoc-post__codecopy--success {
+    .admonitionblock {
       filter: saturate(2.5) brightness(0.85);
     }
 
@@ -106,6 +95,11 @@
   --code-accent-color: #{darken($code-background-dark, 4)};
   --code-accent-color-lite: #{darken($code-background-dark, 2)};
   --code-font-color: #{$code-font-color-dark};
+
+  --code-copy-background: #{$body-background-dark};
+  --code-copy-font-color: #{lighten($body-font-color, 24)};
+  --code-copy-border-color: #{lighten($body-font-color, 24)};
+  --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
 }
 
 @mixin code_theme_light {
@@ -115,4 +109,9 @@
   --code-accent-color: #{darken($code-background, 6)};
   --code-accent-color-lite: #{darken($code-background, 2)};
   --code-font-color: #{$code-font-color};
+
+  --code-copy-background: #{$code-background};
+  --code-copy-font-color: #{lighten($body-font-color, 24)};
+  --code-copy-border-color: #{lighten($body-font-color, 48)};
+  --code-copy-success-color: #{map.get($hint-colors, "ok")};
 }

src/sass/_markdown.scss

@@ -184,13 +184,17 @@
     margin: 1rem 0;
   }
 
+  code {
+    padding: 0.2em 0.4em;
+  }
+
+  pre,
   code {
     background-color: var(--code-background);
     border-radius: $border-radius;
     color: var(--code-font-color);
-    font-size: 0.85em;
+    font-size: 0.85rem;
     line-height: 1.45em;
-    padding: 0.2em 0.4em;
   }
 
   pre code {