@utrecht/design-tokens - npm Package Compare versions

Comparing version 1.0.0-alpha.6 to 1.0.0-alpha.7

dist/index.js

 /**
  * Do not edit directly
- * Generated on Fri, 16 Jul 2021 14:53:20 GMT
+ * Generated on Fri, 16 Jul 2021 17:10:55 GMT
  */
@@ -15,3 +15,3 @@
 export const utrechtBadgePaddingBlock = "8px"; // Default block padding for badge components
-export const utrechtBadgePaddingInline = "1ch"; // Default inline padding color for badge components
+export const utrechtBadgePaddingInline = "12px"; // Default inline padding color for badge components
 export const utrechtBlockquoteMarginInlineStart = "1.6em";
@@ -32,4 +32,4 @@ export const utrechtBlockquoteMarginInlineEnd = "1.6em";
 export const utrechtButtonPaddingBlockEnd = "12px";
-export const utrechtButtonPaddingInlineStart = "1.5ch";
-export const utrechtButtonPaddingInlineEnd = "1.5ch";
+export const utrechtButtonPaddingInlineStart = "16px";
+export const utrechtButtonPaddingInlineEnd = "16px";
 export const utrechtButtonDisabledColor = "hsl(0 0% 100%)";
@@ -125,4 +125,4 @@ export const utrechtButtonDisabledBackgroundColor = "hsl(0 0% 90%)";
 export const utrechtMapcontrolbuttonPaddingBlockEnd = "4px";
-export const utrechtMapcontrolbuttonPaddingInlineStart = "0.75ch";
-export const utrechtMapcontrolbuttonPaddingInlineEnd = "0.75ch";
+export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
+export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
 export const utrechtMapcontrolbuttonWidth = "32px";
@@ -290,46 +290,55 @@ export const utrechtMapcontrolbuttonHeight = "32px";
 export const utrechtFeedbackActiveColor = "hsl(90 30% 50%)";
-export const utrechtSpaceBlock3xs = "2px";
-export const utrechtSpaceBlock2xs = "4px";
-export const utrechtSpaceBlockXs = "8px";
-export const utrechtSpaceBlockSm = "12px";
-export const utrechtSpaceBlockMd = "16px";
-export const utrechtSpaceBlockLg = "24px";
-export const utrechtSpaceBlockXl = "28px";
-export const utrechtSpaceBlock2xl = "32px";
-export const utrechtSpaceBlock3xl = "48px";
-export const utrechtSpaceBlock4xl = "64px";
-export const utrechtSpaceBlock5xl = "80px";
-export const utrechtSpaceInline3xs = "0.125ch";
-export const utrechtSpaceInline2xs = "0.25ch";
-export const utrechtSpaceInlineXs = "0.5ch";
-export const utrechtSpaceInlineSm = "0.75ch";
-export const utrechtSpaceInlineMd = "1ch";
-export const utrechtSpaceInlineLg = "1.5ch";
-export const utrechtSpaceInlineXl = "1.75ch";
-export const utrechtSpaceInline2xl = "2ch";
-export const utrechtSpaceInline3xl = "3ch";
-export const utrechtSpaceRow4xs = "1px";
-export const utrechtSpaceRow3xs = "2px";
-export const utrechtSpaceRow2xs = "4px";
-export const utrechtSpaceRowXs = "8px";
-export const utrechtSpaceRowSm = "12px";
-export const utrechtSpaceRowMd = "16px";
-export const utrechtSpaceRowLg = "24px";
-export const utrechtSpaceRowXl = "28px";
-export const utrechtSpaceRow2xl = "32px";
-export const utrechtSpaceRow3xl = "48px";
-export const utrechtSpaceRow4xl = "64px";
-export const utrechtSpaceRow5xl = "80px";
-export const utrechtSpaceColumn4xs = "1px";
-export const utrechtSpaceColumn3xs = "2px";
-export const utrechtSpaceColumn2xs = "4px";
-export const utrechtSpaceColumnXs = "8px";
-export const utrechtSpaceColumnSm = "12px";
-export const utrechtSpaceColumnMd = "16px";
-export const utrechtSpaceColumnLg = "24px";
-export const utrechtSpaceColumnXl = "28px";
-export const utrechtSpaceColumn2xl = "32px";
-export const utrechtSpaceColumn3xl = "48px";
-export const utrechtSpaceColumn4xl = "64px";
-export const utrechtSpaceColumn5xl = "80px";
+export const utrechtSpaceBlock3xs = "2px"; // 12.5% / Extra Small 3
+export const utrechtSpaceBlock2xs = "4px"; // 25% / Extra Small 2
+export const utrechtSpaceBlockXs = "8px"; // 50% / Extra Small
+export const utrechtSpaceBlockSm = "12px"; // 75% / Small
+export const utrechtSpaceBlockMd = "16px"; // 100% / Medium
+export const utrechtSpaceBlockLg = "24px"; // 150% / Large
+export const utrechtSpaceBlockXl = "28px"; // 175% / Extra Large
+export const utrechtSpaceBlock2xl = "32px"; // 200% / Extra Large 2
+export const utrechtSpaceBlock3xl = "48px"; // 300% / Extra Large 3
+export const utrechtSpaceBlock4xl = "64px"; // 400% / Extra Large 4
+export const utrechtSpaceBlock5xl = "80px"; // 500% / Extra Large 5
+export const utrechtSpaceInline3xs = "2px"; // 12.5% / Extra Small 3
+export const utrechtSpaceInline2xs = "4px"; // 25% / Extra Small 2
+export const utrechtSpaceInlineXs = "8px"; // 50% / Extra Small
+export const utrechtSpaceInlineSm = "12px"; // 75% / Small
+export const utrechtSpaceInlineMd = "16px"; // 100% / Medium
+export const utrechtSpaceInlineLg = "24px"; // 150% / Large
+export const utrechtSpaceInlineXl = "28px"; // 175% / Extra Large
+export const utrechtSpaceInline2xl = "32px"; // 200% / Extra Large 2
+export const utrechtSpaceInline3xl = "48px"; // 300% / Extra Large 3
+export const utrechtSpaceText3xs = "0.125ch"; // 12.5% / Extra Small 3
+export const utrechtSpaceText2xs = "0.25ch"; // 25% / Extra Small 2
+export const utrechtSpaceTextXs = "0.5ch"; // 50% / Extra Small
+export const utrechtSpaceTextSm = "0.75ch"; // 75% / Small
+export const utrechtSpaceTextMd = "1ch"; // 100% / Medium
+export const utrechtSpaceTextLg = "1.5ch"; // 150% / Large
+export const utrechtSpaceTextXl = "1.75ch"; // 175% / Extra Large
+export const utrechtSpaceText2xl = "2ch"; // 200% / Extra Large 2
+export const utrechtSpaceText3xl = "3ch"; // 300% / Extra Large 3
+export const utrechtSpaceRow4xs = "1px"; // 6.25% / Extra Small 4
+export const utrechtSpaceRow3xs = "2px"; // 12.5% / Extra Small 3
+export const utrechtSpaceRow2xs = "4px"; // 25% / Extra Small 2
+export const utrechtSpaceRowXs = "8px"; // 50% / Extra Small
+export const utrechtSpaceRowSm = "12px"; // 75% / Small
+export const utrechtSpaceRowMd = "16px"; // 100% / Medium
+export const utrechtSpaceRowLg = "24px"; // 150% / Large
+export const utrechtSpaceRowXl = "28px"; // 175% / Extra Large
+export const utrechtSpaceRow2xl = "32px"; // 200% / Extra Large 2
+export const utrechtSpaceRow3xl = "48px"; // 300% / Extra Large 3
+export const utrechtSpaceRow4xl = "64px"; // 400% / Extra Large 4
+export const utrechtSpaceRow5xl = "80px"; // 500% / Extra Large 5
+export const utrechtSpaceColumn4xs = "1px"; // 6.25% / Extra Small 4
+export const utrechtSpaceColumn3xs = "2px"; // 12.5% / Extra Small 3
+export const utrechtSpaceColumn2xs = "4px"; // 25% / Extra Small 2
+export const utrechtSpaceColumnXs = "8px"; // 50% / Extra Small
+export const utrechtSpaceColumnSm = "12px"; // 75% / Small
+export const utrechtSpaceColumnMd = "16px"; // 100% / Medium
+export const utrechtSpaceColumnLg = "24px"; // 150% / Large
+export const utrechtSpaceColumnXl = "28px"; // 175% / Extra Large
+export const utrechtSpaceColumn2xl = "32px"; // 200% / Extra Large 2
+export const utrechtSpaceColumn3xl = "48px"; // 300% / Extra Large 3
+export const utrechtSpaceColumn4xl = "64px"; // 400% / Extra Large 4
+export const utrechtSpaceColumn5xl = "80px"; // 500% / Extra Large 5
 export const utrechtBadgeCounterBackgroundColor = "hsl(0 100% 40%)";
@@ -351,6 +360,6 @@ export const utrechtBadgeCounterBorderRadius = "3ex";
 export const utrechtSidenavItemHoverColor = "hsl(211 60% 40%)";
-export const utrechtSidenavItemMarginBlockStart = "0.5ch";
-export const utrechtSidenavItemMarginBlockEnd = "0.5ch";
-export const utrechtSidenavItemMarginInlineStart = "0.5ch";
-export const utrechtSidenavItemMarginInlineEnd = "0.5ch";
+export const utrechtSidenavItemMarginBlockStart = "8px";
+export const utrechtSidenavItemMarginBlockEnd = "8px";
+export const utrechtSidenavItemMarginInlineStart = "2px";
+export const utrechtSidenavItemMarginInlineEnd = "2px";
 export const utrechtSidenavItemMarkerHoverColor = "hsl(211 60% 50%)";
@@ -357,0 +366,0 @@ export const utrechtSidenavItemMarkerColor = "hsl(0 0% 80%)";

package.json

 {
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "author": "Community for NL Design System",
@@ -31,3 +31,3 @@ "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   },
-  "gitHead": "5fa00c0b2d5ed2efcd6ee25ec9ad6e1b66d3db14"
+  "gitHead": "b48c0d876c544155fb6d1fc5441c0dbb19c98099"
 }

src/common/utrecht/space.style-dictionary.json

@@ -5,52 +5,63 @@ {
       "block": {
-        "3xs": { "value": "2px" },
-        "2xs": { "value": "4px" },
-        "xs": { "value": "8px" },
-        "sm": { "value": "12px" },
-        "md": { "value": "16px" },
-        "lg": { "value": "24px" },
-        "xl": { "value": "28px" },
-        "2xl": { "value": "32px" },
-        "3xl": { "value": "48px" },
-        "4xl": { "value": "64px" },
-        "5xl": { "value": "80px" }
+        "3xs": { "value": "2px", "comment": "12.5% / Extra Small 3" },
+        "2xs": { "value": "4px", "comment": "25% / Extra Small 2" },
+        "xs": { "value": "8px", "comment": "50% / Extra Small" },
+        "sm": { "value": "12px", "comment": "75% / Small" },
+        "md": { "value": "16px", "comment": "100% / Medium" },
+        "lg": { "value": "24px", "comment": "150% / Large" },
+        "xl": { "value": "28px", "comment": "175% / Extra Large" },
+        "2xl": { "value": "32px", "comment": "200% / Extra Large 2" },
+        "3xl": { "value": "48px", "comment": "300% / Extra Large 3" },
+        "4xl": { "value": "64px", "comment": "400% / Extra Large 4" },
+        "5xl": { "value": "80px", "comment": "500% / Extra Large 5" }
       },
       "inline": {
-        "3xs": { "value": "0.125ch" },
-        "2xs": { "value": "0.25ch" },
-        "xs": { "value": "0.5ch" },
-        "sm": { "value": "0.75ch" },
-        "md": { "value": "1ch" },
-        "lg": { "value": "1.5ch" },
-        "xl": { "value": "1.75ch" },
-        "2xl": { "value": "2ch" },
-        "3xl": { "value": "3ch" }
+        "3xs": { "value": "2px", "comment": "12.5% / Extra Small 3" },
+        "2xs": { "value": "4px", "comment": "25% / Extra Small 2" },
+        "xs": { "value": "8px", "comment": "50% / Extra Small" },
+        "sm": { "value": "12px", "comment": "75% / Small" },
+        "md": { "value": "16px", "comment": "100% / Medium" },
+        "lg": { "value": "24px", "comment": "150% / Large" },
+        "xl": { "value": "28px", "comment": "175% / Extra Large" },
+        "2xl": { "value": "32px", "comment": "200% / Extra Large 2" },
+        "3xl": { "value": "48px", "comment": "300% / Extra Large 3" }
       },
+      "text": {
+        "3xs": { "value": "0.125ch", "comment": "12.5% / Extra Small 3" },
+        "2xs": { "value": "0.25ch", "comment": "25% / Extra Small 2" },
+        "xs": { "value": "0.5ch", "comment": "50% / Extra Small" },
+        "sm": { "value": "0.75ch", "comment": "75% / Small" },
+        "md": { "value": "1ch", "comment": "100% / Medium" },
+        "lg": { "value": "1.5ch", "comment": "150% / Large" },
+        "xl": { "value": "1.75ch", "comment": "175% / Extra Large" },
+        "2xl": { "value": "2ch", "comment": "200% / Extra Large 2" },
+        "3xl": { "value": "3ch", "comment": "300% / Extra Large 3" }
+      },
       "row": {
-        "4xs": { "value": "1px" },
-        "3xs": { "value": "2px" },
-        "2xs": { "value": "4px" },
-        "xs": { "value": "8px" },
-        "sm": { "value": "12px" },
-        "md": { "value": "16px" },
-        "lg": { "value": "24px" },
-        "xl": { "value": "28px" },
-        "2xl": { "value": "32px" },
-        "3xl": { "value": "48px" },
-        "4xl": { "value": "64px" },
-        "5xl": { "value": "80px" }
+        "4xs": { "value": "1px", "comment": "6.25% / Extra Small 4" },
+        "3xs": { "value": "2px", "comment": "12.5% / Extra Small 3" },
+        "2xs": { "value": "4px", "comment": "25% / Extra Small 2" },
+        "xs": { "value": "8px", "comment": "50% / Extra Small" },
+        "sm": { "value": "12px", "comment": "75% / Small" },
+        "md": { "value": "16px", "comment": "100% / Medium" },
+        "lg": { "value": "24px", "comment": "150% / Large" },
+        "xl": { "value": "28px", "comment": "175% / Extra Large" },
+        "2xl": { "value": "32px", "comment": "200% / Extra Large 2" },
+        "3xl": { "value": "48px", "comment": "300% / Extra Large 3" },
+        "4xl": { "value": "64px", "comment": "400% / Extra Large 4" },
+        "5xl": { "value": "80px", "comment": "500% / Extra Large 5" }
       },
       "column": {
-        "4xs": { "value": "1px" },
-        "3xs": { "value": "2px" },
-        "2xs": { "value": "4px" },
-        "xs": { "value": "8px" },
-        "sm": { "value": "12px" },
-        "md": { "value": "16px" },
-        "lg": { "value": "24px" },
-        "xl": { "value": "28px" },
-        "2xl": { "value": "32px" },
-        "3xl": { "value": "48px" },
-        "4xl": { "value": "64px" },
-        "5xl": { "value": "80px" }
+        "4xs": { "value": "1px", "comment": "6.25% / Extra Small 4" },
+        "3xs": { "value": "2px", "comment": "12.5% / Extra Small 3" },
+        "2xs": { "value": "4px", "comment": "25% / Extra Small 2" },
+        "xs": { "value": "8px", "comment": "50% / Extra Small" },
+        "sm": { "value": "12px", "comment": "75% / Small" },
+        "md": { "value": "16px", "comment": "100% / Medium" },
+        "lg": { "value": "24px", "comment": "150% / Large" },
+        "xl": { "value": "28px", "comment": "175% / Extra Large" },
+        "2xl": { "value": "32px", "comment": "200% / Extra Large 2" },
+        "3xl": { "value": "48px", "comment": "300% / Extra Large 3" },
+        "4xl": { "value": "64px", "comment": "400% / Extra Large 4" },
+        "5xl": { "value": "80px", "comment": "500% / Extra Large 5" }
       }
@@ -57,0 +68,0 @@ }

src/component/utrecht/badge/block.style-dictionary.json

@@ -18,3 +18,3 @@ {
       "padding-inline": {
-        "value": "{utrecht.space.inline.md.value}"
+        "value": "{utrecht.space.inline.sm.value}"
       }
@@ -21,0 +21,0 @@ }

src/component/utrecht/button/block.style-dictionary.json

@@ -8,4 +8,4 @@ {
       "font-size": { "value": "{utrecht.typography.scale.md.font-size.value}" },
-      "padding-inline-start": { "value": "{utrecht.space.inline.lg.value}" },
-      "padding-inline-end": { "value": "{utrecht.space.inline.lg.value}" },
+      "padding-inline-start": { "value": "{utrecht.space.inline.md.value}" },
+      "padding-inline-end": { "value": "{utrecht.space.inline.md.value}" },
       "padding-block-start": { "value": "{utrecht.space.block.sm.value}" },
@@ -12,0 +12,0 @@ "padding-block-end": { "value": "{utrecht.space.block.sm.value}" },

src/component/utrecht/mapcontrolbutton/block.style-dictionary.json

@@ -9,4 +9,4 @@ {
       "border-style": { "value": "{utrecht.border-style.solid.value}" },
-      "padding-inline-start": { "value": "{utrecht.space.inline.sm.value}" },
-      "padding-inline-end": { "value": "{utrecht.space.inline.sm.value}" },
+      "padding-inline-start": { "value": "{utrecht.space.inline.2xs.value}" },
+      "padding-inline-end": { "value": "{utrecht.space.inline.2xs.value}" },
       "padding-block-start": { "value": "{utrecht.space.block.2xs.value}" },
@@ -13,0 +13,0 @@ "padding-block-end": { "value": "{utrecht.space.block.2xs.value}" },

src/component/utrecht/navigatie/element.style-dictionary.json

@@ -5,6 +5,6 @@ {
       "item": {
-        "margin-block-start": { "value": "{utrecht.space.inline.xs.value}" },
-        "margin-block-end": { "value": "{utrecht.space.inline.xs.value}" },
-        "margin-inline-start": { "value": "{utrecht.space.inline.xs.value}" },
-        "margin-inline-end": { "value": "{utrecht.space.inline.xs.value}" }
+        "margin-block-start": { "value": "{utrecht.space.block.xs.value}" },
+        "margin-block-end": { "value": "{utrecht.space.block.xs.value}" },
+        "margin-inline-start": { "value": "{utrecht.space.inline.3xs.value}" },
+        "margin-inline-end": { "value": "{utrecht.space.inline.3xs.value}" }
       },
@@ -11,0 +11,0 @@ "item-marker": {

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

397012

increased by4.62%

Lines of code

10231

increased by3.39%

Worsened metrics

Number of package files

65

decreased by-1.52%

No dependency changes