Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

gatsby-design-tokens

Package Overview
Dependencies
Maintainers
16
Versions
210
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby-design-tokens - npm Package Compare versions

Comparing version 1.0.10 to 2.0.0

6

CHANGELOG.md

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

# [2.0.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-design-tokens@1.0.10...gatsby-design-tokens@2.0.0) (2020-02-10)
### Features
- **gatsby-design-tokens:** v2 ([#21240](https://github.com/gatsbyjs/gatsby/issues/21240)) ([f754fc2](https://github.com/gatsbyjs/gatsby/commit/f754fc2))
## [1.0.10](https://github.com/gatsbyjs/gatsby/compare/gatsby-design-tokens@1.0.9...gatsby-design-tokens@1.0.10) (2019-10-14)

@@ -8,0 +14,0 @@

2

dist/index.js

@@ -1,1 +0,1 @@

var e={xxs:0,xs:"400px",sm:"550px",md:"750px",lg:"1000px",xl:"1200px",xxl:"1600px"},f=["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"],a={system:f,header:["Futura PT"].concat(f),monospace:["SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New","monospace"],serif:["Georgia","Times New Roman","Times","serif"]},r={};for(var o in e)r[o]="@media (min-width: "+e[o]+")";exports.borders=[0,"1px solid","2px solid"],exports.breakpoints=e,exports.colors={purple:{5:"#fcfaff",10:"#f6edfa",20:"#f1defa",30:"#d9bae8",40:"#b17acc",50:"#8a4baf",60:"#663399",70:"#542c85",80:"#452475",90:"#362066"},orange:{5:"#fffcf7",10:"#fff4db",20:"#ffedbf",30:"#ffe4a1",40:"#ffd280",50:"#ffb238",60:"#fb8400",70:"#f67300",80:"#e65800",90:"#db3a00"},yellow:{5:"#fffdf7",10:"#fff5bf",20:"#fff2a8",30:"#ffeb99",40:"#ffdf37",50:"#fed038",60:"#fec21e",70:"#e3a617",80:"#bf9141",90:"#8a6534"},red:{5:"#fffafa",10:"#fde7e7",20:"#ffbab8",30:"#ff8885",40:"#ff5a54",50:"#fa2915",60:"#ec1818",70:"#da0013",80:"#ce0009",90:"#b80000"},magenta:{5:"#fffafd",10:"#ffe6f6",20:"#f2c4e3",30:"#e899ce",40:"#d459ab",50:"#bc027f",60:"#a6026a",70:"#940159",80:"#7d0e59",90:"#690147"},blue:{5:"#f5fcff",10:"#dbf0ff",20:"#90cdf9",30:"#63b8f6",40:"#3fa9f5",50:"#0d96f2",60:"#0e8de6",70:"#047bd3",80:"#006ac1",90:"#004ca3"},teal:{5:"#f7ffff",10:"#dcfffd",20:"#ccfffc",30:"#a6fffa",40:"#73fff7",50:"#05f7f4",60:"#2de3da",70:"#00bdb6",80:"#10a39e",90:"#008577"},green:{5:"#f7fdf7",10:"#def5dc",20:"#a1da9e",30:"#79cd75",40:"#59c156",50:"#37b635",60:"#2ca72c",70:"#1d9520",80:"#088413",90:"#006500"},grey:{5:"#fbfbfb",10:"#f5f5f5",20:"#f0f0f2",30:"#d9d7e0",40:"#b7b5bd",50:"#78757a",60:"#635e69",70:"#48434f",80:"#36313d",90:"#232129"},white:"#ffffff",black:"#000000",gatsby:"#663399",lilac:"#8a4baf",lavender:"#f1defa",accent:"#ffb238",warning:"#da0013",blackFade:{10:"rgba(35, 33, 41, 0.1)",30:"rgba(35, 33, 41, 0.3)",50:"rgba(35, 33, 41, 0.5)",60:"rgba(35, 33, 41, 0.6)",70:"rgba(35, 33, 41, 0.7)",80:"rgba(35, 33, 41, 0.85)"},whiteFade:{10:"rgba(255, 255, 255, 0.1)",30:"rgba(255, 255, 255, 0.3)",50:"rgba(255, 255, 255, 0.5)",60:"rgba(255, 255, 255, 0.6)",70:"rgba(255, 255, 255, 0.7)",80:"rgba(255, 255, 255, 0.85)"},ui:{background:"#fbfbfb",hover:"#fcfaff",border:{subtle:"#f0f0f2"}},link:{color:"#8a4baf",border:"#d9bae8",hoverBorder:"#8a4baf"},text:{header:"#000000",primary:"#36313d",secondary:"#78757a",placeholder:"#b7b5bd"},input:{border:"#d9d7e0",focusBorder:"#ffd280",focusBoxShadow:"#ffedbf"},code:{bgInline:"#fbf2e9",bg:"#fdfaf6",border:"#faede5",text:"#866c5b",remove:"#e45c5c",add:"#4a9c59",selector:"#b3568b",tag:"#4084a1",keyword:"#538eb6",comment:"#6f8f39",punctuation:"#53450e",regex:"#d88489",cssString:"#a2466c",invisibles:"#e0d7d1",scrollbarThumb:"#f4d1c6",lineHighlightBorder:"#f1beb6"}},exports.fontSizes=[12,14,16,18,20,24,28,32,36,42,48,54,60,68,76,84,92],exports.fontWeights=[400,700,800],exports.fonts=a,exports.letterSpacings={normal:"normal",tracked:"0.075em",tight:"-0.015em"},exports.lineHeights={solid:1,dense:1.25,default:1.5,loose:1.75},exports.mediaQueries=r,exports.radii=[0,2,4,8,16,9999,"100%"],exports.shadows={raised:"0px 1px 2px rgba(46, 41, 51, 0.08), 0px 2px 4px rgba(71, 63, 79, 0.08)",floating:"0px 2px 4px rgba(46, 41, 51, 0.08), 0px 4px 8px rgba(71, 63, 79, 0.16)",overlay:"0px 4px 8px rgba(46, 41, 51, 0.08), 0px 8px 16px rgba(71, 63, 79, 0.16)",dialog:"0px 4px 16px rgba(46, 41, 51, 0.08), 0px 8px 24px rgba(71, 63, 79, 0.16)"},exports.sizes={headerHeight:"3.75rem",bannerHeight:"2.5rem",sidebarUtilityHeight:"3.5rem",pageHeadingDesktopWidth:"3.5rem",sidebarWidth:{default:11,large:12},avatar:"2rem"},exports.space=[0,4,8,12,16,20,24,32,40,48,56,64,72],exports.transition={curve:{default:"cubic-bezier(0.4, 0, 0.2, 1)"},speed:{default:"250ms",fast:"100ms",slow:"350ms"}},exports.zIndices={widget:2,navigation:5,banner:10,modal:10,sidebar:10,floatingActionButton:20,skipLink:100};
var e={xs:"400px",sm:"550px",md:"750px",lg:"1000px",xl:"1200px",xxl:"1600px"},o=[];for(var a in e)o.push(e[a]);var r=o,f={};for(var s in e)f[s]="@media (min-width: "+e[s]+")";var p=f;exports.borders=[0,"1px solid","2px solid"],exports.breakpoints=e,exports.breakpointsArray=r,exports.colors={purple:{5:"#fcfaff",10:"#f6edfa",20:"#f1defa",30:"#d9bae8",40:"#b17acc",50:"#8a4baf",60:"#663399",70:"#542c85",80:"#452475",90:"#362066"},orange:{5:"#fffcf7",10:"#fff4db",20:"#ffedbf",30:"#ffe4a1",40:"#ffd280",50:"#ffb238",60:"#fb8400",70:"#f67300",80:"#e65800",90:"#db3a00"},yellow:{5:"#fffdf7",10:"#fff5bf",20:"#fff2a8",30:"#ffeb99",40:"#ffdf37",50:"#fed038",60:"#fec21e",70:"#e3a617",80:"#bf9141",90:"#8a6534"},red:{5:"#fffafa",10:"#fde7e7",20:"#ffbab8",30:"#ff8885",40:"#ff5a54",50:"#fa2915",60:"#ec1818",70:"#da0013",80:"#ce0009",90:"#b80000"},magenta:{5:"#fffafd",10:"#ffe6f6",20:"#f2c4e3",30:"#e899ce",40:"#d459ab",50:"#bc027f",60:"#a6026a",70:"#940159",80:"#7d0e59",90:"#690147"},blue:{5:"#f5fcff",10:"#dbf0ff",20:"#90cdf9",30:"#63b8f6",40:"#3fa9f5",50:"#0d96f2",60:"#0e8de6",70:"#047bd3",80:"#006ac1",90:"#004ca3"},teal:{5:"#f7ffff",10:"#dcfffd",20:"#ccfffc",30:"#a6fffa",40:"#73fff7",50:"#05f7f4",60:"#2de3da",70:"#00bdb6",80:"#10a39e",90:"#008577"},green:{5:"#f7fdf7",10:"#def5dc",20:"#a1da9e",30:"#79cd75",40:"#59c156",50:"#37b635",60:"#2ca72c",70:"#1d9520",80:"#088413",90:"#006500"},grey:{5:"#fbfbfb",10:"#f5f5f5",20:"#f0f0f2",30:"#d9d7e0",40:"#b7b5bd",50:"#78757a",60:"#635e69",70:"#48434f",80:"#36313d",90:"#232129"},white:"#ffffff",black:"#000000",gatsby:"#663399",lilac:"#8a4baf",lavender:"#f1defa",accent:"#ffb238",warning:"#da0013",blackFade:{5:"rgba(35, 33, 41, 0.05)",10:"rgba(35, 33, 41, 0.1)",20:"rgba(35, 33, 41, 0.2)",30:"rgba(35, 33, 41, 0.3)",40:"rgba(35, 33, 41, 0.4)",50:"rgba(35, 33, 41, 0.5)",60:"rgba(35, 33, 41, 0.6)",70:"rgba(35, 33, 41, 0.7)",80:"rgba(35, 33, 41, 0.8)",90:"rgba(35, 33, 41, 0.9)"},whiteFade:{5:"rgba(255, 255, 255, 0.05)",10:"rgba(255, 255, 255, 0.1)",20:"rgba(255, 255, 255, 0.2)",30:"rgba(255, 255, 255, 0.3)",40:"rgba(255, 255, 255, 0.4)",50:"rgba(255, 255, 255, 0.5)",60:"rgba(255, 255, 255, 0.6)",70:"rgba(255, 255, 255, 0.7)",80:"rgba(255, 255, 255, 0.8)",90:"rgba(255, 255, 255, 0.9)"},ui:{background:"#fbfbfb",hover:"#fcfaff",border:{subtle:"#f0f0f2"}},link:{color:"#8a4baf",border:"#d9bae8",hoverBorder:"#8a4baf"},text:{header:"#000000",primary:"#36313d",secondary:"#78757a",placeholder:"#b7b5bd"},input:{border:"#d9d7e0",focusBorder:"#ffd280",focusBoxShadow:"#ffedbf"},code:{bgInline:"#fbf2e9",bg:"#fdfaf6",border:"#faede5",text:"#866c5b",remove:"#da0013",add:"#088413",selector:"#b94185",tag:"#137886",keyword:"#096fb3",comment:"#527713",punctuation:"#53450e",regex:"#dc0437",cssString:"#a2466c",invisibles:"#e0d7d1",scrollbarThumb:"#f4d1c6",lineHighlightBorder:"#f1beb6",copyButton:"#635e69",lineHighlightBackground:"#fbf0ea",scrollbarTrack:"#faede5"}},exports.fontSizes=["0.75rem","0.875rem","1rem","1.125rem","1.25rem","1.5rem","1.75rem","2rem","2.25rem","2.625rem","3rem","3.375rem","3.75rem","4.25rem","4.75rem","5.25rem","5.75rem"],exports.fontSizesPx=["12px","14px","16px","18px","20px","24px","28px","32px","36px","42px","48px","54px","60px","68px","76px","84px","92px"],exports.fontSizesRaw=[12,14,16,18,20,24,28,32,36,42,48,54,60,68,76,84,92],exports.fontWeights={body:400,semiBold:600,bold:700,extraBold:800,heading:700},exports.fonts={body:"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",system:"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",heading:"Futura PT, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",monospace:"SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",serif:"Georgia, Times New Roman, Times, serif"},exports.fontsLists={body:["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"],system:["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"],heading:["Futura PT","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","sans-serif","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"],monospace:["SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New","monospace"],serif:["Georgia","Times New Roman","Times","serif"]},exports.letterSpacings={normal:"normal",tracked:"0.075em",tight:"-0.015em"},exports.lineHeights={solid:1,dense:1.25,heading:1.25,default:1.5,body:1.5,loose:1.75},exports.mediaQueries=p,exports.radii=[0,"2px","4px","8px","16px","9999px","100%"],exports.shadows={raised:"0px 1px 2px rgba(46, 41, 51, 0.08), 0px 2px 4px rgba(71, 63, 79, 0.08)",floating:"0px 2px 4px rgba(46, 41, 51, 0.08), 0px 4px 8px rgba(71, 63, 79, 0.16)",overlay:"0px 4px 8px rgba(46, 41, 51, 0.08), 0px 8px 16px rgba(71, 63, 79, 0.16)",dialog:"0px 4px 16px rgba(46, 41, 51, 0.08), 0px 8px 24px rgba(71, 63, 79, 0.16)"},exports.space=["0rem","0.25rem","0.5rem","0.75rem","1rem","1.25rem","1.5rem","2rem","2.5rem","3rem","3.5rem","4rem","4.5rem"],exports.spacePx=["0px","4px","8px","12px","16px","20px","24px","32px","40px","48px","56px","64px","72px"],exports.spaceRaw=[0,4,8,12,16,20,24,32,40,48,56,64,72],exports.transition={default:"250ms cubic-bezier(0.4, 0, 0.2, 1)",curve:{default:"cubic-bezier(0.4, 0, 0.2, 1)",fastOutLinearIn:"cubic-bezier(0.4, 0, 1, 1)"},speed:{faster:"50ms",fast:"100ms",default:"250ms",slow:"500ms",slower:"1000ms"}};

14

package.json
{
"name": "gatsby-design-tokens",
"version": "1.0.10",
"version": "2.0.0",
"description": "Gatsby Design Tokens",

@@ -20,7 +20,13 @@ "main": "dist/index.js",

"scripts": {
"build": "(microbundle build --sourcemap=false -f es,cjs && agadoo dist/index.esm.js) || node -e \"console.log('\\nMicrobundle failed, make sure you\\'re using node version 10.16 or higher\\n');process.exit(1)\"",
"build": "npm run build:tokens && npm run build:theme && npm run build:theme-gatsbyjs-org",
"prepare": "cross-env NODE_ENV=production npm run build",
"watch": "microbundle watch --sourcemap=false -f es,cjs"
"watch": "microbundle watch {src/index.js,src/theme.js,src/theme-gatsbyjs-org.js} --sourcemap=false -f es,cjs",
"build:tokens": "(microbundle build --sourcemap=false -f es,cjs && agadoo dist/index.esm.js) || node -e \"console.log('\\nMicrobundle failed, make sure you\\'re using node version 10.16 or higher\\n');process.exit(1)\"",
"build:theme": "(microbundle build src/theme.js -o dist/theme.js --sourcemap=false -f es,cjs) || node -e \"console.log('\\nMicrobundle failed, make sure you\\'re using node version 10.16 or higher\\n');process.exit(1)\"",
"build:theme-gatsbyjs-org": "(microbundle build src/theme-gatsbyjs-org.js -o dist/theme-gatsbyjs-org.js --sourcemap=false -f es,cjs) || node -e \"console.log('\\nMicrobundle failed, make sure you\\'re using node version 10.16 or higher\\n');process.exit(1)\""
},
"homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-design-tokens#readme",
"dependencies": {
"hex2rgba": "^0.0.1"
},
"devDependencies": {

@@ -32,3 +38,3 @@ "agadoo": "^1.1.0",

},
"gitHead": "96a745cd3a9659a40e31e3b02964c2f4392ff596"
"gitHead": "5aa8ecc2225f29cc6e08d67dc914dc8c5211300a"
}

211

README.md

@@ -0,19 +1,34 @@

<img src="https://user-images.githubusercontent.com/21834/74070062-35b91980-4a00-11ea-93a8-b77bde7b4c37.png" width="48" height="48" alt="rebeccapurple dot" />
<br>
<br>
# gatsby-design-tokens
Design tokens for Gatsby's design system.
<a href="https://www.npmjs.org/package/gatsby-design-tokens">
<img src="https://img.shields.io/npm/v/gatsby-design-tokens.svg" alt="Current npm package version." />
</a>
<a href="https://npmcharts.com/compare/gatsby-design-tokens?minimal=true">
<img src="https://img.shields.io/npm/dm/gatsby-design-tokens.svg" alt="Downloads per month on npm." />
</a>
<a href="https://npmcharts.com/compare/gatsby-design-tokens?minimal=true">
<img src="https://img.shields.io/npm/dt/gatsby-design-tokens.svg" alt="Total downloads on npm." />
</a>
Design tokens originated at Salesforce—quoting the [Lightning Desing System Design Tokens documentation](https://www.lightningdesignsystem.com/design-tokens/):
## Introduction
> 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.
This quote from the [Lightning Desing System Design Tokens documentation](https://www.lightningdesignsystem.com/design-tokens/) accurately describes the tokens contained in this package — to be a bit more specific: `gatsby-design-tokens` offers _plain objects or arrays of values for related **CSS properties**_. Currently.
They also are a work-in-progress but we _do_ follow the [Semantic Versioning](https://semver.org/) specification. As such:
Gatsby's design tokens are following the [System UI Theme Specification](https://system-ui.com/theme/) as well as the [Theme UI Theme Specification](https://theme-ui.com/theme-spec).
- Minor fixes to tokens will be released as patch versions
### Project state and versioning
`gatsby-design-tokens` is a work-in-progress, but versions _do_ follow the [Semantic Versioning](https://semver.org/) specification:
- 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
- _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
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.

@@ -34,5 +49,5 @@ ## Installation

## Usage
## Tokens 🍒🍋🍏
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/).
All exports provide either plain objects or arrays of values for related CSS properties:

@@ -42,12 +57,111 @@ ```js

borders,
// [ 0, `1px solid`, `2px solid` ]
breakpoints,
// { xs:`400px`, sm:`550px`, …}
breakpointsArray,
// [ "400px", "550px", …]
colors,
// { primary:`#639`, blackFade: { 5: `rgba(…)`, 10: …}, …}
fonts,
// { body: `-apple-system, …, sans-serif`, monospace: {…} }
fontsLists,
// { body: [`-apple-system`, …, `sans-serif`], monospace: […] }
fontSizes,
// [ `0.75rem`, …, `5.75rem` ]
fontSizesPx,
// [ `12px`, …, `92px` ]
fontSizesRaw,
// [ 12, 14, 16, 18, 20, 24, 28, 32, …, 84, 92 ]
fontWeights,
// { body: 400, semiBold: 600, …, heading: 700 }
letterSpacings,
// { normal: "normal", tracked: "0.075em", tight: "-0.015em" }
lineHeights,
// { solid: 1, dense: 1.25, … }
mediaQueries,
// { xs: "@media (min-width: 400px)", …, xxl: "@media (min-width: 1600px)" }
radii,
// [ 0, "2px", "4px", "8px", "16px", "9999px", "100%" ]
shadows,
// { raised: `0px 1px 2px rgba(46,…)`, floating: `0px 2px 4px…` }
space,
// [ "0rem", "0.25rem", "0.5rem", …, "4.5rem"]
spacePx,
// [ "0px", "4px", "8px", …, "72px"]
spaceRaw,
// [ 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72]
transition,
// transition = {
// default: `250ms cubic-bezier(0.4, 0, 0.2, 1)`,
// curve: { default: `cubic-bezier(0.4, 0, 0.2, 1)`, … },
// speed: { faster: `50ms`, … },
// }
} from "gatsby-design-tokens"
```
- `rem` values are based on a `font-size` of `16px` for the root element.
- All tokens work in the context of [Theme UI's Theme Scales](https://theme-ui.com/theme-spec/#theme-scales), with the exception of `breakpoints`: Use `breakpointsArray` for `theme-ui` and its [responsive styles](https://theme-ui.com/getting-started/#responsive-styles) feature.
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/).
## `theme-ui` themes 🎨
### `theme`
A basic `theme-ui` theme composed of unmodified tokens, with one exception: `colors` are modified to provide the basic set of variables described in https://theme-ui.com/theme-spec#color.
TBD: Adopt the `theme-ui` definitions for the basic `colors` tokens.
```js
import { theme } from "gatsby-design-tokens/dist/theme"
// when used with `gatsby-plugin-theme-ui`, export the theme
// as default from `src/gatsby-plugin-theme-ui/index.js`
export { theme as default } from "gatsby-design-tokens/dist/theme"
// in case you need theme tokens outside of the `emotion` context
import {
breakpoints,
colors,
fonts,
fontSizes,
fontWeights,
letterSpacings,
lineHeights,
mediaQueries,
radii,
shadows
space,
transition,
} from "gatsby-design-tokens/dist/theme
```
### `theme-gatsbyjs-org`
The theme currently in use on gatsbyjs.org via `gatsby-plugin-theme-ui`:
- Extends the base theme's `colors` with a couple .org-specific things, and provides a `dark` mode (ref. https://theme-ui.com/color-modes).
- Adds .org-specific `sizes` and `zIndices`.
- Adds a couple of `variants`.
- Uses `hex2rgba` to create rgba colors.
```js
import { theme } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
// when used with `gatsby-plugin-theme-ui`, export the theme
// as default from `src/gatsby-plugin-theme-ui/index.js`
export { theme as default } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
// in case you need theme tokens outside of the `emotion` context
import {
breakpoints,
colors,
fonts,
fontSizes,
fontWeights,
letterSpacings,
lineHeights,
mediaQueries,
radii,
shadows,
sizes,

@@ -57,3 +171,78 @@ space,

zIndices,
} from "gatsby-design-tokens"
} from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
```
## Local development
The Gatsby monorepo, which hosts this package, also contains the source for gatsbyjs.org, aka `www` — where `theme-gatsbyjs-org` is in use. Using a little helper called `gatsby-dev` we can develop and test both of them locally.
### 1. Clone the `gatsby` monorepo and set it up for local dev
Follow the [official guide](https://www.gatsbyjs.org/contributing/setting-up-your-local-dev-environment/#fork-clone-and-branch-the-repository) to clone/fork and set up the Gatsby monorepo. This will roughly look like this:
```bash
# clone the repo/your fork
git clone https://github.com/gatsbyjs/gatsby.git
cd gatsby
# set up the repo,install dependencies for `packages`, and build the latter
yarn run bootstrap
# make sure tests are passing
yarn test
# create a new feature branch
git checkout -b topics/new-feature-name
```
#### Install `gatsby-dev-cli` to ease testing your local changes to `packages`
Assuming `gatsby-cli` [is installed](https://www.gatsbyjs.org/contributing/setting-up-your-local-dev-environment/#gatsby-functional-changes), let's install [`gatsby-dev-cli`](<(https://www.npmjs.com/package/gatsby-dev-cli)>) with
```bash
yarn global add gatsby-dev-cli
```
`gatsby-dev-cli` needs to know where your local Gatsby repository lives; navigate to its root folder, get the absolute path to it via `pwd`, and tell `gatsby-dev-cli` about it with
```bash
gatsby-dev --set-path-to-repo /path-to-local-gatsby/gatsby
```
### 2. Get `www` running on `localhost`
```bash
cd /path-to-local-gatsby/gatsby/www
yarn # to install dependencies
```
Follow the [README instructions](https://github.com/gatsbyjs/gatsby/blob/master/www/README.md) to [add a .env.development file](https://github.com/gatsbyjs/gatsby/blob/master/www/README.md#environment-variables) in `www`, and add `GATSBY_SCREENSHOT_PLACEHOLDER=true` to
> […] skip downloading screenshots and generating responsive images for all screenshots and replace them with a placeholder image
Run `yarn develop`, which thanks to the previous step shouldn't take ~40 minutes but way less. Hopefully you should be able to browse a local version of gatsbyjs.org after this. Let's leave `yarn develop` running!
### 3. Rebuild `gatsby-design-tokens` when it changes, and use `gatsby-dev` to copy the changed-and-compiled package over to `www/node_modules`
- Open a new terminal window, go to the root of your local `gatsby` repo, and run `yarn run watch` to watch for changes in `packages`, and recompile the modified package.
- To watch only certain packages, use `yarn run watch --scope=gatsby-design-tokens` or `--scope={gatsby,gatsby-cli}`.
- Last, in another new terminal window, go to `gatsby/www`, and run `gatsby-dev --packages=gatsby-design-tokens` to copy the latest local version of the `gatsby-design-tokens` package over to `www/node_modules`.
- Alternatively pass an array to watch multiple packages, or use plain `gatsby-dev` to copy the latest versions of all local packages that are used in your project's `package.json`.
### 4. Finally!
Let's try if everything is running and watching and recompiling!
Let's open `packages/gatsby-design-tokens/src/fonts.js`, and replace
```js
const header = [Futura PT, ...system]
```
with
```js
const header = system
```
and you should see `Futura PT` turning into `system-ui` within a few moments on your `localhost:8000`.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc