Added menu

5 files changed, 114 insertions, 33 deletions

diff --git a/src/_functions.scss b/src/_functions.scss
index f15ed0c..9425413 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -43,6 +43,7 @@
         font-style:              font-prop($font, $overrides, $key, --style),
         line-height:             font-prop($font, $overrides, $key, --line-height),
         text-transform:          font-prop($font, $overrides, $key, --transform),
+        letter-spacing:          font-prop($font, $overrides, $key, --spacing),
         font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates),
     );
 
diff --git a/src/index.scss b/src/index.scss
index b4c437e..44fba76 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -20,6 +20,7 @@
 @use 'objects/status-indicator';
 @use 'objects/avatar';
 @use 'objects/action-menu';
+@use 'objects/menu';
 
 @use 'layouts/form';
 
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 2c922f8..ff88774 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -43,8 +43,6 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        @include iro.bem-composed-of('action-button' 'object');
-
         position:         absolute;
         z-index:          10000;
         top:              fn.dim(--y);
@@ -72,12 +70,6 @@
             transform: translate(-100%, 0);
         }
 
-        @include iro.bem-elem('separator') {
-            height:           1px;
-            margin:           fn.dim(--separator) 0;
-            background-color: fn.color(--separator);
-        }
-
         @include iro.bem-elem('item') {
             display:    block;
             box-sizing: border-box;
@@ -91,18 +83,10 @@
             &:enabled {
                 color: currentColor;
 
-                @include iro.bem-elem('icon') {
-                    color: fn.color(--icon);
-                }
-
                 &:hover,
                 &:active {
                     background-color: fn.color(--item --hover --bg);
                     color:            fn.color(--item --hover --label);
-
-                    @include iro.bem-elem('icon') {
-                        color: currentColor;
-                    }
                 }
     
                 @include iro.bem-at-theme('keyboard') {
@@ -112,15 +96,17 @@
                         background-color: fn.color(--item --key-focus --bg);
                         box-shadow:       fn.color(--item --key-focus --shadow);
                         color:            fn.color(--item --key-focus --label);
-
-                        @include iro.bem-elem('icon') {
-                            color: currentColor;
-                        }
                     }
                 }
             }
         }
 
+        @include iro.bem-elem('separator') {
+            height:           1px;
+            margin:           fn.dim(--separator) 0;
+            background-color: fn.color(--separator);
+        }
+
         @include iro.bem-elem('slot') {
             padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
         }
@@ -130,9 +116,5 @@
             justify-content: center;
             width:           1em;
         }
-
-        @include iro.bem-elem('icon') {
-            color: fn.color(--item --disabled --label);
-        }
     }
 }
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index cd91c61..c1feb5e 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -51,20 +51,25 @@
         }
 
         @include iro.bem-modifier('sm') {
-            @include fn.set-font(--standard, (--line-height: null));
+            @include fn.set-font(--standard, (
+                --line-height: null,
+                --size: fn.global-dim(--font-size --md),
+                --weight: 500
+            ));
 
-            color:       fn.color(--strong);
-            font-size:   fn.global-dim(--font-size --md);
-            font-weight: 500;
+            color: fn.color(--strong);
         }
 
         @include iro.bem-modifier('xs') {
-            @include fn.set-font(--standard, (--line-height: null));
+            @include fn.set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(--font-size --xs),
+                --weight:      500,
+                --transform:   uppercase,
+                --spacing:     .5px
+            ));
 
-            color:          fn.color(--light);
-            font-size:      fn.global-dim(--font-size --xs);
-            font-weight:    500;
-            text-transform: uppercase;
+            color: fn.color(--light);
         }
     }
 }
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
new file mode 100644
index 0000000..91ef0a5
--- /dev/null
+++ b/src/objects/_menu.scss
@@ -0,0 +1,92 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('menu') {
+    @include iro.props-store((
+        --dims: (
+            --separator: .6rem,
+            --item: (
+                --pad-x: .8rem,
+                --pad-y: .4rem,
+            ),
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --header: (
+                --label:  fn.global-color(--fg-hi2),
+            ),
+            --item: (
+                --hover: (
+                    --bg:    fn.global-color(--obj-hi),
+                    --label: fn.global-color(--fg-lo),
+                ),
+                --disabled: (
+                    --label: fn.global-color(--fg-hi3),
+                ),
+                --key-focus: (
+                    --bg:     fn.global-color(--obj-hi),
+                    --label:  fn.global-color(--fg-lo),
+                    --border: fn.global-color(--focus --fill),
+                    --shadow: fn.global-color(--focus --shadow),
+                ),
+            ),
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        @include iro.bem-elem('header') {
+            padding:
+                calc(1.5 * fn.dim(--item --pad-y))
+                fn.dim(--item --pad-x)
+                calc(.5 * fn.dim(--item --pad-y));
+            color:          fn.color(--header --label);
+            font-size:      fn.global-dim(--font-size --xs);
+            font-weight:    500;
+            letter-spacing: .5px;
+            text-transform: uppercase;
+        }
+
+        @include iro.bem-elem('item') {
+            display:    block;
+            box-sizing: border-box;
+            width:      100%;
+            padding:    calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
+            border:     2px solid transparent;
+            color:      fn.color(--item --disabled --label);
+
+            &:link,
+            &:visited,
+            &:enabled {
+                color: currentColor;
+
+                &:hover,
+                &:active {
+                    background-color: fn.color(--item --hover --bg);
+                    color:            fn.color(--item --hover --label);
+                }
+    
+                @include iro.bem-at-theme('keyboard') {
+                    &:focus {
+                        border-radius:    2px;
+                        border-color:     fn.color(--item --key-focus --border);
+                        background-color: fn.color(--item --key-focus --bg);
+                        box-shadow:       fn.color(--item --key-focus --shadow);
+                        color:            fn.color(--item --key-focus --label);
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-elem('separator') {
+            height: fn.dim(--separator);
+        }
+
+        @include iro.bem-elem('icon-slot') {
+            display:         flex;
+            justify-content: center;
+            width:           1em;
+        }
+    }
+}