8 files changed, 75 insertions, 69 deletions

diff --git a/.stylelintrc.json b/.stylelintrc.json
index f599304..79482ee 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -3,7 +3,7 @@
     "rules": {
         "indentation": 4,
         "number-leading-zero": "never",
-        "max-nesting-depth": 6,
+        "max-nesting-depth": 8,
         "selector-class-pattern": [
             "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
             { "resolveNestedSelectors": true }
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
new file mode 100644
index 0000000..cf4c940
--- /dev/null
+++ b/src/_apply-vars.scss
@@ -0,0 +1,50 @@
+@use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
+
+:root {
+    @include iro.props-assign('dims');
+
+    @each $breakpoint in map-keys(media.$breakpoints) {
+        @include media.media('<=#{$breakpoint}') {
+            @include iro.props-assign($breakpoint);
+        }
+    }
+
+    @include iro.props-assign('colors');
+    @include iro.props-assign('palette-light');
+
+    @media (prefers-color-scheme: dark) {
+        @include iro.props-assign('palette-dark');
+    }
+}
+
+@include iro.bem-theme('raised') {
+    @include iro.props-assign('colors');
+    @include iro.props-assign('palette-light-raised');
+
+    @media (prefers-color-scheme: dark) {
+        @include iro.props-assign('palette-dark-raised');
+    }
+}
+
+@include iro.bem-theme('grayscale') {
+    @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent);
+}
+
+/*@media (prefers-color-scheme: dark) {
+    @include iro.props-assign('dark');
+    @include iro.props-assign('dark-palette');
+
+    @include iro.bem-theme('grayscale') {
+        @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
+    }
+
+    @include iro.bem-theme('raised') {
+        @include iro.props-assign('dark-raised-palette');
+        @include iro.props-assign('dark');
+    
+        @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
+            @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
+        }
+    }
+}*/
diff --git a/src/_general.scss b/src/_base.scss
index 54df879..54df879 100644
--- a/src/_general.scss
+++ b/src/_base.scss
diff --git a/src/index.scss b/src/index.scss
index 813764c..24b8d72 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,71 +1,25 @@
-@use 'iro-sass/src/index' as iro;
-@use 'include-media/dist/include-media' as media;
+@use 'functions';
 
-@import 'vars';
-@import 'general';
+@use 'vars';
 
-@import 'layouts/card';
-@import 'layouts/container';
+@use 'base';
 
-@import 'objects/icon';
-@import 'objects/heading';
-@import 'objects/rule';
-@import 'objects/button';
-@import 'objects/text-field';
-@import 'objects/field-label';
-@import 'objects/radio';
-@import 'objects/checkbox';
-@import 'objects/switch';
-@import 'objects/action-button';
-@import 'objects/status-indicator';
-@import 'objects/avatar';
+@use 'layouts/card';
+@use 'layouts/container';
 
-@import 'layouts/form';
+@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';
 
-:root {
-    @include iro.props-assign('dims');
+@use 'layouts/form';
 
-    @each $breakpoint in map-keys(media.$breakpoints) {
-        @include media.media('<=#{$breakpoint}') {
-            @include iro.props-assign($breakpoint);
-        }
-    }
-
-    @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light');
-
-    @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('palette-dark');
-    }
-}
-
-@include iro.bem-theme('raised') {
-    @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light-raised');
-
-    @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('palette-dark-raised');
-    }
-}
-
-@include iro.bem-theme('grayscale') {
-    @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent);
-}
-
-/*@media (prefers-color-scheme: dark) {
-    @include iro.props-assign('dark');
-    @include iro.props-assign('dark-palette');
-
-    @include iro.bem-theme('grayscale') {
-        @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
-    }
-
-    @include iro.bem-theme('raised') {
-        @include iro.props-assign('dark-raised-palette');
-        @include iro.props-assign('dark');
-    
-        @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
-            @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
-        }
-    }
-}*/
+@use 'apply-vars';
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index aa4a166..7225807 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -11,6 +11,8 @@
     ), '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/_checkbox.scss b/src/objects/_checkbox.scss
index 5ea2e4a..efc85d6 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,7 +4,7 @@
 @include iro.props-namespace('checkbox') {
     @include iro.props-store((
         --dims: (
-            --size:         iro.fn-px-to-rem(13px),
+            --size:         iro.fn-px-to-rem(14px),
             --label-gap:    .6rem,
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        .3rem,
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 442034b..46f2a2a 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,7 +4,7 @@
 @include iro.props-namespace('radio') {
     @include iro.props-store((
         --dims: (
-            --diameter:     iro.fn-px-to-rem(14px),
+            --diameter:     iro.fn-px-to-rem(15px),
             --label-gap:    .6rem,
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        .3rem,
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 9911b73..59e4c55 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -5,7 +5,7 @@
     @include iro.props-store((
         --dims: (
             --width:        iro.fn-px-to-rem(26px),
-            --height:       iro.fn-px-to-rem(14px),
+            --height:       iro.fn-px-to-rem(15px),
             --label-gap:    .6rem,
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        .3rem,