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

**URL:** https://forum.builder.io/t/can-we-hide-remove-the-value-css-variable-sub-text-from-each-design-token/6299
**Category:** Technical Questions
**Tags:** react
**Created:** [August 29, 2024, 8:05pm UTC](https://forum.builder.io/t/can-we-hide-remove-the-value-css-variable-sub-text-from-each-design-token/6299 "2024-08-29T20:05:37Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![soumya](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@soumya](https://forum.builder.io/u/soumya)
#### Post date: [August 29, 2024, 8:05pm UTC](https://forum.builder.io/t/can-we-hide-remove-the-value-css-variable-sub-text-from-each-design-token/6299/1 "2024-08-29T20:05:37Z")

</div>

![font_size_design_tokens](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/2beff2c9dd71b6f33d33a6a0135f67d41471db2b.png)  
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.

---

<div class="post-metadata">

### Author: ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)
#### Post date: [August 30, 2024, 12:11pm UTC](https://forum.builder.io/t/can-we-hide-remove-the-value-css-variable-sub-text-from-each-design-token/6299/2 "2024-08-30T12:11:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![soumya](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@soumya](https://forum.builder.io/u/soumya)
#### Post date: [August 30, 2024, 7:35pm UTC](https://forum.builder.io/t/can-we-hide-remove-the-value-css-variable-sub-text-from-each-design-token/6299/3 "2024-08-30T19:35:46Z")

</div>

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)” },  
],  
},  
});

---

<div class="post-metadata">

### Author: ![soumya](https://avatars.discourse-cdn.com/v4/letter/s/ea5d25/32.png) [@soumya](https://forum.builder.io/u/soumya)
#### Post date: [September 2, 2024, 6:40pm UTC](https://forum.builder.io/t/can-we-hide-remove-the-value-css-variable-sub-text-from-each-design-token/6299/4 "2024-09-02T18:40:15Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)
#### Post date: [September 3, 2024, 6:52am UTC](https://forum.builder.io/t/can-we-hide-remove-the-value-css-variable-sub-text-from-each-design-token/6299/5 "2024-09-03T06:52:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)
#### Post date: [September 4, 2024, 4:20am UTC](https://forum.builder.io/t/can-we-hide-remove-the-value-css-variable-sub-text-from-each-design-token/6299/6 "2024-09-04T04:20:21Z")

</div>

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](https://ideas.builder.io/ideas).