From 666116b3a6b6ead5744ede79f36cc929609c0b45 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 15 Nov 2023 10:39:13 +0200 Subject: [PATCH 1/5] refactor: created missing design tokens --- styles/css/core/variables.css | 11 +++++------ styles/css/themes/light/variables.css | 16 ++++++++-------- tokens/src/core/components/Card.json | 2 +- tokens/src/core/components/Carousel.json | 4 ++-- tokens/src/core/components/DataTable.json | 2 +- tokens/src/core/components/Modal.json | 2 +- tokens/src/core/components/ProgressBar.json | 5 ----- tokens/src/themes/light/components/Dropdown.json | 7 ++++++- .../src/themes/light/components/Form/color.json | 4 ++-- tokens/src/themes/light/components/Popover.json | 2 +- .../src/themes/light/components/ProductTour.json | 4 ++-- 11 files changed, 29 insertions(+), 30 deletions(-) diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 7110e2e371..5ca60f736c 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 22 Sep 2023 08:20:17 GMT + * Generated on Wed, 15 Nov 2023 08:37:46 GMT */ :root { @@ -26,7 +26,6 @@ --pgn-elevation-tooltip-zindex: 1070; --pgn-elevation-sheet-zindex-main: 1032; --pgn-elevation-sheet-zindex-backdrop: 1031; - --pgn-elevation-progress-bar-box-shadow: none; --pgn-elevation-product-tour-checkpoint-zindex: 1060; --pgn-elevation-popover-zindex: 1060; --pgn-elevation-modal-zindex: 1050; @@ -208,7 +207,7 @@ --pgn-spacing-dropdown-padding-x-base: 0; --pgn-spacing-dropdown-spacer: .125rem; --pgn-spacing-data-table-footer-position: center; - --pgn-spacing-data-table-padding-cell: .75rem; + --pgn-spacing-data-table-padding-cell: .5rem .75rem; --pgn-spacing-data-table-padding-small: .5rem; --pgn-spacing-data-table-padding-y: .75rem; --pgn-spacing-data-table-padding-x: .75rem; @@ -316,7 +315,7 @@ --pgn-size-nav-tabs-border-width: 2px; --pgn-size-nav-tabs-link-border-bottom-width: .188rem; --pgn-size-nav-pills-link-border-width: 1px; - --pgn-size-modal-content-border-width: 0px; + --pgn-size-modal-content-border-width: 0; --pgn-size-modal-sm: 400px; --pgn-size-modal-md: 500px; --pgn-size-modal-lg: 800px; @@ -371,14 +370,13 @@ --pgn-size-chip-icon: 1.25rem; --pgn-size-chip-border-radius: .25rem; --pgn-size-carousel-caption-width: 70%; - --pgn-size-carousel-indicator-height-area-hit: 3px; + --pgn-size-carousel-indicator-height-area-hit: 10px; --pgn-size-carousel-indicator-height-base: 3px; --pgn-size-carousel-indicator-width: 30px; --pgn-size-carousel-control-width-icon: 20px; --pgn-size-carousel-control-width-base: 15%; --pgn-size-card-logo-height: 4.125rem; --pgn-size-card-logo-width: 7.25rem; - --pgn-size-card-image-border-radius: .3125rem; --pgn-size-card-image-vertical-max-height: 140px; --pgn-size-card-image-horizontal-width-max: 240px; --pgn-size-card-focus-border-width: 2px; @@ -588,6 +586,7 @@ --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border)); --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border)); --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)); + --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base); --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width); --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 849c47ba82..bf247d7069 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/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 Mon, 30 Oct 2023 14:36:05 GMT + * Generated on Wed, 15 Nov 2023 08:37:46 GMT */ :root { @@ -225,6 +225,7 @@ --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-elevation-progress-bar-box-shadow: none; --pgn-elevation-image-thumbnail-box-shadow: none; --pgn-elevation-icon-button-box-shadow-black-inverse-active: none; --pgn-elevation-icon-button-box-shadow-black-active: none; @@ -259,7 +260,6 @@ --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15); --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-elevation-progress-bar-box-shadow: none; --pgn-elevation-popover-box-shadow: none; --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); --pgn-elevation-dropdown-box-shadow: none; @@ -343,6 +343,8 @@ --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a); --pgn-color-progress-bar-bar-base: var(--pgn-color-white); --pgn-color-product-tour-checkpoint-box-shadow: #0000004D; + --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base); + --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base); --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700); --pgn-color-popover-arrow-outer: #0000000D; --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF; @@ -453,11 +455,12 @@ --pgn-color-body-base: var(--pgn-color-gray-700); --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300); --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100); + --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580; --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700); --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100); --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100); --pgn-color-form-input-base: var(--pgn-color-gray-700); - --pgn-color-dropdown-link-hover-base: var(--pgn-color-gray-900); + --pgn-color-dropdown-link-hover-base: #000000FF; --pgn-color-dropdown-link-base: var(--pgn-color-gray-900); --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100); --pgn-color-dropdown-border: #00000026; @@ -711,8 +714,6 @@ --pgn-color-search-field-border-base: var(--pgn-color-gray-500); --pgn-color-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); --pgn-color-progress-bar-border: var(--pgn-color-gray-500); - --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-500); - --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-500); --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300); --pgn-color-popover-body: var(--pgn-color-body-base); --pgn-color-popover-header-text: var(--pgn-color-headings-base); @@ -905,8 +906,6 @@ --pgn-color-form-control-select-base: var(--pgn-color-form-input-base); --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base); --pgn-color-form-control-indicator-active-base: var(--pgn-color-active); - --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-primary-500); - --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580; --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base); --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base); --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled); @@ -1178,7 +1177,7 @@ --pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error); --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg); - --pgn-color-popover-danger-icon: var(--pgn-color-warning-500); + --pgn-color-popover-danger-icon: var(--pgn-color-danger-500); --pgn-color-popover-danger-bg: var(--pgn-color-danger-100); --pgn-color-popover-warning-icon: var(--pgn-color-warning-500); --pgn-color-popover-warning-bg: var(--pgn-color-warning-100); @@ -1480,6 +1479,7 @@ --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-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base); --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); diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index de2fdddb01..ebad10d279 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -71,7 +71,7 @@ "vertical": { "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" } }, - "border-radius": { "value": ".3125rem", "type": "dimension", "source": "$card-image-border-radius" } + "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" } }, "logo": { "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" }, diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json index 9e4e528837..26343bc957 100644 --- a/tokens/src/core/components/Carousel.json +++ b/tokens/src/core/components/Carousel.json @@ -11,7 +11,7 @@ "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" }, "height": { "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" }, - "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" } + "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" } } }, "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" } @@ -27,7 +27,7 @@ "base": { "value": "transform {transition.carousel.duration} ease-in-out", "type": "transition", - "source": "$carousel-transition-duration" + "source": "$carousel-transition" }, "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" }, "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" }, diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json index 6e66c1edd7..b6371f8d2c 100644 --- a/tokens/src/core/components/DataTable.json +++ b/tokens/src/core/components/DataTable.json @@ -19,7 +19,7 @@ "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" }, "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" }, "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" }, - "cell": { "value": ".75rem", "type": "dimension", "source": "$data-table-cell-padding" } + "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" } }, "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" } } diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json index a8322e6484..d54cb29e42 100644 --- a/tokens/src/core/components/Modal.json +++ b/tokens/src/core/components/Modal.json @@ -12,7 +12,7 @@ "md": { "value": "500px", "type": "dimension", "source": "$modal-md" }, "sm": { "value": "400px", "type": "dimension", "source": "$modal-sm" }, "content-border": { - "width": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" }, + "width": { "value": "0", "type": "dimension", "source": "$modal-content-border-width" }, "radius": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius" } diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json index 299edaae47..82a0626871 100644 --- a/tokens/src/core/components/ProgressBar.json +++ b/tokens/src/core/components/ProgressBar.json @@ -19,11 +19,6 @@ "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" } } }, - "elevation": { - "progress-bar": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" } - } - }, "spacing": { "progress-bar": { "hint": { diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json index 088debae77..bf2f03a253 100644 --- a/tokens/src/themes/light/components/Dropdown.json +++ b/tokens/src/themes/light/components/Dropdown.json @@ -17,7 +17,12 @@ "link": { "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" }, "hover": { - "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" }, + "base": { + "value": "{color.gray.900}", + "type": "color", + "source": "$dropdown-link-hover-color", + "modify": [{ "type": "darken", "amount": 0.5 }] + }, "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" } }, "active": { diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json index 65372f87bc..9568b4d677 100644 --- a/tokens/src/themes/light/components/Form/color.json +++ b/tokens/src/themes/light/components/Form/color.json @@ -49,7 +49,7 @@ "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg" }, "disabled": { - "value": "{color.primary.500}", + "value": "{color.primary.base}", "type": "color", "source": "$custom-control-indicator-checked-disabled-bg", "modify": [{ "type": "alpha", "amount": 0.5 }] @@ -57,7 +57,7 @@ }, "border": { "base": { - "value": "{color.primary.500}", + "value": "{color.form.control.indicator.checked.base}", "type": "color", "source": "$custom-control-indicator-checked-border-color" }, diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json index 013ce92c0b..3ba213c768 100644 --- a/tokens/src/themes/light/components/Popover.json +++ b/tokens/src/themes/light/components/Popover.json @@ -39,7 +39,7 @@ }, "danger": { "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" }, - "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-danger-icon-color" } + "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" } } } }, diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json index 0c0181ab60..4814f474f5 100644 --- a/tokens/src/themes/light/components/ProductTour.json +++ b/tokens/src/themes/light/components/ProductTour.json @@ -4,8 +4,8 @@ "checkpoint": { "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" }, "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" }, - "border": { "value": "{color.brand.500}", "type": "color", "source": "$checkpoint-border-color" }, - "breadcrumb": { "value": "{color.primary.500}", "type": "color", "source": "$checkpoint-breadcrumb-color" }, + "border": { "value": "{color.brand.base}", "type": "color", "source": "$checkpoint-border-color" }, + "breadcrumb": { "value": "{color.primary.base}", "type": "color", "source": "$checkpoint-breadcrumb-color" }, "box-shadow": { "value": "{color.black}", "type": "color", From 5e60d7d782a3ad48c2f7018b957a491d88f9918a Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 15 Nov 2023 21:17:55 +0200 Subject: [PATCH 2/5] refactor: added missing tokens for the Nav component --- src/Nav/index.scss | 18 ++++++------ styles/css/core/variables.css | 4 +-- styles/css/themes/light/variables.css | 17 +++++++---- tokens/src/core/components/Nav.json | 2 +- tokens/src/themes/light/components/Nav.json | 31 +++++++++++++++++---- 5 files changed, 50 insertions(+), 22 deletions(-) diff --git a/src/Nav/index.scss b/src/Nav/index.scss index 7cf2750bda..7257f889b3 100644 --- a/src/Nav/index.scss +++ b/src/Nav/index.scss @@ -55,7 +55,7 @@ .nav-item.show .nav-link { color: var(--pgn-color-nav-pills-base-link-active-text); background-color: var(--pgn-color-nav-pills-base-link-active-bg); - border-color: var(--pgn-color-primary-base); + border-color: var(--pgn-color-nav-pills-base-link-active-border); &:focus { // stylelint-disable-next-line max-line-length @@ -104,9 +104,9 @@ background-color: var(--pgn-color-white); &:hover { - // background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-hover); + background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover); color: var(--pgn-color-nav-pills-inverse-link-text-active-focus); - // border-color: $nav-inverse-pills-link-active-focus-hover-border-color; + border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover); } } } @@ -122,7 +122,7 @@ border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom); .dropdown .dropdown-toggle { - border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent; + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border); &:hover { border-bottom: none; @@ -156,14 +156,14 @@ } .nav-tabs { - border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border); + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base); button.nav-link { border: none; border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border); &.disabled { - border-color: transparent; + border-color: var(--pgn-color-nav-tabs-base-link-disabled-border); } } @@ -181,14 +181,14 @@ } &:focus { - border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent; + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus); @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus)); } &.disabled { color: var(--pgn-color-nav-link-text-disabled); - background-color: transparent; + background-color: var(--pgn-color-nav-tabs-base-text-disabled); } } @@ -238,7 +238,7 @@ .nav-button-group { .nav-link { - border: solid 1px var(--pgn-color-nav-tabs-base-border); + border: solid 1px var(--pgn-color-nav-tabs-base-border-base); &:first-child { @include border-left-radius(var(--pgn-size-nav-pills-border-radius)); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 5ca60f736c..b4c61fa21c 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Wed, 15 Nov 2023 08:37:46 GMT + * Generated on Wed, 15 Nov 2023 19:14:34 GMT */ :root { @@ -156,7 +156,7 @@ --pgn-spacing-navbar-toggler-padding-x: .75rem; --pgn-spacing-navbar-toggler-padding-y: .25rem; --pgn-spacing-navbar-padding-x-nav-link: .5rem; - --pgn-spacing-nav-link-distance-to-border: .313rem; + --pgn-spacing-nav-link-distance-to-border: 4px; --pgn-spacing-nav-link-padding-x: 1rem; --pgn-spacing-nav-link-padding-y: .5rem; --pgn-spacing-modal-dialog-margin: 1.5rem; diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index bf247d7069..f045deb1d3 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/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 Wed, 15 Nov 2023 08:37:46 GMT + * Generated on Wed, 15 Nov 2023 19:49:28 GMT */ :root { @@ -37,6 +37,7 @@ --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066; --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000; --pgn-color-nav-tabs-base-link-active-bg: #00000000; + --pgn-color-nav-tabs-base-bg-hover: #00000000; --pgn-color-nav-link-border: #00000000; --pgn-color-menu-item-bg: #00000000; --pgn-color-icon-button-text-primary-inverse-active-hover: #000000FF; @@ -376,8 +377,14 @@ --pgn-color-nav-light: #00000080; --pgn-color-nav-dark: #FFFFFF80; --pgn-color-nav-divider: var(--pgn-color-gray-100); + --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base); --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white); + --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white); + --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover); --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white); + --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border); + --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover); + --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover); --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300); --pgn-color-nav-link-text-base: var(--pgn-color-gray-700); --pgn-color-modal-backdrop-bg: var(--pgn-color-black); @@ -729,7 +736,7 @@ --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base); --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base); --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base); - --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-nav-pills-inverse-link-text-base); + --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus); --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base); --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300); --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base); @@ -743,7 +750,7 @@ --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300); --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500); --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400); - --pgn-color-nav-tabs-base-border: var(--pgn-color-light-400); + --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400); --pgn-color-modal-content-bg: var(--pgn-color-bg-base); --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500); --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary); @@ -1125,7 +1132,7 @@ --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow); --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text); - --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border); + --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base); --pgn-color-action-default-danger-900: #60161DFF; --pgn-color-action-default-danger-800: #691820FF; --pgn-color-action-default-danger-700: #731A22FF; @@ -1193,7 +1200,7 @@ --pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base); --pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base); --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active); - --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border); + --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base); --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active); --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom); --pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary); diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json index e711b384b5..d6a9244578 100644 --- a/tokens/src/core/components/Nav.json +++ b/tokens/src/core/components/Nav.json @@ -45,7 +45,7 @@ "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" }, "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" } }, - "distance-to-border": { "value": ".313rem", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" } + "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" } }, "divider": { "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" } diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json index baf3d19c4b..074eae400c 100644 --- a/tokens/src/themes/light/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -9,7 +9,7 @@ "source": "$nav-tabs-link-active-border-color" }, "hover": { - "value": "transparent transparent {color.nav.tabs.base.border}", + "value": "transparent transparent {color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-tabs-link-hover-border-color" }, @@ -33,7 +33,16 @@ }, "tabs": { "base": { - "border": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" }, + "text": { + "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" } + }, + "bg": { + "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" } + }, + "border": { + "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" }, + "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" } + }, "link": { "hover": { "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" } @@ -41,6 +50,9 @@ "active": { "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" }, "bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" } + }, + "disabled": { + "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" } } } }, @@ -64,6 +76,9 @@ } }, "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" } + }, + "dropdown": { + "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" } } } }, @@ -72,9 +87,10 @@ "link": { "active": { "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" } + "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" }, + "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" } }, - "border": { "value": "{color.nav.tabs.base.border}", "type": "color", "source": "$nav-pills-link-border-color" } + "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" } } }, "inverse": { @@ -104,9 +120,14 @@ "source": "$nav-inverse-pills-link-active-hover-border-color" }, "active-focus": { - "value": "{color.nav.pills.inverse.link.text.base}", + "value": "{color.primary.base}", "type": "color", "source": "$nav-inverse-pills-link-active-focus-border-color" + }, + "focus-hover": { + "value": "{color.nav.pills.inverse.link.border.active-focus}", + "type": "color", + "source": "$nav-inverse-pills-link-active-focus-hover-border-color" } }, "bg": { From 48ef3d08cfc2e6036936af8f2f0888bd01250ea9 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 15 Nov 2023 22:21:47 +0200 Subject: [PATCH 3/5] refactor: added missing tokens for the Tabs component --- src/Tabs/index.scss | 8 ++++++++ styles/css/core/variables.css | 3 ++- styles/css/themes/light/variables.css | 3 ++- tokens/src/core/components/Tab.json | 3 ++- tokens/src/themes/light/components/Tab.json | 9 ++++++++- 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/Tabs/index.scss b/src/Tabs/index.scss index 8c7e3133e9..3c21b7a2fd 100644 --- a/src/Tabs/index.scss +++ b/src/Tabs/index.scss @@ -79,6 +79,14 @@ color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover); background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover); } + + &:focus { + @include nav-tabs-link-focus( + var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus), + var(--pgn-size-nav-tabs-border-radius), + var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance) + ); + } } } diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index b4c61fa21c..6283d072cc 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Wed, 15 Nov 2023 19:14:34 GMT + * Generated on Wed, 15 Nov 2023 20:16:06 GMT */ :root { @@ -128,6 +128,7 @@ --pgn-spacing-toast-container-gutter-lg: 1.25rem; --pgn-spacing-toast-padding-y: .25rem; --pgn-spacing-toast-padding-x: .75rem; + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem; --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index f045deb1d3..5ad6802879 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/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 Wed, 15 Nov 2023 19:49:28 GMT + * Generated on Wed, 15 Nov 2023 20:16:06 GMT */ :root { @@ -708,6 +708,7 @@ --pgn-color-secondary-200: #D1D1D1FF; --pgn-color-secondary-100: #F4F4F4FF; --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base); + --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300); --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500); diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json index ae4ffe14a0..4413acf5da 100644 --- a/tokens/src/core/components/Tab.json +++ b/tokens/src/core/components/Tab.json @@ -11,7 +11,8 @@ }, "inverse-tabs-link-dropdown-toggle": { "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" }, - "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" } + "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" }, + "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" } } } } diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json index 5f3f1bbf4f..b8647e01c7 100644 --- a/tokens/src/themes/light/components/Tab.json +++ b/tokens/src/themes/light/components/Tab.json @@ -48,8 +48,15 @@ "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg" } + }, + "border": { + "focus": { + "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", + "type": "color", + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color" + } } } } } -} \ No newline at end of file +} From 84e8dd10dc5d5e26c1c15e76de41256108915cce Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 15 Nov 2023 22:39:24 +0200 Subject: [PATCH 4/5] refactor: added missing tokens for the Breadcrumbs component --- styles/css/themes/light/variables.css | 3 +-- tokens/src/themes/light/components/Breadcrumb.json | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 5ad6802879..52aa1792f0 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/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 Wed, 15 Nov 2023 20:16:06 GMT + * Generated on Wed, 15 Nov 2023 20:38:34 GMT */ :root { @@ -562,7 +562,6 @@ --pgn-color-bubble-text-warning: var(--pgn-color-white); --pgn-color-bubble-text-success: var(--pgn-color-white); --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white); - --pgn-color-breadcrumb-divider: var(--pgn-color-gray-600); --pgn-color-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-color-badge-bg-dark: var(--pgn-color-dark-base); --pgn-color-badge-bg-light: var(--pgn-color-light-base); diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json index eb64650215..e49229d148 100644 --- a/tokens/src/themes/light/components/Breadcrumb.json +++ b/tokens/src/themes/light/components/Breadcrumb.json @@ -3,7 +3,6 @@ "breadcrumb": { "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" }, "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" }, - "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" }, "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" }, "inverse": { "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" }, From b3ee550119e9eff610941e568d334f87cded4987 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 16 Nov 2023 13:21:24 +0200 Subject: [PATCH 5/5] refactor: code refactoring --- styles/css/core/variables.css | 4 ++-- tokens/src/core/components/Modal.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 6283d072cc..fec522b254 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Wed, 15 Nov 2023 20:16:06 GMT + * Generated on Thu, 16 Nov 2023 10:44:11 GMT */ :root { @@ -316,7 +316,7 @@ --pgn-size-nav-tabs-border-width: 2px; --pgn-size-nav-tabs-link-border-bottom-width: .188rem; --pgn-size-nav-pills-link-border-width: 1px; - --pgn-size-modal-content-border-width: 0; + --pgn-size-modal-content-border-width: 0px; --pgn-size-modal-sm: 400px; --pgn-size-modal-md: 500px; --pgn-size-modal-lg: 800px; diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json index d54cb29e42..a8322e6484 100644 --- a/tokens/src/core/components/Modal.json +++ b/tokens/src/core/components/Modal.json @@ -12,7 +12,7 @@ "md": { "value": "500px", "type": "dimension", "source": "$modal-md" }, "sm": { "value": "400px", "type": "dimension", "source": "$modal-sm" }, "content-border": { - "width": { "value": "0", "type": "dimension", "source": "$modal-content-border-width" }, + "width": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" }, "radius": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius" }