@open-formulieren/design-tokens - npm Package Compare versions

Comparing version 0.50.0 to 0.51.0

dist/index.js

 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 10:18:03 GMT
+ * Generated on Wed, 29 Nov 2023 10:12:54 GMT
  */
@@ -88,3 +88,8 @@
 export const ofUtrechtPageMobilePaddingInlineStart = "0";
-export const ofAppGap = "0";
+export const ofAppBodyPaddingBlockEnd = "0";
+export const ofAppBodyPaddingBlockStart = "0";
+export const ofAppBodyMobilePaddingBlockEnd = "0";
+export const ofAppBodyMobilePaddingBlockStart = "15px";
+export const ofAppGridColumnGap = "20px";
+export const ofAppMobileGridRowGap = "0";
 export const ofAppMobilePaddingBlockEnd = "15px";
@@ -94,2 +99,5 @@ export const ofAppMobilePaddingBlockStart = "0"; // Allow room for the progress indicator
 export const ofAppMobilePaddingInlineStart = "15px";
+export const ofAppProgressIndicatorMobileInsetBlockStart = "0";
+export const ofAppProgressIndicatorMobileMarginInlineEnd = "calc(-1 * 15px)";
+export const ofAppProgressIndicatorMobileMarginInlineStart = "calc(-1 * 15px)";
 export const ofButtonHoverBg = "#cccccc";
@@ -135,2 +143,7 @@ export const ofButtonHoverColorBorder = "#5e5e5e";
 export const ofButtonColorBorder = "#767676";
+export const ofCardBackgroundColor = "#ffffff";
+export const ofCardPaddingBlockEnd = "40px";
+export const ofCardPaddingBlockStart = "40px";
+export const ofCardPaddingInlineEnd = "40px";
+export const ofCardPaddingInlineStart = "40px";
 export const ofUtrechtFormFieldCheckboxMarginBlockStart = "8px";
@@ -189,5 +202,2 @@ export const ofUtrechtFormFieldCheckboxLabelMarginBlockEnd = 0;
 export const ofSelectMenuOptionFocusBackgroundColor = "#E6E6E6";
-export const ofFormGridColumnGap = "20px";
-export const ofFormProgressIndicatorMobileMarginInlineEnd = "calc(-1 * 15px)";
-export const ofFormProgressIndicatorMobileMarginInlineStart = "calc(-1 * 15px)";
 export const ofHelptextBg = "#d3e3ec";
@@ -210,2 +220,9 @@ export const ofHelptextFg = "#000000";
 export const ofLanguageSelectionGap = ".2em";
+export const ofLanguageSelectionInAppPaddingBlockEnd = "0";
+export const ofLanguageSelectionInAppPaddingBlockStart = "0";
+export const ofLanguageSelectionInAppMobilePaddingBlockEnd = "0";
+export const ofLanguageSelectionInAppMobilePaddingBlockStart = "15px";
+export const ofListGap = "20px";
+export const ofListCompactGap = "8px";
+export const ofListExtraCompactGap = "0";
 export const ofLoginOptionsCosignBackgroundColor = "#e9ecef";
@@ -217,5 +234,25 @@ export const ofLoginOptionsCosignPaddingBlock = "0.6em";
 export const ofHeaderLogoHeight = "auto";
+export const ofProgressIndicatorBackgroundColor = "#ffffff";
+export const ofProgressIndicatorInsetBlockStart = "20px";
 export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgba(0, 0, 0, 0.2)";
-export const ofProgressIndicatorMobileMargin = "15px";
-export const ofProgressIndicatorStickySpacing = "20px";
+export const ofProgressIndicatorMobilePaddingBlockEnd = "15px";
+export const ofProgressIndicatorMobilePaddingBlockStart = "15px";
+export const ofProgressIndicatorMobilePaddingInlineEnd = "15px";
+export const ofProgressIndicatorMobilePaddingInlineStart = "15px";
+export const ofProgressIndicatorMobileHeaderColor = "inherit";
+export const ofProgressIndicatorMobileHeaderFontFamily = "Fira Sans, Calibri, sans-serif";
+export const ofProgressIndicatorMobileHeaderFontSize = "1.125rem";
+export const ofProgressIndicatorMobileHeaderGap = "0px";
+export const ofProgressIndicatorMobileHeaderIconFlexBasis = "30px";
+export const ofProgressIndicatorMobileHeaderLineHeight = "1.1333";
+export const ofProgressIndicatorNavGap = "20px"; // Spacing between title and link list.
+export const ofProgressIndicatorNavMobileListGap = "15px";
+export const ofProgressIndicatorNavMobilePaddingBlockEnd = "15px";
+export const ofProgressIndicatorNavMobilePaddingBlockStart = "15px";
+export const ofProgressIndicatorNavMobilePaddingInlineEnd = "15px";
+export const ofProgressIndicatorNavMobilePaddingInlineStart = "15px";
+export const ofProgressIndicatorPaddingBlockEnd = "40px";
+export const ofProgressIndicatorPaddingBlockStart = "40px";
+export const ofProgressIndicatorPaddingInlineEnd = "40px";
+export const ofProgressIndicatorPaddingInlineStart = "40px";
 export const ofSummaryRowSpacing = "10px";
@@ -222,0 +259,0 @@ export const ofTooltipArrowColor = "#ae9e49";

package.json

 {
   "name": "@open-formulieren/design-tokens",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "Design tokens for Open Forms",
@@ -5,0 +5,0 @@ "scripts": {

src/components/app.tokens.json

@@ -9,6 +9,15 @@ {
       },
+      "body": {
+        "padding-block-end": {"value": "0"},
+        "padding-block-start": {"value": "0"},
+        "mobile": {
+          "padding-block-end": {"value": "0"},
+          "padding-block-start": {"value": "15px"}
+        }
+      },
 
-      "gap": {"value": "0"},
+      "grid-column-gap": {"value": "20px"},
 
       "mobile": {
+        "grid-row-gap": {"value": "0"},
         "padding-block-end": {"value": "15px"},
@@ -21,2 +30,10 @@ "padding-block-start": {
         "padding-inline-start": {"value": "15px"}
+      },
+
+      "progress-indicator": {
+        "mobile": {
+          "inset-block-start": {"value": "0"},
+          "margin-inline-end": {"value": "calc(-1 * {of.app.mobile.padding-inline-end})"},
+          "margin-inline-start": {"value": "calc(-1 * {of.app.mobile.padding-inline-start})"}
+        }
       }
@@ -23,0 +40,0 @@ }

src/components/language-selection.tokens.json

 {
   "of": {
     "language-selection": {
-      "gap": {"value": ".2em"}
+      "gap": {"value": ".2em"},
+
+      "in-app": {
+        "padding-block-end": {"value": "0"},
+        "padding-block-start": {"value": "0"},
+
+        "mobile": {
+          "padding-block-end": {"value": "0"},
+          "padding-block-start": {"value": "15px"}
+        }
+      }
     }
   }
 }

src/components/progress-indicator.tokens.json

 {
   "of": {
     "progress-indicator": {
-      "sticky": {
-        "spacing": {"value": "20px"}
-      }
+      "background-color": {"value": "{of.color.bg}"},
+      "inset-block-start": {"value": "{of.app.grid-column-gap}"},
+      "mobile": {
+        "box-shadow": {"value": "0px 0px 2px 0px rgba(0, 0, 0, 0.2)"},
+        "padding-block-end": {"value": "15px"},
+        "padding-block-start": {"value": "15px"},
+        "padding-inline-end": {"value": "15px"},
+        "padding-inline-start": {"value": "15px"}
+      },
+      "mobile-header": {
+        "color": {"value": "inherit"},
+        "font-family": {"value": "{of.typography.sans-serif.font-family}"},
+        "font-size": {"value": "1.125rem"},
+        "gap": {"value": "0px"},
+        "icon": {
+          "flex-basis": {"value": "30px"}
+        },
+        "line-height": {"value": "1.1333"}
+      },
+      "nav": {
+        "gap": {
+          "comment": "Spacing between title and link list.",
+          "value": "20px"
+        },
+        "mobile": {
+          "list": {
+            "gap": {"value": "15px"}
+          },
+          "padding-block-end": {"value": "15px"},
+          "padding-block-start": {"value": "15px"},
+          "padding-inline-end": {"value": "15px"},
+          "padding-inline-start": {"value": "15px"}
+        }
+      },
+      "padding-block-end": {"value": "40px"},
+      "padding-block-start": {"value": "40px"},
+      "padding-inline-end": {"value": "40px"},
+      "padding-inline-start": {"value": "40px"}
     }
   }
 }

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

504155

increased by6.94%

Lines of code

14426

increased by7.15%

No dependency changes