From 029325ac55dc53f8fd69c38c52dfbd70fa5ea7ad Mon Sep 17 00:00:00 2001 From: Peter Kulko Date: Tue, 3 Sep 2024 20:30:40 +0300 Subject: [PATCH] refactor: corrected changed values of tokens and CSS variables --- package.json | 4 +-- src/Card/CardDeck.jsx | 3 -- src/Card/README.md | 31 ------------------- src/Card/index.scss | 12 +++---- src/ColorPicker/index.scss | 2 +- src/Modal/_ModalDialog.scss | 4 +-- src/Popover/index.scss | 2 +- src/ProductTour/Checkpoint.scss | 2 +- styles/css/core/variables.css | 12 +++---- styles/css/themes/light/variables.css | 20 ++++++------ tokens/src/core/global/typography.json | 8 ++--- .../themes/light/components/IconButton.json | 20 ++++++------ www/src/components/Menu.scss | 4 +-- www/src/components/header/Header.scss | 6 ++-- 14 files changed, 48 insertions(+), 82 deletions(-) diff --git a/package.json b/package.json index 96e162c515..b9f430726a 100644 --- a/package.json +++ b/package.json @@ -199,10 +199,10 @@ ] }, "lint-staged": { - "*.{mjs}": [ + "*.{js,jsx,ts,tsx}": [ "npx eslint" ], - "*.sass": [ + "*.scss": [ "npx stylelint" ] }, diff --git a/src/Card/CardDeck.jsx b/src/Card/CardDeck.jsx index 0a2ac1f0b8..7780b2034d 100644 --- a/src/Card/CardDeck.jsx +++ b/src/Card/CardDeck.jsx @@ -1,7 +1,6 @@ import React, { Children, useMemo } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import BaseCardDeck from 'react-bootstrap/CardDeck'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import { useOverflowScrollItems } from '../OverflowScroll'; @@ -102,6 +101,4 @@ CardDeck.defaultProps = { hasEqualColumnHeights: true, }; -CardDeck.Deprecated = BaseCardDeck; - export default CardDeck; diff --git a/src/Card/README.md b/src/Card/README.md index c8c23c7546..742cc3efea 100644 --- a/src/Card/README.md +++ b/src/Card/README.md @@ -899,37 +899,6 @@ For accessibility, if the child `Card` components are interactive (e.g., `isClic } ``` -### CardDeck.Deprecated - -Gives any child `Card` components equal height with an appropriate gutter between cards. Each child `Card` component's width will be adjusted (e.g., become more narrow) to ensure all `Card` components fit within its parent's width. - -Note: This component is a pass-thru from `react-bootstrap`. - -```jsx live -() => { - const CardComponent = () => ( - - - - - - - - ); - - return ( - - - - - - ) -} -``` - ## CardCarousel Extends `CardDeck` to support navigating between any overflow `Card` components via left and right `IconButton` components as a scrollable carousel. diff --git a/src/Card/index.scss b/src/Card/index.scss index aec6589e83..383726a8cf 100644 --- a/src/Card/index.scss +++ b/src/Card/index.scss @@ -136,11 +136,11 @@ a.pgn__card { } .pgn__card-header-title-sm { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); } .pgn__card-header-title-md { - font-size: var(--pgn-typography-font-size-h3); + font-size: var(--pgn-typography-font-size-h3-base); } %header-subtitle { @@ -155,11 +155,11 @@ a.pgn__card { } .pgn__card-header-subtitle-sm { - font-size: var(--pgn-typography-font-size-h5); + font-size: var(--pgn-typography-font-size-h5-base); } .pgn__card-header-subtitle-md { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); } .pgn__card-header-actions { @@ -271,7 +271,7 @@ a.pgn__card { .pgn__card-section-title { color: var(--pgn-color-black); font-weight: var(--pgn-typography-font-weight-bold); - font-size: var(--pgn-typography-font-size-h5); + font-size: var(--pgn-typography-font-size-h5-base); margin-bottom: var(--pgn-spacing-card-spacer-y); } @@ -392,7 +392,7 @@ a.pgn__card { } .pgn__card-status__heading { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); color: var(--pgn-color-black); display: flex; font-weight: var(--pgn-typography-font-weight-bold); diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss index 1e5bad7cd2..db46647e62 100644 --- a/src/ColorPicker/index.scss +++ b/src/ColorPicker/index.scss @@ -37,7 +37,7 @@ .pgn__hex-label { font-weight: bold; - font-size: var(--pgn-typography-font-size-mobile-h5); + font-size: var(--pgn-typography-font-size-h5-mobile); padding: .5rem; margin-bottom: 0 !important; } diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index 1d152badd7..a49be42af7 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -122,7 +122,7 @@ } .pgn__modal-title { - font-size: var(--pgn-typography-font-size-h3); + font-size: var(--pgn-typography-font-size-h3-base); margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn text-align: start; } @@ -310,7 +310,7 @@ } .pgn__modal-title { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); display: flex; flex-grow: 1; align-items: center; diff --git a/src/Popover/index.scss b/src/Popover/index.scss index e646c6db9b..27c50e7cdd 100644 --- a/src/Popover/index.scss +++ b/src/Popover/index.scss @@ -7,7 +7,7 @@ .popover-header { display: flex; align-items: center; - font-size: var(--pgn-typography-font-size-h5); + font-size: var(--pgn-typography-font-size-h5-base); } .pgn__icon { diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 3ae48c1d54..808b31a54d 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -88,7 +88,7 @@ } #pgn__checkpoint-title { - font-size: var(--pgn-typography-font-size-h3); + font-size: var(--pgn-typography-font-size-h3-base); margin-inline-end: map_get($spacers, 2\.5); margin-bottom: 0; } diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index b35477a68f..c5346db946 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,6 +1,6 @@ /** - * Do not edit directly, this file was auto-generated. - * Generated on Tue, 03 Sep 2024 14:45:12 GMT + * Do not edit directly, this file was auto-generated. while transforming design tokens. + * See /tokens/README.md for more details. */ :root { @@ -55,7 +55,7 @@ --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold); /* Font weight of display level 3. */ --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold); /* Font weight of display level 2. */ --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold); /* Font weight of display level 1. */ - --pgn-typography-font-weight-table-th: normal; /* Table th font weight. */ + --pgn-typography-font-weight-table-th: bold; /* Table th font weight. */ --pgn-typography-font-weight-lead: inherit; /* Lead text font weight. */ --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /* Basic font weight. */ --pgn-typography-font-weight-bolder: bolder; /* Bolder font weight. */ @@ -84,9 +84,9 @@ --pgn-typography-font-size-h2-base: 2rem; /* Font size of heading level 2. */ --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */ --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */ - --pgn-typography-font-size-micro: .6875rem; /* Micro utils text font size. */ - --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */ - --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */ + --pgn-typography-font-size-micro: .688rem; /* Micro utils text font size. */ + --pgn-typography-font-size-xs: .75rem; /* X-small font size. */ + --pgn-typography-font-size-sm: .875rem; /* Small font size. */ --pgn-typography-font-size-lg: var(--pgn-typography-font-size-base) * 1.25; /* Lead text font size. */ --pgn-typography-font-size-base: 1.125rem; /* Base font size. */ --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */ diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 4cee81a244..4efd43154e 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -527,16 +527,16 @@ --pgn-color-icon-button-text-secondary-focus: var(--pgn-color-icon-button-text-secondary-base); --pgn-color-icon-button-text-secondary-hover: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-secondary-base: var(--pgn-color-secondary-base); - --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-text-primary-inverse-active-hover: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-text-primary-inverse-active-hover: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-text-primary-base); --pgn-color-icon-button-text-primary-active-focus: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-primary-active-hover: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-primary-active-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-primary-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-text-primary-base); --pgn-color-icon-button-text-primary-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-text-primary-base); --pgn-color-icon-button-text-primary-hover: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-primary-base: var(--pgn-color-primary-base); --pgn-color-icon-button-bg-black-inverse-active-focus: var(--pgn-color-icon-button-accent); @@ -638,14 +638,14 @@ --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base); --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base); --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base); --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base); --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base); --pgn-color-icon-button-bg-base: #00000000; --pgn-color-form-feedback-checked-invalid: #D64D59FF; @@ -1611,7 +1611,7 @@ --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none; --pgn-elevation-icon-button-box-shadow-primary-active: none; --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-bg-base); + --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base); --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); --pgn-elevation-form-control-select-border-base: none; --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus); diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index 9ed5111019..91a9fb0655 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -40,17 +40,17 @@ }, "sm": { "source": "$small-font-size", - "$value": "0.875rem", + "$value": ".875rem", "$description": "Small font size." }, "xs": { "source": "$x-small-font-size", - "$value": "0.75rem", + "$value": ".75rem", "$description": "X-small font size." }, "micro": { "source": "$micro-font-size", - "$value": ".6875rem", + "$value": ".688rem", "$type": "dimension", "$description": "Micro utils text font size." }, @@ -214,7 +214,7 @@ }, "table-th": { "source": "$table-th-font-weight", - "$value": "normal", + "$value": "bold", "$description": "Table th font weight." }, "display": { diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json index e6d1f9f50a..3621861c48 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -6,7 +6,7 @@ "base": { "source": "$btn-icon-bg", "$value": "transparent" }, "primary": { "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.text.primary.base}" }, "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { "base": { "$value": "{color.icon-button.bg.base}" }, @@ -14,9 +14,9 @@ "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.bg.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { "$value": "{color.icon-button.text.primary.base}" }, + "hover": { "$value": "{color.icon-button.text.primary.base}" }, + "focus": { "$value": "{color.icon-button.text.primary.base}" } }, "inverse-active": { "base": { "$value": "{color.icon-button.accent}" }, @@ -189,10 +189,10 @@ "primary": { "base": { "$value": "{color.primary.base}" }, "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "focus": { "$value": "{color.icon-button.text.primary.base}" }, "inverse": { "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.text.primary.base}" }, "focus": { "$value": "{color.icon-button.accent}" } }, "active": { @@ -201,9 +201,9 @@ "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.bg.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { "$value": "{color.icon-button.text.primary.base}" }, + "hover": { "$value": "{color.icon-button.text.primary.base}" }, + "focus": { "$value": "{color.icon-button.text.primary.base}" } } }, "secondary": { @@ -382,7 +382,7 @@ "icon-button": { "box-shadow": { "primary": { - "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}" }, + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}" }, "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, "active": { "$value": "none" }, "inverse-active": { "$value": "none" } diff --git a/www/src/components/Menu.scss b/www/src/components/Menu.scss index 9b885eb332..eca94c04ba 100644 --- a/www/src/components/Menu.scss +++ b/www/src/components/Menu.scss @@ -7,7 +7,7 @@ border-right: var(--pgn-size-border-width) solid var(--pgn-color-light-400); .pgn-doc__menu-title { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); line-height: var(--pgn-typography-line-height-base); font-weight: var(--pgn-typography-font-weight-normal); color: var(--pgn-color-gray-700); @@ -24,7 +24,7 @@ .btn { width: 50%; - font-size: var(--pgn-typography-font-size-xs); + font-size: var(--pgn-typography-font-size-sm); line-height: var(--pgn-typography-headings-line-height); } } diff --git a/www/src/components/header/Header.scss b/www/src/components/header/Header.scss index 327433df9d..ddd9dad3f2 100644 --- a/www/src/components/header/Header.scss +++ b/www/src/components/header/Header.scss @@ -17,12 +17,12 @@ } &-logo { - font-size: var(--pgn-typography-font-size-mobile-h1); - line-height: var(--pgn-typography-display-line-height-base); + font-size: var(--pgn-typography-font-size-h1-mobile); + line-height: var(--pgn-typography-line-height-display-base); } &-heading { - font-size: var(--pgn-typography-font-size-h3); + font-size: var(--pgn-typography-font-size-h3-base); line-height: var(--pgn-typography-line-height-base); margin: 0; color: var(--pgn-color-white);