fix(TMC-28189): improve call to use in sass files + ts lint fix (#5287)

Talend · Apr 23, 2024 · f546896 · f546896
1 parent a10f800
commit f546896
Show file tree

Hide file tree

Showing 264 changed files with 284 additions and 267 deletions.
diff --git a/.changeset/wet-eagles-grin.md b/.changeset/wet-eagles-grin.md
@@ -0,0 +1,14 @@
+---
+"@talend/json-schema-form-core": patch
+"@talend/react-faceted-search": patch
+"@talend/storybook-docs": patch
+"@talend/design-system": patch
+"@talend/design-docs": patch
+"@talend/react-components": patch
+"@talend/react-dataviz": patch
+"@talend/react-stepper": patch
+"@talend/react-forms": patch
+"@talend/bootstrap-theme": patch
+---
+
+Fix: improve call of use in sass files + fix ts lint
diff --git a/fork/json-schema-form-core/src/schema-defaults.ts b/fork/json-schema-form-core/src/schema-defaults.ts
@@ -262,7 +262,7 @@ export function defaultForm(
 	ignore?: any,
 	globalOptions?: any,
 ) {
-	const form = [];
+	const form: any[] = [];
 	const lookup = {}; // Map path => form obj for fast lookup in merging
 	ignore = ignore || {};
 	globalOptions = globalOptions || {};
@@ -272,7 +272,7 @@ export function defaultForm(
 		Object.keys(schema.properties).forEach(key => {
 			if (ignore[key] !== true) {
 				const required = schema.required && schema.required.indexOf(key) !== -1;
-				const def = defaultFormDefinition(defaultSchemaTypes, key, schema.properties[key], {
+				const def: any = defaultFormDefinition(defaultSchemaTypes, key, schema.properties[key], {
 					path: [key], // Path to this property in bracket notation.
 					lookup: lookup, // Extra map to register with. Optimization for merger.
 					ignore: ignore, // The ignore list of paths (sans root level name)

diff --git a/packages/components/src/ActionBar/ActionBar.module.scss b/packages/components/src/ActionBar/ActionBar.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default;
 

diff --git a/packages/components/src/ActionList/ActionList.module.scss b/packages/components/src/ActionList/ActionList.module.scss
@@ -1,6 +1,6 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
 
-@use '@talend/design-tokens/lib/_tokens.scss' as tokens;
+@use '@talend/design-tokens/lib/_tokens' as tokens;
 
 ////
 /// Action list

diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-dropdown-loader-padding: $padding-small !default;
 $tc-dropdown-button-right-padding: 0.5rem;

diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-icon-toggle-size: 1.5rem !default;
 $tc-icon-toggle-icon-size: $svg-sm-size !default;

diff --git a/packages/components/src/AppSwitcher/AppSwitcher.module.scss b/packages/components/src/AppSwitcher/AppSwitcher.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .tc-app-switcher {
 	:global(.tc-svg-icon:first-child) {

diff --git a/packages/components/src/Badge/Badge.module.scss b/packages/components/src/Badge/Badge.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-badge-large-label-font-size: 0.875rem !default;
 $tc-badge-large-label-font-weight: normal !default;

diff --git a/packages/components/src/CircularProgress/CircularProgress.module.scss b/packages/components/src/CircularProgress/CircularProgress.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 // CircularProgress styles
 $tc-circular-progress-light-fill: tokens.$coral-color-neutral-text-inverted !default;

diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-collapsible-panel-padding-smaller: $padding-smaller !default;
 $tc-collapsible-panel-padding-normal: $padding-normal !default;

diff --git a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .tc-length-badge {
 	background-color: tokens.$coral-color-neutral-background-medium;

diff --git a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss b/packages/components/src/DataViewer/Core/Tree/Tree.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 :global(.tc-model .tc-tree) {
 	overflow: auto;

diff --git a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $default-height: 2.5rem !default;
 

diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .tc-tree-branch-icon {
 	display: flex;

diff --git a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 @import '~@talend/bootstrap-theme/src/theme/animation';
 
 $model-node-height: 1.875rem !default;

diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss
@@ -1,6 +1,6 @@
 /* stylelint-disable declaration-no-important */
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $hightlight-height: 1.375rem !default;
 $records-node-height: $hightlight-height !default;

diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .tc-simple-text {
 	display: flex;

diff --git a/packages/components/src/DataViewer/theme.module.scss b/packages/components/src/DataViewer/theme.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-layout-skeleton-width: 6rem !default;
 $tc-layout-skeleton-height: 6rem !default;

diff --git a/packages/components/src/Datalist/Datalist.module.scss b/packages/components/src/Datalist/Datalist.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-datalist-items-max-height: 20rem !default;
 $tc-datalist-item-height: 2.5rem !default;

diff --git a/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @import '../shared/styles/mixins';
 

diff --git a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 @import '../shared/styles/mixins';
 
 $tc-timepicker-width: 5rem !default;

diff --git a/...ents/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss b/...ents/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .validation {
 	display: flex;

diff --git a/...DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/...DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-datetimepicker-width: 19.375rem !default;
 $tc-datetimepicker-box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2) !default;

diff --git a/...nents/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss b/...nents/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';

diff --git a/...c/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss b/...c/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';

diff --git a/...nts/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/...nts/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';

diff --git a/...nents/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss b/...nents/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss
@@ -1,7 +1,7 @@
 /* stylelint-disable color-hex-case */
 /* stylelint-disable selector-no-qualifying-type */
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @import '../../shared/styles/mixins';
 

diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @mixin nav-action {
 	padding: 0;

diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss
@@ -1,3 +1,3 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $border-default: 0.0625rem solid tokens.$coral-color-neutral-border !default;
diff --git a/...nents/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/...nents/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 @import '../../shared/styles/mixins';
 
 .common {

diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .container {
 	color: tokens.$coral-color-neutral-text-weak;

diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @import '../../shared/styles/mixins';
 

diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @import '../../shared/styles/mixins';
 @import '../../shared/styles/variables';

diff --git a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .container {
 	padding: tokens.$coral-spacing-xxs 0;

diff --git a/packages/components/src/DateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/shared/styles/mixins.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @import './variables';
 

diff --git a/packages/components/src/DateTimePickers/shared/styles/variables.scss b/packages/components/src/DateTimePickers/shared/styles/variables.scss
@@ -1,3 +1,3 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $border-default: 0.0625rem solid tokens.$coral-color-neutral-border !default;
diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .common {
 	display: flex;

diff --git a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .container {
 	height: 100%;

diff --git a/packages/components/src/Dialog/Dialog.scss b/packages/components/src/Dialog/Dialog.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 :global {
 	.modal-flex .modal-body {

diff --git a/packages/components/src/Drawer/Drawer.module.scss b/packages/components/src/Drawer/Drawer.module.scss
@@ -1,4 +1,4 @@
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-drawer-bgcolor: tokens.$coral-color-neutral-background !default;
 $tc-drawer-padding: tokens.$coral-spacing-m !default;

diff --git a/packages/components/src/EditableText/InlineForm.module.scss b/packages/components/src/EditableText/InlineForm.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 @import '~@talend/bootstrap-theme/src/theme/animation';
 
 $tc-icon-editable-text-size: 0.5rem !default;

diff --git a/packages/components/src/EditableText/PlainTextTitle.module.scss b/packages/components/src/EditableText/PlainTextTitle.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 @mixin ellipsis {
 	white-space: nowrap;

diff --git a/packages/components/src/Enumeration/Enumeration.module.scss b/packages/components/src/Enumeration/Enumeration.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-enumeration-height: 50vh !default;
 $tc-enumeration-font-size: 0.875rem !default;

diff --git a/packages/components/src/Enumeration/Header/Header.module.scss b/packages/components/src/Enumeration/Header/Header.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-enumeration-smaller-padding: $padding-smaller !default;
 $tc-enumeration-small-padding: $padding-small !default;

diff --git a/packages/components/src/Enumeration/Items/Item/Item.module.scss b/packages/components/src/Enumeration/Items/Item/Item.module.scss
@@ -1,6 +1,6 @@
 /* stylelint-disable color-hex-case */
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-enumeration-normal-padding: $padding-normal !default;
 $tc-enumeration-smaller-padding: $padding-smaller !default;

diff --git a/packages/components/src/Enumeration/Items/Items.module.scss b/packages/components/src/Enumeration/Items/Items.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-enumeration-height: 40vh !default;
 

diff --git a/packages/components/src/FilterBar/FilterBar.module.scss b/packages/components/src/FilterBar/FilterBar.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 // Filter styles
 $tc-filter-bar-width: 250px !default;

diff --git a/packages/components/src/FormatValue/FormatValue.module.scss b/packages/components/src/FormatValue/FormatValue.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $svg-tab-width: 1.625rem !default;
 $svg-other-characters: 0.1875rem !default;

diff --git a/packages/components/src/GridLayout/Grid.module.scss b/packages/components/src/GridLayout/Grid.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .layout {
 	:global(.react-grid-item) {

diff --git a/packages/components/src/GuidedTour/GuidedTour.module.scss b/packages/components/src/GuidedTour/GuidedTour.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-guidedtour-accent-color: tokens.$coral-color-accent-text !default;
 $tc-guidedtour-tooltip-padding: $padding-large !default;

diff --git a/packages/components/src/HeaderBar/HeaderBar.module.scss b/packages/components/src/HeaderBar/HeaderBar.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 $tc-headerbar-logo-width: tokens.$coral-sizing-s !default;
 $tc-headerbar-logo-full-width: 5.3125rem !default;

diff --git a/packages/components/src/HttpError/HttpError.module.scss b/packages/components/src/HttpError/HttpError.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .http-error {
 	position: relative;

diff --git a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss
@@ -1,6 +1,6 @@
 /* stylelint-disable selector-no-qualifying-type */
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .json-schema-renderer {
 	margin-top: $padding-large;

diff --git a/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss b/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 .tc-skip-links {
 	position: absolute;

diff --git a/packages/components/src/List/List.module.scss b/packages/components/src/List/List.module.scss
@@ -1,5 +1,5 @@
 @use '@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
+@use '@talend/design-tokens/lib/tokens' as tokens;
 
 // List styles