@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/button/_button.scss

@@ -0,0 +1,707 @@
+// Name:            Button
+// Description:     Styles for buttons
+//
+// Component:       `uk-button`
+//
+// Sub-objects:     `uk-button-group`
+//
+// Modifiers:       `uk-button-default`
+//                  `uk-button-primary`
+//                  `uk-button-secondary`
+//                  `uk-button-tertiary`
+//                  `uk-button-danger`
+//                  `uk-button-text`
+//                  `uk-button-link`
+//                  `uk-button-xsmall`
+//                  `uk-button-small`
+//                  `uk-button-medium`
+//                  `uk-button-large`
+//                  `uk-button-xlarge`
+//                  `uk-button-circle`
+//                  `uk-button-round`
+//                  `uk-button-ghost`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin button-styles {
+    /* ========================================================================
+       Component: Button
+     ========================================================================== */
+
+    /*
+     * 1. Remove margins in Chrome, Safari and Opera.
+     * 2. Remove borders for `button`.
+     * 3. Address `overflow` set to `hidden` in IE.
+     * 4. Correct `font` properties and `color` not being inherited for `button`.
+     * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
+     * 6. Remove default style for `input type="submit"`in iOS.
+     * 7. Style
+     * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
+     *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
+     * 9. Align text if button has a width
+     * 10. Required for `a`.
+     */
+
+    .#{$prefix}-button {
+        -webkit-appearance: none; /* 6 */
+        appearance: none; /* 6 */
+        border: none; /* 2 */
+        border-radius: 0;
+        box-sizing: border-box;
+        color: inherit;
+        display: inline-block; /* 7 */
+        font: inherit; /* 4 */
+        font-size: var(--button-font-size); /* 7 */
+        line-height: var(--button-line-height); /* 8 */
+        margin: 0; /* 1 */
+        overflow: visible; /* 3 */
+        padding: 0 var(--button-padding-horizontal); /* 7 */
+        text-align: center; /* 9 */
+        text-decoration: none; /* 10 */
+        text-transform: none; /* 5 */
+        vertical-align: middle; /* 7 */
+        @if map.has-key($mixins, 'hook-button') {
+            @include meta.apply(map.get($mixins, 'hook-button'));
+        }
+    }
+
+    .#{$prefix}-button:not(:disabled) { cursor: pointer; }
+
+    /*
+     * Remove the inner border and padding in Firefox.
+     */
+
+    .#{$prefix}-button::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+
+    /* Hover */
+    .#{$prefix}-button:hover {
+        /* 9 */
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-button-hover') {
+            @include meta.apply(map.get($mixins, 'hook-button-hover'));
+        }
+    }
+
+    /* OnClick + Active */
+    .#{$prefix}-button:active,
+    .#{$prefix}-button.#{$prefix}-active {
+        @if map.has-key($mixins, 'hook-button-active') {
+            @include meta.apply(map.get($mixins, 'hook-button-active'));
+        }
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Default
+     */
+
+    .#{$prefix}-button-default {
+        background-color: var(--button-default-background);
+        color: var(--button-default-color);
+        @if map.has-key($mixins, 'hook-button-default') {
+            @include meta.apply(map.get($mixins, 'hook-button-default'));
+        }
+    }
+
+    /* Hover */
+    .#{$prefix}-button-default:hover {
+        background-color: var(--button-default-hover-background);
+        color: var(--button-default-hover-color);
+        @if map.has-key($mixins, 'hook-button-default-hover') {
+            @include meta.apply(map.get($mixins, 'hook-button-default-hover'));
+        }
+    }
+
+    /* OnClick + Active */
+    .#{$prefix}-button-default:active,
+    .#{$prefix}-button-default.#{$prefix}-active {
+        background-color: var(--button-default-active-background);
+        color: var(--button-default-active-color);
+        @if map.has-key($mixins, 'hook-button-default-active') {
+            @include meta.apply(map.get($mixins, 'hook-button-default-active'));
+        }
+    }
+
+    /*
+     * Primary
+     */
+
+    .#{$prefix}-button-primary {
+        background-color: var(--button-primary-background);
+        color: var(--button-primary-color);
+        @if map.has-key($mixins, 'hook-button-primary') {
+            @include meta.apply(map.get($mixins, 'hook-button-primary'));
+        }
+    }
+
+    /* Hover */
+    .#{$prefix}-button-primary:hover {
+        background-color: var(--button-primary-hover-background);
+        color: var(--button-primary-hover-color);
+        @if map.has-key($mixins, 'hook-button-primary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-button-primary-hover'));
+        }
+    }
+
+    /* OnClick + Active */
+    .#{$prefix}-button-primary:active,
+    .#{$prefix}-button-primary.#{$prefix}-active {
+        background-color: var(--button-primary-active-background);
+        color: var(--button-primary-active-color);
+        @if map.has-key($mixins, 'hook-button-primary-active') {
+            @include meta.apply(map.get($mixins, 'hook-button-primary-active'));
+        }
+    }
+
+    /*
+     * Secondary
+     */
+
+    .#{$prefix}-button-secondary {
+        background-color: var(--button-secondary-background);
+        color: var(--button-secondary-color);
+        @if map.has-key($mixins, 'hook-button-secondary') {
+            @include meta.apply(map.get($mixins, 'hook-button-secondary'));
+        }
+    }
+
+    /* Hover */
+    .#{$prefix}-button-secondary:hover {
+        background-color: var(--button-secondary-hover-background);
+        color: var(--button-secondary-hover-color);
+        @if map.has-key($mixins, 'hook-button-secondary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-button-secondary-hover'));
+        }
+    }
+
+    /* OnClick + Active */
+    .#{$prefix}-button-secondary:active,
+    .#{$prefix}-button-secondary.#{$prefix}-active {
+        background-color: var(--button-secondary-active-background);
+        color: var(--button-secondary-active-color);
+        @if map.has-key($mixins, 'hook-button-secondary-active') {
+            @include meta.apply(map.get($mixins, 'hook-button-secondary-active'));
+        }
+    }
+
+    /*
+     * Tertiary
+     */
+
+    .#{$prefix}-button-tertiary {
+        background-color: var(--button-tertiary-background);
+        color: var(--button-tertiary-color);
+        @if map.has-key($mixins, 'hook-button-tertiary') {
+            @include meta.apply(map.get($mixins, 'hook-button-tertiary'));
+        }
+    }
+
+    /* Hover */
+    .#{$prefix}-button-tertiary:hover {
+        background-color: var(--button-tertiary-hover-background);
+        color: var(--button-tertiary-hover-color);
+        @if map.has-key($mixins, 'hook-button-tertiary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-button-tertiary-hover'));
+        }
+    }
+
+    /* OnClick + Active */
+    .#{$prefix}-button-tertiary:active,
+    .#{$prefix}-button-tertiary.#{$prefix}-active {
+        background-color: var(--button-tertiary-active-background);
+        color: var(--button-tertiary-active-color);
+        @if map.has-key($mixins, 'hook-button-tertiary-active') {
+            @include meta.apply(map.get($mixins, 'hook-button-tertiary-active'));
+        }
+    }
+
+    /*
+     * Danger
+     */
+
+    .#{$prefix}-button-danger {
+        background-color: var(--button-danger-background);
+        color: var(--button-danger-color);
+        @if map.has-key($mixins, 'hook-button-danger') {
+            @include meta.apply(map.get($mixins, 'hook-button-danger'));
+        }
+    }
+
+    /* Hover */
+    .#{$prefix}-button-danger:hover {
+        background-color: var(--button-danger-hover-background);
+        color: var(--button-danger-hover-color);
+        @if map.has-key($mixins, 'hook-button-danger-hover') {
+            @include meta.apply(map.get($mixins, 'hook-button-danger-hover'));
+        }
+    }
+
+    /* OnClick + Active */
+    .#{$prefix}-button-danger:active,
+    .#{$prefix}-button-danger.#{$prefix}-active {
+        background-color: var(--button-danger-active-background);
+        color: var(--button-danger-active-color);
+        @if map.has-key($mixins, 'hook-button-danger-active') {
+            @include meta.apply(map.get($mixins, 'hook-button-danger-active'));
+        }
+    }
+
+    /*
+     * Disabled
+     * The same for all style modifiers
+     */
+
+    @if $button-disabled-mode == same {
+        .#{$prefix}-button-default:disabled,
+        .#{$prefix}-button-primary:disabled,
+        .#{$prefix}-button-secondary:disabled,
+        .#{$prefix}-button-tertiary:disabled,
+        .#{$prefix}-button-danger:disabled {
+            background-color: var(--button-disabled-background);
+            color: var(--button-disabled-color);
+            @if map.has-key($mixins, 'hook-button-disabled') {
+                @include meta.apply(map.get($mixins, 'hook-button-disabled'));
+            }
+        }
+    }
+
+    @if $button-disabled-mode == separate {
+        .#{$prefix}-button-default:disabled {
+            background-color: var(--button-default-disabled-background);
+            color: var(--button-default-disabled-color);
+            @if map.has-key($mixins, 'hook-button-default-disabled') {
+                @include meta.apply(map.get($mixins, 'hook-button-default-disabled'));
+            }
+        }
+
+        .#{$prefix}-button-primary:disabled {
+            background-color: var(--button-primary-disabled-background);
+            color: var(--button-primary-disabled-color);
+            @if map.has-key($mixins, 'hook-button-primary-disabled') {
+                @include meta.apply(map.get($mixins, 'hook-button-primary-disabled'));
+            }
+        }
+
+        .#{$prefix}-button-secondary:disabled {
+            background-color: var(--button-secondary-disabled-background);
+            color: var(--button-secondary-disabled-color);
+            @if map.has-key($mixins, 'hook-button-secondary-disabled') {
+                @include meta.apply(map.get($mixins, 'hook-button-secondary-disabled'));
+            }
+        }
+
+        .#{$prefix}-button-tertiary:disabled {
+            background-color: var(--button-tertiary-disabled-background);
+            color: var(--button-tertiary-disabled-color);
+            @if map.has-key($mixins, 'hook-button-tertiary-disabled') {
+                @include meta.apply(map.get($mixins, 'hook-button-tertiary-disabled'));
+            }
+        }
+
+        .#{$prefix}-button-danger:disabled {
+            background-color: var(--button-danger-disabled-background);
+            color: var(--button-danger-disabled-color);
+            @if map.has-key($mixins, 'hook-button-danger-disabled') {
+                @include meta.apply(map.get($mixins, 'hook-button-danger-disabled'));
+            }
+        }
+    }
+
+    /* Size modifiers
+     ========================================================================== */
+
+    .#{$prefix}-button-xsmall {
+        font-size: var(--button-xsmall-font-size);
+        line-height: var(--button-xsmall-line-height);
+        padding: 0 var(--button-xsmall-padding-horizontal);
+        @if map.has-key($mixins, 'hook-button-xsmall') {
+            @include meta.apply(map.get($mixins, 'hook-button-xsmall'));
+        }
+    }
+
+    .#{$prefix}-button-small {
+        font-size: var(--button-small-font-size);
+        line-height: var(--button-small-line-height);
+        padding: 0 var(--button-small-padding-horizontal);
+        @if map.has-key($mixins, 'hook-button-small') {
+            @include meta.apply(map.get($mixins, 'hook-button-small'));
+        }
+    }
+
+    .#{$prefix}-button-medium {
+        font-size: var(--button-medium-font-size);
+        line-height: var(--button-medium-line-height);
+        padding: 0 var(--button-medium-padding-horizontal);
+        @if map.has-key($mixins, 'hook-button-medium') {
+            @include meta.apply(map.get($mixins, 'hook-button-medium'));
+        }
+    }
+
+    .#{$prefix}-button-large {
+        font-size: var(--button-large-font-size);
+        line-height: var(--button-large-line-height);
+        padding: 0 var(--button-large-padding-horizontal);
+        @if map.has-key($mixins, 'hook-button-large') {
+            @include meta.apply(map.get($mixins, 'hook-button-large'));
+        }
+    }
+
+    .#{$prefix}-button-xlarge {
+        font-size: var(--button-xlarge-font-size);
+        line-height: var(--button-xlarge-line-height);
+        padding: 0 var(--button-xlarge-padding-horizontal);
+        @if map.has-key($mixins, 'hook-button-xlarge') {
+            @include meta.apply(map.get($mixins, 'hook-button-xlarge'));
+        }
+    }
+
+
+    /* Text modifiers
+     ========================================================================== */
+
+    /*
+     * Text
+     * 1. Reset
+     * 2. Style
+     */
+
+    .#{$prefix}-button-text {
+        background: none; /* 1 */
+        color: var(--button-text-color); /* 2 */
+        line-height: var(--button-text-line-height); /* 1 */
+        padding: 0; /* 1 */
+        @if map.has-key($mixins, 'hook-button-text') {
+            @include meta.apply(map.get($mixins, 'hook-button-text'));
+        }
+    }
+
+    /* Hover */
+    .#{$prefix}-button-text:hover {
+        color: var(--button-text-hover-color);
+        @if map.has-key($mixins, 'hook-button-text-hover') {
+            @include meta.apply(map.get($mixins, 'hook-button-text-hover'));
+        }
+    }
+
+    /* Disabled */
+    .#{$prefix}-button-text:disabled {
+        color: var(--button-text-disabled-color);
+        @if map.has-key($mixins, 'hook-button-text-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-button-text-disabled'));
+        }
+    }
+
+    /*
+     * Link
+     * 1. Reset
+     * 2. Style
+     */
+
+    .#{$prefix}-button-link {
+        background: none; /* 1 */
+        color: var(--button-link-color); /* 2 */
+        line-height: var(--button-link-line-height); /* 1 */
+        padding: 0; /* 1 */
+        @if map.has-key($mixins, 'hook-button-link') {
+            @include meta.apply(map.get($mixins, 'hook-button-link'));
+        }
+    }
+
+    /* Hover */
+    .#{$prefix}-button-link:hover {
+        color: var(--button-link-hover-color);
+        text-decoration: var(--button-link-hover-text-decoration);
+        @if map.has-key($mixins, 'hook-button-link-hover') {
+            @include meta.apply(map.get($mixins, 'hook-button-link-hover'));
+        }
+    }
+
+    /* Disabled */
+    .#{$prefix}-button-link:disabled {
+        color: var(--button-link-disabled-color);
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-button-link-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-button-link-disabled'));
+        }
+    }
+
+
+    /* Ghost modifiers
+     ========================================================================== */
+
+    .#{$prefix}-button.#{$prefix}-button-ghost {
+        background-color: transparent;
+        border: var(--button-ghost-border-width) var(--button-ghost-border-style);
+    }
+
+    .#{$prefix}-button-default.#{$prefix}-button-ghost {
+        background-color: transparent;
+        border-color: var(--button-ghost-default-border);
+        color: var(--button-ghost-default-color);
+    }
+
+    .#{$prefix}-button-default.#{$prefix}-button-ghost:hover {
+        background-color: transparent;
+        border-color: var(--button-ghost-default-hover-border);
+    }
+
+    .#{$prefix}-button-default.#{$prefix}-button-ghost:active,
+    .#{$prefix}-button-default.#{$prefix}-button-ghost.active {
+        background-color: transparent;
+        border-color: var(--button-ghost-default-active-border);
+    }
+
+    .#{$prefix}-button-primary.#{$prefix}-button-ghost {
+        background-color: transparent;
+        border-color: var(--button-ghost-primary-border);
+        color: var(--button-ghost-primary-color);
+    }
+
+    .#{$prefix}-button-primary.#{$prefix}-button-ghost:hover {
+        background-color: transparent;
+        border-color: var(--button-ghost-primary-hover-border);
+    }
+
+    .#{$prefix}-button-primary.#{$prefix}-button-ghost:active,
+    .#{$prefix}-button-primary.#{$prefix}-button-ghost.active {
+        background-color: transparent;
+        border-color: var(--button-ghost-primary-active-border);
+    }
+
+    .#{$prefix}-button-secondary.#{$prefix}-button-ghost {
+        background-color: transparent;
+        border-color: var(--button-ghost-secondary-border);
+        color: var(--button-ghost-secondary-color);
+    }
+
+    .#{$prefix}-button-secondary.#{$prefix}-button-ghost:hover {
+        background-color: transparent;
+        border-color: var(--button-ghost-secondary-hover-border);
+    }
+
+    .#{$prefix}-button-secondary.#{$prefix}-button-ghost:active,
+    .#{$prefix}-button-secondary.#{$prefix}-button-ghost.active {
+        background-color: transparent;
+        border-color: var(--button-ghost-secondary-active-border);
+    }
+
+    .#{$prefix}-button-tertiary.#{$prefix}-button-ghost {
+        background-color: transparent;
+        border-color: var(--button-ghost-tertiary-border);
+        color: var(--button-ghost-tertiary-color);
+    }
+
+    .#{$prefix}-button-tertiary.#{$prefix}-button-ghost:hover {
+        background-color: transparent;
+        border-color: var(--button-ghost-tertiary-hover-border);
+    }
+
+    .#{$prefix}-button-tertiary.#{$prefix}-button-ghost:active,
+    .#{$prefix}-button-tertiary.#{$prefix}-button-ghost.active {
+        background-color: transparent;
+        border-color: var(--button-ghost-tertiary-active-border);
+    }
+
+    .#{$prefix}-button-danger.#{$prefix}-button-ghost {
+        background-color: transparent;
+        border-color: var(--button-ghost-danger-border);
+        color: var(--button-ghost-danger-color);
+    }
+
+    .#{$prefix}-button-danger.#{$prefix}-button-ghost:hover {
+        background-color: transparent;
+        border-color: var(--button-ghost-danger-hover-border);
+    }
+
+    .#{$prefix}-button-danger.#{$prefix}-button-ghost:active,
+    .#{$prefix}-button-danger.#{$prefix}-button-ghost.active {
+        background-color: transparent;
+        border-color: var(--button-ghost-danger-active-border);
+    }
+
+
+    /* Shape modifiers
+     ========================================================================== */
+
+    .#{$prefix}-button-circle {
+        border-radius: var(--button-circle-border-radius);
+    }
+
+    .#{$prefix}-button-round {
+        border-radius: var(--button-round-border-radius);
+    }
+
+
+    /* Group
+     ========================================================================== */
+
+    /*
+     * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
+     * 2. Behave like button
+     * 3. Create position context
+     */
+
+    .#{$prefix}-button-group {
+        display: inline-flex; /* 1 */
+        position: relative; /* 3 */
+        vertical-align: middle; /* 2 */
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-button-misc') {
+        @include meta.apply(map.get($mixins, 'hook-button-misc'));
+    }
+
+    @content;
+}
+
+@mixin button-tokens {
+    --button-line-height: var(--global-control-height);
+    --button-xsmall-line-height: var(--global-control-xsmall-height);
+    --button-small-line-height: var(--global-control-small-height);
+    --button-medium-line-height: var(--global-control-medium-height);
+    --button-large-line-height: var(--global-control-large-height);
+    --button-xlarge-line-height: var(--global-control-xlarge-height);
+    --button-font-size: var(--global-font-size);
+    --button-xsmall-font-size: var(--global-2xsmall-font-size);
+    --button-small-font-size: var(--global-small-font-size);
+    --button-medium-font-size: var(--global-font-size);
+    --button-large-font-size: var(--global-medium-font-size);
+    --button-xlarge-font-size: var(--global-large-font-size);
+    --button-padding-horizontal: var(--global-gutter);
+    --button-xsmall-padding-horizontal: var(--global-xsmall-gutter);
+    --button-small-padding-horizontal: var(--global-small-gutter);
+    --button-medium-padding-horizontal: var(--global-gutter);
+    --button-large-padding-horizontal: var(--global-medium-gutter);
+    --button-xlarge-padding-horizontal: var(--global-large-gutter);
+    --button-default-background: var(--global-muted-background);
+    --button-default-color: var(--global-emphasis-color);
+    --button-default-hover-background: #{$button-default-hover-background};
+    --button-default-hover-color: var(--global-emphasis-color);
+    --button-default-active-background: #{$button-default-active-background};
+    --button-default-active-color: var(--global-emphasis-color);
+    --button-primary-background: var(--global-primary-background);
+    --button-primary-color: var(--global-inverse-color);
+    --button-primary-hover-background: #{$button-primary-hover-background};
+    --button-primary-hover-color: var(--global-inverse-color);
+    --button-primary-active-background: #{$button-primary-active-background};
+    --button-primary-active-color: var(--global-inverse-color);
+    --button-secondary-background: var(--global-secondary-background);
+    --button-secondary-color: var(--global-inverse-color);
+    --button-secondary-hover-background: #{$button-secondary-hover-background};
+    --button-secondary-hover-color: var(--global-inverse-color);
+    --button-secondary-active-background: #{$button-secondary-active-background};
+    --button-secondary-active-color: var(--global-inverse-color);
+    --button-tertiary-background: var(--global-tertiary-background);
+    --button-tertiary-color: var(--global-inverse-color);
+    --button-tertiary-hover-background: #{$button-tertiary-hover-background};
+    --button-tertiary-hover-color: var(--global-inverse-color);
+    --button-tertiary-active-background: #{$button-tertiary-active-background};
+    --button-tertiary-active-color: var(--global-inverse-color);
+    --button-danger-background: var(--global-danger-background);
+    --button-danger-color: var(--global-inverse-color);
+    --button-danger-hover-background: #{$button-danger-hover-background};
+    --button-danger-hover-color: var(--global-inverse-color);
+    --button-danger-active-background: #{$button-danger-active-background};
+    --button-danger-active-color: var(--global-inverse-color);
+    --button-ghost-border-width: var(--global-border-width);
+    --button-ghost-border-style: var(--global-border-style);
+    --button-ghost-default-color: var(--button-default-background);
+    --button-ghost-default-border: var(--button-default-background);
+    --button-ghost-default-hover-border: var(--button-default-hover-background);
+    --button-ghost-default-active-border: var(--button-default-active-background);
+    --button-ghost-primary-color: var(--button-primary-background);
+    --button-ghost-primary-border: var(--button-primary-background);
+    --button-ghost-primary-hover-border: var(--button-primary-hover-background);
+    --button-ghost-primary-active-border: var(--button-primary-active-background);
+    --button-ghost-secondary-color: var(--button-secondary-background);
+    --button-ghost-secondary-border: var(--button-secondary-background);
+    --button-ghost-secondary-hover-border: var(--button-secondary-hover-background);
+    --button-ghost-secondary-active-border: var(--button-secondary-active-background);
+    --button-ghost-tertiary-color: var(--button-tertiary-background);
+    --button-ghost-tertiary-border: var(--button-tertiary-background);
+    --button-ghost-tertiary-hover-border: var(--button-tertiary-hover-background);
+    --button-ghost-tertiary-active-border: var(--button-tertiary-active-background);
+    --button-ghost-danger-color: var(--button-danger-background);
+    --button-ghost-danger-border: var(--button-danger-background);
+    --button-ghost-danger-hover-border: var(--button-danger-hover-background);
+    --button-ghost-danger-active-border: var(--button-danger-active-background);
+    --button-circle-border-radius: #{$button-circle-border-radius};
+    --button-round-border-radius: #{$button-round-border-radius};
+    --button-disabled-background: var(--global-muted-background);
+    --button-disabled-color: var(--global-muted-color);
+    --button-text-line-height: var(--global-line-height);
+    --button-text-color: var(--global-muted-color);
+    --button-text-hover-color: var(--global-color);
+    --button-text-disabled-color: var(--global-muted-color);
+    --button-link-line-height: var(--global-line-height);
+    --button-link-color: var(--global-link-color);
+    --button-link-hover-color: var(--global-link-hover-color);
+    --button-link-hover-text-decoration: #{$button-link-hover-text-decoration};
+    --button-link-disabled-color: var(--global-muted-color);
+
+    @content;
+}
+
+@mixin button-inverse-tokens {
+    --inverse-button-color: var(--inverse-global-inverse-color);
+    --inverse-button-default-background: var(--inverse-global-primary-background);
+    --inverse-button-default-color: var(--inverse-global-inverse-color);
+    --inverse-button-default-hover-background: #{$inverse-button-default-hover-background};
+    --inverse-button-default-hover-color: var(--inverse-global-inverse-color);
+    --inverse-button-default-active-background: #{$inverse-button-default-active-background};
+    --inverse-button-default-active-color: var(--inverse-global-inverse-color);
+    --inverse-button-primary-background: var(--inverse-global-primary-background);
+    --inverse-button-primary-color: var(--inverse-global-inverse-color);
+    --inverse-button-primary-hover-background: #{$inverse-button-primary-hover-background};
+    --inverse-button-primary-hover-color: var(--inverse-global-inverse-color);
+    --inverse-button-primary-active-background: #{$inverse-button-primary-active-background};
+    --inverse-button-primary-active-color: var(--inverse-global-inverse-color);
+    --inverse-button-secondary-background: var(--inverse-global-primary-background);
+    --inverse-button-secondary-color: var(--inverse-global-inverse-color);
+    --inverse-button-secondary-hover-background: #{$inverse-button-secondary-hover-background};
+    --inverse-button-secondary-hover-color: var(--inverse-global-inverse-color);
+    --inverse-button-secondary-active-background: #{$inverse-button-secondary-active-background};
+    --inverse-button-secondary-active-color: var(--inverse-global-inverse-color);
+    --inverse-button-tertiary-background: var(--inverse-global-primary-background);
+    --inverse-button-tertiary-color: var(--inverse-global-inverse-color);
+    --inverse-button-tertiary-hover-background: #{$inverse-button-tertiary-hover-background};
+    --inverse-button-tertiary-hover-color: var(--inverse-global-inverse-color);
+    --inverse-button-tertiary-active-background: #{$inverse-button-tertiary-active-background};
+    --inverse-button-tertiary-active-color: var(--inverse-global-inverse-color);
+    --inverse-button-danger-background: var(--button-danger-background);
+    --inverse-button-danger-color: var(--button-danger-color);
+    --inverse-button-danger-hover-background: var(--button-danger-hover-background);
+    --inverse-button-danger-hover-color: var(--button-danger-hover-color);
+    --inverse-button-danger-active-background: var(--button-danger-active-background);
+    --inverse-button-danger-active-color: var(--button-danger-active-color);
+    --inverse-button-text-color: var(--inverse-global-emphasis-color);
+    --inverse-button-text-hover-color: var(--inverse-global-muted-color);
+    --inverse-button-text-disabled-color: var(--inverse-global-muted-color);
+    --inverse-button-link-color: var(--inverse-global-emphasis-color);
+    --inverse-button-link-hover-color: var(--inverse-global-muted-color);
+
+    @content;
+}