diff --git a/packages/pl-fe/src/styles/new/accounts.scss b/packages/pl-fe/src/styles/new/accounts.scss
index 297f19f55..53c942efe 100644
--- a/packages/pl-fe/src/styles/new/accounts.scss
+++ b/packages/pl-fe/src/styles/new/accounts.scss
@@ -5,30 +5,42 @@
 }
 
 .⁂-account-card {
-  @apply block w-full shrink-0;
+  display: block;
+  width: 100%;
+  flex-shrink: 0;
 
   > div {
-    @apply flex gap-3 justify-between items-center;
+    display: flex;
+    gap: 0.75rem;
+    justify-content: space-between;
+    align-items: center;
   }
 
   &--action-top {
     > div {
-      @apply items-start;
+      align-items: flex-start;
     }
   }
 }
 
 .⁂-avatar {
-  @apply rounded-lg leading-[0];
+  border-radius: 0.5rem;
+  line-height: 0;
 
   img, canvas {
-    @apply rounded-[inherit] text-sm;
+    border-radius: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
   }
 
   // Adapted from Iceshrimp which I guess took it from Misskey
   // https://iceshrimp.dev/iceshrimp/iceshrimp/src/branch/dev/packages/client/src/components/global/MkAvatar.vue
   &--cat {
-    @apply bg-gray-200 dark:bg-gray-900;
+    background: rgb(var(--color-gray-200));
+
+    &:is(.dark *) {
+      background: rgb(var(--color-gray-900));
+    }
 
     img {
       position: absolute;
@@ -91,7 +103,11 @@
   }
 
   &__attachments {
-    @apply grid grid-cols-3 gap-0.5 overflow-hidden rounded-md;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.125rem;
+    overflow: hidden;
+    border-radius: 0.375rem;
   }
 
   &__empty {
@@ -105,21 +121,26 @@
   }
 
   &--verified dd {
-    @apply text-success-500;
+    color: rgb(var(--color-success-500));
   }
 
   &__content {
-    @apply flex items-center gap-2;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
   }
 }
 
 .⁂-profile-fields-panel {
   .⁂-widget__body {
-    @apply flex flex-col gap-4;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
 
   span[data-markup] {
     @include mixins.text;
-    @apply overflow-hidden break-words;
+    overflow: hidden;
+    word-break: break-word;
   }
 }
diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss
index 49b19a9b4..0a9cdd8bf 100644
--- a/packages/pl-fe/src/styles/new/components.scss
+++ b/packages/pl-fe/src/styles/new/components.scss
@@ -3,7 +3,15 @@
 
 .⁂-accordion {
   border-radius: 0.5rem;
-  @apply bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none;
+  background: white;
+  color: rgb(var(--text-gray-900));
+  @apply shadow;
+
+  &:is(.dark *) {
+    background: rgb(var(--color-primary-800));
+    color: rgb(var(--color-gray-100));
+    box-shadow: none;
+  }
 
   &__header {
     display: flex;
@@ -22,13 +30,24 @@
     &__action .⁂-icon {
       width: 1.25rem;
       height: 1.25rem;
-      @apply text-gray-700 dark:text-gray-600;
+      color: rgb(var(--color-gray-700));
+
+      &:is(.dark *) {
+        color: rgb(var(--color-gray-600));
+      }
     }
 
     &__chevron {
       width: 1.25rem;
       height: 1.25rem;
-      @apply text-gray-700 transition-transform dark:text-gray-600;
+      color: rgb(var(--color-gray-700));
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 150ms;
+
+      &:is(.dark *) {
+        color: rgb(var(--color-gray-600));
+      }
     }
   }
 
@@ -38,7 +57,15 @@
     border-bottom-left-radius: 0.5rem;
     border-top-width: 1px;
     border-style: solid;
-    @apply border-gray-100 dark:border-primary-900 black:border-black;
+    border-color: rgb(var(--color-gray-100));
+
+    &:is(.dark *) {
+      border-color: rgb(var(--color-primary-900));
+    }
+
+    &:is(.dark.black *) {
+      border-color: black;
+    }
 
     p {
       @include mixins.text;
@@ -72,7 +99,15 @@
       width: 100%;
       border-top-width: 2px;
       border-style: solid;
-      @apply border-gray-100 black:border-t dark:border-gray-800;
+      border-color: rgb(var(--color-gray-100));
+
+      &:is(.dark *) {
+        border-top-color: rgb(var(--color-gray-800));
+      }
+
+      &:is(.dark.black *) {
+        border-top-width: 1px;
+      }
     }
   }
 
@@ -82,7 +117,18 @@
     justify-content: center;
 
     > span {
-      @apply bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600;
+      background: white;
+      color: rgb(var(--color-gray-700));
+      padding: 0 0.5rem;
+
+      &:is(.dark *) {
+        background: rgb(var(--color-gray-900));
+        color: rgb(var(--color-gray-600));
+      }
+
+      &:is(.dark.black *) {
+        background: black;
+      }
     }
   }
 }