diff --git a/.changeset/ton-arise-heir.md b/.changeset/ton-arise-heir.md new file mode 100644 index 00000000000..5bed5561d28 --- /dev/null +++ b/.changeset/ton-arise-heir.md @@ -0,0 +1,9 @@ +--- +"@utrecht/textbox-css": major +--- + +- Added metadata for textbox tokens. +- Added token and CSS variable for min-block-size. +- Renamed CSS variable in mixin `--utrecht-textbox-border-bottom-width` to `--utrecht-textbox-border-block-end-width`. +- Renamed CSS variable in mixin `--utrecht-textbox-invalid-border-bottom-width` to `--utrecht-textbox-invalid-border-block-end-width`. +- Added token and metadata for `utrecht.textbox.invalid.border-block-end-width`. diff --git a/components/textbox/src/_mixin.scss b/components/textbox/src/_mixin.scss index 398126f174d..6941de57839 100644 --- a/components/textbox/src/_mixin.scss +++ b/components/textbox/src/_mixin.scss @@ -20,11 +20,11 @@ $utrecht-support-prince-xml: false !default; /* Because this element uses `border-box` box-sizing, we need to manually add up the * border width, padding width and the content width. - * + * * Browsers and browser addons can add buttons inside the content box, for example * for autocomplete. To avoid overlap between the UI and the text, we reserve * some additional pixels to make space. We use 44px in accordance with the WCAG target size. - * + * * When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`). */ --_utrecht-textbox-max-inline-size: calc( @@ -39,7 +39,7 @@ $utrecht-support-prince-xml: false !default; block-size: initial; /* harden */ border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)); border-block-end-width: var( - --utrecht-textbox-border-bottom-width, + --utrecht-textbox-border-block-end-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)) ); border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)); @@ -52,7 +52,7 @@ $utrecht-support-prince-xml: false !default; font-weight: initial; /* harden */ inline-size: 100%; line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial)); - min-block-size: var(--utrecht-pointer-target-min-size, 44px); + min-block-size: var(--utrecht-textbox-min-block-size, var(--utrecht-pointer-target-min-size, 44px)); min-inline-size: var(--utrecht-pointer-target-min-size, 44px); max-inline-size: min( var(--_utrecht-textbox-max-inline-size, 100%), @@ -100,12 +100,12 @@ $utrecht-support-prince-xml: false !default; ); border-width: var(--_utrecht-textbox-border-width); border-block-end-width: var( - --utrecht-textbox-invalid-border-bottom-width, + --utrecht-textbox-invalid-border-block-end-width, var( - --utrecht-form-control-invalid-border-bottom-width, + --utrecht-form-control-invalid-border-block-end-width, var( - --utrecht-textbox-border-bottom-width, - var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)) + --utrecht-textbox-border-block-end-width, + var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textbox-border-width)) ) ) ); diff --git a/components/textbox/src/tokens.json b/components/textbox/src/tokens.json index 5fe2a48daf1..b926cdc9fec 100644 --- a/components/textbox/src/tokens.json +++ b/components/textbox/src/tokens.json @@ -7,7 +7,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.background-color"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.background-color"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -17,7 +18,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.border-block-end-width"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.border-block-end-width"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "borderWidth" }, @@ -37,7 +39,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.border-color"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.border-color"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -47,7 +50,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.border-radius"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.border-radius"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "borderRadius" }, @@ -57,7 +61,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.border-width"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.border-width"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "borderWidth" }, @@ -67,7 +72,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.color"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.color"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -77,7 +83,8 @@ "syntax": "*", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.font-family"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.font-family"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "fontFamilies" }, @@ -87,7 +94,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.font-size"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.font-size"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "fontSizes" }, @@ -97,7 +105,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.line-height"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.line-height"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "lineHeights" }, @@ -107,7 +116,19 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.max-inline-size"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.max-inline-size"], + "nl.nldesignsystem.figma.supports-token": true + }, + "type": "sizing" + }, + "min-block-size": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.fallback": ["utrecht.pointer-target.min-size"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "sizing" }, @@ -117,7 +138,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.padding-block-end"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.padding-block-end"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "spacing" }, @@ -127,7 +149,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.padding-block-start"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.padding-block-start"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "spacing" }, @@ -137,7 +160,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.padding-inline-end"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.padding-inline-end"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "spacing" }, @@ -147,7 +171,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.padding-inline-start"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.padding-inline-start"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "spacing" }, @@ -158,7 +183,8 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.fallback": ["utrecht.form-control.placeholder.color"] + "nl.nldesignsystem.fallback": ["utrecht.form-control.placeholder.color"], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" } @@ -174,7 +200,8 @@ "utrecht.form-control.disabled.background-color", "utrecht.textbox.background-color", "utrecht.form-control.background-color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -188,7 +215,8 @@ "utrecht.form-control.disabled.border-color", "utrecht.textbox.border-color", "utrecht.form-control.border-color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -202,7 +230,8 @@ "utrecht.form-control.disabled.color", "utrecht.textbox.color", "utrecht.form-control.color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" } @@ -218,7 +247,8 @@ "utrecht.form-control.focus.background-color", "utrecht.textbox.background-color", "utrecht.form-control.background-color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -232,7 +262,8 @@ "utrecht.form-control.focus.border-color", "utrecht.textbox.border-color", "utrecht.form-control.border-color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -246,7 +277,8 @@ "utrecht.form-control.focus.color", "utrecht.textbox.color", "utrecht.form-control.color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" } @@ -262,10 +294,22 @@ "utrecht.form-control.invalid.background-color", "utrecht.textbox.background-color", "utrecht.form-control.background-color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, + "border-block-end-width": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.fallback": ["utrecht.form-control.border-block-end-width"], + "nl.nldesignsystem.figma.supports-token": true + }, + "type": "borderWidth" + }, "border-color": { "$extensions": { "nl.nldesignsystem.css.property": { @@ -276,7 +320,8 @@ "utrecht.form-control.invalid.border-color", "utrecht.textbox.border-color", "utrecht.form-control.border-color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -290,7 +335,8 @@ "utrecht.form-control.invalid.border-width", "utrecht.textbox.border-width", "utrecht.form-control.border-width" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "borderWidth" }, @@ -304,7 +350,8 @@ "utrecht.form-control.invalid.color", "utrecht.textbox.color", "utrecht.form-control.color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" } @@ -320,7 +367,8 @@ "utrecht.form-control.read-only.background-color", "utrecht.textbox.background-color", "utrecht.form-control.background-color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -334,7 +382,8 @@ "utrecht.form-control.read-only.border-color", "utrecht.textbox.border-color", "utrecht.form-control.border-color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }, @@ -348,7 +397,8 @@ "utrecht.form-control.read-only.color", "utrecht.textbox.color", "utrecht.form-control.color" - ] + ], + "nl.nldesignsystem.figma.supports-token": true }, "type": "color" }