Move theme overrides inside @layer components so utilities in markup can override them

src/lib/components/button.css

@@ -164,10 +164,8 @@
   .button-pill {
     @apply rounded-full;
   }
-}
 
-/* these are unlayered, so they beat the @layer rules above no matter their
+  /* a theme rule outranks the outline variants above, hence the :not(.button-outline) */
-   specificity — hence the :not(.button-outline) on every filled variant */
   [data-fl-theme="clay"] .button-primary:not(.button-outline),
   [data-fl-theme="clay"] .button-secondary:not(.button-outline),
   [data-fl-theme="clay"] .button-error:not(.button-outline) {
@@ -204,3 +202,4 @@
   [data-fl-theme="clay"] .button-error:not(.button-outline):active {
     transform: translateY(2px);
   }
+}

src/lib/components/card-button.css

@@ -43,7 +43,6 @@
       @apply text-sm;
     }
   }
-}
 
   [data-fl-theme="flat"] .card-button {
     @apply border border-solid;
@@ -66,3 +65,4 @@
       box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
     }
   }
+}

src/lib/components/card.css

@@ -51,7 +51,6 @@
   .dialog .card {
     box-shadow: none;
   }
-}
 
   [data-fl-theme="clay"] .card {
     box-shadow: var(--shadow-lg), var(--shadow-inset);
@@ -94,3 +93,4 @@
     transform: translateY(2px);
     box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
   }
+}

src/lib/components/chat.css

@@ -7,8 +7,8 @@
   .chat-bubble--user {
     @apply border-primary;
   }
-}
 
   [data-fl-theme="clay"] .chat-bubble {
     box-shadow: var(--shadow-sm), var(--shadow-inset);
   }
+}

src/lib/components/primary-nav.css

@@ -67,7 +67,6 @@
   .primary-nav__nav-item--active::after {
     @apply h-10;
   }
-}
 
   [data-fl-theme="clay"] .primary-nav {
     .primary-nav__nav-item:hover {
@@ -87,3 +86,4 @@
       box-shadow: none;
     }
   }
+}

src/lib/components/room.css

@@ -82,7 +82,6 @@
   .room-pins__nav {
     @apply flex items-center gap-1 text-sm;
   }
-}
 
   [data-fl-theme="clay"] .room {
     @apply bg-surface;
@@ -91,3 +90,4 @@
       @apply bg-surface-less/50;
     }
   }
+}

src/lib/components/secondary-nav.css

@@ -14,7 +14,6 @@
       }
     }
   }
-}
 
   [data-fl-theme="clay"] .secondary-nav {
     .secondary-nav__nav-item:hover {
@@ -38,3 +37,4 @@
       box-shadow: none;
     }
   }
+}

src/lib/components/space-menu.css

@@ -100,7 +100,6 @@
       @apply justify-start px-1;
     }
   }
-}
 
   @media (max-width: 768px) {
     [data-theme="dark"] .secondary-nav--mobile-space {
@@ -133,3 +132,4 @@
       @apply font-medium;
     }
   }
+}