link and button border

src/component/bookmark/index.css

@@ -269,8 +269,14 @@
   box-shadow: var(--theme-shadow-top-medium);
 }
 
-.bookmark-link {
+.bookmark-link,
+.bookmark-link:link,
+.bookmark-link:visited,
+.bookmark-link:focus,
+.bookmark-link:hover,
+.bookmark-link:active {
   background-color: transparent;
+  border: 0;
   position: relative;
   width: 100%;
   height: 100%;
@@ -1119,4 +1125,4 @@
 
 .is-theme-background-type-accent .bookmark-sort-placeholder {
   box-shadow: var(--edge-on-accent);
-}
+}

src/component/button/index.css

@@ -200,15 +200,21 @@ button .icon,
   width: 100%;
 }
 
-.button-link {
+.button-link,
+.button-link:link,
+.button-link:visited,
+.button-link:focus,
+.button-link:hover,
+.button-link:active {
   background-color: transparent;
   border: 0;
   color: hsl(var(--button-link-text));
+  text-decoration: none;
+  transition: background-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
 }
 
 .button-link:hover,
 .button-link:focus {
-  background-color: transparent;
   color: hsl(var(--button-link-text-focus-hover));
 }
 
@@ -229,4 +235,4 @@ button .icon,
 .button-link:hover:disabled,
 .button-link:focus:disabled {
   background-color: transparent;
-}
+}

src/component/link/index.js

@@ -1,5 +1,7 @@
 import { icon } from '../icon';
 
+import * as form from '../form';
+
 import { node } from '../../utility/node';
 import { complexNode } from '../../utility/complexNode';
 
@@ -111,6 +113,14 @@ export const Link = function ({
     return this.element.link;
   };
 
+  this.wrap = () => {
+    return form.wrap({
+      children: [
+        this.element.link
+      ]
+    });
+  };
+
   this.assemble();
 
   this.bind();

src/component/tab/index.css

@@ -54,7 +54,7 @@
 
 .tab-nav-button {
   background-color: transparent;
-  border: 3px solid transparent;
+  border: 0;
   flex-grow: 1;
   flex-basis: 25%;
   z-index: 2;
@@ -66,10 +66,16 @@
   }
 }
 
+.tab-nav-button:active {
+  background-color: transparent;
+  color: hsl(var(--button-link-text));
+  transition: background-color 0s, color var(--layout-transition-extra-fast);
+}
+
 .tab-nav-button.active {
   background-color: transparent;
   color: hsl(var(--theme-accent-text));
-  transition: background-color var(--layout-duration-01), border-color var(--layout-duration-01), color var(--layout-transition-extra-fast);
+  transition: background-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
 }
 
 .tab.disabled .tab-nav-button {
@@ -77,8 +83,7 @@
 }
 
 .tab.disabled .tab-nav-button.active {
-  background-color: hsl(var(--button-background-disabled));
-  border-color: hsl(var(--theme-primary-020));
+  background-color: hsl(var(--theme-primary-020));
   color: hsl(var(--button-text-disabled));
 }
 

src/style/typography/index.css

@@ -85,30 +85,29 @@ i {
   font-style: italic;
 }
 
-a {
+a,
+a:link,
+a:visited,
+a:focus,
+a:hover,
+a:active {
+  padding-bottom: 2px;
+  border: 0;
   color: hsl(var(--theme-primary-text-010));
-  text-decoration: underline;
-  transition: color var(--layout-transition-extra-fast), text-decoration var(--layout-transition-extra-fast);
+  text-decoration: none;
+  outline: none;
 }
 
 a:link,
 a:visited {
   color: hsl(var(--theme-primary-text-010));
+  border-bottom: 1px solid hsl(var(--theme-primary-text-010));
+  transition: color var(--layout-transition-extra-fast), border var(--layout-transition-extra-fast), padding var(--layout-transition-extra-fast);
 }
 
-a:focus {
-  text-decoration-color: hsl(var(--theme-primary-text-010));
-  outline: none;
-}
-
-a:hover {
-  color: rgb(var(--theme-accent));
-  text-decoration-color: rgb(var(--theme-accent));
-}
-
+a:hover,
 a:active {
-  color: hsl(var(--theme-primary-text-010));
-  text-decoration-color: hsl(var(--theme-primary-text-010));
+  border-bottom-color: rgb(var(--theme-accent));
 }
 
 ol,
@@ -180,4 +179,4 @@ code {
   background-color: hsl(var(--theme-primary-040));
   padding: 0.2em 0.5em;
   border-radius: calc(var(--theme-radius) * 0.01em);
-}
+}