diff --git a/.changeset/hungry-parrots-mate.md b/.changeset/hungry-parrots-mate.md new file mode 100644 index 00000000000..4a6e3f13cb1 --- /dev/null +++ b/.changeset/hungry-parrots-mate.md @@ -0,0 +1,5 @@ +--- +'@talend/react-components': minor +--- + +TDOPS-4856 - Fix List colors taken from DS tokens diff --git a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss index de2e006608b..9bb7e4e41bf 100644 --- a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss +++ b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss @@ -12,8 +12,8 @@ $tc-toolbar-height: 7rem; padding-right: $padding-larger; background: tokens.$coral-color-neutral-background-medium; - border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; + border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; + border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; margin-bottom: 0; flex-shrink: 0; flex-grow: 0; 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 4ce84794eb6..21cc79f72ab 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss @@ -50,7 +50,7 @@ $tc-height: 4rem; min-height: $tc-height; &-select-all { - border-bottom: $tc-popover-border-width solid tokens.$coral-color-neutral-border; + border-bottom: $tc-popover-border-width solid tokens.$coral-color-neutral-border-weak; } &:global(.ally-focus-within), diff --git a/packages/components/src/List/Toolbar/Toolbar.module.scss b/packages/components/src/List/Toolbar/Toolbar.module.scss index cab66a2549b..539e7c25945 100644 --- a/packages/components/src/List/Toolbar/Toolbar.module.scss +++ b/packages/components/src/List/Toolbar/Toolbar.module.scss @@ -6,8 +6,8 @@ $tc-list-toolbar-height: 7rem !default; .tc-list-toolbar { background: tokens.$coral-color-neutral-background-medium; - border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; + border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; + border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; margin-bottom: 0; padding: 0 $padding-larger; diff --git a/packages/components/src/Rich/Layout/RichLayout.module.scss b/packages/components/src/Rich/Layout/RichLayout.module.scss index 40bad98e2a1..8b4092019f8 100644 --- a/packages/components/src/Rich/Layout/RichLayout.module.scss +++ b/packages/components/src/Rich/Layout/RichLayout.module.scss @@ -2,12 +2,12 @@ @use '~@talend/design-tokens/lib/tokens'; $tc-popover-border-width: 0.1rem !default; -$tc-popover-border-color: tokens.$coral-color-neutral-border !default; +$tc-popover-border-color: tokens.$coral-color-neutral-border-weak !default; $tc-popover-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default; $tc-popover-body-min-height: 10rem !default; $tc-popover-body-max-height: 30rem !default; $tc-popover-max-width: 40rem !default; -$tc-popover-header-border-color: tokens.$coral-color-neutral-border !default; +$tc-popover-header-border-color: tokens.$coral-color-neutral-border-weak !default; $tc-popover-header-footer-height: 7rem !default; :global(.popover) { diff --git a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss index 47a19f5bba7..d6e7fda1de9 100644 --- a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss +++ b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss @@ -14,7 +14,7 @@ $tc-list-table-cell-padding: $padding-small !default; background-color: tokens.$coral-color-neutral-background; .row { - border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; + border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; background: tokens.$coral-color-neutral-background; display: flex; align-items: center; @@ -25,7 +25,7 @@ $tc-list-table-cell-padding: $padding-small !default; background-color: tokens.$coral-color-neutral-background-medium; .cell { - border-right: 1px solid tokens.$coral-color-neutral-border; + border-right: 1px solid tokens.$coral-color-neutral-border-weak; } } } @@ -65,7 +65,7 @@ $tc-list-table-cell-padding: $padding-small !default; box-shadow: $shadow-default; .cell { - border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; + border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss index 293de273e9a..eada3edb254 100644 --- a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss +++ b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss @@ -6,7 +6,7 @@ .inner-box { background: tokens.$coral-color-neutral-background; - border: 1px solid tokens.$coral-color-neutral-border; + border: 1px solid tokens.$coral-color-neutral-border-weak; border-radius: 3px; height: 100%;