From 1488f366c873338832b5f3b42f13e0a1660be6ed Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 27 Jul 2023 13:06:25 +0300 Subject: [PATCH] refactor: refactoring buttons variants --- paragon/_overrides.scss | 223 ++---------------- paragon/css/core/custom-media-breakpoints.css | 2 +- paragon/css/core/variables.css | 4 +- paragon/css/themes/light/variables.css | 99 ++++---- tokens/src/core/components/Popover.json | 2 +- .../themes/light/components/Button/brand.json | 42 ++-- .../light/components/Button/danger.json | 10 +- .../themes/light/components/Button/dark.json | 10 +- .../themes/light/components/Button/info.json | 10 +- .../themes/light/components/Button/light.json | 10 +- .../light/components/Button/primary.json | 17 +- .../light/components/Button/secondary.json | 14 -- .../light/components/Button/success.json | 8 +- .../light/components/Button/warning.json | 14 +- .../themes/light/components/IconButton.json | 13 + 15 files changed, 130 insertions(+), 348 deletions(-) create mode 100644 tokens/src/themes/light/components/IconButton.json diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 3918a9f5..fc3d3303 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -1,3 +1,4 @@ +@import 'variables'; // This file is included after all of Bootstrap. Any customization that can't // be made using variable definitions should be done here. @@ -7,7 +8,7 @@ color: theme-color("gray"); opacity: 1; - @include hover { + &:hover { color: theme-color("gray"); } } @@ -16,11 +17,11 @@ // Badges .badge { - font-family: $font-family-sans-serif; + font-family: var(--pgn-typography-font-family-sans-serif); line-height: 1.25rem; .badge-info { - --pgn-badge-bg-color: #{$badge-info-bg}; + --pgn-badge-bg-color: var(--pgn-color-badge-bg-info); } } @@ -46,186 +47,9 @@ } } -@each $color, $value in $theme-colors { - .btn-outline-#{$color} { - background: $white; - border-color: $light-300; - - &:not(:disabled):not(.disabled) { - &:hover, &:active, &.hover, &.active { - background: $value; - border-color: $value; - color: $white; - } - - &:focus, &.focus { - background: $white; - color: $value; - border-color: $light-300; - - &:before { - border-color: $value; - } - } - } - - &:disabled, &.disabled { - border-color: $light-300; - background-color: $white; - } - } - - .btn-#{$color} { - &:hover { - border-color: transparent; - } - - &.focus, &:focus { - background: $value; - - &::before { - border-color: $value; - } - } - } -} - -.btn-tertiary:not(:disabled):not(.disabled) { - &:focus, &.focus { - background: $btn-tertiary-bg; - } -} - -.btn-primary:not(:disabled):not(.disabled) { - &:hover, &:active, &.hover, &.active { - background: $primary-300; - border-color: transparent; - color: $white; - } - - &:focus, &.focus { - background: $primary-500; - } -} - -.btn-inverse-outline-primary { - background: transparent; - color: $white; - border-color: $gray-500; - - &:not(:disabled):not(.disabled) { - &:hover, &:active, &.hover, &.active { - background: $white; - border-color: transparent; - color: $primary; - } - - &:focus, &.focus { - background: transparent; - border-color: $gray-500; - color: $white; - - &:before { - border-color: $white; - } - } - } -} - -.btn-inverse-outline-brand { - background: transparent; - color: $white; - border-color: $white; - - &:not(:disabled):not(.disabled) { - &:hover, &:active, &.hover, &.active { - background: $brand; - border-color: transparent; - color: $white; - } - } - - &:not(:disabled):not(.disabled) { - &:focus, &.focus { - background: transparent; - border-color: $white; - - &:before { - border-color: $white; - } - } - } -} - -.btn-inverse-brand { - background: $brand; - color: $white; - border-color: transparent; - - &:not(:disabled):not(.disabled) { - &:hover, &:active, &.hover, &.active { - background: $brand-700; - border-color: transparent; - color: white; - } - - &:focus, &.focus { - background-color: $brand-500; - - &:before { - border-color: $brand-500; - } - } - } - - &:disabled, &.disabled { - background-color: $brand-500; - border-color: $brand-500; - color: $white; - } -} - -.btn-inverse-tertiary:not(:disabled):not(.disabled) { - &:focus, &.focus { - background: transparent; - - &:before { - border-color: $white; - } - } -} - -.btn-inverse-primary { - background: $white; - color: $primary; - border-color: transparent; - - &:not(:disabled):not(.disabled) { - &:hover, &:active, &.hover, &.active { - background: $primary-300; - border-color: transparent; - color: $white; - } - - &:focus, &.focus { - background: $white; - color: $primary-500; - - &:before { - border-color: $white; - } - } - } - - &:disabled, &.disabled { - background-color: $white; - border-color: $white; - } -} - // Avatar buttons in tertiary style (the default) are darker than regular tertiary buttons .btn-avatar.btn-tertiary { - color: $primary-500; + color: var(--pgn-color-primary-500); } // Forms @@ -261,7 +85,7 @@ &.is-#{$state} { &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width $color; + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $color; } } } @@ -271,7 +95,7 @@ &.is-#{$state} { &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width $color; + box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $color; } } } @@ -280,26 +104,25 @@ select.form-control { background-repeat: no-repeat; background-position: right 1rem center; - background-image: str-replace($custom-select-indicator, "#", "%23"); appearance: none; -moz-appearance: none; -webkit-appearance: none; } .popover-header { - border-bottom: solid 1px $gray-100; + border-bottom: solid 1px var(--pgn-color-gray-100); } // Grid .container { - padding-left: $grid-gutter-width; - padding-right: $grid-gutter-width; + padding-left: var(--pgn-spacing-grid-gutter-width); + padding-right: var(--pgn-spacing-grid-gutter-width); } .container-fluid { - padding-left: $grid-gutter-width; - padding-right: $grid-gutter-width; + padding-left: var(--pgn-spacing-grid-gutter-width); + padding-right: var(--pgn-spacing-grid-gutter-width); } @@ -314,9 +137,10 @@ h1, .h1 { line-height: calc((44 / 16) * 1rem); letter-spacing: -2%; - @media (max-width: map-get($grid-breakpoints, "sm")) { + @media (--max-pgn-size-breakpoint-xs) { line-height: calc((40 / 16) * 1rem); } + .mobile-type & { line-height: calc((40 / 16) * 1rem); } @@ -357,9 +181,10 @@ h6, .h6 { p > a[href]:not(.btn), a.inline-link { text-decoration-line: underline; - text-decoration-color: rgba($link-color, .3); + text-decoration-color: rgba(var(--pgn-color-link-base), .3); + &:hover { - text-decoration-color: rgba($link-color, 1); + text-decoration-color: rgba(var(--pgn-color-link-base), 1); } } @@ -367,22 +192,26 @@ a.inline-link { .pgn__searchfield { border-radius: 0 !important; + .btn { - background: $input-bg; + background: var(--pgn-color-form-input-bg-base); display: flex; } + &.has-focus { + border-color: var(--pgn-color-form-input-focus-border) !important; + .btn { - background: $input-focus-bg; + background: var(--pgn-color-form-input-focus-bg); } - border-color: $input-focus-border-color !important; } } // Progress Bar .progress { - border: $progress-bar-border-width solid $progress-bar-border-color; + border: var(--pgn-size-progress-bar-border-width) solid var(--pgn-color-progress-bar-border); } + .progress-bar { - background-color: $progress-bar-bg; + background-color: var(--pgn-color-progress-bar-bar-bg-base); } diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css index a0b15ea2..f65afad1 100644 --- a/paragon/css/core/custom-media-breakpoints.css +++ b/paragon/css/core/custom-media-breakpoints.css @@ -1,6 +1,6 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Sun, 23 Jul 2023 16:09:04 GMT + * Generated on Thu, 27 Jul 2023 08:38:40 GMT */ diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css index 2d8e9ed6..4fe667f8 100644 --- a/paragon/css/core/variables.css +++ b/paragon/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Sun, 23 Jul 2023 16:09:04 GMT + * Generated on Thu, 27 Jul 2023 08:38:40 GMT */ :root { @@ -25,7 +25,7 @@ --pgn-spacing-card-spacer-y: 1rem; --pgn-spacing-card-spacer-x: 1.5rem; --pgn-spacing-btn-focus-gap: 2px; - --pgn-size-popover-border-width: 0; + --pgn-size-popover-border-width: 0px; --pgn-size-nav-pills-border-radius: 0; --pgn-size-image-thumbnail-border-radius: 0; --pgn-size-input-btn-border-width: 1px; diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css index d2a60b02..0206044e 100644 --- a/paragon/css/themes/light/variables.css +++ b/paragon/css/themes/light/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Sun, 23 Jul 2023 16:09:04 GMT + * Generated on Thu, 27 Jul 2023 08:38:40 GMT */ :root { @@ -52,6 +52,7 @@ --pgn-color-btn-disabled-border-inverse-success: #00000000; --pgn-color-btn-disabled-border-inverse-light: #00000000; --pgn-color-btn-disabled-border-inverse-dark: #00000000; + --pgn-color-btn-focus-bg-inverse-outline-brand: #00000000; --pgn-color-btn-border-warning: #00000000; --pgn-color-btn-border-secondary: #00000000; --pgn-color-btn-border-info: #00000000; @@ -68,6 +69,7 @@ --pgn-color-tooltip-bg-base: #00262BFF; --pgn-color-tooltip-light: #00262BFF; --pgn-color-pagination-text-base: #00262BFF; + --pgn-color-icon-button-bg-primary-inverse-active-base: #FFFFFFFF; --pgn-color-link-hover: #004972FF; --pgn-color-body-bg: #FFFFFFFF; --pgn-color-form-input-focus-bg: #FFFFFFFF; @@ -93,42 +95,30 @@ --pgn-color-btn-disabled-text-inverse-danger: #AB0D02FF; --pgn-color-btn-disabled-text-outline-danger: #AB0D02FF; --pgn-color-btn-disabled-text-inverse-outline-brand: #F2F0EFFF; - --pgn-color-btn-disabled-text-outline-brand: #D23228FF; + --pgn-color-btn-disabled-text-inverse-brand: #FFFFFFFF; --pgn-color-btn-focus-outline-inverse-outline-primary: #FFFFFFFF; --pgn-color-btn-focus-outline-inverse-primary: #FFFFFFFF; --pgn-color-btn-focus-outline-inverse-outline-brand: #FFFFFFFF; - --pgn-color-btn-focus-outline-inverse-brand: #FFFFFFFF; + --pgn-color-btn-focus-outline-inverse-brand: #D23228FF; + --pgn-color-btn-focus-outline-outline-brand: #D23228FF; + --pgn-color-btn-focus-outline-brand: #D23228FF; + --pgn-color-btn-focus-bg-outline-warning: #FFFFFFFF; --pgn-color-btn-focus-bg-inverse-success: #FFFFFFFF; - --pgn-color-btn-focus-bg-inverse-secondary: #FFFFFFFF; - --pgn-color-btn-focus-bg-secondary: #454545FF; - --pgn-color-btn-focus-bg-inverse-primary: #2D494EFF; - --pgn-color-btn-focus-bg-outline-primary: #00262BFF; + --pgn-color-btn-focus-bg-outline-success: #FFFFFFFF; --pgn-color-btn-focus-bg-inverse-info: #FFFFFFFF; + --pgn-color-btn-focus-bg-outline-info: #FFFFFFFF; --pgn-color-btn-focus-bg-inverse-dark: #FFFFFFFF; - --pgn-color-btn-focus-bg-dark: #00262BFF; - --pgn-color-btn-focus-bg-inverse-danger: #EBEBEBFF; + --pgn-color-btn-focus-bg-outline-dark: #FFFFFFFF; + --pgn-color-btn-focus-bg-outline-danger: #FFFFFFFF; --pgn-color-btn-focus-bg-danger: #AB0D02FF; - --pgn-color-btn-focus-bg-inverse-outline-brand: #D23228FF; - --pgn-color-btn-focus-bg-outline-brand: #D23228FF; - --pgn-color-btn-focus-bg-inverse-brand: #921108FF; + --pgn-color-btn-focus-bg-outline-brand: #FFFFFFFF; + --pgn-color-btn-focus-bg-inverse-brand: #D23228FF; --pgn-color-btn-focus-bg-brand: #D23228FF; - --pgn-color-btn-focus-border-inverse-primary: #2D494EFF; - --pgn-color-btn-focus-border-outline-primary: #00262BFF; - --pgn-color-btn-focus-text-outline-warning: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-success: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-secondary: #FFFFFFFF; - --pgn-color-btn-focus-text-inverse-secondary: #454545FF; - --pgn-color-btn-focus-text-inverse-outline-primary: #00262BFF; - --pgn-color-btn-focus-text-inverse-primary: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-primary: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-light: #FFFFFFFF; + --pgn-color-btn-focus-border-inverse-outline-brand: #FFFFFFFF; --pgn-color-btn-focus-text-inverse-outline-info: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-info: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-dark: #FFFFFFFF; --pgn-color-btn-focus-text-inverse-dark: #00262BFF; - --pgn-color-btn-focus-text-outline-danger: #FFFFFFFF; --pgn-color-btn-focus-text-inverse-danger: #AB0D02FF; - --pgn-color-btn-focus-text-outline-brand: #FFFFFFFF; + --pgn-color-btn-focus-text-outline-brand: #D23228FF; --pgn-color-btn-focus-text-inverse-brand: #FFFFFFFF; --pgn-color-btn-active-border-outline-warning: #F0CC00FF; --pgn-color-btn-active-border-outline-info: #03C7E8FF; @@ -143,25 +133,33 @@ --pgn-color-btn-active-bg-inverse-outline-dark: #FFFFFFFF; --pgn-color-btn-active-bg-outline-danger: #AB0D02FF; --pgn-color-btn-active-bg-danger: #690E07FF; - --pgn-color-btn-active-bg-inverse-brand: #921108FF; + --pgn-color-btn-active-bg-inverse-brand: #D23228FF; --pgn-color-btn-active-text-inverse-outline-warning: #000000FF; --pgn-color-btn-active-text-outline-warning: #FFFFFFFF; + --pgn-color-btn-active-text-warning: #FFFFFFFF; --pgn-color-btn-active-text-inverse-outline-success: #00262BFF; + --pgn-color-btn-active-text-outline-success: #FFFFFFFF; --pgn-color-btn-active-text-outline-secondary: #FFFFFFFF; --pgn-color-btn-active-text-inverse-outline-primary: #00262BFF; --pgn-color-btn-active-text-inverse-primary: #FFFFFFFF; + --pgn-color-btn-active-text-outline-primary: #FFFFFFFF; --pgn-color-btn-active-text-inverse-outline-light: #00262BFF; --pgn-color-btn-active-text-outline-light: #FFFFFFFF; --pgn-color-btn-active-text-inverse-outline-info: #00262BFF; + --pgn-color-btn-active-text-outline-info: #FFFFFFFF; --pgn-color-btn-active-text-inverse-outline-dark: #00262BFF; + --pgn-color-btn-active-text-outline-dark: #FFFFFFFF; --pgn-color-btn-active-text-inverse-outline-danger: #00262BFF; + --pgn-color-btn-active-text-outline-danger: #FFFFFFFF; + --pgn-color-btn-active-text-inverse-outline-brand: #FFFFFFFF; + --pgn-color-btn-active-text-inverse-brand: #FFFFFFFF; + --pgn-color-btn-active-text-outline-brand: #FFFFFFFF; --pgn-color-btn-hover-border-outline-warning: #F0CC00FF; --pgn-color-btn-hover-border-outline-primary: #00262BFF; --pgn-color-btn-hover-border-primary: #2D494EFF; --pgn-color-btn-hover-border-outline-info: #03C7E8FF; --pgn-color-btn-hover-border-outline-danger: #AB0D02FF; --pgn-color-btn-hover-border-outline-brand: #D23228FF; - --pgn-color-btn-hover-border-brand: #921108FF; --pgn-color-btn-hover-bg-outline-warning: #F0CC00FF; --pgn-color-btn-hover-bg-inverse-tertiary: #2D494EFF; --pgn-color-btn-hover-bg-outline-secondary: #454545FF; @@ -171,9 +169,9 @@ --pgn-color-btn-hover-bg-outline-info: #03C7E8FF; --pgn-color-btn-hover-bg-outline-dark: #00262BFF; --pgn-color-btn-hover-bg-outline-danger: #AB0D02FF; - --pgn-color-btn-hover-bg-inverse-outline-brand: #D23228FF; - --pgn-color-btn-hover-bg-outline-brand: #D23228FF; + --pgn-color-btn-hover-bg-inverse-brand: #921108FF; --pgn-color-btn-hover-text-outline-warning: #FFFFFFFF; + --pgn-color-btn-hover-text-warning: #FFFFFFFF; --pgn-color-btn-hover-text-outline-success: #FFFFFFFF; --pgn-color-btn-hover-text-outline-secondary: #FFFFFFFF; --pgn-color-btn-hover-text-inverse-primary: #FFFFFFFF; @@ -183,10 +181,10 @@ --pgn-color-btn-hover-text-outline-dark: #FFFFFFFF; --pgn-color-btn-hover-text-outline-danger: #FFFFFFFF; --pgn-color-btn-hover-text-inverse-outline-brand: #FFFFFFFF; + --pgn-color-btn-hover-text-inverse-brand: #FFFFFFFF; --pgn-color-btn-hover-text-outline-brand: #FFFFFFFF; --pgn-color-btn-border-outline-warning: #F2F0EFFF; --pgn-color-btn-border-outline-success: #F2F0EFFF; - --pgn-color-btn-border-success: #F2F0EFFF; --pgn-color-btn-border-outline-secondary: #F2F0EFFF; --pgn-color-btn-border-outline-primary: #F2F0EFFF; --pgn-color-btn-border-outline-light: #F2F0EFFF; @@ -203,7 +201,6 @@ --pgn-color-btn-bg-inverse-light: #000000FF; --pgn-color-btn-bg-outline-info: #FFFFFFFF; --pgn-color-btn-bg-info: #03C7E8FF; - --pgn-color-btn-bg-inverse-brand: #D23228FF; --pgn-color-btn-text-warning: #000000FF; --pgn-color-btn-text-light: #000000FF; --pgn-color-btn-text-inverse-info: #03C7E8FF; @@ -238,65 +235,49 @@ --pgn-color-form-input-base: #454545FF; --pgn-color-btn-disabled-border-outline-primary: #F2F0EFFF; --pgn-color-btn-disabled-border-outline-light: #F2F0EFFF; + --pgn-color-btn-disabled-border-inverse-brand: #D23228FF; --pgn-color-btn-disabled-bg-light: #E1DDDBFF; + --pgn-color-btn-disabled-bg-inverse-brand: #D23228FF; --pgn-color-btn-disabled-text-outline-light: #E1DDDBFF; --pgn-color-btn-disabled-text-inverse-info: #03C7E8FF; --pgn-color-btn-disabled-text-outline-dark: #00262BFF; - --pgn-color-btn-focus-bg-inverse-warning: #000000FF; - --pgn-color-btn-focus-bg-outline-warning: #F0CC00FF; - --pgn-color-btn-focus-bg-warning: #F0CC00FF; - --pgn-color-btn-focus-bg-outline-secondary: #454545FF; - --pgn-color-btn-focus-bg-inverse-outline-primary: #FFFFFFFF; - --pgn-color-btn-focus-bg-primary: #2D494EFF; + --pgn-color-btn-disabled-text-outline-brand: #D23228FF; + --pgn-color-btn-focus-outline-outline-light: #E1DDDBFF; --pgn-color-btn-focus-bg-inverse-light: #000000FF; - --pgn-color-btn-focus-bg-outline-light: #E1DDDBFF; - --pgn-color-btn-focus-bg-light: #E1DDDBFF; - --pgn-color-btn-focus-bg-outline-info: #03C7E8FF; - --pgn-color-btn-focus-bg-info: #03C7E8FF; - --pgn-color-btn-focus-bg-outline-dark: #00262BFF; - --pgn-color-btn-focus-bg-outline-danger: #AB0D02FF; - --pgn-color-btn-focus-border-outline-secondary: #454545FF; - --pgn-color-btn-focus-border-inverse-outline-primary: #FFFFFFFF; --pgn-color-btn-focus-border-primary: #2D494EFF; - --pgn-color-btn-focus-border-inverse-outline-brand: #D23228FF; - --pgn-color-btn-focus-border-inverse-brand: #921108FF; - --pgn-color-btn-focus-border-outline-brand: #D23228FF; - --pgn-color-btn-focus-text-warning: #000000FF; + --pgn-color-btn-focus-border-inverse-brand: #D23228FF; + --pgn-color-btn-focus-border-outline-brand: #F2F0EFFF; --pgn-color-btn-focus-text-tertiary: #454545FF; --pgn-color-btn-focus-text-light: #000000FF; --pgn-color-btn-active-border-outline-success: #0D7D4DFF; --pgn-color-btn-active-border-outline-secondary: #454545FF; --pgn-color-btn-active-border-outline-light: #E1DDDBFF; --pgn-color-btn-active-border-danger: #690E07FF; + --pgn-color-btn-active-border-brand: #93231CFF; --pgn-color-btn-active-bg-outline-success: #0D7D4DFF; --pgn-color-btn-active-bg-inverse-outline-light: #FDFDFDFF; + --pgn-color-btn-active-bg-brand: #93231CFF; --pgn-color-btn-active-text-light: #000000FF; --pgn-color-btn-hover-border-outline-success: #0D7D4DFF; --pgn-color-btn-hover-border-outline-light: #E1DDDBFF; --pgn-color-btn-hover-bg-outline-success: #0D7D4DFF; --pgn-color-btn-hover-bg-inverse-outline-primary: #FFFFFFFF; --pgn-color-btn-hover-bg-outline-light: #E1DDDBFF; + --pgn-color-btn-hover-bg-inverse-outline-brand: #D23228FF; + --pgn-color-btn-hover-bg-outline-brand: #D23228FF; --pgn-color-btn-hover-text-light: #000000FF; --pgn-color-btn-border-inverse-outline-primary: #707070FF; + --pgn-color-btn-bg-inverse-brand: #D23228FF; --pgn-color-input-btn-focus: #00262BFF; --pgn-color-btn-disabled-border-inverse-outline-primary: #707070FF; --pgn-color-btn-disabled-text-inverse-warning: #D6B600FF; --pgn-color-btn-disabled-text-outline-warning: #D6B600FF; --pgn-color-btn-disabled-text-inverse-success: #0D7D4DFF; --pgn-color-btn-disabled-text-outline-success: #0D7D4DFF; - --pgn-color-btn-focus-outline-outline-light: #E1DDDBFF; - --pgn-color-btn-focus-bg-outline-success: #0D7D4DFF; --pgn-color-btn-focus-bg-success: #0D7D4DFF; - --pgn-color-btn-focus-border-outline-warning: #F0CC00FF; - --pgn-color-btn-focus-border-outline-light: #E1DDDBFF; --pgn-color-btn-focus-border-light: #E1DDDBFF; - --pgn-color-btn-focus-border-outline-info: #03C7E8FF; - --pgn-color-btn-focus-border-outline-dark: #00262BFF; - --pgn-color-btn-focus-border-outline-danger: #AB0D02FF; - --pgn-color-btn-focus-text-inverse-warning: #D6B600FF; --pgn-color-btn-focus-text-inverse-success: #0D7D4DFF; --pgn-color-theme-focus-secondary: #373737FF; - --pgn-color-btn-focus-border-outline-success: #0D7D4DFF; --pgn-color-btn-focus-border-success: #0D7D4DFF; --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23AB0D02FF' viewBox='2 2 20 20'%3e%3cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M13.25,15.5 L10.75,15.5 C10.6119288,15.5 10.5,15.6119288 10.5,15.75 L10.5,15.75 L10.5,18.25 C10.5,18.3880712 10.6119288,18.5 10.75,18.5 L10.75,18.5 L13.25,18.5 C13.3880712,18.5 13.5,18.3880712 13.5,18.25 L13.5,18.25 L13.5,15.75 C13.5,15.6119288 13.3880712,15.5 13.25,15.5 L13.25,15.5 Z M13.492539,5.5 L10.5001113,5.50010806 C10.3620998,5.50416722 10.2535099,5.61933826 10.2575691,5.75734976 L10.2575691,5.75734976 L10.4928632,13.7573498 C10.4968382,13.8925005 10.607546,14 10.7427552,14 L10.7427552,14 L13.2572448,14 C13.392454,14 13.5031618,13.8925005 13.5071368,13.7573498 L13.5071368,13.7573498 L13.7424309,5.75734976 L13.7424309,5.75734976 C13.742539,5.61192881 13.6306101,5.5 13.492539,5.5 L13.492539,5.5 Z' /%3e%3c/svg%3E"); --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3e%3cpath fill='%230D7D4DFF' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M17.5208153,8.03553391 L10.4497475,15.1066017 L6.91421356,11.5710678 L5.5,12.9852814 L10.4497475,17.9350288 L18.9350288,9.44974747 L17.5208153,8.03553391 Z'/%3e%3c/svg%3e"); diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json index a95f7bf2..c7918f6f 100644 --- a/tokens/src/core/components/Popover.json +++ b/tokens/src/core/components/Popover.json @@ -2,7 +2,7 @@ "size": { "popover": { "border": { - "width": { "value": "0" } + "width": { "value": "0px" } } } } diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json index 3532728c..b7df6667 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -5,7 +5,7 @@ "inverse-brand": { "value": "{color.white}" } }, "bg": { - "inverse-brand": { "value": "{color.brand.base}", "modify": null } + "inverse-brand": { "value": "{color.brand.500}", "modify": null } }, "border": { "brand": { "value": "transparent" }, @@ -14,57 +14,69 @@ }, "hover": { "text": { + "inverse-brand": { "value": "{color.white}", "modify": null }, "outline-brand": { "value": "{color.white}" }, "inverse-outline-brand": { "value": "{color.white}" } }, "bg": { - "outline-brand": { "value": "{color.brand.base}" }, - "inverse-outline-brand": { "value": "{color.brand.base}" } + "inverse-brand": { "value": "{color.brand.700}", "modify": null }, + "outline-brand": { "value": "{color.brand.500}" }, + "inverse-outline-brand": { "value": "{color.brand.500}" } }, "border": { - "brand": { "value": "{color.brand.700}" }, "outline-brand": { "value": "{color.brand.base}" } } }, "active": { "text": { - "inverse-brand": { "modify": null } + "outline-brand": { "value": "{color.white}", "modify": null }, + "inverse-brand": { "value": "{color.white}", "modify": null }, + "inverse-outline-brand": { "value": "{color.white}", "modify": null } }, "border": { + "brand": { "value": "{color.brand.900}" }, "outline-brand": { "value": "{color.brand.base}" } }, "bg": { - "inverse-brand": { "value": "{color.brand.700}" } + "brand": { "value": "{color.brand.900}" }, + "inverse-brand": { "value": "{color.brand.base}" } } }, "focus": { "text": { "inverse-brand": { "value": "{color.white}" }, - "outline-brand": { "value": "{color.white}" } + "outline-brand": { "value": "{color.brand.base}" } }, "bg": { "brand": { "value": "{color.brand.base}" }, - "inverse-brand": { "value": "{color.brand.700}" }, - "outline-brand": { "value": "{color.brand.base}" }, - "inverse-outline-brand": { "value": "{color.brand.base}" } + "inverse-brand": { "value": "{color.brand.base}" }, + "outline-brand": { "value": "{color.white}" }, + "inverse-outline-brand": { "value": "transparent" } }, "border": { - "outline-brand": { "value": "{color.btn.focus.bg.outline-brand}" }, + "outline-brand": { "value": "{color.btn.border.outline-brand}" }, "inverse-brand": { "value": "{color.btn.focus.bg.inverse-brand}" }, - "inverse-outline-brand": { "value": "{color.btn.focus.bg.inverse-outline-brand}" } + "inverse-outline-brand": { "value": "{color.white}" } }, "outline": { - "inverse-brand": { "value": "{color.white}" }, + "brand": { "value": "{color.brand.base}" }, + "outline-brand": { "value": "{color.brand.base}" }, + "inverse-brand": { "value": "{color.brand.base}" }, "inverse-outline-brand": { "value": "{color.white}" } } }, "disabled": { "text": { - "outline-brand": { "value": "{color.brand.base}" }, + "outline-brand": { "value": "{color.brand.500}" }, + "inverse-brand": { "value": "{color.white}" }, "inverse-outline-brand": { "value": "{color.light.300}" } }, "border": { - "outline-brand": { "value": "{color.light.300}" } + "outline-brand": { "value": "{color.light.300}" }, + "inverse-brand": { "value": "{color.brand.500}" } + }, + "bg": { + "inverse-brand": { "value": "{color.brand.500}" } } } } diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json index 4c674362..a6456e15 100644 --- a/tokens/src/themes/light/components/Button/danger.json +++ b/tokens/src/themes/light/components/Button/danger.json @@ -18,6 +18,7 @@ }, "active": { "text": { + "outline-danger": { "value": "{color.white}", "modify": null }, "inverse-outline-danger": { "value": "{color.primary.base}", "modify": null } }, "bg": { @@ -31,16 +32,11 @@ }, "focus": { "text": { - "inverse-danger": { "value": "{color.red}" }, - "outline-danger": { "value": "{color.white}" } + "inverse-danger": { "value": "{color.red}" } }, "bg": { "danger": { "value": "{color.red}" }, - "outline-danger": { "value": "{color.btn.active.bg.outline-danger}" }, - "inverse-danger": { "value": "{color.gray.100}" } - }, - "border": { - "outline-danger": { "value": "{color.btn.focus.bg.outline-danger}" } + "outline-danger": { "value": "{color.white}" } } }, "disabled": { diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json index daf2e7b8..c3febce1 100644 --- a/tokens/src/themes/light/components/Button/dark.json +++ b/tokens/src/themes/light/components/Button/dark.json @@ -6,6 +6,7 @@ "inverse-outline-dark": { "value": "{color.white}" } }, "text": { + "outline-dark": { "value": "{color.white}", "modify": null }, "inverse-outline-dark": { "value": "{color.primary.base}", "modify": null } } }, @@ -22,16 +23,11 @@ }, "focus": { "text": { - "inverse-dark": { "value": "{color.dark.base}" }, - "outline-dark": { "value": "{color.white}" } + "inverse-dark": { "value": "{color.dark.base}" } }, "bg": { - "dark": { "value": "{color.dark.base}" }, - "outline-dark": { "value": "{color.btn.hover.bg.outline-dark}" }, + "outline-dark": { "value": "{color.white}" }, "inverse-dark": { "value": "{color.white}" } - }, - "border": { - "outline-dark": { "value": "{color.btn.focus.bg.outline-dark}" } } }, "disabled": { diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json index 0d1de29e..338b965b 100644 --- a/tokens/src/themes/light/components/Button/info.json +++ b/tokens/src/themes/light/components/Button/info.json @@ -26,6 +26,7 @@ }, "active": { "text": { + "outline-info": { "value": "{color.white}", "modify": null }, "inverse-outline-info": { "value": "{color.primary.base}", "modify": null } }, "bg": { @@ -37,16 +38,11 @@ }, "focus": { "text": { - "inverse-outline-info": { "value": "{color.white}" }, - "outline-info": { "value": "{color.white}" } + "inverse-outline-info": { "value": "{color.white}" } }, "bg": { - "info": { "value": "{color.btn.bg.info}" }, - "outline-info": { "value": "{color.btn.active.bg.outline-info}" }, + "outline-info": { "value": "{color.white}" }, "inverse-info": { "value": "{color.white}" } - }, - "border": { - "outline-info": { "value": "{color.btn.focus.bg.outline-info}" } } }, "disabled": { diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json index d91497e4..f115027a 100644 --- a/tokens/src/themes/light/components/Button/light.json +++ b/tokens/src/themes/light/components/Button/light.json @@ -38,20 +38,16 @@ }, "focus": { "text": { - "light": { "value": "{color.btn.text.light}", "modify": null }, - "outline-light": { "value": "{color.white}" } + "light": { "value": "{color.btn.text.light}", "modify": null } }, "border": { - "light": { "value": "{color.btn.focus.bg.light}" }, - "outline-light": { "value": "{color.btn.focus.bg.outline-light}" } + "light": { "value": "{color.btn.focus.bg.light}" } }, "bg": { - "light": { "value": "{color.theme.bg.light}" }, - "outline-light": { "value": "{color.theme.bg.light}" }, "inverse-light": { "value": "{color.btn.bg.inverse-light}" } }, "outline": { - "outline-light": { "value": "{color.btn.focus.bg.outline-light}" } + "outline-light": { "value": "{color.theme.bg.light}" } } }, "disabled": { diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index 484e8846..eb7cf6f4 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -26,6 +26,7 @@ }, "active": { "text": { + "outline-primary": { "value": "{color.white}", "modify": null }, "inverse-primary": { "value": "{color.white}", "modify": null }, "inverse-outline-primary": { "value": "{color.primary.base}", "modify": null } }, @@ -35,22 +36,8 @@ } }, "focus": { - "text": { - "outline-primary": { "value": "{color.white}" }, - "inverse-primary": { "value": "{color.white}" }, - "inverse-outline-primary": { "value": "{color.primary.base}" } - }, - "bg": { - "primary": { "value": "{color.btn.hover.bg.primary}" }, - "outline-primary": { "value": "{color.primary.base}" }, - "inverse-primary": { "value": "{color.primary.300}" }, - "inverse-outline-primary": { "value": "{color.btn.active.bg.inverse-outline-primary}" } - }, "border": { - "primary": { "value": "{color.btn.hover.bg.primary}" }, - "outline-primary": { "value": "{color.primary.base}" }, - "inverse-primary": { "value": "{color.primary.300}" }, - "inverse-outline-primary": { "value": "{color.btn.active.bg.inverse-outline-primary}" } + "primary": { "value": "{color.btn.hover.bg.primary}" } }, "outline": { "inverse-primary": { "value": "{color.white}" }, diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json index b1d1c287..37cb1737 100644 --- a/tokens/src/themes/light/components/Button/secondary.json +++ b/tokens/src/themes/light/components/Button/secondary.json @@ -27,20 +27,6 @@ "outline-secondary": { "value": "{color.btn.active.bg.outline-secondary}" } } }, - "focus": { - "text": { - "inverse-secondary": { "value": "{color.gray.700}" }, - "outline-secondary": { "value": "{color.white}" } - }, - "bg": { - "secondary": { "value": "{color.gray.700}" }, - "outline-secondary": { "value": "{color.btn.active.bg.outline-secondary}" }, - "inverse-secondary": { "value": "{color.white}", "modify": null } - }, - "border": { - "outline-secondary": { "value": "{color.btn.active.bg.outline-secondary}" } - } - }, "disabled": { "text": { "outline-secondary": { "value": "{color.gray.700}" } diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json index f6ca4539..2eeccdef 100644 --- a/tokens/src/themes/light/components/Button/success.json +++ b/tokens/src/themes/light/components/Button/success.json @@ -2,7 +2,6 @@ "color": { "btn": { "border": { - "success": { "value": "{color.light.300}" }, "outline-success": { "value": "{color.light.300}" } }, "hover": { @@ -24,22 +23,21 @@ "outline-success": { "value": "{color.success.base}" } }, "text": { + "outline-success": { "value": "{color.white}", "modify": null }, "inverse-outline-success": { "value": "{color.primary.base}", "modify": null } } }, "focus": { "text": { - "outline-success": { "value": "{color.white}" }, "inverse-success": { "value": "{color.btn.text.inverse-success}" } }, "bg": { "success": { "value": "{color.btn.bg.success}" }, - "outline-success": { "value": "{color.btn.bg.success}" }, + "outline-success": { "value": "{color.white}" }, "inverse-success": { "value": "{color.white}" } }, "border": { - "success": { "value": "{color.btn.focus.bg.success}" }, - "outline-success": { "value": "{color.btn.focus.bg.outline-success}" } + "success": { "value": "{color.btn.focus.bg.success}" } } }, "disabled": { diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json index 4088382f..4bf37eba 100644 --- a/tokens/src/themes/light/components/Button/warning.json +++ b/tokens/src/themes/light/components/Button/warning.json @@ -14,6 +14,7 @@ }, "hover": { "text": { + "warning": { "value": "{color.white}", "modify": null }, "outline-warning": { "value": "{color.white}" } }, "bg": { @@ -25,6 +26,7 @@ }, "active": { "text": { + "warning": { "value": "{color.white}", "modify": null }, "outline-warning": { "value": "{color.white}", "modify": null }, "inverse-outline-warning": { "value": "{color.black}", "modify": null } }, @@ -36,18 +38,8 @@ } }, "focus": { - "text": { - "warning": { "value": "{color.btn.text.warning}" }, - "outline-warning": { "value": "{color.white}" }, - "inverse-warning": { "value": "{color.btn.text.inverse-warning}" } - }, "bg": { - "warning": { "value": "{color.btn.bg.warning}" }, - "outline-warning": { "value": "{color.btn.hover.bg.outline-warning}" }, - "inverse-warning": { "value": "{color.btn.bg.inverse-warning}" } - }, - "border": { - "outline-warning": { "value": "{color.btn.focus.bg.outline-warning}" } + "outline-warning": { "value": "{color.white}" } } }, "disabled": { diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json new file mode 100644 index 00000000..c3d189c8 --- /dev/null +++ b/tokens/src/themes/light/components/IconButton.json @@ -0,0 +1,13 @@ +{ + "color": { + "icon-button": { + "bg": { + "primary": { + "inverse-active": { + "base": { "value": "{color.white}", "type": "color" } + } + } + } + } + } +}