@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/tabs/_tabs.scss

@@ -0,0 +1,809 @@
+// Name:            Tabs
+// Description:     Component to create a tabbed navigation
+//
+// Component:       `uk-tabs`
+//
+// Modifiers:       `uk-tabs-bottom`
+//                  `uk-tabs-left`
+//                  `uk-tabs-right`
+//                  `uk-tabs-large`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin tabs-styles {
+    /* ========================================================================
+       Component: Tabs
+     ========================================================================== */
+
+    .#{$prefix}-tabs {
+        display: flex;
+        overflow: hidden;
+    }
+
+    /*
+     * Nav
+     */
+
+    .#{$prefix}-tabs-nav {
+        align-items: center;
+        display: flex;
+        flex: none;
+        position: relative;
+        @if map.has-key($mixins, 'hook-tabs') {
+            @include meta.apply(map.get($mixins, 'hook-tabs'));
+        }
+    }
+
+    .#{$prefix}-tabs-nav-wrap {
+        align-self: stretch;
+        display: flex;
+        flex: auto;
+        overflow: hidden;
+        position: relative;
+        transform: translate(0);
+        white-space: nowrap;
+    }
+
+    .#{$prefix}-tabs-nav-wrap::before,
+    .#{$prefix}-tabs-nav-wrap::after {
+        content: '';
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: opacity var(--transition-duration);
+        z-index: 1;
+    }
+
+    /*
+     * List
+     */
+
+    .#{$prefix}-tabs-nav-list {
+        display: flex;
+        position: relative;
+        transition: transform var(--transition-duration);
+    }
+
+    /*
+     * Operations
+     */
+
+    .#{$prefix}-tabs-nav-operations {
+        align-self: stretch;
+        display: flex;
+    }
+
+    .#{$prefix}-tabs-nav-operations-hidden {
+        pointer-events: none;
+        position: absolute;
+        visibility: hidden;
+    }
+
+    .#{$prefix}-tabs-nav-more {
+        --icon-size: var(--tabs-nav-more-font-size);
+        background: transparent;
+        border: 0;
+        color: var(--tabs-tab-color);
+        font-size: var(--tabs-nav-more-font-size);
+        padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
+        position: relative;
+    }
+
+    .#{$prefix}-tabs-nav-more::after {
+        bottom: 0;
+        content: '';
+        height: 5px;
+        left: 0;
+        position: absolute;
+        right: 0;
+        transform: translateY(100%);
+    }
+
+    .#{$prefix}-tabs-nav-more .#{$prefix}-icon * {
+        width: 100%;
+    }
+
+    .#{$prefix}-tabs-nav-add {
+        background: var(--tabs-card-tab-background);
+        border: var(--tabs-card-tab-border-width) var(--tabs-card-tab-border-style) var(--tabs-card-tab-border);
+        color: var(--tabs-tab-color);
+        cursor: pointer;
+        outline: 0 none;
+        padding: var(--tabs-card-tab-padding-vertical) var(--tabs-card-tab-padding-horizontal);
+        transition: all var(--transition-duration) var(--ease-in-out);
+        @if map.has-key($mixins, 'hook-tabs-nav-add') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-nav-add'));
+        }
+    }
+
+    .#{$prefix}-tabs-nav-add:hover {
+        color: var(--tabs-tab-hover-color);
+    }
+
+    .#{$prefix}-tabs-nav-add:active,
+    .#{$prefix}-tabs-nav-add:focus {
+        color: var(--tabs-tab-active-color);
+    }
+
+    .#{$prefix}-tabs-extra-content {
+        flex: none;
+    }
+
+    .#{$prefix}-tabs-centered .#{$prefix}-tabs-nav-wrap:not([class*='#{$prefix}-tabs-nav-wrap-ping']) {
+        justify-content: center;
+    }
+
+
+    /* Items
+     ========================================================================== */
+
+    .#{$prefix}-tabs-tab {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        color: var(--tabs-tab-color);
+        cursor: pointer;
+        display: inline-flex;
+        font-size: var(--tabs-tab-font-size);
+        justify-content: space-between;
+        outline: none;
+        padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
+        position: relative;
+        @if map.has-key($mixins, 'hook-tabs-tab') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-tab'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-tabs-tab:not(.#{$prefix}-tabs-tab-disabled):hover,
+    .#{$prefix}-tabs-tab:not(.#{$prefix}-tabs-tab-disabled):focus {
+        color: var(--tabs-tab-hover-color);
+        @if map.has-key($mixins, 'hook-tabs-tab-hover') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-tab-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-tabs-tab-active:not(.#{$prefix}-tabs-tab-disabled) {
+        color: var(--tabs-tab-active-color);
+        @if map.has-key($mixins, 'hook-tabs-tab-active') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-tab-active'));
+        }
+    }
+
+    /* Disabled */
+    .#{$prefix}-tabs-tab-disabled {
+        color: var(--tabs-tab-disabled-color);
+        cursor: not-allowed;
+        @if map.has-key($mixins, 'hook-tabs-tab-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-tab-disabled'));
+        }
+    }
+
+    /*
+     * Gutter
+     */
+
+    .#{$prefix}-tabs-tab + .#{$prefix}-tabs-tab {
+        margin: 0 0 0 var(--tabs-margin-horizontal);
+    }
+
+    /*
+     * Remove
+     */
+
+    .#{$prefix}-tabs-tab-remove {
+        --icon-size: var(--tabs-tab-remove-font-size);
+        align-items: center;
+        background: transparent;
+        border: none;
+        color: var(--tabs-tab-remove-color);
+        cursor: pointer;
+        display: flex;
+        flex: none;
+        font-size: var(--tabs-tab-remove-font-size);
+        margin-left: var(--tabs-card-gutter);
+        margin-right: calc(var(--tabs-card-gutter) * -1);
+        outline: 0 none;
+        padding: 0;
+        transition: all var(--transition-duration);
+    }
+
+    .#{$prefix}-tabs-tab-remove:hover {
+        color: var(--tabs-tab-remove-hover-color);
+    }
+
+    .#{$prefix}-tabs-tab-remove:focus,
+    .#{$prefix}-tabs-tab-remove:active {
+        color: var(--tabs-tab-remove-active-color);
+    }
+
+
+    /* Card modifier
+     ========================================================================== */
+
+    .#{$prefix}-tabs-card .#{$prefix}-tabs-tab {
+        background: var(--tabs-card-tab-background);
+        border: var(--tabs-card-tab-border-width) var(--tabs-card-tab-border-style) var(--tabs-card-tab-border);
+        margin: 0;
+        padding: var(--tabs-card-tab-padding-vertical) var(--tabs-card-tab-padding-horizontal);
+        transition: all var(--transition-duration) var(--ease-in-out);
+        @if map.has-key($mixins, 'hook-tabs-tab-card') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-tab-card'));
+        }
+    }
+
+    .#{$prefix}-tabs-card .#{$prefix}-tabs-tab-active {
+        background-color: var(--tabs-card-tab-active-background);
+        color: var(--tabs-card-tab-active-color);
+    }
+
+    .#{$prefix}-tabs-card .#{$prefix}-tabs-ink-bar {
+        visibility: hidden;
+    }
+
+
+    /* Content
+     ========================================================================== */
+
+    .#{$prefix}-tabs-content {
+        box-sizing: border-box;
+        position: relative;
+        width: 100%;
+    }
+
+
+    /* Tabpane
+     ========================================================================== */
+
+    .#{$prefix}-tabs-tabpane-hidden {
+        display: none;
+    }
+
+
+    /* Position modifier
+     ========================================================================== */
+
+    /*
+     * Bottom + Top
+     */
+
+    .#{$prefix}-tabs-bottom,
+    .#{$prefix}-tabs-top {
+        flex-direction: column;
+
+        > .#{$prefix}-tabs-nav::before {
+            border-bottom: var(--global-border-width) var(--global-border-style) var(--global-border);
+            content: '';
+            left: 0;
+            position: absolute;
+            right: 0;
+        }
+
+        .#{$prefix}-tabs-nav-add {
+            margin: 0 0 0 var(--tabs-margin-horizontal);
+        }
+
+        .#{$prefix}-tabs-ink-bar {
+            height: var(--tabs-ink-bar-height);
+        }
+
+        .#{$prefix}-tabs-ink-bar-animated {
+            transition: width var(--transition-duration), left var(--transition-duration), right var(--transition-duration);
+        }
+
+        &.#{$prefix}-tabs-card {
+            .#{$prefix}-tabs-tab + .#{$prefix}-tabs-tab {
+                margin-left: var(--tabs-card-gutter);
+            }
+
+            .#{$prefix}-tabs-nav-add {
+                margin: 0 0 0 var(--tabs-card-gutter);
+            }
+        }
+    }
+
+    /*
+     * Bottom
+     */
+
+    .#{$prefix}-tabs-bottom {
+        > .#{$prefix}-tabs-nav {
+            margin-top: var(--tabs-margin-vertical);
+            order: 1;
+        }
+
+        > .#{$prefix}-tabs-nav::before {
+            top: 0;
+        }
+
+        .#{$prefix}-tabs-ink-bar {
+            top: 0;
+        }
+
+        &.#{$prefix}-tabs-card {
+            .#{$prefix}-tabs-tab {
+                border-radius: 0 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius);
+            }
+
+            .#{$prefix}-tabs-tab-active {
+                border-top-color: var(--tabs-card-tab-active-background);
+            }
+        }
+
+        .#{$prefix}-tabs-nav-add {
+            border-radius: 0 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius);
+        }
+
+        .#{$prefix}-tabs-content-holder {
+            order: 0;
+        }
+
+        @if map.has-key($mixins, 'hook-tabs-bottom') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-bottom'));
+        }
+    }
+
+    .#{$prefix}-tabs-bottom .#{$prefix}-tabs-tab {
+        @if map.has-key($mixins, 'hook-tabs-bottom-tab') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-bottom-tab'));
+        }
+    }
+
+    /*
+     * Top
+     */
+
+    .#{$prefix}-tabs-top {
+        > .#{$prefix}-tabs-nav {
+            margin-bottom: var(--tabs-margin-vertical);
+        }
+
+        > .#{$prefix}-tabs-nav::before {
+            bottom: 0;
+        }
+
+        .#{$prefix}-tabs-ink-bar {
+            bottom: 0;
+        }
+
+        &.#{$prefix}-tabs-card {
+            .#{$prefix}-tabs-tab {
+                border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
+            }
+
+            .#{$prefix}-tabs-tab-active {
+                border-bottom-color: var(--tabs-card-tab-active-background);
+            }
+        }
+
+        .#{$prefix}-tabs-nav-add {
+            border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
+        }
+
+        @if map.has-key($mixins, 'hook-tabs-top') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-top'));
+        }
+    }
+
+    .#{$prefix}-tabs-top .#{$prefix}-tabs-tab {
+        @if map.has-key($mixins, 'hook-tabs-top-tab') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-top-tab'));
+        }
+    }
+
+
+    /*
+     * Left + Right
+     */
+
+    .#{$prefix}-tabs-left,
+    .#{$prefix}-tabs-right {
+        .#{$prefix}-tabs-nav {
+            flex-direction: column;
+            min-width: 50px;
+        }
+
+        .#{$prefix}-tabs-nav-wrap {
+            flex-direction: column;
+        }
+
+        .#{$prefix}-tabs-tab {
+            text-align: center;
+        }
+
+        .#{$prefix}-tabs-tab + .#{$prefix}-tabs-tab {
+            margin: var(--tabs-margin-vertical) 0 0 0;
+        }
+
+        .#{$prefix}-tabs-ink-bar {
+            width: var(--tabs-ink-bar-width);
+        }
+
+        .#{$prefix}-tabs-ink-bar-animated {
+            transition: height var(--transition-duration), top var(--transition-duration);
+        }
+
+        &.#{$prefix}-tabs-card {
+            .#{$prefix}-tabs-tab + .#{$prefix}-tabs-tab {
+                margin-top: var(--tabs-card-gutter);
+            }
+        }
+
+        .#{$prefix}-tabs-nav-add {
+            margin: var(--tabs-card-gutter) 0 0 0;
+        }
+
+        .#{$prefix}-tabs-nav-list,
+        .#{$prefix}-tabs-nav-operations {
+            flex: 1 0 auto; // fix safari scroll problem
+            flex-direction: column;
+        }
+
+        &.#{$prefix}-tabs-centered .#{$prefix}-tabs-nav-list {
+            flex: none;
+        }
+    }
+
+    /*
+     * Left
+     */
+
+    .#{$prefix}-tabs-left {
+        .#{$prefix}-tabs-content-holder {
+            border-left: var(--global-border-width) var(--global-border-style) var(--global-border);
+            margin-left: calc(var(--global-border-width) * -1);
+        }
+
+        .#{$prefix}-tabs-content > .#{$prefix}-tabs-tabpane {
+            padding-left: var(--tabs-margin-horizontal);
+        }
+
+        .#{$prefix}-tabs-ink-bar {
+            right: 0;
+        }
+
+        &.#{$prefix}-tabs-card {
+            .#{$prefix}-tabs-tab {
+                border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
+            }
+
+            .#{$prefix}-tabs-tab-active {
+                border-right-color: var(--tabs-card-tab-active-background);
+            }
+        }
+
+        .#{$prefix}-tabs-nav-add {
+            border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
+        }
+
+        @if map.has-key($mixins, 'hook-tabs-left') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-left'));
+        }
+    }
+
+    .#{$prefix}-tabs-left .#{$prefix}-tabs-tab {
+        @if map.has-key($mixins, 'hook-tabs-left-tab') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-left-tab'));
+        }
+    }
+
+    /*
+     * Right
+     */
+
+    .#{$prefix}-tabs-right {
+        .#{$prefix}-tabs-nav {
+            order: 1;
+        }
+
+        .#{$prefix}-tabs-content-holder {
+            border-right: var(--global-border-width) var(--global-border-style) var(--global-border);
+            margin-right: calc(var(--global-border-width) * -1);
+        }
+
+        .#{$prefix}-tabs-content > .#{$prefix}-tabs-tabpane {
+            padding-right: var(--tabs-margin-horizontal);
+        }
+
+        .#{$prefix}-tabs-ink-bar {
+            left: 0;
+        }
+
+        &.#{$prefix}-tabs-card {
+            .#{$prefix}-tabs-tab {
+                border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
+            }
+
+            .#{$prefix}-tabs-tab-active {
+                border-left-color: var(--tabs-card-tab-active-background);
+            }
+        }
+
+        .#{$prefix}-tabs-nav-add {
+            border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
+        }
+
+        @if map.has-key($mixins, 'hook-tabs-right') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-right'));
+        }
+    }
+
+    .#{$prefix}-tabs-right .#{$prefix}-tabs-tab {
+        @if map.has-key($mixins, 'hook-tabs-right-tab') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-right-tab'));
+        }
+    }
+
+
+    /* Right to Left Direction
+     ========================================================================== */
+
+    .#{$prefix}-tabs-rtl { direction: rtl; }
+
+    .#{$prefix}-tabs-rtl .#{$prefix}-tabs-tab-remove {
+        margin-left: calc(var(--tabs-card-gutter) * -1);
+        margin-right: var(--tabs-card-gutter);
+    }
+
+    .#{$prefix}-tabs-rtl.#{$prefix}-tabs-bottom .#{$prefix}-tabs-tab,
+    .#{$prefix}-tabs-rtl.#{$prefix}-tabs-top .#{$prefix}-tabs-tab {
+        margin: 0 0 0 var(--tabs-margin-horizontal);
+
+        &:last-of-type {
+            margin-left: 0;
+        }
+
+        .#{$prefix}-tabs-tab-remove {
+            margin-left: calc(var(--tabs-card-tab-padding-horizontal) * -1);
+            margin-right: var(--tabs-card-tab-padding-horizontal);
+        }
+    }
+
+    .#{$prefix}-tabs-rtl.#{$prefix}-tabs-left .#{$prefix}-tabs-nav { order: 1; }
+    .#{$prefix}-tabs-rtl.#{$prefix}-tabs-left .#{$prefix}-tabs-content-holder { order: 0; }
+
+    .#{$prefix}-tabs-rtl.#{$prefix}-tabs-right .#{$prefix}-tabs-nav { order: 0; }
+    .#{$prefix}-tabs-rtl.#{$prefix}-tabs-right .#{$prefix}-tabs-content-holder { order: 1; }
+
+
+    /* Size modifier
+     ========================================================================== */
+
+    .#{$prefix}-tabs-medium .#{$prefix}-tabs-tab {
+        padding: var(--tabs-medium-tab-padding-vertical) var(--tabs-medium-tab-padding-horizontal);
+    }
+
+    .#{$prefix}-tabs-large .#{$prefix}-tabs-tab {
+        padding: var(--tabs-large-tab-padding-vertical) var(--tabs-large-tab-padding-horizontal);
+    }
+
+    .#{$prefix}-tabs-medium.#{$prefix}-tabs-card .#{$prefix}-tabs-tab,
+    .#{$prefix}-tabs-medium.#{$prefix}-tabs-card .#{$prefix}-tabs-nav-add {
+        padding: var(--tabs-card-medium-tab-padding-vertical) var(--tabs-card-medium-tab-padding-horizontal);
+    }
+
+    .#{$prefix}-tabs-large.#{$prefix}-tabs-card .#{$prefix}-tabs-tab,
+    .#{$prefix}-tabs-large.#{$prefix}-tabs-card .#{$prefix}-tabs-nav-add {
+        padding: var(--tabs-card-large-tab-padding-vertical) var(--tabs-card-large-tab-padding-horizontal);
+    }
+
+
+    // Dropdown
+    // ========================================================================
+
+    .#{$prefix}-tabs-dropdown {
+        box-sizing: border-box;
+        display: block;
+        left: -9999px;
+        line-height: normal;
+        margin: 0;
+        outline: none;
+        padding: 0;
+        position: absolute;
+        top: -9999px;
+        z-index: calc(var(--global-z-index) + 50);
+        @if map.has-key($mixins, 'hook-tabs-dropdown') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-dropdown'));
+        }
+    }
+
+    .#{$prefix}-tabs-dropdown-hidden {
+        display: none;
+    }
+
+    .#{$prefix}-tabs-dropdown-menu {
+        background-clip: padding-box;
+        background-color: var(--tabs-dropdown-background);
+        border-radius: var(--tabs-dropdown-border-radius);
+        box-shadow: none;
+        list-style-type: none;
+        margin: 0;
+        max-height: 200px;
+        outline: none;
+        overflow: hidden auto;
+        padding: 0;
+        text-align: left;
+        @if map.has-key($mixins, 'hook-tabs-dropdown-menu') {
+            @include meta.apply(map.get($mixins, 'hook-tabs-dropdown-menu'));
+        }
+    }
+
+    .#{$prefix}-tabs-dropdown-menu-item {
+        align-items: center;
+        color: var(--tabs-dropdown-item-color);
+        cursor: pointer;
+        display: flex;
+        font-weight: normal;
+        margin: 0;
+        min-width: 120px;
+        overflow: hidden;
+        padding: var(--tabs-dropdown-item-padding-vertical) var(--tabs-dropdown-item-padding-horizontal);
+        text-overflow: ellipsis;
+        transition: all var(--transition-duration);
+        white-space: nowrap;
+    }
+
+    .#{$prefix}-tabs-dropdown-menu-item-disabled,
+    .#{$prefix}-tabs-dropdown-menu-item-disabled:hover {
+        background: transparent;
+        color: var(--tabs-dropdown-item-disabled-color);
+        cursor: not-allowed;
+    }
+
+    .#{$prefix}-tabs-dropdown-menu-item:hover {
+        background-color: var(--tabs-dropdown-item-hover-background);
+        color: var(--tabs-dropdown-item-hover-color);
+    }
+
+    .#{$prefix}-tabs-dropdown-menu-item > span {
+        flex: 1;
+        white-space: nowrap;
+    }
+
+    .#{$prefix}-tabs-dropdown-menu-item-remove {
+        --icon-size: var(--tabs-tab-remove-font-size);
+        background: transparent;
+        border: 0;
+        color: var(--tabs-tab-remove-color);
+        cursor: pointer;
+        flex: none;
+        font-size: var(--tabs-tab-remove-font-size);
+        margin-left: var(--tabs-card-gutter);
+    }
+
+    .#{$prefix}-tabs-dropdown-menu-item-remove:hover {
+        color: var(--tabs-tab-remove-hover-color);
+    }
+
+    .#{$prefix}-tabs-dropdown-rtl { direction: rtl; }
+
+    .#{$prefix}-tabs-dropdown-rtl .#{$prefix}-tabs-dropdown-menu-item {
+        text-align: right;
+    }
+
+
+    // Ink Bar
+    // ========================================================================
+
+    .#{$prefix}-tabs-ink-bar {
+        background: var(--tabs-ink-bar-color);
+        pointer-events: none;
+        position: absolute;
+    }
+
+
+    // Motion
+    // ========================================================================
+
+    .#{$prefix}-tabs-motion-switch-appear,
+    .#{$prefix}-tabs-motion-switch-enter {
+        transition: none;
+    }
+
+    .#{$prefix}-tabs-motion-switch-appear-start,
+    .#{$prefix}-tabs-motion-switch-enter-start {
+        opacity: 0;
+    }
+
+    .#{$prefix}-tabs-motion-switch-appear-active,
+    .#{$prefix}-tabs-motion-switch-enter-active {
+        opacity: 1;
+        transition: opacity var(--transition-duration);
+    }
+
+    .#{$prefix}-tabs-motion-switch-leave {
+        inset: 0;
+        position: absolute;
+        transition: none;
+    }
+
+    .#{$prefix}-tabs-motion-switch-leave-start { opacity: 1; }
+
+    .#{$prefix}-tabs-motion-switch-leave-active {
+        opacity: 0;
+        transition: opacity var(--transition-duration);
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-tabs-misc') {
+        @include meta.apply(map.get($mixins, 'hook-tabs-misc'));
+    }
+
+    @content;
+}
+
+@mixin tabs-tokens {
+    --tabs-margin-horizontal: #{$tabs-margin-horizontal};
+    --tabs-margin-vertical: #{$tabs-margin-vertical};
+    --tabs-tab-padding-horizontal: #{$tabs-tab-padding-horizontal};
+    --tabs-tab-padding-vertical: #{$tabs-tab-padding-vertical};
+    --tabs-medium-tab-padding-horizontal: #{$tabs-medium-tab-padding-horizontal};
+    --tabs-medium-tab-padding-vertical: #{$tabs-medium-tab-padding-vertical};
+    --tabs-large-tab-padding-horizontal: #{$tabs-large-tab-padding-horizontal};
+    --tabs-large-tab-padding-vertical: #{$tabs-large-tab-padding-vertical};
+    --tabs-tab-font-size: var(--global-font-size);
+    --tabs-tab-color: var(--global-color);
+    --tabs-tab-hover-color: var(--global-primary-color);
+    --tabs-tab-active-color: var(--global-primary-color);
+    --tabs-tab-disabled-color: var(--global-muted-color);
+    --tabs-tab-remove-color: var(--global-muted-color);
+    --tabs-tab-remove-font-size: var(--global-font-size);
+    --tabs-tab-remove-hover-color: var(--global-danger-color);
+    --tabs-tab-remove-active-color: var(--global-danger-color);
+    --tabs-nav-more-font-size: var(--global-font-size);
+    --tabs-ink-bar-color: var(--global-primary-color);
+    --tabs-ink-bar-height: #{$tabs-ink-bar-height};
+    --tabs-ink-bar-width: #{$tabs-ink-bar-width};
+    --tabs-card-tab-background: var(--global-muted-background);
+    --tabs-card-tab-border-width: var(--global-border-width);
+    --tabs-card-tab-border-style: var(--global-border-style);
+    --tabs-card-tab-border: var(--global-border);
+    --tabs-card-tab-border-radius: var(--global-border-radius);
+    --tabs-card-tab-padding-horizontal: var(--tabs-tab-padding-horizontal);
+    --tabs-card-tab-padding-vertical: var(--tabs-tab-padding-vertical);
+    --tabs-card-medium-tab-padding-horizontal: var(--tabs-medium-tab-padding-horizontal);
+    --tabs-card-medium-tab-padding-vertical: var(--tabs-medium-tab-padding-vertical);
+    --tabs-card-large-tab-padding-horizontal: var(--tabs-large-tab-padding-horizontal);
+    --tabs-card-large-tab-padding-vertical: var(--tabs-large-tab-padding-vertical);
+    --tabs-card-tab-active-background: var(--global-background);
+    --tabs-card-tab-active-color: var(--global-emphasis-color);
+    --tabs-card-gutter: var(--global-xsmall-gutter);
+    --tabs-dropdown-background: var(--dropdown-background);
+    --tabs-dropdown-border-radius: var(--global-border-radius);
+    --tabs-dropdown-item-color: var(--tabs-tab-color);
+    --tabs-dropdown-item-hover-color: var(--global-inverse-color);
+    --tabs-dropdown-item-disabled-color: var(--tabs-tab-disabled-color);
+    --tabs-dropdown-item-hover-background: var(--global-primary-background);
+    --tabs-dropdown-item-padding-horizontal: var(--tabs-tab-padding-horizontal);
+    --tabs-dropdown-item-padding-vertical: var(--tabs-tab-padding-vertical);
+
+    @content;
+}
+
+@mixin tabs-inverse-tokens {
+    --inverse-tabs-tab-color: var(--inverse-global-muted-color);
+    --inverse-tabs-tab-hover-color: var(--inverse-global-color);
+    --inverse-tabs-tab-active-color: var(--inverse-global-emphasis-color);
+    --inverse-tabs-tab-disabled-color: var(--inverse-global-muted-color);
+    --inverse-tabs-ink-bar-color: var(--inverse-global-primary-background);
+
+    @content;
+}