yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request 'app: use geist font' (#5508) from fix-font into main

Browse Source 
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5508
This commit is contained in:
hsjobeki
2025-10-14 09:48:53 +00:00
parent 2ef56aff70 9dceddc6c2
commit 733d80d0b2
10 changed files with 56 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
pkgs/clan-app/fonts.nix
View File

@@ -3,68 +3,39 @@
runCommand, runCommand,
}: }:
let let
geist-regular = fetchurl {
archivo = { url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/Geist/webfonts/Geist-Regular.woff2";
# 400 -> Regular hash = "sha256-bQfiUE+DYxYCLRa6WHmlIVNTwv98s4HaClOp9G3tXwo=";
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-medium = fetchurl {
archivoSemi = { url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/Geist/webfonts/Geist-Medium.woff2";
# 400 -> Regular hash = "sha256-9Tw1DTi/7VIpsDtToLJb/XTZhOhItU9c1P17xPnZ02w=";
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-semibold = fetchurl {
commitMono = fetchurl { url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/Geist/webfonts/Geist-SemiBold.woff2";
url = "https://github.com/eigilnikolajsen/commit-mono/raw/0b3b192f035cdc8d1ea8ffb5463cc23d73d0b89f/src/fonts/fontlab/CommitMonoV143-VF.woff2"; hash = "sha256-Dpia8fMSsLE0OFfUqit1jKM0S7t7Zt5LwQROjI8yVJk=";
hash = "sha256-80LKbD8ll+bA/NhLPz7WTTzlvbbQrxnRkNZFpVixzyk=";
}; };
archivoSemi_ttf = fetchurl { geist-mono-regular = fetchurl {
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/ttf/ArchivoSemiCondensed-Medium.ttf"; url = "https://github.com/vercel/geist-font/raw/7bce30121bdadfa8aadd5761b7fbda04d64c470e/fonts/GeistMono/webfonts/GeistMono-Regular.woff2";
hash = "sha256-Kot1CvKqnXW1VZ7zX2wYZEziSA/l9J0gdfKkSdBxZ0w="; 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 in
runCommand "" { } '' runCommand "" { } ''
mkdir -p $out mkdir -p $out
cp ${archivo.regular} $out/Archivo-Regular.woff2 cp ${geist-regular} $out/Geist-Regular.woff2
cp ${archivo.medium} $out/Archivo-Medium.woff2 cp ${geist-medium} $out/Geist-Medium.woff2
cp ${archivo.semiBold} $out/Archivo-SemiBold.woff2 cp ${geist-semibold} $out/Geist-SemiBold.woff2
cp ${archivoSemi.regular} $out/ArchivoSemiCondensed-Regular.woff2 cp ${geist-mono-regular} $out/GeistMono-Regular.woff2
cp ${archivoSemi.medium} $out/ArchivoSemiCondensed-Medium.woff2 cp ${geist-mono-medium} $out/GeistMono-Medium.woff2
cp ${archivoSemi.semiBold} $out/ArchivoSemiCondensed-SemiBold.woff2 cp ${geist-mono-semibold} $out/GeistMono-SemiBold.woff2
cp ${commitMono} $out/CommitMonoV143-VF.woff2
cp ${archivoSemi_ttf} $out/ArchivoSemiCondensed-Medium.ttf
'' ''

8
pkgs/clan-app/ui/src/components/Alert/Alert.tsx
View File

@@ -38,7 +38,6 @@ export const Alert = (props: AlertProps) => {
<div class={styles.alertContent}> <div class={styles.alertContent}>
<Typography <Typography
hierarchy="body" hierarchy="body"
family="condensed"
size={titleSize()} size={titleSize()}
weight="bold" weight="bold"
color="inherit" color="inherit"
@@ -46,12 +45,7 @@ export const Alert = (props: AlertProps) => {
{props.title} {props.title}
</Typography> </Typography>
<Show when={props.description}> <Show when={props.description}>
<Typography <Typography hierarchy="body" size={bodySize()} color="inherit">
hierarchy="body"
family="condensed"
size={bodySize()}
color="inherit"
>
{props.description} {props.description}
</Typography> </Typography>
</Show> </Show>

2
pkgs/clan-app/ui/src/components/Form/MachineTags.module.css
View File

@@ -26,7 +26,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
font-family: "Archivo", sans-serif; font-family: "Geist", sans-serif;
line-height: 1; line-height: 1;
&::placeholder { &::placeholder {

2
pkgs/clan-app/ui/src/components/Form/TextField.module.css
View File

@@ -6,7 +6,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
font-family: "Archivo", sans-serif; font-family: "Geist", sans-serif;
line-height: 132%; line-height: 132%;
&::placeholder { &::placeholder {

2
pkgs/clan-app/ui/src/components/Search/Search.module.css
View File

@@ -3,7 +3,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
font-family: "Archivo", sans-serif; font-family: "Geist", sans-serif;
line-height: 132%; line-height: 132%;
&::placeholder { &::placeholder {

5
pkgs/clan-app/ui/src/components/Select/Select.tsx
View File

@@ -126,7 +126,6 @@ export const Select = (props: SelectProps) => {
hierarchy="label" hierarchy="label"
size="s" size="s"
weight="bold" weight="bold"
family="condensed"
in="Select-item-label" in="Select-item-label"
> >
{props.item.rawValue.label} {props.item.rawValue.label}
@@ -142,7 +141,6 @@ export const Select = (props: SelectProps) => {
hierarchy="label" hierarchy="label"
size="s" size="s"
weight="bold" weight="bold"
family="condensed"
color="secondary" color="secondary"
in="Select-item-label" in="Select-item-label"
> >
@@ -157,7 +155,6 @@ export const Select = (props: SelectProps) => {
hierarchy="label" hierarchy="label"
size="s" size="s"
weight="normal" weight="normal"
family="condensed"
color="secondary" color="secondary"
in="Select-item-label" in="Select-item-label"
> >
@@ -170,7 +167,6 @@ export const Select = (props: SelectProps) => {
hierarchy="label" hierarchy="label"
size="s" size="s"
weight="bold" weight="bold"
family="condensed"
in="Select-item-label" in="Select-item-label"
> >
{root.placeholder} {root.placeholder}
@@ -202,7 +198,6 @@ export const Select = (props: SelectProps) => {
hierarchy="label" hierarchy="label"
size="s" size="s"
weight="bold" weight="bold"
family="condensed"
in="Select-item-label" in="Select-item-label"
> >
{state.selectedOption().label} {state.selectedOption().label}

14
pkgs/clan-app/ui/src/components/Typography/Typography.mdx
View File

@@ -6,25 +6,20 @@ import * as TypographyStories from "./Typography.stories";
# Typography # 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 - [Geist] for all content
- [Fira Code] for mono-spaced content - Geist-Mono for mono-spaced content
## UI Components ## UI Components
When creating UI components that a user will interact with, When creating UI components that a user will interact with,
you **must use** `Label` or `Label Mono`. you **must use** `Label` or `Label Mono`.
<DocsStory of={TypographyStories.LabelCondensed} />
<DocsStory of={TypographyStories.LabelMono} /> <DocsStory of={TypographyStories.LabelMono} />
## Layout & Prose ## Layout & Prose
For layout components and general prose, you must use the non-condensed forms of `Body`, `Title`, `Headline` and
`Teaser`.
<DocsStory of={TypographyStories.Body} /> <DocsStory of={TypographyStories.Body} />
<DocsStory of={TypographyStories.Title} /> <DocsStory of={TypographyStories.Title} />
<DocsStory of={TypographyStories.Headline} /> <DocsStory of={TypographyStories.Headline} />
@@ -46,5 +41,4 @@ Each color also has an inverted counterpart.
<DocsStory of={TypographyStories.ColorsInverted} /> <DocsStory of={TypographyStories.ColorsInverted} />
[Archivo]: https://github.com/Omnibus-Type/Archivo [Geist]: https://github.com/vercel/geist-font
[Fira Code]: https://github.com/tonsky/FiraCode

42
pkgs/clan-app/ui/src/components/Typography/Typography.module.css
View File

@@ -18,11 +18,7 @@
letter-spacing: 0.005rem; letter-spacing: 0.005rem;
&.family-regular { &.family-regular {
font-family: "Archivo", sans-serif; font-family: "Geist", sans-serif;
}
&.family-condensed {
font-family: "Archivo SemiCondensed", sans-serif;
} }
&.size-s { &.size-s {
@@ -45,34 +41,8 @@
} }
&.label { &.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 { &.family-mono {
font-family: "Commit Mono", monospace; font-family: "Geist Mono", monospace;
font-size: 1rem; font-size: 1rem;
line-height: normal; line-height: normal;
@@ -103,7 +73,7 @@
letter-spacing: 0.03375rem; letter-spacing: 0.03375rem;
&.family-regular { &.family-regular {
font-family: "Archivo", sans-serif; font-family: "Geist", sans-serif;
} }
&.size-m { &.size-m {
@@ -125,7 +95,7 @@
letter-spacing: 0.015rem; letter-spacing: 0.015rem;
&.family-regular { &.family-regular {
font-family: "Archivo", sans-serif; font-family: "Geist", sans-serif;
} }
&.size-m { &.size-m {
@@ -159,7 +129,7 @@
letter-spacing: -0.06rem; letter-spacing: -0.06rem;
&.family-regular { &.family-regular {
font-family: "Archivo", sans-serif; font-family: "Geist", sans-serif;
} }
} }
@@ -194,7 +164,7 @@
@apply fg-def-4 ml-1; @apply fg-def-4 ml-1;
content: "*"; content: "*";
font-family: "Commit Mono", monospace; font-family: "Geist Mono", monospace;
font-size: 0.6875rem; font-size: 0.6875rem;
} }
} }

6
pkgs/clan-app/ui/src/components/Typography/Typography.tsx
View File

@@ -8,7 +8,7 @@ import { getInClasses } from "@/src/util";
export type Hierarchy = "body" | "title" | "headline" | "label" | "teaser"; export type Hierarchy = "body" | "title" | "headline" | "label" | "teaser";
export type Weight = "normal" | "medium" | "bold"; export type Weight = "normal" | "medium" | "bold";
export type Family = "regular" | "condensed" | "mono"; export type Family = "regular" | "mono";
export type Transform = "uppercase" | "lowercase" | "capitalize"; export type Transform = "uppercase" | "lowercase" | "capitalize";
export interface SizeForHierarchy { export interface SizeForHierarchy {
body: "default" | "s" | "xs" | "xxs"; body: "default" | "s" | "xs" | "xxs";
@@ -26,10 +26,10 @@ export interface TagForHierarchy {
} }
const defaultFamilyMap = { const defaultFamilyMap = {
body: "condensed", body: "regular",
headline: "regular", headline: "regular",
title: "regular", title: "regular",
label: "condensed", label: "regular",
teaser: "regular", teaser: "regular",
} as const; } as const;

48
pkgs/clan-app/ui/src/index.css
View File

@@ -5,61 +5,39 @@
@tailwind utilities; @tailwind utilities;
@font-face { @font-face {
font-family: "Archivo"; font-family: "Geist";
font-weight: 400; font-weight: 400;
src: url(../.fonts/Archivo-Regular.woff2) format("woff2"); src: url(../.fonts/Geist-Regular.woff2) format("woff2");
} }
@font-face { @font-face {
font-family: "Archivo"; font-family: "Geist";
font-weight: 500; font-weight: 500;
src: url(../.fonts/Archivo-Medium.woff2) format("woff2"); src: url(../.fonts/Geist-Medium.woff2) format("woff2");
} }
@font-face { @font-face {
font-family: "Archivo"; font-family: "Geist";
font-weight: 600; font-weight: 600;
src: url(../.fonts/Archivo-SemiBold.woff2) format("woff2"); src: url(../.fonts/Geist-SemiBold.woff2) format("woff2");
} }
@font-face { @font-face {
font-family: "Archivo SemiCondensed"; font-family: "Geist Mono";
font-weight: 400; font-weight: 400;
src: url(../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2"); src: url(../.fonts/GeistMono-Regular.woff2) format("woff2");
} }
@font-face { @font-face {
font-family: "Archivo SemiCondensed"; font-family: "Geist Mono";
font-weight: 500; font-weight: 500;
src: url(../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2"); src: url(../.fonts/GeistMono-Medium.woff2) format("woff2");
} }
@font-face { @font-face {
font-family: "Archivo SemiCondensed"; font-family: "Geist Mono";
font-weight: 600; font-weight: 600;
src: url(../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2"); src: url(../.fonts/GeistMono-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");
} }
html { html {
@apply font-sans; font-family: "Geist", "sans-serif";
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;