@nordnet/design-tokens - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

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

@@ -135,4 +135,5 @@ export interface Theme {
     text_strong: string;
+    text_disabled: string;
     text_focus: string;
-    text_disabled: string;
+    text_inactive: string;
     background_default: string;
@@ -171,4 +172,5 @@ background_weak: string;
     icon_brand: string;
+    icon_inactive: string;
 }
 export declare const theme: Theme;
 export {};

dist/cjs/generated/js/a11yTheme.js

@@ -11,4 +11,5 @@ "use strict";
             text_strong: "#ffffffff",
+            text_disabled: "#9e9e9eff",
             text_focus: "#1c1c1cff",
-            text_disabled: "#9e9e9eff",
+            text_inactive: "#9e9e9eff",
             background_default: "#ffffffff",
@@ -47,2 +48,3 @@ background_weak: "#ffffffff",
             icon_brand: "#1c1c1cff",
+            icon_inactive: "#9e9e9eff",
         },
@@ -49,0 +51,0 @@ action: {

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

@@ -135,4 +135,5 @@ export interface Theme {
     text_strong: string;
+    text_disabled: string;
     text_focus: string;
-    text_disabled: string;
+    text_inactive: string;
     background_default: string;
@@ -171,4 +172,5 @@ background_weak: string;
     icon_brand: string;
+    icon_inactive: string;
 }
 export declare const theme: Theme;
 export {};

dist/cjs/generated/js/darkTheme.js

@@ -11,4 +11,5 @@ "use strict";
             text_strong: "#ffffffff",
+            text_disabled: "#6e6e6eff",
             text_focus: "#1c1c1cff",
-            text_disabled: "#6e6e6eff",
+            text_inactive: "#9e9e9eff",
             background_default: "#1c1c1cff",
@@ -47,2 +48,3 @@ background_weak: "#121212ff",
             icon_brand: "#1c1c1cff",
+            icon_inactive: "#9e9e9eff",
         },
@@ -85,3 +87,3 @@ action: {
             background_default: "#cc2269ff",
-            background_weak: "#590f2eff",
+            background_weak: "#3e0b20ff",
             background_medium: "#ff2b83ff",
@@ -107,3 +109,3 @@ background_strong: "#ac135aff",
             background_default: "#51cb20ff",
-            background_weak: "#20510dff",
+            background_weak: "#133108ff",
             background_medium: "#85da62ff",
@@ -110,0 +112,0 @@ background_strong: "#41a21aff",

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

@@ -135,4 +135,5 @@ export interface Theme {
     text_strong: string;
+    text_disabled: string;
     text_focus: string;
-    text_disabled: string;
+    text_inactive: string;
     background_default: string;
@@ -172,4 +173,5 @@ background_weak: string;
     icon_brand: string;
+    icon_inactive: string;
 }
 export declare const theme: Theme;
 export {};

dist/cjs/generated/js/lightTheme.js

@@ -11,4 +11,5 @@ "use strict";
             text_strong: "#ffffffff",
+            text_disabled: "#9e9e9eff",
             text_focus: "#1c1c1cff",
-            text_disabled: "#9e9e9eff",
+            text_inactive: "#9e9e9eff",
             background_default: "#ffffffff",
@@ -47,2 +48,3 @@ background_weak: "#ffffffff",
             icon_brand: "#1c1c1cff",
+            icon_inactive: "#9e9e9eff",
         },
@@ -49,0 +51,0 @@ action: {

dist/cjs/generated/json/a11yTheme.json

@@ -8,4 +8,5 @@ {
       "text_strong": "#ffffffff",
+      "text_disabled": "#9e9e9eff",
       "text_focus": "#1c1c1cff",
-      "text_disabled": "#9e9e9eff",
+      "text_inactive": "#9e9e9eff",
       "background_default": "#ffffffff",
@@ -43,3 +44,4 @@ "background_weak": "#ffffffff",
       "icon_disabled": "#9e9e9eff",
-      "icon_brand": "#1c1c1cff"
+      "icon_brand": "#1c1c1cff",
+      "icon_inactive": "#9e9e9eff"
     },
@@ -46,0 +48,0 @@ "action": {

dist/cjs/generated/json/darkTheme.json

@@ -8,4 +8,5 @@ {
       "text_strong": "#ffffffff",
+      "text_disabled": "#6e6e6eff",
       "text_focus": "#1c1c1cff",
-      "text_disabled": "#6e6e6eff",
+      "text_inactive": "#9e9e9eff",
       "background_default": "#1c1c1cff",
@@ -43,3 +44,4 @@ "background_weak": "#121212ff",
       "icon_disabled": "#6e6e6eff",
-      "icon_brand": "#1c1c1cff"
+      "icon_brand": "#1c1c1cff",
+      "icon_inactive": "#9e9e9eff"
     },
@@ -82,3 +84,3 @@ "action": {
       "background_default": "#cc2269ff",
-      "background_weak": "#590f2eff",
+      "background_weak": "#3e0b20ff",
       "background_medium": "#ff2b83ff",
@@ -104,3 +106,3 @@ "background_strong": "#ac135aff",
       "background_default": "#51cb20ff",
-      "background_weak": "#20510dff",
+      "background_weak": "#133108ff",
       "background_medium": "#85da62ff",
@@ -107,0 +109,0 @@ "background_strong": "#41a21aff",

dist/cjs/generated/json/lightTheme.json

@@ -8,4 +8,5 @@ {
       "text_strong": "#ffffffff",
+      "text_disabled": "#9e9e9eff",
       "text_focus": "#1c1c1cff",
-      "text_disabled": "#9e9e9eff",
+      "text_inactive": "#9e9e9eff",
       "background_default": "#ffffffff",
@@ -43,3 +44,4 @@ "background_weak": "#ffffffff",
       "icon_disabled": "#9e9e9eff",
-      "icon_brand": "#1c1c1cff"
+      "icon_brand": "#1c1c1cff",
+      "icon_inactive": "#9e9e9eff"
     },
@@ -46,0 +48,0 @@ "action": {

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

@@ -135,4 +135,5 @@ export interface Theme {
     text_strong: string;
+    text_disabled: string;
     text_focus: string;
-    text_disabled: string;
+    text_inactive: string;
     background_default: string;
@@ -171,4 +172,5 @@ background_weak: string;
     icon_brand: string;
+    icon_inactive: string;
 }
 export declare const theme: Theme;
 export {};

dist/esm/generated/js/a11yTheme.js

@@ -8,4 +8,5 @@ export const theme = {
             text_strong: "#ffffffff",
+            text_disabled: "#9e9e9eff",
             text_focus: "#1c1c1cff",
-            text_disabled: "#9e9e9eff",
+            text_inactive: "#9e9e9eff",
             background_default: "#ffffffff",
@@ -44,2 +45,3 @@ background_weak: "#ffffffff",
             icon_brand: "#1c1c1cff",
+            icon_inactive: "#9e9e9eff",
         },
@@ -46,0 +48,0 @@ action: {

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

@@ -135,4 +135,5 @@ export interface Theme {
     text_strong: string;
+    text_disabled: string;
     text_focus: string;
-    text_disabled: string;
+    text_inactive: string;
     background_default: string;
@@ -171,4 +172,5 @@ background_weak: string;
     icon_brand: string;
+    icon_inactive: string;
 }
 export declare const theme: Theme;
 export {};

dist/esm/generated/js/darkTheme.js

@@ -8,4 +8,5 @@ export const theme = {
             text_strong: "#ffffffff",
+            text_disabled: "#6e6e6eff",
             text_focus: "#1c1c1cff",
-            text_disabled: "#6e6e6eff",
+            text_inactive: "#9e9e9eff",
             background_default: "#1c1c1cff",
@@ -44,2 +45,3 @@ background_weak: "#121212ff",
             icon_brand: "#1c1c1cff",
+            icon_inactive: "#9e9e9eff",
         },
@@ -82,3 +84,3 @@ action: {
             background_default: "#cc2269ff",
-            background_weak: "#590f2eff",
+            background_weak: "#3e0b20ff",
             background_medium: "#ff2b83ff",
@@ -104,3 +106,3 @@ background_strong: "#ac135aff",
             background_default: "#51cb20ff",
-            background_weak: "#20510dff",
+            background_weak: "#133108ff",
             background_medium: "#85da62ff",
@@ -107,0 +109,0 @@ background_strong: "#41a21aff",

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

@@ -135,4 +135,5 @@ export interface Theme {
     text_strong: string;
+    text_disabled: string;
     text_focus: string;
-    text_disabled: string;
+    text_inactive: string;
     background_default: string;
@@ -172,4 +173,5 @@ background_weak: string;
     icon_brand: string;
+    icon_inactive: string;
 }
 export declare const theme: Theme;
 export {};

dist/esm/generated/js/lightTheme.js

@@ -8,4 +8,5 @@ export const theme = {
             text_strong: "#ffffffff",
+            text_disabled: "#9e9e9eff",
             text_focus: "#1c1c1cff",
-            text_disabled: "#9e9e9eff",
+            text_inactive: "#9e9e9eff",
             background_default: "#ffffffff",
@@ -44,2 +45,3 @@ background_weak: "#ffffffff",
             icon_brand: "#1c1c1cff",
+            icon_inactive: "#9e9e9eff",
         },
@@ -46,0 +48,0 @@ action: {

dist/esm/generated/json/a11yTheme.json

@@ -8,4 +8,5 @@ {
       "text_strong": "#ffffffff",
+      "text_disabled": "#9e9e9eff",
       "text_focus": "#1c1c1cff",
-      "text_disabled": "#9e9e9eff",
+      "text_inactive": "#9e9e9eff",
       "background_default": "#ffffffff",
@@ -43,3 +44,4 @@ "background_weak": "#ffffffff",
       "icon_disabled": "#9e9e9eff",
-      "icon_brand": "#1c1c1cff"
+      "icon_brand": "#1c1c1cff",
+      "icon_inactive": "#9e9e9eff"
     },
@@ -46,0 +48,0 @@ "action": {

dist/esm/generated/json/darkTheme.json

@@ -8,4 +8,5 @@ {
       "text_strong": "#ffffffff",
+      "text_disabled": "#6e6e6eff",
       "text_focus": "#1c1c1cff",
-      "text_disabled": "#6e6e6eff",
+      "text_inactive": "#9e9e9eff",
       "background_default": "#1c1c1cff",
@@ -43,3 +44,4 @@ "background_weak": "#121212ff",
       "icon_disabled": "#6e6e6eff",
-      "icon_brand": "#1c1c1cff"
+      "icon_brand": "#1c1c1cff",
+      "icon_inactive": "#9e9e9eff"
     },
@@ -82,3 +84,3 @@ "action": {
       "background_default": "#cc2269ff",
-      "background_weak": "#590f2eff",
+      "background_weak": "#3e0b20ff",
       "background_medium": "#ff2b83ff",
@@ -104,3 +106,3 @@ "background_strong": "#ac135aff",
       "background_default": "#51cb20ff",
-      "background_weak": "#20510dff",
+      "background_weak": "#133108ff",
       "background_medium": "#85da62ff",
@@ -107,0 +109,0 @@ "background_strong": "#41a21aff",

dist/esm/generated/json/lightTheme.json

@@ -8,4 +8,5 @@ {
       "text_strong": "#ffffffff",
+      "text_disabled": "#9e9e9eff",
       "text_focus": "#1c1c1cff",
-      "text_disabled": "#9e9e9eff",
+      "text_inactive": "#9e9e9eff",
       "background_default": "#ffffffff",
@@ -43,3 +44,4 @@ "background_weak": "#ffffffff",
       "icon_disabled": "#9e9e9eff",
-      "icon_brand": "#1c1c1cff"
+      "icon_brand": "#1c1c1cff",
+      "icon_inactive": "#9e9e9eff"
     },
@@ -46,0 +48,0 @@ "action": {

package.json

 {
   "name": "@nordnet/design-tokens",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "engines": {

README.md

@@ -11,13 +11,40 @@ # Design Tokens
 
-For local development, follow these steps:
+For local development, please 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.
+1. **Install Dependencies:** Begin by installing all required dependencies. Open your terminal, navigate to the project's root directory, and execute:
 
-If you only want to use the themes provided by this project then simply import them into your codebase like this:
+```sh
+npm install
+```
 
-1. Run `npm install -D @nordnet/design-tokens` to install the package.
-2. Import for example the lightTheme `import { lightTheme } from '@nordnet/design-tokens'`.
+2. **Transform Design Tokens:** Next, transform your design tokens using [Style Dictionary](https://amzn.github.io/style-dictionary/#/README). This step converts our JSON-formatted tokens into usable formats for different platforms. Run the following command:
 
+```sh
+npm run transform-tokens
+```
+
+**Note:** If you are contributing via a pull request and your changes involve modifications to any tokens/\*.json files, the project's GitHub Actions workflow will automatically perform this transformation step for you. This ensures that your contributions are seamlessly integrated without requiring manual token transformation.
+
+3. **Access Generated Tokens:** After transformation, the generated tokens can be found within the src/generated directory.
+
+## Usage the themes
+
+If you want to utilize the themes provided by this repository, you can integrate them into your codebase like this:
+
+1. **Install the Design Tokens Package:** Add the design tokens to your project by running the following command:
+
+```sh
+npm install -D @nordnet/design-tokens
+```
+
+This installs the `@nordnet/design-tokens` package as a development dependency.
+
+2. **Import the desired theme:** You can now import the themes directly into your project. For example, to use the light theme, add the following import statement to your code:
+
+```sh
+import { lightTheme } from '@nordnet/design-tokens'
+```
+
+Replace `lightTheme` with any other theme provided by the package as necessary.
+
 ## Formats
@@ -24,0 +51,0 @@

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

141156

increased by2.07%

Lines of code

3928

increased by1.24%

Number of lines in readme file

56

increased by93.1%

No dependency changes