README.md

@@ -1,13 +1,11 @@
-# Typography.js
-A powerful toolkit for building websites with beautiful typography.
 # Typography.js [![Build Status][build-badge]][build-status] [![Coverage Status][coverage-badge]][coverage-status]
 A powerful toolkit for building websites with beautiful design.
 
 ## Install
 `npm install typography`
 
 ## Demo/playground
-http://kyleamathews.github.io/typography.js
+https://kyleamathews.github.io/typography.js
 
 ## Why
 The goal of Typography.js is to provide a high-level elegant API for
@@ -158,6 +156,7 @@ const typography = new Typography(funstonTheme)
 * [typography-theme-domo-arigato](https://github.com/aalaap/typography-theme-domo-arigato) - A theme with Roboto fonts
 * [typography-theme-otis](https://github.com/devbewill/typography-theme-otis)
 * [typography-theme-quora](https://github.com/mbao01/typography-theme-quora) - theme based on Quora
+* [typography-theme-vue](https://github.com/Shen-Yu/typography-theme-vue) - inspired by Vue official docs.
 * If you publish your own, create a PR to add it here!
 
 ## Plugins

lerna.json

@@ -1,4 +1,4 @@
 {
   "lerna": "2.0.0",
-  "version": "0.16.21"
+  "version": "0.16.24"
 }

packages/react-typography/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-typography",
   "description": "Helpful React components for Typography.js",
-  "version": "0.16.20",
+  "version": "0.16.23",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "keywords": [
     "css",

packages/typography-design-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typography-design-tools",
-  "version": "0.16.21",
+  "version": "0.16.24",
   "description": "Design tools for Typography.js",
   "main": "./dist/index.js",
   "keywords": [
@@ -27,8 +27,8 @@
     "react-dom": "^15.2.1",
     "react-number-editor": "^4.0.2",
     "react-select": "^1.0.0-beta14",
-    "react-typography": "^0.16.20",
-    "typography": "^0.16.21"
+    "react-typography": "^0.16.23",
+    "typography": "^0.16.24"
   },
   "scripts": {
     "build": "../../node_modules/.bin/babel src --out-dir dist/",

packages/typography/package.json

@@ -1,7 +1,7 @@
 {
   "name": "typography",
   "description": "Opinionated toolkit for building websites with beautiful typography",
-  "version": "0.16.21",
+  "version": "0.16.24",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "compass-vertical-rhythm": "^1.4.5",

packages/typography/src/utils/createStyles.js

@@ -43,7 +43,7 @@ const genericFontFamilies = [
   "-apple-system",
 ]
 const wrapFontFamily = fontFamily =>
-  genericFontFamilies.indexOf(fontFamily) !== -1
+  genericFontFamilies.indexOf(fontFamily) !== -1 || fontFamily.startsWith('var(')
     ? fontFamily
     : `'${fontFamily}'`