		{
		"name": "@pismo/bolt-typography",
		"version": "0.0.1-7",
		"version": "0.0.1-8",
		"description": "Typography, fonts and vertical rhythm",
		"main": "index.scss",
		"files": [
		"index.scss"
		],
		"main": "index.js",
		"scripts": {
		"test": "npm test"
		"test": "npm test",
		"clean-computed-sass": "rm -f *.js",
		"prepare": "node ../../sass-vars-to-js.js",
		"lint": "node_modules/.bin/eslint --fix"
		},
		@@ -29,3 +29,6 @@ "keywords": [
		"access": "public"
		},
		"devDependencies": {
		"@pismo/eslint-config-bolt": "^0.0.1-8"
		}
		}

README.md

		@@ -17,5 +17,21 @@ # Bolt Typography
		```js
		import '@pismo/bolt-typography'
		import '@pismo/bolt-typography/index.scss'
		```

		You can name the import to make use of the same variables declared in the SCSS files, but in your JS:

		`MyButton.js`:
		```js
		import typography from '@pismo/bolt-typography'

		const btnStyle = {
		fontSize: typography.f1,
		lineHeight: typography.baseLineHeight,
		}

		const MyButton = () => (
		<Button style={btnStyle}>Too big!</Button>
		)
		```

		### Using the variables inside your own SCSS/SASS
		@@ -27,3 +43,3 @@
		```scss
		@import '~@pismo/bolt-typography/font-sizes';
		@import '~@pismo/bolt-typography/_font-sizes';

		@@ -35,2 +51,17 @@ .my-class {

		e.g.: We're using the `$f1` variable from the file `font-sizes.scss` of `@pismo/bolt-typography`.
		Or import them all, I don't care

		```MyApp/style.scss`:
		```scss
		@import '~@pismo/bolt-typography/index.scss';

		.my-class {
		line-height: $baseLineHeight;
		}
		```

		e.g.: We're using the `$f1` variable from the file `_font-sizes.scss` of `@pismo/bolt-typography`.

		### Development

		Edit the `.scss` files. All the JS files are generated automatically upon commit.

index.scss

Sorry, the diff of this file is not supported yet

@pismo/bolt-typography - npm Package Compare versions

New alerts