@lightspeed/cirrus-tokens - npm Package Compare versions

Comparing version 3.8.2 to 4.0.0

CHANGELOG.md

@@ -10,2 +10,14 @@ # Changelog
 
+## 4.0.0 - 2019-08-29
+
+### Breaking
+
+- Removed complete theme and component theme generation from cirrus-tokens (including distributable builds) ([#856](https://github.com/lightspeedretail/cirrus/pull/856))
+- Removed `utils/index.js`. Instead, please rely on using themeGet and follow the theme-ui specs for what properties are exposed ([#856](https://github.com/lightspeedretail/cirrus/pull/856))
+
+### Added
+
+- Full conversion to TS ([#856](https://github.com/lightspeedretail/cirrus/pull/856))
+- CommonJS and ESM dist files ([#856](https://github.com/lightspeedretail/cirrus/pull/856))
+
 ## 3.8.2 - 2019-08-27
@@ -12,0 +24,0 @@

package.json

 {
   "name": "@lightspeed/cirrus-tokens",
-  "version": "3.8.2",
+  "version": "4.0.0",
   "description": "Cirrus's Foundation",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
   "author": "Lightspeed",
@@ -13,11 +15,15 @@ "license": "MIT",
   "devDependencies": {
+    "@types/node": "^12.7.2",
     "concurrently": "^4.1.0",
     "nodemon": "^1.18.10",
-    "rimraf": "^2.6.3"
+    "rimraf": "^2.6.3",
+    "ts-node": "^8.3.0"
   },
   "scripts": {
+    "build": "yarn build:cjs && yarn build:esm && yarn build:types && ts-node -P ./tsconfig.types.json scripts/pre-publish.ts",
+    "build:cjs": "BABEL_ENV=cjs babel src --out-dir dist --config-file ../../babel.config.js --extensions .ts,.tsx,.js,.jsx",
+    "build:esm": "BABEL_ENV=production babel src --out-dir dist/esm --config-file ../../babel.config.js --extensions .ts,.tsx,.js,.jsx",
+    "build:types": "tsc --p ./tsconfig.types.json",
     "clean": "rimraf dist && rimraf built-themes && rimraf partials",
-    "umdify-theme": "BABEL_ENV=umd babel built-themes --out-dir dist/theme --config-file ../../babel.config.js",
-    "prepublish": "yarn clean && node scripts/pre-publish.js && yarn umdify-theme && node ../../scripts/validate-build",
-    "dev": "concurrently --kill-others 'nodemon scripts/pre-publish.js --ignore built-themes/ --ignore dist/' 'yarn umdify-theme --watch'"
+    "prepublish": "yarn clean && yarn build && node ../../scripts/validate-build"
   },
@@ -27,3 +33,3 @@ "publishConfig": {
   },
-  "gitHead": "7e5fccabf3e5a1ccb4979eef5a37571306af5e19"
+  "gitHead": "4d509b643bbe1be5d01a65e0aec39848ee433fc8"
 }

README.md

@@ -156,203 +156,2 @@ # Tokens
 
-### For JavaScript Apps
-
-For JavaScript apps there's multiple ways you can make use of the tokens.
-
-#### Using helper functions
-
-You can make use of the helpers by importing the `@lightspeed/cirrus-tokens/utils` package.
-For the scales and values to pass, check the documentation online: https://design.lightspeedhq.com/foundation/tokens.
-
-Import the `@lightspeed/cirrus-tokens/utils` package as follows:
-
-```js
-import {
-  color,
-  radius,
-  shadow,
-  innerShadow,
-  borderShadow,
-  spacing,
-  duration,
-  typeface,
-  fontWeight,
-  fontSize,
-  letterSpacing,
-} from '@lightspeed/cirrus-tokens/utils';
-
-color('blue-300');
-
-// Or if you want all of them
-import * as tokens from '@lightspeed/cirrus-tokens/utils';
-
-tokens.color('blue-300');
-```
-
-An example in a React app:
-
-```js
-import React from 'react';
-import * as tokens from '@lightspeed/cirrus-tokens/utils';
-
-const styles = {
-  padding: tokens.spacing(2),
-  fontSize: tokens.fontSize('xxl'),
-};
-
-const MyComponent = () => <div style={styles}>My Component</div>;
-
-export default MyComponent;
-```
-
-##### `color(value: CirrusColor): string`
-
-The color utility allows you to pass the name of the color and it returns you a hex color string.
-
-**Example:**
-
-```js
-color('blue-200');
-// => "#5187e0"
-```
-
-##### `radius(value: number | string): string`
-
-The radius utility allows you to pass the scale of the radius and it returns you the radius string in rem/percentage.
-
-**Example:**
-
-```js
-radius(1);
-// => "0.1875rem"
-radius('2');
-// => "0.375rem"
-radius('circle');
-// => "50%"
-```
-
-##### `shadow(value: number | string): string`
-
-The shadow utility allows you to pass the scale of the box-shadow and it returns you CSS value for the shadow.
-
-**Example:**
-
-```js
-shadow(1);
-// => "0 0.0625rem 0.125rem rgba(12, 13, 13, 0.15)"
-shadow('3');
-// => "0 0.75rem 1.5rem rgba(12, 13, 13, 0.15)"
-```
-
-##### `innerShadow(value: number | string): string`
-
-The shadow utility allows you to pass the scale of the box-shadow and it returns you CSS value for the shadow.
-
-**Example:**
-
-```js
-innerShadow(1);
-// => "inset 0 0.0625rem 0.1875rem rgba(12, 13, 13, 0.2)"
-innerShadow('2');
-// => "inset 0 0 0.375rem rgba(12, 13, 13, 0.2)"
-innerShadow('n1');
-// => "inset 0 -0.0625rem 0.1875rem rgba(12, 13, 13, 0.2)"
-```
-
-##### `borderShadow(): string`
-
-The border shadow utility allows you to add a border using shadows. This is useful when you
-want to add an border to an image, but you don't know what kind of color the image contains or
-you want to make an element appear on top of an image.
-
-**Example:**
-
-```js
-borderShadow();
-// => "0 0 0 0.0625rem rgba(12, 13, 13, 0.15)"
-```
-
-##### `spacing(value: number | string): number | string`
-
-The spacing utility allows you to get a spacing value based on a scale.
-
-**Example:**
-
-```js
-spacing(0);
-// => 0
-spacing(1);
-// => "0.375rem"
-spacing('10');
-// => "3.375rem"
-```
-
-##### `duration(value: string): string`
-
-The duration utility allows you to get the duration in ms based on the value passed.
-
-**Example:**
-
-```js
-duration('slow');
-// => "100ms"
-duration('base');
-// => "200ms"
-duration('fast');
-// => "300ms"
-```
-
-##### `typeface(value: string): string`
-
-The typeface utility allows you to get possible fonts for a specific typography style.
-
-**Example:**
-
-```js
-typeface('serif');
-// => "serif"
-typeface('sans-serif');
-// => "Lato, Helvetica Neue, Helvetica, Arial, sans-serif"
-typeface('monospace');
-// => "monospace"
-```
-
-##### `fontWeight(value: string): string`
-
-The font-weight utility allows you to get possible font-weight for a specific style.
-
-**Example:**
-
-```js
-fontWeight('regular');
-// => "400"
-fontWeight('bold');
-// => "700"
-```
-
-##### `fontSize(value: string): string`
-
-The fontSize utility allows you to get possible font-size based on a scale and will return in rem.
-
-**Example:**
-
-```js
-fontSize(); // Will fallback to the base
-// => "1rem"
-fontSize('xxs');
-// => "0.5rem"
-```
-
-##### `letterSpacing(value: number | string): string`
-
-The letter spacing utility allows to the letter spacing based on a scale in rem.
-
-**Example:**
-
-```js
-letterSpacing(1);
-// => "0.03125rem"
-letterSpacing('3');
-// => "0.09375rem"
-```
-
 #### Using tokens directly (Advanced)
@@ -359,0 +158,0 @@

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

Worsened metrics

Total package byte prevSize

97766

decreased by-50.46%

Dev dependency count

5

increased by66.67%

Number of package files

63

decreased by-21.25%

Lines of code

1884

decreased by-67.02%

Number of lines in readme file

190

decreased by-51.41%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes