@postenbring/hedwig-tokens - npm Package Compare versions

Comparing version 0.0.0-update-packages-and-readme-20231123135530 to 0.0.0-updated-radii-20241202134247

package.json

 {
   "name": "@postenbring/hedwig-tokens",
-  "version": "0.0.0-update-packages-and-readme-20231123135530",
+  "version": "0.0.0-updated-radii-20241202134247",
   "sideEffects": false,
   "license": "MIT",
   "files": [
-    "assets/**",
     "tokens-output/**",
-    "tailwind.config.js"
+    "tailwind.config.cjs",
+    "tailwind.config.d.cts"
   ],
   "devDependencies": {
-    "@types/node": "20.9.4",
-    "eslint": "^8.53.0",
+    "@types/node": "22.9.0",
+    "color2k": "2.0.3",
+    "eslint": "^8.57.0",
     "eslint-config-custom": "*",
-    "style-dictionary": "3.9.0",
-    "style-dictionary-utils": "2.0.4",
-    "tsx": "4.4.0",
-    "typescript": "^5.2.2",
+    "style-dictionary": "3.9.2",
+    "style-dictionary-utils": "2.4.1",
+    "tailwindcss": "3.4.14",
+    "tsx": "4.19.2",
+    "typescript": "^5.6.3",
     "hedwig-tsconfig": "0.0.0"
@@ -24,9 +26,20 @@ },
   },
+  "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": {
     "build": "node --import tsx build.ts",
-    "dev": "node --import tsx --watch-path lib --watch-path tokens-source --watch-path build.ts --watch build.ts",
+    "dev": "node --import tsx --watch-preserve-output --watch-path lib --watch-path tokens-source --watch-path build.ts --watch build.ts",
     "lint": "eslint \"*.ts*\"",
     "typecheck": "tsc --noEmit",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+    "clean": "rm -rf .turbo node_modules dist"
   }
 }

tokens-output/tokens.d.ts

@@ -8,8 +8,8 @@ export const PostenColorsSignatureRed : "#e32d22";
 export const PostenColorsLightRedHover : "#ff7d55";
-export const BringColorsSignatureGreen : "#7bc144";
+export const BringColorsSignatureGreen : "#56b529";
 export const BringColorsDarkerGreen : "#002f19";
 export const BringColorsDarkGreen : "#00643a";
-export const BringColorsLightGreen : "#c8dc8c";
+export const BringColorsLightGreen : "#b5e099";
 export const BringColorsLighterGreen : "#f1f7e9";
-export const BringColorsSignatureGreenHover : "#86cc4a";
+export const BringColorsSignatureGreenHover : "#6ec943";
 export const BringColorsLightGreenHover : "#d3e593";
@@ -31,3 +31,3 @@ export const UiColorsBlack : "#000000";
 export const DarkModeColorsCoal : "#252525";
-/** Fill inputfields, checkbox, radiobuttons, toogles */
+/** Fill inputfields, checkbox, radio buttons, toogles */
 export const DarkModeColorsDusk : "#2c2c2c";
@@ -38,19 +38,28 @@ /** Clickable cards or tiles */
 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[];
 export const FontsPostenSansBold : string[];
 export const FontsPostenSansMedium : string[];
 export const FontsPostenSansRegular : string[];
-export const FontsPostenSansLight : string[];
 export const TypographyPostenH1Display : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
@@ -62,4 +71,4 @@ export const TypographyPostenH1 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: 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 };
@@ -73,3 +82,7 @@ export const TypographyBodyTitle : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
 export const TypographyCaptionTitle : { fontFamily: string[], fontSize: string, lineHeight: string, fontWeight: number, letterSpacing: string };
-export const BorderRadius : "2px";
+export const BorderRadius8 : "8px";
+export const BorderRadius16 : "16px";
+export const BorderRadius24 : "24px";
+export const BorderRadius32 : "32px";
+export const BorderRadius : "8px";
 export const StrokeDefault : "1px";
@@ -81,2 +94,9 @@ export const StrokeThick : "2px";
 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[];
@@ -100,8 +120,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[];
@@ -145,8 +165,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[];
@@ -172,12 +192,17 @@ export const LineHeightBodyMin : "26px";
 export const LineHeightCaptionTitle : "18px";
-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";
+export const FontWeightPostenH1Display : number;
+export const FontWeightPostenH1 : number;
+export const FontWeightPostenH2 : number;
+export const FontWeightBringH1Display : number;
+export const FontWeightBringH1 : number;
+export const FontWeightBringH2 : number;
+export const FontWeightH3 : number;
+export const FontWeightH3Title : number;
+export const FontWeightBody : number;
+export const FontWeightBodyTitle : number;
+export const FontWeightBodySmall : number;
+export const FontWeightBodySmallTitle : number;
+export const FontWeightTechnical : number;
+export const FontWeightTechnicalTitle : number;
+export const FontWeightCaption : number;
+export const FontWeightCaptionTitle : number;

tokens-output/tw-tokens.json

 {
   "posten-colors": {
-    "type": "color",
+    "$type": "color",
     "signature-red": "#e32d22",
@@ -13,13 +13,13 @@ "darker-red": "#4a1011",
   "bring-colors": {
-    "type": "color",
-    "signature-green": "#7bc144",
+    "$type": "color",
+    "signature-green": "#56B529",
     "darker-green": "#002f19",
     "dark-green": "#00643a",
-    "light-green": "#c8dc8c",
+    "light-green": "#B5E099",
     "lighter-green": "#f1f7e9",
-    "signature-green-hover": "#86cc4a",
+    "signature-green-hover": "#6EC943",
     "light-green-hover": "#d3e593"
   },
   "ui-colors": {
-    "type": "color",
+    "$type": "color",
     "black": "#000000",
@@ -38,3 +38,3 @@ "dark-grey": "#6e6e6e",
   "dark-mode-colors": {
-    "type": "color",
+    "$type": "color",
     "obsidian": "#121212",
@@ -46,20 +46,33 @@ "coal": "#252525",
   },
+  "breakpoint": {
+    "$type": "dimension",
+    "small": "460px",
+    "medium": "720px",
+    "large": "940px",
+    "xlarge": "1200px"
+  },
   "spacing": {
-    "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"
+    "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": {
-    "type": "fontFamily",
+    "$type": "fontFamily",
+    "posten-sans": [
+      "Posten Sans",
+      "Arial",
+      "sans-serif"
+    ],
     "posten-sans-bold": [
@@ -79,14 +92,9 @@ "Posten Sans Bold",
       "sans-serif"
-    ],
-    "posten-sans-light": [
-      "Posten Sans Light",
-      "Arial",
-      "sans-serif"
     ]
   },
   "typography": {
-    "type": "typography",
+    "$type": "typography",
     "posten-h1-display": {
       "fontFamily": [
-        "Posten Sans Bold",
+        "Posten Sans",
         "Arial",
@@ -103,3 +111,3 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 700,
       "letterSpacing": "0"
@@ -109,3 +117,3 @@ },
       "fontFamily": [
-        "Posten Sans Bold",
+        "Posten Sans",
         "Arial",
@@ -122,3 +130,3 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 700,
       "letterSpacing": "0"
@@ -128,3 +136,3 @@ },
       "fontFamily": [
-        "Posten Sans Medium",
+        "Posten Sans",
         "Arial",
@@ -141,3 +149,3 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
@@ -147,3 +155,3 @@ },
       "fontFamily": [
-        "Posten Sans Light",
+        "Posten Sans",
         "Arial",
@@ -160,3 +168,3 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
@@ -166,3 +174,3 @@ },
       "fontFamily": [
-        "Posten Sans Light",
+        "Posten Sans",
         "Arial",
@@ -179,3 +187,3 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
@@ -185,3 +193,3 @@ },
       "fontFamily": [
-        "Posten Sans Regular",
+        "Posten Sans",
         "Arial",
@@ -198,8 +206,8 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
     },
-    "header-h3": {
+    "h3": {
       "fontFamily": [
-        "Posten Sans Regular",
+        "Posten Sans",
         "Arial",
@@ -219,5 +227,5 @@ "sans-serif"
     },
-    "header-h3-title": {
+    "h3-title": {
       "fontFamily": [
-        "Posten Sans Medium",
+        "Posten Sans",
         "Arial",
@@ -234,3 +242,3 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
@@ -240,3 +248,3 @@ },
       "fontFamily": [
-        "Posten Sans Regular",
+        "Posten Sans",
         "Arial",
@@ -256,5 +264,5 @@ "sans-serif"
     },
-    "body title": {
+    "body-title": {
       "fontFamily": [
-        "Posten Sans Medium",
+        "Posten Sans",
         "Arial",
@@ -271,8 +279,8 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
     },
-    "body small": {
+    "body-small": {
       "fontFamily": [
-        "Posten Sans Regular",
+        "Posten Sans",
         "Arial",
@@ -292,5 +300,5 @@ "sans-serif"
     },
-    "body small title": {
+    "body-small-title": {
       "fontFamily": [
-        "Posten Sans Medium",
+        "Posten Sans",
         "Arial",
@@ -307,3 +315,3 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
@@ -313,3 +321,3 @@ },
       "fontFamily": [
-        "Posten Sans Regular",
+        "Posten Sans",
         "Arial",
@@ -329,5 +337,5 @@ "sans-serif"
     },
-    "technical title": {
+    "technical-title": {
       "fontFamily": [
-        "Posten Sans Medium",
+        "Posten Sans",
         "Arial",
@@ -344,3 +352,3 @@ "sans-serif"
       ],
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
@@ -350,3 +358,3 @@ },
       "fontFamily": [
-        "Posten Sans Regular",
+        "Posten Sans",
         "Arial",
@@ -360,5 +368,5 @@ "sans-serif"
     },
-    "caption title": {
+    "caption-title": {
       "fontFamily": [
-        "Posten Sans Regular",
+        "Posten Sans",
         "Arial",
@@ -369,7 +377,14 @@ "sans-serif"
       "lineHeight": "18px",
-      "fontWeight": 400,
+      "fontWeight": 500,
       "letterSpacing": "0"
     }
   },
-  "border-radius": "2px",
+  "border-radius": {
+    "8": "8px",
+    "16": "16px",
+    "24": "24px",
+    "32": "32px",
+    "$type": "borderRadius",
+    "_": "8px"
+  },
   "stroke-default": "1px",
@@ -384,117 +399,127 @@ "stroke-thick": "2px",
   },
+  "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": {
     "type": "dimension",
-    "posten-h1-display": "calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300)))",
+    "posten-h1-display": "clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)",
     "posten-h1-display-min": "40px",
     "posten-h1-display-max": "72px",
-    "posten-h1": "calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300)))",
+    "posten-h1": "clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)",
     "posten-h1-min": "32px",
     "posten-h1-max": "48px",
-    "posten-h2": "calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300)))",
+    "posten-h2": "clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)",
     "posten-h2-min": "28px",
     "posten-h2-max": "32px",
-    "bring-h1-display": "calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300)))",
+    "bring-h1-display": "clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)",
     "bring-h1-display-min": "40px",
     "bring-h1-display-max": "72px",
-    "bring-h1": "calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300)))",
+    "bring-h1": "clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)",
     "bring-h1-min": "32px",
     "bring-h1-max": "48px",
-    "bring-h2": "calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300)))",
+    "bring-h2": "clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)",
     "bring-h2-min": "28px",
     "bring-h2-max": "32px",
-    "header-h3": "calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300)))",
-    "header-h3-min": "22px",
-    "header-h3-max": "24px",
-    "header-h3-title": "calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300)))",
-    "header-h3-title-min": "22px",
-    "header-h3-title-max": "24px",
-    "body": "calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300)))",
+    "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)",
     "body-min": "18px",
     "body-max": "20px",
-    "body title": "calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300)))",
-    "body title-min": "18px",
-    "body title-max": "20px",
-    "body small": "calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300)))",
-    "body small-min": "16px",
-    "body small-max": "18px",
-    "body small title": "calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300)))",
-    "body small title-min": "16px",
-    "body small title-max": "18px",
-    "technical": "calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300)))",
+    "body-title": "clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px)",
+    "body-title-min": "18px",
+    "body-title-max": "20px",
+    "body-small": "clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px)",
+    "body-small-min": "16px",
+    "body-small-max": "18px",
+    "body-small-title": "clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px)",
+    "body-small-title-min": "16px",
+    "body-small-title-max": "18px",
+    "technical": "clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px)",
     "technical-min": "14px",
     "technical-max": "16px",
-    "technical title": "calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300)))",
-    "technical title-min": "14px",
-    "technical title-max": "16px",
+    "technical-title": "clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px)",
+    "technical-title-min": "14px",
+    "technical-title-max": "16px",
     "caption": "13px",
-    "caption title": "13px"
+    "caption-title": "13px"
   },
   "line-height": {
     "type": "dimension",
-    "posten-h1-display": "calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300)))",
+    "posten-h1-display": "clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px)",
     "posten-h1-display-min": "56px",
     "posten-h1-display-max": "80px",
-    "posten-h1": "calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300)))",
+    "posten-h1": "clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px)",
     "posten-h1-min": "40px",
     "posten-h1-max": "56px",
-    "posten-h2": "calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300)))",
+    "posten-h2": "clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px)",
     "posten-h2-min": "36px",
     "posten-h2-max": "40px",
-    "bring-h1-display": "calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300)))",
+    "bring-h1-display": "clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px)",
     "bring-h1-display-min": "56px",
     "bring-h1-display-max": "80px",
-    "bring-h1": "calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300)))",
+    "bring-h1": "clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px)",
     "bring-h1-min": "40px",
     "bring-h1-max": "56px",
-    "bring-h2": "calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300)))",
+    "bring-h2": "clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px)",
     "bring-h2-min": "36px",
     "bring-h2-max": "40px",
-    "header-h3": "calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300)))",
-    "header-h3-min": "28px",
-    "header-h3-max": "32px",
-    "header-h3-title": "calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300)))",
-    "header-h3-title-min": "28px",
-    "header-h3-title-max": "32px",
-    "body": "calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300)))",
+    "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)",
     "body-min": "26px",
     "body-max": "28px",
-    "body title": "calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300)))",
-    "body title-min": "26px",
-    "body title-max": "28px",
-    "body small": "calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300)))",
-    "body small-min": "24px",
-    "body small-max": "26px",
-    "body small title": "calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300)))",
-    "body small title-min": "24px",
-    "body small title-max": "26px",
-    "technical": "calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300)))",
+    "body-title": "clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px)",
+    "body-title-min": "26px",
+    "body-title-max": "28px",
+    "body-small": "clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px)",
+    "body-small-min": "24px",
+    "body-small-max": "26px",
+    "body-small-title": "clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px)",
+    "body-small-title-min": "24px",
+    "body-small-title-max": "26px",
+    "technical": "clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)",
     "technical-min": "22px",
     "technical-max": "24px",
-    "technical title": "calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300)))",
-    "technical title-min": "22px",
-    "technical title-max": "24px",
+    "technical-title": "clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)",
+    "technical-title-min": "22px",
+    "technical-title-max": "24px",
     "caption": "18px",
-    "caption title": "18px"
+    "caption-title": "18px"
   },
-  "$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"
+  "font-weight": {
+    "type": "number",
+    "posten-h1-display": 700,
+    "posten-h1": 700,
+    "posten-h2": 500,
+    "bring-h1-display": 500,
+    "bring-h1": 500,
+    "bring-h2": 500,
+    "h3": 400,
+    "h3-title": 500,
+    "body": 400,
+    "body-title": 500,
+    "body-small": 400,
+    "body-small-title": 500,
+    "technical": 400,
+    "technical-title": 500,
+    "caption": 400,
+    "caption-title": 500
   }
 }

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 20 instances 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%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

59052

decreased by-94.09%

Dev dependency count

10

increased by25%

Number of package files

9

decreased by-68.97%

Lines of code

1320

decreased by-2.87%

No dependency changes