@okjavis/nodebb-theme-javis 1.5.0 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling",
   "main": "theme.js",
   "scripts": {

package/scss/_base.scss

@@ -122,9 +122,17 @@ h6 {
 a {
   color: $jv-primary;
   text-decoration: none;
-  transition: color 0.15s ease;
+  transition: color $jv-transition-fast; // Modern transition
 
   &:hover {
     color: $jv-primary-hover;
   }
+
+  // Focus state for accessibility
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+  }
 }

package/scss/_buttons.scss

@@ -26,7 +26,7 @@ $jv-info-hover: #2563eb;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.4;
-  transition: all 0.2s ease;
+  transition: background-color $jv-transition-fast, border-color $jv-transition-fast, color $jv-transition-fast; // Modern specific transitions
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -35,7 +35,7 @@ $jv-info-hover: #2563eb;
   // Focus ring for accessibility
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 3px rgba(0, 81, 255, 0.2);
+    box-shadow: $jv-focus-ring;
   }
 
   &:focus:not(:focus-visible) {
@@ -43,7 +43,8 @@ $jv-info-hover: #2563eb;
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px rgba(0, 81, 255, 0.3);
+    outline: none;
+    box-shadow: $jv-focus-ring;
   }
 
   // Disabled state
@@ -74,12 +75,10 @@ $jv-info-hover: #2563eb;
     background-color: $jv-primary-hover;
     border-color: $jv-primary-hover;
     box-shadow: $jv-shadow-button-hover;
-    transform: translateY(-1px);
     color: #fff;
   }
 
   &:active {
-    transform: translateY(0);
     box-shadow: $jv-shadow-button;
   }
 }
@@ -105,7 +104,7 @@ $jv-info-hover: #2563eb;
   color: $jv-text-main;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.04);
+    background-color: $jv-hover-bg; // Consistent hover state
     border-color: $jv-border-strong;
     color: $jv-text-main;
   }
@@ -155,11 +154,6 @@ $jv-info-hover: #2563eb;
     background-color: $jv-success-hover;
     border-color: $jv-success-hover;
     color: #fff;
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
   }
 }
 
@@ -172,11 +166,6 @@ $jv-info-hover: #2563eb;
     background-color: $jv-danger-hover;
     border-color: $jv-danger-hover;
     color: #fff;
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
   }
 }
 
@@ -189,11 +178,6 @@ $jv-info-hover: #2563eb;
     background-color: $jv-warning-hover;
     border-color: $jv-warning-hover;
     color: #fff;
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
   }
 }
 
@@ -206,11 +190,6 @@ $jv-info-hover: #2563eb;
     background-color: $jv-info-hover;
     border-color: $jv-info-hover;
     color: #fff;
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
   }
 }
 
@@ -218,12 +197,12 @@ $jv-info-hover: #2563eb;
 // LIGHT/SUBTLE BUTTON
 // ===========================================================
 .btn-light {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: $jv-hover-bg; // Consistent with hover state
   border-color: transparent;
   color: $jv-text-main;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.08);
+    background-color: $jv-active-bg; // Consistent active state
     color: $jv-text-main;
   }
 }
@@ -237,7 +216,7 @@ $jv-info-hover: #2563eb;
   color: $jv-text-muted;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: $jv-hover-bg; // Consistent hover state
     color: $jv-text-main;
   }
 }
@@ -353,11 +332,12 @@ $jv-info-hover: #2563eb;
   height: 56px;
   border-radius: 50%;
   padding: 0;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: $jv-shadow-lg; // shadcn large shadow
+  transition: $jv-transition-shadow, transform $jv-transition-fast; // Modern transitions
 
   &:hover {
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-    transform: translateY(-2px);
+    box-shadow: $jv-shadow-xl; // shadcn extra large shadow
+    transform: translateY(-2px); // FABs are meant to lift on hover
   }
 
   i {

package/scss/_cards.scss

@@ -7,15 +7,22 @@
 .topic-card {
   display: flex;
   background: $jv-surface;
-  border-radius: $jv-radius-lg;
+  border-radius: $jv-radius-sm; // 8px - shadcn standard
   border: 1px solid $jv-border-subtle;
-  margin-bottom: $jv-space-4;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  margin-bottom: $jv-space-2; // 8dp grid
+  box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern smooth transitions
   overflow: hidden;
 
   &:hover {
-    border-color: $jv-border-strong;
-    box-shadow: $jv-shadow-soft;
+    box-shadow: $jv-shadow-md; // shadcn hover shadow
+    border-color: $jv-border-strong; // Subtle border darkening
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
   }
 
   // Deleted/scheduled states
@@ -36,10 +43,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: $jv-space-6 $jv-space-4;
+  padding: $jv-space-6 $jv-space-4; // 24dp vertical, 16dp horizontal - Material grid
   background: rgba(0, 0, 0, 0.02);
   min-width: 44px;
-  gap: 2px;
+  gap: $jv-space-1; // 4dp - Material grid
 }
 
 .vote-btn {
@@ -93,10 +100,10 @@
 // ===========================================================
 .topic-content {
   flex: 1;
-  padding: $jv-space-6;
+  padding: $jv-space-3; // 12dp - Material grid
   display: flex;
   flex-direction: column;
-  gap: $jv-space-4;
+  gap: $jv-space-3; // 12dp - Material grid
   min-width: 0; // Allow text truncation
 }
 
@@ -105,27 +112,27 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: $jv-space-2;
-  font-size: $jv-font-size-xs;
-  color: $jv-text-muted;
+  gap: $jv-space-3; // 12dp - Material grid
+  font-size: 14px; // Slightly larger for readability
+  color: $jv-text-soft; // More subtle
 
   .meta-separator {
     color: $jv-text-soft;
   }
 
   .author-link {
-    color: $jv-text-muted;
+    color: $jv-text-soft; // More subtle - not competing with title
     text-decoration: none;
-    font-weight: 500;
+    font-weight: 400; // Normal weight
 
     &:hover {
       color: $jv-primary;
-      text-decoration: underline;
     }
   }
 
   .meta-time {
     color: $jv-text-soft;
+    font-size: 13px;
   }
 
   // Category badge override
@@ -140,10 +147,10 @@
 // Topic Title
 .topic-card .topic-title {
   margin: 0;
-  font-size: $jv-font-size-lg;
-  font-weight: 600;
-  line-height: $jv-line-height-tight;
-  letter-spacing: -0.01em;
+  font-size: 20px; // Larger for prominence - consistent with feed
+  font-weight: 700; // Bolder for better hierarchy
+  line-height: 1.4; // Better readability
+  letter-spacing: -0.02em; // Tighter for modern feel
 
   a {
     color: $jv-text-main;
@@ -159,7 +166,7 @@
 .topic-labels {
   display: flex;
   flex-wrap: wrap;
-  gap: $jv-space-2;
+  gap: $jv-space-2; // 8dp - Material grid
 
   .topic-badge {
     display: inline-flex;
@@ -197,7 +204,7 @@
 .topic-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: $jv-space-2;
+  gap: $jv-space-2; // 8dp - Material grid
 
   .topic-tag {
     font-size: 11px;
@@ -222,7 +229,7 @@
   position: relative;
   width: fit-content;
   max-width: 100%;
-  border-radius: $jv-radius-md;
+  border-radius: $jv-radius-sm; // 8px - Material Design standard
   overflow: hidden;
 
   img {
@@ -231,7 +238,7 @@
     max-width: 100%;
     width: auto;
     object-fit: cover;
-    border-radius: $jv-radius-md;
+    border-radius: $jv-radius-sm; // 8px - Material Design standard
   }
 
   .thumb-count {
@@ -269,40 +276,51 @@
 .topic-actions {
   display: flex;
   align-items: center;
-  gap: $jv-space-4;
-  padding-top: $jv-space-2;
+  gap: $jv-space-3; // 12dp - Material grid
+  padding-top: $jv-space-3; // 12dp - Material grid
   margin-top: auto;
 }
 
 .action-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  font-size: $jv-font-size-xs;
-  font-weight: 500;
+  gap: $jv-space-2; // 8dp grid
+  padding: $jv-space-2 $jv-space-3; // 8dp vertical, 12dp horizontal
+  font-size: 14px;
+  font-weight: 600;
   color: $jv-text-muted;
   background: transparent;
   border: none;
-  border-radius: $jv-radius-xs;
+  border-radius: $jv-radius-sm; // 8px shadcn standard
   cursor: pointer;
   text-decoration: none;
-  transition: background-color 0.15s ease, color 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-text-main;
   }
 
+  // Focus state for accessibility
+  &:focus-visible {
+    outline: none;
+    box-shadow: $jv-focus-ring;
+  }
+
   i {
-    font-size: 14px;
+    font-size: 18px; // Larger icons
+  }
+
+  // Make numbers bold
+  span {
+    font-weight: 700;
   }
 }
 
 .action-stat {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: $jv-space-1; // 4dp - Material grid
   font-size: $jv-font-size-xs;
   color: $jv-text-soft;
   margin-left: auto;
@@ -334,7 +352,7 @@
 
   .topic-actions {
     flex-wrap: wrap;
-    gap: $jv-space-2;
+    gap: $jv-space-2; // 8dp - Material grid
   }
 
   .action-btn span {
@@ -351,23 +369,32 @@
 // ===========================================================
 li[component="post"].posts-list-item {
   background: $jv-surface;
-  border-radius: $jv-radius-lg;
+  border-radius: $jv-radius-sm; // 8px - shadcn standard
   border: 1px solid $jv-border-subtle;
-  padding: $jv-space-8;
-  margin-bottom: $jv-space-4;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  padding: $jv-space-4 $jv-space-3; // 16dp vertical, 12dp horizontal
+  margin-bottom: $jv-space-2; // 8dp grid
+  box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern transitions
 
   &:hover {
+    box-shadow: $jv-shadow-md; // shadcn hover shadow
     border-color: $jv-border-strong;
-    box-shadow: $jv-shadow-soft;
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
   }
 }
 
 li[component="post"] {
   .topic-title {
-    font-size: $jv-font-size-lg;
-    font-weight: 600;
-    margin-bottom: $jv-space-4;
+    font-size: 20px; // Larger for prominence
+    font-weight: 700; // Bolder for better hierarchy
+    line-height: 1.4; // Better readability
+    margin-bottom: $jv-space-3; // 12dp - Material grid
+    letter-spacing: -0.02em; // Tighter for modern feel
 
     a {
       color: $jv-text-main;
@@ -382,18 +409,27 @@ li[component="post"] {
   .post-body {
     display: flex;
     flex-direction: column;
-    gap: $jv-space-4;
+    gap: $jv-space-2; // 8dp - Material grid
   }
 
   .post-info {
-    font-size: $jv-font-size-xs;
-    color: $jv-text-muted;
+    font-size: 14px; // Slightly larger for readability
+    color: $jv-text-soft; // More subtle
+
+    a {
+      color: $jv-text-soft; // More subtle
+      font-weight: 400; // Normal weight
+
+      &:hover {
+        color: $jv-primary;
+      }
+    }
   }
 
   .content {
-    font-size: $jv-font-size-sm;
-    line-height: $jv-line-height-base;
-    color: $jv-text-main;
+    font-size: 15px; // Slightly larger for better readability
+    line-height: 1.6;
+    color: $jv-text-muted;
 
     p {
       margin-bottom: $jv-space-4;
@@ -402,6 +438,7 @@ li[component="post"] {
 
   .timeago {
     color: $jv-text-soft;
+    font-size: 13px;
   }
 }
 
@@ -416,15 +453,22 @@ li[component="post"] {
 // Category/Topic List Item (fallback for other templates)
 .category-item {
   background: $jv-surface;
-  border-radius: $jv-radius-lg;
+  border-radius: $jv-radius-sm; // 8px - shadcn standard
   border: 1px solid $jv-border-subtle;
-  padding: $jv-space-6;
-  margin-bottom: $jv-space-4;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  padding: $jv-space-3; // 12dp grid
+  margin-bottom: $jv-space-2; // 8dp grid
+  box-shadow: $jv-shadow-sm; // shadcn subtle shadow
+  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern transitions
 
   &:hover {
+    box-shadow: $jv-shadow-md; // shadcn hover shadow
     border-color: $jv-border-strong;
-    box-shadow: $jv-shadow-soft;
+  }
+
+  // Focus state for accessibility
+  &:focus-within {
+    outline: none;
+    box-shadow: $jv-shadow-md, $jv-focus-ring;
   }
 
   // Override default border-bottom

package/scss/_categories.scss

@@ -6,7 +6,7 @@
 .feed h2 {
   font-size: 16px;
   font-weight: 600;
-  margin: 0 0 $jv-space-6 0;
+  margin: 0 0 $jv-space-6 0; // 24dp - Material grid
   padding: 0;
   color: $jv-text-main;
   letter-spacing: -0.2px;
@@ -26,16 +26,22 @@ ul.categories-list.list-unstyled {
 // ===========================================================
 
 li[component="categories/category"] {
-  padding: 16px 0;
+  padding: $jv-space-4 0; // 16dp grid
   border-bottom: 1px solid #f1f1f1;
-  transition: background 120ms ease;
+  transition: background $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;
   }
 
   // Parent title
@@ -43,10 +49,10 @@ li[component="categories/category"] {
     font-size: $jv-font-size-base;
     font-weight: 600;
     color: $jv-text-main;
-    margin-bottom: 4px;
+    margin-bottom: $jv-space-1; // 4dp - Material grid
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: $jv-space-2; // 8dp - Material grid
 
     a {
       text-decoration: none;
@@ -68,7 +74,7 @@ li[component="categories/category"] {
     font-size: $jv-font-size-sm;
     color: $jv-text-muted;
     line-height: 1.45;
-    margin-bottom: 10px;
+    margin-bottom: $jv-space-2; // 8dp - Material grid
     max-width: 92%;
   }
 }
@@ -80,15 +86,15 @@ li[component="categories/category"] {
 li[component="categories/category"] .category-children {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  margin-top: 4px;
+  gap: $jv-space-2; // 8dp - Material grid
+  margin-top: $jv-space-1; // 4dp - Material grid
 }
 
 .category-children-item {
   small > .d-flex {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: $jv-space-2; // 8dp - Material grid
     font-size: 14px;
     color: #333;
   }
@@ -105,7 +111,16 @@ li[component="categories/category"] .category-children {
     text-decoration: none;
     font-size: 14px;
     color: #333;
-    transition: color 120ms ease, transform 80ms ease;
+    transition: color $jv-transition-fast; // Modern transition
+
+    // Focus state for accessibility
+    &:focus-visible {
+      outline: none;
+      color: $jv-primary;
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      text-underline-offset: 2px;
+    }
   }
 
   // Hover state: blue dot + blue text