diff --git a/pkgs/clan-app/fonts.nix b/pkgs/clan-app/fonts.nix index 0e746c53e..2ef42eaee 100644 --- a/pkgs/clan-app/fonts.nix +++ b/pkgs/clan-app/fonts.nix @@ -3,68 +3,39 @@ runCommand, }: let - - archivo = { - # 400 -> Regular - regular = fetchurl { - url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/Archivo-Regular.woff2"; - hash = "sha256-sxWvVJvHnZgKvgvKCmSOz6AQa+G/IFv57YCeY4HyTQo="; - }; - - # 500 -> Medium - medium = fetchurl { - url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/Archivo-Medium.woff2"; - hash = "sha256-FalQLFry4jdHwuMr1zmxyG7UuI1rn1pd2cV8tmJetRs="; - }; - - # 600 -> SemiBold - semiBold = fetchurl { - url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/Archivo-SemiBold.woff2"; - hash = "sha256-XrTdFFUNLIdxwgqJB/sX8Om89XqgF/vCz1cYl7I6QTU="; - }; + geist-regular = fetchurl { + url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/Geist/webfonts/Geist-Regular.woff2"; + hash = "sha256-bQfiUE+DYxYCLRa6WHmlIVNTwv98s4HaClOp9G3tXwo="; }; - - archivoSemi = { - # 400 -> Regular - regular = fetchurl { - url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-Regular.woff2"; - hash = "sha256-3PeB6tMpbYxR9JFyQ+yjpM7bAvZIjcJ4eBiHr9iV5p4="; - }; - - # 500 -> Medium - medium = fetchurl { - url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-Medium.woff2"; - hash = "sha256-IKaY3YhpmjMaIVUpwKRLd6eFiIihBoAP99I/pwmyll8="; - }; - - # 600 -> SemiBold - semiBold = fetchurl { - url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-SemiBold.woff2"; - hash = "sha256-fOE+b+UeTRoj+sDdUWR1pPCZVn0ABy6FEDDmXrOA4LY="; - }; + geist-medium = fetchurl { + url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/Geist/webfonts/Geist-Medium.woff2"; + hash = "sha256-9Tw1DTi/7VIpsDtToLJb/XTZhOhItU9c1P17xPnZ02w="; }; - - commitMono = fetchurl { - url = "https://github.com/eigilnikolajsen/commit-mono/raw/0b3b192f035cdc8d1ea8ffb5463cc23d73d0b89f/src/fonts/fontlab/CommitMonoV143-VF.woff2"; - hash = "sha256-80LKbD8ll+bA/NhLPz7WTTzlvbbQrxnRkNZFpVixzyk="; + geist-semibold = fetchurl { + url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/Geist/webfonts/Geist-SemiBold.woff2"; + hash = "sha256-Dpia8fMSsLE0OFfUqit1jKM0S7t7Zt5LwQROjI8yVJk="; }; - archivoSemi_ttf = fetchurl { - url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/ttf/ArchivoSemiCondensed-Medium.ttf"; - hash = "sha256-Kot1CvKqnXW1VZ7zX2wYZEziSA/l9J0gdfKkSdBxZ0w="; + geist-mono-regular = fetchurl { + url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/GeistMono/webfonts/GeistMono-Regular.woff2"; + hash = "sha256-SKbRHoKeTDBR+9JSXg9h68soGhUyBqGknnVYvq/+4xQ="; + }; + geist-mono-medium = fetchurl { + url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/GeistMono/webfonts/GeistMono-Medium.woff2"; + hash = "sha256-V3lOUKezrGJ3h4WO8XxvBILIxhXzI7SaId5abnA5aQQ="; + }; + geist-mono-semibold = fetchurl { + url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/GeistMono/webfonts/GeistMono-SemiBold.woff2"; + hash = "sha256-MNhO7HLZSBBvE4Fqh2vah2RPbR7jZWBrZq0oXOXbCjo="; }; - in runCommand "" { } '' mkdir -p $out - cp ${archivo.regular} $out/Archivo-Regular.woff2 - cp ${archivo.medium} $out/Archivo-Medium.woff2 - cp ${archivo.semiBold} $out/Archivo-SemiBold.woff2 + cp ${geist-regular} $out/Geist-Regular.woff2 + cp ${geist-medium} $out/Geist-Medium.woff2 + cp ${geist-semibold} $out/Geist-SemiBold.woff2 - cp ${archivoSemi.regular} $out/ArchivoSemiCondensed-Regular.woff2 - cp ${archivoSemi.medium} $out/ArchivoSemiCondensed-Medium.woff2 - cp ${archivoSemi.semiBold} $out/ArchivoSemiCondensed-SemiBold.woff2 - - cp ${commitMono} $out/CommitMonoV143-VF.woff2 - cp ${archivoSemi_ttf} $out/ArchivoSemiCondensed-Medium.ttf + cp ${geist-mono-regular} $out/GeistMono-Regular.woff2 + cp ${geist-mono-medium} $out/GeistMono-Medium.woff2 + cp ${geist-mono-semibold} $out/GeistMono-SemiBold.woff2 '' diff --git a/pkgs/clan-app/ui/src/components/Form/MachineTags.module.css b/pkgs/clan-app/ui/src/components/Form/MachineTags.module.css index bc407ba68..5403af3dc 100644 --- a/pkgs/clan-app/ui/src/components/Form/MachineTags.module.css +++ b/pkgs/clan-app/ui/src/components/Form/MachineTags.module.css @@ -26,7 +26,7 @@ font-size: 0.875rem; font-weight: 500; - font-family: "Archivo", sans-serif; + font-family: "Geist", sans-serif; line-height: 1; &::placeholder { diff --git a/pkgs/clan-app/ui/src/components/Form/TextField.module.css b/pkgs/clan-app/ui/src/components/Form/TextField.module.css index b5b7959bb..6087d5066 100644 --- a/pkgs/clan-app/ui/src/components/Form/TextField.module.css +++ b/pkgs/clan-app/ui/src/components/Form/TextField.module.css @@ -6,7 +6,7 @@ font-size: 0.875rem; font-weight: 500; - font-family: "Archivo", sans-serif; + font-family: "Geist", sans-serif; line-height: 132%; &::placeholder { diff --git a/pkgs/clan-app/ui/src/components/Search/Search.module.css b/pkgs/clan-app/ui/src/components/Search/Search.module.css index deff2bdfe..32830a212 100644 --- a/pkgs/clan-app/ui/src/components/Search/Search.module.css +++ b/pkgs/clan-app/ui/src/components/Search/Search.module.css @@ -3,7 +3,7 @@ font-size: 0.875rem; font-weight: 500; - font-family: "Archivo", sans-serif; + font-family: "Geist", sans-serif; line-height: 132%; &::placeholder { diff --git a/pkgs/clan-app/ui/src/components/Typography/Typography.mdx b/pkgs/clan-app/ui/src/components/Typography/Typography.mdx index cab31a00d..17ac5edb7 100644 --- a/pkgs/clan-app/ui/src/components/Typography/Typography.mdx +++ b/pkgs/clan-app/ui/src/components/Typography/Typography.mdx @@ -6,25 +6,20 @@ import * as TypographyStories from "./Typography.stories"; # Typography -There are two fonts being used within our typography system: +There is one font being used within our typography system: -- [Archivo] in its _Standard_ and _Semi Condensed_ forms -- [Fira Code] for mono-spaced content +- [Geist] for all content +- Geist-Mono for mono-spaced content ## UI Components When creating UI components that a user will interact with, you **must use** `Label` or `Label Mono`. - - ## Layout & Prose -For layout components and general prose, you must use the non-condensed forms of `Body`, `Title`, `Headline` and -`Teaser`. - @@ -46,5 +41,4 @@ Each color also has an inverted counterpart. -[Archivo]: https://github.com/Omnibus-Type/Archivo -[Fira Code]: https://github.com/tonsky/FiraCode +[Geist]: https://github.com/vercel/geist-font diff --git a/pkgs/clan-app/ui/src/components/Typography/Typography.module.css b/pkgs/clan-app/ui/src/components/Typography/Typography.module.css index 9f1b3f902..6d0724762 100644 --- a/pkgs/clan-app/ui/src/components/Typography/Typography.module.css +++ b/pkgs/clan-app/ui/src/components/Typography/Typography.module.css @@ -18,11 +18,7 @@ letter-spacing: 0.005rem; &.family-regular { - font-family: "Archivo", sans-serif; - } - - &.family-condensed { - font-family: "Archivo SemiCondensed", sans-serif; + font-family: "Geist", sans-serif; } &.size-s { @@ -45,34 +41,8 @@ } &.label { - &.family-condensed { - font-family: "Archivo SemiCondensed", sans-serif; - - font-size: 1rem; - line-height: normal; - letter-spacing: 0.02rem; - - &.size-s { - font-size: 0.875rem; - line-height: normal; - letter-spacing: 0.0175rem; - } - - &.size-xs { - font-size: 0.8125rem; - line-height: normal; - letter-spacing: 0.008125rem; - } - - &.size-xxs { - font-size: 0.75rem; - line-height: 1; - /* letter-spacing: 0.008125rem; */ - } - } - &.family-mono { - font-family: "Commit Mono", monospace; + font-family: "Geist Mono", monospace; font-size: 1rem; line-height: normal; @@ -103,7 +73,7 @@ letter-spacing: 0.03375rem; &.family-regular { - font-family: "Archivo", sans-serif; + font-family: "Geist", sans-serif; } &.size-m { @@ -125,7 +95,7 @@ letter-spacing: 0.015rem; &.family-regular { - font-family: "Archivo", sans-serif; + font-family: "Geist", sans-serif; } &.size-m { @@ -159,7 +129,7 @@ letter-spacing: -0.06rem; &.family-regular { - font-family: "Archivo", sans-serif; + font-family: "Geist", sans-serif; } } @@ -194,7 +164,7 @@ @apply fg-def-4 ml-1; content: "*"; - font-family: "Commit Mono", monospace; + font-family: "Geist Mono", monospace; font-size: 0.6875rem; } } diff --git a/pkgs/clan-app/ui/src/components/Typography/Typography.tsx b/pkgs/clan-app/ui/src/components/Typography/Typography.tsx index fc4e2c816..1154a57b3 100644 --- a/pkgs/clan-app/ui/src/components/Typography/Typography.tsx +++ b/pkgs/clan-app/ui/src/components/Typography/Typography.tsx @@ -8,7 +8,7 @@ import { getInClasses } from "@/src/util"; export type Hierarchy = "body" | "title" | "headline" | "label" | "teaser"; export type Weight = "normal" | "medium" | "bold"; -export type Family = "regular" | "condensed" | "mono"; +export type Family = "regular" | "mono"; export type Transform = "uppercase" | "lowercase" | "capitalize"; export interface SizeForHierarchy { body: "default" | "s" | "xs" | "xxs"; @@ -26,10 +26,10 @@ export interface TagForHierarchy { } const defaultFamilyMap = { - body: "condensed", + body: "regular", headline: "regular", title: "regular", - label: "condensed", + label: "regular", teaser: "regular", } as const; diff --git a/pkgs/clan-app/ui/src/index.css b/pkgs/clan-app/ui/src/index.css index 4cfcce0a7..0e0f6838b 100644 --- a/pkgs/clan-app/ui/src/index.css +++ b/pkgs/clan-app/ui/src/index.css @@ -5,61 +5,39 @@ @tailwind utilities; @font-face { - font-family: "Archivo"; + font-family: "Geist"; font-weight: 400; - src: url(../.fonts/Archivo-Regular.woff2) format("woff2"); + src: url(../.fonts/Geist-Regular.woff2) format("woff2"); } - @font-face { - font-family: "Archivo"; + font-family: "Geist"; font-weight: 500; - src: url(../.fonts/Archivo-Medium.woff2) format("woff2"); + src: url(../.fonts/Geist-Medium.woff2) format("woff2"); } - @font-face { - font-family: "Archivo"; + font-family: "Geist"; font-weight: 600; - src: url(../.fonts/Archivo-SemiBold.woff2) format("woff2"); + src: url(../.fonts/Geist-SemiBold.woff2) format("woff2"); } @font-face { - font-family: "Archivo SemiCondensed"; + font-family: "Geist Mono"; font-weight: 400; - src: url(../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2"); + src: url(../.fonts/GeistMono-Regular.woff2) format("woff2"); } - @font-face { - font-family: "Archivo SemiCondensed"; + font-family: "Geist Mono"; font-weight: 500; - src: url(../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2"); + src: url(../.fonts/GeistMono-Medium.woff2) format("woff2"); } - @font-face { - font-family: "Archivo SemiCondensed"; + font-family: "Geist Mono"; font-weight: 600; - src: url(../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2"); -} - -@font-face { - font-family: "Commit Mono"; - font-weight: 400; - src: url(../.fonts/CommitMonoV143-VF.woff2) format("woff2"); -} - -@font-face { - font-family: "Commit Mono"; - font-weight: 500; - src: url(../.fonts/CommitMonoV143-VF.woff2) format("woff2"); -} - -@font-face { - font-family: "Commit Mono"; - font-weight: 600; - src: url(../.fonts/CommitMonoV143-VF.woff2) format("woff2"); + src: url(../.fonts/GeistMono-SemiBold.woff2) format("woff2"); } html { - @apply font-sans; + font-family: "Geist", "sans-serif"; overflow-x: hidden; overflow-y: hidden;