diff --git a/.changeset/wet-eagles-grin.md b/.changeset/wet-eagles-grin.md new file mode 100644 index 00000000000..ac3f8f804ec --- /dev/null +++ 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/packages/components/src/ActionBar/ActionBar.module.scss b/packages/components/src/ActionBar/ActionBar.module.scss index b3e646daef1..b02e2278f1c 100644 --- 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/Actions/ActionDropdown/ActionDropdown.module.scss b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss index 3fe51e1d4dc..667e751462e 100644 --- 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 index 10e07d7ae5c..7e21b53751b 100644 --- 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 index be2e9e12fab..8701418c6f9 100644 --- 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 index ea1f545774c..883dffefcab 100644 --- 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 index 8e7c9f5dea6..b681843c9f8 100644 --- 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 index 7bd1ae5f211..f4e08c2c4f4 100644 --- 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 index 44bc7b90abd..0e483c08d1e 100644 --- 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 index 43f874b27dd..3827f782d16 100644 --- 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 index 89a583d8657..ebf33cb81af 100644 --- 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 index 79f18048855..65ff9d14fe6 100644 --- 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 index 94abf5c88ed..630ab68beba 100644 --- 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 index 049c903829e..5f08021d447 100644 --- 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 index 4ee51a0bd9c..5f735eb2dda 100644 --- 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 index 954e37181b7..ade64350cda 100644 --- 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 index 74f094c1fb4..32fce61d2ea 100644 --- 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 index 3772ee079ca..290f2b9fe75 100644 --- 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 index 047422bd876..959ab04bae2 100644 --- 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/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss index c4bd8cda0d2..0f4ecc92d3d 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss +++ b/packages/components/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/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss index efb07c18961..ed28311ccfc 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss +++ b/packages/components/src/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/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss index 4a1929a77d8..6c44619f69c 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss +++ b/packages/components/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/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss index 0cf637145f4..9c41872a390 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss +++ b/packages/components/src/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/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss index b434ad82365..d99d8e4fdb9 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss +++ b/packages/components/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/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss index 69dc41488d1..88a69166e76 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss +++ b/packages/components/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 index dc8dcd1cdf8..852909af45d 100644 --- 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 index 30c4b66b21a..14ab7cce76c 100644 --- 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/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss index 329e3ba4aa8..1c3e7cf19a5 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss +++ b/packages/components/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 index 0fded4be2f5..1219f6e3b53 100644 --- 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 index ad97e6b5aad..addb1933103 100644 --- 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 index 5890568266a..a656d53c6bc 100644 --- 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 index fa462952568..3e894d4d5e5 100644 --- 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 index 4d3df6658e3..91a8cb45493 100644 --- 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 index 30c4b66b21a..14ab7cce76c 100644 --- 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 index fe9c294fe72..0fa1598ff0c 100644 --- 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 index af916d5efd8..0b21a729a3d 100644 --- 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 index a90a0291a88..acba5c0bdd7 100644 --- 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 index 8f066727c54..ec026fe8478 100644 --- 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 index 29ac58e2417..76b14fdab8d 100644 --- 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 index 189aee7235c..70a978a6503 100644 --- 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 index 75c34984f0b..6f8acf4bbb7 100644 --- 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 index e556e17fca5..4e2726dc98a 100644 --- 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 index eb3b98d0686..514c937c4ee 100644 --- 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 index bfe95071cb7..7443d2a6f99 100644 --- 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 index 9b8b8886bcf..a2a26f04f41 100644 --- 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 index 30d9b595d7e..a04ba0f2f10 100644 --- 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 index 372f7f98f7d..8f8aaa2eb10 100644 --- 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 index 6858b44e1a0..e50b689cf6b 100644 --- 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 index e2c53a3a9a1..0a73ae9c267 100644 --- 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 index 8017d49e474..efa899d1179 100644 --- 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 index c7bb8b48397..14dc33d480c 100644 --- 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 index c1039e843a3..25508a85078 100644 --- 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 index 7459782c3b4..67430b13827 100644 --- 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 diff --git a/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss b/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss index 2077813a4ef..2ad72da2f88 100644 --- a/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss +++ b/packages/components/src/List/ListComposition/SortBy/SortBy.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; // SelectSortBy styles $tc-order-chooser-icon-size: 0.375rem !default; diff --git a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss index 3d8608899c1..0587e3f4ddc 100644 --- a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss +++ b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.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-toolbar-height: 4.375rem; diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss index 437b6fc6945..72f56f7dfa6 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.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-popover-border-width: 0.0625rem !default; $tc-height: 2.5rem; diff --git a/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss b/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss index a9290c6b06d..b7970c59edc 100644 --- a/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss +++ b/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .container { background: tokens.$coral-color-neutral-background; diff --git a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss index d60d1276625..a10ea695208 100644 --- a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss +++ b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.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; // SelectSortBy styles diff --git a/packages/components/src/List/Toolbar/Toolbar.module.scss b/packages/components/src/List/Toolbar/Toolbar.module.scss index 42c5b877706..33769d3050f 100644 --- a/packages/components/src/List/Toolbar/Toolbar.module.scss +++ b/packages/components/src/List/Toolbar/Toolbar.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; // Toolbar styles $tc-list-toolbar-height: 4.375rem !default; diff --git a/packages/components/src/ListView/Header/Header.module.scss b/packages/components/src/ListView/Header/Header.module.scss index df94efff09e..84d2b1907ea 100644 --- a/packages/components/src/ListView/Header/Header.module.scss +++ b/packages/components/src/ListView/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-listview-header-height: 28px !default; $tc-listview-svg-color: tokens.$coral-color-neutral-text !default; diff --git a/packages/components/src/ListView/ListView.module.scss b/packages/components/src/ListView/ListView.module.scss index e75c1e9e9ea..62f5066f98e 100644 --- a/packages/components/src/ListView/ListView.module.scss +++ b/packages/components/src/ListView/ListView.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-listview-svg-color: tokens.$coral-color-neutral-icon !default; $tc-listview-font-size: 0.875rem !default; diff --git a/packages/components/src/MultiSelect/Dropdown.module.scss b/packages/components/src/MultiSelect/Dropdown.module.scss index 9a9e5b8cb30..3341a35408c 100644 --- a/packages/components/src/MultiSelect/Dropdown.module.scss +++ b/packages/components/src/MultiSelect/Dropdown.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; .dropdown { z-index: 100; diff --git a/packages/components/src/MultiSelect/ItemOption.module.scss b/packages/components/src/MultiSelect/ItemOption.module.scss index f57ccf9cfa6..a643d1749f3 100644 --- a/packages/components/src/MultiSelect/ItemOption.module.scss +++ b/packages/components/src/MultiSelect/ItemOption.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; .row { padding-left: $padding-normal; diff --git a/packages/components/src/MultiSelect/MultiSelect.module.scss b/packages/components/src/MultiSelect/MultiSelect.module.scss index 2f2166eb346..a3e37e5dc8b 100644 --- a/packages/components/src/MultiSelect/MultiSelect.module.scss +++ b/packages/components/src/MultiSelect/MultiSelect.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; // MultiSelect styles .container { diff --git a/packages/components/src/Notification/Notification.module.scss b/packages/components/src/Notification/Notification.module.scss index eb4e262b2d6..e0e99b0217f 100644 --- a/packages/components/src/Notification/Notification.module.scss +++ b/packages/components/src/Notification/Notification.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-notification-animation-duration: 0.3s !default; diff --git a/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss b/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss index ef6b18d8ac1..f6831ab549a 100644 --- a/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss +++ b/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @mixin chevron($color) { border: 1px solid tokens.$coral-color-accent-border; diff --git a/packages/components/src/ObjectViewer/List/List.module.scss b/packages/components/src/ObjectViewer/List/List.module.scss index 3fa8252df78..e5f6a355e04 100644 --- a/packages/components/src/ObjectViewer/List/List.module.scss +++ b/packages/components/src/ObjectViewer/List/List.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; // List styles .container { diff --git a/packages/components/src/ObjectViewer/Table/Table.module.scss b/packages/components/src/ObjectViewer/Table/Table.module.scss index 1dbab071981..f3ec84bc806 100644 --- a/packages/components/src/ObjectViewer/Table/Table.module.scss +++ b/packages/components/src/ObjectViewer/Table/Table.module.scss @@ -1,5 +1,5 @@ /* stylelint-disable scss/selector-no-redundant-nesting-selector */ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .table { .nativevalue { diff --git a/packages/components/src/PieChart/PieChart.module.scss b/packages/components/src/PieChart/PieChart.module.scss index da331babc7f..58c25c8476b 100644 --- a/packages/components/src/PieChart/PieChart.module.scss +++ b/packages/components/src/PieChart/PieChart.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-pie-chart-font-size: $font-size-large !default; diff --git a/packages/components/src/Progress/Progress.module.scss b/packages/components/src/Progress/Progress.module.scss index 4af9ccdced6..d4e72d94a94 100644 --- a/packages/components/src/Progress/Progress.module.scss +++ b/packages/components/src/Progress/Progress.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; $infinite-indicator-ratio: 3; $infinite-indicator-width: calc(100% / $infinite-indicator-ratio); diff --git a/packages/components/src/RadarChart/RadarChart.module.scss b/packages/components/src/RadarChart/RadarChart.module.scss index 90c4437076e..ab215fb55de 100644 --- a/packages/components/src/RadarChart/RadarChart.module.scss +++ b/packages/components/src/RadarChart/RadarChart.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-radar-chart { :global { diff --git a/packages/components/src/ResourceList/Resource/Resource.module.scss b/packages/components/src/ResourceList/Resource/Resource.module.scss index 874053a3728..f3586e7b36f 100644 --- a/packages/components/src/ResourceList/Resource/Resource.module.scss +++ b/packages/components/src/ResourceList/Resource/Resource.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; .resource-item { padding-left: $padding-normal; diff --git a/packages/components/src/ResourceList/ResourceList.module.scss b/packages/components/src/ResourceList/ResourceList.module.scss index a8f9ccfb4c8..b66353b6c48 100644 --- a/packages/components/src/ResourceList/ResourceList.module.scss +++ b/packages/components/src/ResourceList/ResourceList.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-resource-list-margin-top: 1.25rem !default; $tc-resource-list-height: 15.625rem !default; diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss index 56bfd45b68b..b625bf7048c 100644 --- a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss +++ b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.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-resource-picker-name-filter { flex: 1; diff --git a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss index e278fa0b1a2..ceb93792303 100644 --- a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss +++ b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.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-resource-picker-toolbar-favorite-color: tokens.$coral-color-warning-text !default; $tc-resource-picker-toolbar-certified-color: tokens.$coral-color-accent-text !default; diff --git a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss b/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss index a2f2e549d2d..658d090eb30 100644 --- a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss +++ b/packages/components/src/ResourceList/Toolbar/Toolbar.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-resource-list-toolbar { display: flex; diff --git a/packages/components/src/ResourcePicker/ResourcePicker.module.scss b/packages/components/src/ResourcePicker/ResourcePicker.module.scss index c1364a86661..b4f6dae0b09 100644 --- a/packages/components/src/ResourcePicker/ResourcePicker.module.scss +++ b/packages/components/src/ResourcePicker/ResourcePicker.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-resource-picker-toolbar-height: 2.1875rem !default; $tc-resource-picker-height: 15.625rem !default; diff --git a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss index 32a2f7ba9d9..6ac5b578273 100644 --- a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss +++ b/packages/components/src/Rich/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; $tc-header-title-font-size: 1rem !default; $tc-header-title-font-weight: 700 !default; diff --git a/packages/components/src/Rich/Layout/RichLayout.module.scss b/packages/components/src/Rich/Layout/RichLayout.module.scss index 7a8a6f417ff..6ab8c8c564b 100644 --- a/packages/components/src/Rich/Layout/RichLayout.module.scss +++ b/packages/components/src/Rich/Layout/RichLayout.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-popover-border-width: 0.0625rem !default; $tc-popover-border-color: tokens.$coral-color-neutral-border-weak !default; diff --git a/packages/components/src/SidePanel/SidePanel.module.scss b/packages/components/src/SidePanel/SidePanel.module.scss index 561c7ee51da..24834ba3d33 100644 --- a/packages/components/src/SidePanel/SidePanel.module.scss +++ b/packages/components/src/SidePanel/SidePanel.module.scss @@ -1,7 +1,7 @@ /* stylelint-disable color-hex-case */ /* 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; //// /// Side panel diff --git a/packages/components/src/Skeleton/Skeleton.module.scss b/packages/components/src/Skeleton/Skeleton.module.scss index c0890e1da22..09a5f365739 100644 --- a/packages/components/src/Skeleton/Skeleton.module.scss +++ b/packages/components/src/Skeleton/Skeleton.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-skeleton-border-radius: 4px !default; diff --git a/packages/components/src/Status/Status.module.scss b/packages/components/src/Status/Status.module.scss index 0725f5b5ad9..affe6bf059b 100644 --- a/packages/components/src/Status/Status.module.scss +++ b/packages/components/src/Status/Status.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-status-icon-size: $svg-md-size !default; $tc-status-action-min-size: 23px !default; diff --git a/packages/components/src/Stepper/Stepper.component.module.scss b/packages/components/src/Stepper/Stepper.component.module.scss index 74b08ce700f..63c7a4db4d8 100644 --- a/packages/components/src/Stepper/Stepper.component.module.scss +++ b/packages/components/src/Stepper/Stepper.component.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; $stepper-icon-size: $svg-md-size !default; diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss b/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss index 54f6911375a..28a47523027 100644 --- a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss +++ b/packages/components/src/SubHeaderBar/SubHeaderBar.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 input-icon($margin-left) { margin-top: 0.625rem; diff --git a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss index 8b1658e77a1..324ccf1ffc8 100644 --- a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss +++ b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.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'; diff --git a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss b/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss index 7b08275139b..f481dc6307d 100644 --- a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss +++ b/packages/components/src/Toggle/LabelToggle/LabelToggle.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; @mixin radio-toolbar-input($color, $opacity) { transition: 0.2s ease-out; diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss b/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss index 6522b647249..7a40adfc57f 100644 --- a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss +++ b/packages/components/src/TooltipTrigger/TooltipTrigger.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-tooltip-max-width: 18.75rem !default; $tc-tooltip-font-size: 0.75rem !default; diff --git a/packages/components/src/TreeView/TreeView.module.scss b/packages/components/src/TreeView/TreeView.module.scss index ae3acaf9856..a8a5e94a0d7 100644 --- a/packages/components/src/TreeView/TreeView.module.scss +++ b/packages/components/src/TreeView/TreeView.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; // TreeView styles diff --git a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss index 4788638edc6..e6d05ce9f59 100644 --- a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss +++ b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.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; // TreeView styles $item-height: 2.5rem; diff --git a/packages/components/src/Typeahead/Typeahead.module.scss b/packages/components/src/Typeahead/Typeahead.module.scss index 165b6353eef..54d21024b79 100644 --- a/packages/components/src/Typeahead/Typeahead.module.scss +++ b/packages/components/src/Typeahead/Typeahead.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-typeahead-input-color: tokens.$coral-color-neutral-text !default; diff --git a/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss b/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss index 40b0a164e90..e02b375614c 100644 --- a/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss +++ b/packages/components/src/VirtualizedList/CellLink/CellLink.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; .cell-link-container { > a { diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss b/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss index cfb8292559f..e50d3dc43d7 100644 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitle.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; $tc-list-title-icon-size: $svg-rg-size !default; diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss index b961fe76e36..f156d43cd1c 100644 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.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-list-title-actions-ellipsis: '\22ee'; $tc-list-title-dropdown-menu-triangle: '\25b2'; diff --git a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss index 120e1680627..b0f0e9a56bf 100644 --- a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss +++ b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.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; $drag-element-width: $padding-smaller; diff --git a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss index 9cea7c588b9..052d2d8a0a7 100644 --- a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss +++ b/packages/components/src/VirtualizedList/ListTable/ListTable.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-list-table-cell-padding: $padding-small !default; diff --git a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss index 45eba1b5f01..16b526d330c 100644 --- a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss +++ b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.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-collapsible-row) { :global(.panel[class*='collapsible-panel']) { diff --git a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss index fef80c4303e..65f91bd2dfc 100644 --- a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss +++ b/packages/components/src/VirtualizedList/RowLarge/RowLarge.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-list-large { padding: $padding-small; diff --git a/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss b/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss index a837ab347d3..ed6c62c5497 100644 --- a/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss +++ b/packages/components/src/VirtualizedList/RowSelection/RowSelection.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-list-table) { .row-selection.selected { diff --git a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss index fe12228f902..4aeaf6ce590 100755 --- a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss +++ b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../bar-chart'; $module: colored-bar; diff --git a/packages/dataviz/src/components/BarChart/_bar-chart.scss b/packages/dataviz/src/components/BarChart/_bar-chart.scss index 3cc7d869210..e74cfa78ef2 100755 --- a/packages/dataviz/src/components/BarChart/_bar-chart.scss +++ b/packages/dataviz/src/components/BarChart/_bar-chart.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $pattern-bar-primary-color: tokens.$coral-color-charts-warning-weak; $pattern-bar-secondary-color: tokens.$coral-color-charts-warning-strong; diff --git a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss index 4fcb8dd2642..23f16d597e4 100755 --- a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss +++ b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; // Imported (almost) as-is from TDP .box-plot { diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.module.scss b/packages/dataviz/src/components/GeoChart/GeoChart.module.scss index b7534b5ec10..9be41110c24 100644 --- a/packages/dataviz/src/components/GeoChart/GeoChart.module.scss +++ b/packages/dataviz/src/components/GeoChart/GeoChart.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; :export { scaleMinColor: tokens.$coral-color-charts-default-weak; /* stylelint-disable-line property-no-unknown */ diff --git a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss index 23e729de9fb..05dd2126e96 100755 --- a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss +++ b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $module: key-value-tooltip; diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss index fb6aeb1b3bd..75a9d6c7678 100755 --- a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss +++ b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $module: range-filter; diff --git a/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss b/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss index f27b4af6336..6abefcb7530 100644 --- a/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss +++ b/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .dataviz-tooltip { padding: tokens.$coral-spacing-m; diff --git a/packages/design-docs/src/StatusTable.module.scss b/packages/design-docs/src/StatusTable.module.scss index 2d84a2906aa..839f8a69882 100644 --- a/packages/design-docs/src/StatusTable.module.scss +++ b/packages/design-docs/src/StatusTable.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .legend { margin: tokens.$coral-spacing-m 0; diff --git a/packages/design-docs/src/tokens/ColorComposition.module.scss b/packages/design-docs/src/tokens/ColorComposition.module.scss index 8c8d73cf0c6..b1efa451df0 100644 --- a/packages/design-docs/src/tokens/ColorComposition.module.scss +++ b/packages/design-docs/src/tokens/ColorComposition.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .card { justify-content: center; diff --git a/packages/design-docs/src/tokens/ExampleCard.module.scss b/packages/design-docs/src/tokens/ExampleCard.module.scss index d9fa2a6cd90..0c4dda264ea 100644 --- a/packages/design-docs/src/tokens/ExampleCard.module.scss +++ b/packages/design-docs/src/tokens/ExampleCard.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .card { width: calc(#{tokens.$coral-sizing-maximal} * 1.5); diff --git a/packages/design-docs/src/tokens/TokenValue.module.scss b/packages/design-docs/src/tokens/TokenValue.module.scss index ee8485a117a..4e370fde567 100644 --- a/packages/design-docs/src/tokens/TokenValue.module.scss +++ b/packages/design-docs/src/tokens/TokenValue.module.scss @@ -1,5 +1,5 @@ /* stylelint-disable declaration-no-important */ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .btn { display: flex; diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss index 0d56ead8fab..38a6585bda7 100644 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .panelWrapper { box-shadow: tokens.$coral-elevation-shadow-neutral-s; diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss index d8121d32ee9..470cb06855a 100644 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .headerWrapper { display: flex; diff --git a/packages/design-system/src/components/Badge/button/BadgeButton.module.scss b/packages/design-system/src/components/Badge/button/BadgeButton.module.scss index cd276791ed1..ec8852b1dbc 100644 --- a/packages/design-system/src/components/Badge/button/BadgeButton.module.scss +++ b/packages/design-system/src/components/Badge/button/BadgeButton.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .badge__button { align-items: center; diff --git a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.scss b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.scss index 1b7749c5d55..8fd44563862 100644 --- a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.scss +++ b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .badge { display: inline-block; diff --git a/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.scss b/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.scss index e933a3c3f71..b4ea369ae25 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.scss +++ b/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .badge-dropdown__placeholder { color: tokens.$coral-color-neutral-text; diff --git a/packages/design-system/src/components/Badge/variants/BadgeValue.module.scss b/packages/design-system/src/components/Badge/variants/BadgeValue.module.scss index 28197aaadd6..a18c5fded13 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeValue.module.scss +++ b/packages/design-system/src/components/Badge/variants/BadgeValue.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .badge-value__children { color: tokens.$coral-color-neutral-text; diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.scss b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.scss index 5494feb2faf..929d575cf44 100644 --- a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.scss +++ b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .breadcrumbs { display: block; diff --git a/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.scss b/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.scss index f396aa94fe7..ede840fcf3a 100644 --- a/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.scss +++ b/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .button { position: relative; diff --git a/packages/design-system/src/components/Button/variations/ButtonDestructive.module.scss b/packages/design-system/src/components/Button/variations/ButtonDestructive.module.scss index 2823fa835f0..a9558651205 100644 --- a/packages/design-system/src/components/Button/variations/ButtonDestructive.module.scss +++ b/packages/design-system/src/components/Button/variations/ButtonDestructive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .destructive { color: tokens.$coral-color-danger-text-weak; diff --git a/packages/design-system/src/components/Button/variations/ButtonPrimary.module.scss b/packages/design-system/src/components/Button/variations/ButtonPrimary.module.scss index a4883276ea7..d19caadd665 100644 --- a/packages/design-system/src/components/Button/variations/ButtonPrimary.module.scss +++ b/packages/design-system/src/components/Button/variations/ButtonPrimary.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .primary { color: tokens.$coral-color-accent-text-weak; diff --git a/packages/design-system/src/components/Button/variations/ButtonSecondary.module.scss b/packages/design-system/src/components/Button/variations/ButtonSecondary.module.scss index aa8ca05c1ff..21b0ba5e08e 100644 --- a/packages/design-system/src/components/Button/variations/ButtonSecondary.module.scss +++ b/packages/design-system/src/components/Button/variations/ButtonSecondary.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .secondary { color: tokens.$coral-color-accent-text; diff --git a/packages/design-system/src/components/Button/variations/ButtonTertiary.module.scss b/packages/design-system/src/components/Button/variations/ButtonTertiary.module.scss index f09c317bf8b..0d05381892f 100644 --- a/packages/design-system/src/components/Button/variations/ButtonTertiary.module.scss +++ b/packages/design-system/src/components/Button/variations/ButtonTertiary.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tertiary { color: tokens.$coral-color-accent-text; diff --git a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.scss b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.scss index e10a401c32e..5e271920579 100644 --- a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.scss +++ b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .button { text-decoration: none; diff --git a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.scss b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.scss index f69c714f879..1b9dd7b0bab 100644 --- a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.scss +++ b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .buttonIcon { display: inline-flex; diff --git a/packages/design-system/src/components/Card/Card.module.scss b/packages/design-system/src/components/Card/Card.module.scss index 55ccf1608b1..2b89d08897d 100644 --- a/packages/design-system/src/components/Card/Card.module.scss +++ b/packages/design-system/src/components/Card/Card.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .card { width: 100%; diff --git a/packages/design-system/src/components/Clickable/Clickable.module.scss b/packages/design-system/src/components/Clickable/Clickable.module.scss index 18b2feb2ea8..66382f9560a 100644 --- a/packages/design-system/src/components/Clickable/Clickable.module.scss +++ b/packages/design-system/src/components/Clickable/Clickable.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .clickable { cursor: pointer; diff --git a/packages/design-system/src/components/Combobox/Combobox.module.scss b/packages/design-system/src/components/Combobox/Combobox.module.scss index cbdb977da63..d2d50e20a42 100644 --- a/packages/design-system/src/components/Combobox/Combobox.module.scss +++ b/packages/design-system/src/components/Combobox/Combobox.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @use '../Form/Primitives/mixins' as Form; .combobox { diff --git a/packages/design-system/src/components/Divider/Divider.module.scss b/packages/design-system/src/components/Divider/Divider.module.scss index 56ff11ce34b..bfffbb5c7a6 100644 --- a/packages/design-system/src/components/Divider/Divider.module.scss +++ b/packages/design-system/src/components/Divider/Divider.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .divider { border: none; diff --git a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss index 0a850d1ce0e..d8f04058b0b 100644 --- a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss +++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .drawer { width: tokens.$coral-sizing-maximal; diff --git a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss index 7c2f2369e48..3e3e3148e22 100644 --- a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss +++ b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .drawer { position: absolute; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.scss index 94eee65b17c..14feb558800 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.scss +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .divider { margin: 0; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.scss index 9eeacd4119a..76f708bacf5 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.scss +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $icon-alignment-offset-m: -0.1875rem; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss index b8584a1570d..b6e812e2170 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .dropdownShell { z-index: tokens.$coral-elevation-layer-interactive-front; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.scss index 0fb9c1a242f..908b5a0807b 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.scss +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .dropdownTitle { background: tokens.$coral-color-accent-background-weak; diff --git a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.scss b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.scss index d0dfc73b88a..2549f25f627 100644 --- a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.scss +++ b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .emptyState { width: 95%; diff --git a/packages/design-system/src/components/Enumeration/Enumeration.module.scss b/packages/design-system/src/components/Enumeration/Enumeration.module.scss index e5f28994de6..5af6adaa3dd 100644 --- a/packages/design-system/src/components/Enumeration/Enumeration.module.scss +++ b/packages/design-system/src/components/Enumeration/Enumeration.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .enumeration { border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; diff --git a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.scss b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.scss index 9dcb9a4626e..1c2f9d59d7d 100644 --- a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.scss +++ b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .enumeration { &__header { diff --git a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.scss b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.scss index 28f7e6cc640..8a447602d5c 100644 --- a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.scss +++ b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .enumeration__item { align-items: center; diff --git a/packages/design-system/src/components/ErrorState/ErrorState.module.scss b/packages/design-system/src/components/ErrorState/ErrorState.module.scss index 783f7487832..89e2a09c608 100644 --- a/packages/design-system/src/components/ErrorState/ErrorState.module.scss +++ b/packages/design-system/src/components/ErrorState/ErrorState.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .error-state { font: tokens.$coral-paragraph-m; diff --git a/packages/design-system/src/components/Form/Affix/AffixStyles.module.scss b/packages/design-system/src/components/Form/Affix/AffixStyles.module.scss index 8bef3ab5e34..e1e94a642d0 100644 --- a/packages/design-system/src/components/Form/Affix/AffixStyles.module.scss +++ b/packages/design-system/src/components/Form/Affix/AffixStyles.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @mixin button-affix-styles() { color: tokens.$coral-color-accent-text; diff --git a/packages/design-system/src/components/Form/Buttons/Buttons.module.scss b/packages/design-system/src/components/Form/Buttons/Buttons.module.scss index 110cdca4894..2f1686b077d 100644 --- a/packages/design-system/src/components/Form/Buttons/Buttons.module.scss +++ b/packages/design-system/src/components/Form/Buttons/Buttons.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .buttons { button:first-child, diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.module.scss b/packages/design-system/src/components/Form/Field/Input/Input.File.module.scss index 7ed9b1ed86d..9569f1491a4 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.File.module.scss +++ b/packages/design-system/src/components/Form/Field/Input/Input.File.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .wrapper { width: 100%; diff --git a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.scss b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.scss index 2d00b5cf2b7..b0768f52e02 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.scss +++ b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $wrapper-width: 2rem; $marker-size: 0.8125rem; diff --git a/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.scss b/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.scss index db4d62b708b..2cde464b970 100644 --- a/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.scss +++ b/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .button { padding: 0 tokens.$coral-spacing-xs; diff --git a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss index a998e05f0d0..671371cfd65 100644 --- a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss +++ b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .fieldset { padding: 0; diff --git a/packages/design-system/src/components/Form/Form.module.scss b/packages/design-system/src/components/Form/Form.module.scss index 54f995e41e5..d5f88439f65 100644 --- a/packages/design-system/src/components/Form/Form.module.scss +++ b/packages/design-system/src/components/Form/Form.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .form { display: flex; diff --git a/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.scss b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.scss index ea78a7ff242..15730f89ae9 100644 --- a/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.scss +++ b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $checkmark-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjA1IDEgMyA1LjEuOTUgMy4wNDk1IDAgNGwzIDMgNS01LjA1TDcuMDUgMVoiIGZpbGw9IiNmZmYiLz48bWFzayBpZD0iYSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMSIgd2lkdGg9IjgiIGhlaWdodD0iNiI+PHBhdGggZD0iTTcuMDUgMSAzIDUuMS45NSAzLjA0OTUgMCA0bDMgMyA1LTUuMDVMNy4wNSAxWiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48L3N2Zz4='); $checkmark-image-indeterminate: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOCA1SDBWM2g4djJaIiBmaWxsPSIjZmZmIi8+PC9zdmc+'); diff --git a/packages/design-system/src/components/Form/Primitives/Input/Input.module.scss b/packages/design-system/src/components/Form/Primitives/Input/Input.module.scss index 6ddb8ff09df..538e8640d74 100644 --- a/packages/design-system/src/components/Form/Primitives/Input/Input.module.scss +++ b/packages/design-system/src/components/Form/Primitives/Input/Input.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @use '../mixins' as Form; .input { diff --git a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss index ad7ed29ada3..db9b79adaa1 100644 --- a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss +++ b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @use '../mixins' as Form; .inputShell { diff --git a/packages/design-system/src/components/Form/Primitives/Label/Label.module.scss b/packages/design-system/src/components/Form/Primitives/Label/Label.module.scss index a0437331c9b..83f67ad0ed4 100644 --- a/packages/design-system/src/components/Form/Primitives/Label/Label.module.scss +++ b/packages/design-system/src/components/Form/Primitives/Label/Label.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .label { font: tokens.$coral-paragraph-s-bold; diff --git a/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.scss b/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.scss index fa34a0277f0..f54ad0c927c 100644 --- a/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.scss +++ b/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $radio-size: tokens.$coral-sizing-xxxs; $mark-size: calc(#{tokens.$coral-sizing-xxs} / 2); diff --git a/packages/design-system/src/components/Form/Primitives/Select/Select.module.scss b/packages/design-system/src/components/Form/Primitives/Select/Select.module.scss index 98a6d1b1ae0..aaed9d893de 100644 --- a/packages/design-system/src/components/Form/Primitives/Select/Select.module.scss +++ b/packages/design-system/src/components/Form/Primitives/Select/Select.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @use '../mixins' as Form; @use '../../../Form/Affix/AffixStyles.module' as Affix; diff --git a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.scss b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.scss index c9aa373ac1e..d5162abb077 100644 --- a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.scss +++ b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @use '../mixins' as Form; .textarea { diff --git a/packages/design-system/src/components/Form/Primitives/_mixins.scss b/packages/design-system/src/components/Form/Primitives/_mixins.scss index 40f3ccd458f..e5cb5c7f8fe 100644 --- a/packages/design-system/src/components/Form/Primitives/_mixins.scss +++ b/packages/design-system/src/components/Form/Primitives/_mixins.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $standard-input-height: calc(2rem - 0.125rem); diff --git a/packages/design-system/src/components/Form/Row/Row.module.scss b/packages/design-system/src/components/Form/Row/Row.module.scss index 15633af0162..c3ef5da74f6 100644 --- a/packages/design-system/src/components/Form/Row/Row.module.scss +++ b/packages/design-system/src/components/Form/Row/Row.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .row { display: inline-flex; diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.scss b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.scss index c49847814a5..494c4dc9475 100644 --- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.scss +++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .inlineEditor { &__editor { diff --git a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.scss b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.scss index 93141c68b46..06bf1400a0c 100644 --- a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.scss +++ b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .inlineMessage { align-items: center; diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.scss index 8a5a43d619c..3a04fdc1800 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.scss +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .beta { &_withBackground { diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.scss index 39d125a6855..1f3f90f4d45 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.scss +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .destructive { &_withBackground { diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss index 3fdad1f661b..b570f9b6ad1 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .information { &_withBackground { diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.scss index 420ba68ce17..1c0808e55d9 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.scss +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .success { &_withBackground { diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.scss index d5507b9f569..0cc545a8adc 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.scss +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .warning { &_withBackground { diff --git a/packages/design-system/src/components/Link/Link.module.scss b/packages/design-system/src/components/Link/Link.module.scss index 58a82da0edd..fe720de8513 100644 --- a/packages/design-system/src/components/Link/Link.module.scss +++ b/packages/design-system/src/components/Link/Link.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $icon-alignment-offset-m: -0.1875rem; $icon-alignment-offset-s: -0.0625rem; diff --git a/packages/design-system/src/components/Linkable/LinkableStyles.module.scss b/packages/design-system/src/components/Linkable/LinkableStyles.module.scss index 5ebe169586d..cdc3f283311 100644 --- a/packages/design-system/src/components/Linkable/LinkableStyles.module.scss +++ b/packages/design-system/src/components/Linkable/LinkableStyles.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $icon-alignment-offset-m: -0.1875rem; $icon-alignment-offset-s: 0.0625rem; diff --git a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss index 0e334d51429..1d0e91fefd7 100644 --- a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss +++ b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .message { display: flex; diff --git a/packages/design-system/src/components/Message/variations/MessageDestructive.module.scss b/packages/design-system/src/components/Message/variations/MessageDestructive.module.scss index 126166f4c13..31f63fd7293 100644 --- a/packages/design-system/src/components/Message/variations/MessageDestructive.module.scss +++ b/packages/design-system/src/components/Message/variations/MessageDestructive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .destructive_border { border-left-color: tokens.$coral-color-danger-icon; diff --git a/packages/design-system/src/components/Message/variations/MessageInformation.module.scss b/packages/design-system/src/components/Message/variations/MessageInformation.module.scss index 03359f6b541..ac109da04af 100644 --- a/packages/design-system/src/components/Message/variations/MessageInformation.module.scss +++ b/packages/design-system/src/components/Message/variations/MessageInformation.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .information_border { border-left-color: tokens.$coral-color-info-icon; diff --git a/packages/design-system/src/components/Message/variations/MessageSuccess.module.scss b/packages/design-system/src/components/Message/variations/MessageSuccess.module.scss index b1581b1b5df..cac4a6c9ad2 100644 --- a/packages/design-system/src/components/Message/variations/MessageSuccess.module.scss +++ b/packages/design-system/src/components/Message/variations/MessageSuccess.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .success_border { border-left-color: tokens.$coral-color-success-icon; diff --git a/packages/design-system/src/components/Message/variations/MessageWarning.module.scss b/packages/design-system/src/components/Message/variations/MessageWarning.module.scss index e4781745444..f440b78e789 100644 --- a/packages/design-system/src/components/Message/variations/MessageWarning.module.scss +++ b/packages/design-system/src/components/Message/variations/MessageWarning.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .warning_border { border-left-color: tokens.$coral-color-warning-icon; diff --git a/packages/design-system/src/components/Modal/Modal.module.scss b/packages/design-system/src/components/Modal/Modal.module.scss index 5d35b68f754..4199761f58a 100644 --- a/packages/design-system/src/components/Modal/Modal.module.scss +++ b/packages/design-system/src/components/Modal/Modal.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .modal-backdrop::before, .modal-backdrop { diff --git a/packages/design-system/src/components/Popover/Popover.module.scss b/packages/design-system/src/components/Popover/Popover.module.scss index 46512512054..1817dc6a323 100644 --- a/packages/design-system/src/components/Popover/Popover.module.scss +++ b/packages/design-system/src/components/Popover/Popover.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .popover { background-color: tokens.$coral-color-neutral-background; diff --git a/packages/design-system/src/components/QualityBar/QualityRatioBar.module.scss b/packages/design-system/src/components/QualityBar/QualityRatioBar.module.scss index 5f484671957..ae8af4bebda 100644 --- a/packages/design-system/src/components/QualityBar/QualityRatioBar.module.scss +++ b/packages/design-system/src/components/QualityBar/QualityRatioBar.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $custom-quality-bar-placeholder-line-hover-height: 0.25rem; diff --git a/packages/design-system/src/components/RatioBar/RatioBar.module.scss b/packages/design-system/src/components/RatioBar/RatioBar.module.scss index da9d1c15297..269ecd188b4 100644 --- a/packages/design-system/src/components/RatioBar/RatioBar.module.scss +++ b/packages/design-system/src/components/RatioBar/RatioBar.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $custom-ratio-bar-height: 0.5rem; $custom-ratio-bar-line-height: 0.4rem; diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss index 60491cb880f..258392c2fff 100644 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .rich-radio-button { background-color: tokens.$coral-color-accent-background-weak; diff --git a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.scss b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.scss index 22062f4dc00..74088621935 100644 --- a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.scss +++ b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .skeleton { display: inline-block; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.scss index 818e18121f6..c7b60031890 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.scss +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .buttonIconSkeleton { width: tokens.$coral-sizing-m; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss index 83208b7f913..18f92e3e759 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .skeletonHeading { max-width: tokens.$coral-sizing-maximal; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.scss index ab345a94dd3..6f713ade795 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.scss +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @use '../../Form/Primitives/mixins' as Form; .skeleton-input { diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss index b505a7730ed..535ae953ec8 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .skeleton-sized-circle { border-radius: tokens.$coral-radius-round; diff --git a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.scss b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.scss index f9ade92b1f7..dd09ec36167 100644 --- a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.scss +++ b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .stack { display: flex; diff --git a/packages/design-system/src/components/Status/Primitive/Status.module.scss b/packages/design-system/src/components/Status/Primitive/Status.module.scss index ce36797b3a7..78d44b7e2f4 100644 --- a/packages/design-system/src/components/Status/Primitive/Status.module.scss +++ b/packages/design-system/src/components/Status/Primitive/Status.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .status { display: flex; diff --git a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.scss b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.scss index 48a5cc62c32..6e890ed69ef 100644 --- a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.scss +++ b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .progress { diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss index 2691c8ee822..29dcc1865cd 100644 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .horizontal { top: calc(#{tokens.$coral-sizing-xxxs} / 2 - 0.0313rem); diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss index 91524c0513c..67b1d579a75 100644 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .vertical { top: tokens.$coral-sizing-xxs; diff --git a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss index 3efbd325775..e68e6c9b740 100644 --- a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss +++ b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @keyframes pulse { 0% { diff --git a/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.scss b/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.scss index ac12620fe87..2de09ed29c7 100644 --- a/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.scss +++ b/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .skeleton { position: relative; diff --git a/packages/design-system/src/components/Stepper/Stepper.module.scss b/packages/design-system/src/components/Stepper/Stepper.module.scss index 287e0607617..fc67f543ee2 100644 --- a/packages/design-system/src/components/Stepper/Stepper.module.scss +++ b/packages/design-system/src/components/Stepper/Stepper.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .stepper { diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss index d02c6ab3b89..18d7b5db708 100644 --- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss +++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tablist { list-style-type: none; diff --git a/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.scss b/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.scss index 84e31a8b162..c9d6930271d 100644 --- a/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.scss +++ b/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tag { display: inline-block; diff --git a/packages/design-system/src/components/Tag/variations/TagBeta.module.scss b/packages/design-system/src/components/Tag/variations/TagBeta.module.scss index bdde32393c0..48699009bf0 100644 --- a/packages/design-system/src/components/Tag/variations/TagBeta.module.scss +++ b/packages/design-system/src/components/Tag/variations/TagBeta.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tag { color: tokens.$coral-color-beta-text-strong; diff --git a/packages/design-system/src/components/Tag/variations/TagDefault.module.scss b/packages/design-system/src/components/Tag/variations/TagDefault.module.scss index f4647c5f151..1257761b864 100644 --- a/packages/design-system/src/components/Tag/variations/TagDefault.module.scss +++ b/packages/design-system/src/components/Tag/variations/TagDefault.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tag { color: tokens.$coral-color-neutral-text; diff --git a/packages/design-system/src/components/Tag/variations/TagDestructive.module.scss b/packages/design-system/src/components/Tag/variations/TagDestructive.module.scss index 07d9b10eaf4..53bacdbcaf0 100644 --- a/packages/design-system/src/components/Tag/variations/TagDestructive.module.scss +++ b/packages/design-system/src/components/Tag/variations/TagDestructive.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tag { color: tokens.$coral-color-danger-text-strong; diff --git a/packages/design-system/src/components/Tag/variations/TagInformation.module.scss b/packages/design-system/src/components/Tag/variations/TagInformation.module.scss index 7cf554bbbcf..c54f46a6636 100644 --- a/packages/design-system/src/components/Tag/variations/TagInformation.module.scss +++ b/packages/design-system/src/components/Tag/variations/TagInformation.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tag { color: tokens.$coral-color-info-text-strong; diff --git a/packages/design-system/src/components/Tag/variations/TagSuccess.module.scss b/packages/design-system/src/components/Tag/variations/TagSuccess.module.scss index a762e933630..67831ace76d 100644 --- a/packages/design-system/src/components/Tag/variations/TagSuccess.module.scss +++ b/packages/design-system/src/components/Tag/variations/TagSuccess.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tag { color: tokens.$coral-color-success-text-strong; diff --git a/packages/design-system/src/components/Tag/variations/TagWarning.module.scss b/packages/design-system/src/components/Tag/variations/TagWarning.module.scss index 36be2c8f73e..21e9e219068 100644 --- a/packages/design-system/src/components/Tag/variations/TagWarning.module.scss +++ b/packages/design-system/src/components/Tag/variations/TagWarning.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tag { color: tokens.$coral-color-warning-text-strong; diff --git a/packages/design-system/src/components/ThemeProvider/ThemeProvider.scss b/packages/design-system/src/components/ThemeProvider/ThemeProvider.scss index ab7fd8b4056..816eed0096a 100644 --- a/packages/design-system/src/components/ThemeProvider/ThemeProvider.scss +++ b/packages/design-system/src/components/ThemeProvider/ThemeProvider.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; body { margin: 0; diff --git a/packages/design-system/src/components/Tooltip/Tooltip.module.scss b/packages/design-system/src/components/Tooltip/Tooltip.module.scss index 8a13f748d89..35353c1911e 100644 --- a/packages/design-system/src/components/Tooltip/Tooltip.module.scss +++ b/packages/design-system/src/components/Tooltip/Tooltip.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 tokens.$coral-spacing-xs; diff --git a/packages/design-system/src/components/illustrations/IconDefault.module.scss b/packages/design-system/src/components/illustrations/IconDefault.module.scss index 75ab42b6bd7..b2731610a0a 100644 --- a/packages/design-system/src/components/illustrations/IconDefault.module.scss +++ b/packages/design-system/src/components/illustrations/IconDefault.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .mediumIllustration { width: tokens.$coral-sizing-l; diff --git a/packages/design-system/src/components/illustrations/SpotDefault.module.scss b/packages/design-system/src/components/illustrations/SpotDefault.module.scss index a6eb902d994..5a563a3e7c9 100644 --- a/packages/design-system/src/components/illustrations/SpotDefault.module.scss +++ b/packages/design-system/src/components/illustrations/SpotDefault.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .largeIllustration { width: tokens.$coral-sizing-maximal; diff --git a/packages/design-system/src/stories/docs/Area.module.scss b/packages/design-system/src/stories/docs/Area.module.scss index 7d1fbea69b3..598ff397b8d 100644 --- a/packages/design-system/src/stories/docs/Area.module.scss +++ b/packages/design-system/src/stories/docs/Area.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .area { display: flex; diff --git a/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.scss b/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.scss index 361af2b6513..e6cc6558722 100644 --- a/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.scss +++ b/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-add-facet-popover { width: tokens.$coral-sizing-xxxl; diff --git a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss index 36ca3b2e0d0..c0c53be14a9 100644 --- a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss +++ b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $search-icon-offset: 1.125rem; $search-input-left-offset: 2rem; diff --git a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.scss b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.scss index 1ab7a70c183..9bffcaf289d 100644 --- a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.scss +++ b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .fs-badge-checkbox-form-checkboxes { max-height: tokens.$coral-sizing-xxxl; diff --git a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss index 2f6508c1cfe..325bd2f29e9 100644 --- a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss +++ b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; // stylelint-disable scss/selector-no-redundant-nesting-selector .tc-badge-faceted { diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss index 1bb1538ae99..7c24b46a00b 100644 --- a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss +++ b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .fs-badge-menu-form-items { max-height: tokens.$coral-sizing-xxxl; diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss index 21527d21a87..98e9f03700d 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss +++ b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $circle-size-large: 1.375rem !default; $circle-size-small: 1.125rem !default; diff --git a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss index 0d5f69c31ea..c4d49842517 100644 --- a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss +++ b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; // stylelint-disable property-no-vendor-prefix .tc-badge-slider-form-body { diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss b/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss index 0d1e1b24615..18c5eb764f2 100644 --- a/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss +++ b/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-basic-search { align-items: center; diff --git a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss index 410206cd681..961ac317026 100644 --- a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss +++ b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; // stylelint-disable order/order $toolbar-height: 3.4375rem; diff --git a/packages/forms/src/FormSkeleton.module.scss b/packages/forms/src/FormSkeleton.module.scss index 8b5d2d697b1..ea0c8ec47c9 100644 --- a/packages/forms/src/FormSkeleton.module.scss +++ b/packages/forms/src/FormSkeleton.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; :global(.tc-drawer-content:has([data-drawer-absolute-footer-buttons])) { margin-bottom: 66px; diff --git a/packages/forms/src/UIForm/UIForm.module.scss b/packages/forms/src/UIForm/UIForm.module.scss index 822c4bfd335..a06a746466c 100644 --- a/packages/forms/src/UIForm/UIForm.module.scss +++ b/packages/forms/src/UIForm/UIForm.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; :global(.tc-drawer-content:has([data-drawer-absolute-footer-buttons])) { margin-bottom: 50px; diff --git a/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.scss b/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.scss index 763ac87ff11..11e49af4775 100644 --- a/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.scss +++ b/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .code-widget__loading { display: grid; diff --git a/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss b/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss index 66fae260207..c671bcd902c 100644 --- a/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss +++ b/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $tf-comparator-operator-height: 1.875rem !default; $tf-comparator-operator-width: 3.125rem !default; diff --git a/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.scss b/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.scss index a3cdc0088a3..5568fd9a933 100644 --- a/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.scss +++ b/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .key-value { display: flex; diff --git a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss index 26a813c74f4..0ebe202a970 100644 --- a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss +++ b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .wrapper { position: relative; diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss index c23912d20e8..69d40acb9c0 100644 --- a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss +++ b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tf-array-item { display: flex; diff --git a/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.scss b/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.scss index ce9be6e93ff..e1cff6d7444 100644 --- a/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.scss +++ b/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tf-array-fieldset { &::before { diff --git a/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.scss b/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.scss index db5586dccb6..1ab9d3a270b 100644 --- a/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.scss +++ b/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tf-array-text-mode { ol { diff --git a/packages/storybook-docs/src/components/Card.module.scss b/packages/storybook-docs/src/components/Card.module.scss index 42fb9ee58de..71ec915367b 100644 --- a/packages/storybook-docs/src/components/Card.module.scss +++ b/packages/storybook-docs/src/components/Card.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .card { display: flex; diff --git a/packages/storybook-docs/src/components/FigmaIframe.module.scss b/packages/storybook-docs/src/components/FigmaIframe.module.scss index 76b05e59a26..ca7af94551b 100644 --- a/packages/storybook-docs/src/components/FigmaIframe.module.scss +++ b/packages/storybook-docs/src/components/FigmaIframe.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .iframe { border-radius: tokens.$coral-radius-s; diff --git a/packages/storybook-docs/src/components/FigmaImage.module.scss b/packages/storybook-docs/src/components/FigmaImage.module.scss index 34f0834c11a..6bc19d592c9 100644 --- a/packages/storybook-docs/src/components/FigmaImage.module.scss +++ b/packages/storybook-docs/src/components/FigmaImage.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .image { display: flex; diff --git a/packages/storybook-docs/src/components/Grid.module.scss b/packages/storybook-docs/src/components/Grid.module.scss index fe473f4c5be..ea2ee516483 100644 --- a/packages/storybook-docs/src/components/Grid.module.scss +++ b/packages/storybook-docs/src/components/Grid.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .grid { display: grid; diff --git a/packages/storybook-docs/src/components/Statuses/Status.module.scss b/packages/storybook-docs/src/components/Statuses/Status.module.scss index ac9c3babed5..fffa3cdb64a 100644 --- a/packages/storybook-docs/src/components/Statuses/Status.module.scss +++ b/packages/storybook-docs/src/components/Statuses/Status.module.scss @@ -1,5 +1,5 @@ /* stylelint-disable declaration-no-important */ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .badge { display: inline-flex; diff --git a/packages/storybook-docs/src/components/Trial/Trial.module.scss b/packages/storybook-docs/src/components/Trial/Trial.module.scss index 88e7771be4b..ca607035bf2 100644 --- a/packages/storybook-docs/src/components/Trial/Trial.module.scss +++ b/packages/storybook-docs/src/components/Trial/Trial.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .trial { padding: tokens.$coral-sizing-m; diff --git a/packages/storybook-docs/src/components/Use.module.scss b/packages/storybook-docs/src/components/Use.module.scss index 88e3212ebce..eee81ef4876 100644 --- a/packages/storybook-docs/src/components/Use.module.scss +++ b/packages/storybook-docs/src/components/Use.module.scss @@ -1,4 +1,4 @@ -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .block { padding: tokens.$coral-spacing-s;