diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml index 8a25ad47a33..574bb08a311 100644 --- a/.github/workflows/pr-lint.yml +++ b/.github/workflows/pr-lint.yml @@ -44,12 +44,8 @@ jobs: id: eslint run: yarn lint - - name: Get changed files - id: changed-files - uses: tj-actions/changed-files@2a968ff601949c81b47d9c1fdb789b0d25ddeea2 #v37.1.2 - - name: Merge lint - run: node merge-report.js ${{ steps.changed-files.outputs.all_changed_files }} + run: yarn lint-merge-report master ${GITHUB_HEAD_REF} - name: Annotate Code Linting Results uses: ataylorme/eslint-annotate-action@2c426a387ed738e9522e93abfcb4cfc57b46458a #v2.2.0 diff --git a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss index f7f30139232..fdb65de9c89 100644 --- a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss +++ b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_labels.scss @@ -3,64 +3,64 @@ // -------------------------------------------------- .label { - display: inline; - padding: .2em .6em .3em; - font-size: 75%; - font-weight: 700; - line-height: 1; - color: $label-color; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: .25em; + display: inline; + padding: 0.2em 0.6em 0.3em; + font-size: 75%; + font-weight: 700; + line-height: 1; + color: $label-color; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25em; - // [converter] extracted a& to a.label + // [converter] extracted a& to a.label - // Empty labels collapse automatically (not available in IE8) - &:empty { - display: none; - } + // Empty labels collapse automatically (not available in IE8) + &:empty { + display: none; + } - // Quick fix for labels in buttons - .btn & { - position: relative; - top: -1px; - } + // Quick fix for labels in buttons + .btn & { + position: relative; + top: -1px; + } } // Add hover effects, but only for links a.label { - &:hover, - &:focus { - color: $label-link-hover-color; - text-decoration: none; - cursor: pointer; - } + &:hover, + &:focus { + color: $label-link-hover-color; + text-decoration: none; + cursor: pointer; + } } // Colors // Contextual variations (linked labels get darker on :hover) .label-default { - @include label-variant($label-default-bg); + @include label-variant($label-default-bg); } .label-primary { - @include label-variant($label-primary-bg); + @include label-variant($label-primary-bg); } .label-success { - @include label-variant($label-success-bg); + @include label-variant($label-success-bg); } .label-info { - @include label-variant($label-info-bg); + @include label-variant($label-info-bg); } .label-warning { - @include label-variant($label-warning-bg); + @include label-variant($label-warning-bg); } .label-danger { - @include label-variant($label-danger-bg); + @include label-variant($label-danger-bg); } diff --git a/fork/react-bootstrap/package.json b/fork/react-bootstrap/package.json index 94c421ed244..21a29e0c47c 100644 --- a/fork/react-bootstrap/package.json +++ b/fork/react-bootstrap/package.json @@ -41,8 +41,8 @@ "react-dom": ">=16.3.0" }, "devDependencies": { - "@talend/scripts-core": "^13.3.0", - "@talend/scripts-config-react-webpack": "^15.4.0", + "@talend/scripts-core": "^14.0.0", + "@talend/scripts-config-react-webpack": "^15.4.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^13.5.0", diff --git a/merge-report.js b/merge-report.js deleted file mode 100644 index 06eed696a42..00000000000 --- a/merge-report.js +++ /dev/null @@ -1,62 +0,0 @@ -/* eslint-disable no-param-reassign */ -const fs = require('fs'); -const run = require('./run'); - -const reports = ['eslint-report.json', 'stylelint-report.json']; - -let buff = []; - -function transform(item) { - if (item.source && !item.filePath) { - item.filePath = item.source; - delete item.source; - } - if (item.warnings && !item.messages) { - item.messages = item.warnings.map(w => ({ - ...w, - severity: 1, - message: w.text, - ruleId: w.rule, - })); - item.warningCount = item.warnings.length; - delete item.warning; - } else if (item.messages) { - item.messages = item.messages.map(w => ({ ...w, severity: 1 })); - item.warningCount += item.errorCount; - item.errorCount = 0; - } - return item; -} -const info = run({ name: 'yarn', args: ['workspaces', '--silent', 'info'] }).then(info => - JSON.parse(info), -); - -const [, , ...files] = process.argv; - -Promise.all([info]).then(results => { - const [infos] = results; - // eslint-disable-next-line no-console - console.log({ files }); - function onlyIfInDiff(lint) { - return !!files.find(f => lint.filePath.endsWith(`/${f}`)); - } - Object.keys(infos).forEach(pkg => { - reports.forEach(report => { - const fpath = `${infos[pkg].location}/${report}`; - if (fs.existsSync(fpath)) { - try { - buff = buff.concat( - JSON.parse(fs.readFileSync(fpath)).map(transform).filter(onlyIfInDiff), - ); - } catch (e) { - console.error(e); - } - } - }); - }); - const target = `${process.cwd()}/eslint-report.json`; - - // eslint-disable-next-line no-console - console.log(`report merge into ${target}`); - fs.writeFileSync(target, JSON.stringify(buff, null, 2)); -}); diff --git a/package.json b/package.json index fba127b0407..0981f530f74 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "release": "yarn pre-release && yarn changeset publish", "lint-staged": "lint-staged", "lint": "cross-env WORKSPACE_RUN_FAIL=no-bail talend-yarn-workspace run lint", + "lint-merge-report": "talend-yarn-workspace lint-merge-report", "test": "cross-env TZ=Europe/Paris talend-yarn-workspace run test --silent", "test:update": "cross-env TZ=Europe/Paris yarn workspaces run test --silent -u", "test:cov": "cross-env TZ=Europe/Paris talend-yarn-workspace run test:cov", @@ -36,7 +37,8 @@ "**/webpack-dev-middleware": "^5.3.3", "**/@types/react": "^17.0.2", "**/@types/react-dom": "^17.0.2", - "**/i18next-scanner-typescript/typescript": "^4.9.5", + "**/i18next-scanner-typescript/typescript": "^5.0.4", + "**/browser-sync-client/typescript": "^5.0.4", "**/vinyl-fs/glob-parent": "^5.1.2", "**/fast-glob/glob-parent": "^5.1.2", "**/trim": "^1.0.1", @@ -62,7 +64,7 @@ "@types/react": "^17.0.62", "@types/react-dom": "^17.0.20", "terser-webpack-plugin": "^5.3.9", - "typescript": "^4.9.5", + "typescript": "^5.0.4", "webpack": "^5.87.0" } } diff --git a/packages/a11y/package.json b/packages/a11y/package.json index 391a229fa38..90e62eba67a 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -29,7 +29,7 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@talend/scripts-core": "^13.3.0", + "@talend/scripts-core": "^14.0.0", "@testing-library/react": "^12.1.5", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/packages/assets-api/package.json b/packages/assets-api/package.json index 468ba62d448..6e6c836ce5d 100644 --- a/packages/assets-api/package.json +++ b/packages/assets-api/package.json @@ -28,8 +28,8 @@ }, "dependencies": {}, "devDependencies": { - "@talend/scripts-core": "^13.3.0", - "@talend/scripts-config-react-webpack": "^15.4.0", + "@talend/scripts-core": "^14.0.0", + "@talend/scripts-config-react-webpack": "^15.4.1", "read-pkg-up": "^7.0.1" }, "publishConfig": { diff --git a/packages/cmf-cqrs/package.json b/packages/cmf-cqrs/package.json index ce95ddb36e1..22fac8db7f1 100644 --- a/packages/cmf-cqrs/package.json +++ b/packages/cmf-cqrs/package.json @@ -38,8 +38,8 @@ "redux-saga": "^1.2.3" }, "devDependencies": { - "@talend/scripts-core": "^13.3.0", - "@talend/scripts-config-react-webpack": "^15.4.0", + "@talend/scripts-core": "^14.0.0", + "@talend/scripts-config-react-webpack": "^15.4.1", "@testing-library/react-hooks": "^8.0.1", "mock-socket": "^9.2.1", "prop-types": "^15.8.1", diff --git a/packages/cmf-router/package.json b/packages/cmf-router/package.json index 7641f257c8b..8e6f58cb439 100644 --- a/packages/cmf-router/package.json +++ b/packages/cmf-router/package.json @@ -34,8 +34,8 @@ }, "devDependencies": { "@redux-saga/testing-utils": "^1.1.5", - "@talend/scripts-core": "^13.3.0", - "@talend/scripts-config-react-webpack": "^15.4.0", + "@talend/scripts-core": "^14.0.0", + "@talend/scripts-config-react-webpack": "^15.4.1", "react": "^17.0.2", "react-dom": "^17.0.2", "redux-saga-tester": "^1.0.874" diff --git a/packages/cmf/package.json b/packages/cmf/package.json index cf645aebf0c..c661fc653d3 100644 --- a/packages/cmf/package.json +++ b/packages/cmf/package.json @@ -55,8 +55,8 @@ }, "devDependencies": { "@redux-saga/testing-utils": "^1.1.5", - "@talend/scripts-core": "^13.3.0", - "@talend/scripts-config-react-webpack": "^15.4.0", + "@talend/scripts-core": "^14.0.0", + "@talend/scripts-config-react-webpack": "^15.4.1", "@testing-library/react": "^12.1.5", "jest-in-case": "^1.0.2", "jsdoc": "^3.6.11", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index fc8e073a7d6..76c6c65a9fd 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,55 @@ # @talend/react-components +## 11.0.0 + +### Major Changes + +- bfc02c4fb: Style now use design tokens instead of bootstrap sass variables + + We have updated the following components: + + - ActionBar + - ActionIconToggle + - AppLoader + - Badge + - CollapsiblePanel + - Datalist + - DataViewer + - DateTimePickers + Legacy + - Drawer + - EditableText + - Enumeration (bug on buttons) + - FilterBar + - FormatValue + - GuidedTour + - GridLayout aka Dashboard + - HeaderBar + - List (Virtualized and Composition) + - ListView + - MultiSelect + - Notification + - ObjectViewer + - PieChart + - Progress + - RadarChart + - ResourceList + - ResourcePicker + - RichLayout + - Skeleton + - Slider + - Status + - SubHeaderBar + - Toggle + - Tooltip + - TreeView + - Typeahead + +### Patch Changes + +- 40e70c055: chore: remove devDependencies to typescript +- Updated dependencies [bfc02c4fb] + - @talend/bootstrap-theme@8.0.0 + ## 10.3.5 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 57f352f5ed2..d1ff7c28ec5 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -35,7 +35,8 @@ }, "dependencies": { "@popperjs/core": "^2.11.8", - "@talend/bootstrap-theme": "^7.0.1", + "@talend/bootstrap-theme": "^8.0.0", + "@talend/design-tokens": "^2.7.3", "@talend/react-a11y": "^1.1.0", "@talend/icons": "^6.58.1", "@talend/utils": "^2.5.1", @@ -69,13 +70,13 @@ }, "devDependencies": { "@storybook/addon-actions": "^6.5.16", - "@talend/bootstrap-theme": "^7.0.1", + "@talend/bootstrap-theme": "^8.0.0", "@talend/design-system": "^7.10.0", "@talend/icons": "^6.58.1", "@talend/locales-design-system": "^7.3.0", "@talend/locales-tui-components": "^9.5.0", - "@talend/scripts-core": "^13.3.0", - "@talend/scripts-config-react-webpack": "^15.4.0", + "@talend/scripts-core": "^14.0.0", + "@talend/scripts-config-react-webpack": "^15.4.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^13.5.0", @@ -96,8 +97,7 @@ "react-dom": "^17.0.2", "react-i18next": "^11.18.6", "react-storybook-addon-props-combinations": "^1.1.0", - "react-test-renderer": "^17.0.2", - "typescript": "^4.9.5" + "react-test-renderer": "^17.0.2" }, "peerDependencies": { "@talend/design-system": "^7.5.0", @@ -113,5 +113,5 @@ "publishConfig": { "access": "public" }, - "version": "10.3.5" + "version": "11.0.0" } diff --git a/packages/components/src/ActionBar/ActionBar.module.scss b/packages/components/src/ActionBar/ActionBar.module.scss index a49aff48c5d..308b9e092c5 100644 --- a/packages/components/src/ActionBar/ActionBar.module.scss +++ b/packages/components/src/ActionBar/ActionBar.module.scss @@ -1,11 +1,11 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; -$tc-action-bar-background-color: $wild-sand !default; $tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default; .tc-actionbar-container { padding: 0 $padding-small; - background: $tc-action-bar-background-color; + background: tokens.$coral-color-neutral-background-medium; width: 100%; display: flex; @@ -61,19 +61,19 @@ $tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default; &:global(.separated)::after { content: '|'; - color: $silver; + color: tokens.$coral-color-neutral-text; margin-left: $padding-large; } } :global(.divider) { - color: $silver; + color: tokens.$coral-color-neutral-text; margin-right: $padding-normal; } } :global(.modal-footer) .tc-actionbar-container { - background-color: $wild-sand; + background-color: transparent; .navbar-left > *, .navbar-center > *, diff --git a/packages/components/src/ActionList/ActionList.component.js b/packages/components/src/ActionList/ActionList.component.js index 9e3d44f8339..278a707ecc8 100644 --- a/packages/components/src/ActionList/ActionList.component.js +++ b/packages/components/src/ActionList/ActionList.component.js @@ -88,6 +88,9 @@ function ActionList(props) { theme['tc-action-list'], 'tc-action-list', className, + { + 'nav-inverse': props.reverse, + }, )} > {actions.map((action, index) => ( @@ -135,6 +138,7 @@ if (process.env.NODE_ENV !== 'production') { onSelect: PropTypes.func, selected: actionPropType, className: PropTypes.string, + reverse: PropTypes.bool, }; } diff --git a/packages/components/src/ActionList/ActionList.stories.js b/packages/components/src/ActionList/ActionList.stories.js index 6810a0aeec5..c8660131739 100644 --- a/packages/components/src/ActionList/ActionList.stories.js +++ b/packages/components/src/ActionList/ActionList.stories.js @@ -58,6 +58,19 @@ export const Default = () => ( ); +export const Reverse = () => ( +
+ +
+); + export const WithCustomClassNames = () => (

You can add your custom classnames to the container and items

diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss index 245bd5646cd..35f21d9c78d 100644 --- a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss +++ b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; $tc-dropdown-loader-padding: $padding-small !default; $tc-dropdown-button-right-padding: 0.8rem; @@ -54,7 +55,7 @@ $tc-dropdown-button-right-padding: 0.8rem; margin: -$tc-dropdown-loader-padding 0; padding: $tc-dropdown-loader-padding 0; text-align: center; - background: $concrete; + background: tokens.$coral-color-neutral-background-medium; :global(.divider) + & { margin: -($tc-dropdown-loader-padding - 1px) 0; diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss index c8844608064..7a11d2c0127 100644 --- a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss +++ b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss @@ -1,10 +1,10 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; $tc-icon-toggle-size: 2.4rem !default; $tc-icon-toggle-icon-size: $svg-sm-size !default; -$tc-icon-toggle-border: 1px solid $gray; +$tc-icon-toggle-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border !default; $tc-icon-toggle-tick-size: 12px !default; -$tc-icon-toggle-tick-border: 1px solid $white; @mixin tc-icon-toggle($btn-size: $tc-icon-toggle-size, $icon-size: $tc-icon-toggle-icon-size) { height: $btn-size; @@ -32,7 +32,7 @@ $tc-icon-toggle-tick-border: 1px solid $white; padding: 0; svg { - color: $gray; + color: tokens.$coral-color-neutral-icon-weak; } &, @@ -43,10 +43,10 @@ $tc-icon-toggle-tick-border: 1px solid $white; &[disabled] { &:hover, &:focus { - border-color: $scooter; + border-color: tokens.$coral-color-accent-text; svg { - color: $scooter; + color: tokens.$coral-color-accent-text; } } } @@ -54,26 +54,30 @@ $tc-icon-toggle-tick-border: 1px solid $white; &:hover, &:active { box-shadow: none; - border-color: $scooter; + border-color: tokens.$coral-color-accent-text; background-color: transparent; svg { - color: $scooter; + color: tokens.$coral-color-accent-text; } } &.active { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: tokens.$coral-color-accent-background-strong; + border-color: tokens.$coral-color-accent-background; svg { - color: white; + color: tokens.$coral-color-accent-text-weak; } &:hover:not([disabled]), &:active { - background-color: $scooter; - border-color: $scooter; + background-color: tokens.$coral-color-accent-background-hover; + border-color: tokens.$coral-color-accent-background-hover; + + svg { + color: tokens.$coral-color-accent-text; + } } } @@ -85,7 +89,7 @@ $tc-icon-toggle-tick-border: 1px solid $white; border-radius: calc(#{$tc-icon-toggle-tick-size} / 2); right: -0.4rem; top: -0.4rem; - background: $scooter; - border: $tc-icon-toggle-tick-border; + background: tokens.$coral-color-accent-text; + border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; } } diff --git a/packages/components/src/AppLoader/constant.js b/packages/components/src/AppLoader/constant.js index b8e703877df..d5c7d76f0d5 100644 --- a/packages/components/src/AppLoader/constant.js +++ b/packages/components/src/AppLoader/constant.js @@ -12,6 +12,7 @@ body { height: 100vh; width: 100vw; background: #f6f6f6; + background: var(--coral-color-neutral-background-medium, #f6f6f6); } .tc-app-loader-icon { @@ -40,6 +41,7 @@ body { height: 100%; opacity: 0; border-color: #ababab; + border-color: var(--coral-color-neutral-border, #ababab); opacity: 1; animation: app-loader-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; } diff --git a/packages/components/src/AppSwitcher/AppSwitcher.module.scss b/packages/components/src/AppSwitcher/AppSwitcher.module.scss index 8c80f162bfe..a2cfe3a90b2 100644 --- a/packages/components/src/AppSwitcher/AppSwitcher.module.scss +++ b/packages/components/src/AppSwitcher/AppSwitcher.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; .tc-app-switcher { :global(.tc-svg-icon:first-child) { @@ -19,7 +20,7 @@ display: block; width: 1px; height: $font-size-large; - background-color: $white; + background-color: tokens.$coral-color-neutral-background; } &.hasIcon { @@ -35,7 +36,7 @@ height: $navbar-brand-logo-height; width: $navbar-brand-logo-height; background-repeat: no-repeat; - background-color: white; + background-color: tokens.$coral-color-neutral-background; } } diff --git a/packages/components/src/Badge/Badge.module.scss b/packages/components/src/Badge/Badge.module.scss index 08bb5d94c2e..161cfc73e34 100644 --- a/packages/components/src/Badge/Badge.module.scss +++ b/packages/components/src/Badge/Badge.module.scss @@ -1,4 +1,5 @@ @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-weight: normal !default; @@ -22,10 +23,11 @@ $tc-badge-small-padding: 0.8rem; $tc-badge-disabled-opacity: 0.62; -@mixin colored-badge($background-color, $color) { +@mixin colored-badge($background-color, $color, $border) { .tc-badge-button { background-color: $background-color; color: $color; + border-color: $border; .tc-badge-separator { background-color: $color; @@ -49,20 +51,20 @@ $tc-badge-disabled-opacity: 0.62; .tc-badge-button { display: inline-flex; - background-color: rgba($wild-sand, 0.5); + background-color: tokens.$coral-color-neutral-background-medium; border: solid 1px; - border-color: $gallery; + border-color: tokens.$coral-color-neutral-border-weak; border-radius: 25px; max-width: 100%; &.tc-badge-white { - background-color: $white; + background-color: tokens.$coral-color-neutral-background; } .tc-badge-category { flex-grow: 0; flex-shrink: 0; - color: black; + color: tokens.$coral-color-neutral-text; max-width: 110px; overflow: hidden; white-space: pre; @@ -74,7 +76,7 @@ $tc-badge-disabled-opacity: 0.62; flex-shrink: 0; height: 12px; width: 1px; - background-color: $gallery; + background-color: tokens.$coral-color-neutral-background-medium; margin: $padding-smaller; &.tc-badge-separator-icon { @@ -92,13 +94,13 @@ $tc-badge-disabled-opacity: 0.62; &-text, &-text-with-categ { - color: black; + color: tokens.$coral-color-neutral-text; text-overflow: ellipsis; overflow: hidden; } &-icon { - color: black; + color: tokens.$coral-color-neutral-icon; flex-grow: 0; flex-shrink: 0; margin-left: $padding-smaller; @@ -115,12 +117,12 @@ $tc-badge-disabled-opacity: 0.62; padding-left: $padding-smaller; svg { - color: $slate-gray; + color: tokens.$coral-color-neutral-icon-weak; display: block; margin: 0; &:hover { - color: $lochmara; + color: tokens.$coral-color-accent-text; } } } @@ -132,7 +134,7 @@ $tc-badge-disabled-opacity: 0.62; padding: 0; padding-left: $padding-smaller; text-transform: none; - color: black; + color: tokens.$coral-color-neutral-text; span { max-width: 16rem; @@ -146,7 +148,7 @@ $tc-badge-disabled-opacity: 0.62; margin: $padding-smaller; &:hover { - color: $lochmara; + color: tokens.$coral-color-accent-text; } } @@ -280,7 +282,7 @@ $tc-badge-disabled-opacity: 0.62; &-aslink { .tc-badge-button { - border-color: rgba($lochmara, 0.25); + border-color: tokens.$coral-color-accent-border; .tc-badge-category { display: none; @@ -293,14 +295,14 @@ $tc-badge-disabled-opacity: 0.62; .tc-badge-label { .tc-badge-label-text, .tc-badge-label-icon { - color: $lochmara; + color: tokens.$coral-color-accent-text; } } } &:hover:not(.tc-badge-disabled) { .tc-badge-button { - border-color: rgba($lochmara, 1); + border-color: tokens.$coral-color-accent-border; } } } @@ -310,7 +312,7 @@ $tc-badge-disabled-opacity: 0.62; .tc-badge-label-text, .tc-badge-label-text-with-categ, .tc-badge-label-icon { - color: $lochmara; + color: tokens.$coral-color-accent-text; } } } @@ -320,7 +322,7 @@ $tc-badge-disabled-opacity: 0.62; .tc-badge-label-text, .tc-badge-label-text-with-categ, .tc-badge-label-icon { - color: $lochmara; + color: tokens.$coral-color-accent-text; } } } @@ -332,30 +334,30 @@ $tc-badge-disabled-opacity: 0.62; } &--valid { - @include colored-badge(tint($rio-grande, 70%), shade($rio-grande, 30%)); + @include colored-badge(tokens.$coral-color-success-background, tokens.$coral-color-success-text, tokens.$coral-color-success-border); } &--invalid { - @include colored-badge(tint($chestnut-rose, 70%), shade($chestnut-rose, 30%)); + @include colored-badge(tokens.$coral-color-danger-background, tokens.$coral-color-danger-text, tokens.$coral-color-danger-border); } &--empty { - @include colored-badge($alto, $dove-gray); + @include colored-badge(tokens.$coral-color-neutral-background-medium, tokens.$coral-color-neutral-text, tokens.$coral-color-neutral-border); } &--pattern { - @include colored-badge(tint($jaffa, 70%), shade($jaffa, 30%)); + @include colored-badge(tokens.$coral-color-warning-background, tokens.$coral-color-warning-text, tokens.$coral-color-warning-border); } &--value { - @include colored-badge(tint($lochmara, 70%), shade($lochmara, 30%)); + @include colored-badge(tokens.$coral-color-accent-background, tokens.$coral-color-accent-text, tokens.$coral-color-accent-border); } &-dropdown { .tc-badge-button { &:not(.tc-badge-disabled) { &:global(.ally-focus-within) { - border-color: $lochmara; + border-color: tokens.$coral-color-accent-border; } } } diff --git a/packages/components/src/CircularProgress/CircularProgress.module.scss b/packages/components/src/CircularProgress/CircularProgress.module.scss index 3adb678a92d..c7aeb38422e 100644 --- a/packages/components/src/CircularProgress/CircularProgress.module.scss +++ b/packages/components/src/CircularProgress/CircularProgress.module.scss @@ -1,7 +1,8 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; // CircularProgress styles -$tc-circular-progress-light-fill: #eee !default; +$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; @@ -20,13 +21,13 @@ $tc-circular-progress-stroke-width: 5; .animate { animation: rotate 2s linear infinite; - & .path { + .path { animation: dash 1.3s ease-in-out infinite; } } .loaderlight { - & .path { + .path { stroke: $tc-circular-progress-light-fill; } } diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss index c0400658cab..ca6827da181 100644 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss @@ -1,12 +1,9 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; $tc-collapsible-panel-padding-smaller: $padding-smaller !default; $tc-collapsible-panel-padding-normal: $padding-normal !default; $tc-collapsible-panel-padding-larger: $padding-larger !default; -$tc-collapsible-panel-btn-color: #555964; -$tc-collapsible-descriptive-panel-content-description-color: $gray !default; -$tc-toggle-color: #555964 !default; -$tc-skeleton-background-color: #DFDFDF !default; @mixin type-col($width: 100%) { flex-basis: $width; @@ -23,7 +20,7 @@ $tc-skeleton-background-color: #DFDFDF !default; @mixin col-style { > :global(.btn) { line-height: 1em; - color: $tc-collapsible-panel-btn-color; + color: tokens.$coral-color-accent-text; } &.col-4 { @@ -64,7 +61,7 @@ $tc-skeleton-background-color: #DFDFDF !default; position: relative; &.selected { - border-left: 5px solid $brand-primary; + border-left: 5px solid tokens.$coral-color-accent-border; padding-left: 1px; } @@ -88,59 +85,59 @@ $tc-skeleton-background-color: #DFDFDF !default; &.info { :global(.panel-heading) { - border-left-color: $brand-info; + border-left-color: tokens.$coral-color-accent-text; } :global(.tc-status-label) { - color: $brand-info; + color: tokens.$coral-color-accent-text; } } &.success { :global(.panel-heading) { - border-left-color: $brand-success; + border-left-color: tokens.$coral-color-success-text; } :global(.tc-status-label) { - color: $brand-success; + color: tokens.$coral-color-success-text; } } &.danger { - border-color: $brand-danger; + border-color: tokens.$coral-color-danger-text; :global(.panel-heading) { - border-color: $brand-danger; + border-color: tokens.$coral-color-danger-text; } :global(.tc-status-label) { - color: $brand-danger; + color: tokens.$coral-color-danger-text; } } &.muted { :global(.panel-heading) { - border-left-color: $gray; + border-left-color: tokens.$coral-color-neutral-text-disabled; } :global(.tc-status-label) { - color: $gray; + color: tokens.$coral-color-neutral-text-disabled; } } &.warning { :global(.panel-heading) { - border-left-color: $brand-warning; + border-left-color: tokens.$coral-color-warning-text; } :global(.tc-status-label) { - color: $brand-warning; + color: tokens.$coral-color-warning-text; } } &.skeleton { :global(.panel-heading) { - border-color: $tc-skeleton-background-color; + border-color: tokens.$coral-color-neutral-background-strong; } } @@ -165,6 +162,10 @@ $tc-skeleton-background-color: #DFDFDF !default; width: 100%; padding-right: $padding-smaller; + &:hover { + background: transparent; + } + > * { @include col-style; padding: 0; @@ -202,7 +203,7 @@ $tc-skeleton-background-color: #DFDFDF !default; } &:hover { - background: $white; + background: tokens.$coral-color-neutral-background; cursor: pointer; .tc-status-label { @@ -264,30 +265,22 @@ $tc-skeleton-background-color: #DFDFDF !default; :global(.toggle) { svg { - fill: $tc-toggle-color; + fill: tokens.$coral-color-accent-text; height: 10px; width: 10px; } } - &.open { - :global(.toggle) { - svg { - fill: $white; - } - } - } - &.selected { .title, .detail { - color: $brand-primary; + color: tokens.$coral-color-accent-text; } } :global(.panel-heading) { padding: 0; - background-color: $white; + background-color: tokens.$coral-color-neutral-background-medium; border-color: transparent; } @@ -338,7 +331,7 @@ $tc-skeleton-background-color: #DFDFDF !default; .content-description { white-space: pre-wrap; padding-top: 5px; - color: $tc-collapsible-descriptive-panel-content-description-color; + color: tokens.$coral-color-neutral-text-weak; } } } diff --git a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss index 2056ad49e50..db8c830f330 100644 --- a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss +++ b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss @@ -1,8 +1,8 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; .tc-length-badge { - background-color: $gallery; - color: $dark-silver; + background-color: tokens.$coral-color-neutral-background-medium; + color: tokens.$coral-color-neutral-text-weak; font-size: 10px; padding: 2px 10px; top: 0; diff --git a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss b/packages/components/src/DataViewer/Core/Tree/Tree.module.scss index 2f997c64c12..9fe43b9e9b1 100644 --- a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss +++ b/packages/components/src/DataViewer/Core/Tree/Tree.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; :global(.tc-model .tc-tree) { overflow: auto; @@ -15,11 +16,15 @@ } &-node-border { - border-left: 1px solid $alto; + border-left: 1px solid tokens.$coral-color-neutral-border; margin-left: calc($svg-sm-size / 2); &:hover { - border-left-color: $silver-chalice; + border-left-color: tokens.$coral-color-neutral-border; } } + + li:hover { + background-color: tokens.$coral-color-neutral-background-strong; + } } diff --git a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss index 8d15a682f73..7652522eb05 100644 --- a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss +++ b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss @@ -1,11 +1,12 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; $default-height: 4rem !default; .tc-tree-header { align-items: center; - border-bottom: 0.1rem solid $alto; - color: $dove-gray; + border-bottom: 0.1rem solid tokens.$coral-color-neutral-border; + color: tokens.$coral-color-neutral-text; display: flex; font-weight: 600; height: $default-height; @@ -17,7 +18,7 @@ $default-height: 4rem !default; justify-content: space-between; &-icon { - color: $dark-silver; + color: tokens.$coral-color-neutral-text; text-transform: none; :global(.tc-svg-icon) { @@ -29,7 +30,7 @@ $default-height: 4rem !default; :global(.btn) { &:focus, &:hover { - color: $scooter; + color: tokens.$coral-color-accent-text; } } } diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss index 03c9b9d7264..6ad38e2de61 100644 --- a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss +++ b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; .tc-tree-branch-icon { display: flex; @@ -17,12 +18,12 @@ background: transparent; border: none; padding: 0; - color: $brand-primary; + color: tokens.$coral-color-accent-text; display: flex; &:focus, &:hover { - color: $scooter; + color: tokens.$coral-color-accent-text-hover; } } } diff --git a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss index 0be2b25b7bd..b2adbed63ea 100644 --- a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss +++ b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss @@ -1,21 +1,9 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; - +@use '~@talend/design-tokens/lib/tokens'; @import '~@talend/bootstrap-theme/src/theme/animation'; -$background-hover: rgba($dark-silver, 0.1) !default; -$background-highlight: rgba($scooter, 0.1) !default; $model-node-height: 3rem !default; -@mixin selection($background-color) { - background: $background-color; - bottom: 0; - content: ' '; - left: -100%; - position: absolute; - right: 0; - top: 0; -} - .tc-model { display: flex; flex-direction: column; @@ -26,7 +14,7 @@ $model-node-height: 3rem !default; &-leaf, &-branch { :global(.tc-simple-text-value) { - color: $dark-silver; + color: tokens.$coral-color-neutral-text-weak; } &-padding-left { @@ -41,18 +29,6 @@ $model-node-height: 3rem !default; position: absolute; top: 0; width: 100%; - - &:hover { - &::before { - @include selection($background-hover); - } - } - - &-highlighted { - &::before { - @include selection($background-highlight); - } - } } } @@ -69,7 +45,7 @@ $model-node-height: 3rem !default; &:focus, &:hover { :global(.tc-tree-branch-icon-caret) { - color: $scooter; + color: tokens.$coral-color-accent-text-hover; } } } diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss index 9bfdaed45e9..258026c7233 100644 --- a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss +++ b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss @@ -1,7 +1,7 @@ +/* stylelint-disable declaration-no-important */ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; -$background-hover: rgba($dark-silver, 0.1) !default; -$background-highlight: rgba($scooter, 0.1) !default; $hightlight-height: 2.2rem !default; $records-node-height: $hightlight-height !default; $border-size: 0.1rem; @@ -14,14 +14,13 @@ $border-size: 0.1rem; position: absolute; right: 0; top: 0; - height: $records-node-height; - pointer-events: none; + z-index: -1; } .tc-records-viewer { display: flex; flex-direction: column; - background: $concrete; + background: tokens.$coral-color-neutral-background-medium; height: 100%; &-tree { @@ -31,12 +30,14 @@ $border-size: 0.1rem; :global(.ReactVirtualized__Grid__innerScrollContainer) { overflow: initial !important; } + :global(.tc-svg-icon) { height: 1.2rem; width: 1.2rem; margin: 0; vertical-align: baseline; } + &-border { border-bottom: $border-size solid $alto; } @@ -62,10 +63,13 @@ $border-size: 0.1rem; &-highlighted { &::before { - @include selection($background-highlight); + @include selection(tokens.$coral-color-accent-background); } } + + /* stylelint-disable-next-line order/order */ min-height: $records-node-height; + &-quality { display: inline-flex; margin-left: -$padding-larger; @@ -74,42 +78,48 @@ $border-size: 0.1rem; position: absolute; } } + &-branch { flex-direction: column; justify-content: center; margin-left: 12px; &-highlighted::before { - @include selection($background-highlight); + @include selection(tokens.$coral-color-accent-background); } + &-content { position: relative; align-items: center; display: inline-flex; height: $records-node-height; + :global(.tc-length-badge) { margin-left: 10px; } &:hover { &::before { - @include selection($background-hover); + @include selection(tokens.$coral-color-neutral-background-strong); } + :global(.tc-records-viewer-branch-icon) { - color: $scooter; + color: tokens.$coral-color-accent-text; } + :global(.tc-tree-branch-icon-caret) { - color: $scooter; + color: tokens.$coral-color-accent-text; } + :global(.tc-length-badge) { - color: $scooter; - background-color: $white; + color: tokens.$coral-color-accent-text; + background-color: tokens.$coral-color-neutral-background; } } } &-icon { - color: $brand-primary; + color: tokens.$coral-color-accent-text; height: $svg-sm-size; width: $svg-sm-size; } @@ -118,10 +128,11 @@ $border-size: 0.1rem; display: inline-flex; margin-left: $padding-small; z-index: 1; + &:focus, &:hover { &::before { - @include selection($background-hover); + @include selection(tokens.$coral-color-neutral-background-strong); pointer-events: none; } } @@ -130,7 +141,7 @@ $border-size: 0.1rem; } @mixin chevron($color) { - border: 1px solid $scooter; + border: 1px solid tokens.$coral-color-accent-border; padding: 2px; border-radius: 10px; color: $color; @@ -140,29 +151,34 @@ $border-size: 0.1rem; position: absolute; left: -1.7rem; margin-right: $padding-smaller; + &-chevron { padding: 0; line-height: initial; min-height: initial; + svg { - @include chevron($scooter); + @include chevron(tokens.$coral-color-accent-text); } + &-filled { svg { - @include chevron($white); - background-color: $scooter; + @include chevron(tokens.$coral-color-accent-text-weak); + background-color: tokens.$coral-color-accent-background-strong; } } } + :global(.tc-svg-anchor) { background: transparent; border: none; padding: 0; - color: $brand-primary; + color: tokens.$coral-color-accent-text; display: flex; + &:focus, &:hover { - color: $scooter; + color: tokens.$coral-color-accent-text; } } } diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss index 9da7ca989f7..93b7a128c47 100644 --- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss +++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; .tc-simple-text { display: flex; @@ -14,7 +15,7 @@ margin-right: $padding-smaller; white-space: nowrap; flex-shrink: 1; - color: $dove-gray; + color: tokens.$coral-color-neutral-text-weak; vertical-align: top; } @@ -44,12 +45,12 @@ :global(.td-default-cell) { display: inline-block; - color: $brand-primary; + color: tokens.$coral-color-accent-text; font-family: 'Inconsolata'; } &-type { - color: $dark-silver; + color: tokens.$coral-color-neutral-text; opacity: 0.75; margin-left: $padding-smaller; } diff --git a/packages/components/src/DataViewer/theme.module.scss b/packages/components/src/DataViewer/theme.module.scss index 5a76e7e2a8c..2f76a7be1ca 100644 --- a/packages/components/src/DataViewer/theme.module.scss +++ b/packages/components/src/DataViewer/theme.module.scss @@ -1,4 +1,5 @@ @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; @@ -21,11 +22,11 @@ $tc-layout-skeleton-height: 9.6rem !default; &-left, &-right { - background-color: $wild-sand; + background-color: tokens.$coral-color-neutral-background-medium; } &-left { - border-right: 0.5rem solid white; + border-right: 0.5rem solid tokens.$coral-color-neutral-border-weak; width: 47rem; } diff --git a/packages/components/src/Datalist/Datalist.module.scss b/packages/components/src/Datalist/Datalist.module.scss index 54948d8f9a5..1ceb3c64c4e 100644 --- a/packages/components/src/Datalist/Datalist.module.scss +++ b/packages/components/src/Datalist/Datalist.module.scss @@ -1,4 +1,5 @@ @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; @@ -33,7 +34,7 @@ $tc-datalist-item-height: 4rem !default; .tc-datalist-item-icon { width: $svg-md-size; height: $svg-md-size; - color: $black; + color: tokens.$coral-color-neutral-icon; margin-right: $padding-normal; } } @@ -48,7 +49,7 @@ $tc-datalist-item-height: 4rem !default; height: $tc-datalist-item-height; &:hover { - background-color: $concrete; + background-color: tokens.$coral-color-neutral-background-medium; } } } diff --git a/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap b/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap index 46da79b9b75..a289c4dc1dd 100644 --- a/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap +++ b/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap @@ -143,7 +143,7 @@ exports[`DateRange.Picker should render 1`] = ` >
@@ -107,10 +109,10 @@ export const RadarChartClickableDot = () => ( } - fill="#19426c" + stroke={tokens.coralColorChartsDefault} + fill={tokens.coralColorChartsDefault} fillOpacity={0.1} name="Trust score" - stroke="#19426c" /> @@ -125,10 +127,10 @@ export const RadarChartCustomDot = () => ( } - fill="#19426c" + stroke={tokens.coralColorChartsDefault} + fill={tokens.coralColorChartsDefault} fillOpacity={0.1} name="Trust score" - stroke="#19426c" /> diff --git a/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap b/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap index 0348f2950c9..cd01bdcdcc1 100644 --- a/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap +++ b/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap @@ -10,6 +10,7 @@ exports[`RadarChart should render a RadarChart 1`] = ` class="recharts-surface" cx="210" cy="140" + fill="var(--coral-color-neutral-border, hsla(0, 0%, 55%, 1))" height="250" viewBox="0 0 420 250" width="420" diff --git a/packages/components/src/ResourceList/Resource/Resource.module.scss b/packages/components/src/ResourceList/Resource/Resource.module.scss index 58d9186aa92..f450013ca6a 100644 --- a/packages/components/src/ResourceList/Resource/Resource.module.scss +++ b/packages/components/src/ResourceList/Resource/Resource.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; .resource-item { padding-left: $padding-normal; @@ -31,7 +32,7 @@ white-space: nowrap; font-size: 14px; display: block; - color: $dove-gray; + color: tokens.$coral-color-neutral-text; margin: 0; } @@ -53,11 +54,11 @@ } &[name='talend-star'] { - color: $lightning-yellow; + color: tokens.$coral-color-warning-text; } &[name='talend-badge'] { - color: $brand-primary; + color: tokens.$coral-color-accent-text; } } } @@ -67,7 +68,7 @@ &:global(.selected), &:active { :global(.tc-svg-icon) { - color: $brand-primary; + color: tokens.$coral-color-accent-text; } .flags-container { @@ -76,25 +77,25 @@ } &:hover { - background-color: $wild-sand; + background-color: tokens.$coral-color-neutral-background-medium; .data-container { > .title, > .author, > .subtitle { - color: $scooter; + color: tokens.$coral-color-accent-text; } } } &:global(.selected) { - background: tint($scooter, 90); + background: tokens.$coral-color-accent-background; .data-container { > .title, > .author, > .subtitle { - color: $dove-gray; + color: tokens.$coral-color-neutral-text; } } } @@ -139,7 +140,7 @@ .tc-svg-icon { margin: 0 $padding-smaller; - color: $brand-primary; + color: tokens.$coral-color-accent-text; } } diff --git a/packages/components/src/ResourceList/ResourceList.module.scss b/packages/components/src/ResourceList/ResourceList.module.scss index da303e78591..be003410190 100644 --- a/packages/components/src/ResourceList/ResourceList.module.scss +++ b/packages/components/src/ResourceList/ResourceList.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; $tc-resource-list-margin-top: 2rem !default; $tc-resource-list-height: 25rem !default; @@ -35,7 +36,7 @@ $tc-resource-list-height: 25rem !default; display: inline-flex; align-items: center; font-style: italic; - color: $gray; + color: tokens.$coral-color-neutral-text; } &-icon { diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss index 28f6fe035d1..8b1f14096c0 100644 --- a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss +++ b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; .tc-resource-picker-name-filter { flex: 1; @@ -17,7 +18,7 @@ .remove { display: none; - color: opacify($gray, 0.2); + color: tokens.$coral-color-neutral-text; padding: $padding-smaller 0; line-height: 2rem; height: 100%; diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss index 96a701f0092..8c781b15408 100644 --- a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss +++ b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss @@ -5,7 +5,6 @@ $tc-resource-picker-order-chooser-icon-size: 0.6rem !default; .tc-resource-picker-order-chooser { display: flex; padding: 0; - background: $white; &:hover, &:focus, diff --git a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss index 32086fd993a..ac6208d2ca7 100644 --- a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss +++ b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss @@ -1,7 +1,8 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; -$tc-resource-picker-toolbar-favorite-color: $lightning-yellow !default; -$tc-resource-picker-toolbar-certified-color: $brand-primary !default; +$tc-resource-picker-toolbar-favorite-color: tokens.$coral-color-warning-text !default; +$tc-resource-picker-toolbar-certified-color: tokens.$coral-color-accent-text !default; .tc-resource-picker-state-filters { margin-right: $padding-normal; @@ -14,22 +15,16 @@ $tc-resource-picker-toolbar-certified-color: $brand-primary !default; // ActionIconToggle style reset : :global(.tc-icon-toggle) { - background: none; border: none; box-shadow: none; - width: $svg-md-size; - > svg { + > :global(.tc-icon) { margin: 0; - width: $svg-md-size; - height: $svg-md-size; - color: $dove-gray; } &:hover:not([disabled]), &:focus, &:active { - background: none; border: none; } } @@ -41,7 +36,7 @@ $tc-resource-picker-toolbar-certified-color: $brand-primary !default; &:global(.active), &:hover { &.tc-resource-picker-selection-filter > svg { - color: $scooter; + color: tokens.$coral-color-accent-text; } &.tc-resource-picker-favorite-filter > svg { diff --git a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss b/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss index 611e2696be7..116e291fc03 100644 --- a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss +++ b/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss @@ -1,8 +1,9 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; .tc-resource-list-toolbar { display: flex; - background: $white; + background: tokens.$coral-color-neutral-background-medium; > * { margin: 0 $padding-normal; diff --git a/packages/components/src/ResourcePicker/ResourcePicker.module.scss b/packages/components/src/ResourcePicker/ResourcePicker.module.scss index ba176f56caa..9e8b53a7855 100644 --- a/packages/components/src/ResourcePicker/ResourcePicker.module.scss +++ b/packages/components/src/ResourcePicker/ResourcePicker.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens'; $tc-resource-picker-toolbar-height: 3.5rem !default; $tc-resource-picker-height: 25rem !default; @@ -25,11 +26,7 @@ $tc-resource-picker-height: 25rem !default; } .resource-item { - border-bottom: 0.1rem solid $gallery; - - .tc-svg-icon { - color: $dove-gray; - } + border-bottom: 0.1rem solid tokens.$coral-color-neutral-border; } } } diff --git a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss index d2a22df7637..3b3481913c6 100644 --- a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss +++ b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss @@ -1,4 +1,5 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; $tc-header-title-font-size: 1.6rem !default; $tc-header-title-font-weight: 700 !default; @@ -10,7 +11,7 @@ $tc-header-title-font-weight: 700 !default; } .title { - color: $black; + color: tokens.$coral-color-neutral-text; flex-grow: 1; margin: 0; white-space: nowrap; diff --git a/packages/components/src/Rich/Layout/RichLayout.module.scss b/packages/components/src/Rich/Layout/RichLayout.module.scss index 9c40563ea8c..40bad98e2a1 100644 --- a/packages/components/src/Rich/Layout/RichLayout.module.scss +++ b/packages/components/src/Rich/Layout/RichLayout.module.scss @@ -1,19 +1,20 @@ @use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '~@talend/design-tokens/lib/tokens'; $tc-popover-border-width: 0.1rem !default; -$tc-popover-border-color: rgb(226, 226, 226) !default; +$tc-popover-border-color: tokens.$coral-color-neutral-border !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: #EDEDED !default; +$tc-popover-header-border-color: tokens.$coral-color-neutral-border !default; $tc-popover-header-footer-height: 7rem !default; :global(.popover) { padding: 0; border: $tc-popover-border-width solid $tc-popover-border-color; border-radius: $border-radius-base; - background-color: $white; + background-color: tokens.$coral-color-neutral-background; box-shadow: $tc-popover-box-shadow; max-width: $tc-popover-max-width; } @@ -42,7 +43,7 @@ $tc-popover-header-footer-height: 7rem !default; align-items: center; > :global(.tc-actionbar-container) { - background-color: $white; + background-color: tokens.$coral-color-neutral-background; padding: 0; } } @@ -65,7 +66,7 @@ $tc-popover-header-footer-height: 7rem !default; display: flex; flex-direction: row; margin: $padding-large; - color: $dove-gray; + color: tokens.$coral-color-neutral-text; } .content:not(:empty) { diff --git a/packages/components/src/SidePanel/SidePanel.component.js b/packages/components/src/SidePanel/SidePanel.component.js index 8f230f08146..90109896032 100644 --- a/packages/components/src/SidePanel/SidePanel.component.js +++ b/packages/components/src/SidePanel/SidePanel.component.js @@ -110,7 +110,14 @@ function SidePanel({ const toggleButtonTitle = docked ? expandLabel : collapseTitle; const Components = Inject.getAll(getComponent, { Action, ActionList }); return ( -