Added global border color

4 files changed, 33 insertions, 30 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) {
diff --git a/src/_functions.scss b/src/_functions.scss
index 5a30a88..7b43d95 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -125,7 +125,7 @@
     $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays);
 
     @each $key, $color in $colors {
-        $colors: map.set($colors, $key, hsl(color(--gray --h), color(--gray --s), lightness($color)));
+        $colors: map.set($colors, $key, $color);
     }
 
     @return $colors;
diff --git a/src/_utils.scss b/src/_utils.scss
index 4aea27c..7981125 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -123,6 +123,6 @@ $dirs: (
     }
     
     @include iro.bem-utility('b#{$dir}-1') {
-        border#{$suffix}: 1px solid fn.global-color(--obj);
+        border#{$suffix}: 1px solid fn.global-color(--border);
     }
 }
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index ac77a66..7c9fb57 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -37,7 +37,7 @@
     @include iro.props-store((
         --colors: (
             --outer-border: rgba(#000, .2),
-            --inner-border: fn.global-color(--obj),
+            --inner-border: fn.global-color(--border),
             --shadow:       0 .2em .5em rgba(#000, .2),
         ),
     ), 'colors');