@postenbring/hedwig-tokens - npm Package Compare versions

Comparing version 0.0.0-use-spec-compliant-keys-for-design-tokens-20240111125914 to 0.0.0-validate-css-in-test-20240417125035

package.json

 {
   "name": "@postenbring/hedwig-tokens",
-  "version": "0.0.0-use-spec-compliant-keys-for-design-tokens-20240111125914",
+  "version": "0.0.0-validate-css-in-test-20240417125035",
   "sideEffects": false,
@@ -12,11 +12,11 @@ "license": "MIT",
   "devDependencies": {
-    "@types/node": "20.10.7",
+    "@types/node": "20.12.7",
     "color2k": "2.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-custom": "*",
-    "style-dictionary": "3.9.1",
-    "style-dictionary-utils": "2.0.7",
-    "tailwindcss": "3.4.1",
-    "tsx": "4.7.0",
-    "typescript": "^5.3.3",
+    "style-dictionary": "3.9.2",
+    "style-dictionary-utils": "2.2.1",
+    "tailwindcss": "3.4.3",
+    "tsx": "4.7.2",
+    "typescript": "^5.4.5",
     "hedwig-tsconfig": "0.0.0"
@@ -27,2 +27,13 @@ },
   },
+  "homepage": "https://github.com/bring/hedwig-design-system",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bring/hedwig-design-system"
+  },
+  "keywords": [
+    "hedwig",
+    "posten",
+    "bring",
+    "designtokens"
+  ],
   "scripts": {
@@ -29,0 +40,0 @@ "build": "node --import tsx build.ts",

tokens-output/tokens.d.ts

@@ -36,15 +36,24 @@ export const PostenColorsSignatureRed : "#e32d22";
 export const DarkModeColorsAsh : "#999999";
-export const SpacingSmall1 : "4px";
-export const SpacingSmall2 : "8px";
-export const SpacingSmall3 : "12px";
-export const SpacingSmall4 : "16px";
-export const SpacingMedium1 : "20px";
-export const SpacingMedium2 : "24px";
-export const SpacingMedium3 : "32px";
-export const SpacingMedium4 : "40px";
-export const SpacingLarge1 : "48px";
-export const SpacingLarge2 : "64px";
-export const SpacingLarge3 : "80px";
-export const SpacingLarge4 : "120px";
-export const SpacingLarge5 : "160px";
+/** Larger mobile phones */
+export const BreakpointSmall : "460px";
+/** Most tablets */
+export const BreakpointMedium : "720px";
+/** Smaller laptops and desktop monitors. This is where the navbar goes from the mobile version to the desktop version */
+export const BreakpointLarge : "940px";
+/** Most modern laptops and desktop monitors */
+export const BreakpointXlarge : "1200px";
+export const Spacing4 : "4px";
+export const Spacing8 : "8px";
+export const Spacing12 : "12px";
+export const Spacing16 : "16px";
+export const Spacing20 : "20px";
+export const Spacing24 : "24px";
+export const Spacing32 : "32px";
+export const Spacing40 : "40px";
+export const Spacing48 : "48px";
+export const Spacing64 : "64px";
+export const Spacing80 : "80px";
+export const Spacing120 : "120px";
+export const Spacing160 : "160px";
+export const NavbarHeight : "112px";
 export const FontsPostenSans : string[];
@@ -61,4 +70,4 @@ export const FontsPostenSansBold : string[];
 export const TypographyBringH2 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
-export const TypographyHeaderH3 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
-export const TypographyHeaderH3Title : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
+export const TypographyH3 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
+export const TypographyH3Title : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
 export const TypographyBody : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
@@ -79,2 +88,9 @@ export const TypographyBodyTitle : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
 export const MicroAnimationEasingNormal : number[];
+export const MicroAnimationDurationQuick : "0.130s";
+export const MicroAnimationDurationNormal : "0.300s";
+export const MicroAnimationDurationSlow : "0.700s";
+export const Opacity7 : ".07";
+export const Opacity10 : ".1";
+export const Opacity20 : ".2";
+export const Opacity50 : ".5";
 export const FontSizePostenH1Display : string[];
@@ -98,8 +114,8 @@ export const FontSizePostenH1DisplayMin : "40px";
 export const FontSizeBringH2Max : "32px";
-export const FontSizeHeaderH3 : string[];
-export const FontSizeHeaderH3Min : "22px";
-export const FontSizeHeaderH3Max : "24px";
-export const FontSizeHeaderH3Title : string[];
-export const FontSizeHeaderH3TitleMin : "22px";
-export const FontSizeHeaderH3TitleMax : "24px";
+export const FontSizeH3 : string[];
+export const FontSizeH3Min : "22px";
+export const FontSizeH3Max : "24px";
+export const FontSizeH3Title : string[];
+export const FontSizeH3TitleMin : "22px";
+export const FontSizeH3TitleMax : "24px";
 export const FontSizeBody : string[];
@@ -143,8 +159,8 @@ export const FontSizeBodyMin : "18px";
 export const LineHeightBringH2Max : "40px";
-export const LineHeightHeaderH3 : string[];
-export const LineHeightHeaderH3Min : "28px";
-export const LineHeightHeaderH3Max : "32px";
-export const LineHeightHeaderH3Title : string[];
-export const LineHeightHeaderH3TitleMin : "28px";
-export const LineHeightHeaderH3TitleMax : "32px";
+export const LineHeightH3 : string[];
+export const LineHeightH3Min : "28px";
+export const LineHeightH3Max : "32px";
+export const LineHeightH3Title : string[];
+export const LineHeightH3TitleMin : "28px";
+export const LineHeightH3TitleMax : "32px";
 export const LineHeightBody : string[];
@@ -176,4 +192,4 @@ export const LineHeightBodyMin : "26px";
 export const FontWeightBringH2 : number;
-export const FontWeightHeaderH3 : number;
-export const FontWeightHeaderH3Title : number;
+export const FontWeightH3 : number;
+export const FontWeightH3Title : number;
 export const FontWeightBody : number;
@@ -187,12 +203,1 @@ export const FontWeightBodyTitle : number;
 export const FontWeightCaptionTitle : number;
-export const MicroAnimationDurationQuick : "0.130s";
-export const MicroAnimationDurationNormal : "0.300s";
-export const MicroAnimationDurationSlow : "0.700s";
-export const BreakpointsSmall : "460px";
-export const BreakpointsMedium : "720px";
-export const BreakpointsLarge : "940px";
-export const BreakpointsXlarge : "1200px";
-export const Opacity7 : ".07";
-export const Opacity10 : ".1";
-export const Opacity20 : ".2";
-export const Opacity50 : ".5";

tokens-output/tw-tokens.json

@@ -44,18 +44,26 @@ {
   },
-  "spacing": {
+  "breakpoint": {
     "$type": "dimension",
-    "small-1": "4px",
-    "small-2": "8px",
-    "small-3": "12px",
-    "small-4": "16px",
-    "medium-1": "20px",
-    "medium-2": "24px",
-    "medium-3": "32px",
-    "medium-4": "40px",
-    "large-1": "48px",
-    "large-2": "64px",
-    "large-3": "80px",
-    "large-4": "120px",
-    "large-5": "160px"
+    "small": "460px",
+    "medium": "720px",
+    "large": "940px",
+    "xlarge": "1200px"
   },
+  "spacing": {
+    "4": "4px",
+    "8": "8px",
+    "12": "12px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "32": "32px",
+    "40": "40px",
+    "48": "48px",
+    "64": "64px",
+    "80": "80px",
+    "120": "120px",
+    "160": "160px",
+    "$type": "dimension"
+  },
+  "navbar-height": "112px",
   "fonts": {
@@ -193,3 +201,3 @@ "$type": "fontFamily",
     },
-    "header-h3": {
+    "h3": {
       "fontFamily": [
@@ -211,3 +219,3 @@ "Posten Sans",
     },
-    "header-h3-title": {
+    "h3-title": {
       "fontFamily": [
@@ -364,2 +372,14 @@ "Posten Sans",
   },
+  "micro-animation-duration": {
+    "$type": "time",
+    "quick": "0.130s",
+    "normal": "0.300s",
+    "slow": "0.700s"
+  },
+  "opacity": {
+    "7": ".07",
+    "10": ".1",
+    "20": ".2",
+    "50": ".5"
+  },
   "font-size": {
@@ -385,8 +405,8 @@ "type": "dimension",
     "bring-h2-max": "32px",
-    "header-h3": "clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)",
-    "header-h3-min": "22px",
-    "header-h3-max": "24px",
-    "header-h3-title": "clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)",
-    "header-h3-title-min": "22px",
-    "header-h3-title-max": "24px",
+    "h3": "clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)",
+    "h3-min": "22px",
+    "h3-max": "24px",
+    "h3-title": "clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)",
+    "h3-title-min": "22px",
+    "h3-title-max": "24px",
     "body": "clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px)",
@@ -433,8 +453,8 @@ "body-min": "18px",
     "bring-h2-max": "40px",
-    "header-h3": "clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)",
-    "header-h3-min": "28px",
-    "header-h3-max": "32px",
-    "header-h3-title": "clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)",
-    "header-h3-title-min": "28px",
-    "header-h3-title-max": "32px",
+    "h3": "clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)",
+    "h3-min": "28px",
+    "h3-max": "32px",
+    "h3-title": "clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)",
+    "h3-title-min": "28px",
+    "h3-title-max": "32px",
     "body": "clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px)",
@@ -469,4 +489,4 @@ "body-min": "26px",
     "bring-h2": 400,
-    "header-h3": 400,
-    "header-h3-title": 500,
+    "h3": 400,
+    "h3-title": 500,
     "body": 400,
@@ -480,24 +500,3 @@ "body title": 500,
     "caption title": 500
-  },
-  "$description1": "Tokens manually added that are not from an Figma Export",
-  "$description2": "Here we can add missing tokens under development",
-  "micro-animation-duration": {
-    "$type": "time",
-    "quick": "0.130s",
-    "normal": "0.300s",
-    "slow": "0.700s"
-  },
-  "breakpoints": {
-    "$type": "dimension",
-    "small": "460px",
-    "medium": "720px",
-    "large": "940px",
-    "xlarge": "1200px"
-  },
-  "opacity": {
-    "7": ".07",
-    "10": ".1",
-    "20": ".2",
-    "50": ".5"
   }
 }

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

4

increased byInfinity%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

58788

decreased by-21.7%

Number of package files

9

decreased by-10%

Lines of code

1309

decreased by-16.3%

No dependency changes