1 files changed, 30 insertions, 27 deletions

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 89d10fe..fedb72f 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -101,6 +101,24 @@
 
 @include iro.props-store((
     --colors: (
+        --gray: fn.gray-palette(100%),
+    ),
+), 'palette-light-hi');
+
+@include iro.props-store((
+    --colors: (
+        --gray: fn.gray-palette(96%),
+    ),
+), 'palette-light');
+
+@include iro.props-store((
+    --colors: (
+        --gray: fn.gray-palette(92%),
+    ),
+), 'palette-light-lo');
+
+@include iro.props-store((
+    --colors: (
         --bg-hi2: fn.color(--gray --1, null), // Lightest background
         --bg-hi:  fn.color(--gray --2, null), // Lighter background
         --bg:     fn.color(--gray --3, null), // Background
@@ -115,7 +133,8 @@
         --fg:     fn.color(--gray --10, null), // Text
         --fg-lo:  fn.color(--gray --11, null), // Strong text
 
-        --gray:   ( --h: 220, --s: 0% ),
+        --border: iro.props-get-static(--colors --gray --5, 'palette-light'),
+
         --blue:   fn.color-palette(blend.lch(48% 50 279)),
         --purple: fn.color-palette(blend.lch(48% 50 308)),
         --red:    fn.color-palette(blend.lch(48% 50 23)),
@@ -146,28 +165,30 @@
     ),
 ), 'colors');
 
+//
+
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(100%),
+        --gray: fn.gray-palette(5%),
     ),
-), 'palette-light-hi');
+), 'palette-dark-hi');
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(96%),
+        --gray: fn.gray-palette(9%),
     ),
-), 'palette-light');
+), 'palette-dark');
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(92%),
+        --gray: fn.gray-palette(13%),
     ),
-), 'palette-light-lo');
-
-//
+), 'palette-dark-lo');
 
 @include iro.props-store((
     --colors: (
+        --border: iro.props-get-static(--colors --gray --5, 'palette-dark'),
+
         --blue:   fn.color-palette(blend.lch(63% 50 279), -1),
         --purple: fn.color-palette(blend.lch(63% 50 308), -1),
         --red:    fn.color-palette(blend.lch(63% 50 23), -1),
@@ -185,24 +206,6 @@
     )
 ), 'colors-dark');
 
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(5%),
-    ),
-), 'palette-dark-hi');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(9%),
-    ),
-), 'palette-dark');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(13%),
-    ),
-), 'palette-dark-lo');
-
 //
 
 @each $breakpoint in map-keys(media.$breakpoints) {