UI: Refinements

playground/astro.config.mjs

@@ -105,6 +105,13 @@ export default defineConfig({
   image: { service: { entrypoint: 'astro/assets/services/noop' } },
   integrations: [mdx()],
   markdown: {
+    shikiConfig: {
+      themes: {
+        light: 'catppuccin-latte',
+        dark: 'catppuccin-mocha',
+      },
+      wrap: true,
+    },
     rehypePlugins: [rehypeHeadingAnchors, rehypeTableWrapper],
   },
   vite: {

playground/src/pages/components/styleguide.mdx

@@ -334,7 +334,7 @@ The `<video>` element plays media files directly in the browser.
     align-items: center;
     gap: 8px;
     padding: 16px;
-    border: 1px solid light-dark(var(--ig-gray-300), var(--ig-gray-900));
+    border: 1px solid light-dark(var(--ig-gray-300), var(--ig-gray-100));
     border-radius: 0.5rem;
     font-size: 0.7rem;
     text-align: center;

src/components/DocsBreadcrumb/DocsBreadcrumb.astro

@@ -41,13 +41,13 @@ const crumbs            = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle
         { resolvedSiteTitle && (
             <li class="docs-breadcrumb-item docs-breadcrumb-home">
                 <span>{ resolvedSiteTitle }</span>
-                <span class="docs-breadcrumb-sep" aria-hidden="true">
-                /
-                </span>
             </li>
         ) }
         { crumbs.map((label, i) => (
             <li class="docs-breadcrumb-item">
+                <span class="docs-breadcrumb-sep" aria-hidden="true">
+                /
+                </span>
                 <span class="docs-breadcrumb-crumb" title={ label }>{ label }</span>
             </li>
         )) }

src/components/DocsBreadcrumb/DocsBreadcrumb.scss

@@ -17,7 +17,17 @@
 	gap: rem(4px);
 	list-style: none;
 	padding: 0;
-	color: var(--ig-gray-500);
+	color: light-dark(var(--ig-gray-700), var(--ig-gray-400));
+}
+
+[data-theme='dark'] {
+	.docs-breadcrumb-list {
+		color: var(--ig-gray-600);
+	}
+
+	.docs-breadcrumb-home {
+		color: var(--ig-gray-400);
+	}
 }
 
 .docs-breadcrumb-item {
@@ -29,8 +39,7 @@
 }
 
 .docs-breadcrumb-home {
-	font-weight: 600;
-	color: var(--ig-gray-700);
+	color: light-dark(var(--ig-gray-500), var(--ig-gray-600));
 	flex-shrink: 0;
 }
 

src/components/DocsSidebar/DocsSidebar.astro

@@ -9,6 +9,7 @@
  * in the <script> block below to use @infragistics/igniteui-webcomponents.
  */
 import { sidebar as sidebarData, trailingSlash as configuredTrailingSlash } from 'virtual:docs-template/site-meta';
+import logoRaw from '../../assets/ig-logo.svg?raw';
 import SidebarFilterInput from './SidebarFilterInput.astro';
 import './DocsSidebar.scss';
 import SidebarLabel from './SidebarLabel.astro';
@@ -43,7 +44,10 @@ const activeId = normalizeSlug(currentSlug);
 
 <sidebar-filter class="docs-sidebar" id="docs-sidebar" data-no-results="No topics match">
     <div class="sidebar-gutter">
-        { showFilter && <SidebarFilterInput/> }
+        <div class="sidebar-logo" aria-hidden="true">
+            <Fragment set:html={logoRaw} />
+        </div>
+{ showFilter && <SidebarFilterInput/> }
     </div>
     <div class="sidebar-scroll" data-sidebar-scroll>
         <DocsTree

src/components/DocsSidebar/DocsSidebar.scss

@@ -1,10 +1,13 @@
 @use 'igniteui-theming/sass/typography' as *;
-@use '../../styles/global/breakpoints' as *;
 
+@layer components {
+
+// Desktop base. On tablet/mobile DocsLayout.scss turns this into a slide-in overlay.
 .docs-sidebar {
+	--igd-sidebar-z-index: 0;
 	display: flex;
 	flex-direction: column;
-	z-index: 0;
+	z-index: var(--igd-sidebar-z-index);
 	border-inline-end: var(--igd-app-outline);
 	padding-inline: var(--igd-padding-md);
 	padding-block: calc(var(--igd-padding-lg) + rem(14px));
@@ -16,60 +19,41 @@
 	align-self: start;
 	gap: rem(24px);
 
-	// On tablet/mobile: sidebar becomes a full-height fixed overlay, hidden off-screen by default.
-	@media (max-width: #{$bp-tablet-max}) {
-		position: fixed;
-		inset-block: 0;
-		inset-inline-start: 0;
-		height: 100dvh;
-		max-height: 100dvh;
-		width: min(rem(360px), 85vw);
-		z-index: 100;
-		transform: translateX(-100%);
-		transition: transform 250ms ease, box-shadow 250ms ease;
-		box-shadow: none;
-	}
-
 	.sidebar-gutter {
 		overflow-y: hidden;
 		scrollbar-gutter: stable;
-		
+
 		// This Makes sure the input border is visible
 		// This is the height of the input in fluent theme + 8px padding
 		// TODO this can be made smart using a css variable to override the original height of the input and used here
 		min-height: rem(40px);
+
+
+		igc-icon {
+			color: light-dark(var(--ig-gray-800), var(--ig-gray-300));
+		}
+
+		&:empty {
+			display: none;
+		}
 	}
 }
 
-// Overlay backdrop — only visible on tablet when sidebar is open.
+// Hidden by default. DocsLayout.scss reveals it on tablet/mobile when the sidebar is open.
 .docs-sidebar-backdrop {
 	display: none;
-
-	@media (max-width: #{$bp-tablet-max}) {
-		display: block;
-		position: fixed;
-		inset: 0;
-		z-index: 99;
-		background: rgba(0, 0, 0, 0.4);
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 250ms ease;
-	}
 }
 
-// Open state — driven by data-sidebar-open on <body>
-body[data-sidebar-open] {
-	@media (max-width: #{$bp-tablet-max}) {
-		overflow: hidden;
+.sidebar-logo {
+	display: none;
+	margin-block-end: rem(8px);
+	padding-inline-start: rem(20px);
 
-		.docs-sidebar {
-			transform: translateX(0);
-			box-shadow: var(--ig-elevation-8);
-		}
+	> svg {
+		width: rem(79px);
 
-		.docs-sidebar-backdrop {
-			opacity: 1;
-			pointer-events: auto;
+		.logo-type {
+			fill: var(--igd-logo-type);
 		}
 	}
 }
@@ -166,3 +150,6 @@ body[data-sidebar-open] {
 	gap: rem(4px);
 	margin-left: auto;
 }
+
+}
+

src/components/DocsSidebar/SidebarFilterInput.astro

@@ -31,9 +31,8 @@ import './SidebarFilterInput.scss';
 </igc-input>
 
 <p role="status"
-    aria-atomic="true"
-    class="sidebar-filter-status"
-    data-sidebar-filter-status>
-</p>
+aria-atomic="true"
+class="sidebar-filter-status"
+data-sidebar-filter-status></p>
 
 

src/components/DocsSidebar/SidebarFilterInput.scss

@@ -5,7 +5,7 @@ igc-input {
 	--ig-input-group-input-suffix-color--filled: light-dark(var(--ig-gray-900), var(--ig-gray-800));
 	--ig-input-group-input-suffix-color--focused: light-dark(var(--ig-gray-900), var(--ig-gray-800));
 	--ig-input-group-idle-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-800));
-	--ig-input-group-filled-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-50));
+	--ig-input-group-filled-text-color: light-dark(var(--ig-gray-900), var(--ig-gray-900));
 	--ig-input-group-placeholder-color: var(--ig-gray-500);
 	--ig-input-group-hover-placeholder-color: var(--ig-gray-500);
 	--ig-flat-button-hover-background: transparent;
@@ -20,7 +20,7 @@ igc-input {
 }
 
 igc-input::part(input) {
-	@include type-style('caption') {
+	@include type-style('body-2') {
 		margin: 0;
 	}
 }
@@ -29,7 +29,6 @@ igc-input::part(container) {
 	border-inline: 0;
 	border-block-start: 0;
 	border-block-end: rem(1px) solid light-dark(var(--ig-gray-200), var(--ig-gray-300));
-
 	border-radius: 0;
 	padding-inline: rem(16px);
 

src/components/DocsSubHeader/DocsSubHeader.astro

@@ -110,7 +110,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
 
         <div class="igd-logo">
             <Fragment set:html={logoRaw} />
-            <h1 class="ig-typography__body-2">{logoText}</h1>
+            <h1>{logoText}</h1>
         </div>
 
         <div class="igd-docs-subheader__content">
@@ -119,7 +119,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
 
             <!-- Package selector (optional) -->
             {packages && packages.length > 0 && (
-                <igc-select id="package-select" class="igd-package-select" outlined value={selectedPackage} aria-label={packageLabel}>
+                <igc-select distance="17" placement="bottom-end" id="package-select" class="igd-package-select" outlined value={selectedPackage} aria-label={packageLabel}>
                     {platformIcon && <igc-icon name={platformIcon} collection="docs" slot="prefix" aria-hidden="true"></igc-icon>}
                     {packages.map((p) => (
                             <igc-select-item value={p}>{p}</igc-select-item>
@@ -129,7 +129,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
 
             <!-- Version selector (optional) -->
             {versions && versions.length > 0 && (
-                <igc-select class="igd-version-select" id="version-select" outlined value={selectedVersion} aria-label={versionLabel}>
+                <igc-select distance="17" class="igd-version-select" id="version-select" outlined value={selectedVersion} aria-label={versionLabel}>
                     {versions.map((v) => (
                             <igc-select-item value={v}>{v}</igc-select-item>
                     ))}
@@ -150,15 +150,16 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                 </igc-icon-button>
             )}
 
-            <!-- Hamburger — visible only when the sidebar is hidden (tablet + mobile) -->
+            <!-- Sidebar toggle — visible only when the sidebar is hidden (tablet + mobile) -->
             <igc-icon-button
                 class="subheader-sidebar-toggle"
                 variant="flat"
                 data-sidebar-toggle
                 aria-label="Toggle sidebar navigation"
                 aria-expanded="false"
                 title="Toggle sidebar">
-                <igc-icon name="hamburger-menu" collection="docs" aria-hidden="true"></igc-icon>
+                <igc-icon name="dropdown-indicator-bold" collection="docs" class="toggle-icon toggle-icon--dropdown" aria-hidden="true"></igc-icon>
+                <igc-icon name="hamburger-menu" collection="docs" class="toggle-icon toggle-icon--hamburger" aria-hidden="true"></igc-icon>
             </igc-icon-button>
 
             <!-- TODO WHY WE NEED THIS? -->
@@ -213,6 +214,14 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                         document.documentElement.setAttribute('data-theme', next);
                         const key = themeBtn.dataset.themeKey || 'docs-theme';
                         try { localStorage.setItem(key, next); } catch (_) {}
+
+                        // Force WebKit to repaint the document scrollbar so
+                        // ::-webkit-scrollbar-* styles pick up the new data-theme.
+                        const html = document.documentElement;
+                        const saved = html.style.overflow;
+                        html.style.overflow = 'hidden';
+                        html.offsetHeight; // trigger reflow
+                        html.style.overflow = saved;
                     });
                 }
 
@@ -221,7 +230,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                 if (globalNav) {
                     const observer = new IntersectionObserver(
                         ([entry]) => {
-                            this.classList.toggle('docs-subheader--pinned', !entry.isIntersecting);
+                            this.classList.toggle('igd-docs-subheader--pinned', !entry.isIntersecting);
                         },
                         { threshold: 0 }
                     );
@@ -231,7 +240,7 @@ const crumbs = sidebarCrumbs.length > 0 ? sidebarCrumbs : (pageTitle ? [pageTitl
                     // The observer fires mid-transition (GlobalNavBar briefly clipped)
                     // and would leave --pinned set when the new page loads at scroll=0.
                     document.addEventListener('astro:before-swap', () => {
-                        this.classList.remove('docs-subheader--pinned');
+                        this.classList.remove('igd-docs-subheader--pinned');
                     });
                 }
             }