Add glass UI with backdrop blur and fix primary button colors

Apply glassmorphism to sidebar, cards, tables, modals, dropdowns,
and dialogs with semi-transparent backgrounds, backdrop-blur, and
white/15 borders. Add subtle gradient body background for the blur
to work against. Add dedicated btn-primary color tokens so primary
buttons stay bold in dark mode instead of using the brightened text
palette. Use shadow-sm to avoid heavy halos in light mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

resources/scripts/admin/layouts/partials/TheSiteSidebar.vue

@@ -124,8 +124,8 @@
       h-screen
       pb-32
       overflow-y-auto
-      bg-surface
-      border-r border-line-default border-solid
+      bg-surface/80 backdrop-blur-xl
+      border-r border-white/10
       xl:w-64
       md:fixed md:flex md:flex-col md:inset-y-0
       pt-16

resources/scripts/components/base/BaseButton.vue

@@ -81,7 +81,7 @@ const placeHolderSize = computed(() => {
 
 const variantClass = computed(() => {
   return {
-    'border-transparent shadow-xs text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
+    'border-transparent shadow-xs text-white bg-btn-primary hover:bg-btn-primary-hover focus:ring-primary-500':
       props.variant === 'primary',
     'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
       props.variant === 'secondary',

resources/scripts/components/base/BaseCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-surface rounded-xl shadow border border-line-light">
+  <div class="bg-surface/70 backdrop-blur-lg rounded-xl shadow-sm border border-white/15">
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-heading border-b border-line-light border-solid"

resources/scripts/components/base/BaseDialog.vue

@@ -59,8 +59,8 @@
               text-left
               align-bottom
               transition-all
-              bg-surface
-              rounded-lg
+              bg-surface/80 backdrop-blur-2xl
+              rounded-xl border border-white/15
               shadow-xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative

resources/scripts/components/base/BaseDropdown.vue

@@ -69,7 +69,7 @@ const props = defineProps({
 })
 
 const containerClasses = computed(() => {
-  const baseClass = `origin-top-right rounded-md shadow-lg bg-surface ring-1 ring-black/5 divide-y divide-line-light focus:outline-hidden`
+  const baseClass = `origin-top-right rounded-xl shadow-xl bg-surface/80 backdrop-blur-xl border border-white/15 divide-y divide-line-light focus:outline-hidden`
   return `${baseClass} ${props.containerClass}`
 })
 

resources/scripts/components/base/BaseModal.vue

@@ -51,8 +51,8 @@
             <div
               :class="`inline-block
               align-middle
-              bg-surface
-              rounded-lg
+              bg-surface/80 backdrop-blur-2xl
+              rounded-xl border border-white/15
               text-left
               overflow-hidden
               relative

resources/scripts/components/base/base-table/BaseTable.vue

@@ -6,9 +6,9 @@
           class="
             relative
             overflow-hidden
-            bg-surface
-            border border-line-light
-            shadow
+            bg-surface/70 backdrop-blur-lg
+            border border-white/15
+            shadow-sm
             rounded-xl
           "
         >