docyard 0.7.0 → 0.8.0

data/lib/docyard/templates/assets/css/components/tabs.css

@@ -1,113 +1,73 @@
-/* Tabs Component */
-
 .docyard-tabs {
-  margin: var(--space-6) 0;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-.dark .docyard-tabs {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  margin: var(--spacing-6) 0;
 }
 
-/* Tab List Wrapper */
 .docyard-tabs__list-wrapper {
   position: relative;
-  background: var(--color-bg-secondary);
 }
 
-.dark .docyard-tabs__list-wrapper {
-  background: rgba(255, 255, 255, 0.03);
+.docyard-tabs__list-wrapper::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--border);
 }
 
-/* Tab List Container */
 .docyard-tabs__list {
   display: flex;
-  gap: var(--space-2);
-  padding: 0 var(--space-4);
-  background: transparent;
+  align-items: center;
+  gap: var(--spacing-1);
   position: relative;
   overflow-x: auto;
+  overscroll-behavior-x: contain;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   margin: 0;
+  padding-bottom: var(--spacing-3);
 }
 
 .docyard-tabs__list::-webkit-scrollbar {
   display: none;
 }
 
-/* Bottom border line */
-.docyard-tabs__list::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--color-border);
-  z-index: 0;
-}
-
-/* Individual Tab Button */
 .docyard-tabs__tab {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-4) var(--space-4);
+  justify-content: center;
+  gap: var(--spacing-1-5);
+  padding: var(--spacing-2) var(--spacing-3);
   background: transparent;
   border: none;
-  border-radius: 0;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
   font-family: var(--font-sans);
-  color: var(--color-text-secondary);
+  color: var(--muted-foreground);
   cursor: pointer;
-  transition: color 0.2s ease, background-color 0.2s ease;
+  transition: color 0.15s ease;
   position: relative;
   white-space: nowrap;
   flex-shrink: 0;
   line-height: 1.5;
-  z-index: 1;
+  outline: none;
 }
 
 .docyard-tabs__tab:hover {
-  color: var(--color-primary);
-  background: rgba(0, 0, 0, 0.02);
-}
-
-.dark .docyard-tabs__tab:hover {
-  background: rgba(255, 255, 255, 0.04);
+  color: var(--foreground);
 }
 
 .docyard-tabs__tab[aria-selected="true"] {
-  color: var(--color-primary);
-  background: var(--color-code-bg);
+  color: var(--foreground);
 }
 
-/* Cover the border-bottom for active tab */
-.docyard-tabs__tab[aria-selected="true"]::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--color-code-bg);
-  z-index: 2;
-}
-
-/* Focus state */
 .docyard-tabs__tab:focus-visible {
-  outline: 2px solid var(--color-primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
-  z-index: 1;
 }
 
-/* Tab Icon Container */
 .docyard-tabs__icon {
   display: inline-flex;
   align-items: center;
@@ -125,7 +85,22 @@
   height: 100%;
 }
 
-/* Scroll Indicators */
+.docyard-tabs__indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: var(--foreground);
+  border-radius: 1px;
+  pointer-events: none;
+  z-index: 1;
+  
+  transition:
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  will-change: transform, width;
+}
+
 .docyard-tabs__scroll-indicator {
   position: absolute;
   top: 0;
@@ -134,135 +109,125 @@
   pointer-events: none;
   z-index: 2;
   opacity: 0;
-  transition: opacity var(--transition-base);
+  transition: opacity 0.2s ease;
 }
 
 .docyard-tabs__scroll-indicator--left {
   left: 0;
-  background: linear-gradient(to right,
-      var(--color-bg-secondary),
-      transparent);
+  background: linear-gradient(to right, var(--background), transparent);
 }
 
 .docyard-tabs__scroll-indicator--right {
   right: 0;
-  background: linear-gradient(to left,
-      var(--color-bg-secondary),
-      transparent);
+  background: linear-gradient(to left, var(--background), transparent);
 }
 
 .docyard-tabs__scroll-indicator.is-visible {
   opacity: 1;
 }
 
-/* Slide Indicator */
-.docyard-tabs__indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 2px;
-  background: var(--color-primary);
-  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: transform, width;
-  pointer-events: none;
-  z-index: 3;
-}
-
-/* Tab Panel Container */
 .docyard-tabs__panel {
-  padding: 0;
+  padding: var(--spacing-6) 0;
   display: none;
   outline: none;
-  background: var(--color-bg);
-}
-
-/* Panel base styles */
-.docyard-tabs__panel p {
-  margin-bottom: 0;
+  font-size: var(--text-base);
 }
 
 .docyard-tabs__panel[aria-hidden="false"] {
   display: block;
+  animation: tabContentFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Panel content spacing */
-.docyard-tabs__panel>*:first-child {
-  margin-top: 0;
+@keyframes tabContentFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.docyard-tabs__panel>*:last-child {
-  margin-bottom: 0;
+.docyard-tabs__panel[data-direction="left"][aria-hidden="false"] {
+  animation: tabContentSlideFromLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Code blocks inside tabs */
-.docyard-tabs__panel .docyard-code-block {
-  margin: 0;
+.docyard-tabs__panel[data-direction="right"][aria-hidden="false"] {
+  animation: tabContentSlideFromRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Reset code block styling in tabs */
-.docyard-tabs__panel .docyard-code-block .highlight {
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  background: transparent;
+@keyframes tabContentSlideFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
-/* Panel styles with :has() support */
-@supports selector(:has(*)) {
-  .docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) {
-    padding: var(--space-6);
+@keyframes tabContentSlideFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
   }
-
-  .docyard-tabs__panel:has(> [class*="language-"]:only-child) {
-    background: var(--color-code-bg);
+  to {
+    opacity: 1;
+    transform: translateX(0);
   }
+}
 
-  .docyard-tabs__panel:has(> [class*="language-"]:only-child) .highlight pre {
-    padding: var(--space-6);
-    background: transparent;
-  }
+.docyard-tabs__panel > *:first-child {
+  margin-top: 0;
 }
 
-/* Fallback for browsers without :has() */
-@supports not selector(:has(*)) {
-  .docyard-tabs__panel {
-    padding: var(--space-6);
-  }
+.docyard-tabs__panel > *:last-child {
+  margin-bottom: 0;
+}
+
+.docyard-tabs__panel p {
+  margin-bottom: var(--spacing-4);
+}
+
+.docyard-tabs__panel p:last-child {
+  margin-bottom: 0;
+}
+
+.docyard-tabs__panel .docyard-code-block {
+  margin: var(--spacing-4) 0;
+}
+
+.docyard-tabs__panel .docyard-code-block:first-child {
+  margin-top: 0;
 }
 
-/* Code blocks with siblings */
-.docyard-tabs__panel .docyard-code-block:not(:only-child) .highlight {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
-  margin: var(--space-4) 0;
-  background: var(--color-code-bg);
+.docyard-tabs__panel .docyard-code-block:last-child {
+  margin-bottom: 0;
 }
 
-/* Inline code inside tabs */
-.docyard-tabs__panel :not(pre)>code {
-  background-color: var(--color-code-bg);
+.docyard-tabs__panel :not(pre) > code {
+  background-color: oklch(from var(--input) l c h / 30%);
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius-sm);
   font-size: 0.9em;
 }
 
-/* Mobile responsive */
 @media (max-width: 640px) {
   .docyard-tabs {
-    margin: var(--space-4) 0;
+    margin: var(--spacing-4) 0;
   }
 
   .docyard-tabs__list {
-    padding: 0 var(--space-3);
-    gap: var(--space-1);
+    gap: 0;
+    padding-bottom: var(--spacing-2);
   }
 
   .docyard-tabs__tab {
-    padding: var(--space-3) var(--space-3);
-    font-size: var(--font-size-sm);
-    gap: var(--space-2);
+    padding: var(--spacing-1-5) var(--spacing-2);
+    font-size: var(--text-sm);
+    gap: var(--spacing-1);
   }
 
   .docyard-tabs__icon .docyard-icon {
@@ -271,35 +236,29 @@
   }
 
   .docyard-tabs__panel {
-    padding: var(--space-4);
-  }
-
-  .docyard-tabs__panel pre code {
-    font-size: var(--font-size-sm);
-  }
-
-  .docyard-tabs__panel .highlighter-rouge:not(:only-child) .highlight pre code {
-    padding: var(--space-3) !important;
-    font-size: var(--font-size-sm);
+    padding: var(--spacing-4) 0;
   }
 }
 
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
   .docyard-tabs__tab,
-  .docyard-tabs__indicator {
+  .docyard-tabs__indicator,
+  .docyard-tabs__panel[aria-hidden="false"] {
     transition: none;
+    animation: none;
   }
 }
 
-/* High contrast mode support */
 @media (prefers-contrast: high) {
-  .docyard-tabs {
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
+  .docyard-tabs__list-wrapper::after {
+    height: 2px;
+  }
+
+  .docyard-tabs__indicator {
+    height: 3px;
   }
 
   .docyard-tabs__tab[aria-selected="true"] {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    text-decoration: underline;
   }
 }

data/lib/docyard/templates/assets/css/components/theme-toggle.css

@@ -1,69 +1,73 @@
-/* Theme Toggle */
 .theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
   padding: 0;
-  margin-left: var(--space-4);
-  background: none;
-  border: none;
+  margin-left: var(--spacing-3);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-4xl);
   cursor: pointer;
-  position: relative;
+  color: var(--muted-foreground);
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+  outline: none;
+  flex-shrink: 0;
 }
 
-.theme-toggle-track {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  width: 3.25rem;
-  height: 1.75rem;
-  padding: 0 0.375rem;
-  border-radius: 0.875rem;
-  background-color: var(--color-border);
-  border: 1px solid var(--color-border);
-  transition: background-color 0.25s ease;
+.theme-toggle:hover {
+  background-color: var(--muted);
+  color: var(--foreground);
 }
 
-.theme-toggle:hover .theme-toggle-track {
-  background-color: var(--color-border-secondary);
+.dark .theme-toggle:hover {
+  background-color: oklch(from var(--muted) l c h / 50%);
 }
 
-.theme-toggle-icon {
-  position: relative;
-  z-index: 1;
-  flex-shrink: 0;
+.theme-toggle:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 var(--ring-width) oklch(from var(--ring) l c h / 50%);
+}
+
+.theme-toggle-sun,
+.theme-toggle-moon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.theme-toggle-sun-icon {
-  color: var(--color-warning);
+.theme-toggle-sun .docyard-icon,
+.theme-toggle-moon .docyard-icon {
+  width: 1.125rem;
+  height: 1.125rem;
 }
 
-.theme-toggle-moon-icon {
-  color: var(--color-text-tertiary);
+.theme-toggle-sun {
+  display: none;
 }
 
-.dark .theme-toggle-moon-icon {
-  color: var(--color-primary);
+.theme-toggle-moon {
+  display: flex;
 }
 
-.theme-toggle-thumb {
-  position: absolute;
-  top: 0.125rem;
-  left: 0.125rem;
-  width: 1.375rem;
-  height: 1.375rem;
-  background-color: var(--color-bg);
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  transition: transform 0.25s ease;
+.dark .theme-toggle-sun {
+  display: flex;
 }
 
-.dark .theme-toggle-thumb {
-  transform: translateX(1.5rem);
+.dark .theme-toggle-moon {
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  .theme-toggle {
+    margin-left: var(--spacing-1);
+  }
 }
 
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  .theme-toggle-track,
-  .theme-toggle-thumb {
+  .theme-toggle {
     transition: none;
   }
 }