fix(theme): use correct tokens for the breadcrumbs (#88)

Author: SamVerschueren

packages/astro/src/default/styles/variables.css

@@ -273,13 +273,20 @@
   --tk-elements-breadcrumbs-dropdown-textColor: var(--tk-elements-app-textColor);
   --tk-elements-breadcrumbs-dropdown-textColorHover: var(--tk-text-accent);
   --tk-elements-breadcrumbs-dropdown-accordionTextColor: var(--tk-elements-breadcrumbs-dropdown-textColor);
+  --tk-elements-breadcrumbs-dropdown-accordionTextColorSelected: var(
+    --tk-elements-breadcrumbs-dropdown-accordionTextColor
+  );
   --tk-elements-breadcrumbs-dropdown-accordionTextColorHover: var(--tk-text-active);
   --tk-elements-breadcrumbs-dropdown-accordionIconColor: var(--tk-text-disabled);
+  --tk-elements-breadcrumbs-dropdown-accordionIconColorSelected: var(
+    --tk-elements-breadcrumbs-dropdown-accordionIconColor
+  );
   --tk-elements-breadcrumbs-dropdown-accordionIconColorHover: var(--tk-text-primary);
   --tk-elements-breadcrumbs-dropdown-lessonBackgroundColor: var(--tk-elements-breadcrumbs-dropdown-backgroundColor);
   --tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected: var(--tk-background-secondary);
   --tk-elements-breadcrumbs-dropdown-lessonTextColor: var(--tk-elements-breadcrumbs-dropdown-textColor);
-  --tk-elements-breadcrumbs-dropdown-lessonTextColorHover: var(--tk-elements-breadcrumbs-dropdon-textColorHover);
+  --tk-elements-breadcrumbs-dropdown-lessonTextColorSelected: var(--tk-elements-breadcrumbs-dropdown-lessonTextColor);
+  --tk-elements-breadcrumbs-dropdown-lessonTextColorHover: var(--tk-elements-breadcrumbs-dropdown-textColorHover);
 
   /* Terminal */
   --tk-elements-terminal-backgroundColor: var(--tk-background-active-secondary);

packages/astro/src/theme.ts

@@ -275,12 +275,15 @@ export const theme: ConfigBase['theme'] = {
             textColor: 'var(--tk-elements-breadcrumbs-dropdown-textColor)',
             textColorHover: 'var(--tk-elements-breadcrumbs-dropdown-textColorHover)',
             accordionTextColor: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColor)',
+            accordionTextColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColorSelected)',
             accordionTextColorHover: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColorHover)',
             accordionIconColor: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColor)',
+            accordionIconColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColorSelected)',
             accordionIconColorHover: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColorHover)',
             lessonBackgroundColor: 'var(--tk-elements-breadcrumbs-dropdown-lessonBackgroundColor)',
             lessonBackgroundColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected)',
             lessonTextColor: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColor)',
+            lessonTextColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColorSelected)',
             lessonTextColorHover: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColorHover)',
           },
         },

packages/components/react/src/Nav.tsx

@@ -109,14 +109,12 @@ function renderParts(navList: NavList, currentLesson: Lesson) {
                     navStyles.AccordionTrigger,
                     'flex items-center gap-1 w-full hover:text-primary-700',
                     {
-                      'font-semibold': isPartActive,
+                      [`font-semibold ${navStyles.AccordionTriggerActive}`]: isPartActive,
                     },
                   )}
                 >
-                  <span
-                    className={`${navStyles.AccordionTriggerIcon} i-ph-caret-right-bold scale-80 text-tk-elements-breadcrumbs-dropdown-accordionToggleIconColor`}
-                  ></span>
-                  <span className={navStyles.AccordionTriggerText}>{`Part ${partIndex + 1}: ${part.title}`}</span>
+                  <span className={`${navStyles.AccordionTriggerIcon} i-ph-caret-right-bold scale-80`}></span>
+                  <span>{`Part ${partIndex + 1}: ${part.title}`}</span>
                 </Accordion.Trigger>
                 <Accordion.Content className={navStyles.AccordionContent}>
                   {renderChapters(currentLesson, part, isPartActive)}
@@ -150,16 +148,20 @@ function renderChapters(currentLesson: Lesson, part: NavItem, isPartActive: bool
                     navStyles.AccordionTrigger,
                     'flex items-center gap-1 w-full hover:text-primary-700',
                     {
-                      'font-semibold': isChapterActive,
+                      [`font-semibold ${navStyles.AccordionTriggerActive}`]: isChapterActive,
                     },
                   )}
                 >
                   <span
-                    className={`${navStyles.AccordionTriggerIcon} i-ph-caret-right-bold scale-80 text-gray-300`}
+                    className={classNames(
+                      navStyles.AccordionTriggerIcon,
+                      'i-ph-caret-right-bold scale-80 text-gray-300',
+                      {
+                        [navStyles.AccordionTriggerActive]: isChapterActive,
+                      },
+                    )}
                   ></span>
-                  <span className="text-tk-elements-breadcrumbs-dropdown-accordionTextColor hover:text-tk-elements-breadcrumbs-dropdown-accordionTextColorHover">
-                    {chapter.title}
-                  </span>
+                  <span>{chapter.title}</span>
                 </Accordion.Trigger>
                 <Accordion.Content className={navStyles.AccordionContent}>
                   {renderLessons(currentLesson, chapter, isPartActive, isChapterActive)}
@@ -183,10 +185,11 @@ function renderLessons(currentLesson: Lesson, chapter: NavItem, isPartActive: bo
           <li key={lessonIndex} className="mr-3">
             <a
               className={classNames(
-                'w-full inline-block border border-transparent pr-3 hover:text-tk-elements-breadcrumbs-dropdown-textColorHover px-3 py-1 rounded-1',
+                'w-full inline-block border border-transparent pr-3 text-tk-elements-breadcrumbs-dropdown-lessonTextColor hover:text-tk-elements-breadcrumbs-dropdown-lessonTextColorHover px-3 py-1 rounded-1',
                 {
                   'bg-tk-elements-breadcrumbs-dropdown-lessonBackgroundColor': !isActiveLesson,
-                  'font-semibold bg-tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected': isActiveLesson,
+                  'font-semibold text-tk-elements-breadcrumbs-dropdown-lessonTextColorSelected bg-tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected':
+                    isActiveLesson,
                 },
               )}
               href={lesson.href}

packages/components/react/src/styles/nav.module.css

@@ -6,6 +6,10 @@
   --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColor;
 }
 
+.AccordionTrigger.AccordionTriggerActive {
+  --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColorSelected;
+}
+
 .AccordionTrigger:hover {
   --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColorHover;
 }
@@ -14,6 +18,10 @@
   --at-apply: transition-color duration-100 text-tk-elements-breadcrumbs-dropdown-accordionIconColor;
 }
 
+.AccordionTrigger.AccordionTriggerActive .AccordionTriggerIcon {
+  --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionIconColorSelected;
+}
+
 .AccordionTrigger:hover .AccordionTriggerIcon {
   --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionIconColorHover;
 }