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);