apply button style

packages/app/src/components/BookmarkButtons.module.scss

@@ -0,0 +1,14 @@
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/variables' as var;
+
+.btn.btn-bookmark {
+  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), $orange, rgba(lighten(var.$orange, 20%), 0.5), rgba(lighten(var.$orange, 20%), 0.5));
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: var.$orange;
+  }
+  &:not(:disabled):not(.disabled):not(:hover) {
+    background-color: transparent;
+  }
+  box-shadow: none !important;
+}

packages/app/src/components/LikeButtons.module.scss

@@ -0,0 +1,14 @@
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/variables' as var;
+
+.btn.btn-like {
+  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), lighten(var.$red, 15%), rgba(lighten(var.$red, 10%), 0.15), rgba(lighten(var.$red, 10%), 0.5));
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: lighten(var.$red, 15%);
+  }
+  &:not(:disabled):not(.disabled):not(:hover) {
+    background-color: transparent;
+  }
+  box-shadow: none !important;
+}

packages/app/src/components/SubscribeButton.module.scss

@@ -0,0 +1,13 @@
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/variables' as var;
+
+.btn.btn-subscribe {
+  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), var.$success, rgba(lighten(var.$success, 10%), 0.15), rgba(lighten(var.$success, 10%), 0.5));
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: lighten(var.$success, 15%);
+  }
+  &:not(:disabled):not(.disabled):not(:hover) {
+    background-color: transparent;
+  }
+}

packages/app/src/styles/atoms/_buttons.scss

@@ -1,43 +1,11 @@
-.btn.btn-like {
-  @include button-outline-variant(rgba($secondary, 50%), lighten($red, 15%), rgba(lighten($red, 10%), 0.15), rgba(lighten($red, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten($red, 15%);
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-  box-shadow: none !important;
-}
-
-.btn.btn-bookmark {
-  @include button-outline-variant(rgba($secondary, 50%), $orange, rgba(lighten($orange, 20%), 0.5), rgba(lighten($orange, 20%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: $orange;
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-  box-shadow: none !important;
-}
-
-.btn.btn-subscribe {
-  @include button-outline-variant(rgba($secondary, 50%), $success, rgba(lighten($success, 10%), 0.15), rgba(lighten($success, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten($success, 15%);
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-}
+@use '../bootstrap/init' as bs;
+@use '../mixins';
 
 .btn.btn-seen-user {
   $color-seen-user: #549c79;
 
-  @include button-outline-variant($color-seen-user, $color-seen-user, rgba(lighten($color-seen-user, 10%), 0.15), rgba(lighten($color-seen-user, 10%), 0.5));
-  @include button-outline-svg-icon-variant($color-seen-user, $color-seen-user);
+  @include bs.button-outline-variant($color-seen-user, $color-seen-user, rgba(lighten($color-seen-user, 10%), 0.15), rgba(lighten($color-seen-user, 10%), 0.5));
+  @include mixins.button-outline-svg-icon-variant($color-seen-user, $color-seen-user);
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
     color: $color-seen-user;

packages/app/src/styles/style-next.scss

@@ -14,7 +14,7 @@
 @import '~material-icons/iconfont/filled';
 
 // // atoms
-// @import 'atoms/buttons';
+@import 'atoms/buttons';
 // @import 'atoms/code';
 // @import 'atoms/nav';
 // @import 'atoms/pre';