@okjavis/nodebb-theme-javis 1.4.0 → 1.5.1

package/scss/_forms.scss

@@ -17,7 +17,7 @@ textarea,
   color: $jv-text-main;
   line-height: $jv-line-height-tight;
   box-shadow: none;
-  transition: all 0.15s ease;
+  transition: border-color $jv-transition-fast, box-shadow $jv-transition-fast; // Modern transitions
 
   &::placeholder {
     color: $jv-text-muted;
@@ -26,7 +26,7 @@ textarea,
   &:focus {
     outline: none;
     border-color: $jv-primary;
-    box-shadow: 0 0 0 3px $jv-primary-soft;
+    box-shadow: $jv-focus-ring; // Consistent focus ring
   }
 }
 
@@ -68,22 +68,18 @@ textarea {
   font-weight: 400;
   text-align: left;
   color: $jv-text-muted;
-  box-shadow: $jv-shadow-soft;
-  transition: all 0.15s ease;
+  box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  transition: border-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
   &:hover,
   &:focus {
     background: $jv-surface;
     border-color: $jv-primary;
     color: $jv-primary;
-    box-shadow: $jv-shadow-soft;
+    box-shadow: $jv-shadow-sm; // shadcn subtle shadow
     outline: none;
   }
 
-  &:active {
-    transform: scale(0.99);
-  }
-
   // Override Bootstrap button states
   &.btn,
   &.btn:focus,
@@ -91,7 +87,7 @@ textarea {
   &.btn:active {
     background: $jv-surface;
     border-radius: $jv-radius-pill;
-    box-shadow: $jv-shadow-soft;
+    box-shadow: $jv-shadow-sm; // shadcn subtle shadow
     border-color: $jv-border-subtle;
     outline: none;
   }
@@ -109,11 +105,11 @@ textarea {
 .dropdown-menu {
   border: 1px solid $jv-border-subtle;
   border-radius: $jv-radius-md;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  box-shadow: $jv-shadow-lg; // shadcn large shadow for dropdowns
   padding: $jv-space-2 0;
   min-width: 180px;
   background: $jv-surface;
-  animation: dropdownFade 0.15s ease;
+  animation: dropdownFade $jv-transition-fast;
 
   @keyframes dropdownFade {
     from {
@@ -130,7 +126,7 @@ textarea {
     padding: $jv-space-4 $jv-space-8;
     font-size: $jv-font-size-sm;
     color: $jv-text-main;
-    transition: background-color 0.15s ease;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
     display: flex;
     align-items: center;
     gap: $jv-space-4;
@@ -150,7 +146,7 @@ textarea {
     }
 
     &:active {
-      background: rgba(0, 81, 255, 0.1);
+      background: $jv-active-bg; // Consistent active state
     }
 
     &.active {
@@ -158,6 +154,13 @@ textarea {
       color: $jv-primary;
       font-weight: 500;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      background: rgba(0, 81, 255, 0.06);
+      color: $jv-primary;
+    }
   }
 
   .dropdown-divider {
@@ -291,7 +294,7 @@ textarea {
 .modal-content {
   border: none;
   border-radius: $jv-radius-lg;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  box-shadow: $jv-shadow-xl; // shadcn extra large shadow for modals
 }
 
 .modal-header {
@@ -305,11 +308,17 @@ textarea {
 
   .btn-close {
     opacity: 0.5;
-    transition: opacity 0.15s ease;
+    transition: opacity $jv-transition-fast; // Modern transition
 
     &:hover {
       opacity: 1;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 }
 
@@ -331,7 +340,7 @@ textarea {
   height: 18px;
   margin-top: 0;
   border: 2px solid $jv-border-strong;
-  transition: all 0.15s ease;
+  transition: background-color $jv-transition-fast, border-color $jv-transition-fast; // Modern transitions
 
   &:checked {
     background-color: $jv-primary;
@@ -339,7 +348,8 @@ textarea {
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px $jv-primary-soft;
+    outline: none;
+    box-shadow: $jv-focus-ring; // Consistent focus ring
     border-color: $jv-primary;
   }
 }
@@ -374,14 +384,14 @@ textarea {
   border: none;
   border-bottom: 1px solid $jv-border-subtle;
   padding: $jv-space-6 $jv-space-8;
-  transition: background-color 0.15s ease;
+  transition: background-color $jv-transition-fast; // Modern transition
 
   &:last-child {
     border-bottom: none;
   }
 
   &:hover {
-    background: rgba(0, 0, 0, 0.02);
+    background: $jv-hover-bg; // Consistent hover state
   }
 
   &.active {
@@ -389,6 +399,12 @@ textarea {
     border-color: transparent;
     color: $jv-primary;
   }
+
+  // Focus state for accessibility
+  &:focus-visible {
+    outline: none;
+    background: $jv-hover-bg;
+  }
 }
 
 // ===========================================================
@@ -408,8 +424,12 @@ textarea {
     vertical-align: middle;
   }
 
-  &.table-hover tbody tr:hover {
-    background: rgba(0, 0, 0, 0.02);
+  &.table-hover tbody tr {
+    transition: background-color $jv-transition-fast; // Modern transition
+
+    &:hover {
+      background: $jv-hover-bg; // Consistent hover state
+    }
   }
 }
 
@@ -426,12 +446,18 @@ textarea {
     font-size: $jv-font-size-sm;
     color: $jv-text-main;
     background: transparent;
-    transition: all 0.15s ease;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
     &:hover {
-      background: rgba(0, 0, 0, 0.05);
+      background: $jv-hover-bg; // Consistent hover state
       color: $jv-primary;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 
   .page-item.active .page-link {
@@ -460,7 +486,7 @@ textarea {
     font-size: $jv-font-size-sm;
     font-weight: 500;
     color: $jv-text-muted;
-    transition: all 0.15s ease;
+    transition: color $jv-transition-fast, border-bottom-color $jv-transition-fast; // Modern transitions
 
     &:hover {
       color: $jv-text-main;
@@ -472,6 +498,12 @@ textarea {
       border-bottom-color: $jv-primary;
       background: transparent;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 }
 
@@ -487,10 +519,10 @@ textarea {
     font-size: $jv-font-size-sm;
     font-weight: 500;
     color: $jv-text-muted;
-    transition: all 0.15s ease;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
     &:hover {
-      background: rgba(0, 0, 0, 0.04);
+      background: $jv-hover-bg; // Consistent hover state
       color: $jv-text-main;
     }
 
@@ -498,5 +530,11 @@ textarea {
       background: $jv-primary;
       color: #fff;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 }

package/scss/_sidebar.scss

@@ -75,7 +75,7 @@
     font-size: $jv-font-size-sm;
     font-weight: 500;
     border-radius: $jv-radius-sm;
-    transition: all 0.15s ease;
+    transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
     i {
       width: 18px;
@@ -93,6 +93,12 @@
       color: $jv-primary;
       font-weight: 600;
     }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 
   // Sidebar section headers
@@ -118,10 +124,16 @@
       color: $jv-text-main;
       font-size: $jv-font-size-sm;
       border-radius: $jv-radius-sm;
-      transition: background-color 0.15s ease;
+      transition: background-color $jv-transition-fast; // Modern transition
 
       &:hover {
-        background: rgba(0, 0, 0, 0.03);
+        background: $jv-hover-bg; // Consistent hover state
+      }
+
+      // Focus state for accessibility
+      &:focus-within {
+        outline: none;
+        background: $jv-hover-bg;
       }
 
       .category-icon {
@@ -153,10 +165,16 @@ div[data-widget-area] {
   border: 1px solid $jv-border-subtle;
   border-radius: $jv-radius-lg;
   padding: $jv-space-8;
-  transition: box-shadow 0.15s ease;
+  transition: $jv-transition-shadow; // Modern transition
 
   &:hover {
-    box-shadow: $jv-shadow-soft;
+    box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
   }
 }
 
@@ -192,11 +210,17 @@ div[data-widget-area="right"] h8 {
     flex-direction: column;
     gap: 2px;
     cursor: pointer;
-    transition: border-color 0.15s ease, background 0.15s ease;
+    transition: border-color $jv-transition-fast, background-color $jv-transition-fast; // Modern transitions
 
     &:hover {
-      border-color: rgba(0,0,0,0.12);
-      background: rgba(0,0,0,0.03);
+      border-color: $jv-border-strong; // Consistent border
+      background: $jv-hover-bg; // Consistent hover state
+    }
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      box-shadow: $jv-focus-ring;
     }
 
     small {
@@ -224,11 +248,17 @@ div[data-widget-area="right"] h8 {
     display: flex;
     flex-direction: column;
     gap: $jv-space-4;
-    transition: box-shadow 0.15s ease, border 0.15s ease;
+    transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern transitions
 
     &:hover {
-      border-color: rgba(0,0,0,0.08);
-      box-shadow: $jv-shadow-soft;
+      border-color: $jv-border-strong; // Consistent border
+      box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+    }
+
+    // Focus state for accessibility
+    &:focus-within {
+      outline: none;
+      box-shadow: $jv-shadow-md, $jv-focus-ring;
     }
 
     // Meta info
@@ -304,12 +334,18 @@ div[data-widget-area="right"] h8 {
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid $jv-surface;
-    transition: transform 0.15s ease;
+    transition: transform $jv-transition-fast; // Modern transition
 
     &:hover {
       transform: scale(1.1);
       z-index: 10;
     }
+
+    // Focus state for accessibility
+    &:focus {
+      outline: none;
+      box-shadow: $jv-focus-ring;
+    }
   }
 
   .avatar-stack {
@@ -337,20 +373,26 @@ div[data-widget-area="right"] h8 {
     gap: $jv-space-4;
     padding: $jv-space-4 0;
     border-bottom: 1px solid $jv-border-subtle;
-    transition: background-color 0.15s ease;
+    transition: background-color $jv-transition-fast; // Modern transition
 
     &:last-child {
       border-bottom: none;
     }
 
     &:hover {
-      background: rgba(0, 0, 0, 0.02);
+      background: $jv-hover-bg; // Consistent hover state
       margin: 0 (-$jv-space-4);
       padding-left: $jv-space-4;
       padding-right: $jv-space-4;
       border-radius: $jv-radius-sm;
     }
 
+    // Focus state for accessibility
+    &:focus-within {
+      outline: none;
+      background: $jv-hover-bg;
+    }
+
     .category-icon {
       width: 24px;
       height: 24px;
@@ -565,8 +607,8 @@ div[data-widget-area="right"] h8 {
     width: 280px;
     z-index: 1050;
     transform: translateX(-100%);
-    transition: transform 0.3s ease;
-    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+    transition: transform $jv-transition-slow; // Modern transition
+    box-shadow: $jv-shadow-lg; // shadcn drawer shadow
 
     &.open {
       transform: translateX(0);
@@ -583,7 +625,7 @@ div[data-widget-area="right"] h8 {
     z-index: 1040;
     opacity: 0;
     visibility: hidden;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
+    transition: opacity $jv-transition-slow, visibility $jv-transition-slow; // Modern transitions
 
     &.show {
       opacity: 1;
@@ -651,7 +693,7 @@ div[data-widget-area="sidebar"] {
         font-size: 14px;
         font-weight: 500;
         text-decoration: none;
-        transition: background-color 0.15s ease;
+        transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
         cursor: pointer;
 
         &:hover {
@@ -659,6 +701,12 @@ div[data-widget-area="sidebar"] {
           color: $jv-primary;
         }
 
+        // Focus state for accessibility
+        &:focus-visible {
+          outline: none;
+          box-shadow: $jv-focus-ring;
+        }
+
         // Topic count
         small,
         .count,
@@ -686,14 +734,20 @@ div[data-widget-area="sidebar"] {
     li {
       padding: $jv-space-4 $jv-space-6;
       border-bottom: 1px solid $jv-border-subtle;
-      transition: background-color 0.15s ease;
+      transition: background-color $jv-transition-fast; // Modern transition
 
       &:last-child {
         border-bottom: none;
       }
 
       &:hover {
-        background: rgba(0, 0, 0, 0.02);
+        background: $jv-hover-bg; // Consistent hover state
+      }
+
+      // Focus state for accessibility
+      &:focus-within {
+        outline: none;
+        background: $jv-hover-bg;
       }
 
       // Post header with avatar

package/scss/_variables.scss

@@ -10,8 +10,8 @@ $jv-primary-soft: rgba(0, 81, 255, 0.12);
 // Neutrals
 $jv-bg: #f5f6f8;              // app background
 $jv-surface: #ffffff;         // cards, panels
-$jv-border-subtle: rgba(0,0,0,0.06);
-$jv-border-strong: rgba(0,0,0,0.12);
+$jv-border-subtle: rgba(0,0,0,0.1);  // More visible than Material (was 0.06) - shadcn style
+$jv-border-strong: rgba(0,0,0,0.15); // Stronger borders (was 0.12)
 
 // Text
 $jv-text-main: #111111;
@@ -25,19 +25,39 @@ $jv-radius-md: 12px;
 $jv-radius-lg: 16px;
 $jv-radius-pill: 999px;
 
-// Shadows
-$jv-shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
-$jv-shadow-card: 0 4px 10px rgba(0,0,0,0.05);
+// shadcn-Style Shadow System (Compact, Grounded, Notion/Linear-like)
+// Subtle shadows that let borders do the heavy lifting
+$jv-shadow-none: none;
+$jv-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // Barely visible
+$jv-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); // Card resting - SUBTLE
+$jv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); // Card hover
+$jv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); // Modals/Dropdowns
+$jv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); // Popovers
+
+// Legacy compatibility - map old names to new system
+$jv-shadow-soft: $jv-shadow-sm;
+$jv-shadow-card: $jv-shadow-sm;
+$jv-elevation-0: $jv-shadow-none;
+$jv-elevation-1: $jv-shadow-sm;
+$jv-elevation-2: $jv-shadow-sm;
+$jv-elevation-4: $jv-shadow-md;
+$jv-elevation-6: $jv-shadow-md;
+$jv-elevation-8: $jv-shadow-md;
+
+// Button shadows (keep branded)
 $jv-shadow-button: 0 4px 12px rgba(0, 81, 255, 0.25);
 $jv-shadow-button-hover: 0 6px 16px rgba(0, 81, 255, 0.35);
 
-// Spacing (8pt-ish scale)
-$jv-space-2: 4px;
-$jv-space-4: 8px;
-$jv-space-6: 12px;
-$jv-space-8: 16px;
-$jv-space-10: 20px;
-$jv-space-12: 24px;
+// Spacing (8dp baseline grid - shadcn/Tailwind compatible)
+$jv-space-1: 4px;   // 4dp
+$jv-space-2: 8px;   // 8dp (1 unit)
+$jv-space-3: 12px;  // 12dp (1.5 units)
+$jv-space-4: 16px;  // 16dp (2 units)
+$jv-space-5: 20px;  // 20dp (2.5 units)
+$jv-space-6: 24px;  // 24dp (3 units)
+$jv-space-8: 32px;  // 32dp (4 units)
+$jv-space-10: 40px; // 40dp (5 units)
+$jv-space-12: 48px; // 48dp (6 units)
 
 // Typography
 $jv-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
@@ -52,3 +72,18 @@ $jv-font-size-xxl: 32px;
 $jv-line-height-base: 1.52;
 $jv-line-height-tight: 1.4;
 $jv-line-height-relaxed: 1.6;
+
+// Modern Polish - Transitions & Interactions (2025 standard)
+$jv-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+$jv-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+$jv-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+$jv-transition-shadow: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+// Focus States (Accessibility + Modern Look)
+$jv-focus-ring: 0 0 0 3px rgba(0, 81, 255, 0.12);
+$jv-focus-ring-offset: 0 0 0 2px $jv-surface, 0 0 0 4px $jv-primary;
+
+// Interactive States
+$jv-hover-bg: rgba(0, 0, 0, 0.04);
+$jv-active-bg: rgba(0, 0, 0, 0.08);
+$jv-selected-bg: rgba(0, 81, 255, 0.08);