1 files changed, 47 insertions, 38 deletions

diff --git a/src/_vars.scss b/src/_vars.scss
index 5a6c1d0..d2bdf38 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,13 +1,14 @@
 @use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
 
 iro.$vars-root-size: 16px;
 
-$breakpoints: (
+media.$breakpoints: (
     md: 40rem,
     sm: 28rem
 );
 
-$unit-intervals: (
+media.$unit-intervals: (
     'px':  1,
     'em':  .01,
     'rem': .01,
@@ -22,45 +23,15 @@ $font--main: (
 );
 
 $font--headline: (
-    family:         ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
-    line-height:    1.2,
-    weight:         700,
+    family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
+    line-height: 1.2,
+    weight:      700,
 );
 
 $line-height: map-get($font--main, line-height);
 
 //
 
-$theme-light: (
-    --gray1:  hsl(210, 0%, 100%), // 1.11
-    --gray2:  hsl(210, 0%, 98%), // 1.07
-    --gray3:  hsl(210, 0%, 95%), // 1
-    --gray4:  hsl(210, 0%, 90%), // 1.11
-    --gray5:  hsl(210, 0%, 87%), // 1.2
-    --gray6:  hsl(210, 0%, 78%), // 1.51
-    --gray7:  hsl(210, 0%, 69%), // 1.93
-    --gray8:  hsl(210, 0%, 55%), // 3
-    --gray9:  hsl(210, 0%, 38%), // 5.53
-    --gray10: hsl(210, 0%, 19%), // 11.78
-    --gray11: hsl(210, 0%, 0%), // 18.75 
-);
-
-$theme-lighter: (
-    --gray1:  hsl(210, 0%, 100%), // 1
-    --gray2:  hsl(210, 0%, 100%), // 1
-    --gray3:  hsl(210, 0%, 100%), // 1
-    --gray4:  hsl(210, 0%, 95%), // 1.11
-    --gray5:  hsl(210, 0%, 92%), // 1.19
-    --gray6:  hsl(210, 0%, 82%), // 1.52
-    --gray7:  hsl(210, 0%, 73%), // 1.94
-    --gray8:  hsl(210, 0%, 58%), // 3.03
-    --gray9:  hsl(210, 0%, 41%), // 5.48
-    --gray10: hsl(210, 0%, 22%), // 11.72
-    --gray11: hsl(210, 0%, 0%), // 21
-);
-
-//
-
 @include iro.fn-execute {
     $primary-accent-base: hsl(222, 49.8%, 52.4%);
     $error-accent-base:   hsl(352, 49.8%, 52.4%);
@@ -119,6 +90,18 @@ $theme-lighter: (
         ),
         
         --colors: (
+            --gray1:  hsl(210, 0%, 100%), // 1.11
+            --gray2:  hsl(210, 0%, 98%),  // 1.07
+            --gray3:  hsl(210, 0%, 95%),  // 1
+            --gray4:  hsl(210, 0%, 90%),  // 1.11
+            --gray5:  hsl(210, 0%, 87%),  // 1.2
+            --gray6:  hsl(210, 0%, 78%),  // 1.51
+            --gray7:  hsl(210, 0%, 69%),  // 1.93
+            --gray8:  hsl(210, 0%, 55%),  // 3
+            --gray9:  hsl(210, 0%, 38%),  // 5.53
+            --gray10: hsl(210, 0%, 19%),  // 11.78
+            --gray11: hsl(210, 0%, 0%),   // 18.75
+
             --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background
             --bg-hi:  iro.props-get(--colors --gray2, null), // Lighter background
             --bg:     iro.props-get(--colors --gray3, null), // Background
@@ -183,18 +166,44 @@ $theme-lighter: (
             ),
         ),
     ));
+
+    @include iro.props-store((
+        --colors: (
+            --gray1:  hsl(210, 0%, 100%), // 1
+            --gray2:  hsl(210, 0%, 100%), // 1
+            --gray3:  hsl(210, 0%, 100%), // 1
+            --gray4:  hsl(210, 0%, 95%),  // 1.11
+            --gray5:  hsl(210, 0%, 92%),  // 1.19
+            --gray6:  hsl(210, 0%, 82%),  // 1.52
+            --gray7:  hsl(210, 0%, 73%),  // 1.94
+            --gray8:  hsl(210, 0%, 58%),  // 3.03
+            --gray9:  hsl(210, 0%, 41%),  // 5.48
+            --gray10: hsl(210, 0%, 22%),  // 11.72
+            --gray11: hsl(210, 0%, 0%),   // 21
+        )
+    ), 'light-raised');
 }
 
 //
 
 @include iro.fn-execute {
-    @include iro.props-store((), 'dark');
+    @include iro.fn-execute {
+        @include iro.props-store((
+            --colors: ()
+        ), 'dark');
+    }
+    
+    @include iro.fn-execute {
+        @include iro.props-store((
+            --colors: ()
+        ), 'dark-raised');
+    }
 }
 
 //
 
-@each $breakpoint in map-keys($breakpoints) {
-    @include media('<=#{$breakpoint}') {
+@each $breakpoint in map-keys(media.$breakpoints) {
+    @include media.media('<=#{$breakpoint}') {
         @include iro.props-store((
             --colors: ()
         ), $breakpoint);