deploy: 18bce0f2b548121e7298c164c463df00e2f9ff78

2 files changed, 98 insertions, 5 deletions

diff --git a/css/component/button.css b/css/component/button.css
index e69de29b..cf0f8624 100644
--- a/css/component/button.css
+++ b/css/component/button.css
@@ -0,0 +1,91 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: $margin-m-2;
+  font-size: $font-size-header;
+  font-weight: $font-weight-medium;
+  transition: all $transition-duration ease;
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+  user-select: none;
+  outline: none;
+  padding: $margin-m-0 $margin-l-0;
+}
+.btn:focus-visible {
+  outline: 2px solid $color-accent;
+  outline-offset: 2px;
+}
+.btn:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.btn-default {
+  background-color: $color-text-primary;
+  color: $color-background;
+}
+.btn-default:hover {
+  opacity: 0.9;
+}
+.btn-default:active {
+  opacity: 0.95;
+}
+.btn-outline {
+  border: 1px solid $color-border;
+  background-color: transparent;
+  color: $color-text-primary;
+}
+.btn-outline:hover {
+  border-color: $color-accent;
+  color: $color-accent;
+}
+.btn-ghost {
+  background-color: transparent;
+  color: $color-text-primary;
+}
+.btn-ghost:hover {
+  background-color: $color-text-fourth;
+}
+.btn-link {
+  background-color: transparent;
+  color: $color-accent;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.btn-link:hover {
+  text-decoration: none;
+}
+@-moz-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/css/component/component.css b/css/component/component.css
index dd96ae94..ec22636f 100644
--- a/css/component/component.css
+++ b/css/component/component.css
@@ -3,11 +3,11 @@
   height: $line-third;
 }
 .h-line-secondary {
-  background-color: $color-text-secondary;
+  background-color: $color-border;
   height: $line-third;
 }
 hr {
-  background-color: $color-text-third;
+  background-color: $color-border;
   height: $line-third;
   border: 0;
 }
@@ -25,18 +25,20 @@ hr {
   color: $color-text-secondary;
 }
 .post-tag {
-  border: $line-third solid $color-text-primary;
+  border: 1px solid $color-border;
   margin-right: $margin-s-2;
   margin-bottom: $margin-s-2;
   padding: $margin-s-2 $margin-m-0 $margin-s-2 $margin-m-0;
   border-radius: $margin-m-2;
+  transition: all $transition-duration ease;
 }
 .post-tag a {
   background-image: none !important;
 }
 .post-tag:hover {
-  background-color: $color-text-primary;
+  border-color: $color-accent;
+  background-color: $color-accent;
 }
 .post-tag:hover a {
-  color: $color-background;
+  color: #fff;
 }