== Background and goal
After identifying and defining tokens in
- {T288383} and
- {T295606},
it's obligatory to move Codex over to exclusively use package design tokens over Single File Components (SFCs) variables definition.
== Remaining SFC variables per component to be transformed
**Button**
```lang=less
@background-color-normal-progressive--active: lighten( @color-progressive--active, 60% );
@background-color-normal-destructive--active: lighten( @color-destructive--active, 60% );
```
{icon check color=green} **Card**
All tokenized.
{icon check color=green} **Icon**
All tokenized.
**TextInput**
```lang=less
@padding-horizontal-input-text-two-end-icons:
( @spacing-50 * 2 ) + @size-100;
```
**Checkbox/Radio**
***binary-input*** mixin
```lang=less
@size-icon-small: unit( ( 14 / @font-size-browser / @font-size-base-value ), em );
@size-input-binary: unit( ( 20 / @font-size-browser / @font-size-base-value ), em );
@start-input-binary-icon: unit( ( 3 / @font-size-browser / @font-size-base-value ), em );
```
**ToggleSwitch**
```lang=less
@size-base--small: unit( ( 16 / @font-size-browser / @font-size-base ), em );
@size-toggle-switch-travel-distance: 1.5em;
// TODO: `--mobile` as modifier would go against our naming conventions of state only modifiers.
@size-toggle-switch-grip--mobile: 1.25em;
@width-toggle-switch: @size-toggle-switch-travel-distance + 2em;
@height-toggle-switch: 2em;
@start-toggle-switch-grip: unit( ( 5 / @font-size-browser / @font-size-base ), em );
@start-toggle-switch-grip--mobile: unit( ( 4.5 / @font-size-browser / @font-size-base ), em );
@position-offset-toggle-switch-outline: 1px;
…
z-index: 0;
z-index: 1;
```
**Lookup**
***pending-state*** mixin, this should be removed entirely. Non-DS design.
{icon check color=green} **Combobox**
All tokenized.
**Menu**
```lang=less
z-index: 4;
```
{icon check color=green} **MenuItem**
All tokenized.
{icon check color=green} **Message**
All tokenized.
***options-menu*** mixin, in use in Combobox, Lookup, Select, TypeaheadSearch
```lang=less
z-index: 4
```
**ProgressBar**
```lang=less
z-index: 1;
```
**Tabs**
```lang=less
@max-width-tab: 16em;
@width-tabs-header-gradient: 24px;
@background-color-tabs-framed-tab--hover: rgba( 255, 255, 255, 0.3 );
@background-color-tabs-framed-tab--active: rgba( 255, 255, 255, 0.8 );
```
**TypeaheadSearch**
```lang=less
// TODO: @size-input-icon-container is duplicated from TextInput.vue and needs to be centralized.
@size-input-icon-container: unit(
( ( @padding-horizontal-input-text * 2 + @size-icon ) / @font-size-browser / @font-size-base ),
em
);
@size-search-figure: @size-250;
@spacing-start-typeahead-search-figure: @padding-horizontal-base;
@spacing-end-typeahead-search-figure: @margin-end-menu-item-thumbnail;
@size-typeahead-search-focus-addition: @spacing-start-typeahead-search-figure +
@spacing-end-typeahead-search-figure;
```