diff --git a/src/ui/app.css b/src/ui/app.css index 4ca9deb310..4694277bd4 100644 --- a/src/ui/app.css +++ b/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); } diff --git a/src/ui/lib/components/container.svelte b/src/ui/lib/components/container.svelte deleted file mode 100644 index 90a614881c..0000000000 --- a/src/ui/lib/components/container.svelte +++ /dev/null @@ -1,25 +0,0 @@ - -
- -
- - diff --git a/src/ui/lib/components/header.svelte b/src/ui/lib/components/header.svelte index e3f6d0383e..0becf1271b 100644 --- a/src/ui/lib/components/header.svelte +++ b/src/ui/lib/components/header.svelte @@ -4,6 +4,7 @@ --> - -
-
- -
-
- - diff --git a/src/ui/lib/typography.ts b/src/ui/lib/typography.ts new file mode 100644 index 0000000000..07f139c05e --- /dev/null +++ b/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' + } +}; diff --git a/src/ui/routes/+layout.svelte b/src/ui/routes/+layout.svelte index 82e19d5c5f..69ba25db63 100644 --- a/src/ui/routes/+layout.svelte +++ b/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 @@
- +
diff --git a/src/ui/routes/auth/+page.svelte b/src/ui/routes/auth/+page.svelte index 682e89318d..4e518528b2 100644 --- a/src/ui/routes/auth/+page.svelte +++ b/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 @@ Sadness -
-

Could not authenticate!

-

- Please make sure you are using the complete link to connect provided by Zarf. -

-
+ Could not authenticate! + + Please make sure you are using the complete link to connect provided by Zarf. + {/if} diff --git a/src/ui/routes/initialize/+layout.svelte b/src/ui/routes/initialize/+layout.svelte index a64c51145f..f299203648 100644 --- a/src/ui/routes/initialize/+layout.svelte +++ b/src/ui/routes/initialize/+layout.svelte @@ -55,7 +55,7 @@ {:else if status == LoadingStatus.Error}
- Package Not Found + Package Not Found Make sure the following package is in the current working directory: diff --git a/src/ui/routes/initialize/finished/+page.svelte b/src/ui/routes/initialize/finished/+page.svelte index de013fa99c..c6e2ff27de 100644 --- a/src/ui/routes/initialize/finished/+page.svelte +++ b/src/ui/routes/initialize/finished/+page.svelte @@ -3,16 +3,20 @@ // SPDX-FileCopyrightText: 2021-Present The Zarf Authors --> - -
+ + Finished + + + +
zarf -

Package Successfully Deployed

-

+ Package Successfully Deployed + You will be redirected to the deployment details page -

+
- + diff --git a/src/ui/routes/packages/+page.svelte b/src/ui/routes/packages/+page.svelte index ac4ebd4004..2ca353139e 100644 --- a/src/ui/routes/packages/+page.svelte +++ b/src/ui/routes/packages/+page.svelte @@ -8,13 +8,17 @@ import { Button, Typography, ButtonIcon } from '@ui'; + + Packages + + {#await Packages.getDeployedPackages()} {:then packages} {#if packages.length < 1}
-

No deployed packages found 🙁

+ No deployed packages found 🙁