Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@open-formulieren/design-tokens
Advanced tools
@open-formulieren/design-tokens - npm Package Compare versions
Comparing version 0.1.1 to 0.2.0
| /** | ||
| * Do not edit directly | ||
| * Generated on Mon, 30 May 2022 14:02:58 GMT | ||
| * Generated on Mon, 30 May 2022 15:28:35 GMT | ||
| */ | ||
@@ -14,18 +14,36 @@ | ||
| export const ofColorFg = "#000000"; | ||
| export const ofColorFgMuted = "#767676"; | ||
| export const ofColorBorder = "#767676"; | ||
| export const ofColorLink = "#01689B"; | ||
| export const ofLayoutColorBg = "#E6E6E6"; | ||
| export const ofLayoutBg = "#E6E6E6"; | ||
| export const ofHeadingFg = "#000000"; | ||
| export const ofLinkColor = "#01689B"; | ||
| export const ofButtonHoverBg = "#cccccc"; | ||
| export const ofButtonHoverColorBorder = "#5e5e5e"; | ||
| export const ofButtonActiveFg = "#000000"; | ||
| export const ofButtonActiveBg = "#bfbfbf"; | ||
| export const ofButtonActiveColorBorder = "#5e5e5e"; | ||
| export const ofButtonAnchorHoverBg = "transparent"; | ||
| export const ofButtonAnchorHoverColorBorder = "transparent"; | ||
| export const ofButtonAnchorActiveFg = "#014e74"; | ||
| export const ofButtonAnchorActiveBg = "transparent"; | ||
| export const ofButtonAnchorActiveColorBorder = "transparent"; | ||
| export const ofButtonAnchorFg = "#01689B"; | ||
| export const ofButtonAnchorBg = "transparent"; | ||
| export const ofButtonAnchorColorBorder = "transparent"; | ||
| export const ofButtonAnchorFg = "#01689B"; | ||
| export const ofButtonPrimaryHoverBg = "#016698"; | ||
| export const ofButtonPrimaryHoverColorBorder = "#01537c"; | ||
| export const ofButtonPrimaryActiveFg = "#bfbfbf"; | ||
| export const ofButtonPrimaryActiveBg = "#01608f"; | ||
| export const ofButtonPrimaryActiveColorBorder = "#01537c"; | ||
| export const ofButtonPrimaryFg = "#ffffff"; | ||
| export const ofButtonPrimaryBg = "#0180be"; | ||
| export const ofButtonPrimaryColorBorder = "#01689B"; | ||
| export const ofButtonFg = "#000000"; | ||
| export const ofButtonBg = "#ffffff"; | ||
| export const ofButtonColorBorder = "#767676"; | ||
| export const ofButtonFg = "#000000"; | ||
| export const ofButtonPrimaryBg = "#0180be"; | ||
| export const ofButtonPrimaryColorBorder = "#01689B"; | ||
| export const ofButtonPrimaryFg = "#ffffff"; | ||
| export const ofCheckboxColorBg = "#F3F3F3"; | ||
| export const ofCosignColorBg = "#F3F3F3"; | ||
| export const ofHelptextColorBg = "#d3e3ec"; | ||
| export const ofHelptextColorFg = "#000000"; | ||
| export const ofCheckboxBg = "#F3F3F3"; | ||
| export const ofCosignBg = "#F3F3F3"; | ||
| export const ofFieldBorderColor = "#979797"; | ||
| export const ofHelptextBg = "#d3e3ec"; | ||
| export const ofHelptextFg = "#000000"; | ||
| export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgba(0, 0, 0, 0.2)"; |
| /** | ||
| * Do not edit directly | ||
| * Generated on Mon, 30 May 2022 14:02:58 GMT | ||
| * Generated on Mon, 30 May 2022 15:28:35 GMT | ||
| */ | ||
@@ -146,24 +146,4 @@ | ||
| "isSource": true, | ||
| "heading": { | ||
| "value": "#000000", | ||
| "filePath": "./src/common/typography-color-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "muted": { | ||
| "value": "#767676", | ||
| "filePath": "./src/common/typography-color-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "original": { | ||
| "value": "#000000", | ||
| "heading": { | ||
| "value": "{of.color.fg}", | ||
| "filePath": "./src/common/typography-color-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "muted": { | ||
| "value": "#767676", | ||
| "filePath": "./src/common/typography-color-modifiers.tokens.json", | ||
| "isSource": true | ||
| } | ||
| "value": "#000000" | ||
| }, | ||
@@ -182,2 +162,21 @@ "name": "ofColorFg", | ||
| }, | ||
| "fg-muted": { | ||
| "value": "#767676", | ||
| "filePath": "./src/common/color.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#767676" | ||
| }, | ||
| "name": "ofColorFgMuted", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "color", | ||
| "item": "fg-muted" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "color", | ||
| "fg-muted" | ||
| ] | ||
| }, | ||
| "border": { | ||
@@ -201,50 +200,81 @@ "value": "#767676", | ||
| ] | ||
| }, | ||
| "link": { | ||
| "value": "#01689B", | ||
| "filePath": "./src/common/color.tokens.json", | ||
| } | ||
| }, | ||
| "layout": { | ||
| "bg": { | ||
| "value": "#E6E6E6", | ||
| "filePath": "./src/common/layout.tokens.json", | ||
| "isSource": true, | ||
| "hover": { | ||
| "value": "#01689B", | ||
| "filePath": "./src/common/typography-color-modifiers.tokens.json", | ||
| "isSource": true | ||
| "original": { | ||
| "value": "#E6E6E6" | ||
| }, | ||
| "name": "ofLayoutBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "layout", | ||
| "item": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "layout", | ||
| "bg" | ||
| ] | ||
| } | ||
| }, | ||
| "heading": { | ||
| "fg": { | ||
| "value": "#000000", | ||
| "filePath": "./src/common/typography.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "{of.color.primary}", | ||
| "hover": { | ||
| "value": "{of.color.link}", | ||
| "filePath": "./src/common/typography-color-modifiers.tokens.json", | ||
| "isSource": true | ||
| } | ||
| "value": "{of.color.fg}" | ||
| }, | ||
| "name": "ofColorLink", | ||
| "name": "ofHeadingFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "color", | ||
| "item": "link" | ||
| "type": "heading", | ||
| "item": "fg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "color", | ||
| "link" | ||
| "heading", | ||
| "fg" | ||
| ] | ||
| }, | ||
| "field": { | ||
| "border": "#979797" | ||
| } | ||
| }, | ||
| "layout": { | ||
| "link": { | ||
| "color": { | ||
| "value": "#01689B", | ||
| "filePath": "./src/common/typography.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "{of.color.primary}" | ||
| }, | ||
| "name": "ofLinkColor", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "link", | ||
| "item": "color" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "link", | ||
| "color" | ||
| ] | ||
| } | ||
| }, | ||
| "button": { | ||
| "hover": { | ||
| "bg": { | ||
| "value": "#E6E6E6", | ||
| "filePath": "./src/common/layout.tokens.json", | ||
| "value": "#cccccc", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#E6E6E6" | ||
| "value": "#cccccc" | ||
| }, | ||
| "name": "ofLayoutColorBg", | ||
| "name": "ofButtonHoverBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "layout", | ||
| "item": "color", | ||
| "type": "button", | ||
| "item": "hover", | ||
| "subitem": "bg" | ||
@@ -254,109 +284,473 @@ }, | ||
| "of", | ||
| "layout", | ||
| "color", | ||
| "button", | ||
| "hover", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "color-border": { | ||
| "value": "#5e5e5e", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#5e5e5e" | ||
| }, | ||
| "name": "ofButtonHoverColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "hover", | ||
| "subitem": "color-border" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "hover", | ||
| "color-border" | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| "button-anchor": { | ||
| "bg": { | ||
| }, | ||
| "active": { | ||
| "fg": { | ||
| "value": "#000000", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "{of.color.fg}" | ||
| }, | ||
| "name": "ofButtonActiveFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "active", | ||
| "subitem": "fg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "active", | ||
| "fg" | ||
| ] | ||
| }, | ||
| "bg": { | ||
| "value": "#bfbfbf", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#bfbfbf" | ||
| }, | ||
| "name": "ofButtonActiveBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "active", | ||
| "subitem": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "active", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "color-border": { | ||
| "value": "#5e5e5e", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#5e5e5e" | ||
| }, | ||
| "name": "ofButtonActiveColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "active", | ||
| "subitem": "color-border" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "active", | ||
| "color-border" | ||
| ] | ||
| } | ||
| }, | ||
| "anchor": { | ||
| "hover": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| "bg": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "transparent" | ||
| }, | ||
| "name": "ofButtonAnchorHoverBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "anchor", | ||
| "subitem": "hover", | ||
| "state": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "anchor", | ||
| "hover", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "color-border": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "transparent" | ||
| }, | ||
| "name": "ofButtonAnchorHoverColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "anchor", | ||
| "subitem": "hover", | ||
| "state": "color-border" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "anchor", | ||
| "hover", | ||
| "color-border" | ||
| ] | ||
| } | ||
| }, | ||
| "active": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "hover": { | ||
| "fg": { | ||
| "value": "#014e74", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#014e74" | ||
| }, | ||
| "name": "ofButtonAnchorActiveFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "anchor", | ||
| "subitem": "active", | ||
| "state": "fg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "anchor", | ||
| "active", | ||
| "fg" | ||
| ] | ||
| }, | ||
| "bg": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "transparent" | ||
| }, | ||
| "name": "ofButtonAnchorActiveBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "anchor", | ||
| "subitem": "active", | ||
| "state": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "anchor", | ||
| "active", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "active": { | ||
| "color-border": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "transparent" | ||
| }, | ||
| "name": "ofButtonAnchorActiveColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "anchor", | ||
| "subitem": "active", | ||
| "state": "color-border" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "anchor", | ||
| "active", | ||
| "color-border" | ||
| ] | ||
| } | ||
| }, | ||
| "fg": { | ||
| "value": "#01689B", | ||
| "filePath": "./src/components/buttons/button.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "{of.link.color}" | ||
| }, | ||
| "value": "transparent" | ||
| "name": "ofButtonAnchorFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "anchor", | ||
| "subitem": "fg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "anchor", | ||
| "fg" | ||
| ] | ||
| }, | ||
| "name": "ofButtonAnchorBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button-anchor", | ||
| "item": "bg" | ||
| "bg": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "transparent" | ||
| }, | ||
| "name": "ofButtonAnchorBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "anchor", | ||
| "subitem": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "anchor", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button-anchor", | ||
| "bg" | ||
| ] | ||
| "color-border": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "transparent" | ||
| }, | ||
| "name": "ofButtonAnchorColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "anchor", | ||
| "subitem": "color-border" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "anchor", | ||
| "color-border" | ||
| ] | ||
| } | ||
| }, | ||
| "color-border": { | ||
| "primary": { | ||
| "hover": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| "bg": { | ||
| "value": "#016698", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#016698" | ||
| }, | ||
| "name": "ofButtonPrimaryHoverBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "primary", | ||
| "subitem": "hover", | ||
| "state": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "primary", | ||
| "hover", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "color-border": { | ||
| "value": "#01537c", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#01537c" | ||
| }, | ||
| "name": "ofButtonPrimaryHoverColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "primary", | ||
| "subitem": "hover", | ||
| "state": "color-border" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "primary", | ||
| "hover", | ||
| "color-border" | ||
| ] | ||
| } | ||
| }, | ||
| "active": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| "fg": { | ||
| "value": "#bfbfbf", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#bfbfbf" | ||
| }, | ||
| "name": "ofButtonPrimaryActiveFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "primary", | ||
| "subitem": "active", | ||
| "state": "fg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "primary", | ||
| "active", | ||
| "fg" | ||
| ] | ||
| }, | ||
| "bg": { | ||
| "value": "#01608f", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#01608f" | ||
| }, | ||
| "name": "ofButtonPrimaryActiveBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "primary", | ||
| "subitem": "active", | ||
| "state": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "primary", | ||
| "active", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "color-border": { | ||
| "value": "#01537c", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#01537c" | ||
| }, | ||
| "name": "ofButtonPrimaryActiveColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "primary", | ||
| "subitem": "active", | ||
| "state": "color-border" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "primary", | ||
| "active", | ||
| "color-border" | ||
| ] | ||
| } | ||
| }, | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "hover": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| "fg": { | ||
| "value": "#ffffff", | ||
| "filePath": "./src/components/buttons/button.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#ffffff" | ||
| }, | ||
| "active": { | ||
| "value": "transparent", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| "name": "ofButtonPrimaryFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "primary", | ||
| "subitem": "fg" | ||
| }, | ||
| "value": "transparent" | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "primary", | ||
| "fg" | ||
| ] | ||
| }, | ||
| "name": "ofButtonAnchorColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button-anchor", | ||
| "item": "color-border" | ||
| "bg": { | ||
| "value": "#0180be", | ||
| "filePath": "./src/components/buttons/button.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#0180be" | ||
| }, | ||
| "name": "ofButtonPrimaryBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "primary", | ||
| "subitem": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "primary", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button-anchor", | ||
| "color-border" | ||
| ] | ||
| "color-border": { | ||
| "value": "#01689B", | ||
| "filePath": "./src/components/buttons/button.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "{of.color.primary}" | ||
| }, | ||
| "name": "ofButtonPrimaryColorBorder", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "primary", | ||
| "subitem": "color-border" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "primary", | ||
| "color-border" | ||
| ] | ||
| } | ||
| }, | ||
| "fg": { | ||
| "active": { | ||
| "value": "#014e74", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "#01689B", | ||
| "filePath": "./src/components/buttons/button-anchor.tokens.json", | ||
| "value": "#000000", | ||
| "filePath": "./src/components/buttons/button.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "active": { | ||
| "value": "#014e74", | ||
| "filePath": "./src/components/buttons/button-anchor-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "{of.color.link}" | ||
| "value": "{of.color.fg}" | ||
| }, | ||
| "name": "ofButtonAnchorFg", | ||
| "name": "ofButtonFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button-anchor", | ||
| "type": "button", | ||
| "item": "fg" | ||
@@ -366,19 +760,7 @@ }, | ||
| "of", | ||
| "button-anchor", | ||
| "button", | ||
| "fg" | ||
| ] | ||
| } | ||
| }, | ||
| "button": { | ||
| }, | ||
| "bg": { | ||
| "hover": { | ||
| "value": "#cccccc", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "active": { | ||
| "value": "#bfbfbf", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "#ffffff", | ||
@@ -388,12 +770,2 @@ "filePath": "./src/components/buttons/button.tokens.json", | ||
| "original": { | ||
| "hover": { | ||
| "value": "#cccccc", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "active": { | ||
| "value": "#bfbfbf", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "{of.color.bg}" | ||
@@ -414,12 +786,2 @@ }, | ||
| "color-border": { | ||
| "hover": { | ||
| "value": "#5e5e5e", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "active": { | ||
| "value": "#5e5e5e", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "#767676", | ||
@@ -429,12 +791,2 @@ "filePath": "./src/components/buttons/button.tokens.json", | ||
| "original": { | ||
| "hover": { | ||
| "value": "#5e5e5e", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "active": { | ||
| "value": "#5e5e5e", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "{of.color.border}" | ||
@@ -453,65 +805,37 @@ }, | ||
| ] | ||
| }, | ||
| "fg": { | ||
| "active": { | ||
| "value": "#000000", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "#000000", | ||
| "filePath": "./src/components/buttons/button.tokens.json", | ||
| } | ||
| }, | ||
| "checkbox": { | ||
| "bg": { | ||
| "value": "#F3F3F3", | ||
| "filePath": "./src/components/fields/checkbox.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "active": { | ||
| "value": "{of.color.fg}", | ||
| "filePath": "./src/components/buttons/button-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "{of.color.fg}" | ||
| "value": "#F3F3F3" | ||
| }, | ||
| "name": "ofButtonFg", | ||
| "name": "ofCheckboxBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button", | ||
| "item": "fg" | ||
| "type": "checkbox", | ||
| "item": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button", | ||
| "fg" | ||
| "checkbox", | ||
| "bg" | ||
| ] | ||
| } | ||
| }, | ||
| "button-primary": { | ||
| "cosign": { | ||
| "bg": { | ||
| "hover": { | ||
| "value": "#016698", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "active": { | ||
| "value": "#01608f", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "#0180be", | ||
| "filePath": "./src/components/buttons/button-primary.tokens.json", | ||
| "value": "#F3F3F3", | ||
| "filePath": "./src/components/fields/cosign.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "hover": { | ||
| "value": "#016698", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "active": { | ||
| "value": "#01608f", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "#0180be" | ||
| "value": "{of.checkbox.bg}" | ||
| }, | ||
| "name": "ofButtonPrimaryBg", | ||
| "name": "ofCosignBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button-primary", | ||
| "type": "cosign", | ||
| "item": "bg" | ||
@@ -521,66 +845,59 @@ }, | ||
| "of", | ||
| "button-primary", | ||
| "cosign", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "color-border": { | ||
| "hover": { | ||
| "value": "#01537c", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| } | ||
| }, | ||
| "field-border": { | ||
| "color": { | ||
| "value": "#979797", | ||
| "filePath": "./src/components/fields/field.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#979797" | ||
| }, | ||
| "active": { | ||
| "value": "#01537c", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| "name": "ofFieldBorderColor", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "field-border", | ||
| "item": "color" | ||
| }, | ||
| "value": "#01689B", | ||
| "filePath": "./src/components/buttons/button-primary.tokens.json", | ||
| "path": [ | ||
| "of", | ||
| "field-border", | ||
| "color" | ||
| ] | ||
| } | ||
| }, | ||
| "helptext": { | ||
| "bg": { | ||
| "value": "#d3e3ec", | ||
| "filePath": "./src/components/helptext.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "hover": { | ||
| "value": "#01537c", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "active": { | ||
| "value": "#01537c", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "{of.color.primary}" | ||
| "value": "#d3e3ec" | ||
| }, | ||
| "name": "ofButtonPrimaryColorBorder", | ||
| "name": "ofHelptextBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button-primary", | ||
| "item": "color-border" | ||
| "type": "helptext", | ||
| "item": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "button-primary", | ||
| "color-border" | ||
| "helptext", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "fg": { | ||
| "active": { | ||
| "value": "#bfbfbf", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "#ffffff", | ||
| "filePath": "./src/components/buttons/button-primary.tokens.json", | ||
| "value": "#000000", | ||
| "filePath": "./src/components/helptext.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "active": { | ||
| "value": "#bfbfbf", | ||
| "filePath": "./src/components/buttons/button-primary-modifiers.tokens.json", | ||
| "isSource": true | ||
| }, | ||
| "value": "#ffffff" | ||
| "value": "{of.color.fg}" | ||
| }, | ||
| "name": "ofButtonPrimaryFg", | ||
| "name": "ofHelptextFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "button-primary", | ||
| "type": "helptext", | ||
| "item": "fg" | ||
@@ -590,3 +907,3 @@ }, | ||
| "of", | ||
| "button-primary", | ||
| "helptext", | ||
| "fg" | ||
@@ -596,98 +913,2 @@ ] | ||
| }, | ||
| "checkbox": { | ||
| "color": { | ||
| "bg": { | ||
| "value": "#F3F3F3", | ||
| "filePath": "./src/components/fields/checkbox.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#F3F3F3" | ||
| }, | ||
| "name": "ofCheckboxColorBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "checkbox", | ||
| "item": "color", | ||
| "subitem": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "checkbox", | ||
| "color", | ||
| "bg" | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| "cosign": { | ||
| "color": { | ||
| "bg": { | ||
| "value": "#F3F3F3", | ||
| "filePath": "./src/components/fields/cosign.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "{of.checkbox.color.bg}" | ||
| }, | ||
| "name": "ofCosignColorBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "cosign", | ||
| "item": "color", | ||
| "subitem": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "cosign", | ||
| "color", | ||
| "bg" | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| "helptext": { | ||
| "color": { | ||
| "bg": { | ||
| "value": "#d3e3ec", | ||
| "filePath": "./src/components/helptext.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "#d3e3ec" | ||
| }, | ||
| "name": "ofHelptextColorBg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "helptext", | ||
| "item": "color", | ||
| "subitem": "bg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "helptext", | ||
| "color", | ||
| "bg" | ||
| ] | ||
| }, | ||
| "fg": { | ||
| "value": "#000000", | ||
| "filePath": "./src/components/helptext.tokens.json", | ||
| "isSource": true, | ||
| "original": { | ||
| "value": "{of.color.fg}" | ||
| }, | ||
| "name": "ofHelptextColorFg", | ||
| "attributes": { | ||
| "category": "of", | ||
| "type": "helptext", | ||
| "item": "color", | ||
| "subitem": "fg" | ||
| }, | ||
| "path": [ | ||
| "of", | ||
| "helptext", | ||
| "color", | ||
| "fg" | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| "progress-indicator": { | ||
@@ -694,0 +915,0 @@ "mobile": { |
| { | ||
| "name": "@open-formulieren/design-tokens", | ||
| "version": "0.1.1", | ||
| "version": "0.2.0", | ||
| "description": "Design tokens for Open Forms", | ||
@@ -5,0 +5,0 @@ "scripts": { |
@@ -44,1 +44,54 @@ # Design Tokens | ||
| to start the watcher which will re-build on changes. | ||
| ## Naming pattern | ||
| Because of the way style-dictionary works, you have to pay close attention to the | ||
| structure of the tokens. E.g. if you have two tokens definition files like: | ||
| ```json | ||
| { | ||
| "of": { | ||
| "color": { | ||
| "fg": {"value": "#000000"} | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| ```json | ||
| { | ||
| "of": { | ||
| "color": { | ||
| "fg": { | ||
| "muted": {"value": "#000000"} | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| Then only `--of-color-fg` will be emitted since the merged object sees a `value` key | ||
| at the `of.color.fg` path. | ||
| You can usually avoid this by sticking to a structure adhering to: | ||
| ``` | ||
| <prefix>.<component>.<modifier>.<UIState>.<CSSProperty> | ||
| ``` | ||
| Where `UIState` can be blank or a value like `hover`, `active`... | ||
| Alternatively, if the structure is not that important, you can put the tokens on the | ||
| same level, e.g.: | ||
| ```json | ||
| { | ||
| "of": { | ||
| "color": { | ||
| "fg-muted": {"value": "#000000"} | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| The latter form is harder to keep track off across files though. |
@@ -14,6 +14,6 @@ { | ||
| "fg": {"value": "#000000"}, | ||
| "border": {"value": "#767676"}, | ||
| "link": {"value": "{of.color.primary}"} | ||
| "fg-muted": {"value": "#767676"}, | ||
| "border": {"value": "#767676"} | ||
| } | ||
| } | ||
| } |
| { | ||
| "of": { | ||
| "layout": { | ||
| "color": { | ||
| "bg": {"value": "#E6E6E6"} | ||
| } | ||
| "bg": {"value": "#E6E6E6"} | ||
| } | ||
| } | ||
| } |
| { | ||
| "of": { | ||
| "button": { | ||
| "bg": { | ||
| "hover": {"value": "#cccccc"}, | ||
| "active": {"value": "#bfbfbf"} | ||
| "hover": { | ||
| "bg": {"value": "#cccccc"}, | ||
| "color-border": {"value": "#5e5e5e"} | ||
| }, | ||
| "color-border": { | ||
| "hover": {"value": "#5e5e5e"}, | ||
| "active": {"value": "#5e5e5e"} | ||
| "active": { | ||
| "fg": {"value": "{of.color.fg}"}, | ||
| "bg": {"value": "#bfbfbf"}, | ||
| "color-border": {"value": "#5e5e5e"} | ||
| }, | ||
| "fg": { | ||
| "active": {"value": "{of.color.fg}"} | ||
| "anchor": { | ||
| "hover": { | ||
| "bg": {"value": "transparent"}, | ||
| "color-border": {"value": "transparent"} | ||
| }, | ||
| "active": { | ||
| "fg": {"value": "#014e74"}, | ||
| "bg": {"value": "transparent"}, | ||
| "color-border": {"value": "transparent"} | ||
| } | ||
| }, | ||
| "primary": { | ||
| "hover": { | ||
| "bg": {"value": "#016698"}, | ||
| "color-border": {"value": "#01537c"} | ||
| }, | ||
| "active": { | ||
| "fg": {"value": "#bfbfbf"}, | ||
| "bg": {"value": "#01608f"}, | ||
| "color-border": {"value": "#01537c"} | ||
| } | ||
| } | ||
@@ -15,0 +37,0 @@ } |
@@ -6,5 +6,17 @@ { | ||
| "bg": {"value": "{of.color.bg}"}, | ||
| "color-border": {"value": "{of.color.border}"} | ||
| "color-border": {"value": "{of.color.border}"}, | ||
| "anchor": { | ||
| "fg": {"value": "{of.link.color}"}, | ||
| "bg": {"value": "transparent"}, | ||
| "color-border": {"value": "transparent"} | ||
| }, | ||
| "primary": { | ||
| "fg": {"value": "#ffffff"}, | ||
| "bg": {"value": "#0180be"}, | ||
| "color-border": {"value": "{of.color.primary}"} | ||
| } | ||
| } | ||
| } | ||
| } |
| { | ||
| "of": { | ||
| "checkbox": { | ||
| "color": { | ||
| "bg": {"value": "#F3F3F3"} | ||
| } | ||
| "bg": {"value": "#F3F3F3"} | ||
| } | ||
| } | ||
| } |
| { | ||
| "of": { | ||
| "cosign": { | ||
| "color": { | ||
| "bg": {"value": "{of.checkbox.color.bg}"} | ||
| } | ||
| "bg": {"value": "{of.checkbox.bg}"} | ||
| } | ||
| } | ||
| } |
| { | ||
| "of": { | ||
| "color": { | ||
| "field": { | ||
| "border": "#979797" | ||
| } | ||
| "field-border": { | ||
| "color": {"value": "#979797"} | ||
| } | ||
| } | ||
| } |
| { | ||
| "of": { | ||
| "helptext": { | ||
| "color": { | ||
| "bg": {"value": "#d3e3ec"}, | ||
| "fg": {"value": "{of.color.fg}"} | ||
| } | ||
| "bg": {"value": "#d3e3ec"}, | ||
| "fg": {"value": "{of.color.fg}"} | ||
| } | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by13.86%
66053
- Lines of code
- increased by25.08%
1197
- Number of lines in readme file
- increased by120.45%
97
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Number of package files
- decreased by-18.18%
18
No dependency changes