@breadcoop/ui 1.0.1 → 1.0.3
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 +49 -1
- package/dist/theme.css +2 -2
- package/package.json +3 -3
- package/theme.css +2 -2
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ npm install @breadcoop/ui
|
|
|
12
12
|
|
|
13
13
|
### Option 1: Drop-in CSS Theme (Simplest)
|
|
14
14
|
|
|
15
|
-
Perfect for projects that want to use pre-built components without configuration.
|
|
15
|
+
Perfect for projects that want to use pre-built components without configuration.
|
|
16
16
|
|
|
17
17
|
```tsx
|
|
18
18
|
import React from "react";
|
|
@@ -33,6 +33,21 @@ function App() {
|
|
|
33
33
|
}
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
+
**For custom fonts (optional):**
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
// Import fonts separately if you want the custom Bread Coop fonts
|
|
40
|
+
import "@breadcoop/ui/fonts";
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
**Note**: If you're using this in a project that already has Tailwind CSS, you might need to import the theme in your main CSS file instead:
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
/* In your main CSS file (e.g., globals.css, index.css) */
|
|
47
|
+
@import "@breadcoop/ui/theme";
|
|
48
|
+
@import "@breadcoop/ui/fonts"; /* Optional: for custom fonts */
|
|
49
|
+
```
|
|
50
|
+
|
|
36
51
|
### Option 2: Tailwind Preset (Maximum Flexibility)
|
|
37
52
|
|
|
38
53
|
For projects that want full Tailwind integration with custom utilities and your design tokens.
|
|
@@ -234,6 +249,39 @@ import { ArrowUpRight, SignOut } from "@phosphor-icons/react";
|
|
|
234
249
|
<LiftedButton disabled>Disabled Button</LiftedButton>
|
|
235
250
|
```
|
|
236
251
|
|
|
252
|
+
## Troubleshooting
|
|
253
|
+
|
|
254
|
+
### Theme Not Loading
|
|
255
|
+
|
|
256
|
+
If the theme styles aren't appearing:
|
|
257
|
+
|
|
258
|
+
1. **Check import path**: Make sure you're importing from `@breadcoop/ui/theme`
|
|
259
|
+
2. **CSS import order**: Import the theme before your component styles
|
|
260
|
+
3. **Build tool compatibility**: Some bundlers require CSS imports in CSS files rather than JS files
|
|
261
|
+
|
|
262
|
+
**Try this approach:**
|
|
263
|
+
|
|
264
|
+
```css
|
|
265
|
+
/* In your main CSS file */
|
|
266
|
+
@import "@breadcoop/ui/theme";
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### Fonts Not Loading
|
|
270
|
+
|
|
271
|
+
If fonts aren't displaying:
|
|
272
|
+
|
|
273
|
+
1. **Check network tab**: Look for 404 errors on font files
|
|
274
|
+
2. **Verify font paths**: The theme.css should be in `node_modules/@breadcoop/ui/dist/theme.css`
|
|
275
|
+
3. **Clear cache**: Try clearing your browser cache and node_modules
|
|
276
|
+
|
|
277
|
+
### Components Not Styled
|
|
278
|
+
|
|
279
|
+
If components render but without styles:
|
|
280
|
+
|
|
281
|
+
1. **Import theme**: Make sure you've imported `@breadcoop/ui/theme`
|
|
282
|
+
2. **Check CSS specificity**: Your custom styles might be overriding the theme
|
|
283
|
+
3. **Verify Tailwind**: If using Tailwind preset, ensure Tailwind is properly configured
|
|
284
|
+
|
|
237
285
|
## Development
|
|
238
286
|
|
|
239
287
|
```bash
|
package/dist/theme.css
CHANGED
|
@@ -96,10 +96,10 @@
|
|
|
96
96
|
@apply font-breadDisplay font-[900] text-[3rem] leading-[36px] md:text-[96px] md:leading-[76px] xl:text-[7rem] xl:leading-[83px] tracking-tight uppercase;
|
|
97
97
|
}
|
|
98
98
|
.text-h2 {
|
|
99
|
-
@apply font-breadDisplay font-[900] text-[
|
|
99
|
+
@apply font-breadDisplay font-[900] text-[3rem] xl:text-[80px] leading-[36px] xl:leading-[63px] tracking-tighter;
|
|
100
100
|
}
|
|
101
101
|
.text-h3 {
|
|
102
|
-
@apply font-breadDisplay font-[900] text-[
|
|
102
|
+
@apply font-breadDisplay font-[900] text-[1.5rem] leading-[20px] md:text-[2.5rem] md:leading-[36px] xl:text-[3rem] xl:leading-[48px] tracking-tight;
|
|
103
103
|
}
|
|
104
104
|
.text-h4 {
|
|
105
105
|
@apply font-breadBody font-[700] text-[24px] xl:text-[2rem] leading-[24px] xl:leading-[2rem];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@breadcoop/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "A component library for implementing Bread Coop branding in JS/TS projects",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
"import": "./dist/index.mjs",
|
|
13
13
|
"require": "./dist/index.js"
|
|
14
14
|
},
|
|
15
|
-
"./style": "./dist/index.css",
|
|
16
15
|
"./tailwind-preset": "./tailwind-preset.js",
|
|
17
|
-
"./theme": "./theme.css",
|
|
16
|
+
"./theme": "./dist/theme.css",
|
|
17
|
+
"./fonts": "./dist/fonts.css",
|
|
18
18
|
"./package.json": "./package.json"
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
package/theme.css
CHANGED
|
@@ -96,10 +96,10 @@
|
|
|
96
96
|
@apply font-breadDisplay font-[900] text-[3rem] leading-[36px] md:text-[96px] md:leading-[76px] xl:text-[7rem] xl:leading-[83px] tracking-tight uppercase;
|
|
97
97
|
}
|
|
98
98
|
.text-h2 {
|
|
99
|
-
@apply font-breadDisplay font-[900] text-[
|
|
99
|
+
@apply font-breadDisplay font-[900] text-[3rem] xl:text-[80px] leading-[36px] xl:leading-[63px] tracking-tighter;
|
|
100
100
|
}
|
|
101
101
|
.text-h3 {
|
|
102
|
-
@apply font-breadDisplay font-[900] text-[
|
|
102
|
+
@apply font-breadDisplay font-[900] text-[1.5rem] leading-[20px] md:text-[2.5rem] md:leading-[36px] xl:text-[3rem] xl:leading-[48px] tracking-tight;
|
|
103
103
|
}
|
|
104
104
|
.text-h4 {
|
|
105
105
|
@apply font-breadBody font-[700] text-[24px] xl:text-[2rem] leading-[24px] xl:leading-[2rem];
|