@mirohq/design-tokens - npm Package Compare versions

Comparing version 5.1.1 to 5.2.0-style-dictionary.0

dist/main.js

@@ -56,3 +56,3 @@ 'use strict';
 const zIndices = {
-  dropdownMenu: 100,
+  "dropdown-menu": 100,
   select: 200,
@@ -165,3 +165,3 @@ popover: 300,
 const radii = {
-  0: "0px",
+  0: 0,
   25: "2px",
@@ -172,3 +172,2 @@ 50: "4px",
   200: "16px",
-  /** Used for rounded border radii */
   round: "999px"
@@ -178,3 +177,3 @@ };
 const space = {
-  0: "0px",
+  0: 0,
   25: "2px",
@@ -181,0 +180,0 @@ 50: "4px",

dist/module.js

@@ -52,3 +52,3 @@ const borderWidths = {
 const zIndices = {
-  dropdownMenu: 100,
+  "dropdown-menu": 100,
   select: 200,
@@ -161,3 +161,3 @@ popover: 300,
 const radii = {
-  0: "0px",
+  0: 0,
   25: "2px",
@@ -168,3 +168,2 @@ 50: "4px",
   200: "16px",
-  /** Used for rounded border radii */
   round: "999px"
@@ -174,3 +173,3 @@ };
 const space = {
-  0: "0px",
+  0: 0,
   25: "2px",
@@ -177,0 +176,0 @@ 50: "4px",

dist/types.d.ts

@@ -47,3 +47,3 @@ declare const borderWidths: {
 declare const zIndices: {
-    readonly dropdownMenu: 100;
+    readonly 'dropdown-menu': 100;
     readonly select: 200;
@@ -55,2 +55,5 @@ readonly popover: 300;
 
+/**
+ * DO NOT MODIFY THIS FILE: This file was generated by Style Dictionary
+ */
 declare const colors: {
@@ -158,4 +161,7 @@ readonly black: "#000000";
 
+/**
+ * DO NOT MODIFY THIS FILE: This file was generated by Style Dictionary
+ */
 declare const radii: {
-    readonly 0: "0px";
+    readonly 0: 0;
     readonly 25: "2px";
@@ -166,3 +172,2 @@ readonly 50: "4px";
     readonly 200: "16px";
-    /** Used for rounded border radii */
     readonly round: "999px";
@@ -172,4 +177,7 @@ };
 
+/**
+ * DO NOT MODIFY THIS FILE: This file was generated by Style Dictionary
+ */
 declare const space: {
-    readonly 0: "0px";
+    readonly 0: 0;
     readonly 25: "2px";
@@ -176,0 +184,0 @@ readonly 50: "4px";

package.json

 {
   "name": "@mirohq/design-tokens",
-  "version": "5.1.1",
+  "version": "5.2.0-style-dictionary.0",
   "description": "",
@@ -29,11 +29,7 @@ "author": "Miro",
   "devDependencies": {
-    "@types/lodash.kebabcase": "^4.1.7",
-    "lodash.kebabcase": "^4.1.1",
-    "pascal-case": "3.1.2",
-    "react": "*",
-    "mds-tokens-generator": "^1.0.0"
+    "@mirohq/design-tokens-dictionary": "^0.0.0"
   },
   "scripts": {
-    "build": "rollup -c ../../../rollup.config.js && node scripts/build.mjs",
-    "clean": "rm -rf build && rm -f tokens.json && rm -f tokens.css",
+    "build": "rollup -c ../../../rollup.config.js",
+    "clean": "rm -rf build",
     "prebuild": "pnpm clean",
@@ -40,0 +36,0 @@ "sync:tokens": "node scripts/generate.mjs"

tokens.json

 {
-  "borderWidths": { "none": 0, "sm": "1px", "md": "2px", "lg": "4px" },
-  "fontSizes": {
+  "space": {
+    "0": 0,
+    "25": "2px",
+    "50": "4px",
+    "100": "8px",
+    "150": "12px",
+    "200": "16px",
+    "300": "24px",
+    "400": "32px",
+    "500": "40px",
+    "600": "48px",
+    "700": "56px",
+    "800": "64px",
+    "1200": "96px",
+    "1600": "128px"
+  },
+  "radii": {
+    "0": 0,
+    "25": "2px",
+    "50": "4px",
+    "75": "6px",
+    "100": "8px",
+    "200": "16px",
+    "round": "999px"
+  },
+  "colors": {
+    "black": "#000000",
+    "transparent": "#FFFFFF00",
+    "white": "#FFFFFF",
+    "blue-100": "#F2F4FC",
+    "blue-150": "#E8ECFC",
+    "blue-200": "#D9DFFC",
+    "blue-250": "#C7D0FD",
+    "blue-300": "#B1BDFD",
+    "blue-350": "#97A8FE",
+    "blue-400": "#7A90FE",
+    "blue-450": "#5B76FE",
+    "blue-50": "#F7F8FC",
+    "blue-500": "#3859FF",
+    "blue-550": "#314CD9",
+    "blue-600": "#2A41B6",
+    "blue-650": "#243797",
+    "blue-700": "#1E2D7B",
+    "blue-750": "#192563",
+    "blue-800": "#151F4E",
+    "blue-850": "#12193E",
+    "blue-900": "#101633",
+    "blue-950": "#0F142E",
+    "gray-100": "#F3F4F6",
+    "gray-150": "#EBECF0",
+    "gray-200": "#E0E1E6",
+    "gray-250": "#D1D4DB",
+    "gray-300": "#C1C3CD",
+    "gray-350": "#ADB1BD",
+    "gray-400": "#979CAB",
+    "gray-450": "#7F8497",
+    "gray-50": "#F6F7F9",
+    "gray-500": "#656B81",
+    "gray-550": "#575C6F",
+    "gray-600": "#4A4E5E",
+    "gray-650": "#3F424F",
+    "gray-700": "#343741",
+    "gray-750": "#2B2E35",
+    "gray-800": "#24262C",
+    "gray-850": "#1E1F24",
+    "gray-900": "#1A1B1E",
+    "gray-950": "#18191C",
+    "green-100": "#EAF6E6",
+    "green-150": "#DFF1DA",
+    "green-200": "#CEE9C8",
+    "green-250": "#BADEB1",
+    "green-300": "#A1D295",
+    "green-350": "#85C476",
+    "green-400": "#65B452",
+    "green-450": "#42A22B",
+    "green-50": "#EFF9EC",
+    "green-500": "#1C8F00",
+    "green-550": "#1A7B02",
+    "green-600": "#186904",
+    "green-650": "#175906",
+    "green-700": "#154B08",
+    "green-750": "#143E09",
+    "green-800": "#13340A",
+    "green-850": "#122B0B",
+    "green-900": "#11260C",
+    "green-950": "#11230C",
+    "red-100": "#FDF2F3",
+    "red-150": "#FBE6E8",
+    "red-200": "#F8D5D8",
+    "red-250": "#F4BFC5",
+    "red-300": "#F0A5AD",
+    "red-350": "#EB8792",
+    "red-400": "#E56673",
+    "red-450": "#DF4051",
+    "red-50": "#FEF7F8",
+    "red-500": "#D8182C",
+    "red-550": "#B91829",
+    "red-600": "#9C1825",
+    "red-650": "#821823",
+    "red-700": "#6B1720",
+    "red-750": "#57171E",
+    "red-800": "#46171C",
+    "red-850": "#38171A",
+    "red-900": "#2F1719",
+    "red-950": "#2B1719",
+    "yellow-100": "#FFF9E3",
+    "yellow-150": "#FFF7D9",
+    "yellow-200": "#FFF4CB",
+    "yellow-250": "#FFEFB9",
+    "yellow-300": "#FFEBA3",
+    "yellow-350": "#FFE58B",
+    "yellow-400": "#FFDF6F",
+    "yellow-450": "#FFD850",
+    "yellow-50": "#FFFAE7",
+    "yellow-500": "#FFD02F",
+    "yellow-550": "#D7B029",
+    "yellow-600": "#B39223",
+    "yellow-650": "#91771E",
+    "yellow-700": "#746019",
+    "yellow-750": "#5A4B15",
+    "yellow-800": "#453911",
+    "yellow-850": "#342C0F",
+    "yellow-900": "#28220D",
+    "yellow-950": "#231E0C"
+  },
+  "border-widths": {
+    "none": 0,
+    "sm": "1px",
+    "md": "2px",
+    "lg": "4px"
+  },
+  "font-sizes": {
     "125": "0.625rem",
@@ -226,134 +356,13 @@ "150": "0.75rem",
   },
-  "strokeWidths": { "thin": "1.5px", "normal": "2px", "bold": "4px" },
-  "zIndices": {
-    "dropdownMenu": 100,
+  "stroke-widths": {
+    "thin": "1.5px",
+    "normal": "2px",
+    "bold": "4px"
+  },
+  "z-indices": {
+    "dropdown-menu": 100,
     "select": 200,
     "popover": 300,
     "tooltip": 400
-  },
-  "colors": {
-    "black": "#000000",
-    "transparent": "#FFFFFF00",
-    "white": "#FFFFFF",
-    "blue-100": "#F2F4FC",
-    "blue-150": "#E8ECFC",
-    "blue-200": "#D9DFFC",
-    "blue-250": "#C7D0FD",
-    "blue-300": "#B1BDFD",
-    "blue-350": "#97A8FE",
-    "blue-400": "#7A90FE",
-    "blue-450": "#5B76FE",
-    "blue-50": "#F7F8FC",
-    "blue-500": "#3859FF",
-    "blue-550": "#314CD9",
-    "blue-600": "#2A41B6",
-    "blue-650": "#243797",
-    "blue-700": "#1E2D7B",
-    "blue-750": "#192563",
-    "blue-800": "#151F4E",
-    "blue-850": "#12193E",
-    "blue-900": "#101633",
-    "blue-950": "#0F142E",
-    "gray-100": "#F3F4F6",
-    "gray-150": "#EBECF0",
-    "gray-200": "#E0E1E6",
-    "gray-250": "#D1D4DB",
-    "gray-300": "#C1C3CD",
-    "gray-350": "#ADB1BD",
-    "gray-400": "#979CAB",
-    "gray-450": "#7F8497",
-    "gray-50": "#F6F7F9",
-    "gray-500": "#656B81",
-    "gray-550": "#575C6F",
-    "gray-600": "#4A4E5E",
-    "gray-650": "#3F424F",
-    "gray-700": "#343741",
-    "gray-750": "#2B2E35",
-    "gray-800": "#24262C",
-    "gray-850": "#1E1F24",
-    "gray-900": "#1A1B1E",
-    "gray-950": "#18191C",
-    "green-100": "#EAF6E6",
-    "green-150": "#DFF1DA",
-    "green-200": "#CEE9C8",
-    "green-250": "#BADEB1",
-    "green-300": "#A1D295",
-    "green-350": "#85C476",
-    "green-400": "#65B452",
-    "green-450": "#42A22B",
-    "green-50": "#EFF9EC",
-    "green-500": "#1C8F00",
-    "green-550": "#1A7B02",
-    "green-600": "#186904",
-    "green-650": "#175906",
-    "green-700": "#154B08",
-    "green-750": "#143E09",
-    "green-800": "#13340A",
-    "green-850": "#122B0B",
-    "green-900": "#11260C",
-    "green-950": "#11230C",
-    "red-100": "#FDF2F3",
-    "red-150": "#FBE6E8",
-    "red-200": "#F8D5D8",
-    "red-250": "#F4BFC5",
-    "red-300": "#F0A5AD",
-    "red-350": "#EB8792",
-    "red-400": "#E56673",
-    "red-450": "#DF4051",
-    "red-50": "#FEF7F8",
-    "red-500": "#D8182C",
-    "red-550": "#B91829",
-    "red-600": "#9C1825",
-    "red-650": "#821823",
-    "red-700": "#6B1720",
-    "red-750": "#57171E",
-    "red-800": "#46171C",
-    "red-850": "#38171A",
-    "red-900": "#2F1719",
-    "red-950": "#2B1719",
-    "yellow-100": "#FFF9E3",
-    "yellow-150": "#FFF7D9",
-    "yellow-200": "#FFF4CB",
-    "yellow-250": "#FFEFB9",
-    "yellow-300": "#FFEBA3",
-    "yellow-350": "#FFE58B",
-    "yellow-400": "#FFDF6F",
-    "yellow-450": "#FFD850",
-    "yellow-50": "#FFFAE7",
-    "yellow-500": "#FFD02F",
-    "yellow-550": "#D7B029",
-    "yellow-600": "#B39223",
-    "yellow-650": "#91771E",
-    "yellow-700": "#746019",
-    "yellow-750": "#5A4B15",
-    "yellow-800": "#453911",
-    "yellow-850": "#342C0F",
-    "yellow-900": "#28220D",
-    "yellow-950": "#231E0C"
-  },
-  "radii": {
-    "0": "0px",
-    "25": "2px",
-    "50": "4px",
-    "75": "6px",
-    "100": "8px",
-    "200": "16px",
-    "round": "999px"
-  },
-  "space": {
-    "0": "0px",
-    "25": "2px",
-    "50": "4px",
-    "100": "8px",
-    "150": "12px",
-    "200": "16px",
-    "300": "24px",
-    "400": "32px",
-    "500": "40px",
-    "600": "48px",
-    "700": "56px",
-    "800": "64px",
-    "1200": "96px",
-    "1600": "128px"
   }
 }

New alerts

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

Improved metrics

Dev dependency count

1

decreased by-80%

Lines of code

1334

increased by1.37%

Worsened metrics

Total package byte prevSize

51432

decreased by-0.03%

Number of low quality alerts

2

increased by100%

No dependency changes