CHANGELOG.md

Changelog: gatsby-design-tokens

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

4.10.0 (2022-03-16)

🧾 Release notes

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

4.9.0 (2022-03-01)

🧾 Release notes

Chores

• Format changelog files (088f23b)

4.8.0 (2022-02-22)

🧾 Release notes

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

4.7.0 (2022-02-08)

🧾 Release notes

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

4.6.0 (2022-01-25)

🧾 Release notes

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

4.5.0 (2022-01-11)

🧾 Release notes

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

4.4.0 (2021-12-14)

🧾 Release notes

Chores

• update dependency microbundle to ^0.14.2 for gatsby-design-tokens #34115 (46a1398)

4.3.0 (2021-12-01)

🧾 Release notes

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

4.2.0 (2021-11-16)

🧾 Release notes

Chores

• update dependency microbundle to ^0.14.1 for gatsby-design-tokens #33776 (14681b9)

4.1.0 (2021-11-02)

🧾 Release notes

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

4.0.0 (2021-10-21)

🧾 Release notes

Chores

• apply patches for v4 #33170 (f8c5141)

3.14.0 (2021-09-18)

🧾 Release notes

Chores

• update babel monorepo #32996 (048c7a7)
• add missing @babel/runtime dependencies #32954 (401b358)

3.13.0 (2021-09-01)

🧾 Release notes

Chores

• re-generate changelogs #32886 (417df15)

3.12.0 (2021-08-18)

🧾 Release notes

Chores

• update [dev] major dependencies for gatsby-design-tokens (major) #32637 (394840c)

3.11.0 (2021-08-04)

🧾 Release notes

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

3.10.0 (2021-07-20)

🧾 Release notes

Chores

• update dependency microbundle to ^0.13.3 for gatsby-design-tokens #32240 (1fd8f25)

3.9.0 (2021-07-07)

🧾 Release notes

Features

• palette update #30662 (fe853ae)

3.8.0 (2021-06-23)

🧾 Release notes

Chores

• Fix multiple grammar issues Fix #31946 (aa3bad2)

3.7.0 (2021-06-09)

🧾 Release notes

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

3.6.0 (2021-05-25)

🧾 Release notes

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

3.5.0 (2021-05-12)

🧾 Release notes

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

3.4.0 (2021-04-28)

🧾 Release notes

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

3.3.0 (2021-04-14)

🧾 Release notes

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

3.2.0 (2021-03-30)

🧾 Release notes

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

3.1.0 (2021-03-16)

🧾 Release notes

Chores

• update eslint to fix linting issues fix #29988 (5636389)

3.0.0 (2021-03-02)

🧾 Release notes

Chores

• Upgrade typescript #29388 (823140f)

2.7.0 (2021-02-02)

🧾 Release notes

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

2.6.0 (2021-01-20)

🧾 Release notes

Chores

• add http to localhost #28896 (a2d0ef8)

2.5.0 (2021-01-06)

🧾 Release notes

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

2.4.0 (2020-12-15)

🧾 Release notes

Chores

• update dependency cross-env to ^7.0.3 #28505 (a819b9b)

2.3.0 (2020-12-02)

🧾 Release notes

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

2.2.0 (2020-11-20)

🧾 Release notes

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

2.1.0 (2020-11-12)

🧾 Release notes

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

2.0.13 (2020-10-01)

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

2.0.12 (2020-09-28)

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

2.0.11 (2020-08-26)

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

2.0.10 (2020-07-03)

Bug Fixes

• gatsby-design-tokens: Add border definitions to theme (#25486) (7efdbd3)

2.0.9 (2020-06-29)

Bug Fixes

• gatsby-design-tokens: yarn run watch broken (#25369) (e563a2e)

2.0.8 (2020-06-24)

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

2.0.7 (2020-06-22)

Bug Fixes

• docs: change bash to shell in code language blocks (#22899) (6b6b2f2)

2.0.6 (2020-05-20)

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

2.0.5 (2020-04-18)

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

2.0.4 (2020-03-23)

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

2.0.3 (2020-03-16)

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

2.0.2 (2020-02-20)

Features

• gatsby-design-tokens: Add "Inter" font stack (#21598) (b870db9)

BREAKING CHANGES

• gatsby-design-tokens: fonts.sans now delivers the "Inter" font stack, not the system font stack anymore fix: fonts.sans and .brand aliases

2.0.1 (2020-02-11)

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

Bug Fixes

• fix(gatsby-design-tokens): Fix files field in package.json: dist now includes index.esm.js and the two dist/themes; before it only offered the main CommonJS module (8c0d55c)

2.0.0 (2020-02-10)

Features

• gatsby-design-tokens: v2 (#21240) (f754fc2)

Tokens

This update moves the rudimentary tokens even closer to our current sole target, CSS. This e.g. means that instead of exporting an array of integers for fontSizes or space, we now provide rem values instead (while still making the v1 variants available — but we do have "soft" preferences regarding default units for CSS, which are emphasized by these breaking changes).

We currently only consume these tokens in the context of CSS, so let's make things a bit easier there:

• fontsSizes exports rem values now; old values available at fontSizesRaw
• space exports rem values now, too; old stuff available at spaceRaw
• fonts exports a string now, ready to be used with the font-family CSS prop; old array of font family names available as fontsLists
• radii now contains the px unit

The update also embraces theme-ui a bit more directly by partially adopting and/or inheriting its naming conventions for a bunch of tokens, making "theme composition using token groups" even easier than before.

Regarding the discussion in https://github.com/gatsby-inc/gatsby-interface/issues/181, everything but the space scale has been adjusted to hopefully "just work", or work easier than before. The update to v2 of gatsby-design-tokens should require almost no refactoring of values in gatsby-interface —

• the transition properties partially follow a different naming convention
• fonts.header changed to fonts.heading
• radii values now come with the px unit, so the latter is not needed anymore in template literals

— and apart from that should be solved by removing the transformation of fontSizes and spaces torem, and thejoinoffonts` stacks.

Here's all changes listed by "token group":

breakpoints

• BREAKING CHANGE: Remove breakpoints.xxs
  • All tokens started as only being consumed via styled-system. In its context, and using an object to define breakpoints, breakpoints.xxs made sense/was required. Since we switched to theme-ui, it doesn't anymore. gatsby-interface defines its own set of breakpoints; the www source already adjusted this when composing its theme-uitheme, so this shouldn't hurt at all.
• feat: add export breakpointsArray, ready for theme-ui's responsive styles feature

colors

• feat: add missing steps in colors.blackFade and colors.whiteFade:
  • add colors.blackFade[90]
  • add colors.blackFade[40]
  • add colors.blackFade[20]
  • add colors.blackFade[5]
  • add colors.whiteFade[90]
  • add colors.whiteFade[40]
  • add colors.whiteFade[20]
  • add colors.whiteFade[5]
• BREAKING CHANGE: fix colors.blackFade[80], colors.whiteFade[80]
  • both were set to an opacity of .85, adjusted to .8
  • TODO: Adjust a couple of values for gatsbyjs.org; no clue about where we currently might use this in gatsby-interface and related (.com/Cloud dashboard).
• feat: port colors.code from the gatsbyjs.org theme-ui theme to the colors tokens
  • 💚 This improves compliance with WCAG 2.0 AA color contrasts.
• feat: add colors.code.copyButton
• feat: add colors.code.lineHighlightBackground
• feat: add colors.code.scrollbarTrack

fonts

• feat: Add aliases body and sans for fonts.system
• BREAKING CHANGE: rename fonts.header to fonts.heading
  • Comply with theme-ui requirements: https://theme-ui.com/theme-spec#typography.
• feat: Add alias brand for fonts.heading
• BREAKING CHANGE: fonts exports a string now, ready to be used with the font-family CSS prop; the array of font family names is still available as fontsLists

fontSizes

• BREAKING CHANGE: fontSizes does now contain rem values; old scale (integers) still available as fontSizesRaw
• feat: add export fontSizesPx

fontWeights

• BREAKING CHANGE: Name fontWeights — switch from array to object
  • Include the required theme-ui defaults body, heading, and bold (https://theme-ui.com/theme-spec#typography).
  • body: 400
  • semiBold: 600
  • bold: 700
  • heading: 700
  • extraBold: 800

lineHeights

• feat: Add line heights heading (equivalent to the existing dense) and body (equivalent to the existing default) to satisfy theme-ui's "Typography" theme requirements

radii

• BREAKING CHANGE: Add px unit to radii scale values.

sizes

• BREAKING CHANGE: removed
  • As discussed in https://github.com/gatsby-inc/gatsby-interface/issues/181, this moves the current gatsbyjs.org-centric sizes tokens to theme-gatsbyjs-org for clarity, until a clear pattern emerges.

space

• BREAKING CHANGE: space does now contain rem values; old scale (integers) still available as spaceRaw
• feat: add export spacePx

transition

• feat: Add transition.default shortcut
• feat: Add transition.curve.fastOutLinearIn from gatsby-interface
• feat: Add transition.speed.faster (50ms), matching gatsby-interface's blink
• feat: Add transition.speed.slower (1000ms), matching gatsby-interface's snail
• BREAKING CHANGE: change transition.speed.slow from 350ms to 500ms, now matching gatsby-interface

zIndices

• BREAKING CHANGE: removed
  • As discussed in https://github.com/gatsby-inc/gatsby-interface/issues/181, this moves the current gatsbyjs.org-centric zIndices tokens to theme-gatsbyjs-orgfor clarity, until a clear pattern emerges.

Themes

• feat: add base theme-ui Gatsby theme, gatsbyjs.org theme-ui theme
  • Both themes don't tree-shake yet, so no agadoo yet in the corresponding gatsby-design-tokens/package.json scripts.
  • Both export the theme-ui theme as theme and also provide individual token group exports (because we require them in www for usage outside of the theme-ui context).
  • Example usage:
    • export { theme as default } from "gatsby-design-tokens/dist/theme-gatsbyjs-org" in www/src/gatsby-plugin-theme-ui/index
    • Directly import individual token groups with import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org".

1.0.10 (2019-10-14)

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

1.0.9 (2019-10-04)

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

1.0.8 (2019-09-26)

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

1.0.7 (2019-09-26)

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

1.0.6 (2019-09-20)

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

1.0.5 (2019-09-18)

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

1.0.4 (2019-09-09)

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

1.0.3 (2019-09-01)

Bug Fixes

• update minor updates in packages except react, babel and eslint (#17254) (252d867)

1.0.2 (2019-08-23)

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

1.0.1 (2019-08-20)

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

1.0.0 (2019-07-17)

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

0.0.2 (2019-07-16)

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

0.0.1 (2019-07-16)

Features

• gatsby-design-tokens: add gatsby-design-tokens utility (#15779) (dded37d), closes #15596