refactor: remove some import abstracts/variables

components/MessageNotify.vue

@@ -51,21 +51,14 @@ const autoClose = computed(() => !props.noToast)
 </script>
 
 <style lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
 .message-box {
+  @apply shadow-[4px_4px] bg-background-color border border-border-color;
   max-width: 500px;
 
   &--toast {
     @apply z-[100] fixed mx-auto rounded-none right-0 top-[100px] #{!important};
   }
 
-  @include ktheme() {
-    box-shadow: theme('primary-shadow');
-    background-color: theme('background-color');
-    border: 1px solid theme('border-color');
-  }
-
   .message-body {
     @apply rounded-none border-l-0;
   }

components/base/MediaItem.vue

@@ -223,7 +223,6 @@ defineExpose({ isLewdBlurredLayer, toggleFullscreen })
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
 .media-object {
   .nsfw-blur {
     backdrop-filter: blur(60px);
@@ -239,19 +238,14 @@ defineExpose({ isLewdBlurredLayer, toggleFullscreen })
     }
   }
   .nsfw-action {
+    @apply text-text-color bg-background-color;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 1.25rem;
-    @include ktheme() {
-      color: theme('text-color') !important;
-      background: theme('background-color') !important;
-    }
+
     &.hide {
-      @include ktheme() {
-        color: theme('background-color') !important;
-        background: theme('text-color') !important;
-      }
+      @apply text-text-color bg-background-color;
     }
   }
 }

components/blog/BlogPost.vue

@@ -109,9 +109,6 @@ useSeoMeta({
 </script>
 
 <style lang="scss">
-@use 'sass:meta';
-@import '@/assets/styles/abstracts/variables';
-
 .article {
   margin: 0 auto;
   max-width: 40rem;
@@ -146,6 +143,7 @@ useSeoMeta({
   }
 
   h2 {
+    @apply text-k-accent-light-2-dark-head;
     font-size: 1.5rem;
     font-weight: 700;
   }
@@ -161,7 +159,7 @@ useSeoMeta({
   }
 
   img {
-    @apply mx-0 my-10 rounded-2xl;
+    @apply mx-0 my-10 rounded-2xl border border-border-color;
   }
 
   p,
@@ -174,36 +172,26 @@ useSeoMeta({
     margin: 0 1.5rem;
   }
 
-  @include ktheme() {
-    .markdown-body {
-      color: theme('k-accentlight2-dark');
-    }
-
-    h2 {
-      color: theme('k-accentlight2-dark-head');
-    }
-
-    p {
-      color: theme('k-accentlight2-dark-paragraph');
-    }
+  .markdown-body {
+    @apply text-k-accent-light-2-dark;
+  }
 
-    img {
-      border: 1px solid theme('border-color');
-    }
+  p {
+    @apply text-k-accent-light-2-dark-paragraph;
+  }
 
-    a {
-      color: theme('k-blue');
-    }
+  a {
+    @apply text-k-blue;
+  }
 
-    pre {
-      padding-left: 0;
-      padding-right: 0;
-      font-size: 1rem;
-      background-color: theme('background-color');
-    }
+  pre {
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 1rem;
+    @apply bg-background-color;
   }
 
-  @include touch {
+  @media screen and (max-width: 1023px) {
     .subtitle {
       font-size: 1.25rem;
     }

components/collection/CollectionHeader/CollectionBanner.vue

@@ -3,15 +3,19 @@
     class="collection-banner relative md:h-[560px] h-72 bg-no-repeat bg-cover bg-center border-b"
     :style="{ backgroundImage: `url(${collectionBanner})` }"
   >
-    <div class="collection-banner-shadow absolute inset-0" />
+    <div
+      class="collection-banner-shadow absolute inset-0 bg-gradient-to-b from-black/[0.06] to-black/20"
+    />
 
     <section class="h-full py-8">
       <div
         class="container is-fluid collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
       >
         <div class="lg:flex-1">
           <div class="flex flex-col items-start">
-            <div class="collection-banner-avatar p-2.5 mb-4 md:mb-6">
+            <div
+              class="collection-banner-avatar p-2.5 mb-4 md:mb-6 border border-border-color bg-background-color shadow-[4px_4px]"
+            >
               <BaseMediaItem
                 :src="collectionAvatar"
                 :image-component="NuxtImg"
@@ -20,7 +24,7 @@
               />
             </div>
             <h1
-              class="collection-banner-name font-bold text-2xl md:text-[31px] w-max max-w-sm"
+              class="collection-banner-name font-bold text-2xl md:text-[31px] w-max max-w-sm text-text-color-inverse text-shadow-border"
               data-testid="collection-banner-name"
             >
               {{ collectionName }}
@@ -120,37 +124,3 @@ useSeoMeta({
     ),
 })
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
-.collection-banner {
-  &-shadow {
-    background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2));
-  }
-
-  &-avatar {
-    @include ktheme() {
-      border: 1px solid theme('border-color');
-      background-color: theme('background-color');
-      box-shadow: theme('primary-shadow');
-    }
-  }
-
-  &-name {
-    @include ktheme() {
-      color: theme('text-color-inverse');
-      text-shadow:
-        1px 1px 0 theme('text-color'),
-        1px -1px 0 theme('text-color'),
-        -1px 1px 0 theme('text-color'),
-        -1px -1px 0 theme('text-color'),
-        1px 0px 0 theme('text-color'),
-        0px 1px 0 theme('text-color'),
-        -1px 0px 0 theme('text-color'),
-        0px -1px 0 theme('text-color'),
-        4px 4px theme('text-color');
-    }
-  }
-}
-</style>

components/collection/HeroButtons.vue

@@ -1,21 +1,21 @@
 <template>
   <div>
-    <div class="hero-buttons flex justify-end items-end px-2">
+    <div class="max-md:mt-0 max-md:mb-6 flex justify-end items-end px-2">
       <div
         v-if="twitter"
         class="flex"
       >
         <NeoButton
           icon="x-twitter"
           icon-pack="fab"
-          class="square-32"
+          class="size-8"
           @click="openUrl(`https://twitter.com/${twitter}`)"
         />
       </div>
 
       <div
         v-if="displaySeperator"
-        class="vertical-seperator mx-4 is-hidden-mobile"
+        class="bg-border-color h-5 mb-1 w-px mx-4 is-hidden-mobile"
       />
 
       <div class="flex">
@@ -28,7 +28,7 @@
           <template #trigger="{ active }">
             <NeoButton
               icon="share-alt"
-              class="square-32 mr-3"
+              class="size-8 mr-3"
               data-testid="share-button"
               :active="active"
             />
@@ -86,7 +86,7 @@
           <template #trigger="{ active }">
             <NeoButton
               icon="ellipsis-vertical"
-              class="square-32"
+              class="size-8"
               data-testid="more-actions-button"
               :active="active"
             />
@@ -186,25 +186,3 @@ const isOwner = computed(() => isCurrentOwner(collection.value?.currentOwner))
 
 const QRModalActive = ref(false)
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-@include mobile {
-  .hero-buttons {
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-  }
-}
-.square-32 {
-  width: 32px;
-  height: 32px;
-}
-.vertical-seperator {
-  height: 24px;
-  margin-bottom: 4px;
-  width: 1px;
-  @include ktheme() {
-    background-color: theme('border-color');
-  }
-}
-</style>

components/collection/drop/AddFundsModal.vue

@@ -117,8 +117,6 @@ const handleModalClose = (completed: boolean) => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
 .add-funds-modal {
   .o-tip {
     display: flex;

components/collection/unlockable/CountdownTimer.vue

@@ -49,7 +49,3 @@ const [wrapper] = useKeenSlider({
   },
 })
 </script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-</style>

components/collection/unlockable/UnlockableTag.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isUnlockable"
-    class="unlockable-container rounded-[2rem] flex border py-2 px-6 justify-between"
+    class="unlockable-container rounded-[2rem] flex border py-2 px-6 justify-between border-k-shade max-lg:max-w-full"
   >
     <NeoTooltip
       :label="$t('unlockable.tooltip')"
@@ -39,18 +39,3 @@ const { isUnlockable } = useUnlockable(
   computed(() => ({ id: props.collectionId })),
 )
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables.scss';
-.unlockable-container {
-  @include ktheme() {
-    border-color: theme('k-shade');
-  }
-}
-
-@include until-widescreen {
-  .unlockable-container {
-    max-width: 100%;
-  }
-}
-</style>

components/collectionDetailsPopover/CollectionDetailsPopover.vue

@@ -13,7 +13,7 @@
     <slot name="content" />
 
     <template #content>
-      <div class="popover-container">
+      <div class="min-h-[12.5rem] bg-background-color">
         <CollectionDetailsPopoverContent
           v-if="triggered"
           :nft="nft"
@@ -63,14 +63,3 @@ const nft = computed(
     },
 )
 </script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/abstracts/variables';
-
-.popover-container {
-  min-height: 12.5rem;
-  @include ktheme() {
-    background: theme('background-color');
-  }
-}
-</style>