Add new theme based on US Web Design Standards

Author: KyleAMathews

packages/typography-theme-us-web-design-standards/README.md

@@ -0,0 +1,18 @@
+# Noriega — a <a href='https://github.com/kyleamathews/typography.js'>Typography.js</a> theme
+
+A theme for Typography.js
+
+## Install
+```bash
+npm install --save typography typography-theme-noriega
+```
+## Usage
+```javascript
+import Typography from 'typography'
+import noriegaTheme from 'typography-theme-noriega'
+
+const typography = new Typography(noriegaTheme)
+```
+## More on theme
+
+Noriega uses "<a href='https://fonts.google.com/specimen/Lato'>Lato</a>" for headers and "<a href='https://fonts.google.com/specimen/Lato'>Lato</a>" for body text

packages/typography-theme-us-web-design-standards/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "typography-theme-us-web-design-standards",
+  "description": "A theme for Typography.js inspired by the US Web Design Standaards https://standards.usa.gov/typography/",
+  "version": "0.11.8",
+  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "main": "./dist/index.js",
+  "keywords": [
+    "css",
+    "typography",
+    "typography-theme"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "../../node_modules/.bin/babel src --out-dir dist/",
+    "flow": "../../node_modules/.bin/flow",
+    "lint": "../../node_modules/.bin/eslint --ext .js,.jsx --ignore-path .gitignore .",
+    "watch": "../../node_modules/.bin/babel -w src --out-dir dist/"
+  },
+  "dependencies": {
+    "gray-percentage": "^1.1.2"
+  }
+}

packages/typography-theme-us-web-design-standards/src/index.js

@@ -0,0 +1,80 @@
+// @flow
+import type { OptionsType } from 'Types'
+import gray from 'gray-percentage'
+
+const theme: OptionsType = {
+  title: 'US Web Design Standards',
+  baseFontSize: '17px',
+  baseLineHeight: '26px',
+  modularScales: [
+    {
+      scale: 2.35,
+    },
+    {
+      scale: 'minor seventh',
+      maxWidth: '768px',
+    },
+  ],
+  googleFonts: [
+    {
+      name: 'Merriweather',
+      styles: [
+        '700',
+      ],
+    },
+    {
+      name: 'Source Sans Pro',
+      styles: [
+        '400',
+        '400i',
+        '700',
+      ],
+    },
+  ],
+  headerFontFamily: ['Merriweather', 'serif'],
+  bodyFontFamily: ['Source Sans Pro', 'sans-serif'],
+  headerGray: 20,
+  bodyGray: 20,
+  headerWeight: 700,
+  bodyWeight: 400,
+  boldWeight: 700,
+  overrideStyles: ({ adjustFontSizeTo, adjustFontSizeToMSValue, rhythm }, options) => ({
+    h1: adjustFontSizeToMSValue(5/5),
+    h2: adjustFontSizeToMSValue(3/5),
+    h3: adjustFontSizeToMSValue(1/5),
+    h4: adjustFontSizeToMSValue(0/5),
+    h5: adjustFontSizeToMSValue(-1/8),
+    h6: {
+      ...adjustFontSizeToMSValue(-2/8),
+      fontFamily: options.bodyFontFamily.join(','),
+      fontWeight: options.bodyWeight,
+      textTransform: 'uppercase',
+    },
+    a: {
+      color: '#0071bc',
+    },
+    'a:visited': {
+      color: '#4c2c92',
+    },
+    blockquote: {
+      ...adjustFontSizeToMSValue(1/4),
+      borderLeft: `${rhythm(1/6)} solid`,
+      borderColor: gray(93),
+      paddingTop: rhythm(1/3),
+      paddingBottom: rhythm(1/3),
+      paddingLeft: rhythm(2/3),
+      paddingRight: rhythm(2/3),
+    },
+    'blockquote > :last-child': {
+      marginBottom: 0,
+    },
+    'blockquote cite': {
+      ...adjustFontSizeTo(options.baseFontSize),
+      color: gray(54, 204),
+      fontWeight: options.bodyWeight,
+      fontStyle: 'normal',
+    },
+  }),
+}
+
+export default theme