From 319f309c3aa3117391d0673912573f9838c30fe7 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Mon, 28 Aug 2023 21:06:37 +0300 Subject: [PATCH] refactor: added new tokens --- src/Card/_variables.scss | 56 ------------------ src/Card/index.scss | 8 +-- src/ChipCarousel/_variables.scss | 1 - src/ChipCarousel/index.scss | 4 +- src/ColorPicker/_variables.scss | 2 - src/ColorPicker/index.scss | 4 +- src/DataTable/index.scss | 26 ++++---- src/Dropzone/index.scss | 4 +- src/Form/_index.scss | 1 - src/Form/_variables.scss | 2 - src/Hyperlink/index.scss | 2 +- src/IconButton/_mixins.scss | 4 ++ src/IconButton/index.scss | 5 +- src/IconButtonToggle/index.scss | 2 +- src/Modal/_ModalDialog.scss | 2 +- src/Nav/_mixins.scss | 2 +- src/Nav/_variables.scss | 59 ------------------- src/Nav/index.scss | 27 ++++----- src/PageBanner/index.scss | 2 +- src/ProductTour/Checkpoint.scss | 4 +- .../__snapshots__/SearchField.test.jsx.snap | 2 +- src/Spinner/index.scss | 4 +- src/Stepper/_variables.scss | 18 ------ src/Stepper/index.scss | 37 ++++++------ src/Tabs/_variables.scss | 24 -------- src/Tabs/index.scss | 11 ---- styles/css/core/custom-media-breakpoints.css | 2 +- styles/css/core/variables.css | 14 ++++- styles/css/themes/light/utility-classes.css | 2 +- styles/css/themes/light/variables.css | 12 +++- tokens/src/core/components/Card.json | 3 +- tokens/src/core/components/ChipCarousel.json | 9 +++ tokens/src/core/components/Stepper.json | 42 +++++++++++++ tokens/src/themes/light/components/Nav.json | 2 +- .../src/themes/light/components/Stepper.json | 34 +++++++++++ www/src/pages/foundations/typography.tsx | 1 + www/src/templates/component-page-template.tsx | 1 - www/utils/createPages.js | 4 +- 38 files changed, 180 insertions(+), 259 deletions(-) delete mode 100644 src/Card/_variables.scss delete mode 100644 src/ChipCarousel/_variables.scss delete mode 100644 src/ColorPicker/_variables.scss delete mode 100644 src/Form/_variables.scss create mode 100644 src/IconButton/_mixins.scss delete mode 100644 src/Nav/_variables.scss delete mode 100644 src/Stepper/_variables.scss delete mode 100644 src/Tabs/_variables.scss create mode 100644 tokens/src/core/components/ChipCarousel.json create mode 100644 tokens/src/core/components/Stepper.json create mode 100644 tokens/src/themes/light/components/Stepper.json diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss deleted file mode 100644 index 71b94e3d53..0000000000 --- a/src/Card/_variables.scss +++ /dev/null @@ -1,56 +0,0 @@ -// Card - -$card-spacer-y: .75rem !default; -$card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; -$card-border-focus-color: rgba($black, .5) !default; -$card-border-focus-color-dark: theme-color("primary", "focus") !default; -$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; -$card-cap-bg: rgba($black, .03) !default; -$card-cap-color: null !default; -$card-height: null !default; -$card-color: null !default; -$card-bg: $white !default; -$card-bg-dark: $primary-500 !default; -$card-bg-muted: $light-200 !default; - -$card-img-overlay-padding: 1.25rem !default; - -$card-group-margin: calc($grid-gutter-width / 2) !default; -$card-deck-margin: $card-group-margin !default; -$card-grid-margin: $card-group-margin !default; -$card-deck-margin-bottom: map_get($spacers, 3) !default; -$card-grid-margin-bottom: map_get($spacers, 3) !default; - -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; - -$card-divider-bg: $light-400 !default; -$card-divider-margin-y: $card-spacer-y !default; - -$card-footer-actions-gap: .5rem !default; - -$card-logo-left-offset: 1.5rem !default; -$card-logo-bottom-offset: 1rem !default; -$card-logo-left-offset-horizontal: .4375rem !default; -$card-logo-bottom-offset-horizontal: .4375rem !default; - -$card-logo-width: 7.25rem !default; -$card-logo-height: 4.125rem !default; - -$card-image-border-radius: $card-border-radius !default; -$card-logo-border-radius: .25rem !default; - -$card-footer-text-font-size: $x-small-font-size; - -$card-image-horizontal-max-width: 240px !default; -$card-image-horizontal-min-width: $card-image-horizontal-max-width !default; -$card-image-vertical-max-height: 140px !default; -$loading-skeleton-spacer: .313rem !default; - -$card-focus-border-offset: 5px !default; -$card-focus-border-width: 2px !default; -$card-focus-border-radius: 5px !default; diff --git a/src/Card/index.scss b/src/Card/index.scss index 13a7de746a..aec6589e83 100644 --- a/src/Card/index.scss +++ b/src/Card/index.scss @@ -1,7 +1,5 @@ @import "card-bootstrap"; -$card-image-border-radius: .3125rem !default; - a .pgn__card, a.pgn__card { color: var(--pgn-color-gray-700); @@ -295,8 +293,8 @@ a.pgn__card { object-fit: cover; max-height: inherit; width: 100%; - border-top-left-radius: $card-image-border-radius; - border-top-right-radius: $card-image-border-radius; + border-top-left-radius: var(--pgn-size-card-image-border-radius); + border-top-right-radius: var(--pgn-size-card-image-border-radius); display: none; &.show { @@ -315,7 +313,7 @@ a.pgn__card { .pgn__card-image-cap { height: 100%; max-width: inherit; - border-radius: $card-image-border-radius 0 0 $card-image-border-radius; + border-radius: var(--pgn-size-card-image-border-radius) 0 0 var(--pgn-size-card-image-border-radius); width: auto; object-fit: cover; } diff --git a/src/ChipCarousel/_variables.scss b/src/ChipCarousel/_variables.scss deleted file mode 100644 index e033dc2fcd..0000000000 --- a/src/ChipCarousel/_variables.scss +++ /dev/null @@ -1 +0,0 @@ -$chip-carousel-controls-top-offset: -3px !default; diff --git a/src/ChipCarousel/index.scss b/src/ChipCarousel/index.scss index 744acf9dea..cfbf56b752 100644 --- a/src/ChipCarousel/index.scss +++ b/src/ChipCarousel/index.scss @@ -1,5 +1,3 @@ -@import "variables"; - .pgn__chip-carousel { position: relative; @@ -19,7 +17,7 @@ .pgn__chip-carousel__left-control { position: absolute; z-index: 2; - top: $chip-carousel-controls-top-offset; + top: calc(var(--pgn-spacing-chip-carousel-controls-top-offset) * -1); } .pgn__chip-carousel__right-control { diff --git a/src/ColorPicker/_variables.scss b/src/ColorPicker/_variables.scss deleted file mode 100644 index b51c46521b..0000000000 --- a/src/ColorPicker/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$picker-size-sm: var(--pgn-size-color-picker-sm) !default; -$picker-size-md: var(--pgn-size-color-picker-md) !default; diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss index d0715f54c4..7daff955db 100644 --- a/src/ColorPicker/index.scss +++ b/src/ColorPicker/index.scss @@ -1,5 +1,3 @@ -@import "variables"; - .pgn__color-picker { box-shadow: 0 0 3px 1px var(--pgn-color-gray-300); border: none; @@ -28,7 +26,7 @@ .pgn__color-modal { background: var(--pgn-color-white); padding-bottom: .1rem; - margin-bottom: 1rem; + margin-bottom: var(--pgn-spacing-spacer-base); } .pgn__color-error { diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss index 0b4cea90a5..28afd781d6 100644 --- a/src/DataTable/index.scss +++ b/src/DataTable/index.scss @@ -24,10 +24,10 @@ display: flex; .pgn__data-table__visible-actions { - margin-inline-start: map_get($spacers, 2); + margin-inline-start: var(--pgn-spacing-spacer-2); .btn { - margin-inline-start: map_get($spacers, 2); + margin-inline-start: var(--pgn-spacing-spacer-2); &:first-child { margin-inline-start: 0; @@ -55,7 +55,7 @@ width: 100%; display: flex; align-items: center; - margin-top: map_get($spacers, 4); + margin-top: var(--pgn-spacing-spacer-4); } .pgn__icon-button-toggle__container { @@ -95,18 +95,18 @@ border-radius: var(--pgn-size-border-radius-base); box-shadow: var(--pgn-elevation-data-table-box-shadow); padding: var(--pgn-spacing-data-table-padding-small); - margin-right: map_get($spacers, 4); + margin-right: var(--pgn-spacing-spacer-4); flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width); } .pgn__data-table-side-filters { .pgn__data-table-side-filters-title { - margin-bottom: map_get($spacers, 3); + margin-bottom: var(--pgn-spacing-spacer-3); text-align: start; } .pgn__data-table-side-filters-status { - margin-bottom: map_get($spacers, 2); + margin-bottom: var(--pgn-spacing-spacer-2); display: flex; justify-content: flex-end; } @@ -167,7 +167,7 @@ } .pgn__data-table-filters-breakout-filter { - margin-inline-end: map_get($spacers, 2); + margin-inline-end: var(--pgn-spacing-spacer-2); } .pgn__data-table-filters-dropdown-item { @@ -252,12 +252,12 @@ padding: 0 var(--pgn-spacing-data-table-padding-x); .pgn__data-table-card-view-default-skeleton-card-section { - margin-top: map_get($spacers, 2); + margin-top: var(--pgn-spacing-spacer-2); } } .pgn__data-table__action-btn { - margin-left: map_get($spacers, 2); + margin-left: var(--pgn-spacing-spacer-2); &:first-child { margin-left: 0; @@ -274,7 +274,7 @@ .pgn__data-table__overflow-actions-menu { background: var(--pgn-color-white); - padding: map_get($spacers, 2); + padding: var(--pgn-spacing-spacer-2); box-shadow: var(--pgn-elevation-box-shadow-level-1); border-radius: 4px; } @@ -296,10 +296,10 @@ &.selection-right { > :first-child { - margin-right: map_get($spacers, 2); + margin-right: var(--pgn-spacing-spacer-2); [dir="rtl"] & { - margin-left: map_get($spacers, 2); + margin-left: var(--pgn-spacing-spacer-2); margin-right: 0; } } @@ -313,5 +313,5 @@ .pgn__data-table__controlled-select { display: flex; align-content: center; - padding: map_get($spacers, 1); + padding: var(--pgn-spacing-spacer-1); } diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss index b78a9ac306..7b07af5c8e 100644 --- a/src/Dropzone/index.scss +++ b/src/Dropzone/index.scss @@ -32,7 +32,7 @@ .pgn__dropzone-generic-alert { width: 100%; - margin-bottom: map_get($spacers, 4); + margin-bottom: var(--pgn-spacing-spacer-4); .pgn__alert-message-wrapper .alert-message-content { > span { @@ -47,7 +47,7 @@ background: var(--pgn-color-light-300); border-radius: 50%; position: relative; - margin-bottom: map-get($spacers, 4); + margin-bottom: var(--pgn-spacing-spacer-4); } .pgn__dropzone__upload-icon { diff --git a/src/Form/_index.scss b/src/Form/_index.scss index cee69d678e..6dfca46217 100644 --- a/src/Form/_index.scss +++ b/src/Form/_index.scss @@ -1,4 +1,3 @@ -@import "variables"; @import "bootstrap-forms"; @import "input-group"; @import "bootstrap-custom-forms"; diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss deleted file mode 100644 index 234096d444..0000000000 --- a/src/Form/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$input-focus-width: var(--pgn-size-form-input-width-focus) !default; -$custom-select-indicator: var(--pgn-other-content-form-control-select-indicator-icon) !default; diff --git a/src/Hyperlink/index.scss b/src/Hyperlink/index.scss index 25faafbcd5..b0e512978a 100644 --- a/src/Hyperlink/index.scss +++ b/src/Hyperlink/index.scss @@ -4,6 +4,6 @@ &__external-icon { display: inline-block; vertical-align: middle; - margin-inline-start: map_get($spacers, 2); + margin-inline-start: var(--pgn-spacing-spacer-2); } } diff --git a/src/IconButton/_mixins.scss b/src/IconButton/_mixins.scss new file mode 100644 index 0000000000..72ad1c438f --- /dev/null +++ b/src/IconButton/_mixins.scss @@ -0,0 +1,4 @@ +@mixin btn-icon-size($icon-size) { + width: $icon-size; + height: $icon-size; +} diff --git a/src/IconButton/index.scss b/src/IconButton/index.scss index 43678657a1..d1454db5d9 100644 --- a/src/IconButton/index.scss +++ b/src/IconButton/index.scss @@ -1,7 +1,4 @@ -@mixin btn-icon-size($icon-size) { - width: $icon-size; - height: $icon-size; -} +@import "mixins"; .btn-icon { @include btn-icon-size(var(--pgn-size-icon-button-diameter-md)); diff --git a/src/IconButtonToggle/index.scss b/src/IconButtonToggle/index.scss index 3895f83b57..87cb2a1ec1 100644 --- a/src/IconButtonToggle/index.scss +++ b/src/IconButtonToggle/index.scss @@ -2,6 +2,6 @@ display: flex; .btn-icon + .btn-icon { - margin-inline-start: map_get($spacers, 1); + margin-inline-start: var(--pgn-spacing-spacer-1); } } diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index 426113bf67..99de29debf 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -311,7 +311,7 @@ .pgn__alert-modal__title_icon { flex-shrink: 0; - margin-right: map-get($spacers, 2\.5); + margin-right: var(--pgn-spacing-spacer-2-5); } } } diff --git a/src/Nav/_mixins.scss b/src/Nav/_mixins.scss index 6461442be8..f5593f067d 100644 --- a/src/Nav/_mixins.scss +++ b/src/Nav/_mixins.scss @@ -14,7 +14,7 @@ right: calc(#{$distance} * -1); bottom: calc(#{$distance} * -1); left: calc(#{$distance} * -1); - border: solid var(--pgn-size-nav-tabs-border-width) $border-color; + border: solid var(--pgn-size-nav-tabs-border-width) $tabs-border-color; border-radius: $radius; } } diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss deleted file mode 100644 index eabc50c897..0000000000 --- a/src/Nav/_variables.scss +++ /dev/null @@ -1,59 +0,0 @@ -// Navs - -$nav-link-padding-y: .5rem !default; -$nav-link-padding-x: 1rem !default; -$nav-link-color: $gray-700 !default; -$nav-link-disabled-color: $gray-300 !default; -$nav-link-font-weight: 500 !default; - -$nav-tabs-border-color: $light-400 !default; -$nav-tabs-border-width: 2px !default; -$nav-tabs-border-radius: 0 !default; -$nav-tabs-hover-bg: transparent !default; -$nav-tabs-focus-border-color: $nav-tabs-hover-bg !default; -$nav-tabs-disabled-bg: $nav-tabs-hover-bg !default; -$nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default; -$nav-tabs-link-hover-bg: $light-400 !default; -$nav-tabs-link-active-color: $primary-500 !default; -$nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default; -$nav-tabs-link-active-bg: transparent !default; -$nav-tabs-link-focus-border-color: $nav-tabs-link-active-color !default; -$nav-tabs-link-distance-to-border: 4px !default; -$nav-tabs-link-border-color: transparent !default; -$nav-tabs-link-disabled-border-color: $nav-tabs-link-border-color !default; - -$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-active-color: $component-active-color !default; -$nav-pills-link-active-bg: $component-active-bg !default; -$nav-pills-link-active-border-color: $white !default; -$nav-pills-link-border-color: $nav-tabs-border-color !default; -$nav-pills-link-border-width: 1px !default; - -$nav-inverse-pills-link-color: $white !default; -$nav-inverse-pills-link-border-color: $dark-300 !default; -$nav-inverse-pills-link-hover-bg: $nav-inverse-pills-link-border-color !default; -$nav-inverse-pills-link-focus-color: $nav-inverse-pills-link-color !default; -$nav-inverse-pills-link-active-bg: $nav-inverse-pills-link-color !default; -$nav-inverse-pills-link-active-color: $primary-500 !default; -$nav-inverse-pills-link-active-border-color: $nav-inverse-pills-link-color !default; -$nav-inverse-pills-link-active-hover-bg: $nav-inverse-pills-link-border-color !default; -$nav-inverse-pills-link-active-hover-color: $nav-inverse-pills-link-color !default; -$nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default; -$nav-inverse-pills-link-active-focus-hover-bg: $nav-inverse-pills-link-color !default; -$nav-inverse-pills-link-active-focus-color: $nav-inverse-pills-link-active-color !default; -$nav-inverse-pills-link-active-focus-border-color: $primary !default; -$nav-inverse-pills-link-active-focus-hover-border-color: $nav-inverse-pills-link-active-focus-border-color !default; -$nav-inverse-pills-link-border-width: $nav-pills-link-border-width !default; -$nav-inverse-pills-tab-content-color: $nav-inverse-pills-link-color !default; - -$nav-inverse-tabs-link-color: $white !default; -$nav-inverse-tabs-link-border-bottom-color: $dark-300 !default; -$nav-inverse-tabs-link-hover-bg: $nav-inverse-tabs-link-border-bottom-color !default; -$nav-inverse-tabs-link-active-hover-bg: transparent !default; -$nav-inverse-tabs-link-focus-bg: $nav-inverse-tabs-link-color !default; -$nav-inverse-tabs-link-active-border-color: $nav-inverse-tabs-link-color !default; -$nav-inverse-tabs-link-active-bg: $nav-inverse-tabs-link-hover-bg !default; -$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-border-width !default; -$nav-inverse-tabs-tab-content-color: $nav-inverse-tabs-link-color !default; -$nav-inverse-tabs-dropdown-border-color: $nav-inverse-tabs-link-active-hover-bg !default; -$nav-inverse-tabs-dropdown-bottom-gap: .4375rem !default; diff --git a/src/Nav/index.scss b/src/Nav/index.scss index 50f27358f1..7cf2750bda 100644 --- a/src/Nav/index.scss +++ b/src/Nav/index.scss @@ -1,13 +1,5 @@ @import "mixins"; -$nav-pills-link-active-border-color: var(--pgn-color-white); -$nav-inverse-pills-link-active-focus-hover-border-color: var(--pgn-color-primary-base); -$nav-tabs-link-active-border-color: transparent; -$nav-inverse-tabs-dropdown-border-color: transparent; -$nav-tabs-link-disabled-border-color: transparent; -$nav-tabs-focus-border-color: transparent; -$nav-tabs-disabled-bg: transparent; - // Base class // // Kickstart any navigation component with a set of style resets. Works with @@ -50,6 +42,7 @@ $nav-tabs-disabled-bg: transparent; border: var(--pgn-size-nav-pills-link-border-width) solid var(--pgn-color-nav-pills-base-link-border); &:focus { + // stylelint-disable-next-line max-line-length @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus), var(--pgn-size-nav-pills-border-radius)); } @@ -62,9 +55,10 @@ $nav-tabs-disabled-bg: transparent; .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: $nav-pills-link-active-border-color; + border-color: var(--pgn-color-primary-base); &:focus { + // stylelint-disable-next-line max-line-length @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus), var(--pgn-size-nav-pills-border-radius)); } } @@ -107,11 +101,12 @@ $nav-tabs-disabled-bg: transparent; &:focus { border-color: var(--pgn-color-nav-pills-inverse-link-border-active-focus); + 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-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: $nav-inverse-pills-link-active-focus-hover-border-color; } } } @@ -127,7 +122,7 @@ $nav-tabs-disabled-bg: transparent; 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 $nav-inverse-tabs-dropdown-border-color; + border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent; &:hover { border-bottom: none; @@ -168,7 +163,7 @@ $nav-tabs-disabled-bg: transparent; border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border); &.disabled { - border-color: $nav-tabs-link-disabled-border-color; + border-color: transparent; } } @@ -186,14 +181,14 @@ $nav-tabs-disabled-bg: transparent; } &:focus { - border-bottom: var(--pgn-size-nav-tabs-border-width) solid $nav-tabs-focus-border-color; + border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent; @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: $nav-tabs-disabled-bg; + background-color: transparent; } } @@ -201,7 +196,7 @@ $nav-tabs-disabled-bg: transparent; .nav-item.show .nav-link { color: var(--pgn-color-nav-tabs-base-link-active-text); background-color: var(--pgn-color-nav-tabs-base-link-active-bg); - border-bottom: var(--pgn-size-nav-tabs-border-width) solid $nav-tabs-link-active-border-color; + border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-border-color-nav-tabs-link-border-active); &:hover { background-color: var(--pgn-color-nav-tabs-base-link-hover-bg); diff --git a/src/PageBanner/index.scss b/src/PageBanner/index.scss index 8ab0671f72..320b2be9f5 100644 --- a/src/PageBanner/index.scss +++ b/src/PageBanner/index.scss @@ -43,7 +43,7 @@ flex-grow: 1; justify-content: center; align-items: center; - padding: map_get($spacers, 2) map_get($spacers, 2\.5); + padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-2-5); text-align: center; } diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 4921f120cb..3ae48c1d54 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -5,7 +5,7 @@ var(--pgn-size-product-tour-checkpoint-width-border) solid var(--pgn-color-product-tour-checkpoint-border); border-radius: var(--pgn-size-border-radius-base); - padding: map_get($spacers, 4); + padding: var(--pgn-spacing-spacer-4); box-shadow: 0 .25rem .5rem var(--pgn-color-product-tour-checkpoint-box-shadow); z-index: var(--pgn-elevation-product-tour-checkpoint-zindex); max-width: var(--pgn-size-product-tour-checkpoint-width-max); @@ -39,7 +39,7 @@ } .pgn__checkpoint-button_dismiss { - margin-inline-end: map_get($spacers, 2); + margin-inline-end: var(--pgn-spacing-spacer-2); } .pgn__checkpoint-breadcrumb { diff --git a/src/SearchField/__snapshots__/SearchField.test.jsx.snap b/src/SearchField/__snapshots__/SearchField.test.jsx.snap index aec67f040e..ba7525ea1c 100644 --- a/src/SearchField/__snapshots__/SearchField.test.jsx.snap +++ b/src/SearchField/__snapshots__/SearchField.test.jsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` with basic usage should match the snapshot 1`] = `"
"`; +exports[` with basic usage should match the snapshot 1`] = `"
"`; diff --git a/src/Spinner/index.scss b/src/Spinner/index.scss index ec6c9b297c..f515319a5b 100644 --- a/src/Spinner/index.scss +++ b/src/Spinner/index.scss @@ -6,7 +6,7 @@ display: inline-block; width: var(--pgn-size-spinner-base-width); height: var(--pgn-size-spinner-base-height); - vertical-align: $spinner-vertical-align; + vertical-align: calc(var(--pgn-spacing-vertical-align) * -1); border: var(--pgn-size-spinner-base-border-width) solid currentcolor; border-right-color: transparent; border-radius: 50%; @@ -34,7 +34,7 @@ display: inline-block; width: var(--pgn-size-spinner-base-width); height: var(--pgn-size-spinner-base-height); - vertical-align: $spinner-vertical-align; + vertical-align: calc(var(--pgn-spacing-vertical-align) * -1); background-color: currentcolor; border-radius: 50%; opacity: 0; diff --git a/src/Stepper/_variables.scss b/src/Stepper/_variables.scss deleted file mode 100644 index 7b7fc80d2d..0000000000 --- a/src/Stepper/_variables.scss +++ /dev/null @@ -1,18 +0,0 @@ -$stepper-header-bg: transparent !default; -$stepper-header-min-height: 5.13rem !default; -$stepper-header-padding-y: .75rem !default; -$stepper-header-padding-x: $spacer !default; -$stepper-header-line-bg: $light !default; -$stepper-header-line-height: 1px !default; -$stepper-header-step-color: $primary !default; -$stepper-header-step-bg: $stepper-header-bg !default; -$stepper-header-step-border: none !default; -$stepper-header-step-min-width: 0 !default; -$stepper-header-step-padding: .25rem !default; -$stepper-header-step-list-padding-y: .25rem !default; -$stepper-header-step-list-padding-x: 0 !default; -$stepper-header-step-list-margin: 0 !default; -$stepper-header-active-step-bg: $gray-500 !default; -$stepper-header-step-error-bubble-color: $danger !default; -$stepper-header-step-error-bubble-shadow-width: 3px !default; -$stepper-header-step-error-description-color: $stepper-header-step-error-bubble-color !default; diff --git a/src/Stepper/index.scss b/src/Stepper/index.scss index 9d418d39ce..f16a446317 100644 --- a/src/Stepper/index.scss +++ b/src/Stepper/index.scss @@ -1,43 +1,42 @@ -@import "variables"; - .pgn__stepper-header { display: flex; justify-content: center; align-items: center; - background: $stepper-header-bg; - padding: $stepper-header-padding-y $stepper-header-padding-x; - min-height: $stepper-header-min-height; + background: var(--pgn-color-stepper-header-bg-base); + padding: var(--pgn-spacing-stepper-header-padding-y) var(--pgn-spacing-stepper-header-padding-x); + min-height: var(--pgn-size-stepper-header-height-min); .pgn__stepper-header-step-list { list-style: none; - padding: $stepper-header-step-list-padding-y $stepper-header-step-list-padding-x; + // stylelint-disable-next-line max-line-length + padding: var(--pgn-spacing-stepper-header-step-list-padding-y) var(--pgn-spacing-stepper-header-step-list-padding-x); display: flex; align-items: center; - margin: $stepper-header-step-list-margin; + margin: var(--pgn-spacing-stepper-header-step-list-margin); flex-grow: 1; justify-content: center; .pgn__stepper-header-line { display: block; - height: $stepper-header-line-height; - background: $stepper-header-line-bg; + height: var(--pgn-typography-spacer-line-height); + background: var(--pgn-color-stepper-header-bg-line); flex-basis: 80px; margin: 0 .5rem; } button.pgn__stepper-header-step { - border: $stepper-header-step-border; - background-color: $stepper-header-step-bg; + border: var(--pgn-color-stepper-header-step-border); + background-color: var(--pgn-color-stepper-header-bg-base); } } .pgn__stepper-header-step { display: flex; align-items: center; - color: $stepper-header-step-color; + color: var(--pgn-color-stepper-header-step-base); flex-shrink: 1; - min-width: $stepper-header-step-min-width; - padding: $stepper-header-step-padding; + min-width: var(--pgn-size-stepper-step-width-min); + padding: var(--pgn-spacing-stepper-header-step-padding); .pgn__bubble { margin-inline-end: .5rem; @@ -60,7 +59,7 @@ } &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step { - color: $stepper-header-active-step-bg; + color: var(--pgn-color-stepper-header-step-bg-active); } &.pgn__stepper-header-step-has-error { @@ -68,16 +67,16 @@ background: transparent; box-shadow: inset 0 0 0 - $stepper-header-step-error-bubble-shadow-width - $stepper-header-step-error-bubble-color; + var(--pgn-size-stepper-step-bubble-error-shadow-width) + var(--pgn-color-stepper-header-step-bubble-error); * { - color: $stepper-header-step-error-bubble-color; + color: var(--pgn-color-stepper-header-step-bubble-error); } } .pgn__stepper-header-step-description { - color: $stepper-header-step-error-description-color; + color: var(--pgn-color-stepper-header-step-description-error); } } } diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss deleted file mode 100644 index 2d98a95d4b..0000000000 --- a/src/Tabs/_variables.scss +++ /dev/null @@ -1,24 +0,0 @@ -$tab-notification-height: 1rem !default; -$tab-notification-width: 1rem !default; -$tab-notification-font-size: $font-size-xs !default; -$tab-more-link-dropdown-toggle-padding-x: .7rem !default; -$tab-more-link-dropdown-toggle-padding-y: $spacer !default; -$tab-more-link-dropdown-toggle-focus-bg: $primary-500 !default; -$tab-more-link-dropdown-toggle-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default; -$tab-more-link-dropdown-toggle-focus-color: $white !default; -$tab-more-link-dropdown-toggle-btn-focus-color: $tab-more-link-dropdown-toggle-focus-color !default; -$tab-more-link-dropdown-toggle-btn-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default; -$tab-more-link-dropdown-toggle-active-color: $tab-more-link-dropdown-toggle-focus-color !default; -$tab-more-link-dropdown-toggle-hover-color: $tab-more-link-dropdown-toggle-focus-bg !default; -$tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem !default; -$tab-inverse-pills-link-dropdown-toggle-padding-y: $spacer !default; -$tab-inverse-pills-link-dropdown-toggle-focus-bg: $white !default; -$tab-inverse-pills-link-dropdown-toggle-focus-color: $primary-500 !default; -$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default; -$tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default; -$tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default; -$tab-inverse-pills-link-dropdown-toggle-active-hover-bg: $primary-300 !default; -$tab-inverse-pills-link-dropdown-distance: 5px !default; -$tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem !default; -$tab-inverse-tabs-link-dropdown-toggle-padding-y: $spacer !default; -$tab-inverse-tabs-link-dropdown-toggle-hover-bg: transparent !default; diff --git a/src/Tabs/index.scss b/src/Tabs/index.scss index 3cab07cb6d..8c7e3133e9 100644 --- a/src/Tabs/index.scss +++ b/src/Tabs/index.scss @@ -1,6 +1,3 @@ -$tab-inverse-pills-link-dropdown-toggle-focus-border-color: var(--pgn-color-white); -$tab-inverse-pills-link-dropdown-distance: 5px; - .pgn__tabs { flex-wrap: nowrap; @@ -82,14 +79,6 @@ $tab-inverse-pills-link-dropdown-distance: 5px; 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( - $tab-inverse-pills-link-dropdown-toggle-focus-border-color, - var(--pgn-size-nav-tabs-border-radius), - $tab-inverse-pills-link-dropdown-distance - ); - } } } diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index 56c0c5cf9c..55b780d3a4 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 03 Aug 2023 08:09:26 GMT + * Generated on Mon, 28 Aug 2023 17:10:09 GMT */ @custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 0b1a0f3ecf..54442b7d58 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 Thu, 15 Jun 2023 15:10:16 GMT + * Generated on Mon, 28 Aug 2023 17:10:09 GMT */ :root { @@ -82,6 +82,7 @@ --pgn-typography-display-2: 4.875rem; --pgn-typography-display-1: 3.75rem; --pgn-typography-toast-font-size: .875rem; + --pgn-typography-spacer-line-height: 1px; --pgn-typography-pagination-line-height: 1.5rem; --pgn-typography-pagination-font-size-sm: .875rem; --pgn-typography-nav-link-text-decoration: none; @@ -132,6 +133,11 @@ --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; --pgn-spacing-sticky-offset: 0; + --pgn-spacing-stepper-header-step-list-margin: 0; + --pgn-spacing-stepper-header-step-list-padding-x: 0; + --pgn-spacing-stepper-header-step-list-padding-y: .25rem; + --pgn-spacing-stepper-header-step-padding: .25rem; + --pgn-spacing-stepper-header-padding-y: .75rem; --pgn-spacing-vertical-align: .125em; --pgn-spacing-selectable-box-box-space: .75rem; --pgn-spacing-selectable-box-border-radius: .25rem; @@ -215,6 +221,7 @@ --pgn-spacing-collapsible-card-spacer-y-base: .5rem; --pgn-spacing-code-kbd-padding-x: .4rem; --pgn-spacing-code-kbd-padding-y: .2rem; + --pgn-spacing-chip-carousel-controls-top-offset: .188rem; --pgn-spacing-chip-padding-to-icon: 3px; --pgn-spacing-chip-padding-icon: .25rem; --pgn-spacing-chip-padding-x: .5rem; @@ -270,6 +277,9 @@ --pgn-size-toast-max-width: 400px; --pgn-size-tabs-notification-width: 1rem; --pgn-size-tabs-notification-height: 1rem; + --pgn-size-stepper-step-bubble-error-shadow-width: 3px; + --pgn-size-stepper-step-width-min: 0; + --pgn-size-stepper-header-height-min: 5.13rem; --pgn-size-stack-gap: 0; --pgn-size-spinner-sm-border-width: .2em; --pgn-size-spinner-sm-width: 1rem; @@ -368,6 +378,7 @@ --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-radius: 5px; @@ -464,6 +475,7 @@ --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); + --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x); --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y); --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base); diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index afab4f545f..ac9c495bf1 100644 --- a/styles/css/themes/light/utility-classes.css +++ b/styles/css/themes/light/utility-classes.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Mon, 05 Jun 2023 02:30:54 GMT + * Generated on Mon, 28 Aug 2023 17:10:09 GMT */ .bg-accent-a { diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index a001ea3665..428f8dee19 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 Fri, 09 Jun 2023 07:34:35 GMT + * Generated on Mon, 28 Aug 2023 17:10:09 GMT */ :root { @@ -29,6 +29,8 @@ --pgn-color-white: #FFFFFFFF; --pgn-color-toast-base: inherit; --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000; + --pgn-color-stepper-header-step-border: #000000FF; + --pgn-color-stepper-header-bg-base: #00000000; --pgn-color-progress-bar-bg: #00000000; --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; --pgn-color-popover-border: #00000033; @@ -329,6 +331,9 @@ --pgn-color-toast-bg: var(--pgn-color-gray-700); --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus: var(--pgn-color-white); --pgn-color-tab-more-link-dropdown-toggle-text-focus: var(--pgn-color-white); + --pgn-color-stepper-header-step-bg-base: var(--pgn-color-stepper-header-bg-base); + --pgn-color-stepper-header-step-base: var(--pgn-color-primary-base); + --pgn-color-stepper-header-bg-line: var(--pgn-color-light-base); --pgn-color-sheet-skrim-component-box-shadow: #00000026; --pgn-color-sheet-skrim-bg: #ADADAD80; --pgn-color-search-field-border-focus: var(--pgn-color-black); @@ -599,7 +604,7 @@ --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base); --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm); --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); - --pgn-border-color-nav-tabs-link-border-active: transparent transparent var(--pgn-color-primary-500); + --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500); --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); @@ -698,6 +703,8 @@ --pgn-color-tab-more-link-dropdown-toggle-bg-focus: var(--pgn-color-primary-500); --pgn-color-tab-more-link-dropdown-toggle-text-active: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus); --pgn-color-tab-more-link-dropdown-toggle-btn-text-focus: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus); + --pgn-color-stepper-header-step-bubble-error: var(--pgn-color-danger-base); + --pgn-color-stepper-header-step-bg-active: var(--pgn-color-gray-500); --pgn-color-search-field-button-bg-brand: var(--pgn-color-brand-500); --pgn-color-search-field-button-bg-primary: var(--pgn-color-primary-500); --pgn-color-search-field-border-base: var(--pgn-color-gray-500); @@ -1167,6 +1174,7 @@ --pgn-color-tab-more-link-dropdown-toggle-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); --pgn-color-tab-more-link-dropdown-toggle-text-hover: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); --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-bg: var(--pgn-color-danger-100); diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index f487ab4355..4e384abea9 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -66,7 +66,8 @@ }, "vertical": { "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" } - } + }, + "border-radius": { "value": ".3125rem", "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/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json new file mode 100644 index 0000000000..b4433553b2 --- /dev/null +++ b/tokens/src/core/components/ChipCarousel.json @@ -0,0 +1,9 @@ +{ + "spacing": { + "chip-carousel": { + "controls-top-offset": { + "value": ".188rem", "type": "dimension", "source": "$chip-carousel-controls-top-offset" + } + } + } +} diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json new file mode 100644 index 0000000000..27b3e77b5c --- /dev/null +++ b/tokens/src/core/components/Stepper.json @@ -0,0 +1,42 @@ +{ + "spacing": { + "stepper": { + "header": { + "padding": { + "y": { "value": ".75rem", "type": "dimension", "source": "$stepper-header-padding-y" }, + "x": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$stepper-header-padding-x" } + }, + "step": { + "padding": { + "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-padding" + }, + "list": { + "padding": { + "y": { "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-list-padding-y" }, + "x": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-padding-x" } + }, + "margin": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-margin" } + } + } + } + } + }, + "size": { + "stepper": { + "header": { + "height-min": { "value": "5.13rem", "type": "dimension", "source": "$stepper-header-min-height" } + }, + "step": { + "width-min": { "value": "0", "type": "dimension", "source": "$stepper-header-step-min-width" }, + "bubble-error-shadow-width": { + "value": "3px", "type": "dimension", "source": "$stepper-header-step-error-bubble-shadow-width" + } + } + } + }, + "typography": { + "spacer": { + "line-height": { "value": "1px", "type": "dimension", "source": "$stepper-header-line-height" } + } + } +} diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json index 2dcd898c98..baf3d19c4b 100644 --- a/tokens/src/themes/light/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -4,7 +4,7 @@ "tabs-link": { "border": { "active": { - "value": "transparent transparent {color.primary.500}", + "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-border-color" }, diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json new file mode 100644 index 0000000000..a4f2a62ba2 --- /dev/null +++ b/tokens/src/themes/light/components/Stepper.json @@ -0,0 +1,34 @@ +{ + "color": { + "stepper": { + "header": { + "bg": { + "base": { "value": "transparent", "type": "color", "source": "$stepper-header-bg" }, + "line": { "value": "{color.light.base}", "type": "color", "source": "$stepper-header-line-bg" } + }, + "step": { + "base": { + "value": "{color.primary.base}", "type": "color", "source": "$stepper-header-step-color" + }, + "bg": { + "base": { + "value": "{color.stepper.header.bg.base}", "type": "color", "source": "$stepper-header-step-bg" + }, + "active": { + "value": "{color.gray.500}", "type": "color", "source": "$stepper-header-active-step-bg" + } + }, + "border": { "value": "none", "type": "color", "source": "$stepper-header-step-border" }, + "bubble-error": { + "value": "{color.danger.base}", "type": "color", "source": "$stepper-header-step-error-bubble-color" + }, + "description-error": { + "value": "{color.stepper.header.step.bubble-error}", + "type": "color", + "source": "$stepper-header-step-error-description-color" + } + } + } + } + } +} diff --git a/www/src/pages/foundations/typography.tsx b/www/src/pages/foundations/typography.tsx index 05d7249204..abda06a7b8 100644 --- a/www/src/pages/foundations/typography.tsx +++ b/www/src/pages/foundations/typography.tsx @@ -10,6 +10,7 @@ import { LinksTable, AlignmentTable, } from '../../components/typography-page'; +import { SettingsContext } from '../../context/SettingsContext'; export default function TypographyPage() { const { settings } = useContext(SettingsContext); diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx index 4b0fd6960a..c4331e09f3 100644 --- a/www/src/templates/component-page-template.tsx +++ b/www/src/templates/component-page-template.tsx @@ -52,7 +52,6 @@ export default function PageTemplate({ data: { mdx, components: componentNodes }, pageContext: { cssVariablesData, componentsUsageInsights }, }: IPageTemplate) { - console.log('================ componentsUsageInsights ====================', componentsUsageInsights); const isMobile = useMediaQuery({ maxWidth: breakpoints.large.maxWidth }); const [showMinimizedTitle, setShowMinimizedTitle] = useState(false); const { settings } = useContext(SettingsContext); diff --git a/www/utils/createPages.js b/www/utils/createPages.js index 0d2a10a385..8f9716638d 100644 --- a/www/utils/createPages.js +++ b/www/utils/createPages.js @@ -69,8 +69,8 @@ async function createPages(graphql, actions, reporter) { // You can use the values in this context in // our page layout component context: { - id: node.id, - components: node.frontmatter.components || [], + id: node.id, + components: node.frontmatter.components || [], cssVariablesData, componentsUsageInsights: Object.keys(componentsUsage), },