Tutorial Styling Improvements (withastro#2852)

* Add RTL support to `<Box/>` component * Add RTL support to `<Checklist/>` component * Increase `line-height` of lists with `<kbd/>` * Improve tutorial to-do steps contrast ratio * Add focus outline to Tutorial Tracker Tab * Tweak `line-height` and `<kbd/>` styles * Tweak `<UnitProgressIcon/>` colors * Fix double outline issue in Firefox Co-authored-by: Chris Swithinbank <[email protected]>
rbrishabh · Mar 16, 2023 · cfea387 · cfea387
1 parent 5a63116
commit cfea387
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git a/public/index.css b/public/index.css
@@ -234,8 +234,8 @@ h5 {
 }
 
 p,
-.content ul {
-	line-height: 1.65;
+.content ul, .content ol {
+	line-height: 1.75;
 }
 
 p,
@@ -360,9 +360,9 @@ pre {
 	font-family: var(--font-body);
 	font-size: 0.9375rem;
 	border-radius: 0.25rem;
-	padding: 0.125rem 0.375rem;
+	padding: 0.0625rem 0.375rem;
 	border: 1px solid var(--theme-shade-subtle);
-	box-shadow: 0 3px var(--theme-shade-subtle);
+	box-shadow: 0 2px var(--theme-shade-subtle);
 	background-color: var(--theme-bg-offset);
 	white-space: nowrap;
 }

diff --git a/src/components/Checklist.astro b/src/components/Checklist.astro
@@ -39,7 +39,8 @@ const { key = 'default' } = Astro.props as Props;
 		position: relative;
 		margin: 0 -1rem;
 		border-radius: 0.5rem;
-		padding: 0.5rem 0.5rem 0.5rem 4rem;
+		padding-block: 0.5rem;
+		padding-inline: 4rem 0.5rem;
 		cursor: pointer;
 		/* Compensate for space between checkbox and text. */
 		text-indent: -0.4ch;
@@ -62,7 +63,7 @@ const { key = 'default' } = Astro.props as Props;
 	check-list :global(input[type='checkbox']::after) {
 		content: '✔︎';
 		position: absolute;
-		left: 1rem;
+		inset-inline-start: 1rem;
 		top: 50%;
 		transform: translateY(-50%) translate(3px, -3px);
 		transform-origin: center;

diff --git a/src/components/tutorial/Box.astro b/src/components/tutorial/Box.astro
@@ -18,8 +18,10 @@ const { icon } = Astro.props;
 	}
 
 	.highlight-box {
-		position: relative;
-		padding: 2rem 4rem 2rem 2rem;
+		position: relative; 
+		padding-block: 2rem;
+		padding-inline-start: 2rem;
+		padding-inline-end: 4rem;
 		border: 1px solid var(--theme-shade-subtle);
 		box-shadow: -0.5rem 0.5rem 0 -1px var(--theme-bg), -0.5rem 0.5rem var(--theme-shade-subtle),
 			-1rem 1rem 0 -1px var(--theme-bg), -1rem 1rem var(--theme-shade-subtle);
@@ -32,7 +34,7 @@ const { icon } = Astro.props;
 			content: '';
 			position: absolute;
 			top: 0.5rem;
-			right: 0.5rem;
+			inset-inline-end: 0.5rem;
 			width: 5rem;
 			height: 5rem;
 			background-color: var(--theme-divider);

diff --git a/src/components/tutorial/TutorialNav.astro b/src/components/tutorial/TutorialNav.astro
@@ -106,6 +106,11 @@ const isCurrentUnit = (unit: typeof units[number]) =>
 		font-weight: bold;
 	}
 
+	:global(a:focus unit-progress-icon) {
+		outline: 2px solid var(--theme-accent-secondary);
+		outline-offset: 0.25em;
+	}
+
 	.header-link {
 		border: 0;
 		padding: 0;

diff --git a/src/components/tutorial/UnitProgressIcon.astro b/src/components/tutorial/UnitProgressIcon.astro
@@ -122,6 +122,14 @@ const t = useTranslations(Astro);
 		background-color: var(--theme-bg-offset);
 	}
 
+	:global([aria-selected='true']) .segment:not(.done) {
+		stroke: hsl(var(--color-gray-95));
+	}
+
+	:global(.theme-dark [aria-selected='true']) .segment:not(.done) {
+		stroke: hsl(var(--color-gray-20));
+	}
+
 	.segment {
 		fill: none;
 		stroke: var(--theme-bg-offset);