1.0.10 release PR

.eslintrc.json

@@ -1,9 +1,12 @@
 {
   "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": true
+  },
   "plugins": ["@typescript-eslint", "prettier"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
     "next/core-web-vitals",
     "prettier"
   ],
@@ -29,7 +32,11 @@
     {
       "files": ["**/*.stories.tsx"],
       "rules": {
-        "@next/next/no-img-element": "off"
+        "@next/next/no-img-element": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off"
       }
     },
     {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-project",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -27,57 +27,60 @@
     "next": "^13.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-select": "^5.7.2"
+    "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@csstools/postcss-global-data": "^1.0.1",
-    "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-actions": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/nextjs": "^7.5.1",
-    "@storybook/react": "^7.5.1",
+    "@babel/core": "^7.23.7",
+    "@csstools/postcss-global-data": "^2.1.1",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/nextjs": "^7.6.10",
+    "@storybook/react": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.1",
+    "@storybook/theming": "^7.6.10",
     "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
-    "@svgr/cli": "^8.0.1",
-    "@types/node": "^16.11.25",
-    "@types/react": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "babel-loader": "^8.3.0",
-    "clsx": "^1.2.1",
-    "css-loader": "^6.8.1",
-    "enhanced-resolve": "5.10.0",
-    "eslint": "^8.13.0",
-    "eslint-config-next": "^13.2.3",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "html-react-parser": "^4.2.2",
-    "husky": "^7.0.4",
-    "inquirer": "^8.2.4",
-    "mkdirp": "^1.0.4",
-    "postcss": "^8.4.21",
+    "@svgr/cli": "^8.1.0",
+    "@types/node": "^18.19.3",
+    "@types/react": "^18.2.48",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
+    "babel-loader": "^9.1.3",
+    "clsx": "^2.1.0",
+    "css-loader": "^6.9.1",
+    "csstype": "3.1.3",
+    "enhanced-resolve": "^5.15.0",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "html-react-parser": "^5.1.1",
+    "husky": "^8.0.3",
+    "i": "^0.3.7",
+    "inquirer": "^9.2.12",
+    "mkdirp": "^3.0.1",
+    "npm": "^10.2.5",
+    "postcss": "^8.4.33",
     "postcss-advanced-variables": "github:kmonahan/postcss-advanced-variables",
-    "postcss-loader": "^7.3.3",
-    "postcss-nesting": "^11.1.0",
-    "postcss-preset-env": "^8.0.1",
+    "postcss-loader": "^7.3.4",
+    "postcss-nesting": "^12.0.2",
+    "postcss-preset-env": "^9.3.0",
     "postcss-rem": "^2.0.2",
-    "prettier": "^2.6.2",
-    "prettier-plugin-organize-imports": "^2.3.4",
-    "storybook": "^7.5.1",
-    "style-loader": "^3.3.3",
-    "stylelint": "^15.5.0",
+    "prettier": "^3.2.4",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "storybook": "^7.6.10",
+    "style-loader": "^3.3.4",
+    "stylelint": "^15.11.0",
     "stylelint-config-standard": "^33.0.0",
-    "stylelint-order": "^6.0.3",
+    "stylelint-order": "^6.0.4",
     "stylelint-webpack-plugin": "^4.1.1",
-    "typescript": "^4.6.3",
-    "yaml": "^2.2.2"
+    "typescript": "^5.3.3",
+    "yaml": "^2.3.4"
   },
   "overrides": {
-    "semver": "7.5.3"
+    "csstype": "3.1.3"
   }
 }

source/00-config/mixins/display-text.css

@@ -1,39 +1,39 @@
 @mixin display-text-display {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-10);
+  font-size: var(--responsive-font-size-15);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
 }
 
 @mixin display-h1 {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-8);
+  font-size: var(--responsive-font-size-12);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
 }
 
 @mixin display-h2 {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-7);
+  font-size: var(--responsive-font-size-10);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
 }
 
 @mixin display-h3 {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-6);
+  font-size: var(--responsive-font-size-8);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
 }
 
 @mixin display-h4 {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--responsive-font-size-5);
+  font-size: var(--responsive-font-size-7);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-base);
 }
@@ -59,7 +59,7 @@
 @mixin display-blockquote {
   color: var(--text-link);
   font-family: var(--font-family-primary);
-  font-size: var(--font-size-5);
+  font-size: var(--font-size-7);
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-base);
 }
@@ -75,7 +75,7 @@
 @mixin display-body-large {
   color: var(--text-primary);
   font-family: var(--font-family-primary);
-  font-size: var(--font-size-4);
+  font-size: var(--font-size-5);
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-base);
 }

source/00-config/mixins/list.css

@@ -40,8 +40,7 @@
     display: block;
     float: inline-start;
     margin-inline-end: 0.75em;
-    padding-inline-end: 0.75em;
-    padding-inline-start: 0;
+    padding-inline: 0 0.75em;
 
     @supports not (float: inline-start) {
       float: left;

source/00-config/vars/typography.css

@@ -10,24 +10,36 @@
   --font-size-1: rem(12px);
   --font-size-2: rem(14px);
   --font-size-3: rem(16px);
-  --font-size-4: rem(20px);
-  --font-size-5: rem(25px);
-  --font-size-6: rem(31.25px);
-  --font-size-7: rem(39.06625px);
-  --font-size-8: rem(48.8281px);
-  --font-size-9: rem(61.0352px);
-  --font-size-10: rem(76.2939px);
+  --font-size-4: rem(18px);
+  --font-size-5: rem(21px);
+  --font-size-6: rem(23px);
+  --font-size-7: rem(26px);
+  --font-size-8: rem(30px);
+  --font-size-9: rem(34px);
+  --font-size-10: rem(39px);
+  --font-size-11: rem(44px);
+  --font-size-12: rem(50px);
+  --font-size-13: rem(56px);
+  --font-size-14: rem(64px);
+  --font-size-15: rem(72px);
 
+  /* The max value should never be more than 2.5 times the min value.
+    https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/ */
   --responsive-font-size-1: responsive-font-size(12px 12px);
   --responsive-font-size-2: responsive-font-size(14px 14px);
   --responsive-font-size-3: responsive-font-size(16px 16px);
-  --responsive-font-size-4: responsive-font-size(18px 20px);
-  --responsive-font-size-5: responsive-font-size(20.25px 25px);
-  --responsive-font-size-6: responsive-font-size(22.7813px 31.25px);
-  --responsive-font-size-7: responsive-font-size(25.6289px 39.0625px);
-  --responsive-font-size-8: responsive-font-size(28.8325px 48.8281px);
-  --responsive-font-size-9: responsive-font-size(32.4366px 61.0352px);
-  --responsive-font-size-10: responsive-font-size(36.4912px 76.2939px);
+  --responsive-font-size-4: responsive-font-size(17px 18px);
+  --responsive-font-size-5: responsive-font-size(19px 21px);
+  --responsive-font-size-6: responsive-font-size(21px 23px);
+  --responsive-font-size-7: responsive-font-size(23px 26px);
+  --responsive-font-size-8: responsive-font-size(26px 30px);
+  --responsive-font-size-9: responsive-font-size(28px 34px);
+  --responsive-font-size-10: responsive-font-size(31px 39px);
+  --responsive-font-size-11: responsive-font-size(34px 44px);
+  --responsive-font-size-12: responsive-font-size(38px 50px);
+  --responsive-font-size-13: responsive-font-size(41px 56px);
+  --responsive-font-size-14: responsive-font-size(46px 64px);
+  --responsive-font-size-15: responsive-font-size(50px 72px);
 
   --font-weight-light: 300;
   --font-weight-regular: 400;

source/01-global/01-typography/fonts.stories.tsx

@@ -43,7 +43,7 @@ const Fonts: StoryObj<FontsArgs> = {
   render: args => {
     return (
       <>
-        {Object.entries(args.fonts as FontOptions).map(([name, fontFamily]) => (
+        {Object.entries(args.fonts).map(([name, fontFamily]) => (
           <div className={styles.fonts} key={name}>
             <h3
               className={styles.family}
@@ -53,47 +53,45 @@ const Fonts: StoryObj<FontsArgs> = {
             >
               {name}
             </h3>
-            {Object.entries(args.weights as WeightOptions).map(
-              ([name, fontWeight]) => (
-                <div className={styles.item} key={name}>
-                  <div
-                    className={styles['preview-character']}
-                    style={{
-                      fontStyle: 'normal',
-                      fontFamily,
-                      fontWeight,
-                    }}
-                  >
-                    AaBbCc
-                  </div>
-                  <div
-                    className={styles.preview}
-                    style={{
-                      fontStyle: 'normal',
-                      fontFamily,
-                      fontWeight,
-                    }}
-                  >
-                    ABCDEFGHIJKLMNOPQRSTUVWXYZ
-                    <br />
-                    abcdefghijklmnopqrstuvwxyz
-                    <br />
-                    1234567890(,.;:?!$&*)
+            {Object.entries(args.weights).map(([name, fontWeight]) => (
+              <div className={styles.item} key={name}>
+                <div
+                  className={styles['preview-character']}
+                  style={{
+                    fontStyle: 'normal',
+                    fontFamily,
+                    fontWeight,
+                  }}
+                >
+                  AaBbCc
+                </div>
+                <div
+                  className={styles.preview}
+                  style={{
+                    fontStyle: 'normal',
+                    fontFamily,
+                    fontWeight,
+                  }}
+                >
+                  ABCDEFGHIJKLMNOPQRSTUVWXYZ
+                  <br />
+                  abcdefghijklmnopqrstuvwxyz
+                  <br />
+                  1234567890(,.;:?!$&*)
+                </div>
+                <div className={styles['preview-meta']}>
+                  <div className={styles.name}>{name}</div>
+                  <div className={styles.weight}>
+                    <span className={styles.label}>Weight:</span>
+                    {fontWeight}
                   </div>
-                  <div className={styles['preview-meta']}>
-                    <div className={styles.name}>{name}</div>
-                    <div className={styles.weight}>
-                      <span className={styles.label}>Weight:</span>
-                      {fontWeight}
-                    </div>
-                    <div className={styles.style}>
-                      <span className={styles.label}>Style:</span>
-                      {fontFamily}
-                    </div>
+                  <div className={styles.style}>
+                    <span className={styles.label}>Style:</span>
+                    {fontFamily}
                   </div>
                 </div>
-              ),
-            )}
+              </div>
+            ))}
           </div>
         ))}
       </>

source/01-global/01-typography/line-height.stories.tsx

@@ -43,26 +43,24 @@ const LineHeight: StoryObj<LineHeightArgs> = {
   render: args => {
     return (
       <>
-        {Object.entries(args.fonts as FontOptions).map(([name, fontFamily]) => (
+        {Object.entries(args.fonts).map(([name, fontFamily]) => (
           <div className={styles['line-height']} key={name}>
             <h2 className={styles.heading}>{name}</h2>
             <div style={{ fontFamily }}>
-              {Object.entries(args.lineHeights as LineHeightOptions).map(
-                ([name, lineHeight]) => (
-                  <div className={styles.row} key={name}>
-                    <div className={styles.label}>{name}</div>
-                    <div className={styles.preview} style={{ lineHeight }}>
-                      The line-height for this text is{' '}
-                      <strong>{lineHeight}</strong> times the font-size. It’s
-                      worth remembering that line height is affected by the
-                      x-height. Much like how different typefaces can appear to
-                      be different heights despite being set at the same font
-                      size, so too can line height appear to be more open or
-                      tighter, depending on each individual font.
-                    </div>
+              {Object.entries(args.lineHeights).map(([name, lineHeight]) => (
+                <div className={styles.row} key={name}>
+                  <div className={styles.label}>{name}</div>
+                  <div className={styles.preview} style={{ lineHeight }}>
+                    The line-height for this text is{' '}
+                    <strong>{lineHeight}</strong> times the font-size. It’s
+                    worth remembering that line height is affected by the
+                    x-height. Much like how different typefaces can appear to be
+                    different heights despite being set at the same font size,
+                    so too can line height appear to be more open or tighter,
+                    depending on each individual font.
                   </div>
-                ),
-              )}
+                </div>
+              ))}
             </div>
           </div>
         ))}