#####Problem
The [[ https://github.com/wmde/wikit/blob/master/vue-components/src/styles/mixins/Label.scss | Label mixin ]] was implemented to be reused by WiKit's field components, such as Input or Lookup. Some of the Wikibase-specific components that we need to port to the Query Builder also use Label. The assumption is that we should port this mixin as a dependency in order for said components to work.
#####Solution
In order to unblock the migration to Codex and the deprecation of WiKit, we'll port the WiKit Label mixin to the Query Builder repository. We'll apply all necessary changes to make the element compatible with the new version of the tool.
#####Considerations
- Styles: In order to unblock WiKit's deprecation, we should also replace all WiKit tokens used currently to style the Label. We could use both discrete values or Codex tokens. It might be a slightly better idea to do the later in order to ensure consistency.
Creating [[ https://www.figma.com/design/ZUdkxlbZCSHoluhVrjANSE/WiKit-to-Codex-Migration?node-id=714-85281&t=La1gJNANG37QzHpb-0 | design specs ]] sounded like a limited and error-prone way to proceed with handover in this case. Replacing tokens directly seems to make more sense and be more effective:
```
@mixin Label($displayType: "inline") {
color: $color-base;
font-family: $font-family-system-sans;
font-size: $font-size-medium;
font-weight: $font-weight-bold;
line-height: $line-height-xx-small;
display: $displayType;
overflow-wrap: break-word;
hyphens: auto;
&--disabled {
color: $color-disabled;
}
@if $displayType == block {
padding-block-end: $spacing-25;
}
}
```
#####Acceptance criteria
[] The WiKit Label to Query builder for its reusage by other ported Wikibase-specific components
[] Any WiKit building blocks, dependencies or styles are replaced