二〇二六年四月二十一日

3 files changed, 129 insertions, 0 deletions

diff --git a/themes/theme/source/css/component/button.styl b/themes/theme/source/css/component/button.styl
new file mode 100644
index 00000000..6c6520db
--- /dev/null
+++ b/themes/theme/source/css/component/button.styl
@@ -0,0 +1,64 @@
+.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 400
+    transition all $transition-duration ease
+    cursor pointer
+    border none
+    text-decoration none
+    user-select none
+    outline none
+    padding $margin-m-0 $margin-l-0
+    
+    &:focus-visible
+        outline 2px solid $color-accent
+        outline-offset 2px
+        
+    &:disabled
+        pointer-events none
+        opacity 0.5
+
+.btn-default
+    background-color $color-text-primary
+    color $color-background
+    
+    &:hover
+        opacity 0.9
+        
+    &:active
+        opacity 0.95
+
+.btn-outline
+    border 1px solid $color-border
+    background-color transparent
+    color $color-text-primary
+    
+    &:hover
+        border-color $color-accent
+        color $color-accent
+
+.btn-ghost
+    background-color transparent
+    color $color-text-primary
+    
+    &:hover
+        background-color $color-text-fourth
+
+.btn-link
+    background-color transparent
+    color $color-accent
+    text-decoration underline
+    text-underline-offset 4px
+    
+    &:hover
+        text-decoration none
+
+@keyframes spin
+    0%
+        transform rotate(0deg)
+    100%
+        transform rotate(360deg)
\ No newline at end of file
diff --git a/themes/theme/source/css/component/component.styl b/themes/theme/source/css/component/component.styl
new file mode 100644
index 00000000..b203aecc
--- /dev/null
+++ b/themes/theme/source/css/component/component.styl
@@ -0,0 +1,44 @@
+.h-line-primary
+  background-color $color-text-primary
+  height $line-third
+
+.h-line-secondary
+  background-color $color-border
+  height $line-third
+
+hr 
+  background-color $color-border
+  height $line-third
+  border 0
+
+.tag-list
+  display flex
+  flex-wrap wrap
+  margin-bottom $margin-m-0
+
+.tag-title
+  margin $margin-m-1 0 
+  color $color-text-secondary
+  font-size $font-size-header
+
+  a 
+      color @color
+
+.post-tag
+  text-style(post-tag)
+  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
+
+  a 
+    background-image none!important
+
+  &:hover
+    border-color $color-accent
+    background-color $color-accent
+
+    a 
+      color #fff
diff --git a/themes/theme/source/css/component/icon.styl b/themes/theme/source/css/component/icon.styl
new file mode 100644
index 00000000..8a6c0511
--- /dev/null
+++ b/themes/theme/source/css/component/icon.styl
@@ -0,0 +1,21 @@
+.icon
+    display block
+    background-color $color-text-primary
+    width $icon-size
+    height $icon-size
+
+.arrow-up
+    -webkit-mask-image url('../icon/arrow-up.svg')
+    mask-image url('../icon/arrow-up.svg')
+
+.arrow-left
+    -webkit-mask-image url('../icon/arrow-left.svg')
+    mask-image url('../icon/arrow-left.svg')
+
+.arrow-right
+    -webkit-mask-image url('../icon/arrow-right.svg')
+    mask-image url('../icon/arrow-right.svg')
+
+.close-btn
+    -webkit-mask-image url('../icon/close-btn.svg')
+    mask-image url('../icon/close-btn.svg')
\ No newline at end of file