@datacamp/waffles-tokens - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0-beta.0

CHANGELOG.md

@@ -6,2 +6,33 @@ # Change Log
 
+# [2.0.0-beta.0](https://github.com/datacamp/design-system/compare/@datacamp/waffles-tokens@1.1.0...@datacamp/waffles-tokens@2.0.0-beta.0) (2021-07-12)
+
+
+* feat!: major design tokens release ([8c5aa99](https://github.com/datacamp/design-system/commit/8c5aa99))
+
+
+### Features
+
+* add babel and TS configs ([b185e8e](https://github.com/datacamp/design-system/commit/b185e8e))
+* add build scripts ([4898564](https://github.com/datacamp/design-system/commit/4898564))
+* add migration guide ([d307bfe](https://github.com/datacamp/design-system/commit/d307bfe))
+* add unit tests and snapshots ([a800389](https://github.com/datacamp/design-system/commit/a800389))
+* create a script to build new tokens base JS file ([5df6d0c](https://github.com/datacamp/design-system/commit/5df6d0c))
+* replace tsconfig with inline script ([fb092fd](https://github.com/datacamp/design-system/commit/fb092fd))
+* small tokens adjustments ([adde667](https://github.com/datacamp/design-system/commit/adde667))
+* transformedBaseTokens util fix ([d75f07f](https://github.com/datacamp/design-system/commit/d75f07f))
+* update build script ([51e9f87](https://github.com/datacamp/design-system/commit/51e9f87))
+* update package docs ([bf62123](https://github.com/datacamp/design-system/commit/bf62123))
+* update package entry points and build paths ([21504ac](https://github.com/datacamp/design-system/commit/21504ac))
+* update some text tokens names ([a4df33e](https://github.com/datacamp/design-system/commit/a4df33e))
+* update token name ([d65f98f](https://github.com/datacamp/design-system/commit/d65f98f))
+
+
+### BREAKING CHANGES
+
+* new design tokens
+
+
+
+
+
 # [1.1.0](https://github.com/datacamp/design-system/compare/@datacamp/waffles-tokens@1.0.6...@datacamp/waffles-tokens@1.1.0) (2021-05-28)
@@ -8,0 +39,0 @@

package.json

 {
   "name": "@datacamp/waffles-tokens",
-  "version": "1.1.0",
+  "version": "2.0.0-beta.0",
   "description": "",
-  "main": "lib/core-tokens.json",
+  "main": "lib/tokens.common.js",
+  "module": "lib/tokens.esm.js",
+  "types": "lib/tokens.d.ts",
   "files": [
@@ -11,7 +13,12 @@ "lib"
   "scripts": {
-    "build": "yarn clean && node build.js",
-    "watch": "nodemon --ignore lib/ -e js,json build.js",
-    "clean": "rm -rf build",
-    "prepare": "yarn clean && yarn build",
-    "test": "jest"
+    "build": "yarn clean && yarn build:legacy-tokens && yarn build:new-tokens && yarn build:types && yarn build:cjs && yarn build:esm && yarn clean:base-tokens",
+    "clean": "rimraf lib",
+    "clean:base-tokens": "rimraf lib/tokens.js",
+    "prepare": "yarn build",
+    "test": "jest",
+    "build:legacy-tokens": "node buildLegacyTokens.js",
+    "build:new-tokens": "node buildNewTokens.js",
+    "build:esm": "BABEL_ENV=esm babel ./lib/tokens.js --out-file ./lib/tokens.esm.js --config-file ./babel7.config.js",
+    "build:cjs": "BABEL_ENV=cjs babel ./lib/tokens.js --out-file ./lib/tokens.common.js --config-file ./babel7.config.js",
+    "build:types": "tsc lib/tokens.js --declaration --allowJs --emitDeclarationOnly --skipLibCheck --outDir lib"
   },
@@ -21,11 +28,13 @@ "author": "",
   "devDependencies": {
+    "@babel/cli": "7.13.0",
+    "@babel/core": "7.12.7",
     "deep-cleaner": "^1.2.1",
     "jest": "^26.6.1",
     "lodash": "^4.17.21",
-    "nodemon": "^2.0.7",
     "omit-deep-lodash": "^1.1.5",
+    "rimraf": "^3.0.2",
     "style-dictionary": "^2.10.3",
     "tinycolor2": "^1.4.2"
   },
-  "gitHead": "8cdde08cc7299618ff402e6d80110836939780d3"
+  "gitHead": "1391db6f9207257d16a80a2857e61e70e11a206f"
 }

README.md

 # Tokens
 
-Usage documentation available at [waffles.datacamp.com/component-library/tokens](https://waffles.datacamp.com/component-library/tokens).
+Usage documentation is available at [Waffles tokens documentation](https://waffles.datacamp.com/components/tokens/).
+It is possible to import tokens either with `import tokens from '@datacamp/waffles-tokens'` or individual groups with `import { colors } from '@datacamp/waffles-tokens'`. Thanks to types definitions tokens auto-completion is supported. Other legacy tokens could be imported from `@datacamp/waffles-tokens/lib/name-of-legacy-tokens-file`.
 
-This package contains the all the design tokens used across waffles, and also the build methods to generate exposed files with these values.
+This package contains all the design tokens used across Waffles, and also the build methods to generate exposed files with these values.
 
 ## Structure
 
-All tokens are stored in the `/properties` directory as json files. On build these are deep merged and augmented with the transforms. This full data structure is then passed to the formatters to output different files. This is all orchestrated using [Style Dictionary](https://amzn.github.io/style-dictionary/#/) and controlled with the `build.js` file.
+### New tokens
 
+The new tokens are generated from [base-tokens.json](base-tokens.json). The structure of that file is compatible with [Figma Tokens](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) plugin. In the first build step regular JS file (ES module with explicit and default exports) is generated with `build:new-tokens` script, assuming `lib` directory already exists. It serves as a base for transpiling both ESM and CJS modules (with appropriate `build:cjs` and `build:esm` scripts). Last step is to generate TS typings with `build:types`.
+
+### Legacy tokens
+
+The legacy tokens are for now kept for backward compatibility reasons. All tokens are stored in the `/properties` directory as json files. On build, these are deep merged and augmented with the transforms. This full data structure is then passed to the formatters to output different files. This is all orchestrated using [Style Dictionary](https://amzn.github.io/style-dictionary/#/) and controlled with the `buildLegacyTokens.js` file.
+
 ## Outputs
-- **core-tokens.json** is the main exported tokens file. It is a flattened and simplified version of the tokens.
-- **future-tokens.json** is the full tokens file that will be made the main export in the future. The structure of this file is **not** fixed or documented, so should be used with caution! Within waffles packages this is the version that will be used, since breaking changes can be absorbed. At some point in the future once it is more stable, this will be made the main export of the package.
+
+- **tokens.esm.js** is the main exported tokens file.
+- **tokens.d.ts** are autogenerated TS types definitions.
+- **core-tokens.json** is the legacy tokens file.
+- **future-tokens.json** is the legacy tokens file, used internally by most React components.
 - **variables.scss** contains the same data as the **core-tokens** file but exposed as scss variables. This is used in to generate utility classes and stylesheets in other packages.
+
+## Migration guide (v1 -> v2)
+
+Tokens has been updated to stay in line with [Design Guidelines](https://www.figma.com/file/Flh00IKR70ff0bRvFW2Iou/%5BDC%5D-Design-Guidelines-Exploration?node-id=376%3A1144) and to be compatible with [Figma Tokens](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) plugin.
+
+### Deprecated tokens groups
+- 🚨 `spatial` group is deprecated
+  - use tokens from `sizing`, `spacing`, and `zIndex` groups
+- 🚨 `border` group is deprecated
+  - use tokens from `borderRadius` group
+- 🚨 `animation` group is deprecated
+
+### Completely new tokens groups
+
+- 🟢 new group `sizing`
+- 🟢 new group `spacing`
+- 🟢 new group `borderWidth`
+- 🟢 new group `opacity`
+- 🟢 new group `zIndex`
+- 🟢 new group `borderRadius`
+  - 🚨 `border.radius` -> `borderRadius.medium`
+  - 🟢 new `circle` border radius token
+
+### Updated tokens groups
+
+- 🔄 changes in `colors` group:
+  - 🟢 new brand colors `brandFacebook`, `brandTwitter`, `brandGoogle`, `brandLinkedIn`
+  - 🟢 new text colors `navySubtleTextOnDark`, `navySubtleTextOnLight`
+  - 🟢 new `greyDark` color
+  - 🚨 `navyText` -> `navyDark`
+  - 🚨 `greenText` -> `greenDarkText`
+  - 🚨 `redText` -> `redDarkText`
+  - 🚨 `orangeText` -> `orangeDarkText`
+  - 🚨 `yellowText` -> `yellowDarkText`
+  - 🚨 `blueText` -> `blueDarkText`
+  - 🚨 `purpleText` -> `purpleDarkText`
+  - 🚨 `pinkText` -> `pinkDarkText`
+  - 🚨 `beige100` -> `beigeSubtle`
+  - 🚨 `beige200` -> `beigeLight`
+  - 🚨 `beige300` -> `beige`
+  - 🚨 `beige400` -> `beigeMedium`
+  - 🚨 `grey100` -> `greySubtle`
+  - 🚨 `grey200` -> `greyLight`
+  - 🚨 `grey300` -> `grey`
+  - 🚨 `grey400` -> `greyMedium`
+- 🔄 changes in `breakpoints` group
+  - 🟢 new `small`, `medium`, `large` breakpoints
+  - 🚨 all old tokens are deprecated
+- 🔄 changes in `boxShadow` group
+  - 🟢 new `thin`, `medium`, `thick`, `xthick` tokens
+  - 🚨 all old tokens are deprecated
+
+### Renamed and updated tokens groups
+
+- 🔄 `fontFamily` -> `fontFamilies`
+  - 🚨 tokens now contains whole CSS font stacks, no need to specify additional fallback fonts
+- 🔄 `fontSize` -> `fontSizes`
+  - 🚨 `micro` -> `small`
+  - 🚨 `small` -> `small`
+  - 🚨 `base` -> `medium`
+  - 🚨 `h6` -> `small`
+  - 🚨 `h5` -> `small`
+  - 🚨 `h4` -> `medium`
+  - 🚨 `h3` -> `large`
+  - 🚨 `h2` -> `xlarge`
+  - 🚨 `h1` -> `xxlarge`
+  - 🟢 new `huge` token
+- 🔄 `fontWeight` -> `fontWeights`
+- 🔄 `letterSpacings` -> `letterSpacing`
+  - 🚨 `base` -> `default`
+  - 🚨 `mediumHeading` -> `tight`
+  - 🚨 `largeHeading` -> `tight`
+  - 🟢 new `relaxed` token
+- 🔄 `lineHeight` -> `lineHeights`
+  - in most cases use the same `lineHeight` in tandem with `fontSize`
+  - 🚨 `base` -> `medium`
+  - 🚨 `heading` -> `large`
+  - 🚨 `largeHeading` -> `xlarge`
+  - 🟢 new `small` token
+  - 🟢 new `xxlarge` token

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76380

increased by30.41%

Number of downloads

1278

increased by7.04%

Number of package files

9

increased by50%

Lines of code

483

increased byInfinity%

Number of lines in readme file

105

increased by600%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

9

increased by28.57%

Number of low quality alerts

1

increased byInfinity%

No dependency changes