@octaviaflow/fonts 1.0.0 → 2.0.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 +33 -20
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -29,13 +29,13 @@ bun add @octaviaflow/fonts
|
|
|
29
29
|
Import the compiled CSS file in your application:
|
|
30
30
|
|
|
31
31
|
```css
|
|
32
|
-
@import
|
|
32
|
+
@import "@octaviaflow/fonts/css/octaviaflow-fonts.css";
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
Or use the minified version:
|
|
36
36
|
|
|
37
37
|
```css
|
|
38
|
-
@import
|
|
38
|
+
@import "@octaviaflow/fonts/css/octaviaflow-fonts.min.css";
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
### SCSS Import
|
|
@@ -44,12 +44,12 @@ For more control, import the SCSS files:
|
|
|
44
44
|
|
|
45
45
|
```scss
|
|
46
46
|
// Import all fonts
|
|
47
|
-
@import
|
|
47
|
+
@import "@octaviaflow/fonts/scss/octaviaflow-fonts";
|
|
48
48
|
|
|
49
49
|
// Or import individually
|
|
50
|
-
@import
|
|
51
|
-
@import
|
|
52
|
-
@import
|
|
50
|
+
@import "@octaviaflow/fonts/scss/lufga";
|
|
51
|
+
@import "@octaviaflow/fonts/scss/rtl-united-text";
|
|
52
|
+
@import "@octaviaflow/fonts/scss/jetbrains-mono";
|
|
53
53
|
```
|
|
54
54
|
|
|
55
55
|
### Custom Font Path
|
|
@@ -57,8 +57,8 @@ For more control, import the SCSS files:
|
|
|
57
57
|
If you need to customize the font file path:
|
|
58
58
|
|
|
59
59
|
```scss
|
|
60
|
-
$font-prefix:
|
|
61
|
-
@import
|
|
60
|
+
$font-prefix: "./custom/path/to/fonts";
|
|
61
|
+
@import "@octaviaflow/fonts/scss/octaviaflow-fonts";
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
### Font Family Usage
|
|
@@ -68,23 +68,31 @@ Once imported, use the fonts in your CSS:
|
|
|
68
68
|
```css
|
|
69
69
|
/* Lufga - Primary typeface */
|
|
70
70
|
body {
|
|
71
|
-
font-family:
|
|
71
|
+
font-family:
|
|
72
|
+
"Lufga",
|
|
73
|
+
-apple-system,
|
|
74
|
+
BlinkMacSystemFont,
|
|
75
|
+
"Segoe UI",
|
|
76
|
+
sans-serif;
|
|
72
77
|
}
|
|
73
78
|
|
|
74
79
|
/* RTL United Text - For RTL languages */
|
|
75
|
-
[dir=
|
|
76
|
-
font-family:
|
|
80
|
+
[dir="rtl"] {
|
|
81
|
+
font-family: "RTL United Text", "Lufga", sans-serif;
|
|
77
82
|
}
|
|
78
83
|
|
|
79
84
|
/* JetBrains Mono - For code */
|
|
80
|
-
code,
|
|
81
|
-
|
|
85
|
+
code,
|
|
86
|
+
pre,
|
|
87
|
+
.code {
|
|
88
|
+
font-family: "JetBrains Mono", "Menlo", "Monaco", "Courier New", monospace;
|
|
82
89
|
}
|
|
83
90
|
```
|
|
84
91
|
|
|
85
92
|
## Font Weights
|
|
86
93
|
|
|
87
94
|
### Lufga
|
|
95
|
+
|
|
88
96
|
- **100** - Thin
|
|
89
97
|
- **200** - Extra Light
|
|
90
98
|
- **300** - Light
|
|
@@ -98,6 +106,7 @@ code, pre, .code {
|
|
|
98
106
|
All weights include italic variants.
|
|
99
107
|
|
|
100
108
|
### RTL United Text
|
|
109
|
+
|
|
101
110
|
- **300** - Light
|
|
102
111
|
- **400** - Regular (default)
|
|
103
112
|
- **700** - Bold
|
|
@@ -105,6 +114,7 @@ All weights include italic variants.
|
|
|
105
114
|
All weights include italic variants.
|
|
106
115
|
|
|
107
116
|
### JetBrains Mono
|
|
117
|
+
|
|
108
118
|
- **100** - Thin
|
|
109
119
|
- **200** - Extra Light
|
|
110
120
|
- **300** - Light
|
|
@@ -121,13 +131,16 @@ All weights include italic variants.
|
|
|
121
131
|
To use Octaviaflow fonts globally in Storybook, add to `.storybook/preview-head.html`:
|
|
122
132
|
|
|
123
133
|
```html
|
|
124
|
-
<link
|
|
134
|
+
<link
|
|
135
|
+
rel="stylesheet"
|
|
136
|
+
href="../node_modules/@octaviaflow/fonts/css/octaviaflow-fonts.css"
|
|
137
|
+
/>
|
|
125
138
|
```
|
|
126
139
|
|
|
127
140
|
Or import in `.storybook/preview.js`:
|
|
128
141
|
|
|
129
142
|
```javascript
|
|
130
|
-
import
|
|
143
|
+
import "@octaviaflow/fonts/css/octaviaflow-fonts.css";
|
|
131
144
|
```
|
|
132
145
|
|
|
133
146
|
## Next.js Integration
|
|
@@ -135,7 +148,7 @@ import '@octaviaflow/fonts/css/octaviaflow-fonts.css';
|
|
|
135
148
|
In your `_app.tsx` or `layout.tsx`:
|
|
136
149
|
|
|
137
150
|
```tsx
|
|
138
|
-
import
|
|
151
|
+
import "@octaviaflow/fonts/css/octaviaflow-fonts.css";
|
|
139
152
|
|
|
140
153
|
export default function App({ Component, pageProps }) {
|
|
141
154
|
return <Component {...pageProps} />;
|
|
@@ -147,11 +160,11 @@ export default function App({ Component, pageProps }) {
|
|
|
147
160
|
In your main entry file (e.g., `index.tsx`):
|
|
148
161
|
|
|
149
162
|
```tsx
|
|
150
|
-
import
|
|
151
|
-
import ReactDOM from
|
|
152
|
-
import App from
|
|
163
|
+
import "@octaviaflow/fonts/css/octaviaflow-fonts.css";
|
|
164
|
+
import ReactDOM from "react-dom/client";
|
|
165
|
+
import App from "./App";
|
|
153
166
|
|
|
154
|
-
ReactDOM.createRoot(document.getElementById(
|
|
167
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
|
|
155
168
|
```
|
|
156
169
|
|
|
157
170
|
## File Structure
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@octaviaflow/fonts",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Octaviaflow Design System typeface family - Lufga, RTL United Text, and JetBrains Mono",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,10 +38,11 @@
|
|
|
38
38
|
"build": "bun run clean && node tasks/build-css.js"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"rimraf": "^6.0.1"
|
|
42
|
-
"sass": "^1.97.3"
|
|
41
|
+
"rimraf": "^6.0.1"
|
|
43
42
|
},
|
|
44
43
|
"dependencies": {
|
|
45
|
-
"
|
|
44
|
+
"chalk": "4.1.2",
|
|
45
|
+
"ora": "5.4.1",
|
|
46
|
+
"sass": "^1.97.3"
|
|
46
47
|
}
|
|
47
48
|
}
|