@primer/doctocat-nextjs 0.0.0-20251124214113 → 0.0.0-20251127163634

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @primer/doctocat-nextjs
 
-## 0.0.0-20251124214113
+## 0.0.0-20251127163634
 
 ### Patch Changes
 
 - Fake entry to force publishing
 
-## 0.0.0-20251124214111
+## 0.0.0-20251127163632
 
 ### Patch Changes
 

package/components/content/dos-and-donts/DosAndDonts.module.css

@@ -39,6 +39,10 @@
   color: var(--base-color-scale-white-0);
 }
 
+.header {
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+}
+
 .content {
   display: flex;
   flex-direction: column;
@@ -55,6 +59,6 @@
 
 .indentedContent {
   margin: 0;
-  border-left: 4px solid;
+  border-left: 4px solid var(--brand-color-border-default);
   padding-left: 1rem;
 }

package/components/content/dos-and-donts/DosAndDonts.tsx

@@ -38,12 +38,12 @@ type DoDontBaseProps = {
 export function DoDontBase({children, title, indented, className, ...rest}: React.PropsWithChildren<DoDontBaseProps>) {
   return (
     <div className={clsx(`exclude-from-prose`, styles.doDontBase, className)} {...rest}>
-      <div className={styles.header} style={{color: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))'}}>
+      <div className={styles.header}>
         <span className={styles.headerText}>{title}</span>
       </div>
       <div className={styles.content}>
         {indented ? (
-          <blockquote className={styles.indentedContent} style={{borderLeftColor: 'var(--brand-color-border-default)'}}>
+          <blockquote className={styles.indentedContent}>
             {children}
           </blockquote>
         ) : (

package/components/layout/sidebar/Sidebar.module.css

@@ -19,6 +19,14 @@
   font-size: var(--brand-text-size-100);
 }
 
+.NavListGroup {
+  margin-bottom: var(--base-size-24);
+}
+
+.NavListItemCapitalize {
+  text-transform: capitalize;
+}
+
 .NavList__Container li a,
 .NavList__Container li button {
   font-size: var(--brand-text-size-200);

package/components/layout/sidebar/Sidebar.tsx

@@ -77,7 +77,7 @@ export function Sidebar({pageMap}: SidebarProps) {
           }
 
           return (
-            <NavList.Group title={subNavName} key={item.name} style={{marginBottom: 'var(--base-size-24)'}}>
+            <NavList.Group title={subNavName} key={item.name} className={styles.NavListGroup}>
               <NavList.GroupHeading as="h3">
                 <NextLink href={item.route}>{subNavName}</NextLink>
               </NavList.GroupHeading>
@@ -142,9 +142,8 @@ export function Sidebar({pageMap}: SidebarProps) {
                         as={NextLink}
                         key={landingPageItem.route}
                         href={landingPageItem.route}
-                         style={{textTransform: 'capitalize'}}
                         aria-current={isCurrentOrChild ? 'page' : undefined}
-                        className={styles.NavListItem}
+                        className={`${styles.NavListItem} ${styles.NavListItemCapitalize}`}
                       >
                         {landingPageItem.frontMatter?.title || item.name}
                       </NavList.Item>
@@ -155,7 +154,7 @@ export function Sidebar({pageMap}: SidebarProps) {
           )
         })}
         {sidebarLinks.length > 0 && (
-          <NavList.Group title="" style={{marginBottom: 'var(--base-size-24)'}}>
+          <NavList.Group title="" className={styles.NavListGroup}>
             {sidebarLinks.map(link => {
               return (
                 <NavList.Item

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.0-20251124214113",
+  "version": "0.0.0-20251127163634",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",