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

Comparing version 0.47.0 to 0.48.0

dist/index.js

 /**
  * Do not edit directly
- * Generated on Thu, 09 Nov 2023 15:28:25 GMT
+ * Generated on Fri, 10 Nov 2023 10:48:12 GMT
  */
@@ -17,6 +17,10 @@
 export const ofPageHeaderDesktopPadding = "20px";
-export const ofPageHeaderLogoReturnUrlMinHeight = "50px";
-export const ofPageHeaderLogoReturnUrlMinWidth = "100px";
+export const ofPageHeaderLogoReturnUrlMinHeight = "50px"; // DEPRECATED - use min-block-size instead.
+export const ofPageHeaderLogoReturnUrlMinWidth = "100px"; // DEPRECATED - use min-inline-size instead.
+export const ofPageHeaderLogoReturnUrlMinBlockSize = "50px";
+export const ofPageHeaderLogoReturnUrlMinInlineSize = "100px";
 export const ofPageHeaderLogoReturnUrlMobileMinHeight = "25px";
 export const ofPageHeaderLogoReturnUrlMobileMinWidth = "50px";
+export const ofPageHeaderLogoReturnUrlMobileMinBlockSize = "25px";
+export const ofPageHeaderLogoReturnUrlMobileMinInlineSize = "50px";
 export const ofColorPrimary = "#01689B"; // The primary color makes up a large part of the theme, it is used in buttons, accents and link color for example.
@@ -48,2 +52,45 @@ export const ofColorPrimaryLight = "#d3e3ec";
 export const ofTypographySansSerifFontFamily = "Fira Sans, Calibri, sans-serif";
+export const ofUtrechtPageContentMobilePaddingBlockEnd = "0";
+export const ofUtrechtPageContentMobilePaddingBlockStart = "0";
+export const ofUtrechtPageFooterMaxInlineSize = "100%";
+export const ofUtrechtPageFooterMobilePaddingBlockEnd = "10px";
+export const ofUtrechtPageFooterMobilePaddingBlockStart = "10px";
+export const ofUtrechtPageFooterMobilePaddingInlineEnd = "15px";
+export const ofUtrechtPageFooterMobilePaddingInlineStart = "15px";
+export const ofUtrechtPageFooterTabletPaddingBlockEnd = "10px";
+export const ofUtrechtPageFooterTabletPaddingBlockStart = "10px";
+export const ofUtrechtPageFooterTabletPaddingInlineEnd = "15px";
+export const ofUtrechtPageFooterTabletPaddingInlineStart = "15px";
+export const ofUtrechtPageFooterLaptopPaddingBlockEnd = "20px";
+export const ofUtrechtPageFooterLaptopPaddingBlockStart = "20px";
+export const ofUtrechtPageFooterLaptopPaddingInlineEnd = "20px";
+export const ofUtrechtPageFooterLaptopPaddingInlineStart = "20px";
+export const ofUtrechtPageFooterDesktopPaddingBlockEnd = "20px";
+export const ofUtrechtPageFooterDesktopPaddingBlockStart = "20px";
+export const ofUtrechtPageFooterDesktopPaddingInlineEnd = "20px";
+export const ofUtrechtPageFooterDesktopPaddingInlineStart = "20px";
+export const ofUtrechtPageFooterDesktopMaxInlineSize = "1200px";
+export const ofUtrechtPageHeaderMobilePaddingBlockEnd = "10px";
+export const ofUtrechtPageHeaderMobilePaddingBlockStart = "10px";
+export const ofUtrechtPageHeaderMobilePaddingInlineEnd = "15px";
+export const ofUtrechtPageHeaderMobilePaddingInlineStart = "10px";
+export const ofUtrechtPageHeaderTabletPaddingBlockEnd = "20px";
+export const ofUtrechtPageHeaderTabletPaddingBlockStart = "20px";
+export const ofUtrechtPageHeaderTabletPaddingInlineEnd = "20px";
+export const ofUtrechtPageHeaderTabletPaddingInlineStart = "20px";
+export const ofUtrechtPageHeaderLaptopPaddingBlockEnd = "20px";
+export const ofUtrechtPageHeaderLaptopPaddingBlockStart = "20px";
+export const ofUtrechtPageHeaderLaptopPaddingInlineEnd = "20px";
+export const ofUtrechtPageHeaderLaptopPaddingInlineStart = "20px";
+export const ofUtrechtPageHeaderDesktopPaddingBlockEnd = "20px";
+export const ofUtrechtPageHeaderDesktopPaddingBlockStart = "20px";
+export const ofUtrechtPageHeaderDesktopPaddingInlineEnd = "20px";
+export const ofUtrechtPageHeaderDesktopPaddingInlineStart = "20px";
+export const ofUtrechtPageMobilePaddingInlineEnd = "0";
+export const ofUtrechtPageMobilePaddingInlineStart = "0";
+export const ofAppGap = "0";
+export const ofAppMobilePaddingBlockEnd = "15px";
+export const ofAppMobilePaddingBlockStart = "0"; // Allow room for the progress indicator
+export const ofAppMobilePaddingInlineEnd = "15px";
+export const ofAppMobilePaddingInlineStart = "15px";
 export const ofButtonHoverBg = "#cccccc";
@@ -142,2 +189,5 @@ export const ofButtonHoverColorBorder = "#5e5e5e";
 export const ofSelectMenuOptionFocusBackgroundColor = "#E6E6E6";
+export const ofFormGridColumnGap = "20px";
+export const ofFormProgressIndicatorMobileMarginInlineEnd = "calc(-1 * 15px)";
+export const ofFormProgressIndicatorMobileMarginInlineStart = "calc(-1 * 15px)";
 export const ofHelptextBg = "#d3e3ec";
@@ -349,2 +399,18 @@ export const ofHelptextFg = "#000000";
 export const utrechtLinkHoverTextDecoration = "none";
+export const utrechtPageContentPaddingBlockEnd = "20px";
+export const utrechtPageContentPaddingBlockStart = "20px";
+export const utrechtPageFooterColor = "#ffffff";
+export const utrechtPageFooterBackgroundColor = "#01689B";
+export const utrechtPageFooterPaddingInlineEnd = "20px";
+export const utrechtPageFooterPaddingInlineStart = "20px";
+export const utrechtPageFooterPaddingBlockEnd = "20px";
+export const utrechtPageFooterPaddingBlockStart = "20px";
+export const utrechtPageHeaderBackgroundColor = "#ffffff";
+export const utrechtPageHeaderColor = "#000000";
+export const utrechtPageHeaderPaddingInlineEnd = "20px";
+export const utrechtPageHeaderPaddingInlineStart = "20px";
+export const utrechtPageHeaderPaddingBlockEnd = "20px";
+export const utrechtPageHeaderPaddingBlockStart = "20px";
+export const utrechtPagePaddingInlineEnd = "20px";
+export const utrechtPagePaddingInlineStart = "20px";
 export const utrechtParagraphMarginBlockEnd = 0;
@@ -351,0 +417,0 @@ export const utrechtParagraphMarginBlockStart = 0;

package.json

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

src/components/page-footer/tokens.json

 {
   "of": {
     "page-footer": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "DEPRECATED - use utrecht-page-footer tokens instead."
+        }
+      },
       "bg": {"value": "{of.color.primary}"},
@@ -5,0 +10,0 @@ "fg": {"value": "{of.color.bg}"}

src/components/page-header/tokens.json

 {
   "of": {
     "page-header": {
+      "$extensions": {
+        "dte.metadata": {
+          "groupDescription": "Color/spacing tokens are DEPRECATED - use utrecht-page-header tokens instead."
+        }
+      },
+
       "bg": {"value": "#ffffff"},
@@ -17,8 +23,28 @@ "mobile": {
       },
+
       "logo-return-url": {
-        "min-height": {"value": "50px"},
-        "min-width": {"value": "100px"},
+        "$extensions": {
+          "dte.metadata": {
+            "groupDescription": "Open Forms extension for logo in the header."
+          }
+        },
+
+        "min-height": {
+          "value": "50px",
+          "comment": "DEPRECATED - use min-block-size instead."
+        },
+        "min-width": {
+          "value": "100px",
+          "comment": "DEPRECATED - use min-inline-size instead."
+        },
+
+        "min-block-size": {"value": "{of.page-header.logo-return-url.min-height}"},
+        "min-inline-size": {"value": "{of.page-header.logo-return-url.min-width}"},
+
         "mobile": {
           "min-height": {"value": "25px"},
-          "min-width": {"value": "50px"}
+          "min-width": {"value": "50px"},
+
+          "min-block-size": {"value": "{of.page-header.logo-return-url.mobile.min-height}"},
+          "min-inline-size": {"value": "{of.page-header.logo-return-url.mobile.min-width}"}
         }
@@ -25,0 +51,0 @@ }

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

469727

increased by15.94%

Number of package files

66

increased by10%

Lines of code

13405

increased by16.22%

No dependency changes