Restructuring

10 files changed, 116 insertions, 116 deletions

diff --git a/src/_base.scss b/src/_base.scss
index 6e404fe..6e8efbd 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -1,5 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use 'functions' as fn;
+@use 'mixins' as mx;
 
 html,
 body {
@@ -7,7 +8,7 @@ body {
 }
 
 body {
-    @include fn.set-font(--standard, (--size: fn.dim(--font-size --md)));
+    @include mx.set-font(--standard, (--size: fn.dim(--font-size --md)));
 
     margin:           0;
     padding:          0;
diff --git a/src/_config.scss b/src/_config.scss
new file mode 100644
index 0000000..d79153f
--- /dev/null
+++ b/src/_config.scss
@@ -0,0 +1,30 @@
+@use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
+
+iro.$vars-root-size: 16px;
+
+media.$breakpoints: (
+    md: 40rem,
+    sm: 28rem
+);
+
+media.$unit-intervals: (
+    'px':  1,
+    'em':  .01,
+    'rem': .01,
+    '':    0
+);
+
+$wanted-grays: (
+    -1.25,
+    -1.1,
+    1,
+    1.15,
+    1.37,
+    1.73,
+    2.4,
+    3.26,
+    5,
+    11,
+    21,
+);
diff --git a/src/_vars.scss b/src/_declare-vars.scss
index d2fbc10..38d39dd 100644
--- a/src/_vars.scss
+++ b/src/_declare-vars.scss
@@ -1,69 +1,8 @@
-@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
 @use '@oddbird/blend';
 @use 'functions' as fn;
 
-iro.$vars-root-size: 16px;
-
-media.$breakpoints: (
-    md: 40rem,
-    sm: 28rem
-);
-
-media.$unit-intervals: (
-    'px':  1,
-    'em':  .01,
-    'rem': .01,
-    '':    0
-);
-
-$grays: ();
-
-@for $i from 0 through 100 {
-    $grays: append($grays, blend.lch($i * 1% 0 0));
-}
-
-$wanted-grays: (
-    -1.25,
-    -1.1,
-    1,
-    1.15,
-    1.37,
-    1.73,
-    2.4,
-    3.26,
-    5,
-    11,
-    21,
-);
-
-@function accent-palette($base, $dir: 1) {
-    @return (
-        --hi:        blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
-        --main:      $base,
-        --lo:        blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
-        --lo2:       blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
-        --semi:      rgba($base, .4),
-        --selection: rgba($base, .99),
-        --fg:        blend.contrast($base),
-    );
-}
-
-@function gray-palette($lightness) {
-    $colors: fn.multi-contrast(blend.lch($lightness * 1% 0 0), $grays, $wanted-grays);
-
-    $palette: ();
-
-    @for $i from 1 through length($colors) {
-        $palette: map.set($palette, --gray#{$i}, hsl(fn.color(--gray-h), fn.color(--gray-s), lightness(nth($colors, $i))));
-    }
-
-    @return $palette;
-}
-
-//
-
 @include iro.props-store((
     --dims: (
         --spacing: (
@@ -149,10 +88,10 @@ $wanted-grays: (
             --fg-lo:  fn.color(--gray11, null), // Strong text
 
             --accent: (
-                --blue:   accent-palette(blend.lch(48% 50 279)),
-                --red:    accent-palette(blend.lch(48% 50 23)),
-                --green:  accent-palette(blend.lch(58% 50 141)),
-                --yellow: accent-palette(blend.lch(73% 50 90)),
+                --blue:   fn.accent-palette(blend.lch(48% 50 279)),
+                --red:    fn.accent-palette(blend.lch(48% 50 23)),
+                --green:  fn.accent-palette(blend.lch(58% 50 141)),
+                --yellow: fn.accent-palette(blend.lch(73% 50 90)),
 
                 --primary: iro.props-ref('colors', --colors --accent --blue),
                 --error:   iro.props-ref('colors', --colors --accent --red),
@@ -175,11 +114,11 @@ $wanted-grays: (
     ), 'colors');
 
     @include iro.props-store((
-        --colors: gray-palette(94%)
+        --colors: fn.gray-palette(94%)
     ), 'palette-light');
 
     @include iro.props-store((
-        --colors: gray-palette(100%)
+        --colors: fn.gray-palette(100%)
     ), 'palette-light-raised');
 }
 
@@ -189,10 +128,10 @@ $wanted-grays: (
     @include iro.props-store((
         --colors: (
             --accent: (
-                --blue:   accent-palette(blend.lch(58% 60 279), -1),
-                --red:    accent-palette(blend.lch(58% 60 23), -1),
-                --green:  accent-palette(blend.lch(68% 60 141), -1),
-                --yellow: accent-palette(blend.lch(83% 60 90), -1),
+                --blue:   fn.accent-palette(blend.lch(58% 60 279), -1),
+                --red:    fn.accent-palette(blend.lch(58% 60 23), -1),
+                --green:  fn.accent-palette(blend.lch(68% 60 141), -1),
+                --yellow: fn.accent-palette(blend.lch(83% 60 90), -1),
 
                 --primary: iro.props-ref('colors-dark', --colors --accent --blue),
                 --error:   iro.props-ref('colors-dark', --colors --accent --red),
@@ -202,11 +141,11 @@ $wanted-grays: (
     ), 'colors-dark');
 
     @include iro.props-store((
-        --colors: gray-palette(9%)
+        --colors: fn.gray-palette(9%)
     ), 'palette-dark');
 
     @include iro.props-store((
-        --colors: gray-palette(16%)
+        --colors: fn.gray-palette(16%)
     ), 'palette-dark-raised');
 }
 
diff --git a/src/_functions.scss b/src/_functions.scss
index 73a1ec9..56fdf39 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -1,5 +1,7 @@
 @use 'sass:math';
+@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
+@use 'config';
 @use '@oddbird/blend';
 @use '@oddbird/blend/sass/convert' as blend-convert;
 
@@ -53,16 +55,6 @@
     @return $map;
 }
 
-@mixin set-font($basis, $values: ()) {
-    $values: set-font($basis, $values);
-
-    @each $prop, $value in $values {
-        @if $value != null {
-            #{$prop}: $value;
-        }
-    }
-}
-
 @function multi-contrast($base-color, $colors, $wanted-contrasts) {
     $dir:      if(lightness($base-color) >= 50%, -1, 1);
     $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05;
@@ -104,3 +96,33 @@
 
     @return $result;
 }
+
+@function accent-palette($base, $dir: 1) {
+    @return (
+        --hi:        blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
+        --main:      $base,
+        --lo:        blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
+        --lo2:       blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
+        --semi:      rgba($base, .4),
+        --selection: rgba($base, .99),
+        --fg:        blend.contrast($base),
+    );
+}
+
+@function gray-palette($lightness) {
+    $grays: ();
+
+    @for $i from 0 through 100 {
+        $grays: append($grays, blend.lch($i * 1% 0 0));
+    }
+
+    $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays);
+
+    $palette: ();
+
+    @for $i from 1 through length($colors) {
+        $palette: map.set($palette, --gray#{$i}, hsl(color(--gray-h), color(--gray-s), lightness(nth($colors, $i))));
+    }
+
+    @return $palette;
+}
diff --git a/src/_layouts.scss b/src/_layouts.scss
new file mode 100644
index 0000000..99a003e
--- /dev/null
+++ b/src/_layouts.scss
@@ -0,0 +1,4 @@
+@use 'layouts/card';
+@use 'layouts/container';
+@use 'layouts/button-group';
+@use 'layouts/form';
diff --git a/src/_mixins.scss b/src/_mixins.scss
new file mode 100644
index 0000000..e8595f1
--- /dev/null
+++ b/src/_mixins.scss
@@ -0,0 +1,11 @@
+@use 'functions';
+
+@mixin set-font($basis, $values: ()) {
+    $values: functions.set-font($basis, $values);
+
+    @each $prop, $value in $values {
+        @if $value != null {
+            #{$prop}: $value;
+        }
+    }
+}
diff --git a/src/_objects.scss b/src/_objects.scss
new file mode 100644
index 0000000..45415f1
--- /dev/null
+++ b/src/_objects.scss
@@ -0,0 +1,16 @@
+@use 'objects/icon';
+@use 'objects/heading';
+@use 'objects/rule';
+@use 'objects/button';
+@use 'objects/text-field';
+@use 'objects/field-label';
+@use 'objects/radio';
+@use 'objects/checkbox';
+@use 'objects/switch';
+@use 'objects/action-button';
+@use 'objects/status-indicator';
+@use 'objects/avatar';
+@use 'objects/action-menu';
+@use 'objects/menu';
+@use 'objects/backdrop';
+@use 'objects/dialog';
diff --git a/src/index.scss b/src/index.scss
index 21054db..e090427 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,32 +1,8 @@
-@use 'functions';
-
-@use 'vars';
+@use 'declare-vars';
 
 @use 'base';
-
-@use 'layouts/card';
-@use 'layouts/container';
-@use 'layouts/button-group';
-
-@use 'objects/icon';
-@use 'objects/heading';
-@use 'objects/rule';
-@use 'objects/button';
-@use 'objects/text-field';
-@use 'objects/field-label';
-@use 'objects/radio';
-@use 'objects/checkbox';
-@use 'objects/switch';
-@use 'objects/action-button';
-@use 'objects/status-indicator';
-@use 'objects/avatar';
-@use 'objects/action-menu';
-@use 'objects/menu';
-@use 'objects/backdrop';
-@use 'objects/dialog';
-
-@use 'layouts/form';
-
+@use 'layouts';
+@use 'objects';
 @use 'utils';
 
 @use 'apply-vars';
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 4334192..a8308af 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,6 +1,8 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+@use '../objects/field-label';
+
 @include iro.props-namespace('form') {
     @include iro.props-store((
         --dims: (
@@ -11,8 +13,6 @@
     ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
-        @include iro.bem-composed-of('field-label' 'object');
-
         display:        flex;
         flex-direction: column;
         align-items:    baseline;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 24971bb..b5f02d8 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,5 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
+@use '../mixins' as mx;
 
 @include iro.props-namespace('heading') {
     @include iro.props-store((
@@ -20,7 +21,7 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        @include fn.set-font(--headline);
+        @include mx.set-font(--headline);
 
         display:       block;
         margin-top:    fn.dim(--in-page-margin --top);
@@ -51,7 +52,7 @@
         }
 
         @include iro.bem-modifier('sm') {
-            @include fn.set-font(--standard, (
+            @include mx.set-font(--standard, (
                 --line-height: null,
                 --size: fn.global-dim(--font-size --md),
                 --weight: 500
@@ -61,7 +62,7 @@
         }
 
         @include iro.bem-modifier('xs') {
-            @include fn.set-font(--standard, (
+            @include mx.set-font(--standard, (
                 --line-height: null,
                 --size:        fn.global-dim(--font-size --xs),
                 --weight:      500,