Update to latest theme and font packages

virtualeconomy · Feb 3, 2021 · 70a6a17 · 70a6a17
1 parent 812bb6e
commit 70a6a17
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "prettier": "@pxblue/prettier-config",
     "dependencies": {
         "@brainhubeu/react-carousel": "^1.12.15",
+        "@fontsource/roboto-mono": "^4.1.1",
         "@material-ui/core": "^4.11.0",
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.56",
@@ -33,7 +34,7 @@
         "@pxblue/icons-mui": "^2.2.1",
         "@pxblue/react-components": "^4.1.1",
         "@pxblue/react-progress-icons": "^2.1.0",
-        "@pxblue/react-themes": "^5.0.2",
+        "@pxblue/react-themes": "^6.0.0-beta.0",
         "axios": "^0.19.2",
         "clsx": "^1.1.0",
         "color": "^3.1.3",
@@ -129,8 +130,6 @@
         "style-loader": "1.0.0",
         "terser-webpack-plugin": "^4.2.2",
         "ts-pnp": "1.1.5",
-        "typeface-open-sans": "0.0.75",
-        "typeface-roboto-mono": "^0.0.75",
         "typescript": "~3.7.2",
         "url-loader": "2.3.0",
         "webpack": "4.41.2",

diff --git a/src/database/index-database.json b/src/database/index-database.json
@@ -4461,7 +4461,7 @@
             { "/style/themes": 1 }
         ],
         "angular": [
-            { "/development/frameworks-web/angular": 32 },
+            { "/development/frameworks-web/angular": 33 },
             { "/development/testing": 8 },
             { "/development/frameworks-mobile/ionic": 7 },
             { "/development/frameworks-web/intro": 6 },
@@ -4488,7 +4488,7 @@
         ],
         "react": [
             { "/development/frameworks-mobile/react-native": 48 },
-            { "/development/frameworks-web/react": 20 },
+            { "/development/frameworks-web/react": 21 },
             { "/development/testing": 12 },
             { "/development/frameworks-mobile/intro": 9 },
             { "/patterns/loading": 7 },
@@ -5415,6 +5415,7 @@
             { "/development/frameworks-mobile/react-native": 2 },
             { "/community/our-team": 2 },
             { "/development/environment": 1 },
+            { "/development/frameworks-web/angular": 1 },
             { "/patterns/visualizations": 1 },
             { "/community/bugs": 1 },
             { "/community/features": 1 },
@@ -6100,9 +6101,9 @@
             { "/development/frameworks-mobile/react-native": 1 }
         ],
         "themes": [
+            { "/development/frameworks-web/angular": 11 },
             { "/style/themes": 11 },
-            { "/development/frameworks-web/angular": 10 },
-            { "/development/frameworks-web/react": 6 },
+            { "/development/frameworks-web/react": 7 },
             { "/development/frameworks-mobile/react-native": 6 },
             { "/design/project-identity": 5 },
             { "/community/faq": 3 },
@@ -6140,9 +6141,9 @@
             { "/development/frameworks-mobile/react-native": 1 }
         ],
         "pxblue": [
-            { "/development/frameworks-web/angular": 12 },
+            { "/development/frameworks-web/angular": 13 },
+            { "/development/frameworks-web/react": 12 },
             { "/development/frameworks-mobile/react-native": 12 },
-            { "/development/frameworks-web/react": 11 },
             { "/development/frameworks-mobile/ionic": 7 },
             { "/patterns/appbar": 3 },
             { "/patterns/empty-states": 3 },
@@ -6656,8 +6657,8 @@
         ],
         "font": [
             { "/style/typography": 9 },
+            { "/development/frameworks-web/angular": 4 },
             { "/design/websites": 4 },
-            { "/development/frameworks-web/angular": 3 },
             { "/development/frameworks-web/react": 3 },
             { "/development/frameworks-mobile/react-native": 3 },
             { "/design/accessibility": 3 },
@@ -6666,7 +6667,6 @@
             { "/patterns/internationalization": 1 },
             { "/style/illustrations": 1 }
         ],
-        "typeface": [{ "/development/frameworks-web/angular": 2 }, { "/development/frameworks-web/react": 2 }],
         "ie": [{ "/development/frameworks-web/angular": 1 }, { "/development/frameworks-web/react": 1 }],
         "refer": [
             { "/development/frameworks-mobile/react-native": 4 },
@@ -6897,7 +6897,7 @@
             { "/style/illustrations": 1 }
         ],
         "src": [{ "/development/frameworks-web/angular": 1 }],
-        "scss": [{ "/development/frameworks-web/angular": 2 }, { "/style/themes": 1 }],
+        "scss": [{ "/development/frameworks-web/angular": 3 }, { "/style/themes": 1 }],
         "node_modules": [{ "/development/frameworks-web/angular": 2 }],
         "applying": [
             { "/development/frameworks-web/angular": 2 },
@@ -7091,12 +7091,13 @@
             { "/development/frameworks-mobile/react-native": 1 }
         ],
         "mui": [{ "/development/frameworks-web/react": 1 }],
+        "fontsource": [{ "/development/frameworks-web/react": 1 }],
         "polyfills": [{ "/development/frameworks-web/react": 1 }],
         "polyfill": [{ "/development/frameworks-web/react": 1 }],
         "enzyme": [{ "/development/frameworks-web/react": 3 }, { "/development/testing": 1 }],
         "adapter": [{ "/development/frameworks-web/react": 1 }],
         "import": [
-            { "/development/frameworks-web/react": 1 },
+            { "/development/frameworks-web/react": 2 },
             { "/development/frameworks-mobile/react-native": 1 },
             { "/community/innersourcing": 1 }
         ],
@@ -7108,15 +7109,6 @@
             { "/patterns/internationalization": 1 }
         ],
         "tsx": [{ "/development/frameworks-web/react": 2 }, { "/development/frameworks-mobile/react-native": 2 }],
-        "require": [
-            { "/patterns/internationalization": 3 },
-            { "/patterns/user-auth": 2 },
-            { "/style/color": 2 },
-            { "/community/innersourcing": 2 },
-            { "/development/frameworks-web/react": 1 },
-            { "/design/websites": 1 },
-            { "/patterns/navigation": 1 }
-        ],
         "whole": [{ "/development/frameworks-web/react": 1 }, { "/patterns/user-auth": 1 }],
         "simply": [
             { "/development/frameworks-web/react": 1 },
@@ -9351,6 +9343,14 @@
             { "/style/illustrations": 1 }
         ],
         "highlight": [{ "/patterns/lists": 2 }, { "/design/websites": 1 }, { "/patterns/navigation": 1 }],
+        "require": [
+            { "/patterns/internationalization": 3 },
+            { "/patterns/user-auth": 2 },
+            { "/style/color": 2 },
+            { "/community/innersourcing": 2 },
+            { "/design/websites": 1 },
+            { "/patterns/navigation": 1 }
+        ],
         "highly": [{ "/design/websites": 1 }, { "/community/faq": 1 }],
         "legible": [{ "/design/websites": 1 }, { "/style/illustrations": 1 }],
         "script": [{ "/design/websites": 1 }],

diff --git a/src/database/sitemap-database.json b/src/database/sitemap-database.json
diff --git a/src/docs/development/frameworks-web/angular.mdx b/src/docs/development/frameworks-web/angular.mdx
@@ -23,7 +23,7 @@ The PX Blue CLI will automatically include:
 -   PX Blue Themes ([@pxblue/angular-themes](https://www.npmjs.com/package/@pxblue/angular-themes))
 -   PX Blue Icons ([@pxblue/icons](https://www.npmjs.com/package/@pxblue/icons))
 -   PX Blue Colors ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors))
--   Open Sans web font ([typeface-open-sans](https://www.npmjs.com/package/typeface-open-sans))
+-   Open Sans web font ([@font-source/open-sans](https://www.npmjs.com/package/@fontsource/open-sans))
 -   PX Blue ESLint and Prettier configurations, if selected ([@pxblue/eslint-config](https://www.npmjs.com/package/@pxblue/eslint-config) / [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config))
 -   IE 11 Support
 
@@ -79,7 +79,7 @@ Installing the theme package will automatically include the Open Sans web font p
 "styles": [
     "src/styles.scss",
     "./node_modules/@pxblue/angular-themes/theme.scss",
-    "./node_modules/typeface-open-sans"
+    "./node_modules/@pxblue/angular-themes/open-sans.scss",
 ],
 ```
 

diff --git a/src/docs/development/frameworks-web/react.mdx b/src/docs/development/frameworks-web/react.mdx
@@ -23,7 +23,7 @@ The PX Blue CLI will automatically include:
 -   PX Blue Themes ([@pxblue/react-themes](https://www.npmjs.com/package/@pxblue/react-themes))
 -   PX Blue Icons ([@pxblue/icons-mui](https://www.npmjs.com/package/@pxblue/icons-mui))
 -   PX Blue Colors ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors))
--   Open Sans web font ([typeface-open-sans](https://www.npmjs.com/package/typeface-open-sans))
+-   Open Sans web font ([@fontsource/open-sans](https://www.npmjs.com/package/@fontsource/open-sans))
 -   PX Blue ESLint and Prettier configurations, if selected ([@pxblue/eslint-config](https://www.npmjs.com/package/@pxblue/eslint-config) / [@pxblue/prettier-config](https://www.npmjs.com/package/@pxblue/prettier-config))
 -   IE 11 Polyfills ([react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill))
 -   Enzyme testing library ([enzyme](https://www.npmjs.com/package/enzyme) / [enzyme-adapter-react-16](https://www.npmjs.com/package/enzyme-adapter-react-16))
@@ -84,7 +84,7 @@ Import the theme files, Material UI theme provider, and **Open Sans** font into
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import * as PXBThemes from '@pxblue/react-themes';
-require('typeface-open-sans');
+import '@pxblue/react-themes/open-sans';
 ```
 
 To add the theme to your whole application, you would simply add a `<ThemeProvider>` around your top-level component and pass it the theme you want to use, e.g.:

diff --git a/src/index.tsx b/src/index.tsx
@@ -7,8 +7,10 @@ import * as serviceWorker from './serviceWorker';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { getScheduledSiteConfig } from './__configuration__/themes';
-import 'typeface-open-sans';
-import 'typeface-roboto-mono';
+import '@pxblue/react-themes/open-sans';
+import '@fontsource/roboto-mono/400.css';
+import '@fontsource/roboto-mono/600.css';
+import '@fontsource/roboto-mono/700.css';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import { MDXProvider } from '@mdx-js/react';

diff --git a/yarn.lock b/yarn.lock
@@ -1535,6 +1535,16 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@fontsource/open-sans@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/open-sans/-/open-sans-4.1.0.tgz#d44b4495bd23d78018675e4e79973894e393c0ed"
+  integrity sha512-sWDAAr6ESHJdBKXse6njvZem4sTZLILkugaEfAvpdFiaKBh2RnXTa4DJllDh5LzP0MLMUrfj/JAjMbKxWFo6pQ==
+
+"@fontsource/roboto-mono@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-4.1.1.tgz#85d1547db7f58ea096b4bd15d06fc7aa2c735883"
+  integrity sha512-eMz2LIZZRlq+2tZZ/kI+JeDBJQ1mtR3bV64K1xlb9diRURoLK6Nhj8L/TEuwna7YxWLW+Op4U70n63dTWMcGKA==
+
 "@hapi/address@2.x.x", "@hapi/address@^2.1.2":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -2081,13 +2091,13 @@
     color "^3.1.2"
     react-jss "^10.4.0"
 
-"@pxblue/react-themes@^5.0.2":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@pxblue/react-themes/-/react-themes-5.0.2.tgz#468b5c4892337599a7718e111717d75b5f3b7815"
-  integrity sha512-HEyBHbEo/KQnr0jHKP4wiQl1zqaYKHFnWo9MpQp0prlQJ2ryswLXQfgvubJ7lWkJmrN+dLjYx556wuiEjCrG3A==
+"@pxblue/react-themes@^6.0.0-beta.0":
+  version "6.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@pxblue/react-themes/-/react-themes-6.0.0-beta.0.tgz#885e861769c9ffebef87fae0546d0bacddaadfe6"
+  integrity sha512-dTYJnt6YJbWgo253sqcpz0sGjyy0+NSEEili45dscszb9iq+9zWpQUtSXIGrLQHHRexJoGxuuiQ7F8Wa22G7Rg==
   dependencies:
+    "@fontsource/open-sans" "^4.1.0"
     "@pxblue/colors" "^3.0.0"
-    typeface-open-sans "^0.0.75"
 
 "@pxblue/types@^2.0.0":
   version "2.0.0"
@@ -14637,16 +14647,6 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typeface-open-sans@0.0.75, typeface-open-sans@^0.0.75:
-  version "0.0.75"
-  resolved "https://registry.yarnpkg.com/typeface-open-sans/-/typeface-open-sans-0.0.75.tgz#20d0c330f14c0c40463c334adbedd6005389abe4"
-  integrity sha512-0lLmB7pfj113OP4T78SbpSmC4OCdFQ0vUxdSXQccsSb6qF76F92iEuC/DghFgmPswTyidk8+Hwf+PS/htiJoRQ==
-
-typeface-roboto-mono@^0.0.75:
-  version "0.0.75"
-  resolved "https://registry.yarnpkg.com/typeface-roboto-mono/-/typeface-roboto-mono-0.0.75.tgz#00c4543662066a837c014c251ee5140fb66a5ad8"
-  integrity sha512-dYfyXd6HrKyMC/PuBAAtay0tZKsBrzxIW/fBY325vLxFfi/IDKSuyTkWxkU4lyZV6KPHetFnJ661PNXzz2FS/w==
-
 typescript@~3.7.2:
   version "3.7.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"