docyard 0.6.0 → 0.8.0

data/lib/docyard/templates/assets/css/components/table-of-contents.css

@@ -1,32 +1,68 @@
-/* Table of Contents - Desktop & Mobile */
-
 .docyard-toc {
-  width: var(--toc-width);
-  position: fixed;
-  top: var(--header-height);
-  right: 0;
-  height: calc(100vh - var(--header-height));
-  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-8);
-  overflow-y: auto;
+  min-height: 0;
+  background-color: var(--background);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.doc-aside.has-overflow .docyard-toc {
+  flex: 1;
+}
+
+.docyard-toc__scroll {
   overflow-x: hidden;
-  border-left: 1px solid var(--color-border);
-  background-color: var(--color-bg);
+  overscroll-behavior: contain;
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.doc-aside.has-overflow .docyard-toc__scroll {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.docyard-toc::before,
+.docyard-toc::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2rem;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.docyard-toc::before {
+  top: 0;
+  background: linear-gradient(to bottom, var(--background) 0%, transparent 100%);
+}
+
+.docyard-toc::after {
+  bottom: 0;
+  background: linear-gradient(to top, var(--background) 0%, transparent 100%);
+}
+
+.docyard-toc.can-scroll-top::before {
+  opacity: 1;
+}
+
+.docyard-toc.can-scroll-bottom::after {
+  opacity: 1;
 }
 
-/* TOC Header */
 .docyard-toc__header {
-  margin-bottom: var(--space-4);
+  margin-bottom: var(--spacing-4);
 }
 
 .docyard-toc__title {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  font-size: 0.6875rem;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--muted-foreground);
   margin-bottom: 0;
 }
 
@@ -34,37 +70,41 @@
   flex-shrink: 0;
 }
 
-/* Secondary Header TOC Toggle (tablet & mobile) */
 .secondary-header-toc-toggle {
   display: none;
 }
 
-/* Tablet & Mobile TOC Toggle */
 @media (max-width: 1280px) {
   .secondary-header-toc-toggle {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-3);
+    gap: var(--spacing-2);
+    padding: var(--spacing-2);
     background: transparent;
     border: none;
-    color: var(--color-text);
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
     font-family: var(--font-sans);
     cursor: pointer;
-    transition: color var(--transition-fast);
+    transition: background-color 0.2s ease;
     outline: none;
+    border-radius: var(--radius-md);
+    margin-right: calc(-1 * var(--spacing-2));
   }
 
   .secondary-header-toc-toggle:hover {
-    color: var(--color-text-secondary);
+    background-color: var(--muted);
+  }
+
+  .secondary-header-toc-toggle:active {
+    background-color: var(--muted);
   }
 
   .secondary-header-toc-toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
+    outline: none;
+    border-radius: var(--radius-lg);
+    box-shadow: 0 0 0 var(--ring-width) oklch(from var(--ring) l c h / 50%);
   }
 
   .secondary-header-toc-toggle svg {
@@ -77,105 +117,88 @@
   }
 }
 
-/* TOC Navigation */
 .docyard-toc__nav {
   display: block;
+  position: relative;
 }
 
-/* TOC List */
 .docyard-toc__list {
   list-style: none;
   padding: 0;
   margin: 0;
+  position: relative;
+  border-left: 1px solid var(--border);
+}
+
+.docyard-toc__indicator {
+  position: absolute;
+  left: -1px;
+  width: 2px;
+  background-color: var(--primary);
+  pointer-events: none;
+  transition:
+    top 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+    height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  z-index: 1;
 }
 
 .docyard-toc__list .docyard-toc__list {
-  margin-top: var(--space-1);
-  margin-left: var(--space-4);
-  border-left: 1px solid var(--color-border);
-  padding-left: var(--space-3);
+  margin-top: var(--spacing-1);
+  margin-left: var(--spacing-3);
+  padding-left: var(--spacing-3);
+  border-left: none;
 }
 
-/* TOC Items */
 .docyard-toc__item {
-  margin-bottom: 0.375rem;
+  margin-bottom: 0;
 }
 
-/* TOC Links */
 .docyard-toc__link {
   display: block;
-  padding: 0.25rem var(--space-2);
-  color: var(--color-text-secondary);
+  padding: 0.25rem 0;
+  padding-left: var(--spacing-4);
+  color: var(--muted-foreground);
   text-decoration: none;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  border-radius: var(--radius-lg);
   transition: color var(--transition-fast);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-normal);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .docyard-toc__link:hover {
-  color: var(--color-text);
+  color: var(--foreground);
   text-decoration: none;
 }
 
 .docyard-toc__link:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-  color: var(--color-text);
+  outline: none;
+  box-shadow: 0 0 0 var(--ring-width) oklch(from var(--ring) l c h / 50%);
+  color: var(--foreground);
   text-decoration: none;
 }
 
-/* Active link */
 .docyard-toc__link.is-active {
-  color: var(--color-primary);
-  font-weight: var(--font-weight-semibold);
-}
-
-/* Level-specific styling */
-.docyard-toc__item--level-2>.docyard-toc__link {
-  font-weight: var(--font-weight-medium);
-}
-
-.docyard-toc__item--level-3>.docyard-toc__link {
-  font-size: 0.8125rem;
+  color: var(--primary);
+  font-weight: var(--font-medium);
 }
 
-.docyard-toc__item--level-4>.docyard-toc__link {
-  font-size: 0.8125rem;
-  color: var(--color-text-tertiary);
+.docyard-toc__item--level-2 > .docyard-toc__link {
+  font-weight: var(--font-normal);
 }
 
-/* TOC Scrollbar */
-.docyard-toc::-webkit-scrollbar {
-  width: 0.5rem;
+.docyard-toc__item--level-4 > .docyard-toc__link {
+  color: var(--muted-foreground);
 }
 
-.docyard-toc::-webkit-scrollbar-track {
-  background: transparent;
+.docyard-toc__scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
 }
 
-.docyard-toc::-webkit-scrollbar-thumb {
-  background: rgba(208, 215, 222, 0.5);
-  border-radius: 0.25rem;
-}
-
-.docyard-toc::-webkit-scrollbar-thumb:hover {
-  background: rgba(208, 215, 222, 0.7);
-}
-
-.dark .docyard-toc::-webkit-scrollbar-thumb {
-  background: rgba(110, 118, 129, 0.4);
-}
-
-.dark .docyard-toc::-webkit-scrollbar-thumb:hover {
-  background: rgba(110, 118, 129, 0.6);
-}
-
-/* Tablet & Mobile Layout - TOC in secondary header */
 @media (max-width: 1280px) {
   .docyard-toc {
     display: block;
@@ -197,13 +220,11 @@
     position: fixed;
     overflow-y: auto;
     overscroll-behavior: contain;
-    padding: var(--space-5);
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06),
-      0 0 0 1px rgba(0, 0, 0, 0.05);
+    padding: var(--spacing-5);
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
     z-index: 9999;
     transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
       opacity 0.2s ease,
@@ -213,12 +234,6 @@
     pointer-events: none;
   }
 
-  .dark .docyard-toc__nav {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
-      0 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-  }
-
   .docyard-toc__nav.is-expanded {
     display: block;
     opacity: 1;
@@ -227,39 +242,37 @@
   }
 }
 
-/* Tablet-specific: floating dropdown on right */
 @media (max-width: 1280px) and (min-width: 1025px) {
   .docyard-toc__nav {
-    top: calc(var(--header-height) + 3rem + var(--space-2));
-    right: var(--space-6);
+    top: calc(var(--header-height) + 3rem + var(--spacing-2));
+    right: var(--spacing-6);
     width: 280px;
-    max-height: calc(100vh - var(--header-height) - 3rem - var(--space-8));
+    max-height: calc(100vh - var(--header-height) - 3rem - var(--spacing-8));
   }
 }
 
-/* Mobile Layout (< 1024px) */
 @media (max-width: 1024px) {
   .docyard-toc__nav {
     top: calc(var(--header-height) + 3rem - 2px);
-    left: var(--space-4);
-    right: var(--space-4);
-    max-height: calc(100vh - var(--header-height) - 3rem - var(--space-2));
+    left: var(--spacing-4);
+    right: var(--spacing-4);
+    max-height: calc(100vh - var(--header-height) - 3rem - var(--spacing-2));
   }
 
-  .secondary-header.shift-up~.layout .docyard-toc__nav {
+  .secondary-header.shift-up ~ .layout .docyard-toc__nav {
     top: calc(3rem - 2px);
-    max-height: calc(100vh - 3rem - var(--space-2));
+    max-height: calc(100vh - 3rem - var(--spacing-2));
   }
 
   .docyard-toc__list .docyard-toc__list {
-    margin-left: var(--space-3);
-    padding-left: var(--space-2);
+    margin-left: var(--spacing-3);
+    padding-left: var(--spacing-2);
   }
 }
 
-/* Reduced Motion */
 @media (prefers-reduced-motion: reduce) {
-  .docyard-toc__link {
+  .docyard-toc__link,
+  .docyard-toc__indicator {
     transition: none;
   }