mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-11 12:48:19 +00:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c2ac210002 |
@@ -24,28 +24,28 @@ const styleUrls = {
|
||||
|
||||
<style is:inline>
|
||||
@font-face {
|
||||
font-family: "Geist Sans";
|
||||
font-family: "Geist";
|
||||
src: url("/assets/fonts/geist/geist-sans-latin-400-normal.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Geist Sans";
|
||||
font-family: "Geist";
|
||||
src: url("/assets/fonts/geist/geist-sans-latin-500-normal.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Geist Sans";
|
||||
font-family: "Geist";
|
||||
src: url("/assets/fonts/geist/geist-sans-latin-600-normal.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Geist Sans";
|
||||
font-family: "Geist";
|
||||
src: url("/assets/fonts/geist/geist-sans-latin-700-normal.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
|
||||
@@ -45,12 +45,12 @@ Learn more in the [shadcn/ui theming docs](https://ui.shadcn.com/docs/theming).
|
||||
|
||||
## Fonts
|
||||
|
||||
Basecoat does not ship web font files by default. Its font tokens prefer [Geist Sans](https://fonts.google.com/specimen/Geist) and [Geist Mono](https://fonts.google.com/specimen/Geist+Mono) when those fonts are available, then fall back to the full Tailwind default sans and mono stacks.
|
||||
Basecoat does not ship web font files by default. Its font tokens prefer [Geist](https://fonts.google.com/specimen/Geist) and [Geist Mono](https://fonts.google.com/specimen/Geist+Mono) when those fonts are available, then fall back to the full Tailwind default sans and mono stacks.
|
||||
|
||||
Install the fonts with Fontsource:
|
||||
|
||||
```bash
|
||||
npm install @fontsource/geist-sans @fontsource/geist-mono
|
||||
npm install @fontsource/geist @fontsource/geist-mono
|
||||
```
|
||||
|
||||
Then import the font files. Basecoat's default font tokens already reference Geist with full system fallbacks:
|
||||
@@ -58,10 +58,10 @@ Then import the font files. Basecoat's default font tokens already reference Gei
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@import "basecoat-css/sera";
|
||||
@import "@fontsource/geist-sans/400.css";
|
||||
@import "@fontsource/geist-sans/500.css";
|
||||
@import "@fontsource/geist-sans/600.css";
|
||||
@import "@fontsource/geist-sans/700.css";
|
||||
@import "@fontsource/geist/400.css";
|
||||
@import "@fontsource/geist/500.css";
|
||||
@import "@fontsource/geist/600.css";
|
||||
@import "@fontsource/geist/700.css";
|
||||
@import "@fontsource/geist-mono/400.css";
|
||||
@import "@fontsource/geist-mono/500.css";
|
||||
@import "@fontsource/geist-mono/600.css";
|
||||
|
||||
@@ -70,32 +70,6 @@ Or load the Basecoat runtime once, then only the component scripts you use.
|
||||
| `dist/js/basecoat.min.js` | Runtime only. Load once before individual component scripts. |
|
||||
| `dist/js/{component}.min.js` | Individual JavaScript component file. |
|
||||
|
||||
### Tailwind utilities with the CDN
|
||||
|
||||
The CDN stylesheets only include the utilities Basecoat uses, so classes like `bg-primary` or `text-muted-foreground` are not available. If you add the [Tailwind Play CDN](https://tailwindcss.com/docs/installation/play-cdn) for utilities, map Basecoat's theme tokens to Tailwind colors and restore the border color after Tailwind's preflight. Load this after the Basecoat stylesheet.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<style type="text/tailwindcss">
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-border: var(--border);
|
||||
}
|
||||
@layer base {
|
||||
*, ::before, ::after { border-color: var(--border); }
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Add any other tokens you use the same way, for example `--color-destructive: var(--destructive);`. The Play CDN is meant for prototypes. For production, use the [Tailwind CLI with a bundle file](#npm) instead.
|
||||
|
||||
## NPM
|
||||
|
||||
<Steps>
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-sans: "Geist", "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
|
||||
Reference in New Issue
Block a user