Cleanup Typography + utilize new Typography system from Unicorn UI

src/ui/app.css

@@ -2,58 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors 
  */
-:root {
-	/* Typography | vars */
-	--mdc-typography-font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-
-	/* body2 */
-	--mdc-typography-body2-font-style: normal;
-	--mdc-typography-body2-font-size: 1em;
-
-	/* body3 */
-	--mdc-typography-body3-font-style: normal;
-	--mdc-typography-body3-font-weight: 400;
-	--mdc-typography-body3-font-size: 0.875em;
-	--mdc-typography-body3-line-height: 143%;
-	--mdc-typography-body3-letter-spacing: 0.17px;
-
-	/* th */
-	--mdc-typography-th-font-style: normal;
-	--mdc-typography-th-font-weight: 500;
-	--mdc-typography-th-font-size: 0.875em;
-	--mdc-typography-th-line-height: 24px;
-	--mdc-typography-th-letter-spacing: 0.17px;
-
-	/* overline */
-	--mdc-typography-overline-font-weight: 400;
-
-	font-family: var(--mdc-typography-font-family);
-}
-
-/* temporary addition of !important while theme updates are in flux */
-
-.mdc-typography--body2,
-.mdc-typography--caption {
-	color: var(--mdc-theme-text-secondary-on-light) !important;
-}
-
-.mdc-typography--body3 {
-	font-style: var(--mdc-typography-body3-font-style);
-	font-weight: var(--mdc-typography-body3-font-weight);
-	font-size: var(--mdc-typography-body3-font-size);
-	line-height: var(--mdc-typography-body3-line-height);
-	letter-spacing: var(--mdc-typography-body3-letter-spacing);
-}
-
-.mdc-typography--th {
-	font-style: var(--mdc-typography-th-font-style);
-	font-weight: var(--mdc-typography-th-font-weight);
-	font-size: var(--mdc-typography-th-font-size);
-	line-height: var(--mdc-typography-th-line-height);
-	letter-spacing: var(--mdc-typography-th-letter-spacing);
-	color: var(--mdc-theme-text-primary-on-light) !important;
-}
 
 *,
 ::before,
@@ -67,6 +15,11 @@ body {
 	padding: 0;
 }
 
+/* https://github.com/sveltejs/kit/discussions/7585 */
+body > div {
+	display: contents;
+}
+
 .card {
 	background-color: var(--mdc-theme-surface);
 }

src/ui/lib/components/header.svelte

@@ -4,6 +4,7 @@
  -->
 <script>
 	import { clusterStore } from '$lib/store';
+	import { Typography } from '@defense-unicorns/unicorn-ui';
 	import logo from '@images/zarf-logo.png';
 	import Icon from './icon.svelte';
 	import ThemeToggle from './theme-toggle.svelte';
@@ -12,11 +13,11 @@
 <header class="header mdc-elevation--z8">
 	<div class="header-start">
 		<a href="/"><img alt="Zarf logo" id="logo" src={logo} width="100" /></a>
-		<div id="cluster-selector">
+		<Typography variant="body1" id="cluster-selector">
 			{#if $clusterStore}
 				> {$clusterStore.distro}
 			{/if}
-		</div>
+		</Typography>
 	</div>
 
 	<div class="header-end">

src/ui/lib/components/hero.svelte

@@ -11,8 +11,7 @@
 <style>
 	.hero {
 		position: relative;
-		width: 100vw;
-		height: 100vh;
+		height: calc(100vh - 8rem);
 		display: flex;
 		justify-content: center;
 		align-items: center;

src/ui/lib/components/index.ts

@@ -2,12 +2,10 @@
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors
 
 import AccordionGroup from './accordion-group.svelte';
-import Container from './container.svelte';
 import Divider from './divider.svelte';
 import Header from './header.svelte';
 import Hero from './hero.svelte';
 import Icon from './icon.svelte';
-import Modal from './modal.svelte';
 import PackageComponentAccordion from './package-component-accordion.svelte';
 import PackageDetailsCard from './package-details-card.svelte';
 import Spinner from './spinner.svelte';
@@ -16,12 +14,10 @@ import YamlCode from './yaml-code.svelte';
 
 export {
 	AccordionGroup,
-	Container,
 	Divider,
 	Header,
 	Hero,
 	Icon,
-	Modal,
 	PackageComponentAccordion,
 	PackageDetailsCard,
 	Spinner,

src/ui/lib/typography.ts

@@ -0,0 +1,101 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2021-Present The Zarf Authors
+
+import type { ThemeTypography } from '@ui';
+import { UUI_TYPOGRAPHY } from '@ui';
+
+// custom typography from figma only for Zarf UI
+const extra = {
+	body3: {
+		fontWeight: '400',
+		fontSize: '14px',
+		lineHeight: '143%',
+		fontStyle: 'normal',
+		letterSpacing: '.17px',
+	},
+	th: {
+		fontStyle: 'normal',
+		fontWeight: '500',
+		fontSize: '0.875em',
+		lineHeight: '24px',
+		letterSpacing: '0.17px',
+	}
+};
+
+export const ZarfTypography: ThemeTypography = {
+	...UUI_TYPOGRAPHY,
+	...extra,
+	// custom typography from figma
+	body1: {
+		fontSize: '16px',
+		fontWeight: '400',
+		lineHeight: '120%',
+		letterSpacing: '0.15px'
+	},
+	body2: {
+		fontSize: '14px',
+		fontWeight: '400',
+		lineHeight: '120%',
+		letterSpacing: '0.17px'
+	},
+	subtitle1: {
+		fontSize: '16px',
+		fontWeight: '500',
+		lineHeight: '150%',
+		letterSpacing: '0.15px'
+	},
+	subtitle2: {
+		fontSize: '14px',
+		fontWeight: '500',
+		lineHeight: '140%',
+		letterSpacing: '0.1px'
+	},
+	caption: {
+		fontSize: '12px',
+		fontWeight: '400',
+		lineHeight: '166%',
+		letterSpacing: '0.4px'
+	},
+	overline: {
+		fontSize: '12px',
+		fontWeight: '400',
+		lineHeight: '266%',
+		letterSpacing: '1px',
+		textTransform: 'uppercase'
+	},
+	h1: {
+		fontSize: '96px',
+		fontWeight: '300',
+		lineHeight: '116.7%',
+		letterSpacing: '-1.5px'
+	},
+	h2: {
+		fontSize: '60px',
+		fontWeight: '300',
+		lineHeight: '120%',
+		letterSpacing: '-0.5px'
+	},
+	h3: {
+		fontSize: '48px',
+		fontWeight: '400',
+		lineHeight: '116.7%',
+		letterSpacing: '-0.25px'
+	},
+	h4: {
+		fontSize: '34px',
+		fontWeight: '400',
+		lineHeight: '123.5%',
+		letterSpacing: '0.25px'
+	},
+	h5: {
+		fontSize: '24px',
+		fontWeight: '500',
+		lineHeight: '133.4%'
+	},
+	h6: {
+		fontSize: '20px',
+		fontWeight: '400',
+		lineHeight: '160%',
+		letterSpacing: '0.15px'
+	}
+};

src/ui/routes/+layout.svelte

@@ -12,6 +12,7 @@
 	import 'material-symbols/';
 	import { Theme } from '@ui';
 	import { ZarfPalettes } from '$lib/palette';
+	import { ZarfTypography } from '$lib/typography';
 	import { themeStore } from '$lib/store';
 
 	function getClusterSummary() {
@@ -32,7 +33,7 @@
 
 <Header />
 
-<Theme {theme} palettes={ZarfPalettes}>
+<Theme {theme} palettes={ZarfPalettes} typography={ZarfTypography}>
 	<main class="mdc-typography">
 		<slot />
 	</main>

src/ui/routes/auth/+page.svelte

@@ -7,6 +7,7 @@
 	import { page } from '$app/stores';
 	import { Auth } from '$lib/api';
 	import { Hero } from '$lib/components';
+	import { Typography } from '@ui';
 	import sadDay from '@images/sadness.png';
 
 	let authFailure = false;
@@ -27,11 +28,9 @@
 	<Hero>
 		<img src={sadDay} alt="Sadness" id="sadness" width="40%" />
 
-		<div class="hero-text">
-			<h1 class="hero-title">Could not authenticate!</h1>
-			<h2 class="hero-subtitle">
-				Please make sure you are using the complete link to connect provided by Zarf.
-			</h2>
-		</div>
+		<Typography variant="h5">Could not authenticate!</Typography>
+		<Typography variant="body2">
+			Please make sure you are using the complete link to connect provided by Zarf.
+		</Typography>
 	</Hero>
 {/if}

src/ui/routes/initialize/+layout.svelte

@@ -55,7 +55,7 @@
 	{:else if status == LoadingStatus.Error}
 		<!-- replace w/ error dialog -->
 		<div class="center">
-			<Typography variant="h1">Package Not Found</Typography>
+			<Typography variant="h4">Package Not Found</Typography>
 			<Typography variant="body2">
 				Make sure the following package is in the current working directory:
 			</Typography>

src/ui/routes/initialize/finished/+page.svelte

@@ -3,16 +3,20 @@
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors
  -->
 <script lang="ts">
-	import { Modal } from '$lib/components';
+	import { Dialog, Typography } from '@ui';
 	import zarfLogo from '@images/zarf-bubbles-right.png';
 </script>
 
-<Modal open={true}>
-	<div style="text-align:center;">
+<svelte:head>
+	<title>Finished</title>
+</svelte:head>
+
+<Dialog open={true}>
+	<div slot="content" style="text-align:center;margin: 0.5rem 2rem 1rem 2rem;">
 		<img src={zarfLogo} alt="zarf" width="60px" />
-		<h3 style="font-size: 20px; color: #000000DE;">Package Successfully Deployed</h3>
-		<p style="color: gray; font-size: 14px;">
+		<Typography style="margin: 1rem 0;" variant="h6">Package Successfully Deployed</Typography>
+		<Typography variant="body2">
 			You will be redirected to the deployment details page
-		</p>
+		</Typography>
 	</div>
-</Modal>
+</Dialog>