breakouts 0.5.1 → 0.5.2

package/README.md

@@ -171,13 +171,13 @@ Or create a custom theme:
 
 ```scss
 // my-theme.scss
-@forward 'breakouts/src/theme/variables' with (
+@forward 'breakouts/src/base/variables' with (
   $color-primary: #d1ff4a,
   $color-accent: #8a2be2
 );
 
-@use 'breakouts/src/theme/variables' as *;
-@forward 'breakouts/src/theme/colors';
+@use 'breakouts/src/base/variables' as *;
+@forward 'breakouts/src/base/colors';
 ```
 
 ---
@@ -197,8 +197,8 @@ Or create a custom theme:
 You can write your own mixins or import individual parts:
 
 ```scss
-@use 'breakouts/utilities/spacing';
-@use 'breakouts/base/typography';
+@use 'breakouts/src/base/spacing';
+@use 'breakouts/src/base/typography';
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "breakouts",
-    "version": "0.5.1",
+    "version": "0.5.2",
     "description": "A personal SCSS/CSS layout utility framework.",
     "main": "dist/breakouts.css",
     "files": [

package/src/theme/_chupa-pop.scss

@@ -4,25 +4,20 @@
 // The theme variables are used to customize the appearance of the Chupa Pop theme.
 // The theme variables are defined using the SCSS @use and @forward directives.
 
-$primary: #ecb838 !default;
-$secondary: #ab4073 !default;
-$accent: #196484 !default;
-
 @forward '../base/variables' with (
-  $color-primary: $primary,
-  $color-primary-dark: darken($primary, 15%),
-  $color-primary-light: lighten($primary, 15%),
+    $color-primary: #ecb838,
+    $color-primary-dark: darken(#ecb838, 15%),
+    $color-primary-light: lighten(#ecb838, 15%),
 
-  $color-secondary: $secondary,
-  $color-secondary-dark: darken($secondary, 15%),
-  $color-secondary-light: lighten($secondary, 15%),
+    $color-secondary: #ab4073,
+    $color-secondary-dark: darken(#ab4073, 15%),
+    $color-secondary-light: lighten(#ab4073, 15%),
 
-  $color-accent: $accent,
-  $color-accent-dark: darken($accent, 15%),
-  $color-accent-light: lighten($accent, 15%),
+    $color-accent: #196484,
+    $color-accent-dark: darken(#196484, 15%),
+    $color-accent-light: lighten(#196484, 15%),
 );
 
-@use '../base/variables' as *;
 @forward '../base/colors';
 @forward '../base/reset';
 @forward '../base/typography';

package/src/theme/_medical.scss

@@ -4,35 +4,28 @@
 // The theme variables are used to customize the appearance of the Medical theme.
 // The theme variables are defined using the SCSS @use and @forward directives.
 
-$primary: #4682B4 !default;
-$secondary: #9DC183 !default;
-$accent: #A9A9A9 !default;
-$muted: #D3D3D3 !default;
-$background: #FFFFFF !default;
-
 @forward '../base/variables' with (
-    $color-primary: $primary,
-    $color-primary-dark: darken($primary, 15%),
-    $color-primary-light: lighten($primary, 15%),
+    $color-primary: #4682B4,
+    $color-primary-dark: darken(#4682B4, 15%),
+    $color-primary-light: lighten(#4682B4, 15%),
 
-    $color-secondary: $secondary,
-    $color-secondary-dark: darken($secondary, 15%),
-    $color-secondary-light: lighten($secondary, 15%),
+    $color-secondary: #9DC183,
+    $color-secondary-dark: darken(#9DC183, 15%),
+    $color-secondary-light: lighten(#9DC183, 15%),
 
-    $color-accent: $accent,
-    $color-accent-dark: darken($accent, 15%),
-    $color-accent-light: lighten($accent, 15%),
+    $color-accent: #A9A9A9,
+    $color-accent-dark: darken(#A9A9A9, 15%),
+    $color-accent-light: lighten(#A9A9A9, 15%),
 
-    $color-muted: $muted,
-    $color-muted-dark: darken($muted, 15%),
-    $color-muted-light: lighten($muted, 15%),
+    $color-muted: #D3D3D3,
+    $color-muted-dark: darken(#D3D3D3, 15%),
+    $color-muted-light: lighten(#D3D3D3, 15%),
 
-    $color-background: $background,
-    $color-background-dark: darken($background, 5%),
-    $color-background-light: lighten($background, 5%)
+    $color-background: #FFFFFF,
+    $color-background-dark: darken(#FFFFFF, 5%),
+    $color-background-light: lighten(#FFFFFF, 5%)
 );
 
-@use '../base/variables' as *;
 @forward '../base/colors';
 @forward '../base/reset';
 @forward '../base/typography';

package/src/theme/_tootsie-pop.scss

@@ -4,35 +4,28 @@
 // The theme variables are used to customize the appearance of the Tootsie Pop theme.
 // The theme variables are defined using the SCSS @use and @forward directives.
 
-$primary: #93329E !default;
-$secondary: #F2711C !default;
-$accent: #E94057 !default;
-$muted: #FFE5B4 !default;
-$background: #4F2F4C !default;
-
 @forward '../base/variables' with (
-  $color-primary: $primary,
-  $color-primary-dark: darken($primary, 15%),
-  $color-primary-light: lighten($primary, 15%),
+  $color-primary: #93329E,
+  $color-primary-dark: darken(#93329E, 15%),
+  $color-primary-light: lighten(#93329E, 15%),
 
   $color-secondary: $secondary,
   $color-secondary-dark: darken($secondary, 15%),
   $color-secondary-light: lighten($secondary, 15%),
 
-  $color-accent: $accent,
-  $color-accent-dark: darken($accent, 15%),
-  $color-accent-light: lighten($accent, 15%),
+  $color-accent: #E94057,
+  $color-accent-dark: darken(#E94057, 15%),
+  $color-accent-light: lighten(#E94057, 15%),
 
-  $color-muted: $muted,
-  $color-muted-dark: darken($muted, 15%),
-  $color-muted-light: lighten($muted, 15%),
+  $color-muted: #FFE5B4,
+  $color-muted-dark: darken(#FFE5B4, 15%),
+  $color-muted-light: lighten(#FFE5B4, 15%),
 
-  $color-background: $background,
-  $color-background-dark: darken($background, 5%),
-  $color-background-light: lighten($background, 5%)
+  $color-background: #4F2F4C,
+  $color-background-dark: darken(#4F2F4C, 5%),
+  $color-background-light: lighten(#4F2F4C, 5%)
 );
 
-@use '../base/variables' as *;
 @forward '../base/colors';
 @forward '../base/reset';
 @forward '../base/typography';