breakouts 0.0.13 → 0.0.14
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 +38 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -236,6 +236,44 @@ And will apply to utility classes like:
|
|
|
236
236
|
|
|
237
237
|
You can also override any other color or spacing variable defined in the framework for full control.
|
|
238
238
|
|
|
239
|
+
## 🎨 Custom Theme Setup
|
|
240
|
+
|
|
241
|
+
If you're using a bundler like Vite or Webpack and encounter issues with `@use ... with`, the recommended approach is to recreate Breakouts' internal structure in your own project and apply theming from there.
|
|
242
|
+
|
|
243
|
+
### ✅ Example: Create a custom `breakouts.scss`
|
|
244
|
+
|
|
245
|
+
```scss
|
|
246
|
+
// src/styles/breakouts.scss
|
|
247
|
+
|
|
248
|
+
@forward 'breakouts/src/theme/variables' with (
|
|
249
|
+
$color-primary: #d1ff4a,
|
|
250
|
+
$color-primary-dark: darken(#d1ff4a, 15%),
|
|
251
|
+
$color-primary-light: lighten(#d1ff4a, 15%),
|
|
252
|
+
|
|
253
|
+
$color-accent: #8a2be2,
|
|
254
|
+
$color-accent-dark: darken(#8a2be2, 15%),
|
|
255
|
+
$color-accent-light: lighten(#8a2be2, 15%)
|
|
256
|
+
);
|
|
257
|
+
|
|
258
|
+
@use 'breakouts/src/theme/variables' as *;
|
|
259
|
+
@forward 'breakouts/src/theme/colors';
|
|
260
|
+
@forward 'breakouts/src/base/reset';
|
|
261
|
+
@forward 'breakouts/src/base/typography';
|
|
262
|
+
@forward 'breakouts/src/layout/container';
|
|
263
|
+
@forward 'breakouts/src/layout/full-bleed';
|
|
264
|
+
@forward 'breakouts/src/layout/breakouts';
|
|
265
|
+
@forward 'breakouts/src/layout/grid';
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
💡 Use your custom theme
|
|
269
|
+
In your app entry point or component:
|
|
270
|
+
|
|
271
|
+
```scss
|
|
272
|
+
@use '@/styles/breakouts' as *;
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
This gives you full control over the theme while keeping the rest of the framework intact.
|
|
276
|
+
|
|
239
277
|
## 🛠️ Development
|
|
240
278
|
|
|
241
279
|
To build or modify Breakouts locally, follow these steps:
|