@nordnet/design-tokens - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

dist/cjs/generated/js/darkTheme.d.ts

 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 09:07:55 GMT
+ * Generated on Fri, 05 May 2023 07:08:11 GMT
  */
@@ -5,0 +5,0 @@ export interface DarkTheme {

dist/cjs/generated/js/darkTheme.js

 "use strict";
 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 09:07:55 GMT
+ * Generated on Fri, 05 May 2023 07:08:11 GMT
  */
@@ -6,0 +6,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/cjs/generated/js/lightTheme.d.ts

 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 09:07:55 GMT
+ * Generated on Fri, 05 May 2023 07:08:11 GMT
  */
@@ -5,0 +5,0 @@ export interface LightTheme {

dist/cjs/generated/js/lightTheme.js

 "use strict";
 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 09:07:55 GMT
+ * Generated on Fri, 05 May 2023 07:08:11 GMT
  */
@@ -6,0 +6,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/cjs/index.d.ts

 import { LightTheme, colors as lightTheme } from "./generated/js/lightTheme";
 import { DarkTheme, colors as darkTheme } from "./generated/js/darkTheme";
-import { AccessibilityTheme, colors as accessibilityTheme } from "./generated/js/accessibilityTheme";
-export type { LightTheme, DarkTheme, AccessibilityTheme };
-export { lightTheme, darkTheme, accessibilityTheme };
+import { A11yTheme, colors as a11yThemeTheme } from "./generated/js/a11yTheme";
+export type { LightTheme, DarkTheme, A11yTheme };
+export { lightTheme, darkTheme, a11yThemeTheme };

dist/cjs/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.accessibilityTheme = exports.darkTheme = exports.lightTheme = void 0;
+exports.a11yThemeTheme = exports.darkTheme = exports.lightTheme = void 0;
 const lightTheme_1 = require("./generated/js/lightTheme");
@@ -8,3 +8,3 @@ Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return lightTheme_1.colors; } });
 Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return darkTheme_1.colors; } });
-const accessibilityTheme_1 = require("./generated/js/accessibilityTheme");
-Object.defineProperty(exports, "accessibilityTheme", { enumerable: true, get: function () { return accessibilityTheme_1.colors; } });
+const a11yTheme_1 = require("./generated/js/a11yTheme");
+Object.defineProperty(exports, "a11yThemeTheme", { enumerable: true, get: function () { return a11yTheme_1.colors; } });

dist/esm/generated/js/darkTheme.d.ts

 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 09:07:55 GMT
+ * Generated on Fri, 05 May 2023 07:08:11 GMT
  */
@@ -5,0 +5,0 @@ export interface DarkTheme {

dist/esm/generated/js/darkTheme.js

 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 09:07:55 GMT
+ * Generated on Fri, 05 May 2023 07:08:11 GMT
  */
@@ -5,0 +5,0 @@ export const colors = {

dist/esm/generated/js/lightTheme.d.ts

 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 09:07:55 GMT
+ * Generated on Fri, 05 May 2023 07:08:11 GMT
  */
@@ -5,0 +5,0 @@ export interface LightTheme {

dist/esm/generated/js/lightTheme.js

 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 09:07:55 GMT
+ * Generated on Fri, 05 May 2023 07:08:11 GMT
  */
@@ -5,0 +5,0 @@ export const colors = {

dist/esm/index.d.ts

 import { LightTheme, colors as lightTheme } from "./generated/js/lightTheme";
 import { DarkTheme, colors as darkTheme } from "./generated/js/darkTheme";
-import { AccessibilityTheme, colors as accessibilityTheme } from "./generated/js/accessibilityTheme";
-export type { LightTheme, DarkTheme, AccessibilityTheme };
-export { lightTheme, darkTheme, accessibilityTheme };
+import { A11yTheme, colors as a11yThemeTheme } from "./generated/js/a11yTheme";
+export type { LightTheme, DarkTheme, A11yTheme };
+export { lightTheme, darkTheme, a11yThemeTheme };

dist/esm/index.js

 import { colors as lightTheme } from "./generated/js/lightTheme";
 import { colors as darkTheme } from "./generated/js/darkTheme";
-import { colors as accessibilityTheme, } from "./generated/js/accessibilityTheme";
-export { lightTheme, darkTheme, accessibilityTheme };
+import { colors as a11yThemeTheme } from "./generated/js/a11yTheme";
+export { lightTheme, darkTheme, a11yThemeTheme };

package.json

 {
   "name": "@nordnet/design-tokens",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "",
@@ -12,3 +12,3 @@ "engines": {
     "pretransform-tokens": "rimraf src/generated",
-    "transform-tokens": "node transformTokens.js",
+    "transform-tokens": "node transform/transformTokens.js",
     "semantic-release": "semantic-release",
@@ -15,0 +15,0 @@ "tsc": "tsc --noEmit",

README.md

 # Design Tokens
 
-To automate a PR creation you export tokens from Figma using [Design Tokens](https://www.figma.com/community/plugin/888356646278934516/Design-Tokens) plugin
+This project turns design tokens into usable formats for our frontends. By using design tokens, we can maintain consistency across all platforms, tools, and products. Currently, we only provide colors for our different themes through design tokens.
+
+## How it works
+
+Design Tokens get exported from Figma using the [Design Tokens plugin](https://www.figma.com/community/plugin/888356646278934516/Design-Tokens) which sends the data through Githubs [repository_dispatch](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#repository_dispatch) event. A Github action listens to that event and saves the data as JSON. Then, [Style Dictionary](<[https://amzn.github.io/style-dictionary/](https://amzn.github.io/style-dictionary/#/README)>) transforms the tokens into the desired formats.
+
+## Getting started
+
+For local development, follow these steps:
+
+1. Run `npm i` to install dependencies.
+2. Run `npm run transform-tokens` to transform tokens using [Style Dictionary](https://amzn.github.io/style-dictionary/#/README).
+3. The converted tokens will be saved in the `src/generated` directory.
+
+If you only want to use the themes provided by this project then simply import them into your codebase like this:
+
+1. Run `npm install -D @nordnet/design-tokens` to install the package.
+2. Import for example the lightTheme `import { lightTheme } from '@nordnet/design-tokens'`.
+
+## Formats
+
+This project generates design tokens for each theme in the following formats:
+
+- **JS**: A JavaScript module that exports an object containing the design tokens.
+- **JSON**: A JSON file containing the design tokens.
+- **CSS**: A CSS file containing CSS variables for the design tokens.
+
+## Limitations
+
+GitHub Actions has a payload limit of 50kB, which prevents exporting all design tokens at once. To circumvent this limitation, we export tokens in chunks using the same branch name to ensure they are added to the same Pull request. It's worth noting that if any new tokens are added or deleted, tests will fail until all chunks are exported.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113468

increased by4.25%

Lines of code

3178

increased by2.06%

Number of lines in readme file

33

increased by725%

No dependency changes