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

app: use geist font

Browse Source 
Drop Archivo, ArchivoSemicondensed, CommitMono
in favour of only one
This commit is contained in:
Johannes Kirschbauer
2025-10-14 11:18:42 +02:00
parent 7e7e58eb64
commit ffdcd9b41e
8 changed files with 55 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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`.
<DocsStory of={TypographyStories.LabelCondensed} />
<DocsStory of={TypographyStories.LabelMono} />
## 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.Title} />
<DocsStory of={TypographyStories.Headline} />
@@ -46,5 +41,4 @@ Each color also has an inverted counterpart.
<DocsStory of={TypographyStories.ColorsInverted} />
[Archivo]: https://github.com/Omnibus-Type/Archivo
[Fira Code]: https://github.com/tonsky/FiraCode
[Geist]: https://github.com/vercel/geist-font

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

@@ -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;
}
}

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 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;

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

@@ -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;