Skip to content

Commit bd1a934

Browse files
SamVerschuerenSamVerschueren
authored
Merge branch 'main' into joan/fix-changelogs
2 parents bdd736b + 6d01620 commit bd1a934

File tree

5 files changed

+84
-33
lines changed

5 files changed

+84
-33
lines changed

‎packages/astro/src/default/styles/markdown.css

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -136,38 +136,38 @@
136136
}
137137

138138
.markdown-content .callout-tip {
139-
--tk-elements-markdown-callouts-backgroundColor: var(--tk-background-tip);
140-
--tk-elements-markdown-callouts-borderColor: var(--tk-border-tip);
141-
--tk-elements-markdown-callouts-titleTextColor: var(--tk-text-tip);
142-
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-markdown-callouts-titleTextColor);
139+
--tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-tip-backgroundColor);
140+
--tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-tip-borderColor);
141+
--tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-tip-titleTextColor);
142+
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-tip-iconColor);
143143
}
144144

145145
.markdown-content .callout-info {
146-
--tk-elements-markdown-callouts-backgroundColor: var(--tk-background-info);
147-
--tk-elements-markdown-callouts-borderColor: var(--tk-border-info);
148-
--tk-elements-markdown-callouts-titleTextColor: var(--tk-text-info);
149-
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-markdown-callouts-titleTextColor);
146+
--tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-info-backgroundColor);
147+
--tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-info-borderColor);
148+
--tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-info-titleTextColor);
149+
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-info-iconColor);
150150
}
151151

152152
.markdown-content .callout-warn {
153-
--tk-elements-markdown-callouts-backgroundColor: var(--tk-background-warning);
154-
--tk-elements-markdown-callouts-borderColor: var(--tk-border-warning);
155-
--tk-elements-markdown-callouts-titleTextColor: var(--tk-text-warning);
156-
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-markdown-callouts-titleTextColor);
153+
--tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-warning-backgroundColor);
154+
--tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-warning-borderColor);
155+
--tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-warning-titleTextColor);
156+
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-warning-iconColor);
157157
}
158158

159159
.markdown-content .callout-danger {
160-
--tk-elements-markdown-callouts-backgroundColor: var(--tk-background-negative);
161-
--tk-elements-markdown-callouts-borderColor: var(--tk-border-negative);
162-
--tk-elements-markdown-callouts-titleTextColor: var(--tk-text-negative);
163-
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-markdown-callouts-titleTextColor);
160+
--tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-danger-backgroundColor);
161+
--tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-danger-borderColor);
162+
--tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-danger-titleTextColor);
163+
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-danger-iconColor);
164164
}
165165

166166
.markdown-content .callout-success {
167-
--tk-elements-markdown-callouts-backgroundColor: var(--tk-background-positive);
168-
--tk-elements-markdown-callouts-borderColor: var(--tk-border-positive);
169-
--tk-elements-markdown-callouts-titleTextColor: var(--tk-text-positive);
170-
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-markdown-callouts-titleTextColor);
167+
--tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-success-backgroundColor);
168+
--tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-success-borderColor);
169+
--tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-success-titleTextColor);
170+
--tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-success-iconColor);
171171
}
172172

173173
.markdown-content .callout a:has(> code):not(:hover) {

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

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,13 +273,20 @@
273273
--tk-elements-breadcrumbs-dropdown-textColor: var(--tk-elements-app-textColor);
274274
--tk-elements-breadcrumbs-dropdown-textColorHover: var(--tk-text-accent);
275275
--tk-elements-breadcrumbs-dropdown-accordionTextColor: var(--tk-elements-breadcrumbs-dropdown-textColor);
276+
--tk-elements-breadcrumbs-dropdown-accordionTextColorSelected: var(
277+
--tk-elements-breadcrumbs-dropdown-accordionTextColor
278+
);
276279
--tk-elements-breadcrumbs-dropdown-accordionTextColorHover: var(--tk-text-active);
277280
--tk-elements-breadcrumbs-dropdown-accordionIconColor: var(--tk-text-disabled);
281+
--tk-elements-breadcrumbs-dropdown-accordionIconColorSelected: var(
282+
--tk-elements-breadcrumbs-dropdown-accordionIconColor
283+
);
278284
--tk-elements-breadcrumbs-dropdown-accordionIconColorHover: var(--tk-text-primary);
279285
--tk-elements-breadcrumbs-dropdown-lessonBackgroundColor: var(--tk-elements-breadcrumbs-dropdown-backgroundColor);
280286
--tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected: var(--tk-background-secondary);
281287
--tk-elements-breadcrumbs-dropdown-lessonTextColor: var(--tk-elements-breadcrumbs-dropdown-textColor);
282-
--tk-elements-breadcrumbs-dropdown-lessonTextColorHover: var(--tk-elements-breadcrumbs-dropdon-textColorHover);
288+
--tk-elements-breadcrumbs-dropdown-lessonTextColorSelected: var(--tk-elements-breadcrumbs-dropdown-lessonTextColor);
289+
--tk-elements-breadcrumbs-dropdown-lessonTextColorHover: var(--tk-elements-breadcrumbs-dropdown-textColorHover);
283290

284291
/* Terminal */
285292
--tk-elements-terminal-backgroundColor: var(--tk-background-active-secondary);
@@ -323,4 +330,34 @@
323330
/* Status > Active */
324331
--tk-elements-status-active-textColor: var(--tk-text-primary);
325332
--tk-elements-status-active-iconColor: var(--tk-elements-status-active-textColor);
333+
334+
/* Callouts > Tip */
335+
--tk-elements-callouts-tip-backgroundColor: var(--tk-background-tip);
336+
--tk-elements-callouts-tip-borderColor: var(--tk-border-tip);
337+
--tk-elements-callouts-tip-titleTextColor: var(--tk-text-tip);
338+
--tk-elements-callouts-tip-iconColor: var(--tk-elements-callouts-tip-titleTextColor);
339+
340+
/* Callouts > Info */
341+
--tk-elements-callouts-info-backgroundColor: var(--tk-background-info);
342+
--tk-elements-callouts-info-borderColor: var(--tk-border-info);
343+
--tk-elements-callouts-info-titleTextColor: var(--tk-text-info);
344+
--tk-elements-callouts-info-iconColor: var(--tk-elements-callouts-info-titleTextColor);
345+
346+
/* Callouts > Warning */
347+
--tk-elements-callouts-warning-backgroundColor: var(--tk-background-warning);
348+
--tk-elements-callouts-warning-borderColor: var(--tk-border-warning);
349+
--tk-elements-callouts-warning-titleTextColor: var(--tk-text-warning);
350+
--tk-elements-callouts-warning-iconColor: var(--tk-elements-callouts-warning-titleTextColor);
351+
352+
/* Callouts > Danger */
353+
--tk-elements-callouts-danger-backgroundColor: var(--tk-background-negative);
354+
--tk-elements-callouts-danger-borderColor: var(--tk-border-negative);
355+
--tk-elements-callouts-danger-titleTextColor: var(--tk-text-negative);
356+
--tk-elements-callouts-danger-iconColor: var(--tk-elements-callouts-danger-titleTextColor);
357+
358+
/* Callouts > Success */
359+
--tk-elements-callouts-success-backgroundColor: var(--tk-background-positive);
360+
--tk-elements-callouts-success-borderColor: var(--tk-border-positive);
361+
--tk-elements-callouts-success-titleTextColor: var(--tk-text-positive);
362+
--tk-elements-callouts-success-iconColor: var(--tk-elements-callouts-success-titleTextColor);
326363
}

‎packages/astro/src/theme.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,12 +275,15 @@ export const theme: ConfigBase['theme'] = {
275275
textColor: 'var(--tk-elements-breadcrumbs-dropdown-textColor)',
276276
textColorHover: 'var(--tk-elements-breadcrumbs-dropdown-textColorHover)',
277277
accordionTextColor: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColor)',
278+
accordionTextColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColorSelected)',
278279
accordionTextColorHover: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColorHover)',
279280
accordionIconColor: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColor)',
281+
accordionIconColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColorSelected)',
280282
accordionIconColorHover: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColorHover)',
281283
lessonBackgroundColor: 'var(--tk-elements-breadcrumbs-dropdown-lessonBackgroundColor)',
282284
lessonBackgroundColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected)',
283285
lessonTextColor: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColor)',
286+
lessonTextColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColorSelected)',
284287
lessonTextColorHover: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColorHover)',
285288
},
286289
},

‎packages/components/react/src/Nav.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -109,14 +109,12 @@ function renderParts(navList: NavList, currentLesson: Lesson) {
109109
navStyles.AccordionTrigger,
110110
'flex items-center gap-1 w-full hover:text-primary-700',
111111
{
112-
'font-semibold': isPartActive,
112+
[`font-semibold ${navStyles.AccordionTriggerActive}`]: isPartActive,
113113
},
114114
)}
115115
>
116-
<span
117-
className={`${navStyles.AccordionTriggerIcon} i-ph-caret-right-bold scale-80 text-tk-elements-breadcrumbs-dropdown-accordionToggleIconColor`}
118-
></span>
119-
<span className={navStyles.AccordionTriggerText}>{`Part ${partIndex + 1}: ${part.title}`}</span>
116+
<span className={`${navStyles.AccordionTriggerIcon} i-ph-caret-right-bold scale-80`}></span>
117+
<span>{`Part ${partIndex + 1}: ${part.title}`}</span>
120118
</Accordion.Trigger>
121119
<Accordion.Content className={navStyles.AccordionContent}>
122120
{renderChapters(currentLesson, part, isPartActive)}
@@ -150,16 +148,20 @@ function renderChapters(currentLesson: Lesson, part: NavItem, isPartActive: bool
150148
navStyles.AccordionTrigger,
151149
'flex items-center gap-1 w-full hover:text-primary-700',
152150
{
153-
'font-semibold': isChapterActive,
151+
[`font-semibold ${navStyles.AccordionTriggerActive}`]: isChapterActive,
154152
},
155153
)}
156154
>
157155
<span
158-
className={`${navStyles.AccordionTriggerIcon} i-ph-caret-right-bold scale-80 text-gray-300`}
156+
className={classNames(
157+
navStyles.AccordionTriggerIcon,
158+
'i-ph-caret-right-bold scale-80 text-gray-300',
159+
{
160+
[navStyles.AccordionTriggerActive]: isChapterActive,
161+
},
162+
)}
159163
></span>
160-
<span className="text-tk-elements-breadcrumbs-dropdown-accordionTextColor hover:text-tk-elements-breadcrumbs-dropdown-accordionTextColorHover">
161-
{chapter.title}
162-
</span>
164+
<span>{chapter.title}</span>
163165
</Accordion.Trigger>
164166
<Accordion.Content className={navStyles.AccordionContent}>
165167
{renderLessons(currentLesson, chapter, isPartActive, isChapterActive)}
@@ -183,10 +185,11 @@ function renderLessons(currentLesson: Lesson, chapter: NavItem, isPartActive: bo
183185
<li key={lessonIndex} className="mr-3">
184186
<a
185187
className={classNames(
186-
'w-full inline-block border border-transparent pr-3 hover:text-tk-elements-breadcrumbs-dropdown-textColorHover px-3 py-1 rounded-1',
188+
'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',
187189
{
188190
'bg-tk-elements-breadcrumbs-dropdown-lessonBackgroundColor': !isActiveLesson,
189-
'font-semibold bg-tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected': isActiveLesson,
191+
'font-semibold text-tk-elements-breadcrumbs-dropdown-lessonTextColorSelected bg-tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected':
192+
isActiveLesson,
190193
},
191194
)}
192195
href={lesson.href}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
--at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColor;
77
}
88

9+
.AccordionTrigger.AccordionTriggerActive {
10+
--at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColorSelected;
11+
}
12+
913
.AccordionTrigger:hover {
1014
--at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColorHover;
1115
}
@@ -14,6 +18,10 @@
1418
--at-apply: transition-color duration-100 text-tk-elements-breadcrumbs-dropdown-accordionIconColor;
1519
}
1620

21+
.AccordionTrigger.AccordionTriggerActive .AccordionTriggerIcon {
22+
--at-apply: text-tk-elements-breadcrumbs-dropdown-accordionIconColorSelected;
23+
}
24+
1725
.AccordionTrigger:hover .AccordionTriggerIcon {
1826
--at-apply: text-tk-elements-breadcrumbs-dropdown-accordionIconColorHover;
1927
}

0 commit comments

Comments
 (0)