11 files changed, 110 insertions, 1 deletions

diff --git a/src/_config.scss b/src/_config.scss
index 284d6e7..25c0adb 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -25,3 +25,5 @@ $themes: map.deep-merge((
 ), $themes-override) !default;
 
 $theme-default: list.nth(map.keys($themes), 1) !default;
+
+$explicit-dark-theme: false !default;
diff --git a/src/_core.scss b/src/_core.scss
index 7b7a384..2eb04fc 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -20,6 +20,13 @@
                     }
                 }
             }
+
+            @if map.has-key($theme, 'dark') and config.$explicit-dark-theme {
+                @include bem.theme('dark') {
+                    @include props.materialize(map.values(meta.module-variables('vars')));
+                    @include props.materialize(map.get($theme, 'dark'));
+                }
+            }
         } @else {
             @include bem.theme(string.slice($theme-name, 3)) {
                 @include props.materialize(map.get($theme, 'light'));
diff --git a/src/_props.scss b/src/_props.scss
index ffba054..5590aed 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -27,6 +27,13 @@
         }
     }
 
+    @if config.$explicit-dark-theme {
+        @include bem.theme('dark') {
+            @include props.materialize($ref, 'color');
+            @include props.materialize($ref, 'dark');
+        }
+    }
+
     @each $theme-name in map.keys(config.$themes) {
         @if $theme-name != config.$theme-default {
             @include bem.theme(string.slice($theme-name, 3)) {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 8fbec78..c4ecd87 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -109,6 +109,35 @@
         }
     }
 
+    @include bem.is('highlighted') {
+        &:link,
+        &:visited,
+        &:enabled {
+            &,
+            &:hover,
+            &:focus-visible {
+                border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
+            }
+
+            box-shadow:
+                0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
+                props.get(vars.$shadow-x)
+                props.get(vars.$shadow-y)
+                props.get(vars.$shadow-blur)
+                props.get(vars.$shadow-grow)
+                props.get($theme, list.join($key, --highlighted --shadow-color)...);
+
+            &:focus-visible {
+                box-shadow:
+                    props.get(vars.$shadow-x)
+                    props.get(vars.$shadow-y)
+                    props.get(vars.$shadow-blur)
+                    props.get(vars.$shadow-grow)
+                    props.get($theme, list.join($key, --shadow-color)...);
+            }
+        }
+    }
+
     @include bem.is('selected') {
         color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
         background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 7b4670f..cc7b7d5 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -78,6 +78,11 @@ $default-theme: map.deep-merge((
         --outline-color: props.get(core.$theme, --focus, --outline),
     ),
 
+    --highlighted: (
+        --border-color: props.get(core.$theme, --focus, --border),
+        --shadow-color: props.get(core.$theme, --focus, --outline),
+    ),
+
     --selected: (
         --bg-color:     props.get(core.$theme, --text),
         --label-color:  props.get(core.$theme, --base, --50),
@@ -194,6 +199,11 @@ $default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
                 --outline-color: props.get(core.$transparent-colors, $theme, --300),
             ),
 
+            --highlighted: (
+                --border-color: props.get(core.$transparent-colors, $theme, --900),
+                --shadow-color: props.get(core.$transparent-colors, --black, --200),
+            ),
+
             --selected: (
                 --bg-color:     props.get(core.$transparent-colors, $theme, --800),
                 --label-color:  props.get(core.$transparent-colors, $theme, --text),
@@ -295,6 +305,11 @@ $themes-config: (
                 --outline-color: props.get(core.$theme, --focus, --outline),
             ),
 
+            --highlighted: (
+                --border-color: props.get(core.$theme, $key, --900),
+                --shadow-color: props.get(core.$theme, $key, --200),
+            ),
+
             --selected: (
                 --bg-color:     props.get(core.$theme, #{$key}-static, --900),
                 --label-color:  props.get(core.$theme, #{$key}-static, --900-text),
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 6c0e7d2..a52050c 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -120,6 +120,28 @@
             }
         }
 
+        @include bem.modifier('pill') {
+            @include bem.multi('&', 'elem' 'bg') {
+                border-radius: 100em;
+            }
+
+            @include bem.elem('native') {
+                padding-inline: props.get(vars.$pad-i-pill);
+
+                &:focus {
+                    @include bem.sibling-elem('bg') {
+                        border-radius: 100em;
+                    }
+                }
+            }
+
+            @include bem.modifier('extended') {
+                @include bem.elem('native') {
+                    padding-inline: props.get(vars.$pad-i);
+                }
+            }
+        }
+
         @include bem.is('invalid') {
             @include bem.elem('native') {
                 @include -invalid;
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index f64c42b..51099d8 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -4,6 +4,7 @@
 
 $line-height:  props.def(--o-text-field--line-height, 1.4) !default;
 $pad-i:        props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
+$pad-i-pill:   props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
 $pad-b:        props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
 $border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
 $rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index c356bfe..3b5de2b 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -11,6 +11,7 @@ mixin button
             'o-button--badge':     attributes.badge,
             'o-button--icon':      !!attributes.icon && !block,
             'is-selected':         attributes.selected,
+            'is-highlighted':      attributes.highlighted,
         }
         if (attributes.theme) {
             classes['o-button--' + attributes.theme] = true
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
index fb96443..192780d 100644
--- a/tpl/objects/field-label.pug
+++ b/tpl/objects/field-label.pug
@@ -16,7 +16,7 @@ mixin field-label(label, hint=null)
 
         let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
 
-    div(class=classes)
+    label(class=classes)
         .o-field-label__label(style=labelStyle class=attributes.labelClass)= label
         .o-field-label__content(class=attributes.contentClass)
             block
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 0342f01..6de30e9 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -12,6 +12,7 @@ mixin text-field
         let classes = {
             'o-text-field':           true,
             'o-text-field--extended': !!block,
+            'o-text-field--pill':     attributes.pill,
             'is-invalid':             attributes.invalid,
             'is-disabled':            attributes.disabled,
             'l-media':                !!block,
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 2e54458..4b8c59f 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -71,6 +71,8 @@ mixin view-button
         .c-box
             +button= 'Idle'
             = ' '
+            +button(highlighted=true)= 'Highlighted'
+            = ' '
             +button(selected=true)= 'Selected'
             = ' '
             +button(disabled=true)= 'Disabled'
@@ -80,6 +82,8 @@ mixin view-button
             br
             +button(badge=true)= 'Idle'
             = ' '
+            +button(badge=true highlighted=true)= 'Highlighted'
+            = ' '
             +button(badge=true selected=true)= 'Selected'
             = ' '
             +button(badge=true disabled=true)= 'Disabled'
@@ -89,6 +93,8 @@ mixin view-button
             br
             +button(quiet=true)= 'Idle'
             = ' '
+            +button(quiet=true highlighted=true)= 'Highlighted'
+            = ' '
             +button(quiet=true selected=true)= 'Selected'
             = ' '
             +button(quiet=true disabled=true)= 'Disabled'
@@ -98,6 +104,8 @@ mixin view-button
         .c-box
             +button(pill=true)= 'Idle'
             = ' '
+            +button(pill=true highlighted=true)= 'Highlighted'
+            = ' '
             +button(pill=true selected=true)= 'Selected'
             = ' '
             +button(pill=true disabled=true)= 'Disabled'
@@ -107,6 +115,8 @@ mixin view-button
             br
             +button(pill=true badge=true)= 'Idle'
             = ' '
+            +button(pill=true badge=true highlighted=true)= 'Highlighted'
+            = ' '
             +button(pill=true badge=true selected=true)= 'Selected'
             = ' '
             +button(pill=true badge=true disabled=true)= 'Disabled'
@@ -116,6 +126,8 @@ mixin view-button
             br
             +button(pill=true quiet=true)= 'Idle'
             = ' '
+            +button(pill=true quiet=true highlighted=true)= 'Highlighted'
+            = ' '
             +button(pill=true quiet=true selected=true)= 'Selected'
             = ' '
             +button(pill=true quiet=true disabled=true)= 'Disabled'
@@ -126,6 +138,8 @@ mixin view-button
             .c-box
                 +button(theme=theme)= 'Idle'
                 = ' '
+                +button(theme=theme highlighted=true)= 'Highlighted'
+                = ' '
                 +button(theme=theme selected=true)= 'Selected'
                 = ' '
                 +button(theme=theme disabled=true)= 'Disabled'
@@ -135,6 +149,8 @@ mixin view-button
                 br
                 +button(theme=theme badge=true)= 'Idle'
                 = ' '
+                +button(theme=theme badge=true highlighted=true)= 'Highlighted'
+                = ' '
                 +button(theme=theme badge=true selected=true)= 'Selected'
                 = ' '
                 +button(theme=theme badge=true disabled=true)= 'Disabled'
@@ -144,6 +160,8 @@ mixin view-button
                 br
                 +button(theme=theme quiet=true)= 'Idle'
                 = ' '
+                +button(theme=theme quiet=true highlighted=true)= 'Highlighted'
+                = ' '
                 +button(theme=theme quiet=true selected=true)= 'Selected'
                 = ' '
                 +button(theme=theme quiet=true disabled=true)= 'Disabled'
@@ -157,6 +175,8 @@ mixin view-button
             .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
                 +button(theme=theme)= 'Idle'
                 = ' '
+                +button(theme=theme highlighted=true)= 'Highlighted'
+                = ' '
                 +button(theme=theme selected=true)= 'Selected'
                 = ' '
                 +button(theme=theme disabled=true)= 'Disabled'
@@ -166,6 +186,8 @@ mixin view-button
                 br
                 +button(theme=theme badge=true)= 'Idle'
                 = ' '
+                +button(theme=theme badge=true highlighted=true)= 'Highlighted'
+                = ' '
                 +button(theme=theme badge=true selected=true)= 'Selected'
                 = ' '
                 +button(theme=theme badge=true disabled=true)= 'Disabled'
@@ -175,6 +197,8 @@ mixin view-button
                 br
                 +button(theme=theme quiet=true)= 'Idle'
                 = ' '
+                +button(theme=theme quiet=true highlighted=true)= 'Highlighted'
+                = ' '
                 +button(theme=theme quiet=true selected=true)= 'Selected'
                 = ' '
                 +button(theme=theme quiet=true disabled=true)= 'Disabled'