From 18c1d97e52388e3c2deb74ee7171214c0bac0d23 Mon Sep 17 00:00:00 2001 From: Mathieu Huchet <59565911+tlnd-mhuchet@users.noreply.github.com> Date: Fri, 26 Jan 2024 11:45:27 +0100 Subject: [PATCH] fix: Update rem base value (#5132) * fix: Change REM base value to default * changeset * update components * update faceted-search * update forms * update stepper * update dataviz * update design-docs * changeset * Add placeholder prop to Select component * update design-tokens * Refactor styles in _scaffolding.scss * Update dependencies: @talend/bootstrap-sass (minor) This commit updates the dependencies in the project, specifically the '@talend/bootstrap-sass' package, to a minor version. * Update ButtonPrimitive, SizedIcon, ThemeProvider, and globalStyles * update DS stories * Update ThemeProvider.scss * update theme * update anapshots * setup cypress viewport to minimal supported resolution --------- Co-authored-by: Sebastien Romain --- .changeset/hot-pumpkins-help.md | 11 ++ .changeset/tall-steaks-flow.md | 79 ++++++++++++ .../src/AboutDialog/AboutDialog.module.scss | 14 +- .../src/ActionIntercom/Intercom.module.scss | 2 +- .../src/ActionList/ActionList.module.scss | 4 +- .../ActionDropdown/ActionDropdown.module.scss | 6 +- .../ActionIconToggle.module.scss | 6 +- .../components/src/Badge/Badge.module.scss | 18 +-- .../CircularProgress.module.scss | 6 +- .../CollapsiblePanel.module.scss | 14 +- .../Headers/TreeHeader/TreeHeader.module.scss | 4 +- .../ModelViewer/ModelViewer.module.scss | 4 +- .../RecordsViewer/RecordsViewer.module.scss | 10 +- .../src/DataViewer/theme.module.scss | 8 +- .../src/Datalist/Datalist.module.scss | 4 +- .../InputTimePicker.module.scss | 4 +- .../InputDateTimePicker.module.scss | 4 +- .../pickers/DatePicker/DatePicker.module.scss | 10 +- .../DateTimePicker/DateTimePicker.module.scss | 4 +- .../MonthPicker/MonthPicker.module.scss | 2 +- .../pickers/TimePicker/TimePicker.module.scss | 4 +- .../pickers/YearPicker/YearPicker.module.scss | 6 +- .../shared/styles/mixins.scss | 2 +- .../shared/styles/variables.scss | 2 +- .../__snapshots__/DateTimeView.test.js.snap | 4 +- .../CalendarPicker/CalendarPicker.module.scss | 4 +- .../pickers/DatePicker/DatePicker.module.scss | 20 +-- .../MonthPicker/MonthPicker.module.scss | 2 +- .../pickers/TimePicker/TimePicker.module.scss | 2 +- .../pickers/YearPicker/YearPicker.module.scss | 6 +- .../DateTimePickers/shared/styles/mixins.scss | 4 +- .../shared/styles/variables.scss | 6 +- .../__snapshots__/DateView.test.js.snap | 4 +- packages/components/src/Dialog/Dialog.scss | 6 +- .../components/src/Drawer/Drawer.module.scss | 4 +- .../src/EditableText/InlineForm.module.scss | 4 +- .../EditableText/PlainTextTitle.module.scss | 2 +- .../src/Enumeration/Enumeration.module.scss | 4 +- .../src/Enumeration/Header/Header.module.scss | 2 +- .../Enumeration/Items/Item/Item.module.scss | 4 +- .../src/FilterBar/FilterBar.module.scss | 4 +- .../src/FormatValue/FormatValue.module.scss | 4 +- .../Tile/Footer/TileFooter.module.scss | 2 +- .../Tile/Header/TileHeader.module.scss | 2 +- .../src/GuidedTour/GuidedTour.module.scss | 2 +- .../src/HeaderBar/HeaderBar.module.scss | 12 +- .../src/HttpError/HttpError.module.scss | 8 +- .../JSONSchemaRenderer.module.scss | 6 +- .../DisplayMode/DisplayModeToggle.scss | 2 +- .../ListComposition/SortBy/SortBy.module.scss | 2 +- .../Toolbar/ListToolbar.module.scss | 2 +- .../ColumnChooser/ColumnChooser.module.scss | 4 +- .../ColumnChooserBody.component.test.js.snap | 4 +- .../Toolbar/SelectAll/SelectAll.module.scss | 2 +- .../SelectSortBy/SelectSortBy.module.scss | 2 +- .../src/List/Toolbar/Toolbar.module.scss | 2 +- .../src/ListView/Header/Header.module.scss | 2 +- .../src/ListView/ListView.module.scss | 2 +- .../src/MultiSelect/ItemOption.module.scss | 2 +- .../src/Notification/Notification.module.scss | 2 +- .../JSONLike/JSONLike.module.scss | 12 +- .../QualityBar/QualityRatioBar.module.scss | 2 +- .../src/RatioBar/RatioBar.module.scss | 6 +- .../src/ResourceList/ResourceList.module.scss | 4 +- .../Toolbar/NameFilter/NameFilter.module.scss | 2 +- .../OrderChooser/OrderChooser.module.scss | 2 +- .../ResourcePicker/ResourcePicker.module.scss | 6 +- .../src/Rich/Error/RichError.module.scss | 2 +- .../Rich/HeaderTitle/HeaderTitle.module.scss | 2 +- .../src/Rich/Layout/RichLayout.module.scss | 12 +- .../src/SidePanel/SidePanel.module.scss | 18 +-- .../src/SubHeaderBar/SubHeaderBar.module.scss | 6 +- .../TitleSubHeader/TitleSubHeader.module.scss | 6 +- .../components/src/TabBar/TabBar.module.scss | 2 +- .../TooltipTrigger/TooltipTrigger.module.scss | 12 +- .../src/TreeView/TreeView.module.scss | 2 +- .../TreeViewItem/TreeViewItem.module.scss | 14 +- .../src/Typeahead/Typeahead.module.scss | 14 +- .../CellCheckbox/CellCheckbox.module.scss | 4 +- .../CellTitle/CellTitleActions.module.scss | 4 +- .../ListTable/ListTable.module.scss | 2 +- .../RowCollapsiblePanel.module.scss | 2 +- .../RowLarge/RowLarge.module.scss | 2 +- .../src/components/BarChart/_bar-chart.scss | 2 +- .../LineChart/LineChart.module.scss | 2 +- .../design-docs/src/StatusTable.module.scss | 2 +- packages/design-docs/src/Welcome.module.scss | 2 +- .../src/tokens/ColorComposition.module.scss | 2 +- .../src/tokens/TokenValue.module.scss | 2 +- packages/design-system/cypress.config.js | 2 + .../src/components/Accordion/Accordion.cy.tsx | 20 ++- .../__snapshots__/Accordion.test.tsx.snap | 18 +-- .../Badge/__snapshots__/Badge.test.tsx.snap | 4 +- .../__snapshots__/Breadcrumbs.test.tsx.snap | 2 +- .../Button/Primitive/ButtonPrimitive.tsx | 14 +- .../Button/__snapshots__/Button.test.tsx.snap | 4 +- .../__snapshots__/ButtonAsLink.test.tsx.snap | 2 +- .../Primitive/DropdownEntry.module.scss | 2 +- .../__snapshots__/Dropdown.test.tsx.snap | 4 +- .../__snapshots__/EmptyState.test.tsx.snap | 4 +- .../Form/Field/Input/Input.File.module.scss | 2 +- .../Input/Input.ToggleSwitch.module.scss | 10 +- .../Form/Primitives/Select/Select.tsx | 2 + .../Primitives/Select/SelectNoWrapper.tsx | 6 +- .../components/Form/Primitives/_mixins.scss | 6 +- .../Form/__snapshots__/Form.test.tsx.snap | 8 +- .../src/components/Icon/SizedIcon.tsx | 9 +- .../InlineEditingPrimitive.module.scss | 4 +- .../__snapshots__/InlineEditing.test.tsx.snap | 4 +- .../InlineMessagePrimitive.module.scss | 2 +- .../__snapshots__/InlineMessage.test.tsx.snap | 10 +- .../src/components/Link/Link.module.scss | 4 +- .../Link/__snapshots__/Link.test.tsx.snap | 4 +- .../__snapshots__/LinkAsButton.test.tsx.snap | 2 +- .../Linkable/LinkableStyles.module.scss | 4 +- .../__snapshots__/Linkable.test.tsx.snap | 4 +- .../Primitive/MessageStyles.module.scss | 2 +- .../__snapshots__/Message.test.tsx.snap | 8 +- .../src/components/Modal/Modal.module.scss | 2 +- .../variations/SkeletonButton.module.scss | 4 +- .../variations/SkeletonHeading.module.scss | 6 +- .../variations/SkeletonParagraph.module.scss | 4 +- .../Progress.horizontal.module.scss | 10 +- .../variations/Progress.vertical.module.scss | 6 +- .../Stepper/Step/Primitive/Step.module.scss | 10 +- .../Step/variations/Step.Skeleton.module.scss | 4 +- .../components/Stepper/Stepper.module.scss | 4 +- .../src/components/Switch/Switch.module.scss | 14 +- .../Tabs/Primitive/TabStyles.module.scss | 4 +- .../ThemeProvider/ThemeProvider.scss | 5 - .../src/stories/docs/Area.module.scss | 2 +- .../src/stories/form/Form.stories.tsx | 7 +- .../src/stories/icons/Icon.stories.tsx | 6 +- .../design-system/src/stories/icons/Icons.tsx | 7 +- .../src/stories/layout/Modal.stories.tsx | 2 +- .../src/stories/layout/Stack.stories.tsx | 13 +- .../src/stories/messaging/Popover.stories.tsx | 17 +-- .../stories/navigation/Accordion.stories.tsx | 22 ++-- .../navigation/FloatingDrawer.stories.tsx | 11 +- packages/design-tokens/src/_tokens.scss | 92 +++++++------- packages/design-tokens/src/dark/_index.scss | 92 +++++++------- packages/design-tokens/src/dark/_tokens.scss | 92 +++++++------- packages/design-tokens/src/dark/dictionary.ts | 120 +++++++++--------- packages/design-tokens/src/dark/index.ts | 92 +++++++------- packages/design-tokens/src/light/_index.scss | 92 +++++++------- .../design-tokens/src/light/dictionary.ts | 120 +++++++++--------- packages/design-tokens/src/light/index.ts | 92 +++++++------- .../design-tokens/src/qlik-light/_index.scss | 92 +++++++------- .../src/qlik-light/dictionary.ts | 120 +++++++++--------- .../design-tokens/src/qlik-light/index.ts | 92 +++++++------- .../AddFacetPopver.component.test.js.snap | 4 +- .../AdvancedSearch/AdvancedSearch.module.scss | 10 +- .../AdvancedSearch.component.test.js.snap | 4 +- .../BadgeDateForm.component.test.js.snap | 4 +- .../BadgeOperator/BadgeOperator.module.scss | 4 +- .../BadgeSlider/BadgeSlider.module.scss | 4 +- .../BasicSearch.component.test.js.snap | 4 +- .../FacetedToolbar/FacetedToolbar.module.scss | 2 +- packages/forms/src/FormSkeleton.module.scss | 2 +- .../Message.component.test.js.snap | 2 +- packages/forms/src/UIForm/UIForm.module.scss | 4 +- .../Widget.component.test.js.snap | 2 +- .../Button.component.test.js.snap | 2 +- .../__snapshots__/CheckBox.test.js.snap | 2 +- .../__snapshots__/CheckBoxes.test.js.snap | 2 +- .../CheckBox/displayMode/TextMode.module.scss | 6 +- .../fields/Comparator/Comparator.module.scss | 10 +- .../Datalist.component.test.js.snap | 2 +- .../__snapshots__/Date.component.test.js.snap | 6 +- .../DateTime.component.test.js.snap | 2 +- .../__snapshots__/Time.component.test.js.snap | 2 +- .../FieldTemplate.component.test.js.snap | 2 +- .../src/UIForm/fields/File/File.module.scss | 2 +- .../__snapshots__/File.component.test.js.snap | 2 +- .../fields/KeyValue/KeyValue.module.scss | 4 +- .../KeyValue.component.test.js.snap | 2 +- .../MultiSelectTag/MultiSelectTag.module.scss | 2 +- .../RadioOrSelect.component.test.js.snap | 2 +- .../Radios.component.test.js.snap | 2 +- .../ResourcePicker.component.test.js.snap | 2 +- .../Select.component.test.js.snap | 2 +- .../__snapshots__/Text.component.test.js.snap | 2 +- .../TextArea.component.test.js.snap | 2 +- .../Toggle.component.test.js.snap | 2 +- .../Array.component.test.js.snap | 24 ++-- .../ArrayItem.component.test.js.snap | 6 +- ...efaultArrayTemplate.component.test.js.snap | 20 +-- .../CollapsibleFieldset.module.scss | 2 +- ...CollapsibleFieldset.component.test.js.snap | 4 +- .../fieldsets/Columns/Columns.module.scss | 2 +- .../Columns.component.test.js.snap | 4 +- .../__snapshots__/FieldTemplate.test.js.snap | 4 +- .../StepperForm/StepperForm.module.scss | 2 +- packages/storybook-docs/src/globalStyles.scss | 1 - .../storybook-docs/src/managerStyles.scss | 4 - packages/theme/src/theme/_breadcrumbs.scss | 4 +- packages/theme/src/theme/_buttons.scss | 6 +- packages/theme/src/theme/_dropdowns.scss | 2 +- packages/theme/src/theme/_forms.checkbox.scss | 2 +- packages/theme/src/theme/_forms.legend.scss | 2 +- packages/theme/src/theme/_forms.radio.scss | 2 +- packages/theme/src/theme/_forms.scss | 8 +- packages/theme/src/theme/_forms.select.scss | 2 +- .../theme/src/theme/_forms.switch-nested.scss | 16 +-- packages/theme/src/theme/_forms.switch.scss | 16 +-- packages/theme/src/theme/_guidelines.scss | 16 +-- packages/theme/src/theme/_labels.scss | 4 +- packages/theme/src/theme/_navs.scss | 6 +- packages/theme/src/theme/_variables.scss | 4 +- packages/theme/src/theme/_visual-helpers.scss | 4 +- .../.storybook-templates/preview-head.html | 7 +- 211 files changed, 1171 insertions(+), 1058 deletions(-) create mode 100644 .changeset/hot-pumpkins-help.md create mode 100644 .changeset/tall-steaks-flow.md diff --git a/.changeset/hot-pumpkins-help.md b/.changeset/hot-pumpkins-help.md new file mode 100644 index 00000000000..7e619eff5b6 --- /dev/null +++ b/.changeset/hot-pumpkins-help.md @@ -0,0 +1,11 @@ +--- +'@talend/react-faceted-search': major +'@talend/design-docs': major +'@talend/react-components': major +'@talend/react-dataviz': major +'@talend/react-stepper': major +'@talend/react-forms': major +'@talend/bootstrap-sass': minor +--- + +`rem` values have been updated to correspond to the new `rem` base (16px) define by the design system diff --git a/.changeset/tall-steaks-flow.md b/.changeset/tall-steaks-flow.md new file mode 100644 index 00000000000..a7860545bef --- /dev/null +++ b/.changeset/tall-steaks-flow.md @@ -0,0 +1,79 @@ +--- +'@talend/design-system': major +--- + +**Breaking change** + +What? + +The setup of 1rem = 10px has been removed. 1rem = 16px is now the default value. + +Why? + +Qlik does not set it and use the default value of 1rem = 16px. +Using Coral component in Qlik integrations, we alter their ui by setting 1rem = 10px on the html element. + +How? + +You can use the following code to update all scss files in a folder, to convert rem values from 10px to 16px: + +```javascript +const fs = require('fs'); +const path = require('path'); + +// Get folder path from command-line arguments +const folderPath = process.argv[2]; + +if (!folderPath) { + console.error('Please provide a folder path as a command-line argument.'); + process.exit(1); +} + +// Regular expression to match and capture rem values (including potential negative values) +const remRegex = /(-?\d*\.?\d+)rem/g; + +// Function to divide rem values by 1.6 and keep the 'rem' unit with minimal decimal places +const replaceRem = (match, value) => { + const result = (parseFloat(value) / 1.6).toFixed(4).replace(/\.?0+$/, ''); + return result + 'rem'; +}; + +// Function to process a single file +const processFile = (filePath) => { + const cssInput = fs.readFileSync(filePath, 'utf8'); + const updatedCSS = cssInput.replace(remRegex, replaceRem); + fs.writeFileSync(filePath, updatedCSS, 'utf8'); + console.log(`Updated: ${filePath}`); +}; + +// Function to recursively find all .scss files in the specified folder +const findAllScssFiles = (folder) => { + const files = fs.readdirSync(folder); + const scssFiles = []; + + files.forEach((file) => { + const filePath = path.join(folder, file); + const stat = fs.statSync(filePath); + + if (stat.isDirectory()) { + scssFiles.push(...findAllScssFiles(filePath)); + } else if (file.endsWith('.scss')) { + scssFiles.push(filePath); + } + }); + + return scssFiles; +}; + +// Find all .scss files in the specified folder +const scssFiles = findAllScssFiles(folderPath); + +// Process each file +scssFiles.forEach(processFile); +``` + +To run the script, save it to a file with a .js extension (e.g., updateRemValues.js) and execute it using Node.js: + +```bash +node updateRemValues.js /path/to/your/folder +``` \ No newline at end of file diff --git a/packages/components/src/AboutDialog/AboutDialog.module.scss b/packages/components/src/AboutDialog/AboutDialog.module.scss index 09d3a0c4ef0..a647d91f629 100644 --- a/packages/components/src/AboutDialog/AboutDialog.module.scss +++ b/packages/components/src/AboutDialog/AboutDialog.module.scss @@ -4,24 +4,24 @@ :global(.modal-body) { text-align: center; padding: { - top: 1rem; - left: 3.2rem; - right: 3.2rem; + top: 0.625rem; + left: 2rem; + right: 2rem; } .about { &-logo { - width: 6.6rem; - height: 6.6rem; + width: 4.125rem; + height: 4.125rem; } &-excerpt { - margin-top: 2rem; + margin-top: 1.25rem; } &-versions { margin: 0 auto; - margin-top: 3rem; + margin-top: 1.875rem; text-align: justify; table-layout: fixed; diff --git a/packages/components/src/ActionIntercom/Intercom.module.scss b/packages/components/src/ActionIntercom/Intercom.module.scss index f015ecc218a..80c9e60d7a9 100644 --- a/packages/components/src/ActionIntercom/Intercom.module.scss +++ b/packages/components/src/ActionIntercom/Intercom.module.scss @@ -10,7 +10,7 @@ left: 50%; transform: translateX(-50%); color: #015A8E; - font-size: 2rem; + font-size: 1.25rem; line-height: initial; } } diff --git a/packages/components/src/ActionList/ActionList.module.scss b/packages/components/src/ActionList/ActionList.module.scss index 630db5200bf..e8837f0f9c3 100644 --- a/packages/components/src/ActionList/ActionList.module.scss +++ b/packages/components/src/ActionList/ActionList.module.scss @@ -7,9 +7,9 @@ /// @group Custom widgets //// -$tc-action-list-item-width: 20rem !default; +$tc-action-list-item-width: 12.5rem !default; $tc-action-list-item-icons-size: tokens.$coral-sizing-xxxs !default; -$tc-action-list-item-border-size: 0.2rem !default; +$tc-action-list-item-border-size: 0.125rem !default; $action-list-background-color: tokens.$coral-color-branding-background; diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss index 6812040b3dd..5da439426f3 100644 --- a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss +++ b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss @@ -2,7 +2,7 @@ @use '~@talend/design-tokens/lib/tokens'; $tc-dropdown-loader-padding: $padding-small !default; -$tc-dropdown-button-right-padding: 0.8rem; +$tc-dropdown-button-right-padding: 0.5rem; .tc-dropdown { &-button:global(.btn-link) { @@ -17,8 +17,8 @@ $tc-dropdown-button-right-padding: 0.8rem; padding-right: $tc-dropdown-button-right-padding; .tc-dropdown-caret { - width: 0.8rem; - height: 0.8rem; + width: 0.5rem; + height: 0.5rem; transition: transform 0.1s ease-in; will-change: transform; diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss index 7a11d2c0127..7748f0abc4d 100644 --- a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss +++ b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss @@ -1,7 +1,7 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; @use '~@talend/design-tokens/lib/tokens'; -$tc-icon-toggle-size: 2.4rem !default; +$tc-icon-toggle-size: 1.5rem !default; $tc-icon-toggle-icon-size: $svg-sm-size !default; $tc-icon-toggle-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border !default; $tc-icon-toggle-tick-size: 12px !default; @@ -87,8 +87,8 @@ $tc-icon-toggle-tick-size: 12px !default; width: $tc-icon-toggle-tick-size; height: $tc-icon-toggle-tick-size; border-radius: calc(#{$tc-icon-toggle-tick-size} / 2); - right: -0.4rem; - top: -0.4rem; + right: -0.25rem; + top: -0.25rem; background: tokens.$coral-color-accent-text; border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; } diff --git a/packages/components/src/Badge/Badge.module.scss b/packages/components/src/Badge/Badge.module.scss index 931c3a1ba9f..a358c4056c2 100644 --- a/packages/components/src/Badge/Badge.module.scss +++ b/packages/components/src/Badge/Badge.module.scss @@ -1,25 +1,25 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; @use '@talend/design-tokens/lib/tokens'; -$tc-badge-large-label-font-size: 1.4rem !default; +$tc-badge-large-label-font-size: 0.875rem !default; $tc-badge-large-label-font-weight: normal !default; $tc-badge-large-label-with-categ-font-weight: $font-weight-semi-bold !default; -$tc-badge-large-height: 2.4rem !default; +$tc-badge-large-height: 1.5rem !default; $tc-badge-large-vertical-padding: calc((#{$tc-badge-large-height} - #{$tc-badge-large-label-font-size} * #{$line-height-base}) / 2) !default; // $line-height-base / 2 $tc-badge-large-margin: $padding-smaller !default; $tc-badge-large-delete-icon-size: $svg-xs-size !default; $tc-badge-large-icon-size: $svg-xs-size !default; $tc-badge-large-padding: $padding-small; -$tc-badge-small-label-font-size: 1.2rem !default; +$tc-badge-small-label-font-size: 0.75rem !default; $tc-badge-small-label-font-weight: normal !default; $tc-badge-small-label-with-categ-font-weight: $font-weight-semi-bold !default; -$tc-badge-small-height: 2rem !default; +$tc-badge-small-height: 1.25rem !default; $tc-badge-small-vertical-padding: calc((#{$tc-badge-small-height} - #{$tc-badge-small-label-font-size} * #{$line-height-base}) / 2) !default; // $line-height-base / 2 $tc-badge-small-margin: $padding-smaller !default; $tc-badge-small-delete-icon-size: calc(#{$svg-sm-size} / 2) !default; $tc-badge-small-icon-size: $svg-xs-size !default; -$tc-badge-small-padding: 0.8rem; +$tc-badge-small-padding: 0.5rem; $tc-badge-disabled-opacity: 0.62; @@ -43,7 +43,7 @@ $tc-badge-disabled-opacity: 0.62; .tc-badge { display: inline-flex; - max-width: 23.5rem; + max-width: 14.6875rem; &:not(.tc-badge-readonly) { cursor: pointer; @@ -137,7 +137,7 @@ $tc-badge-disabled-opacity: 0.62; color: tokens.$coral-color-neutral-text; span { - max-width: 16rem; + max-width: 10rem; display: block; text-overflow: ellipsis; overflow: hidden; @@ -162,7 +162,7 @@ $tc-badge-disabled-opacity: 0.62; &.tc-badge-display-large { .tc-badge-separator { - margin-top: 0.4rem; + margin-top: 0.25rem; } .tc-badge-button { @@ -222,7 +222,7 @@ $tc-badge-disabled-opacity: 0.62; &.tc-badge-display-small { .tc-badge-separator { - margin-top: 0.3rem; + margin-top: 0.1875rem; } .tc-badge-button { diff --git a/packages/components/src/CircularProgress/CircularProgress.module.scss b/packages/components/src/CircularProgress/CircularProgress.module.scss index c7aeb38422e..b508b3ea57e 100644 --- a/packages/components/src/CircularProgress/CircularProgress.module.scss +++ b/packages/components/src/CircularProgress/CircularProgress.module.scss @@ -3,9 +3,9 @@ // CircularProgress styles $tc-circular-progress-light-fill: tokens.$coral-color-neutral-text-inverted !default; -$tc-circular-progress-small: 1.2rem; -$tc-circular-progress-regular: 2rem; -$tc-circular-progress-large: 4rem; +$tc-circular-progress-small: 0.75rem; +$tc-circular-progress-regular: 1.25rem; +$tc-circular-progress-large: 2.5rem; $tc-circular-progress-stroke-width: 5; .fixed { diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss index e6209d3b2d5..fac14d1990b 100644 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss @@ -143,7 +143,7 @@ $tc-collapsible-panel-padding-larger: $padding-larger !default; .panel-header-content { display: flex; - height: 4rem; + height: 2.5rem; align-items: center; padding: 0 $padding-normal; @@ -158,7 +158,7 @@ $tc-collapsible-panel-padding-larger: $padding-larger !default; justify-content: space-between; flex-basis: 100%; overflow: hidden; - font-size: 1.4rem; + font-size: 0.875rem; width: 100%; padding-right: $padding-smaller; @@ -185,13 +185,13 @@ $tc-collapsible-panel-padding-larger: $padding-larger !default; } :global(.tc-icon-toggle) { - height: 1.6rem; - width: 1.6rem; + height: 1rem; + width: 1rem; transform-origin: center; svg { - height: 1rem; - width: 1rem; + height: 0.625rem; + width: 0.625rem; } } @@ -308,7 +308,7 @@ $tc-collapsible-panel-padding-larger: $padding-larger !default; .tag { white-space: nowrap; - font-size: 1.2rem; + font-size: 0.75rem; } .detail { diff --git a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss index 7652522eb05..d56f17d7096 100644 --- a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss +++ b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss @@ -1,11 +1,11 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; @use '~@talend/design-tokens/lib/tokens'; -$default-height: 4rem !default; +$default-height: 2.5rem !default; .tc-tree-header { align-items: center; - border-bottom: 0.1rem solid tokens.$coral-color-neutral-border; + border-bottom: 0.0625rem solid tokens.$coral-color-neutral-border; color: tokens.$coral-color-neutral-text; display: flex; font-weight: 600; diff --git a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss index b2adbed63ea..92954c28c56 100644 --- a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss +++ b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss @@ -2,7 +2,7 @@ @use '~@talend/design-tokens/lib/tokens'; @import '~@talend/bootstrap-theme/src/theme/animation'; -$model-node-height: 3rem !default; +$model-node-height: 1.875rem !default; .tc-model { display: flex; @@ -86,7 +86,7 @@ $model-node-height: 3rem !default; &-quality-circles { display: inherit; - padding-top: 1.3rem; + padding-top: 0.8125rem; &-blink { @include heartbeat(object-blink); diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss index 258026c7233..2880ac95ac3 100644 --- a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss +++ b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss @@ -2,9 +2,9 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; @use '~@talend/design-tokens/lib/tokens'; -$hightlight-height: 2.2rem !default; +$hightlight-height: 1.375rem !default; $records-node-height: $hightlight-height !default; -$border-size: 0.1rem; +$border-size: 0.0625rem; @mixin selection($backgroundColor) { background: $backgroundColor; @@ -32,8 +32,8 @@ $border-size: 0.1rem; } :global(.tc-svg-icon) { - height: 1.2rem; - width: 1.2rem; + height: 0.75rem; + width: 0.75rem; margin: 0; vertical-align: baseline; } @@ -149,7 +149,7 @@ $border-size: 0.1rem; .tc-leaf-overflow-icon { position: absolute; - left: -1.7rem; + left: -1.0625rem; margin-right: $padding-smaller; &-chevron { diff --git a/packages/components/src/DataViewer/theme.module.scss b/packages/components/src/DataViewer/theme.module.scss index 2f76a7be1ca..78c2ae3a15f 100644 --- a/packages/components/src/DataViewer/theme.module.scss +++ b/packages/components/src/DataViewer/theme.module.scss @@ -1,8 +1,8 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; @use '~@talend/design-tokens/lib/tokens'; -$tc-layout-skeleton-width: 9.6rem !default; -$tc-layout-skeleton-height: 9.6rem !default; +$tc-layout-skeleton-width: 6rem !default; +$tc-layout-skeleton-height: 6rem !default; .tc-twoviewers-layout { display: flex; @@ -26,8 +26,8 @@ $tc-layout-skeleton-height: 9.6rem !default; } &-left { - border-right: 0.5rem solid tokens.$coral-color-neutral-border-weak; - width: 47rem; + border-right: 0.3125rem solid tokens.$coral-color-neutral-border-weak; + width: 29.375rem; } &-right { diff --git a/packages/components/src/Datalist/Datalist.module.scss b/packages/components/src/Datalist/Datalist.module.scss index 1ceb3c64c4e..452123280f1 100644 --- a/packages/components/src/Datalist/Datalist.module.scss +++ b/packages/components/src/Datalist/Datalist.module.scss @@ -1,8 +1,8 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; @use '~@talend/design-tokens/lib/tokens'; -$tc-datalist-items-max-height: 32rem !default; -$tc-datalist-item-height: 4rem !default; +$tc-datalist-items-max-height: 20rem !default; +$tc-datalist-item-height: 2.5rem !default; .tc-datalist-form { width: 100%; diff --git a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss index 7f677d454a0..44b7f34b951 100644 --- a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss +++ b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss @@ -1,8 +1,8 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; @use '~@talend/design-tokens/lib/tokens'; -$tc-timepicker-width: 8rem !default; -$tc-timepicker-height: 17rem !default; +$tc-timepicker-width: 5rem !default; +$tc-timepicker-height: 10.625rem !default; $tc-timepicker-box-shadow: tokens.$coral-elevation-shadow-neutral-m !default; $tc-timepicker-z-index: $zindex-dropdown !default; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss index 14368a0724a..6c80ea95cbb 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss @@ -1,8 +1,8 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; @use '~@talend/design-tokens/lib/tokens'; -$tc-datetimepicker-width: 31rem !default; -$tc-datetimepicker-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default; +$tc-datetimepicker-width: 19.375rem !default; +$tc-datetimepicker-box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2) !default; $tc-datetimepicker-z-index: $zindex-dropdown !default; .popper { 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 107898e5edd..bb442501623 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss @@ -15,7 +15,7 @@ width: 100%; position: absolute; left: 0; - top: 2.3rem; + top: 1.4375rem; } th { @@ -31,18 +31,18 @@ } .calendar-row { - height: 3.6rem; + height: 2.25rem; text-align: center; .calendar-day { @include picker-action; - height: 2.4rem; - width: 2.4rem; + height: 1.5rem; + width: 1.5rem; background: transparent; border: none; border-radius: 50%; - line-height: 2.4rem; + line-height: 1.5rem; padding: 0; &.today { 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 1511148576f..b7e00b3eee2 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss @@ -6,8 +6,8 @@ .container { color: tokens.$coral-color-neutral-text; - min-width: 29rem; - min-height: 35.2rem; + min-width: 18.125rem; + min-height: 22rem; padding: $padding-normal; } 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 4762f494866..0c5ce55f57a 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss @@ -33,7 +33,7 @@ @include picker-action; flex: 1; - height: 5.7rem; + height: 3.5625rem; width: 100%; background: transparent; 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 d793816c605..b603ee7c2be 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss @@ -18,7 +18,7 @@ .utc { color: tokens.$coral-color-neutral-text; - font-size: 1.2rem; + font-size: 0.75rem; } } @@ -30,7 +30,7 @@ > input.time-input { border: 1px solid tokens.$coral-color-neutral-border; - height: 3rem; + height: 1.875rem; text-align: center; width: 100%; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.module.scss index 9bed406193f..ea891d2ce82 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.module.scss @@ -14,11 +14,11 @@ } .scroll { - line-height: 1.2rem; + line-height: 0.75rem; min-height: auto; svg { - height: 1.2rem; + height: 0.75rem; } } @@ -27,7 +27,7 @@ background: none; border: none; - height: 2.5rem; + height: 1.5625rem; width: 100%; } } diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss index 4a5429cc2c2..838e50aae57 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss @@ -8,7 +8,7 @@ } @mixin picker-action { - font-size: 1.2rem; + font-size: 0.75rem; &.selected { background-color: tokens.$coral-color-accent-background; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss index 692a9ee89c9..573e96695d0 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'; -$border-default: 0.1rem solid tokens.$coral-color-neutral-border !default; +$border-default: 0.0625rem solid tokens.$coral-color-neutral-border !default; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/__snapshots__/DateTimeView.test.js.snap b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/__snapshots__/DateTimeView.test.js.snap index f6db9cd6794..65b4f6f12e2 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/__snapshots__/DateTimeView.test.js.snap +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/__snapshots__/DateTimeView.test.js.snap @@ -25,7 +25,7 @@ exports[`DateTimeView should render 1`] = ` aria-hidden="true" pointer-events="none" shape-rendering="geometricPrecision" - style="width: 1.6rem; height: 1.6rem;" + style="width: 1rem; height: 1rem;" >