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

Comparing version 0.33.0 to 0.34.0

dist/index.js

 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 08:12:03 GMT
+ * Generated on Fri, 16 Jun 2023 14:49:07 GMT
  */
@@ -33,2 +33,3 @@
 export const ofColorFocusBorder = "#0177b2"; // Default color for borders of focused elements.
+export const ofColorReadOnlyBg = "#e9ecef"; // Default color for disabled/non-interactable input elements.
 export const ofLayoutBg = "#E6E6E6";
@@ -119,2 +120,5 @@ export const ofHeadingFg = "#000000";
 export const ofHelptextFg = "#000000";
+export const ofInputGroupJustifyContent = "flex-start";
+export const ofInputGroupAlignItems = "center";
+export const ofInputGroupGap = "12px";
 export const ofLabelFontWeight = "normal";
@@ -209,2 +213,3 @@ export const ofLanguageSelectionGap = ".2em";
 export const utrechtFormControlBackgroundColor = "#ffffff";
+export const utrechtFormControlReadOnlyBackgroundColor = "#e9ecef";
 export const utrechtFormFieldDescriptionColor = "#000000";
@@ -224,7 +229,21 @@ export const utrechtFormFieldDescriptionFontFamily = "\"Fira Sans\", Calibri, sans-serif";
 export const utrechtFormLabelFontSize = "1.125rem";
-export const utrechtHeadingColor = "#000000";
-export const utrechtHeadingFontWeight = "normal";
+export const utrechtHeading1Color = "#000000";
+export const utrechtHeading1FontFamily = "\"Fira Sans\", Calibri, sans-serif";
 export const utrechtHeading1FontSize = "1.9375rem";
+export const utrechtHeading1LetterSpacing = "normal";
 export const utrechtHeading1LineHeight = "1.100";
-export const utrechtHeading1LetterSpacing = "normal";
+export const utrechtHeading2Color = "#000000";
+export const utrechtHeading2FontFamily = "\"Fira Sans\", Calibri, sans-serif";
+export const utrechtHeading2FontSize = "1.4375rem";
+export const utrechtHeading2FontWeight = "normal";
+export const utrechtHeading2LetterSpacing = "normal";
+export const utrechtHeading2LineHeight = "1.129";
+export const utrechtHeading2MarginBlockEnd = "0";
+export const utrechtHeading2MarginBlockStart = "0";
+export const utrechtHeading3Color = "#000000";
+export const utrechtHeading3FontFamily = "\"Fira Sans\", Calibri, sans-serif";
+export const utrechtHeading3FontSize = "1.1875rem";
+export const utrechtHeading3FontWeight = "normal";
+export const utrechtHeading3MarginBlockEnd = "20px";
+export const utrechtHeading3MarginBlockStart = "12px";
 export const utrechtLinkColor = "#01689B";
@@ -277,2 +296,7 @@ export const utrechtLinkTextDecoration = "underline";
 export const utrechtTextboxDisabledBackgroundColor = "#e9ecef";
-export const utrechtDocumentFontFamily = "\"Fira Sans\", Calibri, sans-serif";
+export const utrechtTextboxReadOnlyBackgroundColor = "#e9ecef";
+export const utrechtDocumentFontFamily = "\"Fira Sans\", Calibri, sans-serif";
+export const utrechtUnorderedListMarginBlockStart = "12px";
+export const utrechtUnorderedListMarginBlockEnd = "20px";
+export const utrechtUnorderedListItemMarginBlockStart = "4px";
+export const utrechtUnorderedListItemPaddingInlineStart = "8px";

package.json

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

src/common/color.tokens.json

@@ -113,2 +113,8 @@ {
         }
+      },
+      "read-only": {
+        "bg": {
+          "value": "#e9ecef",
+          "comment": "Default color for disabled/non-interactable input elements."
+        }
       }
@@ -115,0 +121,0 @@ }

src/community/utrecht/form-control.tokens.json

 {
   "utrecht": {
     "form-control": {
-      "background-color": {"value": "{of.color.bg}"}
+      "background-color": {"value": "{of.color.bg}"},
+      "read-only": {
+        "background-color": {"value": "{of.color.read-only.bg}"}
+      }
     }
   }
 }

src/community/utrecht/select.tokens.json

@@ -18,3 +18,3 @@ {
       "disabled": {
-        "background-color": {"value": "#e9ecef"},
+        "background-color": {"value": "{of.color.read-only.bg}"},
         "border-color": {},
@@ -21,0 +21,0 @@ "color": {}

src/community/utrecht/textbox.tokens.json

@@ -21,3 +21,6 @@ {
       "disabled": {
-        "background-color": {"value": "#e9ecef"}
+        "background-color": {"value": "{of.color.read-only.bg}"}
+      },
+      "read-only": {
+        "background-color": {"value": "{of.color.read-only.bg}"}
       }
@@ -24,0 +27,0 @@ }

src/components/errors.tokens.json

 {
   "of": {
     "utrecht-form-field-description": {
-      "$extensions": {
-        "dte.metadata": {
-          "groupDescription": "Open Forms extensions of utrecht-form-field-description (for errors)"
-        }
-      },
       "errors": {
+        "$extensions": {
+          "dte.metadata": {
+            "groupDescription": "Open Forms extensions of utrecht-form-field-description (for errors)"
+          }
+        },
         "font-weight": {"value": "bold"},
@@ -11,0 +11,0 @@ "line-height": {"value": 1.33}

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

302923

increased by7.35%

Number of package files

51

increased by8.51%

Lines of code

8320

increased by8.31%

No dependency changes