gatsby-design-tokens - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

CHANGELOG.md

		@@ -6,2 +6,6 @@ # Change Log

		# [1.0.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-design-tokens@0.0.2...gatsby-design-tokens@1.0.0) (2019-07-17)

		Note: Version bump only for package gatsby-design-tokens

		## [0.0.2](https://github.com/gatsbyjs/gatsby/compare/gatsby-design-tokens@0.0.1...gatsby-design-tokens@0.0.2) (2019-07-16)
		@@ -8,0 +12,0 @@

package.json

		{
		"name": "gatsby-design-tokens",
		"version": "0.0.2",
		"version": "1.0.0",
		"description": "Gatsby Design Tokens",
		@@ -28,3 +28,3 @@ "main": "index.js",
		},
		"gitHead": "d9fd3901f295e7a47bf9b883c04d395a3376ced2"
		"gitHead": "e774bf7c2894e41513c3042457e8c8379ac95078"
		}

README.md

		# gatsby-design-tokens

		Design tokens for Gatsby products including our brand colours, fonts and other guidelines.
		Design tokens for Gatsby's design system.

		Design tokens originated at Salesforce—quoting the [Lightning Desing System Design Tokens documentation](https://www.lightningdesignsystem.com/design-tokens/):

		> Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

		Gatsby's design tokens are following the [System UI Theme Specification](https://system-ui.com/theme/).
		They are not fully complying to the design token abstraction and are (initially) primarily focused on CSS/JS development – i.e. a potential _output_ from design tokens.

		They also are a work-in-progress but we _do_ follow the [Semantic Versioning](https://semver.org/) specification. As such:

		- Minor fixes to tokens will be released as patch versions
		- Major design changes will be released as minor versions
		- _Breaking_ public API changes will be released in a major versions only

		So to prevent your site from breaking due to a breaking change or looking dramatically different due to a minor version bump, we recommend the [~](https://docs.npmjs.com/misc/semver#tilde-ranges-123-12-1) comparator when using this package

		## Installation

		Using [npm](https://www.npmjs.com/):

		```console
		npm install gatsby-design-tokens --save
		```

		Using [Yarn](https://yarnpkg.com/):

		```console
		yarn add gatsby-design-tokens
		```

		## Usage

		Find a work-in-progress list of design tokens in the design tokens documentation at [gatsbyjs.org/guidelines/design-tokens](https://www.gatsbyjs.org/guidelines/design-tokens/).

		```js
		import {
		borders,
		breakpoints,
		colors,
		fonts,
		fontSizes,
		fontWeights,
		letterSpacings,
		lineHeights,
		mediaQueries,
		radii,
		shadows,
		sizes,
		space,
		transition,
		zIndices,
		} from "gatsby-design-tokens"
		```

z-indices.js

		@@ -6,3 +6,3 @@ "use strict";
		var _default = {
		feedbackWidget: 2,
		widget: 2,
		navigation: 5,
		@@ -12,5 +12,5 @@ banner: 10,
		sidebar: 10,
		sidebarToggleButton: 20,
		floatingActionButton: 20,
		skipLink: 100
		};
		exports.default = _default;

gatsby-design-tokens - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics