ionbase-ui 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +129 -3
- package/dist/styles/index.css +21 -1
- package/dist/styles/tokens/base.css +8 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,9 +22,135 @@ export function App() {
|
|
|
22
22
|
}
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
That single import pulls in the design tokens, the
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
That single import pulls in the design tokens, the type scale, and every
|
|
26
|
+
component stylesheet. Dark mode is `data-theme="dark"` on any ancestor — no
|
|
27
|
+
separate import, no JS.
|
|
28
|
+
|
|
29
|
+
It does **not** load any webfonts. That is a required extra step — see below.
|
|
30
|
+
|
|
31
|
+
## Fonts
|
|
32
|
+
|
|
33
|
+
**Loading the fonts is your app's job.** This package names the families in its
|
|
34
|
+
tokens but never fetches them: your framework knows its own font strategy
|
|
35
|
+
(`next/font`, Fontsource, self-hosted `@font-face`, a corporate CDN) and a
|
|
36
|
+
design system reaching out to a third-party host at CSS parse time is not a
|
|
37
|
+
decision it should make for you.
|
|
38
|
+
|
|
39
|
+
Three families are used by the shipped components and type scale:
|
|
40
|
+
|
|
41
|
+
| Family | Token | Weights | Used by |
|
|
42
|
+
| ----------------- | ----------------------------- | ------------- | --------------------------------------------- |
|
|
43
|
+
| **Host Grotesk** | `--font-family-sans` | 400, 500, 600 | Body, every component, most of the type scale |
|
|
44
|
+
| **STIX Two Text** | `--font-family-serif-display` | 600 | `.ion-text-h1`, `.ion-text-h2` |
|
|
45
|
+
| **Merriweather** | `--font-family-serif` | 700 | `.ion-text-editorial-*` |
|
|
46
|
+
|
|
47
|
+
All three are also used in italic where your content uses italic; none of the
|
|
48
|
+
components require it.
|
|
49
|
+
|
|
50
|
+
`--font-family-mono` (Space Mono, 400/700) also exists as a token, but nothing
|
|
51
|
+
in this package references it. Load it only if you use that variable yourself.
|
|
52
|
+
|
|
53
|
+
### If you skip this
|
|
54
|
+
|
|
55
|
+
Text degrades, it does not break. Every font token carries a generic fallback:
|
|
56
|
+
|
|
57
|
+
```css
|
|
58
|
+
--font-family-sans:
|
|
59
|
+
'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
60
|
+
--font-family-serif: Merriweather, Georgia, 'Times New Roman', serif;
|
|
61
|
+
--font-family-serif-display: 'STIX Two Text', Georgia, 'Times New Roman', serif;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
So an app that loads nothing renders in the platform UI font with serif
|
|
65
|
+
headings — wrong, but deliberately wrong in the right category, and legible.
|
|
66
|
+
|
|
67
|
+
### next/font
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
// app/layout.tsx
|
|
71
|
+
import { Host_Grotesk, Merriweather, STIX_Two_Text } from 'next/font/google';
|
|
72
|
+
import 'ionbase-ui/styles';
|
|
73
|
+
import './ionbase-fonts.css';
|
|
74
|
+
|
|
75
|
+
const sans = Host_Grotesk({ subsets: ['latin'], variable: '--app-sans' });
|
|
76
|
+
const display = STIX_Two_Text({
|
|
77
|
+
subsets: ['latin'],
|
|
78
|
+
variable: '--app-display',
|
|
79
|
+
});
|
|
80
|
+
const serif = Merriweather({
|
|
81
|
+
subsets: ['latin'],
|
|
82
|
+
weight: ['700'],
|
|
83
|
+
variable: '--app-serif',
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
export default function RootLayout({
|
|
87
|
+
children,
|
|
88
|
+
}: {
|
|
89
|
+
children: React.ReactNode;
|
|
90
|
+
}) {
|
|
91
|
+
return (
|
|
92
|
+
<html
|
|
93
|
+
lang="en"
|
|
94
|
+
className={`${sans.variable} ${display.variable} ${serif.variable}`}
|
|
95
|
+
>
|
|
96
|
+
<body>{children}</body>
|
|
97
|
+
</html>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Host Grotesk and STIX Two Text are variable fonts, so `next/font` covers their
|
|
103
|
+
whole weight range without a `weight` list. Merriweather is requested static
|
|
104
|
+
here because only 700 is used.
|
|
105
|
+
|
|
106
|
+
Then point the IonBase tokens at them:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
/* ionbase-fonts.css — imported AFTER 'ionbase-ui/styles' so it wins */
|
|
110
|
+
:root {
|
|
111
|
+
--font-family-sans: var(--app-sans), system-ui, sans-serif;
|
|
112
|
+
--font-family-serif-display: var(--app-display), Georgia, serif;
|
|
113
|
+
--font-family-serif: var(--app-serif), Georgia, serif;
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Import order matters: both files land at the same specificity, so the later one
|
|
118
|
+
wins. Override after, not before.
|
|
119
|
+
|
|
120
|
+
### Plain @font-face
|
|
121
|
+
|
|
122
|
+
Self-hosting works the same way — declare the faces, then leave the tokens
|
|
123
|
+
alone, because they already name these families:
|
|
124
|
+
|
|
125
|
+
```css
|
|
126
|
+
@font-face {
|
|
127
|
+
font-family: 'Host Grotesk';
|
|
128
|
+
src: url('/fonts/host-grotesk.woff2') format('woff2-variations');
|
|
129
|
+
font-weight: 400 600;
|
|
130
|
+
font-display: swap;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@font-face {
|
|
134
|
+
font-family: 'STIX Two Text';
|
|
135
|
+
src: url('/fonts/stix-two-text-600.woff2') format('woff2');
|
|
136
|
+
font-weight: 600;
|
|
137
|
+
font-display: swap;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@font-face {
|
|
141
|
+
font-family: 'Merriweather';
|
|
142
|
+
src: url('/fonts/merriweather-700.woff2') format('woff2');
|
|
143
|
+
font-weight: 700;
|
|
144
|
+
font-display: swap;
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
No token override is needed in this case: `--font-family-sans` already begins
|
|
149
|
+
with `'Host Grotesk'`, so a matching `@font-face` is picked up automatically.
|
|
150
|
+
|
|
151
|
+
If you would rather use the Google CDN, put the `@import` or `<link>` in your
|
|
152
|
+
own entry — at the top of your own CSS, where `@import` ordering is yours to
|
|
153
|
+
control.
|
|
28
154
|
|
|
29
155
|
## Icons
|
|
30
156
|
|
package/dist/styles/index.css
CHANGED
|
@@ -1,4 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
/*
|
|
2
|
+
* NO @import of a webfont host here, deliberately. Loading the fonts is the
|
|
3
|
+
* consuming app's job — see "Fonts" in the README.
|
|
4
|
+
*
|
|
5
|
+
* This file used to open with a Google Fonts @import, and it was broken for
|
|
6
|
+
* every consumer using a bundler. CSS requires @import to precede all other
|
|
7
|
+
* rules; a bundler that concatenates stylesheets puts other rules ahead of it,
|
|
8
|
+
* and the browser then drops it silently. Confirmed in a Next.js 16 /
|
|
9
|
+
* Turbopack app: the built bundle contained no @import and no
|
|
10
|
+
* `fonts.googleapis` string at all, so no font ever loaded.
|
|
11
|
+
*
|
|
12
|
+
* It failed quietly rather than loudly. The font tokens named bare families
|
|
13
|
+
* with no generic fallback, so the unresolved families fell through to the
|
|
14
|
+
* browser default and the whole system rendered in a default serif — which
|
|
15
|
+
* reads as a token bug, not a font-loading one. The fallbacks added to
|
|
16
|
+
* token-overrides.json are what makes that failure mode legible.
|
|
17
|
+
*
|
|
18
|
+
* Reaching a third-party host at CSS parse time was also the wrong default
|
|
19
|
+
* regardless: it is a render-blocking request the consumer did not opt into,
|
|
20
|
+
* it bypasses next/font and friends, and it hands visitor IPs to Google.
|
|
21
|
+
*/
|
|
2
22
|
@import url('./tokens/index.css');
|
|
3
23
|
@import url('./button.css');
|
|
4
24
|
@import url('./tabs.css');
|
|
@@ -122,14 +122,14 @@
|
|
|
122
122
|
--font-size-56: 56px;
|
|
123
123
|
--font-size-64: 64px;
|
|
124
124
|
--font-size-72: 72px;
|
|
125
|
-
--font-family-host-grotesk: Host Grotesk;
|
|
126
|
-
--font-family-merriweather: Merriweather;
|
|
127
|
-
--font-family-space-mono: Space Mono;
|
|
128
|
-
--font-family-stix-two-text: STIX Two Text;
|
|
129
|
-
--font-family-sans: Host Grotesk;
|
|
130
|
-
--font-family-serif: Merriweather;
|
|
131
|
-
--font-family-mono: Space Mono;
|
|
132
|
-
--font-family-serif-display: STIX Two Text;
|
|
125
|
+
--font-family-host-grotesk: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
126
|
+
--font-family-merriweather: Merriweather, Georgia, "Times New Roman", serif;
|
|
127
|
+
--font-family-space-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
128
|
+
--font-family-stix-two-text: "STIX Two Text", Georgia, "Times New Roman", serif;
|
|
129
|
+
--font-family-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
130
|
+
--font-family-serif: Merriweather, Georgia, "Times New Roman", serif;
|
|
131
|
+
--font-family-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
132
|
+
--font-family-serif-display: "STIX Two Text", Georgia, "Times New Roman", serif;
|
|
133
133
|
--font-weight-400: 400;
|
|
134
134
|
--font-weight-500: 500;
|
|
135
135
|
--font-weight-600: 600;
|