Can we hide/remove the 'value' (CSS variable) sub text from each design token

Technical Questions
1

font_size_design_tokens
font_size_design_tokens739×1145 54.6 KB

Can we hide/remove the ‘value’ (CSS variable) sub text/heading from each design token(like Extra Large, Large), like
var(–fontSizeXL) , var(–fontSizeL) etc shown in attached image.

2

Hey @soumya , welcome to the Builder forum. Could you please share the code of your design token with me to look into this further?

3

Builder.register(“editor.settings”, {
// styleStrictMode: true, // optional
// designTokensOptional: true,
allowOverridingTokens: true,
designTokens: {
colors: [
{ name: “Primary”, value: "var(–color-primaryText, " + themeJSON[‘color’][‘primaryText’] + ") " },
{ name: “Secondary”, value: "var(–color-secondaryText, " + themeJSON[‘color’][‘secondaryText’] + ") "},
{ name: “Tertiary”, value: "var(–color-white, " + themeJSON[‘color’][‘white’] + ") " },
{ name: “Text Light 1”, value: “var(–textLight1, #ffffff)” },
{ name: “Text Light 2”, value: “var(–textLight2, #e0e0e0)” },
{ name: “Text Dark 1”, value: “var(–textLight1, #000000)” },
{ name: “Text Dark 2”, value: “var(–textLight2, #171717)” },
{ name: “Transparent”, value: “var(–reansparent, #00000000)” },
],
spacing: [
{ name: “Very Large”, value: “var(–space-very-large, 54px)” },
{ name: “Large”, value: “var(–space-large, 46px)” },
{ name: “Medium”, value: “var(–space-medium, 23px)” },
{ name: “Small”, value: “var(–space-small, 8px)” },
{ name: “Very Small”, value: “var(–space-very-small, 4px)” },
],
fontSize: [
{ name: “Extra Large”, value: “var(–fontSizeXL)” },
{ name: “Large”, value: “var(–fontSizeL)” },
{ name: “Medium”, value: “var(–fontSizeM)” },
{ name: “Small”, value: “var(–fontSizeS)” },
{ name: “Very Small”, value: “var(–fontSizeXS)” }
],
lineHeight: [
{ name: “Extra Large”, value: “var(–size-extra-large, 43px)” },
{ name: “Very Large”, value: “var(–size-very-large, 35px)” },
{ name: “Large”, value: “var(–size-large,31px)” },
{ name: “Medium”, value: “var(–size-medium, 27px)” },
{ name: “Small”, value: “var(–size-small, 23px)” },
{ name: “Very Small”, value: “var(–size-very-small, 18px)” },
],
fontWeight: [
{ name: “Boldest”, value: “var(–weight-boldest, 900)” },
{ name: “Semibold”, value: “var(–weight-semibold, 700)” },
{ name: “Bold”, value: “var(–weight-bold,600)” },
{ name: “Normal”, value: “var(–weight-normal, 500)” },
{ name: “Light”, value: “var(–weight-light, 400)” },
{ name: “Lighter”, value: “var(–weight-lighter, 300)” },
],
borderRadius: [
{ name: ‘Small’, value: ‘var(–borderRadiusXS)’ },
{ name: ‘Medium’, value: ‘var(–borderRadiusM)’ },
{ name: ‘Large’, value: ‘var(–borderRadiusXL)’ },
],
boxShadow: [
{ name: ‘Small’, value: ‘0 0 6px black’ },
{ name: ‘Medium’, value: ‘0 0 var(–shadow-medium, 10px) var(–black-medium, black)’ },
{ name: ‘Large’, value: ‘0 0 20px rgba(0, 0, 0, 0.5)’ },
{ name: ‘None’, value: ‘none’ }
],
fontFamily: [
{ name: “Serif Font”, value: “var(–serif-font, Times, serif)” },
],
},
});

4

I have shared the JS code, can you please tell whether it’s possible to hide “var(–fontSizeXL)” sub-text/sub-heading from each list item as visible.

5

Hey @soumya I am working on this and will update you soon.

6

Hey @soumya, as of now, you cannot hide the values of the design tokens. You can post this as a feature request on Builder.io Ideas.