breakouts 0.5.1 → 0.5.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 +12 -5
- package/package.json +1 -1
- package/src/theme/_chupa-pop.scss +6 -6
- package/src/theme/_tootsie-pop.scss +6 -6
package/README.md
CHANGED
|
@@ -171,13 +171,13 @@ Or create a custom theme:
|
|
|
171
171
|
|
|
172
172
|
```scss
|
|
173
173
|
// my-theme.scss
|
|
174
|
-
@forward 'breakouts/src/
|
|
174
|
+
@forward 'breakouts/src/base/variables' with (
|
|
175
175
|
$color-primary: #d1ff4a,
|
|
176
176
|
$color-accent: #8a2be2
|
|
177
177
|
);
|
|
178
178
|
|
|
179
|
-
@use 'breakouts/src/
|
|
180
|
-
@forward 'breakouts/src/
|
|
179
|
+
@use 'breakouts/src/base/variables' as *;
|
|
180
|
+
@forward 'breakouts/src/base/colors';
|
|
181
181
|
```
|
|
182
182
|
|
|
183
183
|
---
|
|
@@ -190,6 +190,13 @@ Or create a custom theme:
|
|
|
190
190
|
| **Medical** | Calm, healthcare-inspired palette with blues and greens | `@use 'breakouts/src/theme/medical'` |
|
|
191
191
|
| **Tootsie Pop**| Retro and playful candy-themed palette | `@use 'breakouts/src/theme/tootsie-pop'` |
|
|
192
192
|
|
|
193
|
+
Case of use
|
|
194
|
+
|
|
195
|
+
```scss
|
|
196
|
+
@use 'breakouts/src/theme/chupa-pop';
|
|
197
|
+
@use 'breakouts' as *;
|
|
198
|
+
```
|
|
199
|
+
|
|
193
200
|
---
|
|
194
201
|
|
|
195
202
|
## 💡 Extend Breakouts
|
|
@@ -197,8 +204,8 @@ Or create a custom theme:
|
|
|
197
204
|
You can write your own mixins or import individual parts:
|
|
198
205
|
|
|
199
206
|
```scss
|
|
200
|
-
@use 'breakouts/
|
|
201
|
-
@use 'breakouts/base/typography';
|
|
207
|
+
@use 'breakouts/src/base/spacing';
|
|
208
|
+
@use 'breakouts/src/base/typography';
|
|
202
209
|
```
|
|
203
210
|
|
|
204
211
|
---
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@ $primary: #ecb838 !default;
|
|
|
8
8
|
$secondary: #ab4073 !default;
|
|
9
9
|
$accent: #196484 !default;
|
|
10
10
|
|
|
11
|
-
@forward '
|
|
11
|
+
@forward 'breakouts/src/theme/variables' with (
|
|
12
12
|
$color-primary: $primary,
|
|
13
13
|
$color-primary-dark: darken($primary, 15%),
|
|
14
14
|
$color-primary-light: lighten($primary, 15%),
|
|
@@ -22,8 +22,8 @@ $accent: #196484 !default;
|
|
|
22
22
|
$color-accent-light: lighten($accent, 15%),
|
|
23
23
|
);
|
|
24
24
|
|
|
25
|
-
@use '
|
|
26
|
-
@forward '
|
|
27
|
-
@forward '
|
|
28
|
-
@forward '
|
|
29
|
-
@forward '
|
|
25
|
+
@use 'breakouts/src/theme/variables' as *;
|
|
26
|
+
@forward 'breakouts/src/theme/colors';
|
|
27
|
+
@forward 'breakouts/src/base/reset';
|
|
28
|
+
@forward 'breakouts/src/base/typography';
|
|
29
|
+
@forward 'breakouts/src/base/layout';
|
|
@@ -10,7 +10,7 @@ $accent: #E94057 !default;
|
|
|
10
10
|
$muted: #FFE5B4 !default;
|
|
11
11
|
$background: #4F2F4C !default;
|
|
12
12
|
|
|
13
|
-
@forward '
|
|
13
|
+
@forward 'breakouts/src/theme/variables' with (
|
|
14
14
|
$color-primary: $primary,
|
|
15
15
|
$color-primary-dark: darken($primary, 15%),
|
|
16
16
|
$color-primary-light: lighten($primary, 15%),
|
|
@@ -32,8 +32,8 @@ $background: #4F2F4C !default;
|
|
|
32
32
|
$color-background-light: lighten($background, 5%)
|
|
33
33
|
);
|
|
34
34
|
|
|
35
|
-
@use '
|
|
36
|
-
@forward '
|
|
37
|
-
@forward '
|
|
38
|
-
@forward '
|
|
39
|
-
@forward '
|
|
35
|
+
@use 'breakouts/src/theme/variables' as *;
|
|
36
|
+
@forward 'breakouts/src/theme/colors';
|
|
37
|
+
@forward 'breakouts/src/base/reset';
|
|
38
|
+
@forward 'breakouts/src/base/typography';
|
|
39
|
+
@forward 'breakouts/src/base/layout';
|