@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/navbar/_navbar.scss

@@ -0,0 +1,694 @@
+// Name:            Navbar
+// Description:     Component to create horizontal navigation bars
+//
+// Component:       `uk-navbar`
+//
+// Sub-objects:     `uk-navbar-container`
+//                  `uk-navbar-left`
+//                  `uk-navbar-right`
+//                  `uk-navbar-center`
+//                  `uk-navbar-center-left`
+//                  `uk-navbar-center-right`
+//                  `uk-navbar-nav`
+//                  `uk-navbar-parent-icon`
+//                  `uk-navbar-item`
+//                  `uk-navbar-item-rest`
+//                  `uk-navbar-toggle`
+//                  `uk-navbar-subtitle`
+//
+// Adopted:         `uk-navbar-dropdown` + Modifiers
+//                  `uk-navbar-dropdown-nav`
+//                  `uk-navbar-toggle-icon`
+//
+// Modifiers:       `uk-navbar-primary`
+//                  `uk-navbar-transparent`
+//                  `uk-navbar-sticky`
+//
+// States:          `uk-active`
+//                  `uk-parent`
+//                  `uk-open`
+//
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin navbar-styles {
+    /* ========================================================================
+       Component: Navbar
+     ========================================================================== */
+
+    /*
+     * 1. Create position context to center navbar group
+     */
+
+    .#{$prefix}-navbar {
+        --uk-inverse: #{$navbar-color-mode};
+        display: flex;
+        position: relative; /* 1 */
+        @if map.has-key($mixins, 'hook-navbar') {
+            @include meta.apply(map.get($mixins, 'hook-navbar'));
+        }
+    }
+
+
+    /* Container
+     ========================================================================== */
+
+    .#{$prefix}-navbar-container:not(.#{$prefix}-navbar-transparent) {
+        background: var(--navbar-background);
+        @if map.has-key($mixins, 'hook-navbar-container') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-container'));
+        }
+    }
+
+
+    /* Groups
+     ========================================================================== */
+
+    /*
+     * 1. Stretch height if a sibling's height is expanded by its content
+     */
+
+    .#{$prefix}-navbar-left,
+    .#{$prefix}-navbar-right,
+    [class*="uk-navbar-center"] {
+        align-items: stretch; /* 1 */
+        display: flex;
+        flex: none;
+        gap: var(--navbar-gap);
+        min-width: 1px;
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-navbar-left,
+        .#{$prefix}-navbar-right,
+        [class*="uk-navbar-center"] { gap: var(--navbar-gap-m); }
+
+        .#{$prefix}-navbar-center-left { right: string.unquote('calc(100% + var(--navbar-gap-m))'); }
+        .#{$prefix}-navbar-center-right { left: string.unquote('calc(100% + var(--navbar-gap-m))'); }
+    }
+
+    /*
+     * Horizontal alignment
+     * 1. Create position context for centered navbar with sub groups (left/right)
+     * 2. Fix text wrapping if content is larger than 50% of the container.
+     * 3. Needed for dropdowns because a new position context is created
+     *    `z-index` must be smaller than Drawer
+     * 4. Align sub groups for centered navbar
+     */
+
+    .#{$prefix}-navbar-left {
+        flex: 1;
+    }
+
+    .#{$prefix}-navbar-right {
+        margin-left: auto;
+    }
+
+    .#{$prefix}-navbar-center:only-child {
+        margin-left: auto;
+        margin-right: auto;
+        position: relative; /* 1 */
+    }
+
+    .#{$prefix}-navbar-center:not(:only-child) {
+        align-items: stretch;
+        box-sizing: border-box;
+        height: 100%; /* 4 */
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: max-content; /* 2 */
+        z-index: calc(var(--global-z-index) - 10); /* 3 */
+    }
+
+    .#{$prefix}-navbar-center-left,
+    .#{$prefix}-navbar-center-right {
+        height: 100%; /* 4 */
+        position: absolute; /* 5 */
+        top: 0;
+    }
+
+    .#{$prefix}-navbar-center-left { right: string.unquote('calc(100% + var(--navbar-gap))'); }
+    .#{$prefix}-navbar-center-right { left: string.unquote('calc(100% + var(--navbar-gap))'); }
+
+    [class*='#{$prefix}-navbar-center-'] {
+        box-sizing: border-box;
+        width: max-content;
+    }
+
+
+    /* Nav
+     ========================================================================== */
+
+    /*
+     * 1. Stretch height if a sibling's height is expanded by its content
+     * 2. Reset list
+     */
+
+    .#{$prefix}-navbar-nav {
+        align-items: stretch; /* 1 */
+        display: flex;
+        flex: auto;
+        flex-wrap: nowrap;
+        list-style: none;
+        margin: 0; /* 2 */
+        max-width: 100%;
+        min-width: 1px;
+        padding: 0;
+        white-space: nowrap;
+    }
+
+
+    /*
+     * Allow items to wrap into the next line
+     * Only not `absolute` positioned groups
+     */
+
+    .#{$prefix}-navbar-left,
+    .#{$prefix}-navbar-right,
+    .#{$prefix}-navbar-center:only-child {
+        flex-wrap: nowrap;
+        white-space: nowrap;
+    }
+
+    /*
+     * Items
+     * 1. Center content vertically and horizontally
+     * 2. Imitate white space gap when using flexbox
+     * 3. Dimensions
+     * 4. Style
+     * 5. Required for `a`
+     */
+
+    .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item'] > a,      /* Nav item */
+    .#{$prefix}-navbar-item,                                    /* Content item */
+    .#{$prefix}-navbar-toggle {                                 /* Clickable item */
+        align-items: center;
+        box-sizing: border-box; /* 3 */
+        column-gap: 0.25em; /* 2 */
+        display: flex; /* 1 */
+        flex: none;
+        font-family: var(--navbar-nav-item-font-family), system-ui;
+        font-size: var(--navbar-nav-item-font-size); /* 4 */
+        justify-content: center;
+        min-height: var(--navbar-nav-item-height);
+        text-decoration: none; /* 5 */
+    }
+
+    /*
+     * Nav items
+     * 1. Stretch height if a sibling's height is expanded by its content
+     * 2. Reset list
+     */
+
+    .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item'] > a {
+        color: var(--navbar-nav-item-color);
+        height: 100%; /* 1 */
+        padding: 0 var(--navbar-nav-item-padding-horizontal); /* 2 */
+        @if map.has-key($mixins, 'hook-navbar-nav-item') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-nav-item'));
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item'] > a {
+            padding: 0 var(--navbar-nav-item-padding-horizontal-m); /* 2 */
+        }
+    }
+
+    /*
+     * Hover
+     * Apply hover style also if dropdown is opened
+     */
+
+    .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item'].#{$prefix}-hover > a,
+    .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item']:hover > a,
+    .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item'] > a[aria-expanded='true'],
+    .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item'] > a.#{$prefix}-open {
+        color: var(--navbar-nav-item-hover-color);
+        @if map.has-key($mixins, 'hook-navbar-nav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-nav-item-hover'));
+        }
+    }
+
+    /* OnClick */
+    .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item'] > a:active {
+        color: var(--navbar-nav-item-onclick-color);
+        @if map.has-key($mixins, 'hook-navbar-nav-item-onclick') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-nav-item-onclick'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-navbar-nav > li[class*='#{$prefix}-nav-item'].#{$prefix}-active > a {
+        color: var(--navbar-nav-item-active-color);
+        @if map.has-key($mixins, 'hook-navbar-nav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-nav-item-active'));
+        }
+    }
+
+
+    /* Parent icon modifier
+     ========================================================================== */
+
+    .#{$prefix}-navbar-parent-icon {
+        margin-left: var(--navbar-parent-icon-margin-left);
+        transition: transform var(--transition-duration) var(--ease-out);
+    }
+
+    .#{$prefix}-navbar-nav > li > a[aria-expanded='true'] .#{$prefix}-navbar-parent-icon {
+        transform: rotateX(180deg);
+    }
+
+
+    /* Item
+     ========================================================================== */
+
+    .#{$prefix}-navbar-item {
+        color: var(--navbar-item-color);
+        padding: 0 var(--navbar-item-padding-horizontal);
+        @if map.has-key($mixins, 'hook-navbar-item') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-item'));
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-navbar-item {
+            padding: 0 var(--navbar-item-padding-horizontal-m); /* 2 */
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-navbar-item > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Toggle
+     ========================================================================== */
+
+    .#{$prefix}-navbar-toggle {
+        color: var(--navbar-toggle-color);
+        padding: 0 var(--navbar-item-padding-horizontal);
+        @if map.has-key($mixins, 'hook-navbar-toggle') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-toggle'));
+        }
+    }
+
+    .#{$prefix}-navbar-toggle:hover,
+    .#{$prefix}-navbar-toggle[aria-expanded='true'],
+    .#{$prefix}-navbar-toggle.#{$prefix}-open {
+        color: var(--navbar-toggle-hover-color);
+        outline: none;
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-navbar-toggle-hover') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-toggle-hover'));
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-navbar-toggle {
+            padding: 0 var(--navbar-item-padding-horizontal-m); /* 2 */
+        }
+    }
+
+    /*
+     * Icon
+     * Adopts `uk-icon`
+     */
+
+    .#{$prefix}-navbar-toggle-icon {
+        @if map.has-key($mixins, 'hook-navbar-toggle-icon') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-toggle-icon'));
+        }
+    }
+
+    /* Hover */
+    :hover > .#{$prefix}-navbar-toggle-icon {
+        @if map.has-key($mixins, 'hook-navbar-toggle-icon-hover') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-toggle-icon-hover'));
+        }
+    }
+
+
+    /* Subtitle
+     ========================================================================== */
+
+    .#{$prefix}-navbar-subtitle {
+        font-size: var(--navbar-subtitle-font-size);
+        @if map.has-key($mixins, 'hook-navbar-subtitle') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-subtitle'));
+        }
+    }
+
+    /* Justify modifier
+     ========================================================================== */
+
+    .#{$prefix}-navbar-justify .#{$prefix}-navbar-left,
+    .#{$prefix}-navbar-justify .#{$prefix}-navbar-right,
+    .#{$prefix}-navbar-justify .#{$prefix}-navbar-nav,
+    .#{$prefix}-navbar-justify .#{$prefix}-navbar-nav > li,        // Nav item
+    .#{$prefix}-navbar-justify .#{$prefix}-navbar-item,            // Content item
+    .#{$prefix}-navbar-justify .#{$prefix}-navbar-toggle {
+        flex-grow: 1;
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    .#{$prefix}-navbar-primary {
+        @if map.has-key($mixins, 'hook-navbar-primary') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-primary'));
+        }
+    }
+
+    .#{$prefix}-navbar-transparent {
+        @if map.has-key($mixins, 'hook-navbar-transparent') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-transparent'));
+        }
+    }
+
+    .#{$prefix}-navbar-sticky {
+        @if map.has-key($mixins, 'hook-navbar-sticky') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-sticky'));
+        }
+    }
+
+
+    /* Dropdown
+     ========================================================================== */
+
+    /*
+     * Adopts `uk-drop`
+     * 1. Set a default width
+     * 2. Style
+     */
+
+    .#{$prefix}-navbar-dropdown {
+        --uk-inverse: #{$navbar-dropdown-color-mode};
+        background: var(--navbar-dropdown-background);
+        box-sizing: border-box; /* 3 */
+        color: var(--navbar-dropdown-color);
+        display: block; /* 1 */
+        padding: var(--navbar-dropdown-padding); /* 4 */
+        position: absolute; /* 2 */
+        width: var(--navbar-dropdown-width);
+        z-index: var(--navbar-dropdown-z-index);
+        @if map.has-key($mixins, 'hook-navbar-dropdown') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-dropdown'));
+        }
+    }
+
+    /* Hide */
+    .#{$prefix}-navbar-dropdown.#{$prefix}-hidden {
+        display: none;
+    }
+
+    /*
+     * Transform origin
+     */
+
+    [class*='#{$prefix}-navbar-dropdown-left-top'] {
+        transform-origin: 100% 0;
+    }
+
+    [class*='#{$prefix}-navbar-dropdown-bottom'] {
+
+    }
+
+    [class*='#{$prefix}-navbar-dropdown-left'] {
+
+    }
+
+    [class*='#{$prefix}-navbar-dropdown-right-top'] {
+        transform-origin: 0 0;
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-navbar-dropdown > :last-child { margin-bottom: 0; }
+
+    // Color Mode
+    @if $navbar-dropdown-color-mode == light {
+        .#{$prefix}-navbar-dropdown:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $navbar-dropdown-color-mode == dark {
+        .#{$prefix}-navbar-dropdown:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $navbar-dropdown-color-mode != $inverse-global-color-mode {
+        .#{$prefix}-navbar-dropdown :focus-visible {
+            outline-color: var(--navbar-dropdown-focus-outline) !important;
+        }
+    }
+
+    /*
+     * Grid
+     * Adopts `uk-grid`
+     */
+
+    /* Gutter Horizontal */
+    .#{$prefix}-navbar-dropdown .#{$prefix}-drop-grid {
+        margin-left: calc(var(--navbar-dropdown-grid-gutter-horizontal) * -1);
+    }
+
+    .#{$prefix}-navbar-dropdown .#{$prefix}-drop-grid > * {
+        padding-left: var(--navbar-dropdown-grid-gutter-horizontal);
+    }
+
+    /* Gutter Vertical */
+    .#{$prefix}-navbar-dropdown .#{$prefix}-drop-grid > .#{$prefix}-grid-margin {
+        margin-top: var(--navbar-dropdown-grid-gutter-vertical);
+    }
+
+    /*
+     * Width modifier
+     */
+
+    .#{$prefix}-navbar-dropdown-width-2:not(.#{$prefix}-drop-stack) {
+        width: calc(var(--navbar-dropdown-width) * 2);
+    }
+
+    .#{$prefix}-navbar-dropdown-width-3:not(.#{$prefix}-drop-stack) {
+        width: calc(var(--navbar-dropdown-width) * 3);
+    }
+
+    .#{$prefix}-navbar-dropdown-width-4:not(.#{$prefix}-drop-stack) {
+        width: calc(var(--navbar-dropdown-width) * 4);
+    }
+
+    .#{$prefix}-navbar-dropdown-width-5:not(.#{$prefix}-drop-stack) {
+        width: calc(var(--navbar-dropdown-width) * 5);
+    }
+
+
+    /* Dropdown Nav
+     * Adopts `uk-nav`
+     ========================================================================== */
+
+    .#{$prefix}-navbar-dropdown-nav {
+        @if map.has-key($mixins, 'hook-navbar-dropdown-nav') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-dropdown-nav'));
+        }
+    }
+
+    /*
+     * Items
+     */
+
+    .#{$prefix}-navbar-dropdown-nav > li > a {
+        color: var(--navbar-dropdown-nav-item-color);
+        @if map.has-key($mixins, 'hook-navbar-dropdown-nav-item') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-dropdown-nav-item'));
+        }
+    }
+
+    /* Hover */
+    .#{$prefix}-navbar-dropdown-nav > li > a:hover {
+        color: var(--navbar-dropdown-nav-item-hover-color);
+        @if map.has-key($mixins, 'hook-navbar-dropdown-nav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-dropdown-nav-item-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-navbar-dropdown-nav > li.#{$prefix}-active > a {
+        color: var(--navbar-dropdown-nav-item-active-color);
+        @if map.has-key($mixins, 'hook-navbar-dropdown-nav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-dropdown-nav-item-active'));
+        }
+    }
+
+    /*
+     * Subtitle
+     */
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-subtitle {
+        font-size: var(--navbar-dropdown-nav-subtitle-font-size);
+        @if map.has-key($mixins, 'hook-navbar-dropdown-nav-subtitle') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-dropdown-nav-subtitle'));
+        }
+    }
+
+    /*
+     * Header
+     */
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-header {
+        color: var(--navbar-dropdown-nav-header-color);
+        @if map.has-key($mixins, 'hook-navbar-dropdown-nav-header') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-dropdown-nav-header'));
+        }
+    }
+
+    /*
+     * Divider
+     */
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-divider {
+        border-top: var(--navbar-dropdown-nav-divider-border-width) solid var(--navbar-dropdown-nav-divider-border);
+        @if map.has-key($mixins, 'hook-navbar-dropdown-nav-divider') {
+            @include meta.apply(map.get($mixins, 'hook-navbar-dropdown-nav-divider'));
+        }
+    }
+
+    /*
+     * Sublists
+     */
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-sub a {
+        color: var(--navbar-dropdown-nav-sublist-item-color);
+    }
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-sub a:hover,
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-sub a:focus {
+        color: var(--navbar-dropdown-nav-sublist-item-hover-color);
+    }
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-sub li.#{$prefix}-active > a {
+        color: var(--navbar-dropdown-nav-sublist-item-active-color);
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-navbar-misc') {
+        @include meta.apply(map.get($mixins, 'hook-navbar-misc'));
+    }
+
+    @content;
+}
+
+@mixin navbar-tokens {
+    --navbar-background: var(--global-muted-background);
+    --navbar-gap: #{$navbar-gap};
+    --navbar-nav-gap: #{$navbar-nav-gap};
+    --navbar-gap-m: #{$navbar-gap-m};
+    --navbar-nav-gap-m: #{$navbar-nav-gap-m};
+    --navbar-nav-item-height: #{$navbar-nav-item-height};
+    --navbar-nav-item-padding-horizontal: #{$navbar-nav-item-padding-horizontal};
+    --navbar-nav-item-padding-horizontal-m: #{$navbar-nav-item-padding-horizontal-m};
+    --navbar-nav-item-color: var(--global-muted-color);
+    --navbar-nav-item-font-size: var(--global-font-size);
+    --navbar-nav-item-font-family: var(--global-font-family);
+    --navbar-nav-item-hover-color: var(--global-color);
+    --navbar-nav-item-onclick-color: var(--global-emphasis-color);
+    --navbar-nav-item-active-color: var(--global-emphasis-color);
+    --navbar-parent-icon-margin-left: #{$navbar-parent-icon-margin-left};
+    --navbar-item-padding-horizontal: #{$navbar-item-padding-horizontal};
+    --navbar-item-padding-horizontal-m: #{$navbar-item-padding-horizontal-m};
+    --navbar-item-color: var(--global-color);
+    --navbar-toggle-color: var(--global-muted-color);
+    --navbar-toggle-hover-color: var(--global-color);
+    --navbar-subtitle-font-size: var(--global-small-font-size);
+    --navbar-dropdown-margin: #{$navbar-dropdown-margin};
+    --navbar-dropdown-padding: #{$navbar-dropdown-padding};
+    --navbar-dropdown-width: #{$navbar-dropdown-width};
+    --navbar-dropdown-background: var(--global-muted-background);
+    --navbar-dropdown-color: var(--global-color);
+    --navbar-dropdown-focus-outline: var(--base-focus-outline);
+    --navbar-dropdown-z-index: #{$navbar-dropdown-z-index};
+    --navbar-dropdown-grid-gutter-horizontal: var(--global-gutter);
+    --navbar-dropdown-grid-gutter-vertical: var(--navbar-dropdown-grid-gutter-horizontal);
+    --navbar-dropdown-nav-item-color: var(--global-muted-color);
+    --navbar-dropdown-nav-item-hover-color: var(--global-color);
+    --navbar-dropdown-nav-item-active-color: var(--global-emphasis-color);
+    --navbar-dropdown-nav-subtitle-font-size: var(--global-small-font-size);
+    --navbar-dropdown-nav-header-color: var(--global-emphasis-color);
+    --navbar-dropdown-nav-divider-border-width: var(--global-border-width);
+    --navbar-dropdown-nav-divider-border: var(--global-border);
+    --navbar-dropdown-nav-sublist-item-color: var(--global-muted-color);
+    --navbar-dropdown-nav-sublist-item-hover-color: var(--global-color);
+    --navbar-dropdown-nav-sublist-item-active-color: var(--global-emphasis-color);
+
+    @content;
+}
+
+@mixin navbar-inverse-styles {
+    // Color Mode
+    @if $navbar-color-mode == light {
+        .#{$prefix}-navbar-container:not(.#{$prefix}-navbar-transparent) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $navbar-color-mode == dark {
+        .#{$prefix}-navbar-container:not(.#{$prefix}-navbar-transparent) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @content;
+}
+
+@mixin navbar-inverse-tokens {
+    --inverse-navbar-background: var(--inverse-global-muted-background);
+    --inverse-navbar-nav-item-color: var(--inverse-global-muted-color);
+    --inverse-navbar-nav-item-hover-color: var(--inverse-global-color);
+    --inverse-navbar-nav-item-onclick-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-nav-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-item-color: var(--inverse-global-color);
+    --inverse-navbar-toggle-color: var(--inverse-global-muted-color);
+    --inverse-navbar-toggle-hover-color: var(--inverse-global-color);
+    --inverse-navbar-dropdown-background: var(--inverse-global-muted-background);
+    --inverse-navbar-dropdown-color: var(--inverse-global-muted-color);
+    --inverse-navbar-dropdown-nav-item-color: var(--inverse-global-muted-color);
+    --inverse-navbar-dropdown-nav-item-hover-color: var(--inverse-global-color);
+    --inverse-navbar-dropdown-nav-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
+    --inverse-navbar-dropdown-nav-divider-border: var(--inverse-global-border);
+    --inverse-navbar-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
+    --inverse-navbar-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
+    --inverse-navbar-dropdown-nav-sublist-item-active-color: var(--inverse-global-emphasis-color);
+
+    @content;
+}

package/styles/overlay/_index.scss

@@ -0,0 +1,11 @@
+@use 'overlay' as *;
+
+$generate-tokens: true !default;
+
+@include overlay-styles;
+
+@if $generate-tokens {
+    :root {
+        @include overlay-tokens;
+    }
+}