6 files changed, 73 insertions, 51 deletions

diff --git a/src_demo/_base.scss b/src_demo/_base.scss
index 129b319..67dfa06 100644
--- a/src_demo/_base.scss
+++ b/src_demo/_base.scss
@@ -1,13 +1,13 @@
 body {
     display:               grid;
-    grid-template-columns: auto 1fr;
     grid-template-areas:   'sidebar content';
+    grid-template-columns: auto 1fr;
 }
 
 @font-face {
     font-family:  'Garet';
     font-style:   normal;
     font-weight:  50 950;
-    font-display: swap;
     src:          url('/garet.woff2') format('woff2-variations');
+    font-display: swap;
 }
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss
index 21d61c0..d40a8b2 100644
--- a/src_demo/components/_box.scss
+++ b/src_demo/components/_box.scss
@@ -1,16 +1,9 @@
-@use 'iro-sass/src/index' as iro;
-@use '../../src/functions' as fn;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../../src/core.vars';
 
-@include iro.props-namespace('box') {
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--border),
-        ),
-    ));
-
-    @include iro.bem-component(iro.props-namespace()) {
-        margin-block: 2em;
-        padding:      2em;
-        border:       1px solid fn.color(--border);
-    }
+@include bem.component('box') {
+    padding:      2em;
+    margin-block: 2em;
+    border:       1px solid props.get(core.$theme, --border);
 }
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
index 2f9a2d0..026b0ec 100644
--- a/src_demo/components/_content.scss
+++ b/src_demo/components/_content.scss
@@ -1,8 +1,6 @@
-@use 'iro-sass/src/index' as iro;
+@use 'iro-sass/src/bem';
 
-@include iro.props-namespace('content') {
-    @include iro.bem-component(iro.props-namespace()) {
-        grid-area: content;
-        overflow:  auto;
-    }
+@include bem.component('content') {
+    grid-area: content;
+    overflow:  auto;
 }
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index 7dca65a..da5d27c 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -1,10 +1,7 @@
-@use 'iro-sass/src/index' as iro;
-@use '../../src/functions' as fn;
+@use 'iro-sass/src/bem';
 
-@include iro.props-namespace('sidebar') {
-    @include iro.bem-component(iro.props-namespace()) {
-        grid-area:        sidebar;
-        min-inline-size:  15em;
-        min-block-size:   0;
-    }
+@include bem.component('sidebar') {
+    grid-area:        sidebar;
+    min-inline-size:  15em;
+    min-block-size:   0;
 }
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss
index 8086280..95e9db5 100644
--- a/src_demo/components/_view.scss
+++ b/src_demo/components/_view.scss
@@ -1,12 +1,9 @@
-@use 'iro-sass/src/index' as iro;
-@use '../../src/functions' as fn;
+@use 'iro-sass/src/bem';
 
-@include iro.props-namespace('view') {
-    @include iro.bem-component(iro.props-namespace()) {
-        display: none;
+@include bem.component('view') {
+    display: none;
 
-        &:target {
-            display: block;
-        }
+    &:target {
+        display: block;
     }
 }
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 4845e03..1fdf290 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -1,18 +1,55 @@
-@use '../src/declare-vars';
+@use '../src/iro-design' as iro;
 
-@use '../src/base';
-@use 'base' as demo-base;
+@include iro.core--styles;
 
-@use 'components/sidebar';
-@use 'components/content';
-@use 'components/box';
-@use 'components/view';
+@include iro.s-implicit--styles;
+@include iro.s-blockquotes--styles;
+@include iro.s-code--styles;
+@include iro.s-headings--styles;
+@include iro.s-links--styles;
+@include iro.s-lists--styles;
+@include iro.s-tables--styles;
 
-@use '../src/layouts';
-@use '../src/objects';
-@use '../src/scopes';
-@use '../src/themes';
-@use '../src/utils';
+@include iro.l-button-group--styles;
+@include iro.l-card-list--styles;
+@include iro.l-container--styles;
+@include iro.l-flex--styles;
+@include iro.l-form--styles;
+@include iro.l-media--styles;
+@include iro.l-overflow--styles;
+@include iro.l-split-view--styles;
 
-@use '../src/apply-vars';
+@include iro.o-icon--styles;
+@include iro.o-action-button--styles;
+@include iro.o-alert--styles;
+@include iro.o-avatar--styles;
+@include iro.o-backdrop--styles;
+@include iro.o-badge--styles;
+@include iro.o-button--styles;
+@include iro.o-card--styles;
+@include iro.o-checkbox--styles;
+@include iro.o-divider--styles;
+@include iro.o-emoji--styles;
+@include iro.o-field-label--styles;
+@include iro.o-heading--styles;
+@include iro.o-lightbox--styles;
+@include iro.o-menu--styles;
+@include iro.o-palette--styles;
+@include iro.o-popover--styles;
+@include iro.o-radio--styles;
+@include iro.o-side-nav--styles;
+@include iro.o-status-indicator--styles;
+@include iro.o-switch--styles;
+@include iro.o-table--styles;
+@include iro.o-text-field--styles;
+@include iro.o-thumbnail--styles;
 
+@include iro.utils--styles;
+
+@include iro.themes--styles;
+
+@import 'base';
+@import 'components/box';
+@import 'components/content';
+@import 'components/sidebar';
+@import 'components/view';