@open-formulieren/design-tokens/dist/index.js

Design tokens for Open Forms

/**
 * Do not edit directly
 * Generated on Wed, 03 Dec 2025 11:06:58 GMT
 */

export const ofLoginButtonLogoDarkFocusColorBorder = "#0177b2";
export const ofLoginButtonLogoDarkFocusVisibleColorBorder = "#0177b2";
export const ofLoginButtonLogoLightFocusColorBorder = "#000000";
export const ofLoginButtonLogoLightFocusVisibleColorBorder = "#000000";
export const ofPageFooterBg = "#01689B";
export const ofPageFooterFg = "#ffffff";
export const ofPageHeaderBg = "#ffffff";
export const ofPageHeaderMobilePadding = "10px 15px 10px 10px";
export const ofPageHeaderTabletPadding = "20px";
export const ofPageHeaderLaptopPadding = "20px";
export const ofPageHeaderDesktopPadding = "20px";
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.
export const ofColorPrimaryLight = "#d3e3ec";
export const ofColorSecondary = "#cee0ea"; // The secondary compliments the primary color and serves as the default for a number of more fine-grained tokens.
export const ofColorInfo = "#007bc7"; // The highlight color for informational states and/or messages.
export const ofColorSuccess = "green"; // The highlight color for success states and/or messages.
export const ofColorWarning = "#E17000"; // The highlight color for warning states and/or messages.
export const ofColorDanger = "#D52B1E"; // The highlight color for error/critical states and/or messages.
export const ofColorBg = "#ffffff"; // Background color for the (main) user interface.
export const ofColorFg = "#000000"; // Font/foreground color for the (main) user interface.
export const ofColorFgMuted = "#767676"; // Font/foreground color for non-actionable or less-important content.
export const ofColorBorder = "#767676"; // Default color for borders.
export const ofColorFieldBorder = "#979797"; // Border color for special fields, like checkboxes, radio and file uploads.
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";
export const ofHeadingFg = "#000000";
export const ofUtrechtLinkFontFamily = "Fira Sans, Calibri, sans-serif";
export const ofTextMargin = "20px";
export const ofTextFontSize = "1rem";
export const ofTextBigFontSize = "1.125rem";
export const ofTextSmallFontSize = "0.875rem";
export const ofTextMobileMargin = "20px";
export const ofTextTabletMargin = "20px";
export const ofTextLaptopMargin = "20px";
export const ofTextDesktopMargin = "20px";
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 ofA11yToolbarPaddingInlineStart = "40px";
export const ofA11yToolbarPaddingInlineEnd = "40px";
export const ofA11yToolbarPaddingBlockStart = "20px";
export const ofA11yToolbarPaddingBlockEnd = "2px";
export const ofA11yToolbarDividerDisplay = "none";
export const ofA11yToolbarDividerColor = "#ffffff";
export const ofA11yToolbarDividerBlockSize = "auto";
export const ofA11yToolbarDividerInlineSize = "auto";
export const ofA11yToolbarDividerMarginBlockStart = "auto";
export const ofA11yToolbarDividerMarginBlockEnd = "auto";
export const ofAbortButtonColor = "#D52B1E";
export const ofAbortButtonFaIcon = "\"\\f00d\"";
export const ofAbortButtonHoverColor = "#D52B1E";
export const ofAddressnlDisplayFontFamily = "Fira Sans, Calibri, sans-serif";
export const ofAddressnlDisplayFontStyle = "normal";
export const ofAddressnlDisplayFontWeight = 400;
export const ofAddressnlDisplayLineHeight = 1.5;
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";
export const ofAppMobilePaddingBlockStart = "0"; // Allow room for the progress indicator
export const ofAppMobilePaddingInlineEnd = "15px";
export const ofAppMobilePaddingInlineStart = "15px";
export const ofAppProgressIndicatorMobileInsetBlockStart = "0";
export const ofAppProgressIndicatorMobileMarginInlineEnd = "calc(-1 * 15px)";
export const ofAppProgressIndicatorMobileMarginInlineStart = "calc(-1 * 15px)";
export const ofBacktotopLinkColumnGap = "8px";
export const ofBacktotopLinkFaIcon = "\"\\f176\"";
export const ofBacktotopLinkIconDisplay = "inline-block";
export const ofBacktotopLinkIconSize = "auto";
export const ofBacktotopLinkPaddingBlockEnd = "10.003px";
export const ofBacktotopLinkPaddingBlockStart = "10.003px";
export const ofButtonHoverBg = "#cccccc";
export const ofButtonHoverColorBorder = "#5e5e5e";
export const ofButtonActiveFg = "#000000";
export const ofButtonActiveBg = "#bfbfbf";
export const ofButtonActiveColorBorder = "#5e5e5e";
export const ofButtonFocusColorBorder = "#0177b2";
export const ofButtonFocusVisibleColorBorder = "#0177b2";
export const ofButtonAnchorHoverBg = "transparent";
export const ofButtonAnchorHoverColorBorder = "transparent";
export const ofButtonAnchorActiveFg = "#014e74";
export const ofButtonAnchorActiveBg = "transparent";
export const ofButtonAnchorActiveColorBorder = "transparent";
export const ofButtonAnchorFocusColorBorder = "#0177b2";
export const ofButtonAnchorFocusVisibleColorBorder = "#0177b2";
export const ofButtonAnchorFg = "#01689B";
export const ofButtonAnchorBg = "transparent";
export const ofButtonAnchorColorBorder = "transparent";
export const ofButtonPrimaryHoverBg = "#016698";
export const ofButtonPrimaryHoverColorBorder = "#01537c";
export const ofButtonPrimaryActiveFg = "#bfbfbf";
export const ofButtonPrimaryActiveBg = "#01608f";
export const ofButtonPrimaryActiveColorBorder = "#01537c";
export const ofButtonPrimaryFocusColorBorder = "#000000";
export const ofButtonPrimaryFocusVisibleColorBorder = "#000000";
export const ofButtonPrimaryFg = "#ffffff";
export const ofButtonPrimaryBg = "#0177b2";
export const ofButtonPrimaryColorBorder = "#01689B";
export const ofButtonDangerHoverBg = "#aa2218";
export const ofButtonDangerHoverColorBorder = "#881b13";
export const ofButtonDangerActiveFg = "#ee837d";
export const ofButtonDangerActiveBg = "#a02017";
export const ofButtonDangerActiveColorBorder = "#881b13";
export const ofButtonDangerFocusColorBorder = "#000000";
export const ofButtonDangerFocusVisibleColorBorder = "#000000";
export const ofButtonDangerFg = "#ffffff";
export const ofButtonDangerBg = "#D52B1E";
export const ofButtonDangerColorBorder = "#aa2218";
export const ofButtonFg = "#000000";
export const ofButtonBg = "#ffffff";
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";
export const ofUtrechtFormFieldCheckboxLabelMarginBlockEnd = 0;
export const ofUtrechtFormFieldRadioMarginBlockStart = "8px";
export const ofUtrechtFormFieldRadioLabelMarginBlockEnd = 0;
export const ofUtrechtFormLabelCheckboxFocusWithinOutline = "1px solid #01689B";
export const ofUtrechtFormLabelCheckboxPaddingBlockStart = "11px";
export const ofUtrechtFormLabelCheckboxPaddingBlockEnd = "11px";
export const ofUtrechtFormLabelCheckboxPaddingInlineStart = "12px";
export const ofUtrechtFormLabelCheckboxPaddingInlineEnd = "12px";
export const ofUtrechtFormLabelRadioFocusWithinOutline = "1px solid #01689B";
export const ofUtrechtFormLabelRadioPaddingBlockStart = "11px";
export const ofUtrechtFormLabelRadioPaddingBlockEnd = "11px";
export const ofUtrechtFormLabelRadioPaddingInlineStart = "12px";
export const ofUtrechtFormLabelRadioPaddingInlineEnd = "12px";
export const ofChildrenPadding = "8px";
export const ofEditgridLineHeight = 1.5;
export const ofEditgridGap = "8px"; // Spacing consistent with label (bottom) and help text (top) margins.
export const ofEditgridItemGap = "12px";
export const ofEditgridItemBorder = "solid 1px #767676";
export const ofEditgridItemPaddingBlockEnd = "24px";
export const ofEditgridItemPaddingBlockStart = "24px";
export const ofEditgridItemPaddingInlineEnd = "24px";
export const ofEditgridItemPaddingInlineStart = "24px";
export const ofEditgridItemHeadingFontFamily = "Fira Sans, Calibri, sans-serif";
export const ofEditgridItemHeadingFontSize = "0.875rem";
export const ofEditgridItemHeadingLineHeight = "1.2";
export const ofEditgridItemHeadingMarginBlockEnd = "24px";
export const ofUtrechtFormFieldDescriptionErrorsFontWeight = "bold";
export const ofUtrechtFormFieldDescriptionErrorsLineHeight = 1.33;
export const ofUtrechtFormFieldDescriptionBackgroundColor = "#d3e3ec";
export const ofUtrechtFormFieldDescriptionBorderLeftColor = "#007bc7";
export const ofUtrechtFormFieldDescriptionBorderLeftWidth = "4px";
export const ofUtrechtFormFieldDescriptionLineHeight = "1.5";
export const ofUtrechtFormFieldDescriptionPaddingBlock = "11px";
export const ofUtrechtFormFieldDescriptionPaddingInline = "16px";
export const ofCheckboxBg = "#F3F3F3";
export const ofCosignBg = "#F3F3F3";
export const ofFieldBorderColor = "#979797"; // Deprecated, use of.color.field-border instead
export const ofFieldsetLegendColor = "#01689B";
export const ofFileUploadDropAreaPadding = "15px"; // Legacy, deprecated in favour of of-upload-input.
export const ofFileUploadGridAreas = "'dropzone' 'uploads' 'description' 'errors'";
export const ofFileUploadRowGap = 0;
export const ofFileUploadUploadsPaddingBlockEnd = 0;
export const ofFileUploadUploadsPaddingBlockStart = 0;
export const ofFileUploadWithDropzoneUploadsPaddingBlockStart = "8px";
export const ofInputFontWeight = "bold";
export const ofSelectHighlightedBg = "#E6E6E6";
export const ofSelectMenuBackgroundColor = "#ffffff";
export const ofSelectMenuBorder = "solid 1px #767676";
export const ofSelectMenuBorderRadius = "0";
export const ofSelectMenuBoxShadow = "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)";
export const ofSelectMenuMarginBlockEnd = "0";
export const ofSelectMenuMarginBlockStart = "-1px";
export const ofSelectMenuOptionFontWeight = "normal";
export const ofSelectMenuOptionPaddingBlockEnd = "10px";
export const ofSelectMenuOptionPaddingBlockStart = "10px";
export const ofSelectMenuOptionPaddingInlineEnd = "12px";
export const ofSelectMenuOptionPaddingInlineStart = "12px";
export const ofSelectMenuOptionFocusBackgroundColor = "#E6E6E6";
export const ofUploadInputPaddingBlockEnd = "15px";
export const ofUploadInputPaddingBlockStart = "15px";
export const ofUploadInputPaddingInlineEnd = "15px";
export const ofUploadInputPaddingInlineStart = "15px";
export const ofUploadInputBorderWidth = "3px";
export const ofUploadInputBorderStyle = "dashed";
export const ofUploadInputBorderColor = "#979797";
export const ofUploadInputDragOverBorderColor = "#01689B";
export const ofUploadInputDragRejectBorderColor = "#D52B1E";
export const ofUploadedFilesListRowGap = "8px";
export const ofUploadedFileRowGap = "8px";
export const ofUploadedFileColumnGap = "8px";
export const ofUploadedFilePaddingBlockEnd = "8px";
export const ofUploadedFilePaddingBlockStart = "8px";
export const ofUploadedFilePaddingInlineEnd = "4px";
export const ofUploadedFilePaddingInlineStart = "16px";
export const ofUploadedFileBorderWidth = "1px";
export const ofUploadedFileBorderStyle = "solid";
export const ofUploadedFileBorderColor = "#767676";
export const ofUploadedFileBorderRadius = "2px";
export const ofUploadedFileMetadataColor = "#767676";
export const ofUploadedFileErrorsBorderColor = "#D52B1E";
export const ofFloatingWidgetBorderRadius = 0;
export const ofFloatingWidgetBackground = "#ffffff";
export const ofFloatingWidgetBoxShadow = "1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08)";
export const ofFloatingWidgetArrowBorderColor = "#e6e6e6";
export const ofFloatingWidgetArrowStrokeWidth = 3;
export const ofFormFieldContainerGap = "24px";
export const ofFormNavigationIconSize = "auto";
export const ofFormNavigationLinkButtonPaddingInlineEnd = 0;
export const ofFormNavigationLinkButtonPaddingInlineStart = 0;
export const ofFormNavigationPaddingBlockStart = "20px";
export const ofFormNavigationRowGap = "8px";
export const ofFormNavigationSaveButtonFaIcon = "\"\\f28b\"";
export const ofFormNavigationNextButtonFaIcon = "\"\\f178\"";
export const ofFormioContentErrorBorderInlineStartColor = "#D52B1E";
export const ofHelptextBg = "#d3e3ec";
export const ofHelptextFg = "#000000";
export const ofInputContainerAffixBackgroundColor = "transparent";
export const ofInputContainerAffixBorderColor = "transparent";
export const ofInputContainerAffixBorderStyle = "none";
export const ofInputContainerAffixBorderWidth = 0;
export const ofInputContainerAffixPaddingInline = "12px 12px";
export const ofInputContainerAffixPaddingBlock = "12px 12px";
export const ofInputContainerAffixLineHeight = "1.5";
export const ofInputGroupJustifyContent = "flex-start";
export const ofInputGroupAlignItems = "center";
export const ofInputGroupGap = "12px";
export const ofInputGroupInvalidBorderInlineStartColor = "transparent";
export const ofInputGroupInvalidBorderInlineStartWidth = "0";
export const ofInputGroupInvalidPaddingInlineStart = "0";
export const ofLabelFontWeight = "normal";
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 ofLoadingIndicatorBgColor = "#cee0ea";
export const ofLoadingIndicatorFgColor = "#01689B";
export const ofLoadingIndicatorSize = "20px";
export const ofLoadingIndicatorThickness = "6px";
export const ofLoadingIndicatorMutedBgColor = "#ffffff";
export const ofLoadingIndicatorMutedFgColor = "#b0b0b0";
export const ofLoadingIndicatorSmallSize = "15px";
export const ofLoadingIndicatorSmallThickness = "4px";
export const ofLoginOptionsCosignBackgroundColor = "#e9ecef";
export const ofLoginOptionsCosignPaddingBlock = "0.6em";
export const ofLoginOptionsCosignPaddingInline = "0.6em";
export const ofModalBackgroundColor = "#ffffff";
export const ofModalBorderColor = "#eeeeee";
export const ofModalBorderWidth = "1px";
export const ofModalBoxShadow = "0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2)";
export const ofModalPaddingBlockEnd = "40px";
export const ofModalPaddingBlockStart = "40px";
export const ofModalPaddingInlineEnd = "40px";
export const ofModalPaddingInlineStart = "40px";
export const ofModalRowGap = "20px";
export const ofModalOverlayBackgroundColor = "rgba(255, 255, 255, 0.75)";
export const ofModalHeaderBackgroundColor = "inherit";
export const ofModalHeaderMarginInlineEnd = "10px";
export const ofModalBodyBleedMargin = "2px";
export const ofMultifieldGap = "8px";
export const ofMultifieldFieldColumnGap = "2px";
export const ofMultifieldFieldMaxInlineSize = "100%";
export const ofMultifieldRemoveButtonInsetBlockStart = "1px";
export const ofMultifieldContainerButtonGroupMarginBlockStart = "8px";
export const ofHeaderLogoUrl = "none";
export const ofHeaderLogoWidth = "auto";
export const ofHeaderLogoHeight = "auto";
export const ofPreviousLinkColumnGap = "8px";
export const ofPreviousLinkDisplayStart = "none";
export const ofPreviousLinkDisplayEnd = "flex";
export const ofPreviousLinkFaIcon = "\"\\f177\"";
export const ofPreviousLinkIconDisplay = "inline-block";
export const ofPreviousLinkIconSize = "auto";
export const ofPreviousLinkPaddingBlockEnd = "10.003px";
export const ofPreviousLinkPaddingBlockStart = "10.003px";
export const ofProgressIndicatorBackgroundColor = "#ffffff";
export const ofProgressIndicatorInsetBlockStart = "20px";
export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgba(0, 0, 0, 0.2)";
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 ofSummaryProgressPaddingBlockStart = "0px";
export const ofSummaryProgressPaddingBlockEnd = "20px";
export const ofSummaryProgressMobilePaddingBlockStart = "0px";
export const ofSummaryProgressMobilePaddingBlockEnd = "20px";
export const ofSummaryRowSpacing = "10px"; // DEPRECATED
export const ofSummaryStepNameFontSize = "1.1875rem";
export const ofSummaryStepNameLineHeight = "1.17";
export const ofSummaryHeaderBorderBlockEndColor = "#767676";
export const ofSummaryHeaderBorderBlockEndStyle = "solid";
export const ofSummaryHeaderBorderBlockEndWidth = "1px";
export const ofSummaryHeaderPaddingBlockEnd = "12px";
export const ofSummaryHeaderMobileRowGap = "8px";
export const ofUtrechtDataListPaddingBlockEnd = "20px";
export const ofUtrechtDataListItemKeyLaptopFontWeight = "400";
export const ofUtrechtDataListLaptopDisplay = "flex";
export const ofTooltipArrowColor = "#ae9e49";
export const ofTooltipArrowHeight = "16px";
export const ofTooltipArrowWidth = "8px";
export const ofTooltipBackgroundColor = "#fff3cd";
export const ofTooltipBorderColor = "#ae9e49";
export const ofTooltipBorderWidth = "1px";
export const ofTooltipBoxShadow = "1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08)";
export const ofTooltipFontSize = "1rem";
export const ofTooltipOffset = "10px";
export const ofTooltipPaddingBlockEnd = "6px";
export const ofTooltipPaddingBlockStart = "6px";
export const ofTooltipPaddingInlineEnd = "12px";
export const ofTooltipPaddingInlineStart = "12px";
export const ofTooltipIconColor = "#767676";
export const utrechtActionActivateCursor = "pointer";
export const utrechtActionDisabledCursor = "not-allowed";
export const utrechtActionInertCursor = "default";
export const utrechtActionSubmitCursor = "pointer";
export const utrechtAlertColumnGap = "16px";
export const utrechtAlertIconErrorColor = "#D52B1E";
export const utrechtAlertIconInfoColor = "#007bc7";
export const utrechtAlertIconWarningColor = "#E17000";
export const utrechtAlertIconOkColor = "green";
export const utrechtAlertPaddingBlockEnd = "20px";
export const utrechtAlertPaddingBlockStart = "20px";
export const utrechtAlertPaddingInlineStart = "20px";
export const utrechtAlertPaddingInlineEnd = "20px";
export const utrechtAlertErrorBackgroundColor = "#f8d7da"; // from formio.form.css .formio-error
export const utrechtAlertInfoBackgroundColor = "#d9ebf7";
export const utrechtAlertWarningBackgroundColor = "#fff3cd";
export const utrechtAlertOkBackgroundColor = "#ddffdd";
export const utrechtButtonGroupMarginBlockStart = "20px";
export const utrechtButtonBackgroundColor = "#ffffff";
export const utrechtButtonBorderColor = "rgba(0,0,0,0)";
export const utrechtButtonBorderRadius = "0";
export const utrechtButtonBorderWidth = "2px";
export const utrechtButtonColor = "#000000";
export const utrechtButtonColumnGap = "8px";
export const utrechtButtonFontSize = "1.125rem";
export const utrechtButtonIconGap = "8px";
export const utrechtButtonIconSize = "auto";
export const utrechtButtonLineHeight = "1.333";
export const utrechtButtonMinBlockSize = "0";
export const utrechtButtonMaxInlineSize = "100%";
export const utrechtButtonMinInlineSize = "0";
export const utrechtButtonPaddingBlockStart = "10.003px";
export const utrechtButtonPaddingBlockEnd = "10.003px";
export const utrechtButtonPaddingInlineStart = "12px";
export const utrechtButtonPaddingInlineEnd = "12px";
export const utrechtButtonFocusBorderColor = "transparent";
export const utrechtButtonHoverBackgroundColor = "#cccccc";
export const utrechtButtonHoverBorderColor = "#5e5e5e";
export const utrechtButtonHoverColor = "#000000";
export const utrechtButtonActiveBackgroundColor = "#bfbfbf";
export const utrechtButtonActiveBorderColor = "#767676";
export const utrechtButtonActiveColor = "#000000";
export const utrechtButtonPrimaryActionBackgroundColor = "#0177b2";
export const utrechtButtonPrimaryActionBorderColor = "#01689B";
export const utrechtButtonPrimaryActionColor = "#ffffff";
export const utrechtButtonPrimaryActionHoverBackgroundColor = "#016698";
export const utrechtButtonPrimaryActionHoverBorderColor = "#01537c";
export const utrechtButtonPrimaryActionHoverColor = "#ffffff";
export const utrechtButtonPrimaryActionActiveBackgroundColor = "#01608f";
export const utrechtButtonPrimaryActionActiveBorderColor = "rgba(0,0,0,0)";
export const utrechtButtonPrimaryActionActiveColor = "#bfbfbf";
export const utrechtButtonPrimaryActionFocusBorderColor = "transparent";
export const utrechtButtonPrimaryActionDangerBackgroundColor = "#D52B1E";
export const utrechtButtonPrimaryActionDangerBorderColor = "#aa2218";
export const utrechtButtonPrimaryActionDangerColor = "#ffffff";
export const utrechtButtonPrimaryActionDangerHoverBackgroundColor = "#aa2218";
export const utrechtButtonPrimaryActionDangerHoverBorderColor = "#881b13";
export const utrechtButtonPrimaryActionDangerHoverColor = "#ffffff";
export const utrechtButtonPrimaryActionDangerActiveBackgroundColor = "#a02017";
export const utrechtButtonPrimaryActionDangerActiveBorderColor = "rgba(0,0,0,0)";
export const utrechtButtonPrimaryActionDangerActiveColor = "#ee837d";
export const utrechtButtonPrimaryActionDangerFocusBorderColor = "transparent";
export const utrechtButtonSecondaryActionBorderColor = "#5e5e5e";
export const utrechtButtonSecondaryActionFocusBorderColor = "transparent";
export const utrechtButtonSecondaryActionDangerBackgroundColor = "#D52B1E";
export const utrechtButtonSecondaryActionDangerColor = "#ffffff";
export const utrechtButtonSecondaryActionDangerFocusBorderColor = "transparent";
export const utrechtButtonSubtleBorderColor = "rgba(0,0,0,0)";
export const utrechtButtonSubtleHoverBackgroundColor = "#ffffff";
export const utrechtButtonSubtleDangerColor = "#D52B1E";
export const utrechtButtonSubtleDangerBackgroundColor = "#ffffff";
export const utrechtButtonSubtleDangerHoverBackgroundColor = "#ffffff";
export const utrechtButtonSubtleDangerActiveBackgroundColor = "#a02017";
export const utrechtButtonDisabledBackgroundColor = "#b0b0b0";
export const utrechtButtonDisabledColor = "#ffffff";
export const utrechtCalendarBackgroundColor = "#ffffff";
export const utrechtCalendarTableWeeksItemWidth = "44px";
export const utrechtCalendarTableWeeksItemPaddingBlockStart = "4px";
export const utrechtCalendarTableWeeksItemPaddingBlockEnd = "10px";
export const utrechtCalendarTableWeeksItemLineHeight = "24px";
export const utrechtCalendarTableDaysItemDaySize = "44px";
export const utrechtCalendarTableDaysItemDayColor = "#000000";
export const utrechtCalendarTableDaysItemDayBorderWidth = "2px";
export const utrechtCalendarTableDaysItemDayBorderColor = "transparent";
export const utrechtCalendarTableDaysItemDayHoverBackgroundColor = "transparent";
export const utrechtCalendarTableDaysItemDayHoverBorderColor = "#5e5e5e";
export const utrechtCalendarTableDaysItemDayHoverColor = "#000000";
export const utrechtCalendarTableDaysItemDayFocusBorderColor = "#0177b2";
export const utrechtCalendarTableDaysItemDayActiveBackgroundColor = "#bfbfbf";
export const utrechtCalendarTableDaysItemDayActiveColor = "#000000";
export const utrechtCalendarTableDaysItemDayActiveBorderColor = "#5e5e5e";
export const utrechtCalendarTableDaysItemDayOutOfTheMonthColor = "#767676";
export const utrechtCalendarTableDaysItemDayOutOfTheMonthBorderColor = "transparent";
export const utrechtCalendarTableDaysItemDayIsTodayColor = "#01689B";
export const utrechtCalendarTableDaysItemDayIsTodayFontWeight = "700";
export const utrechtCalendarTableDaysItemDayIsTodayBorderColor = "#01689B";
export const utrechtCalendarTableDaysItemDayIsTodayBackgroundColor = "#d3e3ec";
export const utrechtCalendarTableDaysItemDayEmphasisBorderColor = "transparent";
export const utrechtCalendarTableDaysItemDaySelectedColor = "#ffffff";
export const utrechtCalendarTableDaysItemDaySelectedBorderColor = "#01689B";
export const utrechtCalendarTableDaysItemDaySelectedBackgroundColor = "#0177b2";
export const utrechtCalendarTableDaysItemDayDisabledColor = "#666666";
export const utrechtCalendarTableDaysItemDayDisabledBorderColor = "transparent";
export const utrechtCalendarTableDaysItemDayDisabledBackgroundColor = "#e6e6e6";
export const utrechtCalendarNavigationBackgroundColor = "#ffffff";
export const utrechtCalendarNavigationColor = "#000000";
export const utrechtCalendarNavigationPaddingBlockStart = "4px";
export const utrechtCalendarNavigationPaddingBlockEnd = "4px";
export const utrechtCalendarNavigationLabelMinInlineSize = "200px";
export const utrechtCalendarNavigationLabelColor = "#000000";
export const utrechtCalendarNavigationLabelFontSize = "1rem";
export const utrechtCalendarIconSize = "24px";
export const utrechtCheckboxBackgroundColor = "#ffffff";
export const utrechtCheckboxBorderColor = "#979797";
export const utrechtCheckboxBorderRadius = "0";
export const utrechtCheckboxBorderWidth = "1px";
export const utrechtCheckboxColor = "#000000";
export const utrechtCheckboxMarginInlineEnd = "12px";
export const utrechtCheckboxSize = "24px";
export const utrechtCheckboxCheckedBackgroundColor = "#01689B";
export const utrechtCheckboxCheckedColor = "#ffffff";
export const utrechtDataListMarginBlockEnd = "0";
export const utrechtDataListMarginBlockStart = "0";
export const utrechtDataListItemKeyColor = "#000000";
export const utrechtDataListItemKeyFontSize = "1rem";
export const utrechtDataListItemKeyFontWeight = 700;
export const utrechtDataListItemKeyLineHeight = "1.5";
export const utrechtDataListItemValueColor = "#000000";
export const utrechtDataListItemValueFontSize = "1rem";
export const utrechtDataListItemValueFontWeight = 400;
export const utrechtDataListItemValueLineHeight = "1.5";
export const utrechtDataListRowsColumnInlineSize = "80%";
export const utrechtDataListRowsColumnMinInlineSize = "25ch";
export const utrechtDataListRowsItemMarginBlockStart = "16px";
export const utrechtDataListRowsItemValueMarginBlockStart = "0";
export const utrechtFocusOutlineColor = "#000";
export const utrechtFocusOutlineOffset = "0";
export const utrechtFocusOutlineStyle = "solid";
export const utrechtFocusOutlineWidth = "2px";
export const utrechtFormControlBackgroundColor = "#ffffff";
export const utrechtFormControlReadOnlyBackgroundColor = "#e9ecef";
export const utrechtFormFieldDescriptionColor = "#000000";
export const utrechtFormFieldDescriptionFontFamily = "Fira Sans, Calibri, sans-serif";
export const utrechtFormFieldDescriptionFontSize = "1rem";
export const utrechtFormFieldDescriptionFontStyle = "normal";
export const utrechtFormFieldDescriptionInvalidColor = "#D52B1E";
export const utrechtFormFieldDescriptionMarginBlockEnd = "0";
export const utrechtFormFieldDescriptionMarginBlockStart = "8px";
export const utrechtFormFieldInvalidBorderInlineStartColor = "#D52B1E";
export const utrechtFormFieldInvalidBorderInlineStartWidth = "4px";
export const utrechtFormFieldInvalidPaddingInlineStart = "16px";
export const utrechtFormFieldLabelMarginBlockEnd = "8px";
export const utrechtFormLabelColor = "#000000";
export const utrechtFormLabelFontWeight = "normal";
export const utrechtFormLabelFontSize = "1.125rem";
export const utrechtHeading1Color = "#000000";
export const utrechtHeading1FontFamily = "Fira Sans, Calibri, sans-serif";
export const utrechtHeading1FontSize = "1.9375rem";
export const utrechtHeading1FontWeight = "normal";
export const utrechtHeading1LetterSpacing = "normal";
export const utrechtHeading1LineHeight = "1.100";
export const utrechtHeading1MarginBlockEnd = "0";
export const utrechtHeading1MarginBlockStart = "0";
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 utrechtHeading3LineHeight = "1.17";
export const utrechtHeading3MarginBlockEnd = "20px";
export const utrechtHeading3MarginBlockStart = "12px";
export const utrechtHeading4Color = "#000000";
export const utrechtHeading4FontFamily = "Fira Sans, Calibri, sans-serif";
export const utrechtHeading4FontSize = "1.125rem";
export const utrechtHeading4FontWeight = "normal";
export const utrechtHeading4LineHeight = "1.2";
export const utrechtHeading4MarginBlockEnd = "";
export const utrechtHeading4MarginBlockStart = "";
export const utrechtHeading5Color = "#000000";
export const utrechtHeading5FontFamily = "Fira Sans, Calibri, sans-serif";
export const utrechtHeading5FontSize = "0.875rem";
export const utrechtHeading5FontWeight = "normal";
export const utrechtHeading5LineHeight = "1.2";
export const utrechtHeading5MarginBlockEnd = "";
export const utrechtHeading5MarginBlockStart = "";
export const utrechtHeading6Color = "#000000";
export const utrechtHeading6FontFamily = "Fira Sans, Calibri, sans-serif";
export const utrechtHeading6FontSize = "0.875rem";
export const utrechtHeading6FontWeight = "normal";
export const utrechtHeading6LineHeight = "1.2";
export const utrechtHeading6MarginBlockEnd = "";
export const utrechtHeading6MarginBlockStart = "";
export const utrechtIconSize = "auto";
export const utrechtLinkColor = "#01689B";
export const utrechtLinkIconSize = "auto";
export const utrechtLinkTextDecoration = "underline";
export const utrechtLinkHoverColor = "#01689B";
export const utrechtLinkHoverTextDecoration = "none";
export const utrechtLinkCurrentFontWeight = "bold";
export const utrechtLinkPlaceholderColor = "#767676";
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 utrechtParagraphColor = "#000000";
export const utrechtParagraphFontFamily = "Fira Sans, Calibri, sans-serif";
export const utrechtParagraphFontSize = "1rem";
export const utrechtParagraphFontWeight = "normal";
export const utrechtParagraphLineHeight = "normal";
export const utrechtParagraphMarginBlockEnd = 0;
export const utrechtParagraphMarginBlockStart = 0;
export const utrechtRadioButtonSize = "24px";
export const utrechtRadioButtonBorderColor = "#979797";
export const utrechtRadioButtonColor = "#000000";
export const utrechtRadioButtonBorderWidth = "1px";
export const utrechtRadioButtonBackgroundColor = "#ffffff";
export const utrechtRadioButtonBorderRadius = "0";
export const utrechtRadioButtonMarginInlineEnd = "12px";
export const utrechtRadioButtonIconSize = "30%";
export const utrechtRadioButtonCheckedBackgroundColor = "#01689B";
export const utrechtRadioButtonCheckedColor = "#ffffff";
export const utrechtSelectBackgroundColor = "#ffffff";
export const utrechtSelectBorderColor = "#767676";
export const utrechtSelectBorderRadius = "0";
export const utrechtSelectBorderWidth = "1px";
export const utrechtSelectMaxInlineSize = "100%";
export const utrechtSelectPaddingBlockEnd = "12px";
export const utrechtSelectPaddingBlockStart = "12px";
export const utrechtSelectPaddingInlineEnd = "12px";
export const utrechtSelectPaddingInlineStart = "12px";
export const utrechtSelectDisabledBackgroundColor = "#e9ecef";
export const utrechtTableCellPaddingBlockStart = "0.5em";
export const utrechtTableCellPaddingBlockEnd = "0.5em";
export const utrechtTextareaBackgroundColor = "#ffffff";
export const utrechtTextareaBorderBottomWidth = "1px";
export const utrechtTextareaBorderColor = "#767676";
export const utrechtTextareaBorderRadius = "0";
export const utrechtTextareaBorderWidth = "1px";
export const utrechtTextareaColor = "#000000";
export const utrechtTextareaFontFamily = "Fira Sans, Calibri, sans-serif";
export const utrechtTextareaFontSize = "1rem";
export const utrechtTextareaLineHeight = "1.5";
export const utrechtTextareaMaxInlineSize = "none";
export const utrechtTextareaPaddingBlockEnd = "12px";
export const utrechtTextareaPaddingBlockStart = "12px";
export const utrechtTextareaPaddingInlineEnd = "12px";
export const utrechtTextareaPaddingInlineStart = "12px";
export const utrechtTextareaPlaceholderColor = "#767676";
export const utrechtTextareaDisabledBackgroundColor = "#e9ecef";
export const utrechtTextboxBackgroundColor = "#ffffff";
export const utrechtTextboxBorderColor = "#767676";
export const utrechtTextboxBorderRadius = "0";
export const utrechtTextboxBorderWidth = "1px";
export const utrechtTextboxColor = "#000000";
export const utrechtTextboxFontFamily = "Fira Sans, Calibri, sans-serif";
export const utrechtTextboxFontSize = "1rem";
export const utrechtTextboxLineHeight = "1.5";
export const utrechtTextboxMaxInlineSize = "none";
export const utrechtTextboxPaddingBlockEnd = "12px";
export const utrechtTextboxPaddingBlockStart = "12px";
export const utrechtTextboxPaddingInlineEnd = "12px";
export const utrechtTextboxPaddingInlineStart = "12px";
export const utrechtTextboxPlaceholderColor = "#767676";
export const utrechtTextboxDisabledBackgroundColor = "#e9ecef";
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";