refactor: corrected changed values of tokens and CSS variables

package.json

@@ -199,10 +199,10 @@
     ]
   },
   "lint-staged": {
-    "*.{mjs}": [
+    "*.{js,jsx,ts,tsx}": [
       "npx eslint"
     ],
-    "*.sass": [
+    "*.scss": [
       "npx stylelint"
     ]
   },

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;

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 = () => (
-    <Card>
-      <Card.ImageCap
-        src="https://picsum.photos/360/200/"
-        srcAlt="Card image"
-      />
-      <Card.Header title="Card title" />
-      <Card.Section title="Section title">
-        <HipsterIpsum numShortParagraphs={1} />
-      </Card.Section>
-    </Card>
-  );
-
-  return (
-    <CardDeck.Deprecated>
-      <CardComponent />
-      <CardComponent />
-      <CardComponent />
-    </CardDeck.Deprecated>
-  )
-}
-```
-
 ## CardCarousel
 
 Extends `CardDeck` to support navigating between any overflow `Card` components via left and right `IconButton` components as a scrollable carousel.

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

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

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;

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 {

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

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 <root>/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. */

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

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": {

tokens/src/themes/light/components/IconButton.json

@@ -6,17 +6,17 @@
         "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}" },
             "hover": { "$value": "{color.icon-button.accent}" },
             "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" }

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

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