From 01c01780ab5cb38fa2cf04fe694c890102716ad7 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Wed, 15 Feb 2023 19:05:44 +0200 Subject: [PATCH] fix: add missing tokens for Button component (#1924) --- scss/core/css/utility-classes.css | 2 +- scss/core/css/variables.css | 348 +++++++++-- src/Button/Button.scss | 603 +++++++++++++------- src/Button/_mixins.scss | 49 -- src/Button/_variables.scss | 291 +++++++++- tokens/src/components/Button/brand.json | 116 +++- tokens/src/components/Button/danger.json | 94 ++- tokens/src/components/Button/dark.json | 98 +++- tokens/src/components/Button/info.json | 100 +++- tokens/src/components/Button/light.json | 96 +++- tokens/src/components/Button/primary.json | 102 +++- tokens/src/components/Button/secondary.json | 108 +++- tokens/src/components/Button/success.json | 97 +++- tokens/src/components/Button/tertiary.json | 40 +- tokens/src/components/Button/warning.json | 116 +++- tokens/style-dictionary.js | 8 +- 16 files changed, 1896 insertions(+), 372 deletions(-) diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css index e5168e53089..150036c262a 100644 --- a/scss/core/css/utility-classes.css +++ b/scss/core/css/utility-classes.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Tue, 31 Jan 2023 09:38:46 GMT + * Generated on Wed, 15 Feb 2023 14:44:39 GMT */ .bg-dark { diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css index a945b2aecba..c8e5f992da0 100644 --- a/scss/core/css/variables.css +++ b/scss/core/css/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Tue, 31 Jan 2023 09:38:46 GMT + * Generated on Wed, 15 Feb 2023 14:44:39 GMT */ :root { @@ -448,7 +448,7 @@ --pgn-color-blue: #23419FFF; --pgn-color-black: #000000FF; --pgn-color-white: #FFFFFFFF; - --pgn-color-toast-base: #000000FF; + --pgn-color-toast-base: inherit; --pgn-color-progress-bar-bg: #00000000; --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; --pgn-color-popover-border: #00000033; @@ -457,39 +457,148 @@ --pgn-color-menu-border-base: #00000000; --pgn-color-icon-button-bg: #00000000; --pgn-color-mark-bg: #FFF243FF; - --pgn-color-list-group-base: #000000FF; + --pgn-color-list-group-base: inherit; --pgn-color-form-control-select-bg-size: #000000FF; - --pgn-color-form-control-label-base: #000000FF; + --pgn-color-form-control-label-base: inherit; --pgn-color-code-base: #E83E8CFF; --pgn-color-carousel-control-opacity-hover: #000000FF; --pgn-color-carousel-control-opacity-base: #000000FF; - --pgn-color-card-base: #000000FF; + --pgn-color-card-base: inherit; + --pgn-color-btn-disabled-border-inverse-warning: #00000000; + --pgn-color-btn-disabled-border-inverse-outline-success: inherit; + --pgn-color-btn-disabled-border-inverse-success: #00000000; + --pgn-color-btn-disabled-border-secondary: inherit; + --pgn-color-btn-disabled-border-inverse-primary: #00000000; + --pgn-color-btn-disabled-border-inverse-light: #00000000; + --pgn-color-btn-disabled-border-inverse-info: #00000000; + --pgn-color-btn-disabled-border-inverse-dark: #00000000; + --pgn-color-btn-disabled-border-inverse-danger: #00000000; + --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit; + --pgn-color-btn-disabled-bg-inverse-warning: inherit; + --pgn-color-btn-disabled-bg-outline-warning: inherit; + --pgn-color-btn-disabled-bg-inverse-tertiary: inherit; + --pgn-color-btn-disabled-bg-tertiary: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-success: inherit; + --pgn-color-btn-disabled-bg-inverse-success: inherit; + --pgn-color-btn-disabled-bg-outline-success: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-disabled-bg-inverse-secondary: inherit; + --pgn-color-btn-disabled-bg-outline-secondary: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit; + --pgn-color-btn-disabled-bg-outline-primary: inherit; + --pgn-color-btn-disabled-bg-inverse-primary: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-light: inherit; + --pgn-color-btn-disabled-bg-inverse-light: inherit; + --pgn-color-btn-disabled-bg-outline-light: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-info: inherit; + --pgn-color-btn-disabled-bg-inverse-info: inherit; + --pgn-color-btn-disabled-bg-outline-info: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit; + --pgn-color-btn-disabled-bg-inverse-dark: inherit; + --pgn-color-btn-disabled-bg-outline-dark: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit; + --pgn-color-btn-disabled-bg-inverse-danger: #00000000; + --pgn-color-btn-disabled-bg-outline-danger: inherit; + --pgn-color-btn-disabled-bg-inverse-brand: #00000000; + --pgn-color-btn-disabled-bg-outline-brand: inherit; + --pgn-color-btn-disabled-text-inverse-secondary: inherit; + --pgn-color-btn-disabled-text-outline-secondary: inherit; + --pgn-color-btn-disabled-text-outline-dark: inherit; + --pgn-color-btn-focus-outline-inverse-outline-warning: inherit; + --pgn-color-btn-focus-bg-inverse-outline-warning: inherit; + --pgn-color-btn-focus-bg-outline-warning: inherit; + --pgn-color-btn-focus-bg-inverse-tertiary: inherit; + --pgn-color-btn-focus-bg-tertiary: inherit; + --pgn-color-btn-focus-bg-inverse-outline-success: inherit; + --pgn-color-btn-focus-bg-outline-success: inherit; + --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-focus-bg-outline-secondary: #00000000; + --pgn-color-btn-focus-bg-inverse-outline-primary: inherit; + --pgn-color-btn-focus-bg-outline-primary: inherit; + --pgn-color-btn-focus-bg-inverse-outline-light: inherit; + --pgn-color-btn-focus-bg-outline-light: #00000000; + --pgn-color-btn-focus-bg-inverse-outline-info: inherit; + --pgn-color-btn-focus-bg-outline-info: inherit; + --pgn-color-btn-focus-bg-inverse-outline-dark: inherit; + --pgn-color-btn-focus-bg-outline-dark: inherit; + --pgn-color-btn-focus-bg-inverse-outline-danger: inherit; + --pgn-color-btn-focus-bg-outline-danger: inherit; + --pgn-color-btn-focus-bg-inverse-outline-brand: inherit; + --pgn-color-btn-focus-bg-outline-brand: inherit; + --pgn-color-btn-focus-border-inverse-tertiary: #00000000; + --pgn-color-btn-focus-text-inverse-secondary: inherit; + --pgn-color-btn-focus-text-outline-dark: inherit; --pgn-color-btn-active-border-inverse-outline-warning: #00000000; + --pgn-color-btn-active-border-inverse-warning: inherit; --pgn-color-btn-active-border-inverse-tertiary: #00000000; --pgn-color-btn-active-border-tertiary: #00000000; --pgn-color-btn-active-border-inverse-outline-success: #00000000; + --pgn-color-btn-active-border-inverse-success: inherit; + --pgn-color-btn-active-border-inverse-secondary: #00000000; --pgn-color-btn-active-border-inverse-outline-secondary: #00000000; + --pgn-color-btn-active-border-inverse-primary: #00000000; --pgn-color-btn-active-border-inverse-outline-primary: #00000000; --pgn-color-btn-active-border-inverse-outline-light: #00000000; + --pgn-color-btn-active-border-inverse-light: inherit; --pgn-color-btn-active-border-inverse-outline-info: #00000000; + --pgn-color-btn-active-border-inverse-info: #00000000; --pgn-color-btn-active-border-inverse-outline-dark: #00000000; + --pgn-color-btn-active-border-inverse-dark: #00000000; --pgn-color-btn-active-border-inverse-outline-danger: #00000000; + --pgn-color-btn-active-border-inverse-danger: #00000000; --pgn-color-btn-active-border-inverse-outline-brand: #00000000; + --pgn-color-btn-active-border-inverse-brand: #00000000; --pgn-color-btn-hover-border-inverse-outline-warning: #00000000; + --pgn-color-btn-hover-border-inverse-warning: #00000000; --pgn-color-btn-hover-border-inverse-tertiary: #00000000; --pgn-color-btn-hover-border-tertiary: #00000000; --pgn-color-btn-hover-border-inverse-outline-success: #00000000; + --pgn-color-btn-hover-border-inverse-success: #00000000; + --pgn-color-btn-hover-border-inverse-secondary: #00000000; --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000; + --pgn-color-btn-hover-border-inverse-primary: #00000000; --pgn-color-btn-hover-border-inverse-outline-primary: #00000000; --pgn-color-btn-hover-border-inverse-outline-light: #00000000; + --pgn-color-btn-hover-border-inverse-light: #00000000; --pgn-color-btn-hover-border-inverse-outline-info: #00000000; + --pgn-color-btn-hover-border-inverse-info: #00000000; --pgn-color-btn-hover-border-inverse-outline-dark: #00000000; + --pgn-color-btn-hover-border-inverse-dark: #00000000; --pgn-color-btn-hover-border-inverse-outline-danger: #00000000; + --pgn-color-btn-hover-border-inverse-danger: #00000000; + --pgn-color-btn-hover-border-inverse-brand: #00000000; --pgn-color-btn-hover-border-inverse-outline-brand: #00000000; + --pgn-color-btn-border-inverse-warning: #00000000; --pgn-color-btn-border-inverse-tertiary: #00000000; --pgn-color-btn-border-tertiary: #00000000; + --pgn-color-btn-border-inverse-success: #00000000; + --pgn-color-btn-border-inverse-secondary: #00000000; + --pgn-color-btn-border-inverse-primary: #00000000; + --pgn-color-btn-border-inverse-light: #00000000; + --pgn-color-btn-border-inverse-info: #00000000; + --pgn-color-btn-border-inverse-dark: #00000000; + --pgn-color-btn-border-inverse-danger: #00000000; + --pgn-color-btn-border-inverse-brand: #00000000; + --pgn-color-btn-bg-inverse-outline-warning: inherit; + --pgn-color-btn-bg-outline-warning: inherit; --pgn-color-btn-bg-inverse-tertiary: #00000000; --pgn-color-btn-bg-tertiary: #00000000; + --pgn-color-btn-bg-inverse-outline-success: inherit; + --pgn-color-btn-bg-outline-success: inherit; + --pgn-color-btn-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-bg-outline-secondary: inherit; + --pgn-color-btn-bg-inverse-outline-primary: #00000000; + --pgn-color-btn-bg-outline-primary: #00000000; + --pgn-color-btn-bg-inverse-outline-light: inherit; + --pgn-color-btn-bg-outline-light: inherit; + --pgn-color-btn-bg-inverse-outline-info: inherit; + --pgn-color-btn-bg-outline-info: inherit; + --pgn-color-btn-bg-inverse-outline-dark: #00000000; + --pgn-color-btn-bg-outline-dark: inherit; + --pgn-color-btn-bg-inverse-outline-danger: #00000000; + --pgn-color-btn-bg-outline-danger: inherit; + --pgn-color-btn-bg-inverse-outline-brand: #00000000; + --pgn-color-btn-bg-outline-brand: inherit; --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; --pgn-elevation-scrollable-body-box-shadow: #0000008C; --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); @@ -756,25 +865,37 @@ --pgn-color-carousel-control-base: var(--pgn-color-white); --pgn-color-card-border-focus: #00000080; --pgn-color-card-border-base: #00000020; - --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-tertiary: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-white); + --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary); + --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary); + --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary); + --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand); + --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand); + --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white); + --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white); + --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white); + --pgn-color-btn-focus-outline-inverse-light: var(--pgn-color-white); + --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning); + --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary); --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white); --pgn-color-btn-focus-border-inverse-outline-secondary: var(--pgn-color-white); --pgn-color-btn-focus-border-inverse-secondary: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-white); --pgn-color-btn-focus-border-inverse-primary: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-white); + --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-btn-border-inverse-light); --pgn-color-btn-focus-border-inverse-info: var(--pgn-color-white); --pgn-color-btn-focus-border-inverse-outline-dark: var(--pgn-color-white); --pgn-color-btn-focus-border-inverse-dark: var(--pgn-color-white); --pgn-color-btn-focus-border-inverse-outline-danger: var(--pgn-color-white); --pgn-color-btn-focus-border-inverse-danger: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-white); --pgn-color-btn-focus-border-inverse-brand: var(--pgn-color-white); + --pgn-color-btn-active-bg-inverse-warning: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-success: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-secondary: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-primary: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-light: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-info: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-dark: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-danger: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-brand: var(--pgn-color-gray-100); --pgn-color-btn-active-text-inverse-tertiary: var(--pgn-color-white); --pgn-color-btn-active-text-tertiary: var(--pgn-color-gray-700); --pgn-color-btn-hover-bg-inverse-tertiary: #FFFFFF1A; @@ -1003,6 +1124,82 @@ --pgn-color-chip-bg-light: var(--pgn-color-light-500); --pgn-color-card-divider-bg: var(--pgn-color-light-400); --pgn-color-card-bg: var(--pgn-color-bg-base); + --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning); + --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary); + --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base); + --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); + --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light); + --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info); + --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark); + --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger); + --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); + --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand); + --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary); + --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light); + --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark); + --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand); + --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning); + --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base); + --pgn-color-btn-disabled-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary); + --pgn-color-btn-disabled-text-tertiary: var(--pgn-color-btn-text-tertiary); + --pgn-color-btn-disabled-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success); + --pgn-color-btn-disabled-text-inverse-success: var(--pgn-color-success-base); + --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary); + --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); + --pgn-color-btn-disabled-text-inverse-primary: var(--pgn-color-primary-500); + --pgn-color-btn-disabled-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light); + --pgn-color-btn-disabled-text-inverse-light: var(--pgn-color-btn-text-inverse-light); + --pgn-color-btn-disabled-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info); + --pgn-color-btn-disabled-text-inverse-info: var(--pgn-color-info-base); + --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark); + --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark); + --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger); + --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base); + --pgn-color-btn-disabled-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); + --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500); + --pgn-color-btn-focus-outline-inverse-success: var(--pgn-color-btn-focus-border-inverse-success); + --pgn-color-btn-focus-outline-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary); + --pgn-color-btn-focus-outline-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary); + --pgn-color-btn-focus-outline-inverse-primary: var(--pgn-color-btn-focus-border-inverse-primary); + --pgn-color-btn-focus-outline-light: var(--pgn-color-primary-300); + --pgn-color-btn-focus-outline-inverse-info: var(--pgn-color-btn-focus-border-inverse-info); + --pgn-color-btn-focus-outline-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark); + --pgn-color-btn-focus-outline-inverse-dark: var(--pgn-color-btn-focus-border-inverse-dark); + --pgn-color-btn-focus-outline-inverse-outline-danger: var(--pgn-color-btn-focus-border-inverse-danger); + --pgn-color-btn-focus-outline-inverse-danger: var(--pgn-color-btn-focus-border-inverse-danger); + --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand); + --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary); + --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light); + --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark); + --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand); + --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning); + --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success); + --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary); + --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary); + --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light); + --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light); + --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info); + --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark); + --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-btn-border-inverse-outline-brand); + --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand); + --pgn-color-btn-focus-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning); + --pgn-color-btn-focus-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary); + --pgn-color-btn-focus-text-tertiary: var(--pgn-color-btn-text-tertiary); + --pgn-color-btn-focus-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success); + --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary); + --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); + --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary); + --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-btn-text-outline-primary); + --pgn-color-btn-focus-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light); + --pgn-color-btn-focus-text-inverse-light: var(--pgn-color-btn-text-inverse-light); + --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light); + --pgn-color-btn-focus-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info); + --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark); + --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark); + --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger); + --pgn-color-btn-focus-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); + --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand); + --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand); --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary); --pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500); --pgn-color-btn-active-text-inverse-primary: #051627FF; @@ -1195,15 +1392,71 @@ --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled); --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active); --pgn-color-btn-disabled-link: var(--pgn-color-disabled); - --pgn-color-btn-focus-border-tertiary: var(--pgn-color-theme-focus-primary); - --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-theme-focus-primary); - --pgn-color-btn-focus-border-primary: var(--pgn-color-theme-focus-primary); - --pgn-color-btn-focus-border-outline-light: var(--pgn-color-theme-focus-light); - --pgn-color-btn-focus-border-light: var(--pgn-color-theme-focus-light); - --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-theme-focus-dark); - --pgn-color-btn-focus-border-dark: var(--pgn-color-theme-focus-dark); - --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-theme-focus-brand); - --pgn-color-btn-focus-border-brand: var(--pgn-color-theme-focus-brand); + --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning); + --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success); + --pgn-color-btn-disabled-border-primary: var(--pgn-color-btn-border-primary); + --pgn-color-btn-disabled-border-light: var(--pgn-color-btn-border-light); + --pgn-color-btn-disabled-border-outline-info: var(--pgn-color-btn-border-outline-info); + --pgn-color-btn-disabled-border-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-disabled-border-dark: var(--pgn-color-btn-border-dark); + --pgn-color-btn-disabled-border-outline-danger: var(--pgn-color-btn-border-outline-danger); + --pgn-color-btn-disabled-border-brand: var(--pgn-color-btn-border-brand); + --pgn-color-btn-disabled-bg-warning: var(--pgn-color-btn-bg-warning); + --pgn-color-btn-disabled-bg-success: var(--pgn-color-btn-bg-success); + --pgn-color-btn-disabled-bg-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-disabled-bg-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-disabled-bg-danger: var(--pgn-color-btn-bg-danger); + --pgn-color-btn-disabled-text-outline-warning: var(--pgn-color-btn-text-outline-warning); + --pgn-color-btn-disabled-text-outline-success: var(--pgn-color-btn-text-outline-success); + --pgn-color-btn-disabled-text-primary: var(--pgn-color-btn-text-primary); + --pgn-color-btn-disabled-text-light: var(--pgn-color-btn-text-light); + --pgn-color-btn-disabled-text-outline-info: var(--pgn-color-btn-text-outline-info); + --pgn-color-btn-disabled-text-dark: var(--pgn-color-btn-text-dark); + --pgn-color-btn-disabled-text-brand: var(--pgn-color-btn-text-brand); + --pgn-color-btn-focus-outline-tertiary: var(--pgn-color-theme-focus-primary); + --pgn-color-btn-focus-outline-inverse-outline-success: var(--pgn-color-btn-focus-border-inverse-outline-success); + --pgn-color-btn-focus-outline-outline-primary: var(--pgn-color-theme-focus-primary); + --pgn-color-btn-focus-outline-primary: var(--pgn-color-theme-focus-primary); + --pgn-color-btn-focus-outline-inverse-outline-light: var(--pgn-color-btn-focus-border-inverse-outline-light); + --pgn-color-btn-focus-outline-outline-light: var(--pgn-color-theme-focus-light); + --pgn-color-btn-focus-outline-inverse-outline-info: var(--pgn-color-btn-focus-border-inverse-outline-info); + --pgn-color-btn-focus-outline-outline-dark: var(--pgn-color-theme-focus-dark); + --pgn-color-btn-focus-outline-dark: var(--pgn-color-theme-focus-dark); + --pgn-color-btn-focus-outline-inverse-outline-brand: var(--pgn-color-btn-focus-border-inverse-outline-brand); + --pgn-color-btn-focus-outline-outline-brand: var(--pgn-color-theme-focus-brand); + --pgn-color-btn-focus-outline-brand: var(--pgn-color-theme-focus-brand); + --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning); + --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success); + --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-focus-bg-inverse-primary: var(--pgn-color-btn-bg-inverse-primary); + --pgn-color-btn-focus-bg-inverse-light: var(--pgn-color-btn-bg-inverse-light); + --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-focus-bg-inverse-dark: var(--pgn-color-btn-bg-inverse-dark); + --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger); + --pgn-color-btn-focus-bg-inverse-brand: var(--pgn-color-btn-bg-inverse-brand); + --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-btn-border-outline-warning); + --pgn-color-btn-focus-border-outline-success: var(--pgn-color-btn-border-outline-success); + --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-btn-border-outline-secondary); + --pgn-color-btn-focus-border-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-focus-border-primary: var(--pgn-color-btn-border-primary); + --pgn-color-btn-focus-border-light: var(--pgn-color-btn-border-light); + --pgn-color-btn-focus-border-outline-info: var(--pgn-color-btn-border-outline-info); + --pgn-color-btn-focus-border-dark: var(--pgn-color-btn-focus-bg-dark); + --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-btn-border-outline-danger); + --pgn-color-btn-focus-border-brand: var(--pgn-color-btn-border-brand); + --pgn-color-btn-focus-text-inverse-warning: var(--pgn-color-btn-text-inverse-warning); + --pgn-color-btn-focus-text-outline-warning: var(--pgn-color-btn-text-outline-warning); + --pgn-color-btn-focus-text-inverse-success: var(--pgn-color-btn-text-inverse-success); + --pgn-color-btn-focus-text-outline-success: var(--pgn-color-btn-text-outline-success); + --pgn-color-btn-focus-text-outline-secondary: var(--pgn-color-btn-text-outline-secondary); + --pgn-color-btn-focus-text-primary: var(--pgn-color-btn-text-primary); + --pgn-color-btn-focus-text-light: var(--pgn-color-btn-text-light); + --pgn-color-btn-focus-text-inverse-info: var(--pgn-color-btn-text-inverse-info); + --pgn-color-btn-focus-text-outline-info: var(--pgn-color-btn-text-outline-info); + --pgn-color-btn-focus-text-dark: var(--pgn-color-btn-text-dark); + --pgn-color-btn-focus-text-outline-danger: var(--pgn-color-btn-text-outline-danger); + --pgn-color-btn-focus-text-inverse-danger: var(--pgn-color-btn-text-inverse-danger); + --pgn-color-btn-focus-text-brand: var(--pgn-color-btn-text-brand); --pgn-color-btn-active-border-outline-primary: var(--pgn-color-theme-active-primary); --pgn-color-btn-active-border-primary: var(--pgn-color-theme-active-primary); --pgn-color-btn-active-border-outline-light: var(--pgn-color-theme-active-light); @@ -1351,16 +1604,44 @@ --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base); --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg); --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border); - --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-theme-focus-warning); - --pgn-color-btn-focus-border-warning: var(--pgn-color-theme-focus-warning); - --pgn-color-btn-focus-border-outline-success: var(--pgn-color-theme-focus-success); - --pgn-color-btn-focus-border-success: var(--pgn-color-theme-focus-success); - --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-theme-focus-secondary); - --pgn-color-btn-focus-border-secondary: var(--pgn-color-theme-focus-secondary); - --pgn-color-btn-focus-border-outline-info: var(--pgn-color-theme-focus-info); - --pgn-color-btn-focus-border-info: var(--pgn-color-theme-focus-info); - --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-theme-focus-danger); - --pgn-color-btn-focus-border-danger: var(--pgn-color-theme-focus-danger); + --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning); + --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success); + --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); + --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light); + --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark); + --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger); + --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning); + --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success); + --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary); + --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); + --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light); + --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info); + --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger); + --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand); + --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning); + --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning); + --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-theme-focus-success); + --pgn-color-btn-focus-outline-success: var(--pgn-color-theme-focus-success); + --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-theme-focus-secondary); + --pgn-color-btn-focus-outline-secondary: var(--pgn-color-theme-focus-secondary); + --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-theme-focus-info); + --pgn-color-btn-focus-outline-info: var(--pgn-color-theme-focus-info); + --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-theme-focus-danger); + --pgn-color-btn-focus-outline-danger: var(--pgn-color-theme-focus-danger); + --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning); + --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success); + --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary); + --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info); + --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger); + --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning); + --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success); + --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info); + --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-focus-bg-danger); + --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning); + --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success); + --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary); + --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info); + --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger); --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning); --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning); --pgn-color-btn-active-border-outline-success: var(--pgn-color-theme-active-success); @@ -1442,6 +1723,7 @@ --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,"); --pgn-color-pagination-text-hover: var(--pgn-color-link-hover); --pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base); + --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger); --pgn-color-btn-active-text-inverse-outline-warning: #454545FF; --pgn-color-btn-active-text-outline-warning: #454545FF; --pgn-color-btn-active-text-warning: #FFFFFFFF; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index 77c16f048b3..90258e50194 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -2,17 +2,6 @@ @import "mixins"; @import "button-group"; -// -// Override Bootstrap's button definition. -// We do this to get more control over focus -// and hover states, as well as to define -// an extra button variant: btn-inverse-${color} -// - -// -// Base styles -// - .btn { display: inline-flex; align-items: center; @@ -29,14 +18,69 @@ @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); - &:hover { - color: var(--pgn-btn-hover-color, #{$body-color}); - background-color: var(--pgn-btn-hover-bg, transparent); - border-color: var(--pgn-btn-hover-border-color, transparent); - text-decoration: none; + &:not(:disabled):not(.disabled):not(.btn-link) { + &.focus, + &:focus { + position: relative; + outline: 0; + box-shadow: none; + background: var(--pgn-btn-focus-bg, transparent); + border-color: var(--pgn-btn-focus-border-color, transparent); + color: var(--pgn-btn-focus-color, #{$body-color}); + + $distance: calc(#{$btn-focus-width} + #{$btn-focus-gap}); + $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width}); + + &::before { + content: ""; + position: absolute; + top: calc(#{$distance-include-btn-border} * -1); + right: calc(#{$distance-include-btn-border} * -1); + bottom: calc(#{$distance-include-btn-border} * -1); + left: calc(#{$distance-include-btn-border} * -1); + border: solid $btn-focus-width var(--pgn-btn-focus-outline-color, #{$body-color}); + border-radius: calc(#{$btn-border-radius} + #{$distance}); + } + + &.btn-lg::before { + border-radius: calc(#{$btn-border-radius-lg} + #{$distance}); + } + + &.btn-sm::before { + border-radius: calc(#{$btn-border-radius-sm} + #{$distance}); + } + + &:active, + &.active { + &::before { + opacity: .75; + } + } + + &:disabled, + &.disabled { + &::before { + display: none; + } + } + } + + &:hover { + color: var(--pgn-btn-hover-color, #{$body-color}); + background-color: var(--pgn-btn-hover-bg, transparent); + border-color: var(--pgn-btn-hover-border-color, transparent); + text-decoration: none; + } + + &:active, + &.active, + .show > &.dropdown-toggle { + color: var(--pgn-btn-active-color, inherit); + background-color: var(--pgn-btn-active-bg, inherit); + border-color: var(--pgn-btn-active-border-color, transparent); + } } - // Disabled comes first so active can properly restyle &.disabled, &:disabled { color: var(--pgn-btn-disabled-color, inherit); @@ -45,14 +89,6 @@ opacity: $btn-disabled-opacity; } - &:not(:disabled):not(.disabled):not(.btn-link):active, - &:not(:disabled):not(.disabled):not(.btn-link).active, - .show > &.dropdown-toggle { - color: var(--pgn-btn-active-color, inherit); - background-color: var(--pgn-btn-active-bg, inherit); - border-color: var(--pgn-btn-active-border-color, transparent); - } - // Button Icon Sizes .btn-icon-before { @@ -108,13 +144,6 @@ fieldset:disabled a.btn { color: $btn-link-disabled-color; pointer-events: none; } - - // No need for an active state here -} - -.btn-light, -.btn-dark { - @include button-focus(theme-color("primary", "focus")); } // @@ -190,61 +219,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-primary-hover-color}; --pgn-btn-hover-bg: #{$btn-primary-hover-bg}; --pgn-btn-hover-border-color: #{$btn-primary-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-primary-color}; - --pgn-btn-disabled-bg: #{$btn-primary-bg}; - --pgn-btn-disabled-border-color: #{$btn-primary-border-color}; + --pgn-btn-disabled-color: #{$btn-primary-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-primary-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-primary-disabled-border-color}; --pgn-btn-active-color: #{$btn-primary-active-color}; --pgn-btn-active-bg: #{$btn-primary-active-bg}; --pgn-btn-active-border-color: #{$btn-primary-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-primary-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-primary-focus-color}; + --pgn-btn-focus-border-color: #{$btn-primary-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-primary-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-primary-focus-border-color); } .btn-outline-primary { --pgn-btn-color: #{$btn-primary-outline-color}; + --pgn-btn-bg: #{$btn-primary-outline-bg}; --pgn-btn-border-color: #{$btn-primary-outline-border-color}; --pgn-btn-hover-color: #{$btn-primary-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-primary-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-primary-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-primary-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-primary-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-primary-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-primary-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-primary-outline-active-color}; --pgn-btn-active-bg: #{$btn-primary-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-primary-outline-active-border-color}; - - @include button-focus(#{$btn-primary-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-primary-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-primary-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-primary-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-primary-outline-focus-bg}; } .btn-inverse-primary { --pgn-btn-color: #{$btn-primary-inverse-color}; --pgn-btn-bg: #{$btn-primary-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-primary-inverse-border-color}; --pgn-btn-hover-color: #{$btn-primary-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-primary-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-primary-border-color}; + --pgn-btn-hover-border-color: #{$btn-primary-inverse-hover-border-color}; + --pgn-btn-disabled-color: #{$btn-primary-inverse-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-primary-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-primary-inverse-disabled-border-color}; --pgn-btn-active-color: #{$btn-primary-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-primary-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-primary-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-primary-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-primary-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-primary-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-primary-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-primary-inverse-focus-bg}; } .btn-inverse-outline-primary { --pgn-btn-color: #{$btn-primary-inverse-outline-color}; + --pgn-btn-bg: #{$btn-primary-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-primary-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-primary-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-primary-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-primary-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-primary-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-primary-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-primary-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-primary-inverse-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-primary-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-primary-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-primary-inverse-outline-active-border-color}; - - @include button-focus($btn-primary-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-primary-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-primary-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-primary-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-primary-inverse-outline-focus-bg}; } @@ -256,61 +299,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-secondary-hover-color}; --pgn-btn-hover-bg: #{$btn-secondary-hover-bg}; --pgn-btn-hover-border-color: #{$btn-secondary-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-secondary-color}; - --pgn-btn-disabled-bg: #{$btn-secondary-bg}; - --pgn-btn-disabled-border-color: #{$btn-secondary-border-color}; + --pgn-btn-disabled-color: #{$btn-secondary-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-secondary-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-secondary-disabled-border-color}; --pgn-btn-active-color: #{$btn-secondary-active-color}; --pgn-btn-active-bg: #{$btn-secondary-active-bg}; --pgn-btn-active-border-color: #{$btn-secondary-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-secondary-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-secondary-focus-color}; + --pgn-btn-focus-border-color: #{$btn-secondary-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-secondary-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-secondary-focus-border-color); } .btn-outline-secondary { --pgn-btn-color: #{$btn-secondary-outline-color}; + --pgn-btn-bg: #{$btn-secondary-outline-bg}; --pgn-btn-border-color: #{$btn-secondary-outline-border-color}; --pgn-btn-hover-color: #{$btn-secondary-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-secondary-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-secondary-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-secondary-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-secondary-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-secondary-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-secondary-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-secondary-outline-active-color}; --pgn-btn-active-bg: #{$btn-secondary-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-secondary-outline-active-border-color}; - - @include button-focus(#{$btn-secondary-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-secondary-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-secondary-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-secondary-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-secondary-outline-focus-bg}; } .btn-inverse-secondary { --pgn-btn-color: #{$btn-secondary-inverse-color}; --pgn-btn-bg: #{$btn-secondary-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-secondary-inverse-border-color}; --pgn-btn-hover-color: #{$btn-secondary-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-secondary-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-secondary-border-color}; + --pgn-btn-hover-border-color: #{$btn-secondary-inverse-hover-border-color}; + --pgn-btn-disabled-bg: #{$btn-secondary-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-secondary-inverse-disabled-border-color}; + --pgn-btn-disabled-color: #{$btn-secondary-inverse-disabled-color}; --pgn-btn-active-color: #{$btn-secondary-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-secondary-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-secondary-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-secondary-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-secondary-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-secondary-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-secondary-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-secondary-inverse-focus-bg}; } .btn-inverse-outline-secondary { --pgn-btn-color: #{$btn-secondary-inverse-outline-color}; + --pgn-btn-bg: #{$btn-secondary-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-secondary-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-secondary-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-secondary-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-secondary-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-secondary-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-secondary-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-secondary-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-secondary-inverse-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-secondary-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-secondary-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-secondary-inverse-outline-active-border-color}; - - @include button-focus($btn-secondary-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-secondary-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-secondary-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-secondary-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-secondary-inverse-outline-focus-bg}; } @@ -322,61 +379,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-brand-hover-color}; --pgn-btn-hover-bg: #{$btn-brand-hover-bg}; --pgn-btn-hover-border-color: #{$btn-brand-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-brand-color}; - --pgn-btn-disabled-bg: #{$btn-brand-bg}; - --pgn-btn-disabled-border-color: #{$btn-brand-border-color}; + --pgn-btn-disabled-color: #{$btn-brand-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-brand-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-brand-disabled-border-color}; --pgn-btn-active-color: #{$btn-brand-active-color}; --pgn-btn-active-bg: #{$btn-brand-active-bg}; --pgn-btn-active-border-color: #{$btn-brand-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-brand-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-brand-focus-color}; + --pgn-btn-focus-border-color: #{$btn-brand-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-brand-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-brand-focus-border-color); } .btn-outline-brand { --pgn-btn-color: #{$btn-brand-outline-color}; + --pgn-btn-bg: #{$btn-brand-outline-bg}; --pgn-btn-border-color: #{$btn-brand-outline-border-color}; --pgn-btn-hover-color: #{$btn-brand-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-brand-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-brand-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-brand-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-brand-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-brand-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-brand-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-brand-outline-active-color}; --pgn-btn-active-bg: #{$btn-brand-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-brand-outline-active-border-color}; - - @include button-focus(#{$btn-brand-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-brand-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-brand-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-brand-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-brand-outline-focus-bg}; } .btn-inverse-brand { --pgn-btn-color: #{$btn-brand-inverse-color}; --pgn-btn-bg: #{$btn-brand-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-brand-inverse-border-color}; --pgn-btn-hover-color: #{$btn-brand-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-brand-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-brand-border-color}; + --pgn-btn-hover-border-color: #{$btn-brand-inverse-hover-border-color}; + --pgn-btn-disabled-color: #{$btn-brand-inverse-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-brand-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-brand-inverse-disabled-border-color}; --pgn-btn-active-color: #{$btn-brand-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-brand-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-brand-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-brand-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-brand-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-brand-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-brand-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-brand-inverse-focus-bg}; } .btn-inverse-outline-brand { --pgn-btn-color: #{$btn-brand-inverse-outline-color}; + --pgn-btn-bg: #{$btn-brand-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-brand-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-brand-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-brand-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-brand-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-brand-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-brand-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-brand-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-brand-inverse-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-brand-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-brand-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-brand-inverse-outline-active-border-color}; - - @include button-focus($btn-brand-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-brand-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-brand-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-brand-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-brand-inverse-outline-focus-bg}; } @@ -388,61 +459,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-danger-hover-color}; --pgn-btn-hover-bg: #{$btn-danger-hover-bg}; --pgn-btn-hover-border-color: #{$btn-danger-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-danger-color}; - --pgn-btn-disabled-bg: #{$btn-danger-bg}; - --pgn-btn-disabled-border-color: #{$btn-danger-border-color}; + --pgn-btn-disabled-color: #{$btn-danger-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-danger-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-danger-disabled-border-color}; --pgn-btn-active-color: #{$btn-danger-active-color}; --pgn-btn-active-bg: #{$btn-danger-active-bg}; --pgn-btn-active-border-color: #{$btn-danger-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-danger-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-danger-focus-color}; + --pgn-btn-focus-border-color: #{$btn-danger-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-danger-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-danger-focus-border-color); } .btn-outline-danger { --pgn-btn-color: #{$btn-danger-outline-color}; + --pgn-btn-bg: #{$btn-danger-outline-bg}; --pgn-btn-border-color: #{$btn-danger-outline-border-color}; --pgn-btn-hover-color: #{$btn-danger-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-danger-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-danger-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-danger-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-danger-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-danger-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-danger-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-danger-outline-active-color}; --pgn-btn-active-bg: #{$btn-danger-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-danger-outline-active-border-color}; - - @include button-focus(#{$btn-danger-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-danger-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-danger-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-danger-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-danger-outline-focus-bg}; } .btn-inverse-danger { --pgn-btn-color: #{$btn-danger-inverse-color}; --pgn-btn-bg: #{$btn-danger-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-danger-inverse-border-color}; --pgn-btn-hover-color: #{$btn-danger-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-danger-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-danger-border-color}; + --pgn-btn-hover-border-color: #{$btn-danger-inverse-hover-border-color}; + --pgn-btn-disabled-color: #{$btn-danger-inverse-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-danger-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-danger-inverse-disabled-border-color}; --pgn-btn-active-color: #{$btn-danger-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-danger-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-danger-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-danger-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-danger-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-danger-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-danger-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-danger-inverse-focus-bg}; } .btn-inverse-outline-danger { --pgn-btn-color: #{$btn-danger-inverse-outline-color}; + --pgn-btn-bg: #{$btn-danger-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-danger-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-danger-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-danger-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-danger-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-danger-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-danger-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-danger-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-danger-inverse-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-danger-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-danger-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-danger-inverse-outline-active-border-color}; - - @include button-focus($btn-danger-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-danger-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-danger-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-danger-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-danger-inverse-outline-focus-bg}; } @@ -454,61 +539,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-dark-hover-color}; --pgn-btn-hover-bg: #{$btn-dark-hover-bg}; --pgn-btn-hover-border-color: #{$btn-dark-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-dark-color}; - --pgn-btn-disabled-bg: #{$btn-dark-bg}; - --pgn-btn-disabled-border-color: #{$btn-dark-border-color}; + --pgn-btn-disabled-color: #{$btn-dark-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-dark-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-dark-disabled-border-color}; --pgn-btn-active-color: #{$btn-dark-active-color}; --pgn-btn-active-bg: #{$btn-dark-active-bg}; --pgn-btn-active-border-color: #{$btn-dark-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-dark-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-dark-focus-color}; + --pgn-btn-focus-border-color: #{$btn-dark-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-dark-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-dark-focus-border-color); } .btn-outline-dark { --pgn-btn-color: #{$btn-dark-outline-color}; + --pgn-btn-bg: #{$btn-dark-outline-bg}; --pgn-btn-border-color: #{$btn-dark-outline-border-color}; --pgn-btn-hover-color: #{$btn-dark-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-dark-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-dark-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-dark-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-dark-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-dark-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-dark-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-dark-outline-active-color}; --pgn-btn-active-bg: #{$btn-dark-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-dark-outline-active-border-color}; - - @include button-focus(#{$btn-dark-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-dark-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-dark-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-dark-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-dark-outline-focus-bg}; } .btn-inverse-dark { --pgn-btn-color: #{$btn-dark-inverse-color}; --pgn-btn-bg: #{$btn-dark-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-dark-inverse-border-color}; --pgn-btn-hover-color: #{$btn-dark-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-dark-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-dark-border-color}; + --pgn-btn-hover-border-color: #{$btn-dark-inverse-hover-border-color}; + --pgn-btn-disabled-bg: #{$btn-dark-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-dark-inverse-disabled-border-color}; + --pgn-btn-disabled-color: #{$btn-dark-inverse-disabled-color}; --pgn-btn-active-color: #{$btn-dark-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-dark-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-dark-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-dark-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-dark-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-dark-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-dark-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-dark-inverse-focus-bg}; } .btn-inverse-outline-dark { --pgn-btn-color: #{$btn-dark-inverse-outline-color}; + --pgn-btn-bg: #{$btn-dark-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-dark-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-dark-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-dark-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-dark-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-dark-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-dark-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-dark-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-dark-inverse-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-dark-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-dark-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-dark-inverse-outline-active-border-color}; - - @include button-focus($btn-dark-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-dark-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-dark-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-dark-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-dark-inverse-outline-focus-bg}; } @@ -520,61 +619,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-info-hover-color}; --pgn-btn-hover-bg: #{$btn-info-hover-bg}; --pgn-btn-hover-border-color: #{$btn-info-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-info-color}; - --pgn-btn-disabled-bg: #{$btn-info-bg}; - --pgn-btn-disabled-border-color: #{$btn-info-border-color}; + --pgn-btn-disabled-color: #{$btn-info-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-info-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-info-disabled-border-color}; --pgn-btn-active-color: #{$btn-info-active-color}; --pgn-btn-active-bg: #{$btn-info-active-bg}; --pgn-btn-active-border-color: #{$btn-info-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-info-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-info-focus-color}; + --pgn-btn-focus-border-color: #{$btn-info-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-info-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-info-focus-border-color); } .btn-outline-info { --pgn-btn-color: #{$btn-info-outline-color}; + --pgn-btn-bg: #{$btn-info-outline-bg}; --pgn-btn-border-color: #{$btn-info-outline-border-color}; --pgn-btn-hover-color: #{$btn-info-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-info-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-info-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-info-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-info-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-info-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-info-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-info-outline-active-color}; --pgn-btn-active-bg: #{$btn-info-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-info-outline-active-border-color}; - - @include button-focus(#{$btn-info-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-info-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-info-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-info-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-info-outline-focus-bg}; } .btn-inverse-info { --pgn-btn-color: #{$btn-info-inverse-color}; --pgn-btn-bg: #{$btn-info-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-info-inverse-border-color}; --pgn-btn-hover-color: #{$btn-info-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-info-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-info-border-color}; + --pgn-btn-hover-border-color: #{$btn-info-inverse-hover-border-color}; + --pgn-btn-disabled-color: #{$btn-info-inverse-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-info-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-info-inverse-disabled-border-color}; --pgn-btn-active-color: #{$btn-info-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-info-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-info-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-info-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-info-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-info-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-info-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-info-inverse-focus-bg}; } .btn-inverse-outline-info { --pgn-btn-color: #{$btn-info-inverse-outline-color}; + --pgn-btn-bg: #{$btn-info-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-info-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-info-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-info-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-info-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-info-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-info-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-info-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-info-inverse-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-info-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-info-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-info-inverse-outline-active-border-color}; - - @include button-focus($btn-info-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-info-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-info-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-info-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-info-inverse-outline-focus-bg}; } @@ -586,61 +699,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-light-hover-color}; --pgn-btn-hover-bg: #{$btn-light-hover-bg}; --pgn-btn-hover-border-color: #{$btn-light-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-light-color}; - --pgn-btn-disabled-bg: #{$btn-light-bg}; - --pgn-btn-disabled-border-color: #{$btn-light-border-color}; + --pgn-btn-disabled-color: #{$btn-light-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-light-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-light-disabled-border-color}; --pgn-btn-active-color: #{$btn-light-active-color}; --pgn-btn-active-bg: #{$btn-light-active-bg}; --pgn-btn-active-border-color: #{$btn-light-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-light-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-light-focus-color}; + --pgn-btn-focus-border-color: #{$btn-light-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-light-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-light-focus-border-color); } .btn-outline-light { --pgn-btn-color: #{$btn-light-outline-color}; + --pgn-btn-bg: #{$btn-light-outline-bg}; --pgn-btn-border-color: #{$btn-light-outline-border-color}; --pgn-btn-hover-color: #{$btn-light-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-light-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-light-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-light-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-light-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-light-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-light-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-light-outline-active-color}; --pgn-btn-active-bg: #{$btn-light-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-light-outline-active-border-color}; - - @include button-focus(#{$btn-light-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-light-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-light-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-light-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-light-outline-focus-bg}; } .btn-inverse-light { --pgn-btn-color: #{$btn-light-inverse-color}; --pgn-btn-bg: #{$btn-light-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-light-inverse-border-color}; --pgn-btn-hover-color: #{$btn-light-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-light-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-light-border-color}; + --pgn-btn-hover-border-color: #{$btn-light-inverse-hover-border-color}; + --pgn-btn-disabled-bg: #{$btn-light-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-light-inverse-disabled-border-color}; + --pgn-btn-disabled-color: #{$btn-light-inverse-disabled-color}; --pgn-btn-active-color: #{$btn-light-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-light-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-light-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-light-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-light-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-light-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-light-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-light-inverse-focus-bg}; } .btn-inverse-outline-light { --pgn-btn-color: #{$btn-light-inverse-outline-color}; + --pgn-btn-bg: #{$btn-light-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-light-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-light-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-light-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-light-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-light-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-light-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-light-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-light-inverse-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-light-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-light-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-light-inverse-outline-active-border-color}; - - @include button-focus($btn-light-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-light-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-light-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-light-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-light-inverse-outline-focus-bg}; } @@ -652,61 +779,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-success-hover-color}; --pgn-btn-hover-bg: #{$btn-success-hover-bg}; --pgn-btn-hover-border-color: #{$btn-success-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-success-color}; - --pgn-btn-disabled-bg: #{$btn-success-bg}; - --pgn-btn-disabled-border-color: #{$btn-success-border-color}; + --pgn-btn-disabled-color: #{$btn-success-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-success-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-success-disabled-border-color}; --pgn-btn-active-color: #{$btn-success-active-color}; --pgn-btn-active-bg: #{$btn-success-active-bg}; --pgn-btn-active-border-color: #{$btn-success-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-success-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-success-focus-color}; + --pgn-btn-focus-border-color: #{$btn-success-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-success-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-success-focus-border-color); } .btn-outline-success { --pgn-btn-color: #{$btn-success-outline-color}; + --pgn-btn-bg: #{$btn-success-outline-bg}; --pgn-btn-border-color: #{$btn-success-outline-border-color}; --pgn-btn-hover-color: #{$btn-success-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-success-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-success-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-success-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-success-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-success-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-success-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-success-outline-active-color}; --pgn-btn-active-bg: #{$btn-success-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-success-outline-active-border-color}; - - @include button-focus(#{$btn-success-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-success-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-success-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-success-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-success-outline-focus-bg}; } .btn-inverse-success { --pgn-btn-color: #{$btn-success-inverse-color}; --pgn-btn-bg: #{$btn-success-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-success-inverse-border-color}; --pgn-btn-hover-color: #{$btn-success-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-success-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-success-border-color}; + --pgn-btn-hover-border-color: #{$btn-success-inverse-hover-border-color}; + --pgn-btn-disabled-color: #{$btn-success-inverse-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-success-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-success-inverse-disabled-border-color}; --pgn-btn-active-color: #{$btn-success-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-success-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-success-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-success-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-success-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-success-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-success-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-success-inverse-focus-bg}; } .btn-inverse-outline-success { --pgn-btn-color: #{$btn-success-inverse-outline-color}; + --pgn-btn-bg: #{$btn-success-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-success-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-success-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-success-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-success-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-success-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-success-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-success-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-success-inverse-outline-disabled-color}; --pgn-btn-active-color: #{$btn-success-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-success-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-success-inverse-outline-active-border-color}; - - @include button-focus($btn-success-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-success-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-success-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-success-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-success-inverse-outline-focus-bg}; } @@ -718,61 +859,75 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-warning-hover-color}; --pgn-btn-hover-bg: #{$btn-warning-hover-bg}; --pgn-btn-hover-border-color: #{$btn-warning-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-warning-color}; - --pgn-btn-disabled-bg: #{$btn-warning-bg}; - --pgn-btn-disabled-border-color: #{$btn-warning-border-color}; + --pgn-btn-disabled-color: #{$btn-warning-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-warning-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-warning-disabled-border-color}; --pgn-btn-active-color: #{$btn-warning-active-color}; --pgn-btn-active-bg: #{$btn-warning-active-bg}; --pgn-btn-active-border-color: #{$btn-warning-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-warning-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-warning-focus-color}; + --pgn-btn-focus-border-color: #{$btn-warning-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-warning-focus-bg}; box-shadow: $btn-box-shadow; - - @include button-focus($btn-warning-focus-border-color); } .btn-outline-warning { --pgn-btn-color: #{$btn-warning-outline-color}; + --pgn-btn-bg: #{$btn-warning-outline-bg}; --pgn-btn-border-color: #{$btn-warning-outline-border-color}; --pgn-btn-hover-color: #{$btn-warning-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-warning-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-warning-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-warning-outline-hover-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-warning-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-warning-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-warning-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-warning-outline-active-color}; --pgn-btn-active-bg: #{$btn-warning-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-warning-outline-active-border-color}; - - @include button-focus(#{$btn-warning-outline-focus-border-color}); + --pgn-btn-focus-outline-color: #{$btn-warning-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-warning-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-warning-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-warning-outline-focus-bg}; } .btn-inverse-warning { --pgn-btn-color: #{$btn-warning-inverse-color}; --pgn-btn-bg: #{$btn-warning-inverse-bg}; - --pgn-btn-border-color: transparent; + --pgn-btn-border-color: #{$btn-warning-inverse-border-color}; --pgn-btn-hover-color: #{$btn-warning-inverse-hover-color}; --pgn-btn-hover-bg: #{$btn-warning-inverse-hover-bg}; - --pgn-btn-hover-border-color: transparent; - --pgn-btn-disabled-bg: transparent; - --pgn-btn-disabled-border-color: #{$btn-warning-border-color}; + --pgn-btn-hover-border-color: #{$btn-warning-inverse-hover-border-color}; + --pgn-btn-disabled-bg: #{$btn-warning-inverse-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-warning-inverse-disabled-border-color}; + --pgn-btn-disabled-color: #{$btn-warning-inverse-disabled-color}; --pgn-btn-active-color: #{$btn-warning-inverse-active-color}; - --pgn-btn-active-bg: #EEEEEE; - - @include button-focus($btn-warning-inverse-focus-border-color); + --pgn-btn-active-bg: #{$btn-warning-inverse-active-bg}; + --pgn-btn-active-border-color: #{$btn-warning-inverse-active-border-color}; + --pgn-btn-focus-outline-color: #{$btn-warning-inverse-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-warning-inverse-focus-color}; + --pgn-btn-focus-border-color: #{$btn-warning-inverse-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-warning-inverse-focus-bg}; } .btn-inverse-outline-warning { --pgn-btn-color: #{$btn-warning-inverse-outline-color}; + --pgn-btn-bg: #{$btn-warning-inverse-outline-bg}; --pgn-btn-border-color: #{$btn-warning-inverse-outline-border-color}; --pgn-btn-hover-color: #{$btn-warning-inverse-outline-hover-color}; --pgn-btn-hover-bg: #{$btn-warning-inverse-outline-hover-bg}; --pgn-btn-hover-border-color: #{$btn-warning-inverse-outline-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-warning-inverse-outline-color}; - --pgn-btn-disabled-bg: transparent; + --pgn-btn-disabled-color: #{$btn-warning-inverse-outline-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-warning-inverse-outline-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-warning-inverse-outline-disabled-border-color}; --pgn-btn-active-color: #{$btn-warning-inverse-outline-active-color}; --pgn-btn-active-bg: #{$btn-warning-inverse-outline-active-bg}; --pgn-btn-active-border-color: #{$btn-warning-inverse-outline-active-border-color}; - - @include button-focus($btn-warning-inverse-outline-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-warning-inverse-outline-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-warning-inverse-outline-focus-color}; + --pgn-btn-focus-border-color: #{$btn-warning-inverse-outline-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-warning-inverse-outline-focus-bg}; } @@ -784,14 +939,16 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-tertiary-hover-color}; --pgn-btn-hover-bg: #{$btn-tertiary-hover-bg}; --pgn-btn-hover-border-color: #{$btn-tertiary-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-tertiary-color}; - --pgn-btn-disabled-bg: #{$btn-tertiary-bg}; - --pgn-btn-disabled-border-color: #{$btn-tertiary-border-color}; + --pgn-btn-disabled-color: #{$btn-tertiary-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-tertiary-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-tertiary-disabled-border-color}; --pgn-btn-active-color: #{$btn-tertiary-active-color}; --pgn-btn-active-bg: #{$btn-tertiary-active-bg}; --pgn-btn-active-border-color: #{$btn-tertiary-active-border-color}; - - @include button-focus($btn-tertiary-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-tertiary-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-tertiary-focus-color}; + --pgn-btn-focus-border-color: #{$btn-tertiary-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-tertiary-focus-bg}; } .btn-inverse-tertiary { @@ -801,12 +958,14 @@ input[type="button"] { --pgn-btn-hover-color: #{$btn-inverse-tertiary-hover-color}; --pgn-btn-hover-bg: #{$btn-inverse-tertiary-hover-bg}; --pgn-btn-hover-border-color: #{$btn-inverse-tertiary-hover-border-color}; - --pgn-btn-disabled-color: #{$btn-inverse-tertiary-color}; - --pgn-btn-disabled-bg: #{$btn-inverse-tertiary-bg}; - --pgn-btn-disabled-border-color: #{$btn-inverse-tertiary-border-color}; + --pgn-btn-disabled-color: #{$btn-inverse-tertiary-disabled-color}; + --pgn-btn-disabled-bg: #{$btn-inverse-tertiary-disabled-bg}; + --pgn-btn-disabled-border-color: #{$btn-inverse-tertiary-disabled-border-color}; --pgn-btn-active-color: #{$btn-inverse-tertiary-active-color}; --pgn-btn-active-bg: #{$btn-inverse-tertiary-active-bg}; --pgn-btn-active-border-color: #{$btn-inverse-tertiary-active-border-color}; - - @include button-focus($btn-inverse-tertiary-focus-border-color); + --pgn-btn-focus-outline-color: #{$btn-inverse-tertiary-focus-outline-color}; + --pgn-btn-focus-color: #{$btn-inverse-tertiary-focus-color}; + --pgn-btn-focus-border-color: #{$btn-inverse-tertiary-focus-border-color}; + --pgn-btn-focus-bg: #{$btn-inverse-tertiary-focus-bg}; } diff --git a/src/Button/_mixins.scss b/src/Button/_mixins.scss index 3befc9ad1c5..04c182e6696 100644 --- a/src/Button/_mixins.scss +++ b/src/Button/_mixins.scss @@ -12,52 +12,3 @@ // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); } - -// ------------------------ -// BELOW ARE EDX EXTENSIONS -// ------------------------ -@mixin button-focus($ring-color) { - &.focus, - &:focus { - position: relative; - outline: 0; - box-shadow: none; - - $distance: calc(#{$btn-focus-width} + #{$btn-focus-gap}); - $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width}); - - &::before { - content: ""; - position: absolute; - top: calc(#{$distance-include-btn-border} * -1); - right: calc(#{$distance-include-btn-border} * -1); - bottom: calc(#{$distance-include-btn-border} * -1); - left: calc(#{$distance-include-btn-border} * -1); - border: solid $btn-focus-width $ring-color; - border-radius: calc(#{$btn-border-radius} + #{$distance}); - } - - &.btn-lg::before { - border-radius: calc(#{$btn-border-radius-lg} + #{$distance}); - } - - &.btn-sm::before { - border-radius: calc(#{$btn-border-radius-sm} + #{$distance}); - } - - &:active, - &.active { - &::before { - opacity: .75; - } - } - - // Disabled buttons should not have focus rings - &:disabled, - &.disabled { - &::before { - display: none; - } - } - } -} diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index 344b7dc827d..f9e148f68c4 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -1,3 +1,5 @@ +// stylelint-disable max-line-length + $btn-padding-y: var(--pgn-spacing-btn-padding-y-base) !default; $btn-padding-x: var(--pgn-spacing-btn-padding-x-base) !default; $btn-font-family: var(--pgn-typography-btn-font-family) !default; @@ -44,9 +46,16 @@ $btn-primary-hover-border-color: var(--pgn-color-btn-hover-border-primary) !defa $btn-primary-active-bg: var(--pgn-color-btn-active-bg-primary) !default; $btn-primary-active-color: var(--pgn-color-btn-active-text-primary) !default; $btn-primary-active-border-color: var(--pgn-color-btn-active-border-primary) !default; +$btn-primary-focus-outline-color: var(--pgn-color-btn-focus-outline-primary) !default; +$btn-primary-focus-bg: var(--pgn-color-btn-focus-bg-primary) !default; +$btn-primary-focus-color: var(--pgn-color-btn-focus-text-primary) !default; $btn-primary-focus-border-color: var(--pgn-color-btn-focus-border-primary) !default; +$btn-primary-disabled-color: var(--pgn-color-btn-disabled-text-primary) !default; +$btn-primary-disabled-bg: var(--pgn-color-btn-disabled-bg-primary) !default; +$btn-primary-disabled-border-color: var(--pgn-color-btn-disabled-border-primary) !default; $btn-primary-outline-color: var(--pgn-color-btn-text-outline-primary) !default; +$btn-primary-outline-bg: var(--pgn-color-btn-bg-outline-primary) !default; $btn-primary-outline-border-color: var(--pgn-color-btn-border-outline-primary) !default; $btn-primary-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-primary) !default; $btn-primary-outline-hover-color: var(--pgn-color-btn-hover-text-outline-primary) !default; @@ -54,16 +63,33 @@ $btn-primary-outline-hover-border-color: var(--pgn-color-btn-hover-border-outlin $btn-primary-outline-active-bg: var(--pgn-color-btn-active-bg-outline-primary) !default; $btn-primary-outline-active-color: var(--pgn-color-btn-active-text-outline-primary) !default; $btn-primary-outline-active-border-color: var(--pgn-color-btn-active-border-outline-primary) !default; +$btn-primary-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-primary) !default; +$btn-primary-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-primary) !default; +$btn-primary-outline-focus-color: var(--pgn-color-btn-focus-text-outline-primary) !default; $btn-primary-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-primary) !default; +$btn-primary-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-primary) !default; +$btn-primary-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-primary) !default; +$btn-primary-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-primary) !default; $btn-primary-inverse-color: var(--pgn-color-btn-text-inverse-primary) !default; $btn-primary-inverse-bg: var(--pgn-color-btn-bg-inverse-primary) !default; $btn-primary-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-primary) !default; $btn-primary-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-primary) !default; +$btn-primary-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-primary) !default; $btn-primary-inverse-active-color: var(--pgn-color-btn-active-text-inverse-primary) !default; +$btn-primary-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-primary) !default; +$btn-primary-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-primary) !default; +$btn-primary-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-primary) !default; $btn-primary-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-primary) !default; +$btn-primary-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-primary) !default; +$btn-primary-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-primary) !default; +$btn-primary-inverse-border-color: var(--pgn-color-btn-border-inverse-primary) !default; +$btn-primary-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-primary) !default; +$btn-primary-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-primary) !default; +$btn-primary-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-primary) !default; $btn-primary-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-primary) !default; +$btn-primary-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-primary) !default; $btn-primary-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-primary) !default; $btn-primary-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-primary) !default; $btn-primary-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-primary) !default; @@ -71,7 +97,13 @@ $btn-primary-inverse-outline-active-border-color: var(--pgn-color-btn-active-bor $btn-primary-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-primary) !default; $btn-primary-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-primary) !default; $btn-primary-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-primary) !default; +$btn-primary-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-primary) !default; $btn-primary-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-primary) !default; +$btn-primary-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-primary) !default; +$btn-primary-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-primary) !default; +$btn-primary-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-primary) !default; +$btn-primary-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-primary) !default; +$btn-primary-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-primary) !default; // SECONDARY BUTTON VARIABLES @@ -84,9 +116,16 @@ $btn-secondary-hover-border-color: var(--pgn-color-btn-hover-border-secondary) ! $btn-secondary-active-bg: var(--pgn-color-btn-active-bg-secondary) !default; $btn-secondary-active-color: var(--pgn-color-btn-active-text-secondary) !default; $btn-secondary-active-border-color: var(--pgn-color-btn-active-border-secondary) !default; +$btn-secondary-focus-outline-color: var(--pgn-color-btn-focus-outline-secondary) !default; $btn-secondary-focus-border-color: var(--pgn-color-btn-focus-border-secondary) !default; +$btn-secondary-focus-bg: var(--pgn-color-btn-focus-bg-secondary) !default; +$btn-secondary-focus-color: var(--pgn-color-btn-focus-text-secondary) !default; +$btn-secondary-disabled-color: var(--pgn-color-btn-disabled-text-secondary) !default; +$btn-secondary-disabled-bg: var(--pgn-color-btn-disabled-bg-secondary) !default; +$btn-secondary-disabled-border-color: var(--pgn-color-btn-disabled-border-secondary) !default; $btn-secondary-outline-color: var(--pgn-color-btn-text-outline-secondary) !default; +$btn-secondary-outline-bg: var(--pgn-color-btn-bg-outline-secondary) !default; $btn-secondary-outline-border-color: var(--pgn-color-btn-border-outline-secondary) !default; $btn-secondary-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-secondary) !default; $btn-secondary-outline-hover-color: var(--pgn-color-btn-hover-text-outline-secondary) !default; @@ -94,27 +133,47 @@ $btn-secondary-outline-hover-border-color: var(--pgn-color-btn-hover-border-outl $btn-secondary-outline-active-bg: var(--pgn-color-btn-active-bg-outline-secondary) !default; $btn-secondary-outline-active-color: var(--pgn-color-btn-active-text-outline-secondary) !default; $btn-secondary-outline-active-border-color: var(--pgn-color-btn-active-border-outline-secondary) !default; +$btn-secondary-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-secondary) !default; $btn-secondary-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-secondary) !default; +$btn-secondary-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-secondary) !default; +$btn-secondary-outline-focus-color: var(--pgn-color-btn-focus-text-outline-secondary) !default; +$btn-secondary-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-secondary) !default; +$btn-secondary-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-secondary) !default; +$btn-secondary-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-secondary) !default; $btn-secondary-inverse-color: var(--pgn-color-btn-text-inverse-secondary) !default; $btn-secondary-inverse-bg: var(--pgn-color-btn-bg-inverse-secondary) !default; +$btn-secondary-inverse-border-color: var(--pgn-color-btn-border-inverse-secondary) !default; $btn-secondary-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-secondary) !default; $btn-secondary-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-secondary) !default; +$btn-secondary-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-secondary) !default; $btn-secondary-inverse-active-color: var(--pgn-color-btn-active-text-inverse-secondary) !default; +$btn-secondary-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-secondary) !default; +$btn-secondary-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-secondary) !default; +$btn-secondary-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-secondary) !default; $btn-secondary-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-secondary) !default; +$btn-secondary-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-secondary) !default; +$btn-secondary-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-secondary) !default; +$btn-secondary-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-secondary) !default; +$btn-secondary-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-secondary) !default; +$btn-secondary-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-secondary) !default; $btn-secondary-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-secondary) !default; +$btn-secondary-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-secondary) !default; $btn-secondary-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-secondary) !default; $btn-secondary-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-secondary) !default; $btn-secondary-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-secondary) !default; - -// stylelint-disable-next-line max-line-length +$btn-secondary-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-secondary) !default; +$btn-secondary-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-secondary) !default; +$btn-secondary-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-secondary) !default; +$btn-secondary-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-secondary) !default; +$btn-secondary-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-secondary) !default; +$btn-secondary-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-secondary) !default; +$btn-secondary-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-secondary) !default; $btn-secondary-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-secondary) !default; $btn-secondary-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-secondary) !default; $btn-secondary-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-secondary) !default; $btn-secondary-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-secondary) !default; -$btn-secondary-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-secondary) !default; - // BRAND BUTTON VARIABLES $btn-brand-bg: var(--pgn-color-btn-bg-brand) !default; @@ -126,9 +185,16 @@ $btn-brand-hover-border-color: var(--pgn-color-btn-hover-border-brand) !default; $btn-brand-active-bg: var(--pgn-color-btn-active-bg-brand) !default; $btn-brand-active-color: var(--pgn-color-btn-active-text-brand) !default; $btn-brand-active-border-color: var(--pgn-color-btn-active-border-brand) !default; +$btn-brand-focus-outline-color: var(--pgn-color-btn-focus-outline-brand) !default; $btn-brand-focus-border-color: var(--pgn-color-btn-focus-border-brand) !default; +$btn-brand-focus-bg: var(--pgn-color-btn-focus-bg-brand) !default; +$btn-brand-focus-color: var(--pgn-color-btn-focus-text-brand) !default; +$btn-brand-disabled-color: var(--pgn-color-btn-disabled-text-brand) !default; +$btn-brand-disabled-bg: var(--pgn-color-btn-disabled-bg-brand) !default; +$btn-brand-disabled-border-color: var(--pgn-color-btn-disabled-border-brand) !default; $btn-brand-outline-color: var(--pgn-color-btn-text-outline-brand) !default; +$btn-brand-outline-bg: var(--pgn-color-btn-bg-outline-brand) !default; $btn-brand-outline-border-color: var(--pgn-color-btn-border-outline-brand) !default; $btn-brand-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-brand) !default; $btn-brand-outline-hover-color: var(--pgn-color-btn-hover-text-outline-brand) !default; @@ -136,16 +202,33 @@ $btn-brand-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline- $btn-brand-outline-active-bg: var(--pgn-color-btn-active-bg-outline-brand) !default; $btn-brand-outline-active-color: var(--pgn-color-btn-active-text-outline-brand) !default; $btn-brand-outline-active-border-color: var(--pgn-color-btn-active-border-outline-brand) !default; +$btn-brand-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-brand) !default; $btn-brand-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-brand) !default; +$btn-brand-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-brand) !default; +$btn-brand-outline-focus-color: var(--pgn-color-btn-focus-text-outline-brand) !default; +$btn-brand-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-brand) !default; +$btn-brand-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-brand) !default; +$btn-brand-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-brand) !default; $btn-brand-inverse-color: var(--pgn-color-btn-text-inverse-brand) !default; $btn-brand-inverse-bg: var(--pgn-color-btn-bg-inverse-brand) !default; +$btn-brand-inverse-border-color: var(--pgn-color-btn-border-inverse-brand) !default; $btn-brand-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-brand) !default; $btn-brand-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-brand) !default; +$btn-brand-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-brand) !default; $btn-brand-inverse-active-color: var(--pgn-color-btn-active-text-inverse-brand) !default; +$btn-brand-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-brand) !default; +$btn-brand-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-brand) !default; +$btn-brand-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-brand) !default; $btn-brand-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-brand) !default; +$btn-brand-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-brand) !default; +$btn-brand-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-brand) !default; +$btn-brand-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-brand) !default; +$btn-brand-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-brand) !default; +$btn-brand-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-brand) !default; $btn-brand-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-brand) !default; +$btn-brand-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-brand) !default; $btn-brand-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-brand) !default; $btn-brand-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-brand) !default; $btn-brand-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-brand) !default; @@ -153,7 +236,13 @@ $btn-brand-inverse-outline-active-border-color: var(--pgn-color-btn-active-borde $btn-brand-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-brand) !default; $btn-brand-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-brand) !default; $btn-brand-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-brand) !default; +$btn-brand-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-brand) !default; $btn-brand-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-brand) !default; +$btn-brand-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-brand) !default; +$btn-brand-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-brand) !default; +$btn-brand-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-brand) !default; +$btn-brand-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-brand) !default; +$btn-brand-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-brand) !default; // DANGER BUTTON VARIABLES @@ -166,9 +255,16 @@ $btn-danger-hover-border-color: var(--pgn-color-btn-hover-border-danger) !defaul $btn-danger-active-bg: var(--pgn-color-btn-active-bg-danger) !default; $btn-danger-active-color: var(--pgn-color-btn-active-text-danger) !default; $btn-danger-active-border-color: var(--pgn-color-btn-active-border-danger) !default; +$btn-danger-focus-outline-color: var(--pgn-color-btn-focus-outline-danger) !default; $btn-danger-focus-border-color: var(--pgn-color-btn-focus-border-danger) !default; +$btn-danger-focus-bg: var(--pgn-color-btn-focus-bg-danger) !default; +$btn-danger-focus-color: var(--pgn-color-btn-focus-text-danger) !default; +$btn-danger-disabled-color: var(--pgn-color-btn-disabled-text-danger) !default; +$btn-danger-disabled-bg: var(--pgn-color-btn-disabled-bg-danger) !default; +$btn-danger-disabled-border-color: var(--pgn-color-btn-disabled-border-danger) !default; $btn-danger-outline-color: var(--pgn-color-btn-text-outline-danger) !default; +$btn-danger-outline-bg: var(--pgn-color-btn-bg-outline-danger) !default; $btn-danger-outline-border-color: var(--pgn-color-btn-border-outline-danger) !default; $btn-danger-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-danger) !default; $btn-danger-outline-hover-color: var(--pgn-color-btn-hover-text-outline-danger) !default; @@ -176,16 +272,33 @@ $btn-danger-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline $btn-danger-outline-active-bg: var(--pgn-color-btn-active-bg-outline-danger) !default; $btn-danger-outline-active-color: var(--pgn-color-btn-active-text-outline-danger) !default; $btn-danger-outline-active-border-color: var(--pgn-color-btn-active-border-outline-danger) !default; +$btn-danger-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-danger) !default; +$btn-danger-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-danger) !default; +$btn-danger-outline-focus-color: var(--pgn-color-btn-focus-text-outline-danger) !default; $btn-danger-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-danger) !default; +$btn-danger-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-danger) !default; +$btn-danger-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-danger) !default; +$btn-danger-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-danger) !default; $btn-danger-inverse-color: var(--pgn-color-btn-text-inverse-danger) !default; $btn-danger-inverse-bg: var(--pgn-color-btn-bg-inverse-danger) !default; +$btn-danger-inverse-border-color: var(--pgn-color-btn-border-inverse-danger) !default; $btn-danger-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-danger) !default; $btn-danger-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-danger) !default; +$btn-danger-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-danger) !default; $btn-danger-inverse-active-color: var(--pgn-color-btn-active-text-inverse-danger) !default; +$btn-danger-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-danger) !default; +$btn-danger-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-danger) !default; +$btn-danger-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-danger) !default; $btn-danger-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-danger) !default; +$btn-danger-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-danger) !default; +$btn-danger-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-danger) !default; +$btn-danger-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-danger) !default; +$btn-danger-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-danger) !default; +$btn-danger-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-danger) !default; $btn-danger-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-danger) !default; +$btn-danger-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-danger) !default; $btn-danger-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-danger) !default; $btn-danger-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-danger) !default; $btn-danger-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-danger) !default; @@ -193,7 +306,13 @@ $btn-danger-inverse-outline-active-border-color: var(--pgn-color-btn-active-bord $btn-danger-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-danger) !default; $btn-danger-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-danger) !default; $btn-danger-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-danger) !default; +$btn-danger-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-danger) !default; $btn-danger-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-danger) !default; +$btn-danger-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-danger) !default; +$btn-danger-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-danger) !default; +$btn-danger-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-danger) !default; +$btn-danger-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-danger) !default; +$btn-danger-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-danger) !default; // DARK BUTTON VARIABLES @@ -206,9 +325,16 @@ $btn-dark-hover-border-color: var(--pgn-color-btn-hover-border-dark) !default; $btn-dark-active-bg: var(--pgn-color-btn-active-bg-dark) !default; $btn-dark-active-color: var(--pgn-color-btn-active-text-dark) !default; $btn-dark-active-border-color: var(--pgn-color-btn-active-border-dark) !default; +$btn-dark-focus-outline-color: var(--pgn-color-btn-focus-outline-dark) !default; $btn-dark-focus-border-color: var(--pgn-color-btn-focus-border-dark) !default; +$btn-dark-focus-bg: var(--pgn-color-btn-focus-bg-dark) !default; +$btn-dark-focus-color: var(--pgn-color-btn-focus-text-dark) !default; +$btn-dark-disabled-color: var(--pgn-color-btn-disabled-text-dark) !default; +$btn-dark-disabled-bg: var(--pgn-color-btn-disabled-bg-dark) !default; +$btn-dark-disabled-border-color: var(--pgn-color-btn-disabled-border-dark) !default; $btn-dark-outline-color: var(--pgn-color-btn-text-outline-dark) !default; +$btn-dark-outline-bg: var(--pgn-color-btn-bg-outline-dark) !default; $btn-dark-outline-border-color: var(--pgn-color-btn-border-outline-dark) !default; $btn-dark-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-dark) !default; $btn-dark-outline-hover-color: var(--pgn-color-btn-hover-text-outline-dark) !default; @@ -216,16 +342,33 @@ $btn-dark-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-d $btn-dark-outline-active-bg: var(--pgn-color-btn-active-bg-outline-dark) !default; $btn-dark-outline-active-color: var(--pgn-color-btn-active-text-outline-dark) !default; $btn-dark-outline-active-border-color: var(--pgn-color-btn-active-border-outline-dark) !default; +$btn-dark-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-dark) !default; $btn-dark-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-dark) !default; +$btn-dark-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-dark) !default; +$btn-dark-outline-focus-color: var(--pgn-color-btn-focus-text-outline-dark) !default; +$btn-dark-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-dark) !default; +$btn-dark-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-dark) !default; +$btn-dark-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-dark) !default; $btn-dark-inverse-color: var(--pgn-color-btn-text-inverse-dark) !default; $btn-dark-inverse-bg: var(--pgn-color-btn-bg-inverse-dark) !default; +$btn-dark-inverse-border-color: var(--pgn-color-btn-border-inverse-dark) !default; $btn-dark-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-dark) !default; $btn-dark-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-dark) !default; +$btn-dark-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-dark) !default; $btn-dark-inverse-active-color: var(--pgn-color-btn-active-text-inverse-dark) !default; +$btn-dark-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-dark) !default; +$btn-dark-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-dark) !default; +$btn-dark-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-dark) !default; $btn-dark-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-dark) !default; +$btn-dark-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-dark) !default; +$btn-dark-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-dark) !default; +$btn-dark-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-dark) !default; +$btn-dark-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-dark) !default; +$btn-dark-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-dark) !default; $btn-dark-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-dark) !default; +$btn-dark-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-dark) !default; $btn-dark-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-dark) !default; $btn-dark-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-dark) !default; $btn-dark-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-dark) !default; @@ -233,7 +376,13 @@ $btn-dark-inverse-outline-active-border-color: var(--pgn-color-btn-active-border $btn-dark-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-dark) !default; $btn-dark-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-dark) !default; $btn-dark-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-dark) !default; -$btn-dark-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-dark) !default; +$btn-dark-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-dark) !default; +$btn-dark-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-outline-inverse-outline-dark) !default; +$btn-dark-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-dark) !default; +$btn-dark-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-dark) !default; +$btn-dark-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-dark) !default; +$btn-dark-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-dark) !default; +$btn-dark-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-dark) !default; // INFO BUTTON VARIABLES @@ -246,9 +395,16 @@ $btn-info-hover-border-color: var(--pgn-color-btn-hover-border-info) !default; $btn-info-active-bg: var(--pgn-color-btn-active-bg-info) !default; $btn-info-active-color: var(--pgn-color-btn-active-text-info) !default; $btn-info-active-border-color: var(--pgn-color-btn-active-border-info) !default; +$btn-info-focus-outline-color: var(--pgn-color-btn-focus-outline-info) !default; $btn-info-focus-border-color: var(--pgn-color-btn-focus-border-info) !default; +$btn-info-focus-color: var(--pgn-color-btn-focus-text-info) !default; +$btn-info-focus-bg: var(--pgn-color-btn-focus-bg-info) !default; +$btn-info-disabled-color: var(--pgn-color-btn-disabled-text-info) !default; +$btn-info-disabled-bg: var(--pgn-color-btn-disabled-bg-info) !default; +$btn-info-disabled-border-color: var(--pgn-color-btn-disabled-border-info) !default; $btn-info-outline-color: var(--pgn-color-btn-text-outline-info) !default; +$btn-info-outline-bg: var(--pgn-color-btn-bg-outline-info) !default; $btn-info-outline-border-color: var(--pgn-color-btn-border-outline-info) !default; $btn-info-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-info) !default; $btn-info-outline-hover-color: var(--pgn-color-btn-hover-text-outline-info) !default; @@ -256,16 +412,33 @@ $btn-info-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-i $btn-info-outline-active-bg: var(--pgn-color-btn-active-bg-outline-info) !default; $btn-info-outline-active-color: var(--pgn-color-btn-active-text-outline-info) !default; $btn-info-outline-active-border-color: var(--pgn-color-btn-active-border-outline-info) !default; +$btn-info-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-info) !default; $btn-info-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-info) !default; +$btn-info-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-info) !default; +$btn-info-outline-focus-color: var(--pgn-color-btn-focus-text-outline-info) !default; +$btn-info-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-info) !default; +$btn-info-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-info) !default; +$btn-info-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-info) !default; $btn-info-inverse-color: var(--pgn-color-btn-text-inverse-info) !default; $btn-info-inverse-bg: var(--pgn-color-btn-bg-inverse-info) !default; +$btn-info-inverse-border-color: var(--pgn-color-btn-border-inverse-info) !default; $btn-info-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-info) !default; $btn-info-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-info) !default; +$btn-info-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-info) !default; $btn-info-inverse-active-color: var(--pgn-color-btn-active-text-inverse-info) !default; +$btn-info-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-info) !default; +$btn-info-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-info) !default; +$btn-info-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-info) !default; $btn-info-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-info) !default; +$btn-info-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-info) !default; +$btn-info-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-info) !default; +$btn-info-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-info) !default; +$btn-info-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-info) !default; +$btn-info-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-info) !default; $btn-info-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-info) !default; +$btn-info-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-info) !default; $btn-info-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-info) !default; $btn-info-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-info) !default; $btn-info-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-info) !default; @@ -273,7 +446,13 @@ $btn-info-inverse-outline-active-border-color: var(--pgn-color-btn-active-border $btn-info-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-info) !default; $btn-info-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-info) !default; $btn-info-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-info) !default; +$btn-info-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-info) !default; $btn-info-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-info) !default; +$btn-info-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-info) !default; +$btn-info-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-info) !default; +$btn-info-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-info) !default; +$btn-info-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-info) !default; +$btn-info-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-info) !default; // LIGHT BUTTON VARIABLES @@ -286,9 +465,16 @@ $btn-light-hover-border-color: var(--pgn-color-btn-hover-border-light) !default; $btn-light-active-bg: var(--pgn-color-btn-active-bg-light) !default; $btn-light-active-color: var(--pgn-color-btn-active-text-light) !default; $btn-light-active-border-color: var(--pgn-color-btn-active-border-light) !default; +$btn-light-focus-outline-color: var(--pgn-color-btn-focus-outline-light) !default; $btn-light-focus-border-color: var(--pgn-color-btn-focus-border-light) !default; +$btn-light-focus-bg: var(--pgn-color-btn-focus-bg-light) !default; +$btn-light-focus-color: var(--pgn-color-btn-focus-text-light) !default; +$btn-light-disabled-color: var(--pgn-color-btn-disabled-text-light) !default; +$btn-light-disabled-bg: var(--pgn-color-btn-disabled-bg-light) !default; +$btn-light-disabled-border-color: var(--pgn-color-btn-disabled-border-light) !default; $btn-light-outline-color: var(--pgn-color-btn-text-outline-light) !default; +$btn-light-outline-bg: var(--pgn-color-btn-bg-outline-light) !default; $btn-light-outline-border-color: var(--pgn-color-btn-border-outline-light) !default; $btn-light-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-light) !default; $btn-light-outline-hover-color: var(--pgn-color-btn-hover-text-outline-light) !default; @@ -296,16 +482,33 @@ $btn-light-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline- $btn-light-outline-active-bg: var(--pgn-color-btn-active-bg-outline-light) !default; $btn-light-outline-active-color: var(--pgn-color-btn-active-text-outline-light) !default; $btn-light-outline-active-border-color: var(--pgn-color-btn-active-border-outline-light) !default; +$btn-light-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-light) !default; $btn-light-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-light) !default; +$btn-light-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-light) !default; +$btn-light-outline-focus-color: var(--pgn-color-btn-focus-text-outline-light) !default; +$btn-light-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-light) !default; +$btn-light-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-light) !default; +$btn-light-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-light) !default; $btn-light-inverse-color: var(--pgn-color-btn-text-inverse-light) !default; $btn-light-inverse-bg: var(--pgn-color-btn-bg-inverse-light) !default; +$btn-light-inverse-border-color: var(--pgn-color-btn-border-inverse-light) !default; $btn-light-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-light) !default; $btn-light-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-light) !default; +$btn-light-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-light) !default; $btn-light-inverse-active-color: var(--pgn-color-btn-active-text-inverse-light) !default; +$btn-light-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-light) !default; +$btn-light-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-light) !default; +$btn-light-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-light) !default; $btn-light-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-light) !default; +$btn-light-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-light) !default; +$btn-light-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-light) !default; +$btn-light-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-light) !default; +$btn-light-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-light) !default; +$btn-light-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-light) !default; $btn-light-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-light) !default; +$btn-light-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-light) !default; $btn-light-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-light) !default; $btn-light-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-light) !default; $btn-light-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-light) !default; @@ -313,7 +516,13 @@ $btn-light-inverse-outline-active-border-color: var(--pgn-color-btn-active-borde $btn-light-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-light) !default; $btn-light-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-light) !default; $btn-light-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-light) !default; +$btn-light-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-light) !default; $btn-light-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-light) !default; +$btn-light-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-light) !default; +$btn-light-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-light) !default; +$btn-light-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-light) !default; +$btn-light-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-light) !default; +$btn-light-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-light) !default; // SUCCESS BUTTON VARIABLES @@ -326,9 +535,16 @@ $btn-success-hover-border-color: var(--pgn-color-btn-hover-border-success) !defa $btn-success-active-bg: var(--pgn-color-btn-active-bg-success) !default; $btn-success-active-color: var(--pgn-color-btn-active-text-success) !default; $btn-success-active-border-color: var(--pgn-color-btn-active-border-success) !default; +$btn-success-focus-outline-color: var(--pgn-color-btn-focus-outline-success) !default; $btn-success-focus-border-color: var(--pgn-color-btn-focus-border-success) !default; +$btn-success-focus-bg: var(--pgn-color-btn-focus-bg-success) !default; +$btn-success-focus-color: var(--pgn-color-btn-focus-text-success) !default; +$btn-success-disabled-color: var(--pgn-color-btn-disabled-text-success) !default; +$btn-success-disabled-bg: var(--pgn-color-btn-disabled-bg-success) !default; +$btn-success-disabled-border-color: var(--pgn-color-btn-disabled-border-success) !default; $btn-success-outline-color: var(--pgn-color-btn-text-outline-success) !default; +$btn-success-outline-bg: var(--pgn-color-btn-bg-outline-success) !default; $btn-success-outline-border-color: var(--pgn-color-btn-border-outline-success) !default; $btn-success-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-success) !default; $btn-success-outline-hover-color: var(--pgn-color-btn-hover-text-outline-success) !default; @@ -336,16 +552,33 @@ $btn-success-outline-hover-border-color: var(--pgn-color-btn-hover-border-outlin $btn-success-outline-active-bg: var(--pgn-color-btn-active-bg-outline-success) !default; $btn-success-outline-active-color: var(--pgn-color-btn-active-text-outline-success) !default; $btn-success-outline-active-border-color: var(--pgn-color-btn-active-border-outline-success) !default; +$btn-success-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-success) !default; $btn-success-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-success) !default; +$btn-success-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-success) !default; +$btn-success-outline-focus-color: var(--pgn-color-btn-focus-text-outline-success) !default; +$btn-success-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-success) !default; +$btn-success-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-success) !default; +$btn-success-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-success) !default; $btn-success-inverse-color: var(--pgn-color-btn-text-inverse-success) !default; $btn-success-inverse-bg: var(--pgn-color-btn-bg-inverse-success) !default; +$btn-success-inverse-border-color: var(--pgn-color-btn-border-inverse-success) !default; $btn-success-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-success) !default; $btn-success-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-success) !default; +$btn-success-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-success) !default; $btn-success-inverse-active-color: var(--pgn-color-btn-active-text-inverse-success) !default; +$btn-success-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-success) !default; +$btn-success-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-success) !default; +$btn-success-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-success) !default; $btn-success-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-success) !default; +$btn-success-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-success) !default; +$btn-success-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-success) !default; +$btn-success-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-success) !default; +$btn-success-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-success) !default; +$btn-success-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-success) !default; $btn-success-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-success) !default; +$btn-success-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-success) !default; $btn-success-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-success) !default; $btn-success-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-success) !default; $btn-success-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-success) !default; @@ -353,7 +586,13 @@ $btn-success-inverse-outline-active-border-color: var(--pgn-color-btn-active-bor $btn-success-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-success) !default; $btn-success-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-success) !default; $btn-success-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-success) !default; +$btn-success-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-success) !default; $btn-success-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-success) !default; +$btn-success-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-success) !default; +$btn-success-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-success) !default; +$btn-success-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-success) !default; +$btn-success-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-success) !default; +$btn-success-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-success) !default; // WARNING BUTTON VARIABLES @@ -366,9 +605,16 @@ $btn-warning-hover-border-color: var(--pgn-color-btn-hover-border-warning) !defa $btn-warning-active-bg: var(--pgn-color-btn-active-bg-warning) !default; $btn-warning-active-color: var(--pgn-color-btn-active-text-warning) !default; $btn-warning-active-border-color: var(--pgn-color-btn-active-border-warning) !default; +$btn-warning-focus-outline-color: var(--pgn-color-btn-focus-outline-warning) !default; $btn-warning-focus-border-color: var(--pgn-color-btn-focus-border-warning) !default; +$btn-warning-focus-color: var(--pgn-color-btn-focus-text-warning) !default; +$btn-warning-focus-bg: var(--pgn-color-btn-focus-bg-warning) !default; +$btn-warning-disabled-color: var(--pgn-color-btn-disabled-text-warning) !default; +$btn-warning-disabled-bg: var(--pgn-color-btn-disabled-bg-warning) !default; +$btn-warning-disabled-border-color: var(--pgn-color-btn-disabled-border-warning) !default; $btn-warning-outline-color: var(--pgn-color-btn-text-outline-warning) !default; +$btn-warning-outline-bg: var(--pgn-color-btn-bg-outline-warning) !default; $btn-warning-outline-border-color: var(--pgn-color-btn-border-outline-warning) !default; $btn-warning-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-warning) !default; $btn-warning-outline-hover-color: var(--pgn-color-btn-hover-text-outline-warning) !default; @@ -376,16 +622,33 @@ $btn-warning-outline-hover-border-color: var(--pgn-color-btn-hover-border-outlin $btn-warning-outline-active-bg: var(--pgn-color-btn-active-bg-outline-warning) !default; $btn-warning-outline-active-color: var(--pgn-color-btn-active-text-outline-warning) !default; $btn-warning-outline-active-border-color: var(--pgn-color-btn-active-border-outline-warning) !default; +$btn-warning-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-warning) !default; $btn-warning-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-warning) !default; +$btn-warning-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-warning) !default; +$btn-warning-outline-focus-color: var(--pgn-color-btn-focus-text-outline-warning) !default; +$btn-warning-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-warning) !default; +$btn-warning-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-warning) !default; +$btn-warning-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-warning) !default; $btn-warning-inverse-color: var(--pgn-color-btn-text-inverse-warning) !default; $btn-warning-inverse-bg: var(--pgn-color-btn-bg-inverse-warning) !default; +$btn-warning-inverse-border-color: var(--pgn-color-btn-border-inverse-warning) !default; $btn-warning-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-warning) !default; $btn-warning-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-warning) !default; +$btn-warning-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-warning) !default; $btn-warning-inverse-active-color: var(--pgn-color-btn-active-text-inverse-warning) !default; +$btn-warning-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-warning) !default; +$btn-warning-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-warning) !default; +$btn-warning-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-warning) !default; $btn-warning-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-warning) !default; +$btn-warning-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-warning) !default; +$btn-warning-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-warning) !default; +$btn-warning-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-warning) !default; +$btn-warning-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-warning) !default; +$btn-warning-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-warning) !default; $btn-warning-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-warning) !default; +$btn-warning-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-warning) !default; $btn-warning-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-warning) !default; $btn-warning-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-warning) !default; $btn-warning-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-warning) !default; @@ -393,7 +656,13 @@ $btn-warning-inverse-outline-active-border-color: var(--pgn-color-btn-active-bor $btn-warning-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-warning) !default; $btn-warning-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-warning) !default; $btn-warning-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-warning) !default; +$btn-warning-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-warning) !default; $btn-warning-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-warning) !default; +$btn-warning-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-warning) !default; +$btn-warning-inverse-outline-focus-bg: var(--pgn-color-btn-focus-outline-inverse-outline-warning) !default; +$btn-warning-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-warning) !default; +$btn-warning-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-warning) !default; +$btn-warning-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-warning) !default; // TERTIARY BUTTON @@ -406,7 +675,13 @@ $btn-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-tertiary) !de $btn-tertiary-active-color: var(--pgn-color-btn-active-text-tertiary) !default; $btn-tertiary-active-bg: var(--pgn-color-btn-active-bg-tertiary) !default; $btn-tertiary-active-border-color: var(--pgn-color-btn-active-border-tertiary) !default; +$btn-tertiary-focus-outline-color: var(--pgn-color-btn-focus-outline-tertiary) !default; $btn-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-tertiary) !default; +$btn-tertiary-focus-color: var(--pgn-color-btn-focus-text-tertiary) !default; +$btn-tertiary-focus-bg: var(--pgn-color-btn-focus-bg-tertiary) !default; +$btn-tertiary-disabled-color: var(--pgn-color-btn-disabled-text-tertiary) !default; +$btn-tertiary-disabled-bg: var(--pgn-color-btn-disabled-bg-tertiary) !default; +$btn-tertiary-disabled-border-color: var(--pgn-color-btn-disabled-border-tertiary) !default; $btn-inverse-tertiary-color: var(--pgn-color-btn-text-inverse-tertiary) !default; $btn-inverse-tertiary-bg: var(--pgn-color-btn-bg-inverse-tertiary) !default; @@ -417,7 +692,13 @@ $btn-inverse-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-inver $btn-inverse-tertiary-active-color: var(--pgn-color-btn-active-text-inverse-tertiary) !default; $btn-inverse-tertiary-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary) !default; $btn-inverse-tertiary-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary) !default; +$btn-inverse-tertiary-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-tertiary) !default; $btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary) !default; +$btn-inverse-tertiary-focus-color: var(--pgn-color-btn-focus-text-inverse-tertiary) !default; +$btn-inverse-tertiary-focus-bg: var(--pgn-color-btn-focus-bg-inverse-tertiary) !default; +$btn-inverse-tertiary-disabled-color: var(--pgn-color-btn-disabled-text-inverse-tertiary) !default; +$btn-inverse-tertiary-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-tertiary) !default; +$btn-inverse-tertiary-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-tertiary) !default; $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default; $btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default; diff --git a/tokens/src/components/Button/brand.json b/tokens/src/components/Button/brand.json index 06f42143510..e6f39658f68 100644 --- a/tokens/src/components/Button/brand.json +++ b/tokens/src/components/Button/brand.json @@ -16,11 +16,17 @@ }, "bg": { "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-bg" }, + "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-bg" }, "inverse-brand": { "value": "{color.btn.text.inverse-brand}", "type": "color", "source": "$btn-brand-inverse-bg", "modify": [{ "type": "color-yiq" }] + }, + "inverse-outline-brand": { + "value": "transparent", + "type": "color", + "source": "$btn-brand-inverse-outline-bg" } }, "border": { @@ -30,7 +36,8 @@ }, "inverse-outline-brand": { "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-border-color" - } + }, + "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-border-color" } }, "hover": { "text": { @@ -79,7 +86,8 @@ }, "inverse-outline-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-hover-border-color" - } + }, + "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-hover-border-color" } } }, "active": { @@ -117,7 +125,8 @@ }, "inverse-outline-brand": { "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-inverse-outline-active-bg" - } + }, + "inverse-brand": { "value": "{color.gray.100}", "type": "color", "source": "$btn-brand-inverse-active-bg" } }, "border": { "brand": { @@ -128,18 +137,41 @@ "type": "color", "source": "$btn-brand-outline-active-border-color" }, + "inverse-brand": { + "value": "transparent", + "type": "color", + "source": "$btn-brand-inverse-active-border-color" + }, "inverse-outline-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-active-border-color" } } }, "focus": { + "text": { + "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-focus-color" }, + "inverse-brand": { + "value": "{color.btn.text.inverse-brand}", + "type": "color", + "source": "$btn-brand-inverse-focus-color" + }, + "outline-brand": { + "value": "{color.btn.text.outline-brand}", + "type": "color", + "source": "$btn-brand-outline-focus-color" + }, + "inverse-outline-brand": { + "value": "{color.btn.text.inverse-outline-brand}", + "type": "color", + "source": "$btn-brand-inverse-outline-focus-color" + } + }, "border": { "brand": { - "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-border-color" + "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-focus-border-color" }, "outline-brand": { - "value": "{color.theme.focus.brand}", + "value": "{color.btn.border.outline-brand}", "type": "color", "source": "$btn-brand-outline-focus-border-color" }, @@ -147,7 +179,79 @@ "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-focus-border-color" }, "inverse-outline-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-focus-border-color" + "value": "{color.btn.border.inverse-outline-brand}", "type": "color", "source": "$btn-brand-inverse-outline-focus-border-color" + } + }, + "bg": { + "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-focus-bg" }, + "inverse-brand": { + "value": "{color.btn.bg.inverse-brand}", + "source": "$btn-brand-inverse-focus-bg", + "type": "color" + }, + "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-focus-bg" }, + "inverse-outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-inverse-outline-focus-bg" } + }, + "outline": { + "brand": { "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-outline-color" }, + "outline-brand": { + "value": "{color.theme.focus.brand}", + "type": "color", + "source": "$btn-brand-outline-focus-outline-color" + }, + "inverse-brand": { + "value": "{color.btn.focus.border.inverse-brand}", + "type": "color", + "source": "$btn-brand-inverse-focus-outline-color" + }, + "inverse-outline-brand": { + "value": "{color.btn.focus.border.inverse-outline-brand}", + "type": "color", + "source": "$btn-brand-inverse-outline-focus-outline-color" + } + } + }, + "disabled": { + "text": { + "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-disabled-color" }, + "inverse-brand": { "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-inverse-disabled-color" }, + "outline-brand": { + "value": "{color.btn.hover.text.outline-brand}", + "type": "color", + "source": "$btn-brand-outline-disabled-color" + }, + "inverse-outline-brand": { + "value": "{color.btn.text.inverse-outline-brand}", + "type": "color", + "source": "$btn-brand-inverse-outline-disabled-color" + } + }, + "bg": { + "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-disabled-bg" }, + "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-disabled-bg" }, + "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-disabled-bg" }, + "inverse-outline-brand": { + "value": "{color.btn.bg.inverse-outline-brand}", + "type": "color", + "source": "$btn-brand-inverse-outline-disabled-bg" + } + }, + "border": { + "brand": { "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-disabled-border-color" }, + "outline-brand": { + "value": "{color.btn.border.outline-brand}", + "type": "color", + "source": "$btn-brand-outline-disabled-border-color" + }, + "inverse-brand": { + "value": "{color.btn.disabled.bg.inverse-brand}", + "type": "color", + "source": "$btn-brand-inverse-disabled-border-color" + }, + "inverse-outline-brand": { + "value": "{color.btn.text.inverse-outline-brand}", + "type": "color", + "source": "$btn-brand-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/components/Button/danger.json b/tokens/src/components/Button/danger.json index be1c0a2dfb9..9272c9473c3 100644 --- a/tokens/src/components/Button/danger.json +++ b/tokens/src/components/Button/danger.json @@ -20,18 +20,21 @@ }, "bg": { "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-bg" }, + "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-bg" }, "inverse-danger": { "value": "{color.btn.text.inverse-danger}", "type": "color", "source": "$btn-danger-inverse-bg", "modify": [{ "type": "color-yiq" }] - } + }, + "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-bg" } }, "border": { "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-border-color" }, "outline-danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-border-color" }, + "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-border-color" }, "inverse-outline-danger": { "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-border-color" } @@ -81,6 +84,7 @@ "outline-danger": { "value": "{color.danger.900}", "type": "color", "source": "$btn-danger-outline-hover-border-color" }, + "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-hover-border-color" }, "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-hover-border-color" } @@ -119,6 +123,7 @@ "outline-danger": { "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-outline-active-bg" }, + "inverse-danger": { "value": "{color.gray.100}", "type": "color", "source": "$btn-danger-inverse-active-bg" }, "inverse-outline-danger": { "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-inverse-outline-active-bg" } @@ -132,17 +137,36 @@ "type": "color", "source": "$btn-danger-outline-active-border-color" }, + "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-active-border-color" }, "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-active-border-color" } } }, "focus": { + "text": { + "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-focus-color" }, + "inverse-danger": { + "value": "{color.btn.text.inverse-danger}", + "type": "color", + "source": "$btn-danger-inverse-focus-color" + }, + "outline-danger": { + "value": "{color.btn.text.outline-danger}", + "type": "color", + "source": "$btn-danger-outline-focus-color" + }, + "inverse-outline-danger": { + "value": "{color.btn.text.inverse-outline-danger}", + "type": "color", + "source": "$btn-danger-inverse-outline-focus-color" + } + }, "border": { "danger": { - "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-border-color" + "value": "{color.btn.focus.bg.danger}", "type": "color", "source": "$btn-danger-focus-border-color" }, "outline-danger": { - "value": "{color.theme.focus.danger}", + "value": "{color.btn.border.outline-danger}", "type": "color", "source": "$btn-danger-outline-focus-border-color" }, @@ -152,6 +176,70 @@ "inverse-outline-danger": { "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-focus-border-color" } + }, + "bg": { + "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-focus-bg" }, + "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-focus-bg" }, + "inverse-danger": { "value": "{color.btn.bg.inverse-danger}", "type": "color", "source": "$btn-danger-inverse-focus-bg" }, + "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-focus-bg" } + }, + "outline": { + "danger": { "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-outline-color" }, + "outline-danger": { + "value": "{color.theme.focus.danger}", + "type": "color", + "source": "$btn-danger-outline-focus-outline-color" + }, + "inverse-danger": { + "value": "{color.btn.focus.border.inverse-danger}", + "type": "color", + "source": "$btn-danger-inverse-focus-outline-color" + }, + "inverse-outline-danger": { + "value": "{color.btn.focus.border.inverse-danger}", + "type": "color", + "source": "$btn-danger-inverse-outline-focus-outline-color" + } + } + }, + "disabled": { + "text": { + "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-disabled-color" }, + "outline-danger": { + "value": "{color.btn.hover.text.outline-danger}", + "type": "color", + "source": "$btn-danger-outline-disabled-color" + }, + "inverse-danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-disabled-color" }, + "inverse-outline-danger": { + "value": "{color.btn.text.inverse-outline-danger}", + "type": "color", + "source": "$btn-danger-inverse-outline-disabled-color" + } + }, + "bg": { + "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-disabled-bg" }, + "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-disabled-bg" }, + "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-disabled-bg" }, + "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-disabled-bg" } + }, + "border": { + "danger": { "value": "{color.btn.border.danger}", "type": "color", "source": "$btn-danger-disabled-border-color" }, + "outline-danger": { + "value": "{color.btn.border.outline-danger}", + "type": "color", + "source": "$btn-danger-outline-disabled-border-color" + }, + "inverse-danger": { + "value": "transparent", + "type": "color", + "source": "$btn-danger-inverse-disabled-border-color" + }, + "inverse-outline-danger": { + "value": "{color.btn.border.inverse-outline-danger}", + "type": "color", + "source": "$btn-danger-inverse-outline-disabled-border-color" + } } } } diff --git a/tokens/src/components/Button/dark.json b/tokens/src/components/Button/dark.json index d8c17d96e6e..dcb73c0d64f 100644 --- a/tokens/src/components/Button/dark.json +++ b/tokens/src/components/Button/dark.json @@ -16,18 +16,21 @@ }, "bg": { "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-bg" }, + "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-bg" }, "inverse-dark": { "value": "{color.btn.text.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-bg", "modify": [{ "type": "color-yiq" }] - } + }, + "inverse-outline-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-bg" } }, "border": { "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-border-color" }, "outline-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-border-color" }, + "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-border-color" }, "inverse-outline-dark": { "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-border-color" } @@ -73,6 +76,7 @@ "outline-dark": { "value": "{color.dark.900}", "type": "color", "source": "$btn-dark-outline-hover-border-color" }, + "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-hover-border-color" }, "inverse-outline-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-hover-border-color" } @@ -109,6 +113,7 @@ "outline-dark": { "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-outline-active-bg" }, + "inverse-dark": { "value": "{color.gray.100}", "type": "color", "source": "$btn-dark-inverse-active-bg" }, "inverse-outline-dark": { "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-inverse-outline-active-bg" } @@ -120,24 +125,103 @@ "outline-dark": { "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-outline-active-border-color" }, + "inverse-dark": { + "value": "transparent", + "type": "color", + "source": "$btn-dark-inverse-active-border-color" + }, "inverse-outline-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-active-border-color" } } }, "focus": { + "text": { + "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-focus-color" }, + "inverse-dark": { "value": "{color.btn.text.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-color" }, + "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-color" }, + "inverse-outline-dark": { + "value": "{color.btn.text.inverse-outline-dark}", + "type": "color", + "source": "$btn-dark-inverse-outline-focus-color" + } + }, "border": { - "dark": { - "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-focus-border-color" - }, + "dark": { "value": "{color.btn.focus.bg.dark}", "type": "color", "source": "$btn-dark-focus-border-color" }, "outline-dark": { - "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-outline-focus-border-color" + "value": "{color.btn.border.outline-dark}", + "type": "color", + "source": "$btn-dark-outline-focus-border-color" + }, + "inverse-dark": { + "value": "{color.white}", + "type": "color", + "source": "$btn-dark-inverse-focus-border-color" }, + "inverse-outline-dark": { + "value": "{color.white}", + "type": "color", + "source": "$btn-dark-inverse-outline-focus-border-color" + } + }, + "bg": { + "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-focus-bg" }, + "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-bg" }, + "inverse-dark": { "value": "{color.btn.bg.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-bg" }, + "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-focus-bg" } + }, + "outline": { + "dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-focus-outline-color" }, + "outline-dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-outline-focus-outline-color" }, "inverse-dark": { - "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-focus-border-color" + "value": "{color.btn.focus.border.inverse-dark}", + "type": "color", + "source": "$btn-dark-inverse-focus-outline-color" }, "inverse-outline-dark": { - "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-focus-border-color" + "value": "{color.btn.focus.border.inverse-outline-dark}", + "type": "color", + "source": "$btn-dark-inverse-outline-focus-border-color" + } + } + }, + "disabled": { + "text": { + "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-disabled-color" }, + "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-color" }, + "inverse-dark": { + "value": "{color.btn.text.inverse-dark}", + "type": "color", + "source": "$btn-dark-inverse-disabled-color" + }, + "inverse-outline-dark": { + "value": "{color.btn.text.inverse-outline-dark}", + "type": "color", + "source": "$btn-dark-inverse-outline-disabled-color" + } + }, + "bg": { + "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-disabled-bg" }, + "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-bg" }, + "inverse-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-disabled-bg" }, + "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-disabled-bg" } + }, + "border": { + "dark": { + "value": "{color.btn.border.dark}", + "type": "color", + "source": "$btn-dark-disabled-border-color" + }, + "outline-dark": { + "value": "{color.btn.hover.text.outline-dark}", + "type": "color", + "source": "$btn-dark-outline-disabled-border-color" + }, + "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-disabled-border-color" }, + "inverse-outline-dark": { + "value": "{color.btn.focus.border.inverse-outline-dark}", + "type": "color", + "source": "$btn-dark-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/components/Button/info.json b/tokens/src/components/Button/info.json index fa086fb1bf3..5f777e95249 100644 --- a/tokens/src/components/Button/info.json +++ b/tokens/src/components/Button/info.json @@ -16,18 +16,21 @@ }, "bg": { "info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-bg" }, + "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-bg" }, "inverse-info": { "value": "{color.btn.text.inverse-info}", "type": "color", "source": "$btn-info-inverse-bg", "modify": [{ "type": "color-yiq" }] - } + }, + "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-bg" } }, "border": { "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-border-color" }, "outline-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-border-color" }, + "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-border-color" }, "inverse-outline-info": { "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-border-color" } @@ -75,6 +78,7 @@ "outline-info": { "value": "{color.info.900}", "type": "color", "source": "$btn-info-outline-hover-border-color" }, + "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-hover-border-color" }, "inverse-outline-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-hover-border-color" } @@ -111,6 +115,7 @@ "outline-info": { "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-outline-active-bg" }, + "inverse-info": { "value": "{color.gray.100}", "type": "color", "source": "$btn-info-inverse-active-bg" }, "inverse-outline-info": { "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-inverse-outline-active-bg" } @@ -124,24 +129,107 @@ "type": "color", "source": "$btn-info-outline-active-border-color" }, + "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-active-border-color" }, "inverse-outline-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-active-border-color" } } }, "focus": { + "text": { + "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-focus-color" }, + "outline-info": { + "value": "{color.btn.text.outline-info}", + "type": "color", + "source": "$btn-info-outline-focus-color" + }, + "inverse-info": { + "value": "{color.btn.text.inverse-info}", + "type": "color", + "source": "$btn-info-inverse-focus-color" + }, + "inverse-outline-info": { + "value": "{color.btn.text.inverse-outline-info}", + "type": "color", + "source": "$btn-info-inverse-outline-focus-color" + } + }, "border": { - "info": { - "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-border-color" + "info": { "value": "{color.btn.border.info}", "type": "color", "source": "$btn-info-focus-border-color" }, + "outline-info": { + "value": "{color.btn.border.outline-info}", + "type": "color", + "source": "$btn-info-outline-focus-border-color" + }, + "inverse-info": { "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color" }, + "inverse-outline-info": { + "value": "{color.btn.border.inverse-outline-info}", + "type": "color", + "source": "$btn-info-inverse-outline-focus-border-color" + } + }, + "bg": { + "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-focus-bg" }, + "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-focus-bg" }, + "inverse-info": { "value": "{color.btn.bg.inverse-info}", "type": "color", "source": "$btn-info-inverse-focus-bg" }, + "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-focus-bg" } + }, + "outline": { + "info": { "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-outline-color" }, + "outline-info": { + "value": "{color.theme.focus.info}", + "type": "color", + "source": "$btn-info-outline-focus-outline-color" + }, + "inverse-info": { + "value": "{color.btn.focus.border.inverse-info}", + "type": "color", + "source": "$btn-info-inverse-focus-outline-color" }, + "inverse-outline-info": { + "value": "{color.btn.focus.border.inverse-outline-info}", + "type": "color", + "source": "$btn-info-inverse-outline-focus-outline-color" + } + } + }, + "disabled": { + "text": { + "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-disabled-color" }, "outline-info": { - "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-outline-focus-border-color" + "value": "{color.btn.text.outline-info}", + "type": "color", + "source": "$btn-info-outline-disabled-color" }, "inverse-info": { - "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color" + "value": "{color.info.base}", + "type": "color", + "source": "$btn-info-inverse-disabled-color" + }, + "inverse-outline-info": { + "value": "{color.btn.text.inverse-outline-info}", + "type": "color", + "source": "$btn-info-inverse-outline-disabled-color" + } + }, + "bg": { + "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-bg" }, + "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-disabled-bg" }, + "inverse-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-disabled-bg" }, + "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-disabled-bg" } + }, + "border": { + "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-border-color" }, + "outline-info": { + "value": "{color.btn.border.outline-info}", + "type": "color", + "source": "$btn-info-outline-disabled-border-color" }, + "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-disabled-border-color" }, "inverse-outline-info": { - "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-focus-border-color" + "value": "{color.btn.border.inverse-outline-info}", + "type": "color", + "source": "$btn-info-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/components/Button/light.json b/tokens/src/components/Button/light.json index 8dc026c591f..83c4abc4652 100644 --- a/tokens/src/components/Button/light.json +++ b/tokens/src/components/Button/light.json @@ -21,13 +21,16 @@ "type": "color", "source": "$btn-light-inverse-bg", "modify": [{ "type": "color-yiq" }] - } + }, + "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-bg" }, + "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-bg" } }, "border": { "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-border-color" }, "outline-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-border-color" }, + "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-border-color" }, "inverse-outline-light": { "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-border-color" } @@ -77,6 +80,7 @@ "outline-light": { "value": "{color.light.900}", "type": "color", "source": "$btn-light-outline-hover-border-color" }, + "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-hover-border-color" }, "inverse-outline-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-hover-border-color" } @@ -113,6 +117,7 @@ "outline-light": { "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-outline-active-bg" }, + "inverse-light": { "value": "{color.gray.100}", "type": "color", "source": "$btn-light-inverse-active-bg" }, "inverse-outline-light": { "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-inverse-outline-active-bg" } @@ -126,26 +131,103 @@ "type": "color", "source": "$btn-light-outline-active-border-color" }, + "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-active-border-color" }, "inverse-outline-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-active-border-color" } } }, "focus": { - "border": { - "light": { - "value": "{color.theme.focus.light}", "type": "color", "source": "$btn-light-focus-border-color" + "text": { + "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-focus-color" }, + "outline-light": { + "value": "{color.btn.text.outline-light}", + "type": "color", + "source": "$btn-light-outline-focus-color" + }, + "inverse-light": { + "value": "{color.btn.text.inverse-light}", + "type": "color", + "source": "$btn-light-inverse-focus-color" }, + "inverse-outline-light": { + "value": "{color.btn.text.inverse-outline-light}", + "type": "color", + "source": "$btn-light-inverse-outline-focus-color" + } + }, + "border": { + "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-focus-border-color" }, "outline-light": { - "value": "{color.theme.focus.light}", + "value": "{color.btn.border.outline-light}", "type": "color", "source": "$btn-light-outline-focus-border-color" }, "inverse-light": { - "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-focus-border-color" + "value": "{color.btn.border.inverse-light}", + "type": "color", + "source": "$btn-light-inverse-focus-border-color" }, "inverse-outline-light": { - "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-focus-border-color" + "value": "{color.btn.border.inverse-outline-light}", + "type": "color", + "source": "$btn-light-inverse-outline-focus-border-color" + } + }, + "bg": { + "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-focus-bg" }, + "outline-light": { "value": "transparent", "type": "color", "source": "$btn-light-outline-focus-bg" }, + "inverse-light": { "value": "{color.btn.bg.inverse-light}", "type": "color", "source": "$btn-light-inverse-focus-bg" }, + "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-focus-bg" } + }, + "outline": { + "light": { "value": "{color.primary.300}", "type": "color", "source": "$btn-light-focus-outline-color" }, + "outline-light": { "value": "{color.theme.focus.light}", "type": "color", "source": "$btn-light-outline-focus-outline-color" }, + "inverse-light": { "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-focus-outline-color" }, + "inverse-outline-light": { + "value": "{color.btn.focus.border.inverse-outline-light}", + "type": "color", + "source": "$btn-light-inverse-outline-focus-outline-color" + } + } + }, + "disabled": { + "text": { + "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-disabled-color" }, + "outline-light": { + "value": "{color.btn.hover.text.outline-light}", + "type": "color", + "source": "$btn-light-outline-disabled-color" + }, + "inverse-light": { + "value": "{color.btn.text.inverse-light}", + "type": "color", + "source": "$btn-light-inverse-disabled-color" + }, + "inverse-outline-light": { + "value": "{color.btn.text.inverse-outline-light}", + "type": "color", + "source": "$btn-light-inverse-outline-disabled-color" + } + }, + "bg": { + "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-disabled-bg" }, + "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-disabled-bg" }, + "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-disabled-bg" }, + "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-disabled-bg" } + }, + "border": { + "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-disabled-border-color" }, + "outline-light": { + "value": "{color.btn.hover.text.outline-light}", + "type": "color", + "source": "$btn-light-outline-disabled-border-color" + }, + "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-disabled-border-color" }, + "inverse-outline-light": { + "value": "{color.btn.border.inverse-outline-light}", + "type": "color", + "source": "$btn-light-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/components/Button/primary.json b/tokens/src/components/Button/primary.json index 771ad112ca6..1c6e29c6d17 100644 --- a/tokens/src/components/Button/primary.json +++ b/tokens/src/components/Button/primary.json @@ -19,7 +19,9 @@ } }, "bg": { - "primary": { "value": "{color.primary.base.value}", "type": "color", "source": "$btn-primary-bg" }, + "primary": { "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-bg" }, + "outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-outline-bg" }, + "inverse-outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-bg" }, "inverse-primary": { "value": "{color.btn.text.inverse-primary}", "type": "color", @@ -34,7 +36,8 @@ }, "inverse-outline-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-border-color" - } + }, + "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-border-color" } }, "hover": { "text": { @@ -85,7 +88,8 @@ }, "inverse-outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-hover-border-color" - } + }, + "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-hover-border-color" } } }, "active": { @@ -125,7 +129,8 @@ "value": "{color.theme.bg.primary}", "type": "color", "source": "$btn-primary-inverse-outline-active-bg" - } + }, + "inverse-primary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-primary-inverse-active-bg" } }, "border": { "primary": { @@ -142,24 +147,101 @@ "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-active-border-color" - } + }, + "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-active-border-color" } } }, "focus": { + "text": { + "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-focus-color" }, + "outline-primary": { + "value": "{color.btn.text.outline-primary}", + "type": "color", + "source": "$btn-primary-outline-focus-color" + }, + "inverse-primary": { + "value": "{color.btn.text.inverse-primary}", + "type": "color", + "source": "$btn-primary-inverse-focus-color" + }, + "inverse-outline-primary": { + "value": "{color.btn.text.inverse-outline-primary}", + "type": "color", + "source": "$btn-primary-inverse-outline-focus-color" + } + }, "border": { - "primary": { - "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-border-color" + "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-focus-border-color" }, + "outline-primary": { + "value": "{color.btn.border.outline-primary}", + "type": "color", + "source": "$btn-primary-outline-focus-border-color" }, + "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color" }, + "inverse-outline-primary": { + "value": "{color.btn.border.inverse-outline-primary}", + "type": "color", + "source": "$btn-primary-inverse-outline-focus-border-color" + } + }, + "outline": { + "primary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-focus-outline-color" }, "outline-primary": { "value": "{color.theme.focus.primary}", "type": "color", - "source": "$btn-primary-outline-focus-border-color" + "source": "$btn-primary-outline-focus-outline-color" }, "inverse-primary": { - "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color" + "value": "{color.btn.focus.border.inverse-primary}", + "type": "color", + "source": "$btn-primary-inverse-focus-outline-color" + }, + "inverse-outline-primary": { + "value": "{color.btn.border.inverse-outline-primary}", + "type": "color", + "source": "$btn-primary-inverse-outline-focus-outline-color" + } + }, + "bg": { + "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-focus-bg" }, + "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-focus-bg" }, + "inverse-primary": { "value": "{color.btn.bg.inverse-primary}", "type": "color", "source": "$btn-primary-inverse-focus-bg" }, + "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-focus-bg" } + } + }, + "disabled": { + "text": { + "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-disabled-color" }, + "inverse-primary": { "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-inverse-disabled-color" }, + "outline-primary": { + "value": "{color.btn.hover.text.outline-primary}", + "type": "color", + "source": "$btn-primary-outline-disabled-color" }, "inverse-outline-primary": { - "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-focus-border-color" + "value": "{color.btn.text.inverse-outline-primary}", + "type": "color", + "source": "$btn-primary-inverse-outline-disabled-color" + } + }, + "bg": { + "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-disabled-bg" }, + "inverse-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-disabled-bg" }, + "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-disabled-bg" }, + "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-disabled-bg" } + }, + "border": { + "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-disabled-border-color" }, + "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-disabled-border-color" }, + "outline-primary": { + "value": "{color.btn.hover.text.outline-primary}", + "type": "color", + "source": "$btn-primary-outline-disabled-border-color" + }, + "inverse-outline-primary": { + "value": "{color.btn.text.inverse-outline-primary}", + "type": "color", + "source": "$btn-primary-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/components/Button/secondary.json b/tokens/src/components/Button/secondary.json index d9f899b53c4..c2b6c680d32 100644 --- a/tokens/src/components/Button/secondary.json +++ b/tokens/src/components/Button/secondary.json @@ -22,6 +22,8 @@ "secondary": { "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-bg" }, + "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-bg" }, + "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-bg" }, "inverse-secondary": { "value": "{color.btn.text.inverse-secondary}", "type": "color", @@ -38,7 +40,8 @@ }, "inverse-outline-secondary": { "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-border-color" - } + }, + "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-border-color" } }, "hover": { "text": { @@ -99,7 +102,8 @@ "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-outline-hover-border-color" - } + }, + "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-hover-border-color" } } }, "active": { @@ -139,7 +143,8 @@ "value": "{color.theme.bg.secondary}", "type": "color", "source": "$btn-secondary-inverse-outline-active-bg" - } + }, + "inverse-secondary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-secondary-inverse-active-bg" } }, "border": { "secondary": { @@ -154,29 +159,118 @@ }, "inverse-outline-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-outline-active-border-color" - } + }, + "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-active-border-color" } } }, "focus": { + "text": { + "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-focus-color" }, + "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-focus-color" }, + "outline-secondary": { + "value": "{color.btn.text.outline-secondary}", + "type": "color", + "source": "$btn-secondary-outline-focus-color" + }, + "inverse-outline-secondary": { + "value": "{color.btn.text.inverse-outline-secondary}", + "type": "color", + "source": "$btn-secondary-inverse-outline-focus-color" + } + }, "border": { "secondary": { - "value": "{color.theme.focus.secondary}", + "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-focus-border-color" }, "outline-secondary": { - "value": "{color.theme.focus.secondary}", + "value": "{color.btn.border.outline-secondary}", "type": "color", "source": "$btn-secondary-outline-focus-border-color" }, "inverse-secondary": { - "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-focus-border-color" + "value": "{color.white}", + "type": "color", + "source": "$btn-secondary-inverse-focus-border-color" }, "inverse-outline-secondary": { "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-focus-border-color" } + }, + "outline": { + "secondary": { + "value": "{color.theme.focus.secondary}", + "type": "color", + "source": "$btn-secondary-focus-outline-color" + }, + "outline-secondary": { + "value": "{color.theme.focus.secondary}", + "type": "color", + "source": "$btn-secondary-outline-focus-outline-color" + }, + "inverse-secondary": { + "value": "{color.white}", + "type": "color", + "source": "$btn-secondary-inverse-focus-outline-color" + }, + "inverse-outline-secondary": { + "value": "{color.btn.border.inverse-outline-secondary}", + "type": "color", + "source": "$btn-secondary-inverse-outline-focus-outline-color" + } + }, + "bg": { + "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-focus-bg" }, + "outline-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-outline-focus-bg" }, + "inverse-secondary": { + "value": "{color.btn.bg.inverse-secondary}", + "type": "color", + "source": "$btn-secondary-inverse-focus-bg" + }, + "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-focus-bg" } + } + }, + "disabled": { + "text": { + "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-disabled-color" }, + "outline-secondary": { + "value": "inherit", + "type": "color", + "source": "$btn-secondary-outline-disabled-color" + }, + "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-color" }, + "inverse-outline-secondary": { + "value": "{color.btn.text.inverse-outline-secondary}", + "type": "color", + "source": "$btn-secondary-inverse-outline-disabled-color" + } + }, + "bg": { + "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-disabled-bg" }, + "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-disabled-bg" }, + "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-bg" }, + "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-disabled-bg" } + }, + "border": { + "secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-disabled-border-color" }, + "outline-secondary": { + "value": "{color.secondary.base}", + "type": "color", + "source": "$btn-secondary-outline-disabled-border-color" + }, + "inverse-secondary": { + "value": "{color.btn.border.inverse-secondary}", + "type": "color", + "source": "$btn-secondary-inverse-disabled-border-color" + }, + "inverse-outline-secondary": { + "value": "{color.btn.border.inverse-outline-secondary}", + "type": "color", + "source": "$btn-secondary-inverse-outline-disabled-border-color" + } } } } diff --git a/tokens/src/components/Button/success.json b/tokens/src/components/Button/success.json index a27dc9831cf..4b68d594628 100644 --- a/tokens/src/components/Button/success.json +++ b/tokens/src/components/Button/success.json @@ -20,18 +20,21 @@ }, "bg": { "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-bg" }, + "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-bg" }, "inverse-success": { "value": "{color.btn.text.inverse-success}", "type": "color", "source": "$btn-success-inverse-bg", "modify": [{ "type": "color-yiq" }] - } + }, + "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-bg" } }, "border": { "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-border-color" }, "outline-success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-border-color" }, + "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-border-color" }, "inverse-outline-success": { "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-border-color" } @@ -83,6 +86,7 @@ "outline-success": { "value": "{color.success.900}", "type": "color", "source": "$btn-success-outline-hover-border-color" }, + "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-hover-border-color" }, "inverse-outline-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-outline-hover-border-color" } @@ -121,6 +125,7 @@ "outline-success": { "value": "{color.theme.bg.success}", "type": "color", "source": "$btn-success-outline-active-bg" }, + "inverse-success": { "value": "{color.gray.100}", "type": "color", "source": "$btn-success-inverse-active-bg" }, "inverse-outline-success": { "value": "{color.theme.bg.success}", "type": "color", @@ -138,6 +143,10 @@ "type": "color", "source": "$btn-success-outline-active-border-color" }, + "inverse-success": { + "value": "inherit", + "source": "$btn-success-inverse-active-border-color" + }, "inverse-outline-success": { "value": "transparent", "type": "color", @@ -146,21 +155,97 @@ } }, "focus": { + "text": { + "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-focus-color" }, + "outline-success": { + "value": "{color.btn.text.outline-success}", + "type": "color", + "source": "$btn-success-outline-focus-color" + }, + "inverse-success": { + "value": "{color.btn.text.inverse-success}", + "type": "color", + "source": "$btn-success-inverse-focus-color" + }, + "inverse-outline-success": { + "value": "{color.btn.text.inverse-outline-success}", + "type": "color", + "source": "$btn-success-inverse-outline-focus-color" + } + }, "border": { - "success": { - "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-border-color" + "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-focus-border-color" }, + "outline-success": { + "value": "{color.btn.border.outline-success}", + "type": "color", + "source": "$btn-success-outline-focus-border-color" + }, + "inverse-success": { + "value": "{color.white}", + "type": "color", + "source": "$btn-success-inverse-focus-border-color" }, + "inverse-outline-success": { + "value": "{color.btn.border.inverse-outline-success}", + "type": "color", + "source": "$btn-success-inverse-outline-focus-border-color" + } + }, + "bg": { + "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-focus-bg" }, + "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-focus-bg" }, + "inverse-success": { "value": "{color.btn.bg.inverse-success}", "type": "color", "source": "$btn-success-inverse-focus-bg" }, + "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-focus-bg" } + }, + "outline": { + "success": { "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-outline-color" }, "outline-success": { "value": "{color.theme.focus.success}", "type": "color", - "source": "$btn-success-outline-focus-border-color" + "source": "$btn-success-outline-focus-outline-color" }, "inverse-success": { - "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-focus-border-color" + "value": "{color.btn.focus.border.inverse-success}", + "type": "color", + "source": "$btn-success-inverse-focus-outline-color" + }, + "inverse-outline-success": { + "value": "{color.btn.focus.border.inverse-outline-success}", + "type": "color", + "source": "$btn-success-inverse-outline-focus-outline-color" + } + } + }, + "disabled": { + "text": { + "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-disabled-color" }, + "outline-success": { + "value": "{color.btn.text.outline-success}", + "type": "color", + "source": "$btn-success-outline-disabled-color" }, + "inverse-success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-disabled-color" }, "inverse-outline-success": { - "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-focus-border-color" + "value": "{color.btn.text.inverse-outline-success}", + "type": "color", + "source": "$btn-success-inverse-outline-disabled-color" } + }, + "bg": { + "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-disabled-bg" }, + "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-disabled-bg" }, + "inverse-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-disabled-bg" }, + "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-bg" } + }, + "border": { + "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-disabled-border-color" }, + "outline-success": { + "value": "{color.btn.border.outline-success}", + "type": "color", + "source": "$btn-success-outline-disabled-border-color" + }, + "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-disabled-border-color" }, + "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-border-color" } } } } diff --git a/tokens/src/components/Button/tertiary.json b/tokens/src/components/Button/tertiary.json index fb2237f42d4..a743b5f0dec 100644 --- a/tokens/src/components/Button/tertiary.json +++ b/tokens/src/components/Button/tertiary.json @@ -63,12 +63,44 @@ } }, "focus": { + "text": { + "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-focus-color" }, + "inverse-tertiary": { + "value": "{color.btn.text.inverse-tertiary}", + "type": "color", + "source": "$btn-inverse-tertiary-focus-color" + } + }, "border": { - "tertiary": { - "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-border-color" - }, + "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-focus-border-color" }, + "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color" } + }, + "bg": { + "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-focus-bg" }, + "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-focus-bg" } + }, + "outline": { + "tertiary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-outline-color" }, + "inverse-tertiary": { "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-outline-color" } + } + }, + "disabled": { + "text": { + "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-color" }, + "inverse-tertiary": { + "value": "{color.btn.text.inverse-tertiary}", + "type": "color", + "source": "$btn-inverse-tertiary-disabled-color" + } + }, + "bg": { + "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-disabled-bg" }, + "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-disabled-bg" } + }, + "border": { + "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-border-color" }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color" + "value": "{color.btn.border.inverse-tertiary}", "type": "color", "source": "$btn-inverse-tertiary-disabled-border-color" } } } diff --git a/tokens/src/components/Button/warning.json b/tokens/src/components/Button/warning.json index c5a5904920c..0d47ce0e226 100644 --- a/tokens/src/components/Button/warning.json +++ b/tokens/src/components/Button/warning.json @@ -20,18 +20,21 @@ }, "bg": { "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" }, + "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-bg" }, "inverse-warning": { "value": "{color.btn.text.inverse-warning}", "type": "color", "source": "$btn-warning-inverse-bg", "modify": [{ "type": "color-yiq" }] - } + }, + "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-bg" } }, "border": { "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" }, "outline-warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color" }, + "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-border-color" }, "inverse-outline-warning": { "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-border-color" } @@ -83,6 +86,7 @@ "outline-warning": { "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color" }, + "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-hover-border-color" }, "inverse-outline-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-hover-border-color" } @@ -121,6 +125,7 @@ "outline-warning": { "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg" }, + "inverse-warning": { "value": "{color.gray.100}", "type": "color", "source": "$btn-warning-inverse-active-bg" }, "inverse-outline-warning": { "value": "{color.theme.bg.warning}", "type": "color", @@ -133,6 +138,11 @@ "type": "color", "source": "$btn-warning-active-border-color" }, + "inverse-warning": { + "value": "inherit", + "type": "color", + "source": "$btn-warning-inverse-active-border-color" + }, "outline-warning": { "value": "{color.theme.active.warning}", "type": "color", @@ -144,25 +154,121 @@ } }, "focus": { + "text": { + "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-focus-color" }, + "outline-warning": { + "value": "{color.btn.text.outline-warning}", + "type": "color", + "source": "$btn-warning-outline-focus-color" + }, + "inverse-warning": { + "value": "{color.btn.text.inverse-warning}", + "type": "color", + "source": "$btn-warning-inverse-focus-color" + }, + "inverse-outline-warning": { + "value": "{color.btn.text.inverse-outline-warning}", + "type": "color", + "source": "$btn-warning-inverse-outline-focus-color" + } + }, "border": { "warning": { - "value": "{color.theme.focus.warning}", + "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-focus-border-color" }, "outline-warning": { - "value": "{color.theme.focus.warning}", + "value": "{color.btn.border.outline-warning}", "type": "color", "source": "$btn-warning-outline-focus-border-color" }, "inverse-warning": { - "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-focus-border-color" + "value": "{color.btn.border.inverse-warning}", + "type": "color", + "source": "$btn-warning-inverse-focus-border-color" }, "inverse-outline-warning": { - "value": "{color.white}", + "value": "{color.btn.border.inverse-outline-warning}", "type": "color", "source": "$btn-warning-inverse-outline-focus-border-color" } + }, + "bg": { + "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-focus-bg" }, + "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-focus-bg" }, + "inverse-warning": { + "value": "{color.btn.bg.inverse-warning}", + "type": "color", + "source": "$btn-warning-inverse-focus-bg" + }, + "inverse-outline-warning": { + "value": "inherit", + "type": "color", + "source": "$btn-warning-inverse-outline-focus-bg" + } + }, + "outline": { + "warning": { + "value": "{color.theme.focus.warning}", + "type": "color", + "source": "$btn-warning-focus-outline-color" + }, + "outline-warning": { + "value": "{color.theme.focus.warning}", + "type": "color", + "source": "$btn-warning-outline-focus-outline-color" + }, + "inverse-warning": { + "value": "{color.white}", + "type": "color", + "source": "$btn-warning-inverse-focus-outline-color" + }, + "inverse-outline-warning": { + "value": "inherit", + "type": "color", + "source": "$btn-warning-inverse-outline-focus-bg" + } + } + }, + "disabled": { + "text": { + "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-disabled-color" }, + "outline-warning": { + "value": "{color.btn.text.outline-warning}", + "type": "color", + "source": "$btn-warning-outline-disabled-color" + }, + "inverse-warning": { + "value": "{color.warning.base}", + "type": "color", + "source": "$btn-warning-inverse-disabled-color" + }, + "inverse-outline-warning": { + "value": "{color.btn.text.inverse-outline-warning}", + "type": "color", + "source": "$btn-warning-inverse-outline-disabled-color" + } + }, + "bg": { + "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-disabled-bg" }, + "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-disabled-bg" }, + "inverse-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-disabled-bg" }, + "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-disabled-bg" } + }, + "border": { + "warning": { "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-disabled-border-color" }, + "outline-warning": { + "value": "{color.btn.border.outline-warning}", + "type": "color", + "source": "$btn-warning-outline-disabled-border-color" + }, + "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-disabled-border-color" }, + "inverse-outline-warning": { + "value": "{color.btn.border.inverse-outline-warning}", + "type": "color", + "source": "$btn-warning-inverse-outline-disabled-border-color" + } } } } diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index 0a761a5f905..c2cf3450759 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -9,7 +9,13 @@ const cssUtilities = require('./css-utilities'); const { formattedVariables, fileHeader, sortByReference } = StyleDictionary.formatHelpers; const colorTransform = (token) => { - const { value, modify = [] } = token; + const { value, modify = [], original } = token; + const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor']; + + if (reservedColorValues.includes(original.value)) { + return original.value; + } + let color = chroma(value); if (modify && modify.length > 0) {