@gemeente-rotterdam/design-tokens - npm Package Compare versions

dist/_mixin-theme.scss

dist/index.cjs

dist/index.flat.json

dist/index.mjs

dist/theme.css

dist/tokens.cjs

rollup.config.mjs

src/_custom.scss

src/_responsive.scss

src/brand/rods/color.tokens.json

src/brand/rods/typography.tokens.json

src/common/rods/space.tokens.json

src/common/utrecht/action.tokens.json

src/common/utrecht/focus.tokens.json

src/common/utrecht/space.tokens.json

src/component/checkbox.style.dictionary.json

src/component/example/button.tokens.json

src/component/open-catalogi/data-badge.json

src/component/rods/button.tokens.json

src/component/rods/form-fieldset.tokens.json

src/component/rods/paragraph.tokens.json

src/component/rods/textbox.tokens.json

src/component/utrecht/badge-counter.tokens.json

src/component/utrecht/badge-status.tokens.json

src/component/utrecht/badge.tokens.json

src/component/utrecht/button.tokens.json

src/component/utrecht/code-block.tokens.json

src/component/utrecht/document.tokens.json

src/component/utrecht/figure.tokens.json

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

src/component/utrecht/form-field-description.tokens.json

src/component/utrecht/form-field-error-message.tokens.json

src/component/utrecht/form-field.tokens.json

src/component/utrecht/form-fieldset.tokens.json

src/component/utrecht/form-label.tokens.json

src/component/utrecht/form-select.tokens.json

src/component/utrecht/heading-1.tokens.json

src/component/utrecht/heading-2.tokens.json

src/component/utrecht/heading-3.tokens.json

src/component/utrecht/heading.tokens.json

src/component/utrecht/icon.tokens.json

src/component/utrecht/link.tokens.json

src/component/utrecht/page-footer.tokens.json

src/component/utrecht/paragraph.tokens.json

src/component/utrecht/table.tokens.json

src/component/utrecht/textarea.tokens.json

src/component/utrecht/textbox.tokens.json

src/index.scss

383

dist/index.d.ts

		/**
		* Do not edit directly
		* Generated on Sun, 03 Dec 2023 14:00:08 GMT
		* Generated on Sun, 03 Dec 2023 14:13:46 GMT
		*/

		export const exampleColorBlue50 : string;
		export const exampleColorGrey0 : string;
		export const exampleColorGrey100 : string;
		export const exampleFocusOutlineOffset : string;
		/** Base/White */
		export const rodsColorBaseWhite : string;
		/** Base/Black */
		export const rodsColorBaseBlack : string;
		/** Base/Green */
		export const rodsColorBaseGreen : string;
		/** Base/Magenta */
		export const rodsColorBaseMagenta : string;
		/** Base/Gray */
		export const rodsColorBaseGray : string;
		/** Gray/Tint 01 */
		export const rodsColorGrayTint01 : string;
		/** Gray/Tint 02 */
		export const rodsColorGrayTint02 : string;
		/** Gray/Tint 03 */
		export const rodsColorGrayTint03 : string;
		/** Gray/Tint 04 */
		export const rodsColorGrayTint04 : string;
		/** Gray/Tint 05 */
		export const rodsColorGrayTint05 : string;
		/** Gray/Tint 06 */
		export const rodsColorGrayTint06 : string;
		/** Gray/Tint 07 */
		export const rodsColorGrayTint07 : string;
		/** Gray/Tint 08 */
		export const rodsColorGrayTint08 : string;
		/** Gray/Tint 09 */
		export const rodsColorGrayTint09 : string;
		/** Gray/Tint 10 */
		export const rodsColorGrayTint10 : string;
		/** Gray/Tint 11 */
		export const rodsColorGrayTint11 : string;
		/** Secondary/Blue/Tint 01 */
		export const rodsColorLightBlueTint01 : string;
		/** Secondary/Blue/Tint 02 */
		export const rodsColorLightBlueTint02 : string;
		/** Secondary/Blue/Tint 03 */
		export const rodsColorLightBlueTint03 : string;
		/** Secondary/Blue/Tint 01 */
		export const rodsColorBlueTint01 : string;
		/** Secondary/Blue/Tint 02 */
		export const rodsColorBlueTint02 : string;
		/** Secondary/Blue/Tint 03 */
		export const rodsColorBlueTint03 : string;
		/** Secondary/Blue/Tint 01 */
		export const rodsColorDarkBlueTint01 : string;
		/** Secondary/Blue/Tint 02 */
		export const rodsColorDarkBlueTint02 : string;
		/** Secondary/Blue/Tint 03 */
		export const rodsColorDarkBlueTint03 : string;
		/** Secondary/Green blue/Tint 01 */
		export const rodsColorGreenBlueTint01 : string;
		/** Secondary/Green blue/Tint 02 */
		export const rodsColorGreenBlueTint02 : string;
		/** Secondary/Green blue/Tint 03 */
		export const rodsColorGreenBlueTint03 : string;
		/** Secondary/Dark green/Tint 01 */
		export const rodsColorDarkGreenTint01 : string;
		/** Secondary/Dark green/Tint 02 */
		export const rodsColorDarkGreenTint02 : string;
		/** Secondary/Dark green/Tint 03 */
		export const rodsColorDarkGreenTint03 : string;
		/** Secondary/Green/Tint 01 */
		export const rodsColorGreenTint01 : string;
		/** Secondary/Green/Tint 02 */
		export const rodsColorGreenTint02 : string;
		/** Secondary/Green/Tint 03 */
		export const rodsColorGreenTint03 : string;
		/** Secondary/Green light/Tint 01 */
		export const rodsColorGreenLightTint01 : string;
		/** Secondary/Green light/Tint 02 */
		export const rodsColorGreenLightTint02 : string;
		/** Secondary/Green light/Tint 03 */
		export const rodsColorGreenLightTint03 : string;
		/** Secondary/Soft green/Tint 01 */
		export const rodsColorSoftGreenTint01 : string;
		/** Secondary/Soft green/Tint 02 */
		export const rodsColorSoftGreenTint02 : string;
		/** Secondary/Soft green/Tint 03 */
		export const rodsColorSoftGreenTint03 : string;
		/** Secondary/Lime green/Tint 01 */
		export const rodsColorLimeGreenTint01 : string;
		/** Secondary/Lime green/Tint 02 */
		export const rodsColorLimeGreenTint02 : string;
		/** Secondary/Lime green/Tint 03 */
		export const rodsColorLimeGreenTint03 : string;
		/** Secondary/Yellow/Tint 01 */
		export const rodsColorYellowTint01 : string;
		/** Secondary/Yellow/Tint 02 */
		export const rodsColorYellowTint02 : string;
		/** Secondary/Yellow/Tint 03 */
		export const rodsColorYellowTint03 : string;
		/** Secondary/Dark yellow/Tint 01 */
		export const rodsColorDarkYellowTint01 : string;
		/** Secondary/Dark yellow/Tint 02 */
		export const rodsColorDarkYellowTint02 : string;
		/** Secondary/Dark yellow/Tint 03 */
		export const rodsColorDarkYellowTint03 : string;
		/** Secondary/Bright orange/Tint 01 */
		export const rodsColorBrightOrangeTint01 : string;
		/** Secondary/Bright orange/Tint 02 */
		export const rodsColorBrightOrangeTint02 : string;
		/** Secondary/Bright orange/Tint 03 */
		export const rodsColorBrightOrangeTint03 : string;
		/** Secondary/Orange/Tint 01 */
		export const rodsColorOrangeTint01 : string;
		/** Secondary/Orange/Tint 02 */
		export const rodsColorOrangeTint02 : string;
		/** Secondary/Orange/Tint 03 */
		export const rodsColorOrangeTint03 : string;
		/** Secondary/Pink/Tint 01 */
		export const rodsColorPinkTint01 : string;
		/** Secondary/Pink/Tint 02 */
		export const rodsColorPinkTint02 : string;
		/** Secondary/Pink/Tint 03 */
		export const rodsColorPinkTint03 : string;
		/** Secondary/Magenta/Tint 01 */
		export const rodsColorMagentaTint01 : string;
		/** Secondary/Magenta/Tint 02 */
		export const rodsColorMagentaTint02 : string;
		/** Secondary/Magenta/Tint 03 */
		export const rodsColorMagentaTint03 : string;
		/** Secondary/Purple/Tint 01 */
		export const rodsColorPurpleTint01 : string;
		/** Secondary/Purple/Tint 02 */
		export const rodsColorPurpleTint02 : string;
		/** Secondary/Purple/Tint 03 */
		export const rodsColorPurpleTint03 : string;
		/** Secondary/Dark brown/Tint 01 */
		export const rodsColorDarkBrownTint01 : string;
		/** Secondary/Dark brown/Tint 02 */
		export const rodsColorDarkBrownTint02 : string;
		/** Secondary/Dark brown/Tint 03 */
		export const rodsColorDarkBrownTint03 : string;
		/** Secondary/Brown/Tint 01 */
		export const rodsColorBrownTint01 : string;
		/** Secondary/Brown/Tint 02 */
		export const rodsColorBrownTint02 : string;
		/** Secondary/Brown/Tint 03 */
		export const rodsColorBrownTint03 : string;
		/** Secondary/Red/Tint 01 */
		export const rodsColorRedTint01 : string;
		/** Secondary/Red/Tint 02 */
		export const rodsColorRedTint02 : string;
		/** Secondary/Red/Tint 03 */
		export const rodsColorRedTint03 : string;
		export const rodsTypographySansSerifFontFamily : string;
		export const rodsTypographyScale6xlFontSize : string;
		export const rodsTypographyScale6xlLineHeight : string;
		export const rodsTypographyScale5xlFontSize : string;
		export const rodsTypographyScale5xlLineHeight : string;
		export const rodsTypographyScale4xlFontSize : string;
		export const rodsTypographyScale4xlLineHeight : string;
		export const rodsTypographyScale3xlFontSize : string;
		export const rodsTypographyScale3xlLineHeight : string;
		export const rodsTypographyScale2xlFontSize : string;
		export const rodsTypographyScale2xlLineHeight : string;
		export const rodsTypographyScaleXlFontSize : string;
		export const rodsTypographyScaleXlLineHeight : string;
		export const rodsTypographyScaleLgFontSize : string;
		export const rodsTypographyScaleLgLineHeight : string;
		export const rodsTypographyScaleMdFontSize : string;
		export const rodsTypographyScaleMdLineHeight : string;
		export const rodsTypographyScaleSmFontSize : string;
		export const rodsTypographyScaleSmLineHeight : string;
		export const rodsTypographyWeightScaleBoldFontWeight : string;
		export const rodsTypographyWeightScaleNormalFontWeight : string;
		export const rodsSpaceScale0 : string;
		export const rodsSpaceScale1 : string;
		export const rodsSpaceScale2 : string;
		export const rodsSpaceScale3 : string;
		export const rodsSpaceScale4 : string;
		export const rodsSpaceScale5 : string;
		export const rodsSpaceScale6 : string;
		export const rodsSpaceScale7 : string;
		export const rodsButtonLineHeight : string;
		export const rodsFormFieldsetLegendBorderBlockEndColor : string;
		export const rodsFormFieldsetLegendBorderBlockEndWidth : string;
		export const rodsFormFieldsetLegendPaddingBlockEnd : string;
		export const rodsParagraphSmallFontSize : string;
		export const rodsParagraphSmallLineHeight : string;
		export const rodsTextboxHoverBorderColor : string;
		export const rodsTextboxHoverBorderWidth : string;
		export const utrechtActionBusyCursor : string;
		export const utrechtActionDisabledCursor : string;
		export const utrechtActionSubmitCursor : string;
		export const utrechtFocusOutlineColor : string;
		export const utrechtFocusOutlineOffset : string;
		export const utrechtFocusOutlineStyle : string;
		export const utrechtFocusOutlineWidth : string;
		export const utrechtSpaceBlock3xs : string;
		export const utrechtSpaceBlock2xs : string;
		export const utrechtSpaceBlockXs : string;
		export const utrechtSpaceBlockSm : string;
		export const utrechtSpaceBlockMd : string;
		export const utrechtSpaceBlockLg : string;
		export const utrechtSpaceBlockXl : string;
		export const utrechtSpaceBlock2xl : string;
		export const utrechtSpaceBlock3xl : string;
		export const utrechtSpaceBlock4xl : string;
		export const utrechtSpaceBlock5xl : string;
		export const utrechtSpaceInline3xs : string;
		export const utrechtSpaceInline2xs : string;
		export const utrechtSpaceInlineXs : string;
		export const utrechtSpaceInlineSm : string;
		export const utrechtSpaceInlineMd : string;
		export const utrechtSpaceInlineLg : string;
		export const utrechtSpaceInlineXl : string;
		export const utrechtSpaceInline2xl : string;
		export const utrechtSpaceInline3xl : string;
		export const utrechtSpaceRow3xs : string;
		export const utrechtSpaceRow2xs : string;
		export const utrechtSpaceRowXs : string;
		export const utrechtSpaceRowSm : string;
		export const utrechtSpaceRowMd : string;
		export const utrechtSpaceRowLg : string;
		export const utrechtSpaceRowXl : string;
		export const utrechtSpaceRow2xl : string;
		export const utrechtSpaceRow3xl : string;
		export const utrechtSpaceRow4xl : string;
		export const utrechtSpaceRow5xl : string;
		export const utrechtSpaceColumn3xs : string;
		export const utrechtSpaceColumn2xs : string;
		export const utrechtSpaceColumnXs : string;
		export const utrechtSpaceColumnSm : string;
		export const utrechtSpaceColumnMd : string;
		export const utrechtSpaceColumnLg : string;
		export const utrechtSpaceColumnXl : string;
		export const utrechtSpaceColumn2xl : string;
		export const utrechtSpaceColumn3xl : string;
		export const utrechtSpaceColumn4xl : string;
		export const utrechtSpaceColumn5xl : string;
		export const utrechtBadgeCounterBorderRadius : string;
		export const utrechtBadgeCounterFontWeight : string;
		export const utrechtBadgeCounterPaddingBlockEnd : string;
		export const utrechtBadgeCounterPaddingInlineStart : string;
		export const utrechtBadgeBackgroundColor : string;
		export const utrechtBadgeBorderRadius : string;
		export const utrechtBadgeColor : string;
		export const utrechtBadgeFontSize : string;
		export const utrechtBadgeFontWeight : string;
		export const utrechtBadgePaddingBlock : string;
		export const utrechtBadgePaddingInline : string;
		export const utrechtButtonBackgroundColor : string;
		export const utrechtButtonBorderWidth : string;
		export const utrechtButtonColor : string;
		export const utrechtButtonFontFamily : string;
		export const utrechtButtonFontSize : string;
		export const utrechtButtonFontWeight : string;
		export const utrechtButtonPaddingBlockEnd : string;
		export const utrechtButtonPaddingBlockStart : string;
		export const utrechtButtonPaddingInlineEnd : string;
		export const utrechtButtonPaddingInlineStart : string;
		export const utrechtButtonHoverBackgroundColor : string;
		export const utrechtButtonFocusBorderColor : string;
		export const utrechtButtonDisabledBackgroundColor : string;
		export const utrechtButtonDisabledColor : string;
		export const utrechtButtonPrimaryActionBackgroundColor : string;
		export const utrechtButtonPrimaryActionColor : string;
		export const utrechtButtonPrimaryActionHoverBackgroundColor : string;
		export const utrechtButtonSecondaryActionBackgroundColor : string;
		export const utrechtButtonSecondaryActionColor : string;
		export const utrechtButtonSecondaryActionHoverBackgroundColor : string;
		export const utrechtButtonSecondaryActionHoverBorderColor : string;
		export const utrechtButtonSubtleBackgroundColor : string;
		export const utrechtButtonSubtleColor : string;
		export const utrechtButtonSubtleDisabledBackgroundColor : string;
		export const utrechtButtonSubtleDisabledColor : string;
		export const utrechtButtonSubtleHoverColor : string;
		export const utrechtCodeBlockBackgroundColor : string;
		export const utrechtCodeBlockColor : string;
		export const utrechtCodeBlockFontSize : string;
		export const utrechtCodeBlockMarginBlockEnd : string;
		export const utrechtCodeBlockMarginBlockStart : string;
		export const utrechtCodeBlockPaddingBlockEnd : string;
		export const utrechtCodeBlockPaddingBlockStart : string;
		export const utrechtCodeBlockPaddingInlineStart : string;
		export const utrechtDocumentBackgroundColor : string;
		export const utrechtDocumentColor : string;
		export const utrechtDocumentFontFamily : string;
		export const utrechtDocumentFontSize : string;
		export const utrechtFigureCaptionColor : string;
		export const utrechtFigureCaptionFontSize : string;
		export const utrechtFigureCaptionLineHeight : string;
		export const utrechtFormControlBackgroundColor : string;
		/** 48px - 2px border */
		export const utrechtFormControlBlockSize : string;
		export const utrechtFormControlBorderColor : string;
		export const utrechtFormControlBorderRadius : string;
		export const utrechtFormControlBorderWidth : string;
		export const utrechtFormControlColor : string;
		export const utrechtFormControlFontFamily : string;
		export const utrechtFormControlFontSize : string;
		export const utrechtFormControlLineHeight : string;
		export const utrechtFormControlPaddingBlockEnd : string;
		export const utrechtFormControlPaddingBlockStart : string;
		export const utrechtFormControlPaddingInlineEnd : string;
		export const utrechtFormControlPaddingInlineStart : string;
		export const utrechtFormControlMaxInlineSize : string;
		export const utrechtFormControlPlaceholderColor : string;
		export const utrechtFormControlDisabledBackgroundColor : string;
		export const utrechtFormControlDisabledColor : string;
		export const utrechtFormFieldDescriptionFontSize : string;
		export const utrechtFormFieldDescriptionValidColor : string;
		export const utrechtFormFieldDescriptionInvalidColor : string;
		export const utrechtFormFieldErrorMessageColor : string;
		export const utrechtFormFieldInvalidBorderInlineStartColor : string;
		export const utrechtFormFieldInvalidBorderInlineStartWidth : string;
		export const utrechtFormFieldInvalidPaddingInlineStart : string;
		export const utrechtFormFieldsetMarginBlockStart : string;
		export const utrechtFormFieldsetLegendColor : string;
		export const utrechtFormFieldsetLegendFontSize : string;
		export const utrechtFormFieldsetLegendFontWeight : string;
		export const utrechtFormFieldsetLegendLineHeight : string;
		export const utrechtFormLabelColor : string;
		export const utrechtFormLabelFontSize : string;
		export const utrechtFormLabelFontWeight : string;
		export const utrechtFormLabelCheckboxFontWeight : string;
		export const utrechtFormLabelRadioFontWeight : string;
		export const utrechtFormSelectBackgroundColor : string;
		export const utrechtFormSelectBorderWidth : string;
		export const utrechtFormSelectColor : string;
		export const utrechtFormSelectMaxInlineSize : string;
		export const utrechtHeading1FontSize : string;
		export const utrechtHeading1LineHeight : string;
		export const utrechtHeading2FontSize : string;
		export const utrechtHeading2LineHeight : string;
		export const utrechtHeading3FontSize : string;
		export const utrechtHeading3LineHeight : string;
		export const utrechtHeadingFontWeight : string;
		export const utrechtIconInsetBlockStart : string;
		export const utrechtLinkColor : string;
		export const utrechtLinkTextDecoration : string;
		export const utrechtLinkActiveColor : string;
		export const utrechtLinkFocusColor : string;
		export const utrechtLinkHoverColor : string;
		export const utrechtPageFooterColor : string;
		export const utrechtPageFooterBackgroundColor : string;
		export const utrechtPageFooterPaddingInlineEnd : string;
		export const utrechtPageFooterPaddingInlineStart : string;
		export const utrechtPageFooterPaddingBlockEnd : string;
		export const utrechtPageFooterPaddingBlockStart : string;
		export const utrechtParagraphFontFamily : string;
		export const utrechtParagraphFontSize : string;
		export const utrechtParagraphFontWeight : string;
		export const utrechtParagraphLineHeight : string;
		export const utrechtParagraphLeadFontSize : string;
		export const utrechtParagraphLeadFontWeight : string;
		export const utrechtParagraphLeadLineHeight : string;
		export const utrechtParagraphSmallFontSize : string;
		export const utrechtParagraphSmallLineHeight : string;
		export const utrechtTableHeaderFontWeight : string;
		export const utrechtTableHeaderBorderBlockEndColor : string;
		export const utrechtTableCellPaddingBlockEnd : string;
		export const utrechtTableCellPaddingBlockStart : string;
		export const utrechtTableCellPaddingInlineEnd : string;
		export const utrechtTableCellPaddingInlineStart : string;
		export const utrechtTableRowBorderBlockEndColor : string;
		export const utrechtTableRowBorderBlockEndWidth : string;
		export const utrechtTextareaMinBlockSize : string;
		export const utrechtTextareaPaddingBlockEnd : string;
		export const utrechtTextareaPaddingBlockStart : string;
		export const utrechtTextareaPlaceholderColor : string;
		export const utrechtTextboxBorderColor : string;
		export const utrechtTextboxBorderWidth : string;
		export const utrechtTextboxColor : string;
		export const utrechtTextboxFontFamily : string;
		export const utrechtTextboxFontSize : string;
		export const utrechtTextboxLineHeight : string;
		export const utrechtTextboxPaddingBlockEnd : string;
		export const utrechtTextboxPaddingBlockStart : string;
		export const utrechtTextboxPaddingInlineEnd : string;
		export const utrechtTextboxPaddingInlineStart : string;
		export const utrechtTextboxPlaceholderColor : string;
		export const utrechtTextboxDisabledBackgroundColor : string;
		export const utrechtTextboxInvalidBorderBottomWidth : string;
		export const utrechtTextboxInvalidBorderBottomColor : string;
		export const exampleButtonBackgroundColor : string;
		export const exampleButtonColor : string;

12

dist/index.js

		@@ -1,11 +0,1 @@
		/**
		* Do not edit directly
		* Generated on Sun, 03 Dec 2023 14:00:08 GMT
		*/

		export const exampleColorBlue50 = "cornflowerblue";
		export const exampleColorGrey0 = "black";
		export const exampleColorGrey100 = "white";
		export const exampleFocusOutlineOffset = "2px";
		export const exampleButtonBackgroundColor = "cornflowerblue";
		export const exampleButtonColor = "white";
		var undefined$1 = undefined;export{undefined$1 as default};

776

dist/index.tokens.json

		{
		"example": {
		"rods": {
		"color": {
		"base": {
		"white": "#ffffff",
		"black": "#000000",
		"green": "#00811F",
		"magenta": "#C93675",
		"gray": "#EFF4F6"
		},
		"gray": {
		"tint-01": "#EFF4F6",
		"tint-02": "#E4EEF1",
		"tint-03": "#DBE7EA",
		"tint-04": "#CAD6DA",
		"tint-05": "#B6C4C8",
		"tint-06": "#9DAFB6",
		"tint-07": "#8D9DA4",
		"tint-08": "#7C8B90",
		"tint-09": "#65757B",
		"tint-10": "#536165",
		"tint-11": "#404B4F"
		},
		"light-blue": {
		"tint-01": "#A8E8F5",
		"tint-02": "#92CFE1",
		"tint-03": "#76C1D3"
		},
		"blue": {
		"50": "cornflowerblue"
		"tint-01": "#1791D4",
		"tint-02": "#0084C4",
		"tint-03": "#0079B8"
		},
		"grey": {
		"0": "black",
		"100": "white"
		"dark-blue": {
		"tint-01": "#00548F",
		"tint-02": "#084279",
		"tint-03": "#083968"
		},
		"green-blue": {
		"tint-01": "#09957B",
		"tint-02": "#00846D",
		"tint-03": "#00755F"
		},
		"dark-green": {
		"tint-01": "#004C31",
		"tint-02": "#07341B",
		"tint-03": "#001905"
		},
		"green": {
		"tint-01": "#00811F",
		"tint-02": "#006E32",
		"tint-03": "#00602E"
		},
		"green-light": {
		"tint-01": "#57B051",
		"tint-02": "#11A03E",
		"tint-03": "#11A03E"
		},
		"soft-green": {
		"tint-01": "#E1EFE2",
		"tint-02": "#D1E6CE",
		"tint-03": "#99CCA0"
		},
		"lime-green": {
		"tint-01": "#7DC90F",
		"tint-02": "#73B129",
		"tint-03": "#62A72B"
		},
		"yellow": {
		"tint-01": "#FDEC3D",
		"tint-02": "#EDDE26",
		"tint-03": "#E1D600"
		},
		"dark-yellow": {
		"tint-01": "#EDB500",
		"tint-02": "#E0A200",
		"tint-03": "#D99600"
		},
		"bright-orange": {
		"tint-01": "#EF7D00",
		"tint-02": "#E56E02",
		"tint-03": "#DB5F06"
		},
		"orange": {
		"tint-01": "#E3614D",
		"tint-02": "#D85644",
		"tint-03": "#CE4C3B"
		},
		"pink": {
		"tint-01": "#E6007E",
		"tint-02": "#CE0075",
		"tint-03": "#B21271"
		},
		"magenta": {
		"tint-01": "#C93675",
		"tint-02": "#A12B5E",
		"tint-03": "#792046"
		},
		"purple": {
		"tint-01": "#701747",
		"tint-02": "#510E33",
		"tint-03": "#420C2F"
		},
		"dark-brown": {
		"tint-01": "#6B4236",
		"tint-02": "#5E362C",
		"tint-03": "#552D25"
		},
		"brown": {
		"tint-01": "#AB8061",
		"tint-02": "#997056",
		"tint-03": "#8B644C"
		},
		"red": {
		"tint-01": "#FE1818",
		"tint-02": "#D70D0D",
		"tint-03": "#9A0F0F"
		}
		},
		"typography": {
		"sans-serif": {
		"font-family": "Bolder, ArialforRotterdam, Arial, sans-serif"
		},
		"scale": {
		"6xl": {
		"font-size": "64px",
		"line-height": "72px"
		},
		"5xl": {
		"font-size": "48px",
		"line-height": "56px"
		},
		"4xl": {
		"font-size": "40px",
		"line-height": "48px"
		},
		"3xl": {
		"font-size": "32px",
		"line-height": "40px"
		},
		"2xl": {
		"font-size": "28px",
		"line-height": "36px"
		},
		"xl": {
		"font-size": "24px",
		"line-height": "32px"
		},
		"lg": {
		"font-size": "20px",
		"line-height": "28px"
		},
		"md": {
		"font-size": "16px",
		"line-height": "24px"
		},
		"sm": {
		"font-size": "12px",
		"line-height": "20px"
		}
		},
		"weight-scale": {
		"bold": {
		"font-weight": "700"
		},
		"normal": {
		"font-weight": "400"
		}
		}
		},
		"space": {
		"scale": {
		"0": "0",
		"1": "4px",
		"2": "8px",
		"3": "16px",
		"4": "32px",
		"5": "64px",
		"6": "128px",
		"7": "256px"
		}
		},
		"button": {
		"line-height": "24px"
		},
		"form-fieldset": {
		"legend": {
		"border-block-end-color": "#CAD6DA",
		"border-block-end-width": "1px",
		"padding-block-end": "12px"
		}
		},
		"paragraph": {
		"small": {
		"font-size": "12px",
		"line-height": "20px"
		}
		},
		"textbox": {
		"hover": {
		"border-color": "#00811F",
		"border-width": "2px"
		}
		}
		},
		"utrecht": {
		"action": {
		"busy": {
		"cursor": "wait"
		},
		"disabled": {
		"cursor": "not-allowed"
		},
		"submit": {
		"cursor": "pointer"
		}
		},
		"focus": {
		"outline-offset": "2px"
		"background-color": {},
		"border-color": {},
		"color": {},
		"outline-color": "#000000",
		"outline-offset": "1px",
		"outline-style": "solid",
		"outline-width": "1px"
		},
		"space": {
		"block": {
		"3xs": "0",
		"2xs": "4px",
		"xs": "8px",
		"sm": "12px",
		"md": "16px",
		"lg": "20px",
		"xl": "24px",
		"2xl": "28px",
		"3xl": "32px",
		"4xl": "36px",
		"5xl": "40px"
		},
		"inline": {
		"3xs": "0.125ch",
		"2xs": "0.25ch",
		"xs": "0.5ch",
		"sm": "0.75ch",
		"md": "1ch",
		"lg": "1.5ch",
		"xl": "1.75ch",
		"2xl": "2ch",
		"3xl": "3ch"
		},
		"row": {
		"3xs": "0",
		"2xs": "4px",
		"xs": "8px",
		"sm": "12px",
		"md": "16px",
		"lg": "20px",
		"xl": "24px",
		"2xl": "28px",
		"3xl": "32px",
		"4xl": "36px",
		"5xl": "40px"
		},
		"column": {
		"3xs": "0",
		"2xs": "4px",
		"xs": "8px",
		"sm": "12px",
		"md": "16px",
		"lg": "20px",
		"xl": "24px",
		"2xl": "28px",
		"3xl": "32px",
		"4xl": "36px",
		"5xl": "40px"
		}
		},
		"badge-counter": {
		"border-radius": "2em",
		"color": {},
		"font-size": {},
		"font-weight": "400",
		"padding-block-end": "5px",
		"padding-inline-start": "5px"
		},
		"badge-status": {
		"letter-spacing": {},
		"text-transform": {}
		},
		"badge": {
		"background-color": "#0079B8",
		"border-radius": "0",
		"color": "#ffffff",
		"font-size": "12px",
		"font-weight": "700",
		"line-height": {},
		"padding-block": "2px",
		"padding-inline": "8px",
		"text-transform": {}
		},
		"button": {
		"background-color": "cornflowerblue",
		"color": "white"
		"background-color": "#00811F",
		"border-color": {},
		"border-radius": {},
		"border-width": "0",
		"color": "#ffffff",
		"font-family": "Bolder, ArialforRotterdam, Arial, sans-serif",
		"font-size": "16px",
		"font-weight": "700",
		"inline-size": {},
		"letter-spacing": {},
		"line-height": {},
		"min-block-size": {},
		"min-inline-size": {},
		"padding-block-end": "13px",
		"padding-block-start": "11px",
		"padding-inline-end": "16px",
		"padding-inline-start": "16px",
		"text-transform": {},
		"active": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"icon": {
		"gap": {},
		"size": {}
		},
		"hover": {
		"background-color": "#006E32",
		"border-color": {},
		"color": {},
		"scale": {}
		},
		"focus": {
		"background-color": {},
		"border-color": "#000000",
		"color": {},
		"scale": {}
		},
		"disabled": {
		"background-color": "#CAD6DA",
		"border-color": {},
		"color": "#65757B"
		},
		"primary-action": {
		"background-color": "#C93675",
		"color": "#ffffff",
		"hover": {
		"background-color": "#A12B5E"
		}
		},
		"secondary-action": {
		"background-color": "#000000",
		"color": "#ffffff",
		"border-color": {},
		"border-width": {},
		"active": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"disabled": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"hover": {
		"background-color": "#404B4F",
		"border-color": "none",
		"color": {}
		},
		"focus": {
		"background-color": {},
		"border-color": {},
		"color": {}
		}
		},
		"subtle": {
		"background-color": "#ffffff",
		"border-color": {},
		"border-width": {},
		"color": "#00811F",
		"font-weight": {},
		"active": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"disabled": {
		"background-color": "#CAD6DA",
		"border-color": {},
		"color": "#65757B"
		},
		"hover": {
		"background-color": {},
		"border-color": {},
		"color": "#00602E"
		},
		"focus": {
		"background-color": {},
		"border-color": {},
		"color": {}
		}
		}
		},
		"code-block": {
		"background-color": "#EFF4F6",
		"color": "#404B4F",
		"font-family": {},
		"font-size": "16px",
		"line-height": {},
		"margin-block-end": "24px",
		"margin-block-start": "24px",
		"margin-inline-end": {},
		"margin-inline-start": {},
		"padding-block-end": "24px",
		"padding-block-start": "24px",
		"padding-inline-end": {},
		"padding-inline-start": "24px"
		},
		"document": {
		"background-color": "#ffffff",
		"color": "#404B4F",
		"font-family": "Bolder, ArialforRotterdam, Arial, sans-serif",
		"font-size": "16px",
		"line-height": {}
		},
		"figure": {
		"margin-block-end": {},
		"margin-block-start": {},
		"caption": {
		"color": "#E4EEF1",
		"font-size": "16px",
		"line-height": "28px"
		}
		},
		"form-control": {
		"background-color": "#ffffff",
		"block-size": "46px",
		"border-color": "#7C8B90",
		"border-radius": "0",
		"border-width": "1px",
		"color": "#404B4F",
		"font-family": "Bolder, ArialforRotterdam, Arial, sans-serif",
		"font-size": "16px",
		"line-height": "24px",
		"min-block-size": {},
		"padding-block-end": "12px",
		"padding-block-start": "12px",
		"padding-inline-end": "16px",
		"padding-inline-start": "16px",
		"max-inline-size": "320px",
		"placeholder": {
		"color": "#65757B"
		},
		"focus": {
		"border-color": {}
		},
		"disabled": {
		"background-color": "#EFF4F6",
		"color": "#65757B"
		}
		},
		"form-field-description": {
		"color": {},
		"font-family": {},
		"font-size": "12px",
		"font-style": {},
		"margin-block-start": {},
		"margin-block-end": {},
		"valid": {
		"color": "#006E32"
		},
		"invalid": {
		"color": "#B53322"
		}
		},
		"form-field-error-message": {
		"color": "#D70D0D",
		"font-family": {},
		"font-size": {},
		"font-weight": {},
		"margin-block-start": {},
		"margin-block-end": {}
		},
		"form-field": {
		"margin-block-start": {},
		"margin-block-end": {},
		"invalid": {
		"border-inline-start-color": "#D70D0D",
		"border-inline-start-width": "2px",
		"padding-inline-start": "16px"
		},
		"label": {
		"margin-block-end": {}
		},
		"description": {
		"margin-block-start": {},
		"margin-block-end": {}
		}
		},
		"form-fieldset": {
		"margin-block-start": "40px",
		"margin-block-end": {},
		"invalid": {
		"border-inline-start-color": {
		"color": {}
		},
		"border-inline-start-width": {},
		"padding-inline-start": {}
		},
		"section": {
		"background-color": {},
		"color": {}
		},
		"legend": {
		"color": "#404B4F",
		"font-family": {},
		"font-size": "24px",
		"font-weight": "700",
		"line-height": "32px",
		"margin-block-end": {},
		"margin-block-start": {},
		"text-transform": {},
		"disabled": {
		"color": {}
		}
		}
		},
		"form-label": {
		"color": "#404B4F",
		"font-size": "16px",
		"font-weight": "700",
		"checkbox": {
		"color": {},
		"font-weight": "400"
		},
		"checked": {
		"font-weight": {}
		},
		"disabled": {
		"color": {}
		},
		"radio": {
		"color": {},
		"font-weight": "400"
		}
		},
		"form-select": {
		"background-color": "#ffffff",
		"border-color": {},
		"border-width": "1px",
		"color": "#404B4F",
		"font-size": {},
		"max-inline-size": "100%",
		"padding-block-end": {},
		"padding-block-start": {},
		"padding-inline-end": {},
		"padding-inline-start": {}
		},
		"heading-1": {
		"color": {},
		"font-family": {},
		"font-size": "64px",
		"font-weight": {},
		"line-height": "72px",
		"margin-block-end": {},
		"margin-block-start": {}
		},
		"heading-2": {
		"color": {},
		"font-family": {},
		"font-size": "48px",
		"font-weight": {},
		"line-height": "56px",
		"margin-block-end": {},
		"margin-block-start": {}
		},
		"heading-3": {
		"color": {},
		"font-family": {},
		"font-size": "40px",
		"font-weight": {},
		"line-height": "48px",
		"margin-block-end": {},
		"margin-block-start": {}
		},
		"heading": {
		"color": {},
		"font-family": {},
		"font-weight": "700"
		},
		"icon": {
		"color": {},
		"size": {},
		"inset-block-start": "0.1em",
		"baseline": {
		"inset-block-start": {}
		}
		},
		"link": {
		"color": "#00811F",
		"text-decoration": "underline",
		"text-decoration-color": {},
		"text-decoration-thickness": {},
		"text-underline-offset": {},
		"active": {
		"color": "#00602E"
		},
		"focus": {
		"color": "#00602E",
		"text-decoration": {},
		"text-decoration-thickness": {}
		},
		"hover": {
		"color": "#00602E",
		"text-decoration": {},
		"text-decoration-thickness": {}
		},
		"placeholder": {
		"color": {}
		},
		"visited": {
		"color": {}
		},
		"icon": {
		"size": {}
		}
		},
		"page-footer": {
		"color": "#ffffff",
		"background-color": "#00811F",
		"background-image": {},
		"padding-inline-end": "72px",
		"padding-inline-start": "72px",
		"padding-block-end": "64px",
		"padding-block-start": "40px"
		},
		"paragraph": {
		"color": {},
		"font-family": "Bolder, ArialforRotterdam, Arial, sans-serif",
		"font-size": "16px",
		"font-weight": "400",
		"line-height": "28px",
		"margin-block-start": {},
		"margin-block-end": {},
		"lead": {
		"font-size": "28px",
		"font-weight": "400",
		"line-height": "36px"
		},
		"small": {
		"color": {},
		"font-size": "12px",
		"font-weight": {},
		"line-height": "20px"
		}
		},
		"table": {
		"margin-block-end": {},
		"margin-block-start": {},
		"caption": {
		"font-weight": {},
		"font-family": {},
		"font-size": {},
		"color": {},
		"line-height": {},
		"text-align": {},
		"margin-block-end": {}
		},
		"header": {
		"font-weight": "400",
		"background-color": {},
		"color": {},
		"text-transform": {},
		"border-block-end-color": "#404B4F",
		"border-block-end-width": {}
		},
		"heading": {
		"font-weight": {},
		"color": {},
		"text-transform": {}
		},
		"cell": {
		"line-height": {},
		"padding-block-end": "16px",
		"padding-block-start": "16px",
		"padding-inline-end": "12px",
		"padding-inline-start": "12px",
		"border-color": {}
		},
		"row": {
		"border-block-end-color": "#CAD6DA",
		"border-block-end-width": " 1px",
		"padding-inline-end": {},
		"padding-inline-start": {},
		"alternate-odd": {
		"background-color": {},
		"color": {}
		},
		"alternate-even": {
		"background-color": {},
		"color": {}
		}
		}
		},
		"textarea": {
		"border-bottom-width": {},
		"border-color": {},
		"border-radius": {},
		"border-width": {},
		"background-color": {},
		"color": {},
		"font-family": {},
		"font-size": {},
		"line-height": {},
		"min-inline-size": {},
		"max-inline-size": {},
		"min-block-size": "200px",
		"padding-block-end": "8px",
		"padding-block-start": "8px",
		"padding-inline-end": {},
		"padding-inline-start": {},
		"placeholder": {
		"color": "#65757B"
		}
		},
		"textbox": {
		"background-color": {},
		"border-bottom-width": {},
		"border-color": "#7C8B90",
		"border-radius": {},
		"border-width": "1px",
		"color": "#404B4F",
		"font-family": "Bolder, ArialforRotterdam, Arial, sans-serif",
		"font-size": "16px",
		"min-inline-size": {},
		"max-inline-size": {},
		"line-height": "24px",
		"padding-block-end": "12px",
		"padding-block-start": "10px",
		"padding-inline-end": "16px",
		"padding-inline-start": "16px",
		"placeholder": {
		"color": "#65757B"
		},
		"disabled": {
		"background-color": "#EFF4F6",
		"border-color": {},
		"color": {}
		},
		"focus": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"invalid": {
		"background-color": {},
		"border-color": {},
		"border-bottom-width": "2px",
		"border-bottom-color": "#FE1818",
		"border-width": {},
		"color": {}
		},
		"read-only": {
		"background-color": {},
		"border-color": {},
		"color": {}
		}
		}
		},
		"example": {
		"button": {
		"background-color": "#00811F",
		"color": "#ffffff"
		}
		}
		}

772

dist/tokens.d.ts

		/**
		* Do not edit directly
		* Generated on Sun, 03 Dec 2023 14:00:08 GMT
		* Generated on Sun, 03 Dec 2023 14:13:46 GMT
		*/
		@@ -25,17 +25,777 @@
		declare const tokens: {
		"example": {
		"rods": {
		"color": {
		"base": {
		"white": DesignToken,
		"black": DesignToken,
		"green": DesignToken,
		"magenta": DesignToken,
		"gray": DesignToken
		},
		"gray": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken,
		"tint-04": DesignToken,
		"tint-05": DesignToken,
		"tint-06": DesignToken,
		"tint-07": DesignToken,
		"tint-08": DesignToken,
		"tint-09": DesignToken,
		"tint-10": DesignToken,
		"tint-11": DesignToken
		},
		"light-blue": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"blue": {
		"50": DesignToken
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"grey": {
		"dark-blue": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"green-blue": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"dark-green": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"green": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"green-light": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"soft-green": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"lime-green": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"yellow": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"dark-yellow": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"bright-orange": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"orange": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"pink": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"magenta": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"purple": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"dark-brown": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"brown": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		},
		"red": {
		"tint-01": DesignToken,
		"tint-02": DesignToken,
		"tint-03": DesignToken
		}
		},
		"typography": {
		"sans-serif": {
		"font-family": DesignToken
		},
		"scale": {
		"6xl": {
		"font-size": DesignToken,
		"line-height": DesignToken
		},
		"5xl": {
		"font-size": DesignToken,
		"line-height": DesignToken
		},
		"4xl": {
		"font-size": DesignToken,
		"line-height": DesignToken
		},
		"3xl": {
		"font-size": DesignToken,
		"line-height": DesignToken
		},
		"2xl": {
		"font-size": DesignToken,
		"line-height": DesignToken
		},
		"xl": {
		"font-size": DesignToken,
		"line-height": DesignToken
		},
		"lg": {
		"font-size": DesignToken,
		"line-height": DesignToken
		},
		"md": {
		"font-size": DesignToken,
		"line-height": DesignToken
		},
		"sm": {
		"font-size": DesignToken,
		"line-height": DesignToken
		}
		},
		"weight-scale": {
		"bold": {
		"font-weight": DesignToken
		},
		"normal": {
		"font-weight": DesignToken
		}
		}
		},
		"space": {
		"scale": {
		"0": DesignToken,
		"100": DesignToken
		"1": DesignToken,
		"2": DesignToken,
		"3": DesignToken,
		"4": DesignToken,
		"5": DesignToken,
		"6": DesignToken,
		"7": DesignToken
		}
		},
		"button": {
		"line-height": DesignToken
		},
		"form-fieldset": {
		"legend": {
		"border-block-end-color": DesignToken,
		"border-block-end-width": DesignToken,
		"padding-block-end": DesignToken
		}
		},
		"paragraph": {
		"small": {
		"font-size": DesignToken,
		"line-height": DesignToken
		}
		},
		"textbox": {
		"hover": {
		"border-color": DesignToken,
		"border-width": DesignToken
		}
		}
		},
		"utrecht": {
		"action": {
		"busy": {
		"cursor": DesignToken
		},
		"disabled": {
		"cursor": DesignToken
		},
		"submit": {
		"cursor": DesignToken
		}
		},
		"focus": {
		"outline-offset": DesignToken
		"background-color": {},
		"border-color": {},
		"color": {},
		"outline-color": DesignToken,
		"outline-offset": DesignToken,
		"outline-style": DesignToken,
		"outline-width": DesignToken
		},
		"space": {
		"block": {
		"3xs": DesignToken,
		"2xs": DesignToken,
		"xs": DesignToken,
		"sm": DesignToken,
		"md": DesignToken,
		"lg": DesignToken,
		"xl": DesignToken,
		"2xl": DesignToken,
		"3xl": DesignToken,
		"4xl": DesignToken,
		"5xl": DesignToken
		},
		"inline": {
		"3xs": DesignToken,
		"2xs": DesignToken,
		"xs": DesignToken,
		"sm": DesignToken,
		"md": DesignToken,
		"lg": DesignToken,
		"xl": DesignToken,
		"2xl": DesignToken,
		"3xl": DesignToken
		},
		"row": {
		"3xs": DesignToken,
		"2xs": DesignToken,
		"xs": DesignToken,
		"sm": DesignToken,
		"md": DesignToken,
		"lg": DesignToken,
		"xl": DesignToken,
		"2xl": DesignToken,
		"3xl": DesignToken,
		"4xl": DesignToken,
		"5xl": DesignToken
		},
		"column": {
		"3xs": DesignToken,
		"2xs": DesignToken,
		"xs": DesignToken,
		"sm": DesignToken,
		"md": DesignToken,
		"lg": DesignToken,
		"xl": DesignToken,
		"2xl": DesignToken,
		"3xl": DesignToken,
		"4xl": DesignToken,
		"5xl": DesignToken
		}
		},
		"badge-counter": {
		"border-radius": DesignToken,
		"color": {},
		"font-size": {},
		"font-weight": DesignToken,
		"padding-block-end": DesignToken,
		"padding-inline-start": DesignToken
		},
		"badge-status": {
		"letter-spacing": {},
		"text-transform": {}
		},
		"badge": {
		"background-color": DesignToken,
		"border-radius": DesignToken,
		"color": DesignToken,
		"font-size": DesignToken,
		"font-weight": DesignToken,
		"line-height": {},
		"padding-block": DesignToken,
		"padding-inline": DesignToken,
		"text-transform": {}
		},
		"button": {
		"background-color": DesignToken,
		"border-color": {},
		"border-radius": {},
		"border-width": DesignToken,
		"color": DesignToken,
		"font-family": DesignToken,
		"font-size": DesignToken,
		"font-weight": DesignToken,
		"inline-size": {},
		"letter-spacing": {},
		"line-height": {},
		"min-block-size": {},
		"min-inline-size": {},
		"padding-block-end": DesignToken,
		"padding-block-start": DesignToken,
		"padding-inline-end": DesignToken,
		"padding-inline-start": DesignToken,
		"text-transform": {},
		"active": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"icon": {
		"gap": {},
		"size": {}
		},
		"hover": {
		"background-color": DesignToken,
		"border-color": {},
		"color": {},
		"scale": {}
		},
		"focus": {
		"background-color": {},
		"border-color": DesignToken,
		"color": {},
		"scale": {}
		},
		"disabled": {
		"background-color": DesignToken,
		"border-color": {},
		"color": DesignToken
		},
		"primary-action": {
		"background-color": DesignToken,
		"color": DesignToken,
		"hover": {
		"background-color": DesignToken
		}
		},
		"secondary-action": {
		"background-color": DesignToken,
		"color": DesignToken,
		"border-color": {},
		"border-width": {},
		"active": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"disabled": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"hover": {
		"background-color": DesignToken,
		"border-color": DesignToken,
		"color": {}
		},
		"focus": {
		"background-color": {},
		"border-color": {},
		"color": {}
		}
		},
		"subtle": {
		"background-color": DesignToken,
		"border-color": {},
		"border-width": {},
		"color": DesignToken,
		"font-weight": {},
		"active": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"disabled": {
		"background-color": DesignToken,
		"border-color": {},
		"color": DesignToken
		},
		"hover": {
		"background-color": {},
		"border-color": {},
		"color": DesignToken
		},
		"focus": {
		"background-color": {},
		"border-color": {},
		"color": {}
		}
		}
		},
		"code-block": {
		"background-color": DesignToken,
		"color": DesignToken,
		"font-family": {},
		"font-size": DesignToken,
		"line-height": {},
		"margin-block-end": DesignToken,
		"margin-block-start": DesignToken,
		"margin-inline-end": {},
		"margin-inline-start": {},
		"padding-block-end": DesignToken,
		"padding-block-start": DesignToken,
		"padding-inline-end": {},
		"padding-inline-start": DesignToken
		},
		"document": {
		"background-color": DesignToken,
		"color": DesignToken,
		"font-family": DesignToken,
		"font-size": DesignToken,
		"line-height": {}
		},
		"figure": {
		"margin-block-end": {},
		"margin-block-start": {},
		"caption": {
		"color": DesignToken,
		"font-size": DesignToken,
		"line-height": DesignToken
		}
		},
		"form-control": {
		"background-color": DesignToken,
		"block-size": DesignToken,
		"border-color": DesignToken,
		"border-radius": DesignToken,
		"border-width": DesignToken,
		"color": DesignToken,
		"font-family": DesignToken,
		"font-size": DesignToken,
		"line-height": DesignToken,
		"min-block-size": {},
		"padding-block-end": DesignToken,
		"padding-block-start": DesignToken,
		"padding-inline-end": DesignToken,
		"padding-inline-start": DesignToken,
		"max-inline-size": DesignToken,
		"placeholder": {
		"color": DesignToken
		},
		"focus": {
		"border-color": {}
		},
		"disabled": {
		"background-color": DesignToken,
		"color": DesignToken
		}
		},
		"form-field-description": {
		"color": {},
		"font-family": {},
		"font-size": DesignToken,
		"font-style": {},
		"margin-block-start": {},
		"margin-block-end": {},
		"valid": {
		"color": DesignToken
		},
		"invalid": {
		"color": DesignToken
		}
		},
		"form-field-error-message": {
		"color": DesignToken,
		"font-family": {},
		"font-size": {},
		"font-weight": {},
		"margin-block-start": {},
		"margin-block-end": {}
		},
		"form-field": {
		"margin-block-start": {},
		"margin-block-end": {},
		"invalid": {
		"border-inline-start-color": DesignToken,
		"border-inline-start-width": DesignToken,
		"padding-inline-start": DesignToken
		},
		"label": {
		"margin-block-end": {}
		},
		"description": {
		"margin-block-start": {},
		"margin-block-end": {}
		}
		},
		"form-fieldset": {
		"margin-block-start": DesignToken,
		"margin-block-end": {},
		"invalid": {
		"border-inline-start-color": {
		"color": {}
		},
		"border-inline-start-width": {},
		"padding-inline-start": {}
		},
		"section": {
		"background-color": {},
		"color": {}
		},
		"legend": {
		"color": DesignToken,
		"font-family": {},
		"font-size": DesignToken,
		"font-weight": DesignToken,
		"line-height": DesignToken,
		"margin-block-end": {},
		"margin-block-start": {},
		"text-transform": {},
		"disabled": {
		"color": {}
		}
		}
		},
		"form-label": {
		"color": DesignToken,
		"font-size": DesignToken,
		"font-weight": DesignToken,
		"checkbox": {
		"color": {},
		"font-weight": DesignToken
		},
		"checked": {
		"font-weight": {}
		},
		"disabled": {
		"color": {}
		},
		"radio": {
		"color": {},
		"font-weight": DesignToken
		}
		},
		"form-select": {
		"background-color": DesignToken,
		"border-color": {},
		"border-width": DesignToken,
		"color": DesignToken,
		"font-size": {},
		"max-inline-size": DesignToken,
		"padding-block-end": {},
		"padding-block-start": {},
		"padding-inline-end": {},
		"padding-inline-start": {}
		},
		"heading-1": {
		"color": {},
		"font-family": {},
		"font-size": DesignToken,
		"font-weight": {},
		"line-height": DesignToken,
		"margin-block-end": {},
		"margin-block-start": {}
		},
		"heading-2": {
		"color": {},
		"font-family": {},
		"font-size": DesignToken,
		"font-weight": {},
		"line-height": DesignToken,
		"margin-block-end": {},
		"margin-block-start": {}
		},
		"heading-3": {
		"color": {},
		"font-family": {},
		"font-size": DesignToken,
		"font-weight": {},
		"line-height": DesignToken,
		"margin-block-end": {},
		"margin-block-start": {}
		},
		"heading": {
		"color": {},
		"font-family": {},
		"font-weight": DesignToken
		},
		"icon": {
		"color": {},
		"size": {},
		"inset-block-start": DesignToken,
		"baseline": {
		"inset-block-start": {}
		}
		},
		"link": {
		"color": DesignToken,
		"text-decoration": DesignToken,
		"text-decoration-color": {},
		"text-decoration-thickness": {},
		"text-underline-offset": {},
		"active": {
		"color": DesignToken
		},
		"focus": {
		"color": DesignToken,
		"text-decoration": {},
		"text-decoration-thickness": {}
		},
		"hover": {
		"color": DesignToken,
		"text-decoration": {},
		"text-decoration-thickness": {}
		},
		"placeholder": {
		"color": {}
		},
		"visited": {
		"color": {}
		},
		"icon": {
		"size": {}
		}
		},
		"page-footer": {
		"color": DesignToken,
		"background-color": DesignToken,
		"background-image": {},
		"padding-inline-end": DesignToken,
		"padding-inline-start": DesignToken,
		"padding-block-end": DesignToken,
		"padding-block-start": DesignToken
		},
		"paragraph": {
		"color": {},
		"font-family": DesignToken,
		"font-size": DesignToken,
		"font-weight": DesignToken,
		"line-height": DesignToken,
		"margin-block-start": {},
		"margin-block-end": {},
		"lead": {
		"font-size": DesignToken,
		"font-weight": DesignToken,
		"line-height": DesignToken
		},
		"small": {
		"color": {},
		"font-size": DesignToken,
		"font-weight": {},
		"line-height": DesignToken
		}
		},
		"table": {
		"margin-block-end": {},
		"margin-block-start": {},
		"caption": {
		"font-weight": {},
		"font-family": {},
		"font-size": {},
		"color": {},
		"line-height": {},
		"text-align": {},
		"margin-block-end": {}
		},
		"header": {
		"font-weight": DesignToken,
		"background-color": {},
		"color": {},
		"text-transform": {},
		"border-block-end-color": DesignToken,
		"border-block-end-width": {}
		},
		"heading": {
		"font-weight": {},
		"color": {},
		"text-transform": {}
		},
		"cell": {
		"line-height": {},
		"padding-block-end": DesignToken,
		"padding-block-start": DesignToken,
		"padding-inline-end": DesignToken,
		"padding-inline-start": DesignToken,
		"border-color": {}
		},
		"row": {
		"border-block-end-color": DesignToken,
		"border-block-end-width": DesignToken,
		"padding-inline-end": {},
		"padding-inline-start": {},
		"alternate-odd": {
		"background-color": {},
		"color": {}
		},
		"alternate-even": {
		"background-color": {},
		"color": {}
		}
		}
		},
		"textarea": {
		"border-bottom-width": {},
		"border-color": {},
		"border-radius": {},
		"border-width": {},
		"background-color": {},
		"color": {},
		"font-family": {},
		"font-size": {},
		"line-height": {},
		"min-inline-size": {},
		"max-inline-size": {},
		"min-block-size": DesignToken,
		"padding-block-end": DesignToken,
		"padding-block-start": DesignToken,
		"padding-inline-end": {},
		"padding-inline-start": {},
		"placeholder": {
		"color": DesignToken
		}
		},
		"textbox": {
		"background-color": {},
		"border-bottom-width": {},
		"border-color": DesignToken,
		"border-radius": {},
		"border-width": DesignToken,
		"color": DesignToken,
		"font-family": DesignToken,
		"font-size": DesignToken,
		"min-inline-size": {},
		"max-inline-size": {},
		"line-height": DesignToken,
		"padding-block-end": DesignToken,
		"padding-block-start": DesignToken,
		"padding-inline-end": DesignToken,
		"padding-inline-start": DesignToken,
		"placeholder": {
		"color": DesignToken
		},
		"disabled": {
		"background-color": DesignToken,
		"border-color": {},
		"color": {}
		},
		"focus": {
		"background-color": {},
		"border-color": {},
		"color": {}
		},
		"invalid": {
		"background-color": {},
		"border-color": {},
		"border-bottom-width": DesignToken,
		"border-bottom-color": DesignToken,
		"border-width": {},
		"color": {}
		},
		"read-only": {
		"background-color": {},
		"border-color": {},
		"color": {}
		}
		}
		},
		"example": {
		"button": {
		"background-color": DesignToken,
		"color": DesignToken
		@@ -42,0 +802,0 @@ }

11

package.json

		{
		"version": "1.0.0-alpha.2",
		"version": "1.0.0-alpha.3",
		"author": "Community for NL Design System",
		@@ -21,3 +21,4 @@ "description": "Example design tokens",
		"prebuild": "npm run clean",
		"build": "npm-run-all build:**",
		"build": "npm-run-all --sequential build:style-dictionary build:scss",
		"build:scss": "rollup -c rollup.config.mjs",
		"build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.json",
		@@ -30,6 +31,10 @@ "watch": "npm-run-all watch:**",
		"npm-run-all": "4.1.5",
		"postcss-discard-duplicates": "6.0.0",
		"rimraf": "5.0.5",
		"rollup": "4.6.1",
		"rollup-plugin-import-css": "3.3.5",
		"rollup-plugin-postcss": "4.0.2",
		"style-dictionary": "3.9.0"
		},
		"gitHead": "11f6bd61e82cd80b3c2c203392a8391f940990b9"
		"gitHead": "85f2c67096351c40027122528293b7481f707a48"
		}

40

style-dictionary.config.json

		{
		"source": ["./src//tokens.json", "./src//*.tokens.json"],
		"source": [
		"../../components/**/tokens.json",
		"../../components/*/.tokens.json",
		"./src/brand/tokens.json",
		"./src/brand/*/.tokens.json",
		"./src/common/tokens.json",
		"./src/common/*/.tokens.json",
		"./src/component/tokens.json",
		"./src/component/*/.tokens.json"
		],
		"platforms": {
		@@ -9,3 +18,7 @@ "js": {
		{
		"destination": "index.js",
		"destination": "index.cjs",
		"format": "javascript/module-flat"
		},
		{
		"destination": "index.mjs",
		"format": "javascript/es6"
		@@ -15,3 +28,3 @@ },
		"format": "javascript/module",
		"destination": "tokens.js"
		"destination": "tokens.cjs"
		}
		@@ -29,3 +42,3 @@ ]
		{
		"destination": "index.json",
		"destination": "index.flat.json",
		"format": "json/flat"
		@@ -43,2 +56,3 @@ }
		"options": {
		"selector": ":root, ::backdrop",
		"outputReferences": true
		@@ -54,6 +68,6 @@ }
		{
		"destination": "index.css",
		"destination": "theme.css",
		"format": "css/variables",
		"options": {
		"selector": ".rods-theme",
		"selector": ".rods-theme, .rods-theme ::backdrop",
		"outputReferences": true
		@@ -77,2 +91,16 @@ }
		},
		"scss-theme-mixin": {
		"transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
		"buildPath": "dist/",
		"files": [
		{
		"destination": "_mixin-theme.scss",
		"format": "css/variables",
		"options": {
		"selector": "@mixin rods-theme",
		"outputReferences": true
		}
		}
		]
		},
		"typescript": {
		@@ -79,0 +107,0 @@ "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],

dist/index.json

dist/tokens.js

src/brand/example/color.tokens.json

src/common/example/focus.tokens.json

src/components/example/button.tokens.json

dist/_variables.scss

Sorry, the diff of this file is not supported yet

dist/index.css

Sorry, the diff of this file is not supported yet

dist/root.css

Sorry, the diff of this file is not supported yet

dist/variables.less

Sorry, the diff of this file is not supported yet

New alerts

Improved metrics

Worsened metrics