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;" >