diff --git a/.changeset/sixty-llamas-cheer.md b/.changeset/sixty-llamas-cheer.md new file mode 100644 index 00000000000..0e9150caf6f --- /dev/null +++ b/.changeset/sixty-llamas-cheer.md @@ -0,0 +1,27 @@ +--- +'@talend/react-faceted-search-query-client': major +'@talend/scripts-config-react-webpack': major +'@talend/json-schema-form-core': major +'@talend/react-faceted-search': major +'@talend/storybook-docs': major +'@talend/design-system': major +'@talend/design-tokens': major +'@talend/react-flow-designer': major +'@talend/router-bridge': major +'@talend/react-bootstrap': major +'@talend/assets-api': major +'@talend/react-cmf-router': major +'@talend/react-components': major +'@talend/react-containers': major +'@talend/ui-playground': major +'@talend/react-cmf-cqrs': major +'@talend/react-dataviz': major +'@talend/react-stepper': major +'@talend/react-forms': major +'@talend/react-sagas': major +'@talend/bootstrap-theme': major +'@talend/http': major +'@talend/react-cmf': major +--- + +chore: move from sass to css diff --git a/package.json b/package.json index 0697400608e..d42dbac509b 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "test:cron": "talend-yarn-workspace run test:cron", "start-components": "yarn workspace @talend/react-components run start", "start-containers": "yarn workspace @talend/react-containers run start", + "start-design-system": "yarn workspace @talend/design-system run start", "start-stepper": "yarn workspace @talend/react-stepper run start", "start-forms": "yarn workspace @talend/react-forms run start", "start-theme": "yarn workspace @talend/bootstrap-theme run start", diff --git a/packages/components/README.md b/packages/components/README.md index 0e289d70ffa..d8453d16890 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -76,7 +76,7 @@ The API we have for all components is the following for an event handler function onClick(event, payload) { //do what ever you want } -return +return ; ``` ### Write tests + docs @@ -164,6 +164,14 @@ The stories are registred this way: - npm run lint -> check the code style - npm run watch -> watch the source to trigger a build +## CSS module build helper + +Run `node css.js` from this package root to mirror every `*.module.scss` to a sibling `*.module.css` and rewrite the imports that point to it. + +- Scans the package for `*.module.scss` files (ignoring node_modules, lib, lib-esm, .turbo, .git). +- Compiles each of them with `sass` into a `*.module.css` that sits in the same folder. +- Updates `.js`, `.jsx`, `.ts`, and `.tsx` files so `.module.scss` imports point to the new `.module.css` files. + ## LICENSE Copyright (c) 2006-2016 Talend diff --git a/packages/components/css.js b/packages/components/css.js new file mode 100755 index 00000000000..984594e7ba4 --- /dev/null +++ b/packages/components/css.js @@ -0,0 +1,184 @@ +#!/usr/bin/env node + +/** + * Run `node css.js` from this package root to compile every `*.module.scss` to a sibling `*.module.css` and rewrite imports accordingly. + * + * - Scans the package for `*.module.scss` files (ignoring node_modules, lib, lib-esm, .turbo, .git). + * - Compiles each of them with `sass` into a `*.module.css` that sits in the same folder. + * - Updates `.js`, `.jsx`, `.ts`, and `.tsx` files so `.module.scss` imports point to the new `.module.css` files. + * - Deletes the original `*.module.scss` files after successful compilation. + */ +/* eslint-disable no-console */ +const fs = require('fs'); +const path = require('path'); +const sass = require('sass'); +const { pathToFileURL } = require('url'); + +const PACKAGE_ROOT = path.resolve(__dirname); +const NODE_MODULES_PATH = path.join(PACKAGE_ROOT, 'node_modules'); +const WORKSPACE_NODE_MODULES = path.resolve(PACKAGE_ROOT, '..', '..', 'node_modules'); +const IGNORED_DIRECTORIES = new Set(['node_modules', 'lib', 'lib-esm', '.turbo', '.git']); + +function assertPackageRoot() { + const packageJson = path.join(PACKAGE_ROOT, 'package.json'); + if (!fs.existsSync(packageJson)) { + throw new Error( + `No package.json found in ${PACKAGE_ROOT}. Run this script from the package root.`, + ); + } +} + +function toRelative(filePath) { + return path.relative(PACKAGE_ROOT, filePath) || '.'; +} + +function getPkgRoot(filename) { + let current = path.dirname(filename); + while (true) { + if (fs.existsSync(path.join(current, 'package.json'))) { + return `${current}/`; + } + const parent = path.dirname(current); + if (parent === current) { + throw new Error(`Unable to find package.json for ${filename}`); + } + current = parent; + } +} + +function getInfo(importPath) { + const parts = importPath.split('/'); + const isScoped = importPath.startsWith('@'); + const packageName = isScoped ? `${parts[0]}/${parts[1]}` : parts[0]; + const rest = isScoped ? parts.slice(2) : parts.slice(1); + const mainPath = require.resolve(packageName, { paths: [PACKAGE_ROOT] }); + return { + base: getPkgRoot(mainPath), + url: rest.join('/'), + }; +} + +function createImporter() { + // https://sass-lang.com/documentation/js-api/interfaces/Options + return { + // Allow tilde-prefixed imports the same way webpack does. + findFileUrl(url) { + if (!url.startsWith('~')) { + return null; // fallback to default resolution via loadPaths + } + const info = getInfo(url.slice(1)); + return new URL(info.url, pathToFileURL(info.base)); + }, + }; +} + +function buildSassOptions(sourceFile) { + const loadPaths = [path.dirname(sourceFile), PACKAGE_ROOT, NODE_MODULES_PATH]; + if (fs.existsSync(WORKSPACE_NODE_MODULES)) { + loadPaths.push(WORKSPACE_NODE_MODULES); + } + return { + loadPaths, + sourceMap: false, + importers: [createImporter()], + }; +} + +function walk(startDir, matcher, acc = []) { + const entries = fs.readdirSync(startDir, { withFileTypes: true }); + for (const entry of entries) { + const fullPath = path.join(startDir, entry.name); + if (entry.isDirectory()) { + if (IGNORED_DIRECTORIES.has(entry.name)) { + continue; + } + walk(fullPath, matcher, acc); + continue; + } + if (entry.isFile() && matcher(entry.name, fullPath)) { + acc.push(fullPath); + } + } + return acc; +} + +function findModuleScssFiles() { + return walk(PACKAGE_ROOT, name => name.endsWith('.module.scss')); +} + +function findCodeFiles() { + const extensions = new Set(['.js', '.jsx', '.ts', '.tsx']); + return walk(PACKAGE_ROOT, name => extensions.has(path.extname(name))); +} + +function compileModuleScss(filePath) { + try { + const targetPath = filePath.replace(/\.module\.scss$/, '.module.css'); + const result = sass.compile(filePath, buildSassOptions(filePath)); + fs.mkdirSync(path.dirname(targetPath), { recursive: true }); + fs.writeFileSync(targetPath, result.css); + console.log(`compiled ${toRelative(filePath)} -> ${toRelative(targetPath)}`); + return { source: filePath, target: targetPath }; + } catch (e) { + console.error(`failed to compile ${toRelative(filePath)}: ${e.message}`); + return null; + } +} + +function updateModuleImports(filePath) { + // Do not rewrite this script itself + if (path.resolve(filePath) === path.resolve(__filename)) { + return false; + } + const content = fs.readFileSync(filePath, 'utf8'); + if (!content.includes('.module.scss')) { + return false; + } + const updated = content.replace(/\.module\.scss\b/g, '.module.css'); + if (updated === content) { + return false; + } + fs.writeFileSync(filePath, updated); + console.log(`rewrote imports in ${toRelative(filePath)}`); + return true; +} + +function main() { + assertPackageRoot(); + const scssFiles = findModuleScssFiles(); + if (scssFiles.length === 0) { + console.log('No *.module.scss files found.'); + return; + } + + console.log(`Found ${scssFiles.length} *.module.scss file(s).`); + const compiled = scssFiles.map(compileModuleScss).filter(Boolean); + + const codeFiles = findCodeFiles(); + let updatedImports = 0; + codeFiles.forEach(filePath => { + if (updateModuleImports(filePath)) { + updatedImports += 1; + } + }); + + // Delete SCSS sources that compiled successfully + let deletedCount = 0; + compiled.forEach(({ source, target }) => { + try { + if (fs.existsSync(target)) { + fs.unlinkSync(source); + deletedCount += 1; + console.log(`deleted ${toRelative(source)}`); + } + } catch (e) { + console.warn(`could not delete ${toRelative(source)}: ${e.message}`); + } + }); + + console.log( + `Done: generated ${compiled.length} CSS file(s), updated imports in ${updatedImports} file(s), deleted ${deletedCount} SCSS file(s).`, + ); +} + +main(); diff --git a/packages/components/custom.d.ts b/packages/components/custom.d.ts index a1208016512..147c17d7373 100644 --- a/packages/components/custom.d.ts +++ b/packages/components/custom.d.ts @@ -9,3 +9,8 @@ declare module '*.scss' { const contents: Record; export default contents; } + +declare module '*.css' { + const contents: Record; + export default contents; +} diff --git a/packages/components/src/AboutDialog/AboutDialog.component.js b/packages/components/src/AboutDialog/AboutDialog.component.js index 5e3b69b4ee0..88f876a3ce8 100644 --- a/packages/components/src/AboutDialog/AboutDialog.component.js +++ b/packages/components/src/AboutDialog/AboutDialog.component.js @@ -6,7 +6,7 @@ import Icon from '../Icon'; import Skeleton from '../Skeleton'; import I18N_DOMAIN_COMPONENTS from '../constants'; import getDefaultT from '../translate'; -import theme from './AboutDialog.module.scss'; +import theme from './AboutDialog.module.css'; import { AboutDialogTable, Text } from './AboutDialogTable.component'; function AboutDialog({ diff --git a/packages/components/src/AboutDialog/AboutDialog.module.css b/packages/components/src/AboutDialog/AboutDialog.module.css new file mode 100644 index 00000000000..721334876d6 --- /dev/null +++ b/packages/components/src/AboutDialog/AboutDialog.module.css @@ -0,0 +1,25 @@ +/* stylelint-disable color-hex-case */ +.about-dialog :global(.modal-body) { + text-align: center; + padding-top: 0.625rem; + padding-left: 2rem; + padding-right: 2rem; +} +.about-dialog :global(.modal-body) .about-logo { + width: 4.125rem; + height: 4.125rem; +} +.about-dialog :global(.modal-body) .about-excerpt { + margin-top: 1.25rem; +} +.about-dialog :global(.modal-body) .about-versions { + margin: 0 auto; + margin-top: 1.875rem; + text-align: justify; + table-layout: fixed; +} +.about-dialog :global(.modal-body) .about-versions th, +.about-dialog :global(.modal-body) .about-versions td { + padding: 5px; + text-align: left; +} diff --git a/packages/components/src/AboutDialog/AboutDialog.module.scss b/packages/components/src/AboutDialog/AboutDialog.module.scss deleted file mode 100644 index 1c3c28db2db..00000000000 --- a/packages/components/src/AboutDialog/AboutDialog.module.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.about-dialog { - :global(.modal-body) { - text-align: center; - padding: { - top: 0.625rem; - left: 2rem; - right: 2rem; - } - - .about { - &-logo { - width: 4.125rem; - height: 4.125rem; - } - - &-excerpt { - margin-top: 1.25rem; - } - - &-versions { - margin: 0 auto; - margin-top: 1.875rem; - text-align: justify; - table-layout: fixed; - - th, - td { - padding: $padding-smaller; - text-align: left; - } - } - } - } -} diff --git a/packages/components/src/AboutDialog/AboutDialogTable.component.js b/packages/components/src/AboutDialog/AboutDialogTable.component.js index ce9f6b43428..d678effbe0a 100644 --- a/packages/components/src/AboutDialog/AboutDialogTable.component.js +++ b/packages/components/src/AboutDialog/AboutDialogTable.component.js @@ -2,7 +2,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import Skeleton from '../Skeleton'; import { getI18nInstance } from '../translate'; -import theme from './AboutDialog.module.scss'; +import theme from './AboutDialog.module.css'; const i18n = getI18nInstance(); diff --git a/packages/components/src/ActionBar/ActionBar.component.js b/packages/components/src/ActionBar/ActionBar.component.js index 2c5534a7a8d..3baa5c27767 100644 --- a/packages/components/src/ActionBar/ActionBar.component.js +++ b/packages/components/src/ActionBar/ActionBar.component.js @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { Action, Actions, ActionDropdown, ActionSplitDropdown } from '../Actions'; import Inject from '../Inject'; import I18N_DOMAIN_COMPONENTS from '../constants'; -import css from './ActionBar.module.scss'; +import css from './ActionBar.module.css'; const DISPLAY_MODES = { DROPDOWN: 'dropdown', diff --git a/packages/components/src/ActionBar/ActionBar.module.css b/packages/components/src/ActionBar/ActionBar.module.css new file mode 100644 index 00000000000..cf1043ddba4 --- /dev/null +++ b/packages/components/src/ActionBar/ActionBar.module.css @@ -0,0 +1,67 @@ +/* stylelint-disable color-hex-case */ +.tc-actionbar-container { + padding: 0 10px; + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + width: 100%; + display: flex; +} +.tc-actionbar-container .navbar-left, +.tc-actionbar-container .navbar-right { + display: flex; + align-items: center; + justify-content: center; +} +.tc-actionbar-container .navbar-left > *, +.tc-actionbar-container .navbar-right > * { + margin: 10px 20px 10px 0; +} +.tc-actionbar-container .navbar-left > :last-child, +.tc-actionbar-container .navbar-right > :last-child { + margin-right: 0; +} +.tc-actionbar-container .navbar-right { + margin-right: 0; + margin-left: auto; +} +.tc-actionbar-container .navbar-center { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; +} +.tc-actionbar-container :global(.navbar-form), +.tc-actionbar-container :global(.navbar-btn) { + margin: 10px 20px 10px 0; +} +.tc-actionbar-container :global(.navbar-text), +.tc-actionbar-container :global(.navbar-link) { + margin: 15px 30px 10px 0; +} +.tc-actionbar-container :global(.navbar-form) :global(.form-group) { + padding-top: inherit; +} +.tc-actionbar-container :global(.navbar-form) button { + margin: 0; +} +.tc-actionbar-container :global(.btn-icon-text) { + margin: 10px 15px 10px 0; +} +.tc-actionbar-container :global(.btn-icon-text):global(.separated)::after { + content: '|'; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + margin-left: 20px; +} +.tc-actionbar-container :global(.divider) { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + margin-right: 15px; +} + +:global(.modal-footer) .tc-actionbar-container { + background-color: transparent; +} +:global(.modal-footer) .tc-actionbar-container .navbar-left > *, +:global(.modal-footer) .tc-actionbar-container .navbar-center > *, +:global(.modal-footer) .tc-actionbar-container .navbar-right > * { + margin-top: 0; + margin-bottom: 0; +} diff --git a/packages/components/src/ActionBar/ActionBar.module.scss b/packages/components/src/ActionBar/ActionBar.module.scss deleted file mode 100644 index b02e2278f1c..00000000000 --- a/packages/components/src/ActionBar/ActionBar.module.scss +++ /dev/null @@ -1,84 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default; - -.tc-actionbar-container { - padding: 0 $padding-small; - background: tokens.$coral-color-neutral-background-medium; - width: 100%; - display: flex; - - .navbar-left, - .navbar-right { - display: flex; - align-items: center; - justify-content: center; - - > * { - margin: $tc-action-bar-margin; - } - - > :last-child { - margin-right: 0; - } - } - - .navbar-right { - margin-right: 0; - margin-left: auto; - } - - .navbar-center { - display: flex; - flex-grow: 1; - align-items: center; - justify-content: center; - } - - :global(.navbar-form), - :global(.navbar-btn) { - margin: $tc-action-bar-margin; - } - - :global(.navbar-text), - :global(.navbar-link) { - margin: $padding-normal $padding-larger $padding-small 0; - } - - :global(.navbar-form) { - :global(.form-group) { - padding-top: inherit; - } - - button { - margin: 0; - } - } - - :global(.btn-icon-text) { - margin: $padding-small $padding-normal $padding-small 0; - - &:global(.separated)::after { - content: '|'; - color: tokens.$coral-color-neutral-text; - margin-left: $padding-large; - } - } - - :global(.divider) { - color: tokens.$coral-color-neutral-text; - margin-right: $padding-normal; - } -} - -:global(.modal-footer) .tc-actionbar-container { - background-color: transparent; - - .navbar-left > *, - .navbar-center > *, - .navbar-right > * { - margin-top: 0; - margin-bottom: 0; - } -} diff --git a/packages/components/src/ActionIntercom/Intercom.component.js b/packages/components/src/ActionIntercom/Intercom.component.js index 83f96d2a12f..6b86a7b1b73 100644 --- a/packages/components/src/ActionIntercom/Intercom.component.js +++ b/packages/components/src/ActionIntercom/Intercom.component.js @@ -9,7 +9,7 @@ import IntercomService from './Intercom.service'; import getDefaultT from '../translate'; import I18N_DOMAIN_COMPONENTS from '../constants'; -import theme from './Intercom.module.scss'; +import theme from './Intercom.module.css'; function Intercom({ id, className, config, t, tooltipPlacement }) { const [show, setShow] = useState(false); diff --git a/packages/components/src/ActionIntercom/Intercom.module.css b/packages/components/src/ActionIntercom/Intercom.module.css new file mode 100644 index 00000000000..369316a23a0 --- /dev/null +++ b/packages/components/src/ActionIntercom/Intercom.module.css @@ -0,0 +1,15 @@ +@charset "UTF-8"; +/* stylelint-disable color-hex-case */ +.tc-intercom { + position: relative; +} +.tc-intercom.open::after { + content: '▲'; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + color: #015a8e; + font-size: 1.25rem; + line-height: initial; +} diff --git a/packages/components/src/ActionIntercom/Intercom.module.scss b/packages/components/src/ActionIntercom/Intercom.module.scss deleted file mode 100644 index da362c3cf94..00000000000 --- a/packages/components/src/ActionIntercom/Intercom.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-intercom { - position: relative; - - &.open::after { - content: '\25b2'; - position: absolute; - top: 100%; - left: 50%; - transform: translateX(-50%); - color: #015A8E; - font-size: 1.25rem; - line-height: initial; - } -} diff --git a/packages/components/src/ActionList/ActionList.component.js b/packages/components/src/ActionList/ActionList.component.js index 30c909cb7a3..f15b53497e8 100644 --- a/packages/components/src/ActionList/ActionList.component.js +++ b/packages/components/src/ActionList/ActionList.component.js @@ -9,7 +9,7 @@ import { Action } from '../Actions'; import I18N_DOMAIN_COMPONENTS from '../constants'; import Inject from '../Inject'; -import theme from './ActionList.module.scss'; +import theme from './ActionList.module.css'; /** * return the formatted action id diff --git a/packages/components/src/ActionList/ActionList.module.css b/packages/components/src/ActionList/ActionList.module.css new file mode 100644 index 00000000000..d3904a5c51a --- /dev/null +++ b/packages/components/src/ActionList/ActionList.module.css @@ -0,0 +1,24 @@ +/* stylelint-disable color-hex-case */ +.tc-action-list { + display: inline-block; + min-width: 12.5rem; + background-color: var( + --coral-color-branding-background, + linear-gradient(133deg, hsl(210, 62%, 26%) 0%, hsl(254, 47%, 23%) 100%) + ); +} +.tc-action-list .tc-action-list-item :global .tc-svg-icon { + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + margin: 0; +} +.tc-action-list .tc-action-list-item :global .btn.btn-link { + padding: 15px; + text-overflow: inherit; + text-transform: none; +} +.tc-action-list .tc-action-list-item :global .btn.btn-link > span { + margin-left: 15px; + vertical-align: middle; + transition: 0.1s opacity ease-out; +} diff --git a/packages/components/src/ActionList/ActionList.module.scss b/packages/components/src/ActionList/ActionList.module.scss deleted file mode 100644 index e9fc5c40801..00000000000 --- a/packages/components/src/ActionList/ActionList.module.scss +++ /dev/null @@ -1,42 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -@use '@talend/design-tokens/lib/_tokens' as tokens; - -//// -/// Action list -/// @group Custom widgets -//// - -$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.125rem !default; - -$action-list-background-color: tokens.$coral-color-branding-background; - -.tc-action-list { - display: inline-block; - min-width: $tc-action-list-item-width; - background-color: $action-list-background-color; - - .tc-action-list-item { - :global { - .tc-svg-icon { - width: $tc-action-list-item-icons-size; - height: $tc-action-list-item-icons-size; - margin: 0; - } - - .btn.btn-link { - padding: $padding-normal; - text-overflow: inherit; - text-transform: none; - - > span { - margin-left: $padding-normal; - vertical-align: middle; - transition: 0.1s opacity ease-out; - } - } - } - } -} diff --git a/packages/components/src/Actions/ActionButton/ActionButton.component.js b/packages/components/src/Actions/ActionButton/ActionButton.component.js index 3986f3e7687..92c5d28ecaa 100644 --- a/packages/components/src/Actions/ActionButton/ActionButton.component.js +++ b/packages/components/src/Actions/ActionButton/ActionButton.component.js @@ -8,7 +8,7 @@ import CircularProgress from '../../CircularProgress'; import Skeleton from '../../Skeleton'; import Icon from '../../Icon'; import getPropsFrom from '../../utils/getPropsFrom'; -import theme from './ActionButton.module.scss'; +import theme from './ActionButton.module.css'; import I18N_DOMAIN_COMPONENTS from '../../constants'; import getDefaultT from '../../translate'; import OverlayTrigger from '../../OverlayTrigger'; diff --git a/packages/components/src/Actions/ActionButton/ActionButton.module.css b/packages/components/src/Actions/ActionButton/ActionButton.module.css new file mode 100644 index 00000000000..7981bf6378d --- /dev/null +++ b/packages/components/src/Actions/ActionButton/ActionButton.module.css @@ -0,0 +1,5 @@ +/* stylelint-disable color-hex-case */ +.tc-action-button-skeleton-circle { + margin-left: 5px; + margin-right: 10px; +} diff --git a/packages/components/src/Actions/ActionButton/ActionButton.module.scss b/packages/components/src/Actions/ActionButton/ActionButton.module.scss deleted file mode 100644 index 6782335ffb3..00000000000 --- a/packages/components/src/Actions/ActionButton/ActionButton.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-action-button-skeleton-circle { - margin-left: $padding-smaller; - margin-right: $padding-small; -} diff --git a/packages/components/src/Actions/ActionButton/Button.stories.js b/packages/components/src/Actions/ActionButton/Button.stories.js index 21e9af0390f..dc3f3bdd4ac 100644 --- a/packages/components/src/Actions/ActionButton/Button.stories.js +++ b/packages/components/src/Actions/ActionButton/Button.stories.js @@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions'; import ActionButton from './ActionButton.component'; -import theme from './Button.stories.module.scss'; +import theme from './Button.stories.module.css'; const myAction = { label: 'Click me', diff --git a/packages/components/src/Actions/ActionButton/Button.stories.module.scss b/packages/components/src/Actions/ActionButton/Button.stories.module.css similarity index 55% rename from packages/components/src/Actions/ActionButton/Button.stories.module.scss rename to packages/components/src/Actions/ActionButton/Button.stories.module.css index 3fd0c0f1084..1927ae3c7e4 100644 --- a/packages/components/src/Actions/ActionButton/Button.stories.module.scss +++ b/packages/components/src/Actions/ActionButton/Button.stories.module.css @@ -1,5 +1,4 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - +/* stylelint-disable color-hex-case */ .storybook-wrapped-action { margin-top: 200px; margin-bottom: 250px; diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js b/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js index d3a5fd0fce2..0fd2ec68296 100644 --- a/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js +++ b/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js @@ -10,7 +10,7 @@ import { withTranslation } from 'react-i18next'; import omit from 'lodash/omit'; import Inject from '../../Inject'; import OverlayTrigger from '../../OverlayTrigger'; -import theme from './ActionDropdown.module.scss'; +import theme from './ActionDropdown.module.css'; import Tag from '../../Tag'; import TooltipTrigger from '../../TooltipTrigger'; import Icon from '../../Icon'; diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.css b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.css new file mode 100644 index 00000000000..ae8d727967b --- /dev/null +++ b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.css @@ -0,0 +1,47 @@ +@charset "UTF-8"; +/* stylelint-disable color-hex-case */ +.tc-dropdown-button:global(.btn-link):hover, +.tc-dropdown-button:global(.btn-link):focus, +.tc-dropdown-button:global(.btn-link):active { + text-decoration: none; +} +.tc-dropdown-button { + padding-right: 0.5rem; +} +.tc-dropdown-button .tc-dropdown-caret { + width: 0.5rem; + height: 0.5rem; + transition: transform 0.1s ease-in; + will-change: transform; +} +.tc-dropdown-button .tc-dropdown-caret.tc-dropdown-caret-open { + transform: rotate(-180deg); +} +.tc-dropdown-button.ellipsis::after { + content: '⋮'; + font-size: 2em; + font-weight: bold; + vertical-align: inherit; +} +.tc-dropdown-button.ellipsis + ul { + min-width: auto; +} +.tc-dropdown-item a img { + max-width: initial; +} +.tc-dropdown-item a img, +.tc-dropdown-item a svg { + margin: 0 5px; +} +.tc-dropdown-item-badge { + margin-left: 5px; +} +.tc-dropdown-loader { + margin: -10px 0; + padding: 10px 0; + text-align: center; + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +:global(.divider) + .tc-dropdown-loader { + margin: -9px 0; +} diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss deleted file mode 100644 index 667e751462e..00000000000 --- a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-dropdown-loader-padding: $padding-small !default; -$tc-dropdown-button-right-padding: 0.5rem; - -.tc-dropdown { - &-button:global(.btn-link) { - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - - &-button { - padding-right: $tc-dropdown-button-right-padding; - - .tc-dropdown-caret { - width: 0.5rem; - height: 0.5rem; - transition: transform 0.1s ease-in; - will-change: transform; - - &.tc-dropdown-caret-open { - transform: rotate(-180deg); - } - } - - &.ellipsis { - &::after { - content: '\22ee'; - font-size: 2em; - font-weight: bold; - vertical-align: inherit; - } - - + ul { - min-width: auto; - } - } - } - - &-item { - a img { - max-width: initial; - } - - a img, - a svg { - margin: 0 $padding-smaller; - } - - &-badge { - margin-left: $padding-smaller; - } - } - - &-loader { - margin: -$tc-dropdown-loader-padding 0; - padding: $tc-dropdown-loader-padding 0; - text-align: center; - background: tokens.$coral-color-neutral-background-medium; - - :global(.divider) + & { - margin: -($tc-dropdown-loader-padding - 1px) 0; - } - } -} diff --git a/packages/components/src/Actions/ActionFile/ActionFile.component.js b/packages/components/src/Actions/ActionFile/ActionFile.component.js index e7050053686..db027193947 100644 --- a/packages/components/src/Actions/ActionFile/ActionFile.component.js +++ b/packages/components/src/Actions/ActionFile/ActionFile.component.js @@ -7,7 +7,7 @@ import TooltipTrigger from '../../TooltipTrigger'; import CircularProgress from '../../CircularProgress'; import OverlayTrigger from '../../OverlayTrigger'; import Icon from '../../Icon'; -import theme from './ActionFile.module.scss'; +import theme from './ActionFile.module.css'; const LEFT = 'left'; const RIGHT = 'right'; diff --git a/packages/components/src/Actions/ActionFile/ActionFile.module.css b/packages/components/src/Actions/ActionFile/ActionFile.module.css new file mode 100644 index 00000000000..c2a7ed58abd --- /dev/null +++ b/packages/components/src/Actions/ActionFile/ActionFile.module.css @@ -0,0 +1,9 @@ +/* stylelint-disable color-hex-case */ +input[type='file'].action-file-input:focus + label { + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.btn-file-disabled { + cursor: not-allowed; +} diff --git a/packages/components/src/Actions/ActionFile/ActionFile.module.scss b/packages/components/src/Actions/ActionFile/ActionFile.module.scss deleted file mode 100644 index dd69b9957e6..00000000000 --- a/packages/components/src/Actions/ActionFile/ActionFile.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -input[type='file'] { - &.action-file-input:focus + label { - @include tab-focus; - } -} - -.btn-file-disabled { - cursor: not-allowed; -} diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js index 11e5504f28c..26e3288c451 100644 --- a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js +++ b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js @@ -7,7 +7,7 @@ import TooltipTrigger from '../../TooltipTrigger'; import getPropsFrom from '../../utils/getPropsFrom'; import OverlayTrigger from '../../OverlayTrigger'; -import theme from './ActionIconToggle.module.scss'; +import theme from './ActionIconToggle.module.css'; function ActionIconToggle(props) { const { diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.css b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.css new file mode 100644 index 00000000000..7cd17a11204 --- /dev/null +++ b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.css @@ -0,0 +1,74 @@ +/* stylelint-disable color-hex-case */ +.tc-icon-toggle { + height: 1.5rem; + width: 1.5rem; + border-radius: calc(1.5rem / 2); +} +.tc-icon-toggle svg { + height: 0.75rem; + width: 0.75rem; +} +.tc-icon-toggle { + display: flex; + justify-content: center; + align-items: center; + position: relative; + background-color: transparent; + box-shadow: none; + line-height: unset; + min-height: auto; + padding: 0; +} +.tc-icon-toggle svg { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.tc-icon-toggle, +.tc-icon-toggle:focus { + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} +.tc-icon-toggle[disabled]:hover, +.tc-icon-toggle[disabled]:focus { + border-color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-icon-toggle[disabled]:hover svg, +.tc-icon-toggle[disabled]:focus svg { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-icon-toggle:hover, +.tc-icon-toggle:active { + box-shadow: none; + border-color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + background-color: transparent; +} +.tc-icon-toggle:hover svg, +.tc-icon-toggle:active svg { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-icon-toggle.active { + background-color: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); + border-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); +} +.tc-icon-toggle.active svg { + color: var(--coral-color-accent-text-weak, white); +} +.tc-icon-toggle.active:hover:not([disabled]), +.tc-icon-toggle.active:active { + background-color: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); + border-color: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +.tc-icon-toggle.active:hover:not([disabled]) svg, +.tc-icon-toggle.active:active svg { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-icon-toggle.tick::after { + content: ''; + position: absolute; + width: 12px; + height: 12px; + border-radius: calc(12px / 2); + right: -0.25rem; + top: -0.25rem; + background: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss deleted file mode 100644 index 7e21b53751b..00000000000 --- a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss +++ /dev/null @@ -1,95 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$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; - -@mixin tc-icon-toggle($btn-size: $tc-icon-toggle-size, $icon-size: $tc-icon-toggle-icon-size) { - height: $btn-size; - width: $btn-size; - border-radius: calc(#{$btn-size} / 2); - - svg { - height: $icon-size; - width: $icon-size; - } -} - -.tc-icon-toggle { - @include tc-icon-toggle; - - display: flex; - justify-content: center; - align-items: center; - position: relative; - background-color: transparent; - - box-shadow: none; - line-height: unset; - min-height: auto; - padding: 0; - - svg { - color: tokens.$coral-color-neutral-icon-weak; - } - - &, - &:focus { - border: $tc-icon-toggle-border; - } - - &[disabled] { - &:hover, - &:focus { - border-color: tokens.$coral-color-accent-text; - - svg { - color: tokens.$coral-color-accent-text; - } - } - } - - &:hover, - &:active { - box-shadow: none; - border-color: tokens.$coral-color-accent-text; - background-color: transparent; - - svg { - color: tokens.$coral-color-accent-text; - } - } - - &.active { - background-color: tokens.$coral-color-accent-background-strong; - border-color: tokens.$coral-color-accent-background; - - svg { - color: tokens.$coral-color-accent-text-weak; - } - - &:hover:not([disabled]), - &:active { - background-color: tokens.$coral-color-accent-background-hover; - border-color: tokens.$coral-color-accent-background-hover; - - svg { - color: tokens.$coral-color-accent-text; - } - } - } - - &.tick::after { - content: ''; - position: absolute; - width: $tc-icon-toggle-tick-size; - height: $tc-icon-toggle-tick-size; - border-radius: calc(#{$tc-icon-toggle-tick-size} / 2); - 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/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js index c447533e57d..dff0f7fb61c 100644 --- a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js +++ b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js @@ -4,7 +4,7 @@ import { SplitButton, MenuItem } from '@talend/react-bootstrap'; import { randomUUID } from '@talend/utils'; import { useTranslation } from 'react-i18next'; import Icon from '../../Icon'; -import theme from './ActionSplitDropdown.module.scss'; +import theme from './ActionSplitDropdown.module.css'; import wrapOnClick from '../wrapOnClick'; import I18N_DOMAIN_COMPONENTS from '../../constants'; diff --git a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.css b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.css new file mode 100644 index 00000000000..21abf25c9ef --- /dev/null +++ b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.css @@ -0,0 +1,7 @@ +/* stylelint-disable color-hex-case */ +.tc-split-dropdown li > a i, +.tc-split-dropdown li > a svg { + margin-right: 5px; + width: 1rem; + height: 1rem; +} diff --git a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.scss b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.scss deleted file mode 100644 index abfda93cd94..00000000000 --- a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-split-dropdown { - li>a { - i, - svg { - margin-right: $padding-smaller; - width: $svg-md-size; - height: $svg-md-size; - } - } -} diff --git a/packages/components/src/AppGuidedTour/DemoContentStep.component.js b/packages/components/src/AppGuidedTour/DemoContentStep.component.js index b252584c97b..002801e4cde 100644 --- a/packages/components/src/AppGuidedTour/DemoContentStep.component.js +++ b/packages/components/src/AppGuidedTour/DemoContentStep.component.js @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import Stepper from '../Stepper'; import I18N_DOMAIN_COMPONENTS from '../constants'; -import theme from './DemoContentStep.module.scss'; +import theme from './DemoContentStep.module.css'; export default function DemoContentStep({ demoContentSteps }) { const { t } = useTranslation(I18N_DOMAIN_COMPONENTS); diff --git a/packages/components/src/AppGuidedTour/DemoContentStep.module.css b/packages/components/src/AppGuidedTour/DemoContentStep.module.css new file mode 100644 index 00000000000..9b8a6c1444b --- /dev/null +++ b/packages/components/src/AppGuidedTour/DemoContentStep.module.css @@ -0,0 +1,4 @@ +/* stylelint-disable color-hex-case */ +.info { + white-space: pre; +} diff --git a/packages/components/src/AppGuidedTour/DemoContentStep.module.scss b/packages/components/src/AppGuidedTour/DemoContentStep.module.scss deleted file mode 100644 index 745b1c2e335..00000000000 --- a/packages/components/src/AppGuidedTour/DemoContentStep.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.info { - white-space: pre; -} diff --git a/packages/components/src/AppSwitcher/AppSwitcher.component.js b/packages/components/src/AppSwitcher/AppSwitcher.component.js index 82a129b5447..f539c605cd7 100644 --- a/packages/components/src/AppSwitcher/AppSwitcher.component.js +++ b/packages/components/src/AppSwitcher/AppSwitcher.component.js @@ -8,7 +8,7 @@ import I18N_DOMAIN_COMPONENTS from '../constants'; import Inject from '../Inject'; import { getTheme } from '../theme'; -import AppSwitcherCSSModule from './AppSwitcher.module.scss'; +import AppSwitcherCSSModule from './AppSwitcher.module.css'; const theme = getTheme(AppSwitcherCSSModule); diff --git a/packages/components/src/AppSwitcher/AppSwitcher.module.css b/packages/components/src/AppSwitcher/AppSwitcher.module.css new file mode 100644 index 00000000000..9f50b6018a0 --- /dev/null +++ b/packages/components/src/AppSwitcher/AppSwitcher.module.css @@ -0,0 +1,39 @@ +/* stylelint-disable color-hex-case */ +.tc-app-switcher :global(.tc-svg-icon:first-child) { + height: 1.5rem; + width: 1.5rem; +} +.tc-app-switcher :global(.tc-svg-icon:first-child) path { + fill: var(--coral-color-brand-text, white); +} + +.tc-app-switcher-action { + list-style: none; + display: flex; + align-items: center; + height: 100%; + white-space: nowrap; +} +.tc-app-switcher-action.separated:not(:last-child)::after { + content: ' '; + display: block; + width: 1px; + height: 18px; + background-color: var(--coral-color-neutral-background, white); +} +.tc-app-switcher-action.hasIcon [role='heading'] span:first-child { + display: inline-flex; + align-items: center; +} +.tc-app-switcher-action.hasIcon [role='heading'] span:first-child::before { + display: block; + content: ''; + margin-right: 5px; + height: 20px; + width: 20px; + background-repeat: no-repeat; + background-color: var(--coral-color-neutral-background, white); +} +.tc-app-switcher-action.hasIcon [role='heading'] svg + span:first-child::before { + display: none; +} diff --git a/packages/components/src/AppSwitcher/AppSwitcher.module.scss b/packages/components/src/AppSwitcher/AppSwitcher.module.scss deleted file mode 100644 index 8701418c6f9..00000000000 --- a/packages/components/src/AppSwitcher/AppSwitcher.module.scss +++ /dev/null @@ -1,54 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-app-switcher { - :global(.tc-svg-icon:first-child) { - height: $svg-lg-size; - width: $svg-lg-size; - - path { - fill: tokens.$coral-color-brand-text; - } - } -} - -.tc-app-switcher-action { - list-style: none; - display: flex; - align-items: center; - height: 100%; - white-space: nowrap; - - &.separated:not(:last-child)::after { - content: ' '; - display: block; - width: 1px; - height: $font-size-large; - background-color: tokens.$coral-color-neutral-background; - } - - &.hasIcon { - [role='heading'] { - span:first-child { - display: inline-flex; - align-items: center; - - &::before { - display: block; - content: ''; - margin-right: $padding-smaller; - height: $navbar-brand-logo-height; - width: $navbar-brand-logo-height; - background-repeat: no-repeat; - background-color: tokens.$coral-color-neutral-background; - } - } - - svg + span:first-child { - &::before { - display: none; - } - } - } - } -} diff --git a/packages/components/src/Badge/Badge.component.js b/packages/components/src/Badge/Badge.component.js index 2f34c1ad067..8319bd11d7f 100644 --- a/packages/components/src/Badge/Badge.component.js +++ b/packages/components/src/Badge/Badge.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import { Fragment } from 'react'; -import badgeCssModule from './Badge.module.scss'; +import badgeCssModule from './Badge.module.css'; import { getTheme } from '../theme'; import BadgeLib from './BadgeComposition'; diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css new file mode 100644 index 00000000000..a52bd00de98 --- /dev/null +++ b/packages/components/src/Badge/Badge.module.css @@ -0,0 +1,292 @@ +/* stylelint-disable color-hex-case */ +.tc-badge { + display: inline-flex; + max-width: 14.6875rem; +} +.tc-badge:not(.tc-badge-readonly) { + cursor: pointer; +} +.tc-badge .tc-badge-button { + display: inline-flex; + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + border: solid 1px; + border-color: var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + border-radius: 25px; + max-width: 100%; +} +.tc-badge .tc-badge-button.tc-badge-white { + background-color: var(--coral-color-neutral-background, white); +} +.tc-badge .tc-badge-button .tc-badge-category { + flex-grow: 0; + flex-shrink: 0; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + max-width: 110px; + overflow: hidden; + white-space: pre; + text-overflow: ellipsis; +} +.tc-badge .tc-badge-button .tc-badge-separator { + flex-grow: 0; + flex-shrink: 0; + height: 12px; + width: 1px; + background-color: var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + margin: 5px; +} +.tc-badge .tc-badge-button .tc-badge-separator.tc-badge-separator-icon { + margin-right: 0; +} +.tc-badge .tc-badge-button .tc-badge-label { + display: flex; + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre; +} +.tc-badge .tc-badge-button .tc-badge-label-text, +.tc-badge .tc-badge-button .tc-badge-label-text-with-categ { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + text-overflow: ellipsis; + overflow: hidden; +} +.tc-badge .tc-badge-button .tc-badge-label-icon { + color: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); + flex-grow: 0; + flex-shrink: 0; + margin-left: 5px; +} +.tc-badge .tc-badge-button .tc-badge-delete-icon { + display: flex; + flex-grow: 0; + flex-shrink: 0; + padding: 0; + background: transparent; + box-shadow: none; + padding-left: 5px; +} +.tc-badge .tc-badge-button .tc-badge-delete-icon svg { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); + display: block; + margin: 0; +} +.tc-badge .tc-badge-button .tc-badge-delete-icon svg:hover { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-badge .tc-badge-button .tc-badge-dropdown { + display: flex; + flex-grow: 0; + flex-shrink: 0; + padding: 0; + padding-left: 5px; + text-transform: none; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-badge .tc-badge-button .tc-badge-dropdown span { + max-width: 10rem; + display: block; + text-overflow: ellipsis; + overflow: hidden; +} +.tc-badge .tc-badge-button .tc-badge-dropdown svg { + color: #797979; + margin: 5px; +} +.tc-badge .tc-badge-button .tc-badge-dropdown svg:hover { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-badge .tc-badge-button .tc-badge-dropdown:hover, +.tc-badge .tc-badge-button .tc-badge-dropdown:focus, +.tc-badge .tc-badge-button .tc-badge-dropdown:focus-within { + outline: none; +} +.tc-badge.tc-badge-display-large .tc-badge-separator { + margin-top: 0.25rem; +} +.tc-badge.tc-badge-display-large .tc-badge-button { + height: 1.5rem; + margin: 5px; + padding-top: 2px; + padding-left: 10px; + padding-right: 10px; +} +.tc-badge.tc-badge-display-large .tc-badge-button .tc-badge-category { + font-size: 0.875rem; + font-weight: normal; +} +.tc-badge.tc-badge-display-large .tc-badge-button .tc-badge-label-text { + font-size: 0.875rem; + font-weight: normal; +} +.tc-badge.tc-badge-display-large .tc-badge-button .tc-badge-label-text-with-categ { + font-size: 0.875rem; + font-weight: 600; +} +.tc-badge.tc-badge-display-large .tc-badge-button .tc-badge-label-icon { + margin-top: 5px; + height: 0.5rem; + width: 0.5rem; + min-width: 0.5rem; +} +.tc-badge.tc-badge-display-large .tc-badge-button .tc-badge-delete-icon { + height: calc(1.5rem - 2 * calc((1.5rem - 0.875rem * 1.428571429) / 2)); + min-height: calc(1.5rem - 2 * calc((1.5rem - 0.875rem * 1.428571429) / 2)); +} +.tc-badge.tc-badge-display-large .tc-badge-button .tc-badge-delete-icon svg { + height: 0.5rem; + width: 0.5rem; +} +.tc-badge.tc-badge-display-large .tc-badge-button .tc-badge-dropdown { + height: calc(1.5rem - 2 * calc((1.5rem - 0.875rem * 1.428571429) / 2)); + min-height: calc(1.5rem - 2 * calc((1.5rem - 0.875rem * 1.428571429) / 2)); + font-size: 0.875rem; + font-weight: 600; +} +.tc-badge.tc-badge-display-large .tc-badge-button .tc-badge-dropdown svg { + height: 0.5rem; + width: 0.5rem; +} +.tc-badge.tc-badge-display-small .tc-badge-separator { + margin-top: 0.1875rem; +} +.tc-badge.tc-badge-display-small .tc-badge-button { + height: 1.25rem; + margin: 5px; + padding-top: 0; + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.tc-badge.tc-badge-display-small .tc-badge-button .tc-badge-category { + font-size: 0.75rem; + font-weight: normal; +} +.tc-badge.tc-badge-display-small .tc-badge-button .tc-badge-label-text { + font-size: 0.75rem; + font-weight: normal; +} +.tc-badge.tc-badge-display-small .tc-badge-button .tc-badge-label-text-with-categ { + font-size: 0.75rem; + font-weight: 600; +} +.tc-badge.tc-badge-display-small .tc-badge-button .tc-badge-label-icon { + margin-top: 5px; + height: 0.5rem; + width: 0.5rem; + min-width: 0.5rem; +} +.tc-badge.tc-badge-display-small .tc-badge-button .tc-badge-delete-icon { + height: calc(1.25rem - 2 * calc((1.25rem - 0.75rem * 1.428571429) / 2)); + min-height: calc(1.25rem - 2 * calc((1.25rem - 0.75rem * 1.428571429) / 2)); +} +.tc-badge.tc-badge-display-small .tc-badge-button .tc-badge-delete-icon svg { + height: calc(0.75rem / 2); + width: calc(0.75rem / 2); +} +.tc-badge.tc-badge-display-small .tc-badge-button .tc-badge-dropdown { + height: calc(1.25rem - 2 * calc((1.25rem - 0.75rem * 1.428571429) / 2)); + min-height: calc(1.25rem - 2 * calc((1.25rem - 0.75rem * 1.428571429) / 2)); + font-size: 0.75rem; + font-weight: 600; +} +.tc-badge.tc-badge-display-small .tc-badge-button .tc-badge-dropdown svg { + height: calc(0.75rem / 2); + width: calc(0.75rem / 2); +} +.tc-badge-aslink .tc-badge-button { + border-color: var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.tc-badge-aslink .tc-badge-button .tc-badge-category { + display: none; +} +.tc-badge-aslink .tc-badge-button .tc-badge-separator { + display: none; +} +.tc-badge-aslink .tc-badge-button .tc-badge-label .tc-badge-label-text, +.tc-badge-aslink .tc-badge-button .tc-badge-label .tc-badge-label-icon { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-badge-aslink:hover:not(.tc-badge-disabled) .tc-badge-button { + border-color: var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.tc-badge-edit:not(.tc-badge-disabled) .tc-badge-label:hover .tc-badge-label-text, +.tc-badge-edit:not(.tc-badge-disabled) .tc-badge-label:hover .tc-badge-label-text-with-categ, +.tc-badge-edit:not(.tc-badge-disabled) .tc-badge-label:hover .tc-badge-label-icon { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-badge-selected:not(.tc-badge-disabled) .tc-badge-label .tc-badge-label-text, +.tc-badge-selected:not(.tc-badge-disabled) .tc-badge-label .tc-badge-label-text-with-categ, +.tc-badge-selected:not(.tc-badge-disabled) .tc-badge-label .tc-badge-label-icon { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-badge-disabled .tc-badge-button { + opacity: 0.62; +} +.tc-badge--valid .tc-badge-button { + background-color: var(--coral-color-success-background, hsl(110, 49%, 90%)); + color: var(--coral-color-success-text, hsl(111, 49%, 34%)); + border-color: var(--coral-color-success-border, hsl(111, 49%, 34%)); +} +.tc-badge--valid .tc-badge-button .tc-badge-separator { + background-color: var(--coral-color-success-text, hsl(111, 49%, 34%)); +} +.tc-badge--valid .tc-badge-button [class^='tc-badge-'], +.tc-badge--valid .tc-badge-button :global(.btn-link), +.tc-badge--valid .tc-badge-button .tc-badge-delete-icon svg { + color: inherit; +} +.tc-badge--invalid .tc-badge-button { + background-color: var(--coral-color-danger-background, hsl(0, 100%, 96%)); + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); + border-color: var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.tc-badge--invalid .tc-badge-button .tc-badge-separator { + background-color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.tc-badge--invalid .tc-badge-button [class^='tc-badge-'], +.tc-badge--invalid .tc-badge-button :global(.btn-link), +.tc-badge--invalid .tc-badge-button .tc-badge-delete-icon svg { + color: inherit; +} +.tc-badge--empty .tc-badge-button { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + border-color: var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} +.tc-badge--empty .tc-badge-button .tc-badge-separator { + background-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-badge--empty .tc-badge-button [class^='tc-badge-'], +.tc-badge--empty .tc-badge-button :global(.btn-link), +.tc-badge--empty .tc-badge-button .tc-badge-delete-icon svg { + color: inherit; +} +.tc-badge--pattern .tc-badge-button { + background-color: var(--coral-color-warning-background, hsl(22, 85%, 92%)); + color: var(--coral-color-warning-text, hsl(22, 93%, 41%)); + border-color: var(--coral-color-warning-border, hsl(22, 93%, 41%)); +} +.tc-badge--pattern .tc-badge-button .tc-badge-separator { + background-color: var(--coral-color-warning-text, hsl(22, 93%, 41%)); +} +.tc-badge--pattern .tc-badge-button [class^='tc-badge-'], +.tc-badge--pattern .tc-badge-button :global(.btn-link), +.tc-badge--pattern .tc-badge-button .tc-badge-delete-icon svg { + color: inherit; +} +.tc-badge--value .tc-badge-button { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + border-color: var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.tc-badge--value .tc-badge-button .tc-badge-separator { + background-color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-badge--value .tc-badge-button [class^='tc-badge-'], +.tc-badge--value .tc-badge-button :global(.btn-link), +.tc-badge--value .tc-badge-button .tc-badge-delete-icon svg { + color: inherit; +} +.tc-badge-dropdown .tc-badge-button:not(.tc-badge-disabled):focus-within { + border-color: var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} diff --git a/packages/components/src/Badge/Badge.module.scss b/packages/components/src/Badge/Badge.module.scss deleted file mode 100644 index a31a022764c..00000000000 --- a/packages/components/src/Badge/Badge.module.scss +++ /dev/null @@ -1,365 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-badge-large-label-font-size: 0.875rem !default; -$tc-badge-large-label-font-weight: normal !default; -$tc-badge-large-label-with-categ-font-weight: $font-weight-semi-bold !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: 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: 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.5rem; - -$tc-badge-disabled-opacity: 0.62; - -@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; - } - - [class^='tc-badge-'], - :global(.btn-link), - .tc-badge-delete-icon svg { - color: inherit; - } - } -} - -.tc-badge { - display: inline-flex; - max-width: 14.6875rem; - - &:not(.tc-badge-readonly) { - cursor: pointer; - } - - .tc-badge-button { - display: inline-flex; - background-color: tokens.$coral-color-neutral-background-medium; - border: solid 1px; - border-color: tokens.$coral-color-neutral-border-weak; - border-radius: 25px; - max-width: 100%; - - &.tc-badge-white { - background-color: tokens.$coral-color-neutral-background; - } - - .tc-badge-category { - flex-grow: 0; - flex-shrink: 0; - color: tokens.$coral-color-neutral-text; - max-width: 110px; - overflow: hidden; - white-space: pre; - text-overflow: ellipsis; - } - - .tc-badge-separator { - flex-grow: 0; - flex-shrink: 0; - height: 12px; - width: 1px; - background-color: tokens.$coral-color-neutral-border-weak; - margin: $padding-smaller; - - &.tc-badge-separator-icon { - margin-right: 0; - } - } - - .tc-badge-label { - display: flex; - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: pre; - - &-text, - &-text-with-categ { - color: tokens.$coral-color-neutral-text; - text-overflow: ellipsis; - overflow: hidden; - } - - &-icon { - color: tokens.$coral-color-neutral-icon; - flex-grow: 0; - flex-shrink: 0; - margin-left: $padding-smaller; - } - } - - .tc-badge-delete-icon { - display: flex; - flex-grow: 0; - flex-shrink: 0; - padding: 0; - background: transparent; - box-shadow: none; - padding-left: $padding-smaller; - - svg { - color: tokens.$coral-color-neutral-icon-weak; - display: block; - margin: 0; - - &:hover { - color: tokens.$coral-color-accent-text; - } - } - } - - .tc-badge-dropdown { - display: flex; - flex-grow: 0; - flex-shrink: 0; - padding: 0; - padding-left: $padding-smaller; - text-transform: none; - color: tokens.$coral-color-neutral-text; - - span { - max-width: 10rem; - display: block; - text-overflow: ellipsis; - overflow: hidden; - } - - svg { - color: $slate-gray; - margin: $padding-smaller; - - &:hover { - color: tokens.$coral-color-accent-text; - } - } - - &:hover, - &:focus, - &:focus-within { - outline: none; - } - } - } - - &.tc-badge-display-large { - .tc-badge-separator { - margin-top: 0.25rem; - } - - .tc-badge-button { - height: $tc-badge-large-height; - margin: $tc-badge-large-margin; - padding-top: 2px; - padding-left: $tc-badge-large-padding; - padding-right: $tc-badge-large-padding; - - .tc-badge-category { - font-size: $tc-badge-large-label-font-size; - font-weight: $tc-badge-large-label-font-weight; - } - - .tc-badge-label { - &-text { - font-size: $tc-badge-large-label-font-size; - font-weight: $tc-badge-large-label-font-weight; - } - - &-text-with-categ { - font-size: $tc-badge-large-label-font-size; - font-weight: $tc-badge-large-label-with-categ-font-weight; - } - - &-icon { - margin-top: $padding-smaller; - height: $tc-badge-large-icon-size; - width: $tc-badge-large-icon-size; - min-width: $tc-badge-large-icon-size; - } - } - - .tc-badge-delete-icon { - height: calc(#{$tc-badge-large-height} - 2 * #{$tc-badge-large-vertical-padding}); - min-height: calc(#{$tc-badge-large-height} - 2 * #{$tc-badge-large-vertical-padding}); - - svg { - height: $tc-badge-large-delete-icon-size; - width: $tc-badge-large-delete-icon-size; - } - } - - .tc-badge-dropdown { - height: calc(#{$tc-badge-large-height} - 2 * #{$tc-badge-large-vertical-padding}); - min-height: calc(#{$tc-badge-large-height} - 2 * #{$tc-badge-large-vertical-padding}); - font-size: $tc-badge-large-label-font-size; - font-weight: $tc-badge-large-label-with-categ-font-weight; - - svg { - height: $tc-badge-large-delete-icon-size; - width: $tc-badge-large-delete-icon-size; - } - } - } - } - - &.tc-badge-display-small { - .tc-badge-separator { - margin-top: 0.1875rem; - } - - .tc-badge-button { - height: $tc-badge-small-height; - margin: $tc-badge-small-margin; - padding-top: 0; - padding-left: $tc-badge-small-padding; - padding-right: $tc-badge-small-padding; - - .tc-badge-category { - font-size: $tc-badge-small-label-font-size; - font-weight: $tc-badge-small-label-font-weight; - } - - .tc-badge-label { - &-text { - font-size: $tc-badge-small-label-font-size; - font-weight: $tc-badge-small-label-font-weight; - } - - &-text-with-categ { - font-size: $tc-badge-small-label-font-size; - font-weight: $tc-badge-small-label-with-categ-font-weight; - } - - &-icon { - margin-top: $padding-smaller; - height: $tc-badge-small-icon-size; - width: $tc-badge-small-icon-size; - min-width: $tc-badge-small-icon-size; - } - } - - .tc-badge-delete-icon { - height: calc(#{$tc-badge-small-height} - 2 * #{$tc-badge-small-vertical-padding}); - min-height: calc(#{$tc-badge-small-height} - 2 * #{$tc-badge-small-vertical-padding}); - - svg { - height: $tc-badge-small-delete-icon-size; - width: $tc-badge-small-delete-icon-size; - } - } - - .tc-badge-dropdown { - height: calc(#{$tc-badge-small-height} - 2 * #{$tc-badge-small-vertical-padding}); - min-height: calc(#{$tc-badge-small-height} - 2 * #{$tc-badge-small-vertical-padding}); - font-size: $tc-badge-small-label-font-size; - font-weight: $tc-badge-small-label-with-categ-font-weight; - - svg { - height: $tc-badge-small-delete-icon-size; - width: $tc-badge-small-delete-icon-size; - } - } - } - } - - &-aslink { - .tc-badge-button { - border-color: tokens.$coral-color-accent-border; - - .tc-badge-category { - display: none; - } - - .tc-badge-separator { - display: none; - } - - .tc-badge-label { - .tc-badge-label-text, - .tc-badge-label-icon { - color: tokens.$coral-color-accent-text; - } - } - } - - &:hover:not(.tc-badge-disabled) { - .tc-badge-button { - border-color: tokens.$coral-color-accent-border; - } - } - } - - &-edit:not(&-disabled) { - .tc-badge-label:hover { - .tc-badge-label-text, - .tc-badge-label-text-with-categ, - .tc-badge-label-icon { - color: tokens.$coral-color-accent-text; - } - } - } - - &-selected:not(&-disabled) { - .tc-badge-label { - .tc-badge-label-text, - .tc-badge-label-text-with-categ, - .tc-badge-label-icon { - color: tokens.$coral-color-accent-text; - } - } - } - - &-disabled { - .tc-badge-button { - opacity: $tc-badge-disabled-opacity; - } - } - - &--valid { - @include colored-badge(tokens.$coral-color-success-background, tokens.$coral-color-success-text, tokens.$coral-color-success-border); - } - - &--invalid { - @include colored-badge(tokens.$coral-color-danger-background, tokens.$coral-color-danger-text, tokens.$coral-color-danger-border); - } - - &--empty { - @include colored-badge(tokens.$coral-color-neutral-background-medium, tokens.$coral-color-neutral-text, tokens.$coral-color-neutral-border); - } - - &--pattern { - @include colored-badge(tokens.$coral-color-warning-background, tokens.$coral-color-warning-text, tokens.$coral-color-warning-border); - } - - &--value { - @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) { - &:focus-within { - border-color: tokens.$coral-color-accent-border; - } - } - } - } -} diff --git a/packages/components/src/Badge/BadgeComposition/BadgeCategory/BadgeCategory.component.js b/packages/components/src/Badge/BadgeComposition/BadgeCategory/BadgeCategory.component.js index 6178f2ca6a0..f91660354fd 100644 --- a/packages/components/src/Badge/BadgeComposition/BadgeCategory/BadgeCategory.component.js +++ b/packages/components/src/Badge/BadgeComposition/BadgeCategory/BadgeCategory.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import TooltipTrigger from '../../../TooltipTrigger'; -import badgeCssModule from '../../Badge.module.scss'; +import badgeCssModule from '../../Badge.module.css'; import { getTheme } from '../../../theme'; const theme = getTheme(badgeCssModule); diff --git a/packages/components/src/Badge/BadgeComposition/BadgeDelete/BadgeDelete.component.js b/packages/components/src/Badge/BadgeComposition/BadgeDelete/BadgeDelete.component.js index 4aacfa87221..4a846c57fa3 100644 --- a/packages/components/src/Badge/BadgeComposition/BadgeDelete/BadgeDelete.component.js +++ b/packages/components/src/Badge/BadgeComposition/BadgeDelete/BadgeDelete.component.js @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; import Action from '../../../Actions/Action'; -import badgeCssModule from '../../Badge.module.scss'; +import badgeCssModule from '../../Badge.module.css'; import { getTheme } from '../../../theme'; const theme = getTheme(badgeCssModule); diff --git a/packages/components/src/Badge/BadgeComposition/BadgeDropdown/BadgeDropdown.component.js b/packages/components/src/Badge/BadgeComposition/BadgeDropdown/BadgeDropdown.component.js index 72849e20c43..2574ef10339 100644 --- a/packages/components/src/Badge/BadgeComposition/BadgeDropdown/BadgeDropdown.component.js +++ b/packages/components/src/Badge/BadgeComposition/BadgeDropdown/BadgeDropdown.component.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import badgeCssModule from '../../Badge.module.scss'; +import badgeCssModule from '../../Badge.module.css'; import { getTheme } from '../../../theme'; import ActionDropdown from '../../../Actions/ActionDropdown'; diff --git a/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js b/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js index 4db429e1cbf..80edbf875b5 100644 --- a/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js +++ b/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import Icon from '../../../Icon'; -import badgeCssModule from '../../Badge.module.scss'; +import badgeCssModule from '../../Badge.module.css'; import { getTheme } from '../../../theme'; const theme = getTheme(badgeCssModule); diff --git a/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js b/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js index 16e03a81bcc..336e55f9955 100644 --- a/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js +++ b/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import TooltipTrigger from '../../../TooltipTrigger'; -import badgeCssModule from '../../Badge.module.scss'; +import badgeCssModule from '../../Badge.module.css'; import { getTheme } from '../../../theme'; const theme = getTheme(badgeCssModule); diff --git a/packages/components/src/Badge/BadgeComposition/BadgeSeparator/BadgeSeparator.component.js b/packages/components/src/Badge/BadgeComposition/BadgeSeparator/BadgeSeparator.component.js index 748f56d77ed..a5776d31a48 100644 --- a/packages/components/src/Badge/BadgeComposition/BadgeSeparator/BadgeSeparator.component.js +++ b/packages/components/src/Badge/BadgeComposition/BadgeSeparator/BadgeSeparator.component.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import badgeCssModule from '../../Badge.module.scss'; +import badgeCssModule from '../../Badge.module.css'; import { getTheme } from '../../../theme'; const theme = getTheme(badgeCssModule); diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.component.js b/packages/components/src/Breadcrumbs/Breadcrumbs.component.js index 70ea4806ff6..7b836cbe678 100644 --- a/packages/components/src/Breadcrumbs/Breadcrumbs.component.js +++ b/packages/components/src/Breadcrumbs/Breadcrumbs.component.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { withTranslation } from 'react-i18next'; import { randomUUID } from '@talend/utils'; -import theme from './Breadcrumbs.module.scss'; +import theme from './Breadcrumbs.module.css'; import { Action, ActionDropdown } from '../Actions'; import Skeleton from '../Skeleton/Skeleton.component'; import I18N_DOMAIN_COMPONENTS from '../constants'; diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.module.css b/packages/components/src/Breadcrumbs/Breadcrumbs.module.css new file mode 100644 index 00000000000..a4c83b4d0fd --- /dev/null +++ b/packages/components/src/Breadcrumbs/Breadcrumbs.module.css @@ -0,0 +1,14 @@ +/* stylelint-disable color-hex-case */ +.tc-breadcrumb :global(.tc-dropdown-button) { + padding: 0; +} +.tc-breadcrumb.loading { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 10px; + height: 3.125rem; +} +.tc-breadcrumb.loading :global(.tc-skeleton) { + margin: 0 5px; +} diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss b/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss deleted file mode 100644 index 32b5c63a1e5..00000000000 --- a/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -//// -/// Breadcrumb -/// @group Custom widgets -//// -.tc-breadcrumb { - :global(.tc-dropdown-button) { - padding: 0; - } - - &.loading { - display: flex; - align-items: center; - justify-content: flex-start; - padding: $padding-small; - height: $breadcrumb-height; - - :global(.tc-skeleton) { - margin: 0 $padding-smaller; - } - } -} diff --git a/packages/components/src/CircularProgress/CircularProgress.component.js b/packages/components/src/CircularProgress/CircularProgress.component.js index 58d0a775d8d..61c089c6e6a 100644 --- a/packages/components/src/CircularProgress/CircularProgress.component.js +++ b/packages/components/src/CircularProgress/CircularProgress.component.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { withTranslation } from 'react-i18next'; import I18N_DOMAIN_COMPONENTS, { CIRCULAR_PROGRESS_SIZE as SIZE } from '../constants'; -import theme from './CircularProgress.module.scss'; +import theme from './CircularProgress.module.css'; import getDefaultT from '../translate'; const RADIUS = 20; diff --git a/packages/components/src/CircularProgress/CircularProgress.module.css b/packages/components/src/CircularProgress/CircularProgress.module.css new file mode 100644 index 00000000000..9428c4551e6 --- /dev/null +++ b/packages/components/src/CircularProgress/CircularProgress.module.css @@ -0,0 +1,55 @@ +/* stylelint-disable color-hex-case */ +.fixed { + transform: rotate(270deg); +} + +.path { + stroke: currentColor; + stroke-linecap: round; + stroke-width: 5; +} + +.animate { + animation: rotate 2s linear infinite; +} +.animate .path { + animation: dash 1.3s ease-in-out infinite; +} + +.loaderlight .path { + stroke: var(--coral-color-neutral-text-inverted, white); +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} +.small { + width: 0.75rem; + height: 0.75rem; +} + +.default { + width: 1.25rem; + height: 1.25rem; +} + +.large { + width: 2.5rem; + height: 2.5rem; +} diff --git a/packages/components/src/CircularProgress/CircularProgress.module.scss b/packages/components/src/CircularProgress/CircularProgress.module.scss deleted file mode 100644 index b681843c9f8..00000000000 --- a/packages/components/src/CircularProgress/CircularProgress.module.scss +++ /dev/null @@ -1,71 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// CircularProgress styles -$tc-circular-progress-light-fill: tokens.$coral-color-neutral-text-inverted !default; -$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 { - transform: rotate(270deg); -} - -.path { - stroke: currentColor; - stroke-linecap: round; - stroke-width: $tc-circular-progress-stroke-width; -} - -.animate { - animation: rotate 2s linear infinite; - - .path { - animation: dash 1.3s ease-in-out infinite; - } -} - -.loaderlight { - .path { - stroke: $tc-circular-progress-light-fill; - } -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } -} - -.small { - width: $tc-circular-progress-small; - height: $tc-circular-progress-small; -} - -.default { - width: $tc-circular-progress-regular; - height: $tc-circular-progress-regular; -} - -.large { - width: $tc-circular-progress-large; - height: $tc-circular-progress-large; -} diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.component.js b/packages/components/src/CollapsiblePanel/CollapsiblePanel.component.js index b26f0d64e68..51f8b2e8dbe 100644 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.component.js +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.component.js @@ -10,7 +10,7 @@ import Status from '../Status'; import Tag from '../Tag'; import TooltipTrigger from '../TooltipTrigger'; -import css from './CollapsiblePanel.module.scss'; +import css from './CollapsiblePanel.module.css'; import I18N_DOMAIN_COMPONENTS from '../constants'; const TYPE_STATUS = 'status'; @@ -221,20 +221,31 @@ function getTextualContent(content) { function CollapsiblePanel(props) { const { content, id, onToggle, status, expanded, theme, onEntered, onExited } = props; - const className = classNames('panel panel-default', css['tc-collapsible-panel'], { - [css['default-panel']]: !theme, - [css[theme]]: !!theme, - [css.open]: expanded, - [css[Status.getBsStyleFromStatus(status) || status]]: !!status, - status, - }); + const className = classNames( + 'panel panel-default', + 'tc-collapsible-panel', + css['tc-collapsible-panel'], + { + [css['default-panel']]: !theme, + [css[theme]]: !!theme, + [css.open]: expanded, + [css[Status.getBsStyleFromStatus(status) || status]]: !!status, + status, + }, + ); let children = null; if (content) { children = Array.isArray(content) ? getKeyValueContent(content) : getTextualContent(content); } return ( - + diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.css b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.css new file mode 100644 index 00000000000..b5a07085b6a --- /dev/null +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.css @@ -0,0 +1,295 @@ +/* stylelint-disable color-hex-case */ +:global(.panel .panel) { + margin: 0; +} + +.tc-collapsible-panel { + position: relative; +} +.tc-collapsible-panel.selected { + border-left: 5px solid var(--coral-color-accent-border, hsl(204, 95%, 31%)); + padding-left: 1px; +} +.tc-collapsible-panel:not(.open) :global(.panel-heading) { + border-bottom: none; +} +.tc-collapsible-panel.info :global(.panel-heading), +.tc-collapsible-panel.success :global(.panel-heading), +.tc-collapsible-panel.danger :global(.panel-heading), +.tc-collapsible-panel.muted :global(.panel-heading), +.tc-collapsible-panel.warning :global(.panel-heading), +.tc-collapsible-panel.skeleton :global(.panel-heading) { + padding-left: 1px; + border-left: 5px solid; +} +.tc-collapsible-panel.info :global(.panel-heading) { + border-left-color: var(--coral-color-info-text, hsl(204, 95%, 31%)); +} +.tc-collapsible-panel.info :global(.tc-status-label) { + color: var(--coral-color-info-text, hsl(204, 95%, 31%)); +} +.tc-collapsible-panel.success :global(.panel-heading) { + border-left-color: var(--coral-color-success-text, hsl(111, 49%, 34%)); +} +.tc-collapsible-panel.success :global(.tc-status-label) { + color: var(--coral-color-success-text, hsl(111, 49%, 34%)); +} +.tc-collapsible-panel.danger { + border-color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.tc-collapsible-panel.danger :global(.panel-heading) { + border-color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.tc-collapsible-panel.danger :global(.tc-status-label) { + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.tc-collapsible-panel.muted :global(.panel-heading) { + border-left-color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.tc-collapsible-panel.muted :global(.tc-status-label) { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.tc-collapsible-panel.warning :global(.panel-heading) { + border-left-color: var(--coral-color-warning-text, hsl(22, 93%, 41%)); +} +.tc-collapsible-panel.warning :global(.tc-status-label) { + color: var(--coral-color-warning-text, hsl(22, 93%, 41%)); +} +.tc-collapsible-panel.skeleton :global(.panel-heading) { + border-color: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} +.tc-collapsible-panel .panel-header-content { + display: flex; + height: 2.5rem; + align-items: center; + padding: 0 15px; +} +.tc-collapsible-panel .panel-header-content > a { + width: 100%; +} +.tc-collapsible-panel .panel-header-content .panel-title { + padding: 0; + display: flex; + align-items: center; + justify-content: space-between; + flex-basis: 100%; + overflow: hidden; + font-size: 0.875rem; + width: 100%; + padding-right: 5px; +} +.tc-collapsible-panel .panel-header-content .panel-title:hover { + background: transparent; +} +.tc-collapsible-panel .panel-header-content .panel-title > * > :global(.btn) { + line-height: 1em; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-4 { + flex-basis: 25%; + display: flex; + overflow: hidden; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-4 > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-5 { + flex-basis: 20%; + display: flex; + overflow: hidden; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-5 > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-6 { + flex-basis: 16.6666666667%; + display: flex; + overflow: hidden; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-6 > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-7 { + flex-basis: 14.2857142857%; + display: flex; + overflow: hidden; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-7 > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-8 { + flex-basis: 12.5%; + display: flex; + overflow: hidden; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-8 > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-9 { + flex-basis: 11.1111111111%; + display: flex; + overflow: hidden; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-9 > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-10 { + flex-basis: 10%; + display: flex; + overflow: hidden; +} +.tc-collapsible-panel .panel-header-content .panel-title > *.col-10 > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tc-collapsible-panel .panel-header-content .panel-title > * { + padding: 0; + text-decoration: none; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 0; +} +.tc-collapsible-panel .panel-header-content .panel-title > * > * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tc-collapsible-panel :global(.tc-icon-toggle) { + height: 1rem; + width: 1rem; + transform-origin: center; +} +.tc-collapsible-panel :global(.tc-icon-toggle) svg { + height: 0.625rem; + width: 0.625rem; +} +.tc-collapsible-panel .group { + display: flex; +} +.tc-collapsible-panel :global .panel-heading { + display: flex; + justify-content: space-between; + padding: 0; +} +.tc-collapsible-panel :global .panel-heading .panel-title { + width: 100%; +} +.tc-collapsible-panel :global .panel-heading:hover { + background: var(--coral-color-neutral-background, white); + cursor: pointer; +} +.tc-collapsible-panel :global .panel-heading:hover .tc-status-label { + text-decoration: underline; +} + +.default-panel :global(.label) { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.default-panel .group { + justify-content: space-between; + padding-right: 15px; +} +.default-panel :global(.panel-body) { + max-height: 50vh; + overflow: auto; + word-break: break-all; +} +.default-panel :global(.panel-body) .content { + display: flex; + flex-wrap: wrap; + width: 100%; +} +.default-panel :global(.panel-body) .content .label { + flex-basis: 10%; + flex-shrink: 0; + flex-grow: 1; +} +.default-panel :global(.panel-body) .content .description { + flex-basis: 90%; + flex-shrink: 0; + flex-grow: 1; + font-weight: normal; +} + +.descriptive-panel { + border-radius: 0; + margin-bottom: 0; + box-shadow: none; + border: none; + padding-left: 5px; +} +.descriptive-panel :global(.panel) { + box-shadow: none; +} +.descriptive-panel :global(.toggle) svg { + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + height: 10px; + width: 10px; +} +.descriptive-panel.selected .title, +.descriptive-panel.selected .detail { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.descriptive-panel :global(.panel-heading) { + padding: 0; + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + border-color: transparent; +} +.descriptive-panel .group { + justify-content: flex-start; +} +.descriptive-panel .group > * { + margin-right: 5px; +} +.descriptive-panel .title { + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.descriptive-panel .tag { + white-space: nowrap; + font-size: 0.75rem; +} +.descriptive-panel .detail { + white-space: nowrap; + justify-content: flex-end; +} +.descriptive-panel :global(.panel-body) { + padding: 10px; + padding-top: 0; +} +.descriptive-panel :global(.panel-body) .content { + display: flex; + flex-direction: column; +} +.descriptive-panel :global(.panel-body) .content .head { + display: flex; + justify-content: space-between; +} +.descriptive-panel :global(.panel-body) .content .head > span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.descriptive-panel :global(.panel-body) .content .content-description { + white-space: pre-wrap; + padding-top: 5px; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss deleted file mode 100644 index f4e08c2c4f4..00000000000 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss +++ /dev/null @@ -1,345 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as 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; - -@mixin type-col($width: 100%) { - flex-basis: $width; - display: flex; - overflow: hidden; - - > span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } -} - -@mixin col-style { - > :global(.btn) { - line-height: 1em; - color: tokens.$coral-color-accent-text; - } - - &.col-4 { - @include type-col(25%); - } - - &.col-5 { - @include type-col(20%); - } - - &.col-6 { - @include type-col(calc(100% / 6)); - } - - &.col-7 { - @include type-col(calc(100% / 7)); - } - - &.col-8 { - @include type-col(calc(100% / 8)); - } - - &.col-9 { - @include type-col(calc(100% / 9)); - } - - &.col-10 { - @include type-col(calc(10%)); - } -} - -// due to react-bootstrap -:global(.panel .panel) { - margin: 0; -} - -.tc-collapsible-panel { - position: relative; - - &.selected { - border-left: 5px solid tokens.$coral-color-accent-border; - padding-left: 1px; - } - - &:not(.open) { - :global(.panel-heading) { - border-bottom: none; - } - } - - &.info, - &.success, - &.danger, - &.muted, - &.warning, - &.skeleton { - :global(.panel-heading) { - padding-left: 1px; - border-left: 5px solid; - } - } - - &.info { - :global(.panel-heading) { - border-left-color: tokens.$coral-color-info-text; - } - - :global(.tc-status-label) { - color: tokens.$coral-color-info-text; - } - } - - &.success { - :global(.panel-heading) { - border-left-color: tokens.$coral-color-success-text; - } - - :global(.tc-status-label) { - color: tokens.$coral-color-success-text; - } - } - - &.danger { - border-color: tokens.$coral-color-danger-text; - - :global(.panel-heading) { - border-color: tokens.$coral-color-danger-text; - } - - :global(.tc-status-label) { - color: tokens.$coral-color-danger-text; - } - } - - &.muted { - :global(.panel-heading) { - border-left-color: tokens.$coral-color-neutral-text-disabled; - } - - :global(.tc-status-label) { - color: tokens.$coral-color-neutral-text-disabled; - } - } - - &.warning { - :global(.panel-heading) { - border-left-color: tokens.$coral-color-warning-text; - } - - :global(.tc-status-label) { - color: tokens.$coral-color-warning-text; - } - } - - &.skeleton { - :global(.panel-heading) { - border-color: tokens.$coral-color-neutral-background-strong; - } - } - - .panel-header-content { - display: flex; - height: 2.5rem; - align-items: center; - padding: 0 $padding-normal; - - > a { - width: 100%; - } - - .panel-title { - padding: 0; - display: flex; - align-items: center; - justify-content: space-between; - flex-basis: 100%; - overflow: hidden; - font-size: 0.875rem; - width: 100%; - padding-right: $padding-smaller; - - &:hover { - background: transparent; - } - - > * { - @include col-style; - padding: 0; - text-decoration: none; - display: flex; - align-items: center; - justify-content: space-between; - min-width: 0; // trick to avoid conflict between flex and overflow - - > * { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - } - - :global(.tc-icon-toggle) { - height: 1rem; - width: 1rem; - transform-origin: center; - - svg { - height: 0.625rem; - width: 0.625rem; - } - } - - .group { - display: flex; - } - - :global { - .panel-heading { - display: flex; - justify-content: space-between; - padding: 0; - - .panel-title { - width: 100%; - } - - &:hover { - background: tokens.$coral-color-neutral-background; - cursor: pointer; - - .tc-status-label { - text-decoration: underline; - } - } - } - } -} - -.default-panel { - :global(.label) { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .group { - justify-content: space-between; - padding-right: 15px; - } - - :global(.panel-body) { - max-height: 50vh; - overflow: auto; - word-break: break-all; - - .content { - display: flex; - flex-wrap: wrap; - width: 100%; - - .label { - flex-basis: 10%; - flex-shrink: 0; - flex-grow: 1; - } - - .description { - flex-basis: 90%; - flex-shrink: 0; - flex-grow: 1; - font-weight: normal; - } - } - } -} - -.descriptive-panel { - border-radius: 0; - margin-bottom: 0; - box-shadow: none; - border: none; - padding-left: 5px; - - :global(.panel) { - box-shadow: none; - } - - :global(.toggle) { - svg { - fill: tokens.$coral-color-accent-text; - height: 10px; - width: 10px; - } - } - - &.selected { - .title, - .detail { - color: tokens.$coral-color-accent-text; - } - } - - :global(.panel-heading) { - padding: 0; - background-color: tokens.$coral-color-neutral-background-medium; - border-color: transparent; - } - - .group { - justify-content: flex-start; - - > * { - margin-right: $padding-smaller; - } - } - - .title { - font-weight: bold; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .tag { - white-space: nowrap; - font-size: 0.75rem; - } - - .detail { - white-space: nowrap; - justify-content: flex-end; - } - - :global(.panel-body) { - padding: 10px; - padding-top: 0; - - .content { - display: flex; - flex-direction: column; - - .head { - display: flex; - justify-content: space-between; - - > span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .content-description { - white-space: pre-wrap; - padding-top: 5px; - color: tokens.$coral-color-neutral-text-weak; - } - } - } -} diff --git a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.component.js b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.component.js index 7bf535d6ba4..031977a8843 100644 --- a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.component.js +++ b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.component.js @@ -1,6 +1,6 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; -import theme from './LengthBadge.module.scss'; +import theme from './LengthBadge.module.css'; /** * Return a badge with the given length value. diff --git a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.css b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.css new file mode 100644 index 00000000000..51a46bb94a9 --- /dev/null +++ b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.css @@ -0,0 +1,7 @@ +.tc-length-badge { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + font-size: 10px; + padding: 2px 10px; + top: 0; +} diff --git a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss deleted file mode 100644 index 0e483c08d1e..00000000000 --- a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-length-badge { - 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.component.js b/packages/components/src/DataViewer/Core/Tree/Tree.component.js index c15bcc006ff..f49e0223de5 100644 --- a/packages/components/src/DataViewer/Core/Tree/Tree.component.js +++ b/packages/components/src/DataViewer/Core/Tree/Tree.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import TreeNode from '../TreeNode'; import TreeNodeList from '../TreeNodeList'; -import theme from './Tree.module.scss'; +import theme from './Tree.module.css'; /** * Check if we are at the root level of the tree. diff --git a/packages/components/src/DataViewer/Core/Tree/Tree.module.css b/packages/components/src/DataViewer/Core/Tree/Tree.module.css new file mode 100644 index 00000000000..3fe560661d9 --- /dev/null +++ b/packages/components/src/DataViewer/Core/Tree/Tree.module.css @@ -0,0 +1,24 @@ +/* stylelint-disable color-hex-case */ +:global(.tc-model .tc-tree) { + overflow: auto; +} + +.tc-tree { + list-style: none; + flex-grow: 1; + margin-bottom: 0; +} +.tc-tree-list { + list-style: none; + padding: 0; +} +.tc-tree-node-border { + border-left: 1px solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + margin-left: 0.375rem; +} +.tc-tree-node-border:hover { + border-left-color: var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} +.tc-tree li:hover { + background-color: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} diff --git a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss b/packages/components/src/DataViewer/Core/Tree/Tree.module.scss deleted file mode 100644 index 3827f782d16..00000000000 --- a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -:global(.tc-model .tc-tree) { - overflow: auto; -} - -.tc-tree { - list-style: none; - flex-grow: 1; - margin-bottom: 0; - - &-list { - list-style: none; - padding: 0; - } - - &-node-border { - border-left: 1px solid tokens.$coral-color-neutral-border; - margin-left: calc($svg-sm-size / 2); - - &:hover { - 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/DataViewer.stories.js b/packages/components/src/DataViewer/DataViewer.stories.js index 3f0842b3502..2f6c30a4b01 100644 --- a/packages/components/src/DataViewer/DataViewer.stories.js +++ b/packages/components/src/DataViewer/DataViewer.stories.js @@ -5,7 +5,7 @@ import words from 'lodash/words'; import ModelViewer from './ModelViewer'; import RecordsViewer from './RecordsViewer'; import hierarchicSample from './sample.raw.json'; -import theme from './theme.module.scss'; +import theme from './theme.module.css'; /** * Transform the jsonpath $['pathParent']['pathChildren], diff --git a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.component.js b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.component.js index 842db507b01..5bcffdfdef3 100644 --- a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.component.js +++ b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { withTranslation } from 'react-i18next'; import { Action } from '../../../Actions'; -import theme from './TreeHeader.module.scss'; +import theme from './TreeHeader.module.css'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; import getDefaultT from '../../../translate'; diff --git a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.css b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.css new file mode 100644 index 00000000000..24c0b5e5472 --- /dev/null +++ b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.css @@ -0,0 +1,27 @@ +/* stylelint-disable color-hex-case */ +.tc-tree-header { + align-items: center; + border-bottom: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + display: flex; + font-weight: 600; + height: 2.5rem; + justify-content: space-between; + padding: 10px 0 10px 30px; +} +.tc-tree-header-actions { + display: flex; + justify-content: space-between; +} +.tc-tree-header-actions-icon { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + text-transform: none; +} +.tc-tree-header-actions-icon :global(.tc-svg-icon) { + height: 0.75rem; + width: 0.75rem; +} +.tc-tree-header-actions :global(.btn):focus, +.tc-tree-header-actions :global(.btn):hover { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} diff --git a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss deleted file mode 100644 index ebf33cb81af..00000000000 --- a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$default-height: 2.5rem !default; - -.tc-tree-header { - align-items: center; - border-bottom: 0.0625rem solid tokens.$coral-color-neutral-border; - color: tokens.$coral-color-neutral-text; - display: flex; - font-weight: 600; - height: $default-height; - justify-content: space-between; - padding: $padding-small 0 $padding-small $padding-larger; - - &-actions { - display: flex; - justify-content: space-between; - - &-icon { - color: tokens.$coral-color-neutral-text; - text-transform: none; - - :global(.tc-svg-icon) { - height: $svg-sm-size; - width: $svg-sm-size; - } - } - - :global(.btn) { - &:focus, - &:hover { - color: tokens.$coral-color-accent-text; - } - } - } -} diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.component.js b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.component.js index 0d9bda06d42..f968a64c044 100644 --- a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.component.js +++ b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { withTranslation } from 'react-i18next'; import Icon from '../../../Icon'; -import theme from './TreeBranchIcon.module.scss'; +import theme from './TreeBranchIcon.module.css'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; import getDefaultT from '../../../translate'; diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.css b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.css new file mode 100644 index 00000000000..90c928c1ac2 --- /dev/null +++ b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.css @@ -0,0 +1,23 @@ +/* stylelint-disable color-hex-case */ +.tc-tree-branch-icon { + display: flex; + margin-right: 5px; +} +.tc-tree-branch-icon-caret { + height: 0.75rem; + width: 0.75rem; +} +.tc-tree-branch-icon-caret-right { + transform: rotate(180deg); +} +.tc-tree-branch-icon :global(.tc-svg-anchor) { + background: transparent; + border: none; + padding: 0; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + display: flex; +} +.tc-tree-branch-icon :global(.tc-svg-anchor):focus, +.tc-tree-branch-icon :global(.tc-svg-anchor):hover { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); +} diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss deleted file mode 100644 index 65ff9d14fe6..00000000000 --- a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-tree-branch-icon { - display: flex; - margin-right: $padding-smaller; - - &-caret { - height: $svg-sm-size; - width: $svg-sm-size; - - &-right { - transform: rotate(180deg); - } - } - - :global(.tc-svg-anchor) { - background: transparent; - border: none; - padding: 0; - color: tokens.$coral-color-accent-text; - display: flex; - - &:focus, - &:hover { - color: tokens.$coral-color-accent-text-hover; - } - } -} diff --git a/packages/components/src/DataViewer/ModelViewer/Branch/ModelViewerBranch.component.js b/packages/components/src/DataViewer/ModelViewer/Branch/ModelViewerBranch.component.js index b9629059436..bd85730442b 100644 --- a/packages/components/src/DataViewer/ModelViewer/Branch/ModelViewerBranch.component.js +++ b/packages/components/src/DataViewer/ModelViewer/Branch/ModelViewerBranch.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { SimpleTextKeyValue } from '../../Text'; import { TreeBranchIcon } from '../../Icons'; -import theme from '../ModelViewer.module.scss'; +import theme from '../ModelViewer.module.css'; function getBranchDisplayKey(union, hasSemanticAwareness, getDisplayKey, value) { if (union) { diff --git a/packages/components/src/DataViewer/ModelViewer/Leaf/ModelViewerLeaf.component.js b/packages/components/src/DataViewer/ModelViewer/Leaf/ModelViewerLeaf.component.js index d41faaaf5b5..36c561fdaec 100644 --- a/packages/components/src/DataViewer/ModelViewer/Leaf/ModelViewerLeaf.component.js +++ b/packages/components/src/DataViewer/ModelViewer/Leaf/ModelViewerLeaf.component.js @@ -3,7 +3,7 @@ import noop from 'lodash/noop'; import PropTypes from 'prop-types'; import getDefaultT from '../../../translate'; import { SimpleTextKeyValue } from '../../Text'; -import theme from '../ModelViewer.module.scss'; +import theme from '../ModelViewer.module.css'; /** * Union with only two type and one null, are represent as leaf. diff --git a/packages/components/src/DataViewer/ModelViewer/ModelViewer.component.js b/packages/components/src/DataViewer/ModelViewer/ModelViewer.component.js index 16c938403d4..bd81ab4d21e 100644 --- a/packages/components/src/DataViewer/ModelViewer/ModelViewer.component.js +++ b/packages/components/src/DataViewer/ModelViewer/ModelViewer.component.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { TreeHeader } from '../Headers'; import { Tree } from '../Core'; import getDefaultT from '../../translate'; -import theme from './ModelViewer.module.scss'; +import theme from './ModelViewer.module.css'; export function ModelViewer({ t, ...props }) { return ( diff --git a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.css b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.css new file mode 100644 index 00000000000..dd14a05a787 --- /dev/null +++ b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.css @@ -0,0 +1,94 @@ +/* stylelint-disable color-hex-case */ +@keyframes object-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +@keyframes skeleton-blink { + 0%, + 100% { + opacity: 0.1; + } + 50% { + opacity: 0.25; + } +} +.tc-model { + display: flex; + flex-direction: column; + height: 100%; + overflow: auto; + width: 100%; +} +.tc-model-leaf :global(.tc-simple-text-value), +.tc-model-branch :global(.tc-simple-text-value) { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.tc-model-leaf-padding-left, +.tc-model-branch-padding-left { + padding-left: 30px; +} +.tc-model-leaf-button, +.tc-model-branch-button { + background: transparent; + border: none; + bottom: 0; + height: inherit; + position: absolute; + top: 0; + width: 100%; +} +.tc-model-branch { + display: flex; + flex-direction: column; +} +.tc-model-branch-content { + align-items: center; + display: inline-flex; + height: 1.875rem; + position: relative; +} +.tc-model-branch-content:focus :global(.tc-tree-branch-icon-caret), +.tc-model-branch-content:hover :global(.tc-tree-branch-icon-caret) { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); +} +.tc-model-leaf { + align-items: center; + display: inline-flex; + height: 1.875rem; + position: relative; + width: 100%; +} +.tc-model-leaf :global(.tc-pie-chart-loading-circle) { + margin: 0 5px 0 0; +} +.tc-model-leaf-options { + display: inline-flex; + margin-left: auto; + padding-right: 15px; + z-index: 1; + flex-shrink: 0; +} +.tc-model-leaf-options-burger { + padding: 0; + margin: 0 5px; +} +.tc-model-leaf-options-burger :global(.tc-svg-icon) { + width: 14px; + height: 14px; + padding-bottom: 2px; +} +.tc-model-leaf-options-tooltip { + display: flex; +} +.tc-model-leaf-options-quality-circles { + display: inherit; + padding-top: 0.8125rem; +} +.tc-model-leaf-options-quality-circles-blink { + animation: object-blink 1.5s ease infinite; +} diff --git a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss deleted file mode 100644 index 630ab68beba..00000000000 --- a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss +++ /dev/null @@ -1,97 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; -@import '~@talend/bootstrap-theme/src/theme/animation'; - -$model-node-height: 1.875rem !default; - -.tc-model { - display: flex; - flex-direction: column; - height: 100%; - overflow: auto; - width: 100%; - - &-leaf, - &-branch { - :global(.tc-simple-text-value) { - color: tokens.$coral-color-neutral-text-weak; - } - - &-padding-left { - padding-left: $padding-larger; - } - - &-button { - background: transparent; - border: none; - bottom: 0; - height: inherit; - position: absolute; - top: 0; - width: 100%; - } - } - - &-branch { - display: flex; - flex-direction: column; - - &-content { - align-items: center; - display: inline-flex; - height: $model-node-height; - position: relative; - - &:focus, - &:hover { - :global(.tc-tree-branch-icon-caret) { - color: tokens.$coral-color-accent-text-hover; - } - } - } - } - - &-leaf { - align-items: center; - display: inline-flex; - height: $model-node-height; - position: relative; - width: 100%; - - :global(.tc-pie-chart-loading-circle) { - margin: 0 5px 0 0; - } - - &-options { - display: inline-flex; - margin-left: auto; - padding-right: $padding-normal; - z-index: 1; - flex-shrink: 0; - - &-burger { - padding: 0; - margin: 0 $padding-smaller; - - :global(.tc-svg-icon) { - width: $btn-font-size; - height: $btn-font-size; - padding-bottom: 2px; - } - } - - &-tooltip { - display: flex; - } - - &-quality-circles { - display: inherit; - padding-top: 0.8125rem; - - &-blink { - @include heartbeat(object-blink); - } - } - } - } -} diff --git a/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js b/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js index eaa174406b3..776285dce78 100644 --- a/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js +++ b/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js @@ -8,7 +8,7 @@ import Skeleton from '../../../Skeleton'; import { LengthBadge } from '../../Badges'; import { TreeBranchIcon } from '../../Icons'; -import theme from '../RecordsViewer.module.scss'; +import theme from '../RecordsViewer.module.css'; /** * Used with the lazy loading to allow the render of the skeleton. diff --git a/packages/components/src/DataViewer/RecordsViewer/Leaf/RecordsViewerLeaf.component.js b/packages/components/src/DataViewer/RecordsViewer/Leaf/RecordsViewerLeaf.component.js index 28cb3e9158f..f6fe6b86dc6 100644 --- a/packages/components/src/DataViewer/RecordsViewer/Leaf/RecordsViewerLeaf.component.js +++ b/packages/components/src/DataViewer/RecordsViewer/Leaf/RecordsViewerLeaf.component.js @@ -6,7 +6,7 @@ import I18N_DOMAIN_COMPONENTS from '../../../constants'; import getDefaultT from '../../../translate'; import { SimpleTextKeyValue } from '../../Text'; import { ActionButton } from '../../../Actions'; -import theme from '../RecordsViewer.module.scss'; +import theme from '../RecordsViewer.module.css'; export function RecordsViewerLeaf({ dataKey, diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.component.js b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.component.js index 73d036019a4..d6485356f0c 100644 --- a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.component.js +++ b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.component.js @@ -2,7 +2,7 @@ import { Component } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import get from 'lodash/get'; -import theme from './RecordsViewer.module.scss'; +import theme from './RecordsViewer.module.css'; import { Tree } from '../Core'; import { VirtualizedTree } from '../Virtualized'; import { TreeHeader } from '../Headers'; diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.container.js b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.container.js index aaa5fd5bac8..69b20d90a54 100644 --- a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.container.js +++ b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.container.js @@ -15,7 +15,7 @@ import { getJSONPath, getObjectBranchDatakey, } from './RecordsViewer.parser'; -import theme from './RecordsViewer.module.scss'; +import theme from './RecordsViewer.module.css'; /** * Used in the branch to get the icon. diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.css b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.css new file mode 100644 index 00000000000..18a093e0a62 --- /dev/null +++ b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.css @@ -0,0 +1,158 @@ +/* stylelint-disable declaration-no-important */ +/* stylelint-disable color-hex-case */ +.tc-records-viewer { + display: flex; + flex-direction: column; + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + height: 100%; +} +.tc-records-viewer-tree :global(.ReactVirtualized__Grid__innerScrollContainer) { + overflow: initial !important; +} +.tc-records-viewer-tree :global(.tc-svg-icon) { + height: 0.75rem; + width: 0.75rem; + margin: 0; + vertical-align: baseline; +} +.tc-records-viewer-tree-border { + border-bottom: 0.0625rem solid #d2d2d2; +} +.tc-records-viewer-skeleton { + align-items: center; + display: flex; + height: 1.375rem; + padding: 5px 0 5px 30px; +} +.tc-records-viewer-branch, +.tc-records-viewer-leaf { + display: flex; + margin-left: 30px; + position: relative; +} +.tc-records-viewer-leaf { + justify-content: flex-start; + align-items: baseline; +} +.tc-records-viewer-leaf-highlighted::before { + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + bottom: 0; + content: ' '; + left: -100%; + position: absolute; + right: 0; + top: 0; + z-index: -1; +} +.tc-records-viewer-leaf { + /* stylelint-disable-next-line order/order */ + min-height: 1.375rem; +} +.tc-records-viewer-leaf-quality { + display: inline-flex; + margin-left: -30px; + height: 1.375rem; + left: 0; + position: absolute; +} +.tc-records-viewer-branch { + flex-direction: column; + justify-content: center; + margin-left: 12px; +} +.tc-records-viewer-branch-highlighted::before { + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + bottom: 0; + content: ' '; + left: -100%; + position: absolute; + right: 0; + top: 0; + z-index: -1; +} +.tc-records-viewer-branch-content { + position: relative; + align-items: center; + display: inline-flex; + height: 1.375rem; +} +.tc-records-viewer-branch-content :global(.tc-length-badge) { + margin-left: 10px; +} +.tc-records-viewer-branch-content:hover::before { + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + bottom: 0; + content: ' '; + left: -100%; + position: absolute; + right: 0; + top: 0; + z-index: -1; +} +.tc-records-viewer-branch-content:hover :global(.tc-records-viewer-branch-icon) { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-records-viewer-branch-content:hover :global(.tc-tree-branch-icon-caret) { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-records-viewer-branch-content:hover :global(.tc-length-badge) { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + background-color: var(--coral-color-neutral-background, white); +} +.tc-records-viewer-branch-icon { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + height: 0.75rem; + width: 0.75rem; +} +.tc-records-viewer-branch-quality { + display: inline-flex; + margin-left: 10px; + z-index: 1; +} +.tc-records-viewer-branch-quality:focus::before, +.tc-records-viewer-branch-quality:hover::before { + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + bottom: 0; + content: ' '; + left: -100%; + position: absolute; + right: 0; + top: 0; + z-index: -1; + pointer-events: none; +} + +.tc-leaf-overflow-icon { + position: absolute; + left: -1.0625rem; + margin-right: 5px; +} +.tc-leaf-overflow-icon-chevron { + padding: 0; + line-height: initial; + min-height: initial; +} +.tc-leaf-overflow-icon-chevron svg { + border: 1px solid var(--coral-color-accent-border, hsl(204, 95%, 31%)); + padding: 2px; + border-radius: 10px; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-leaf-overflow-icon-chevron-filled svg { + border: 1px solid var(--coral-color-accent-border, hsl(204, 95%, 31%)); + padding: 2px; + border-radius: 10px; + color: var(--coral-color-accent-text-weak, white); + background-color: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); +} +.tc-leaf-overflow-icon :global(.tc-svg-anchor) { + background: transparent; + border: none; + padding: 0; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + display: flex; +} +.tc-leaf-overflow-icon :global(.tc-svg-anchor):focus, +.tc-leaf-overflow-icon :global(.tc-svg-anchor):hover { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss deleted file mode 100644 index 5f08021d447..00000000000 --- a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss +++ /dev/null @@ -1,184 +0,0 @@ -/* stylelint-disable declaration-no-important */ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$hightlight-height: 1.375rem !default; -$records-node-height: $hightlight-height !default; -$border-size: 0.0625rem; - -@mixin selection($backgroundColor) { - background: $backgroundColor; - bottom: 0; - content: ' '; - left: -100%; - position: absolute; - right: 0; - top: 0; - z-index: -1; -} - -.tc-records-viewer { - display: flex; - flex-direction: column; - background: tokens.$coral-color-neutral-background-medium; - height: 100%; - - &-tree { - // We need to override an overflow hidden in the virtualized grid. - // Unfortunetely there is no way to change it by props, so we use the important... - // A issue will be open on react-virtualized soon. - :global(.ReactVirtualized__Grid__innerScrollContainer) { - overflow: initial !important; - } - - :global(.tc-svg-icon) { - height: 0.75rem; - width: 0.75rem; - margin: 0; - vertical-align: baseline; - } - - &-border { - border-bottom: $border-size solid $alto; - } - } - - &-skeleton { - align-items: center; - display: flex; - height: $hightlight-height; - padding: $padding-smaller 0 $padding-smaller $padding-larger; - } - - &-branch, - &-leaf { - display: flex; - margin-left: $padding-larger; - position: relative; - } - - &-leaf { - justify-content: flex-start; - align-items: baseline; - - &-highlighted { - &::before { - @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; - height: $hightlight-height; - left: 0; - position: absolute; - } - } - - &-branch { - flex-direction: column; - justify-content: center; - margin-left: 12px; - - &-highlighted::before { - @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(tokens.$coral-color-neutral-background-strong); - } - - :global(.tc-records-viewer-branch-icon) { - color: tokens.$coral-color-accent-text; - } - - :global(.tc-tree-branch-icon-caret) { - color: tokens.$coral-color-accent-text; - } - - :global(.tc-length-badge) { - color: tokens.$coral-color-accent-text; - background-color: tokens.$coral-color-neutral-background; - } - } - } - - &-icon { - color: tokens.$coral-color-accent-text; - height: $svg-sm-size; - width: $svg-sm-size; - } - - &-quality { - display: inline-flex; - margin-left: $padding-small; - z-index: 1; - - &:focus, - &:hover { - &::before { - @include selection(tokens.$coral-color-neutral-background-strong); - pointer-events: none; - } - } - } - } -} - -@mixin chevron($color) { - border: 1px solid tokens.$coral-color-accent-border; - padding: 2px; - border-radius: 10px; - color: $color; -} - -.tc-leaf-overflow-icon { - position: absolute; - left: -1.0625rem; - margin-right: $padding-smaller; - - &-chevron { - padding: 0; - line-height: initial; - min-height: initial; - - svg { - @include chevron(tokens.$coral-color-accent-text); - } - - &-filled { - svg { - @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: tokens.$coral-color-accent-text; - display: flex; - - &:focus, - &:hover { - color: tokens.$coral-color-accent-text; - } - } -} diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.component.js b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.component.js index 7bf11ef35a4..97225de05d9 100644 --- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.component.js +++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.component.js @@ -5,7 +5,7 @@ import has from 'lodash/has'; import TooltipTrigger from '../../../TooltipTrigger'; import FormatValue from '../../../FormatValue/FormatValue.component'; -import theme from './DefaultValueRenderer.module.scss'; +import theme from './DefaultValueRenderer.module.css'; export const DEFAULT_VALUE_PROP_TYPES = PropTypes.oneOfType([ PropTypes.string, diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.scss b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.css similarity index 79% rename from packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.scss rename to packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.css index 8f2ae7efde6..68282f921ab 100644 --- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.scss +++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.css @@ -1,5 +1,4 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - +/* stylelint-disable color-hex-case */ .td-default-cell { height: 100%; white-space: nowrap; diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.component.js b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.component.js index cdb954a720b..ccc2561a5e1 100644 --- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.component.js +++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.component.js @@ -4,7 +4,7 @@ import classNames from 'classnames'; import isNull from 'lodash/isNull'; import get from 'lodash/get'; import DefaultValueRenderer from './DefaultValueRenderer.component'; -import theme from './SimpleTextKeyValue.module.scss'; +import theme from './SimpleTextKeyValue.module.css'; const DATE_TYPE_FORMATER = 'date'; const LONG_TYPE = 'long'; diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.css b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.css new file mode 100644 index 00000000000..0610d16e5df --- /dev/null +++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.css @@ -0,0 +1,50 @@ +/* stylelint-disable color-hex-case */ +.tc-simple-text { + display: flex; + min-width: 0; + margin-right: 10px; +} +.tc-simple-text-key, +.tc-simple-text :global(.td-default-cell) { + font-weight: 400; +} +.tc-simple-text-key { + margin-right: 5px; + white-space: nowrap; + flex-shrink: 1; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + vertical-align: top; +} +.tc-simple-text-key-with-value::after { + content: ':'; +} +.tc-simple-text-value { + text-transform: lowercase; + white-space: nowrap; +} +.tc-simple-text-value::first-letter { + text-transform: uppercase; +} +.tc-simple-text-value.shrink-value { + overflow: hidden; + text-overflow: ellipsis; +} +.tc-simple-text-value.wrap-value { + overflow: initial; + white-space: normal; + word-break: break-all; +} +.tc-simple-text :global(.td-default-cell) { + display: inline-block; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + font-family: 'Inconsolata'; +} +.tc-simple-text-type { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + opacity: 0.75; + margin-left: 5px; +} + +.td-cell-int { + text-align: right; +} diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss deleted file mode 100644 index 5f735eb2dda..00000000000 --- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss +++ /dev/null @@ -1,61 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-simple-text { - display: flex; - min-width: 0; - margin-right: $padding-small; - - &-key, - :global(.td-default-cell) { - font-weight: 400; - } - - &-key { - margin-right: $padding-smaller; - white-space: nowrap; - flex-shrink: 1; - color: tokens.$coral-color-neutral-text-weak; - vertical-align: top; - } - - &-key-with-value::after { - content: ':'; - } - - &-value { - text-transform: lowercase; - white-space: nowrap; - - &::first-letter { - text-transform: uppercase; - } - - &.shrink-value { - overflow: hidden; - text-overflow: ellipsis; - } - - &.wrap-value { - overflow: initial; - white-space: normal; - word-break: break-all; - } - } - - :global(.td-default-cell) { - display: inline-block; - color: tokens.$coral-color-accent-text; - font-family: 'Inconsolata'; - } - - &-type { - color: tokens.$coral-color-neutral-text; - opacity: 0.75; - margin-left: $padding-smaller; - } -} - -.td-cell-int { - text-align: right; -} diff --git a/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.component.js b/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.component.js index 983149ea999..1aa328a17d4 100644 --- a/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.component.js +++ b/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.component.js @@ -3,7 +3,7 @@ import { AutoSizer, CellMeasurerCache, List } from 'react-virtualized'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import TreeCellMeasurer from '../TreeCellMeasurer'; -import theme from './VirtualizedTree.module.scss'; +import theme from './VirtualizedTree.module.css'; const DEFAULT_HEIGHT = 40; diff --git a/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.css b/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.css new file mode 100644 index 00000000000..1ca56fdbb18 --- /dev/null +++ b/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.css @@ -0,0 +1,4 @@ +/* stylelint-disable color-hex-case */ +.tc-virtualized-tree { + flex: 1 1 auto; +} diff --git a/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.scss b/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.scss deleted file mode 100644 index c9052dd4693..00000000000 --- a/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-virtualized-tree { - flex: 1 1 auto; -} diff --git a/packages/components/src/DataViewer/theme.module.css b/packages/components/src/DataViewer/theme.module.css new file mode 100644 index 00000000000..8a83aeb2bd0 --- /dev/null +++ b/packages/components/src/DataViewer/theme.module.css @@ -0,0 +1,39 @@ +/* stylelint-disable color-hex-case */ +.tc-twoviewers-layout { + display: flex; + width: 100%; + overflow: hidden; +} +.tc-twoviewers-layout-loading { + display: flex; + align-items: center; + justify-content: center; +} +.tc-twoviewers-layout-loading :global(.tc-svg-icon) { + width: 6rem; + height: 6rem; +} +.tc-twoviewers-layout-left, +.tc-twoviewers-layout-right { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-twoviewers-layout-left { + border-right: 0.3125rem solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + width: 29.375rem; +} +.tc-twoviewers-layout-right { + flex-grow: 1; +} + +:global(.button-padding) { + margin-top: 15px; + margin-right: 10px; +} + +.custom-quality-bar-line { + background-color: blue; +} + +.custom-quality-bar-line2 { + background-color: pink; +} diff --git a/packages/components/src/DataViewer/theme.module.scss b/packages/components/src/DataViewer/theme.module.scss deleted file mode 100644 index ade64350cda..00000000000 --- a/packages/components/src/DataViewer/theme.module.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-layout-skeleton-width: 6rem !default; -$tc-layout-skeleton-height: 6rem !default; - -.tc-twoviewers-layout { - display: flex; - width: 100%; - overflow: hidden; - - &-loading { - display: flex; - align-items: center; - justify-content: center; - - :global(.tc-svg-icon) { - width: $tc-layout-skeleton-width; - height: $tc-layout-skeleton-height; - } - } - - &-left, - &-right { - background-color: tokens.$coral-color-neutral-background-medium; - } - - &-left { - border-right: 0.3125rem solid tokens.$coral-color-neutral-border-weak; - width: 29.375rem; - } - - &-right { - flex-grow: 1; - } -} - -:global(.button-padding) { - margin-top: $padding-normal; - margin-right: $padding-small; -} - -.custom-quality-bar-line { - background-color: blue; -} - -.custom-quality-bar-line2 { - background-color: pink; -} diff --git a/packages/components/src/Datalist/Datalist.component.js b/packages/components/src/Datalist/Datalist.component.js index 60424fb9280..d5735667012 100644 --- a/packages/components/src/Datalist/Datalist.component.js +++ b/packages/components/src/Datalist/Datalist.component.js @@ -12,7 +12,7 @@ import FocusManager from '../FocusManager'; import Icon from '../Icon'; import Typeahead from '../Typeahead'; -import theme from './Datalist.module.scss'; +import theme from './Datalist.module.css'; export function escapeRegexCharacters(str) { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); @@ -29,7 +29,7 @@ function isValuePresentInSuggestions(titleMap, filterValue, multiSection) { return multiSection ? titleMap.find(group => group.suggestions.find(item => filterValue.toLowerCase() === item.name.toLowerCase()), - ) + ) : titleMap.find(itemValue => filterValue.toLowerCase() === itemValue.name.toLowerCase()); } diff --git a/packages/components/src/Datalist/Datalist.module.css b/packages/components/src/Datalist/Datalist.module.css new file mode 100644 index 00000000000..ee4b4c35e28 --- /dev/null +++ b/packages/components/src/Datalist/Datalist.module.css @@ -0,0 +1,43 @@ +/* stylelint-disable color-hex-case */ +.tc-datalist-form { + width: 100%; +} + +.container { + width: 100%; +} +.container > div { + width: 100%; +} + +.items-container { + max-height: 20rem; + z-index: 999; +} +.items-container :global(.tc-typeahead-section-container) :global(.tc-typeahead-section-header) { + border-bottom: none; +} + +.tc-datalist-item { + display: flex; + align-items: center; +} +.tc-datalist-item .tc-datalist-item-icon { + width: 1rem; + height: 1rem; + color: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); + margin-right: 15px; +} + +.items { + margin: 0; + padding: 0; + list-style-type: none; +} +.items > li > div { + display: flex; + height: 2.5rem; +} +.items > li > div:hover { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} diff --git a/packages/components/src/Datalist/Datalist.module.scss b/packages/components/src/Datalist/Datalist.module.scss deleted file mode 100644 index 32fce61d2ea..00000000000 --- a/packages/components/src/Datalist/Datalist.module.scss +++ /dev/null @@ -1,55 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-datalist-items-max-height: 20rem !default; -$tc-datalist-item-height: 2.5rem !default; - -.tc-datalist-form { - width: 100%; -} - -.container { - width: 100%; - - > div { - width: 100%; - } -} - -.items-container { - max-height: $tc-datalist-items-max-height; - z-index: 999; - - :global(.tc-typeahead-section-container) { - :global(.tc-typeahead-section-header) { - border-bottom: none; - } - } -} - -.tc-datalist-item { - display: flex; - align-items: center; - - .tc-datalist-item-icon { - width: $svg-md-size; - height: $svg-md-size; - color: tokens.$coral-color-neutral-icon; - margin-right: $padding-normal; - } -} - -.items { - margin: 0; - padding: 0; - list-style-type: none; - - > li > div { - display: flex; - height: $tc-datalist-item-height; - - &:hover { - background-color: tokens.$coral-color-neutral-background-medium; - } - } -} diff --git a/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.component.js b/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.component.js index 9471fe0d5c5..9b5b8b249c0 100644 --- a/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.component.js +++ b/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.component.js @@ -12,7 +12,7 @@ import DatePicker from '../Date'; import TimeZone from '../TimeZone'; import useInputPickerHandlers from '../hooks/useInputPickerHandlers'; -import theme from './InputDatePicker.module.scss'; +import theme from './InputDatePicker.module.css'; const PROPS_TO_OMIT_FOR_INPUT = [ 't', diff --git a/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.module.css b/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.module.css new file mode 100644 index 00000000000..3550421ed67 --- /dev/null +++ b/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.module.css @@ -0,0 +1,16 @@ +.popper { + width: 19.375rem; + background: var(--coral-color-neutral-background, white); + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + z-index: var(--coral-elevation-layer-interactive-front, 8); +} + +.date-picker { + display: flex; + width: fit-content; +} +.date-picker :global(.range-input) { + display: flex; + flex-direction: column; + gap: var(--coral-spacing-xxs, 0.25rem); +} diff --git a/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.module.scss b/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.module.scss deleted file mode 100644 index ed3680bfb9e..00000000000 --- a/packages/components/src/DateTimePickers/InputDatePicker/InputDatePicker.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import '../shared/styles/mixins'; - -.popper { - @include popper; -} - -.date-picker { - @include date-picker; -} diff --git a/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js b/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js index f4ddee994d0..939e3d0e22c 100644 --- a/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js +++ b/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js @@ -14,7 +14,7 @@ import DateRange from '../DateRange'; import { DateRangeContext } from '../DateRange/Context'; import useInputPickerHandlers from '../hooks/useInputPickerHandlers'; -import theme from './InputDateRangePicker.module.scss'; +import theme from './InputDateRangePicker.module.css'; const PROPS_TO_OMIT_FOR_INPUT = [ 'id', diff --git a/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.module.css b/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.module.css new file mode 100644 index 00000000000..fda36a9133f --- /dev/null +++ b/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.module.css @@ -0,0 +1,28 @@ +.popper { + width: 19.375rem; + background: var(--coral-color-neutral-background, white); + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + z-index: var(--coral-elevation-layer-interactive-front, 8); +} + +.date-picker { + display: flex; + width: fit-content; +} +.date-picker :global(.range-input) { + display: flex; + flex-direction: column; + gap: var(--coral-spacing-xxs, 0.25rem); +} +.date-picker .arrow { + display: flex; + align-items: flex-end; + margin: 10px; +} + +.date-range-picker-inline :global(.range-input) { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--coral-spacing-xxs, 0.25rem); +} diff --git a/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.module.scss b/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.module.scss deleted file mode 100644 index d8f366be9dd..00000000000 --- a/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import '../shared/styles/mixins'; - -.popper { - @include popper; -} - -.date-picker { - @include date-picker; - - .arrow { - @include arrow; - } -} - -.date-range-picker-inline { - @include date-picker-inline; -} diff --git a/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js b/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js index 19fdbe3f6dd..bd1262245f2 100644 --- a/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js +++ b/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js @@ -7,7 +7,7 @@ import LegacyInputDateTimePicker from '../LegacyDateTimePickers'; import DateTime from '../DateTime'; import { DateTimeContext } from '../DateTime/Context'; -import theme from './InputDateTimePicker.module.scss'; +import theme from './InputDateTimePicker.module.css'; function InputDateTimePicker(props) { if (props.selectedDateTime) { diff --git a/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.css b/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.css new file mode 100644 index 00000000000..81d22cd67fb --- /dev/null +++ b/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.css @@ -0,0 +1,12 @@ +.date-time-picker { + display: flex; + width: fit-content; +} +.date-time-picker :global(.range-input) { + display: flex; + flex-direction: column; + gap: var(--coral-spacing-xxs, 0.25rem); +} +.date-time-picker { + gap: var(--coral-spacing-xs, 0.5rem); +} diff --git a/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss deleted file mode 100644 index 290f2b9fe75..00000000000 --- a/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -@import '../shared/styles/mixins'; - -.date-time-picker { - @include date-picker; - gap: tokens.$coral-spacing-xs; -} diff --git a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js index 0846e000e66..3fb0b4e4c53 100644 --- a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js +++ b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js @@ -12,7 +12,7 @@ import DateTimeRange from '../DateTimeRange'; import { DateTimeRangeContext } from '../DateTimeRange/Context'; import InputDateTimePicker from '../InputDateTimePicker'; -import theme from './InputDateTimeRangePicker.module.scss'; +import theme from './InputDateTimeRangePicker.module.css'; const PROPS_TO_OMIT_FOR_INPUT = [ 'id', diff --git a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.module.css b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.module.css new file mode 100644 index 00000000000..78e12d22ba8 --- /dev/null +++ b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.module.css @@ -0,0 +1,39 @@ +.range-picker { + display: flex; + width: fit-content; +} +.range-picker :global(.range-input) { + display: flex; + flex-direction: column; + gap: var(--coral-spacing-xxs, 0.25rem); +} +.range-picker .arrow { + display: flex; + align-items: flex-end; + margin: 10px; +} + +.range-picker-vertical { + display: flex; + width: fit-content; +} +.range-picker-vertical :global(.range-input) { + display: flex; + flex-direction: column; + gap: var(--coral-spacing-xxs, 0.25rem); +} +.range-picker-vertical { + flex-direction: column; +} +.range-picker-vertical :global(.arrow) { + display: flex; + align-items: flex-end; + margin: 10px; +} + +.date-time-range-picker-inline :global(.range-input) { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--coral-spacing-xxs, 0.25rem); +} diff --git a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.module.scss b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.module.scss deleted file mode 100644 index 479e5f38fb7..00000000000 --- a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import '../shared/styles/mixins'; - -.range-picker { - @include date-picker; - - .arrow { - @include arrow; - } -} - -.range-picker-vertical { - @include date-picker; - flex-direction: column; - - :global(.arrow) { - @include arrow; - } -} - -.date-time-range-picker-inline { - @include date-picker-inline; -} diff --git a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.component.js b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.component.js index 794d5de8481..180a210724b 100644 --- a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.component.js +++ b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.component.js @@ -9,7 +9,7 @@ import FocusManager from '../../FocusManager'; import Time from '../Time'; import TimeZone from '../TimeZone'; -import theme from './InputTimePicker.module.scss'; +import theme from './InputTimePicker.module.css'; import useInputPickerHandlers from '../hooks/useInputPickerHandlers'; import focusOnTime from '../gesture/timePickerGesture'; diff --git a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.css b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.css new file mode 100644 index 00000000000..2c0cabf52d9 --- /dev/null +++ b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.css @@ -0,0 +1,17 @@ +.popper { + overflow: auto; + width: 5rem; + height: 10.625rem; + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + z-index: var(--coral-elevation-layer-interactive-front, 8); +} + +.time-picker { + display: flex; + width: fit-content; +} +.time-picker :global(.range-input) { + display: flex; + flex-direction: column; + gap: var(--coral-spacing-xxs, 0.25rem); +} diff --git a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss deleted file mode 100644 index 959ab04bae2..00000000000 --- a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -@import '../shared/styles/mixins'; - -$tc-timepicker-width: 5rem !default; -$tc-timepicker-height: 10.625rem !default; - -.popper { - overflow: auto; - width: $tc-timepicker-width; - height: $tc-timepicker-height; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - z-index: tokens.$coral-elevation-layer-interactive-front; -} - -.time-picker { - @include date-picker; -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.component.js index 87272783717..e8c2cb42278 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.component.js @@ -8,7 +8,7 @@ import { INPUT_ERRORS, HOUR_ERRORS, MINUTES_ERRORS, SECONDS_ERRORS } from '../co import { DateTimeContext } from '../Context'; import Error from './Error.component'; -import theme from './Validation.module.scss'; +import theme from './Validation.module.css'; function Validation({ t }) { const { errorManagement, formManagement } = useContext(DateTimeContext); diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.css new file mode 100644 index 00000000000..ded9b58b473 --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.css @@ -0,0 +1,13 @@ +/* stylelint-disable color-hex-case */ +.validation { + display: flex; + padding: 10px 15px; + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + justify-content: space-between; + align-items: center; + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.validation .errors { + display: flex; + flex-direction: column; +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss deleted file mode 100644 index 0f4ecc92d3d..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.validation { - display: flex; - padding: $padding-small $padding-normal; - background-color: tokens.$coral-color-neutral-background-medium; - justify-content: space-between; - align-items: center; - color: tokens.$coral-color-danger-text; - - .errors { - display: flex; - flex-direction: column; - } -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js index 346465bd9b1..550595aed6e 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.js @@ -12,7 +12,7 @@ import FocusManager from '../../../FocusManager'; import DateTime from '../DateTime'; import { DateTimeContext } from '../DateTime/Context'; -import theme from './InputDateTimePicker.module.scss'; +import theme from './InputDateTimePicker.module.css'; const PROPS_TO_OMIT_FOR_INPUT = [ 'dateFormat', diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.css new file mode 100644 index 00000000000..4d20ee74416 --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.css @@ -0,0 +1,7 @@ +/* stylelint-disable color-hex-case */ +.popper { + width: 19.375rem; + background: var(--coral-color-neutral-background, white); + box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2); + z-index: var(--coral-elevation-layer-interactive-front, 8); +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss deleted file mode 100644 index ed28311ccfc..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-datetimepicker-width: 19.375rem !default; -$tc-datetimepicker-box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2) !default; -$tc-datetimepicker-z-index: $zindex-dropdown !default; - -.popper { - width: $tc-datetimepicker-width; - background: tokens.$coral-color-neutral-background; - box-shadow: $tc-datetimepicker-box-shadow; - z-index: $tc-datetimepicker-z-index; -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js index 2310379a81b..59a63c6017e 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.component.js @@ -17,7 +17,7 @@ import { Gesture } from '@talend/react-a11y'; import getDefaultT from '../../../../translate'; import { buildDayNames, buildWeeks, getPickerLocale } from '../../generator'; -import theme from './DatePicker.module.scss'; +import theme from './DatePicker.module.css'; const getDayNames = memoize(buildDayNames); diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.css new file mode 100644 index 00000000000..9c65534017c --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.css @@ -0,0 +1,59 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable color-hex-case */ +.container { + width: 100%; + position: relative; +} + +.calendar-header::after { + content: ''; + border-bottom: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + width: 100%; + position: absolute; + left: 0; + top: 1.4375rem; +} +.calendar-header th { + text-align: center; + padding-bottom: 10px; +} +.calendar-header abbr { + border: none; + font-weight: normal; + text-decoration: none; +} + +.calendar-row { + height: 2.25rem; + text-align: center; +} +.calendar-row .calendar-day { + font-size: 0.75rem; +} +.calendar-row .calendar-day.selected { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text-strong, hsl(204, 96%, 18%)); + transition: color 0.2s ease-in; + font-weight: 600; +} +.calendar-row .calendar-day:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + opacity: 0.54; +} +.calendar-row .calendar-day { + height: 1.5rem; + width: 1.5rem; + background: transparent; + border: none; + border-radius: 50%; + line-height: 1.5rem; + padding: 0; +} +.calendar-row .calendar-day.today { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text-strong, hsl(204, 96%, 18%)); + border: solid 1px var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.calendar-row .calendar-day.not-current-month { + opacity: 0.54; +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss deleted file mode 100644 index 6c44619f69c..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -@import '../../shared/styles/mixins'; -@import '../../shared/styles/variables'; - -.container { - width: 100%; - position: relative; -} - -.calendar-header { - &::after { - @include picker-underline; - width: 100%; - position: absolute; - left: 0; - top: 1.4375rem; - } - - th { - text-align: center; - padding-bottom: $padding-small; - } - - abbr { - border: none; - font-weight: normal; - text-decoration: none; - } -} - -.calendar-row { - height: 2.25rem; - text-align: center; - - .calendar-day { - @include picker-action; - - height: 1.5rem; - width: 1.5rem; - background: transparent; - border: none; - border-radius: 50%; - line-height: 1.5rem; - padding: 0; - - &.today { - background-color: tokens.$coral-color-accent-background; - color: tokens.$coral-color-accent-text-strong; - border: solid 1px tokens.$coral-color-accent-border; - } - - &.not-current-month { - opacity: 0.54; - } - } -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js index 1acf73ccc52..6a2c9fc8fc8 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.component.js @@ -13,7 +13,7 @@ import getDefaultT from '../../../../translate'; import DateTimeView from '../../views/DateTimeView'; import MonthYearView from '../../views/MonthYearView'; -import theme from './DateTimePicker.module.scss'; +import theme from './DateTimePicker.module.css'; class DateTimePicker extends Component { constructor(props) { diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.css new file mode 100644 index 00000000000..8a263a39bc4 --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.css @@ -0,0 +1,21 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable color-hex-case */ +.container { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + min-width: 18.125rem; + min-height: 22rem; + padding: 15px; +} + +.footer { + padding-top: 15px; +} +.footer::before { + content: ''; + border-bottom: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + display: block; + margin-bottom: 15px; +} +.footer.date-padding { + padding-top: 5px; +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss deleted file mode 100644 index 9c41872a390..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -@import '../../shared/styles/mixins'; -@import '../../shared/styles/variables'; - -.container { - color: tokens.$coral-color-neutral-text; - min-width: 18.125rem; - min-height: 22rem; - padding: $padding-normal; -} - -.footer { - padding-top: $padding-normal; - - &::before { - @include picker-underline; - display: block; - margin-bottom: $padding-normal; - } - - &.date-padding { - padding-top: $padding-smaller; - } -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.component.js index ec78f821408..ad62dfe2d46 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { buildMonths } from '../../generator'; -import theme from './MonthPicker.module.scss'; +import theme from './MonthPicker.module.css'; import { Gesture } from '@talend/react-a11y'; import getDefaultT from '../../../../translate'; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.css new file mode 100644 index 00000000000..c1cd93e7e6b --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.css @@ -0,0 +1,47 @@ +/* stylelint-disable color-hex-case */ +.container { + width: 100%; +} +.container tbody { + border: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} + +.calendar-row { + border-bottom: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} +.calendar-row:last-child { + border-bottom: none; +} + +.calendar-col { + border-right: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + width: 33.33%; +} +.calendar-col:last-child { + border-right: none; +} + +.calendar-month { + font-size: 0.75rem; +} +.calendar-month.selected { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text-strong, hsl(204, 96%, 18%)); + transition: color 0.2s ease-in; + font-weight: 600; +} +.calendar-month:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + opacity: 0.54; +} +.calendar-month { + flex: 1; + height: 3.5625rem; + width: 100%; + background: transparent; + border: none; + padding: 0; +} +.calendar-month:active { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss deleted file mode 100644 index d99d8e4fdb9..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -@import '../../shared/styles/mixins'; -@import '../../shared/styles/variables'; - -.container { - width: 100%; - - tbody { - border: $border-default; - } -} - -.calendar-row { - border-bottom: $border-default; - - &:last-child { - border-bottom: none; - } -} - -.calendar-col { - border-right: $border-default; - width: 33.33%; - - &:last-child { - border-right: none; - } -} - -.calendar-month { - @include picker-action; - - flex: 1; - height: 3.5625rem; - width: 100%; - - background: transparent; - border: none; - padding: 0; - - &:active { - background-color: tokens.$coral-color-neutral-background-medium; - } -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.component.js index 0211917bcbb..7f0f442fbf4 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.component.js @@ -7,7 +7,7 @@ import getDefaultT from '../../../../translate'; import { DateTimeContext } from '../../DateTime/Context'; import { FIELD_HOURS, FIELD_MINUTES, FIELD_SECONDS } from '../../DateTime/constants'; -import theme from './TimePicker.module.scss'; +import theme from './TimePicker.module.css'; class TimePicker extends PureComponent { static defaultProps = { diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.css new file mode 100644 index 00000000000..c2265bb0aa4 --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.css @@ -0,0 +1,37 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable selector-no-qualifying-type */ +/* stylelint-disable color-hex-case */ +/* stylelint-disable color-hex-case */ +.time-picker { + display: flex; + flex-direction: column; + align-items: center; +} +.time-picker legend { + border: none; + font-size: inherit; + text-align: center; + text-transform: none; +} +.time-picker legend .utc { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font-size: 0.75rem; +} +.time-picker hr { + width: 100%; + border-color: var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + margin: 10px 0; +} +.time-picker > input.time-input { + border: 1px solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + height: 1.875rem; + text-align: center; + width: 100%; +} +.time-picker > input.time-input:focus { + border-color: var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.time-picker > input.time-input.time-error { + box-shadow: inset 0 -2px 0 #e96065; + border-bottom: none; +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss deleted file mode 100644 index 88a69166e76..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* stylelint-disable color-hex-case */ -/* stylelint-disable selector-no-qualifying-type */ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -@import '../../shared/styles/mixins'; - -.time-picker { - display: flex; - flex-direction: column; - align-items: center; - - legend { - border: none; - font-size: inherit; - text-align: center; - text-transform: none; - - .utc { - color: tokens.$coral-color-neutral-text; - font-size: 0.75rem; - } - } - - hr { - width: 100%; - border-color: tokens.$coral-color-neutral-border; - margin: $padding-small 0; - } - - > input.time-input { - border: 1px solid tokens.$coral-color-neutral-border; - height: 1.875rem; - text-align: center; - width: 100%; - - &:focus { - border-color: tokens.$coral-color-accent-border; - } - - &.time-error { - box-shadow: inset 0 -2px 0 #e96065; - border-bottom: none; - } - } -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.component.js index 25cd822fedf..e7cfa719e98 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.component.js @@ -6,7 +6,7 @@ import { buildYears } from '../../generator'; import { Gesture } from '@talend/react-a11y'; import getDefaultT from '../../../../translate'; -import theme from './YearPicker.module.scss'; +import theme from './YearPicker.module.css'; const YEAR_WINDOW_SIZE = 7; const YEAR_WINDOW_OVERFLOW_SIZE = 3; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.module.css new file mode 100644 index 00000000000..144b086ed45 --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.module.css @@ -0,0 +1,37 @@ +/* stylelint-disable color-hex-case */ +.year-picker { + display: flex; + flex-direction: column; + align-items: center; +} +.year-picker ol { + list-style: none; + margin: 0; + padding: 0; +} +.year-picker .scroll { + line-height: 0.75rem; + min-height: auto; +} +.year-picker .scroll svg { + height: 0.75rem; +} +.year-picker .year { + font-size: 0.75rem; +} +.year-picker .year.selected { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text-strong, hsl(204, 96%, 18%)); + transition: color 0.2s ease-in; + font-weight: 600; +} +.year-picker .year:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + opacity: 0.54; +} +.year-picker .year { + background: none; + border: none; + height: 1.5625rem; + 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 deleted file mode 100644 index 33767ce6559..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/YearPicker/YearPicker.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../shared/styles/mixins'; - -.year-picker { - display: flex; - flex-direction: column; - align-items: center; - - ol { - list-style: none; - margin: 0; - padding: 0; - } - - .scroll { - line-height: 0.75rem; - min-height: auto; - - svg { - height: 0.75rem; - } - } - - .year { - @include picker-action; - - background: none; - border: none; - height: 1.5625rem; - width: 100%; - } -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.component.js index f4d12b177cb..ed002b8bcea 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.component.js @@ -10,7 +10,7 @@ import TimePicker from '../../pickers/TimePicker'; import HeaderTitle from '../HeaderTitle'; import ViewLayout from '../ViewLayout'; -import theme from './DateTimeView.module.scss'; +import theme from './DateTimeView.module.css'; /** * Get the positive euclidean modulo number from a dividend and a divisor diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.css new file mode 100644 index 00000000000..eb7eac2867d --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.css @@ -0,0 +1,13 @@ +/* stylelint-disable color-hex-case */ +.body { + display: flex; +} +.body .date { + flex: 3 0 200px; +} +.body .time { + border-left: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + flex: 1 0 70px; + margin-left: 15px; + padding-left: 15px; +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.scss deleted file mode 100644 index 8fd30947c8c..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -@import '../../shared/styles/variables'; - -.body { - display: flex; - - .date { - flex: 3 0 200px; - } - - .time { - border-left: $border-default; - flex: 1 0 70px; - margin-left: $padding-normal; - padding-left: $padding-normal; - } -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js index c60a0df826d..06a317b6272 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.component.js @@ -8,7 +8,7 @@ import { Action, ActionDropdown } from '../../../../Actions'; import { getPickerLocale } from '../../generator'; import YearPicker from '../../pickers/YearPicker'; -import theme from './HeaderTitle.module.scss'; +import theme from './HeaderTitle.module.css'; function HeaderTitle(props) { const isButton = !!props.button; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.css new file mode 100644 index 00000000000..1b53ed36b07 --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.css @@ -0,0 +1,27 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable color-hex-case */ +.common { + display: flex; + justify-content: center; + align-items: center; + font-weight: 600; +} +.common :global(.dropdown-menu) { + min-width: 63px; +} + +.month { + margin-right: 5px; +} + +.button { + padding: 0; + background: none; + border: none; +} +.button:hover { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); +} +.button:active { + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss deleted file mode 100644 index 1c3e7cf19a5..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; -@import '../../shared/styles/mixins'; - -.common { - display: flex; - justify-content: center; - align-items: center; - font-weight: $font-weight-semi-bold; - - :global(.dropdown-menu) { - min-width: 63px; - } -} - -.month { - margin-right: $padding-smaller; -} - -.button { - @include nav-action; - - &:hover { - color: tokens.$coral-color-accent-text-hover; - } - - &:active { - color: tokens.$coral-color-accent-text-active; - } -} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.component.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.component.js index bab6f094c31..90a5e1f7123 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.component.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; -import theme from './ViewLayout.module.scss'; +import theme from './ViewLayout.module.css'; function ViewLayout(props) { const { leftElement, middleElement, rightElement } = props.header; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.css b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.css new file mode 100644 index 00000000000..a9310987636 --- /dev/null +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.css @@ -0,0 +1,27 @@ +/* stylelint-disable color-hex-case */ +.container { + height: 100%; + display: flex; + flex-direction: column; +} +.container .header { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} +.container .header :global(.btn-icon-only) { + padding: 0 5px; +} +.container .header :global(.btn-icon-only) svg { + width: 0.75rem; +} +.container .header :global(.btn-icon-only) span { + display: none; +} +.container .body { + flex: 1 1 auto; +} +.container .element-container > * { + width: 100%; + height: 100%; +} diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.scss deleted file mode 100644 index 0f226804f6a..00000000000 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.container { - height: 100%; - display: flex; - flex-direction: column; - - .header { - display: flex; - justify-content: space-between; - margin-bottom: $padding-small; - - :global(.btn-icon-only) { - padding: 0 $padding-smaller; - - svg { - width: $svg-sm-size; - } - - span { - display: none; - } - } - } - - .body { - flex: 1 1 auto; - } - - .element-container > * { - width: 100%; - height: 100%; - } -} diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.component.js b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.component.js index 8a1383c12cd..2185d89833d 100644 --- a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.component.js +++ b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.component.js @@ -13,7 +13,7 @@ import getDefaultT from '../../../translate'; import DateView from '../../views/DateView'; import MonthYearView from '../../views/MonthYearView'; -import theme from './CalendarPicker.module.scss'; +import theme from './CalendarPicker.module.css'; class CalendarPicker extends Component { constructor(props) { diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.css b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.css new file mode 100644 index 00000000000..f8f65d4164d --- /dev/null +++ b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.css @@ -0,0 +1,9 @@ +.container { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + min-height: var(--coral-sizing-xxxl, 13.75rem); + padding: var(--coral-spacing-m, 1rem); +} + +.footer { + padding-top: var(--coral-spacing-s, 0.75rem); +} diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss deleted file mode 100644 index 1219f6e3b53..00000000000 --- a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.container { - color: tokens.$coral-color-neutral-text-weak; - min-height: tokens.$coral-sizing-xxxl; - padding: tokens.$coral-spacing-m; -} - -.footer { - padding-top: tokens.$coral-spacing-s; -} diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js index 369ac0b167e..bd2c5c0d5e4 100644 --- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js +++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js @@ -22,7 +22,7 @@ import { Gesture } from '@talend/react-a11y'; import getDefaultT from '../../../translate'; import { buildDayNames, buildWeeks, getPickerLocale } from '../../generator'; -import theme from './DatePicker.module.scss'; +import theme from './DatePicker.module.css'; const getDayNames = memoize(buildDayNames); diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.css b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.css new file mode 100644 index 00000000000..461bd35f44a --- /dev/null +++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.css @@ -0,0 +1,91 @@ +.container { + width: 100%; + position: relative; +} + +.calendar-header th { + text-align: center; +} +.calendar-header abbr { + border: none; + font-weight: normal; + text-decoration: none; +} + +.calendar-row { + height: 2.25rem; + text-align: center; +} +.calendar-row .date-range { + position: relative; +} +.calendar-row .date-range.range-end::after, +.calendar-row .date-range.range-start::before, +.calendar-row .date-range.range-start::after, +.calendar-row .date-range.range-middle::after, +.calendar-row .date-range.range-end::before, +.calendar-row .date-range.range-middle::before { + content: ' '; + position: absolute; + height: 1.5625rem; + z-index: -1; + background-color: var(--coral-color-accent-background-weak, white); +} +.calendar-row .date-range.range-end::after { + width: 1.5rem; + left: 0.4063rem; + border-top-right-radius: 50%; + border-bottom-right-radius: 50%; +} +.calendar-row .date-range.range-start::before { + width: 1.5rem; + right: 0.4063rem; + border-top-left-radius: 50%; + border-bottom-left-radius: 50%; +} +.calendar-row .date-range.range-start::after, +.calendar-row .date-range.range-middle::after { + width: 50%; + right: 0; +} +.calendar-row .date-range.range-end::before, +.calendar-row .date-range.range-middle::before { + width: 50%; + left: 0; +} +.calendar-row .calendar-day { + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); +} +.calendar-row .calendar-day.selected { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + transition: color 0.2s ease-in; + font: var(--coral-paragraph-s-bold, 600 0.75rem/140% 'Source Sans Pro'); +} +.calendar-row .calendar-day:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + opacity: 0.54; +} +.calendar-row .calendar-day { + height: 1.5rem; + width: 1.5rem; + background: transparent; + border: none; + border-radius: 50%; + line-height: 1.5rem; + padding: 0; +} +.calendar-row .calendar-day.today { + background-color: var(--coral-color-accent-background-weak, white); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + border: solid 1px var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.calendar-row .calendar-day.not-current-month { + opacity: 0.54; +} +.calendar-row .calendar-day.range:hover { + background-color: var(--coral-color-accent-background-weak, white); +} +.calendar-row .calendar-day:disabled { + cursor: not-allowed; +} diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss deleted file mode 100644 index addb1933103..00000000000 --- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss +++ /dev/null @@ -1,102 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -@import '../../shared/styles/mixins'; - -.container { - width: 100%; - position: relative; -} - -.calendar-header { - th { - text-align: center; - } - - abbr { - border: none; - font-weight: normal; - text-decoration: none; - } -} - -.calendar-row { - height: 2.25rem; - text-align: center; - - .date-range { - position: relative; - - &.range-end::after, - &.range-start::before, - &.range-start::after, - &.range-middle::after, - &.range-end::before, - &.range-middle::before { - content: ' '; - position: absolute; - height: 1.5625rem; - z-index: -1; - background-color: tokens.$coral-color-accent-background-weak; - } - - &.range-end::after { - width: 1.5rem; - left: 0.4063rem; - border-top-right-radius: 50%; - border-bottom-right-radius: 50%; - } - - &.range-start::before { - width: 1.5rem; - right: 0.4063rem; - border-top-left-radius: 50%; - border-bottom-left-radius: 50%; - } - - &.range-start, - &.range-middle { - &::after { - width: 50%; - right: 0; - } - } - - &.range-end, - &.range-middle { - &::before { - width: 50%; - left: 0; - } - } - } - - .calendar-day { - @include picker-action; - - height: 1.5rem; - width: 1.5rem; - background: transparent; - border: none; - border-radius: 50%; - line-height: 1.5rem; - padding: 0; - - &.today { - background-color: tokens.$coral-color-accent-background-weak; - color: tokens.$coral-color-accent-text; - border: solid 1px tokens.$coral-color-accent-border; - } - - &.not-current-month { - opacity: 0.54; - } - - &.range:hover { - background-color: tokens.$coral-color-accent-background-weak; - } - - &:disabled { - cursor: not-allowed; - } - } -} diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.component.js b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.component.js index f3d480b79ee..06b88226abf 100644 --- a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.component.js +++ b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { buildMonths } from '../../generator'; -import theme from './MonthPicker.module.scss'; +import theme from './MonthPicker.module.css'; import { Gesture } from '@talend/react-a11y'; import getDefaultT from '../../../translate'; diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.css b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.css new file mode 100644 index 00000000000..6d6c3da322c --- /dev/null +++ b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.css @@ -0,0 +1,46 @@ +.container { + width: 100%; +} +.container tbody { + border: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} + +.calendar-row { + border-bottom: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} +.calendar-row:last-child { + border-bottom: none; +} + +.calendar-col { + border-right: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + width: 33.33%; +} +.calendar-col:last-child { + border-right: none; +} + +.calendar-month { + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); +} +.calendar-month.selected { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + transition: color 0.2s ease-in; + font: var(--coral-paragraph-s-bold, 600 0.75rem/140% 'Source Sans Pro'); +} +.calendar-month:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + opacity: 0.54; +} +.calendar-month { + flex: 1; + height: 3.5625rem; + width: 100%; + background: transparent; + border: none; + padding: 0; +} +.calendar-month:active { + background-color: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss deleted file mode 100644 index a656d53c6bc..00000000000 --- a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -@import '../../shared/styles/mixins'; -@import '../../shared/styles/variables'; - -.container { - width: 100%; - - tbody { - border: $border-default; - } -} - -.calendar-row { - border-bottom: $border-default; - - &:last-child { - border-bottom: none; - } -} - -.calendar-col { - border-right: $border-default; - width: 33.33%; - - &:last-child { - border-right: none; - } -} - -.calendar-month { - @include picker-action; - - flex: 1; - height: 3.5625rem; - width: 100%; - - background: transparent; - border: none; - padding: 0; - - &:active { - background-color: tokens.$coral-color-neutral-background-strong; - } -} diff --git a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.component.js b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.component.js index ba37a8558e6..30e4791bc43 100644 --- a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.component.js +++ b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.component.js @@ -5,7 +5,7 @@ import classNames from 'classnames'; import { timeToStr, pad } from '../../Time/time-extraction'; import { Gesture } from '@talend/react-a11y'; -import theme from './TimePicker.module.scss'; +import theme from './TimePicker.module.css'; function isBefore(a, b) { if (a.hours > b.hours) { diff --git a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.css b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.css new file mode 100644 index 00000000000..8d0361a6e9f --- /dev/null +++ b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.css @@ -0,0 +1,20 @@ +.container { + padding: var(--coral-spacing-xxs, 0.25rem) 0; + background-color: var(--coral-color-neutral-background, white); +} +.container button { + width: 100%; + border: none; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font-size: 0.875rem; + font-weight: normal; + background-color: var(--coral-color-neutral-background, white); +} +.container button:global(.highlight) { + background-color: var(--coral-color-accent-background-weak, white); +} +.container button:hover, +.container button:focus { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + outline: none; +} diff --git a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss deleted file mode 100644 index 3e894d4d5e5..00000000000 --- a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.container { - padding: tokens.$coral-spacing-xxs 0; - background-color: tokens.$coral-color-neutral-background; - - button { - width: 100%; - border: none; - color: tokens.$coral-color-neutral-text; - font-size: 0.875rem; - font-weight: normal; - background-color: tokens.$coral-color-neutral-background; - - &:global(.highlight) { - background-color: tokens.$coral-color-accent-background-weak; - } - - &:hover, - &:focus { - background-color: tokens.$coral-color-neutral-background-medium; - outline: none; - } - } -} diff --git a/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.component.js b/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.component.js index 8432848a462..ceaa18ca0b5 100644 --- a/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.component.js +++ b/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.component.js @@ -6,7 +6,7 @@ import { buildYears } from '../../generator'; import { Gesture } from '@talend/react-a11y'; import getDefaultT from '../../../translate'; -import theme from './YearPicker.module.scss'; +import theme from './YearPicker.module.css'; const YEAR_WINDOW_SIZE = 7; const YEAR_WINDOW_OVERFLOW_SIZE = 3; diff --git a/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.module.css b/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.module.css new file mode 100644 index 00000000000..114d5afdb51 --- /dev/null +++ b/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.module.css @@ -0,0 +1,36 @@ +.year-picker { + display: flex; + flex-direction: column; + align-items: center; +} +.year-picker ol { + list-style: none; + margin: 0; + padding: 0; +} +.year-picker .scroll { + line-height: 0.75rem; + min-height: auto; +} +.year-picker .scroll svg { + height: 0.75rem; +} +.year-picker .year { + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); +} +.year-picker .year.selected { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + transition: color 0.2s ease-in; + font: var(--coral-paragraph-s-bold, 600 0.75rem/140% 'Source Sans Pro'); +} +.year-picker .year:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + opacity: 0.54; +} +.year-picker .year { + background: none; + border: none; + height: 1.5625rem; + width: 100%; +} diff --git a/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.module.scss b/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.module.scss deleted file mode 100644 index 33767ce6559..00000000000 --- a/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../shared/styles/mixins'; - -.year-picker { - display: flex; - flex-direction: column; - align-items: center; - - ol { - list-style: none; - margin: 0; - padding: 0; - } - - .scroll { - line-height: 0.75rem; - min-height: auto; - - svg { - height: 0.75rem; - } - } - - .year { - @include picker-action; - - background: none; - border: none; - height: 1.5625rem; - width: 100%; - } -} diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.component.js b/packages/components/src/DateTimePickers/views/DateView/DateView.component.js index c63635ee214..dff43cf87d8 100644 --- a/packages/components/src/DateTimePickers/views/DateView/DateView.component.js +++ b/packages/components/src/DateTimePickers/views/DateView/DateView.component.js @@ -9,7 +9,7 @@ import DatePicker from '../../pickers/DatePicker'; import HeaderTitle from '../HeaderTitle'; import ViewLayout from '../ViewLayout'; -import theme from './DateView.module.scss'; +import theme from './DateView.module.css'; /** * Get the positive euclidean modulo number from a dividend and a divisor diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.module.css b/packages/components/src/DateTimePickers/views/DateView/DateView.module.css new file mode 100644 index 00000000000..b33ae0f6a64 --- /dev/null +++ b/packages/components/src/DateTimePickers/views/DateView/DateView.module.css @@ -0,0 +1,6 @@ +.body { + display: flex; +} +.body .date { + flex: 3 0 200px; +} diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.module.scss b/packages/components/src/DateTimePickers/views/DateView/DateView.module.scss deleted file mode 100644 index 16a8947ed09..00000000000 --- a/packages/components/src/DateTimePickers/views/DateView/DateView.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.body { - display: flex; - - .date { - flex: 3 0 200px; - } -} diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js index fbcc6990ada..7640c088e3c 100644 --- a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js +++ b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.component.js @@ -8,7 +8,7 @@ import { Action, ActionDropdown } from '../../../Actions'; import { getPickerLocale } from '../../generator'; import YearPicker from '../../pickers/YearPicker'; -import theme from './HeaderTitle.module.scss'; +import theme from './HeaderTitle.module.css'; function HeaderTitle(props) { const isButton = !!props.button; diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.css b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.css new file mode 100644 index 00000000000..fda1364e524 --- /dev/null +++ b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.css @@ -0,0 +1,13 @@ +.common { + display: flex; + justify-content: center; + align-items: center; + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); +} +.common :global(.dropdown-menu) { + min-width: 63px; +} + +.month { + margin-right: var(--coral-spacing-xs, 0.5rem); +} diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss deleted file mode 100644 index 0fa1598ff0c..00000000000 --- a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.common { - display: flex; - justify-content: center; - align-items: center; - font: tokens.$coral-paragraph-m-bold; - - :global(.dropdown-menu) { - min-width: 63px; - } -} - -.month { - margin-right: tokens.$coral-spacing-xs; -} diff --git a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.component.tsx b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.component.tsx index 528df98f7ce..e57de7d5e7b 100644 --- a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.component.tsx +++ b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.component.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import theme from './ViewLayout.module.scss'; +import theme from './ViewLayout.module.css'; import { ReactNode } from 'react'; function ViewLayout(props: ViewLayoutProps) { diff --git a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.css b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.css new file mode 100644 index 00000000000..fd867126b2a --- /dev/null +++ b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.css @@ -0,0 +1,23 @@ +.container { + height: 100%; + display: flex; + flex-direction: column; +} +.container .header { + display: flex; + justify-content: space-between; + margin-bottom: var(--coral-spacing-s, 0.75rem); +} +.container .header :global(.btn-icon-only) { + padding: 0 var(--coral-spacing-xxs, 0.25rem); +} +.container .header :global(.btn-icon-only) span { + display: none; +} +.container .body { + flex: 1 1 auto; +} +.container .element-container > * { + width: 100%; + height: 100%; +} diff --git a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss deleted file mode 100644 index 0b21a729a3d..00000000000 --- a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.container { - height: 100%; - display: flex; - flex-direction: column; - - .header { - display: flex; - justify-content: space-between; - margin-bottom: tokens.$coral-spacing-s; - - :global(.btn-icon-only) { - padding: 0 tokens.$coral-spacing-xxs; - - span { - display: none; - } - } - } - - .body { - flex: 1 1 auto; - } - - .element-container > * { - width: 100%; - height: 100%; - } -} diff --git a/packages/components/src/Drawer/Drawer.component.js b/packages/components/src/Drawer/Drawer.component.js index f2c80c70b34..4efbfd5493f 100644 --- a/packages/components/src/Drawer/Drawer.component.js +++ b/packages/components/src/Drawer/Drawer.component.js @@ -17,7 +17,7 @@ import Inject from '../Inject'; import TabBar from '../TabBar'; import { getTheme } from '../theme'; -import theme from './Drawer.module.scss'; +import theme from './Drawer.module.css'; const css = getTheme(theme); const DEFAULT_TRANSITION_DURATION = 350; diff --git a/packages/components/src/Drawer/Drawer.module.css b/packages/components/src/Drawer/Drawer.module.css new file mode 100644 index 00000000000..fdf116fa588 --- /dev/null +++ b/packages/components/src/Drawer/Drawer.module.css @@ -0,0 +1,137 @@ +.tc-drawer { + pointer-events: all; + background-color: var(--coral-color-neutral-background, white); + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: var(--coral-sizing-maximal, 20rem); +} + +@media (min-width: 992px) and (max-width: 1199px) { + .tc-drawer { + width: 40vw; + } +} +@media (min-width: 1200px) { + .tc-drawer { + width: 30vw; + } +} +.tc-drawer-container { + display: flex; + flex-direction: column; + height: 100%; +} + +.tc-drawer-tabs-container { + margin: var(--coral-spacing-xs, 0.5rem) var(--coral-spacing-xs, 0.5rem) 0 + var(--coral-spacing-xs, 0.5rem); +} + +.tc-drawer-actionbar { + padding: 0; +} + +.drawer-stacked { + width: 100%; +} + +.tc-drawer-header { + background-color: var(--coral-color-neutral-background, white); + border-bottom: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.tc-drawer-header :global .tc-editable-text { + min-width: 0; +} +.tc-drawer-header :global .tc-editable-text-pencil { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-drawer-header-menu { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 3.4375rem; + padding: var(--coral-spacing-m, 1rem); +} +.tc-drawer-header-menu .tc-drawer-header-title { + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.tc-drawer-header-menu .tc-drawer-header-title h1 { + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); + flex: 1; + margin: 0; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.tc-drawer-header-menu .tc-drawer-header-title :global(.tc-editable-text) { + flex: 1; +} +.tc-drawer-header-menu .tc-drawer-header-title > .tc-editable-text { + width: unset; +} +.tc-drawer-header-menu .tc-drawer-close-action { + flex: 0; + margin-right: -var(--coral-spacing-m, 1rem); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-drawer-header-menu .drawer-close-action-tooltip { + position: absolute; + right: 0; + bottom: calc(var(--coral-spacing-m, 1rem) / 2); +} +.tc-drawer-header-subtitle { + padding-top: var(--coral-spacing-xxs, 0.25rem); +} + +.tc-drawer-header-with-tabs { + margin: 0 var(--coral-spacing-xs, 0.5rem) -0.4rem var(--coral-spacing-xs, 0.5rem); +} + +.tc-drawer-content { + flex-grow: 1; + min-height: 0; + overflow-y: auto; +} +.tc-drawer-content-wrapper { + padding: var(--coral-spacing-m, 1rem); + flex-grow: 1; + min-height: 0; +} + +.tc-drawer-footer, +.tc-drawer-actionbar-container { + padding: var(--coral-spacing-xs, 0.5rem) var(--coral-spacing-m, 1rem); + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-drawer-footer :global .navbar-left > *, +.tc-drawer-footer :global .navbar-right > *, +.tc-drawer-actionbar-container :global .navbar-left > *, +.tc-drawer-actionbar-container :global .navbar-right > * { + margin-top: 0; + margin-bottom: 0; +} + +:global(.tc-with-drawer-wrapper) :global(.tc-drawer.stacked)::after { + background: rgba(0, 0, 0, 0.4); + content: ' '; + height: 100%; + width: 100%; + position: absolute; + top: 0; +} + +:global(.tc-with-drawer-wrapper:last-child) :global(.tc-drawer.stacked)::after { + content: none; +} diff --git a/packages/components/src/Drawer/Drawer.module.scss b/packages/components/src/Drawer/Drawer.module.scss deleted file mode 100644 index ec026fe8478..00000000000 --- a/packages/components/src/Drawer/Drawer.module.scss +++ /dev/null @@ -1,165 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-drawer-bgcolor: tokens.$coral-color-neutral-background !default; -$tc-drawer-padding: tokens.$coral-spacing-m !default; -$tc-drawer-header-height: 3.4375rem !default; -$tc-drawer-header-color: tokens.$coral-color-neutral-text !default; -$tc-drawer-header-background: tokens.$coral-color-neutral-background !default; -$tc-drawer-header-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak !default; -$tc-drawer-tabs-background: tokens.$coral-color-accent-background-weak !default; -$tc-action-bar-background-color: tokens.$coral-color-neutral-background-medium !default; - -.tc-drawer { - pointer-events: all; - background-color: $tc-drawer-bgcolor; - box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: tokens.$coral-sizing-maximal; -} - -@media (min-width: 992px) and (max-width: 1199px) { - .tc-drawer { - width: 40vw; - } -} - -@media (min-width: 1200px) { - .tc-drawer { - width: 30vw; - } -} - -.tc-drawer-container { - display: flex; - flex-direction: column; - height: 100%; -} - -.tc-drawer-tabs-container { - margin: tokens.$coral-spacing-xs tokens.$coral-spacing-xs 0 tokens.$coral-spacing-xs; -} - -.tc-drawer-actionbar { - padding: 0; -} - -.drawer-stacked { - width: 100%; -} - -.tc-drawer-header { - background-color: $tc-drawer-header-background; - border-bottom: $tc-drawer-header-border; - - :global { - .tc-editable-text { - min-width: 0; - } - - .tc-editable-text-pencil { - color: $tc-drawer-header-color; - } - } - - &-menu { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: $tc-drawer-header-height; - padding: $tc-drawer-padding; - - .tc-drawer-header-title { - display: flex; - flex: 1; - flex-direction: column; - justify-content: center; - - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - h1 { - font: tokens.$coral-heading-m; - flex: 1; - margin: 0; - color: $tc-drawer-header-color; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - :global(.tc-editable-text) { - flex: 1; - } - - > .tc-editable-text { - width: unset; - } - } - - .tc-drawer-close-action { - flex: 0; - margin-right: -$tc-drawer-padding; - color: $tc-drawer-header-color; - } - - .drawer-close-action-tooltip { - position: absolute; - right: 0; - bottom: calc(#{$tc-drawer-padding} / 2); - } - } - - &-subtitle { - padding-top: tokens.$coral-spacing-xxs; - } -} - -.tc-drawer-header-with-tabs { - margin: 0 tokens.$coral-spacing-xs -0.4rem tokens.$coral-spacing-xs; -} - -.tc-drawer-content { - flex-grow: 1; - min-height: 0; - overflow-y: auto; - - &-wrapper { - padding: $tc-drawer-padding; - flex-grow: 1; - min-height: 0; - } -} - -.tc-drawer-footer, -.tc-drawer-actionbar-container { - padding: tokens.$coral-spacing-xs tokens.$coral-spacing-m; - background: $tc-action-bar-background-color; - - :global { - .navbar-left, - .navbar-right { - > * { - margin-top: 0; - margin-bottom: 0; - } - } - } -} - -:global(.tc-with-drawer-wrapper) :global(.tc-drawer.stacked)::after { - background: rgba(0, 0, 0, 0.4); - content: ' '; - height: 100%; - width: 100%; - position: absolute; - top: 0; -} - -:global(.tc-with-drawer-wrapper:last-child) :global(.tc-drawer.stacked)::after { - content: none; -} diff --git a/packages/components/src/EditableText/EditableText.component.js b/packages/components/src/EditableText/EditableText.component.js index 5e00d2c8a68..f77a1f82432 100644 --- a/packages/components/src/EditableText/EditableText.component.js +++ b/packages/components/src/EditableText/EditableText.component.js @@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next'; import Skeleton from '../Skeleton'; import InlineForm from './InlineForm.component'; import { PlainTextTitle } from './PlainTextTitle.component'; -import theme from './EditableText.module.scss'; +import theme from './EditableText.module.css'; import getDefaultT from '../translate'; import I18N_DOMAIN_COMPONENTS from '../constants'; diff --git a/packages/components/src/EditableText/EditableText.module.css b/packages/components/src/EditableText/EditableText.module.css new file mode 100644 index 00000000000..00f9a7ce256 --- /dev/null +++ b/packages/components/src/EditableText/EditableText.module.css @@ -0,0 +1,26 @@ +/* stylelint-disable color-hex-case */ +@keyframes object-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +@keyframes skeleton-blink { + 0%, + 100% { + opacity: 0.1; + } + 50% { + opacity: 0.25; + } +} +.tc-editable-text-blink { + animation: object-blink 1.5s ease infinite; +} + +.tc-editable-text { + width: 100%; +} diff --git a/packages/components/src/EditableText/EditableText.module.scss b/packages/components/src/EditableText/EditableText.module.scss deleted file mode 100644 index e74f1c7fe22..00000000000 --- a/packages/components/src/EditableText/EditableText.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -@import '~@talend/bootstrap-theme/src/theme/animation'; - -.tc-editable-text-blink { - @include heartbeat(object-blink); -} - -.tc-editable-text { - width: 100%; -} diff --git a/packages/components/src/EditableText/InlineForm.component.js b/packages/components/src/EditableText/InlineForm.component.js index f3fbab8f028..7c5fe0e6635 100644 --- a/packages/components/src/EditableText/InlineForm.component.js +++ b/packages/components/src/EditableText/InlineForm.component.js @@ -9,7 +9,7 @@ import { Action } from '../Actions'; import FocusManager from '../FocusManager'; import getDefaultT from '../translate'; -import theme from './InlineForm.module.scss'; +import theme from './InlineForm.module.css'; class InlineForm extends Component { static propTypes = { diff --git a/packages/components/src/EditableText/InlineForm.module.css b/packages/components/src/EditableText/InlineForm.module.css new file mode 100644 index 00000000000..7d15a17ec8d --- /dev/null +++ b/packages/components/src/EditableText/InlineForm.module.css @@ -0,0 +1,89 @@ +/* stylelint-disable color-hex-case */ +@keyframes object-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +@keyframes skeleton-blink { + 0%, + 100% { + opacity: 0.1; + } + 50% { + opacity: 0.25; + } +} +.tc-editable-text-form { + position: relative; + width: 100%; + display: flex; + align-items: center; + padding-right: 20px; +} +.tc-editable-text-form :global(.form-group) { + width: 100%; + margin: 0; + padding-top: 0; +} +.tc-editable-text-form .tc-editable-text-form-input { + width: 100%; + padding-right: 52px; +} +.tc-editable-text-form .tc-editable-text-form-input::selection { + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); +} +.tc-editable-text-form-buttons { + display: flex; + position: absolute; + align-items: center; + justify-content: center; + height: 32px; + top: 0; + right: 30px; +} +.tc-editable-text-form-buttons-icon { + border: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + width: 16px; + height: 16px; + min-height: auto; + display: flex; + border-radius: 50%; + padding: 0; + justify-content: center; + align-items: center; +} +.tc-editable-text-form-buttons-icon > :global(.tc-svg-icon) { + width: 0.5rem; + height: 0.5rem; +} +.tc-editable-text-form-buttons-icon:last-child { + margin-left: 10px; +} +.tc-editable-text-form-buttons-submit { + border-color: var(--coral-color-success-border, hsl(111, 49%, 34%)); + background: var(--coral-color-success-background-strong, hsl(111, 49%, 34%)); + fill: var(--coral-color-success-text-weak, white); +} +.tc-editable-text-form-buttons-submit:focus, +.tc-editable-text-form-buttons-submit:hover { + color: var(--coral-color-success-text-weak, white); + background: var(--coral-color-success-background-strong-hover, hsl(111, 49%, 29%)); + border-color: var(--coral-color-success-border, hsl(111, 49%, 34%)); +} +.tc-editable-text-form-buttons-submit:focus svg, +.tc-editable-text-form-buttons-submit:hover svg { + background: var(--coral-color-success-background-strong-hover, hsl(111, 49%, 29%)); +} +.tc-editable-text-form-buttons-submit > svg { + color: var(--coral-color-success-text-weak, white); +} +.tc-editable-text-form-buttons-cancel:focus, +.tc-editable-text-form-buttons-cancel:hover { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + border-color: var(--coral-color-neutral-border-hover, hsl(0, 0%, 40%)); +} diff --git a/packages/components/src/EditableText/InlineForm.module.scss b/packages/components/src/EditableText/InlineForm.module.scss deleted file mode 100644 index 76b14fdab8d..00000000000 --- a/packages/components/src/EditableText/InlineForm.module.scss +++ /dev/null @@ -1,88 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; -@import '~@talend/bootstrap-theme/src/theme/animation'; - -$tc-icon-editable-text-size: 0.5rem !default; -$tc-circle-editable-text-size: 16px !default; - -.tc-editable-text-form { - position: relative; - width: 100%; - display: flex; - align-items: center; - padding-right: $padding-large; - - :global(.form-group) { - width: 100%; - margin: 0; - padding-top: 0; - } - - .tc-editable-text-form-input { - width: 100%; - padding-right: 2 * $tc-circle-editable-text-size + $padding-large; - - &::selection { - background: tokens.$coral-color-accent-background; - } - } - - &-buttons { - display: flex; - position: absolute; - align-items: center; - justify-content: center; - height: 32px; - top: 0; - right: $padding-larger; - - &-icon { - border: 0.0625rem solid tokens.$coral-color-neutral-border; - color: tokens.$coral-color-neutral-text-weak; - width: $tc-circle-editable-text-size; - height: $tc-circle-editable-text-size; - min-height: auto; - display: flex; - border-radius: 50%; - padding: 0; - justify-content: center; - align-items: center; - - > :global(.tc-svg-icon) { - width: $tc-icon-editable-text-size; - height: $tc-icon-editable-text-size; - } - - &:last-child { - margin-left: $padding-small; - } - } - - &-submit { - border-color: tokens.$coral-color-success-border; - background: tokens.$coral-color-success-background-strong; - fill: tokens.$coral-color-success-text-weak; - - &:focus, - &:hover { - color: tokens.$coral-color-success-text-weak; - background: tokens.$coral-color-success-background-strong-hover; - border-color: tokens.$coral-color-success-border; - - svg { - background: tokens.$coral-color-success-background-strong-hover; - } - } - - > svg { - color: tokens.$coral-color-success-text-weak; - } - } - - &-cancel:focus, - &-cancel:hover { - color: tokens.$coral-color-neutral-text; - border-color: tokens.$coral-color-neutral-border-hover; - } - } -} diff --git a/packages/components/src/EditableText/PlainTextTitle.component.tsx b/packages/components/src/EditableText/PlainTextTitle.component.tsx index fdc21bc1817..1d44816c482 100644 --- a/packages/components/src/EditableText/PlainTextTitle.component.tsx +++ b/packages/components/src/EditableText/PlainTextTitle.component.tsx @@ -4,7 +4,7 @@ import { TFunction } from 'i18next'; import TooltipTrigger from '../TooltipTrigger'; import { Action } from '../Actions'; import getDefaultT from '../translate'; -import theme from './PlainTextTitle.module.scss'; +import theme from './PlainTextTitle.module.css'; type PlainTextTitleProps = { id?: string; diff --git a/packages/components/src/EditableText/PlainTextTitle.module.css b/packages/components/src/EditableText/PlainTextTitle.module.css new file mode 100644 index 00000000000..8a908926426 --- /dev/null +++ b/packages/components/src/EditableText/PlainTextTitle.module.css @@ -0,0 +1,35 @@ +/* stylelint-disable color-hex-case */ +.tc-editable-text-title { + display: flex; + align-items: center; + max-width: 56.25rem; +} +.tc-editable-text-title :global(.tc-editable-text-wording-wrapper) { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.tc-editable-text-title .tc-editable-text-wording { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.tc-editable-text-title .tc-editable-text-pencil { + position: relative; + left: -2000px; + padding-left: 5px; + padding-right: 5px; + flex: 0 0 auto; + line-height: inherit; + min-height: inherit; +} +.tc-editable-text-title .tc-editable-text-pencil:global(.btn-link) { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.tc-editable-text-title .tc-editable-text-pencil:focus, +.tc-editable-text-title .tc-editable-text-pencil:hover { + position: static; +} +.tc-editable-text-title:hover .tc-editable-text-pencil { + position: static; +} diff --git a/packages/components/src/EditableText/PlainTextTitle.module.scss b/packages/components/src/EditableText/PlainTextTitle.module.scss deleted file mode 100644 index 70a978a6503..00000000000 --- a/packages/components/src/EditableText/PlainTextTitle.module.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -@mixin ellipsis { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.tc-editable-text-title { - display: flex; - align-items: center; - max-width: 56.25rem; - - :global(.tc-editable-text-wording-wrapper) { - @include ellipsis; - } - - .tc-editable-text-wording { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .tc-editable-text-pencil { - position: relative; - left: -2000px; - padding-left: $padding-smaller; - padding-right: $padding-smaller; - flex: 0 0 auto; - line-height: inherit; - min-height: inherit; - - &:global(.btn-link) { - color: tokens.$coral-color-neutral-icon-weak; - } - - &:focus, - &:hover { - position: static; - } - } - - &:hover { - .tc-editable-text-pencil { - position: static; - } - } -} diff --git a/packages/components/src/Emphasis/Emphasis.component.js b/packages/components/src/Emphasis/Emphasis.component.js index 1f6821d8bc6..ae8a1e58419 100644 --- a/packages/components/src/Emphasis/Emphasis.component.js +++ b/packages/components/src/Emphasis/Emphasis.component.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import theme from './Emphasis.module.scss'; +import theme from './Emphasis.module.css'; function isNotEmpty(value) { return value; diff --git a/packages/components/src/Emphasis/Emphasis.module.css b/packages/components/src/Emphasis/Emphasis.module.css new file mode 100644 index 00000000000..294518fd733 --- /dev/null +++ b/packages/components/src/Emphasis/Emphasis.module.css @@ -0,0 +1,5 @@ +/* stylelint-disable color-hex-case */ +.highlight { + font-weight: 600; + font-style: normal; +} diff --git a/packages/components/src/Emphasis/Emphasis.module.scss b/packages/components/src/Emphasis/Emphasis.module.scss deleted file mode 100644 index 5a98bf46944..00000000000 --- a/packages/components/src/Emphasis/Emphasis.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.highlight { - font-weight: $font-weight-semi-bold; - font-style: normal; -} diff --git a/packages/components/src/Enumeration/Enumeration.component.js b/packages/components/src/Enumeration/Enumeration.component.js index b85c44ee3c1..9372c40eaa6 100644 --- a/packages/components/src/Enumeration/Enumeration.component.js +++ b/packages/components/src/Enumeration/Enumeration.component.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { withTranslation } from 'react-i18next'; -import theme from './Enumeration.module.scss'; +import theme from './Enumeration.module.css'; import I18N_DOMAIN_COMPONENTS from '../constants'; import { HeaderEnumeration } from './Header/HeaderEnumeration.component'; import { ItemsEnumeration } from './Items/ItemsEnumeration.component'; diff --git a/packages/components/src/Enumeration/Enumeration.module.css b/packages/components/src/Enumeration/Enumeration.module.css new file mode 100644 index 00000000000..8638203e3b7 --- /dev/null +++ b/packages/components/src/Enumeration/Enumeration.module.css @@ -0,0 +1,26 @@ +/* stylelint-disable color-hex-case */ +.tc-enumeration { + overflow: hidden; + display: flex; + flex-direction: column; +} +.tc-enumeration :global input[type='text'] { + font-size: 0.875rem; + line-height: 0.875rem; +} +.tc-enumeration :global .btn { + justify-content: flex-start; + min-height: 100%; + text-decoration: none; +} +.tc-enumeration :global .btn.btn-link { + padding: 0 15px; + outline-offset: 0.3125rem; +} +.tc-enumeration :global .btn.btn-link svg { + height: 0.875rem; + width: 0.875rem; +} +.tc-enumeration header { + flex-shrink: 0; +} diff --git a/packages/components/src/Enumeration/Enumeration.module.scss b/packages/components/src/Enumeration/Enumeration.module.scss deleted file mode 100644 index 6f8acf4bbb7..00000000000 --- a/packages/components/src/Enumeration/Enumeration.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-enumeration-height: 50vh !default; -$tc-enumeration-font-size: 0.875rem !default; - -.tc-enumeration { - overflow: hidden; - display: flex; - flex-direction: column; - - :global { - input[type='text'] { - font-size: $tc-enumeration-font-size; - line-height: $tc-enumeration-font-size; - } - - .btn { - justify-content: flex-start; - min-height: 100%; - text-decoration: none; - - &.btn-link { - padding: 0 $padding-normal; - outline-offset: 0.3125rem; - - svg { - height: $tc-enumeration-font-size; - width: $tc-enumeration-font-size; - } - } - } - } - - header { - flex-shrink: 0; - } -} diff --git a/packages/components/src/Enumeration/Enumeration.stories.js b/packages/components/src/Enumeration/Enumeration.stories.js index a2ae13b496c..c784466481c 100755 --- a/packages/components/src/Enumeration/Enumeration.stories.js +++ b/packages/components/src/Enumeration/Enumeration.stories.js @@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions'; import Enumeration from './Enumeration.component'; -import theme from './Enumeration.stories.module.scss'; +import theme from './Enumeration.stories.module.css'; import { DISPLAY_MODE_SEARCH } from './displayModes'; const addItemAction = { diff --git a/packages/components/src/Enumeration/Enumeration.stories.module.css b/packages/components/src/Enumeration/Enumeration.stories.module.css new file mode 100644 index 00000000000..c0fe5f3c000 --- /dev/null +++ b/packages/components/src/Enumeration/Enumeration.stories.module.css @@ -0,0 +1,4 @@ +/* stylelint-disable color-hex-case */ +.enum-with-class :global(.tc-enumeration-items) button.inactive > span { + opacity: 0.4; +} diff --git a/packages/components/src/Enumeration/Enumeration.stories.module.scss b/packages/components/src/Enumeration/Enumeration.stories.module.scss deleted file mode 100644 index aaab49f9758..00000000000 --- a/packages/components/src/Enumeration/Enumeration.stories.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.enum-with-class { - :global(.tc-enumeration-items) { - button.inactive > span { - opacity: 0.4; - } - } -} diff --git a/packages/components/src/Enumeration/Header/Header.component.js b/packages/components/src/Enumeration/Header/Header.component.js index 5bbfbc4b454..fa76a6db44a 100644 --- a/packages/components/src/Enumeration/Header/Header.component.js +++ b/packages/components/src/Enumeration/Header/Header.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Action, ActionDropdown } from '../../Actions'; -import theme from './Header.module.scss'; +import theme from './Header.module.css'; function headerClasses() { return classNames({ diff --git a/packages/components/src/Enumeration/Header/Header.module.css b/packages/components/src/Enumeration/Header/Header.module.css new file mode 100644 index 00000000000..d104eba0df1 --- /dev/null +++ b/packages/components/src/Enumeration/Header/Header.module.css @@ -0,0 +1,41 @@ +/* stylelint-disable color-hex-case */ +.tc-enumeration-header { + display: flex; + line-height: 20px; + align-items: center; + height: 28px; + position: relative; +} +.tc-enumeration-header > span { + font-weight: 700; +} +.tc-enumeration-header :global(.actions) { + margin-left: auto; +} +.tc-enumeration-header input { + box-shadow: none; + border: none; + flex-grow: 1; + height: 100%; + background-color: transparent; +} +.tc-enumeration-header :global(.btn-link) { + margin-left: auto; + padding: 0 5px; + height: 30px; +} +.tc-enumeration-header :global(.btn-link) :global(.tc-svg-icon) { + height: 0.875rem; + width: 0.875rem; + margin-right: 0; + vertical-align: text-top; +} +.tc-enumeration-header .tc-enumeration-header-error { + position: absolute; + top: 100%; + background-color: var(--coral-color-danger-background, hsl(0, 100%, 96%)); + width: 100%; + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); + padding: 2px; + z-index: 1; +} diff --git a/packages/components/src/Enumeration/Header/Header.module.scss b/packages/components/src/Enumeration/Header/Header.module.scss deleted file mode 100644 index 4e2726dc98a..00000000000 --- a/packages/components/src/Enumeration/Header/Header.module.scss +++ /dev/null @@ -1,60 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-enumeration-smaller-padding: $padding-smaller !default; -$tc-enumeration-small-padding: $padding-small !default; -$tc-enumeration-normal-padding: $padding-normal !default; -$tc-enumeration-large-padding: $padding-large !default; -$tc-enumeration-header-height: 28px !default; -$tc-enumeration-font-size: 0.875rem !default; - -$tc-enumeration-header-error-background-color: white !default; -$tc-enumeration-header-error-color: red !default; -$tc-enumeration-header-error-padding: 2px !default; - -.tc-enumeration-header { - display: flex; - line-height: $tc-enumeration-large-padding; - align-items: center; - height: $tc-enumeration-header-height; - position: relative; - - > span { - font-weight: 700; - } - - :global(.actions) { - margin-left: auto; - } - - input { - box-shadow: none; - border: none; - flex-grow: 1; - height: 100%; - background-color: transparent; - } - - :global(.btn-link) { - margin-left: auto; - padding: 0 $tc-enumeration-smaller-padding; - height: 30px; - - :global(.tc-svg-icon) { - height: $tc-enumeration-font-size; - width: $tc-enumeration-font-size; - margin-right: 0; - vertical-align: text-top; - } - } - - .tc-enumeration-header-error { - position: absolute; - top: 100%; - background-color: tokens.$coral-color-danger-background; - width: 100%; - color: tokens.$coral-color-danger-text; - padding: $tc-enumeration-header-error-padding; - z-index: 1; - } -} diff --git a/packages/components/src/Enumeration/Header/HeaderInput.component.js b/packages/components/src/Enumeration/Header/HeaderInput.component.js index 2f0bb32d5c7..0c42a77feb3 100644 --- a/packages/components/src/Enumeration/Header/HeaderInput.component.js +++ b/packages/components/src/Enumeration/Header/HeaderInput.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import Action from '../../Actions/Action'; -import theme from './Header.module.scss'; +import theme from './Header.module.css'; function headerClasses(headerError) { return classNames(theme['tc-enumeration-header'], 'tc-enumeration-header', { diff --git a/packages/components/src/Enumeration/Header/HeaderSelected.component.js b/packages/components/src/Enumeration/Header/HeaderSelected.component.js index c6390a5f230..2cae9a9e890 100644 --- a/packages/components/src/Enumeration/Header/HeaderSelected.component.js +++ b/packages/components/src/Enumeration/Header/HeaderSelected.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import Action from '../../Actions/Action'; -import theme from './Header.module.scss'; +import theme from './Header.module.css'; function headerClasses() { return classNames({ diff --git a/packages/components/src/Enumeration/Items/EmptyListPlaceholder.component.js b/packages/components/src/Enumeration/Items/EmptyListPlaceholder.component.js index 3e3edae38b5..08ff698017a 100644 --- a/packages/components/src/Enumeration/Items/EmptyListPlaceholder.component.js +++ b/packages/components/src/Enumeration/Items/EmptyListPlaceholder.component.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { propTypes } from '../Enumeration.propTypes'; import { DISPLAY_MODE_DEFAULT } from '../displayModes'; -import theme from './EmptyListPlaceholder.module.scss'; +import theme from './EmptyListPlaceholder.module.css'; export function EmptyListPlaceholder({ displayMode, t }) { return ( diff --git a/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.css b/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.css new file mode 100644 index 00000000000..dd6bfb526b0 --- /dev/null +++ b/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.css @@ -0,0 +1,7 @@ +/* stylelint-disable color-hex-case */ +.tc-enumeration-hint { + color: #bcbcbc; + font-style: oblique; + box-shadow: inset 0 21px 3px -20px rgba(0, 0, 0, 0.2); + padding: 15px 10px; +} diff --git a/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.scss b/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.scss deleted file mode 100644 index 526dcedcec4..00000000000 --- a/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-enumeration-hint { - color: $silver; - font-style: oblique; - box-shadow: inset 0 21px 3px -20px $shadow; - padding: $padding-normal $padding-small; -} diff --git a/packages/components/src/Enumeration/Items/Item/Item.component.js b/packages/components/src/Enumeration/Items/Item/Item.component.js index 61b66d640b1..d0c8d985261 100644 --- a/packages/components/src/Enumeration/Items/Item/Item.component.js +++ b/packages/components/src/Enumeration/Items/Item/Item.component.js @@ -10,7 +10,7 @@ import TooltipTrigger from '../../../TooltipTrigger'; import ItemPropTypes from './Item.propTypes'; import { allIndexOf, removeDuplicates } from './utils'; -import theme from './Item.module.scss'; +import theme from './Item.module.css'; function itemClasses(isSelected) { return classNames({ diff --git a/packages/components/src/Enumeration/Items/Item/Item.module.css b/packages/components/src/Enumeration/Items/Item/Item.module.css new file mode 100644 index 00000000000..e0784cff37b --- /dev/null +++ b/packages/components/src/Enumeration/Items/Item/Item.module.css @@ -0,0 +1,98 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable color-hex-case */ +.tc-enumeration-item { + display: flex; + font-size: 14px; + font-weight: 400; + height: 2.0625rem; + text-align: left; + border-bottom: 1px solid rgb(228, 228, 228); + position: relative; +} +.tc-enumeration-item.has-error { + border-bottom: none; +} +.tc-enumeration-item :global(button:disabled) { + padding: 0 15px; +} +.tc-enumeration-item :global(.btn-link) { + padding: 0 5px; + height: 16px; +} +.tc-enumeration-item :global(.btn-link) :global(.tc-svg-icon) { + height: 14px; + width: 14px; + margin-right: 0; + vertical-align: top; +} +.tc-enumeration-item .tc-enumeration-item-label { + flex-grow: 1; + background-color: Transparent; + background-repeat: no-repeat; + border: none; + overflow: hidden; + box-shadow: none; + text-align: left; + outline: none; +} +.tc-enumeration-item .tc-enumeration-item-label span:first-child { + display: inline; +} +.tc-enumeration-item .tc-enumeration-item-actions { + display: flex; + flex-grow: 0; + align-items: center; + margin: auto 5px; +} +.tc-enumeration-item .tc-enumeration-item-actions :global(.persistent) { + visibility: visible; +} +.tc-enumeration-item .editable { + visibility: hidden; +} +.tc-enumeration-item button { + text-transform: none; + font-size: 14px; + text-overflow: ellipsis; + overflow: hidden; +} +.tc-enumeration-item button span { + vertical-align: top; +} +.tc-enumeration-item input { + padding: 0; + margin: 0 15px; + line-height: 2.0625rem; +} +.tc-enumeration-item .tc-enumeration-item-error { + font-size: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); + position: absolute; + top: 100%; + width: 100%; + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); + padding: 0 15px; + z-index: 1; + background: inherit; +} + +.tc-enumeration-checkbox { + display: inline-block; + margin: 0 5px 0 0; + width: 20px; + vertical-align: middle; + pointer-events: none; +} + +.selected-item { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} + +.tc-enumeration-item:hover .tc-enumeration-item-actions, +.tc-enumeration-item:focus-within .tc-enumeration-item-actions { + visibility: visible; +} + +.tc-enumeration-item:hover:not(.selected-item), +.tc-enumeration-item:not(.selected-item):focus-within { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} diff --git a/packages/components/src/Enumeration/Items/Item/Item.module.scss b/packages/components/src/Enumeration/Items/Item/Item.module.scss deleted file mode 100644 index 99ed6a65f08..00000000000 --- a/packages/components/src/Enumeration/Items/Item/Item.module.scss +++ /dev/null @@ -1,131 +0,0 @@ -/* stylelint-disable color-hex-case */ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-enumeration-normal-padding: $padding-normal !default; -$tc-enumeration-smaller-padding: $padding-smaller !default; -$tc-enumeration-small-padding: $padding-small !default; -$tc-enumeration-item-height: 2.0625rem !default; - -$tc-item-padding-top-bottom: 7px !default; -$tc-enumeration-input-margin: 10px; -$tc-enumeration-item-font-size: 14px; -$tc-enumeration-item-btn-height: 16px; -$tc-enumeration-item-error-padding: 0 $padding-normal; -$selected-item-color: #fafafa; -$item-checkbox-margin: 5px; -$item-checkbox-width: 20px; - -.tc-enumeration-item { - display: flex; - font-size: 14px; - font-weight: 400; - height: $tc-enumeration-item-height; - text-align: left; - border-bottom: 1px solid rgba(228, 228, 228, 1); - position: relative; - - &.has-error { - border-bottom: none; - } - - :global(button:disabled) { - padding: 0 $tc-enumeration-normal-padding; - } - - :global(.btn-link) { - padding: 0 $padding-smaller; - height: $tc-enumeration-item-btn-height; - - :global(.tc-svg-icon) { - height: $tc-enumeration-item-font-size; - width: $tc-enumeration-item-font-size; - margin-right: 0; - vertical-align: top; - } - } - - .tc-enumeration-item-label { - flex-grow: 1; - background-color: Transparent; - background-repeat: no-repeat; - border: none; - overflow: hidden; - box-shadow: none; - text-align: left; - outline: none; - // In order to show ellipsis, need to override to be inline - span:first-child { - display: inline; - } - } - - .tc-enumeration-item-actions { - display: flex; - flex-grow: 0; - align-items: center; - margin: auto $tc-enumeration-smaller-padding; - - :global(.persistent) { - visibility: visible; - } - } - - .editable { - visibility: hidden; - } - - button { - text-transform: none; - font-size: 14px; - text-overflow: ellipsis; - overflow: hidden; - } - - button span { - // button {line-height: 2.0625rem} button span { vertical-align: middle} set height to 34px instead 33px - vertical-align: top; - } - - input { - padding: 0; - margin: 0 $padding-normal; - line-height: $tc-enumeration-item-height; - } - - .tc-enumeration-item-error { - font-size: tokens.$coral-paragraph-s; - position: absolute; - top: 100%; - width: 100%; - color: tokens.$coral-color-danger-text; - padding: $tc-enumeration-item-error-padding; - z-index: 1; - background: inherit; - } -} - -.tc-enumeration-checkbox { - display: inline-block; - margin: 0 $item-checkbox-margin 0 0; - width: $item-checkbox-width; - vertical-align: middle; - pointer-events: none; -} - -.selected-item { - background-color: tokens.$coral-color-neutral-background-medium; -} - -.tc-enumeration-item:hover, -.tc-enumeration-item:focus-within { - .tc-enumeration-item-actions { - visibility: visible; - } -} - -// disable hover if item is selected -.tc-enumeration-item:hover:not(.selected-item), -.tc-enumeration-item:not(.selected-item):focus-within { - background-color: tokens.$coral-color-neutral-background-medium; -} diff --git a/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js b/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js index e26509d05c6..3cd767175cb 100644 --- a/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js +++ b/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js @@ -9,7 +9,7 @@ import I18N_DOMAIN_COMPONENTS from '../../../constants'; import ItemPropTypes from './Item.propTypes'; import ItemEditPropTypes from './ItemEdit.propTypes'; -import theme from './Item.module.scss'; +import theme from './Item.module.css'; function itemClasses(error) { return classNames(theme['tc-enumeration-item'], 'tc-enumeration-item', { diff --git a/packages/components/src/Enumeration/Items/Items.component.js b/packages/components/src/Enumeration/Items/Items.component.js index 9419417b519..1f8c3d1fc50 100644 --- a/packages/components/src/Enumeration/Items/Items.component.js +++ b/packages/components/src/Enumeration/Items/Items.component.js @@ -7,7 +7,7 @@ import Action from '../../Actions/Action/Action.component'; import Item from './Item/Item.component'; import ItemEdit from './Item/ItemEdit.component'; import ItemEditPropTypes from './Item/ItemEdit.propTypes'; -import theme from './Items.module.scss'; +import theme from './Items.module.css'; const DISPLAY_MODE_EDIT = 'DISPLAY_MODE_EDIT'; diff --git a/packages/components/src/Enumeration/Items/Items.module.css b/packages/components/src/Enumeration/Items/Items.module.css new file mode 100644 index 00000000000..0ef9fc1b427 --- /dev/null +++ b/packages/components/src/Enumeration/Items/Items.module.css @@ -0,0 +1,17 @@ +/* stylelint-disable color-hex-case */ +.tc-enumeration-items { + padding-left: 0; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + list-style: none; + box-shadow: + inset 0 21px 3px -20px rgba(0, 0, 0, 0.2), + inset 0 -21px 3px -20px rgba(0, 0, 0, 0.2); + height: 40vh; + max-height: 40vh; +} +.tc-enumeration-items [role='row']:first-child:hover, +.tc-enumeration-items [role='row']:first-child:focus-within { + box-shadow: inset 0 21px 3px -20px rgba(0, 0, 0, 0.2); +} diff --git a/packages/components/src/Enumeration/Items/Items.module.scss b/packages/components/src/Enumeration/Items/Items.module.scss deleted file mode 100644 index d3dee2c54b3..00000000000 --- a/packages/components/src/Enumeration/Items/Items.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-enumeration-height: 40vh !default; - -.tc-enumeration-items { - padding-left: 0; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; - list-style: none; - box-shadow: inset 0 21px 3px -20px $shadow, inset 0 -21px 3px -20px $shadow; - height: $tc-enumeration-height; - max-height: $tc-enumeration-height; - - [role='row']:first-child { - &:hover, - &:focus-within { - box-shadow: inset 0 21px 3px -20px $shadow; - } - } -} diff --git a/packages/components/src/FilterBar/FilterBar.component.js b/packages/components/src/FilterBar/FilterBar.component.js index d80cb01fb95..67371c8f7a0 100644 --- a/packages/components/src/FilterBar/FilterBar.component.js +++ b/packages/components/src/FilterBar/FilterBar.component.js @@ -11,7 +11,7 @@ import { Action } from '../Actions'; import I18N_DOMAIN_COMPONENTS from '../constants'; import Icon from '../Icon'; -import theme from './FilterBar.module.scss'; +import theme from './FilterBar.module.css'; function forceBlur(event) { event.target.blur(); diff --git a/packages/components/src/FilterBar/FilterBar.module.css b/packages/components/src/FilterBar/FilterBar.module.css new file mode 100644 index 00000000000..d384841fae6 --- /dev/null +++ b/packages/components/src/FilterBar/FilterBar.module.css @@ -0,0 +1,88 @@ +/* stylelint-disable color-hex-case */ +.filter { + display: flex; + height: 30px; + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + padding: 0; + border-radius: 4px; +} +.filter .search-icon { + position: absolute; + left: 0; + margin: 8px 0; + height: 1rem; + width: 30px; + fill: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.filter > :global(.form-group) { + margin-bottom: 0; + display: flex; + flex-grow: 1; +} +.filter > :global(.form-group) input { + padding-left: 30px; + padding-right: 15px; +} +.filter .animate { + width: 250px; + animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1); +} +.filter .search { + box-shadow: none; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font-size: 14px; +} +.filter .search::placeholder { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.filter .search::-ms-clear { + display: none; +} +.filter .remove { + display: inline-block; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: 5px; + line-height: 1.25rem; + height: 100%; + position: absolute; + right: 0; +} +.filter .remove :global(.tc-svg-icon) { + height: 0.5rem; + width: 0.5rem; + margin: 0 10px; + vertical-align: baseline; +} +.filter.navbar { + margin-top: 8px; + margin-bottom: 8px; +} +.filter.navbar .remove { + min-height: 1.25rem; +} + +.highlight { + background-color: var(--coral-color-warning-background, hsl(22, 85%, 92%)); +} +.highlight .search-icon, +.highlight .search { + fill: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} + +.button-docked { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} + +@keyframes reveal { + 0% { + opacity: 0; + width: 0; + overflow: hidden; + } + 50% { + opacity: 1; + } + 100% { + width: 250px; + } +} diff --git a/packages/components/src/FilterBar/FilterBar.module.scss b/packages/components/src/FilterBar/FilterBar.module.scss deleted file mode 100644 index a2a26f04f41..00000000000 --- a/packages/components/src/FilterBar/FilterBar.module.scss +++ /dev/null @@ -1,107 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// Filter styles -$tc-filter-bar-width: 250px !default; - -.filter { - display: flex; - height: $padding-larger; - background-color: tokens.$coral-color-neutral-background-medium; - padding: 0; - border-radius: $border-radius-base; - - .search-icon { - position: absolute; - left: 0; - margin: 8px 0; - height: $svg-md-size; - width: $padding-larger; - fill: tokens.$coral-color-neutral-icon-weak; - } - - > :global(.form-group) { - margin-bottom: 0; - display: flex; - flex-grow: 1; - - input { - padding-left: $padding-larger; - padding-right: $padding-normal; - } - } - - .animate { - width: $tc-filter-bar-width; - animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1); - } - - .search { - box-shadow: none; - color: tokens.$coral-color-neutral-text; - font-size: $font-size-base; - - &::placeholder { - color: tokens.$coral-color-neutral-icon-weak; - } - - &::-ms-clear { - display: none; - } - } - - .remove { - display: inline-block; - color: tokens.$coral-color-neutral-text; - padding: $padding-smaller; - line-height: 1.25rem; - height: 100%; - position: absolute; - right: 0; - - :global(.tc-svg-icon) { - height: $svg-xs-size; - width: $svg-xs-size; - margin: 0 $padding-small; - vertical-align: baseline; - } - } - - &.navbar { - margin-top: 8px; - margin-bottom: 8px; - - .remove { - min-height: 1.25rem; - } - } -} - -.highlight { - background-color: tokens.$coral-color-warning-background; - - .search-icon, - .search { - fill: tokens.$coral-color-neutral-text; - } -} - -.button-docked { - color: tokens.$coral-color-neutral-icon-weak; -} - -@keyframes reveal { - 0% { - opacity: 0; - width: 0; - overflow: hidden; - } - - 50% { - opacity: 1; - } - - 100% { - width: $tc-filter-bar-width; - } -} diff --git a/packages/components/src/FormatValue/FormatValue.component.js b/packages/components/src/FormatValue/FormatValue.component.js index 3b354132b30..65534da21e8 100644 --- a/packages/components/src/FormatValue/FormatValue.component.js +++ b/packages/components/src/FormatValue/FormatValue.component.js @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; import I18N_DOMAIN_COMPONENTS from '../constants'; import Icon from '../Icon'; -import theme from './FormatValue.module.scss'; +import theme from './FormatValue.module.css'; const REG_EXP_REPLACED_WHITE_SPACE_CHARACTERS = /(\t| |\n)/g; const REG_EXP_CAPTUR_LINE_FEEDING = /(\n)/g; diff --git a/packages/components/src/FormatValue/FormatValue.module.css b/packages/components/src/FormatValue/FormatValue.module.css new file mode 100644 index 00000000000..0038275f929 --- /dev/null +++ b/packages/components/src/FormatValue/FormatValue.module.css @@ -0,0 +1,17 @@ +/* stylelint-disable color-hex-case */ +.td-value { + white-space: pre; +} + +.td-white-space-character { + vertical-align: text-bottom; + color: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} + +.td-tab-character { + width: 1.625rem; +} + +.td-other-characters { + width: 0.1875rem; +} diff --git a/packages/components/src/FormatValue/FormatValue.module.scss b/packages/components/src/FormatValue/FormatValue.module.scss deleted file mode 100644 index a04ba0f2f10..00000000000 --- a/packages/components/src/FormatValue/FormatValue.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$svg-tab-width: 1.625rem !default; -$svg-other-characters: 0.1875rem !default; -$svg-color: tokens.$coral-color-neutral-background-strong !default; - -.td-value { - white-space: pre; -} - -.td-white-space-character { - vertical-align: text-bottom; - color: $svg-color; -} - -.td-tab-character { - width: $svg-tab-width; -} - -.td-other-characters { - width: $svg-other-characters; -} diff --git a/packages/components/src/GridLayout/Grid.component.js b/packages/components/src/GridLayout/Grid.component.js index 9a957ce2e67..246b2742450 100644 --- a/packages/components/src/GridLayout/Grid.component.js +++ b/packages/components/src/GridLayout/Grid.component.js @@ -5,7 +5,7 @@ import { Responsive, WidthProvider } from 'react-grid-layout'; import Tile from './Tile'; import { SKELETON_TILE_CONF } from './Tile/Skeleton/SkeletonTile.component'; -import css from './Grid.module.scss'; +import css from './Grid.module.css'; import { getTheme } from '../theme'; const theme = getTheme(css); @@ -69,7 +69,7 @@ function Grid({
- )) + )) : children} ); diff --git a/packages/components/src/GridLayout/Grid.module.css b/packages/components/src/GridLayout/Grid.module.css new file mode 100644 index 00000000000..ce4f287581c --- /dev/null +++ b/packages/components/src/GridLayout/Grid.module.css @@ -0,0 +1,17 @@ +/* stylelint-disable color-hex-case */ +.layout :global(.react-grid-item) { + display: flex; + flex-direction: column; + border: 1px solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + border-radius: 4px; +} +.layout :global(.skeleton-tile .tc-tile-container .tc-tile-body) { + padding: 0; +} +.layout.draggable :global(.react-grid-item):global(.react-grid-placeholder) { + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); +} +.layout.draggable :global(.react-grid-item):hover { + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.175); + cursor: move; +} diff --git a/packages/components/src/GridLayout/Grid.module.scss b/packages/components/src/GridLayout/Grid.module.scss deleted file mode 100644 index 8f8aaa2eb10..00000000000 --- a/packages/components/src/GridLayout/Grid.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.layout { - :global(.react-grid-item) { - display: flex; - flex-direction: column; - border: 1px solid tokens.$coral-color-neutral-border-weak; - border-radius: 4px; - } - - :global(.skeleton-tile .tc-tile-container .tc-tile-body) { - padding: 0; - } - - &.draggable { - :global(.react-grid-item) { - &:global(.react-grid-placeholder) { - background: tokens.$coral-color-accent-background; - } - - &:hover { - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.175); - cursor: move; - } - } - } -} diff --git a/packages/components/src/GridLayout/Tile/Body/TileBody.component.tsx b/packages/components/src/GridLayout/Tile/Body/TileBody.component.tsx index 1548819616c..c445bc937fc 100644 --- a/packages/components/src/GridLayout/Tile/Body/TileBody.component.tsx +++ b/packages/components/src/GridLayout/Tile/Body/TileBody.component.tsx @@ -1,6 +1,6 @@ import classnames from 'classnames'; import { ReactNode } from 'react'; -import theme from '../Tile.module.scss'; +import theme from '../Tile.module.css'; type BodyProps = { children: ReactNode; diff --git a/packages/components/src/GridLayout/Tile/Footer/TileFooter.component.tsx b/packages/components/src/GridLayout/Tile/Footer/TileFooter.component.tsx index e98a9ffd0e8..15935a288ea 100644 --- a/packages/components/src/GridLayout/Tile/Footer/TileFooter.component.tsx +++ b/packages/components/src/GridLayout/Tile/Footer/TileFooter.component.tsx @@ -1,6 +1,6 @@ import classnames from 'classnames'; import { ReactNode } from 'react'; -import theme from './TileFooter.module.scss'; +import theme from './TileFooter.module.css'; type FooterProps = { children: ReactNode; diff --git a/packages/components/src/GridLayout/Tile/Footer/TileFooter.module.scss b/packages/components/src/GridLayout/Tile/Footer/TileFooter.module.css similarity index 57% rename from packages/components/src/GridLayout/Tile/Footer/TileFooter.module.scss rename to packages/components/src/GridLayout/Tile/Footer/TileFooter.module.css index d8cc89c5640..bd4ecd3fadd 100644 --- a/packages/components/src/GridLayout/Tile/Footer/TileFooter.module.scss +++ b/packages/components/src/GridLayout/Tile/Footer/TileFooter.module.css @@ -1,9 +1,9 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +/* stylelint-disable color-hex-case */ .tc-tile-footer { display: flex; height: 4.0625rem; align-items: center; - padding: $padding-normal; + padding: 15px; border-top: 1px solid lightgray; } diff --git a/packages/components/src/GridLayout/Tile/Header/TileHeader.component.tsx b/packages/components/src/GridLayout/Tile/Header/TileHeader.component.tsx index 395b1d6a40c..5e751d58c8d 100644 --- a/packages/components/src/GridLayout/Tile/Header/TileHeader.component.tsx +++ b/packages/components/src/GridLayout/Tile/Header/TileHeader.component.tsx @@ -1,6 +1,6 @@ import classnames from 'classnames'; import { ReactNode } from 'react'; -import theme from './TileHeader.module.scss'; +import theme from './TileHeader.module.css'; type HeaderProps = { children: ReactNode; diff --git a/packages/components/src/GridLayout/Tile/Header/TileHeader.module.scss b/packages/components/src/GridLayout/Tile/Header/TileHeader.module.css similarity index 63% rename from packages/components/src/GridLayout/Tile/Header/TileHeader.module.scss rename to packages/components/src/GridLayout/Tile/Header/TileHeader.module.css index f359e9a29d4..f5838a41742 100644 --- a/packages/components/src/GridLayout/Tile/Header/TileHeader.module.scss +++ b/packages/components/src/GridLayout/Tile/Header/TileHeader.module.css @@ -1,10 +1,9 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - +/* stylelint-disable color-hex-case */ .tc-tile-header { display: flex; height: 4.0625rem; align-items: center; justify-content: space-between; - padding: $padding-normal; + padding: 15px; border-bottom: 1px solid lightgray; } diff --git a/packages/components/src/GridLayout/Tile/Tile.component.tsx b/packages/components/src/GridLayout/Tile/Tile.component.tsx index bdd7c9df8a9..01bea571ec9 100644 --- a/packages/components/src/GridLayout/Tile/Tile.component.tsx +++ b/packages/components/src/GridLayout/Tile/Tile.component.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ import { ReactNode, MouseEvent, useState } from 'react'; import classnames from 'classnames'; -import theme from './Tile.module.scss'; +import theme from './Tile.module.css'; import { TileContext, TileContextType } from './context'; /** diff --git a/packages/components/src/GridLayout/Tile/Tile.module.css b/packages/components/src/GridLayout/Tile/Tile.module.css new file mode 100644 index 00000000000..c4727edf9ae --- /dev/null +++ b/packages/components/src/GridLayout/Tile/Tile.module.css @@ -0,0 +1,20 @@ +/* stylelint-disable color-hex-case */ +.tc-tile-container { + display: flex; + flex-direction: column; + flex-grow: 1; + min-height: 0; +} +.tc-tile-container .tc-tile-body { + flex: 1; + display: flex; + height: 100%; + flex-direction: column; + padding: 15px; + min-height: 0; +} +.tc-tile-container .tc-tile-footer { + padding-right: 15px; + text-align: right; + padding-bottom: 10px; +} diff --git a/packages/components/src/GridLayout/Tile/Tile.module.scss b/packages/components/src/GridLayout/Tile/Tile.module.scss deleted file mode 100644 index d23f8d1e01b..00000000000 --- a/packages/components/src/GridLayout/Tile/Tile.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-tile-container { - display: flex; - flex-direction: column; - flex-grow: 1; - min-height: 0; - - .tc-tile-body { - flex: 1; - display: flex; - height: 100%; - flex-direction: column; - padding: $padding-normal; - min-height: 0; - } - - .tc-tile-footer { - padding-right: 15px; - text-align: right; - padding-bottom: 10px; - } -} diff --git a/packages/components/src/GuidedTour/GuidedTour.component.js b/packages/components/src/GuidedTour/GuidedTour.component.js index 0a90125d270..2c6795533ab 100644 --- a/packages/components/src/GuidedTour/GuidedTour.component.js +++ b/packages/components/src/GuidedTour/GuidedTour.component.js @@ -7,7 +7,7 @@ import { ButtonIcon, ButtonPrimary } from '@talend/design-system'; import I18N_DOMAIN_COMPONENTS from '../constants'; -import theme from './GuidedTour.module.scss'; +import theme from './GuidedTour.module.css'; function getTooltipContent({ header, body }) { // eslint-disable-next-line react/display-name diff --git a/packages/components/src/GuidedTour/GuidedTour.module.css b/packages/components/src/GuidedTour/GuidedTour.module.css new file mode 100644 index 00000000000..c19d5d18e70 --- /dev/null +++ b/packages/components/src/GuidedTour/GuidedTour.module.css @@ -0,0 +1,65 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable-next-line selector-id-pattern*/ +:global(#___reactour) > div { + z-index: var(--coral-elevation-layer-overlay, 16); +} +:global(#___reactour) .tc-guided-tour { + --reactour-accent: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + background-color: var(--coral-color-neutral-background, white); + padding: 20px 40px 20px 20px; + border-color: var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); + width: 25rem; + max-width: none; +} +:global(#___reactour) .tc-guided-tour [data-tour-elem='controls'] { + margin: 0 -20px 0 0; + justify-content: space-between; +} +:global(#___reactour) .tc-guided-tour [data-tour-elem='controls'] > button:not([disabled]), +:global(#___reactour) .tc-guided-tour [data-tour-elem='controls'] + button:not([disabled]) { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +:global(#___reactour) .tc-guided-tour [data-tour-elem='controls'] > button { + min-height: 1rem; +} +:global(#___reactour) .tc-guided-tour [data-tour-elem='controls'] > button svg { + height: 1rem; + width: 1rem; +} +:global(#___reactour) .tc-guided-tour [data-tour-elem='controls'] + button { + top: 20px; + right: 20px; + width: auto; + height: auto; +} +:global(#___reactour) .tc-guided-tour [data-tour-elem='controls'] + button svg { + height: 0.75rem; + width: 0.75rem; +} +:global(#___reactour) .tc-guided-tour [data-tour-elem='controls'] [data-tour-elem='dot'] { + padding: 0; + margin: 0 5px; + width: 10px; + height: 10px; +} +:global(#___reactour) .tc-guided-tour.no-interaction [data-tour-elem='controls'] { + justify-content: center; +} +:global(#___reactour) .tc-guided-tour .header, +:global(#___reactour) .tc-guided-tour .body { + margin: 0 0 30px 0; +} +:global(#___reactour) .tc-guided-tour .body { + margin-right: -20px; +} +:global(#___reactour) :global .reactour__mask { + opacity: 1; +} +:global(#___reactour) :global .reactour__mask > div { + opacity: 0.25; +} +:global(#___reactour) :global .reactour__dot--is-active { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + background-color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} diff --git a/packages/components/src/GuidedTour/GuidedTour.module.scss b/packages/components/src/GuidedTour/GuidedTour.module.scss deleted file mode 100644 index e50b689cf6b..00000000000 --- a/packages/components/src/GuidedTour/GuidedTour.module.scss +++ /dev/null @@ -1,97 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-guidedtour-accent-color: tokens.$coral-color-accent-text !default; -$tc-guidedtour-tooltip-padding: $padding-large !default; -$tc-guidedtour-mask-opactiy: 0.25 !default; -$tc-guidedtour-close-button-size: $svg-sm-size !default; -$tc-guidedtour-nav-button-size: $svg-md-size !default; -$tc-guidedtour-controls-color: tokens.$coral-color-accent-text !default; -$tc-guidedtour-width: 25rem !default; - -/* stylelint-disable-next-line selector-id-pattern*/ -:global(#___reactour) { - > div { - z-index: $zindex-guidedtour; - } - - .tc-guided-tour { - --reactour-accent: #{$tc-guidedtour-accent-color}; - background-color: tokens.$coral-color-neutral-background; - padding: $tc-guidedtour-tooltip-padding (2 * $tc-guidedtour-tooltip-padding) $tc-guidedtour-tooltip-padding $tc-guidedtour-tooltip-padding; - border-color: tokens.$coral-color-neutral-border; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); - width: $tc-guidedtour-width; - max-width: none; - - [data-tour-elem='controls'] { - margin: 0 (-1 * $tc-guidedtour-tooltip-padding) 0 0; - justify-content: space-between; - - > button:not([disabled]), - + button:not([disabled]) { - color: $tc-guidedtour-controls-color; - } - - > button { - min-height: $tc-guidedtour-nav-button-size; - - svg { - height: $tc-guidedtour-nav-button-size; - width: $tc-guidedtour-nav-button-size; - } - } - - + button { - top: $tc-guidedtour-tooltip-padding; - right: $tc-guidedtour-tooltip-padding; - width: auto; - height: auto; - - svg { - height: $tc-guidedtour-close-button-size; - width: $tc-guidedtour-close-button-size; - } - } - - [data-tour-elem='dot'] { - padding: 0; - margin: 0 $padding-smaller; - width: $padding-small; - height: $padding-small; - } - } - - &.no-interaction { - [data-tour-elem='controls'] { - justify-content: center; - } - } - - .header, - .body { - margin: 0 0 $padding-larger 0; - } - - .body { - margin-right: -1 * $tc-guidedtour-tooltip-padding; - } - } - - :global { - // sass-lint:disable-next-line class-name-format - .reactour__mask { - opacity: 1; - - > div { - opacity: $tc-guidedtour-mask-opactiy; - } - } - - // sass-lint:disable-next-line class-name-format - .reactour__dot--is-active { - color: $tc-guidedtour-accent-color; - background-color: $tc-guidedtour-accent-color; - } - } -} diff --git a/packages/components/src/HeaderBar/HeaderBar.component.js b/packages/components/src/HeaderBar/HeaderBar.component.js index 823ad076d0f..d1ef9c36161 100644 --- a/packages/components/src/HeaderBar/HeaderBar.component.js +++ b/packages/components/src/HeaderBar/HeaderBar.component.js @@ -18,7 +18,7 @@ import { Logo } from './primitives/Logo.component'; import { Search } from './primitives/Search.component'; import { User } from './primitives/User.component'; -import headerBarCssModule from './HeaderBar.module.scss'; +import headerBarCssModule from './HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/HeaderBar.module.css b/packages/components/src/HeaderBar/HeaderBar.module.css new file mode 100644 index 00000000000..d2f16b738fb --- /dev/null +++ b/packages/components/src/HeaderBar/HeaderBar.module.css @@ -0,0 +1,182 @@ +/* stylelint-disable color-hex-case */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +[data-theme='qlik-light'] .tc-header-bar { + border-bottom: 1px solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} + +.tc-header-bar { + background: var( + --coral-color-brand-background, + linear-gradient(133deg, hsl(210, 62%, 26%) 0%, hsl(254, 47%, 23%) 100%) + ); + color: var(--coral-color-brand-text, white); + display: flex; + position: fixed; + top: 0; + width: 100%; + z-index: var(--coral-elevation-layer-standard-front, 4); +} +.tc-header-bar svg { + margin: 0; +} +.tc-header-bar a svg { + margin: 0 5px; +} +.tc-header-bar ul { + list-style: none; +} +.tc-header-bar :global .dropdown-menu a svg path { + fill: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); +} +.tc-header-bar :global .tc-dropdown-button, +.tc-header-bar :global .btn-link, +.tc-header-bar :global .tc-header-bar-action.tc-header-bar-help a, +.tc-header-bar :global .tc-header-bar-logo.btn-link { + color: var(--coral-color-brand-text, white); +} +.tc-header-bar :global .tc-dropdown-button:hover, +.tc-header-bar :global .tc-dropdown-button:focus, +.tc-header-bar :global .btn-link:hover, +.tc-header-bar :global .btn-link:focus, +.tc-header-bar :global .tc-header-bar-action.tc-header-bar-help a:hover, +.tc-header-bar :global .tc-header-bar-action.tc-header-bar-help a:focus, +.tc-header-bar :global .tc-header-bar-logo.btn-link:hover, +.tc-header-bar :global .tc-header-bar-logo.btn-link:focus { + color: var(--coral-color-brand-text, white); + background-color: var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 100%, 0.1)); +} +.tc-header-bar .tc-header-bar-actions { + align-items: center; + display: flex; + padding: 0; + margin: 0; +} +.tc-header-bar .tc-header-bar-actions.right { + margin-left: auto; +} +.tc-header-bar .tc-header-bar-actions .tc-header-bar-action { + list-style: none; + display: flex; + align-items: center; + height: 100%; +} +.tc-header-bar .tc-header-bar-actions .tc-header-bar-action.separated:not(:last-child)::after { + content: ' '; + display: block; + width: 1px; + height: 18px; + background-color: var(--coral-color-brand-text, white); +} +.tc-header-bar .tc-header-bar-actions .tc-header-bar-action :global .tc-typeahead-item-title, +.tc-header-bar .tc-header-bar-actions .tc-header-bar-action :global .tc-typeahead-item-description { + white-space: initial; +} +.tc-header-bar .tc-header-bar-actions .tc-header-bar-logo { + padding: 0; + width: calc(var(--coral-sizing-s, 1.75rem) + var(--coral-sizing-branding-logo, 1.75rem)); + background-image: var( + --coral-branding-logo, + url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQ3SURBVHgB7Zu/UxNBFMe/e6ahQ0qxiBpaQWfUTjM0aqMMnWMh1iJEeyHBXiLqjDM6IP+A0Dk2Gkq0EMaxkhmuADsgNmZGgfW9vZz5dUcul938uPGbCbnb+5H95L3bu33vIaBZMpXqxT6GADEIIYcgaFmilzbFq3a1aZtN2/KQIkdHrovn2Rw0S0CDilBJOtskrRKcAgqjPL1zEGJZzM0uQoOaAlRghwQlkUJ4KD/ZYNg/yIiXWRshFQrQMFjN11EvM/iNxTCgDQPK8dQIHbUA82DV2iTXzTTquoEBldUkpslyKbRTFmap1zMim80H2T0QIMHFCWyJAIfQGdqka3M4iMvWBVRwB/iI2mG+3QoEeSRgB8O5qgvpC9gFcK6OhPQEVAPKAb6g8+EcCeqrRZAeA4/leQCPlt0Cx5I4R+8pr001FpT3U2P0sYDuk6TXKD3PLpc3VlhQXXdQ1jOn61eBvj4YkKDXE3V5lanSRQ9xByZd89IFArwGDJyBIZ2ih/6KB5F/gMp6EmmYUk+PA2daAhPlVixZcN8gHMuca1breLkVS4ACV2BKDJc0d/oalVlRARZHzjhMiOFa4ZqVoumcUL+oa8Gb0C2+5m7fagccS0DKSWcByoJ70DW/Y7DkZccledlLGxvAzm5l2y6tv3sPjdrDMZyO0QQ2CV1woyN0K7joD+YqkaB3VdvOjm5AFfyKqTmeltATnFFya9tZHkj471coAL8KlW1fv0G7JANaGkfP1/POJ4OmH/nv93YJWP0MwxLEdpYHmVbHVloniskyYBxRFQWcow1IbBYirv+A3S4GtBFd2ZZKX0VVkgGBdURVAj/ZgmuIpiSFYFYsoowqIFtwzUJMAUbxOsxzStwqRoOjaMUV/uPcByWeIlqSnOfnBQcwRrnwVrqp+eia7WaCFaByU51W5AltoeC/PeExGU5QMLi/H5qUcxdiKC1lKaPEgZrm54cMxzN7v1k9t3NAiuMwHN5g4JME951iNc9eoElJSqfNuCsVwQqKz6SpRU9ugt1w4l5wd+Qf5dW8E5BqRhIZGj3T7mrlwzZbkROKOsTWmSNrrH7iL/UXg3GwKf24eTju+z7elDfUps+cMpEl6BRbUbnhiVLEbesHsL2tA8oVj5x3q8tMvDO84yku1WhvuUijksiSaz6obvaeD8aQUWnh7tGm6rOHPAHVbcPCKHRdj2blFCH4FAYFKSP5AE4sdqbCl5G46mDIQIVAdWMyZHqbkhjD6CR35fEhYClXoKBTEfI8j1Q4+q5mXtwHKxgcq/FySidZyjUprXbZTYJ7WF0mUk9hC2Lj9MQwRkdPhT1HA3ImAvSUFbSEslzNljQz6HQxvx+HXtimwFxp65ByXYkbdMYkSjOSRs+fLwbBGCzXDBhCdiCQilnjQXqzZXvpW+KotbCtYrIc9JJijf+tgONDOqDK9RfJ1nAWmpwCzwAAAABJRU5ErkJggg==') + ); + background-size: var(--coral-sizing-branding-logo, 1.75rem); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: center; +} +.tc-header-bar .tc-header-bar-actions .tc-header-bar-logo :global(.tc-svg-icon) { + padding: 0; + height: 1.75rem; + width: 1.75rem; +} +.tc-header-bar .tc-header-bar-actions .tc-header-bar-logo.full { + width: auto; + background-image: none; +} +.tc-header-bar .tc-header-bar-actions .tc-header-bar-logo.full :global(.tc-svg-icon) { + padding: 0 15px; + width: 5.3125rem; +} +.tc-header-bar .tc-header-bar-actions .tc-header-bar-brand:global(.btn):global(.btn-link) { + font-size: 14px; +} +.tc-header-bar + .tc-header-bar-actions + .tc-header-bar-call-to-action + :global + .btn.btn-info.btn-inverse { + background-color: var(--coral-color-neutral-background, white); + border: none; + margin-right: 15px; +} +.tc-header-bar + .tc-header-bar-actions + .tc-header-bar-call-to-action + :global + .btn.btn-info.btn-inverse:hover { + background-color: var(--coral-color-neutral-background, white); +} +.tc-header-bar .tc-header-bar-products + :global(.dropdown-menu) :global(.tc-svg-icon) { + height: 1.5rem; + width: 1.5rem; +} +.tc-header-bar .tc-header-bar-brand :global(.tc-svg-icon:first-child) { + height: 1.5rem; + width: 1.5rem; +} +.tc-header-bar .tc-header-bar-brand + :global(.dropdown-menu) { + min-width: 100%; + width: auto; +} +.tc-header-bar :global(.dropdown) { + height: 100%; +} +.tc-header-bar :global(.dropdown) :global(.caret) { + box-shadow: 2px -2px 0 var(--coral-color-neutral-text-inverted, white); + border: none; + margin-left: 10px; + margin-bottom: 5px; +} +.tc-header-bar :global(.dropdown):global(.open) :global(.caret) { + margin-top: 10px; +} +.tc-header-bar .tc-header-bar-search form { + height: 48px; + padding-left: 0; +} +.tc-header-bar .tc-header-bar-search form :global(.tc-typeahead-container) > div:first-child { + margin-top: 0; + margin-bottom: 0; + padding-right: 20px; + height: 48px; + background: var(--coral-color-neutral-background, white); +} +.tc-header-bar + .tc-header-bar-search + form + :global(.tc-typeahead-container) + > div:first-child + :global(.form-control) { + font-style: italic; + animation: fadeIn 0.2s; + width: 400px; +} +.tc-header-bar .tc-header-bar-intercom-default-component { + border-radius: 50%; + color: var(--coral-color-brand-text, white); + min-height: auto; + height: 2rem; + width: 2rem; + margin: 0 10px; + padding: 0; +} + +:global(.intercom-namespace .intercom-app .intercom-messenger-frame) { + top: 4.375rem; +} diff --git a/packages/components/src/HeaderBar/HeaderBar.module.scss b/packages/components/src/HeaderBar/HeaderBar.module.scss deleted file mode 100644 index 0a73ae9c267..00000000000 --- a/packages/components/src/HeaderBar/HeaderBar.module.scss +++ /dev/null @@ -1,210 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-headerbar-logo-width: tokens.$coral-sizing-s !default; -$tc-headerbar-logo-full-width: 5.3125rem !default; - -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -[data-theme='qlik-light'] { - .tc-header-bar { - border-bottom: 1px solid tokens.$coral-color-neutral-border-weak; - } -} - -.tc-header-bar { - background: tokens.$coral-color-brand-background; - color: tokens.$coral-color-brand-text; - display: flex; - position: fixed; - top: 0; - width: 100%; - z-index: tokens.$coral-elevation-layer-standard-front; - - svg { - margin: 0; - } - - a svg { - margin: 0 $padding-smaller; - } - - ul { - list-style: none; - } - - :global { - .dropdown-menu { - a svg path { - fill: tokens.$coral-color-neutral-icon; - } - } - } - - :global { - .tc-dropdown-button, - .btn-link, - .tc-header-bar-action.tc-header-bar-help a, - .tc-header-bar-logo.btn-link { - color: tokens.$coral-color-brand-text; - &:hover, - &:focus { - color: tokens.$coral-color-brand-text; - background-color: tokens.$coral-color-brand-background-weak-hover; - } - } - } - - .tc-header-bar-actions { - align-items: center; - display: flex; - padding: 0; - margin: 0; - - &.right { - margin-left: auto; - } - - .tc-header-bar-action { - list-style: none; - display: flex; - align-items: center; - height: 100%; - - &.separated:not(:last-child)::after { - content: ' '; - display: block; - width: 1px; - height: $font-size-large; - background-color: tokens.$coral-color-brand-text; - } - - :global { - .tc-typeahead-item-title, - .tc-typeahead-item-description { - white-space: initial; - } - } - } - - .tc-header-bar-logo { - padding: 0; - width: calc($tc-headerbar-logo-width + tokens.$coral-sizing-branding-logo); - background-image: tokens.$coral-branding-logo; - background-size: tokens.$coral-sizing-branding-logo; - background-repeat: no-repeat; - background-position-x: center; - background-position-y: center; - - :global(.tc-svg-icon) { - padding: 0; - height: 1.75rem; - width: 1.75rem; - } - - &.full { - width: auto; - background-image: none; - - :global(.tc-svg-icon) { - padding: 0 $padding-normal; - width: $tc-headerbar-logo-full-width; - } - } - } - - .tc-header-bar-brand:global(.btn):global(.btn-link) { - font-size: $font-size-base; - } - - .tc-header-bar-call-to-action { - :global { - .btn.btn-info.btn-inverse { - background-color: tokens.$coral-color-neutral-background; - border: none; - margin-right: $padding-normal; - - &:hover { - background-color: tokens.$coral-color-neutral-background; - } - } - } - } - } - - .tc-header-bar-products + :global(.dropdown-menu) :global(.tc-svg-icon) { - height: $svg-lg-size; - width: $svg-lg-size; - } - - .tc-header-bar-brand :global(.tc-svg-icon:first-child) { - height: $svg-lg-size; - width: $svg-lg-size; - } - - .tc-header-bar-brand + :global(.dropdown-menu) { - min-width: 100%; - width: auto; - } - - :global(.dropdown) { - height: 100%; - - :global(.caret) { - box-shadow: 2px -2px 0 tokens.$coral-color-neutral-text-inverted; - border: none; - margin-left: $padding-small; - margin-bottom: $padding-smaller; - } - - &:global(.open) { - :global(.caret) { - margin-top: $padding-small; - } - } - } - - .tc-header-bar-search { - form { - height: $navbar-height; - padding-left: 0; - - :global(.tc-typeahead-container) > div:first-child { - margin-top: 0; - margin-bottom: 0; - - padding-right: $padding-large; - height: $navbar-height; - background: tokens.$coral-color-neutral-background; - - :global(.form-control) { - font-style: italic; - animation: fadeIn 0.2s; - width: 400px; - } - } - } - } - - .tc-header-bar-intercom-default-component { - border-radius: 50%; - color: tokens.$coral-color-brand-text; - min-height: auto; - height: 2rem; - width: 2rem; - margin: 0 $padding-small; - padding: 0; - } -} - -:global(.intercom-namespace .intercom-app .intercom-messenger-frame) { - top: 4.375rem; -} diff --git a/packages/components/src/HeaderBar/primitives/AppNotification.component.js b/packages/components/src/HeaderBar/primitives/AppNotification.component.js index 54e3c5c74db..44bd54b4933 100644 --- a/packages/components/src/HeaderBar/primitives/AppNotification.component.js +++ b/packages/components/src/HeaderBar/primitives/AppNotification.component.js @@ -4,7 +4,7 @@ import Inject from '../../Inject'; import { Action } from '../../Actions'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/primitives/CallToAction.component.js b/packages/components/src/HeaderBar/primitives/CallToAction.component.js index 162288a2df8..f4c04007fce 100644 --- a/packages/components/src/HeaderBar/primitives/CallToAction.component.js +++ b/packages/components/src/HeaderBar/primitives/CallToAction.component.js @@ -3,7 +3,7 @@ import Inject from '../../Inject'; import Action from '../../Actions/Action'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/primitives/Environment.component.js b/packages/components/src/HeaderBar/primitives/Environment.component.js index 46e9e3475d6..18ecaa8cdc6 100644 --- a/packages/components/src/HeaderBar/primitives/Environment.component.js +++ b/packages/components/src/HeaderBar/primitives/Environment.component.js @@ -4,7 +4,7 @@ import Inject from '../../Inject'; import ActionDropdown from '../../Actions/ActionDropdown'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/primitives/GenericAction.component.js b/packages/components/src/HeaderBar/primitives/GenericAction.component.js index 4e1a87a4f50..838fbb71574 100644 --- a/packages/components/src/HeaderBar/primitives/GenericAction.component.js +++ b/packages/components/src/HeaderBar/primitives/GenericAction.component.js @@ -4,7 +4,7 @@ import Inject from '../../Inject'; import Action from '../../Actions/Action'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/primitives/Help.component.js b/packages/components/src/HeaderBar/primitives/Help.component.js index f0638b7dc7b..79c0553f9d5 100644 --- a/packages/components/src/HeaderBar/primitives/Help.component.js +++ b/packages/components/src/HeaderBar/primitives/Help.component.js @@ -4,7 +4,7 @@ import Inject from '../../Inject'; import Action from '../../Actions/Action'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/primitives/Information.component.js b/packages/components/src/HeaderBar/primitives/Information.component.js index 9d75bab6353..4637d8cdfa9 100644 --- a/packages/components/src/HeaderBar/primitives/Information.component.js +++ b/packages/components/src/HeaderBar/primitives/Information.component.js @@ -5,7 +5,7 @@ import Action from '../../Actions/Action'; import ActionDropdown from '../../Actions/ActionDropdown'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/primitives/Intercom.component.js b/packages/components/src/HeaderBar/primitives/Intercom.component.js index e87ed3cdff9..e9607a62724 100644 --- a/packages/components/src/HeaderBar/primitives/Intercom.component.js +++ b/packages/components/src/HeaderBar/primitives/Intercom.component.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import ActionIntercom from '../../ActionIntercom'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); export function Intercom({ id, config, tooltipPlacement }) { diff --git a/packages/components/src/HeaderBar/primitives/Logo.component.js b/packages/components/src/HeaderBar/primitives/Logo.component.js index f2f6ea279fe..f6b39cb853e 100644 --- a/packages/components/src/HeaderBar/primitives/Logo.component.js +++ b/packages/components/src/HeaderBar/primitives/Logo.component.js @@ -4,7 +4,7 @@ import Action from '../../Actions/Action'; import Inject from '../../Inject'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/primitives/Search.component.js b/packages/components/src/HeaderBar/primitives/Search.component.js index 3f8abd6ca54..0a945b6baf2 100644 --- a/packages/components/src/HeaderBar/primitives/Search.component.js +++ b/packages/components/src/HeaderBar/primitives/Search.component.js @@ -4,7 +4,7 @@ import Inject from '../../Inject'; import Typeahead from '../../Typeahead'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HeaderBar/primitives/User.component.js b/packages/components/src/HeaderBar/primitives/User.component.js index 35965964ff5..af799212eec 100644 --- a/packages/components/src/HeaderBar/primitives/User.component.js +++ b/packages/components/src/HeaderBar/primitives/User.component.js @@ -4,7 +4,7 @@ import Inject from '../../Inject'; import ActionDropdown from '../../Actions/ActionDropdown'; import { getTheme } from '../../theme'; -import headerBarCssModule from '../HeaderBar.module.scss'; +import headerBarCssModule from '../HeaderBar.module.css'; const theme = getTheme(headerBarCssModule); diff --git a/packages/components/src/HttpError/HttpError.component.js b/packages/components/src/HttpError/HttpError.component.js index 6e44c15ca4f..184001e0ef3 100644 --- a/packages/components/src/HttpError/HttpError.component.js +++ b/packages/components/src/HttpError/HttpError.component.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { Action } from '../Actions'; -import css from './HttpError.module.scss'; +import css from './HttpError.module.css'; const className = 'http-error'; diff --git a/packages/components/src/HttpError/HttpError.module.css b/packages/components/src/HttpError/HttpError.module.css new file mode 100644 index 00000000000..c2282495cb8 --- /dev/null +++ b/packages/components/src/HttpError/HttpError.module.css @@ -0,0 +1,40 @@ +/* stylelint-disable color-hex-case */ +.http-error { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} +.http-error::before { + position: absolute; + top: 0; + left: 0; + right: 0; + text-align: center; + content: attr(data-status); + font-size: 38.75rem; + font-weight: 700; + line-height: 0.7; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + opacity: 0.1; + z-index: -1; +} +.http-error-content { + padding: 8.125rem 0 0 26.875rem; +} +.http-error-content h1 { + margin: 0; + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); + font-size: 6.25rem; + font-weight: 700; +} +.http-error-content p { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font-size: 1.875rem; + font-weight: 600; +} +.http-error-content button { + padding: 0; + font-weight: 600; + text-transform: none; +} diff --git a/packages/components/src/HttpError/HttpError.module.scss b/packages/components/src/HttpError/HttpError.module.scss deleted file mode 100644 index efa899d1179..00000000000 --- a/packages/components/src/HttpError/HttpError.module.scss +++ /dev/null @@ -1,47 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.http-error { - position: relative; - display: flex; - align-items: center; - justify-content: center; - - &::before { - position: absolute; - top: 0; - left: 0; - right: 0; - text-align: center; - content: attr(data-status); - font-size: 38.75rem; - font-weight: 700; - line-height: 0.7; - color: tokens.$coral-color-accent-text; - opacity: 0.1; - z-index: -1; - } - - &-content { - padding: 8.125rem 0 0 26.875rem; - - h1 { - margin: 0; - color: tokens.$coral-color-accent-text-active; - font-size: 6.25rem; - font-weight: 700; - } - - p { - color: tokens.$coral-color-neutral-text; - font-size: 1.875rem; - font-weight: 600; - } - - button { - padding: 0; - font-weight: 600; - text-transform: none; - } - } -} diff --git a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.component.js b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.component.js index 81ffb0b7c3f..15676f760d6 100644 --- a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.component.js +++ b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.component.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import entries from 'lodash/entries'; import get from 'lodash/get'; -import css from './JSONSchemaRenderer.module.scss'; +import css from './JSONSchemaRenderer.module.css'; const CLASS_NAME = 'json-schema-renderer'; diff --git a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.css b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.css new file mode 100644 index 00000000000..e374f968ce1 --- /dev/null +++ b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.css @@ -0,0 +1,35 @@ +/* stylelint-disable selector-no-qualifying-type */ +/* stylelint-disable color-hex-case */ +.json-schema-renderer { + margin-top: 20px; + margin-left: 20px; +} +.json-schema-renderer.nested { + margin: 0; +} +.json-schema-renderer dt { + font-weight: 400; + font-size: 0.875rem; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.json-schema-renderer dd { + font-size: 1rem; + font-weight: 400; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding-top: 5px; + margin-bottom: 15px; +} +.json-schema-renderer dd.array-value { + display: inline; +} +.json-schema-renderer dd.array-value::after { + content: ', '; +} +.json-schema-renderer dd.array-value:last-child::after { + content: ''; +} +.json-schema-renderer h2 { + font-size: 1.0625rem; + font-weight: 700; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} diff --git a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss deleted file mode 100644 index 14dc33d480c..00000000000 --- a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss +++ /dev/null @@ -1,44 +0,0 @@ -/* stylelint-disable selector-no-qualifying-type */ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.json-schema-renderer { - margin-top: $padding-large; - margin-left: $padding-large; - - &.nested { - margin: 0; - } - - dt { - font-weight: 400; - font-size: 0.875rem; - color: tokens.$coral-color-neutral-text-weak; - } - - dd { - font-size: 1rem; - font-weight: 400; - color: tokens.$coral-color-neutral-text; - padding-top: $padding-smaller; - margin-bottom: $padding-normal; - - &.array-value { - display: inline; - - &::after { - content: ', '; - } - - &:last-child::after { - content: ''; - } - } - } - - h2 { - font-size: 1.0625rem; - font-weight: 700; - color: tokens.$coral-color-neutral-text; - } -} diff --git a/packages/components/src/Layout/Layout.component.js b/packages/components/src/Layout/Layout.component.js index 6e3d9703663..a574762f20a 100644 --- a/packages/components/src/Layout/Layout.component.js +++ b/packages/components/src/Layout/Layout.component.js @@ -7,7 +7,7 @@ import OneColumn from './OneColumn'; import TwoColumns from './TwoColumns'; import SkipLinks from './SkipLinks'; -import style from './Layout.module.scss'; +import style from './Layout.module.css'; const DISPLAY_MODES = { ONE_COLUMN: 'OneColumn', diff --git a/packages/components/src/Layout/Layout.module.css b/packages/components/src/Layout/Layout.module.css new file mode 100644 index 00000000000..cd8e8a37416 --- /dev/null +++ b/packages/components/src/Layout/Layout.module.css @@ -0,0 +1,17 @@ +/* stylelint-disable color-hex-case */ +.layout { + display: flex; + flex-direction: column; + height: 100vh; + width: 100vw; +} +.layout .skip-links { + z-index: calc(var(--coral-elevation-layer-standard-front, 4) + 6 + 20); +} +.layout .header { + flex: 0 0 48px; +} +.layout .footer { + flex-shrink: 0; + flex-grow: 0; +} diff --git a/packages/components/src/Layout/Layout.module.scss b/packages/components/src/Layout/Layout.module.scss deleted file mode 100644 index 84a5ea717a1..00000000000 --- a/packages/components/src/Layout/Layout.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -//// -/// Layout -/// @group Custom widgets -//// - -/// Layout height of the header -/// @type Number (Unit) - -// Need to be higher to typehead (1035) -$tc-drawer-z-index: calc($zindex-navbar-fixed + 6) !default; -$tc-layout-header-height: $navbar-height !default; -$tc-layout-skip-links-z-index: calc($tc-drawer-z-index + 20) !default; - -.layout { - display: flex; - flex-direction: column; - height: 100vh; - width: 100vw; - - .skip-links { - z-index: $tc-layout-skip-links-z-index; - } - - .header { - flex: 0 0 $tc-layout-header-height; - } - - .footer { - flex-shrink: 0; - flex-grow: 0; - } -} diff --git a/packages/components/src/Layout/OneColumn/OneColumn.component.js b/packages/components/src/Layout/OneColumn/OneColumn.component.js index 99d2847ab81..64252ef4cff 100644 --- a/packages/components/src/Layout/OneColumn/OneColumn.component.js +++ b/packages/components/src/Layout/OneColumn/OneColumn.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import omit from 'lodash/omit'; -import theme from './OneColumn.module.scss'; +import theme from './OneColumn.module.css'; import TabBar from '../../TabBar'; import WithDrawer from '../../WithDrawer'; diff --git a/packages/components/src/Layout/OneColumn/OneColumn.module.scss b/packages/components/src/Layout/OneColumn/OneColumn.module.css similarity index 54% rename from packages/components/src/Layout/OneColumn/OneColumn.module.scss rename to packages/components/src/Layout/OneColumn/OneColumn.module.css index d18afe19d6f..5aaf40a7274 100644 --- a/packages/components/src/Layout/OneColumn/OneColumn.module.scss +++ b/packages/components/src/Layout/OneColumn/OneColumn.module.css @@ -1,7 +1,4 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -// OneColumn styles - +/* stylelint-disable color-hex-case */ .main { flex-grow: 1; min-height: 0; diff --git a/packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx b/packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx index 85bc2777d49..74dd3a10ae3 100644 --- a/packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx +++ b/packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx @@ -4,7 +4,7 @@ import { Icon, SVG_TRANSFORMS } from '@talend/design-system'; import I18N_DOMAIN_COMPONENTS from '../../constants'; import getDefaultT from '../../translate'; -import theme from './SkipLinks.module.scss'; +import theme from './SkipLinks.module.css'; type SkipToProps = { href: string; diff --git a/packages/components/src/Layout/SkipLinks/SkipLinks.module.css b/packages/components/src/Layout/SkipLinks/SkipLinks.module.css new file mode 100644 index 00000000000..98c015177c8 --- /dev/null +++ b/packages/components/src/Layout/SkipLinks/SkipLinks.module.css @@ -0,0 +1,30 @@ +/* stylelint-disable color-hex-case */ +.tc-skip-links { + position: absolute; + width: 0; + height: 0; + overflow: hidden; +} +.tc-skip-links ul > li > a { + height: 48px; + background: var(--coral-color-neutral-background, white); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + font-weight: bold; + display: flex; + align-items: center; +} +.tc-skip-links ul > li > a:focus { + position: fixed; + top: 0; + left: 0; + visibility: visible; +} +.tc-skip-links ul > li > a > .icon { + padding: 0 10px; + border-right: 1px solid var(--coral-color-neutral-border-strong, hsl(0, 0%, 25%)); + display: flex; + align-items: center; +} +.tc-skip-links ul > li > a > .text { + padding: 0 10px; +} diff --git a/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss b/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss deleted file mode 100644 index 25508a85078..00000000000 --- a/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-skip-links { - position: absolute; - width: 0; - height: 0; - overflow: hidden; - - ul > li > a { - height: $navbar-height; - background: tokens.$coral-color-neutral-background; - color: tokens.$coral-color-neutral-text-weak; - font-weight: bold; - - display: flex; - align-items: center; - - &:focus { - position: fixed; - top: 0; - left: 0; - visibility: visible; - } - - > .icon { - padding: 0 $padding-small; - border-right: 1px solid tokens.$coral-color-neutral-border-strong; - display: flex; - align-items: center; - } - - > .text { - padding: 0 $padding-small; - } - } -} diff --git a/packages/components/src/Layout/TwoColumns/TwoColumns.component.js b/packages/components/src/Layout/TwoColumns/TwoColumns.component.js index 57426c87580..349627ac7c4 100644 --- a/packages/components/src/Layout/TwoColumns/TwoColumns.component.js +++ b/packages/components/src/Layout/TwoColumns/TwoColumns.component.js @@ -5,7 +5,7 @@ import omit from 'lodash/omit'; import TabBar from '../../TabBar'; import WithDrawer from '../../WithDrawer'; import Inject from '../../Inject'; -import theme from './TwoColumns.module.scss'; +import theme from './TwoColumns.module.css'; /** * @param {object} props react props diff --git a/packages/components/src/Layout/TwoColumns/TwoColumns.module.css b/packages/components/src/Layout/TwoColumns/TwoColumns.module.css new file mode 100644 index 00000000000..b0254804fb1 --- /dev/null +++ b/packages/components/src/Layout/TwoColumns/TwoColumns.module.css @@ -0,0 +1,23 @@ +/* stylelint-disable color-hex-case */ +.container { + display: flex; + flex-direction: row; + height: 100vh; + overflow: hidden; +} + +.sidemenu { + flex-shrink: 0; + flex-grow: 0; + min-width: 0; +} +.sidemenu > * { + height: 100%; +} + +.main { + flex-grow: 1; + /*safari need a fixed height (not in %) to manage flex columns to fit container height*/ + height: calc(100vh - 48px); + position: relative; +} diff --git a/packages/components/src/Layout/TwoColumns/TwoColumns.module.scss b/packages/components/src/Layout/TwoColumns/TwoColumns.module.scss deleted file mode 100644 index 7e128179d07..00000000000 --- a/packages/components/src/Layout/TwoColumns/TwoColumns.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -//// -/// Layout -/// @group Custom widgets -//// - -/// Layout first columns in two columns background color -/// @type Color -$tc-layout-header-height: $navbar-height !default; - -.container { - display: flex; - flex-direction: row; - height: 100vh; - overflow: hidden; -} - -.sidemenu { - flex-shrink: 0; - flex-grow: 0; - min-width: 0; - - > * { - height: 100%; - } -} - -.main { - flex-grow: 1; - /*safari need a fixed height (not in %) to manage flex columns to fit container height*/ - height: calc(100vh - #{$tc-layout-header-height}); - position: relative; -} diff --git a/packages/components/src/List/List.component.js b/packages/components/src/List/List.component.js index b0947681b5c..7d81fcce15a 100644 --- a/packages/components/src/List/List.component.js +++ b/packages/components/src/List/List.component.js @@ -6,7 +6,7 @@ import Inject from '../Inject'; import ListToVirtualizedList from './ListToVirtualizedList'; import Toolbar from './Toolbar'; -import theme from './List.module.scss'; +import theme from './List.module.css'; const SelectAll = Toolbar.SelectAll; diff --git a/packages/components/src/List/List.module.css b/packages/components/src/List/List.module.css new file mode 100644 index 00000000000..15fa356e0dd --- /dev/null +++ b/packages/components/src/List/List.module.css @@ -0,0 +1,23 @@ +/* stylelint-disable color-hex-case */ +.list { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + overflow: hidden; +} +.list .display-mode-large { + padding-top: 2px; +} +.list :global(.tc-list-toolbar) { + flex-grow: 0; + flex-shrink: 0; + flex-basis: auto; +} +.list :global(.tc-list-display-virtualized) { + display: flex; + flex-grow: 1; + flex-shrink: 1; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2) inset; + background-color: var(--coral-color-neutral-background, white); +} diff --git a/packages/components/src/List/List.module.scss b/packages/components/src/List/List.module.scss deleted file mode 100644 index 67430b13827..00000000000 --- a/packages/components/src/List/List.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// List styles - -.list { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - overflow: hidden; - - .display-mode-large { - padding-top: 2px; - } - - :global(.tc-list-toolbar) { - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; - } - - :global(.tc-list-display-virtualized) { - display: flex; - flex-grow: 1; - flex-shrink: 1; - box-shadow: $shadow-default; - background-color: tokens.$coral-color-neutral-background; - } -} diff --git a/packages/components/src/List/ListComposition/List.module.scss b/packages/components/src/List/ListComposition/List.module.css similarity index 76% rename from packages/components/src/List/ListComposition/List.module.scss rename to packages/components/src/List/ListComposition/List.module.css index b4258c7d68a..2cb3d04f235 100644 --- a/packages/components/src/List/ListComposition/List.module.scss +++ b/packages/components/src/List/ListComposition/List.module.css @@ -1,5 +1,4 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - +/* stylelint-disable color-hex-case */ .list { display: flex; flex-direction: column; diff --git a/packages/components/src/List/ListComposition/Manager/ListManager.component.js b/packages/components/src/List/ListComposition/Manager/ListManager.component.js index 1e811f21ddb..8b8b95ce4cb 100644 --- a/packages/components/src/List/ListComposition/Manager/ListManager.component.js +++ b/packages/components/src/List/ListComposition/Manager/ListManager.component.js @@ -7,7 +7,7 @@ import getDefaultT from '../../../translate'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; import { useCollectionSort } from './hooks/useCollectionSort.hook'; import { useCollectionFilter } from './hooks/useCollectionFilter.hook'; -import theme from '../List.module.scss'; +import theme from '../List.module.css'; import { useColumnsVisibility } from './hooks/useColumnsVisibility.hook'; function Manager({ diff --git a/packages/components/src/List/ListComposition/SortBy/SortBy.component.js b/packages/components/src/List/ListComposition/SortBy/SortBy.component.js index 36c27a501a7..8039f8669f7 100644 --- a/packages/components/src/List/ListComposition/SortBy/SortBy.component.js +++ b/packages/components/src/List/ListComposition/SortBy/SortBy.component.js @@ -5,7 +5,7 @@ import Icon from '../../../Icon'; import { useListContext } from '../context'; -import cssModule from './SortBy.module.scss'; +import cssModule from './SortBy.module.css'; import { getTheme } from '../../../theme'; const theme = getTheme(cssModule); diff --git a/packages/components/src/List/ListComposition/SortBy/SortBy.module.css b/packages/components/src/List/ListComposition/SortBy/SortBy.module.css new file mode 100644 index 00000000000..09e4d519a86 --- /dev/null +++ b/packages/components/src/List/ListComposition/SortBy/SortBy.module.css @@ -0,0 +1,45 @@ +/* stylelint-disable color-hex-case */ +.tc-sort-by { + display: flex; + align-items: center; +} +.tc-sort-by :global(.navbar-text) { + margin: 0; +} +.tc-sort-by-label { + margin: 0; + font-weight: normal; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.tc-sort-by :global(.navbar-btn.btn) { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + font-size: 1em; + margin: 0; +} +.tc-sort-by-order-chooser[type='button'] { + display: flex; + align-items: center; + padding: 0; +} +.tc-sort-by-order-chooser[type='button']:hover, +.tc-sort-by-order-chooser[type='button']:focus, +.tc-sort-by-order-chooser[type='button']:active { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + box-shadow: none; +} +.tc-sort-by-order-chooser[type='button'] :global(.tc-svg-icon.tc-sort-by-order-chooser-indicator) { + width: 0.375rem; + height: 0.375rem; +} +.tc-sort-by :global(.nav.navbar-nav) { + display: flex; + align-items: center; +} +.tc-sort-by-items > a[role='button'] { + display: inline-block; + text-transform: lowercase; + white-space: nowrap; +} +.tc-sort-by-items > a[role='button']::first-letter { + text-transform: uppercase; +} diff --git a/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss b/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss deleted file mode 100644 index 2ad72da2f88..00000000000 --- a/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// SelectSortBy styles -$tc-order-chooser-icon-size: 0.375rem !default; - -.tc-sort-by { - display: flex; - align-items: center; - - :global(.navbar-text) { - margin: 0; - } - - &-label { - margin: 0; - font-weight: normal; - color: tokens.$coral-color-neutral-text-weak; - } - - :global(.navbar-btn.btn) { - color: tokens.$coral-color-neutral-text-weak; - font-size: 1em; - margin: 0; - } - - &-order-chooser[type='button'] { - display: flex; - align-items: center; - padding: 0; - - &:hover, - &:focus, - &:active { - color: tokens.$coral-color-neutral-text; - box-shadow: none; - } - - :global(.tc-svg-icon.tc-sort-by-order-chooser-indicator) { - width: $tc-order-chooser-icon-size; - height: $tc-order-chooser-icon-size; - } - } - - :global(.nav.navbar-nav) { - display: flex; - align-items: center; - } - - &-items > a[role='button'] { - display: inline-block; - text-transform: lowercase; - white-space: nowrap; - - &::first-letter { - text-transform: uppercase; - } - } -} diff --git a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.component.js b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.component.js index a70ece8b096..1932e0162a8 100644 --- a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.component.js +++ b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.component.js @@ -2,7 +2,7 @@ import { Children } from 'react'; import PropTypes from 'prop-types'; import { Navbar } from '@talend/react-bootstrap'; -import cssModule from './ListToolbar.module.scss'; +import cssModule from './ListToolbar.module.css'; import { getTheme } from '../../../theme'; const theme = getTheme(cssModule); diff --git a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.css b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.css new file mode 100644 index 00000000000..2fcf0cf39b3 --- /dev/null +++ b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.css @@ -0,0 +1,45 @@ +/* stylelint-disable color-hex-case */ +.tc-list-toolbar { + display: flex; + height: 4.375rem; + max-height: 4.375rem; + padding-left: 30px; + padding-right: 30px; + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + border-top: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + border-bottom: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + margin-bottom: 0; + flex-shrink: 0; + flex-grow: 0; +} +.tc-list-toolbar :global(.tc-actionbar-container) { + padding: 0; + flex: 1 0 0%; +} +.tc-list-toolbar-right { + align-items: center; + display: flex; + margin-left: auto; + margin-top: 0; + margin-bottom: 0; +} +.tc-list-toolbar-separated { + display: flex; +} +.tc-list-toolbar-separated:not(:first-child)::before { + align-self: center; + content: '|'; + color: var(--coral-color-neutral-border-strong, hsl(0, 0%, 25%)); + padding: 0 15px; +} +.tc-list-toolbar > :global(.container-fluid) { + display: flex; + align-items: center; + width: 100%; + padding: 0; +} +.tc-list-toolbar :global(button[role='search'][type='button']) { + padding: 0; +} diff --git a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss deleted file mode 100644 index 0587e3f4ddc..00000000000 --- a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-toolbar-height: 4.375rem; - -.tc-list-toolbar { - display: flex; - height: $tc-toolbar-height; - max-height: $tc-toolbar-height; - - padding-left: $padding-larger; - padding-right: $padding-larger; - - background: tokens.$coral-color-neutral-background-medium; - 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; - - :global(.tc-actionbar-container) { - padding: 0; - flex: 1 0 0%; - } - - &-right { - align-items: center; - display: flex; - margin: { - left: auto; - top: 0; - bottom: 0; - } - } - - &-separated { - display: flex; - } - - &-separated:not(:first-child)::before { - align-self: center; - content: '|'; - color: tokens.$coral-color-neutral-border-strong; - padding: 0 $padding-normal; - } - - > :global(.container-fluid) { - display: flex; - align-items: center; - width: 100%; - padding: 0; - } - - :global(button[role='search'][type='button']) { - padding: 0; - } -} diff --git a/packages/components/src/List/ListComposition/VList/VList.component.js b/packages/components/src/List/ListComposition/VList/VList.component.js index a0dce966d2a..f4e5d0e6ab0 100644 --- a/packages/components/src/List/ListComposition/VList/VList.component.js +++ b/packages/components/src/List/ListComposition/VList/VList.component.js @@ -10,7 +10,7 @@ import VirtualizedList from '../../../VirtualizedList'; import { DISPLAY_MODE, SORT } from '../constants'; import ColumnChooser from '../ColumnChooser'; -import theme from '../List.module.scss'; +import theme from '../List.module.css'; const columnsFromChildrens = children => { return Array.isArray(children) diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.js index 5f412e72e1a..206c59f330f 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.js @@ -6,7 +6,7 @@ import FilterBar from '../../../../FilterBar'; import { getTheme } from '../../../../theme'; import { useColumnChooserManager } from '../hooks'; import { ColumnChooserProvider } from './columnChooser.context'; -import cssModule from './ColumnChooser.module.scss'; +import cssModule from './ColumnChooser.module.css'; import ColumnChooserBody from './ColumnChooserBody'; import ColumnChooserFooter from './ColumnChooserFooter'; import ColumnChooserHeader from './ColumnChooserHeader'; diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.css b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.css new file mode 100644 index 00000000000..f43f804e19d --- /dev/null +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.css @@ -0,0 +1,46 @@ +/* stylelint-disable color-hex-case */ +.tc-column-chooser :global(.tc-tooltip-body) { + margin: 0; +} +.tc-column-chooser :global(.tc-tooltip-footer.tc-column-chooser-footer) { + justify-content: flex-end; +} +.tc-column-chooser-header { + display: flex; + align-items: center; +} +.tc-column-chooser-header-title { + font-weight: bold; +} +.tc-column-chooser-filter { + margin: 0 10px; +} +.tc-column-chooser-body { + width: 100%; + display: flex; + flex-direction: column; +} +.tc-column-chooser-columns-list { + overflow-y: auto; + max-height: 12.5rem; +} +.tc-column-chooser-footer { + align-items: center; + display: flex; +} +.tc-column-chooser-row { + padding: 0 20px; + display: flex; + align-items: center; + min-height: 2.5rem; +} +.tc-column-chooser-row-select-all { + border-bottom: 0.0625rem solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.tc-column-chooser-row:focus-within, +.tc-column-chooser-row:hover { + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-column-chooser-row-label { + padding-left: var(--coral-spacing-xs, 0.5rem); +} diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss deleted file mode 100644 index 28c9a35c918..00000000000 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss +++ /dev/null @@ -1,64 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-popover-border-width: 0.0625rem !default; -$tc-height: 2.5rem; - -.tc-column-chooser { - :global(.tc-tooltip-body) { - margin: 0; - } - - :global(.tc-tooltip-footer.tc-column-chooser-footer) { - justify-content: flex-end; - } - - &-header { - display: flex; - align-items: center; - - &-title { - font-weight: bold; - } - } - - &-filter { - margin: 0 $padding-small; - } - - &-body { - width: 100%; - display: flex; - flex-direction: column; - } - - &-columns-list { - overflow-y: auto; - max-height: 5 * $tc-height; - } - - &-footer { - align-items: center; - display: flex; - } - - &-row { - padding: 0 $padding-large; - display: flex; - align-items: center; - min-height: $tc-height; - - &-select-all { - border-bottom: $tc-popover-border-width solid tokens.$coral-color-neutral-border-weak; - } - - &:focus-within, - &:hover { - background: tokens.$coral-color-neutral-background-medium; - } - - &-label { - padding-left: tokens.$coral-spacing-xs; - } - } -} diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/ColumnChooserBody.component.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/ColumnChooserBody.component.js index 5c11cd75a3d..9a7cf3d910d 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/ColumnChooserBody.component.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/ColumnChooserBody.component.js @@ -5,7 +5,7 @@ import SelectAllColumnsCheckbox from '../SelectAllColumnsCheckbox'; import ColumnChooserTable from '../ColumnChooserTable'; import { useColumnChooserContext } from '../columnChooser.context'; import RichLayout from '../../../../../Rich/Layout'; -import cssModule from '../ColumnChooser.module.scss'; +import cssModule from '../ColumnChooser.module.css'; import { getTheme } from '../../../../../theme'; const theme = getTheme(cssModule); diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserFooter/ColumnChooserFooter.component.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserFooter/ColumnChooserFooter.component.js index e8b4c31bc4a..7af1c8b6ec7 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserFooter/ColumnChooserFooter.component.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserFooter/ColumnChooserFooter.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import ActionButton from '../../../../../Actions/ActionButton'; import { useColumnChooserContext } from '../columnChooser.context'; import RichLayout from '../../../../../Rich/Layout'; -import cssModule from '../ColumnChooser.module.scss'; +import cssModule from '../ColumnChooser.module.css'; import { getTheme } from '../../../../../theme'; const theme = getTheme(cssModule); diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserHeader/ColumnChooserHeader.component.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserHeader/ColumnChooserHeader.component.js index 68d1afcc2cb..d72b5eb153a 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserHeader/ColumnChooserHeader.component.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserHeader/ColumnChooserHeader.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import { useColumnChooserContext } from '../columnChooser.context'; import RichLayout from '../../../../../Rich/Layout'; -import cssModule from '../ColumnChooser.module.scss'; +import cssModule from '../ColumnChooser.module.css'; import { getTheme } from '../../../../../theme'; const theme = getTheme(cssModule); diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/ColumnChooserRow.component.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/ColumnChooserRow.component.js index b9b51c2b73f..695fc07a171 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/ColumnChooserRow.component.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/ColumnChooserRow.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import Label from './RowLabel'; import Checkbox from './RowCheckbox'; -import cssModule from '../ColumnChooser.module.scss'; +import cssModule from '../ColumnChooser.module.css'; import { getTheme } from '../../../../../theme'; const theme = getTheme(cssModule); diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowLabel/RowLabel.component.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowLabel/RowLabel.component.js index 1fd54832aad..ce136152ec9 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowLabel/RowLabel.component.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowLabel/RowLabel.component.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import cssModule from '../../ColumnChooser.module.scss'; +import cssModule from '../../ColumnChooser.module.css'; import { getTheme } from '../../../../../../theme'; const theme = getTheme(cssModule); diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.js index 72af7340d91..be5cf907185 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.js +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import ColumnChooserRow from '../ColumnChooserRow'; -import cssModule from '../ColumnChooser.module.scss'; +import cssModule from '../ColumnChooser.module.css'; import { getTheme } from '../../../../../theme'; const theme = getTheme(cssModule); @@ -10,11 +10,11 @@ const getLabels = (checked, t) => { ? { label: t('TC_COLUMN_CHOOSER_UNSELECT_ALL', 'Unselect all'), description: t('CHECKBOX_DESELECT_ALL_COLUMNS_DESCRIPTION', 'hide all the columns'), - } + } : { label: t('TC_COLUMN_CHOOSER_SELECT_ALL', 'Select all'), description: t('CHECKBOX_SELECT_ALL_COLUMNS_DESCRIPTION', 'display all the columns'), - }; + }; }; const SelectAllColumnsCheckbox = ({ id, onChange, value, t }) => { diff --git a/packages/components/src/List/Toolbar/Pagination/Pagination.component.js b/packages/components/src/List/Toolbar/Pagination/Pagination.component.js index d43887d8698..62e183cacf3 100644 --- a/packages/components/src/List/Toolbar/Pagination/Pagination.component.js +++ b/packages/components/src/List/Toolbar/Pagination/Pagination.component.js @@ -4,7 +4,7 @@ import { randomUUID } from '@talend/utils'; import Icon from '../../../Icon'; -import theme from './Pagination.module.scss'; +import theme from './Pagination.module.css'; import getDefaultT from '../../../translate'; const FIRST = 'first'; diff --git a/packages/components/src/List/Toolbar/Pagination/Pagination.module.css b/packages/components/src/List/Toolbar/Pagination/Pagination.module.css new file mode 100644 index 00000000000..a4b6953ffcf --- /dev/null +++ b/packages/components/src/List/Toolbar/Pagination/Pagination.module.css @@ -0,0 +1,9 @@ +/* stylelint-disable color-hex-case */ +.tc-pagination :global(.tc-svg-icon) { + height: 0.75rem; + width: 0.75rem; +} +.tc-pagination .page-index { + display: flex; + align-items: center; +} diff --git a/packages/components/src/List/Toolbar/Pagination/Pagination.module.scss b/packages/components/src/List/Toolbar/Pagination/Pagination.module.scss deleted file mode 100644 index 50a43dbac03..00000000000 --- a/packages/components/src/List/Toolbar/Pagination/Pagination.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-pagination { - :global(.tc-svg-icon) { - height: $svg-sm-size; - width: $svg-sm-size; - } - - .page-index { - display: flex; - align-items: center; - } -} diff --git a/packages/components/src/List/Toolbar/SelectAll/SelectAll.component.js b/packages/components/src/List/Toolbar/SelectAll/SelectAll.component.js index 28247dfc008..1f6cd70af83 100644 --- a/packages/components/src/List/Toolbar/SelectAll/SelectAll.component.js +++ b/packages/components/src/List/Toolbar/SelectAll/SelectAll.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Form } from '@talend/design-system'; import { useTranslation } from 'react-i18next'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; -import theme from './SelectAll.module.scss'; +import theme from './SelectAll.module.css'; function SelectAll({ id, items, isSelected, onToggleAll }) { const isAllSelected = () => items.length > 0 && items.findIndex(item => !isSelected(item)) < 0; diff --git a/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.css b/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.css new file mode 100644 index 00000000000..42a47064eba --- /dev/null +++ b/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.css @@ -0,0 +1,11 @@ +.container { + background: var(--coral-color-neutral-background, white); + display: flex; + margin: 0; + padding: var(--coral-spacing-m, 1rem) var(--coral-sizing-s, 1.75rem); + width: 100%; +} +.container label { + line-height: 1rem; + margin-bottom: 0; +} diff --git a/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss b/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss deleted file mode 100644 index b7970c59edc..00000000000 --- a/packages/components/src/List/Toolbar/SelectAll/SelectAll.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.container { - background: tokens.$coral-color-neutral-background; - display: flex; - margin: 0; - padding: tokens.$coral-spacing-m tokens.$coral-sizing-s; - width: 100%; - - label { - line-height: 1rem; - margin-bottom: 0; - } -} diff --git a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.component.js b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.component.js index 0b99d3e4e6a..dcda7135eda 100644 --- a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.component.js +++ b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.component.js @@ -7,7 +7,7 @@ import { randomUUID } from '@talend/utils'; import Icon from '../../../Icon'; import getDefaultT from '../../../translate'; -import theme from './SelectSortBy.module.scss'; +import theme from './SelectSortBy.module.css'; function SortByItem({ option, id, t, onSelect }) { const optionLabel = option.name || option.id; diff --git a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.css b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.css new file mode 100644 index 00000000000..57e8634ba41 --- /dev/null +++ b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.css @@ -0,0 +1,35 @@ +/* stylelint-disable color-hex-case */ +.tc-list-toolbar-sort-by { + display: flex; + align-items: center; +} +.tc-list-toolbar-sort-by :global(.navbar-btn.btn) { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + font-size: 1em; + margin: 0; +} +.tc-list-toolbar-sort-by :global(.tc-list-toolbar-order-chooser) { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + display: inherit; + padding: 0; +} +.tc-list-toolbar-sort-by :global(.tc-list-toolbar-order-chooser):hover, +.tc-list-toolbar-sort-by :global(.tc-list-toolbar-order-chooser):focus, +.tc-list-toolbar-sort-by :global(.tc-list-toolbar-order-chooser):active { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + box-shadow: none; +} +.tc-list-toolbar-sort-by :global(.tc-list-toolbar-order-chooser) :global(.tc-order-indicator) { + width: 0.375rem; + height: 0.375rem; +} +.tc-list-toolbar-sort-by :global(.tc-list-toolbar-order-chooser) .tc-list-toolbar-order-indicator { + width: 0.375rem; + height: 0.375rem; +} +.tc-list-toolbar-sort-by + :global(.tc-list-toolbar-order-chooser) + .tc-list-toolbar-order-indicator.asc { + transform: rotate(180deg); +} diff --git a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss deleted file mode 100644 index a10ea695208..00000000000 --- a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.module.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// SelectSortBy styles - -$tc-list-toolbar-order-chooser-icon-size: 0.375rem !default; - -.tc-list-toolbar-sort-by { - display: flex; - align-items: center; - - :global(.navbar-btn.btn) { - color: tokens.$coral-color-neutral-text-weak; - font-size: 1em; - margin: 0; - } - - :global(.tc-list-toolbar-order-chooser) { - background-color: tokens.$coral-color-neutral-background-medium; - color: tokens.$coral-color-neutral-text; - display: inherit; - - padding: 0; - - &:hover, - &:focus, - &:active { - color: tokens.$coral-color-neutral-text; - box-shadow: none; - } - - :global(.tc-order-indicator) { - width: $tc-list-toolbar-order-chooser-icon-size; - height: $tc-list-toolbar-order-chooser-icon-size; - } - - .tc-list-toolbar-order-indicator { - width: $tc-list-toolbar-order-chooser-icon-size; - height: $tc-list-toolbar-order-chooser-icon-size; - - &.asc { - transform: rotate(180deg); - } - } - } -} diff --git a/packages/components/src/List/Toolbar/Toolbar.component.js b/packages/components/src/List/Toolbar/Toolbar.component.js index 11ef0194da0..bcc0d355de5 100644 --- a/packages/components/src/List/Toolbar/Toolbar.component.js +++ b/packages/components/src/List/Toolbar/Toolbar.component.js @@ -12,7 +12,7 @@ import ActionBar from '../../ActionBar'; import ColumnChooserButton from './ColumnChooserButton'; import DisplayModeToggle from './DisplayModeToggle'; -import theme from './Toolbar.module.scss'; +import theme from './Toolbar.module.css'; import I18N_DOMAIN_COMPONENTS from '../../constants'; import '../../translate'; import Inject from '../../Inject'; diff --git a/packages/components/src/List/Toolbar/Toolbar.module.css b/packages/components/src/List/Toolbar/Toolbar.module.css new file mode 100644 index 00000000000..2a6b3f01b86 --- /dev/null +++ b/packages/components/src/List/Toolbar/Toolbar.module.css @@ -0,0 +1,79 @@ +/* stylelint-disable color-hex-case */ +.tc-list-toolbar { + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + border-top: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + border-bottom: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + margin-bottom: 0; + padding: 0 30px; +} +.tc-list-toolbar > :global(.container-fluid) { + padding-left: 0; +} +.tc-list-toolbar :global(.navbar-btn) { + margin-top: 0; + margin-bottom: 0; +} +.tc-list-toolbar :global(.navbar-text) { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + margin-right: 0; +} +.tc-list-toolbar :global(.navbar-text) label { + font-weight: 400; + margin: 0; +} +.tc-list-toolbar :global(.nav) a[role='menuitem'], +.tc-list-toolbar :global(.nav) a:global(.dropdown-toggle) { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font-weight: normal; +} +.tc-list-toolbar :global(.tc-actionbar-container) { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + padding: 0; + height: 4.375rem; +} +.tc-list-toolbar :global(.tc-actionbar-container) :global(.navbar-left) > *, +.tc-list-toolbar :global(.tc-actionbar-container) :global(.navbar-right) > * { + margin-right: 15px; +} +.tc-list-toolbar :global(.tc-actionbar-container) :global(.navbar-left) > *:last-child, +.tc-list-toolbar :global(.tc-actionbar-container) :global(.navbar-right) > *:last-child { + margin-right: 0; +} +.tc-list-toolbar :global(.list-action-bar) :global(.navbar-right) > ul { + list-style: none; + display: flex; + align-items: center; + margin: 0; +} +.tc-list-toolbar :global(.list-action-bar) :global(.navbar-right) > ul > li { + display: flex; + align-items: center; + margin-left: 15px; +} +.tc-list-toolbar :global(.list-action-bar) :global(.navbar-right) > ul > li button[role='search'] { + padding-right: 0; +} +.tc-list-toolbar + :global(.list-action-bar) + :global(.navbar-right) + > ul + > li:global(.separated):not(:first-child)::before { + content: '|'; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.tc-list-toolbar + :global(.list-action-bar) + :global(.navbar-right) + > ul + > li:global(.select-sort-by) + :global(.navbar-text) { + margin-bottom: 15px; + margin-left: 15px; + font-weight: normal; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-list-toolbar :global(.separated button[data-feature='column-chooser.open']) { + margin-left: var(--coral-spacing-m, 1rem); +} diff --git a/packages/components/src/List/Toolbar/Toolbar.module.scss b/packages/components/src/List/Toolbar/Toolbar.module.scss deleted file mode 100644 index 33769d3050f..00000000000 --- a/packages/components/src/List/Toolbar/Toolbar.module.scss +++ /dev/null @@ -1,94 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// Toolbar styles -$tc-list-toolbar-height: 4.375rem !default; - -.tc-list-toolbar { - background: tokens.$coral-color-neutral-background-medium; - 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; - - > :global(.container-fluid) { - padding-left: 0; - } - - :global(.navbar-btn) { - margin-top: 0; - margin-bottom: 0; - } - - :global(.navbar-text) { - color: tokens.$coral-color-neutral-text; - margin-right: 0; - - label { - font-weight: 400; - margin: 0; - } - } - - :global(.nav) { - a[role='menuitem'], - a:global(.dropdown-toggle) { - color: tokens.$coral-color-neutral-text; - font-weight: normal; - } - } - - :global(.tc-actionbar-container) { - background-color: tokens.$coral-color-neutral-background-medium; - padding: 0; - height: $tc-list-toolbar-height; - - :global(.navbar-left), - :global(.navbar-right) { - > * { - margin-right: $padding-normal; - - &:last-child { - margin-right: 0; - } - } - } - } - - :global(.list-action-bar) { - :global(.navbar-right) { - > ul { - list-style: none; - display: flex; - align-items: center; - margin: 0; - - > li { - display: flex; - align-items: center; - margin-left: $padding-normal; - - button[role='search'] { - padding-right: 0; - } - - &:global(.separated):not(:first-child)::before { - content: '|'; - color: tokens.$coral-color-neutral-text-weak; - } - - &:global(.select-sort-by) :global(.navbar-text) { - margin-bottom: $padding-normal; - margin-left: $padding-normal; - font-weight: normal; - color: tokens.$coral-color-neutral-text; - } - } - } - } - } - - :global(.separated button[data-feature='column-chooser.open']) { - margin-left: tokens.$coral-spacing-m; - } -} diff --git a/packages/components/src/ListView/Header/Header.component.js b/packages/components/src/ListView/Header/Header.component.js index da5c4d4b94a..1536b28aa37 100644 --- a/packages/components/src/ListView/Header/Header.component.js +++ b/packages/components/src/ListView/Header/Header.component.js @@ -6,7 +6,7 @@ import I18N_DOMAIN_COMPONENTS from '../../constants'; import getDefaultT from '../../translate'; import Action from '../../Actions/Action'; -import theme from './Header.module.scss'; +import theme from './Header.module.css'; export function headerClasses() { return classNames(theme['tc-listview-header'], 'tc-listview-header'); diff --git a/packages/components/src/ListView/Header/Header.module.css b/packages/components/src/ListView/Header/Header.module.css new file mode 100644 index 00000000000..7168b8b48d0 --- /dev/null +++ b/packages/components/src/ListView/Header/Header.module.css @@ -0,0 +1,36 @@ +/* stylelint-disable color-hex-case */ +.tc-listview-header { + display: flex; + line-height: 20px; + align-items: center; + height: 28px; + position: relative; +} +.tc-listview-header > strong + small { + padding: 0 5px; +} +.tc-listview-header input { + box-shadow: none; + outline: none; + border: none; + flex-grow: 1; + height: 100%; + background-color: transparent; +} +.tc-listview-header input::placeholder { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.tc-listview-header :global(.actions) { + margin-left: auto; +} +.tc-listview-header :global(.btn-link) { + height: 30px; + margin-left: 5px; +} +.tc-listview-header :global(.btn-link) :global(.tc-svg-icon) { + fill: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + height: 0.875rem; + width: 0.875rem; + margin: 0; + vertical-align: text-top; +} diff --git a/packages/components/src/ListView/Header/Header.module.scss b/packages/components/src/ListView/Header/Header.module.scss deleted file mode 100644 index 84d2b1907ea..00000000000 --- a/packages/components/src/ListView/Header/Header.module.scss +++ /dev/null @@ -1,48 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-listview-header-height: 28px !default; -$tc-listview-svg-color: tokens.$coral-color-neutral-text !default; -$tc-listview-font-size: 0.875rem !default; - -.tc-listview-header { - display: flex; - line-height: $padding-large; - align-items: center; - height: $tc-listview-header-height; - position: relative; - - > strong + small { - padding: 0 $padding-smaller; - } - - input { - box-shadow: none; - outline: none; - border: none; - flex-grow: 1; - height: 100%; - background-color: transparent; - - &::placeholder { - color: tokens.$coral-color-neutral-text-weak; - } - } - - :global(.actions) { - margin-left: auto; - } - - :global(.btn-link) { - height: 30px; - margin-left: $padding-smaller; - - :global(.tc-svg-icon) { - fill: $tc-listview-svg-color; - height: $tc-listview-font-size; - width: $tc-listview-font-size; - margin: 0; - vertical-align: text-top; - } - } -} diff --git a/packages/components/src/ListView/Header/HeaderInput.component.js b/packages/components/src/ListView/Header/HeaderInput.component.js index ca2e261fc22..f9549847b90 100644 --- a/packages/components/src/ListView/Header/HeaderInput.component.js +++ b/packages/components/src/ListView/Header/HeaderInput.component.js @@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next'; import I18N_DOMAIN_COMPONENTS from '../../constants'; import getDefaultT from '../../translate'; import Action from '../../Actions/Action'; -import theme from './Header.module.scss'; +import theme from './Header.module.css'; let inputRef; diff --git a/packages/components/src/ListView/Items/Items.component.js b/packages/components/src/ListView/Items/Items.component.js index 55d4b882d3d..62a2698f378 100644 --- a/packages/components/src/ListView/Items/Items.component.js +++ b/packages/components/src/ListView/Items/Items.component.js @@ -10,7 +10,7 @@ import I18N_DOMAIN_COMPONENTS from '../../constants'; import getDefaultT from '../../translate'; import Item from './Item/Item.component'; -import theme from './Items.module.scss'; +import theme from './Items.module.css'; const listClasses = classNames(theme['tc-list-items'], 'tc-list-items'); const itemsClasses = classNames(theme['tc-listview-items'], 'tc-listview-items'); diff --git a/packages/components/src/ListView/Items/Items.module.css b/packages/components/src/ListView/Items/Items.module.css new file mode 100644 index 00000000000..32a7da427e3 --- /dev/null +++ b/packages/components/src/ListView/Items/Items.module.css @@ -0,0 +1,50 @@ +/* stylelint-disable color-hex-case */ +.tc-listview-items { + min-height: 0; + list-style: none; + box-shadow: + inset 0 21px 3px -20px rgba(0, 0, 0, 0.2), + inset 0 -21px 3px -20px rgba(0, 0, 0, 0.2); + height: 40vh; + background-color: rgba(0, 0, 0, 0.025); +} +.tc-listview-items .tc-item-container { + margin: 0; +} +.tc-listview-items .tc-item-container :global .checkbox { + margin: 5px; + margin-right: 0; +} +.tc-listview-items .tc-item-container :global .with-icon { + display: inline-flex; + margin: 0; + margin-left: 5px; +} +.tc-listview-items .tc-item-container :global .with-icon .tc-svg-icon { + height: 12px; + width: 12px; + margin-left: 5px; +} +.tc-listview-items .tc-item-container :global .checkbox-nested { + margin-top: 5px; + margin-bottom: 20px; +} +.tc-listview-items .tc-item-container :global .checkbox-nested > .checkbox { + height: 12px; + margin-bottom: 0; +} +.tc-listview-items .tc-item-container :global .checkbox-nested > .checkbox + .checkbox { + margin-top: 10px; +} +.tc-listview-items .tc-item-container.toggle { + display: flex; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +:export { + row-height: 12px; + row-vertical-margin: 10px; + row-nested-inner-margin-top: 5px; + row-nested-inner-margin-bottom: 20px; +} diff --git a/packages/components/src/ListView/Items/Items.module.scss b/packages/components/src/ListView/Items/Items.module.scss deleted file mode 100644 index fef6bcb65e9..00000000000 --- a/packages/components/src/ListView/Items/Items.module.scss +++ /dev/null @@ -1,70 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -$tc-listview-height: 40vh !default; - -$row-height: 12px; -$row-vertical-margin: $padding-small; -$row-nested-inner-margin-top: $padding-normal - $padding-small; -$row-nested-inner-margin-bottom: $padding-larger - $padding-small; - -.tc-listview-items { - min-height: 0; - list-style: none; - box-shadow: inset 0 21px 3px -20px $shadow, inset 0 -21px 3px -20px $shadow; - height: $tc-listview-height; - background-color: rgba(0, 0, 0, 0.025); - - .tc-item-container { - margin: 0; - - :global { - .checkbox { - margin: $padding-smaller; - margin-right: 0; - } - - .with-icon { - display: inline-flex; - margin: 0; - margin-left: $padding-smaller; - - .tc-svg-icon { - height: $row-height; - width: $row-height; - margin-left: $padding-smaller; - } - } - - .checkbox-nested { - margin-top: $row-nested-inner-margin-top; - margin-bottom: $row-nested-inner-margin-bottom; - } - - .checkbox-nested > .checkbox { - height: $row-height; - margin-bottom: 0; - - + .checkbox { - margin-top: $row-vertical-margin; - } - } - } - - &.toggle { - display: flex; - align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - } - } -} - -// This exported values are used to compute properly sizes -// in react-virtualized's calculation method -:export { - // stylelint-disable property-no-unknown - row-height: $row-height; - row-vertical-margin: $row-vertical-margin; - row-nested-inner-margin-top: $row-nested-inner-margin-top; - row-nested-inner-margin-bottom: $row-nested-inner-margin-bottom; - // stylelint-enable property-no-unknown -} diff --git a/packages/components/src/ListView/ListView.component.js b/packages/components/src/ListView/ListView.component.js index 7fa21564547..5a18bc40219 100644 --- a/packages/components/src/ListView/ListView.component.js +++ b/packages/components/src/ListView/ListView.component.js @@ -6,7 +6,7 @@ import I18N_DOMAIN_COMPONENTS from '../constants'; import Header from './Header/Header.component'; import HeaderInput from './Header/HeaderInput.component'; import Items from './Items/Items.component'; -import theme from './ListView.module.scss'; +import theme from './ListView.module.css'; const DISPLAY_MODE_DEFAULT = 'DISPLAY_MODE_DEFAULT'; const DISPLAY_MODE_SEARCH = 'DISPLAY_MODE_SEARCH'; diff --git a/packages/components/src/ListView/ListView.module.css b/packages/components/src/ListView/ListView.module.css new file mode 100644 index 00000000000..e5a2900a51a --- /dev/null +++ b/packages/components/src/ListView/ListView.module.css @@ -0,0 +1,25 @@ +/* stylelint-disable color-hex-case */ +.tc-listview { + overflow: hidden; + display: flex; + flex-direction: column; +} +.tc-listview :global(.btn.btn-link) { + padding: 0 10px; +} +.tc-listview :global(.btn.btn-link) svg { + fill: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); + height: 0.875rem; + width: 0.875rem; +} +.tc-listview header { + flex-shrink: 0; +} +.tc-listview .empty-message { + flex-grow: 1; + flex-shrink: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 20px 0; +} diff --git a/packages/components/src/ListView/ListView.module.scss b/packages/components/src/ListView/ListView.module.scss deleted file mode 100644 index 62f5066f98e..00000000000 --- a/packages/components/src/ListView/ListView.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-listview-svg-color: tokens.$coral-color-neutral-icon !default; -$tc-listview-font-size: 0.875rem !default; - -.tc-listview { - overflow: hidden; - display: flex; - flex-direction: column; - - :global(.btn.btn-link) { - padding: 0 $padding-small; - - svg { - fill: $tc-listview-svg-color; - height: $tc-listview-font-size; - width: $tc-listview-font-size; - } - } - - header { - flex-shrink: 0; - } - - .empty-message { - flex-grow: 1; - flex-shrink: 1; - display: flex; - align-items: center; - justify-content: center; - padding: 20px 0; - } -} diff --git a/packages/components/src/Loader/Loader.component.js b/packages/components/src/Loader/Loader.component.js index b2df5cac786..ef16bff641e 100644 --- a/packages/components/src/Loader/Loader.component.js +++ b/packages/components/src/Loader/Loader.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import CircularProgress from '../CircularProgress'; -import theme from './Loader.module.scss'; +import theme from './Loader.module.css'; function Loader({ id, className, size = CircularProgress.SIZE.default }) { const loaderClassNames = classNames('tc-loader', theme['tc-loader'], className); diff --git a/packages/components/src/Loader/Loader.module.css b/packages/components/src/Loader/Loader.module.css new file mode 100644 index 00000000000..f0ab80512f0 --- /dev/null +++ b/packages/components/src/Loader/Loader.module.css @@ -0,0 +1,4 @@ +/* stylelint-disable color-hex-case */ +.tc-loader { + display: flex; +} diff --git a/packages/components/src/Loader/Loader.module.scss b/packages/components/src/Loader/Loader.module.scss deleted file mode 100644 index 2b9ea08dead..00000000000 --- a/packages/components/src/Loader/Loader.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-loader { - display: flex; -} diff --git a/packages/components/src/MultiSelect/Dropdown.container.js b/packages/components/src/MultiSelect/Dropdown.container.js index 36518802108..e22eedc8dbc 100644 --- a/packages/components/src/MultiSelect/Dropdown.container.js +++ b/packages/components/src/MultiSelect/Dropdown.container.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import CircularProgress from '../CircularProgress'; import VirtualizedList from '../VirtualizedList'; -import theme from './Dropdown.module.scss'; +import theme from './Dropdown.module.css'; export default function Dropdown(props) { return ( diff --git a/packages/components/src/MultiSelect/Dropdown.module.css b/packages/components/src/MultiSelect/Dropdown.module.css new file mode 100644 index 00000000000..9b44d1b6824 --- /dev/null +++ b/packages/components/src/MultiSelect/Dropdown.module.css @@ -0,0 +1,17 @@ +/* stylelint-disable color-hex-case */ +.dropdown { + z-index: 100; + position: absolute; + width: 100%; + background-color: var(--coral-color-neutral-background, white); + border: 1px solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + border-top: none; + border-radius: 0 5px; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.dropdown .loading { + padding: 50px; + text-align: center; + height: 80px; + background-color: var(--coral-color-neutral-background, white); +} diff --git a/packages/components/src/MultiSelect/Dropdown.module.scss b/packages/components/src/MultiSelect/Dropdown.module.scss deleted file mode 100644 index 3341a35408c..00000000000 --- a/packages/components/src/MultiSelect/Dropdown.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.dropdown { - z-index: 100; - position: absolute; - width: 100%; - background-color: tokens.$coral-color-neutral-background; - border: 1px solid tokens.$coral-color-neutral-border; - border-top: none; - border-radius: 0 5px; - color: tokens.$coral-color-neutral-text; - - .loading { - padding: 50px; - text-align: center; - height: 80px; - background-color: tokens.$coral-color-neutral-background; - } -} diff --git a/packages/components/src/MultiSelect/ItemOption.component.js b/packages/components/src/MultiSelect/ItemOption.component.js index 4458def77f7..268428b7c30 100644 --- a/packages/components/src/MultiSelect/ItemOption.component.js +++ b/packages/components/src/MultiSelect/ItemOption.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { getRowData } from '../VirtualizedList/utils/gridrow'; -import theme from './ItemOption.module.scss'; +import theme from './ItemOption.module.css'; import Emphasis from '../Emphasis/Emphasis.component'; class ItemOptionRow extends Component { diff --git a/packages/components/src/MultiSelect/ItemOption.module.css b/packages/components/src/MultiSelect/ItemOption.module.css new file mode 100644 index 00000000000..402233c2d92 --- /dev/null +++ b/packages/components/src/MultiSelect/ItemOption.module.css @@ -0,0 +1,45 @@ +/* stylelint-disable color-hex-case */ +.row { + padding-left: 15px; +} +.row:hover { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.row :global(.checkbox) { + margin: 0; +} +.row label { + height: 1.875rem; + width: 100%; + display: flex; + margin-bottom: 0; + align-items: center; +} +.row input[type='checkbox'], +.row :global(.checkbox input + ::before) { + top: 7.5px; +} +.row :global(.checkbox input + ::after) { + /* tricky calculation to center the checkmark + * $padding-normal / 2 = top gap, same as the input (see above) + * tokens.$coral-sizing-xxxs = checkbox size + * tokens.$coral-sizing-xxxs / 2 = mark size + * 2px = 2 * 1px (the border width) + */ + top: calc( + 7.5px + (var(--coral-sizing-xxxs, 1rem) - var(--coral-sizing-xxxs, 1rem) / 2 - 2px) / 2 + ) !important; /* stylelint-disable-line declaration-no-important */ +} + +.item { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.item[for='checkbox-create-new'], +.item[for='checkbox-select-all'] { + font-style: italic; +} + +:global(.tc-multi-select-item) { + display: flex; + align-items: center; +} diff --git a/packages/components/src/MultiSelect/ItemOption.module.scss b/packages/components/src/MultiSelect/ItemOption.module.scss deleted file mode 100644 index a643d1749f3..00000000000 --- a/packages/components/src/MultiSelect/ItemOption.module.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.row { - padding-left: $padding-normal; - - &:hover { - background-color: tokens.$coral-color-neutral-background-medium; - } - - :global(.checkbox) { - margin: 0; - } - - label { - height: 1.875rem; - width: 100%; - display: flex; - margin-bottom: 0; - align-items: center; - } - - input[type='checkbox'], - :global(.checkbox input + ::before) { - top: calc($padding-normal / 2); - } - - :global(.checkbox input + ::after) { - /* tricky calculation to center the checkmark - * $padding-normal / 2 = top gap, same as the input (see above) - * tokens.$coral-sizing-xxxs = checkbox size - * tokens.$coral-sizing-xxxs / 2 = mark size - * 2px = 2 * 1px (the border width) - */ - top: calc($padding-normal / 2 + (tokens.$coral-sizing-xxxs - tokens.$coral-sizing-xxxs / 2 - 2px) / 2) !important; /* stylelint-disable-line declaration-no-important */ - } -} - -.item { - color: tokens.$coral-color-neutral-text; - - &[for='checkbox-create-new'], - &[for='checkbox-select-all'] { - font-style: italic; - } -} - -:global(.tc-multi-select-item) { - display: flex; - align-items: center; -} diff --git a/packages/components/src/MultiSelect/MultiSelect.container.js b/packages/components/src/MultiSelect/MultiSelect.container.js index c056988fa0a..037ce843f58 100644 --- a/packages/components/src/MultiSelect/MultiSelect.container.js +++ b/packages/components/src/MultiSelect/MultiSelect.container.js @@ -15,7 +15,7 @@ import Dropdown from './Dropdown.container'; import { ItemOption } from './ItemOption.component'; import { ItemView } from './ItemView.component'; -import theme from './MultiSelect.module.scss'; +import theme from './MultiSelect.module.css'; function initSelectedMap(selected) { return selected.reduce((acc, current) => { diff --git a/packages/components/src/MultiSelect/MultiSelect.module.css b/packages/components/src/MultiSelect/MultiSelect.module.css new file mode 100644 index 00000000000..aa448403404 --- /dev/null +++ b/packages/components/src/MultiSelect/MultiSelect.module.css @@ -0,0 +1,28 @@ +/* stylelint-disable color-hex-case */ +.container { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + position: relative; +} +.container :global(.tc-action-button-positionned) { + width: 100%; +} +.container :global(.tc-list-list) { + padding: 0; +} + +.clearall:global(.btn-link.btn-icon-only) { + position: absolute; + right: 25px; + top: 7px; + padding: 0; + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} + +.caret:global(.tc-svg-icon) { + position: absolute; + color: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); + top: 10px; + right: 0; + width: 30px; + height: 10px; +} diff --git a/packages/components/src/MultiSelect/MultiSelect.module.scss b/packages/components/src/MultiSelect/MultiSelect.module.scss deleted file mode 100644 index a3e37e5dc8b..00000000000 --- a/packages/components/src/MultiSelect/MultiSelect.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// MultiSelect styles -.container { - color: tokens.$coral-color-neutral-text; - position: relative; - - // this is the overlaytrigger span - :global(.tc-action-button-positionned) { - width: 100%; - } - - :global(.tc-list-list) { - padding: 0; - } -} - -.clearall:global(.btn-link.btn-icon-only) { - position: absolute; - right: 25px; - top: 7px; - padding: 0; - color: tokens.$coral-color-danger-text; -} - -.caret { - // add this selector to force override of width defined in Icon - &:global(.tc-svg-icon) { - position: absolute; - color: tokens.$coral-color-neutral-icon; - top: 10px; - right: 0; - width: $padding-larger; - height: $padding-small; - } -} diff --git a/packages/components/src/Notification/Notification.component.js b/packages/components/src/Notification/Notification.component.js index f2366d98579..a1bc1f21d93 100644 --- a/packages/components/src/Notification/Notification.component.js +++ b/packages/components/src/Notification/Notification.component.js @@ -6,7 +6,7 @@ import classNames from 'classnames'; import { withTranslation } from 'react-i18next'; import { Action } from '../Actions'; -import theme from './Notification.module.scss'; +import theme from './Notification.module.css'; import I18N_DOMAIN_COMPONENTS from '../constants'; import getDefaultT from '../translate'; diff --git a/packages/components/src/Notification/Notification.module.css b/packages/components/src/Notification/Notification.module.css new file mode 100644 index 00000000000..7488e5e5923 --- /dev/null +++ b/packages/components/src/Notification/Notification.module.css @@ -0,0 +1,136 @@ +/* stylelint-disable color-hex-case */ +.tc-notification { + position: relative; + cursor: pointer; + width: 28.125rem; + margin-top: 0; + margin-bottom: 15px; + padding: 15px 15px 20px; + border-radius: 4px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + z-index: 2; + overflow: hidden; +} +.tc-notification-container { + position: absolute; + top: 48px; + right: 0; + padding: var(--coral-spacing-s, 0.75rem) var(--coral-spacing-m, 1rem) 0 + var(--coral-spacing-m, 1rem); + z-index: var(--coral-elevation-layer-overlay, 16); + left: auto; + max-height: calc(100vh - 48px); + overflow-y: auto; +} +.tc-notification-container .tc-notification[pin='true'] .tc-notification-timer-bar { + animation: none; + transform: translateX(100%); +} +.tc-notification-info, +.tc-notification-info .tc-notification-message, +.tc-notification-info .tc-notification-title { + background: var(--coral-color-success-background, hsl(110, 49%, 90%)); + color: var(--coral-color-success-text-strong, hsl(111, 49%, 29%)); +} +.tc-notification-warning, +.tc-notification-warning .tc-notification-message, +.tc-notification-warning .tc-notification-title { + background: var(--coral-color-warning-background, hsl(22, 85%, 92%)); + color: var(--coral-color-warning-text-strong, hsl(22, 86%, 27%)); +} +.tc-notification-error, +.tc-notification-error .tc-notification-message, +.tc-notification-error .tc-notification-title { + background: var(--coral-color-danger-background, hsl(0, 100%, 96%)); + color: var(--coral-color-danger-text-strong, hsl(359, 47%, 44%)); +} +.tc-notification-title { + font-size: 12px; + font-weight: bold; + margin-top: 0; + margin-right: 30px; +} +.tc-notification-close { + font-size: 1rem; + float: right; +} +.tc-notification-close svg { + height: 1rem; + width: 1rem; +} +.tc-notification-action { + background-color: transparent; + border: none; + padding: 0; +} +.tc-notification-message { + margin-right: 30px; + font-size: 12px; + word-break: break-word; +} +.tc-notification-message:last-of-type { + margin-bottom: 0; +} +.tc-notification-message-action { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + padding: 0 10px; +} +.tc-notification-message-action svg { + vertical-align: text-top; +} +.tc-notification-message-action span { + font-weight: bold; + margin-left: 5px; +} +.tc-notification-timer-bar { + border-width: 2px 0 1px; + border-style: solid; + position: absolute; + bottom: 0; + margin: 0 -15px; + animation: timer-bar 4s linear; + width: 100%; +} +.tc-notification:hover > .tc-notification-timer-bar { + animation-play-state: paused; +} + +@keyframes timer-bar { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } +} +@keyframes tc-notification-slide-in { + from { + transform: translateY(-100%); + opacity: 0; + z-index: 1; + } + to { + transform: translateY(0); + opacity: 1; + z-index: 1; + } +} +@keyframes tc-notification-slide-out { + from { + transform: translateY(0); + opacity: 1; + z-index: 1; + } + to { + transform: translateY(-100%); + opacity: 0; + z-index: 1; + } +} +:global(.tc-notification-enter) { + animation: tc-notification-slide-in 0.3s linear; +} + +:global(.tc-notification-exit) { + animation: tc-notification-slide-out 0.3s linear; +} diff --git a/packages/components/src/Notification/Notification.module.scss b/packages/components/src/Notification/Notification.module.scss deleted file mode 100644 index e0e99b0217f..00000000000 --- a/packages/components/src/Notification/Notification.module.scss +++ /dev/null @@ -1,168 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-notification-animation-duration: 0.3s !default; - -$tc-notification-width: 28.125rem !default; -$tc-notification-icon-size: $svg-md-size !default; - -.tc-notification { - position: relative; - cursor: pointer; - width: $tc-notification-width; - margin-top: 0; - margin-bottom: $padding-normal; - padding: $padding-normal $padding-normal $padding-large; - border-radius: $border-radius-base; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); - z-index: 2; - overflow: hidden; - - &-container { - position: absolute; - top: 48px; - right: 0; - padding: tokens.$coral-spacing-s tokens.$coral-spacing-m 0 tokens.$coral-spacing-m; - z-index: $zindex-notification; - left: auto; - max-height: calc(100vh - 48px); - overflow-y: auto; - - .tc-notification[pin='true'] { - .tc-notification-timer-bar { - animation: none; - transform: translateX(100%); - } - } - } - - &-info, - &-info &-message, - &-info &-title { - background: tokens.$coral-color-success-background; - color: tokens.$coral-color-success-text-strong; - } - - &-warning, - &-warning &-message, - &-warning &-title { - background: tokens.$coral-color-warning-background; - color: tokens.$coral-color-warning-text-strong; - } - - &-error, - &-error &-message, - &-error &-title { - background: tokens.$coral-color-danger-background; - color: tokens.$coral-color-danger-text-strong; - } - - &-title { - font-size: $font-size-small; - font-weight: bold; - margin: { - top: 0; - right: $padding-larger; - } - } - - &-close { - font-size: $tc-notification-icon-size; - float: right; - - svg { - height: $tc-notification-icon-size; - width: $tc-notification-icon-size; - } - } - - &-action { - background-color: transparent; - border: none; - padding: 0; - } - - &-message { - margin-right: $padding-larger; - font-size: $font-size-small; - word-break: break-word; - - &:last-of-type { - margin-bottom: 0; - } - - &-action { - color: tokens.$coral-color-accent-text; - padding: 0 $padding-small; - - svg { - vertical-align: text-top; - } - - span { - font-weight: bold; - margin-left: $padding-smaller; - } - } - } - - &-timer-bar { - border-width: 2px 0 1px; - border-style: solid; - position: absolute; - bottom: 0; - margin: 0 (-$padding-normal); - animation: timer-bar 4s linear; - width: 100%; - } - - &:hover > &-timer-bar { - animation-play-state: paused; - } -} - -@keyframes timer-bar { - from { - transform: translateX(0); - } - - to { - transform: translateX(100%); - } -} - -@keyframes tc-notification-slide-in { - from { - transform: translateY(-100%); - opacity: 0; - z-index: 1; - } - - to { - transform: translateY(0); - opacity: 1; - z-index: 1; - } -} - -@keyframes tc-notification-slide-out { - from { - transform: translateY(0); - opacity: 1; - z-index: 1; - } - - to { - transform: translateY(-100%); - opacity: 0; - z-index: 1; - } -} - -:global(.tc-notification-enter) { - animation: tc-notification-slide-in $tc-notification-animation-duration linear; -} - -:global(.tc-notification-exit) { - animation: tc-notification-slide-out $tc-notification-animation-duration linear; -} diff --git a/packages/components/src/ObjectViewer/JSONLike/JSONLike.component.js b/packages/components/src/ObjectViewer/JSONLike/JSONLike.component.js index 7b92c2dc295..98bf10d964d 100644 --- a/packages/components/src/ObjectViewer/JSONLike/JSONLike.component.js +++ b/packages/components/src/ObjectViewer/JSONLike/JSONLike.component.js @@ -7,7 +7,7 @@ import { withTranslation } from 'react-i18next'; import { Action } from '../../Actions'; import TooltipTrigger from '../../TooltipTrigger'; -import theme from './JSONLike.module.scss'; +import theme from './JSONLike.module.css'; import I18N_DOMAIN_COMPONENTS from '../../constants'; import { Gesture } from '@talend/react-a11y'; import getDefaultT from '../../translate'; diff --git a/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.css b/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.css new file mode 100644 index 00000000000..6c75f2d0aaa --- /dev/null +++ b/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.css @@ -0,0 +1,129 @@ +.container { + display: block; + font-size: 0.875rem; +} +.container > ul { + padding: 0; +} +.container li { + list-style-type: none; +} +.container svg { + margin: 0 0 0 1px; +} +.container button { + background: transparent; + border: none; + padding: 0; + text-align: left; +} +.container .root-label-overflow { + white-space: nowrap; + overflow: hidden; + max-width: 25%; + text-overflow: ellipsis; +} +.container .list-item { + display: flex; + flex-direction: column; + flex-wrap: wrap; + max-width: 100%; +} +.container .list-item:focus { + outline: none; +} +.container .list-item:focus > .line { + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.container .list-item[aria-selected='true'] > .line { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); +} +.container .list-item .line { + display: flex; +} +.container .list-item .line.full-width { + width: 100%; +} +.container .list-item .line .toggle { + min-height: auto; + line-height: unset; +} +.container .list-item .line .toggle > svg { + width: 0.5625rem; + height: 0.5625rem; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.container .list-item .line .line-main { + max-width: 100%; + display: flex; + align-items: center; + flex: 1; +} +.container .list-item .line .line-main:focus .value { + white-space: normal; + word-break: break-all; + overflow: visible; + vertical-align: top; +} +.container .list-item .line .line-main.shrink-value { + overflow: hidden; +} +.container .list-item .complex-item { + flex: 1 1 auto; + border-left: solid 1px var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + margin-left: var(--coral-spacing-xxs, 0.25rem); + max-width: 100%; +} +.container .list-item .key { + padding-left: var(--coral-spacing-xxs, 0.25rem); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.container .list-item .value { + color: var(--coral-color-accent-text-strong, hsl(204, 96%, 18%)); + margin-left: var(--coral-spacing-xxs, 0.25rem); + white-space: nowrap; + text-overflow: ellipsis; +} +.container .list-item .value.wrap-string { + white-space: normal; + word-break: break-all; +} +.container .list-item .value.shrink-value { + overflow: hidden; +} +.container .list-item .type { + font-family: 'Inconsolata'; + font-size: 0.75rem; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + opacity: 0.75; + display: inline; + margin-right: var(--coral-spacing-xs, 0.5rem); + margin-left: var(--coral-spacing-xxs, 0.25rem); + vertical-align: text-bottom; +} +.container .list-item .badge { + top: -0.0625rem; + margin-left: var(--coral-spacing-xs, 0.5rem); + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + font-size: 0.625rem; + padding: calc(var(--coral-spacing-xxs, 0.25rem) / 2) var(--coral-spacing-xxs, 0.25rem); + display: inline-table; +} + +.chevron svg { + border: 1px solid var(--coral-color-accent-border, hsl(204, 95%, 31%)); + padding: 3px; + border-radius: 10px; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} + +.chevron-filled svg { + border: 1px solid var(--coral-color-accent-border, hsl(204, 95%, 31%)); + padding: 3px; + border-radius: 10px; + color: var(--coral-color-accent-text-strong, hsl(204, 96%, 18%)); + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); +} diff --git a/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss b/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss deleted file mode 100644 index f6831ab549a..00000000000 --- a/packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss +++ /dev/null @@ -1,161 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -@mixin chevron($color) { - border: 1px solid tokens.$coral-color-accent-border; - padding: 3px; - border-radius: 10px; - color: $color; -} - -.container { - display: block; - font-size: 0.875rem; - - > ul { - padding: 0; - } - - li { - list-style-type: none; - } - - svg { - margin: 0 0 0 1px; // this is du to the left ul border that takes 1px - } - - button { - background: transparent; - border: none; - padding: 0; - text-align: left; - } - - .root-label-overflow { - white-space: nowrap; - overflow: hidden; - max-width: 25%; - text-overflow: ellipsis; - } - - .list-item { - display: flex; - flex-direction: column; - flex-wrap: wrap; - max-width: 100%; - - &:focus { - outline: none; - - > .line { - background: tokens.$coral-color-neutral-background-medium; - color: tokens.$coral-color-accent-text; - } - } - - &[aria-selected='true'] > .line { - background-color: tokens.$coral-color-accent-background; - color: tokens.$coral-color-accent-text-active; - } - - .line { - display: flex; - - &.full-width { - width: 100%; - } - - .toggle { - min-height: auto; - line-height: unset; - - > svg { - width: 0.5625rem; - height: 0.5625rem; - color: tokens.$coral-color-accent-text; - } - } - - .line-main { - max-width: 100%; - display: flex; - align-items: center; - flex: 1; - - &:focus { - .value { - white-space: normal; - word-break: break-all; - overflow: visible; - vertical-align: top; - } - } - - &.shrink-value { - overflow: hidden; - } - } - } - - .complex-item { - flex: 1 1 auto; - border-left: solid 1px tokens.$coral-color-neutral-border-weak; - margin-left: tokens.$coral-spacing-xxs; - max-width: 100%; - } - - .key { - padding-left: tokens.$coral-spacing-xxs; - color: tokens.$coral-color-neutral-text-weak; - } - - .value { - color: tokens.$coral-color-accent-text-strong; - margin-left: tokens.$coral-spacing-xxs; - white-space: nowrap; - text-overflow: ellipsis; - - &.wrap-string { - white-space: normal; - word-break: break-all; - } - - &.shrink-value { - overflow: hidden; - } - } - - .type { - font-family: 'Inconsolata'; - font-size: 0.75rem; - color: tokens.$coral-color-neutral-text-weak; - opacity: 0.75; - display: inline; - margin-right: tokens.$coral-spacing-xs; - margin-left: tokens.$coral-spacing-xxs; - vertical-align: text-bottom; - } - - .badge { - top: -0.0625rem; - margin-left: tokens.$coral-spacing-xs; - background-color: tokens.$coral-color-accent-background; - color: tokens.$coral-color-accent-text; - font-size: 0.625rem; - padding: calc(tokens.$coral-spacing-xxs / 2) tokens.$coral-spacing-xxs; - display: inline-table; - } - } -} - -.chevron { - svg { - @include chevron(tokens.$coral-color-accent-text); - } -} - -.chevron-filled { - svg { - @include chevron(tokens.$coral-color-accent-text-strong); - background-color: tokens.$coral-color-accent-background; - } -} diff --git a/packages/components/src/ObjectViewer/List/List.component.js b/packages/components/src/ObjectViewer/List/List.component.js index 6345f7c46e7..b55d0c38bed 100644 --- a/packages/components/src/ObjectViewer/List/List.component.js +++ b/packages/components/src/ObjectViewer/List/List.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import JSONLike from '../JSONLike'; -import theme from './List.module.scss'; +import theme from './List.module.css'; function List({ data, ...props }) { if (!Array.isArray(data) && !Array.isArray(data.dataset)) { diff --git a/packages/components/src/ObjectViewer/List/List.module.css b/packages/components/src/ObjectViewer/List/List.module.css new file mode 100644 index 00000000000..1010ec619d2 --- /dev/null +++ b/packages/components/src/ObjectViewer/List/List.module.css @@ -0,0 +1,5 @@ +.container > li { + padding-top: var(--coral-spacing-xxs, 0.25rem); + padding-bottom: var(--coral-spacing-xxs, 0.25rem); + border-bottom: 1px solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} diff --git a/packages/components/src/ObjectViewer/List/List.module.scss b/packages/components/src/ObjectViewer/List/List.module.scss deleted file mode 100644 index e5f6a355e04..00000000000 --- a/packages/components/src/ObjectViewer/List/List.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -// List styles -.container { - > li { - padding-top: tokens.$coral-spacing-xxs; - padding-bottom: tokens.$coral-spacing-xxs; - border-bottom: 1px solid tokens.$coral-color-neutral-border; - } -} diff --git a/packages/components/src/ObjectViewer/Table/Table.component.js b/packages/components/src/ObjectViewer/Table/Table.component.js index 6223859fff9..0b2770a0390 100644 --- a/packages/components/src/ObjectViewer/Table/Table.component.js +++ b/packages/components/src/ObjectViewer/Table/Table.component.js @@ -4,7 +4,7 @@ import union from 'lodash/union'; import toFlat from '../toflat'; import JSONLike from '../JSONLike'; -import theme from './Table.module.scss'; +import theme from './Table.module.css'; /** * @param {Object} data diff --git a/packages/components/src/ObjectViewer/Table/Table.module.css b/packages/components/src/ObjectViewer/Table/Table.module.css new file mode 100644 index 00000000000..31186415f9f --- /dev/null +++ b/packages/components/src/ObjectViewer/Table/Table.module.css @@ -0,0 +1,27 @@ +/* stylelint-disable scss/selector-no-redundant-nesting-selector */ +.table .nativevalue { + font: var(--coral-data-m, 400 0.875rem/140% 'Inconsolata'); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: 0; +} +.table:global(.table) > thead > tr { + background-color: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); + color: var(--coral-color-accent-text-weak, white); +} +.table:global(.table) > thead > tr > th { + font: var(--coral-heading-s, 600 0.875rem/140% 'Source Sans Pro'); +} +.table:global(.table) > thead > tr > td { + padding: var(--coral-spacing-xxs, 0.25rem); +} +.table:global(.table) > tbody > tr > td { + padding: var(--coral-spacing-xxs, 0.25rem); +} +.table:global(.table) > tbody > tr > td :global(.btn) { + text-transform: none; +} +.table :global(.btn-link) { + font-size: 12px; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + padding: 0; +} diff --git a/packages/components/src/ObjectViewer/Table/Table.module.scss b/packages/components/src/ObjectViewer/Table/Table.module.scss deleted file mode 100644 index f3ec84bc806..00000000000 --- a/packages/components/src/ObjectViewer/Table/Table.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -/* stylelint-disable scss/selector-no-redundant-nesting-selector */ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.table { - .nativevalue { - font: tokens.$coral-data-m; - color: tokens.$coral-color-neutral-text; - padding: 0; - } - - &:global(.table) > thead > tr { - background-color: tokens.$coral-color-accent-background-strong; - color: tokens.$coral-color-accent-text-weak; - - & > th { - font: tokens.$coral-heading-s; - } - - & > td { - padding: tokens.$coral-spacing-xxs; - } - } - - &:global(.table) > tbody > tr > td { - padding: tokens.$coral-spacing-xxs; - - :global(.btn) { - text-transform: none; - } - } - - :global(.btn-link) { - font-size: 12px; - color: tokens.$coral-color-neutral-text-weak; - padding: 0; - } -} diff --git a/packages/components/src/OverlayTrigger/OverlayTrigger.component.js b/packages/components/src/OverlayTrigger/OverlayTrigger.component.js index 59712fb5806..471da5705bf 100644 --- a/packages/components/src/OverlayTrigger/OverlayTrigger.component.js +++ b/packages/components/src/OverlayTrigger/OverlayTrigger.component.js @@ -6,7 +6,7 @@ import BaseOverlayTrigger from './OverlayTrigger.forked'; import Inject from '../Inject'; import { getOverlayElement, getContainerElement, getAdaptedPlacement } from './overlay'; -import theme from './OverlayTrigger.module.scss'; +import theme from './OverlayTrigger.module.css'; export const overlayPropTypes = { ...BaseOverlayTrigger.propTypes, diff --git a/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss b/packages/components/src/OverlayTrigger/OverlayTrigger.module.css similarity index 57% rename from packages/components/src/OverlayTrigger/OverlayTrigger.module.scss rename to packages/components/src/OverlayTrigger/OverlayTrigger.module.css index 45b30916510..b23a3076600 100644 --- a/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss +++ b/packages/components/src/OverlayTrigger/OverlayTrigger.module.css @@ -1,5 +1,4 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - +/* stylelint-disable color-hex-case */ .tc-action-button-positionned { position: relative; display: inline-block; diff --git a/packages/components/src/PieChart/PieChart.module.css b/packages/components/src/PieChart/PieChart.module.css new file mode 100644 index 00000000000..07ab97f55dc --- /dev/null +++ b/packages/components/src/PieChart/PieChart.module.css @@ -0,0 +1,137 @@ +/* stylelint-disable color-hex-case */ +@keyframes object-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +@keyframes skeleton-blink { + 0%, + 100% { + opacity: 0.1; + } + 50% { + opacity: 0.25; + } +} +.tc-pie-chart-loading { + display: inline-flex; + align-items: center; + min-height: 25px; +} +.tc-pie-chart-loading.tc-pie-chart-loading-no-label { + min-height: 20px; +} +.tc-pie-chart-loading-circle { + margin-left: 4px; + margin-right: 5px; +} + +.tc-pie-chart-button:hover .tc-pie-chart-color-rio-grande { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + stroke: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-pie-chart-button:hover .tc-pie-chart-color-jaffa { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + stroke: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-pie-chart-button:hover .tc-pie-chart-color-chestnut-rose { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + stroke: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-pie-chart-button:hover .tc-pie-chart-color-lightning-yellow { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + stroke: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-pie-chart-button:hover .tc-pie-chart-color-dove-gray { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + stroke: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-pie-chart-button:hover .tc-pie-chart-color-silver-chalice { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + stroke: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-pie-chart-button:hover .tc-pie-chart-color-alto { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + stroke: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-pie-chart-button:hover, +.tc-pie-chart-button:active, +.tc-pie-chart-button:focus { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + text-decoration: none; +} +.tc-pie-chart-button.active { + background-color: var(--coral-color-accent-background-strong-active, hsl(205, 95%, 15%)); + border-color: var(--coral-color-accent-background-strong-active, hsl(205, 95%, 15%)); + color: var(--coral-color-accent-text-weak, white); +} +.tc-pie-chart-button.active:hover, +.tc-pie-chart-button.active:active, +.tc-pie-chart-button.active:focus { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + border-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} + +.tc-pie-chart-icon { + font-size: 18px; + display: inline-flex; + align-items: center; + background-color: transparent; + border: none; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + box-shadow: none; + line-height: unset; + padding: 0; +} +.tc-pie-chart-icon .tc-pie-chart-color-rio-grande { + color: var(--coral-color-charts-success, hsl(148, 87%, 40%)); + stroke: var(--coral-color-charts-success, hsl(148, 87%, 40%)); + fill: var(--coral-color-charts-success, hsl(148, 87%, 40%)); +} +.tc-pie-chart-icon .tc-pie-chart-color-jaffa { + color: var(--coral-color-charts-warning, hsl(32, 100%, 56%)); + stroke: var(--coral-color-charts-warning, hsl(32, 100%, 56%)); + fill: var(--coral-color-charts-warning, hsl(32, 100%, 56%)); +} +.tc-pie-chart-icon .tc-pie-chart-color-chestnut-rose { + color: var(--coral-color-charts-danger, hsl(4, 89%, 49%)); + stroke: var(--coral-color-charts-danger, hsl(4, 89%, 49%)); + fill: var(--coral-color-charts-danger, hsl(4, 89%, 49%)); +} +.tc-pie-chart-icon .tc-pie-chart-color-lightning-yellow { + color: var(--coral-color-charts-color-00, hsl(48, 100%, 50%)); + stroke: var(--coral-color-charts-color-00, hsl(48, 100%, 50%)); + fill: var(--coral-color-charts-color-00, hsl(48, 100%, 50%)); +} +.tc-pie-chart-icon .tc-pie-chart-color-dove-gray { + color: var(--coral-color-charts-neutral-strong, hsl(0, 0%, 12%)); + stroke: var(--coral-color-charts-neutral-strong, hsl(0, 0%, 12%)); + fill: var(--coral-color-charts-neutral-strong, hsl(0, 0%, 12%)); +} +.tc-pie-chart-icon .tc-pie-chart-color-silver-chalice { + color: var(--coral-color-charts-neutral, hsl(0, 0%, 22%)); + stroke: var(--coral-color-charts-neutral, hsl(0, 0%, 22%)); + fill: var(--coral-color-charts-neutral, hsl(0, 0%, 22%)); +} +.tc-pie-chart-icon .tc-pie-chart-color-alto { + color: var(--coral-color-charts-neutral-weak, hsl(0, 0%, 83%)); + stroke: var(--coral-color-charts-neutral-weak, hsl(0, 0%, 83%)); + fill: var(--coral-color-charts-neutral-weak, hsl(0, 0%, 83%)); +} +.tc-pie-chart-icon .tc-pie-chart-icon-graph { + margin-right: 5px; + height: inherit; + width: inherit; +} diff --git a/packages/components/src/PieChart/PieChart.module.scss b/packages/components/src/PieChart/PieChart.module.scss deleted file mode 100644 index 58c25c8476b..00000000000 --- a/packages/components/src/PieChart/PieChart.module.scss +++ /dev/null @@ -1,93 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; -@import '~@talend/bootstrap-theme/src/theme/animation'; - -$tc-pie-chart-font-size: $font-size-large !default; -$tc-pie-chart-loading-min-height-no-label: 20px !default; -$tc-pie-chart-loading-min-height: 25px !default; -$tc-pie-chart-skeleton-label-width: 40px !default; -$tc-pie-chart-skeleton-label-height: 14px !default; -$tc-pie-chart-loading-margin-left: 4px !default; -$tc-pie-chart-hover-color: tokens.$coral-color-accent-text !default; - -$tc-pie-chart-colors: (rio-grande tokens.$coral-color-charts-success, jaffa tokens.$coral-color-charts-warning, chestnut-rose tokens.$coral-color-charts-danger, lightning-yellow tokens.$coral-color-charts-color-00, dove-gray tokens.$coral-color-charts-neutral-strong, silver-chalice tokens.$coral-color-charts-neutral, alto tokens.$coral-color-charts-neutral-weak) !default; - -@mixin apply-color($color) { - color: $color; - stroke: $color; - fill: $color; -} - -.tc-pie-chart-loading { - display: inline-flex; - align-items: center; - min-height: $tc-pie-chart-loading-min-height; - - &.tc-pie-chart-loading-no-label { - min-height: $tc-pie-chart-loading-min-height-no-label; - } - - &-circle { - // adjust to be like loaded component - margin-left: $tc-pie-chart-loading-margin-left; - margin-right: $padding-smaller; - } -} - -// PieChart styles -.tc-pie-chart-button { - &:hover { - @each $type in $tc-pie-chart-colors { - .tc-pie-chart-color-#{nth($type, 1)} { - @include apply-color($tc-pie-chart-hover-color); - } - } - } - - &:hover, - &:active, - &:focus { - color: tokens.$coral-color-accent-text; - text-decoration: none; - } - - &.active { - background-color: tokens.$coral-color-accent-background-strong-active; - border-color: tokens.$coral-color-accent-background-strong-active; - color: tokens.$coral-color-accent-text-weak; - - &:hover, - &:active, - &:focus { - background-color: tokens.$coral-color-accent-background; - border-color: tokens.$coral-color-accent-background; - color: tokens.$coral-color-accent-text; - } - } -} - -.tc-pie-chart-icon { - font-size: $tc-pie-chart-font-size; - display: inline-flex; - align-items: center; - - background-color: transparent; - border: none; - color: tokens.$coral-color-neutral-text-weak; - - box-shadow: none; - line-height: unset; - padding: 0; - - @each $type in $tc-pie-chart-colors { - .tc-pie-chart-color-#{nth($type, 1)} { - @include apply-color(#{nth($type, 2)}); - } - } - - & &-graph { - margin-right: $padding-smaller; - height: inherit; - width: inherit; - } -} diff --git a/packages/components/src/PieChart/PieChartButton.component.js b/packages/components/src/PieChart/PieChartButton.component.js index 2e95396ed6d..4e0bdc85be0 100644 --- a/packages/components/src/PieChart/PieChartButton.component.js +++ b/packages/components/src/PieChart/PieChartButton.component.js @@ -5,7 +5,7 @@ import OverlayTrigger from '../OverlayTrigger'; import { getTheme } from '../theme'; import PieChartIcon, { pieChartIconPropTypes } from './PieChartIcon.component'; -import pieChartCssModule from './PieChart.module.scss'; +import pieChartCssModule from './PieChart.module.css'; const theme = getTheme(pieChartCssModule); diff --git a/packages/components/src/PieChart/PieChartIcon.component.js b/packages/components/src/PieChart/PieChartIcon.component.js index 050755d214d..6a42f1c3593 100644 --- a/packages/components/src/PieChart/PieChartIcon.component.js +++ b/packages/components/src/PieChart/PieChartIcon.component.js @@ -5,7 +5,7 @@ import omit from 'lodash/omit'; import I18N_DOMAIN_COMPONENTS from '../constants'; import getDefaultT from '../translate'; import Skeleton from '../Skeleton'; -import pieChartCssModule from './PieChart.module.scss'; +import pieChartCssModule from './PieChart.module.css'; import { getTheme } from '../theme'; const theme = getTheme(pieChartCssModule); diff --git a/packages/components/src/Progress/Progress.component.js b/packages/components/src/Progress/Progress.component.js index bb4e0327ce4..93c30f2998a 100644 --- a/packages/components/src/Progress/Progress.component.js +++ b/packages/components/src/Progress/Progress.component.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import TooltipTrigger from '../TooltipTrigger'; -import theme from './Progress.module.scss'; +import theme from './Progress.module.css'; function normalize(percent) { if (percent > 100) { diff --git a/packages/components/src/Progress/Progress.module.css b/packages/components/src/Progress/Progress.module.css new file mode 100644 index 00000000000..09472d4a18a --- /dev/null +++ b/packages/components/src/Progress/Progress.module.css @@ -0,0 +1,53 @@ +/* stylelint-disable color-hex-case */ +@keyframes infinite-progression-keyframes { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(300%); + } +} +.progress { + height: 5px; + width: 100%; +} +.progress.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; +} +.progress.hidden { + display: none; +} +.progress .progress-percent { + background: var(--coral-color-success-background-strong, hsl(111, 49%, 34%)); + height: 100%; + transition: width 200ms ease; + overflow: hidden; +} +.progress .progress-percent .infinite-indicator { + height: 100%; + background: var(--coral-color-neutral-background, white); + position: relative; + width: 33.3333333333%; + animation-fill-mode: forwards; + animation: infinite-progression-keyframes 2s infinite; + animation-timing-function: linear; +} + +:global(.modal-header) .progress { + flex-grow: 0; + flex-shrink: 0; + position: relative; + margin-top: -1px; + margin-bottom: 0; + border-radius: 0; + box-shadow: none; + height: 5px; + background-color: transparent; +} +:global(.modal-header) .progress :global(.progress-bar) { + background-color: var(--coral-color-success-background-strong, hsl(111, 49%, 34%)); + box-shadow: none; +} diff --git a/packages/components/src/Progress/Progress.module.scss b/packages/components/src/Progress/Progress.module.scss deleted file mode 100644 index d4e72d94a94..00000000000 --- a/packages/components/src/Progress/Progress.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$infinite-indicator-ratio: 3; -$infinite-indicator-width: calc(100% / $infinite-indicator-ratio); - -@keyframes infinite-progression-keyframes { - 0% { - transform: translateX(-100%); - } - - 100% { - transform: translateX(100% * $infinite-indicator-ratio); - } -} - -.progress { - height: 5px; - width: 100%; - - &.fixed { - position: fixed; - top: 0; - left: 0; - right: 0; - } - - &.hidden { - display: none; - } - - .progress-percent { - background: tokens.$coral-color-success-background-strong; - height: 100%; - transition: width 200ms ease; - overflow: hidden; - - .infinite-indicator { - height: 100%; - background: tokens.$coral-color-neutral-background; - position: relative; - width: $infinite-indicator-width; - animation-fill-mode: forwards; - animation: infinite-progression-keyframes 2s infinite; - animation-timing-function: linear; - } - } -} - -:global(.modal-header) .progress { - flex-grow: 0; - flex-shrink: 0; - position: relative; - margin-top: -1px; - margin-bottom: 0; - border-radius: 0; - box-shadow: none; - height: 5px; - background-color: transparent; - - :global(.progress-bar) { - background-color: tokens.$coral-color-success-background-strong; - box-shadow: none; - } -} diff --git a/packages/components/src/RadarChart/RadarChart.component.js b/packages/components/src/RadarChart/RadarChart.component.js index b5b2ccec11e..3bf3974e2d8 100644 --- a/packages/components/src/RadarChart/RadarChart.component.js +++ b/packages/components/src/RadarChart/RadarChart.component.js @@ -12,7 +12,7 @@ import tokens from '@talend/design-tokens'; import { getTheme } from '../theme'; -import radarChartCssModule from './RadarChart.module.scss'; +import radarChartCssModule from './RadarChart.module.css'; const theme = getTheme(radarChartCssModule); diff --git a/packages/components/src/RadarChart/RadarChart.module.css b/packages/components/src/RadarChart/RadarChart.module.css new file mode 100644 index 00000000000..cda3b823846 --- /dev/null +++ b/packages/components/src/RadarChart/RadarChart.module.css @@ -0,0 +1,13 @@ +/* stylelint-disable color-hex-case */ +.tc-radar-chart :global .recharts-polar-grid-concentric-polygon:not(:last-child) { + display: none; +} +.tc-radar-chart :global .recharts-polar-angle-axis-ticks { + transform: scale(1.06); + transform-origin: center; +} + +.tc-radar-chart-label--selected { + fill: var(--coral-color-charts-default-strong, hsl(204, 92%, 29%)); + font-weight: 600; +} diff --git a/packages/components/src/RadarChart/RadarChart.module.scss b/packages/components/src/RadarChart/RadarChart.module.scss deleted file mode 100644 index ab215fb55de..00000000000 --- a/packages/components/src/RadarChart/RadarChart.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-radar-chart { - :global { - .recharts-polar-grid-concentric-polygon:not(:last-child) { - display: none; - } - - .recharts-polar-angle-axis-ticks { - transform: scale(1.06); - transform-origin: center; - } - } -} - -.tc-radar-chart-label--selected { - fill: tokens.$coral-color-charts-default-strong; - font-weight: 600; -} diff --git a/packages/components/src/ResourceList/Resource/Resource.component.js b/packages/components/src/ResourceList/Resource/Resource.component.js index bd4dbe0558e..e2eb0872146 100644 --- a/packages/components/src/ResourceList/Resource/Resource.component.js +++ b/packages/components/src/ResourceList/Resource/Resource.component.js @@ -11,7 +11,7 @@ import Icon from '../../Icon'; import getDefaultT from '../../translate'; import { getRowData } from '../../VirtualizedList/utils/gridrow'; -import theme from './Resource.module.scss'; +import theme from './Resource.module.css'; const FLAGS = { CERTIFIED: 'talend-badge', diff --git a/packages/components/src/ResourceList/Resource/Resource.module.css b/packages/components/src/ResourceList/Resource/Resource.module.css new file mode 100644 index 00000000000..94102a17fb3 --- /dev/null +++ b/packages/components/src/ResourceList/Resource/Resource.module.css @@ -0,0 +1,120 @@ +/* stylelint-disable color-hex-case */ +.resource-item { + padding-left: 15px; + padding-right: 15px; + cursor: pointer; + display: flex; +} +.resource-item.center { + align-items: center; +} +.resource-item .icon { + margin-right: 10px; +} +.resource-item > * { + max-width: 100%; + overflow: hidden; +} +.resource-item .data-container { + flex: 1; + min-width: 0; +} +.resource-item .data-container > .title, +.resource-item .data-container > .author, +.resource-item .data-container > .subtitle { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + display: block; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + margin: 0; +} +.resource-item .data-container > .title { + font-weight: 600; +} +.resource-item .flags-container { + margin-right: 15px; + opacity: 0; +} +.resource-item .flags-container .flag { + opacity: 0; + margin-left: 10px; +} +.resource-item .flags-container .flag.visible { + opacity: 1; +} +.resource-item .flags-container .flag[name='talend-star'] { + color: var(--coral-color-warning-text, hsl(22, 93%, 41%)); +} +.resource-item .flags-container .flag[name='talend-badge'] { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.resource-item:hover :global(.tc-svg-icon), +.resource-item:focus :global(.tc-svg-icon), +.resource-item:global(.selected) :global(.tc-svg-icon), +.resource-item:active :global(.tc-svg-icon) { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.resource-item:hover .flags-container, +.resource-item:focus .flags-container, +.resource-item:global(.selected) .flags-container, +.resource-item:active .flags-container { + opacity: 1; +} +.resource-item:hover { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.resource-item:hover .data-container > .title, +.resource-item:hover .data-container > .author, +.resource-item:hover .data-container > .subtitle { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.resource-item:global(.selected) { + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); +} +.resource-item:global(.selected) .data-container > .title, +.resource-item:global(.selected) .data-container > .author, +.resource-item:global(.selected) .data-container > .subtitle { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.resource-item :global h3 { + margin-top: 10px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.resource-item :global dl { + padding-left: 10px; + margin-bottom: 0; +} +.resource-item :global dl > div { + margin-top: 5px; +} +.resource-item :global dl div { + display: flex; +} +.resource-item :global dl dt, +.resource-item :global dl dd { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.resource-item :global dl dt { + display: flex; + align-items: center; + font-weight: initial; + flex-shrink: 0; +} +.resource-item :global dl dt.icon-only { + margin-right: -5px; +} +.resource-item :global dl dt .tc-svg-icon { + margin: 0 5px; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.resource-item :global dl dd { + padding: 0 5px; + flex-grow: 1; + min-width: 0; +} diff --git a/packages/components/src/ResourceList/Resource/Resource.module.scss b/packages/components/src/ResourceList/Resource/Resource.module.scss deleted file mode 100644 index f3586e7b36f..00000000000 --- a/packages/components/src/ResourceList/Resource/Resource.module.scss +++ /dev/null @@ -1,154 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.resource-item { - padding-left: $padding-normal; - padding-right: $padding-normal; - cursor: pointer; - display: flex; - - &.center { - align-items: center; - } - - .icon { - margin-right: $padding-small; - } - - > * { - max-width: 100%; - overflow: hidden; - } - - .data-container { - flex: 1; - min-width: 0; - - > .title, - > .author, - > .subtitle { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 14px; - display: block; - color: tokens.$coral-color-neutral-text; - margin: 0; - } - - > .title { - font-weight: 600; - } - } - - .flags-container { - margin-right: $padding-normal; - opacity: 0; - - .flag { - opacity: 0; - margin-left: $padding-small; - - &.visible { - opacity: 1; - } - - &[name='talend-star'] { - color: tokens.$coral-color-warning-text; - } - - &[name='talend-badge'] { - color: tokens.$coral-color-accent-text; - } - } - } - - &:hover, - &:focus, - &:global(.selected), - &:active { - :global(.tc-svg-icon) { - color: tokens.$coral-color-accent-text; - } - - .flags-container { - opacity: 1; - } - } - - &:hover { - background-color: tokens.$coral-color-neutral-background-medium; - - .data-container { - > .title, - > .author, - > .subtitle { - color: tokens.$coral-color-accent-text; - } - } - } - - &:global(.selected) { - background: tokens.$coral-color-accent-background; - - .data-container { - > .title, - > .author, - > .subtitle { - color: tokens.$coral-color-neutral-text; - } - } - } - - :global { - h3 { - margin-top: $padding-small; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - dl { - padding-left: $padding-small; - margin-bottom: 0; - - > div { - margin-top: $padding-smaller; - } - - div { - display: flex; - } - - dt, - dd { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - dt { - display: flex; - align-items: center; - font-weight: initial; - flex-shrink: 0; - - // stylelint-disable-next-line - &.icon-only { - margin-right: -1 * $padding-smaller; - } - - .tc-svg-icon { - margin: 0 $padding-smaller; - color: tokens.$coral-color-accent-text; - } - } - - dd { - padding: 0 $padding-smaller; - flex-grow: 1; - min-width: 0; - } - } - } -} diff --git a/packages/components/src/ResourceList/ResourceList.component.js b/packages/components/src/ResourceList/ResourceList.component.js index 930320dde5a..34f6b61e3f7 100644 --- a/packages/components/src/ResourceList/ResourceList.component.js +++ b/packages/components/src/ResourceList/ResourceList.component.js @@ -11,7 +11,7 @@ import Toolbar from './Toolbar'; import VirtualizedList from '../VirtualizedList'; import getRowSelectionRenderer from '../VirtualizedList/RowSelection'; -import cssModule from './ResourceList.module.scss'; +import cssModule from './ResourceList.module.css'; import Icon from '../Icon'; const theme = getTheme(cssModule); diff --git a/packages/components/src/ResourceList/ResourceList.module.css b/packages/components/src/ResourceList/ResourceList.module.css new file mode 100644 index 00000000000..caeced1f7c4 --- /dev/null +++ b/packages/components/src/ResourceList/ResourceList.module.css @@ -0,0 +1,31 @@ +/* stylelint-disable color-hex-case */ +.tc-resource-list :global(.tc-list-list) { + padding: 0; + padding-left: 0; + padding-right: 0; +} +.tc-resource-list :global(.tc-resource-list-toolbar) form { + margin-top: 10px; +} +.tc-resource-list-items { + height: calc(15.625rem - 1.25rem); + margin-top: 1.25rem; +} +.tc-resource-list-items.filtered :global(.flags-container) { + opacity: 1; +} +.tc-resource-list--no-results { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +.tc-resource-list--no-results-text { + display: inline-flex; + align-items: center; + font-style: italic; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-resource-list--no-results-icon { + margin: 0 10px; +} diff --git a/packages/components/src/ResourceList/ResourceList.module.scss b/packages/components/src/ResourceList/ResourceList.module.scss deleted file mode 100644 index b66353b6c48..00000000000 --- a/packages/components/src/ResourceList/ResourceList.module.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-resource-list-margin-top: 1.25rem !default; -$tc-resource-list-height: 15.625rem !default; - -.tc-resource-list { - :global(.tc-list-list) { - padding: 0; - padding-left: 0; - padding-right: 0; - } - - :global(.tc-resource-list-toolbar) form { - margin-top: $padding-small; - } - - &-items { - height: calc(#{$tc-resource-list-height} - #{$tc-resource-list-margin-top}); - margin-top: $tc-resource-list-margin-top; - - &.filtered { - :global(.flags-container) { - opacity: 1; - } - } - } - - &--no-results { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &-text { - display: inline-flex; - align-items: center; - font-style: italic; - color: tokens.$coral-color-neutral-text; - } - - &-icon { - margin: 0 $padding-small; - } - } -} diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.component.js b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.component.js index ecbb03cb10e..f47ca52aeeb 100644 --- a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.component.js +++ b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.component.js @@ -7,7 +7,7 @@ import useKey from 'react-use/lib/useKey'; import { Action } from '../../../Actions'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; -import theme from './NameFilter.module.scss'; +import theme from './NameFilter.module.css'; function NameFilter({ label, value, onChange }) { const { t } = useTranslation(I18N_DOMAIN_COMPONENTS); diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.css b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.css new file mode 100644 index 00000000000..b08f59b023f --- /dev/null +++ b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.css @@ -0,0 +1,27 @@ +/* stylelint-disable color-hex-case */ +.tc-resource-picker-name-filter { + flex: 1; + position: relative; +} +.tc-resource-picker-name-filter input + .remove { + position: absolute; + top: 0; + right: 0; +} +.tc-resource-picker-name-filter input:not(:invalid) + .remove { + display: inline-block; +} + +.remove { + display: none; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: 5px 0; + line-height: 1.25rem; + height: 100%; +} +.remove :global(.tc-svg-icon) { + height: 0.5rem; + width: 0.5rem; + margin: 0; + vertical-align: baseline; +} diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss deleted file mode 100644 index b625bf7048c..00000000000 --- a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-resource-picker-name-filter { - flex: 1; - position: relative; - - input + .remove { - position: absolute; - top: 0; - right: 0; - } - - input:not(:invalid) + .remove { - display: inline-block; - } -} - -.remove { - display: none; - color: tokens.$coral-color-neutral-text; - padding: $padding-smaller 0; - line-height: 1.25rem; - height: 100%; - - :global(.tc-svg-icon) { - height: $svg-xs-size; - width: $svg-xs-size; - margin: 0; - vertical-align: baseline; - } -} diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.component.js b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.component.js index bf69bdc0acc..655d422e5c8 100644 --- a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.component.js +++ b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.component.js @@ -6,7 +6,7 @@ import Icon from '../../../../Icon'; import OverlayTrigger from '../../../../OverlayTrigger'; import getPropsFrom from '../../../../utils/getPropsFrom'; -import theme from './OrderChooser.module.scss'; +import theme from './OrderChooser.module.css'; function OrderChooser({ icon, asc, label, tooltipPlacement, onClick, ...rest }) { return ( diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.css b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.css new file mode 100644 index 00000000000..6f2d61da7b5 --- /dev/null +++ b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.css @@ -0,0 +1,18 @@ +/* stylelint-disable color-hex-case */ +.tc-resource-picker-order-chooser { + display: flex; + padding: 0; +} +.tc-resource-picker-order-chooser:hover, +.tc-resource-picker-order-chooser:focus, +.tc-resource-picker-order-chooser:active { + color: inherit; + box-shadow: none; +} +.tc-resource-picker-order-chooser .tc-resource-picker-order-indicator { + width: 0.375rem; + height: 0.375rem; +} +.tc-resource-picker-order-chooser .tc-resource-picker-order-indicator.asc { + transform: rotate(180deg); +} diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss deleted file mode 100644 index 03229572145..00000000000 --- a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -$tc-resource-picker-order-chooser-icon-size: 0.375rem !default; - -.tc-resource-picker-order-chooser { - display: flex; - padding: 0; - - &:hover, - &:focus, - &:active { - color: inherit; - box-shadow: none; - } - - .tc-resource-picker-order-indicator { - width: $tc-resource-picker-order-chooser-icon-size; - height: $tc-resource-picker-order-chooser-icon-size; - - &.asc { - transform: rotate(180deg); - } - } -} diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.component.js b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.component.js index 0dd392c023d..67a641de0e9 100644 --- a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.component.js +++ b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.component.js @@ -5,7 +5,7 @@ import OrderChooser from './OrderChooser'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; import getDefaultT from '../../../translate'; -import theme from './SortOptions.module.scss'; +import theme from './SortOptions.module.css'; export const TYPES = { NAME: 'name', diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.css b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.css new file mode 100644 index 00000000000..83182f8fd28 --- /dev/null +++ b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.css @@ -0,0 +1,8 @@ +/* stylelint-disable color-hex-case */ +.tc-resource-picker-sort-options { + display: flex; + align-items: center; +} +.tc-resource-picker-sort-options .option-label { + margin-right: 10px; +} diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.scss b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.scss deleted file mode 100644 index 40f01f8620f..00000000000 --- a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-resource-picker-sort-options { - display: flex; - align-items: center; - - .option-label { - margin-right: $padding-small; - } -} diff --git a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.component.js b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.component.js index d58fbf7087d..1386c4177c2 100644 --- a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.component.js +++ b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.component.js @@ -5,7 +5,7 @@ import ActionIconToggle from '../../../Actions/ActionIconToggle'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; import getDefaultT from '../../../translate'; -import theme from './StateFilter.module.scss'; +import theme from './StateFilter.module.css'; export const TYPES = { SELECTION: 'selection', diff --git a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.css b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.css new file mode 100644 index 00000000000..906bd8756b5 --- /dev/null +++ b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.css @@ -0,0 +1,49 @@ +/* stylelint-disable color-hex-case */ +.tc-resource-picker-state-filters { + margin-right: 15px; + display: flex; + align-items: center; +} +.tc-resource-picker-state-filters .option-label { + margin-right: 10px; +} +.tc-resource-picker-state-filters :global(.tc-icon-toggle) { + border: none; + box-shadow: none; +} +.tc-resource-picker-state-filters :global(.tc-icon-toggle) > :global(.tc-icon) { + margin: 0; +} +.tc-resource-picker-state-filters :global(.tc-icon-toggle):hover:not([disabled]), +.tc-resource-picker-state-filters :global(.tc-icon-toggle):focus, +.tc-resource-picker-state-filters :global(.tc-icon-toggle):active { + border: none; +} +.tc-resource-picker-state-filters :global(.tc-icon-toggle) { + margin-left: 10px; + display: inline-flex; +} +.tc-resource-picker-state-filters + :global(.tc-icon-toggle):global(.active).tc-resource-picker-selection-filter + > svg, +.tc-resource-picker-state-filters + :global(.tc-icon-toggle):hover.tc-resource-picker-selection-filter + > svg { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-resource-picker-state-filters + :global(.tc-icon-toggle):global(.active).tc-resource-picker-favorite-filter + > svg, +.tc-resource-picker-state-filters + :global(.tc-icon-toggle):hover.tc-resource-picker-favorite-filter + > svg { + color: var(--coral-color-warning-text, hsl(22, 93%, 41%)); +} +.tc-resource-picker-state-filters + :global(.tc-icon-toggle):global(.active).tc-resource-picker-certified-filter + > svg, +.tc-resource-picker-state-filters + :global(.tc-icon-toggle):hover.tc-resource-picker-certified-filter + > svg { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} diff --git a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss deleted file mode 100644 index ceb93792303..00000000000 --- a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-resource-picker-toolbar-favorite-color: tokens.$coral-color-warning-text !default; -$tc-resource-picker-toolbar-certified-color: tokens.$coral-color-accent-text !default; - -.tc-resource-picker-state-filters { - margin-right: $padding-normal; - display: flex; - align-items: center; - - .option-label { - margin-right: $padding-small; - } - - // ActionIconToggle style reset : - :global(.tc-icon-toggle) { - border: none; - box-shadow: none; - - > :global(.tc-icon) { - margin: 0; - } - - &:hover:not([disabled]), - &:focus, - &:active { - border: none; - } - } - - :global(.tc-icon-toggle) { - margin-left: $padding-small; - display: inline-flex; - - &:global(.active), - &:hover { - &.tc-resource-picker-selection-filter > svg { - color: tokens.$coral-color-accent-text; - } - - &.tc-resource-picker-favorite-filter > svg { - color: $tc-resource-picker-toolbar-favorite-color; - } - - &.tc-resource-picker-certified-filter > svg { - color: $tc-resource-picker-toolbar-certified-color; - } - } - } -} diff --git a/packages/components/src/ResourceList/Toolbar/Toolbar.component.js b/packages/components/src/ResourceList/Toolbar/Toolbar.component.js index 271d6516ffb..23e73e48037 100644 --- a/packages/components/src/ResourceList/Toolbar/Toolbar.component.js +++ b/packages/components/src/ResourceList/Toolbar/Toolbar.component.js @@ -6,7 +6,7 @@ import SortOptions from './SortOptions'; import StateFilter from './StateFilter'; import { getTheme } from '../../theme'; -import cssModule from './Toolbar.module.scss'; +import cssModule from './Toolbar.module.css'; const theme = getTheme(cssModule); diff --git a/packages/components/src/ResourceList/Toolbar/Toolbar.module.css b/packages/components/src/ResourceList/Toolbar/Toolbar.module.css new file mode 100644 index 00000000000..b0e16a9b265 --- /dev/null +++ b/packages/components/src/ResourceList/Toolbar/Toolbar.module.css @@ -0,0 +1,11 @@ +/* stylelint-disable color-hex-case */ +.tc-resource-list-toolbar { + display: flex; + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-resource-list-toolbar > * { + margin: 0 15px; +} +.tc-resource-list-toolbar-filter { + width: 100%; +} diff --git a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss b/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss deleted file mode 100644 index 658d090eb30..00000000000 --- a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-resource-list-toolbar { - display: flex; - background: tokens.$coral-color-neutral-background-medium; - - > * { - margin: 0 $padding-normal; - } - - &-filter { - width: 100%; - } -} diff --git a/packages/components/src/ResourcePicker/ResourcePicker.component.js b/packages/components/src/ResourcePicker/ResourcePicker.component.js index ccaa21d0d55..80a76d261d2 100644 --- a/packages/components/src/ResourcePicker/ResourcePicker.component.js +++ b/packages/components/src/ResourcePicker/ResourcePicker.component.js @@ -3,7 +3,7 @@ import { getTheme } from '../theme'; import ResourceList from '../ResourceList'; import { SORT_OPTIONS, ORDERS, STATE_FILTERS } from '../ResourceList/Toolbar'; -import cssModule from './ResourcePicker.module.scss'; +import cssModule from './ResourcePicker.module.css'; import ResourceListPropTypes from '../ResourceList/ResourceList.propTypes'; const theme = getTheme(cssModule); diff --git a/packages/components/src/ResourcePicker/ResourcePicker.module.css b/packages/components/src/ResourcePicker/ResourcePicker.module.css new file mode 100644 index 00000000000..6344738fc1b --- /dev/null +++ b/packages/components/src/ResourcePicker/ResourcePicker.module.css @@ -0,0 +1,17 @@ +/* stylelint-disable color-hex-case */ +.tc-resource-picker :global .tc-resource-list-items { + height: 15.625rem; + margin-top: 0; +} +.tc-resource-picker :global .tc-resource-list-toolbar { + height: 2.1875rem; +} +.tc-resource-picker :global .tc-resource-list-toolbar form { + margin-top: 0; +} +.tc-resource-picker :global .tc-resource-list-toolbar > * { + margin-left: 0; +} +.tc-resource-picker :global .resource-item { + border-bottom: 0.0625rem solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} diff --git a/packages/components/src/ResourcePicker/ResourcePicker.module.scss b/packages/components/src/ResourcePicker/ResourcePicker.module.scss deleted file mode 100644 index b4f6dae0b09..00000000000 --- a/packages/components/src/ResourcePicker/ResourcePicker.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-resource-picker-toolbar-height: 2.1875rem !default; -$tc-resource-picker-height: 15.625rem !default; - -.tc-resource-picker { - :global { - .tc-resource-list { - &-items { - height: $tc-resource-picker-height; - margin-top: 0; - } - } - - .tc-resource-list-toolbar { - height: $tc-resource-picker-toolbar-height; - - form { - margin-top: 0; - } - - > * { - margin-left: 0; - } - } - - .resource-item { - border-bottom: 0.0625rem solid tokens.$coral-color-neutral-border; - } - } -} diff --git a/packages/components/src/Rich/Error/RichError.component.js b/packages/components/src/Rich/Error/RichError.component.js index 4b94d4bb7f0..cffb4143c75 100644 --- a/packages/components/src/Rich/Error/RichError.component.js +++ b/packages/components/src/Rich/Error/RichError.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import Icon from '../../Icon'; -import theme from './RichError.module.scss'; +import theme from './RichError.module.css'; export default function RichError(props) { return ( diff --git a/packages/components/src/Rich/Error/RichError.module.css b/packages/components/src/Rich/Error/RichError.module.css new file mode 100644 index 00000000000..7f83e2d0ac6 --- /dev/null +++ b/packages/components/src/Rich/Error/RichError.module.css @@ -0,0 +1,19 @@ +/* stylelint-disable color-hex-case */ +.wrapper { + display: flex; + align-items: center; +} + +.icon { + width: 2.25rem; + height: 2.25rem; +} + +.content { + margin-left: 15px; +} +.content h4 { + margin: 0; + font-size: 12px; + font-weight: 400; +} diff --git a/packages/components/src/Rich/Error/RichError.module.scss b/packages/components/src/Rich/Error/RichError.module.scss deleted file mode 100644 index 1963298fbbf..00000000000 --- a/packages/components/src/Rich/Error/RichError.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -$tc-rich-error-icon-size: 2.25rem !default; - -.wrapper { - display: flex; - align-items: center; -} - -.icon { - width: $tc-rich-error-icon-size; - height: $tc-rich-error-icon-size; -} - -.content { - margin-left: $padding-normal; - - h4 { - margin: 0; - font-size: 12px; - font-weight: 400; - } -} diff --git a/packages/components/src/Rich/HeaderTitle/HeaderTitle.component.js b/packages/components/src/Rich/HeaderTitle/HeaderTitle.component.js index 9b94640ffe0..3d383f5987b 100644 --- a/packages/components/src/Rich/HeaderTitle/HeaderTitle.component.js +++ b/packages/components/src/Rich/HeaderTitle/HeaderTitle.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; -import theme from './HeaderTitle.module.scss'; +import theme from './HeaderTitle.module.css'; export default function HeaderTitle(props) { return ( diff --git a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.css b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.css new file mode 100644 index 00000000000..5db10fe55e8 --- /dev/null +++ b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.css @@ -0,0 +1,17 @@ +/* stylelint-disable color-hex-case */ +.container { + display: flex; + align-items: center; + width: 100%; +} + +.title { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + flex-grow: 1; + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 1rem; + font-weight: 700; +} diff --git a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss deleted file mode 100644 index 6ac5b578273..00000000000 --- a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-header-title-font-size: 1rem !default; -$tc-header-title-font-weight: 700 !default; - -.container { - display: flex; - align-items: center; - width: 100%; -} - -.title { - color: tokens.$coral-color-neutral-text; - flex-grow: 1; - margin: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: $tc-header-title-font-size; - font-weight: $tc-header-title-font-weight; -} diff --git a/packages/components/src/Rich/Layout/RichLayout.component.js b/packages/components/src/Rich/Layout/RichLayout.component.js index 13ab9dc31ee..9d0affd8799 100644 --- a/packages/components/src/Rich/Layout/RichLayout.component.js +++ b/packages/components/src/Rich/Layout/RichLayout.component.js @@ -2,7 +2,7 @@ import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import Inject from '../../Inject'; -import theme from './RichLayout.module.scss'; +import theme from './RichLayout.module.css'; const TooltipPropTypes = { id: PropTypes.string.isRequired, diff --git a/packages/components/src/Rich/Layout/RichLayout.module.css b/packages/components/src/Rich/Layout/RichLayout.module.css new file mode 100644 index 00000000000..bfa71e525fa --- /dev/null +++ b/packages/components/src/Rich/Layout/RichLayout.module.css @@ -0,0 +1,81 @@ +/* stylelint-disable color-hex-case */ +:global(.popover) { + padding: 0; + border: 0.0625rem solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + border-radius: 4px; + background-color: var(--coral-color-neutral-background, white); + box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2); + max-width: 25rem; +} + +:global(.popover-content) { + padding: 0; +} + +.body, +.footer:not(:empty), +.header:not(:empty) { + display: flex; +} + +.footer:not(:empty), +.header:not(:empty) { + padding: 0 20px; + height: 4.375rem; + min-width: 25rem; +} + +.footer:not(:empty) { + overflow: hidden; + border-top: 0.0625rem solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + justify-content: space-between; + align-items: center; +} +.footer:not(:empty) > :global(.tc-actionbar-container) { + background-color: var(--coral-color-neutral-background, white); + padding: 0; +} + +.header:not(:empty) { + border-bottom: 0.0625rem solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.header:not(:empty) :global(.btn) { + margin-top: 15px; + margin-bottom: 15px; +} + +.header:not(:empty) + .body { + margin-top: 0; + margin-bottom: 0; +} + +.body { + display: flex; + flex-direction: row; + margin: 20px; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} + +.content:not(:empty) { + width: 100%; + display: flex; + flex-direction: row; + min-height: 6.25rem; + max-height: 18.75rem; +} +.content:not(:empty) > p { + max-height: inherit; + min-height: inherit; + overflow: auto; + margin: 0; +} +.content:not(:empty) > :global(.tc-circular-progress) { + align-self: center; + margin-left: auto; + margin-right: auto; +} + +.rich-layout :global(.tc-resource-list) { + margin: 0 -20px; + flex-grow: 1; +} diff --git a/packages/components/src/Rich/Layout/RichLayout.module.scss b/packages/components/src/Rich/Layout/RichLayout.module.scss deleted file mode 100644 index 6ab8c8c564b..00000000000 --- a/packages/components/src/Rich/Layout/RichLayout.module.scss +++ /dev/null @@ -1,101 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-popover-border-width: 0.0625rem !default; -$tc-popover-border-color: tokens.$coral-color-neutral-border-weak !default; -$tc-popover-box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2) !default; -$tc-popover-body-min-height: 6.25rem !default; -$tc-popover-body-max-height: 18.75rem !default; -$tc-popover-max-width: 25rem !default; -$tc-popover-header-border-color: tokens.$coral-color-neutral-border-weak !default; -$tc-popover-header-footer-height: 4.375rem !default; - -:global(.popover) { - padding: 0; - border: $tc-popover-border-width solid $tc-popover-border-color; - border-radius: $border-radius-base; - background-color: tokens.$coral-color-neutral-background; - box-shadow: $tc-popover-box-shadow; - max-width: $tc-popover-max-width; -} - -:global(.popover-content) { - padding: 0; -} - -.body, -.footer:not(:empty), -.header:not(:empty) { - display: flex; -} - -.footer:not(:empty), -.header:not(:empty) { - padding: 0 $padding-large; - height: $tc-popover-header-footer-height; - min-width: $tc-popover-max-width; -} - -.footer:not(:empty) { - overflow: hidden; - border-top: $tc-popover-border-width solid $tc-popover-header-border-color; - justify-content: space-between; - align-items: center; - - > :global(.tc-actionbar-container) { - background-color: tokens.$coral-color-neutral-background; - padding: 0; - } -} - -.header:not(:empty) { - border-bottom: $tc-popover-border-width solid $tc-popover-header-border-color; - - :global(.btn) { - margin-top: $padding-normal; - margin-bottom: $padding-normal; - } -} - -.header:not(:empty) + .body { - margin-top: 0; - margin-bottom: 0; -} - -.body { - display: flex; - flex-direction: row; - margin: $padding-large; - color: tokens.$coral-color-neutral-text; -} - -.content:not(:empty) { - // wrapper used to fix the ie11 bug with flexbox when (align-items: center & min-height) - // https://stackoverflow.com/a/47180276 - width: 100%; - display: flex; - flex-direction: row; - min-height: $tc-popover-body-min-height; - max-height: $tc-popover-body-max-height; - - > p { - // specify max-height min-height to IE11 - max-height: inherit; - min-height: inherit; - overflow: auto; - margin: 0; - } - - > :global(.tc-circular-progress) { - align-self: center; - margin-left: auto; - margin-right: auto; - } -} - -.rich-layout { - :global(.tc-resource-list) { - margin: 0 (-1 * $padding-large); - flex-grow: 1; - } -} diff --git a/packages/components/src/SidePanel/SidePanel.component.js b/packages/components/src/SidePanel/SidePanel.component.js index 212cc19dca5..56bede3c7f9 100644 --- a/packages/components/src/SidePanel/SidePanel.component.js +++ b/packages/components/src/SidePanel/SidePanel.component.js @@ -12,7 +12,7 @@ import I18N_DOMAIN_COMPONENTS from '../constants'; import Inject from '../Inject'; import '../translate'; -import theme from './SidePanel.module.scss'; +import theme from './SidePanel.module.css'; const DOCKED_MIN_WIDTH = '3.75rem'; const LARGE_DOCKED_MIN_WIDTH = '4.375rem'; diff --git a/packages/components/src/SidePanel/SidePanel.module.css b/packages/components/src/SidePanel/SidePanel.module.css new file mode 100644 index 00000000000..c4be0a81430 --- /dev/null +++ b/packages/components/src/SidePanel/SidePanel.module.css @@ -0,0 +1,175 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable declaration-no-important */ +/* stylelint-disable color-hex-case */ +.tc-side-panel { + display: flex; + flex-direction: column; + font-weight: 500; + background: var( + --coral-color-branding-background, + linear-gradient(133deg, hsl(210, 62%, 26%) 0%, hsl(254, 47%, 23%) 100%) + ); + overflow: hidden; + position: relative; + border-right: 1px solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.tc-side-panel::before { + left: 0.625rem; + bottom: -3.125rem; +} +.tc-side-panel.animate { + transition: 0.2s width ease-out; +} +.tc-side-panel .action-list-container { + flex: 1; + height: calc(100vh - 7.5rem); + overflow-y: auto; + overflow-x: hidden; +} +.tc-side-panel .action-list-container::-webkit-scrollbar { + background-color: var( + --coral-color-branding-navigation, + linear-gradient(133deg, hsl(210, 62%, 26%) 0%, hsl(254, 47%, 23%) 100%) + ); + width: var(--coral-sizing-minimal, 0.75rem); +} +.tc-side-panel .action-list-container :global .tc-side-panel-list { + background: transparent; +} +.tc-side-panel .action-list-container :global .tc-action-list-item { + width: calc(100% - 1.25rem); + background: none !important; + box-shadow: none !important; +} +.tc-side-panel .action-list-container :global .tc-action-list-item .btn.btn-link { + display: flex; + align-items: center; + justify-content: flex-start; + color: var(--coral-color-brand-text, white); + font-size: 1rem; + height: 1.875rem; + margin: 5px 10px; + padding: 5px; + border-radius: 4px; +} +.tc-side-panel .action-list-container :global .tc-action-list-item .btn.btn-link > span { + margin-left: 10px; +} +.tc-side-panel .action-list-container :global .tc-action-list-item .btn.btn-link:hover { + background: var(--coral-color-brand-background-weak-hover, hsla(0, 0%, 100%, 0.1)); + color: var(--coral-color-brand-text-hover, white); +} +.tc-side-panel .action-list-container :global .tc-action-list-item.active .btn.btn-link { + background: var(--coral-color-brand-background-selected, white); + color: var(--coral-color-brand-text-selected, hsl(204, 96%, 18%)); +} +.tc-side-panel .action-list-container :global .tc-action-list-item .tc-svg-icon { + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); +} +.tc-side-panel .action-list-container :global .tc-action-list-item :global(svg) { + margin-left: 5px; +} +.tc-side-panel .toggle-btn { + height: 70px; + vertical-align: center; + padding-top: 0; + padding-bottom: 0; + padding-left: 10px; + text-align: left; + flex: 0 0 4.375rem; +} +.tc-side-panel .toggle-btn :global .btn.btn-link { + color: var(--coral-color-brand-text, white); + line-height: 1; + height: 70px; + padding: 0 10px; + display: inline-block; + width: auto; + opacity: 0.75; + margin: 0 auto; +} +.tc-side-panel .toggle-btn :global .btn.btn-link > span { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: none; +} +.tc-side-panel .toggle-btn :global .btn.btn-link .tc-svg-icon { + width: 0.75rem; + height: 0.75rem; + transition: 0.2s transform ease-out; +} +.tc-side-panel.docked :global .btn.btn-link { + padding: 15px; +} +.tc-side-panel.docked :global .btn.btn-link > span { + opacity: 0; +} +.tc-side-panel.docked :global .tc-action-list { + width: 3.75rem; + min-width: auto; +} +.tc-side-panel.docked .toggle-btn :global .btn.btn-link { + padding: 10px; +} +.tc-side-panel.docked .toggle-btn :global .btn.btn-link .tc-svg-icon { + transform: rotate(-180deg); +} +.tc-side-panel.large .toggle-btn { + padding-left: 0; +} +.tc-side-panel.large .toggle-btn :global(.btn.btn-link) { + padding: 10px 25px; +} +.tc-side-panel.large :global .tc-action-list { + padding: 5px 0; +} +.tc-side-panel.large :global .tc-action-list-item .btn.btn-link { + padding: 10px; +} +.tc-side-panel.large :global .tc-action-list-item .btn.btn-link .tc-svg-icon + span { + margin-left: 25px; +} +.tc-side-panel.large.docked :global .tc-action-list { + width: 4.375rem; + min-width: auto; +} +.tc-side-panel.large.docked .toggle-btn { + height: 70px; + vertical-align: center; + padding: 0; +} +.tc-side-panel.large.docked .toggle-btn .btn.btn-link { + height: 70px; + padding: 0; +} +.tc-side-panel.reverse[role='navigation'] { + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-side-panel.reverse[role='navigation']::before { + content: none; +} +.tc-side-panel.reverse[role='navigation'] :global .tc-action-list-item .btn.btn-link:hover { + background: var(--coral-color-brand-background-selected, white); + color: var(--coral-color-brand-text-selected, hsl(204, 96%, 18%)); +} +.tc-side-panel.reverse[role='navigation'] :global .btn.btn-link, +.tc-side-panel.reverse[role='navigation'] :global .tc-svg-icon { + color: var(--coral-color-brand-text-inverted, hsl(0, 0%, 38%)); +} +.tc-side-panel.reverse[role='navigation'] :global .btn.btn-link:hover, +.tc-side-panel.reverse[role='navigation'] :global .tc-svg-icon:hover { + color: var(--coral-color-brand-text-inverted-hover, hsl(0, 0%, 13%)); +} +.tc-side-panel.reverse[role='navigation'] .toggle-btn { + background-color: transparent; +} +.tc-side-panel.reverse[role='navigation'] .toggle-btn :global .btn.btn-link, +.tc-side-panel.reverse[role='navigation'] .toggle-btn :global .tc-svg-icon { + color: var(--coral-color-brand-icon-inverted, hsl(0, 0%, 38%)); +} diff --git a/packages/components/src/SidePanel/SidePanel.module.scss b/packages/components/src/SidePanel/SidePanel.module.scss deleted file mode 100644 index b5baa81d28f..00000000000 --- a/packages/components/src/SidePanel/SidePanel.module.scss +++ /dev/null @@ -1,249 +0,0 @@ -/* stylelint-disable color-hex-case */ -/* stylelint-disable declaration-no-important */ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -//// -/// Side panel -/// @group Custom widgets -//// - -$list-item-height: 1.875rem !default; -$toggle-height: 70px; -$toggle-button-opacity: 0.75; -$tc-side-panel-large-padding: 25px !default; -$tc-side-panel-icons-size: tokens.$coral-sizing-xxxs; -$toggle-button-padding: $padding-small; - -$docked-width: 3.75rem; -$large-docked-width: 4.375rem; - -.tc-side-panel { - display: flex; - flex-direction: column; - font-weight: 500; - background: tokens.$coral-color-branding-background; - overflow: hidden; - position: relative; - border-right: 1px solid tokens.$coral-color-neutral-border-weak; - - &::before { - left: 0.625rem; - bottom: -3.125rem; - } - - &.animate { - transition: 0.2s width ease-out; - } - - .action-list-container { - flex: 1; - height: calc(100vh - 7.5rem); // specific to Safari - overflow-y: auto; - overflow-x: hidden; - - &::-webkit-scrollbar { - background-color: tokens.$coral-color-branding-navigation; - width: tokens.$coral-sizing-minimal; - } - - :global .tc-side-panel-list { - background: transparent; - } - - :global .tc-action-list-item { - width: calc(100% - 1.25rem); - background: none !important; - box-shadow: none !important; - - .btn.btn-link { - display: flex; - align-items: center; - justify-content: flex-start; - color: tokens.$coral-color-brand-text; - font-size: 1rem; - height: $list-item-height; - margin: $padding-smaller $padding-small; - padding: $padding-smaller; - border-radius: $border-radius-base; - - > span { - margin-left: $padding-small; - } - - &:hover { - background: tokens.$coral-color-brand-background-weak-hover; - color: tokens.$coral-color-brand-text-hover; - } - } - - &.active .btn.btn-link { - background: tokens.$coral-color-brand-background-selected; - color: tokens.$coral-color-brand-text-selected; - } - - .tc-svg-icon { - width: $tc-side-panel-icons-size; - height: $tc-side-panel-icons-size; - } - - :global(svg) { - margin-left: $padding-smaller; - } - } - } - - .toggle-btn { - height: $toggle-height; - vertical-align: center; - padding-top: 0; - padding-bottom: 0; - padding-left: $toggle-button-padding; - text-align: left; - flex: 0 0 4.375rem; - - :global { - .btn.btn-link { - color: tokens.$coral-color-brand-text; - line-height: 1; - height: $toggle-height; - padding: 0 $padding-small; - display: inline-block; - width: auto; - opacity: $toggle-button-opacity; - margin: 0 auto; - - > span { - // .sr-only - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: none; - } - - .tc-svg-icon { - width: $svg-sm-size; - height: $svg-sm-size; - transition: 0.2s transform ease-out; - } - } - } - } - - &.docked { - :global { - .btn.btn-link { - padding: $padding-normal; - - > span { - opacity: 0; - } - } - - .tc-action-list { - width: $docked-width; - min-width: auto; - } - } - - .toggle-btn { - :global { - .btn.btn-link { - padding: $padding-small; - - .tc-svg-icon { - transform: rotate(-180deg); - } - } - } - } - } - - &.large { - .toggle-btn { - padding-left: 0; - - :global(.btn.btn-link) { - padding: $padding-small $tc-side-panel-large-padding; - } - } - - :global { - .tc-action-list { - padding: $padding-smaller 0; - } - - .tc-action-list-item { - .btn.btn-link { - padding: $padding-small; // $tc-side-panel-large-padding; - - .tc-svg-icon + span { - margin-left: $tc-side-panel-large-padding; - } - } - } - } - - &.docked { - :global { - .tc-action-list { - width: $large-docked-width; - min-width: auto; - } - } - - .toggle-btn { - height: $toggle-height; - vertical-align: center; - padding: 0; - - .btn.btn-link { - height: $toggle-height; - padding: 0; - } - } - } - } - - &.reverse[role='navigation'] { - background: tokens.$coral-color-neutral-background-medium; - - &::before { - content: none; - } - - :global .tc-action-list-item { - .btn.btn-link { - &:hover { - background: tokens.$coral-color-brand-background-selected; - color: tokens.$coral-color-brand-text-selected; - } - } - } - - :global { - .btn.btn-link, - .tc-svg-icon { - color: tokens.$coral-color-brand-text-inverted; - &:hover { - color: tokens.$coral-color-brand-text-inverted-hover; - } - } - } - - .toggle-btn { - background-color: transparent; - - :global { - .btn.btn-link, - .tc-svg-icon { - color: tokens.$coral-color-brand-icon-inverted; - } - } - } - } -} diff --git a/packages/components/src/Skeleton/Skeleton.component.tsx b/packages/components/src/Skeleton/Skeleton.component.tsx index 39f8a27c90c..6b587a35d9e 100644 --- a/packages/components/src/Skeleton/Skeleton.component.tsx +++ b/packages/components/src/Skeleton/Skeleton.component.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next'; import Icon from '../Icon'; -import skeletonCssModule from './Skeleton.module.scss'; +import skeletonCssModule from './Skeleton.module.css'; import { getTheme } from '../theme'; import I18N_DOMAIN_COMPONENTS from '../constants'; import { TFunction } from 'i18next'; diff --git a/packages/components/src/Skeleton/Skeleton.module.css b/packages/components/src/Skeleton/Skeleton.module.css new file mode 100644 index 00000000000..5cc1a8b8aea --- /dev/null +++ b/packages/components/src/Skeleton/Skeleton.module.css @@ -0,0 +1,72 @@ +/* stylelint-disable color-hex-case */ +@keyframes object-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +@keyframes skeleton-blink { + 0%, + 100% { + opacity: 0.1; + } + 50% { + opacity: 0.25; + } +} +:global(.tc-skeleton-heartbeat) { + animation: skeleton-blink 1.5s ease infinite; +} + +.tc-skeleton { + background-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + display: inline-block; +} +.tc-skeleton-icon { + background-color: transparent; + height: 24px; + width: 24px; +} +.tc-skeleton-circle { + border-radius: 50%; +} +.tc-skeleton-circle-small { + width: 16px; + height: 16px; +} +.tc-skeleton-circle-medium { + width: 20px; + height: 20px; +} +.tc-skeleton-circle-large { + width: 24px; + height: 24px; +} +.tc-skeleton-circle-xlarge { + width: 66px; + height: 66px; +} +.tc-skeleton-text { + border-radius: 4px; + height: 14px; +} +.tc-skeleton-text-small { + width: 30px; +} +.tc-skeleton-text-medium { + width: 60px; +} +.tc-skeleton-text-large { + width: 130px; +} +.tc-skeleton-text-xlarge { + width: 160px; +} +.tc-skeleton-button { + border-radius: 4px; + height: 35px; + width: 80px; +} diff --git a/packages/components/src/Skeleton/Skeleton.module.scss b/packages/components/src/Skeleton/Skeleton.module.scss deleted file mode 100644 index 09a5f365739..00000000000 --- a/packages/components/src/Skeleton/Skeleton.module.scss +++ /dev/null @@ -1,84 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; -@import '~@talend/bootstrap-theme/src/theme/animation'; - -$tc-skeleton-border-radius: 4px !default; -$tc-skeleton-icon-size: 24px !default; -$tc-skeleton-circle-small-size: 16px !default; -$tc-skeleton-circle-medium-size: 20px !default; -$tc-skeleton-circle-large-size: 24px !default; -$tc-skeleton-circle-xlarge-size: 66px !default; -$tc-skeleton-text-height: 14px !default; -$tc-skeleton-text-width-small: 30px !default; -$tc-skeleton-text-width-medium: 60px !default; -$tc-skeleton-text-width-large: 130px !default; -$tc-skeleton-text-width-extra-large: 160px !default; -$tc-skeleton-button-height: 35px !default; -$tc-skeleton-button-width: 80px !default; -$tc-skeleton-color: tokens.$coral-color-neutral-text !default; - -:global(.tc-skeleton-heartbeat) { - @include heartbeat(skeleton-blink); -} - -.tc-skeleton { - background-color: $tc-skeleton-color; - display: inline-block; - - &-icon { - background-color: transparent; - height: $tc-skeleton-icon-size; - width: $tc-skeleton-icon-size; - } - - &-circle { - border-radius: 50%; - - &-small { - width: $tc-skeleton-circle-small-size; - height: $tc-skeleton-circle-small-size; - } - - &-medium { - width: $tc-skeleton-circle-medium-size; - height: $tc-skeleton-circle-medium-size; - } - - &-large { - width: $tc-skeleton-circle-large-size; - height: $tc-skeleton-circle-large-size; - } - - &-xlarge { - width: $tc-skeleton-circle-xlarge-size; - height: $tc-skeleton-circle-xlarge-size; - } - } - - &-text { - border-radius: $tc-skeleton-border-radius; - height: $tc-skeleton-text-height; - - &-small { - width: $tc-skeleton-text-width-small; - } - - &-medium { - width: $tc-skeleton-text-width-medium; - } - - &-large { - width: $tc-skeleton-text-width-large; - } - - &-xlarge { - width: $tc-skeleton-text-width-extra-large; - } - } - - &-button { - border-radius: $tc-skeleton-border-radius; - height: $tc-skeleton-button-height; - width: $tc-skeleton-button-width; - } -} diff --git a/packages/components/src/Slider/Slider.component.tsx b/packages/components/src/Slider/Slider.component.tsx index a36bb2c756e..184bce2c6fc 100644 --- a/packages/components/src/Slider/Slider.component.tsx +++ b/packages/components/src/Slider/Slider.component.tsx @@ -11,7 +11,7 @@ import { ButtonIcon } from '@talend/design-system'; import Icon from '../Icon'; -import theme from './Slider.module.scss'; +import theme from './Slider.module.css'; /** * Options for controlling slider operator display mode diff --git a/packages/components/src/Slider/Slider.module.css b/packages/components/src/Slider/Slider.module.css new file mode 100644 index 00000000000..76d281c516e --- /dev/null +++ b/packages/components/src/Slider/Slider.module.css @@ -0,0 +1,90 @@ +/* stylelint-disable color-hex-case */ +.tc-slider { + padding: 0 calc(24px / 2); +} +.tc-slider :global(.rc-slider-disabled) { + background-color: transparent; + opacity: 0.4; +} +.tc-slider__handler { + position: relative; +} +.tc-slider__value { + position: absolute; + top: -25px; + color: var(--coral-color-accent-text-strong, hsl(204, 96%, 18%)); + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + box-shadow: none; +} +.tc-slider-captions { + display: inline-flex; + justify-content: space-between; + width: 100%; + margin-top: 10px; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font-size: 14px; +} +.tc-slider-captions-element { + height: 24px; + width: 24px; + line-height: 24px; + min-height: 24px; + display: flex; + justify-content: center; +} +.tc-slider-captions-element :global(svg) { + height: 24px; + width: 24px; + margin: 0; + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.tc-slider-captions-element :global(svg).selected { + fill: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); +} +.tc-slider-captions :global(.btn) { + padding: 0; +} +.tc-slider-captions :global(.btn).selected :global(.tc-svg-icon) { + fill: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-slider-rc-slider { + margin-top: 30px; +} +.tc-slider-rc-slider :global(.rc-slider-step), +.tc-slider-rc-slider :global(.rc-slider-rail), +.tc-slider-rc-slider :global(.rc-slider-track) { + height: 7px; +} +.tc-slider-rc-slider :global(.rc-slider-rail) { + background-color: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} +.tc-slider-rc-slider :global(.rc-slider-track) { + background-color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-slider-rc-slider :global(.rc-slider-handle) { + border: 1px solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + box-shadow: 0 1px 2px 0 rgba(117, 132, 149, 0.5); + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + opacity: 1; +} +.tc-slider-rc-slider :global(.rc-slider-handle):hover, +.tc-slider-rc-slider :global(.rc-slider-handle):focus { + background-color: var(--coral-color-neutral-background, white); + box-shadow: 0 3px 4px 0.5px rgba(0, 0, 0, 0.25); +} +.tc-slider-rc-slider--track-greater-than :global .rc-slider-rail, +.tc-slider-rc-slider--track-exclusive :global .rc-slider-rail { + background-color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-slider-rc-slider--track-greater-than :global .rc-slider-track, +.tc-slider-rc-slider--track-exclusive :global .rc-slider-track { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-slider-rc-slider--track-equals :global .rc-slider-rail, +.tc-slider-rc-slider--track-equals :global .rc-slider-track { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-slider-rc-slider--track-equals :global .rc-slider-handle { + box-shadow: 0 1px 2px 0 rgba(117, 132, 149, 0.5); + background-color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} diff --git a/packages/components/src/Slider/Slider.module.scss b/packages/components/src/Slider/Slider.module.scss deleted file mode 100644 index 35826168db1..00000000000 --- a/packages/components/src/Slider/Slider.module.scss +++ /dev/null @@ -1,126 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -@use '@talend/design-tokens/lib/_tokens' as tokens; - -$tc-slider-thumb-shadow: 0 1px 2px 0 rgba(117, 132, 149, 0.5); //$slate-gray; -$tc-slider-thumb-shadow-focused: 0 3px 4px 0.5px rgba(0, 0, 0, 0.25); -$tc-slider-font-size: $font-size-base; -$tc-slider-line-height: 24px; - -.tc-slider { - padding: 0 calc(#{$tc-slider-line-height} / 2); - - :global(.rc-slider-disabled) { - background-color: transparent; - opacity: 0.4; - } - - &__handler { - position: relative; - } - - &__value { - position: absolute; - top: -25px; - color: tokens.$coral-color-accent-text-strong; - font: tokens.$coral-paragraph-m-bold; - box-shadow: none; - } - - &-captions { - display: inline-flex; - justify-content: space-between; - width: 100%; - margin-top: $padding-small; - color: tokens.$coral-color-neutral-text; - font-size: $tc-slider-font-size; - - &-element { - height: $tc-slider-line-height; - width: $tc-slider-line-height; - line-height: $tc-slider-line-height; - min-height: $tc-slider-line-height; - display: flex; - justify-content: center; - - :global(svg) { - height: $tc-slider-line-height; - width: $tc-slider-line-height; - margin: 0; - color: tokens.$coral-color-neutral-icon-weak; - - &.selected { - fill: tokens.$coral-color-accent-icon; - } - } - } - - :global(.btn) { - padding: 0; - - &.selected { - :global(.tc-svg-icon) { - fill: tokens.$coral-color-accent-text; - } - } - } - } - - &-rc-slider { - margin-top: $padding-larger; - - :global(.rc-slider-step), - :global(.rc-slider-rail), - :global(.rc-slider-track) { - height: 7px; - } - - :global(.rc-slider-rail) { - background-color: tokens.$coral-color-neutral-background-strong; - } - - :global(.rc-slider-track) { - background-color: tokens.$coral-color-accent-text; - } - - :global(.rc-slider-handle) { - border: 1px solid tokens.$coral-color-neutral-border; - box-shadow: $tc-slider-thumb-shadow; - background-color: tokens.$coral-color-neutral-background-medium; - opacity: 1; - - &:hover, - &:focus { - background-color: tokens.$coral-color-neutral-background; - box-shadow: $tc-slider-thumb-shadow-focused; - } - } - - &--track-greater-than, - &--track-exclusive { - :global { - .rc-slider-rail { - background-color: tokens.$coral-color-accent-text; - } - - .rc-slider-track { - background-color: tokens.$coral-color-neutral-background-medium; - } - } - } - - &--track-equals { - :global { - .rc-slider-rail, - .rc-slider-track { - background-color: tokens.$coral-color-neutral-background-medium; - } - - .rc-slider-handle { - box-shadow: $tc-slider-thumb-shadow; - background-color: tokens.$coral-color-accent-text; - } - } - } - } -} diff --git a/packages/components/src/Status/Status.component.js b/packages/components/src/Status/Status.component.js index 11ccc41e321..57acf3ddf5f 100644 --- a/packages/components/src/Status/Status.component.js +++ b/packages/components/src/Status/Status.component.js @@ -7,7 +7,7 @@ import Icon from '../Icon'; import Skeleton from '../Skeleton'; import TooltipTrigger from '../TooltipTrigger'; -import css from './Status.module.scss'; +import css from './Status.module.css'; /** * @param {object} props react props diff --git a/packages/components/src/Status/Status.module.css b/packages/components/src/Status/Status.module.css new file mode 100644 index 00000000000..f3d895a8f6f --- /dev/null +++ b/packages/components/src/Status/Status.module.css @@ -0,0 +1,68 @@ +/* stylelint-disable color-hex-case */ +.tc-status { + position: relative; + display: flex; + align-items: center; + height: 100%; +} +.tc-status-icon { + display: flex; +} +.tc-status-icon > svg { + width: 1rem; + height: 1rem; + margin-right: 5px; +} +.tc-status-icon.info { + color: var(--coral-color-info-icon, hsl(204, 88%, 40%)); +} +.tc-status-icon.success { + color: var(--coral-color-success-icon, hsl(111, 53%, 40%)); +} +.tc-status-icon.danger { + color: var(--coral-color-danger-icon, hsl(359, 69%, 53%)); +} +.tc-status-icon.muted { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.tc-status-icon.warning { + color: var(--coral-color-warning-icon, hsl(22, 87%, 47%)); +} +.tc-status-label { + font-weight: 600; +} +.tc-status-label.info { + color: var(--coral-color-info-text, hsl(204, 95%, 31%)); +} +.tc-status-label.success { + color: var(--coral-color-success-text, hsl(111, 49%, 34%)); +} +.tc-status-label.danger { + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.tc-status-label.muted { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.tc-status-label.warning { + color: var(--coral-color-warning-text, hsl(22, 93%, 41%)); +} +.tc-status-actions { + position: absolute; + left: 0; + opacity: 0; +} +.tc-status.action:hover .tc-status-icon, +.tc-status.action:hover .tc-status-label, +.tc-status.action:focus-within .tc-status-icon, +.tc-status.action:focus-within .tc-status-label { + opacity: 0; +} +.tc-status.action:hover .tc-status-actions, +.tc-status.action:focus-within .tc-status-actions { + opacity: 1; +} + +.tc-status-skeleton-item { + margin-right: 10px; + display: flex; +} diff --git a/packages/components/src/Status/Status.module.scss b/packages/components/src/Status/Status.module.scss deleted file mode 100644 index 0b7dc0064e1..00000000000 --- a/packages/components/src/Status/Status.module.scss +++ /dev/null @@ -1,90 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-status-icon-size: $svg-md-size !default; -$tc-status-action-min-size: 23px !default; -$tc-status-space-btn-icon-label: 5px !default; - -.tc-status { - position: relative; - display: flex; - align-items: center; - height: 100%; - - &-icon { - display: flex; - - > svg { - width: $tc-status-icon-size; - height: $tc-status-icon-size; - margin-right: $tc-status-space-btn-icon-label; - } - - &.info { - color: tokens.$coral-color-info-icon; - } - - &.success { - color: tokens.$coral-color-success-icon; - } - - &.danger { - color: tokens.$coral-color-danger-icon; - } - - &.muted { - color: tokens.$coral-color-neutral-text-disabled; - } - - &.warning { - color: tokens.$coral-color-warning-icon; - } - } - - &-label { - font-weight: 600; - - &.info { - color: tokens.$coral-color-info-text; - } - - &.success { - color: tokens.$coral-color-success-text; - } - - &.danger { - color: tokens.$coral-color-danger-text; - } - - &.muted { - color: tokens.$coral-color-neutral-text-disabled; - } - - &.warning { - color: tokens.$coral-color-warning-text; - } - } - - &-actions { - position: absolute; - left: 0; - opacity: 0; - } - - &.action:hover, - &.action:focus-within { - .tc-status-icon, - .tc-status-label { - opacity: 0; - } - - .tc-status-actions { - opacity: 1; - } - } -} - -.tc-status-skeleton-item { - margin-right: $padding-small; - display: flex; -} diff --git a/packages/components/src/Stepper/Stepper.component.js b/packages/components/src/Stepper/Stepper.component.js index bb7842b2b92..5f6c69adbae 100644 --- a/packages/components/src/Stepper/Stepper.component.js +++ b/packages/components/src/Stepper/Stepper.component.js @@ -5,7 +5,7 @@ import { ErrorState, StackVertical, Stepper as CoralStepper } from '@talend/desi import Icon from '../Icon'; import CircularProgress from '../CircularProgress'; import { getTheme } from '../theme'; -import theme from './Stepper.component.module.scss'; +import theme from './Stepper.component.module.css'; import { DEFAULT_TRANSITION_DURATION, StepperTransition } from './StepperTransition.component'; import I18N_DOMAIN_COMPONENTS from '../constants'; diff --git a/packages/components/src/Stepper/Stepper.component.module.css b/packages/components/src/Stepper/Stepper.component.module.css new file mode 100644 index 00000000000..9de8d7d6754 --- /dev/null +++ b/packages/components/src/Stepper/Stepper.component.module.css @@ -0,0 +1,63 @@ +/* stylelint-disable color-hex-case */ +.loading-content-steps.error { + width: 70%; + margin: auto; +} + +.stepper { + display: flex; + width: 100%; + justify-content: center; + padding-left: 10px; +} +.stepper-step { + padding: 10px 0; +} +.stepper-steps { + list-style: none; + margin: 0; + padding: 0; +} +.stepper-step-infos { + display: flex; +} +.stepper-step-message { + padding-left: 28px; + padding-top: 5px; + font-weight: normal; +} +.stepper-step-pending, +.stepper-step-aborted { + opacity: 0.5; +} +.stepper-step-failure { + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); + font-weight: 800; +} +.stepper-icon { + margin-right: 10px; + width: 1rem; + height: 1rem; +} +.stepper-icon-success { + fill: var(--coral-color-success-text, hsl(111, 49%, 34%)); +} +.stepper-icon-failure { + fill: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.stepper-icon-aborted { + padding-top: 1px; + padding-left: 1px; + width: -1rem; + height: -1rem; +} +.stepper-icon-pending { + line-height: 1rem; + text-align: center; + display: inline-block; + font-size: 18px; +} +.stepper-retry { + margin-top: 15px; + margin-left: 10px; +} diff --git a/packages/components/src/Stepper/Stepper.component.module.scss b/packages/components/src/Stepper/Stepper.component.module.scss deleted file mode 100644 index 63c7a4db4d8..00000000000 --- a/packages/components/src/Stepper/Stepper.component.module.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$stepper-icon-size: $svg-md-size !default; - -.loading-content-steps { - &.error { - width: 70%; - margin: auto; - } -} - -.stepper { - display: flex; - width: 100%; - justify-content: center; - padding-left: $padding-small; - - &-step { - padding: $padding-small 0; - - &s { - list-style: none; - margin: 0; - padding: 0; - } - - &-infos { - display: flex; - } - - &-message { - padding-left: 28px; - padding-top: $padding-smaller; - font-weight: normal; - } - - &-pending, - &-aborted { - opacity: 0.5; - } - - &-failure { - color: tokens.$coral-color-danger-text; - font-weight: $font-weight-bold; - } - } - - &-icon { - margin-right: $padding-small; - width: $stepper-icon-size; - height: $stepper-icon-size; - - &-success { - fill: tokens.$coral-color-success-text; - } - - &-failure { - fill: tokens.$coral-color-danger-text; - } - - &-aborted { - padding-top: 1px; - padding-left: 1px; - width: $stepper-icon-size - 2; - height: $stepper-icon-size - 2; - } - - &-pending { - line-height: $stepper-icon-size; - text-align: center; - display: inline-block; - font-size: 18px; - } - } - - &-retry { - margin-top: $padding-normal; - margin-left: $padding-small; - } -} diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.component.js b/packages/components/src/SubHeaderBar/SubHeaderBar.component.js index 4c0ad1ec9c8..2495fb07b05 100644 --- a/packages/components/src/SubHeaderBar/SubHeaderBar.component.js +++ b/packages/components/src/SubHeaderBar/SubHeaderBar.component.js @@ -14,7 +14,7 @@ import Skeleton from '../Skeleton'; import getDefaultT from '../translate'; import TitleSubHeader from './TitleSubHeader'; -import theme from './SubHeaderBar.module.scss'; +import theme from './SubHeaderBar.module.css'; function SubHeaderBarActions({ children, tag, left, right, center, hasRight }) { const className = classNames({ diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.module.css b/packages/components/src/SubHeaderBar/SubHeaderBar.module.css new file mode 100644 index 00000000000..b2dda641b19 --- /dev/null +++ b/packages/components/src/SubHeaderBar/SubHeaderBar.module.css @@ -0,0 +1,74 @@ +/* stylelint-disable color-hex-case */ +.tc-subheader { + border-bottom: 0.0625rem solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + width: 100%; +} +.tc-subheader :global(.btn-link), +.tc-subheader :global(.btn-icon-only) { + color: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); +} +.tc-subheader :global(.btn-link):focus, +.tc-subheader :global(.btn-link):hover, +.tc-subheader :global(.btn-icon-only):focus, +.tc-subheader :global(.btn-icon-only):hover { + color: var(--coral-color-accent-icon-hover, hsl(204, 88%, 30%)); +} +.tc-subheader :global(.btn-link):active, +.tc-subheader :global(.btn-icon-only):active { + color: var(--coral-color-accent-icon-active, hsl(205, 88%, 20%)); +} +.tc-subheader-navbar { + height: 4.375rem; + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + display: flex; + padding-left: 0; + padding-right: 20px; +} +.tc-subheader-navbar-left, +.tc-subheader-navbar-center, +.tc-subheader-navbar-right { + display: flex; +} +.tc-subheader-navbar-left { + flex: 1; +} +.tc-subheader-navbar-right { + margin-left: 15px; + justify-content: flex-end; +} +.tc-subheader-navbar-right :global(.btn-icon-only) { + padding-left: 0; + padding-right: 0; +} +.tc-subheader-navbar-center { + margin-left: auto; + margin-right: auto; + padding-left: 5px; + padding-right: 5px; +} +.tc-subheader-navbar-center-no-margin-right { + margin-right: 0; +} +.tc-subheader-back-button { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + /* stylelint-disable-next-line declaration-no-important */ + background-color: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)) !important; + width: 4.375rem; + height: 4.375rem; + display: flex; + align-items: center; + justify-content: center; +} +.tc-subheader-back-button:focus, +.tc-subheader-back-button:hover, +.tc-subheader-back-button:active { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-subheader-back-button:active { + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); +} +.tc-subheader-back-button .tc-svg-icon { + width: 20px; + height: 20px; +} diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss b/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss deleted file mode 100644 index 28a47523027..00000000000 --- a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss +++ /dev/null @@ -1,102 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -@mixin input-icon($margin-left) { - margin-top: 0.625rem; - margin-left: $margin-left; -} - -$tc-subheader-active-color: tokens.$coral-color-accent-text-active !default; -$tc-subheader-hover-focus-color: tokens.$coral-color-accent-text-hover !default; -$tc-subheader-color: tokens.$coral-color-neutral-text !default; -$tc-subheader-bar-height: 4.375rem !default; -$tc-svg-icon-size: $padding-large !default; - -.tc-subheader { - border-bottom: 0.0625rem solid tokens.$coral-color-neutral-border-weak; - width: 100%; - - :global(.btn-link), - :global(.btn-icon-only) { - color: tokens.$coral-color-accent-icon; - - &:focus, - &:hover { - color: tokens.$coral-color-accent-icon-hover; - } - - &:active { - color: tokens.$coral-color-accent-icon-active; - } - } - - &-navbar { - height: $tc-subheader-bar-height; - background-color: tokens.$coral-color-neutral-background-medium; - display: flex; - padding: { - left: 0; - right: $padding-large; - } - - &-left, - &-center, - &-right { - display: flex; - } - - &-left { - flex: 1; - } - - &-right { - margin-left: $padding-normal; - justify-content: flex-end; - - :global(.btn-icon-only) { - padding: { - left: 0; - right: 0; - } - } - } - - &-center { - margin-left: auto; - margin-right: auto; - padding-left: $padding-smaller; - padding-right: $padding-smaller; - - &-no-margin-right { - margin-right: 0; - } - } - } - - &-back-button { - color: tokens.$coral-color-neutral-text; - /* stylelint-disable-next-line declaration-no-important */ - background-color: tokens.$coral-color-neutral-background-strong !important; - width: $tc-subheader-bar-height; - height: $tc-subheader-bar-height; - display: flex; - align-items: center; - justify-content: center; - - &:focus, - &:hover, - &:active { - color: $tc-subheader-hover-focus-color; - background-color: tokens.$coral-color-neutral-background-medium; - } - - &:active { - color: $tc-subheader-active-color; - } - - .tc-svg-icon { - width: $tc-svg-icon-size; - height: $tc-svg-icon-size; - } - } -} diff --git a/packages/components/src/SubHeaderBar/TitleSubHeader/SubTitle.component.js b/packages/components/src/SubHeaderBar/TitleSubHeader/SubTitle.component.js index 40445a41b23..0b7dd7f43ef 100644 --- a/packages/components/src/SubHeaderBar/TitleSubHeader/SubTitle.component.js +++ b/packages/components/src/SubHeaderBar/TitleSubHeader/SubTitle.component.js @@ -4,7 +4,7 @@ import Skeleton from '../../Skeleton'; import { getTheme } from '../../theme'; import TooltipTrigger from '../../TooltipTrigger'; -import titleSubHeaderCssModule from './TitleSubHeader.module.scss'; +import titleSubHeaderCssModule from './TitleSubHeader.module.css'; const theme = getTheme(titleSubHeaderCssModule); diff --git a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.component.js b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.component.js index 068805c9eb2..5ab470a2cb6 100644 --- a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.component.js +++ b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.component.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { InlineEditing } from '@talend/design-system'; import Skeleton from '../../Skeleton'; -import titleSubHeaderCssModule from './TitleSubHeader.module.scss'; +import titleSubHeaderCssModule from './TitleSubHeader.module.css'; import Icon from '../../Icon'; import Inject from '../../Inject'; import getDefaultT from '../../translate'; diff --git a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.css b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.css new file mode 100644 index 00000000000..4a262e189c6 --- /dev/null +++ b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.css @@ -0,0 +1,81 @@ +/* stylelint-disable color-hex-case */ +@keyframes object-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +@keyframes skeleton-blink { + 0%, + 100% { + opacity: 0.1; + } + 50% { + opacity: 0.25; + } +} +:global(.tc-subheader-details-blink) { + animation: object-blink 1.5s ease infinite; +} + +.tc-subheader-details { + display: flex; + margin: 0; + height: 100%; +} +.tc-subheader-details .tc-subheader-details-icon { + align-self: center; + width: 1.5rem; + height: 1.5rem; + color: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); + margin-right: 20px; +} +.tc-subheader-details .tc-subheader-details-text { + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + flex: 1 auto; + margin-right: 110px; + max-width: 56.25rem; + align-items: flex-start; +} +.tc-subheader-details .tc-subheader-details-text-title { + display: inline-flex; + align-items: center; + width: 100%; +} +.tc-subheader-details .tc-subheader-details-text-title > * { + max-width: 56.25rem; +} +.tc-subheader-details .tc-subheader-details-text-title-wording, +.tc-subheader-details .tc-subheader-details-text-title-wording-button { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: unset; + margin: 0; +} +.tc-subheader-details .tc-subheader-details-text-title input { + width: var(--coral-sizing-maximal, 20rem); +} +.tc-subheader-details .tc-subheader-details-text-subtitle { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font-size: 0.875rem; +} +.tc-subheader-details .tc-subheader-details-text-subtitle > * { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; +} +.tc-subheader-details .tc-subheader-details-loading-subtitle { + margin-top: 5px; +} diff --git a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss deleted file mode 100644 index 324ccf1ffc8..00000000000 --- a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -@import '~@talend/bootstrap-theme/src/theme/animation'; - -@mixin ellipsis { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -$tc-input-subheader-size-large: 1.5rem !default; -$tc-input-subheader-size-medium: 0.875rem !default; -$header-title-max-width: 56.25rem; - -:global(.tc-subheader-details-blink) { - @include heartbeat(object-blink); -} - -.tc-subheader-details { - display: flex; - margin: 0; - height: 100%; - - & &-icon { - align-self: center; - width: $tc-input-subheader-size-large; - height: $tc-input-subheader-size-large; - color: tokens.$coral-color-neutral-icon; - margin-right: $padding-large; - } - - & &-text { - display: flex; - flex-direction: column; - justify-content: center; - overflow: hidden; - flex: 1 auto; - margin-right: 110px; - max-width: $header-title-max-width; - align-items: flex-start; - - &-title { - display: inline-flex; - align-items: center; - width: 100%; - - // force InlineEditing max space to allow ellipsis - > * { - max-width: $header-title-max-width; - } - - &-wording, - &-wording-button { - @include ellipsis; - line-height: unset; - margin: 0; - } - - input { - width: tokens.$coral-sizing-maximal; - } - } - - &-subtitle { - @include ellipsis; - max-width: 100%; - color: tokens.$coral-color-neutral-text; - font-size: $tc-input-subheader-size-medium; - - > * { - @include ellipsis; - max-width: 100%; - } - } - } - - & &-loading-subtitle { - margin-top: $padding-smaller; - } -} diff --git a/packages/components/src/TabBar/TabBar.component.js b/packages/components/src/TabBar/TabBar.component.js index a68765922a1..e3f675df610 100644 --- a/packages/components/src/TabBar/TabBar.component.js +++ b/packages/components/src/TabBar/TabBar.component.js @@ -20,7 +20,7 @@ import Tag from '../Tag'; import TooltipTrigger from '../TooltipTrigger'; import getTabBarBadgeLabel from '../utils/getTabBarBadgeLabel'; -import theme from './TabBar.module.scss'; +import theme from './TabBar.module.css'; function TabBar(props) { const tabBarContainerRef = useRef(); diff --git a/packages/components/src/TabBar/TabBar.module.css b/packages/components/src/TabBar/TabBar.module.css new file mode 100644 index 00000000000..c8943996ca7 --- /dev/null +++ b/packages/components/src/TabBar/TabBar.module.css @@ -0,0 +1,44 @@ +/* stylelint-disable color-hex-case */ +.tc-tab-bar-menu { + display: flex; + align-items: center; + justify-content: space-between; +} + +.tc-tab-bar { + white-space: nowrap; + overflow: hidden; + flex: 1; +} +.tc-tab-bar .tc-tab-bar-item { + float: none; + display: inline-block; +} +.tc-tab-bar .tc-tab-bar-item-container { + display: flex; + align-items: baseline; +} +.tc-tab-bar .tc-tab-bar-item-icon { + margin-right: 5px; + width: 0.75rem; + height: 0.75rem; + font-size: 0.75rem; +} +.tc-tab-bar .tc-tab-bar-item-label { + display: inline-block; + max-width: 12.5rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; +} +.tc-tab-bar .tc-tab-bar-item-badge { + margin-left: 5px; +} +.tc-tab-bar .tc-tab-bar-item > button { + max-width: initial; +} + +:global(.dropdown) + :global(.tab-content) { + padding-top: 20px; +} diff --git a/packages/components/src/TabBar/TabBar.module.scss b/packages/components/src/TabBar/TabBar.module.scss deleted file mode 100644 index 9365bd069e1..00000000000 --- a/packages/components/src/TabBar/TabBar.module.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-tab-bar-menu { - display: flex; - align-items: center; - justify-content: space-between; -} - -.tc-tab-bar { - white-space: nowrap; - overflow: hidden; - flex: 1; - - & &-item { - float: none; - display: inline-block; - - &-container { - display: flex; - align-items: baseline; - } - - &-icon { - margin-right: $padding-smaller; - width: $svg-sm-size; - height: $svg-sm-size; - font-size: $svg-sm-size; - } - - &-label { - display: inline-block; - max-width: 12.5rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - } - - &-badge { - margin-left: $padding-smaller; - } - - > button { - max-width: initial; - } - } -} - -:global(.dropdown) + :global(.tab-content) { - padding-top: $padding-large; -} diff --git a/packages/components/src/Toggle/LabelToggle/LabelToggle.component.js b/packages/components/src/Toggle/LabelToggle/LabelToggle.component.js index 05362194c00..a38754ad0f3 100644 --- a/packages/components/src/Toggle/LabelToggle/LabelToggle.component.js +++ b/packages/components/src/Toggle/LabelToggle/LabelToggle.component.js @@ -3,7 +3,7 @@ import get from 'lodash/get'; import { randomUUID } from '@talend/utils'; import { getTheme } from '../../theme'; -import css from './LabelToggle.module.scss'; +import css from './LabelToggle.module.css'; const theme = getTheme(css); diff --git a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.css b/packages/components/src/Toggle/LabelToggle/LabelToggle.module.css new file mode 100644 index 00000000000..6bab91a0c09 --- /dev/null +++ b/packages/components/src/Toggle/LabelToggle/LabelToggle.module.css @@ -0,0 +1,53 @@ +/* stylelint-disable selector-no-qualifying-type */ +/* stylelint-disable color-hex-case */ +.tc-label-toggle { + display: inline-flex; + background-color: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + border-radius: 30px; + margin-right: 10px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25) inset; +} +.tc-label-toggle.tc-radio-disabled { + opacity: 0.54; +} +.tc-label-toggle.tc-radio-disabled label:hover { + cursor: not-allowed; +} +.tc-label-toggle.tc-radio-disabled label:hover:not(.tc-radio-selected) { + background-color: var(--coral-color-neutral-background, white); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-label-toggle.tc-radio-disabled input[type='radio'] { + cursor: not-allowed; +} +.tc-label-toggle input[type='radio'] { + position: fixed; + opacity: 0; + cursor: pointer; +} +.tc-label-toggle label { + background-color: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: 0 8px; + border-radius: 30px; + font-weight: 600; + margin: 2px 0; + cursor: pointer; +} +.tc-label-toggle label:hover { + background-color: var(--coral-color-accent-background-strong-hover, hsl(204, 95%, 23%)); + color: var(--coral-color-neutral-text-inverted, white); +} +.tc-label-toggle label:first-of-type { + margin: 2px 0 2px 2px; +} +.tc-label-toggle label:last-of-type { + margin: 2px 2px 2px 0; +} +.tc-label-toggle label.tc-radio-selected { + transition: 0.2s ease-out; + color: var(--coral-color-neutral-text-inverted, white); + opacity: 1; + background-color: var(--coral-color-accent-background-strong-active, hsl(205, 95%, 15%)); + font-weight: 600; +} diff --git a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss b/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss deleted file mode 100644 index f481dc6307d..00000000000 --- a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss +++ /dev/null @@ -1,69 +0,0 @@ -/* stylelint-disable selector-no-qualifying-type */ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -@mixin radio-toolbar-input($color, $opacity) { - transition: 0.2s ease-out; - color: $color; - opacity: $opacity; -} - -.tc-label-toggle { - display: inline-flex; - background-color: tokens.$coral-color-neutral-background-strong; - border-radius: $padding-larger; - margin-right: $padding-small; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25) inset; - - &.tc-radio-disabled { - opacity: 0.54; - - label:hover { - cursor: not-allowed; - - &:not(.tc-radio-selected) { - background-color: tokens.$coral-color-neutral-background; - color: tokens.$coral-color-neutral-text; - } - } - - input[type='radio'] { - cursor: not-allowed; - } - } - - input[type='radio'] { - position: fixed; - opacity: 0; - cursor: pointer; - } - - label { - background-color: tokens.$coral-color-neutral-background-strong; - color: tokens.$coral-color-neutral-text; - padding: 0 8px; - border-radius: $padding-larger; - font-weight: $font-weight-semi-bold; - margin: 2px 0; - cursor: pointer; - - &:hover { - background-color: tokens.$coral-color-accent-background-strong-hover; - color: tokens.$coral-color-neutral-text-inverted; - } - - &:first-of-type { - margin: 2px 0 2px 2px; - } - - &:last-of-type { - margin: 2px 2px 2px 0; - } - - &.tc-radio-selected { - @include radio-toolbar-input(tokens.$coral-color-neutral-text-inverted, 1); - background-color: tokens.$coral-color-accent-background-strong-active; - font-weight: $font-weight-semi-bold; - } - } -} diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.component.js b/packages/components/src/TooltipTrigger/TooltipTrigger.component.js index fcefc0c28de..862cf06e92a 100644 --- a/packages/components/src/TooltipTrigger/TooltipTrigger.component.js +++ b/packages/components/src/TooltipTrigger/TooltipTrigger.component.js @@ -3,7 +3,7 @@ import { Children, Fragment, cloneElement, useState, useRef } from 'react'; import ReactDOM from 'react-dom'; import classNames from 'classnames'; import { randomUUID } from '@talend/utils'; -import theme from './TooltipTrigger.module.scss'; +import theme from './TooltipTrigger.module.css'; import useTooltipVisibility from './TooltipTrigger.hook'; const DEFAULT_OFFSET_X = 300; diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.module.css b/packages/components/src/TooltipTrigger/TooltipTrigger.module.css new file mode 100644 index 00000000000..0b0bf55908e --- /dev/null +++ b/packages/components/src/TooltipTrigger/TooltipTrigger.module.css @@ -0,0 +1,137 @@ +/* stylelint-disable color-hex-case */ +.tc-tooltip { + display: inline-block; +} +.tc-tooltip-container { + position: fixed; + padding: 0 0.625rem; + width: 18.75rem; + pointer-events: none; + z-index: var(--coral-elevation-layer-overlay, 16); +} +.tc-tooltip-body { + position: relative; + display: table; + max-width: 18.75rem; + padding: 5px; + font-size: 0.75rem; + line-height: 1.2; + text-align: center; + white-space: pre-line; + color: var(--coral-color-neutral-background, white); + background: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2); + border-radius: 0.125rem; +} +.tc-tooltip-body::before { + content: ''; + position: absolute; + border: 0.3125rem solid transparent; +} +.tc-tooltip-top, +.tc-tooltip-bottom { + left: calc(-50% - 0.625rem); + margin: 0.625rem auto; +} +.tc-tooltip-top::before, +.tc-tooltip-bottom::before { + left: calc(50% - 0.3125rem); +} +.tc-tooltip-right, +.tc-tooltip-left, +.tc-tooltip-right-bottom, +.tc-tooltip-left-bottom { + margin-top: -0.625rem; +} +.tc-tooltip-right::before, +.tc-tooltip-left::before, +.tc-tooltip-right-bottom::before, +.tc-tooltip-left-bottom::before { + top: 0.3125rem; +} +.tc-tooltip-top::before { + bottom: -0.625rem; + border-top-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-top-left, +.tc-tooltip-top-right { + bottom: 0.625rem; +} +.tc-tooltip-top-left::before, +.tc-tooltip-top-right::before { + bottom: -0.625rem; + border-top-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-top-left { + right: -1.5625rem; + margin-left: auto; +} +.tc-tooltip-top-left::before { + right: 0.625rem; + bottom: -0.625rem; + border-top-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-top-right { + left: -1.5625rem; + margin-right: auto; +} +.tc-tooltip-top-right::before { + left: 0.625rem; + bottom: -0.625rem; + border-top-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-bottom::before { + top: -0.625rem; + border-bottom-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-bottom-right, +.tc-tooltip-bottom-left { + margin-top: 0.625rem; +} +.tc-tooltip-bottom-right::before, +.tc-tooltip-bottom-left::before { + top: -0.625rem; +} +.tc-tooltip-bottom-right { + left: -1.5625rem; + margin-right: auto; +} +.tc-tooltip-bottom-right::before { + left: 0.625rem; + border-bottom-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-bottom-left { + right: -1.5625rem; + margin-left: auto; +} +.tc-tooltip-bottom-left::before { + right: 0.625rem; + border-bottom-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-left, +.tc-tooltip-left-bottom { + margin-left: auto; +} +.tc-tooltip-left::before, +.tc-tooltip-left-bottom::before { + right: -0.625rem; + border-left-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-right, +.tc-tooltip-right-bottom { + margin-right: auto; +} +.tc-tooltip-right::before, +.tc-tooltip-right-bottom::before { + left: -0.625rem; + border-right-color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-tooltip-right-bottom, +.tc-tooltip-left-bottom { + bottom: -0.625rem; +} +.tc-tooltip-right-bottom::before, +.tc-tooltip-left-bottom::before { + top: auto; + bottom: 0.3125rem; +} diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss b/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss deleted file mode 100644 index 7a40adfc57f..00000000000 --- a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss +++ /dev/null @@ -1,172 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-tooltip-max-width: 18.75rem !default; -$tc-tooltip-font-size: 0.75rem !default; -$tc-tooltip-color: tokens.$coral-color-neutral-background !default; -$tc-tooltip-background: tokens.$coral-color-neutral-text !default; -$tc-tooltip-border-radius: 0.125rem !default; -$tc-tooltip-box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2) !default; -$tc-tooltip-margin: 0.625rem !default; - -$tc-tooltip-arrow-border-size: 0.3125rem !default; -$tc-tooltip-arrow-color: $tc-tooltip-background !default; - -.tc-tooltip { - display: inline-block; - - &-container { - position: fixed; - padding: 0 $tc-tooltip-margin; - width: $tc-tooltip-max-width; - pointer-events: none; - z-index: tokens.$coral-elevation-layer-overlay; - } - - &-body { - position: relative; - display: table; - max-width: $tc-tooltip-max-width; - padding: $padding-smaller; - font-size: $tc-tooltip-font-size; - line-height: 1.2; - text-align: center; - white-space: pre-line; - color: $tc-tooltip-color; - background: $tc-tooltip-background; - box-shadow: $tc-tooltip-box-shadow; - border-radius: $tc-tooltip-border-radius; - - &::before { - content: ''; - position: absolute; - border: $tc-tooltip-arrow-border-size solid transparent; - } - } - - &-top, - &-bottom { - left: calc(-50% - #{$tc-tooltip-margin}); - margin: $tc-tooltip-margin auto; - - &::before { - left: calc(50% - #{$tc-tooltip-arrow-border-size}); - } - } - - &-right, - &-left, - &-right-bottom, - &-left-bottom { - margin-top: -1 * $tc-tooltip-margin; - - &::before { - top: $tc-tooltip-margin - $tc-tooltip-arrow-border-size; - } - } - - &-top { - &::before { - bottom: -2 * $tc-tooltip-arrow-border-size; - border-top-color: $tc-tooltip-arrow-color; - } - } - - &-top-left, - &-top-right { - bottom: $tc-tooltip-margin; - - &::before { - bottom: -2 * $tc-tooltip-arrow-border-size; - border-top-color: $tc-tooltip-arrow-color; - } - } - - &-top-left { - right: (-3 * $tc-tooltip-margin) + $tc-tooltip-arrow-border-size; - margin-left: auto; - - &::before { - right: $tc-tooltip-margin; - bottom: -2 * $tc-tooltip-arrow-border-size; - border-top-color: $tc-tooltip-arrow-color; - } - } - - &-top-right { - left: (-3 * $tc-tooltip-margin) + $tc-tooltip-arrow-border-size; - margin-right: auto; - - &::before { - left: $tc-tooltip-margin; - bottom: -2 * $tc-tooltip-arrow-border-size; - border-top-color: $tc-tooltip-arrow-color; - } - } - - &-bottom { - &::before { - top: -2 * $tc-tooltip-arrow-border-size; - border-bottom-color: $tc-tooltip-arrow-color; - } - } - - &-bottom-right, - &-bottom-left { - margin-top: $tc-tooltip-margin; - - &::before { - top: -2 * $tc-tooltip-arrow-border-size; - } - } - - &-bottom-right { - left: (-3 * $tc-tooltip-margin) + $tc-tooltip-arrow-border-size; - margin-right: auto; - - &::before { - left: $tc-tooltip-margin; - border-bottom-color: $tc-tooltip-arrow-color; - } - } - - &-bottom-left { - right: (-3 * $tc-tooltip-margin) + $tc-tooltip-arrow-border-size; - margin-left: auto; - - &::before { - right: $tc-tooltip-margin; - border-bottom-color: $tc-tooltip-arrow-color; - } - } - - &-left, - &-left-bottom { - margin-left: auto; - - &::before { - right: -2 * $tc-tooltip-arrow-border-size; - border-left-color: $tc-tooltip-arrow-color; - } - } - - &-right, - &-right-bottom { - margin-right: auto; - - &::before { - left: -2 * $tc-tooltip-arrow-border-size; - border-right-color: $tc-tooltip-arrow-color; - } - } - - &-right-bottom, - &-left-bottom { - bottom: (-1 * $tc-tooltip-margin); - - &::before { - top: auto; - bottom: $tc-tooltip-margin - $tc-tooltip-arrow-border-size; - } - } -} diff --git a/packages/components/src/TreeView/TreeView.component.js b/packages/components/src/TreeView/TreeView.component.js index f92f5b5a186..52ffb50fa58 100644 --- a/packages/components/src/TreeView/TreeView.component.js +++ b/packages/components/src/TreeView/TreeView.component.js @@ -3,7 +3,7 @@ import classNames from 'classnames'; import Action from '../Actions/Action'; import TreeViewItem from './TreeViewItem'; -import theme from './TreeView.module.scss'; +import theme from './TreeView.module.css'; import { Gesture } from '@talend/react-a11y'; /** diff --git a/packages/components/src/TreeView/TreeView.module.css b/packages/components/src/TreeView/TreeView.module.css new file mode 100644 index 00000000000..e46dcff2b26 --- /dev/null +++ b/packages/components/src/TreeView/TreeView.module.css @@ -0,0 +1,19 @@ +/* stylelint-disable color-hex-case */ +.tc-treeview .tc-treeview-header { + display: flex; + justify-content: space-between; + align-items: center; + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + line-height: 3.75rem; + font-weight: bold; + padding-left: 20px; + border-bottom: 1px solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} +.tc-treeview .tc-treeview-header :global(.btn-link .tc-svg-icon) { + stroke: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-treeview .tc-treeview-list { + padding: 10px 0; + overflow: auto; + list-style-type: none; +} diff --git a/packages/components/src/TreeView/TreeView.module.scss b/packages/components/src/TreeView/TreeView.module.scss deleted file mode 100644 index a8a5e94a0d7..00000000000 --- a/packages/components/src/TreeView/TreeView.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// TreeView styles - -.tc-treeview { - .tc-treeview-header { - display: flex; - justify-content: space-between; - align-items: center; - - color: tokens.$coral-color-accent-text; - line-height: 3.75rem; - font-weight: bold; - - padding-left: $padding-large; - border-bottom: 1px solid tokens.$coral-color-neutral-border; - - :global(.btn-link .tc-svg-icon) { - stroke: tokens.$coral-color-accent-text; - } - } - - .tc-treeview-list { - padding: $padding-small 0; - overflow: auto; - list-style-type: none; - } -} diff --git a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.component.js b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.component.js index d4b6d24d6a0..418297f79f8 100644 --- a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.component.js +++ b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.component.js @@ -7,7 +7,7 @@ import { Action } from '../../Actions'; import Icon from '../../Icon'; import Badge from '../../Badge'; -import css from './TreeViewItem.module.scss'; +import css from './TreeViewItem.module.css'; const BASE_PADDING = 30; const CARET_WIDTH = 12; diff --git a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.css b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.css new file mode 100644 index 00000000000..799b6ee18d0 --- /dev/null +++ b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.css @@ -0,0 +1,127 @@ +/* stylelint-disable color-hex-case */ +.tc-treeview-li { + display: flex; + align-items: center; + flex-wrap: wrap; +} +.tc-treeview-li:focus { + outline: none; +} +.tc-treeview-li :global(.btn-link) { + padding: 0; +} +.tc-treeview-li .tc-treeview-item { + position: relative; + height: 2.5rem; + cursor: pointer; + padding-right: 20px; + display: flex; + align-items: center; + flex-grow: 1; + transition: 200ms ease-out; +} +.tc-treeview-li .tc-treeview-item.disabled { + opacity: 0.54; + cursor: not-allowed; +} +.tc-treeview-li .tc-treeview-item.disabled .tc-treeview-item-name { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-treeview-li .tc-treeview-item.disabled svg { + fill: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); +} +.tc-treeview-li .tc-treeview-item .tc-treeview-toggle { + position: absolute; + padding: 0.625rem; + display: inline-flex; + min-height: auto; + height: 100%; + margin-left: -1.875rem; + top: 0; +} +.tc-treeview-li .tc-treeview-item .tc-treeview-toggle svg { + width: 0.75rem; + fill: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); + margin: 0; +} +.tc-treeview-li .tc-treeview-item .tc-treeview-toggle:hover svg { + fill: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.tc-treeview-li .tc-treeview-item .tc-treeview-folder { + width: 1rem; + height: 1rem; + margin-right: 20px; + flex-shrink: 0; + flex-grow: 0; + fill: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.tc-treeview-li .tc-treeview-item .tc-treeview-img { + max-height: 1.25rem; + margin-right: 0.625rem; + vertical-align: middle; +} +.tc-treeview-li .tc-treeview-item .tc-treeview-item-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 25rem; +} +.tc-treeview-li[aria-selected='true'] > .tc-treeview-item { + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + font-weight: 600; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.tc-treeview-li[aria-selected='true'] > .tc-treeview-item .tc-treeview-folder { + fill: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); +} +.tc-treeview-li .tc-treeview-item:hover, +.tc-treeview-li:focus > .tc-treeview-item { + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tc-treeview-li .tc-treeview-item:hover .tc-treeview-folder, +.tc-treeview-li:focus > .tc-treeview-item .tc-treeview-folder { + fill: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); +} +.tc-treeview-li .tc-treeview-item:hover .tc-treeview-toggle svg, +.tc-treeview-li:focus > .tc-treeview-item .tc-treeview-toggle svg { + fill: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); +} +.tc-treeview-li .tc-treeview-item:hover :global(.btn-link), +.tc-treeview-li:focus > .tc-treeview-item :global(.btn-link) { + visibility: visible; +} +.tc-treeview-li .tc-treeview-item:hover.disabled, +.tc-treeview-li:focus > .tc-treeview-item.disabled { + background: none; +} +.tc-treeview-li .tc-treeview-item-ctrl { + margin-left: auto; + display: flex; + align-items: center; +} +.tc-treeview-li .tc-treeview-item-ctrl :global(.btn-link) { + visibility: hidden; + padding: 0 5px; +} +.tc-treeview-li .tc-treeview-item-ctrl :global(.btn-link) :global(.tc-svg-icon) { + fill: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); + margin: 0; +} +.tc-treeview-li .tc-treeview-item-ctrl :global(.btn-link) :global(.tc-svg-icon):hover { + fill: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.tc-treeview-li .tc-treeview-item-ctrl :global(.tc-badge-button) { + height: 1.25rem; + margin: 0 15px 0 0; + padding: 0 5px; + border-radius: 3px; +} +.tc-treeview-li .tc-treeview-ul { + width: 100%; + padding: 0; +} +.tc-treeview-li[data-hidden='true'] { + height: 0; + display: none; +} diff --git a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss deleted file mode 100644 index e6d05ce9f59..00000000000 --- a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss +++ /dev/null @@ -1,158 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -// TreeView styles -$item-height: 2.5rem; - -.tc-treeview-li { - display: flex; - align-items: center; - flex-wrap: wrap; - - &:focus { - outline: none; - } - - :global(.btn-link) { - padding: 0; - } - - .tc-treeview-item { - position: relative; - height: $item-height; - cursor: pointer; - padding-right: $padding-large; - - display: flex; - align-items: center; - flex-grow: 1; - - transition: 200ms ease-out; - - &.disabled { - opacity: 0.54; - cursor: not-allowed; - - .tc-treeview-item-name { - color: tokens.$coral-color-neutral-text; - } - - svg { - fill: tokens.$coral-color-neutral-icon; - } - } - - .tc-treeview-toggle { - position: absolute; - padding: 0.625rem; - display: inline-flex; - min-height: auto; - height: 100%; - margin-left: -1.875rem; - top: 0; - - svg { - width: $svg-sm-size; - fill: tokens.$coral-color-neutral-icon; - margin: 0; - } - - &:hover svg { - fill: tokens.$coral-color-neutral-icon-weak; - } - } - - .tc-treeview-folder { - width: $svg-md-size; - height: $svg-md-size; - margin-right: $padding-large; - flex-shrink: 0; - flex-grow: 0; - fill: tokens.$coral-color-neutral-icon-weak; - } - - .tc-treeview-img { - max-height: 1.25rem; - margin-right: 0.625rem; - vertical-align: middle; - } - - .tc-treeview-item-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 25rem; - } - } - - &[aria-selected='true'] > .tc-treeview-item { - background: tokens.$coral-color-accent-background; - font-weight: 600; - color: tokens.$coral-color-neutral-text; - - .tc-treeview-folder { - fill: tokens.$coral-color-accent-icon; - } - } - - .tc-treeview-item:hover, - &:focus > .tc-treeview-item { - background: tokens.$coral-color-neutral-background-medium; - color: tokens.$coral-color-accent-text; - - .tc-treeview-folder { - fill: tokens.$coral-color-accent-icon; - } - - .tc-treeview-toggle { - svg { - fill: tokens.$coral-color-accent-icon; - } - } - - :global(.btn-link) { - visibility: visible; - } - - &.disabled { - background: none; - } - } - - .tc-treeview-item-ctrl { - margin-left: auto; - display: flex; - align-items: center; - - :global(.btn-link) { - visibility: hidden; - padding: 0 $padding-smaller; - - :global(.tc-svg-icon) { - fill: tokens.$coral-color-neutral-icon; - margin: 0; - - &:hover { - fill: tokens.$coral-color-neutral-icon-weak; - } - } - } - - :global(.tc-badge-button) { - height: 1.25rem; - margin: 0 $padding-normal 0 0; - padding: 0 $padding-smaller; - border-radius: $border-radius-small; - } - } - - .tc-treeview-ul { - width: 100%; - padding: 0; - } - - &[data-hidden='true'] { - height: 0; - display: none; - } -} diff --git a/packages/components/src/Typeahead/Typeahead.component.js b/packages/components/src/Typeahead/Typeahead.component.js index 51c109d4129..b3a3c0408b4 100644 --- a/packages/components/src/Typeahead/Typeahead.component.js +++ b/packages/components/src/Typeahead/Typeahead.component.js @@ -17,7 +17,7 @@ import { renderSectionTitle, } from './Typeahead.component.renderers'; -import theme from './Typeahead.module.scss'; +import theme from './Typeahead.module.css'; function getItems(items, dataFeature) { if (!items) { diff --git a/packages/components/src/Typeahead/Typeahead.component.renderers.js b/packages/components/src/Typeahead/Typeahead.component.renderers.js index 09b448aebbc..2565a979e73 100644 --- a/packages/components/src/Typeahead/Typeahead.component.renderers.js +++ b/packages/components/src/Typeahead/Typeahead.component.renderers.js @@ -12,7 +12,7 @@ import Emphasis from '../Emphasis'; import Icon from '../Icon'; import { getTheme } from '../theme'; -import theme from './Typeahead.module.scss'; +import theme from './Typeahead.module.css'; const css = getTheme(theme); diff --git a/packages/components/src/Typeahead/Typeahead.module.css b/packages/components/src/Typeahead/Typeahead.module.css new file mode 100644 index 00000000000..fb6596e5f92 --- /dev/null +++ b/packages/components/src/Typeahead/Typeahead.module.css @@ -0,0 +1,207 @@ +/* stylelint-disable color-hex-case */ +@keyframes object-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +@keyframes skeleton-blink { + 0%, + 100% { + opacity: 0.1; + } + 50% { + opacity: 0.25; + } +} +.tc-typeahead-container { + position: relative; + display: flex; + width: auto; +} +.tc-typeahead-container.loading .typeahead-input-container > *, +.tc-typeahead-container.loading .items-container > * { + animation: object-blink 1.5s ease infinite; + color: inherit; +} +.tc-typeahead-container .items-container, +.tc-typeahead-container .items-body { + max-height: 32vh; +} +.tc-typeahead-container .items-container { + display: none; + margin-top: 5px; + min-width: 16.25rem; + font-size: 0.875rem; + background-color: var(--coral-color-neutral-background, white); + border-radius: 4px; + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + z-index: 1035; +} +.tc-typeahead-container .items-body { + overflow-y: auto; +} +.tc-typeahead-container.right { + align-items: flex-end; +} +.tc-typeahead-container.right .items-container { + left: auto; +} +.tc-typeahead-container .container-open, +.tc-typeahead-container.container-open .items-container { + display: block; + padding-top: 1px; + padding-bottom: 1px; +} + +.typeahead-input { + min-width: 16.25rem; + position: relative; +} +.typeahead-input-icon [type='text'].typeahead-input { + padding-left: 2.5em; + margin-bottom: 0; +} +.typeahead-input-icon .icon-cls { + position: absolute; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + pointer-events: none; + display: flex; + align-items: center; + height: 100%; + width: 2.5em; + z-index: 1; +} +.typeahead-input-icon .icon-cls > * { + margin: auto; +} +.typeahead-input-caret [type='text'].typeahead-input { + padding-right: 1em; +} +.typeahead-input-caret .icon-cls { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + right: 0; + bottom: 0; + margin: 0; + width: 30px; + pointer-events: none; +} +.typeahead-input-caret .icon-cls > svg { + height: 0.5rem; + width: 0.5rem; +} + +.is-loading, +.is-searching, +.no-result { + display: flex; + align-items: center; + justify-content: center; + height: 2rem; +} +.is-loading span, +.is-searching span, +.no-result span { + margin-left: 5px; +} + +.no-domain { + display: flex; + align-items: center; + justify-content: center; +} +.no-domain span { + padding: 10px 5px; +} + +.items { + margin: 0; + padding: 0; + list-style-type: none; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} + +.section-container:not(:first-of-type) .section-header { + border-top: 1px solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} + +.section-header { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + display: flex; + align-items: center; + height: 2rem; + padding-left: 10px; + padding-right: 10px; +} +.section-header-title { + font-weight: 600; +} +.section-header-title.hint { + font-style: italic; + font-weight: normal; +} +i + .section-header-title, +svg + .section-header-title { + padding-left: 5px; +} +.section-header i, +.section-header svg { + width: 1rem; + height: 1rem; + color: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); +} + +.item { + height: 2rem; + cursor: pointer; + white-space: pre; + align-items: center; + display: flex; + padding-left: 10px; + padding-right: 10px; +} +.item > div { + width: 100%; +} +.item.multiline { + height: 3rem; +} +.item-icon { + margin-right: 10px; +} +.item-title > span, +.item-description { + display: block; + width: 100%; + text-overflow: ellipsis; + margin: 0; + overflow: hidden; +} +.item-description { + font-size: 0.75rem; +} +.item-highlighted, +.item:hover { + background-color: var(--coral-color-accent-background-weak-hover, hsl(204, 59%, 88%)); +} +.item-highlighted.selected, +.item:hover.selected { + background-color: var(--coral-color-accent-background-weak-active, hsl(205, 60%, 75%)); +} +.item.disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.item.disabled:hover { + background: none; +} +.item.selected { + background-color: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} diff --git a/packages/components/src/Typeahead/Typeahead.module.scss b/packages/components/src/Typeahead/Typeahead.module.scss deleted file mode 100644 index 54d21024b79..00000000000 --- a/packages/components/src/Typeahead/Typeahead.module.scss +++ /dev/null @@ -1,252 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; -@import '~@talend/bootstrap-theme/src/theme/animation'; - -$tc-typeahead-input-color: tokens.$coral-color-neutral-text !default; -$tc-typeahead-input-width: 16.25rem !default; - -$tc-typeahead-opened-items-container-color: tokens.$coral-color-neutral-text !default; -$tc-typeahead-opened-items-container-background-color: tokens.$coral-color-neutral-background !default; - -$tc-typeahead-section-border-color: tokens.$coral-color-neutral-border !default; - -$tc-typeahead-icon-color: tokens.$coral-color-neutral-text !default; -$tc-typeahead-only-icon-color: tokens.$coral-color-neutral-text !default; -$tc-typeahead-section-header-color: tokens.$coral-color-accent-text-weak !default; - -$tc-typeahead-items-box-shadow: tokens.$coral-elevation-shadow-neutral-m !default; -$tc-typeahead-items-border-radius: $border-radius-base !default; -$tc-typeahead-items-font-size: 0.875rem !default; -$tc-typeahead-items-zindex: 1035 !default; - -$tc-typeahead-item-height: 2rem !default; -$tc-typeahead-item-description-height: 1rem !default; - -.tc-typeahead-container { - position: relative; - display: flex; - width: auto; - - &.loading { - .typeahead-input-container, - .items-container { - > * { - @include heartbeat(object-blink); - color: inherit; - } - } - } - - .items-container, - .items-body { - max-height: 32vh; - } - - .items-container { - display: none; - margin-top: $padding-smaller; - min-width: $tc-typeahead-input-width; - font-size: $tc-typeahead-items-font-size; - background-color: $tc-typeahead-opened-items-container-background-color; - border-radius: $tc-typeahead-items-border-radius; - box-shadow: $tc-typeahead-items-box-shadow; - z-index: $tc-typeahead-items-zindex; - } - - .items-body { - overflow-y: auto; - } - - &.right { - align-items: flex-end; - - .items-container { - left: auto; - } - } - - .container-open, - &.container-open .items-container { - display: block; - padding-top: 1px; - padding-bottom: 1px; - } -} - -.typeahead-input { - min-width: $tc-typeahead-input-width; - position: relative; - - &-icon { - [type='text'].typeahead-input { - padding-left: 2.5em; - margin-bottom: 0; - } - - .icon-cls { - position: absolute; - color: $tc-typeahead-icon-color; - pointer-events: none; - display: flex; - align-items: center; - height: 100%; - width: 2.5em; - z-index: 1; - - > * { - margin: auto; - } - } - } - - &-caret { - [type='text'].typeahead-input { - padding-right: 1em; - } - - .icon-cls { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - right: 0; - bottom: 0; - margin: 0; - width: $padding-larger; - pointer-events: none; - - > svg { - height: 0.5rem; - width: 0.5rem; - } - } - } -} - -.is-loading, -.is-searching, -.no-result { - display: flex; - align-items: center; - justify-content: center; - height: $tc-typeahead-item-height; - - span { - margin-left: $padding-smaller; - } -} - -.no-domain { - display: flex; - align-items: center; - justify-content: center; - - span { - padding: $padding-small $padding-smaller; - } -} - -.items { - margin: 0; - padding: 0; - list-style-type: none; - color: tokens.$coral-color-neutral-text; -} - -.section-container:not(:first-of-type) { - .section-header { - border-top: 1px solid $tc-typeahead-section-border-color; - } -} - -.section-header { - color: tokens.$coral-color-neutral-text; - display: flex; - align-items: center; - height: $tc-typeahead-item-height; - padding: { - left: $padding-small; - right: $padding-small; - } - - &-title { - font-weight: $font-weight-semi-bold; - - &.hint { - font-style: italic; - font-weight: normal; - } - } - - i + &-title, - svg + &-title { - padding-left: $padding-smaller; - } - - i, - svg { - width: $svg-md-size; - height: $svg-md-size; - color: tokens.$coral-color-neutral-icon; - } -} - -.item { - height: $tc-typeahead-item-height; - cursor: pointer; - white-space: pre; - align-items: center; - display: flex; - padding: { - left: $padding-small; - right: $padding-small; - } - - > div { - width: 100%; - } - - &.multiline { - height: $tc-typeahead-item-height + $tc-typeahead-item-description-height; - } - - &-icon { - margin-right: $padding-small; - } - - &-title > span, - &-description { - display: block; - width: 100%; - text-overflow: ellipsis; - margin: 0; - overflow: hidden; - } - - &-description { - font-size: 0.75rem; - } - - &-highlighted, - &:hover { - background-color: tokens.$coral-color-accent-background-weak-hover; - - &.selected { - background-color: tokens.$coral-color-accent-background-weak-active; - } - } - - &.disabled { - color: tokens.$coral-color-neutral-text-disabled; - cursor: not-allowed; - - &:hover { - background: none; - } - } - - &.selected { - background-color: tokens.$coral-color-accent-background-hover; - } -} diff --git a/packages/components/src/VirtualizedList/CellActions/CellActions.component.js b/packages/components/src/VirtualizedList/CellActions/CellActions.component.js index f69a284e3a0..0947c3b9828 100644 --- a/packages/components/src/VirtualizedList/CellActions/CellActions.component.js +++ b/packages/components/src/VirtualizedList/CellActions/CellActions.component.js @@ -3,8 +3,8 @@ import { Component } from 'react'; import classNames from 'classnames'; import { Actions } from '../../Actions'; -import largeTheme from './RowLargeCellActions.module.scss'; -import tableTheme from './RowTableCellActions.module.scss'; +import largeTheme from './RowLargeCellActions.module.css'; +import tableTheme from './RowTableCellActions.module.css'; const LIST_ACTION_CLASS_NAME = 'tc-list-actions'; diff --git a/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.css b/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.css new file mode 100644 index 00000000000..62832c64ebb --- /dev/null +++ b/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.css @@ -0,0 +1,5 @@ +/* stylelint-disable color-hex-case */ +.row .tc-list-actions :global(.tc-actions) > button { + line-height: inherit; + padding: 0 10px; +} diff --git a/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.scss b/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.scss deleted file mode 100644 index 82184fddfdb..00000000000 --- a/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -// Large display specificities -.row { - .tc-list-actions :global(.tc-actions) > button { - line-height: inherit; - padding: 0 $padding-small; - } -} diff --git a/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.css b/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.css new file mode 100644 index 00000000000..36c05d5e790 --- /dev/null +++ b/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.css @@ -0,0 +1,11 @@ +/* stylelint-disable color-hex-case */ +.row .tc-list-actions button { + opacity: 0; +} +.row .tc-list-actions button:focus { + opacity: 1; +} +.row:hover .tc-list-actions button { + opacity: 1; + transition: opacity 0.15s ease-in; +} diff --git a/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.scss b/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.scss deleted file mode 100644 index 83daebe5068..00000000000 --- a/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -// manage actions display on row hover -.row { - .tc-list-actions button { - opacity: 0; - - &:focus { - opacity: 1; - } - } - - &:hover .tc-list-actions button { - opacity: 1; - transition: opacity 0.15s ease-in; - } -} diff --git a/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.component.js b/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.component.js index 0d5265f81ba..65babb5e010 100644 --- a/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.component.js +++ b/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.component.js @@ -7,7 +7,7 @@ import I18N_DOMAIN_COMPONENTS from '../../constants'; import getDefaultT from '../../translate'; import { getTheme } from '../../theme'; -import theme from './CellBoolean.module.scss'; +import theme from './CellBoolean.module.css'; const css = getTheme(theme); export const DISPLAY_MODE = { diff --git a/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.scss b/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.css similarity index 58% rename from packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.scss rename to packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.css index 4783c6ddfda..3b316cb1b7e 100644 --- a/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.scss +++ b/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.css @@ -1,5 +1,4 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - +/* stylelint-disable color-hex-case */ .cell-boolean-container { display: flex; width: 100%; diff --git a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.component.js b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.component.js index b25166c982e..f3113dfc7a7 100644 --- a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.component.js +++ b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; import classnames from 'classnames'; -import theme from './CellCheckbox.module.scss'; +import theme from './CellCheckbox.module.css'; import { SELECTION_MODE } from '../utils/constants'; diff --git a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.css b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.css new file mode 100644 index 00000000000..9c268ed5f83 --- /dev/null +++ b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.css @@ -0,0 +1,12 @@ +/* stylelint-disable color-hex-case */ +.tc-list-checkbox :global(.checkbox) { + margin: 0; + display: flex; +} +.tc-list-checkbox :global(.checkbox) label { + line-height: 0.9375rem; + min-height: 0.9375rem; + display: flex; + padding-left: 20px; + margin-bottom: 0; +} diff --git a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.scss b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.scss deleted file mode 100644 index b0c21bfdd00..00000000000 --- a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-list-checkbox { - :global(.checkbox) { - margin: 0; - display: flex; - - label { - line-height: 0.9375rem; - min-height: 0.9375rem; - display: flex; - padding-left: $padding-large; - margin-bottom: 0; - } - } -} diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js index 3c171893519..38fbabcd5bd 100644 --- a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js +++ b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js @@ -17,7 +17,7 @@ import getLocale from '../../i18n/DateFnsLocale/locale'; import TooltipTrigger from '../../TooltipTrigger'; import getDefaultT from '../../translate'; -import styles from './CellDatetime.module.scss'; +import styles from './CellDatetime.module.css'; const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'; diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.css b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.css new file mode 100644 index 00000000000..8a901565877 --- /dev/null +++ b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.css @@ -0,0 +1,11 @@ +/* stylelint-disable color-hex-case */ +.cell-icon-container { + display: flex; + align-items: center; +} +.cell-icon-container .icon-container { + display: flex; +} +.cell-icon-container :global(.btn-link) { + line-height: initial; +} diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.scss b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.scss deleted file mode 100644 index 7fa925905b0..00000000000 --- a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.cell-icon-container { - display: flex; - align-items: center; - - .icon-container { - display: flex; - } - - :global(.btn-link) { - line-height: initial; - } -} diff --git a/packages/components/src/VirtualizedList/CellIconText/CellIconText.component.js b/packages/components/src/VirtualizedList/CellIconText/CellIconText.component.js index 2b45abb5a3d..26e3faa1285 100644 --- a/packages/components/src/VirtualizedList/CellIconText/CellIconText.component.js +++ b/packages/components/src/VirtualizedList/CellIconText/CellIconText.component.js @@ -3,7 +3,7 @@ import { Component } from 'react'; import Icon from '../../Icon'; import { getTheme } from '../../theme'; import TooltipTrigger from '../../TooltipTrigger'; -import theme from './CellIconText.module.scss'; +import theme from './CellIconText.module.css'; const css = getTheme(theme); diff --git a/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.css b/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.css new file mode 100644 index 00000000000..9d6a52d158e --- /dev/null +++ b/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.css @@ -0,0 +1,12 @@ +/* stylelint-disable color-hex-case */ +.tc-icon-text { + display: flex; + align-items: center; +} +.tc-icon-text .label { + min-width: 0; + margin-left: 10px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} diff --git a/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.scss b/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.scss deleted file mode 100644 index 2158b8d1170..00000000000 --- a/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-icon-text { - display: flex; - align-items: center; - - .label { - min-width: 0; - margin-left: $padding-small; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } -} diff --git a/packages/components/src/VirtualizedList/CellLink/CellLink.component.js b/packages/components/src/VirtualizedList/CellLink/CellLink.component.js index e75b174f7d1..54246d2eaba 100644 --- a/packages/components/src/VirtualizedList/CellLink/CellLink.component.js +++ b/packages/components/src/VirtualizedList/CellLink/CellLink.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import { Link } from '@talend/design-system'; import TooltipTrigger from '../../TooltipTrigger'; -import styles from './CellLink.module.scss'; +import styles from './CellLink.module.css'; import classNames from 'classnames'; /** * Cell renderer that displays a link diff --git a/packages/components/src/VirtualizedList/CellLink/CellLink.module.css b/packages/components/src/VirtualizedList/CellLink/CellLink.module.css new file mode 100644 index 00000000000..c644c52a392 --- /dev/null +++ b/packages/components/src/VirtualizedList/CellLink/CellLink.module.css @@ -0,0 +1,7 @@ +/* stylelint-disable color-hex-case */ +.cell-link-container > a { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.cell-link-container > a > span { + border-bottom: none !important; /* stylelint-disable-line declaration-no-important */ +} diff --git a/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss b/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss deleted file mode 100644 index e02b375614c..00000000000 --- a/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -.cell-link-container { - > a { - color: tokens.$coral-color-neutral-text; - - > span { - border-bottom: none !important; /* stylelint-disable-line declaration-no-important */ - } - } -} diff --git a/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.component.js b/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.component.js index 0b42580d4d5..b1359e8f1e4 100644 --- a/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.component.js +++ b/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.component.js @@ -3,7 +3,7 @@ import { Component } from 'react'; import classnames from 'classnames'; import Action from '../../Actions/Action'; -import styles from './CellWithIcon.module.scss'; +import styles from './CellWithIcon.module.css'; /** * Cell renderer that displays text + icon diff --git a/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.css b/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.css new file mode 100644 index 00000000000..4983a7b2e62 --- /dev/null +++ b/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.css @@ -0,0 +1,12 @@ +/* stylelint-disable color-hex-case */ +.cell-icon-container { + display: flex; + align-items: center; +} +.cell-icon-container .icon-container { + display: flex; +} +.cell-icon-container :global(.btn-link) { + line-height: initial; + min-height: auto; +} diff --git a/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.scss b/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.scss deleted file mode 100644 index 9b12b61b393..00000000000 --- a/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.cell-icon-container { - display: flex; - align-items: center; - - .icon-container { - display: flex; - } - - :global(.btn-link) { - line-height: initial; - min-height: auto; - } -} diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitle.component.js b/packages/components/src/VirtualizedList/CellTitle/CellTitle.component.js index f32528fbb8d..a9709f7c08e 100644 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitle.component.js +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitle.component.js @@ -8,7 +8,7 @@ import CellTitleSelector from './CellTitleSelector.component'; import CellTitleActions from './CellTitleActions.component'; import { cellTitleDisplayModes, listTypes } from '../utils/constants'; -import theme from './CellTitle.module.scss'; +import theme from './CellTitle.module.css'; const { LARGE } = listTypes; const { TITLE_MODE_TEXT } = cellTitleDisplayModes; diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.css b/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.css new file mode 100644 index 00000000000..071a004cf91 --- /dev/null +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.css @@ -0,0 +1,127 @@ +/* stylelint-disable declaration-no-important */ +/* stylelint-disable color-hex-case */ +.tc-list-title { + display: flex; + align-items: center; + position: relative; + height: 100%; +} +.tc-list-title .icon, +.tc-list-title .span > .icon { + filter: url('#talend-grayscale'); + flex-shrink: 0; + height: 1.25rem; + width: 1.25rem; + vertical-align: middle; +} +.tc-list-title .icon + .edit-form, +.tc-list-title span + .edit-form { + padding-left: 15px; +} +.tc-list-title .edit-form { + flex-grow: 1; + height: 100%; +} +.tc-list-title .edit-form > input { + width: 100%; + height: 100%; +} +.tc-list-title .main-title { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; + padding: 0 15px; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font-size: inherit; + font-weight: 600; + text-transform: none; + text-align: left; +} +.tc-list-title .main-title > span { + display: inline; +} +.tc-list-title .main-title:first-child { + padding-left: 0; +} +.tc-list-title .main-title:hover, +.tc-list-title .main-title:focus { + text-decoration: none; +} + +.tc-list-title-filter:not(.tc-list-title-disabled):hover .icon, +.tc-list-title-filter:not(.tc-list-title-disabled):focus-within .icon { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + filter: none; +} +.tc-list-title-filter:not(.tc-list-title-disabled):hover .main-title, +.tc-list-title-filter:not(.tc-list-title-disabled):focus-within .main-title { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} + +:global(.tc-list-large-inner-box):hover :global(.tc-list-title .cell-title-actions), +:global(.tc-list-large-inner-box):focus :global(.tc-list-title .cell-title-actions), +:global(.tc-list-large-inner-box):focus-within :global(.tc-list-title .cell-title-actions), +:global(.ReactVirtualized__Table__row):hover :global(.tc-list-title .cell-title-actions), +:global(.ReactVirtualized__Table__row):focus :global(.tc-list-title .cell-title-actions), +:global(.ReactVirtualized__Table__row):focus-within :global(.tc-list-title .cell-title-actions) { + opacity: 1; + width: 100%; + transition: opacity 0.15s ease-in; + overflow: visible; +} + +:global(.ReactVirtualized__Grid__innerScrollContainer):hover, +:global(.ReactVirtualized__Grid__innerScrollContainer):focus, +:global(.ReactVirtualized__Grid__innerScrollContainer):focus-within, +:global(.ReactVirtualized__Table__row):hover, +:global(.ReactVirtualized__Table__row):focus, +:global(.ReactVirtualized__Table__row):focus-within { + overflow: visible !important; +} +:global(.ReactVirtualized__Grid__innerScrollContainer):hover :global(.tc-list-title-cell), +:global(.ReactVirtualized__Grid__innerScrollContainer):hover + :global(.tc-list-title-cell) + :global(.tc-actions.btn-group), +:global(.ReactVirtualized__Grid__innerScrollContainer):focus :global(.tc-list-title-cell), +:global(.ReactVirtualized__Grid__innerScrollContainer):focus + :global(.tc-list-title-cell) + :global(.tc-actions.btn-group), +:global(.ReactVirtualized__Grid__innerScrollContainer):focus-within :global(.tc-list-title-cell), +:global(.ReactVirtualized__Grid__innerScrollContainer):focus-within + :global(.tc-list-title-cell) + :global(.tc-actions.btn-group), +:global(.ReactVirtualized__Table__row):hover :global(.tc-list-title-cell), +:global(.ReactVirtualized__Table__row):hover + :global(.tc-list-title-cell) + :global(.tc-actions.btn-group), +:global(.ReactVirtualized__Table__row):focus :global(.tc-list-title-cell), +:global(.ReactVirtualized__Table__row):focus + :global(.tc-list-title-cell) + :global(.tc-actions.btn-group), +:global(.ReactVirtualized__Table__row):focus-within :global(.tc-list-title-cell), +:global(.ReactVirtualized__Table__row):focus-within + :global(.tc-list-title-cell) + :global(.tc-actions.btn-group) { + overflow: visible !important; +} + +:global(.ReactVirtualized__Table__row):hover, +:global(.ReactVirtualized__Table__row):focus, +:global(.ReactVirtualized__Table__row):focus-within { + /* avoid scrolling over x axis */ + width: auto !important; + right: 0 !important; + padding: 0 !important; +} + +:global(.tc-list-title-cell) { + display: flex; + min-width: 0; + line-height: 2.125rem; +} +:global(.tc-list-title-cell) > *:first-child { + min-width: 0; + flex: 1; +} diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss b/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss deleted file mode 100644 index 94afbe0b2ae..00000000000 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss +++ /dev/null @@ -1,161 +0,0 @@ -/* stylelint-disable declaration-no-important */ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-list-title-icon-size: $svg-rg-size !default; - -.tc-list-title { - display: flex; - align-items: center; - position: relative; - height: 100%; - - .icon, - .span > .icon { - filter: url('#talend-grayscale'); - flex-shrink: 0; - height: $tc-list-title-icon-size; - width: $tc-list-title-icon-size; - vertical-align: middle; - } - - .icon + .edit-form, - span + .edit-form { - padding-left: $padding-normal; - } - - .edit-form { - flex-grow: 1; - height: 100%; - - > input { - width: 100%; - height: 100%; - } - } - - .main-title { - flex-grow: 1; - - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: block; - - padding: 0 $padding-normal; - - color: tokens.$coral-color-neutral-text; - font-size: inherit; - font-weight: 600; - text-transform: none; - text-align: left; - - > span { - display: inline; - } - - &:first-child { - padding-left: 0; - } - - &:hover, - &:focus { - text-decoration: none; - } - } -} - -.tc-list-title-filter { - &:not(.tc-list-title-disabled) { - &:hover, - &:focus-within { - .icon { - color: tokens.$coral-color-accent-text; - filter: none; - } - - .main-title { - color: tokens.$coral-color-accent-text; - } - } - } -} - -// manage actions display on row hover -:global(.tc-list-large-inner-box), -:global(.ReactVirtualized__Table__row) { - &:hover, - &:focus, - &:focus-within { - :global(.tc-list-title .cell-title-actions) { - opacity: 1; - width: 100%; - transition: opacity 0.15s ease-in; - overflow: visible; - } - } -} - -:global(.tc-list-large-row.active .tc-list-large-inner-box), -:global(.ReactVirtualized__Table__row.active) { - &:hover, - &:focus, - &:focus-within { - :global(.tc-list-title .cell-title-actions) { - // background: linear-gradient(90deg, tokens.$coral-color-neutral-background, tokens.$coral-color-accent-background $padding-large); - } - } -} - -:global(.tc-list-large-row.selected .tc-list-large-inner-box), -:global(.ReactVirtualized__Table__row.selected) { - &:hover, - &:focus, - &:focus-within { - :global(.tc-list-title .cell-title-actions) { - // background: linear-gradient(90deg, tokens.$coral-color-neutral-background, tokens.$coral-color-accent-background $padding-large); - } - } -} - -// START : hack to allow actions dropdown to display -// there are important to override some inline styles injected by react-virtualized... sorry ! -// sass-lint:disable no-important -:global(.ReactVirtualized__Grid__innerScrollContainer), -:global(.ReactVirtualized__Table__row) { - &:hover, - &:focus, - &:focus-within { - overflow: visible !important; - - :global(.tc-list-title-cell), - :global(.tc-list-title-cell) :global(.tc-actions.btn-group) { - overflow: visible !important; - } - } -} - -:global(.ReactVirtualized__Table__row) { - &:hover, - &:focus, - &:focus-within { - /* avoid scrolling over x axis */ - width: auto !important; - right: 0 !important; - padding: 0 !important; - } -} - -:global(.tc-list-title-cell) { - display: flex; - min-width: 0; - line-height: $btn-line-height; - - > *:first-child { - min-width: 0; - flex: 1; - } -} - -// sass-lint:enable no-important -// END : hack to allow actions dropdown to display diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.component.js b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.component.js index 95d3e4b2adc..0a67cbe6746 100644 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.component.js +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.component.js @@ -8,7 +8,7 @@ import { cellTitleDisplayModes, listTypes } from '../utils/constants'; import getDefaultT from '../../translate'; import I18N_DOMAIN_COMPONENTS from '../../constants'; -import theme from './CellTitleActions.module.scss'; +import theme from './CellTitleActions.module.css'; import Action from '../../Actions/Action/Action.component'; const { TITLE_MODE_INPUT, TITLE_MODE_TEXT } = cellTitleDisplayModes; diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.css b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.css new file mode 100644 index 00000000000..eeee45879a0 --- /dev/null +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.css @@ -0,0 +1,52 @@ +/* stylelint-disable color-hex-case */ +.main-title-actions-group { + display: flex; + align-items: center; + flex-grow: 0; + position: relative; + right: 0; + top: 0; + height: 2.125rem; +} +.main-title-actions-group .cell-title-actions { + opacity: 0; + width: 0; + overflow: hidden; +} +.main-title-actions-group .cell-title-actions:not(:last-child)::after { + content: '|'; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding-top: 5px; +} +.main-title-actions-group :global .btn-group > .btn-link, +.main-title-actions-group :global .tc-action-button-positionned > .btn-link { + padding: 0 5px; +} +.main-title-actions-group :global .btn-group > .btn-link .tc-svg-icon[name='talend-caret-down'], +.main-title-actions-group + :global + .tc-action-button-positionned + > .btn-link + .tc-svg-icon[name='talend-caret-down'] { + display: none; +} +.main-title-actions-group :global .btn-group > .btn-link .tc-svg-icon, +.main-title-actions-group :global .tc-action-button-positionned > .btn-link .tc-svg-icon { + margin: 0; + height: 1.25rem; + width: 1.25rem; +} +.main-title-actions-group :global .btn-group > .dropdown-menu, +.main-title-actions-group :global .btn-group.dropup > .dropdown-menu { + margin-top: 5px; + overflow: auto; + left: 50%; + transform: translateX(-50%); +} + +:global(.tc-list-large) .main-title-actions-group :global .dropup.btn-group > .dropdown-menu, +:global(.tc-list-large) .main-title-actions-group :global .btn-group > .dropdown-menu { + right: 0; + left: auto; + transform: none; +} diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss deleted file mode 100644 index f156d43cd1c..00000000000 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss +++ /dev/null @@ -1,67 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-list-title-actions-ellipsis: '\22ee'; -$tc-list-title-dropdown-menu-triangle: '\25b2'; -$tc-list-title-dropup-menu-triangle: '\25bc'; - -.main-title-actions-group { - display: flex; - align-items: center; - flex-grow: 0; - position: relative; - right: 0; - top: 0; - height: $btn-line-height; - - .cell-title-actions { - // background: linear-gradient(90deg, tokens.$coral-color-neutral-background, tokens.$coral-color-accent-background-hover $padding-large); - opacity: 0; - width: 0; - overflow: hidden; - - &:not(:last-child)::after { - content: '|'; - color: tokens.$coral-color-neutral-text; - padding-top: $padding-smaller; - } - } - - :global { - .btn-group, - .tc-action-button-positionned { - > .btn-link { - padding: 0 $padding-smaller; - - .tc-svg-icon[name='talend-caret-down'] { - display: none; - } - - .tc-svg-icon { - margin: 0; - height: 1.25rem; - width: 1.25rem; - } - } - } - - .btn-group > .dropdown-menu, - .btn-group.dropup > .dropdown-menu { - margin-top: 5px; - overflow: auto; - left: 50%; - transform: translateX(-50%); - } - } -} - -:global(.tc-list-large) .main-title-actions-group { - :global { - .dropup.btn-group > .dropdown-menu, - .btn-group > .dropdown-menu { - right: 0; - left: auto; - transform: none; - } - } -} diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.component.js b/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.component.js index 82889e7e033..32bf88dc6ea 100644 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.component.js +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.component.js @@ -2,7 +2,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import theme from './CellTitle.module.scss'; +import theme from './CellTitle.module.css'; /** * Title input mode. diff --git a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.component.js b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.component.js index fe13e772dba..061fbe6c5a7 100644 --- a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.component.js +++ b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import { useMemo } from 'react'; import classnames from 'classnames'; import Checkbox from '../../Checkbox'; -import theme from './HeaderCheckbox.module.scss'; +import theme from './HeaderCheckbox.module.css'; import { useTranslation } from 'react-i18next'; import I18N_DOMAIN_COMPONENTS from '../../constants'; diff --git a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.css b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.css new file mode 100644 index 00000000000..08958ab89a6 --- /dev/null +++ b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.css @@ -0,0 +1,9 @@ +/* stylelint-disable color-hex-case */ +.tc-list-checkbox :global(.checkbox) { + margin: 0; + height: 12px; + display: flex; +} +.tc-list-checkbox :global(.checkbox) label { + padding-left: 0; +} diff --git a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.scss b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.scss deleted file mode 100644 index e0bc5701b62..00000000000 --- a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-list-checkbox { - :global(.checkbox) { - margin: 0; - height: $font-size-small; - display: flex; - - label { - padding-left: 0; - } - } -} diff --git a/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.component.js b/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.component.js index 6226386fb1e..b50788714cc 100644 --- a/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.component.js +++ b/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.component.js @@ -3,7 +3,7 @@ import classnames from 'classnames'; import { SortIndicator } from 'react-virtualized'; import Icon from '../../Icon'; -import theme from './HeaderIcon.module.scss'; +import theme from './HeaderIcon.module.css'; /** * This renderer render the header with an icon diff --git a/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.css b/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.css new file mode 100644 index 00000000000..b3825b41292 --- /dev/null +++ b/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.css @@ -0,0 +1,10 @@ +/* stylelint-disable color-hex-case */ +.tc-header-icon { + display: flex; + flex-grow: 1; + justify-content: center; + margin-top: 3px; +} +.tc-header-icon span { + line-height: 0; +} diff --git a/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.scss b/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.scss deleted file mode 100644 index aee6599b6d0..00000000000 --- a/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -$tc-list-header-icon-margin-top: 3px !default; - -.tc-header-icon { - display: flex; - flex-grow: 1; - justify-content: center; - margin-top: $tc-list-header-icon-margin-top; - - span { - line-height: 0; - } -} diff --git a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js index 917bf84c985..d60f1b5f04d 100644 --- a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js +++ b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js @@ -10,7 +10,7 @@ import { getTheme } from '../../theme'; import getDefaultT from '../../translate'; import { ConsumerVirtualizedList } from '../virtualizedListContext'; -import headerResizableCssModule from './HeaderResizable.module.scss'; +import headerResizableCssModule from './HeaderResizable.module.css'; const theme = getTheme(headerResizableCssModule); diff --git a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.css b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.css new file mode 100644 index 00000000000..1f04a33ff5a --- /dev/null +++ b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.css @@ -0,0 +1,39 @@ +/* stylelint-disable color-hex-case */ +.tc-header-cell-resizable { + display: flex; + justify-content: space-between; + width: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.tc-header-cell-resizable-resizing { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); +} +.tc-header-cell-resizable-truncated-text { + align-self: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-flex; +} +.tc-header-cell-resizable-drag-button-handle-icon { + min-width: 5px; + width: 5px; + height: 100%; + cursor: col-resize; + opacity: 0; +} +.tc-header-cell-resizable-drag-button-handle-icon:hover, +.tc-header-cell-resizable-drag-button-handle-icon:active { + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + opacity: 1; +} + +.tc-header-cell-resizable-drag-accessibility:focus + ~ .tc-header-cell-resizable-drag-button-handle-icon { + opacity: 1; + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); +} diff --git a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss deleted file mode 100644 index b0f0e9a56bf..00000000000 --- a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$drag-element-width: $padding-smaller; - -.tc-header-cell-resizable { - display: flex; - justify-content: space-between; - width: 100%; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - - &-resizing { - background-color: tokens.$coral-color-accent-background; - } - - &-truncated-text { - align-self: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: inline-flex; - } - - &-drag-button { - &-handle { - &-icon { - min-width: $drag-element-width; - width: $drag-element-width; - height: 100%; - cursor: col-resize; - opacity: 0; - - &:hover, - &:active { - background: tokens.$coral-color-accent-background; - opacity: 1; - } - } - } - } -} - -.tc-header-cell-resizable-drag-accessibility:focus ~ .tc-header-cell-resizable-drag-button-handle-icon { - opacity: 1; - background: tokens.$coral-color-accent-background; -} diff --git a/packages/components/src/VirtualizedList/ListGrid/ListGrid.component.js b/packages/components/src/VirtualizedList/ListGrid/ListGrid.component.js index cb4a0b64f5f..f1b2cbf54f0 100644 --- a/packages/components/src/VirtualizedList/ListGrid/ListGrid.component.js +++ b/packages/components/src/VirtualizedList/ListGrid/ListGrid.component.js @@ -3,7 +3,7 @@ import { List as VirtualizedList } from 'react-virtualized'; import getRowSelectionRenderer from '../RowSelection'; -import theme from './ListGrid.module.scss'; +import theme from './ListGrid.module.css'; import { decorateRowClick, decorateRowDoubleClick } from '../event/rowclick'; /** diff --git a/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.css b/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.css new file mode 100644 index 00000000000..f257051ae55 --- /dev/null +++ b/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.css @@ -0,0 +1,4 @@ +/* stylelint-disable color-hex-case */ +.tc-list-list { + padding: 15px; +} diff --git a/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.scss b/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.scss deleted file mode 100644 index 06dc4203331..00000000000 --- a/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-list-list { - padding: $padding-normal; -} diff --git a/packages/components/src/VirtualizedList/ListTable/ListTable.component.js b/packages/components/src/VirtualizedList/ListTable/ListTable.component.js index 357499a4868..0827087c235 100644 --- a/packages/components/src/VirtualizedList/ListTable/ListTable.component.js +++ b/packages/components/src/VirtualizedList/ListTable/ListTable.component.js @@ -11,7 +11,7 @@ import Skeleton from '../../Skeleton'; import { decorateRowClick, decorateRowDoubleClick } from '../event/rowclick'; import { getTheme } from '../../theme'; -import theme from './ListTable.module.scss'; +import theme from './ListTable.module.css'; import rowThemes from './RowThemes'; const css = getTheme(theme); diff --git a/packages/components/src/VirtualizedList/ListTable/ListTable.module.css b/packages/components/src/VirtualizedList/ListTable/ListTable.module.css new file mode 100644 index 00000000000..cc0e0ecddf8 --- /dev/null +++ b/packages/components/src/VirtualizedList/ListTable/ListTable.module.css @@ -0,0 +1,74 @@ +/* stylelint-disable color-hex-case */ +.tc-list-table-right-action { + position: absolute; + right: 0; + margin-top: var(--coral-spacing-xxs, 0.25rem); + margin-right: var(--coral-spacing-s, 0.75rem); +} + +.tc-list-table { + background-color: var(--coral-color-neutral-background, white); +} +.tc-list-table .row { + border-bottom: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background: var(--coral-color-neutral-background, white); + display: flex; + align-items: center; +} +.tc-list-table .row:hover, +.tc-list-table .row:focus, +.tc-list-table .row:focus-within { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.tc-list-table .row:hover .cell, +.tc-list-table .row:focus .cell, +.tc-list-table .row:focus-within .cell { + border-right: 1px solid var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.tc-list-table.right-action .tc-list-headerRow > *:last-child { + padding-right: var(--coral-spacing-l, 1.75rem); +} +.tc-list-table .tc-list-headerRow { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2) inset; +} +.tc-list-table .tc-list-headerRow .header { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + display: inline-flex; + font-size: 0.75rem; + font-weight: 600; + padding: 10px; + overflow: hidden; +} +.tc-list-table .tc-list-headerRow .header :global(.ReactVirtualized__Table__headerTruncatedText) { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.tc-list-table .tc-list-headerRow .header :global(.ReactVirtualized__Table__sortableHeaderIcon) { + flex-shrink: 0; +} +.tc-list-table :global(.ReactVirtualized__Table__sortableHeaderColumn) { + cursor: pointer; +} +.tc-list-table .grid { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2) inset; +} +.tc-list-table .grid .cell { + border-right: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0 10px; + height: 100%; + display: flex; + align-items: center; +} +.tc-list-table .grid .cell:global(.tc-list-cell-), +.tc-list-table .grid .cell:last-child { + border-right: none; +} +.tc-list-table [class*='tc-list-cell-'] { + flex: 1 1 100%; +} diff --git a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss deleted file mode 100644 index 2c3df02a773..00000000000 --- a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss +++ /dev/null @@ -1,88 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tc-list-table-cell-padding: $padding-small !default; - -.tc-list-table-right-action { - position: absolute; - right: 0; - margin-top: tokens.$coral-spacing-xxs; - margin-right: tokens.$coral-spacing-s; -} - -.tc-list-table { - background-color: tokens.$coral-color-neutral-background; - - .row { - border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - background: tokens.$coral-color-neutral-background; - display: flex; - align-items: center; - - &:hover, - &:focus, - &:focus-within { - background-color: tokens.$coral-color-neutral-background-medium; - - .cell { - border-right: 1px solid tokens.$coral-color-neutral-border-weak; - } - } - } - - &.right-action .tc-list-headerRow > *:last-child { - padding-right: tokens.$coral-spacing-l; - } - - .tc-list-headerRow { - box-shadow: $shadow-default; - - .header { - color: tokens.$coral-color-neutral-text; - display: inline-flex; - font-size: 0.75rem; - font-weight: 600; - padding: $tc-list-table-cell-padding; - overflow: hidden; - - :global(.ReactVirtualized__Table__headerTruncatedText) { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - :global(.ReactVirtualized__Table__sortableHeaderIcon) { - flex-shrink: 0; - } - } - } - - :global(.ReactVirtualized__Table__sortableHeaderColumn) { - cursor: pointer; - } - - .grid { - box-shadow: $shadow-default; - - .cell { - border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding: 0 $tc-list-table-cell-padding; - - height: 100%; - display: flex; - align-items: center; - // selection's checkbox has no "name" attribute, so "tc-list-cell-" refer to this cell - &:global(.tc-list-cell-), - &:last-child { - border-right: none; - } - } - } - - [class*='tc-list-cell-'] { - flex: 1 1 100%; - } -} diff --git a/packages/components/src/VirtualizedList/ListTable/RowThemes.js b/packages/components/src/VirtualizedList/ListTable/RowThemes.js index 0566742b185..5ac6b8b245b 100644 --- a/packages/components/src/VirtualizedList/ListTable/RowThemes.js +++ b/packages/components/src/VirtualizedList/ListTable/RowThemes.js @@ -1,7 +1,4 @@ -import theme from './ListTable.module.scss'; -import cellActionsTheme from '../CellActions/RowTableCellActions.module.scss'; +import theme from './ListTable.module.css'; +import cellActionsTheme from '../CellActions/RowTableCellActions.module.css'; -export default [ - theme.row, - cellActionsTheme.row, -]; +export default [theme.row, cellActionsTheme.row]; diff --git a/packages/components/src/VirtualizedList/NoRows/NoRows.component.js b/packages/components/src/VirtualizedList/NoRows/NoRows.component.js index b70614cddc4..e9bea0a0a6f 100644 --- a/packages/components/src/VirtualizedList/NoRows/NoRows.component.js +++ b/packages/components/src/VirtualizedList/NoRows/NoRows.component.js @@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next'; import getDefaultT from '../../translate'; import I18N_DOMAIN_COMPONENTS from '../../constants'; -import theme from './NoRows.module.scss'; +import theme from './NoRows.module.css'; export function NoRowsComponent(props) { return ( diff --git a/packages/components/src/VirtualizedList/NoRows/NoRows.module.scss b/packages/components/src/VirtualizedList/NoRows/NoRows.module.css similarity index 74% rename from packages/components/src/VirtualizedList/NoRows/NoRows.module.scss rename to packages/components/src/VirtualizedList/NoRows/NoRows.module.css index 2fc5b56aeae..576dd6c92de 100644 --- a/packages/components/src/VirtualizedList/NoRows/NoRows.module.scss +++ b/packages/components/src/VirtualizedList/NoRows/NoRows.module.css @@ -1,5 +1,4 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - +/* stylelint-disable color-hex-case */ .tc-virtualizedlist-no-result, :global(.tc-virtualizedlist-no-result) { display: flex; diff --git a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.component.js b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.component.js index 9efd974a69c..214c4e9a355 100644 --- a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.component.js +++ b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.component.js @@ -12,7 +12,7 @@ import CollapsiblePanel from '../../CollapsiblePanel/CollapsiblePanel.component' import { getId, getRowData } from '../utils/gridrow'; import { Gesture } from '@talend/react-a11y'; -import theme from './RowCollapsiblePanel.module.scss'; +import theme from './RowCollapsiblePanel.module.css'; const cache = new CellMeasurerCache({ fixedWidth: true }); const options = { diff --git a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.css b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.css new file mode 100644 index 00000000000..91d5ec2a5ac --- /dev/null +++ b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.css @@ -0,0 +1,24 @@ +/* stylelint-disable color-hex-case */ +:global(.tc-collapsible-row) :global(.panel-collapse) { + transition-duration: 0s; +} +:global(.tc-collapsible-row) :global(.tc-collapsible-panel) { + margin-bottom: 10px; + /* margin-top: 10px; */ +} +:global(.tc-collapsible-row) .loading-collapsible-panel { + height: 2.5rem; + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + border-radius: 4px; + margin-bottom: 10px; + display: flex; + align-items: center; +} +:global(.tc-collapsible-row) .loading-collapsible-panel > * { + display: inline-block; + flex: 1; +} +:global(.tc-collapsible-row) .loading-collapsible-panel :first-child { + flex: 2; + margin: 0 10px; +} diff --git a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss deleted file mode 100644 index 16b526d330c..00000000000 --- a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -:global(.tc-collapsible-row) { - :global(.panel[class*='collapsible-panel']) { - margin-bottom: $padding-small; - } - - :global(.panel-collapse) { - transition-duration: 0s; - } - - :global(.tc-collapsible-panel) { - margin-bottom: $padding-small; - margin-top: $padding-small; - } - - .loading-collapsible-panel { - height: 2.5rem; - background-color: tokens.$coral-color-neutral-background-medium; - border-radius: $border-radius-base; - margin-bottom: $padding-small; - - display: flex; - align-items: center; - - > * { - display: inline-block; - flex: 1; - } - - :first-child { - flex: 2; - margin: 0 $padding-small; - } - } -} diff --git a/packages/components/src/VirtualizedList/RowCollapsiblePanel/__snapshots__/RowCollapsiblePanel.test.js.snap b/packages/components/src/VirtualizedList/RowCollapsiblePanel/__snapshots__/RowCollapsiblePanel.test.js.snap index 8026e649601..11448729e40 100644 --- a/packages/components/src/VirtualizedList/RowCollapsiblePanel/__snapshots__/RowCollapsiblePanel.test.js.snap +++ b/packages/components/src/VirtualizedList/RowCollapsiblePanel/__snapshots__/RowCollapsiblePanel.test.js.snap @@ -14,7 +14,8 @@ exports[`RowCollapsiblePanel should render collapsible panel row 1`] = ` tabindex="0" >
div > div { + opacity: 0.54; +} + +:global(.tc-list-list) .row-selection.selected :global(.tc-list-large-inner-box) { + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); +} +:global(.tc-list-list) .row-selection.selected :global(.tc-list-large-inner-box):hover, +:global(.tc-list-list) .row-selection.selected :global(.tc-list-large-inner-box):focus, +:global(.tc-list-list) .row-selection.selected :global(.tc-list-large-inner-box):focus-within { + background: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +:global(.tc-list-list) .row-selection.active :global(.tc-list-large-inner-box) { + background: var(--coral-color-accent-background-active, hsl(204, 60%, 63%)); +} +:global(.tc-list-list) .row-selection.active :global(.tc-list-large-inner-box):hover, +:global(.tc-list-list) .row-selection.active :global(.tc-list-large-inner-box):focus, +:global(.tc-list-list) .row-selection.active :global(.tc-list-large-inner-box):focus-within { + background: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +:global(.tc-list-list) .row-selection.disabled :global(.tc-list-large-inner-box) > div > div { + opacity: 0.54; +} diff --git a/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss b/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss deleted file mode 100644 index c43a1f2bf48..00000000000 --- a/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens' as tokens; - -:global(.tc-list-table) { - .row-selection.selected { - background: tokens.$coral-color-accent-background; - - &:hover, - &:focus, - &:focus-within { - background: tokens.$coral-color-accent-background-hover; - } - } - - .row-selection.active { - background: tokens.$coral-color-accent-background-active; - - &:hover, - &:focus, - &:focus-within { - background: tokens.$coral-color-accent-background-hover; - } - } - - .row-selection.disabled { - > div > div { - opacity: 0.54; - } - } -} - -:global(.tc-list-list) { - .row-selection.selected :global(.tc-list-large-inner-box) { - background: tokens.$coral-color-accent-background; - - &:hover, - &:focus, - &:focus-within { - background: tokens.$coral-color-accent-background-hover; - } - } - - .row-selection.active :global(.tc-list-large-inner-box) { - background: tokens.$coral-color-accent-background-active; - - &:hover, - &:focus, - &:focus-within { - background: tokens.$coral-color-accent-background-hover; - } - } - - .row-selection.disabled :global(.tc-list-large-inner-box) { - > div > div { - opacity: 0.54; - } - } -} diff --git a/packages/components/src/VirtualizedList/VirtualizedList.component.js b/packages/components/src/VirtualizedList/VirtualizedList.component.js index 6423bcbe375..c7c4d0d74da 100644 --- a/packages/components/src/VirtualizedList/VirtualizedList.component.js +++ b/packages/components/src/VirtualizedList/VirtualizedList.component.js @@ -7,8 +7,8 @@ import RendererSelector from './RendererSelector.component'; import propTypes from './PropTypes'; import { insertSelectionConfiguration, toColumns } from './utils/tablerow'; import { resizeColumns, extractResizableProps } from './utils/resizable'; -import theme from './VirtualizedList.module.scss'; -import tableTheme from './ListTable/ListTable.module.scss'; +import theme from './VirtualizedList.module.css'; +import tableTheme from './ListTable/ListTable.module.css'; import { virtualizedListContext } from './virtualizedListContext'; diff --git a/packages/components/src/VirtualizedList/VirtualizedList.module.scss b/packages/components/src/VirtualizedList/VirtualizedList.module.css similarity index 58% rename from packages/components/src/VirtualizedList/VirtualizedList.module.scss rename to packages/components/src/VirtualizedList/VirtualizedList.module.css index 3fbd1171b60..c2b76956aeb 100644 --- a/packages/components/src/VirtualizedList/VirtualizedList.module.scss +++ b/packages/components/src/VirtualizedList/VirtualizedList.module.css @@ -1,5 +1,4 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - +/* stylelint-disable color-hex-case */ :global(.tc-virtualizedlist-default-cell) { min-width: 0; text-overflow: ellipsis; @@ -9,16 +8,16 @@ :global(div[role='columnheader'].tc-header-resizable.ReactVirtualized__Table__headerColumn) { height: calc(100% - 2px); - padding: 0 0 0 $padding-large; + padding: 0 0 0 20px; position: relative; - - &:hover { - cursor: pointer; - } +} +:global(div[role='columnheader'].tc-header-resizable.ReactVirtualized__Table__headerColumn):hover { + cursor: pointer; +} +:global(div[role='columnheader'].tc-header-resizable.ReactVirtualized__Table__headerColumn) :global(.ReactVirtualized__Table__headerTruncatedText) { - align-self: center; - padding-left: $padding-small; - } + align-self: center; + padding-left: 10px; } .tc-list-progress { diff --git a/packages/components/src/WithDrawer/WithDrawer.component.js b/packages/components/src/WithDrawer/WithDrawer.component.js index ecbb7806c8c..d4a03fcd1eb 100644 --- a/packages/components/src/WithDrawer/WithDrawer.component.js +++ b/packages/components/src/WithDrawer/WithDrawer.component.js @@ -5,7 +5,7 @@ import get from 'lodash/get'; import Drawer from '../Drawer'; -import theme from './withDrawer.module.scss'; +import theme from './withDrawer.module.css'; /** * The Layout component is a container diff --git a/packages/components/src/WithDrawer/withDrawer.module.css b/packages/components/src/WithDrawer/withDrawer.module.css new file mode 100644 index 00000000000..dabb6bde771 --- /dev/null +++ b/packages/components/src/WithDrawer/withDrawer.module.css @@ -0,0 +1,55 @@ +/* stylelint-disable color-hex-case */ +.tc-with-drawer { + height: 100%; + position: initial; + display: flex; + flex-direction: column; + z-index: 3; +} + +.tc-with-drawer-container { + width: 100%; + top: 0; + right: 0; + z-index: 2; +} + +.tc-with-drawer-container > div { + height: 100%; + position: absolute; + top: 0; + right: 0; + width: 100%; + pointer-events: none; +} + +.tc-with-drawer-container > div:nth-child(1) :global(.stacked) { + width: 100%; +} +.tc-with-drawer-container > div:nth-child(2) :global(.stacked) { + width: 98%; +} +.tc-with-drawer-container > div:nth-child(3) :global(.stacked) { + width: 96%; +} +.tc-with-drawer-container > div:nth-child(4) :global(.stacked) { + width: 94%; +} +.tc-with-drawer-container > div:nth-child(5) :global(.stacked) { + width: 92%; +} +.tc-with-drawer-container > div:nth-child(6) :global(.stacked) { + width: 90%; +} +.tc-with-drawer-container > div:nth-child(7) :global(.stacked) { + width: 88%; +} +.tc-with-drawer-container > div:nth-child(8) :global(.stacked) { + width: 86%; +} +.tc-with-drawer-container > div:nth-child(9) :global(.stacked) { + width: 84%; +} +.tc-with-drawer-container > div:nth-child(10) :global(.stacked) { + width: 82%; +} diff --git a/packages/components/src/WithDrawer/withDrawer.module.scss b/packages/components/src/WithDrawer/withDrawer.module.scss deleted file mode 100644 index 8a1cb2f2879..00000000000 --- a/packages/components/src/WithDrawer/withDrawer.module.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use '@talend/bootstrap-theme/src/theme/guidelines' as *; - -.tc-with-drawer { - height: 100%; - position: initial; - display: flex; - flex-direction: column; - // Need to go above the Switcher buttons https://github.com/Talend/ui/blob/master/packages/design-system/src/components/Switch/Switch.style.ts#L12 - z-index: 3; -} - -.tc-with-drawer-container { - width: 100%; - top: 0; - right: 0; - // Need to go above the Typeahead icon https://github.com/Talend/ui/blob/f5bc529001c63cad7a6921e1284751efd750a579/packages/components/src/Typeahead/Typeahead.scss#L92 - z-index: 2; -} - -.tc-with-drawer-container > div { - height: 100%; - position: absolute; - top: 0; - right: 0; - width: 100%; - pointer-events: none; -} - -.tc-with-drawer-container > div { - @for $i from 1 through 10 { - &:nth-child(#{$i}) :global(.stacked) { - $width: 100% - (($i * 2) - 2); - width: $width; - } - } -} diff --git a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.css b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.css new file mode 100644 index 00000000000..5a10a442ba9 --- /dev/null +++ b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.css @@ -0,0 +1,36 @@ +.colored-bar--value.colored-bar__primary-bar { + fill: var(--coral-color-charts-default-weak, hsl(204, 59%, 73%)); +} +.colored-bar--value.colored-bar__label { + color: var(--coral-color-charts-default-strong, hsl(204, 92%, 29%)); +} +.colored-bar--value.colored-bar--hover { + fill: var(--coral-color-charts-default-strong, hsl(204, 92%, 29%)); +} +.colored-bar--value.colored-bar--hover.colored-bar__label { + color: var(--coral-color-charts-default-weak, hsl(204, 59%, 73%)); +} +.colored-bar--pattern.colored-bar__primary-bar { + fill: var(--coral-color-charts-warning-weak, hsl(22, 88%, 84%)); +} +.colored-bar--pattern.colored-bar__label { + color: var(--coral-color-charts-warning-strong, hsl(22, 75%, 42%)); +} +.colored-bar--pattern.colored-bar--hover { + fill: var(--coral-color-charts-warning-strong, hsl(22, 75%, 42%)); +} +.colored-bar--pattern.colored-bar--hover.colored-bar__label { + color: var(--coral-color-charts-warning-weak, hsl(22, 88%, 84%)); +} +.colored-bar__label-container { + pointer-events: none; + font: var(--coral-paragraph-s-bold, 600 0.75rem/140% 'Source Sans Pro'); +} +.colored-bar__label { + display: inline-flex; + align-items: center; + height: 100%; +} +.colored-bar__secondary-bar { + fill: var(--coral-color-charts-neutral-weak, hsl(0, 0%, 83%)); +} diff --git a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss deleted file mode 100755 index 4aeaf6ce590..00000000000 --- a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -@import '../bar-chart'; - -$module: colored-bar; - -.#{$module} { - @mixin colored-bar($style, $primaryColor, $secondaryColor) { - &--#{$style}.colored-bar__primary-bar { - fill: $primaryColor; - } - - &--#{$style}.colored-bar__label { - color: $secondaryColor; - } - - &--#{$style}.colored-bar--hover { - fill: $secondaryColor; - - &.colored-bar__label { - color: $primaryColor; - } - } - } - - @include colored-bar('value', $value-bar-primary-color, $value-bar-secondary-color); - - @include colored-bar('pattern', $pattern-bar-primary-color, $pattern-bar-secondary-color); - - &__label-container { - pointer-events: none; - font: tokens.$coral-paragraph-s-bold; - } - - &__label { - display: inline-flex; - align-items: center; - height: 100%; - } - - &__secondary-bar { - fill: tokens.$coral-color-charts-neutral-weak; - } -} diff --git a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.tsx b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.tsx index f34afca0bbd..79bef435b6b 100755 --- a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.tsx +++ b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.tsx @@ -2,7 +2,7 @@ import { Customized, Rectangle, RectangleProps } from 'recharts'; import { FormatValue } from '@talend/react-components'; import { useTranslation } from 'react-i18next'; import classNames from 'classnames'; -import styles from './ColoredBar.component.module.scss'; +import styles from './ColoredBar.component.module.css'; import { ChartStyle } from '../../../types'; type BarRenderProps = RectangleProps & { diff --git a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.module.css b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.module.css new file mode 100644 index 00000000000..232ef46a40d --- /dev/null +++ b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.module.css @@ -0,0 +1,15 @@ +.horizontal-bar-chart :global .recharts-responsive-container { + overflow: visible; +} +.horizontal-bar-chart :global .recharts-xAxis text, +.horizontal-bar-chart :global .recharts-yAxis text { + font-size: 0.75rem; + fill: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.horizontal-bar-chart :global .recharts-xAxis line, +.horizontal-bar-chart :global .recharts-yAxis line { + stroke: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.horizontal-bar-chart :global .recharts-tooltip-wrapper { + z-index: 999; +} diff --git a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.module.scss b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.module.scss deleted file mode 100755 index 84eeb3be760..00000000000 --- a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import '../bar-chart'; - -.horizontal-bar-chart { - @include override-recharts-styles(); -} diff --git a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.tsx b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.tsx index 4fab76d4068..cc2a72331c3 100755 --- a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.tsx +++ b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.tsx @@ -1,5 +1,5 @@ import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; -import styles from './HorizontalBarChart.component.module.scss'; +import styles from './HorizontalBarChart.component.module.css'; import { ChartEntry } from '../barChart.types'; import { getPrimaryBarValue, diff --git a/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.scss b/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.css old mode 100755 new mode 100644 similarity index 100% rename from packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.scss rename to packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.module.css diff --git a/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.tsx b/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.tsx index 5466f9a686a..009256b206c 100755 --- a/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.tsx +++ b/packages/dataviz/src/components/BarChart/TooltipCursor/TooltipCursor.component.tsx @@ -1,6 +1,6 @@ import { SVGProps } from 'react'; import { Customized } from 'recharts'; -import styles from './TooltipCursor.component.module.scss'; +import styles from './TooltipCursor.component.module.css'; export type TooltipCursorProps = SVGProps & { dataFeature?: string; diff --git a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.css b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.css new file mode 100644 index 00000000000..a08e2c5c472 --- /dev/null +++ b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.css @@ -0,0 +1,21 @@ +.vertical-bar-chart :global .recharts-responsive-container { + overflow: visible; +} +.vertical-bar-chart :global .recharts-xAxis text, +.vertical-bar-chart :global .recharts-yAxis text { + font-size: 0.75rem; + fill: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.vertical-bar-chart :global .recharts-xAxis line, +.vertical-bar-chart :global .recharts-yAxis line { + stroke: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.vertical-bar-chart :global .recharts-tooltip-wrapper { + z-index: 999; +} +.vertical-bar-chart :global .recharts-yAxis .recharts-cartesian-axis-tick:first-child { + transform: translateY(-10px); +} +.vertical-bar-chart :global .recharts-yAxis .recharts-cartesian-axis-tick:last-child { + transform: translateY(10px); +} diff --git a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss deleted file mode 100755 index 248f2f899ce..00000000000 --- a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../bar-chart'; - -.vertical-bar-chart { - @include override-recharts-styles(); - - :global { - .recharts-yAxis { - // Move Y label inside the chart - .recharts-cartesian-axis-tick:first-child { - transform: translateY(-10px); - } - - .recharts-cartesian-axis-tick:last-child { - transform: translateY(10px); - } - } - } -} diff --git a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.tsx b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.tsx index 6a71a571285..b5141511e79 100755 --- a/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.tsx +++ b/packages/dataviz/src/components/BarChart/VerticalBarChart/VerticalBarChart.component.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; -import styles from './VerticalBarChart.component.module.scss'; +import styles from './VerticalBarChart.component.module.css'; import { ChartEntry } from '../barChart.types'; import { getPrimaryBarValue, diff --git a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.css b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.css new file mode 100644 index 00000000000..04963283f02 --- /dev/null +++ b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.css @@ -0,0 +1,36 @@ +.box-plot { + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); +} +.box-plot line, +.box-plot rect { + fill: var(--coral-color-charts-default-strong, hsl(204, 92%, 29%)); + stroke: var(--coral-color-charts-neutral-strong, hsl(0, 0%, 12%)); + stroke-width: 1px; +} +.box-plot__whiskerPolyg { + fill: none; + stroke: var(--coral-color-charts-neutral-strong, hsl(0, 0%, 12%)); + stroke-width: 2; +} +.box-plot__center { + stroke-dasharray: 3, 3; +} +.box-plot__mean { + fill: white; + opacity: 0.5; + stroke: var(--coral-color-charts-default-strong, hsl(204, 92%, 29%)); + shape-rendering: geometricPrecision; + stroke-width: 0.8; +} +.box-plot__max-min-labels { + fill: var(--coral-color-charts-default, hsl(216, 82%, 48%)); +} +.box-plot__low-quantile-labels { + fill: var(--coral-color-charts-success-strong, hsl(139, 50%, 22%)); +} +.box-plot__up-quantile-labels { + fill: var(--coral-color-charts-danger-strong, hsl(359, 62%, 43%)); +} +.box-plot__mean-labels { + fill: var(--coral-color-charts-neutral-weak, hsl(0, 0%, 83%)); +} diff --git a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss deleted file mode 100755 index 23f16d597e4..00000000000 --- a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss +++ /dev/null @@ -1,47 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -// Imported (almost) as-is from TDP - -.box-plot { - font: tokens.$coral-paragraph-s; - - line, - rect { - fill: tokens.$coral-color-charts-default-strong; - stroke: tokens.$coral-color-charts-neutral-strong; - stroke-width: 1px; - } - - &__whiskerPolyg { - fill: none; - stroke: tokens.$coral-color-charts-neutral-strong; - stroke-width: 2; - } - - &__center { - stroke-dasharray: 3, 3; - } - - &__mean { - fill: white; - opacity: 0.5; - stroke: tokens.$coral-color-charts-default-strong; - shape-rendering: geometricPrecision; - stroke-width: 0.8; - } - - &__max-min-labels { - fill: tokens.$coral-color-charts-default; - } - - &__low-quantile-labels { - fill: tokens.$coral-color-charts-success-strong; - } - - &__up-quantile-labels { - fill: tokens.$coral-color-charts-danger-strong; - } - - &__mean-labels { - fill: tokens.$coral-color-charts-neutral-weak; - } -} diff --git a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.tsx b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.tsx index 2ea8957d7c6..fe68fc74103 100755 --- a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.tsx +++ b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.tsx @@ -6,7 +6,7 @@ import { scaleLinear, format as d3format, } from 'd3'; -import styles from './BoxPlot.component.module.scss'; +import styles from './BoxPlot.component.module.css'; const formatNumber = d3format(','); diff --git a/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.module.css b/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.module.css new file mode 100644 index 00000000000..3c98f47494a --- /dev/null +++ b/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.module.css @@ -0,0 +1,11 @@ +.vertical-chart-panel { + height: 100%; + display: flex; + flex-direction: column; +} +.vertical-chart-panel__chart-container { + flex: 1; +} +.vertical-chart-panel__slider-container { + flex: 0; +} diff --git a/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.module.scss b/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.module.scss deleted file mode 100755 index 529be6a0210..00000000000 --- a/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -$module: vertical-chart-panel; - -.#{$module} { - height: 100%; - display: flex; - flex-direction: column; - - &__chart-container { - flex: 1; - } - - &__slider-container { - flex: 0; - } -} diff --git a/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.tsx b/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.tsx index e55be1e7e6a..dd3fe81ed45 100755 --- a/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.tsx +++ b/packages/dataviz/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import VerticalBarChart, { VerticalBarChartEntry, } from '../../BarChart/VerticalBarChart/VerticalBarChart.component'; -import styles from './VerticalChartFilter.component.module.scss'; +import styles from './VerticalChartFilter.component.module.css'; import RangeFilter from '../../RangeFilter/RangeFilter.component'; import KeyValueTooltip from '../../KeyValueTooltip/KeyValueTooltip.component'; import { getVerticalBarChartTooltip } from '../../BarChart/barChart.tooltip'; diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.component.tsx b/packages/dataviz/src/components/GeoChart/GeoChart.component.tsx index aa4c07c540f..8985a54b0af 100644 --- a/packages/dataviz/src/components/GeoChart/GeoChart.component.tsx +++ b/packages/dataviz/src/components/GeoChart/GeoChart.component.tsx @@ -23,7 +23,7 @@ import { Icon } from '@talend/react-components'; import KeyValueTooltip, { TooltipEntry } from '../KeyValueTooltip/KeyValueTooltip.component'; -import styles from './GeoChart.module.scss'; +import styles from './GeoChart.module.css'; // Rename ugly d3 types type ColorScale = ScaleLinear; diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.module.css b/packages/dataviz/src/components/GeoChart/GeoChart.module.css new file mode 100644 index 00000000000..bf7554a3980 --- /dev/null +++ b/packages/dataviz/src/components/GeoChart/GeoChart.module.css @@ -0,0 +1,64 @@ +:export { + scaleMinColor: var( + --coral-color-charts-default-weak, + hsl(204, 59%, 73%) + ); /* stylelint-disable-line property-no-unknown */ + scaleMaxColor: var( + --coral-color-charts-default-strong, + hsl(204, 92%, 29%) + ); /* stylelint-disable-line property-no-unknown */ +} + +.geo-chart { + position: relative; +} +.geo-chart__title { + text-align: center; + margin: 8px 0; +} +.geo-chart__feature { + stroke: var(--coral-color-charts-neutral, hsl(0, 0%, 22%)); + stroke-width: 1px; + vector-effect: non-scaling-stroke; +} +.geo-chart__feature--disabled { + fill: var(--coral-color-charts-neutral-weak, hsl(0, 0%, 83%)); +} +.geo-chart__feature:not(.geo-chart__feature--disabled):hover { + fill: var( + --coral-color-charts-default, + hsl(216, 82%, 48%) + ) !important; /* stylelint-disable-line declaration-no-important */ + cursor: pointer; +} +.geo-chart__zoom { + position: absolute; + bottom: 15px; + left: 10px; +} +.geo-chart__zoom-button { + display: block; + background: transparent; + border: none; + outline: none; + padding: 0; + height: 20px; + width: 20px; +} +.geo-chart__zoom-button + .geo-chart__zoom-button { + margin-top: 5px; +} +.geo-chart__zoom-icon { + color: var(--coral-color-charts-neutral, hsl(0, 0%, 22%)); + width: 100%; + height: 100%; +} +.geo-chart__zoom-icon:not(:hover) .ti-background { + color: var(--coral-color-charts-neutral, hsl(0, 0%, 22%)); +} +.geo-chart__zoom-icon:hover { + color: var(--coral-color-charts-neutral-hover, hsl(0, 0%, 12%)); +} +.geo-chart__zoom-icon:active { + color: var(--coral-color-charts-default, hsl(216, 82%, 48%)); +} diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.module.scss b/packages/dataviz/src/components/GeoChart/GeoChart.module.scss deleted file mode 100644 index 9be41110c24..00000000000 --- a/packages/dataviz/src/components/GeoChart/GeoChart.module.scss +++ /dev/null @@ -1,68 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -:export { - scaleMinColor: tokens.$coral-color-charts-default-weak; /* stylelint-disable-line property-no-unknown */ - scaleMaxColor: tokens.$coral-color-charts-default-strong; /* stylelint-disable-line property-no-unknown */ -} - -.geo-chart { - position: relative; - - &__title { - text-align: center; - margin: 8px 0; - } - - &__feature { - stroke: tokens.$coral-color-charts-neutral; - stroke-width: 1px; - vector-effect: non-scaling-stroke; - - &--disabled { - fill: tokens.$coral-color-charts-neutral-weak; - } - - &:not(&--disabled):hover { - fill: tokens.$coral-color-charts-default !important; /* stylelint-disable-line declaration-no-important */ - cursor: pointer; - } - } - - &__zoom { - position: absolute; - bottom: 15px; - left: 10px; - } - - &__zoom-button { - display: block; - background: transparent; - border: none; - outline: none; - padding: 0; - height: 20px; - width: 20px; - - & + #{&} { - margin-top: 5px; - } - } - - &__zoom-icon { - color: tokens.$coral-color-charts-neutral; - width: 100%; - height: 100%; - - &:not(:hover) .ti-background { - color: tokens.$coral-color-charts-neutral; - } - - &:hover { - color: tokens.$coral-color-charts-neutral-hover; - } - - &:active { - color: tokens.$coral-color-charts-default; - } - } -} diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.test.js b/packages/dataviz/src/components/GeoChart/GeoChart.test.js index 83a27000a27..a80ef58386b 100644 --- a/packages/dataviz/src/components/GeoChart/GeoChart.test.js +++ b/packages/dataviz/src/components/GeoChart/GeoChart.test.js @@ -10,7 +10,7 @@ import { render } from '@testing-library/react'; import GeoChart from './GeoChart.component'; import { getGeoChartConfig } from './GeoChart.utils'; -import styles from './GeoChart.module.scss'; +import styles from './GeoChart.module.css'; describe('GeoChart component', () => { let defaultProps; diff --git a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.css b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.css new file mode 100644 index 00000000000..99bc31991da --- /dev/null +++ b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.css @@ -0,0 +1,25 @@ +.key-value-tooltip { + list-style-type: none; + white-space: nowrap; + pointer-events: none; + margin-bottom: 0; +} +.key-value-tooltip__entry { + display: flex; + align-items: center; +} +.key-value-tooltip__key { + margin-top: 0; + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-background, white); +} +.key-value-tooltip__key::after { + content: ':'; +} +.key-value-tooltip__value { + margin-left: var(--coral-spacing-xxs, 0.25rem); + color: var(--coral-color-accent-text-weak-active, hsl(205, 60%, 75%)); +} +.key-value-tooltip--pattern .key-value-tooltip__value { + color: var(--coral-color-danger-text-weak, white); +} diff --git a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss deleted file mode 100755 index 05dd2126e96..00000000000 --- a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$module: key-value-tooltip; - -.#{$module} { - list-style-type: none; - white-space: nowrap; - pointer-events: none; - margin-bottom: 0; // override dl margin - - &__entry { - display: flex; - align-items: center; - } - - &__key { - margin-top: 0; // override dt margin - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-background; - - &::after { - content: ':'; - } - } - - &__value { - margin-left: tokens.$coral-spacing-xxs; - color: tokens.$coral-color-accent-text-weak-active; - } - - &--pattern { - .#{$module}__value { - color: tokens.$coral-color-danger-text-weak; - } - } -} diff --git a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.tsx b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.tsx index d791ba37110..3b7de2d4eb5 100755 --- a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.tsx +++ b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { FormatValue } from '@talend/react-components'; import { Tooltip } from '../Tooltip/Tooltip.component'; -import styles from './KeyValueTooltip.component.module.scss'; +import styles from './KeyValueTooltip.component.module.css'; import { ChartStyle } from '../../types'; export interface KeyValueTooltipProps { diff --git a/packages/dataviz/src/components/LineChart/LineChart.component.tsx b/packages/dataviz/src/components/LineChart/LineChart.component.tsx index 443f7bc12f6..cb040e01372 100644 --- a/packages/dataviz/src/components/LineChart/LineChart.component.tsx +++ b/packages/dataviz/src/components/LineChart/LineChart.component.tsx @@ -15,7 +15,7 @@ import { LineChartEntry, LineChartOptions, LineOptions, LineStatus } from './Lin import { CustomTooltip } from './LineChartTooltip.component'; import { CustomLegend } from './LineChartLegend.component'; -import style from './LineChart.module.scss'; +import style from './LineChart.module.css'; export interface LineChartProps { data: LineChartEntry[]; diff --git a/packages/dataviz/src/components/LineChart/LineChart.module.css b/packages/dataviz/src/components/LineChart/LineChart.module.css new file mode 100644 index 00000000000..e04970e2a06 --- /dev/null +++ b/packages/dataviz/src/components/LineChart/LineChart.module.css @@ -0,0 +1,69 @@ +.container :global(.recharts-cartesian-axis-line) { + stroke: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.container :global(.recharts-text) { + fill: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} + +.line-chart-custom-tooltip { + list-style: none; + margin: 0; + padding: 0; +} +.line-chart-custom-tooltip__line-item--inactive { + opacity: var(--coral-opacity-s, 0.6); +} +.line-chart-custom-tooltip__line-value { + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + margin-left: var(--coral-spacing-xxs, 0.25rem); +} +.line-chart-custom-legend { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + gap: var(--coral-spacing-m, 1rem); + list-style: none; +} +.line-chart-custom-legend-item { + display: flex; + align-items: center; + padding: var(--coral-spacing-xxs, 0.25rem); + border-radius: var(--coral-radius-s, 0.25rem); +} +.line-chart-custom-legend--align-left { + justify-content: flex-start; +} +.line-chart-custom-legend--align-center { + justify-content: center; +} +.line-chart-custom-legend--align-right { + justify-content: flex-end; +} +.line-chart-custom-legend--shift-left { + padding-right: 3.75rem; +} +.line-chart-custom-legend__button--selection-enabled:hover { + background-color: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +.line-chart-custom-legend__button--selected { + background-color: var(--coral-color-accent-background-selected, hsl(204, 100%, 95%)); +} +.line-chart-custom-legend__button--selected:hover { + background-color: var(--coral-color-accent-background-selected, hsl(204, 100%, 95%)); +} +.line-chart-custom-legend__button--inactive { + opacity: var(--coral-opacity-s, 0.6); +} +.line-chart-custom-legend__line-label { + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); + font-style: normal; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.line-chart-line-icon { + display: inline-block; + width: 16px; + height: 2px; + margin-right: var(--coral-spacing-xs, 0.5rem); + border-radius: var(--coral-radius-round, 6249.9375rem); +} diff --git a/packages/dataviz/src/components/LineChart/LineChart.module.scss b/packages/dataviz/src/components/LineChart/LineChart.module.scss deleted file mode 100644 index 4f5b0321498..00000000000 --- a/packages/dataviz/src/components/LineChart/LineChart.module.scss +++ /dev/null @@ -1,92 +0,0 @@ -@use '@talend/design-tokens/lib/_tokens' as tokens; - -$module: line-chart; - -.container { - :global(.recharts-cartesian-axis-line) { - stroke: tokens.$coral-color-neutral-text; - } - - :global(.recharts-text) { - fill: tokens.$coral-color-neutral-text; - } -} - -.#{$module} { - &-custom-tooltip { - list-style: none; - margin: 0; - padding: 0; - - &__line-item--inactive { - opacity: tokens.$coral-opacity-s; - } - - &__line-value { - font: tokens.$coral-paragraph-m-bold; - margin-left: tokens.$coral-spacing-xxs; - } - } - - &-custom-legend { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - gap: tokens.$coral-spacing-m; - list-style: none; - - &-item { - display: flex; - align-items: center; - padding: tokens.$coral-spacing-xxs; - border-radius: tokens.$coral-radius-s; - } - - &--align-left { - justify-content: flex-start; - } - - &--align-center { - justify-content: center; - } - - &--align-right { - justify-content: flex-end; - } - - &--shift-left { - padding-right: 3.75rem; - } - - &__button--selection-enabled:hover { - background-color: tokens.$coral-color-accent-background-hover; - } - - &__button--selected { - background-color: tokens.$coral-color-accent-background-selected; - - &:hover { - background-color: tokens.$coral-color-accent-background-selected; - } - } - - &__button--inactive { - opacity: tokens.$coral-opacity-s; - } - - &__line-label { - font: tokens.$coral-paragraph-s; - font-style: normal; - color: tokens.$coral-color-neutral-text-weak; - } - } - - &-line-icon { - display: inline-block; - width: 16px; - height: 2px; - margin-right: tokens.$coral-spacing-xs; - border-radius: tokens.$coral-radius-round; - } -} diff --git a/packages/dataviz/src/components/LineChart/LineChartLegend.component.tsx b/packages/dataviz/src/components/LineChart/LineChartLegend.component.tsx index edf00fcf707..228228f9e79 100644 --- a/packages/dataviz/src/components/LineChart/LineChartLegend.component.tsx +++ b/packages/dataviz/src/components/LineChart/LineChartLegend.component.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import styles from './LineChart.module.scss'; +import styles from './LineChart.module.css'; import { LineOptions } from './LineChart.types'; import { LineIcon } from './LineChartLineIcon.component'; diff --git a/packages/dataviz/src/components/LineChart/LineChartLineIcon.component.tsx b/packages/dataviz/src/components/LineChart/LineChartLineIcon.component.tsx index b16f1139364..b2f2ca3f855 100644 --- a/packages/dataviz/src/components/LineChart/LineChartLineIcon.component.tsx +++ b/packages/dataviz/src/components/LineChart/LineChartLineIcon.component.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import styles from './LineChart.module.scss'; +import styles from './LineChart.module.css'; const getLineIconBackground = (color: string, dashed: boolean) => { if (dashed) { diff --git a/packages/dataviz/src/components/LineChart/LineChartTooltip.component.tsx b/packages/dataviz/src/components/LineChart/LineChartTooltip.component.tsx index c17460d6e3d..9d53ff3917a 100644 --- a/packages/dataviz/src/components/LineChart/LineChartTooltip.component.tsx +++ b/packages/dataviz/src/components/LineChart/LineChartTooltip.component.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { Tooltip } from '../Tooltip/Tooltip.component'; -import styles from './LineChart.module.scss'; +import styles from './LineChart.module.css'; import { LineOptions } from './LineChart.types'; import { LineIcon } from './LineChartLineIcon.component'; diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.css b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.css new file mode 100644 index 00000000000..59beb5d0ab8 --- /dev/null +++ b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.css @@ -0,0 +1,44 @@ +.range-filter :global(.rc-slider-mark-text), +.range-filter :global(.rc-slider-mark-text-active) { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.range-filter__slider { + margin: 20px 0 30px; +} +.range-filter__slider-mark { + position: relative; + display: block; + width: 100%; + white-space: nowrap; +} +.range-filter__slider-mark--top { + top: -36px; +} +.range-filter__slider-mark--bottom-left { + position: absolute; + text-align: left; +} +.range-filter__slider-mark--bottom-right { + transform: translateX(50%); +} +.range-filter :global .rc-slider-mark-text:last-child { + left: initial !important; + right: 0; +} +.range-filter :global .rc-slider-dot { + border: 0; + bottom: 0; +} +.range-filter__form { + display: flex; + justify-content: space-evenly; +} +.range-filter__input-container { + display: flex; + flex-wrap: wrap; + align-items: center; +} +.range-filter__label { + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + margin-right: var(--coral-spacing-s, 0.75rem); +} diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss deleted file mode 100755 index 75a9d6c7678..00000000000 --- a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$module: range-filter; - -.#{$module} { - :global(.rc-slider-mark-text), - :global(.rc-slider-mark-text-active) { - color: tokens.$coral-color-neutral-text; - } - - &__slider { - margin: 20px 0 30px; - } - - &__slider-mark { - position: relative; - display: block; - width: 100%; - white-space: nowrap; - - &--top { - top: -36px; - } - - &--bottom-left { - position: absolute; - text-align: left; - } - - &--bottom-right { - transform: translateX(50%); - } - } - - :global { - .rc-slider-mark-text:last-child { - left: initial !important; // stylelint-disable declaration-no-important - right: 0; - } - - .rc-slider-dot { - border: 0; - bottom: 0; - } - } - - &__form { - display: flex; - justify-content: space-evenly; - } - - &__input-container { - display: flex; - flex-wrap: wrap; - align-items: center; - } - - &__label { - font: tokens.$coral-paragraph-m-bold; - margin-right: tokens.$coral-spacing-s; - } -} diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx index a74f22be94c..23f0f5a113f 100755 --- a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx +++ b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.tsx @@ -2,7 +2,7 @@ import { ReactNode, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import classNames from 'classnames'; import { Slider } from '@talend/react-components'; -import styles from './RangeFilter.component.module.scss'; +import styles from './RangeFilter.component.module.css'; import { Range } from '../../types'; import { I18N_DOMAIN_DATAVIZ } from '../../constants'; import { RangeHandler, Ticks } from './handlers/range-handler.types'; diff --git a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.css b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.css new file mode 100644 index 00000000000..171960db2af --- /dev/null +++ b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.css @@ -0,0 +1,12 @@ +/* stylelint-disable declaration-no-important */ +.date-time-input-field input { + width: 100% !important; +} +.date-time-input-field :global(.date-picker) > div { + flex-basis: 75%; + margin-right: 2px; +} +.date-time-input-field :global(.time-picker) > div { + flex-basis: 50%; + margin-right: 5px; +} diff --git a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss deleted file mode 100755 index cfdbddf5b84..00000000000 --- a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -/* stylelint-disable declaration-no-important */ -.date-time-input-field { - input { - width: 100% !important; - } - - :global(.date-picker) { - > div { - flex-basis: 75%; - margin-right: 2px; - } - } - - :global(.time-picker) { - > div { - flex-basis: 50%; - margin-right: 5px; - } - } -} diff --git a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeRangeHandler.tsx b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeRangeHandler.tsx index 72266b02758..96fe6d9a41a 100755 --- a/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeRangeHandler.tsx +++ b/packages/dataviz/src/components/RangeFilter/handlers/DateTimeRangeHandler/DateTimeRangeHandler.tsx @@ -12,7 +12,7 @@ import { RangeHandler } from '../range-handler.types'; import { formatTimeTicks } from '../slider-ticks.utils'; import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook'; -import styles from './DateTimeInputField.component.module.scss'; +import styles from './DateTimeInputField.component.module.css'; function parser(input: string): number | null { // Create date in locale time zone diff --git a/packages/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberInputField.component.module.scss b/packages/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberInputField.component.module.css old mode 100755 new mode 100644 similarity index 100% rename from packages/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberInputField.component.module.scss rename to packages/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberInputField.component.module.css diff --git a/packages/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberRangeHandler.tsx b/packages/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberRangeHandler.tsx index 431b7444105..94789d17a75 100755 --- a/packages/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberRangeHandler.tsx +++ b/packages/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberRangeHandler.tsx @@ -7,7 +7,7 @@ import { RangeHandler, Ticks } from '../range-handler.types'; import { formatD3Ticks } from '../slider-ticks.utils'; import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook'; -import styles from './NumberInputField.component.module.scss'; +import styles from './NumberInputField.component.module.css'; const formatter = (input: number) => `${input}`; const parser = (input: string) => +input; diff --git a/packages/dataviz/src/components/Tooltip/Tooltip.component.module.css b/packages/dataviz/src/components/Tooltip/Tooltip.component.module.css new file mode 100644 index 00000000000..74528d6c319 --- /dev/null +++ b/packages/dataviz/src/components/Tooltip/Tooltip.component.module.css @@ -0,0 +1,11 @@ +.dataviz-tooltip { + padding: var(--coral-spacing-m, 1rem); + color: var(--coral-color-assistive-text, white); + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + background: var(--coral-color-assistive-background, hsl(210, 62%, 5%)); + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + border-radius: var(--coral-radius-s, 0.25rem); +} +.dataviz-tooltip__title { + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); +} diff --git a/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss b/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss deleted file mode 100644 index 6abefcb7530..00000000000 --- a/packages/dataviz/src/components/Tooltip/Tooltip.component.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.dataviz-tooltip { - padding: tokens.$coral-spacing-m; - - color: tokens.$coral-color-assistive-text; - font: tokens.$coral-paragraph-m; - - background: tokens.$coral-color-assistive-background; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - border-radius: tokens.$coral-radius-s; - - &__title { - font: tokens.$coral-paragraph-s; - } -} diff --git a/packages/dataviz/src/components/Tooltip/Tooltip.component.tsx b/packages/dataviz/src/components/Tooltip/Tooltip.component.tsx index d3d0ea9f4bb..5dde52f2dbc 100644 --- a/packages/dataviz/src/components/Tooltip/Tooltip.component.tsx +++ b/packages/dataviz/src/components/Tooltip/Tooltip.component.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import classNames from 'classnames'; -import styles from './Tooltip.component.module.scss'; +import styles from './Tooltip.component.module.css'; export interface TooltipProps { title?: string; diff --git a/packages/dataviz/src/types/types.d.ts b/packages/dataviz/src/types/types.d.ts index f1dafeed5b1..48209436aab 100755 --- a/packages/dataviz/src/types/types.d.ts +++ b/packages/dataviz/src/types/types.d.ts @@ -3,5 +3,10 @@ declare module '*.scss' { export default content; } +declare module '*.css' { + const content: { [className: string]: string }; + export default content; +} + // FIXME: add the needed types to react-components to remove this declare module '@talend/react-components'; diff --git a/packages/design-system/custom.d.ts b/packages/design-system/custom.d.ts index a1208016512..147c17d7373 100644 --- a/packages/design-system/custom.d.ts +++ b/packages/design-system/custom.d.ts @@ -9,3 +9,8 @@ declare module '*.scss' { const contents: Record; export default contents; } + +declare module '*.css' { + const contents: Record; + export default contents; +} diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 1aefa1ff01a..de09cfb2f1d 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -19,6 +19,7 @@ "build:lib": "talend-scripts build", "build:lib:esm": "talend-scripts build --esm", "watch": "talend-scripts build --watch", + "watch:esm": "talend-scripts build --watch --esm", "test": "talend-scripts test", "extract-i18n": "i18next-scanner --config i18next-scanner.config.js", "lint": "talend-scripts lint", diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.css b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.css new file mode 100644 index 00000000000..a75eb69db38 --- /dev/null +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.css @@ -0,0 +1,21 @@ +.panelWrapper { + box-shadow: var(--coral-elevation-shadow-neutral-s, 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.5)); + overflow: hidden; +} +.panelWrapper__alone { + border-radius: var(--coral-radius-s, 0.25rem); +} +.panelWrapper__first { + border-radius: var(--coral-radius-s, 0.25rem) var(--coral-radius-s, 0.25rem) 0 0; +} +.panelWrapper__last { + border-radius: 0 0 var(--coral-radius-s, 0.25rem) var(--coral-radius-s, 0.25rem); +} +.panelWrapper__notLast { + border-bottom: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} + +.panelContent { + padding: var(--coral-spacing-xs, 0.5rem); +} diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss deleted file mode 100644 index 38a6585bda7..00000000000 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.panelWrapper { - box-shadow: tokens.$coral-elevation-shadow-neutral-s; - overflow: hidden; - - &__alone { - border-radius: tokens.$coral-radius-s; - } - - &__first { - border-radius: tokens.$coral-radius-s tokens.$coral-radius-s 0 0; - } - - &__last { - border-radius: 0 0 tokens.$coral-radius-s tokens.$coral-radius-s; - } - - &__notLast { - border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - } -} - -.panelContent { - padding: tokens.$coral-spacing-xs; -} diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx index 0b781fa4cda..6fab1541df1 100644 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx @@ -8,7 +8,7 @@ import { variants } from '../../Status/Primitive/StatusPrimitive'; import CollapsiblePanelHeader from './CollapsiblePanelHeader'; import { PanelHeaderAction } from './types'; -import styles from './CollapsiblePanel.module.scss'; +import styles from './CollapsiblePanel.module.css'; type CollapsiblePanelCommonPropsType = { children: ReactChild; diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.css b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.css new file mode 100644 index 00000000000..18e12b34231 --- /dev/null +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.css @@ -0,0 +1,49 @@ +.headerWrapper { + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: var(--coral-spacing-xxs, 0.25rem); + background-color: var(--coral-color-accent-background-weak, white); + width: 100%; + border: none; + min-height: var(--coral-sizing-l, 2.5rem); + padding: var(--coral-spacing-xs, 0.5rem); +} +.headerWrapper__size-s { + min-height: var(--coral-sizing-s, 1.75rem); + padding: var(--coral-spacing-xxs, 0.25rem); +} +.headerWrapper__clickable { + cursor: pointer; +} +.headerWrapper__clickable:hover { + background-color: var(--coral-color-accent-background-weak-hover, hsl(204, 59%, 88%)); +} +.headerWrapper__clickable:active { + background-color: var(--coral-color-accent-background-weak-active, hsl(205, 60%, 75%)); +} +.headerWrapper > .headerTitle { + flex-grow: 1; +} +.headerWrapper > *:not(.headerTitle) { + flex-shrink: 0; +} + +.headerTitle { + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); + text-align: left; +} +.headerTitle__size-s { + font: var(--coral-heading-s, 600 0.875rem/140% 'Source Sans Pro'); +} +.headerTitle__disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} + +.iconWrapper { + width: var(--coral-sizing-s, 1.75rem); + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; +} diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss deleted file mode 100644 index 470cb06855a..00000000000 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss +++ /dev/null @@ -1,60 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.headerWrapper { - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: tokens.$coral-spacing-xxs; - - background-color: tokens.$coral-color-accent-background-weak; - width: 100%; - border: none; - min-height: tokens.$coral-sizing-l; - padding: tokens.$coral-spacing-xs; - - &__size-s { - min-height: tokens.$coral-sizing-s; - padding: tokens.$coral-spacing-xxs; - } - - &__clickable { - cursor: pointer; - - &:hover { - background-color: tokens.$coral-color-accent-background-weak-hover; - } - - &:active { - background-color: tokens.$coral-color-accent-background-weak-active; - } - } - - > .headerTitle { - flex-grow: 1; - } - - > *:not(.headerTitle) { - flex-shrink: 0; - } -} - -.headerTitle { - font: tokens.$coral-heading-m; - text-align: left; - - &__size-s { - font: tokens.$coral-heading-s; - } - - &__disabled { - color: tokens.$coral-color-neutral-text-disabled; - } -} - -.iconWrapper { - width: tokens.$coral-sizing-s; - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: center; -} diff --git a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx index e634010f377..6949825a407 100644 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx @@ -12,7 +12,7 @@ import { Status } from '../../Status'; import { variants } from '../../Status/Primitive/StatusPrimitive'; import { PanelHeaderAction } from './types'; -import styles from './CollapsiblePanelHeader.module.scss'; +import styles from './CollapsiblePanelHeader.module.css'; export type CollapsiblePanelHeaderPropsType = { controlId: string; diff --git a/packages/design-system/src/components/Badge/button/BadgeButton.module.css b/packages/design-system/src/components/Badge/button/BadgeButton.module.css new file mode 100644 index 00000000000..dd1aeb1fe01 --- /dev/null +++ b/packages/design-system/src/components/Badge/button/BadgeButton.module.css @@ -0,0 +1,19 @@ +.badge__button { + align-items: center; + display: inline-flex; + justify-content: center; + position: relative; + border-radius: var(--coral-radius-s, 0.25rem); + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + height: var(--coral-sizing-xs, 1.5rem); + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-xs, 0.5rem); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.badge__button:hover { + background: var(--coral-color-accent-background-weak-hover, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text-strong-hover, hsl(204, 97%, 13%)); +} +.badge__button:active { + background: var(--coral-color-accent-background-weak-active, hsl(205, 60%, 75%)); + color: var(--coral-color-accent-text-strong-active, hsl(205, 95%, 8%)); +} diff --git a/packages/design-system/src/components/Badge/button/BadgeButton.module.scss b/packages/design-system/src/components/Badge/button/BadgeButton.module.scss deleted file mode 100644 index ec8852b1dbc..00000000000 --- a/packages/design-system/src/components/Badge/button/BadgeButton.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.badge__button { - align-items: center; - display: inline-flex; - justify-content: center; - position: relative; - - border-radius: tokens.$coral-radius-s; - font: tokens.$coral-paragraph-m-bold; - height: tokens.$coral-sizing-xs; - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs; - - color: tokens.$coral-color-accent-text; - - &:hover { - background: tokens.$coral-color-accent-background-weak-hover; - color: tokens.$coral-color-accent-text-strong-hover; - } - - &:active { - background: tokens.$coral-color-accent-background-weak-active; - color: tokens.$coral-color-accent-text-strong-active; - } -} diff --git a/packages/design-system/src/components/Badge/button/BadgeButton.tsx b/packages/design-system/src/components/Badge/button/BadgeButton.tsx index 126ff847894..3deda585b2d 100644 --- a/packages/design-system/src/components/Badge/button/BadgeButton.tsx +++ b/packages/design-system/src/components/Badge/button/BadgeButton.tsx @@ -5,7 +5,7 @@ import { DataAttributes } from 'src/types'; import { Clickable } from '../../Clickable/Clickable'; -import styles from './BadgeButton.module.scss'; +import styles from './BadgeButton.module.css'; type BadgeButtonProps = { /** diff --git a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.css b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.css new file mode 100644 index 00000000000..e4df4b90506 --- /dev/null +++ b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.css @@ -0,0 +1,18 @@ +.badge { + display: inline-block; + background: var(--coral-color-neutral-background, white); + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + border-radius: var(--coral-radius-s, 0.25rem); +} + +.badge__label { + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + padding: var(--coral-spacing-xxs, 0.25rem); +} + +.badge__divider { + align-items: center; + display: flex; + flex-direction: row; +} diff --git a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.scss b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.scss deleted file mode 100644 index 8fd44563862..00000000000 --- a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.badge { - display: inline-block; - - background: tokens.$coral-color-neutral-background; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - border-radius: tokens.$coral-radius-s; -} - -.badge__label { - font: tokens.$coral-paragraph-m; - padding: tokens.$coral-spacing-xxs; -} - -.badge__divider { - align-items: center; - display: flex; - flex-direction: row; -} diff --git a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx index 47d72b08f0b..062b1a40b24 100644 --- a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx +++ b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx @@ -6,7 +6,7 @@ import { DataAttributes } from 'src/types'; import { Divider } from '../../Divider'; import { StackHorizontal } from '../../Stack'; -import styles from './BadgePrimitive.module.scss'; +import styles from './BadgePrimitive.module.css'; /** * Possible semantic values. diff --git a/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.css b/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.css new file mode 100644 index 00000000000..3889d9ba76c --- /dev/null +++ b/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.css @@ -0,0 +1,15 @@ +.badge-dropdown__placeholder { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font: var(--coral-heading-s, 600 0.875rem/140% 'Source Sans Pro'); + padding: 0 var(--coral-spacing-xxs, 0.25rem); +} + +.badge-dropdown__button__caret { + align-items: center; + display: inline-flex; + transition: transform var(--coral-transition-fast, 250ms ease-in-out); +} + +.badge-dropdown__button[aria-expanded='true'] .badge-dropdown__button__caret { + transform: rotate(-180deg); +} diff --git a/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.scss b/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.scss deleted file mode 100644 index b4ea369ae25..00000000000 --- a/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.badge-dropdown__placeholder { - color: tokens.$coral-color-neutral-text; - font: tokens.$coral-heading-s; - padding: 0 tokens.$coral-spacing-xxs; -} - -.badge-dropdown__button__caret { - align-items: center; - display: inline-flex; - transition: transform tokens.$coral-transition-fast; -} - -.badge-dropdown__button[aria-expanded='true'] { - .badge-dropdown__button__caret { - transform: rotate(-180deg); - } -} diff --git a/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx b/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx index b5b8de64c77..fe988cb4e77 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx +++ b/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx @@ -14,7 +14,7 @@ import BadgePrimitive, { BadgePrimitiveProps, } from '../primitive/BadgePrimitive'; -import styles from './BadgeDropdown.module.scss'; +import styles from './BadgeDropdown.module.css'; // -------------------------------------------------- // Badge Dropdown button diff --git a/packages/design-system/src/components/Badge/variants/BadgeValue.module.css b/packages/design-system/src/components/Badge/variants/BadgeValue.module.css new file mode 100644 index 00000000000..721950549b8 --- /dev/null +++ b/packages/design-system/src/components/Badge/variants/BadgeValue.module.css @@ -0,0 +1,5 @@ +.badge-value__children { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font: var(--coral-heading-s, 600 0.875rem/140% 'Source Sans Pro'); + padding: 0 var(--coral-spacing-xxs, 0.25rem); +} diff --git a/packages/design-system/src/components/Badge/variants/BadgeValue.module.scss b/packages/design-system/src/components/Badge/variants/BadgeValue.module.scss deleted file mode 100644 index a18c5fded13..00000000000 --- a/packages/design-system/src/components/Badge/variants/BadgeValue.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.badge-value__children { - color: tokens.$coral-color-neutral-text; - font: tokens.$coral-heading-s; - padding: 0 tokens.$coral-spacing-xxs; -} diff --git a/packages/design-system/src/components/Badge/variants/BadgeValue.tsx b/packages/design-system/src/components/Badge/variants/BadgeValue.tsx index 39c84ddee9f..d79eb87e567 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeValue.tsx +++ b/packages/design-system/src/components/Badge/variants/BadgeValue.tsx @@ -6,7 +6,7 @@ import { Divider } from '../../Divider'; import { StackHorizontal } from '../../Stack'; import BadgePrimitive, { BadgePrimitiveProps } from '../primitive/BadgePrimitive'; -import styles from './BadgeValue.module.scss'; +import styles from './BadgeValue.module.css'; export type BadgeValueProps = BadgePrimitiveProps & { /** diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.css b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.css new file mode 100644 index 00000000000..f953501047a --- /dev/null +++ b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.css @@ -0,0 +1,22 @@ +.breadcrumbs { + display: block; +} +.breadcrumbs .divider { + transform: skew(-15deg); + display: inline-flex; + justify-content: center; + align-items: center; +} +.breadcrumbs .entry { + max-width: var(--coral-sizing-maximal, 20rem); + min-width: var(--coral-sizing-m, 2.25rem); + position: relative; +} +.breadcrumbs .entry__collapsed { + flex-shrink: 0; +} +.breadcrumbs .entry .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.scss b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.scss deleted file mode 100644 index 929d575cf44..00000000000 --- a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.breadcrumbs { - display: block; - - .divider { - transform: skew(-15deg); - display: inline-flex; - justify-content: center; - align-items: center; - } - - .entry { - max-width: tokens.$coral-sizing-maximal; - min-width: tokens.$coral-sizing-m; - position: relative; - - &__collapsed { - flex-shrink: 0; - } - - .copy { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } -} diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx index 24e2dece7e3..6326bf5808d 100644 --- a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -2,7 +2,7 @@ import { forwardRef, HTMLAttributes, ReactElement, Ref } from 'react'; import { useTranslation } from 'react-i18next'; import classnames from 'classnames'; -import styles from './Breadcrumbs.module.scss'; +import styles from './Breadcrumbs.module.css'; import { Link } from '../Link'; import { Dropdown } from '../Dropdown/Dropdown'; import { ButtonTertiary } from '../Button'; diff --git a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx index ebbcbd43197..21c16a709e1 100644 --- a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx +++ b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx @@ -13,7 +13,7 @@ import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; import { Loading } from '../../Loading'; import { StackHorizontal } from '../../Stack'; -import styles from './ButtonStyles.module.scss'; +import styles from './ButtonStyles.module.css'; export type AvailableVariantsTypes = 'primary' | 'destructive' | 'secondary' | 'tertiary'; export type AvailableSizes = 'M' | 'S'; diff --git a/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.css b/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.css new file mode 100644 index 00000000000..7e6af40af1e --- /dev/null +++ b/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.css @@ -0,0 +1,53 @@ +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + border-radius: var(--coral-radius-s, 0.25rem); + height: var(--coral-sizing-m, 2.25rem); + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-m, 1rem); + white-space: nowrap; +} +.button__icon { + display: inline-flex; + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + align-items: center; +} +.button__caret { + display: inline-flex; + align-items: center; + transition: transform var(--coral-transition-fast, 250ms ease-in-out); +} +.button__loading { + display: inline-flex; + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + align-items: center; + color: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); +} +.button__loading > svg { + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); +} +.button.size-S { + height: var(--coral-sizing-s, 1.75rem); + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-xs, 0.5rem); +} +.button:disabled, +.button[aria-disabled='true'], +.button[aria-busy='true'] { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + border-color: var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} +.button[aria-expanded='true'] .button__caret { + transform: rotate(-180deg); +} + +.button.size-S .button__icon { + display: inline-flex; + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); + align-items: center; +} diff --git a/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.scss b/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.scss deleted file mode 100644 index ede840fcf3a..00000000000 --- a/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - font: tokens.$coral-paragraph-m-bold; - border-radius: tokens.$coral-radius-s; - height: tokens.$coral-sizing-m; - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-m; - white-space: nowrap; - - &__icon { - display: inline-flex; - width: tokens.$coral-sizing-xxxs; - height: tokens.$coral-sizing-xxxs; - align-items: center; - } - - &__caret { - display: inline-flex; - align-items: center; - transition: transform tokens.$coral-transition-fast; - } - - &__loading { - display: inline-flex; - width: tokens.$coral-sizing-xxxs; - height: tokens.$coral-sizing-xxxs; - align-items: center; - color: tokens.$coral-color-accent-icon; - - > svg { - // Safari fix - width: tokens.$coral-sizing-xxxs; - height: tokens.$coral-sizing-xxxs; - } - } - - &.size-S { - height: tokens.$coral-sizing-s; - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs; - } - - &:disabled, - &[aria-disabled='true'], - &[aria-busy='true'] { - color: tokens.$coral-color-neutral-text-disabled; - border-color: tokens.$coral-color-neutral-border-disabled; - } - - &[aria-expanded='true'] { - .button__caret { - transform: rotate(-180deg); - } - } -} - -.button.size-S .button__icon { - display: inline-flex; - width: tokens.$coral-sizing-minimal; - height: tokens.$coral-sizing-minimal; - align-items: center; -} diff --git a/packages/design-system/src/components/Button/variations/ButtonDestructive.module.css b/packages/design-system/src/components/Button/variations/ButtonDestructive.module.css new file mode 100644 index 00000000000..992a7ab7a99 --- /dev/null +++ b/packages/design-system/src/components/Button/variations/ButtonDestructive.module.css @@ -0,0 +1,18 @@ +.destructive { + color: var(--coral-color-danger-text-weak, white); + background: var(--coral-color-danger-background-strong, hsl(359, 51%, 53%)); +} +.destructive:hover { + color: var(--coral-color-danger-text-weak-hover, hsl(358, 100%, 94%)); + background: var(--coral-color-danger-background-strong-hover, hsl(359, 54%, 38%)); +} +.destructive:active { + color: var(--coral-color-danger-text-weak-active, hsl(359, 100%, 88%)); + background: var(--coral-color-danger-background-strong-active, hsl(359, 54%, 33%)); +} +.destructive:disabled, +.destructive[aria-disabled='true'], +.destructive[aria-busy='true'] { + background: var(--coral-color-neutral-background-disabled, hsl(0, 0%, 88%)); + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} diff --git a/packages/design-system/src/components/Button/variations/ButtonDestructive.module.scss b/packages/design-system/src/components/Button/variations/ButtonDestructive.module.scss deleted file mode 100644 index a9558651205..00000000000 --- a/packages/design-system/src/components/Button/variations/ButtonDestructive.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.destructive { - color: tokens.$coral-color-danger-text-weak; - background: tokens.$coral-color-danger-background-strong; - - &:hover { - color: tokens.$coral-color-danger-text-weak-hover; - background: tokens.$coral-color-danger-background-strong-hover; - } - - &:active { - color: tokens.$coral-color-danger-text-weak-active; - background: tokens.$coral-color-danger-background-strong-active; - } - - &:disabled, - &[aria-disabled='true'], - &[aria-busy='true'] { - background: tokens.$coral-color-neutral-background-disabled; - color: tokens.$coral-color-neutral-text-disabled; - } -} diff --git a/packages/design-system/src/components/Button/variations/ButtonDestructive.tsx b/packages/design-system/src/components/Button/variations/ButtonDestructive.tsx index aa06b878985..2cc41452b3a 100644 --- a/packages/design-system/src/components/Button/variations/ButtonDestructive.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonDestructive.tsx @@ -1,7 +1,7 @@ import { forwardRef, Ref } from 'react'; import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; -import styles from './ButtonDestructive.module.scss'; +import styles from './ButtonDestructive.module.css'; export type ButtonDestructivePropsType = Omit< BaseButtonProps, diff --git a/packages/design-system/src/components/Button/variations/ButtonPrimary.module.css b/packages/design-system/src/components/Button/variations/ButtonPrimary.module.css new file mode 100644 index 00000000000..9af5b59ad20 --- /dev/null +++ b/packages/design-system/src/components/Button/variations/ButtonPrimary.module.css @@ -0,0 +1,18 @@ +.primary { + color: var(--coral-color-accent-text-weak, white); + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); +} +.primary:hover { + color: var(--coral-color-accent-text-weak-hover, hsl(204, 59%, 88%)); + background: var(--coral-color-accent-background-strong-hover, hsl(204, 95%, 23%)); +} +.primary:active { + color: var(--coral-color-accent-text-weak-active, hsl(205, 60%, 75%)); + background: var(--coral-color-accent-background-strong-active, hsl(205, 95%, 15%)); +} +.primary:disabled, +.primary[aria-disabled='true'], +.primary[aria-busy='true'] { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + background: var(--coral-color-neutral-background-disabled, hsl(0, 0%, 88%)); +} diff --git a/packages/design-system/src/components/Button/variations/ButtonPrimary.module.scss b/packages/design-system/src/components/Button/variations/ButtonPrimary.module.scss deleted file mode 100644 index d19caadd665..00000000000 --- a/packages/design-system/src/components/Button/variations/ButtonPrimary.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.primary { - color: tokens.$coral-color-accent-text-weak; - background: tokens.$coral-color-accent-background-strong; - - &:hover { - color: tokens.$coral-color-accent-text-weak-hover; - background: tokens.$coral-color-accent-background-strong-hover; - } - - &:active { - color: tokens.$coral-color-accent-text-weak-active; - background: tokens.$coral-color-accent-background-strong-active; - } - - &:disabled, - &[aria-disabled='true'], - &[aria-busy='true'] { - color: tokens.$coral-color-neutral-text-disabled; - background: tokens.$coral-color-neutral-background-disabled; - } -} diff --git a/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx b/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx index 8da14d02cf9..17258db1035 100644 --- a/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; -import styles from './ButtonPrimary.module.scss'; +import styles from './ButtonPrimary.module.css'; export type ButtonPrimaryPropsType = Omit< BaseButtonProps, diff --git a/packages/design-system/src/components/Button/variations/ButtonSecondary.module.css b/packages/design-system/src/components/Button/variations/ButtonSecondary.module.css new file mode 100644 index 00000000000..53a4f3f9b27 --- /dev/null +++ b/packages/design-system/src/components/Button/variations/ButtonSecondary.module.css @@ -0,0 +1,25 @@ +.secondary { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.secondary:hover { + color: var(--coral-color-accent-text-strong-hover, hsl(204, 97%, 13%)); + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border-hover, hsl(204, 95%, 23%)); + background: var(--coral-color-accent-background-weak-hover, hsl(204, 59%, 88%)); +} +.secondary:active { + color: var(--coral-color-accent-text-strong-active, hsl(205, 95%, 8%)); + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border-active, hsl(205, 95%, 15%)); + background: var(--coral-color-accent-background-weak-active, hsl(205, 60%, 75%)); +} +.secondary:disabled, +.secondary[aria-disabled='true'], +.secondary[aria-busy='true'] { + background: transparent; + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} diff --git a/packages/design-system/src/components/Button/variations/ButtonSecondary.module.scss b/packages/design-system/src/components/Button/variations/ButtonSecondary.module.scss deleted file mode 100644 index 21b0ba5e08e..00000000000 --- a/packages/design-system/src/components/Button/variations/ButtonSecondary.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.secondary { - color: tokens.$coral-color-accent-text; - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - - &:hover { - color: tokens.$coral-color-accent-text-strong-hover; - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-hover; - background: tokens.$coral-color-accent-background-weak-hover; - } - - &:active { - color: tokens.$coral-color-accent-text-strong-active; - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-active; - background: tokens.$coral-color-accent-background-weak-active; - } - - &:disabled, - &[aria-disabled='true'], - &[aria-busy='true'] { - background: transparent; - color: tokens.$coral-color-neutral-text-disabled; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - } -} diff --git a/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx b/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx index c27a1555ba1..636a2bc487f 100644 --- a/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx @@ -1,7 +1,7 @@ import { forwardRef, Ref } from 'react'; import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; -import styles from './ButtonSecondary.module.scss'; +import styles from './ButtonSecondary.module.css'; import { ButtonDestructivePropsType } from './ButtonDestructive'; export type ButtonSecondaryPropsType = Omit< diff --git a/packages/design-system/src/components/Button/variations/ButtonTertiary.module.css b/packages/design-system/src/components/Button/variations/ButtonTertiary.module.css new file mode 100644 index 00000000000..433a27caa8e --- /dev/null +++ b/packages/design-system/src/components/Button/variations/ButtonTertiary.module.css @@ -0,0 +1,17 @@ +.tertiary { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tertiary:hover { + color: var(--coral-color-accent-text-strong-hover, hsl(204, 97%, 13%)); + background: var(--coral-color-accent-background-weak-hover, hsl(204, 59%, 88%)); +} +.tertiary:active { + color: var(--coral-color-accent-text-strong-active, hsl(205, 95%, 8%)); + background: var(--coral-color-accent-background-weak-active, hsl(205, 60%, 75%)); +} +.tertiary:disabled, +.tertiary[aria-disabled='true'], +.tertiary[aria-busy='true'] { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + background: transparent; +} diff --git a/packages/design-system/src/components/Button/variations/ButtonTertiary.module.scss b/packages/design-system/src/components/Button/variations/ButtonTertiary.module.scss deleted file mode 100644 index 0d05381892f..00000000000 --- a/packages/design-system/src/components/Button/variations/ButtonTertiary.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tertiary { - color: tokens.$coral-color-accent-text; - - &:hover { - color: tokens.$coral-color-accent-text-strong-hover; - background: tokens.$coral-color-accent-background-weak-hover; - } - - &:active { - color: tokens.$coral-color-accent-text-strong-active; - background: tokens.$coral-color-accent-background-weak-active; - } - - &:disabled, - &[aria-disabled='true'], - &[aria-busy='true'] { - color: tokens.$coral-color-neutral-text-disabled; - background: transparent; - } -} diff --git a/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx b/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx index b473653caaf..cb533e1c062 100644 --- a/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx @@ -1,7 +1,7 @@ import { forwardRef, Ref } from 'react'; import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; -import styles from './ButtonTertiary.module.scss'; +import styles from './ButtonTertiary.module.css'; import { ButtonDestructivePropsType } from './ButtonDestructive'; export type ButtonTertiaryPropsType = Omit< diff --git a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.css b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.css new file mode 100644 index 00000000000..5a410eefb0a --- /dev/null +++ b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.css @@ -0,0 +1,10 @@ +.button { + text-decoration: none; +} +.button:hover, +.button:focus { + text-decoration: none; +} +.button [data-test='link.icon.external'] { + top: 0; +} diff --git a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.scss b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.scss deleted file mode 100644 index 5e271920579..00000000000 --- a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.button { - text-decoration: none; - - &:hover, - &:focus { - text-decoration: none; - } - - // External icon offset override in flex context - [data-test='link.icon.external'] { - top: 0; - } -} diff --git a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx index ed18b9b21d8..15b7bdbd7a8 100644 --- a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx @@ -6,8 +6,8 @@ import { StackHorizontal } from '../../Stack'; import { AvailableSizes, SharedButtonTypes } from '../../Button/Primitive/ButtonPrimitive'; -import sharedStyles from '../../Button/Primitive/ButtonStyles.module.scss'; -import linkStyles from './ButtonPrimitiveAsLink.module.scss'; +import sharedStyles from '../../Button/Primitive/ButtonStyles.module.css'; +import linkStyles from './ButtonPrimitiveAsLink.module.css'; import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; export type BaseButtonPropsAsLink = LinkableType & diff --git a/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx index b634bb30536..a02a57ba2ac 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import ButtonPrimitiveAsLink, { BaseButtonPropsAsLink } from '../Primitive/ButtonPrimitiveAsLink'; import { AvailableSizes } from '../../Button/Primitive/ButtonPrimitive'; -import styles from '../../Button/variations/ButtonDestructive.module.scss'; +import styles from '../../Button/variations/ButtonDestructive.module.css'; export type ButtonDestructiveAsLinkPropsType = Omit< BaseButtonPropsAsLink, diff --git a/packages/design-system/src/components/ButtonAsLink/variations/ButtonPrimaryAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/variations/ButtonPrimaryAsLink.tsx index 117498e82af..3ca8631984c 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonPrimaryAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonPrimaryAsLink.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import ButtonPrimitiveAsLink, { BaseButtonPropsAsLink } from '../Primitive/ButtonPrimitiveAsLink'; import { AvailableSizes } from '../../Button/Primitive/ButtonPrimitive'; -import styles from '../../Button/variations/ButtonPrimary.module.scss'; +import styles from '../../Button/variations/ButtonPrimary.module.css'; export type ButtonPrimaryAsLinkPropsType = Omit< BaseButtonPropsAsLink, diff --git a/packages/design-system/src/components/ButtonAsLink/variations/ButtonSecondaryAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/variations/ButtonSecondaryAsLink.tsx index 81567f510c8..193d130b08c 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonSecondaryAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonSecondaryAsLink.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import ButtonPrimitiveAsLink, { BaseButtonPropsAsLink } from '../Primitive/ButtonPrimitiveAsLink'; import { AvailableSizes } from '../../Button/Primitive/ButtonPrimitive'; -import styles from '../../Button/variations/ButtonSecondary.module.scss'; +import styles from '../../Button/variations/ButtonSecondary.module.css'; export type ButtonSecondaryAsLinkPropsType = Omit< BaseButtonPropsAsLink, diff --git a/packages/design-system/src/components/ButtonAsLink/variations/ButtonTertiaryAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/variations/ButtonTertiaryAsLink.tsx index ac491b7b0e6..c6e280ba040 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonTertiaryAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonTertiaryAsLink.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import ButtonPrimitiveAsLink, { BaseButtonPropsAsLink } from '../Primitive/ButtonPrimitiveAsLink'; import { AvailableSizes } from '../../Button/Primitive/ButtonPrimitive'; -import styles from '../../Button/variations/ButtonTertiary.module.scss'; +import styles from '../../Button/variations/ButtonTertiary.module.css'; export type ButtonTertiaryAsLinkPropsType = Omit< BaseButtonPropsAsLink, diff --git a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.css b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.css new file mode 100644 index 00000000000..d7793207c21 --- /dev/null +++ b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.css @@ -0,0 +1,86 @@ +.buttonIcon { + display: inline-flex; + justify-content: center; + align-items: center; + border: 0; + background: transparent; + cursor: pointer; + padding: 0; + width: var(--coral-sizing-m, 2.25rem); + height: var(--coral-sizing-m, 2.25rem); + color: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); + border-radius: var(--coral-radius-round, 6249.9375rem); + transition: var(--coral-transition-fast, 250ms ease-in-out); + flex-shrink: 0; +} +.buttonIcon__icon { + display: inline-flex; + justify-content: center; + align-items: center; + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); +} +.buttonIcon__icon svg { + pointer-events: none; +} +.buttonIcon.size_S { + width: var(--coral-sizing-s, 1.75rem); + height: var(--coral-sizing-s, 1.75rem); +} +.buttonIcon.size_XS { + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + border-radius: var(--coral-radius-s, 0.25rem); +} +.buttonIcon.size_XS .buttonIcon__icon { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); +} +.buttonIcon.floating { + background: var(--coral-color-neutral-background, white); + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); +} +.buttonIcon.toggle { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.buttonIcon.toggle:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border-hover, hsl(204, 95%, 23%)); +} +.buttonIcon.toggle:active { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border-active, hsl(205, 95%, 15%)); +} +.buttonIcon.toggle:disabled { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} +.buttonIcon.toggle[aria-pressed='true'] { + color: var(--coral-color-accent-text-weak, white); + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); +} +.buttonIcon.toggle[aria-pressed='true']:hover { + color: var(--coral-color-accent-text-weak-hover, hsl(204, 59%, 88%)); + background: var(--coral-color-accent-background-strong-hover, hsl(204, 95%, 23%)); +} +.buttonIcon.toggle[aria-pressed='true']:active { + color: var(--coral-color-accent-text-weak-active, hsl(205, 60%, 75%)); + background: var(--coral-color-accent-background-strong-active, hsl(205, 95%, 15%)); +} +.buttonIcon.toggle[aria-pressed='true']:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + background: var(--coral-color-neutral-background-disabled, hsl(0, 0%, 88%)); +} +.buttonIcon:hover { + color: var(--coral-color-accent-icon-hover, hsl(204, 88%, 30%)); + background: var(--coral-color-accent-background-weak-hover, hsl(204, 59%, 88%)); +} +.buttonIcon:active { + color: var(--coral-color-accent-icon-active, hsl(205, 88%, 20%)); + background: var(--coral-color-accent-background-weak-active, hsl(205, 60%, 75%)); +} +.buttonIcon:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} diff --git a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.scss b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.scss deleted file mode 100644 index 1b9dd7b0bab..00000000000 --- a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.scss +++ /dev/null @@ -1,101 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.buttonIcon { - display: inline-flex; - justify-content: center; - align-items: center; - border: 0; - background: transparent; - cursor: pointer; - padding: 0; - width: tokens.$coral-sizing-m; - height: tokens.$coral-sizing-m; - color: tokens.$coral-color-accent-icon; - border-radius: tokens.$coral-radius-round; - transition: tokens.$coral-transition-fast; - flex-shrink: 0; - - &__icon { - display: inline-flex; - justify-content: center; - align-items: center; - width: tokens.$coral-sizing-xxxs; - height: tokens.$coral-sizing-xxxs; - - svg { - pointer-events: none; - } - } - - &.size_S { - width: tokens.$coral-sizing-s; - height: tokens.$coral-sizing-s; - } - - &.size_XS { - width: tokens.$coral-sizing-xxxs; - height: tokens.$coral-sizing-xxxs; - border-radius: tokens.$coral-radius-s; - - .buttonIcon__icon { - width: tokens.$coral-sizing-minimal; - height: tokens.$coral-sizing-minimal; - } - } - - &.floating { - background: tokens.$coral-color-neutral-background; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - } - - &.toggle { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - - &:hover { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-hover; - } - - &:active { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-active; - } - - &:disabled { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - } - - &[aria-pressed='true'] { - color: tokens.$coral-color-accent-text-weak; - background: tokens.$coral-color-accent-background-strong; - - &:hover { - color: tokens.$coral-color-accent-text-weak-hover; - background: tokens.$coral-color-accent-background-strong-hover; - } - - &:active { - color: tokens.$coral-color-accent-text-weak-active; - background: tokens.$coral-color-accent-background-strong-active; - } - - &:disabled { - color: tokens.$coral-color-neutral-text-disabled; - background: tokens.$coral-color-neutral-background-disabled; - } - } - } - - &:hover { - color: tokens.$coral-color-accent-icon-hover; - background: tokens.$coral-color-accent-background-weak-hover; - } - - &:active { - color: tokens.$coral-color-accent-icon-active; - background: tokens.$coral-color-accent-background-weak-active; - } - - &:disabled { - color: tokens.$coral-color-neutral-text-disabled; - cursor: not-allowed; - } -} diff --git a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx index 3f815731b0d..ff9593a4080 100644 --- a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx +++ b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx @@ -13,7 +13,7 @@ import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; import { Loading } from '../../Loading'; import { Tooltip, TooltipPlacement } from '../../Tooltip'; -import styles from './ButtonIcon.module.scss'; +import styles from './ButtonIcon.module.css'; export type AvailableSizes = 'M' | 'S' | 'XS'; export type PossibleVariants = 'toggle' | 'floating' | 'default'; diff --git a/packages/design-system/src/components/Card/Card.module.css b/packages/design-system/src/components/Card/Card.module.css new file mode 100644 index 00000000000..370702143d1 --- /dev/null +++ b/packages/design-system/src/components/Card/Card.module.css @@ -0,0 +1,12 @@ +.card { + width: 100%; + height: 100%; + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + border-radius: var(--coral-radius-m, 0.5rem); + padding: var(--coral-spacing-xl, 2.25rem); + background-color: var(--coral-color-neutral-background, white); +} +.card__header, +.card__body { + width: 100%; +} diff --git a/packages/design-system/src/components/Card/Card.module.scss b/packages/design-system/src/components/Card/Card.module.scss deleted file mode 100644 index 2b89d08897d..00000000000 --- a/packages/design-system/src/components/Card/Card.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.card { - width: 100%; - height: 100%; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - border-radius: tokens.$coral-radius-m; - padding: tokens.$coral-spacing-xl; - background-color: tokens.$coral-color-neutral-background; - - &__header, - &__body { - width: 100%; - } -} diff --git a/packages/design-system/src/components/Card/Card.tsx b/packages/design-system/src/components/Card/Card.tsx index 041fcf6d9a3..caac097c3f5 100644 --- a/packages/design-system/src/components/Card/Card.tsx +++ b/packages/design-system/src/components/Card/Card.tsx @@ -2,7 +2,7 @@ import type { ReactNode } from 'react'; import { StackVertical } from '../Stack'; -import theme from './Card.module.scss'; +import theme from './Card.module.css'; export type CardPropsType = { header?: ReactNode; diff --git a/packages/design-system/src/components/Clickable/Clickable.module.css b/packages/design-system/src/components/Clickable/Clickable.module.css new file mode 100644 index 00000000000..c60844e386c --- /dev/null +++ b/packages/design-system/src/components/Clickable/Clickable.module.css @@ -0,0 +1,14 @@ +.clickable { + cursor: pointer; + margin: 0; + padding: 0; + border: none; + line-height: 1; + background: transparent; + transition: var(--coral-transition-fast, 250ms ease-in-out); +} +.clickable:disabled, +.clickable[aria-disabled='true'], +.clickable[aria-busy='true'] { + cursor: not-allowed; +} diff --git a/packages/design-system/src/components/Clickable/Clickable.module.scss b/packages/design-system/src/components/Clickable/Clickable.module.scss deleted file mode 100644 index 66382f9560a..00000000000 --- a/packages/design-system/src/components/Clickable/Clickable.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.clickable { - cursor: pointer; - margin: 0; - padding: 0; - border: none; - line-height: 1; - background: transparent; - transition: tokens.$coral-transition-fast; - - &:disabled, - &[aria-disabled='true'], - &[aria-busy='true'] { - cursor: not-allowed; - } -} diff --git a/packages/design-system/src/components/Clickable/Clickable.tsx b/packages/design-system/src/components/Clickable/Clickable.tsx index 64ee5630fb6..19b56da7a00 100644 --- a/packages/design-system/src/components/Clickable/Clickable.tsx +++ b/packages/design-system/src/components/Clickable/Clickable.tsx @@ -1,7 +1,7 @@ import { forwardRef, MouseEvent, ReactNode, Ref, HTMLProps } from 'react'; import classnames from 'classnames'; -import styles from './Clickable.module.scss'; +import styles from './Clickable.module.css'; export type ClickableProps = Omit< HTMLProps, diff --git a/packages/design-system/src/components/Combobox/Combobox.module.css b/packages/design-system/src/components/Combobox/Combobox.module.css new file mode 100644 index 00000000000..b47be12f601 --- /dev/null +++ b/packages/design-system/src/components/Combobox/Combobox.module.css @@ -0,0 +1,111 @@ +.combobox__input { + background: transparent; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: var(--coral-spacing-xs, 0.5rem); + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + line-height: 1; + border: 0; + margin: 0; + transition: var(--coral-transition-instant, 100ms ease-out); + display: block; + flex-grow: 1; + width: 100%; +} +.combobox__input:only-child { + border-radius: var(--coral-radius-s, 0.25rem); +} +.combobox__input:disabled, +.combobox__input_disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.combobox__input_readOnly { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.combobox__input:focus { + outline: 0; +} +.combobox__input:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.combobox__input::placeholder { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + opacity: var(--coral-opacity-s, 0.6); +} +.combobox__input[disabled] { + opacity: 1; +} +.combobox__input[disabled] > option { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.combobox__input { + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + box-shadow: 0 0 0 0 transparent; + border-radius: var(--coral-radius-s, 0.25rem); + transition: var(--coral-transition-instant, 100ms ease-out); + background: var(--coral-color-neutral-background, white); +} +.combobox__input:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-strong-hover, hsl(0, 0%, 15%)); +} +.combobox__input_disabled { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} +.combobox__input_readOnly { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} +.combobox__input_disabled:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} +.combobox__input_readOnly:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.combobox__input:focus-within, +.combobox__input:focus { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); + box-shadow: 0 0 0 0.0625rem var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.combobox__input_borderError { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.combobox__input_borderError:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border-hover, hsl(359, 54%, 38%)); +} +.combobox__input_borderError:focus-within, +.combobox__input_borderError:focus { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border, hsl(359, 51%, 53%)); + box-shadow: 0 0 0 0.0625rem var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.combobox__input { + height: 1.875rem; +} +.combobox [role='listbox'] { + margin-top: var(--coral-spacing-xs, 0.5rem); + background: var(--coral-color-neutral-background, white); + border-radius: var(--coral-radius-s, 0.25rem); + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + width: var(--coral-sizing-xxxl, 13.75rem); + z-index: var(--coral-elevation-layer-interactive-front, 8); +} +.combobox [role='option'] { + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-s, 0.75rem); + cursor: pointer; +} +.combobox [role='option']:hover { + background: var(--coral-color-accent-background-weak-hover, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text-strong-hover, hsl(204, 97%, 13%)); +} +.combobox [role='combobox']:focus + [role='listbox'] [aria-selected='true'] { + background: var(--coral-color-accent-background-weak-active, hsl(205, 60%, 75%)); + color: var(--coral-color-accent-text-strong-active, hsl(205, 95%, 8%)); +} diff --git a/packages/design-system/src/components/Combobox/Combobox.module.scss b/packages/design-system/src/components/Combobox/Combobox.module.scss deleted file mode 100644 index d2d50e20a42..00000000000 --- a/packages/design-system/src/components/Combobox/Combobox.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -@use '../Form/Primitives/mixins' as Form; - -.combobox { - &__input { - @include Form.base-input(); - @include Form.border-styles(); - height: Form.$standard-input-height; - } - - [role='listbox'] { - margin-top: tokens.$coral-spacing-xs; - background: tokens.$coral-color-neutral-background; - border-radius: tokens.$coral-radius-s; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - width: tokens.$coral-sizing-xxxl; - z-index: tokens.$coral-elevation-layer-interactive-front; - } - - [role='option'] { - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-s; - cursor: pointer; - } - - [role='option']:hover { - background: tokens.$coral-color-accent-background-weak-hover; - color: tokens.$coral-color-accent-text-strong-hover; - } - - [role='combobox']:focus + [role='listbox'] [aria-selected='true'] { - background: tokens.$coral-color-accent-background-weak-active; - color: tokens.$coral-color-accent-text-strong-active; - } -} diff --git a/packages/design-system/src/components/Combobox/Combobox.tsx b/packages/design-system/src/components/Combobox/Combobox.tsx index 208ac1fd67d..751adc7cb22 100644 --- a/packages/design-system/src/components/Combobox/Combobox.tsx +++ b/packages/design-system/src/components/Combobox/Combobox.tsx @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'; import { useId } from '../../useId'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; -import styles from './Combobox.module.scss'; +import styles from './Combobox.module.css'; export type ComboboxProps = { id?: string; diff --git a/packages/design-system/src/components/Divider/Divider.module.css b/packages/design-system/src/components/Divider/Divider.module.css new file mode 100644 index 00000000000..452d14dcec3 --- /dev/null +++ b/packages/design-system/src/components/Divider/Divider.module.css @@ -0,0 +1,17 @@ +.divider { + border: none; +} +.divider[aria-orientation='horizontal'] { + width: 100%; + margin: 0; + border-top: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.divider[aria-orientation='vertical'] { + margin: 0; + display: inline-block; + min-height: 2ch; + height: 100%; + border-left: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} diff --git a/packages/design-system/src/components/Divider/Divider.module.scss b/packages/design-system/src/components/Divider/Divider.module.scss deleted file mode 100644 index bfffbb5c7a6..00000000000 --- a/packages/design-system/src/components/Divider/Divider.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.divider { - border: none; - - &[aria-orientation='horizontal'] { - width: 100%; - margin: 0; - border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - } - - &[aria-orientation='vertical'] { - margin: 0; - display: inline-block; - min-height: 2ch; - height: 100%; - border-left: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - } -} diff --git a/packages/design-system/src/components/Divider/Divider.tsx b/packages/design-system/src/components/Divider/Divider.tsx index 65ce1e5acd3..1f7032d6276 100644 --- a/packages/design-system/src/components/Divider/Divider.tsx +++ b/packages/design-system/src/components/Divider/Divider.tsx @@ -1,6 +1,6 @@ import { forwardRef, Ref, HTMLAttributes, RefAttributes } from 'react'; -import style from './Divider.module.scss'; +import style from './Divider.module.css'; export type DividerOptions = { /** diff --git a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.css b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.css new file mode 100644 index 00000000000..37379f1f8e4 --- /dev/null +++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.css @@ -0,0 +1,32 @@ +.drawer { + width: var(--coral-sizing-maximal, 20rem); + height: 100%; + background: var(--coral-color-neutral-background, white); + display: flex; + flex-flow: column; + justify-content: stretch; + align-items: stretch; + flex-wrap: nowrap; +} +.drawer .header { + flex-grow: 0; + flex-shrink: 0; + flex-basis: var(--coral-sizing-l, 2.5rem); + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); + flex-flow: column; + display: flex; +} +.drawer .body { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + overflow: auto; + flex-flow: column; + display: flex; +} +.drawer .footer { + flex-grow: 0; + flex-shrink: 0; + flex-basis: calc(var(--coral-sizing-l, 2.5rem) + 2 * var(--coral-spacing-xs, 0.5rem)); + display: flex; +} diff --git a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss deleted file mode 100644 index 90954e5a72c..00000000000 --- a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.drawer { - width: tokens.$coral-sizing-maximal; - height: 100%; - background: tokens.$coral-color-neutral-background; - display: flex; - flex-flow: column; - justify-content: stretch; - align-items: stretch; - flex-wrap: nowrap; - - .header { - flex-grow: 0; - flex-shrink: 0; - flex-basis: tokens.$coral-sizing-l; - font: tokens.$coral-heading-m; - flex-flow: column; - display: flex; - } - - .body { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 0; - overflow: auto; - flex-flow: column; - display: flex; - } - - .footer { - flex-grow: 0; - flex-shrink: 0; - flex-basis: calc(tokens.$coral-sizing-l + 2 * tokens.$coral-spacing-xs); - - display: flex; - } -} diff --git a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx index 7dab5fe3749..d61d99babe9 100644 --- a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx +++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx @@ -1,7 +1,7 @@ import { forwardRef } from 'react'; import type { ReactNode, Ref } from 'react'; -import theme from './PrimitiveDrawer.module.scss'; +import theme from './PrimitiveDrawer.module.css'; export type DrawerProps = { header?: ReactNode; diff --git a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.css b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.css new file mode 100644 index 00000000000..ce2c6ada16f --- /dev/null +++ b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.css @@ -0,0 +1,9 @@ +.drawer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + z-index: var(--coral-elevation-layer-standard-front, 4); + transition: transform var(--coral-transition-fast, 250ms ease-in-out); +} diff --git a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss deleted file mode 100644 index 3e3e3148e22..00000000000 --- a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.drawer { - position: absolute; - top: 0; - right: 0; - bottom: 0; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - z-index: tokens.$coral-elevation-layer-standard-front; - transition: transform tokens.$coral-transition-fast; -} diff --git a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx index 027751c674f..fc88d9e9f94 100644 --- a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx +++ b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx @@ -5,7 +5,7 @@ import { Transition } from 'react-transition-group'; import { useId } from '../../../../useId'; import { PrimitiveDrawer } from '../../Primitive/PrimitiveDrawer'; -import theme from './FloatingDrawer.module.scss'; +import theme from './FloatingDrawer.module.css'; type WithDisclosure = { disclosure: ReactElement; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx index 940bef4240c..8297a16953d 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx @@ -8,7 +8,7 @@ import { Clickable, ClickableProps } from '../../Clickable'; import { SizedIcon } from '../../Icon'; import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; -import styles from './DropdownEntry.module.scss'; +import styles from './DropdownEntry.module.css'; /** * This is in fact a Menu Item diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.css b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.css new file mode 100644 index 00000000000..58af4b96917 --- /dev/null +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.css @@ -0,0 +1,6 @@ +.divider { + margin: 0; + border: none; + border-top: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.scss deleted file mode 100644 index 14feb558800..00000000000 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.divider { - margin: 0; - border: none; - border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; -} diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.tsx index 62785bb0081..4bcf5fcc21f 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.tsx @@ -1,6 +1,6 @@ import { forwardRef, Ref, HTMLAttributes } from 'react'; -import styles from './DropdownDivider.module.scss'; +import styles from './DropdownDivider.module.css'; export type DropdownDividerType = HTMLAttributes; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.css b/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.css new file mode 100644 index 00000000000..a5033905edc --- /dev/null +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.css @@ -0,0 +1,41 @@ +.dropdownEntry { + background: var(--coral-color-accent-background-weak, white); + display: flex; + align-items: center; + width: 100%; + min-width: 0; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + transition: var(--coral-transition-fast, 250ms ease-in-out); + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-s, 0.75rem); + text-align: start; +} +.dropdownEntry > span { + min-width: 0; +} +.dropdownEntry > span:global(.checked) { + font-weight: 600; +} +.dropdownEntry .buttonIcon { + margin-right: var(--coral-spacing-xxs, 0.25rem); + flex-shrink: 0; + position: relative; + bottom: -0.1875rem; +} +.dropdownEntry .buttonContent { + min-width: 0; + flex: 1; +} +.dropdownEntry:hover, +.dropdownEntry:focus { + background: var(--coral-color-accent-background-weak-hover, hsl(204, 59%, 88%)); + color: var(--coral-color-accent-text-strong-hover, hsl(204, 97%, 13%)); +} +.dropdownEntry:active { + background: var(--coral-color-accent-background-weak-active, hsl(205, 60%, 75%)); + color: var(--coral-color-accent-text-strong-active, hsl(205, 95%, 8%)); +} +.dropdownEntry:disabled { + background: var(--coral-color-neutral-background, white); + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.scss deleted file mode 100644 index 76f708bacf5..00000000000 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$icon-alignment-offset-m: -0.1875rem; - -.dropdownEntry { - background: tokens.$coral-color-accent-background-weak; - display: flex; - align-items: center; - width: 100%; - min-width: 0; - color: tokens.$coral-color-neutral-text; - font: tokens.$coral-paragraph-m; - transition: tokens.$coral-transition-fast; - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-s; - text-align: start; - - > span { - min-width: 0; - - &:global(.checked) { - font-weight: 600; - } - } - - .buttonIcon { - margin-right: tokens.$coral-spacing-xxs; - flex-shrink: 0; - position: relative; - bottom: $icon-alignment-offset-m; - } - - .buttonContent { - min-width: 0; - flex: 1; - } - - &:hover, - &:focus { - background: tokens.$coral-color-accent-background-weak-hover; - color: tokens.$coral-color-accent-text-strong-hover; - } - - &:active { - background: tokens.$coral-color-accent-background-weak-active; - color: tokens.$coral-color-accent-text-strong-active; - } - - &:disabled { - background: tokens.$coral-color-neutral-background; - color: tokens.$coral-color-neutral-text-disabled; - } -} diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx index 89876911e97..ef93bbe7d41 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx @@ -2,7 +2,7 @@ import { forwardRef, ReactElement, Ref } from 'react'; import { Linkable, LinkableType } from '../../Linkable'; -import styles from './DropdownEntry.module.scss'; +import styles from './DropdownEntry.module.css'; export type DropdownLinkType = LinkableType; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.css b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.css new file mode 100644 index 00000000000..f4cf1dbcdc1 --- /dev/null +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.css @@ -0,0 +1,17 @@ +.dropdownShell { + z-index: var(--coral-elevation-layer-interactive-front, 8); + position: absolute; + width: max-content; + top: 0; + left: 0; +} +.dropdownShell .animatedZone { + background: var(--coral-color-neutral-background, white); + border-radius: var(--coral-radius-s, 0.25rem); + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + max-height: var(--coral-sizing-maximal, 20rem); + overflow: auto; + min-width: calc(var(--coral-sizing-maximal, 20rem) / 2); + max-width: var(--coral-sizing-maximal, 20rem); + transition: var(--coral-transition-fast, 250ms ease-in-out); +} diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss deleted file mode 100644 index b6e812e2170..00000000000 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.dropdownShell { - z-index: tokens.$coral-elevation-layer-interactive-front; - position: absolute; - width: max-content; - top: 0; - left: 0; - - .animatedZone { - background: tokens.$coral-color-neutral-background; - border-radius: tokens.$coral-radius-s; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - max-height: tokens.$coral-sizing-maximal; - overflow: auto; - min-width: calc(#{tokens.$coral-sizing-maximal} / 2); - max-width: tokens.$coral-sizing-maximal; - transition: tokens.$coral-transition-fast; - } -} diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx index 23240ef5345..4e4ce7158ac 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx @@ -1,6 +1,6 @@ import { forwardRef } from 'react'; import type { HTMLAttributes, ReactNode } from 'react'; -import styles from './DropdownShell.module.scss'; +import styles from './DropdownShell.module.css'; import { StackVertical } from '../../Stack'; type ShellProps = HTMLAttributes & { diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.css b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.css new file mode 100644 index 00000000000..823d956267b --- /dev/null +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.css @@ -0,0 +1,13 @@ +.dropdownTitle { + background: var(--coral-color-accent-background-weak, white); + min-height: var(--coral-sizing-s, 1.75rem); + display: inline-flex; + justify-content: flex-start; + align-items: center; + white-space: nowrap; + width: 100%; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-s, 0.75rem); + max-width: var(--coral-sizing-maximal, 20rem); +} diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.scss deleted file mode 100644 index 908b5a0807b..00000000000 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.dropdownTitle { - background: tokens.$coral-color-accent-background-weak; - min-height: tokens.$coral-sizing-s; - display: inline-flex; - justify-content: flex-start; - align-items: center; - white-space: nowrap; - width: 100%; - color: tokens.$coral-color-neutral-text; - font: tokens.$coral-paragraph-m-bold; - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-s; - max-width: tokens.$coral-sizing-maximal; -} diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.tsx index c8edaf2b05b..e0687bf4d9e 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.tsx @@ -1,6 +1,6 @@ import { forwardRef, Ref } from 'react'; -import styles from './DropdownTitle.module.scss'; +import styles from './DropdownTitle.module.css'; export type DropdownTitleType = { children: string }; diff --git a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.css b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.css new file mode 100644 index 00000000000..ce684057b8c --- /dev/null +++ b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.css @@ -0,0 +1,14 @@ +.emptyState { + width: 95%; + margin: 0 auto; + max-width: var(--coral-sizing-maximal, 20rem); + text-align: center; +} +.emptyState .title { + font: var(--coral-heading-s, 600 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.emptyState .description { + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} diff --git a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.scss b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.scss deleted file mode 100644 index 2549f25f627..00000000000 --- a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.emptyState { - width: 95%; - margin: 0 auto; - max-width: tokens.$coral-sizing-maximal; - text-align: center; - - .title { - font: tokens.$coral-heading-s; - color: tokens.$coral-color-neutral-text; - } - - .description { - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-text; - } -} diff --git a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx index d5baab619c4..4343c73f533 100644 --- a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx +++ b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx @@ -8,7 +8,7 @@ import { ButtonPrimaryAsLink } from '../../ButtonAsLink'; import { ButtonPrimaryPropsType } from '../../Button/variations/ButtonPrimary'; import { ButtonPrimaryAsLinkPropsType } from '../../ButtonAsLink/variations/ButtonPrimaryAsLink'; -import styles from './EmptyStatePrimitive.module.scss'; +import styles from './EmptyStatePrimitive.module.css'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants'; type CallbackTypes = diff --git a/packages/design-system/src/components/Enumeration/Enumeration.component.tsx b/packages/design-system/src/components/Enumeration/Enumeration.component.tsx index b575bfe704c..f694ef4d06c 100644 --- a/packages/design-system/src/components/Enumeration/Enumeration.component.tsx +++ b/packages/design-system/src/components/Enumeration/Enumeration.component.tsx @@ -9,7 +9,7 @@ import { EnumerationMode, EnumerationProps, UiEnumerationItem } from './Enumerat import { EnumerationHeader } from './EnumerationHeader/EnumerationHeader.component'; import { EnumerationItem } from './EnumerationItem/EnumerationItem.component'; -import styles from './Enumeration.module.scss'; +import styles from './Enumeration.module.css'; const ENUMERATION_ITEM_HEIGHT = 38; diff --git a/packages/design-system/src/components/Enumeration/Enumeration.module.css b/packages/design-system/src/components/Enumeration/Enumeration.module.css new file mode 100644 index 00000000000..7bffacdb7ed --- /dev/null +++ b/packages/design-system/src/components/Enumeration/Enumeration.module.css @@ -0,0 +1,21 @@ +.enumeration { + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + border-radius: var(--coral-radius-m, 0.5rem); + min-width: 300px; + max-width: 100%; + overflow: hidden; + width: fit-content; +} +.enumeration ul { + list-style: none; + margin: 0; + padding: 0; +} +.enumeration h4, +.enumeration p, +.enumeration label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-right: var(--coral-spacing-xxs, 0.25rem); +} diff --git a/packages/design-system/src/components/Enumeration/Enumeration.module.scss b/packages/design-system/src/components/Enumeration/Enumeration.module.scss deleted file mode 100644 index 5af6adaa3dd..00000000000 --- a/packages/design-system/src/components/Enumeration/Enumeration.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.enumeration { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - border-radius: tokens.$coral-radius-m; - min-width: 300px; - max-width: 100%; - overflow: hidden; - width: fit-content; - - ul { - list-style: none; - margin: 0; - padding: 0; - } - - h4, - p, - label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-right: tokens.$coral-spacing-xxs; - } -} diff --git a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.component.tsx b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.component.tsx index a7e7dd9813d..e2a43e8abba 100644 --- a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.component.tsx +++ b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.component.tsx @@ -11,7 +11,7 @@ import { StackHorizontal, StackVertical } from '../../Stack'; import { EnumerationMode } from '../Enumeration.types'; import { EnumerationHeaderProps } from './EnumerationIHeader.types'; -import styles from './EnumerationHeader.module.scss'; +import styles from './EnumerationHeader.module.css'; export const EnumerationHeader = ({ filteredItems, diff --git a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.css b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.css new file mode 100644 index 00000000000..dff1fa5497e --- /dev/null +++ b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.css @@ -0,0 +1,21 @@ +.enumeration__header { + border-bottom: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + display: flex; + flex-direction: column; + padding: var(--coral-spacing-s, 0.75rem); + gap: var(--coral-spacing-s, 0.75rem); +} +.enumeration__header h4 { + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); +} +.enumeration__header [type='file'] { + display: none; +} +.enumeration__title { + align-items: center; + display: flex; +} +.enumeration__title > button { + margin-left: auto; +} diff --git a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.scss b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.scss deleted file mode 100644 index 1c2f9d59d7d..00000000000 --- a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.enumeration { - &__header { - border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - display: flex; - flex-direction: column; - padding: tokens.$coral-spacing-s; - gap: tokens.$coral-spacing-s; - - h4 { - font: tokens.$coral-heading-m; - } - - [type='file'] { - display: none; - } - } - - &__title { - align-items: center; - display: flex; - - > button { - margin-left: auto; - } - } -} diff --git a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.component.tsx b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.component.tsx index 6b5ebf23ec0..34ddedc43db 100644 --- a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.component.tsx +++ b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.component.tsx @@ -13,7 +13,7 @@ import { Skeleton } from '../../Skeleton'; import { EnumerationMode } from '../Enumeration.types'; import { EnumerationItemProps } from './EnumerationItem.types'; -import styles from './EnumerationItem.module.scss'; +import styles from './EnumerationItem.module.css'; export const EnumerationItem = ({ isToAnimate, diff --git a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.css b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.css new file mode 100644 index 00000000000..54c69540780 --- /dev/null +++ b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.css @@ -0,0 +1,34 @@ +.enumeration__item { + align-items: center; + background-color: var(--coral-color-neutral-background, white); + display: flex; + height: 38px; + justify-content: space-between; + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-xs, 0.5rem) + var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-s, 0.75rem); + transition: background-color var(--coral-transition-fast, 250ms ease-in-out); +} +.enumeration__item:hover { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.enumeration__item > :first-child { + width: 100%; +} +.enumeration__item > :first-child label { + flex: 1; +} +.enumeration__item--edit { + padding: 0 var(--coral-spacing-xxs, 0.25rem); +} +.enumeration__item--animate { + animation: highlight 1500ms both 100ms; +} + +@keyframes highlight { + 0% { + background-color: var(--coral-color-neutral-background, white); + } + 75% { + background-color: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + } +} diff --git a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.scss b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.scss deleted file mode 100644 index 8a447602d5c..00000000000 --- a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.enumeration__item { - align-items: center; - background-color: tokens.$coral-color-neutral-background; - display: flex; - height: 38px; - justify-content: space-between; - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs tokens.$coral-spacing-xxs tokens.$coral-spacing-s; - transition: background-color tokens.$coral-transition-fast; - - &:hover { - background-color: tokens.$coral-color-neutral-background-medium; - } - - > :first-child { - width: 100%; - - label { - flex: 1; - } - } - - &--edit { - padding: 0 tokens.$coral-spacing-xxs; - } - - &--animate { - animation: highlight 1500ms both 100ms; - } -} - -@keyframes highlight { - 0% { - background-color: tokens.$coral-color-neutral-background; - } - - 75% { - background-color: tokens.$coral-color-accent-background; - } -} diff --git a/packages/design-system/src/components/ErrorState/ErrorState.module.css b/packages/design-system/src/components/ErrorState/ErrorState.module.css new file mode 100644 index 00000000000..73510b5e0fd --- /dev/null +++ b/packages/design-system/src/components/ErrorState/ErrorState.module.css @@ -0,0 +1,6 @@ +.error-state { + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); +} +.error-state__title { + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); +} diff --git a/packages/design-system/src/components/ErrorState/ErrorState.module.scss b/packages/design-system/src/components/ErrorState/ErrorState.module.scss deleted file mode 100644 index 89e2a09c608..00000000000 --- a/packages/design-system/src/components/ErrorState/ErrorState.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.error-state { - font: tokens.$coral-paragraph-m; - - &__title { - font: tokens.$coral-heading-m; - } -} diff --git a/packages/design-system/src/components/ErrorState/ErrorState.tsx b/packages/design-system/src/components/ErrorState/ErrorState.tsx index 655c47c3c33..3aca32fdd97 100644 --- a/packages/design-system/src/components/ErrorState/ErrorState.tsx +++ b/packages/design-system/src/components/ErrorState/ErrorState.tsx @@ -8,7 +8,7 @@ import { StackVertical } from '../Stack'; import ErrorIllustration from './illutstrations/ErrorIllustration'; -import styles from './ErrorState.module.scss'; +import styles from './ErrorState.module.css'; export type ErrorStatePropTypes = { title: string; diff --git a/packages/design-system/src/components/Form/Affix/AffixStyles.module.css b/packages/design-system/src/components/Form/Affix/AffixStyles.module.css new file mode 100644 index 00000000000..21836f9379b --- /dev/null +++ b/packages/design-system/src/components/Form/Affix/AffixStyles.module.css @@ -0,0 +1,65 @@ +.affix { + display: inline-flex; + flex-grow: 1; + flex-shrink: 0; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + padding: 0 var(--coral-spacing-xs, 0.5rem); + justify-content: center; + align-items: center; + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + border: 0; + height: 100%; + min-height: auto; + max-height: var(--coral-sizing-m, 2.25rem); + transition: var(--coral-transition-fast, 250ms ease-in-out); + border-radius: 2px 0 0 2px; + border-right: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.affix_isSuffix { + border-radius: 0 2px 2px 0; + border-right: 0; + border-left: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.affix__icon { + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + display: flex; + justify-content: center; + align-items: center; +} +.affix__icon > svg { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); +} +.affix__caret { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); + display: flex; + justify-content: center; + align-items: center; +} +.affix__caret > svg { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); +} +.affix.button { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + cursor: pointer; +} +.affix.button:hover { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); + background: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +.affix.button:active { + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); + background: var(--coral-color-accent-background-active, hsl(204, 60%, 63%)); +} +.affix.button:disabled { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + cursor: not-allowed; +} diff --git a/packages/design-system/src/components/Form/Affix/AffixStyles.module.scss b/packages/design-system/src/components/Form/Affix/AffixStyles.module.scss deleted file mode 100644 index e1e94a642d0..00000000000 --- a/packages/design-system/src/components/Form/Affix/AffixStyles.module.scss +++ /dev/null @@ -1,86 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -@mixin button-affix-styles() { - color: tokens.$coral-color-accent-text; - background: tokens.$coral-color-accent-background; - cursor: pointer; - - &:hover { - color: tokens.$coral-color-accent-text-hover; - background: tokens.$coral-color-accent-background-hover; - } - - &:active { - color: tokens.$coral-color-accent-text-active; - background: tokens.$coral-color-accent-background-active; - } - - &:disabled { - color: tokens.$coral-color-neutral-text-weak; - background: tokens.$coral-color-neutral-background-strong; - cursor: not-allowed; - } -} - -@mixin base-affix-styles() { - display: inline-flex; - flex-grow: 1; - flex-shrink: 0; - color: tokens.$coral-color-neutral-text; - background: tokens.$coral-color-neutral-background-strong; - padding: 0 tokens.$coral-spacing-xs; - justify-content: center; - align-items: center; - font: tokens.$coral-paragraph-m; - border: 0; - height: 100%; - min-height: auto; - max-height: tokens.$coral-sizing-m; - transition: tokens.$coral-transition-fast; - border-radius: 2px 0 0 2px; - border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - - - &_isSuffix { - border-radius: 0 2px 2px 0; - border-right: 0; - border-left: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - } - - &__icon { - width: tokens.$coral-sizing-xxxs; - height: tokens.$coral-sizing-xxxs; - display: flex; - justify-content: center; - align-items: center; - - // Force legacy icon sizes - > svg { - width: tokens.$coral-sizing-minimal; - height: tokens.$coral-sizing-minimal; - } - } - - &__caret { - width: tokens.$coral-sizing-minimal; - height: tokens.$coral-sizing-minimal; - display: flex; - justify-content: center; - align-items: center; - - // Force legacy icon sizes - > svg { - width: tokens.$coral-sizing-minimal; - height: tokens.$coral-sizing-minimal; - } - } -} - -.affix { - @include base-affix-styles(); - - - &.button { - @include button-affix-styles(); - } -} diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx index 7f2436fcfe2..72f5ef9d523 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx @@ -14,7 +14,7 @@ import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper import { StackHorizontal } from '../../../Stack'; import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip'; -import styles from '../AffixStyles.module.scss'; +import styles from '../AffixStyles.module.css'; type CommonAffixButtonPropsType = { dataTestid?: string; diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx index 7ed1f178320..1d4a1f919a7 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx @@ -7,7 +7,7 @@ import { StackHorizontal } from '../../../Stack'; import { VisuallyHidden } from '../../../VisuallyHidden'; import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper'; -import styles from '../AffixStyles.module.scss'; +import styles from '../AffixStyles.module.css'; type CommonAffixReadOnlyPropsType = { children: string; diff --git a/packages/design-system/src/components/Form/Buttons/Buttons.module.css b/packages/design-system/src/components/Form/Buttons/Buttons.module.css new file mode 100644 index 00000000000..42055242623 --- /dev/null +++ b/packages/design-system/src/components/Form/Buttons/Buttons.module.css @@ -0,0 +1,10 @@ +.buttons button:first-child, +.buttons span:first-child { + margin-left: 0; + margin-right: auto; +} +.buttons button:only-child, +.buttons span:only-child { + margin-left: auto; + margin-right: 0; +} diff --git a/packages/design-system/src/components/Form/Buttons/Buttons.module.scss b/packages/design-system/src/components/Form/Buttons/Buttons.module.scss deleted file mode 100644 index 2f1686b077d..00000000000 --- a/packages/design-system/src/components/Form/Buttons/Buttons.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.buttons { - button:first-child, - span:first-child { - margin-left: 0; - margin-right: auto; - } - - button:only-child, - span:only-child { - margin-left: auto; - margin-right: 0; - } -} diff --git a/packages/design-system/src/components/Form/Buttons/Buttons.tsx b/packages/design-system/src/components/Form/Buttons/Buttons.tsx index fc144d23c36..161ccd13c13 100644 --- a/packages/design-system/src/components/Form/Buttons/Buttons.tsx +++ b/packages/design-system/src/components/Form/Buttons/Buttons.tsx @@ -3,7 +3,7 @@ import type { HTMLAttributes, Ref } from 'react'; import { isElement } from 'react-is'; import { StackHorizontal } from '../../Stack'; -import styles from './Buttons.module.scss'; +import styles from './Buttons.module.css'; type ButtonsProps = HTMLAttributes & { disabled?: boolean; diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.module.css b/packages/design-system/src/components/Form/Field/Input/Input.File.module.css new file mode 100644 index 00000000000..38907d4b19e --- /dev/null +++ b/packages/design-system/src/components/Form/Field/Input/Input.File.module.css @@ -0,0 +1,123 @@ +.wrapper { + width: 100%; +} + +.inputFile { + position: relative; + border: var(--coral-border-s-dashed, 1px dashed) + var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + border-radius: var(--coral-radius-s, 0.25rem); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + background: var(--coral-color-neutral-background, white); + transition: var(--coral-transition-fast, 250ms ease-in-out); + min-height: var(--coral-sizing-m, 2.25rem); + cursor: pointer; +} +.inputFile .text { + display: flex; + gap: var(--coral-spacing-xs, 0.5rem); + align-items: center; + justify-content: center; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + transition: var(--coral-transition-fast, 250ms ease-in-out); +} +.inputFile .text > svg { + color: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); +} +.inputFile .text > span > span { + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + transition: var(--coral-transition-fast, 250ms ease-in-out); +} +.inputFile .input, +.inputFile .input::-webkit-file-upload-button { + height: 100%; + width: 100%; + cursor: inherit; +} +.inputFile .input_filled { + pointer-events: none; +} +.inputFile .input:focus + .inputFile__text { + outline: var(--coral-border-m-solid, 2px solid) + var(--coral-color-assistive-border-focus, hsl(241, 54%, 61%)); +} +.inputFile .preview { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-xs, 0.5rem); +} +.inputFile .preview_single { + align-items: center; +} +.inputFile .preview__button button { + position: static; +} +.inputFile .preview__button button svg { + margin: 0; + fill: currentColor; +} +.inputFile .preview__list { + margin: 0; + padding: 0; + list-style: none; + flex-grow: 1; +} +.inputFile .preview__list__listItem { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.inputFile:hover:not(.inputFile_disabled) { + border: var(--coral-border-s-dashed, 1px dashed) + var(--coral-color-neutral-border-strong-hover, hsl(0, 0%, 15%)); +} +.inputFile:hover:not(.inputFile_disabled) .text { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.inputFile:hover:not(.inputFile_disabled) .text__fakeLink { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); + text-decoration: underline; +} +.inputFile_dragging { + background: var(--coral-color-accent-background-selected, hsl(204, 100%, 95%)); + border: var(--coral-border-s-dashed, 1px dashed) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.inputFile_dragging .text { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.inputFile_disabled { + border: var(--coral-border-s-dashed, 1px dashed) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); + cursor: not-allowed; +} +.inputFile_disabled .text { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.inputFile_disabled .text svg { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.inputFile_disabled .text__fakeLink { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.inputFile_error { + border: var(--coral-border-s-dashed, 1px dashed) + var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.inputFile_error .text svg { + color: var(--coral-color-danger-icon, hsl(359, 69%, 53%)); +} +.inputFile__text, +.inputFile__preview, +.inputFile__input { + min-height: calc(var(--coral-sizing-m, 2.25rem) - 0.125rem); +} +.inputFile__input { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0; +} diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.module.scss b/packages/design-system/src/components/Form/Field/Input/Input.File.module.scss deleted file mode 100644 index 9569f1491a4..00000000000 --- a/packages/design-system/src/components/Form/Field/Input/Input.File.module.scss +++ /dev/null @@ -1,152 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.wrapper { - width: 100%; -} - -.inputFile { - position: relative; - border: tokens.$coral-border-s-dashed tokens.$coral-color-neutral-border; - border-radius: tokens.$coral-radius-s; - color: tokens.$coral-color-neutral-text; - background: tokens.$coral-color-neutral-background; - transition: tokens.$coral-transition-fast; - min-height: tokens.$coral-sizing-m; - cursor: pointer; - - .text { - display: flex; - gap: tokens.$coral-spacing-xs; - align-items: center; - justify-content: center; - color: tokens.$coral-color-neutral-text-weak; - transition: tokens.$coral-transition-fast; - - > svg { - color: tokens.$coral-color-neutral-icon; - } - - // Nested span for a fake "link" effect - > span > span { - font: tokens.$coral-paragraph-m-bold; - color: tokens.$coral-color-accent-text; - transition: tokens.$coral-transition-fast; - } - } - - .input { - &, - &::-webkit-file-upload-button { - height: 100%; - width: 100%; - cursor: inherit; - } - - &_filled { - pointer-events: none; - } - - &:focus + .inputFile__text { - outline: tokens.$coral-border-m-solid tokens.$coral-color-assistive-border-focus; - } - } - - .preview { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs; - - &_single { - align-items: center; - } - - &__button { - button { - position: static; - - svg { - margin: 0; - fill: currentColor; - } - } - } - - &__list { - margin: 0; - padding: 0; - list-style: none; - flex-grow: 1; - - &__listItem { - color: tokens.$coral-color-neutral-text; - } - } - } - - &:hover:not(.inputFile_disabled) { - border: tokens.$coral-border-s-dashed tokens.$coral-color-neutral-border-strong-hover; - - .text { - color: tokens.$coral-color-neutral-text; - - &__fakeLink { - color: tokens.$coral-color-accent-text-hover; - text-decoration: underline; - } - } - } - - &_dragging { - background: tokens.$coral-color-accent-background-selected; - border: tokens.$coral-border-s-dashed tokens.$coral-color-accent-border; - - .text { - color: tokens.$coral-color-accent-text; - } - } - - &_disabled { - border: tokens.$coral-border-s-dashed tokens.$coral-color-neutral-border-disabled; - cursor: not-allowed; - - .text { - color: tokens.$coral-color-neutral-text-disabled; - cursor: not-allowed; - - svg { - color: tokens.$coral-color-neutral-icon-weak; - } - - &__fakeLink { - color: tokens.$coral-color-neutral-text-disabled; - } - } - } - - &_error { - border: tokens.$coral-border-s-dashed tokens.$coral-color-danger-border; - - .text { - svg { - color: tokens.$coral-color-danger-icon; - } - } - } - - &__text, - &__preview, - &__input { - min-height: calc(#{tokens.$coral-sizing-m} - 0.125rem); - } - - &__input { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - opacity: 0; - } -} - diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx index bf9e468429b..e7518b8687e 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx +++ b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx @@ -13,7 +13,7 @@ import { InputPrimitiveProps, } from '../../Primitives'; -import styles from './Input.File.module.scss'; +import styles from './Input.File.module.css'; import { useId } from '../../../../useId'; function getFileSize(size: number, t: TFunction) { diff --git a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.css b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.css new file mode 100644 index 00000000000..62def3c56a8 --- /dev/null +++ b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.css @@ -0,0 +1,97 @@ +.switch { + position: relative; + display: block; +} +.switch label { + margin-bottom: 0; +} +.switch input[type='checkbox'] { + position: absolute; + margin-left: -9999px; +} +.switch input[type='checkbox'] + .legend { + position: relative; + padding: 0 0 0 calc(2rem + var(--coral-spacing-xxs, 0.25rem)); + display: inline-block; + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.switch input[type='checkbox'] + .legend::before, +.switch input[type='checkbox'] + .legend::after { + background-image: none; + content: ''; + position: absolute; + top: 0; + left: 0; + border: none; + transition: 250ms ease-in-out; + border-radius: var(--coral-radius-round, 6249.9375rem); + margin: 0; +} +.switch input[type='checkbox'] + .legend::before { + width: 2rem; + height: var(--coral-sizing-xxxs, 1rem); + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + transform: translateY(0.0937rem); +} +.switch input[type='checkbox'] + .legend::after { + transform: translateX(0.0625rem) translateY(0.1875rem); + width: 0.8125rem; + height: 0.8125rem; + background-color: var(--coral-color-neutral-background, white); +} +.switch input[type='checkbox']:not(:disabled):hover + .legend::before { + background: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +.switch + input[type='checkbox']:not(.switch_disabled):not(.switch_readOnly) + input:hover + + .legend::before { + background: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +.switch input[type='checkbox']:focus-visible + .legend { + outline: var(--coral-border-s-solid, 1px solid) + var(--coral-color-assistive-border-focus, hsl(241, 54%, 61%)); +} +.switch:not(.switch_disabled) input[type='checkbox'] + .legend { + cursor: pointer; +} +.switch_inline { + display: inline-block; +} +.switch_checked:not(.switch_disabled):not(.switch_readOnly) + input[type='checkbox'] + + .legend::before { + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); +} +.switch_checked input[type='checkbox'] + .legend::after { + transform: translateX(calc(2rem - 0.8125rem - 0.0625rem)) translateY(0.1875rem); +} +.switch_checked:not(.switch_disabled):not(.switch_readOnly) input:hover + .legend::before { + background: var(--coral-color-accent-background-strong-hover, hsl(204, 95%, 23%)); +} +.switch_readOnly input[type='checkbox'] + .legend::before { + background: var(--coral-color-neutral-background-heavy, hsl(0, 0%, 78%)); +} +.switch_readOnly input[type='checkbox'] + .legend::after { + background: var(--coral-color-neutral-background, white); +} +.switch_disabled { + cursor: not-allowed; +} +.switch_disabled input[type='checkbox'] + .legend::before, +.switch_disabled input[type='checkbox']:disabled + .legend::before, +.switch_disabled input[type='checkbox']:checked + .legend::before { + background: var(--coral-color-neutral-background-disabled, hsl(0, 0%, 88%)); +} +.switch_disabled input[type='checkbox'] + .legend, +.switch_disabled input[type='checkbox']:disabled + .legend, +.switch_disabled input[type='checkbox']:checked + .legend { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.switch_disabled label { + cursor: not-allowed; +} +.switch_disabled label > * { + cursor: not-allowed; +} diff --git a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.scss b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.scss deleted file mode 100644 index b0768f52e02..00000000000 --- a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.scss +++ /dev/null @@ -1,130 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$wrapper-width: 2rem; -$marker-size: 0.8125rem; -$label-offset: calc(#{$wrapper-width} + #{tokens.$coral-spacing-xxs}); - -.switch { - position: relative; - display: block; - - label { - margin-bottom: 0; // Bootstrap override - } - - input[type='checkbox'] { - position: absolute; - margin-left: -9999px; - - + .legend { - position: relative; - padding: 0 0 0 $label-offset; - display: inline-block; - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-text; - } - - + .legend::before, - + .legend::after { - background-image: none; - content: ''; - position: absolute; - top: 0; - left: 0; - border: none; - transition: 250ms ease-in-out; - border-radius: tokens.$coral-radius-round; - margin: 0; // bootstrap override - } - - + .legend::before { - width: $wrapper-width; - height: tokens.$coral-sizing-xxxs; - background: tokens.$coral-color-accent-background; - transform: translateY(0.0937rem); - } - - + .legend::after { - transform: translateX(0.0625rem) translateY(0.1875rem); - width: $marker-size; - height: $marker-size; - background-color: tokens.$coral-color-neutral-background; - } - - &:not(:disabled):hover { - + .legend::before { - background: tokens.$coral-color-accent-background-hover; - } - } - - &:not(.switch_disabled):not(.switch_readOnly) input:hover + .legend::before { - background: tokens.$coral-color-accent-background-hover; - } - - &:focus-visible { - + .legend { - outline: tokens.$coral-border-s-solid tokens.$coral-color-assistive-border-focus; - } - } - } - - &:not(.switch_disabled) input[type='checkbox'] { - + .legend { - cursor: pointer; - } - } - - &_inline { - display: inline-block; - } - - &_checked { - &:not(.switch_disabled):not(.switch_readOnly) input[type='checkbox'] + .legend::before { - background: tokens.$coral-color-accent-background-strong; - } - - input[type='checkbox'] + .legend::after { - transform: translateX(calc(#{$wrapper-width} - #{$marker-size} - 0.0625rem)) translateY(0.1875rem); - } - - &:not(.switch_disabled):not(.switch_readOnly) input:hover + .legend::before { - background: tokens.$coral-color-accent-background-strong-hover; - } - } - - &_readOnly { - input[type='checkbox'] { - + .legend::before { - background: tokens.$coral-color-neutral-background-heavy; - } - - + .legend::after { - background: tokens.$coral-color-neutral-background; - } - } - } - - &_disabled { - cursor: not-allowed; - - input[type='checkbox'], - input[type='checkbox']:disabled, - input[type='checkbox']:checked { - + .legend::before { - background: tokens.$coral-color-neutral-background-disabled; - } - - + .legend { - color: tokens.$coral-color-neutral-text-disabled; - } - } - - label { - cursor: not-allowed; - - > * { - cursor: not-allowed; - } - } - } -} diff --git a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx index 5e8a57c3465..041eed630ed 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx +++ b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx @@ -7,7 +7,7 @@ import { useControl } from '../../../../useControl'; import { useId } from '../../../../useId'; import { CheckboxPrimitiveType } from '../../Primitives'; -import styles from './Input.ToggleSwitch.module.scss'; +import styles from './Input.ToggleSwitch.module.css'; export type ToggleSwitchPropTypes = Omit & { onChange?: (event: ChangeEvent) => void; diff --git a/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.css b/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.css new file mode 100644 index 00000000000..b310df1a2da --- /dev/null +++ b/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.css @@ -0,0 +1,29 @@ +.button { + padding: 0 var(--coral-spacing-xs, 0.5rem); + background: transparent; + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); + transition: var(--coral-transition-instant, 100ms ease-out); + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} +.button_readOnly { + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} +.button__icon { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); +} +.button:hover { + color: var(--coral-color-accent-icon-hover, hsl(204, 88%, 30%)); +} +.button:active { + color: var(--coral-color-accent-icon-active, hsl(205, 88%, 20%)); +} +.button:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.button:disabled .button__icon { + opacity: var(--coral-opacity-s, 0.6); +} diff --git a/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.scss b/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.scss deleted file mode 100644 index 2cde464b970..00000000000 --- a/packages/design-system/src/components/Form/Field/Input/hooks/passwordButton.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.button { - padding: 0 tokens.$coral-spacing-xs; - background: transparent; - color: tokens.$coral-color-neutral-icon-weak; - transition: tokens.$coral-transition-instant; - display: flex; - justify-content: center; - align-items: center; - height: 100%; - - &_readOnly { - background: tokens.$coral-color-neutral-background-strong; - } - - &__icon { - width: tokens.$coral-sizing-minimal; - height: tokens.$coral-sizing-minimal; - } - - &:hover { - color: tokens.$coral-color-accent-icon-hover; - } - - &:active { - color: tokens.$coral-color-accent-icon-active; - } - - &:disabled { - color: tokens.$coral-color-neutral-text-disabled; - - .button__icon { - opacity: tokens.$coral-opacity-s; - } - } -} diff --git a/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx b/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx index 8298704dfc9..9e2d9a71bd2 100644 --- a/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx +++ b/packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx @@ -6,7 +6,7 @@ import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../../constants'; import { Clickable } from '../../../../Clickable'; import { Tooltip } from '../../../../Tooltip'; import { SizedIcon } from '../../../../Icon'; -import styles from './passwordButton.module.scss'; +import styles from './passwordButton.module.css'; import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../../Tooltip/Tooltip'; export default function useRevealPassword() { diff --git a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.css b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.css new file mode 100644 index 00000000000..aa4914f27a6 --- /dev/null +++ b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.css @@ -0,0 +1,17 @@ +.fieldset { + padding: 0; + border: none; +} + +.legend { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: var(--coral-spacing-m, 1rem) 0; + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); + margin: 0; +} + +.fieldset-content { + display: flex; + flex-flow: column; + gap: var(--coral-spacing-s, 0.75rem); +} diff --git a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss deleted file mode 100644 index 671371cfd65..00000000000 --- a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.fieldset { - padding: 0; - border: none; -} - -.legend { - color: tokens.$coral-color-neutral-text; - padding: tokens.$coral-spacing-m 0; - font: tokens.$coral-heading-m; - margin: 0; -} - -.fieldset-content { - display: flex; - flex-flow: column; - gap: tokens.$coral-spacing-s; -} diff --git a/packages/design-system/src/components/Form/Fieldset/Fieldset.tsx b/packages/design-system/src/components/Form/Fieldset/Fieldset.tsx index e99986fcb78..d9959f974de 100644 --- a/packages/design-system/src/components/Form/Fieldset/Fieldset.tsx +++ b/packages/design-system/src/components/Form/Fieldset/Fieldset.tsx @@ -2,7 +2,7 @@ import { Children, cloneElement, forwardRef } from 'react'; import type { FieldsetHTMLAttributes, Ref } from 'react'; import { isElement } from 'react-is'; -import styles from './Fieldset.module.scss'; +import styles from './Fieldset.module.css'; export type FieldsetProps = FieldsetHTMLAttributes & { legend?: string; diff --git a/packages/design-system/src/components/Form/Form.module.css b/packages/design-system/src/components/Form/Form.module.css new file mode 100644 index 00000000000..2e004fbd4d0 --- /dev/null +++ b/packages/design-system/src/components/Form/Form.module.css @@ -0,0 +1,12 @@ +.form { + display: flex; + flex-flow: column; + margin: 0 auto; + width: 100%; + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + gap: var(--coral-spacing-s, 0.75rem); +} +.form fieldset { + padding: 0; + border: none; +} diff --git a/packages/design-system/src/components/Form/Form.module.scss b/packages/design-system/src/components/Form/Form.module.scss deleted file mode 100644 index d5f88439f65..00000000000 --- a/packages/design-system/src/components/Form/Form.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.form { - display: flex; - flex-flow: column; - margin: 0 auto; - width: 100%; - font: tokens.$coral-paragraph-m; - gap: tokens.$coral-spacing-s; - - fieldset { - padding: 0; - border: none; - } -} diff --git a/packages/design-system/src/components/Form/Form.tsx b/packages/design-system/src/components/Form/Form.tsx index f42198c2a87..abdde3f57a0 100644 --- a/packages/design-system/src/components/Form/Form.tsx +++ b/packages/design-system/src/components/Form/Form.tsx @@ -3,7 +3,7 @@ import type { FormHTMLAttributes, Ref } from 'react'; import { isElement } from 'react-is'; -import styles from './Form.module.scss'; +import styles from './Form.module.css'; export type FormProps = FormHTMLAttributes & { disabled?: boolean; diff --git a/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.css b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.css new file mode 100644 index 00000000000..88c5eb4976d --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.css @@ -0,0 +1,150 @@ +.checkbox { + display: flex; + gap: var(--coral-spacing-xs, 0.5rem); + justify-content: flex-start; + align-items: center; + position: relative; +} +.checkbox input[type='checkbox'] { + margin: 0; + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + position: relative; + z-index: 3; + opacity: 0; + cursor: pointer; +} +.checkbox input[type='checkbox']:disabled { + cursor: not-allowed; +} +.checkbox input[type='checkbox'] + label::before, +.checkbox input[type='checkbox'] + label::after { + content: ''; + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + border-radius: var(--coral-radius-s, 0.25rem); + transition: var(--coral-transition-fast, 250ms ease-in-out); + display: block; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + margin: 0; +} +.checkbox input[type='checkbox'] + label::before { + z-index: 1; + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.checkbox input[type='checkbox'] + label::after { + z-index: 2; + opacity: 0; + mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjA1IDEgMyA1LjEuOTUgMy4wNDk1IDAgNGwzIDMgNS01LjA1TDcuMDUgMVoiIGZpbGw9IiNmZmYiLz48bWFzayBpZD0iYSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMSIgd2lkdGg9IjgiIGhlaWdodD0iNiI+PHBhdGggZD0iTTcuMDUgMSAzIDUuMS45NSAzLjA0OTUgMCA0bDMgMyA1LTUuMDVMNy4wNSAxWiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48L3N2Zz4='); + background-image: none; + background-color: var(--coral-color-neutral-background, white); + width: calc(var(--coral-sizing-xxxs, 1rem) / 2); + height: calc(var(--coral-sizing-xxxs, 1rem) / 2); + left: calc(var(--coral-sizing-xxxs, 1rem) / 2 - var(--coral-sizing-xxxs, 1rem) / 4); +} +.checkbox input[type='checkbox']:hover + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.checkbox input[type='checkbox']:active + label::before { + background: var(--coral-color-accent-background-active, hsl(204, 60%, 63%)); +} +.checkbox input[type='checkbox']:checked + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); +} +.checkbox input[type='checkbox']:checked + label::after { + opacity: 1; +} +.checkbox input[type='checkbox']:focus-visible + label::before, +.checkbox input[type='checkbox']:global(.focus-visible) + label::before { + outline: var(--coral-border-m-solid, 2px solid) + var(--coral-color-assistive-border-focus, hsl(241, 54%, 61%)); + outline-offset: 1px; +} +.checkbox input[type='checkbox'][aria-checked='mixed'] + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); +} +.checkbox input[type='checkbox'][aria-checked='mixed'] + label::after { + opacity: 1; + mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOCA1SDBWM2g4djJaIiBmaWxsPSIjZmZmIi8+PC9zdmc+'); +} +.checkbox input[type='checkbox']:checked:not(:disabled):hover + label::before, +.checkbox input[type='checkbox'][aria-checked='mixed']:not(:disabled):hover + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border-hover, hsl(204, 95%, 23%)); + background: var(--coral-color-accent-background-strong-hover, hsl(204, 95%, 23%)); +} +.checkbox input[type='checkbox']:checked:not(:disabled):active + label::before, +.checkbox input[type='checkbox'][aria-checked='mixed']:not(:disabled):active + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border-active, hsl(205, 95%, 15%)); + background: var(--coral-color-accent-background-strong-active, hsl(205, 95%, 15%)); +} +.checkbox input[type='checkbox']:disabled + label, +.checkbox input[type='checkbox']:checked:disabled + label, +.checkbox input[type='checkbox'][aria-checked='mixed']:disabled + label { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.checkbox input[type='checkbox']:disabled + label::before, +.checkbox input[type='checkbox']:checked:disabled + label::before, +.checkbox input[type='checkbox'][aria-checked='mixed']:disabled + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); + opacity: var(--coral-opacity-s, 0.6); + cursor: not-allowed; + background: var(--coral-color-neutral-background-disabled, hsl(0, 0%, 88%)); +} +.checkbox input[type='checkbox']:checked:disabled + label::after, +.checkbox input[type='checkbox'][aria-checked='mixed']:disabled + label::after { + background-color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); + opacity: var(--coral-opacity-m, 0.4); +} +.checkbox_isInline { + display: inline-flex; +} +.checkbox_readOnly input[type='checkbox'] { + cursor: not-allowed; + pointer-events: none; +} +.checkbox_readOnly input[type='checkbox']:not(:checked) + label, +.checkbox_readOnly input[type='checkbox']:checked + label, +.checkbox_readOnly input[type='checkbox'][aria-checked='mixed'] + label { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + cursor: not-allowed; +} +.checkbox_readOnly input[type='checkbox']:not(:checked) + label::before, +.checkbox_readOnly input[type='checkbox']:checked + label::before, +.checkbox_readOnly input[type='checkbox'][aria-checked='mixed'] + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + opacity: 1; +} +.checkbox_readOnly input[type='checkbox']:not(:checked) + label::after, +.checkbox_readOnly input[type='checkbox']:checked + label::after, +.checkbox_readOnly input[type='checkbox'][aria-checked='mixed'] + label::after { + opacity: 0; +} +.checkbox_readOnly input[type='checkbox']:checked + label::after, +.checkbox_readOnly input[type='checkbox'][aria-checked='mixed'] + label::after { + background-color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); + opacity: 1; +} +.checkbox_readOnly input[type='checkbox']:checked:not(:disabled):hover + label::before, +.checkbox_readOnly input[type='checkbox']:not(:disabled):hover + label::before, +.checkbox_readOnly + input[type='checkbox'][aria-checked='mixed']:not(:disabled):hover + + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} diff --git a/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.scss b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.scss deleted file mode 100644 index 15730f89ae9..00000000000 --- a/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.scss +++ /dev/null @@ -1,205 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$checkmark-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjA1IDEgMyA1LjEuOTUgMy4wNDk1IDAgNGwzIDMgNS01LjA1TDcuMDUgMVoiIGZpbGw9IiNmZmYiLz48bWFzayBpZD0iYSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMSIgd2lkdGg9IjgiIGhlaWdodD0iNiI+PHBhdGggZD0iTTcuMDUgMSAzIDUuMS45NSAzLjA0OTUgMCA0bDMgMyA1LTUuMDVMNy4wNSAxWiIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48L3N2Zz4='); -$checkmark-image-indeterminate: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOCA1SDBWM2g4djJaIiBmaWxsPSIjZmZmIi8+PC9zdmc+'); -$checkbox-size: tokens.$coral-sizing-xxxs; - -.checkbox { - display: flex; - gap: tokens.$coral-spacing-xs; - justify-content: flex-start; - align-items: center; - position: relative; - - input[type='checkbox'] { - margin: 0; - width: $checkbox-size; - height: $checkbox-size; - position: relative; - z-index: 3; - opacity: 0; - cursor: pointer; - - &:disabled { - cursor: not-allowed; - } - } - - input[type='checkbox'] + label { - &::before, - &::after { - content: ''; - width: $checkbox-size; - height: $checkbox-size; - border-radius: tokens.$coral-radius-s; - transition: tokens.$coral-transition-fast; - display: block; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - margin: 0; - } - // Checkbox - &::before { - z-index: 1; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - background: tokens.$coral-color-neutral-background-medium; - } - - // Mark - &::after { - z-index: 2; - opacity: 0; - mask-image: $checkmark-image; - background-image: none; - background-color: tokens.$coral-color-neutral-background; - width: calc(#{tokens.$coral-sizing-xxxs} / 2); - height: calc(#{tokens.$coral-sizing-xxxs} / 2); - left: calc(#{tokens.$coral-sizing-xxxs} / 2 - #{$checkbox-size} / 4); - } - } - - input[type='checkbox']:hover + label { - // Checkbox - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - } - } - - input[type='checkbox']:active + label { - // Checkbox - &::before { - background: tokens.$coral-color-accent-background-active; - } - } - - input[type='checkbox']:checked + label { - // Checkbox - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - background: tokens.$coral-color-accent-background-strong; - } - - // Mark - &::after { - opacity: 1; - } - } - - input[type='checkbox']:focus-visible + label, - input[type='checkbox']:global(.focus-visible) + label { - // Checkbox - &::before { - outline: tokens.$coral-border-m-solid tokens.$coral-color-assistive-border-focus; - outline-offset: 1px; - } - } - - input[type='checkbox'][aria-checked='mixed'] + label { - // Checkbox - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - background: tokens.$coral-color-accent-background-strong; - } - - // Mark - &::after { - opacity: 1; - mask-image: $checkmark-image-indeterminate; - } - } - - input[type='checkbox']:checked:not(:disabled):hover + label, - input[type='checkbox'][aria-checked='mixed']:not(:disabled):hover + label { - // Checkbox - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-hover; - background: tokens.$coral-color-accent-background-strong-hover; - } - } - - input[type='checkbox']:checked:not(:disabled):active + label, - input[type='checkbox'][aria-checked='mixed']:not(:disabled):active + label { - // Checkbox - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-active; - background: tokens.$coral-color-accent-background-strong-active; - } - } - - // Disabled and read-only cases - - input[type='checkbox']:disabled + label, - input[type='checkbox']:checked:disabled + label, - input[type='checkbox'][aria-checked='mixed']:disabled + label { - color: tokens.$coral-color-neutral-text-disabled; - cursor: not-allowed; - - // Checkbox - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - opacity: tokens.$coral-opacity-s; - cursor: not-allowed; - background: tokens.$coral-color-neutral-background-disabled; - } - } - - input[type='checkbox']:checked:disabled + label, - input[type='checkbox'][aria-checked='mixed']:disabled + label { - // Mark - &::after { - background-color: tokens.$coral-color-neutral-icon-weak; - opacity: tokens.$coral-opacity-m; - } - } - - &_isInline { - display: inline-flex; - } - - &_readOnly { - input[type='checkbox'] { - cursor: not-allowed; - pointer-events: none; - } - - input[type='checkbox']:not(:checked) + label, - input[type='checkbox']:checked + label, - input[type='checkbox'][aria-checked='mixed'] + label { - color: tokens.$coral-color-neutral-text; - cursor: not-allowed; - - // Checkbox - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - background: tokens.$coral-color-neutral-background-strong; - opacity: 1; - } - - // Mark - &::after { - opacity: 0; - } - } - - input[type='checkbox']:checked + label, - input[type='checkbox'][aria-checked='mixed'] + label { - // Mark - &::after { - background-color: tokens.$coral-color-neutral-icon-weak; - opacity: 1; - } - } - - input[type='checkbox']:checked:not(:disabled):hover + label, - input[type='checkbox']:not(:disabled):hover + label, - input[type='checkbox'][aria-checked='mixed']:not(:disabled):hover + label { - // Checkbox - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - background: tokens.$coral-color-neutral-background-strong; - } - } - } -} diff --git a/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.tsx b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.tsx index db4c5cbdf17..9284d9f3fe2 100644 --- a/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.tsx +++ b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.tsx @@ -14,7 +14,7 @@ import { useControl } from '../../../../useControl'; import { useId } from '../../../../useId'; import Label from '../../Label'; -import styles from './Checkbox.module.scss'; +import styles from './Checkbox.module.css'; type CheckboxProps = InputHTMLAttributes & { value?: string | number; diff --git a/packages/design-system/src/components/Form/Primitives/Input/Input.module.css b/packages/design-system/src/components/Form/Primitives/Input/Input.module.css new file mode 100644 index 00000000000..a43509c8da4 --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Input/Input.module.css @@ -0,0 +1,62 @@ +.input { + background: transparent; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: var(--coral-spacing-xs, 0.5rem); + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + line-height: 1; + border: 0; + margin: 0; + transition: var(--coral-transition-instant, 100ms ease-out); + display: block; + flex-grow: 1; + width: 100%; +} +.input:only-child { + border-radius: var(--coral-radius-s, 0.25rem); +} +.input:disabled, +.input_disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.input_readOnly { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.input:focus { + outline: 0; +} +.input:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.input::placeholder { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + opacity: var(--coral-opacity-s, 0.6); +} +.input[disabled] { + opacity: 1; +} +.input[disabled] > option { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.input { + height: 1.875rem; +} +.input[type='color'] { + padding: var(--coral-spacing-xxs, 0.25rem); +} +.icon { + padding: 0 0 0 var(--coral-spacing-xs, 0.5rem); + background: transparent; + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); + transition: var(--coral-transition-instant, 100ms ease-out); + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.icon_disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.icon_readOnly { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} diff --git a/packages/design-system/src/components/Form/Primitives/Input/Input.module.scss b/packages/design-system/src/components/Form/Primitives/Input/Input.module.scss deleted file mode 100644 index 538e8640d74..00000000000 --- a/packages/design-system/src/components/Form/Primitives/Input/Input.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -@use '../mixins' as Form; - -.input { - @include Form.base-input(); - height: Form.$standard-input-height; - - &[type='color'] { - padding: tokens.$coral-spacing-xxs; - } - - &[type='password'] { - // padding-right: calc(#{tokens.$coral-sizing-xs} + #{tokens.$coral-spacing-xxs}*2); - } -} - -.icon { - padding: 0 0 0 tokens.$coral-spacing-xs; - background: transparent; - color: tokens.$coral-color-neutral-icon-weak; - transition: tokens.$coral-transition-instant; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - - &_disabled { - color: tokens.$coral-color-neutral-text-disabled; - } - - &_readOnly { - color: tokens.$coral-color-neutral-text-weak; - } -} diff --git a/packages/design-system/src/components/Form/Primitives/Input/Input.tsx b/packages/design-system/src/components/Form/Primitives/Input/Input.tsx index 56e4643ca91..57f01a7aaa8 100644 --- a/packages/design-system/src/components/Form/Primitives/Input/Input.tsx +++ b/packages/design-system/src/components/Form/Primitives/Input/Input.tsx @@ -15,11 +15,10 @@ import { SizedIcon } from '../../../Icon'; import { FieldStatusProps } from '../Field/Field'; import InputWrapper, { AffixesProps } from '../InputWrapper/InputWrapper'; -import styles from './Input.module.scss'; +import styles from './Input.module.css'; export type InputPrimitiveProps = Omit, 'prefix' | 'suffix'> & - AffixesProps & - Omit & + AffixesProps & { noStyles?: boolean } & Omit & Partial; const Input = forwardRef((props: InputPrimitiveProps, ref: Ref) => { @@ -33,6 +32,7 @@ const Input = forwardRef((props: InputPrimitiveProps, ref: Ref <> {type === 'search' && ( diff --git a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.css b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.css new file mode 100644 index 00000000000..9b1c0b1126e --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.css @@ -0,0 +1,89 @@ +.inputShell { + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + box-shadow: 0 0 0 0 transparent; + border-radius: var(--coral-radius-s, 0.25rem); + transition: var(--coral-transition-instant, 100ms ease-out); + background: var(--coral-color-neutral-background, white); +} +.inputShell:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-strong-hover, hsl(0, 0%, 15%)); +} +.inputShell_disabled { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} +.inputShell_readOnly { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} +.inputShell_disabled:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} +.inputShell_readOnly:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.inputShell:focus-within, +.inputShell:focus { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); + box-shadow: 0 0 0 0.0625rem var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.inputShell_borderError { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.inputShell_borderError:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border-hover, hsl(359, 54%, 38%)); +} +.inputShell_borderError:focus-within, +.inputShell_borderError:focus { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border, hsl(359, 51%, 53%)); + box-shadow: 0 0 0 0.0625rem var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.inputShell { + height: 2rem; + display: flex; + flex-flow: row; + gap: 0; + justify-content: stretch; + align-items: stretch; + position: relative; + overflow: hidden; +} +.inputShell_freeHeight { + height: auto; +} +.inputShell_freeHeight > div:first-child, +.inputShell_freeHeight > div:last-child { + height: unset; +} +.inputShell_noStyles { + height: 100%; + display: flex; + align-items: stretch; + justify-content: stretch; + flex-grow: 0; + flex-shrink: 0; + border: none; + border-radius: 0; + background: transparent; + padding: 0; +} +.inputShell_noStyles:hover, +.inputShell_noStyles:active, +.inputShell_noStyles:focus, +.inputShell_noStyles:focus-within { + border: none; + border-radius: 0; + background: transparent; + box-shadow: 0 0 0 transparent; +} +.inputShell_noStyles:focus { + border: none; +} diff --git a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss deleted file mode 100644 index db9b79adaa1..00000000000 --- a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -@use '../mixins' as Form; - -.inputShell { - @include Form.border-styles(); - height: 2rem; - display: flex; - flex-flow: row; - gap: 0; - justify-content: stretch; - align-items: stretch; - position: relative; - overflow: hidden; - - &_freeHeight { - height: auto; - - // Ensure elements in auto height stretch according to flex model. - > div:first-child, - > div:last-child { - height: unset; - } - } - - &_noStyles { - height: 100%; - display: flex; - align-items: stretch; - justify-content: stretch; - flex-grow: 0; - flex-shrink: 0; - border: none; - border-radius: 0; - background: transparent; - padding: 0; - - &:hover, - &:active, - &:focus, - &:focus-within { - border: none; - border-radius: 0; - background: transparent; - box-shadow: 0 0 0 transparent; - } - - &:focus { - border: none; - } - } -} diff --git a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.tsx b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.tsx index c0ff98ffce5..518c042bf2d 100644 --- a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.tsx +++ b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.tsx @@ -11,7 +11,7 @@ import AffixSelect from '../../../Form/Affix/variations/AffixSelect'; import { FieldPropsPrimitive, FieldStatusProps } from '../Field/Field'; import { SelectPrimitiveProps } from '../Select/Select'; -import styles from './InputWrapper.module.scss'; +import styles from './InputWrapper.module.css'; type AffixProps = | ({ type: 'button' } & AffixButtonPropsType) diff --git a/packages/design-system/src/components/Form/Primitives/Label/Label.module.css b/packages/design-system/src/components/Form/Primitives/Label/Label.module.css new file mode 100644 index 00000000000..11eec3ee0bc --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Label/Label.module.css @@ -0,0 +1,9 @@ +.label { + font: var(--coral-paragraph-s-bold, 600 0.75rem/140% 'Source Sans Pro'); + margin: 0; + padding: 0; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.label_inline { + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); +} diff --git a/packages/design-system/src/components/Form/Primitives/Label/Label.module.scss b/packages/design-system/src/components/Form/Primitives/Label/Label.module.scss deleted file mode 100644 index 83f67ad0ed4..00000000000 --- a/packages/design-system/src/components/Form/Primitives/Label/Label.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.label { - font: tokens.$coral-paragraph-s-bold; - margin: 0; - padding: 0; - color: tokens.$coral-color-neutral-text; - - &_inline { - font: tokens.$coral-paragraph-m; - } -} diff --git a/packages/design-system/src/components/Form/Primitives/Label/Label.tsx b/packages/design-system/src/components/Form/Primitives/Label/Label.tsx index f1a1487df7c..018a0a01a43 100644 --- a/packages/design-system/src/components/Form/Primitives/Label/Label.tsx +++ b/packages/design-system/src/components/Form/Primitives/Label/Label.tsx @@ -1,13 +1,12 @@ import { forwardRef, LabelHTMLAttributes, ReactElement, Ref } from 'react'; import classnames from 'classnames'; -import styles from './Label.module.scss'; +import styles from './Label.module.css'; -export type LabelPrimitiveProps = - | LabelHTMLAttributes & { - children: string | ReactElement; - inline?: boolean; - required?: boolean; - }; +export type LabelPrimitiveProps = LabelHTMLAttributes & { + children: string | ReactElement; + inline?: boolean; + required?: boolean; +}; const Label = forwardRef((props: LabelPrimitiveProps, ref: Ref) => { const { children, inline = false, required = false, className, ...rest } = props; diff --git a/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.css b/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.css new file mode 100644 index 00000000000..3b931750323 --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.css @@ -0,0 +1,129 @@ +.radio { + display: inline-flex; + gap: var(--coral-spacing-xs, 0.5rem); + justify-content: flex-start; + align-items: center; + position: relative; +} +.radio input[type='radio'] { + margin: 0; + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + position: relative; + z-index: 3; + opacity: 0; + cursor: pointer; +} +.radio input[type='radio']:disabled { + cursor: not-allowed; +} +.radio input[type='radio'] + label::before, +.radio input[type='radio'] + label::after { + content: ''; + border-radius: var(--coral-radius-round, 6249.9375rem); + transition: var(--coral-transition-fast, 250ms ease-in-out); + display: block; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + margin: 0; +} +.radio input[type='radio'] + label::before { + z-index: 1; + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.radio input[type='radio'] + label::after { + z-index: 2; + opacity: 0; + background-image: none; + background-color: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); + width: calc(var(--coral-sizing-xxs, 1.25rem) / 2); + height: calc(var(--coral-sizing-xxs, 1.25rem) / 2); + border: 0; + left: calc(var(--coral-sizing-xxxs, 1rem) / 2 - calc(var(--coral-sizing-xxs, 1.25rem) / 2) / 2); +} +.radio input[type='radio']:hover + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.radio input[type='radio']:active + label::before { + background: var(--coral-color-accent-background-active, hsl(204, 60%, 63%)); +} +.radio input[type='radio']:focus-visible + label::before, +.radio input[type='radio']:global(.focus-visible) + label::before { + outline: var(--coral-border-m-solid, 2px solid) + var(--coral-color-assistive-border-focus, hsl(241, 54%, 61%)); + outline-offset: 1px; +} +.radio input[type='radio']:checked + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.radio input[type='radio']:checked + label::after { + opacity: 1; +} +.radio input[type='radio']:checked:not(:disabled):hover + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border-hover, hsl(204, 95%, 23%)); +} +.radio input[type='radio']:checked:not(:disabled):hover + label::after { + background: var(--coral-color-accent-background-strong-hover, hsl(204, 95%, 23%)); +} +.radio input[type='radio']:checked:not(:disabled):active + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border-active, hsl(205, 95%, 15%)); + background: var(--coral-color-accent-background-strong-active, hsl(205, 95%, 15%)); +} +.radio input[type='radio']:disabled + label, +.radio input[type='radio']:checked:disabled + label { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.radio input[type='radio']:disabled + label::before, +.radio input[type='radio']:checked:disabled + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); + opacity: var(--coral-opacity-s, 0.6); + cursor: not-allowed; + background: var(--coral-color-neutral-background-disabled, hsl(0, 0%, 88%)); +} +.radio input[type='radio']:checked:disabled + label::after { + background-color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); + opacity: var(--coral-opacity-m, 0.4); +} +.radio_readOnly input[type='radio'] { + cursor: not-allowed; +} +.radio_readOnly input[type='radio']:not(:checked) + label, +.radio_readOnly input[type='radio']:checked + label { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + cursor: not-allowed; +} +.radio_readOnly input[type='radio']:not(:checked) + label::before, +.radio_readOnly input[type='radio']:checked + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + opacity: 1; +} +.radio_readOnly input[type='radio']:not(:checked) + label::after, +.radio_readOnly input[type='radio']:checked + label::after { + opacity: 0; +} +.radio_readOnly input[type='radio']:checked + label::before, +.radio_readOnly input[type='radio']:checked:not(:disabled):hover + label::before, +.radio_readOnly input[type='radio']:checked:not(:disabled):active + label::before { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} +.radio_readOnly input[type='radio']:checked + label::after, +.radio_readOnly input[type='radio']:checked:not(:disabled):hover + label::after, +.radio_readOnly input[type='radio']:checked:not(:disabled):active + label::after { + background-color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); + opacity: 1; +} diff --git a/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.scss b/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.scss deleted file mode 100644 index f54ad0c927c..00000000000 --- a/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.scss +++ /dev/null @@ -1,180 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$radio-size: tokens.$coral-sizing-xxxs; -$mark-size: calc(#{tokens.$coral-sizing-xxs} / 2); - -.radio { - display: inline-flex; - gap: tokens.$coral-spacing-xs; - justify-content: flex-start; - align-items: center; - position: relative; - - input[type='radio'] { - margin: 0; - width: $radio-size; - height: $radio-size; - position: relative; - z-index: 3; - opacity: 0; - cursor: pointer; - - &:disabled { - cursor: not-allowed; - } - } - - input[type='radio'] + label { - &::before, - &::after { - content: ''; - border-radius: tokens.$coral-radius-round; - transition: tokens.$coral-transition-fast; - display: block; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - margin: 0; - } - // Radio - &::before { - z-index: 1; - width: $radio-size; - height: $radio-size; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - background: tokens.$coral-color-neutral-background-medium; - } - - // Mark - &::after { - z-index: 2; - opacity: 0; - background-image: none; - background-color: tokens.$coral-color-accent-background-strong; - width: $mark-size; - height: $mark-size; - border: 0; - left: calc(#{$radio-size} / 2 - #{$mark-size} / 2); - } - } - - input[type='radio']:hover + label { - // Radio - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - } - } - - input[type='radio']:active + label { - // Radio - &::before { - background: tokens.$coral-color-accent-background-active; - } - } - - input[type='radio']:focus-visible + label, - input[type='radio']:global(.focus-visible) + label { - // Radio - &::before { - outline: tokens.$coral-border-m-solid tokens.$coral-color-assistive-border-focus; - outline-offset: 1px; - } - } - - input[type='radio']:checked + label { - // Radio - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - } - - // Mark - &::after { - opacity: 1; - } - } - - input[type='radio']:checked:not(:disabled):hover + label { - // Radio - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-hover; - } - - // Mark - &::after { - background: tokens.$coral-color-accent-background-strong-hover; - } - } - - input[type='radio']:checked:not(:disabled):active + label { - // Radio - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-active; - background: tokens.$coral-color-accent-background-strong-active; - } - } - - // Disabled and read-only cases - - input[type='radio']:disabled + label, - input[type='radio']:checked:disabled + label { - color: tokens.$coral-color-neutral-text-disabled; - cursor: not-allowed; - - // Radio - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - opacity: tokens.$coral-opacity-s; - cursor: not-allowed; - background: tokens.$coral-color-neutral-background-disabled; - } - } - - input[type='radio']:checked:disabled + label { - // Mark - &::after { - background-color: tokens.$coral-color-neutral-icon-weak; - opacity: tokens.$coral-opacity-m; - } - } - - &_readOnly { - input[type='radio'] { - cursor: not-allowed; - } - - input[type='radio']:not(:checked) + label, - input[type='radio']:checked + label { - color: tokens.$coral-color-neutral-text; - cursor: not-allowed; - - // Radio - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - background: tokens.$coral-color-neutral-background-strong; - opacity: 1; - } - - // Mark - &::after { - opacity: 0; - } - } - - input[type='radio']:checked + label, - input[type='radio']:checked:not(:disabled):hover + label, - input[type='radio']:checked:not(:disabled):active + label { - // Radio - &::before { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - background: tokens.$coral-color-neutral-background-strong; - } - - // Mark - &::after { - background-color: tokens.$coral-color-neutral-icon-weak; - opacity: 1; - } - } - } -} diff --git a/packages/design-system/src/components/Form/Primitives/Radio/Radio.tsx b/packages/design-system/src/components/Form/Primitives/Radio/Radio.tsx index 6bda1da8eae..6b0241de4f7 100644 --- a/packages/design-system/src/components/Form/Primitives/Radio/Radio.tsx +++ b/packages/design-system/src/components/Form/Primitives/Radio/Radio.tsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; import Label from '../Label/Label'; import useReadOnly from '../../../Form/Field/Input/hooks/useReadOnly'; -import styles from './Radio.module.scss'; +import styles from './Radio.module.css'; import { useId } from '../../../../useId'; export type RadioPrimitiveType = Omit, 'type' | 'prefix'> & { diff --git a/packages/design-system/src/components/Form/Primitives/Select/Select.module.css b/packages/design-system/src/components/Form/Primitives/Select/Select.module.css new file mode 100644 index 00000000000..c0b3804fb8b --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Select/Select.module.css @@ -0,0 +1,228 @@ +.affix { + display: inline-flex; + flex-grow: 1; + flex-shrink: 0; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + padding: 0 var(--coral-spacing-xs, 0.5rem); + justify-content: center; + align-items: center; + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + border: 0; + height: 100%; + min-height: auto; + max-height: var(--coral-sizing-m, 2.25rem); + transition: var(--coral-transition-fast, 250ms ease-in-out); + border-radius: 2px 0 0 2px; + border-right: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.affix_isSuffix { + border-radius: 0 2px 2px 0; + border-right: 0; + border-left: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.affix__icon { + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + display: flex; + justify-content: center; + align-items: center; +} +.affix__icon > svg { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); +} +.affix__caret { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); + display: flex; + justify-content: center; + align-items: center; +} +.affix__caret > svg { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); +} +.affix.button { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + cursor: pointer; +} +.affix.button:hover { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); + background: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +.affix.button:active { + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); + background: var(--coral-color-accent-background-active, hsl(204, 60%, 63%)); +} +.affix.button:disabled { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + cursor: not-allowed; +} + +.select { + background: transparent; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: var(--coral-spacing-xs, 0.5rem); + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + line-height: 1; + border: 0; + margin: 0; + transition: var(--coral-transition-instant, 100ms ease-out); + display: block; + flex-grow: 1; + width: 100%; +} +.select:only-child { + border-radius: var(--coral-radius-s, 0.25rem); +} +.select:disabled, +.select_disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.select_readOnly { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.select:focus { + outline: 0; +} +.select:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.select::placeholder { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + opacity: var(--coral-opacity-s, 0.6); +} +.select[disabled] { + opacity: 1; +} +.select[disabled] > option { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.select { + height: 1.875rem; + appearance: none; + padding-right: calc(var(--coral-sizing-minimal, 0.75rem) + var(--coral-sizing-xxs, 1.25rem)); +} +.select option:disabled { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + opacity: var(--coral-opacity-s, 0.6); +} +.select_multiple + .select__icon { + display: none; +} +.select_isAffix { + display: inline-flex; + flex-grow: 1; + flex-shrink: 0; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + padding: 0 var(--coral-spacing-xs, 0.5rem); + justify-content: center; + align-items: center; + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + border: 0; + height: 100%; + min-height: auto; + max-height: var(--coral-sizing-m, 2.25rem); + transition: var(--coral-transition-fast, 250ms ease-in-out); + border-radius: 2px 0 0 2px; + border-right: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.select_isAffix_isSuffix { + border-radius: 0 2px 2px 0; + border-right: 0; + border-left: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.select_isAffix__icon { + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + display: flex; + justify-content: center; + align-items: center; +} +.select_isAffix__icon > svg { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); +} +.select_isAffix__caret { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); + display: flex; + justify-content: center; + align-items: center; +} +.select_isAffix__caret > svg { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); +} +.select_isAffix { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + cursor: pointer; +} +.select_isAffix:hover { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); + background: var(--coral-color-accent-background-hover, hsl(205, 60%, 75%)); +} +.select_isAffix:active { + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); + background: var(--coral-color-accent-background-active, hsl(204, 60%, 63%)); +} +.select_isAffix:disabled { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + cursor: not-allowed; +} +.select_isAffix { + padding-right: calc(var(--coral-sizing-minimal, 0.75rem) + var(--coral-sizing-xxxs, 1rem)); + flex-shrink: 0; + max-height: 100%; +} +.select_isAffix + .select__icon { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.select_isAffix:hover + .select__icon { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); +} +.select_isSuffix, +.select_isSuffix:first-child { + border-radius: 0 2px 2px 0; + border-left: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + border-right: 0; +} + +.select__wrapper { + display: block; + flex-grow: 1; + position: relative; + width: 100%; + height: 100%; +} + +.select__icon { + width: var(--coral-sizing-minimal, 0.75rem); + height: var(--coral-sizing-minimal, 0.75rem); + position: absolute; + right: var(--coral-spacing-xs, 0.5rem); + top: 50%; + transform: translateY(-50%); + color: var(--coral-color-neutral-icon, hsl(0, 0%, 13%)); + pointer-events: none; + display: inline-flex; + justify-content: center; + align-items: center; +} + +.select:disabled + .select__icon { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + opacity: var(--coral-opacity-s, 0.6); +} diff --git a/packages/design-system/src/components/Form/Primitives/Select/Select.module.scss b/packages/design-system/src/components/Form/Primitives/Select/Select.module.scss deleted file mode 100644 index aaed9d893de..00000000000 --- a/packages/design-system/src/components/Form/Primitives/Select/Select.module.scss +++ /dev/null @@ -1,71 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -@use '../mixins' as Form; -@use '../../../Form/Affix/AffixStyles.module' as Affix; - -.select { - @include Form.base-input(); - height: Form.$standard-input-height; - appearance: none; - padding-right: calc(#{tokens.$coral-sizing-minimal} + #{tokens.$coral-sizing-xxs}); - - option:disabled { - color: tokens.$coral-color-neutral-text-weak; - opacity: tokens.$coral-opacity-s; - } - - &_multiple { - + .select__icon { - display: none; - } - } - - &_isAffix { - @include Affix.base-affix-styles(); - @include Affix.button-affix-styles(); - padding-right: calc(#{tokens.$coral-sizing-minimal} + #{tokens.$coral-sizing-xxxs}); - flex-shrink: 0; - max-height: 100%; - - + .select__icon { - color: tokens.$coral-color-accent-text; - } - - &:hover + .select__icon { - color: tokens.$coral-color-accent-text-hover; - } - } - - &_isSuffix, - &_isSuffix:first-child { - border-radius: 0 2px 2px 0; - border-left: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - border-right: 0; - } -} - -.select__wrapper { - display: block; - flex-grow: 1; - position: relative; - width: 100%; - height: 100%; -} - -.select__icon { - width: tokens.$coral-sizing-minimal; - height: tokens.$coral-sizing-minimal; - position: absolute; - right: tokens.$coral-spacing-xs; - top: 50%; - transform: translateY(-50%); - color: tokens.$coral-color-neutral-icon; - pointer-events: none; - display: inline-flex; - justify-content: center; - align-items: center; -} - -.select:disabled + .select__icon { - color: tokens.$coral-color-neutral-text-disabled; - opacity: tokens.$coral-opacity-s; -} diff --git a/packages/design-system/src/components/Form/Primitives/Select/SelectNoWrapper.tsx b/packages/design-system/src/components/Form/Primitives/Select/SelectNoWrapper.tsx index 9c2c798ce3f..fd0b70ce5a7 100644 --- a/packages/design-system/src/components/Form/Primitives/Select/SelectNoWrapper.tsx +++ b/packages/design-system/src/components/Form/Primitives/Select/SelectNoWrapper.tsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; import { SizedIcon } from '../../../Icon'; -import styles from './Select.module.scss'; +import styles from './Select.module.css'; export type SelectNoWrapperProps = Omit, 'prefix'> & { children: ReactElement | ReactElement[]; diff --git a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.css b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.css new file mode 100644 index 00000000000..9d419cd3bad --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.css @@ -0,0 +1,93 @@ +.textarea { + background: transparent; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + padding: var(--coral-spacing-xs, 0.5rem); + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + line-height: 1; + border: 0; + margin: 0; + transition: var(--coral-transition-instant, 100ms ease-out); + display: block; + flex-grow: 1; + width: 100%; +} +.textarea:only-child { + border-radius: var(--coral-radius-s, 0.25rem); +} +.textarea:disabled, +.textarea_disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.textarea_readOnly { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.textarea:focus { + outline: 0; +} +.textarea:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.textarea::placeholder { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + opacity: var(--coral-opacity-s, 0.6); +} +.textarea[disabled] { + opacity: 1; +} +.textarea[disabled] > option { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.textarea { + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + box-shadow: 0 0 0 0 transparent; + border-radius: var(--coral-radius-s, 0.25rem); + transition: var(--coral-transition-instant, 100ms ease-out); + background: var(--coral-color-neutral-background, white); +} +.textarea:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-strong-hover, hsl(0, 0%, 15%)); +} +.textarea_disabled { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} +.textarea_readOnly { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} +.textarea_disabled:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} +.textarea_readOnly:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); +} +.textarea:focus-within, +.textarea:focus { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); + box-shadow: 0 0 0 0.0625rem var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.textarea_borderError { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.textarea_borderError:hover { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border-hover, hsl(359, 54%, 38%)); +} +.textarea_borderError:focus-within, +.textarea_borderError:focus { + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-danger-border, hsl(359, 51%, 53%)); + box-shadow: 0 0 0 0.0625rem var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.textarea { + max-height: var(--coral-sizing-xxxl, 13.75rem); + resize: vertical; + line-height: 140%; +} diff --git a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.scss b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.scss deleted file mode 100644 index 645430f0a90..00000000000 --- a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -@use '../mixins' as Form; - -.textarea { - @include Form.base-input(); - @include Form.border-styles(); - max-height: tokens.$coral-sizing-xxxl; - resize: vertical; - line-height: 140%; -} diff --git a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.tsx b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.tsx index fdccc55f350..cd9e9ae8e2e 100644 --- a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.tsx +++ b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref, TextareaHTMLAttributes } from 'react'; import classnames from 'classnames'; -import styles from './Textarea.module.scss'; +import styles from './Textarea.module.css'; export type TextareaPrimitiveProps = TextareaHTMLAttributes & { hasError?: boolean }; diff --git a/packages/design-system/src/components/Form/Primitives/_mixins.scss b/packages/design-system/src/components/Form/Primitives/_mixins.scss deleted file mode 100644 index e5cb5c7f8fe..00000000000 --- a/packages/design-system/src/components/Form/Primitives/_mixins.scss +++ /dev/null @@ -1,101 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$standard-input-height: calc(2rem - 0.125rem); - -@mixin base-input() { - background: transparent; - color: tokens.$coral-color-neutral-text; - padding: tokens.$coral-spacing-xs; - font: tokens.$coral-paragraph-m; - line-height: 1; - border: 0; - margin: 0; - transition: tokens.$coral-transition-instant; - display: block; - flex-grow: 1; - width: 100%; - - &:only-child { - border-radius: tokens.$coral-radius-s; - } - - &:disabled, - &_disabled { - color: tokens.$coral-color-neutral-text-disabled; - cursor: not-allowed; - } - - &_readOnly { - color: tokens.$coral-color-neutral-text; - } - - &:focus { - outline: 0; - } - - &:disabled { - color: tokens.$coral-color-neutral-text-disabled; - } - - &::placeholder { - color: tokens.$coral-color-neutral-text-weak; - opacity: tokens.$coral-opacity-s; - } - - &[disabled] { - opacity: 1; - - > option { - color: tokens.$coral-color-neutral-text; - } - } -} - -@mixin border-styles() { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - box-shadow: 0 0 0 0 transparent; - border-radius: tokens.$coral-radius-s; - transition: tokens.$coral-transition-instant; - background: tokens.$coral-color-neutral-background; - - &:hover { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-strong-hover; - } - - &_disabled { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - } - - &_readOnly { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - background: tokens.$coral-color-neutral-background-strong; - } - - &_disabled:hover { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; - } - - &_readOnly:hover { - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - } - - &:focus-within, - &:focus { - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - box-shadow: 0 0 0 0.0625rem tokens.$coral-color-accent-border; - } - - &_borderError { - border: tokens.$coral-border-s-solid tokens.$coral-color-danger-border; - - &:hover { - border: tokens.$coral-border-s-solid tokens.$coral-color-danger-border-hover; - } - - &:focus-within, - &:focus { - border: tokens.$coral-border-s-solid tokens.$coral-color-danger-border; - box-shadow: 0 0 0 0.0625rem tokens.$coral-color-danger-border; - } - } -} diff --git a/packages/design-system/src/components/Form/Row/Row.module.css b/packages/design-system/src/components/Form/Row/Row.module.css new file mode 100644 index 00000000000..92a85973313 --- /dev/null +++ b/packages/design-system/src/components/Form/Row/Row.module.css @@ -0,0 +1,9 @@ +.row { + display: inline-flex; + align-items: flex-start; + gap: var(--coral-spacing-l, 1.75rem); + align-self: start; +} +.row_stretched { + align-self: stretch; +} diff --git a/packages/design-system/src/components/Form/Row/Row.module.scss b/packages/design-system/src/components/Form/Row/Row.module.scss deleted file mode 100644 index c3ef5da74f6..00000000000 --- a/packages/design-system/src/components/Form/Row/Row.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.row { - display: inline-flex; - align-items: flex-start; - gap: tokens.$coral-spacing-l; - align-self: start; - - &_stretched { - align-self: stretch; - } -} diff --git a/packages/design-system/src/components/Form/Row/Row.tsx b/packages/design-system/src/components/Form/Row/Row.tsx index b963b2594d3..04602c3c442 100644 --- a/packages/design-system/src/components/Form/Row/Row.tsx +++ b/packages/design-system/src/components/Form/Row/Row.tsx @@ -2,7 +2,7 @@ import { forwardRef, Children, cloneElement } from 'react'; import type { Ref, HTMLAttributes } from 'react'; import { isElement } from 'react-is'; -import styles from './Row.module.scss'; +import styles from './Row.module.css'; import classNames from 'classnames'; type RowProps = HTMLAttributes & { diff --git a/packages/design-system/src/components/Icon/Icon.module.css b/packages/design-system/src/components/Icon/Icon.module.css new file mode 100644 index 00000000000..ade42749cfd --- /dev/null +++ b/packages/design-system/src/components/Icon/Icon.module.css @@ -0,0 +1,50 @@ +.border circle, +.border path, +.border polygon, +.border polyline { + transform: translate(25%, 25%); +} +.border :global(.ti-border) { + stroke: currentColor; + fill: none; + transform: none; +} + +.svg { + fill: currentColor; + width: var(--coral-sizing-xxs, 1.25rem); + height: var(--coral-sizing-xxs, 1.25rem); + transform-origin: center; +} +.svg.spin { + animation-name: svg-spin; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} +.svg.rotate-45 { + transform: rotate(45deg); +} +.svg.rotate-90 { + transform: rotate(90deg); +} +.svg.rotate-180 { + transform: rotate(180deg); +} +.svg.rotate-270 { + transform: rotate(270deg); +} +.svg.flip-vertical { + transform: scaleY(-1); +} +.svg.flip-horizontal { + transform: scaleX(-1); +} +@keyframes svg-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/packages/design-system/src/components/Icon/Icon.module.scss b/packages/design-system/src/components/Icon/Icon.module.scss deleted file mode 100644 index 7bcf0f97327..00000000000 --- a/packages/design-system/src/components/Icon/Icon.module.scss +++ /dev/null @@ -1,66 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.border { - circle, - path, - polygon, - polyline { - // only if border - transform: translate(25%, 25%);; - } - - :global(.ti-border) { - stroke: currentColor; - fill: none; - transform: none; - } -} - -.svg { - fill: currentColor; - width: tokens.$coral-sizing-xxs; - height: tokens.$coral-sizing-xxs; - transform-origin: center; - - - - &.spin { - animation-name: svg-spin; - animation-duration: 2s; - animation-iteration-count: infinite; - animation-timing-function: linear; - } - - &.rotate-45 { - transform: rotate(45deg); - } - - &.rotate-90 { - transform: rotate(90deg); - } - - &.rotate-180 { - transform: rotate(180deg); - } - - &.rotate-270 { - transform: rotate(270deg); - } - - &.flip-vertical { - transform: scaleY(-1); - } - - &.flip-horizontal { - transform: scaleX(-1); - } - @keyframes svg-spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } - } -} diff --git a/packages/design-system/src/components/Icon/Icon.tsx b/packages/design-system/src/components/Icon/Icon.tsx index eb3da6c0270..4a801e41fa2 100644 --- a/packages/design-system/src/components/Icon/Icon.tsx +++ b/packages/design-system/src/components/Icon/Icon.tsx @@ -3,7 +3,7 @@ import type { CSSProperties, Ref } from 'react'; import classnames from 'classnames'; // eslint-disable-next-line @talend/import-depth import { IconsProvider } from '../IconsProvider'; -import style from './Icon.module.scss'; +import style from './Icon.module.css'; // eslint-disable-next-line @typescript-eslint/naming-convention export enum SVG_TRANSFORMS { diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.module.scss b/packages/design-system/src/components/IconsProvider/IconsProvider.module.css similarity index 100% rename from packages/design-system/src/components/IconsProvider/IconsProvider.module.scss rename to packages/design-system/src/components/IconsProvider/IconsProvider.module.css diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx index 8b6f0b4d414..1906ba5bc09 100644 --- a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx +++ b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import assetsAPI from '@talend/assets-api'; -import style from './IconsProvider.module.scss'; +import style from './IconsProvider.module.css'; const DEFAULT_BUNDLES = [ assetsAPI.getURL('/dist/svg-bundle/all.svg', '@talend/icons'), diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.css b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.css new file mode 100644 index 00000000000..e57c5b12c12 --- /dev/null +++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.css @@ -0,0 +1,72 @@ +.inlineEditor__editor { + position: relative; +} +.inlineEditor__editor [role='status'] { + position: absolute; + bottom: 0; + left: 0; + z-index: 1; + background: var(--coral-color-neutral-background, white); + padding: var(--coral-spacing-xxs, 0.25rem); + transform: translateY(100%); + box-shadow: var(--coral-elevation-shadow-neutral-s, 0 0.0625rem 0.125rem 0 hsla(0, 0%, 0%, 0.5)); +} +.inlineEditor__editor input, +.inlineEditor__editor textarea { + padding-right: 2.5rem; +} +.inlineEditor__editor__actions { + position: absolute; + display: flex; + height: 100%; + bottom: 0; + right: 0; + top: 0; +} +.inlineEditor__editor__actions_sticky { + height: var(--coral-sizing-s, 1.75rem); +} +.inlineEditor__content { + display: flex; +} +.inlineEditor__content_loading { + animation: var( + --coral-animation-heartbeat, + coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite + ); +} +.inlineEditor__content__value { + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + flex: 0 1 auto; +} +.inlineEditor__content__value_multiline { + white-space: inherit; +} +.inlineEditor__content__value[data-placeholder]:empty::before { + content: attr(data-placeholder); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.inlineEditor__content__button { + flex: 0 0 auto; + opacity: 0; + margin-left: var(--coral-spacing-xxs, 0.25rem); + transition: opacity var(--coral-transition-fast, 250ms ease-in-out); +} +.inlineEditor__content__button > * { + position: relative; + top: 0.0625rem; +} +.inlineEditor__content__button:hover, +.inlineEditor__content__button:focus-within, +.inlineEditor__content__button:active, +.inlineEditor__content__button:focus { + opacity: 1; +} +.inlineEditor__content:hover .inlineEditor__content__button, +.inlineEditor__content:active .inlineEditor__content__button, +.inlineEditor__content:focus .inlineEditor__content__button { + opacity: 1; +} diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.scss b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.scss deleted file mode 100644 index 494c4dc9475..00000000000 --- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.scss +++ /dev/null @@ -1,87 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.inlineEditor { - &__editor { - position: relative; - - // Error management - [role='status'] { - position: absolute; - bottom: 0; - left: 0; - z-index: 1; - background: tokens.$coral-color-neutral-background; - padding: tokens.$coral-spacing-xxs; - transform: translateY(100%); - box-shadow: tokens.$coral-elevation-shadow-neutral-s; - } - - input, - textarea { - padding-right: 2.5rem; - } - - &__actions { - position: absolute; - display: flex; - height: 100%; - bottom: 0; - right: 0; - top: 0; - - &_sticky { - height: tokens.$coral-sizing-s; - } - } - } - - &__content { - display: flex; - - &_loading { - animation: tokens.$coral-animation-heartbeat; - } - - &__value { - display: block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - flex: 0 1 auto; - - &_multiline { - white-space: inherit; - } - - &[data-placeholder]:empty::before { - content: attr(data-placeholder); - color: tokens.$coral-color-neutral-text-weak; - } - } - - &__button { - flex: 0 0 auto; - opacity: 0; - margin-left: tokens.$coral-spacing-xxs; - transition: opacity tokens.$coral-transition-fast; - - > * { - position: relative; - top: 0.0625rem; - } - - &:hover, - &:focus-within, - &:active, - &:focus { - opacity: 1; - } - } - - &:hover .inlineEditor__content__button, - &:active .inlineEditor__content__button, - &:focus .inlineEditor__content__button { - opacity: 1; - } - } -} diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx index b6a490ec380..0df432b4218 100644 --- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx +++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx @@ -23,7 +23,7 @@ import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants'; import { Form } from '../../Form'; import { StackHorizontal } from '../../Stack'; -import styles from './InlineEditingPrimitive.module.scss'; +import styles from './InlineEditingPrimitive.module.css'; type ErrorInEditing = | { diff --git a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.css b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.css new file mode 100644 index 00000000000..cfe072c1b30 --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.css @@ -0,0 +1,40 @@ +.inlineMessage { + align-items: center; + display: flex; + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.inlineMessage strong { + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); +} +.inlineMessage .icon { + margin-right: var(--coral-spacing-xxs, 0.25rem); + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); + display: inline-flex; + position: relative; +} +.inlineMessage .icon svg { + width: var(--coral-sizing-xxxs, 1rem); + height: var(--coral-sizing-xxxs, 1rem); +} +.inlineMessage > * { + display: inline; +} +.inlineMessage__contents > * { + display: inline; + margin-right: var(--coral-spacing-xxs, 0.25rem); +} +.inlineMessage__contents > *:last-child { + margin-right: 0; +} +.inlineMessage_withBackground { + display: inline-flex; + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-xs, 0.5rem); + border-radius: var(--coral-radius-s, 0.25rem); + justify-content: flex-start; + align-items: flex-start; +} +.inlineMessage_withBackground .icon { + top: 0.0625rem; +} diff --git a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.scss b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.scss deleted file mode 100644 index 06bf1400a0c..00000000000 --- a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.scss +++ /dev/null @@ -1,55 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.inlineMessage { - align-items: center; - display: flex; - - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-text; - - strong { - font: tokens.$coral-paragraph-m-bold; - } - - .icon { - margin-right: tokens.$coral-spacing-xxs; - width: tokens.$coral-sizing-xxxs; - height: tokens.$coral-sizing-xxxs; - display: inline-flex; - // Visually align icon in inline mode - position: relative; - - svg { - width: tokens.$coral-sizing-xxxs; - height: tokens.$coral-sizing-xxxs; - } - } - - > * { - display: inline; - } - - &__contents { - > * { - display: inline; - margin-right: tokens.$coral-spacing-xxs; - - &:last-child { - margin-right: 0; - } - } - } - - &_withBackground { - display: inline-flex; - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs; - border-radius: tokens.$coral-radius-s; - justify-content: flex-start; - align-items: flex-start; - - .icon { - // Visually align icon in inline-flex mode - top: 0.0625rem; - } - } -} diff --git a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx index fc98688cce4..6f99570c3d5 100644 --- a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx +++ b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx @@ -9,7 +9,7 @@ import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; import { SizedIcon } from '../../Icon'; import Link, { LinkProps } from '../../Link/Link'; -import styles from './InlineMessagePrimitive.module.scss'; +import styles from './InlineMessagePrimitive.module.css'; export type AvailableVariantsTypes = 'destructive' | 'success' | 'information' | 'warning' | 'beta'; export type InlineMessageVariantType = { diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.css b/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.css new file mode 100644 index 00000000000..a40878f0fd3 --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.css @@ -0,0 +1,7 @@ +.beta_withBackground { + background-color: var(--coral-color-beta-background, hsl(279, 57%, 90%)); + box-shadow: var(--coral-elevation-shadow-beta, 0 0.0625rem 0.0625rem 0 hsla(281, 58%, 29%, 0.3)); +} +.beta__icon { + color: var(--coral-color-beta-icon, hsl(280, 80%, 54%)); +} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.scss deleted file mode 100644 index 3a04fdc1800..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.beta { - &_withBackground { - background-color: tokens.$coral-color-beta-background; - box-shadow: tokens.$coral-elevation-shadow-beta; - } - - &__icon { - color: tokens.$coral-color-beta-icon; - } -} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.tsx b/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.tsx index 3e1b1617cfe..8582bfc5cc6 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.tsx @@ -4,7 +4,7 @@ import InlineMessagePrimitive, { BaseInlineMessageProps, } from '../Primitive/InlineMessagePrimitive'; -import styles from './InlineMessageBeta.module.scss'; +import styles from './InlineMessageBeta.module.css'; export type InlineMessageBetaProps = Omit< BaseInlineMessageProps, diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.css b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.css new file mode 100644 index 00000000000..f73fc3e7f8f --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.css @@ -0,0 +1,10 @@ +.destructive_withBackground { + background-color: var(--coral-color-danger-background, hsl(0, 100%, 96%)); + box-shadow: var( + --coral-elevation-shadow-danger, + 0 0.0625rem 0.0625rem 0 hsla(359, 51%, 53%, 0.3) + ); +} +.destructive__icon { + color: var(--coral-color-danger-icon, hsl(359, 69%, 53%)); +} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.scss deleted file mode 100644 index 1f3f90f4d45..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.destructive { - &_withBackground { - background-color: tokens.$coral-color-danger-background; - box-shadow: tokens.$coral-elevation-shadow-danger; - } - - &__icon { - color: tokens.$coral-color-danger-icon; - } -} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.tsx b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.tsx index 49c83ef02e1..fec1f7f5489 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.tsx @@ -4,7 +4,7 @@ import InlineMessagePrimitive, { BaseInlineMessageProps, } from '../Primitive/InlineMessagePrimitive'; -import styles from './InlineMessageDestructive.module.scss'; +import styles from './InlineMessageDestructive.module.css'; export type InlineMessageDestructiveProps = Omit< BaseInlineMessageProps, diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.css b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.css new file mode 100644 index 00000000000..8e747015aa0 --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.css @@ -0,0 +1,7 @@ +.information_withBackground { + background-color: var(--coral-color-info-background, hsl(204, 59%, 88%)); + box-shadow: var(--coral-elevation-shadow-info, 0 0.0625rem 0.0625rem 0 hsla(204, 95%, 31%, 0.3)); +} +.information__icon { + color: var(--coral-color-info-icon, hsl(204, 88%, 40%)); +} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss deleted file mode 100644 index b570f9b6ad1..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.information { - &_withBackground { - background-color: tokens.$coral-color-info-background; - box-shadow: tokens.$coral-elevation-shadow-info; - } - - &__icon { - color: tokens.$coral-color-info-icon; - } -} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.tsx b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.tsx index f7c906fcfd8..217108a7ee5 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.tsx @@ -4,7 +4,7 @@ import InlineMessagePrimitive, { BaseInlineMessageProps, } from '../Primitive/InlineMessagePrimitive'; -import styles from './InlineMessageInformation.module.scss'; +import styles from './InlineMessageInformation.module.css'; export type InlineMessageInformationProps = Omit< BaseInlineMessageProps, diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.css b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.css new file mode 100644 index 00000000000..e7549ba36d5 --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.css @@ -0,0 +1,10 @@ +.success_withBackground { + background-color: var(--coral-color-success-background, hsl(110, 49%, 90%)); + box-shadow: var( + --coral-elevation-shadow-success, + 0 0.0625rem 0.0625rem 0 hsla(111, 49%, 34%, 0.3) + ); +} +.success__icon { + color: var(--coral-color-success-icon, hsl(111, 53%, 40%)); +} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.scss deleted file mode 100644 index 1c0808e55d9..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.success { - &_withBackground { - background-color: tokens.$coral-color-success-background; - box-shadow: tokens.$coral-elevation-shadow-success; - } - - &__icon { - color: tokens.$coral-color-success-icon; - } -} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.tsx b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.tsx index 1b163485e71..fa3acf773e1 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.tsx @@ -4,7 +4,7 @@ import InlineMessagePrimitive, { BaseInlineMessageProps, } from '../Primitive/InlineMessagePrimitive'; -import styles from './InlineMessageSuccess.module.scss'; +import styles from './InlineMessageSuccess.module.css'; export type InlineMessageSuccessProps = Omit< BaseInlineMessageProps, diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.css b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.css new file mode 100644 index 00000000000..2b49dcd24a4 --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.css @@ -0,0 +1,10 @@ +.warning_withBackground { + background-color: var(--coral-color-warning-background, hsl(22, 85%, 92%)); + box-shadow: var( + --coral-elevation-shadow-warning, + 0 0.0625rem 0.0625rem 0 hsla(22, 93%, 41%, 0.3) + ); +} +.warning__icon { + color: var(--coral-color-warning-icon, hsl(22, 87%, 47%)); +} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.scss b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.scss deleted file mode 100644 index 0cc545a8adc..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.warning { - &_withBackground { - background-color: tokens.$coral-color-warning-background; - box-shadow: tokens.$coral-elevation-shadow-warning; - } - - &__icon { - color: tokens.$coral-color-warning-icon; - } -} diff --git a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.tsx b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.tsx index 654aae8f801..6b212cee43e 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.tsx @@ -4,7 +4,7 @@ import InlineMessagePrimitive, { BaseInlineMessageProps, } from '../Primitive/InlineMessagePrimitive'; -import styles from './InlineMessageWarning.module.scss'; +import styles from './InlineMessageWarning.module.css'; export type InlineMessageWarningProps = Omit< BaseInlineMessageProps, diff --git a/packages/design-system/src/components/Link/Link.module.css b/packages/design-system/src/components/Link/Link.module.css new file mode 100644 index 00000000000..a723d003ce0 --- /dev/null +++ b/packages/design-system/src/components/Link/Link.module.css @@ -0,0 +1,47 @@ +.link { + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-info-text, hsl(204, 95%, 31%)); + background: none; + border: none; + border-bottom-color: currentColor; + cursor: pointer; +} +.link, +.link:hover, +.link:active, +.link:focus, +.link:visited { + text-decoration: none; +} +.link .link__text { + border-bottom: var(--coral-border-s-solid, 1px solid) transparent; + transition: var(--coral-transition-fast, 250ms ease-in-out); +} +.link:hover { + color: var(--coral-color-info-text-hover, hsl(204, 96%, 18%)); +} +.link:hover .link__text { + border-bottom-color: var(--coral-color-info-border-hover, hsl(204, 95%, 23%)); +} +.link:active { + color: var(--coral-color-info-text-active, hsl(205, 94%, 13%)); +} +.link:active .link__text { + border-bottom-color: var(--coral-color-info-border-active, hsl(205, 95%, 15%)); +} +.link.linkDisabled { + opacity: var(--coral-opacity-s, 0.6); + cursor: not-allowed; +} +.link.linkDisabled .link__text { + border-bottom-color: transparent; +} +.link[aria-current='page'] { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.link[aria-current='page']:hover { + color: var(--coral-color-info-text-hover, hsl(204, 96%, 18%)); +} +.link[aria-current='page']:active { + color: var(--coral-color-info-text-active, hsl(205, 94%, 13%)); +} diff --git a/packages/design-system/src/components/Link/Link.module.scss b/packages/design-system/src/components/Link/Link.module.scss deleted file mode 100644 index f9e959be0e8..00000000000 --- a/packages/design-system/src/components/Link/Link.module.scss +++ /dev/null @@ -1,64 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$icon-alignment-offset-m: -0.1875rem; -$icon-alignment-offset-s: -0.0625rem; - -.link { - font: tokens.$coral-paragraph-m-bold; - color: tokens.$coral-color-info-text; - background: none; - border: none; - border-bottom-color: currentColor; - cursor: pointer; - - // Bullet-proof Bootstrap override solution - &, - &:hover, - &:active, - &:focus, - &:visited { - text-decoration: none; - } - - .link__text { - border-bottom: tokens.$coral-border-s-solid transparent; - transition: tokens.$coral-transition-fast; - } - - &:hover { - color: tokens.$coral-color-info-text-hover; - - .link__text { - border-bottom-color: tokens.$coral-color-info-border-hover; - } - } - - &:active { - color: tokens.$coral-color-info-text-active; - - .link__text { - border-bottom-color: tokens.$coral-color-info-border-active; - } - } - - &.linkDisabled { - opacity: tokens.$coral-opacity-s; - cursor: not-allowed; - - .link__text { - border-bottom-color: transparent; - } - } - - &[aria-current='page'] { - color: tokens.$coral-color-neutral-text; - - &:hover { - color: tokens.$coral-color-info-text-hover; - } - - &:active { - color: tokens.$coral-color-info-text-active; - } - } -} diff --git a/packages/design-system/src/components/Link/Link.tsx b/packages/design-system/src/components/Link/Link.tsx index 990c03aa694..4e43ed7c843 100644 --- a/packages/design-system/src/components/Link/Link.tsx +++ b/packages/design-system/src/components/Link/Link.tsx @@ -7,7 +7,7 @@ import { DeprecatedIconNames } from '../../types'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; import { Linkable, LinkableType, isBlank as targetCheck } from '../Linkable'; -import style from './Link.module.scss'; +import style from './Link.module.css'; export type LinkComponentProps = { /** The icon to display before */ diff --git a/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx b/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx index efc07cfdb19..7d79df83b4b 100644 --- a/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx +++ b/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx @@ -5,8 +5,8 @@ import { Clickable, ClickableProps } from '../Clickable'; import { Icon } from '../Icon/Icon'; import { LinkComponentProps } from '../Link'; -import sharedLinkableStyles from '../Linkable/LinkableStyles.module.scss'; -import linkStyles from '../Link/Link.module.scss'; +import sharedLinkableStyles from '../Linkable/LinkableStyles.module.css'; +import linkStyles from '../Link/Link.module.css'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; import { SizedIcon } from '../Icon'; diff --git a/packages/design-system/src/components/Linkable/Linkable.tsx b/packages/design-system/src/components/Linkable/Linkable.tsx index c504341a944..f9140259561 100644 --- a/packages/design-system/src/components/Linkable/Linkable.tsx +++ b/packages/design-system/src/components/Linkable/Linkable.tsx @@ -13,7 +13,7 @@ import classnames from 'classnames'; import { DeprecatedIconNames } from '../../types'; import { SizedIcon } from '../Icon'; -import style from './LinkableStyles.module.scss'; +import style from './LinkableStyles.module.css'; import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper'; export type LinkableType = Omit, 'style'> & { diff --git a/packages/design-system/src/components/Linkable/LinkableStyles.module.css b/packages/design-system/src/components/Linkable/LinkableStyles.module.css new file mode 100644 index 00000000000..d31fa280526 --- /dev/null +++ b/packages/design-system/src/components/Linkable/LinkableStyles.module.css @@ -0,0 +1,31 @@ +.linkable { + cursor: pointer; +} + +.link__icon { + position: relative; + bottom: -0.1875rem; + margin-right: var(--coral-spacing-xxs, 0.25rem); + flex-shrink: 0; +} + +.link__iconExternal { + position: relative; + top: 0.0625rem; + height: var(--coral-sizing-minimal, 0.75rem); + width: var(--coral-sizing-minimal, 0.75rem); + margin-left: var(--coral-spacing-xxs, 0.25rem); + flex-shrink: 0; + display: inline-flex; +} + +.naturally_aligned svg.link__icon, +.naturally_aligned svg.link__iconExternal { + margin-bottom: 0; +} + +.with_ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/packages/design-system/src/components/Linkable/LinkableStyles.module.scss b/packages/design-system/src/components/Linkable/LinkableStyles.module.scss deleted file mode 100644 index cdc3f283311..00000000000 --- a/packages/design-system/src/components/Linkable/LinkableStyles.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$icon-alignment-offset-m: -0.1875rem; -$icon-alignment-offset-s: 0.0625rem; - -.linkable { - cursor: pointer; -} - -.link__icon { - position: relative; - bottom: $icon-alignment-offset-m; - margin-right: tokens.$coral-spacing-xxs; - flex-shrink: 0; -} - -.link__iconExternal { - position: relative; - top: $icon-alignment-offset-s; - height: tokens.$coral-sizing-minimal; - width: tokens.$coral-sizing-minimal; - margin-left: tokens.$coral-spacing-xxs; - flex-shrink: 0; - display: inline-flex; -} - -.naturally_aligned { - // stylelint-disable-next-line selector-no-qualifying-type - svg.link__icon, - svg.link__iconExternal { - margin-bottom: 0; - } -} - -.with_ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx index 3db50e0e51b..ebd2d83facb 100644 --- a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx +++ b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx @@ -18,7 +18,7 @@ import { SizedIcon } from '../../Icon'; import Link, { LinkProps } from '../../Link/Link'; import { StackHorizontal, StackVertical } from '../../Stack'; -import styles from './MessageStyles.module.scss'; +import styles from './MessageStyles.module.css'; type SharedMessageWithActionsPropsType = { additionalIconAction?: ButtonIconType<'XS'>; diff --git a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.css b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.css new file mode 100644 index 00000000000..58a0192b1fe --- /dev/null +++ b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.css @@ -0,0 +1,34 @@ +.message { + display: flex; + border-radius: var(--coral-radius-s, 0.25rem); + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + background-color: var(--coral-color-neutral-background, white); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + height: 100%; + width: 100%; + border-top-left-radius: var(--coral-radius-s, 0.25rem); + border-bottom-left-radius: var(--coral-radius-s, 0.25rem); + border-left: 0.6rem solid var(--coral-color-neutral-border-hover, hsl(0, 0%, 40%)); +} +.message__children { + text-wrap: pretty; +} +.message__title { + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); + width: 100%; +} +.message__title__info { + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + white-space: nowrap; + margin-left: auto; +} +.message__actions { + margin-left: auto; +} +.message__description { + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + margin: 0; +} diff --git a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss deleted file mode 100644 index 1d0e91fefd7..00000000000 --- a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.message { - display: flex; - border-radius: tokens.$coral-radius-s; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - background-color: tokens.$coral-color-neutral-background; - color: tokens.$coral-color-neutral-text-weak; - height: 100%; - width: 100%; - - border-top-left-radius: tokens.$coral-radius-s; - border-bottom-left-radius: tokens.$coral-radius-s; - border-left: 0.6rem solid tokens.$coral-color-neutral-border-hover; - - &__children { - text-wrap: pretty; - } - - &__title { - font: tokens.$coral-heading-m; - width: 100%; - - &__info { - font: tokens.$coral-paragraph-s; - color: tokens.$coral-color-neutral-text-weak; - white-space: nowrap; - margin-left: auto; - } - } - - &__actions { - margin-left: auto; - } - - &__description { - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-text-weak; - margin: 0; - } -} diff --git a/packages/design-system/src/components/Message/variations/MessageCollectionDestructive.tsx b/packages/design-system/src/components/Message/variations/MessageCollectionDestructive.tsx index 9859575eca9..13d46067c2e 100644 --- a/packages/design-system/src/components/Message/variations/MessageCollectionDestructive.tsx +++ b/packages/design-system/src/components/Message/variations/MessageCollectionDestructive.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import { MessagePrimitive, SharedMessageCollectionProps } from '../Primitive/MessagePrimitive'; -import styles from './MessageDestructive.module.scss'; +import styles from './MessageDestructive.module.css'; export const MessageCollectionDestructive = forwardRef( (props: SharedMessageCollectionProps, ref: Ref) => { diff --git a/packages/design-system/src/components/Message/variations/MessageCollectionInformation.tsx b/packages/design-system/src/components/Message/variations/MessageCollectionInformation.tsx index cd00367edd0..63b270b083c 100644 --- a/packages/design-system/src/components/Message/variations/MessageCollectionInformation.tsx +++ b/packages/design-system/src/components/Message/variations/MessageCollectionInformation.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import { MessagePrimitive, SharedMessageCollectionProps } from '../Primitive/MessagePrimitive'; -import styles from './MessageInformation.module.scss'; +import styles from './MessageInformation.module.css'; export const MessageCollectionInformation = forwardRef( (props: SharedMessageCollectionProps, ref: Ref) => { diff --git a/packages/design-system/src/components/Message/variations/MessageCollectionSuccess.tsx b/packages/design-system/src/components/Message/variations/MessageCollectionSuccess.tsx index e2894932847..8f0cdbbfd02 100644 --- a/packages/design-system/src/components/Message/variations/MessageCollectionSuccess.tsx +++ b/packages/design-system/src/components/Message/variations/MessageCollectionSuccess.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import { MessagePrimitive, SharedMessageCollectionProps } from '../Primitive/MessagePrimitive'; -import styles from './MessageSuccess.module.scss'; +import styles from './MessageSuccess.module.css'; export const MessageCollectionSuccess = forwardRef( (props: SharedMessageCollectionProps, ref: Ref) => { diff --git a/packages/design-system/src/components/Message/variations/MessageCollectionWarning.tsx b/packages/design-system/src/components/Message/variations/MessageCollectionWarning.tsx index 137a8b5afe8..e5ad5f366c1 100644 --- a/packages/design-system/src/components/Message/variations/MessageCollectionWarning.tsx +++ b/packages/design-system/src/components/Message/variations/MessageCollectionWarning.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import { MessagePrimitive, SharedMessageCollectionProps } from '../Primitive/MessagePrimitive'; -import styles from './MessageWarning.module.scss'; +import styles from './MessageWarning.module.css'; export const MessageCollectionWarning = forwardRef( (props: SharedMessageCollectionProps, ref: Ref) => { diff --git a/packages/design-system/src/components/Message/variations/MessageDestructive.module.css b/packages/design-system/src/components/Message/variations/MessageDestructive.module.css new file mode 100644 index 00000000000..f7ca4960da1 --- /dev/null +++ b/packages/design-system/src/components/Message/variations/MessageDestructive.module.css @@ -0,0 +1,3 @@ +.destructive_border { + border-left-color: var(--coral-color-danger-icon, hsl(359, 69%, 53%)); +} diff --git a/packages/design-system/src/components/Message/variations/MessageDestructive.module.scss b/packages/design-system/src/components/Message/variations/MessageDestructive.module.scss deleted file mode 100644 index 31f63fd7293..00000000000 --- a/packages/design-system/src/components/Message/variations/MessageDestructive.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.destructive_border { - border-left-color: tokens.$coral-color-danger-icon; -} diff --git a/packages/design-system/src/components/Message/variations/MessageDestructive.tsx b/packages/design-system/src/components/Message/variations/MessageDestructive.tsx index b3af602b424..17e4a1a345f 100644 --- a/packages/design-system/src/components/Message/variations/MessageDestructive.tsx +++ b/packages/design-system/src/components/Message/variations/MessageDestructive.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import { MessagePrimitive, SharedMessageProps } from '../Primitive/MessagePrimitive'; -import styles from './MessageDestructive.module.scss'; +import styles from './MessageDestructive.module.css'; export const MessageDestructive = forwardRef( (props: SharedMessageProps, ref: Ref) => { diff --git a/packages/design-system/src/components/Message/variations/MessageInformation.module.css b/packages/design-system/src/components/Message/variations/MessageInformation.module.css new file mode 100644 index 00000000000..7c0516489e9 --- /dev/null +++ b/packages/design-system/src/components/Message/variations/MessageInformation.module.css @@ -0,0 +1,3 @@ +.information_border { + border-left-color: var(--coral-color-info-icon, hsl(204, 88%, 40%)); +} diff --git a/packages/design-system/src/components/Message/variations/MessageInformation.module.scss b/packages/design-system/src/components/Message/variations/MessageInformation.module.scss deleted file mode 100644 index ac109da04af..00000000000 --- a/packages/design-system/src/components/Message/variations/MessageInformation.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.information_border { - border-left-color: tokens.$coral-color-info-icon; -} diff --git a/packages/design-system/src/components/Message/variations/MessageInformation.tsx b/packages/design-system/src/components/Message/variations/MessageInformation.tsx index 08530d13b38..5152176deeb 100644 --- a/packages/design-system/src/components/Message/variations/MessageInformation.tsx +++ b/packages/design-system/src/components/Message/variations/MessageInformation.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import { MessagePrimitive, SharedMessageProps } from '../Primitive/MessagePrimitive'; -import styles from './MessageInformation.module.scss'; +import styles from './MessageInformation.module.css'; export const MessageInformation = forwardRef( (props: SharedMessageProps, ref: Ref) => { diff --git a/packages/design-system/src/components/Message/variations/MessageSuccess.module.css b/packages/design-system/src/components/Message/variations/MessageSuccess.module.css new file mode 100644 index 00000000000..c025a500e0c --- /dev/null +++ b/packages/design-system/src/components/Message/variations/MessageSuccess.module.css @@ -0,0 +1,3 @@ +.success_border { + border-left-color: var(--coral-color-success-icon, hsl(111, 53%, 40%)); +} diff --git a/packages/design-system/src/components/Message/variations/MessageSuccess.module.scss b/packages/design-system/src/components/Message/variations/MessageSuccess.module.scss deleted file mode 100644 index cac4a6c9ad2..00000000000 --- a/packages/design-system/src/components/Message/variations/MessageSuccess.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.success_border { - border-left-color: tokens.$coral-color-success-icon; -} diff --git a/packages/design-system/src/components/Message/variations/MessageSuccess.tsx b/packages/design-system/src/components/Message/variations/MessageSuccess.tsx index 761290b1588..38a154734a1 100644 --- a/packages/design-system/src/components/Message/variations/MessageSuccess.tsx +++ b/packages/design-system/src/components/Message/variations/MessageSuccess.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import { MessagePrimitive, SharedMessageProps } from '../Primitive/MessagePrimitive'; -import styles from './MessageSuccess.module.scss'; +import styles from './MessageSuccess.module.css'; export const MessageSuccess = forwardRef((props: SharedMessageProps, ref: Ref) => { return ( diff --git a/packages/design-system/src/components/Message/variations/MessageWarning.module.css b/packages/design-system/src/components/Message/variations/MessageWarning.module.css new file mode 100644 index 00000000000..e50373f301c --- /dev/null +++ b/packages/design-system/src/components/Message/variations/MessageWarning.module.css @@ -0,0 +1,3 @@ +.warning_border { + border-left-color: var(--coral-color-warning-icon, hsl(22, 87%, 47%)); +} diff --git a/packages/design-system/src/components/Message/variations/MessageWarning.module.scss b/packages/design-system/src/components/Message/variations/MessageWarning.module.scss deleted file mode 100644 index f440b78e789..00000000000 --- a/packages/design-system/src/components/Message/variations/MessageWarning.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.warning_border { - border-left-color: tokens.$coral-color-warning-icon; -} diff --git a/packages/design-system/src/components/Message/variations/MessageWarning.tsx b/packages/design-system/src/components/Message/variations/MessageWarning.tsx index a05145228cf..404de9ac8bd 100644 --- a/packages/design-system/src/components/Message/variations/MessageWarning.tsx +++ b/packages/design-system/src/components/Message/variations/MessageWarning.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import { MessagePrimitive, SharedMessageProps } from '../Primitive/MessagePrimitive'; -import styles from './MessageWarning.module.scss'; +import styles from './MessageWarning.module.css'; export const MessageWarning = forwardRef((props: SharedMessageProps, ref: Ref) => { return ( diff --git a/packages/design-system/src/components/Modal/Modal.module.css b/packages/design-system/src/components/Modal/Modal.module.css new file mode 100644 index 00000000000..2a66b5eb133 --- /dev/null +++ b/packages/design-system/src/components/Modal/Modal.module.css @@ -0,0 +1,96 @@ +.modal-backdrop::before, +.modal-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.modal-backdrop::before { + content: ''; + background-color: var(--coral-color-assistive-background, hsl(210, 62%, 5%)); + opacity: var(--coral-opacity-l, 0.2); +} + +.modal-backdrop { + z-index: var(--coral-elevation-layer-interactive-front, 8); + display: flex; + justify-content: center; + align-items: center; +} + +.modal { + z-index: calc(var(--coral-elevation-layer-interactive-front, 8) + 1); + position: fixed; + min-width: 660px; + max-width: 95%; + max-height: 80%; + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + border-radius: var(--coral-radius-s, 0.25rem); + background: var(--coral-color-neutral-background, white); + display: flex; + flex-direction: column; + overflow: hidden; +} +.modal > :first-child { + overflow: hidden; +} +.modal__header, +.modal__content, +.modal__buttons { + width: 100%; +} +.modal__content, +.modal__buttons { + padding: 0 var(--coral-spacing-xl, 2.25rem); +} +.modal__header { + flex-shrink: 0; + height: 3.75rem; + padding: var(--coral-spacing-xs, 0.5rem) var(--coral-spacing-xl, 2.25rem); + border-bottom: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + display: flex; + align-items: center; + column-gap: var(--coral-spacing-m, 1rem); +} +.modal__content { + overflow-x: hidden; + overflow-y: auto; + padding-top: var(--coral-spacing-l, 1.75rem); + margin-bottom: var(--coral-spacing-l, 1.75rem); +} +.modal__buttons { + margin-bottom: var(--coral-spacing-m, 1rem); + flex-shrink: 0; +} +.modal__buttons .close-button { + margin-right: auto; +} + +.modal-header-text { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; +} +.modal-header-text__title, +.modal-header-text__description { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.modal-header-text__title { + font: var(--coral-heading-l, 600 1.125rem/140% 'Source Sans Pro'); +} + +.modal-icon { + flex-grow: 0; + flex-shrink: 0; + width: var(--coral-sizing-xs, 1.5rem); + height: var(--coral-sizing-xs, 1.5rem); + display: flex; + justify-content: center; + align-items: center; +} diff --git a/packages/design-system/src/components/Modal/Modal.module.scss b/packages/design-system/src/components/Modal/Modal.module.scss deleted file mode 100644 index 4199761f58a..00000000000 --- a/packages/design-system/src/components/Modal/Modal.module.scss +++ /dev/null @@ -1,108 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.modal-backdrop::before, -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.modal-backdrop::before { - content: ''; - background-color: tokens.$coral-color-assistive-background; - opacity: tokens.$coral-opacity-l; -} - -.modal-backdrop { - z-index: tokens.$coral-elevation-layer-interactive-front; - display: flex; - justify-content: center; - align-items: center; -} - -.modal { - z-index: calc(tokens.$coral-elevation-layer-interactive-front + 1); - position: fixed; - min-width: 660px; - max-width: 95%; - max-height: 80%; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - border-radius: tokens.$coral-radius-s; - background: tokens.$coral-color-neutral-background; - display: flex; - flex-direction: column; - overflow: hidden; - - > :first-child { - overflow: hidden; - } - - &__header, - &__content, - &__buttons { - width: 100%; - } - - &__content, - &__buttons { - padding: 0 tokens.$coral-spacing-xl; - } - - &__header { - flex-shrink: 0; - height: 3.75rem; - padding: tokens.$coral-spacing-xs tokens.$coral-spacing-xl; - border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - - display: flex; - align-items: center; - column-gap: tokens.$coral-spacing-m; - } - - &__content { - overflow-x: hidden; - overflow-y: auto; - padding-top: tokens.$coral-spacing-l; - margin-bottom: tokens.$coral-spacing-l; - } - - &__buttons { - margin-bottom: tokens.$coral-spacing-m; - flex-shrink: 0; - - .close-button { - margin-right: auto; - } - } -} - -.modal-header-text { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow: hidden; - - &__title, - &__description { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__title { - font: tokens.$coral-heading-l; - } -} - -.modal-icon { - flex-grow: 0; - flex-shrink: 0; - width: tokens.$coral-sizing-xs; - height: tokens.$coral-sizing-xs; - - display: flex; - justify-content: center; - align-items: center; -} diff --git a/packages/design-system/src/components/Modal/Modal.tsx b/packages/design-system/src/components/Modal/Modal.tsx index 22d6ba0d57e..03d5e17cf75 100644 --- a/packages/design-system/src/components/Modal/Modal.tsx +++ b/packages/design-system/src/components/Modal/Modal.tsx @@ -13,7 +13,7 @@ import { StackHorizontal, StackVertical } from '../Stack'; import { Dialog, DialogPropsType, useDialogState } from './Primitives/Dialog'; import { DialogBackdrop } from './Primitives/DialogBackdrop'; -import styles from './Modal.module.scss'; +import styles from './Modal.module.css'; type IconProp = DeprecatedIconNames | ReactElement; diff --git a/packages/design-system/src/components/Popover/Popover.module.css b/packages/design-system/src/components/Popover/Popover.module.css new file mode 100644 index 00000000000..a8d8eaa6795 --- /dev/null +++ b/packages/design-system/src/components/Popover/Popover.module.css @@ -0,0 +1,12 @@ +.popover { + background-color: var(--coral-color-neutral-background, white); + transition: opacity var(--coral-transition-fast, 250ms ease-in-out); + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); + border-radius: var(--coral-radius-s, 0.25rem); + z-index: var(--coral-elevation-layer-interactive-front, 8); + opacity: 1; +} + +.withPadding { + padding: var(--coral-spacing-m, 1rem); +} diff --git a/packages/design-system/src/components/Popover/Popover.module.scss b/packages/design-system/src/components/Popover/Popover.module.scss deleted file mode 100644 index 1817dc6a323..00000000000 --- a/packages/design-system/src/components/Popover/Popover.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.popover { - background-color: tokens.$coral-color-neutral-background; - transition: opacity tokens.$coral-transition-fast; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - border-radius: tokens.$coral-radius-s; - z-index: tokens.$coral-elevation-layer-interactive-front; - opacity: 1; -} - -.withPadding { - padding: tokens.$coral-spacing-m; -} diff --git a/packages/design-system/src/components/Popover/Popover.tsx b/packages/design-system/src/components/Popover/Popover.tsx index 68b42f7c4dd..e56d59d1cae 100644 --- a/packages/design-system/src/components/Popover/Popover.tsx +++ b/packages/design-system/src/components/Popover/Popover.tsx @@ -10,7 +10,7 @@ import { renderChildren } from '../../renderChildren'; import { ChildOrGenerator, renderOrClone } from '../../renderOrClone'; import { usePopover } from './usePopover'; -import theme from './Popover.module.scss'; +import theme from './Popover.module.css'; type PopoverOptions = { initialOpen?: boolean; diff --git a/packages/design-system/src/components/QualityBar/QualityRatioBar.component.tsx b/packages/design-system/src/components/QualityBar/QualityRatioBar.component.tsx index cb453e7c653..58f2901eeec 100644 --- a/packages/design-system/src/components/QualityBar/QualityRatioBar.component.tsx +++ b/packages/design-system/src/components/QualityBar/QualityRatioBar.component.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; import { RatioBarLine } from '../RatioBar'; import { EnrichedQualityType, QualityType } from './QualityBar.types'; -import styles from './QualityRatioBar.module.scss'; +import styles from './QualityRatioBar.module.css'; type SpecificQualityBarProps = { percentage: number; diff --git a/packages/design-system/src/components/QualityBar/QualityRatioBar.module.css b/packages/design-system/src/components/QualityBar/QualityRatioBar.module.css new file mode 100644 index 00000000000..5b615ee51b9 --- /dev/null +++ b/packages/design-system/src/components/QualityBar/QualityRatioBar.module.css @@ -0,0 +1,27 @@ +.quality-ratio-bar { + border-radius: 1px; + height: 100%; + width: 100%; +} +.quality-ratio-bar--empty { + background-color: var(--coral-color-charts-neutral, hsl(0, 0%, 22%)); +} +.quality-ratio-bar--valid { + background-color: var(--coral-color-charts-success, hsl(148, 87%, 40%)); +} +.quality-ratio-bar--invalid { + background-color: var(--coral-color-charts-danger, hsl(4, 89%, 49%)); +} +.quality-ratio-bar--na { + background-color: var(--coral-color-charts-success-weak, hsl(130, 52%, 91%)); +} +.quality-ratio-bar--placeholder { + background-color: var(--coral-color-charts-neutral-weak, hsl(0, 0%, 83%)); +} +:global(.tc-ratio-bar) .quality-ratio-bar--placeholder:hover { + height: 0.25rem; +} + +.split-ratio-bar-percentage { + flex: none; +} diff --git a/packages/design-system/src/components/QualityBar/QualityRatioBar.module.scss b/packages/design-system/src/components/QualityBar/QualityRatioBar.module.scss deleted file mode 100644 index ae8af4bebda..00000000000 --- a/packages/design-system/src/components/QualityBar/QualityRatioBar.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$custom-quality-bar-placeholder-line-hover-height: 0.25rem; - -.quality-ratio-bar { - border-radius: 1px; - height: 100%; - width: 100%; - - &--empty { - background-color: tokens.$coral-color-charts-neutral; - } - - &--valid { - background-color: tokens.$coral-color-charts-success; - } - - &--invalid { - background-color: tokens.$coral-color-charts-danger; - } - - &--na { - background-color: tokens.$coral-color-charts-success-weak; - } - - &--placeholder { - background-color: tokens.$coral-color-charts-neutral-weak; - - :global(.tc-ratio-bar) &:hover { - height: $custom-quality-bar-placeholder-line-hover-height; - } - } -} - -.split-ratio-bar-percentage { - flex: none; -} diff --git a/packages/design-system/src/components/QualityBar/SplitQualityBar.component.tsx b/packages/design-system/src/components/QualityBar/SplitQualityBar.component.tsx index b9fcdd862a7..7e26fc07bed 100644 --- a/packages/design-system/src/components/QualityBar/SplitQualityBar.component.tsx +++ b/packages/design-system/src/components/QualityBar/SplitQualityBar.component.tsx @@ -9,7 +9,7 @@ import { } from './QualityBar.types'; import { QualityBarRatioBars } from './QualityBarRatioBars.component'; -import theme from './QualityRatioBar.module.scss'; +import theme from './QualityRatioBar.module.css'; type SplitQualityBarProps = QualityCommonProps & { percentages: QualityBarPercentages; diff --git a/packages/design-system/src/components/RatioBar/RatioBar.component.tsx b/packages/design-system/src/components/RatioBar/RatioBar.component.tsx index c0ebea0b67d..c4765a65258 100644 --- a/packages/design-system/src/components/RatioBar/RatioBar.component.tsx +++ b/packages/design-system/src/components/RatioBar/RatioBar.component.tsx @@ -3,7 +3,7 @@ import { ReactNode } from 'react'; import { RatioBarComposition } from './RatioBarComposition.component'; import { EmptyLine, ErrorLine, FilledLine } from './RatioBarLines.component'; -import styles from './RatioBar.module.scss'; +import styles from './RatioBar.module.css'; const getFilledValues = (amount: number, total: number) => { if (!amount || amount < 0) { diff --git a/packages/design-system/src/components/RatioBar/RatioBar.module.css b/packages/design-system/src/components/RatioBar/RatioBar.module.css new file mode 100644 index 00000000000..0ee0e752854 --- /dev/null +++ b/packages/design-system/src/components/RatioBar/RatioBar.module.css @@ -0,0 +1,45 @@ +.tc-ratio-bar { + align-items: center; + display: flex; + height: 0.5rem; + padding: var(--coral-spacing-xs, 0.5rem) 0; + width: 100%; +} +.tc-ratio-bar-counter { + padding-left: var(--coral-spacing-xxs, 0.25rem); +} +.tc-ratio-bar-lines, +.tc-ratio-bar .tc-ratio-bar-line-error, +.tc-ratio-bar .tc-ratio-bar-line-filled, +.tc-ratio-bar .tc-ratio-bar-line-empty { + border-radius: 1px; + height: 100%; + width: 100%; +} +.tc-ratio-bar .tc-ratio-bar-line { + height: 0.25rem; + margin: 0 2px 0 0; + min-width: 0.25rem; + transition: var(--coral-transition-instant, 100ms ease-out); +} +.tc-ratio-bar .tc-ratio-bar-line:hover { + height: 0.5rem; +} +.tc-ratio-bar .tc-ratio-bar-line:first-child { + margin-left: 0; +} +.tc-ratio-bar .tc-ratio-bar-line:last-child { + margin-right: 0; +} +.tc-ratio-bar .tc-ratio-bar-line-grow { + flex-grow: 1; +} +.tc-ratio-bar .tc-ratio-bar-line-empty { + background-color: var(--coral-color-charts-neutral-weak, hsl(0, 0%, 83%)); +} +.tc-ratio-bar .tc-ratio-bar-line-filled { + background-color: var(--coral-color-charts-default, hsl(216, 82%, 48%)); +} +.tc-ratio-bar .tc-ratio-bar-line-error { + background-color: var(--coral-color-charts-danger, hsl(4, 89%, 49%)); +} diff --git a/packages/design-system/src/components/RatioBar/RatioBar.module.scss b/packages/design-system/src/components/RatioBar/RatioBar.module.scss deleted file mode 100644 index 26c84d3ec7f..00000000000 --- a/packages/design-system/src/components/RatioBar/RatioBar.module.scss +++ /dev/null @@ -1,61 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$custom-ratio-bar-height: 0.5rem; -$custom-ratio-bar-line-height: 0.25rem; -$custom-ratio-bar-line-hover-height: 0.5rem; - -.tc-ratio-bar { - align-items: center; - display: flex; - height: $custom-ratio-bar-height; - padding: tokens.$coral-spacing-xs 0; - width: 100%; - - &-counter { - padding-left: tokens.$coral-spacing-xxs; - } - - &-lines { - border-radius: 1px; - height: 100%; - width: 100%; - } - - & &-line { - height: $custom-ratio-bar-line-height; - margin: 0 2px 0 0; - min-width: $custom-ratio-bar-line-height; - transition: tokens.$coral-transition-instant; - - &:hover { - height: $custom-ratio-bar-line-hover-height; - } - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - &-grow { - flex-grow: 1; - } - - &-empty { - @extend .tc-ratio-bar-lines; - background-color: tokens.$coral-color-charts-neutral-weak; - } - - &-filled { - @extend .tc-ratio-bar-lines; - background-color: tokens.$coral-color-charts-default; - } - - &-error { - @extend .tc-ratio-bar-lines; - background-color: tokens.$coral-color-charts-danger; - } - } -} diff --git a/packages/design-system/src/components/RatioBar/RatioBarComposition.component.tsx b/packages/design-system/src/components/RatioBar/RatioBarComposition.component.tsx index 2656982bb01..b70d642f664 100644 --- a/packages/design-system/src/components/RatioBar/RatioBarComposition.component.tsx +++ b/packages/design-system/src/components/RatioBar/RatioBarComposition.component.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { Tooltip } from '../Tooltip'; -import styles from './RatioBar.module.scss'; +import styles from './RatioBar.module.css'; const minPercentage = 5; diff --git a/packages/design-system/src/components/RatioBar/RatioBarLines.component.tsx b/packages/design-system/src/components/RatioBar/RatioBarLines.component.tsx index fe91503857d..f734d3d6e2a 100644 --- a/packages/design-system/src/components/RatioBar/RatioBarLines.component.tsx +++ b/packages/design-system/src/components/RatioBar/RatioBarLines.component.tsx @@ -1,6 +1,6 @@ import { RatioBarLine } from './RatioBarComposition.component'; -import styles from './RatioBar.module.scss'; +import styles from './RatioBar.module.css'; type RatioBarLineProps = { value: number; diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx index 159bbaebc73..895d6bfa8cc 100644 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx @@ -6,7 +6,7 @@ import { } from './RichRadioButton.types'; import { StackVertical, StackHorizontal } from '../Stack'; import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper'; -import style from './RichRadioButton.module.scss'; +import style from './RichRadioButton.module.css'; import { Tag } from '../Tag'; import { Icon } from '../Icon'; import { DataAttributes } from 'src/types'; diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.css b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.css new file mode 100644 index 00000000000..95fca0aa772 --- /dev/null +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.css @@ -0,0 +1,136 @@ +.rich-radio-button { + background-color: var(--coral-color-accent-background-weak, white); + border: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + border-radius: var(--coral-radius-m, 0.5rem); + padding: var(--coral-spacing-m, 1rem); + transition: + background-color var(--coral-transition-normal, 300ms ease-in-out), + box-shadow var(--coral-transition-normal, 300ms ease-in-out), + border-color var(--coral-transition-normal, 300ms ease-in-out); + width: 100%; +} +.rich-radio-button h4 { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); + font: var(--coral-heading-s, 600 0.875rem/140% 'Source Sans Pro'); +} +.rich-radio-button p { + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); +} +.rich-radio-button__icon { + color: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); + min-height: var(--coral-sizing-xs, 1.5rem); + min-width: var(--coral-sizing-xs, 1.5rem); + transition: color var(--coral-transition-normal, 300ms ease-in-out); +} +.rich-radio-button__illustration, +.rich-radio-button__logo { + height: var(--coral-sizing-l, 2.5rem); + width: var(--coral-sizing-l, 2.5rem); +} +.rich-radio-button__wrapper { + display: flex; + flex: 1; + height: 100%; + margin: 0; + max-width: 400px; + min-height: 77px; + min-width: 220px; + position: relative; + width: 100%; +} +.rich-radio-button__wrapper input { + margin: 0; +} +.rich-radio-button__input { + cursor: pointer; + height: 100%; + left: 0; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; +} +.rich-radio-button__input:disabled { + cursor: not-allowed; +} +.rich-radio-button__input:disabled + .rich-radio-button .rich-radio-button__icon { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.rich-radio-button__input:disabled + .rich-radio-button h4 { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.rich-radio-button__input[readonly] { + cursor: default; +} +.rich-radio-button__input[readonly] + .rich-radio-button .rich-radio-button__icon { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.rich-radio-button__input[readonly] + .rich-radio-button h4 { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); +} +.rich-radio-button__input:not(:disabled, [readonly]):is(:hover, :active) + .rich-radio-button { + box-shadow: var(--coral-elevation-shadow-neutral-m, 0 0.125rem 0.375rem 0 hsla(0, 0%, 0%, 0.3)); +} +.rich-radio-button__input:not(:disabled, [readonly]):hover + + .rich-radio-button + .rich-radio-button__icon { + color: var(--coral-color-accent-icon-hover, hsl(204, 88%, 30%)); +} +.rich-radio-button__input:not(:disabled, [readonly]):hover + .rich-radio-button h4 { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); +} +.rich-radio-button__input:not(:disabled, [readonly]):active + + .rich-radio-button + .rich-radio-button__icon { + color: var(--coral-color-accent-icon-active, hsl(205, 88%, 20%)); +} +.rich-radio-button__input:not(:disabled, [readonly]):active + .rich-radio-button h4 { + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); +} +.rich-radio-button__input:not(:disabled, [readonly]):focus + .rich-radio-button { + outline: var(--coral-border-m-solid, 2px solid) + var(--coral-color-assistive-border-focus, hsl(241, 54%, 61%)); +} +.rich-radio-button__input:not(:disabled, [readonly]):focus + + .rich-radio-button + .rich-radio-button__icon { + color: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); +} +.rich-radio-button__input:not(:checked):not(:disabled, [readonly]):hover + .rich-radio-button { + border-color: var(--coral-color-neutral-border-weak-hover, hsl(0, 0%, 72%)); +} +.rich-radio-button__input:not(:checked):not(:disabled, [readonly]):active + .rich-radio-button { + border-color: var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} +.rich-radio-button__input:not(:checked)[readonly] + .rich-radio-button { + border-color: transparent; +} +.rich-radio-button__input:not(:checked):disabled + .rich-radio-button { + background-color: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); +} +.rich-radio-button__input:checked:not(:disabled, [readonly]) + .rich-radio-button { + background-color: var(--coral-color-accent-background-selected, hsl(204, 100%, 95%)); + border: var(--coral-border-m-solid, 2px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.rich-radio-button__input:checked:not(:disabled, [readonly]):hover + .rich-radio-button { + border-color: var(--coral-color-accent-border-hover, hsl(204, 95%, 23%)); +} +.rich-radio-button__input:checked:not(:disabled, [readonly]):active + .rich-radio-button { + border-color: var(--coral-color-accent-border-active, hsl(205, 95%, 15%)); +} +.rich-radio-button__input:checked:not(:disabled, [readonly]):focus + .rich-radio-button { + outline-offset: -2px; +} +.rich-radio-button__input:checked[readonly] + .rich-radio-button { + background-color: var(--coral-color-neutral-background, white); + border: var(--coral-border-m-solid, 2px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); +} +.rich-radio-button__input:checked:disabled + .rich-radio-button { + background-color: var(--coral-color-neutral-background-disabled, hsl(0, 0%, 88%)); + border: var(--coral-border-m-solid, 2px solid) + var(--coral-color-neutral-border-disabled, hsl(0, 0%, 65%)); +} diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss deleted file mode 100644 index 258392c2fff..00000000000 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss +++ /dev/null @@ -1,199 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.rich-radio-button { - background-color: tokens.$coral-color-accent-background-weak; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - border-radius: tokens.$coral-radius-m; - padding: tokens.$coral-spacing-m; - transition: background-color tokens.$coral-transition-normal, box-shadow tokens.$coral-transition-normal, border-color tokens.$coral-transition-normal; - width: 100%; - - h4 { - color: tokens.$coral-color-accent-text; - font: tokens.$coral-heading-s; - } - - p { - color: tokens.$coral-color-neutral-text-weak; - font: tokens.$coral-paragraph-s; - } - - &__icon { - color: tokens.$coral-color-accent-icon; - min-height: tokens.$coral-sizing-xs; - min-width: tokens.$coral-sizing-xs; - transition: color tokens.$coral-transition-normal; - } - - &__illustration, - &__logo { - height: tokens.$coral-sizing-l; - width: tokens.$coral-sizing-l; - } - - &__wrapper { - display: flex; - flex: 1; - height: 100%; - margin: 0; - max-width: 400px; - min-height: 77px; - min-width: 220px; - position: relative; - width: 100%; - - input { - margin: 0; - } - } - - &__input { - cursor: pointer; - height: 100%; - left: 0; - margin: 0; - opacity: 0; - position: absolute; - top: 0; - width: 100%; - - &:disabled { - cursor: not-allowed; - - + .rich-radio-button { - .rich-radio-button__icon { - color: tokens.$coral-color-neutral-icon-weak; - } - - h4 { - color: tokens.$coral-color-neutral-text-disabled; - } - } - } - - &[readonly] { - cursor: default; - - + .rich-radio-button { - .rich-radio-button__icon { - color: tokens.$coral-color-neutral-icon-weak; - } - - h4 { - color: tokens.$coral-color-neutral-text; - } - } - } - - &:not(:disabled, [readonly]) { - &:is(:hover, :active) { - + .rich-radio-button { - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - } - } - - &:hover { - + .rich-radio-button { - .rich-radio-button__icon { - color: tokens.$coral-color-accent-icon-hover; - } - - h4 { - color: tokens.$coral-color-accent-text-hover; - } - } - } - - &:active { - + .rich-radio-button { - .rich-radio-button__icon { - color: tokens.$coral-color-accent-icon-active; - } - - h4 { - color: tokens.$coral-color-accent-text-active; - } - } - } - - &:focus { - + .rich-radio-button { - outline: tokens.$coral-border-m-solid tokens.$coral-color-assistive-border-focus; - - .rich-radio-button__icon { - color: tokens.$coral-color-accent-icon; - } - } - } - } - - &:not(:checked) { - &:not(:disabled, [readonly]) { - &:hover { - + .rich-radio-button { - border-color: tokens.$coral-color-neutral-border-weak-hover; - } - } - - &:active { - + .rich-radio-button { - border-color: tokens.$coral-color-neutral-border; - } - } - } - - &[readonly] { - + .rich-radio-button { - border-color: transparent; - } - } - - &:disabled { - + .rich-radio-button { - background-color: tokens.$coral-color-neutral-background-medium; - } - } - } - - &:checked { - &:not(:disabled, [readonly]) { - + .rich-radio-button { - background-color: tokens.$coral-color-accent-background-selected; - border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border; - } - - &:hover { - + .rich-radio-button { - border-color: tokens.$coral-color-accent-border-hover; - } - } - - &:active { - + .rich-radio-button { - border-color: tokens.$coral-color-accent-border-active; - } - } - - &:focus { - + .rich-radio-button { - outline-offset: -2px; - } - } - } - - &[readonly] { - + .rich-radio-button { - background-color: tokens.$coral-color-neutral-background; - border: tokens.$coral-border-m-solid tokens.$coral-color-neutral-border; - } - } - - &:disabled { - + .rich-radio-button { - background-color: tokens.$coral-color-neutral-background-disabled; - border: tokens.$coral-border-m-solid tokens.$coral-color-neutral-border-disabled; - } - } - } - } -} diff --git a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.Primitive.tsx b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.Primitive.tsx index 823fd16c093..d9328a65026 100644 --- a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.Primitive.tsx +++ b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.Primitive.tsx @@ -2,7 +2,7 @@ import { forwardRef, HTMLAttributes, Ref } from 'react'; import classNames from 'classnames'; -import styles from './Skeleton.module.scss'; +import styles from './Skeleton.module.css'; export type SkeletonPrimitiveProps = Omit, 'style'> & { isBlock?: boolean; diff --git a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.css b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.css new file mode 100644 index 00000000000..6d65d376624 --- /dev/null +++ b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.css @@ -0,0 +1,36 @@ +.skeleton { + display: inline-block; + height: var(--coral-sizing-m, 2.25rem); + width: var(--coral-sizing-m, 2.25rem); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + animation: var( + --coral-animation-heartbeat, + coral-light-keyframes-blink 1.5s cubic-bezier(0.7, 0, 1, 1) infinite + ); + border-radius: var(--coral-radius-s, 0.25rem); + cursor: wait; +} +.skeleton.isBlock { + display: block; + width: 100%; +} + +.size-XL { + height: var(--coral-sizing-m, 2.25rem); +} + +.size-L { + height: var(--coral-sizing-s, 1.75rem); +} + +.size-M { + height: var(--coral-sizing-xxxs, 1rem); +} + +.size-S { + height: var(--coral-sizing-minimal, 0.75rem); +} + +.size-XS { + height: var(--coral-spacing-xs, 0.5rem); +} diff --git a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.scss b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.scss deleted file mode 100644 index 74088621935..00000000000 --- a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.skeleton { - display: inline-block; - height: tokens.$coral-sizing-m; - width: tokens.$coral-sizing-m; - background: tokens.$coral-color-neutral-background-strong; - animation: tokens.$coral-animation-heartbeat; - border-radius: tokens.$coral-radius-s; - cursor: wait; - - &.isBlock { - display: block; - width: 100%; - } -} - -.size-XL { - height: tokens.$coral-sizing-m; -} - -.size-L { - height: tokens.$coral-sizing-s; -} - -.size-M { - height: tokens.$coral-sizing-xxxs; -} - -.size-S { - height: tokens.$coral-sizing-minimal; -} - -.size-XS { - height: tokens.$coral-spacing-xs; -} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButton.module.css b/packages/design-system/src/components/Skeleton/variations/SkeletonButton.module.css new file mode 100644 index 00000000000..edad71248b5 --- /dev/null +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonButton.module.css @@ -0,0 +1,6 @@ +.buttonSkeleton { + width: 6.25rem; +} +.buttonSkeleton.small { + width: 5rem; +} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButton.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonButton.module.scss deleted file mode 100644 index 0258777c2d5..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButton.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.buttonSkeleton { - width: 6.25rem; - - &.small { - width: 5rem; - } -} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx index fac448d1a8f..bb1134b87d3 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx @@ -4,8 +4,8 @@ import classNames from 'classnames'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; -import PrimitiveStyles from '../Primitive/Skeleton.module.scss'; -import styles from './SkeletonButton.module.scss'; +import PrimitiveStyles from '../Primitive/Skeleton.module.css'; +import styles from './SkeletonButton.module.css'; export type SkeletonButtonProps = Omit & { size?: 'M' | 'S'; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.css b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.css new file mode 100644 index 00000000000..4b12319093b --- /dev/null +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.css @@ -0,0 +1,11 @@ +.buttonIconSkeleton { + width: var(--coral-sizing-m, 2.25rem); + border-radius: var(--coral-radius-round, 6249.9375rem); +} +.buttonIconSkeleton.size-S { + width: var(--coral-sizing-s, 1.75rem); +} +.buttonIconSkeleton.size-XS { + width: var(--coral-sizing-xxxs, 1rem); + border-radius: var(--coral-radius-s, 0.25rem); +} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.scss deleted file mode 100644 index c7b60031890..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.buttonIconSkeleton { - width: tokens.$coral-sizing-m; - border-radius: tokens.$coral-radius-round; - - &.size-S { - width: tokens.$coral-sizing-s; - } - - &.size-XS { - width: tokens.$coral-sizing-xxxs; - border-radius: tokens.$coral-radius-s; - } -} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx index bddf285bc69..1e3e55d4e33 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx @@ -4,8 +4,8 @@ import classNames from 'classnames'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; -import PrimitiveStyles from '../Primitive/Skeleton.module.scss'; -import styles from './SkeletonButtonIcon.module.scss'; +import PrimitiveStyles from '../Primitive/Skeleton.module.css'; +import styles from './SkeletonButtonIcon.module.css'; export type SkeletonButtonIconProps = Omit & { size?: 'M' | 'S' | 'XS'; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.css b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.css new file mode 100644 index 00000000000..2a35e60ef1a --- /dev/null +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.css @@ -0,0 +1,30 @@ +.skeletonHeading { + max-width: var(--coral-sizing-maximal, 20rem); +} +.skeletonHeading.size-L { + height: 1.125rem; +} +.skeletonHeading.size-M { + height: 1rem; +} +.skeletonHeading.size-S { + height: 0.875rem; +} +.skeletonHeading.width-XS { + max-width: 10%; +} +.skeletonHeading.width-S { + max-width: 20%; +} +.skeletonHeading.width-M { + max-width: 40%; +} +.skeletonHeading.width-L { + max-width: 60%; +} +.skeletonHeading.width-XL { + max-width: 80%; +} +.skeletonHeading.width-100 { + max-width: 100%; +} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss deleted file mode 100644 index 18f92e3e759..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss +++ /dev/null @@ -1,42 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.skeletonHeading { - max-width: tokens.$coral-sizing-maximal; - - // Font-size mimics - &.size-L { - height: 1.125rem; - } - - &.size-M { - height: 1rem; - } - - &.size-S { - height: 0.875rem; - } - - &.width-XS { - max-width: 10%; - } - - &.width-S { - max-width: 20%; - } - - &.width-M { - max-width: 40%; - } - - &.width-L { - max-width: 60%; - } - - &.width-XL { - max-width: 80%; - } - - &.width-100 { - max-width: 100%; - } -} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx index b8bf30a69ff..357d5fcd81b 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; -import styles from './SkeletonHeading.module.scss'; +import styles from './SkeletonHeading.module.css'; export type SkeletonHeadingProps = Omit & { size?: 'L' | 'M' | 'S'; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.css b/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.css new file mode 100644 index 00000000000..7116d8e86df --- /dev/null +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.css @@ -0,0 +1,7 @@ +.skeleton-input { + height: 1.875rem; +} +.skeleton-input__label { + width: 100%; + max-width: calc(var(--coral-sizing-l, 2.5rem) * 2); +} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.scss deleted file mode 100644 index 6f713ade795..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; -@use '../../Form/Primitives/mixins' as Form; - -.skeleton-input { - height: Form.$standard-input-height; - - &__label { - width: 100%; - max-width: calc(#{tokens.$coral-sizing-l} * 2); - } -} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonInput.tsx index f050f875ae9..e08a20009d3 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonInput.tsx @@ -4,7 +4,7 @@ import { StackVertical } from '../../Stack'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; import SkeletonParagraph from './SkeletonParagraph'; -import styles from './SkeletonInput.module.scss'; +import styles from './SkeletonInput.module.css'; export type SkeletonInputProps = Omit; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.css b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.css new file mode 100644 index 00000000000..347b1ef770f --- /dev/null +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.css @@ -0,0 +1,24 @@ +.skeletonParagraph.size-M { + height: 0.875rem; +} +.skeletonParagraph.size-S { + height: 0.75rem; +} +.skeletonParagraph.width-XS { + max-width: 10%; +} +.skeletonParagraph.width-S { + max-width: 20%; +} +.skeletonParagraph.width-M { + max-width: 40%; +} +.skeletonParagraph.width-L { + max-width: 60%; +} +.skeletonParagraph.width-XL { + max-width: 80%; +} +.skeletonParagraph.width-100 { + max-width: 100%; +} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.scss deleted file mode 100644 index c3d18c60dd2..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -.skeletonParagraph { - // Font-size mimics - &.size-M { - height: 0.875rem; - } - - &.size-S { - height: 0.75rem; - } - - &.width-XS { - max-width: 10%; - } - - &.width-S { - max-width: 20%; - } - - &.width-M { - max-width: 40%; - } - - &.width-L { - max-width: 60%; - } - - &.width-XL { - max-width: 80%; - } - - &.width-100 { - max-width: 100%; - } -} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx index 29a4e98ee98..14acf661374 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; -import styles from './SkeletonParagraph.module.scss'; +import styles from './SkeletonParagraph.module.css'; export type SkeletonParagraphProps = Omit & { size?: 'M' | 'S'; diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.css b/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.css new file mode 100644 index 00000000000..93d52d07cc3 --- /dev/null +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.css @@ -0,0 +1,3 @@ +.skeleton-sized-circle { + border-radius: var(--coral-radius-round, 6249.9375rem); +} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss b/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss deleted file mode 100644 index 535ae953ec8..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.skeleton-sized-circle { - border-radius: tokens.$coral-radius-round; -} diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx index 36313cabae3..c96eecad546 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; -import style from './SkeletonSized.module.scss'; +import style from './SkeletonSized.module.css'; export type SkeletonSizedProps = Omit & { height?: string; diff --git a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.css b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.css new file mode 100644 index 00000000000..4e173fac721 --- /dev/null +++ b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.css @@ -0,0 +1,331 @@ +.stack { + display: flex; + flex-flow: row; + flex-grow: 1; + flex-shrink: 1; +} +.stack.column { + flex-flow: column; +} +.stack.inline { + display: inline-flex; + flex-grow: inherit; +} +.stack.relative { + position: relative; +} +.stack.noShrink { + flex-shrink: 0; +} +.stack.noGrow { + flex-grow: 0; +} +.stack.justify-start { + justify-content: flex-start; +} +.stack.justify-end { + justify-content: flex-end; +} +.stack.justify-center { + justify-content: center; +} +.stack.justify-space-between { + justify-content: space-between; +} +.stack.justify-space-around { + justify-content: space-around; +} +.stack.justify-space-evenly { + justify-content: space-evenly; +} +.stack.justify-stretch { + justify-content: stretch; +} +.stack.align-start { + align-items: flex-start; +} +.stack.align-end { + align-items: flex-end; +} +.stack.align-center { + align-items: center; +} +.stack.align-baseline { + align-items: baseline; +} +.stack.align-stretch { + align-items: stretch; +} +.stack.align-content-start { + align-content: flex-start; +} +.stack.align-content-end { + align-content: flex-end; +} +.stack.align-content-center { + align-content: center; +} +.stack.align-content-baseline { + align-content: baseline; +} +.stack.align-content-stretch { + align-content: stretch; +} +.stack.nowrap { + flex-wrap: nowrap; +} +.stack.wrap { + flex-wrap: wrap; +} +.stack.wrapReverse { + flex-wrap: wrap-reverse; +} +.stack.gap-x-NONE { + column-gap: 0; +} +.stack.gap-x-XXS { + column-gap: var(--coral-spacing-xxs, 0.25rem); +} +.stack.gap-x-XS { + column-gap: var(--coral-spacing-xs, 0.5rem); +} +.stack.gap-x-S { + column-gap: var(--coral-spacing-s, 0.75rem); +} +.stack.gap-x-M { + column-gap: var(--coral-spacing-m, 1rem); +} +.stack.gap-x-L { + column-gap: var(--coral-spacing-l, 1.75rem); +} +.stack.gap-x-XL { + column-gap: var(--coral-spacing-xl, 2.25rem); +} +.stack.gap-y-NONE { + row-gap: 0; +} +.stack.gap-y-XXS { + row-gap: var(--coral-spacing-xxs, 0.25rem); +} +.stack.gap-y-XS { + row-gap: var(--coral-spacing-xs, 0.5rem); +} +.stack.gap-y-S { + row-gap: var(--coral-spacing-s, 0.75rem); +} +.stack.gap-y-M { + row-gap: var(--coral-spacing-m, 1rem); +} +.stack.gap-y-L { + row-gap: var(--coral-spacing-l, 1.75rem); +} +.stack.gap-y-XL { + row-gap: var(--coral-spacing-xl, 2.25rem); +} +.stack.padding-top-NONE { + padding-top: 0; +} +.stack.padding-top-XXS { + padding-top: var(--coral-spacing-xxs, 0.25rem); +} +.stack.padding-top-XS { + padding-top: var(--coral-spacing-xs, 0.5rem); +} +.stack.padding-top-S { + padding-top: var(--coral-spacing-s, 0.75rem); +} +.stack.padding-top-M { + padding-top: var(--coral-spacing-m, 1rem); +} +.stack.padding-top-L { + padding-top: var(--coral-spacing-l, 1.75rem); +} +.stack.padding-top-XL { + padding-top: var(--coral-spacing-xl, 2.25rem); +} +.stack.padding-right-NONE { + padding-right: 0; +} +.stack.padding-right-XXS { + padding-right: var(--coral-spacing-xxs, 0.25rem); +} +.stack.padding-right-XS { + padding-right: var(--coral-spacing-xs, 0.5rem); +} +.stack.padding-right-S { + padding-right: var(--coral-spacing-s, 0.75rem); +} +.stack.padding-right-M { + padding-right: var(--coral-spacing-m, 1rem); +} +.stack.padding-right-L { + padding-right: var(--coral-spacing-l, 1.75rem); +} +.stack.padding-right-XL { + padding-right: var(--coral-spacing-xl, 2.25rem); +} +.stack.padding-bottom-NONE { + padding-bottom: 0; +} +.stack.padding-bottom-XXS { + padding-bottom: var(--coral-spacing-xxs, 0.25rem); +} +.stack.padding-bottom-XS { + padding-bottom: var(--coral-spacing-xs, 0.5rem); +} +.stack.padding-bottom-S { + padding-bottom: var(--coral-spacing-s, 0.75rem); +} +.stack.padding-bottom-M { + padding-bottom: var(--coral-spacing-m, 1rem); +} +.stack.padding-bottom-L { + padding-bottom: var(--coral-spacing-l, 1.75rem); +} +.stack.padding-bottom-XL { + padding-bottom: var(--coral-spacing-xl, 2.25rem); +} +.stack.padding-left-NONE { + padding-left: 0; +} +.stack.padding-left-XXS { + padding-left: var(--coral-spacing-xxs, 0.25rem); +} +.stack.padding-left-XS { + padding-left: var(--coral-spacing-xs, 0.5rem); +} +.stack.padding-left-S { + padding-left: var(--coral-spacing-s, 0.75rem); +} +.stack.padding-left-M { + padding-left: var(--coral-spacing-m, 1rem); +} +.stack.padding-left-L { + padding-left: var(--coral-spacing-l, 1.75rem); +} +.stack.padding-left-XL { + padding-left: var(--coral-spacing-xl, 2.25rem); +} +.stack.margin-top-NONE { + margin-top: 0; +} +.stack.margin-top-auto { + margin-top: auto; +} +.stack.margin-top-XXS { + margin-top: var(--coral-spacing-xxs, 0.25rem); +} +.stack.margin-top-XS { + margin-top: var(--coral-spacing-xs, 0.5rem); +} +.stack.margin-top-S { + margin-top: var(--coral-spacing-s, 0.75rem); +} +.stack.margin-top-M { + margin-top: var(--coral-spacing-m, 1rem); +} +.stack.margin-top-L { + margin-top: var(--coral-spacing-l, 1.75rem); +} +.stack.margin-top-XL { + margin-top: var(--coral-spacing-xl, 2.25rem); +} +.stack.margin-right-NONE { + margin-right: 0; +} +.stack.margin-right-auto { + margin-right: auto; +} +.stack.margin-right-XXS { + margin-right: var(--coral-spacing-xxs, 0.25rem); +} +.stack.margin-right-XS { + margin-right: var(--coral-spacing-xs, 0.5rem); +} +.stack.margin-right-S { + margin-right: var(--coral-spacing-s, 0.75rem); +} +.stack.margin-right-M { + margin-right: var(--coral-spacing-m, 1rem); +} +.stack.margin-right-L { + margin-right: var(--coral-spacing-l, 1.75rem); +} +.stack.margin-right-XL { + margin-right: var(--coral-spacing-xl, 2.25rem); +} +.stack.margin-bottom-NONE { + margin-bottom: 0; +} +.stack.margin-bottom-auto { + margin-bottom: auto; +} +.stack.margin-bottom-XXS { + margin-bottom: var(--coral-spacing-xxs, 0.25rem); +} +.stack.margin-bottom-XS { + margin-bottom: var(--coral-spacing-xs, 0.5rem); +} +.stack.margin-bottom-S { + margin-bottom: var(--coral-spacing-s, 0.75rem); +} +.stack.margin-bottom-M { + margin-bottom: var(--coral-spacing-m, 1rem); +} +.stack.margin-bottom-L { + margin-bottom: var(--coral-spacing-l, 1.75rem); +} +.stack.margin-bottom-XL { + margin-bottom: var(--coral-spacing-xl, 2.25rem); +} +.stack.margin-left-NONE { + margin-left: 0; +} +.stack.margin-left-auto { + margin-left: auto; +} +.stack.margin-left-XXS { + margin-left: var(--coral-spacing-xxs, 0.25rem); +} +.stack.margin-left-XS { + margin-left: var(--coral-spacing-xs, 0.5rem); +} +.stack.margin-left-S { + margin-left: var(--coral-spacing-s, 0.75rem); +} +.stack.margin-left-M { + margin-left: var(--coral-spacing-m, 1rem); +} +.stack.margin-left-L { + margin-left: var(--coral-spacing-l, 1.75rem); +} +.stack.margin-left-XL { + margin-left: var(--coral-spacing-xl, 2.25rem); +} +.stack.fullWidth { + width: 100%; +} +.stack.height-100 { + height: 100%; +} +.stack.height-XXXS { + height: var(--coral-sizing-xxxs, 1rem); +} +.stack.height-XXS { + height: var(--coral-sizing-xxs, 1.25rem); +} +.stack.height-XS { + height: var(--coral-sizing-xs, 1.5rem); +} +.stack.height-S { + height: var(--coral-sizing-s, 1.75rem); +} +.stack.height-M { + height: var(--coral-sizing-m, 2.25rem); +} +.stack.height-L { + height: var(--coral-sizing-l, 2.5rem); +} +.stack.height-XXXL { + height: var(--coral-sizing-xxxl, 13.75rem); +} diff --git a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.scss b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.scss deleted file mode 100644 index dd09ec36167..00000000000 --- a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.scss +++ /dev/null @@ -1,475 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.stack { - display: flex; - flex-flow: row; - flex-grow: 1; - flex-shrink: 1; - - &.column { - flex-flow: column; - } - - &.inline { - display: inline-flex; - flex-grow: inherit; - } - - &.relative { - position: relative; - } - - &.noShrink { - flex-shrink: 0; - } - - &.noGrow { - flex-grow: 0; - } - - &.justify { - &-start { - justify-content: flex-start; - } - - &-end { - justify-content: flex-end; - } - - &-center { - justify-content: center; - } - - &-space-between { - justify-content: space-between; - } - - &-space-around { - justify-content: space-around; - } - - &-space-evenly { - justify-content: space-evenly; - } - - &-stretch { - justify-content: stretch; - } - } - - &.align { - &-start { - align-items: flex-start; - } - - &-end { - align-items: flex-end; - } - - &-center { - align-items: center; - } - - &-baseline { - align-items: baseline; - } - - &-stretch { - align-items: stretch; - } - } - - &.align-content { - &-start { - align-content: flex-start; - } - - &-end { - align-content: flex-end; - } - - &-center { - align-content: center; - } - - &-baseline { - align-content: baseline; - } - - &-stretch { - align-content: stretch; - } - } - - &.nowrap { - flex-wrap: nowrap; - } - - &.wrap { - flex-wrap: wrap; - } - - &.wrapReverse { - flex-wrap: wrap-reverse; - } - - &.gap { - &-x { - &-NONE { - column-gap: 0; - } - - &-XXS { - column-gap: tokens.$coral-spacing-xxs; - } - - &-XS { - column-gap: tokens.$coral-spacing-xs; - } - - &-S { - column-gap: tokens.$coral-spacing-s; - } - - &-M { - column-gap: tokens.$coral-spacing-m; - } - - &-L { - column-gap: tokens.$coral-spacing-l; - } - - &-XL { - column-gap: tokens.$coral-spacing-xl; - } - } - - &-y { - &-NONE { - row-gap: 0; - } - - &-XXS { - row-gap: tokens.$coral-spacing-xxs; - } - - &-XS { - row-gap: tokens.$coral-spacing-xs; - } - - &-S { - row-gap: tokens.$coral-spacing-s; - } - - &-M { - row-gap: tokens.$coral-spacing-m; - } - - &-L { - row-gap: tokens.$coral-spacing-l; - } - - &-XL { - row-gap: tokens.$coral-spacing-xl; - } - } - } - - &.padding { - &-top { - &-NONE { - padding-top: 0; - } - - &-XXS { - padding-top: tokens.$coral-spacing-xxs; - } - - &-XS { - padding-top: tokens.$coral-spacing-xs; - } - - &-S { - padding-top: tokens.$coral-spacing-s; - } - - &-M { - padding-top: tokens.$coral-spacing-m; - } - - &-L { - padding-top: tokens.$coral-spacing-l; - } - - &-XL { - padding-top: tokens.$coral-spacing-xl; - } - } - - &-right { - &-NONE { - padding-right: 0; - } - - &-XXS { - padding-right: tokens.$coral-spacing-xxs; - } - - &-XS { - padding-right: tokens.$coral-spacing-xs; - } - - &-S { - padding-right: tokens.$coral-spacing-s; - } - - &-M { - padding-right: tokens.$coral-spacing-m; - } - - &-L { - padding-right: tokens.$coral-spacing-l; - } - - &-XL { - padding-right: tokens.$coral-spacing-xl; - } - } - - &-bottom { - &-NONE { - padding-bottom: 0; - } - - &-XXS { - padding-bottom: tokens.$coral-spacing-xxs; - } - - &-XS { - padding-bottom: tokens.$coral-spacing-xs; - } - - &-S { - padding-bottom: tokens.$coral-spacing-s; - } - - &-M { - padding-bottom: tokens.$coral-spacing-m; - } - - &-L { - padding-bottom: tokens.$coral-spacing-l; - } - - &-XL { - padding-bottom: tokens.$coral-spacing-xl; - } - } - - &-left { - &-NONE { - padding-left: 0; - } - - &-XXS { - padding-left: tokens.$coral-spacing-xxs; - } - - &-XS { - padding-left: tokens.$coral-spacing-xs; - } - - &-S { - padding-left: tokens.$coral-spacing-s; - } - - &-M { - padding-left: tokens.$coral-spacing-m; - } - - &-L { - padding-left: tokens.$coral-spacing-l; - } - - &-XL { - padding-left: tokens.$coral-spacing-xl; - } - } - } - - &.margin { - &-top { - &-NONE { - margin-top: 0; - } - - &-auto { - margin-top: auto; - } - - &-XXS { - margin-top: tokens.$coral-spacing-xxs; - } - - &-XS { - margin-top: tokens.$coral-spacing-xs; - } - - &-S { - margin-top: tokens.$coral-spacing-s; - } - - &-M { - margin-top: tokens.$coral-spacing-m; - } - - &-L { - margin-top: tokens.$coral-spacing-l; - } - - &-XL { - margin-top: tokens.$coral-spacing-xl; - } - } - - &-right { - &-NONE { - margin-right: 0; - } - - &-auto { - margin-right: auto; - } - - &-XXS { - margin-right: tokens.$coral-spacing-xxs; - } - - &-XS { - margin-right: tokens.$coral-spacing-xs; - } - - &-S { - margin-right: tokens.$coral-spacing-s; - } - - &-M { - margin-right: tokens.$coral-spacing-m; - } - - &-L { - margin-right: tokens.$coral-spacing-l; - } - - &-XL { - margin-right: tokens.$coral-spacing-xl; - } - } - - &-bottom { - &-NONE { - margin-bottom: 0; - } - - &-auto { - margin-bottom: auto; - } - - &-XXS { - margin-bottom: tokens.$coral-spacing-xxs; - } - - &-XS { - margin-bottom: tokens.$coral-spacing-xs; - } - - &-S { - margin-bottom: tokens.$coral-spacing-s; - } - - &-M { - margin-bottom: tokens.$coral-spacing-m; - } - - &-L { - margin-bottom: tokens.$coral-spacing-l; - } - - &-XL { - margin-bottom: tokens.$coral-spacing-xl; - } - } - - &-left { - &-NONE { - margin-left: 0; - } - - &-auto { - margin-left: auto; - } - - &-XXS { - margin-left: tokens.$coral-spacing-xxs; - } - - &-XS { - margin-left: tokens.$coral-spacing-xs; - } - - &-S { - margin-left: tokens.$coral-spacing-s; - } - - &-M { - margin-left: tokens.$coral-spacing-m; - } - - &-L { - margin-left: tokens.$coral-spacing-l; - } - - &-XL { - margin-left: tokens.$coral-spacing-xl; - } - } - } - - &.fullWidth { - width: 100%; - } - - &.height { - &-100 { - height: 100%; - } - - &-XXXS { - height: tokens.$coral-sizing-xxxs; - } - - &-XXS { - height: tokens.$coral-sizing-xxs; - } - - &-XS { - height: tokens.$coral-sizing-xs; - } - - &-S { - height: tokens.$coral-sizing-s; - } - - &-M { - height: tokens.$coral-sizing-m; - } - - &-L { - height: tokens.$coral-sizing-l; - } - - &-XXXL { - height: tokens.$coral-sizing-xxxl; - } - } -} diff --git a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.tsx b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.tsx index e46ac070945..4cc4c07edbc 100644 --- a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.tsx +++ b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.tsx @@ -5,7 +5,7 @@ import classnames from 'classnames'; import { DataAttributes } from '../../../types'; -import styles from './StackPrimitive.module.scss'; +import styles from './StackPrimitive.module.css'; export const justifyOptions = { start: 'justify-start', diff --git a/packages/design-system/src/components/Stack/StackItem.module.css b/packages/design-system/src/components/Stack/StackItem.module.css new file mode 100644 index 00000000000..3d74bac16bf --- /dev/null +++ b/packages/design-system/src/components/Stack/StackItem.module.css @@ -0,0 +1,43 @@ +.item { + flex-grow: 0; + flex-shrink: 0; +} +.item.grow { + flex-grow: 1; +} +.item.shrink { + flex-shrink: 1; +} +.item.fullWidth { + width: 100%; +} +.item.align-auto { + align-self: auto; +} +.item.align-start { + align-self: flex-end; +} +.item.align-end { + align-self: flex-end; +} +.item.align-center { + align-self: center; +} +.item.align-stretch { + align-self: stretch; +} +.item.align-baseline { + align-self: baseline; +} +.item.overflow-scroll { + overflow: scroll; +} +.item.overflow-hidden { + overflow: hidden; +} +.item.overflow-visible { + overflow: visible; +} +.item.overflow-auto { + overflow: auto; +} diff --git a/packages/design-system/src/components/Stack/StackItem.module.scss b/packages/design-system/src/components/Stack/StackItem.module.scss deleted file mode 100644 index 6f168060524..00000000000 --- a/packages/design-system/src/components/Stack/StackItem.module.scss +++ /dev/null @@ -1,60 +0,0 @@ -.item { - flex-grow: 0; - flex-shrink: 0; - - &.grow { - flex-grow: 1; - } - - &.shrink { - flex-shrink: 1; - } - - &.fullWidth { - width: 100%; - } - - &.align { - &-auto { - align-self: auto; - } - - &-start { - align-self: flex-end; - } - - &-end { - align-self: flex-end; - } - - &-center { - align-self: center; - } - - &-stretch { - align-self: stretch; - } - - &-baseline { - align-self: baseline; - } - } - - &.overflow { - &-scroll { - overflow: scroll; - } - - &-hidden { - overflow: hidden; - } - - &-visible { - overflow: visible; - } - - &-auto { - overflow: auto; - } - } -} diff --git a/packages/design-system/src/components/Stack/StackItem.tsx b/packages/design-system/src/components/Stack/StackItem.tsx index 7aa69196728..b72b13c1b4e 100644 --- a/packages/design-system/src/components/Stack/StackItem.tsx +++ b/packages/design-system/src/components/Stack/StackItem.tsx @@ -3,7 +3,7 @@ import type { Ref } from 'react'; import classnames from 'classnames'; -import styles from './StackItem.module.scss'; +import styles from './StackItem.module.css'; export const alignOptions = { auto: 'align-auto', diff --git a/packages/design-system/src/components/Status/Primitive/Status.module.css b/packages/design-system/src/components/Status/Primitive/Status.module.css new file mode 100644 index 00000000000..eab4e5f37a6 --- /dev/null +++ b/packages/design-system/src/components/Status/Primitive/Status.module.css @@ -0,0 +1,41 @@ +.status { + display: flex; + font: var(--coral-paragraph-m-bold, 600 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.status .status__icon { + width: var(--coral-sizing-xxxs, 1rem); + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.status .status__text { + white-space: nowrap; +} +.status .status__icon, +.status .status__text { + display: inline-flex; + align-items: center; +} +.status.failed { + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.status.failed .status__icon { + color: var(--coral-color-danger-icon, hsl(359, 69%, 53%)); +} +.status.successful { + color: var(--coral-color-success-text, hsl(111, 49%, 34%)); +} +.status.successful .status__icon { + color: var(--coral-color-success-icon, hsl(111, 53%, 40%)); +} +.status.inProgress { + color: var(--coral-color-info-text, hsl(204, 95%, 31%)); +} +.status.inProgress .status__icon { + color: var(--coral-color-info-icon, hsl(204, 88%, 40%)); +} +.status.warning { + color: var(--coral-color-warning-text, hsl(22, 93%, 41%)); +} +.status.warning .status__icon { + color: var(--coral-color-warning-icon, hsl(22, 87%, 47%)); +} diff --git a/packages/design-system/src/components/Status/Primitive/Status.module.scss b/packages/design-system/src/components/Status/Primitive/Status.module.scss deleted file mode 100644 index 78d44b7e2f4..00000000000 --- a/packages/design-system/src/components/Status/Primitive/Status.module.scss +++ /dev/null @@ -1,56 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.status { - display: flex; - font: tokens.$coral-paragraph-m-bold; - color: tokens.$coral-color-neutral-text-weak; - - .status { - &__icon { - width: tokens.$coral-sizing-xxxs; - color: tokens.$coral-color-neutral-icon-weak; - } - - &__text { - white-space: nowrap; - } - - &__icon, - &__text { - display: inline-flex; - align-items: center; - } - } - - &.failed { - color: tokens.$coral-color-danger-text; - - .status__icon { - color: tokens.$coral-color-danger-icon; - } - } - - &.successful { - color: tokens.$coral-color-success-text; - - .status__icon { - color: tokens.$coral-color-success-icon; - } - } - - &.inProgress { - color: tokens.$coral-color-info-text; - - .status__icon { - color: tokens.$coral-color-info-icon; - } - } - - &.warning { - color: tokens.$coral-color-warning-text; - - .status__icon { - color: tokens.$coral-color-warning-icon; - } - } -} diff --git a/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx b/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx index 7c88b393c3b..88605377427 100644 --- a/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx +++ b/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx @@ -13,7 +13,7 @@ import { Loading } from '../../Loading'; import { StackHorizontal } from '../../Stack'; import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../Tooltip'; -import styles from './Status.module.scss'; +import styles from './Status.module.css'; export const variants = { successful: 'successful', diff --git a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.css b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.css new file mode 100644 index 00000000000..09261ada480 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.css @@ -0,0 +1,21 @@ +.statusDot { + display: block; + width: var(--coral-spacing-xs, 0.5rem); + height: var(--coral-spacing-xs, 0.5rem); + border-radius: 50%; +} +.statusDot.beta { + background-color: var(--coral-color-beta-icon, hsl(280, 80%, 54%)); +} +.statusDot.error { + background-color: var(--coral-color-danger-icon, hsl(359, 69%, 53%)); +} +.statusDot.information { + background-color: var(--coral-color-info-icon, hsl(204, 88%, 40%)); +} +.statusDot.success { + background-color: var(--coral-color-success-icon, hsl(111, 53%, 40%)); +} +.statusDot.warning { + background-color: var(--coral-color-warning-icon, hsl(22, 87%, 47%)); +} diff --git a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss deleted file mode 100644 index dcf82b42925..00000000000 --- a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.statusDot { - display: block; - width: tokens.$coral-spacing-xs; - height: tokens.$coral-spacing-xs; - border-radius: 50%; - - &.beta { - background-color: tokens.$coral-color-beta-icon; - } - - &.error { - background-color: tokens.$coral-color-danger-icon; - } - - &.information { - background-color: tokens.$coral-color-info-icon; - } - - &.success { - background-color: tokens.$coral-color-success-icon; - } - - &.warning { - background-color: tokens.$coral-color-warning-icon; - } - -} diff --git a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx index 871d9bfc350..29ab4ac3b4a 100644 --- a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx +++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; import { DataAttributes } from '../../../types'; -import styles from './StatusDotPrimitive.module.scss'; +import styles from './StatusDotPrimitive.module.css'; export const variants = { beta: 'beta', diff --git a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.css b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.css new file mode 100644 index 00000000000..9ae734e1a59 --- /dev/null +++ b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.css @@ -0,0 +1,8 @@ +.progress { + position: absolute; +} +.progress div { + position: absolute; + top: 0; + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); +} diff --git a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.scss b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.scss deleted file mode 100644 index 6e890ed69ef..00000000000 --- a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - - -.progress { - position: absolute; - - div { - position: absolute; - top: 0; - background: tokens.$coral-color-accent-background-strong; - } -} diff --git a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx index 542e2c86083..b71b972a3a8 100644 --- a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx +++ b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx @@ -5,7 +5,7 @@ import classnames from 'classnames'; import { VisuallyHidden } from '../../../VisuallyHidden'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../constants'; -import styles from './Progress.module.scss'; +import styles from './Progress.module.css'; type StepperOrientation = 'vertical' | 'horizontal'; diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.css similarity index 63% rename from packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss rename to packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.css index 29dcc1865cd..e3f04185e08 100644 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.css @@ -1,17 +1,14 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - .horizontal { - top: calc(#{tokens.$coral-sizing-xxxs} / 2 - 0.0313rem); + top: calc(var(--coral-sizing-xxxs, 1rem) / 2 - 0.0313rem); right: 6.25rem; left: 6.25rem; height: 0.125rem; transform: translateY(-50%); background: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0' x2='100%25' y2='0' fill='none' stroke='%23d2d2d2' stroke-width='4' stroke-dasharray='2%2c6'/%3e%3c/svg%3e"); z-index: 1; - - div { - top: 0; - height: 0.125rem; - transition: width tokens.$coral-transition-slow; - } +} +.horizontal div { + top: 0; + height: 0.125rem; + transition: width var(--coral-transition-slow, 400ms ease-in); } diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.tsx b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.tsx index 7f00a6ba4f5..a481c422db3 100644 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.tsx +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.tsx @@ -1,6 +1,6 @@ import { forwardRef, Ref } from 'react'; import Progress, { ProgressProps } from '../Primitive/Progress'; -import styles from './Progress.horizontal.module.scss'; +import styles from './Progress.horizontal.module.css'; type ProgressHorizontalTypes = Omit; diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.css similarity index 51% rename from packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss rename to packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.css index 67b1d579a75..d622fa666e0 100644 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.css @@ -1,14 +1,11 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - .vertical { - top: tokens.$coral-sizing-xxs; - right: calc(#{tokens.$coral-sizing-xxxs} / 2 - 0.0313rem); - bottom: tokens.$coral-sizing-xxs; + top: var(--coral-sizing-xxs, 1.25rem); + right: calc(var(--coral-sizing-xxxs, 1rem) / 2 - 0.0313rem); + bottom: var(--coral-sizing-xxs, 1.25rem); width: 0.125rem; background: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0' x2='0' y2='100%25' fill='none' stroke='%23d2d2d2' stroke-width='4' stroke-dasharray='2%2c6'/%3e%3c/svg%3e"); - - div { - width: 0.125rem; - transition: height tokens.$coral-transition-slow; - } +} +.vertical div { + width: 0.125rem; + transition: height var(--coral-transition-slow, 400ms ease-in); } diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.tsx b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.tsx index bdfafe4a2ca..c1c35e3b51e 100644 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.tsx +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.tsx @@ -1,6 +1,6 @@ import { forwardRef, Ref } from 'react'; import Progress, { ProgressProps } from '../Primitive/Progress'; -import styles from './Progress.vertical.module.scss'; +import styles from './Progress.vertical.module.css'; type ProgressVerticalTypes = Omit; diff --git a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.css b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.css new file mode 100644 index 00000000000..aae49c515d9 --- /dev/null +++ b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.css @@ -0,0 +1,113 @@ +@keyframes pulse { + 0% { + transform: scale(0.95); + box-shadow: + 0 0 0 0.1875rem var(--coral-color-accent-background, hsl(204, 59%, 88%)), + 0 0 0 0.375rem var(--coral-color-accent-background, hsl(204, 59%, 88%)); + } + 80% { + transform: scale(1); + box-shadow: + 0 0 0 0.1875rem var(--coral-color-accent-background, hsl(204, 59%, 88%)), + 0 0 0 0.625rem rgba(0, 0, 0, 0); + } + 100% { + transform: scale(0.95); + box-shadow: + 0 0 0 0.1875rem var(--coral-color-accent-background, hsl(204, 59%, 88%)), + 0 0 0 0 rgba(0, 0, 0, 0); + } +} +.step { + display: flex; + max-width: var(--coral-sizing-xxxl, 13.75rem); + align-items: center; + justify-content: flex-end; + z-index: 1; +} +.step[data-index]::before { + content: attr(data-index) '. '; + margin-right: var(--coral-spacing-xxs, 0.25rem); +} +.step__title { + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + margin-right: var(--coral-spacing-s, 0.75rem); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.step__icon { + flex-shrink: 0; + display: block; + height: var(--coral-sizing-xxxs, 1rem); + width: var(--coral-sizing-xxxs, 1rem); + border-radius: var(--coral-radius-round, 6249.9375rem); + position: relative; + z-index: 2; +} +.step__icon .tc-svg-icon { + margin-left: var(--coral-spacing-xxs, 0.25rem); + margin-top: var(--coral-spacing-xxs, 0.25rem); + background: var(--coral-color-neutral-background, white); + border-radius: var(--coral-radius-round, 6249.9375rem); + height: var(--coral-sizing-m, 2.25rem); + width: var(--coral-sizing-m, 2.25rem); +} +.step_enabled .step__icon { + background: var(--coral-color-neutral-background, white); + border: var(--coral-border-m-solid, 2px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); +} +.step_progress { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.step_progress .step__icon { + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); + box-shadow: 0 0 0 0.1875rem var(--coral-color-accent-background, hsl(204, 59%, 88%)); + z-index: 1; + transform: scale(1); + animation: pulse 2s 0.2s infinite; +} +.step_disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); + cursor: not-allowed; +} +.step_disabled::before, +.step_disabled .step__title { + opacity: var(--coral-opacity-m, 0.4); +} +.step_disabled .step__icon { + background: var(--coral-color-neutral-background-disabled, hsl(0, 0%, 88%)); +} +.step_validated .step__icon { + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); +} +.step_error { + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.step_error .step__icon { + background: var(--coral-color-danger-background-strong, hsl(359, 51%, 53%)); +} +.step_vertical { + padding-top: var(--coral-spacing-l, 1.75rem); + position: relative; + width: 12.5rem; + align-items: center; + justify-content: center; +} +.step_vertical .step__icon { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); +} +.step_vertical:not(:last-child) { + margin-bottom: 0; +} + +.stepWrapper { + max-width: var(--coral-sizing-xxxl, 13.75rem); + display: flex; + justify-content: flex-end; + align-items: stretch; +} diff --git a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss deleted file mode 100644 index e68e6c9b740..00000000000 --- a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss +++ /dev/null @@ -1,131 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -@keyframes pulse { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0.1875rem tokens.$coral-color-accent-background, 0 0 0 0.375rem tokens.$coral-color-accent-background; - } - - 80% { - transform: scale(1); - box-shadow: 0 0 0 0.1875rem tokens.$coral-color-accent-background, 0 0 0 0.625rem rgba(0, 0, 0, 0); - } - - 100% { - transform: scale(0.95); - box-shadow: 0 0 0 0.1875rem tokens.$coral-color-accent-background, 0 0 0 0 rgba(0, 0, 0, 0); - } -} - -.step { - display: flex; - max-width: tokens.$coral-sizing-xxxl; - align-items: center; - justify-content: flex-end; - z-index: 1; - - &[data-index]::before { - content: attr(data-index) '. '; - margin-right: tokens.$coral-spacing-xxs; - } - - &__title { - font: tokens.$coral-paragraph-m; - margin-right: tokens.$coral-spacing-s; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__icon { - flex-shrink: 0; - display: block; - height: tokens.$coral-sizing-xxxs; - width: tokens.$coral-sizing-xxxs; - border-radius: tokens.$coral-radius-round; - position: relative; - z-index: 2; - - .tc-svg-icon { - margin-left: tokens.$coral-spacing-xxs; - margin-top: tokens.$coral-spacing-xxs; - background: tokens.$coral-color-neutral-background; - border-radius: tokens.$coral-radius-round; - height: tokens.$coral-sizing-m; - width: tokens.$coral-sizing-m; - } - } - - &_enabled { - .step__icon { - background: tokens.$coral-color-neutral-background; - border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border; - } - } - - &_progress { - color: tokens.$coral-color-accent-text; - - .step__icon { - background: tokens.$coral-color-accent-background-strong; - box-shadow: 0 0 0 0.1875rem tokens.$coral-color-accent-background; - z-index: 1; - transform: scale(1); - animation: pulse 2s 0.2s infinite; - } - } - - &_disabled { - color: tokens.$coral-color-neutral-text-disabled; - cursor: not-allowed; - - &::before, - .step__title { - opacity: tokens.$coral-opacity-m; - } - - .step__icon { - background: tokens.$coral-color-neutral-background-disabled; - } - } - - &_validated { - .step__icon { - background: tokens.$coral-color-accent-background-strong; - } - } - - &_error { - color: tokens.$coral-color-danger-text; - - .step__icon { - background: tokens.$coral-color-danger-background-strong; - } - } - - &_vertical { - padding-top: tokens.$coral-spacing-l; - position: relative; - width: 12.5rem; - align-items: center; - justify-content: center; - - .step__icon { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - } - - &:not(:last-child) { - margin-bottom: 0; - } - } -} - -.stepWrapper { - max-width: tokens.$coral-sizing-xxxl; - display: flex; - justify-content: flex-end; - align-items: stretch; -} diff --git a/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx b/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx index 0e6bc079e6c..6b178c91236 100644 --- a/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx +++ b/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx @@ -2,7 +2,7 @@ import { forwardRef, ReactElement, Ref } from 'react'; import classnames from 'classnames'; import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip'; -import styles from './Step.module.scss'; +import styles from './Step.module.css'; export type StepStatus = 'disabled' | 'enabled' | 'error' | 'progress' | 'skeleton' | 'validated'; diff --git a/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.css b/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.css new file mode 100644 index 00000000000..acdf8fe8a56 --- /dev/null +++ b/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.css @@ -0,0 +1,16 @@ +.skeleton { + position: relative; + flex-grow: 1; + width: 100%; + max-width: var(--coral-sizing-xxxl, 13.75rem); + display: flex; + justify-content: flex-end; +} +.skeleton > span { + max-width: 7.1875rem; +} +.skeleton_vertical { + margin: 0 auto; + width: 12.5rem; + justify-content: center; +} diff --git a/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.scss b/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.scss deleted file mode 100644 index 2de09ed29c7..00000000000 --- a/packages/design-system/src/components/Stepper/Step/variations/Step.Skeleton.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.skeleton { - position: relative; - flex-grow: 1; - width: 100%; - max-width: tokens.$coral-sizing-xxxl; - display: flex; - justify-content: flex-end; - - > span { - max-width: 7.1875rem; - } - - &_vertical { - margin: 0 auto; - width: 12.5rem; - justify-content: center; - } -} diff --git a/packages/design-system/src/components/Stepper/Step/variations/Step.skeleton.tsx b/packages/design-system/src/components/Stepper/Step/variations/Step.skeleton.tsx index df0195f06ef..5b93e76421f 100644 --- a/packages/design-system/src/components/Stepper/Step/variations/Step.skeleton.tsx +++ b/packages/design-system/src/components/Stepper/Step/variations/Step.skeleton.tsx @@ -2,8 +2,8 @@ import { memo, forwardRef, Ref } from 'react'; import { Skeleton } from '../../../Skeleton'; import classnames from 'classnames'; -import stepStyles from '../Primitive/Step.module.scss'; -import styles from './Step.Skeleton.module.scss'; +import stepStyles from '../Primitive/Step.module.css'; +import styles from './Step.Skeleton.module.css'; type SkeletonProps = { orientation?: 'vertical' | 'horizontal' }; diff --git a/packages/design-system/src/components/Stepper/Stepper.module.css b/packages/design-system/src/components/Stepper/Stepper.module.css new file mode 100644 index 00000000000..9863c353598 --- /dev/null +++ b/packages/design-system/src/components/Stepper/Stepper.module.css @@ -0,0 +1,25 @@ +.stepper { + position: relative; + display: inline-flex; +} +.stepper .stepper__steps { + padding: 0; +} +.stepper_vertical { + justify-content: flex-end; + width: 12.5rem; +} +.stepper_vertical .stepper__steps { + display: flex; + list-style: none; + margin: 0; + padding: 0; + flex-direction: column; + gap: 3.125rem; + width: 100%; +} +.stepper_horizontal .stepper__steps { + display: flex; + flex-flow: row; + width: 100%; +} diff --git a/packages/design-system/src/components/Stepper/Stepper.module.scss b/packages/design-system/src/components/Stepper/Stepper.module.scss deleted file mode 100644 index fc67f543ee2..00000000000 --- a/packages/design-system/src/components/Stepper/Stepper.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - - -.stepper { - position: relative; - display: inline-flex; - - .stepper__steps { - padding: 0; - } - - &_vertical { - justify-content: flex-end; - width: 12.5rem; - - .stepper__steps { - display: flex; - list-style: none; - margin: 0; - padding: 0; - flex-direction: column; - gap: 3.125rem; - width: 100%; - } - } - - &_horizontal { - .stepper__steps { - display: flex; - flex-flow: row; - width: 100%; - } - } - -} diff --git a/packages/design-system/src/components/Stepper/Stepper.tsx b/packages/design-system/src/components/Stepper/Stepper.tsx index e89a0e02531..2fc008c61f3 100644 --- a/packages/design-system/src/components/Stepper/Stepper.tsx +++ b/packages/design-system/src/components/Stepper/Stepper.tsx @@ -5,7 +5,7 @@ import { isElement } from 'react-is'; import ProgressHorizontal from './Progress/variations/Progress.horizontal'; import ProgressVertical from './Progress/variations/Progress.vertical'; -import styles from './Stepper.module.scss'; +import styles from './Stepper.module.css'; export type StepperOrientation = 'horizontal' | 'vertical'; diff --git a/packages/design-system/src/components/Switch/Switch.module.css b/packages/design-system/src/components/Switch/Switch.module.css new file mode 100644 index 00000000000..5f2717588a2 --- /dev/null +++ b/packages/design-system/src/components/Switch/Switch.module.css @@ -0,0 +1,64 @@ +.switch .container { + position: relative; + display: inline-flex; + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); + border-radius: 6.25rem; + box-shadow: inset 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.25); + overflow: hidden; +} +.switch .container:hover .switchIndicator em { + background-color: var(--coral-color-accent-background-active, hsl(204, 60%, 63%)); +} +.switch .container > .btn { + position: relative; + display: flex; + align-items: center; + justify-content: space-around; + margin: 0; + padding: 0 0.625rem; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); + opacity: var(--coral-opacity-m, 0.4); + user-select: none; + cursor: pointer; + background: none; + border: none; + z-index: var(--coral-elevation-layer-interactive-front, 8); +} +.switch .container > .btn[aria-checked='true'] { + color: var(--coral-color-accent-text-weak, white); + opacity: 1; +} +.switch .container > .btn[aria-checked] ~ .switchIndicator { + visibility: hidden; +} +.switch .container > .btn[aria-checked='true'] ~ .switchIndicator { + visibility: visible; +} +.switch .switchIndicator { + position: absolute; + top: 0; + left: 0; + width: 0; + bottom: 0; + z-index: var(--coral-elevation-layer-standard-front, 4); +} +.switch .switchIndicator[data-animated='true'] { + transition: var(--coral-transition-fast, 250ms ease-in-out); +} +.switch .switchIndicator em { + position: absolute; + top: 0.125rem; + right: 0.125rem; + bottom: 0.125rem; + left: 0.125rem; + transition: background 0.3s; + background: var(--coral-color-accent-background-strong, hsl(204, 95%, 31%)); + border-radius: 100px; +} +.switch.readOnly div .btn[aria-checked] { + transition: color var(--coral-transition-normal, 300ms ease-in-out); +} +.switch.disabled div { + opacity: var(--coral-opacity-m, 0.4); +} diff --git a/packages/design-system/src/components/Switch/Switch.module.scss b/packages/design-system/src/components/Switch/Switch.module.scss deleted file mode 100644 index be34465c654..00000000000 --- a/packages/design-system/src/components/Switch/Switch.module.scss +++ /dev/null @@ -1,78 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.switch { - .container { - position: relative; - display: inline-flex; - background: tokens.$coral-color-neutral-background-strong; - border-radius: 6.25rem; - box-shadow: inset 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.25); - overflow: hidden; - - &:hover .switchIndicator em { - background-color: tokens.$coral-color-accent-background-active; - } - - > .btn { - position: relative; - display: flex; - align-items: center; - justify-content: space-around; - margin: 0; - padding: 0 0.625rem; - color: tokens.$coral-color-neutral-text; - font: tokens.$coral-paragraph-s; - opacity: tokens.$coral-opacity-m; - user-select: none; - cursor: pointer; - background: none; - border: none; - z-index: tokens.$coral-elevation-layer-interactive-front; - - &[aria-checked='true'] { - color: tokens.$coral-color-accent-text-weak; - opacity: 1; - } - - &[aria-checked] ~ .switchIndicator { - visibility: hidden; - } - - &[aria-checked='true'] ~ .switchIndicator { - visibility: visible; - } - } - } - - .switchIndicator { - position: absolute; - top: 0; - left: 0; - width: 0; - bottom: 0; - z-index: tokens.$coral-elevation-layer-standard-front; - - &[data-animated='true'] { - transition: tokens.$coral-transition-fast; - } - } - - .switchIndicator em { - position: absolute; - top: 0.125rem; - right: 0.125rem; - bottom: 0.125rem; - left: 0.125rem; - transition: background 0.3s; - background: tokens.$coral-color-accent-background-strong; - border-radius: 100px; - } - - &.readOnly div .btn[aria-checked] { - transition: color tokens.$coral-transition-normal; - } - - &.disabled div { - opacity: tokens.$coral-opacity-m; - } -} diff --git a/packages/design-system/src/components/Switch/Switch.tsx b/packages/design-system/src/components/Switch/Switch.tsx index 15033d7e59e..dd04a93b781 100644 --- a/packages/design-system/src/components/Switch/Switch.tsx +++ b/packages/design-system/src/components/Switch/Switch.tsx @@ -5,7 +5,7 @@ import classnames from 'classnames'; import { randomUUID } from '@talend/utils'; -import theme from './Switch.module.scss'; +import theme from './Switch.module.css'; const emptyValues: string[] = []; diff --git a/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx b/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx index 09117e05097..f63a80cb8ec 100644 --- a/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { TabsInternalContext } from './TabsProvider'; -import style from './TabStyles.module.scss'; +import style from './TabStyles.module.css'; export type TabPanelPropTypes = { id: string; diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.css b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.css new file mode 100644 index 00000000000..69c01907280 --- /dev/null +++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.css @@ -0,0 +1,112 @@ +.tablist { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + flex-flow: row; + flex-wrap: nowrap; + align-items: flex-start; + justify-content: flex-start; + row-gap: var(--coral-spacing-m, 1rem); + column-gap: var(--coral-spacing-m, 1rem); +} + +.tabpanel { + width: 100%; + height: 100%; +} +.tabpanel--hidden { + display: none; +} + +.tab { + font: var(--coral-heading-s, 600 0.875rem/140% 'Source Sans Pro'); + height: var(--coral-sizing-xs, 1.5rem); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + position: relative; + display: inline-flex; + justify-content: flex-start; + align-items: flex-start; + background: transparent; + border: 0; + padding: 0; + margin: 0; + transition: var(--coral-transition-fast, 250ms ease-in-out); + text-decoration: none; +} +.tab__copy { + max-width: var(--coral-sizing-xxxl, 13.75rem); + text-overflow: ellipsis; + min-width: 0; + overflow: hidden; + text-align: left; + display: inline-block; + white-space: nowrap; + text-transform: capitalize; +} +.tab > svg { + color: var(--coral-color-neutral-icon-weak, hsl(0, 0%, 38%)); +} +.tab::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border-top: var(--coral-border-m-solid, 2px solid) + var(--coral-color-accent-border, hsl(204, 95%, 31%)); + opacity: 0; + transition: var(--coral-transition-fast, 250ms ease-in-out); + transform: translateY(100%); +} +.tab[aria-selected='true'] { + color: var(--coral-color-accent-text, hsl(204, 95%, 31%)); +} +.tab[aria-selected='true'] > svg { + color: var(--coral-color-accent-icon, hsl(204, 88%, 40%)); +} +.tab[aria-selected='true']::after { + opacity: 1; + transform: translateY(0%); +} +.tab:hover { + color: var(--coral-color-accent-text-hover, hsl(204, 96%, 18%)); + text-decoration: none; +} +.tab:hover > svg { + color: var(--coral-color-accent-icon-hover, hsl(204, 88%, 30%)); +} +.tab:active { + color: var(--coral-color-accent-text-active, hsl(205, 94%, 13%)); +} +.tab:active > svg { + color: var(--coral-color-accent-icon-active, hsl(205, 88%, 20%)); +} +.tab_large { + font: var(--coral-heading-l, 600 1.125rem/140% 'Source Sans Pro'); + height: var(--coral-sizing-s, 1.75rem); +} +.tab_large:not(:last-of-type) { + margin-right: var(--coral-spacing-s, 0.75rem); +} +.tab_error { + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.tab_error[aria-selected='true'] { + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.tab_error::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border-top: var(--coral-border-m-solid, 2px solid) + var(--coral-color-danger-text, hsl(359, 51%, 53%)); + opacity: 0; + transition: var(--coral-transition-fast, 250ms ease-in-out); + transform: translateY(100%); +} +.tab .statusDot { + align-self: flex-start; +} diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss deleted file mode 100644 index 96257440163..00000000000 --- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss +++ /dev/null @@ -1,129 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tablist { - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - flex-flow: row; - flex-wrap: nowrap; - align-items: flex-start; - justify-content: flex-start; - row-gap: var(--coral-spacing-m, 1rem); - column-gap: var(--coral-spacing-m, 1rem); -} - -.tabpanel { - width: 100%; - height: 100%; - - &--hidden { - display: none; - } -} - -.tab { - font: tokens.$coral-heading-s; - height: tokens.$coral-sizing-xs; - color: tokens.$coral-color-neutral-text-weak; - position: relative; - display: inline-flex; - justify-content: flex-start; - align-items: flex-start; - background: transparent; - border: 0; - padding: 0; - margin: 0; - transition: tokens.$coral-transition-fast; - text-decoration: none; - - &__copy { - max-width: tokens.$coral-sizing-xxxl; - text-overflow: ellipsis; - min-width: 0; - overflow: hidden; - text-align: left; - display: inline-block; - white-space: nowrap; - text-transform: capitalize; - } - - > svg { - color: tokens.$coral-color-neutral-icon-weak; - } - - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - border-top: tokens.$coral-border-m-solid tokens.$coral-color-accent-border; - opacity: 0; - transition: tokens.$coral-transition-fast; - transform: translateY(100%); - } - - &[aria-selected='true'] { - color: tokens.$coral-color-accent-text; - - > svg { - color: tokens.$coral-color-accent-icon; - } - - &::after { - opacity: 1; - transform: translateY(0%); - } - } - - &:hover { - color: tokens.$coral-color-accent-text-hover; - text-decoration: none; - - > svg { - color: tokens.$coral-color-accent-icon-hover; - } - } - - &:active { - color: tokens.$coral-color-accent-text-active; - - > svg { - color: tokens.$coral-color-accent-icon-active; - } - } - - &_large { - font: tokens.$coral-heading-l; - height: tokens.$coral-sizing-s; - - &:not(:last-of-type) { - margin-right: tokens.$coral-spacing-s; - } - } - - &_error { - color: tokens.$coral-color-danger-text; - - &[aria-selected='true'] { - color: tokens.$coral-color-danger-text; - } - } - - &_error::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - border-top: tokens.$coral-border-m-solid tokens.$coral-color-danger-text; - opacity: 0; - transition: tokens.$coral-transition-fast; - transform: translateY(100%); - } - - .statusDot { - align-self: flex-start; - } -} diff --git a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx index de0f253fab9..5aec9010e87 100644 --- a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx @@ -11,7 +11,7 @@ import { TagDefault } from '../../Tag'; import { Tooltip } from '../../Tooltip'; import { TabsInternalContext } from './TabsProvider'; -import style from './TabStyles.module.scss'; +import style from './TabStyles.module.css'; export type TabsPropTypes = { children: React.ReactNode[]; diff --git a/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.css b/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.css new file mode 100644 index 00000000000..31bf8ecfa15 --- /dev/null +++ b/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.css @@ -0,0 +1,11 @@ +.tag { + display: inline-block; + padding: 0 var(--coral-spacing-xxs, 0.25rem); + max-width: var(--coral-sizing-maximal, 20rem); + font: var(--coral-paragraph-s-bold, 600 0.75rem/140% 'Source Sans Pro'); + vertical-align: middle; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + border-radius: var(--coral-radius-s, 0.25rem); +} diff --git a/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.scss b/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.scss deleted file mode 100644 index c9d6930271d..00000000000 --- a/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tag { - display: inline-block; - padding: 0 tokens.$coral-spacing-xxs; - max-width: tokens.$coral-sizing-maximal; - font: tokens.$coral-paragraph-s-bold; - vertical-align: middle; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - border-radius: tokens.$coral-radius-s; -} diff --git a/packages/design-system/src/components/Tag/primitive/TagPrimitive.tsx b/packages/design-system/src/components/Tag/primitive/TagPrimitive.tsx index da4eb17b10e..b65ceb484b5 100644 --- a/packages/design-system/src/components/Tag/primitive/TagPrimitive.tsx +++ b/packages/design-system/src/components/Tag/primitive/TagPrimitive.tsx @@ -1,6 +1,6 @@ import { forwardRef, HTMLAttributes, Ref } from 'react'; -import style from './TagPrimitive.module.scss'; +import style from './TagPrimitive.module.css'; export type TagProps = Omit, 'style'>; diff --git a/packages/design-system/src/components/Tag/variations/TagBeta.module.css b/packages/design-system/src/components/Tag/variations/TagBeta.module.css new file mode 100644 index 00000000000..9fe09b1b79d --- /dev/null +++ b/packages/design-system/src/components/Tag/variations/TagBeta.module.css @@ -0,0 +1,4 @@ +.tag { + color: var(--coral-color-beta-text-strong, hsl(281, 58%, 29%)); + background: var(--coral-color-beta-background, hsl(279, 57%, 90%)); +} diff --git a/packages/design-system/src/components/Tag/variations/TagBeta.module.scss b/packages/design-system/src/components/Tag/variations/TagBeta.module.scss deleted file mode 100644 index 48699009bf0..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagBeta.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tag { - color: tokens.$coral-color-beta-text-strong; - background: tokens.$coral-color-beta-background; -} diff --git a/packages/design-system/src/components/Tag/variations/TagBeta.tsx b/packages/design-system/src/components/Tag/variations/TagBeta.tsx index 4f3d235805e..e7e7c927a7c 100644 --- a/packages/design-system/src/components/Tag/variations/TagBeta.tsx +++ b/packages/design-system/src/components/Tag/variations/TagBeta.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import TagPrimitive, { TagProps as PrimitiveTagProps } from '../primitive'; -import style from './TagBeta.module.scss'; +import style from './TagBeta.module.css'; type TagProps = Omit; diff --git a/packages/design-system/src/components/Tag/variations/TagDefault.module.css b/packages/design-system/src/components/Tag/variations/TagDefault.module.css new file mode 100644 index 00000000000..37cd09b97af --- /dev/null +++ b/packages/design-system/src/components/Tag/variations/TagDefault.module.css @@ -0,0 +1,4 @@ +.tag { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + background: var(--coral-color-neutral-background-strong, hsl(0, 0%, 88%)); +} diff --git a/packages/design-system/src/components/Tag/variations/TagDefault.module.scss b/packages/design-system/src/components/Tag/variations/TagDefault.module.scss deleted file mode 100644 index 1257761b864..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagDefault.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tag { - color: tokens.$coral-color-neutral-text; - background: tokens.$coral-color-neutral-background-strong; -} diff --git a/packages/design-system/src/components/Tag/variations/TagDefault.tsx b/packages/design-system/src/components/Tag/variations/TagDefault.tsx index 0833195a1cc..91b9f9a8526 100644 --- a/packages/design-system/src/components/Tag/variations/TagDefault.tsx +++ b/packages/design-system/src/components/Tag/variations/TagDefault.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import TagPrimitive, { TagProps as PrimitiveTagProps } from '../primitive'; -import style from './TagDefault.module.scss'; +import style from './TagDefault.module.css'; type TagProps = Omit; diff --git a/packages/design-system/src/components/Tag/variations/TagDestructive.module.css b/packages/design-system/src/components/Tag/variations/TagDestructive.module.css new file mode 100644 index 00000000000..976299ddd82 --- /dev/null +++ b/packages/design-system/src/components/Tag/variations/TagDestructive.module.css @@ -0,0 +1,4 @@ +.tag { + color: var(--coral-color-danger-text-strong, hsl(359, 47%, 44%)); + background: var(--coral-color-danger-background, hsl(0, 100%, 96%)); +} diff --git a/packages/design-system/src/components/Tag/variations/TagDestructive.module.scss b/packages/design-system/src/components/Tag/variations/TagDestructive.module.scss deleted file mode 100644 index 53bacdbcaf0..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagDestructive.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tag { - color: tokens.$coral-color-danger-text-strong; - background: tokens.$coral-color-danger-background; -} diff --git a/packages/design-system/src/components/Tag/variations/TagDestructive.tsx b/packages/design-system/src/components/Tag/variations/TagDestructive.tsx index cea2e124e7b..9a8195b6a21 100644 --- a/packages/design-system/src/components/Tag/variations/TagDestructive.tsx +++ b/packages/design-system/src/components/Tag/variations/TagDestructive.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import TagPrimitive, { TagProps as PrimitiveTagProps } from '../primitive'; -import style from './TagDestructive.module.scss'; +import style from './TagDestructive.module.css'; type TagProps = Omit; diff --git a/packages/design-system/src/components/Tag/variations/TagInformation.module.css b/packages/design-system/src/components/Tag/variations/TagInformation.module.css new file mode 100644 index 00000000000..ec1fc11057c --- /dev/null +++ b/packages/design-system/src/components/Tag/variations/TagInformation.module.css @@ -0,0 +1,4 @@ +.tag { + color: var(--coral-color-info-text-strong, hsl(204, 96%, 18%)); + background: var(--coral-color-info-background, hsl(204, 59%, 88%)); +} diff --git a/packages/design-system/src/components/Tag/variations/TagInformation.module.scss b/packages/design-system/src/components/Tag/variations/TagInformation.module.scss deleted file mode 100644 index c54f46a6636..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagInformation.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tag { - color: tokens.$coral-color-info-text-strong; - background: tokens.$coral-color-info-background; -} diff --git a/packages/design-system/src/components/Tag/variations/TagInformation.tsx b/packages/design-system/src/components/Tag/variations/TagInformation.tsx index efbb51ab700..d3f26c4dd3a 100644 --- a/packages/design-system/src/components/Tag/variations/TagInformation.tsx +++ b/packages/design-system/src/components/Tag/variations/TagInformation.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import TagPrimitive, { TagProps as PrimitiveTagProps } from '../primitive'; -import style from './TagInformation.module.scss'; +import style from './TagInformation.module.css'; type TagProps = Omit; diff --git a/packages/design-system/src/components/Tag/variations/TagSuccess.module.css b/packages/design-system/src/components/Tag/variations/TagSuccess.module.css new file mode 100644 index 00000000000..459a7d69243 --- /dev/null +++ b/packages/design-system/src/components/Tag/variations/TagSuccess.module.css @@ -0,0 +1,4 @@ +.tag { + color: var(--coral-color-success-text-strong, hsl(111, 49%, 29%)); + background: var(--coral-color-success-background, hsl(110, 49%, 90%)); +} diff --git a/packages/design-system/src/components/Tag/variations/TagSuccess.module.scss b/packages/design-system/src/components/Tag/variations/TagSuccess.module.scss deleted file mode 100644 index 67831ace76d..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagSuccess.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tag { - color: tokens.$coral-color-success-text-strong; - background: tokens.$coral-color-success-background; -} diff --git a/packages/design-system/src/components/Tag/variations/TagSuccess.tsx b/packages/design-system/src/components/Tag/variations/TagSuccess.tsx index 0620485ce0e..685d60513c1 100644 --- a/packages/design-system/src/components/Tag/variations/TagSuccess.tsx +++ b/packages/design-system/src/components/Tag/variations/TagSuccess.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import TagPrimitive, { TagProps as PrimitiveTagProps } from '../primitive'; -import style from './TagSuccess.module.scss'; +import style from './TagSuccess.module.css'; type TagProps = Omit; diff --git a/packages/design-system/src/components/Tag/variations/TagWarning.module.css b/packages/design-system/src/components/Tag/variations/TagWarning.module.css new file mode 100644 index 00000000000..57fbad270d8 --- /dev/null +++ b/packages/design-system/src/components/Tag/variations/TagWarning.module.css @@ -0,0 +1,4 @@ +.tag { + color: var(--coral-color-warning-text-strong, hsl(22, 86%, 27%)); + background: var(--coral-color-warning-background, hsl(22, 85%, 92%)); +} diff --git a/packages/design-system/src/components/Tag/variations/TagWarning.module.scss b/packages/design-system/src/components/Tag/variations/TagWarning.module.scss deleted file mode 100644 index 21e9e219068..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagWarning.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tag { - color: tokens.$coral-color-warning-text-strong; - background: tokens.$coral-color-warning-background; -} diff --git a/packages/design-system/src/components/Tag/variations/TagWarning.tsx b/packages/design-system/src/components/Tag/variations/TagWarning.tsx index d0a000e2a90..7c1a1214ca5 100644 --- a/packages/design-system/src/components/Tag/variations/TagWarning.tsx +++ b/packages/design-system/src/components/Tag/variations/TagWarning.tsx @@ -2,7 +2,7 @@ import { forwardRef, Ref } from 'react'; import TagPrimitive, { TagProps as PrimitiveTagProps } from '../primitive'; -import style from './TagWarning.module.scss'; +import style from './TagWarning.module.css'; type TagProps = Omit; diff --git a/packages/design-system/src/components/ThemeProvider/ThemeProvider.css b/packages/design-system/src/components/ThemeProvider/ThemeProvider.css new file mode 100644 index 00000000000..dda53ad6082 --- /dev/null +++ b/packages/design-system/src/components/ThemeProvider/ThemeProvider.css @@ -0,0 +1,25 @@ +body { + margin: 0; + padding: 0; + font: var(--coral-paragraph-m, 400 0.875rem/140% "Source Sans Pro"); + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + background-color: var(--coral-color-neutral-background, white); +} + +a { + text-decoration: none; +} + +[role=list] { + margin: 0; + padding: 0; +} + +.focus-outline-hidden *:focus { + outline: none; +} + +::selection { + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + background-color: var(--coral-color-accent-background-selected, hsl(204, 100%, 95%)); +} \ No newline at end of file diff --git a/packages/design-system/src/components/ThemeProvider/ThemeProvider.scss b/packages/design-system/src/components/ThemeProvider/ThemeProvider.scss deleted file mode 100644 index 816eed0096a..00000000000 --- a/packages/design-system/src/components/ThemeProvider/ThemeProvider.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -body { - margin: 0; - padding: 0; - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-text; - background-color: tokens.$coral-color-neutral-background; -} - -a { - text-decoration: none; -} - -[role='list'] { - margin: 0; - padding: 0; -} - -.focus-outline-hidden *:focus { - outline: none; -} - -::selection { - color: tokens.$coral-color-neutral-text; - background-color: tokens.$coral-color-accent-background-selected; -} diff --git a/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx b/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx index 1cf2c0b153f..5787f65a53f 100644 --- a/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx +++ b/packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx @@ -9,7 +9,7 @@ import '@talend/design-tokens/dist/TalendDesignTokens.css'; import ThemeContext from './ThemeContext'; -import './ThemeProvider.scss'; +import './ThemeProvider.css'; export type ThemeProviderProps = PropsWithChildren<{ theme?: string; diff --git a/packages/design-system/src/components/Tooltip/Tooltip.module.css b/packages/design-system/src/components/Tooltip/Tooltip.module.css new file mode 100644 index 00000000000..b1143075531 --- /dev/null +++ b/packages/design-system/src/components/Tooltip/Tooltip.module.css @@ -0,0 +1,17 @@ +.container { + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-xs, 0.5rem); + max-width: var(--coral-sizing-maximal, 20rem); + font: var(--coral-paragraph-s, 400 0.75rem/140% 'Source Sans Pro'); + color: var(--coral-color-assistive-text, white); + background: var(--coral-color-assistive-background, hsl(210, 62%, 5%)); + border-radius: var(--coral-radius-s, 0.25rem); + transition: opacity var(--coral-transition-fast, 250ms ease-in-out); + opacity: 1; +} + +.arrow { + fill: var(--coral-color-assistive-background, hsl(210, 62%, 5%)); +} +.arrow :global(.stroke) { + display: none; +} diff --git a/packages/design-system/src/components/Tooltip/Tooltip.module.scss b/packages/design-system/src/components/Tooltip/Tooltip.module.scss deleted file mode 100644 index 35353c1911e..00000000000 --- a/packages/design-system/src/components/Tooltip/Tooltip.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.container { - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs; - max-width: tokens.$coral-sizing-maximal; - font: tokens.$coral-paragraph-s; - color: tokens.$coral-color-assistive-text; - background: tokens.$coral-color-assistive-background; - border-radius: tokens.$coral-radius-s; - transition: opacity tokens.$coral-transition-fast; - opacity: 1; -} - -.arrow { - fill: tokens.$coral-color-assistive-background; - - :global(.stroke) { - display: none; - } -} diff --git a/packages/design-system/src/components/Tooltip/Tooltip.tsx b/packages/design-system/src/components/Tooltip/Tooltip.tsx index e1933e4bea3..9770e3e868d 100644 --- a/packages/design-system/src/components/Tooltip/Tooltip.tsx +++ b/packages/design-system/src/components/Tooltip/Tooltip.tsx @@ -22,7 +22,7 @@ import { import { ChildOrGenerator, renderOrClone } from '../../renderOrClone'; import { useId } from '../../useId'; -import styles from './Tooltip.module.scss'; +import styles from './Tooltip.module.css'; export type Placement = | 'top-start' diff --git a/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.scss b/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.css similarity index 100% rename from packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.scss rename to packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.css diff --git a/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.tsx index 6378f084cd1..ed125d72a63 100644 --- a/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.tsx +++ b/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.tsx @@ -1,5 +1,5 @@ import { HTMLAttributes } from 'react'; -import style from './VisuallyHidden.module.scss'; +import style from './VisuallyHidden.module.css'; export type VisuallyHiddenProps = Omit, 'className'>; diff --git a/packages/design-system/src/components/illustrations/IconActivity.tsx b/packages/design-system/src/components/illustrations/IconActivity.tsx index 0578e71b102..77e138ee4e4 100644 --- a/packages/design-system/src/components/illustrations/IconActivity.tsx +++ b/packages/design-system/src/components/illustrations/IconActivity.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconActivity() { return ( diff --git a/packages/design-system/src/components/illustrations/IconChart.tsx b/packages/design-system/src/components/illustrations/IconChart.tsx index 35e5329f76d..f5d60f929a2 100644 --- a/packages/design-system/src/components/illustrations/IconChart.tsx +++ b/packages/design-system/src/components/illustrations/IconChart.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconChart() { return ( diff --git a/packages/design-system/src/components/illustrations/IconChecklist.tsx b/packages/design-system/src/components/illustrations/IconChecklist.tsx index aa0bb3a9561..e9819d08fc8 100644 --- a/packages/design-system/src/components/illustrations/IconChecklist.tsx +++ b/packages/design-system/src/components/illustrations/IconChecklist.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconChecklist() { return ( diff --git a/packages/design-system/src/components/illustrations/IconDefault.module.css b/packages/design-system/src/components/illustrations/IconDefault.module.css new file mode 100644 index 00000000000..daa716c2011 --- /dev/null +++ b/packages/design-system/src/components/illustrations/IconDefault.module.css @@ -0,0 +1,4 @@ +.mediumIllustration { + width: var(--coral-sizing-l, 2.5rem); + height: var(--coral-sizing-l, 2.5rem); +} diff --git a/packages/design-system/src/components/illustrations/IconDefault.module.scss b/packages/design-system/src/components/illustrations/IconDefault.module.scss deleted file mode 100644 index b2731610a0a..00000000000 --- a/packages/design-system/src/components/illustrations/IconDefault.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.mediumIllustration { - width: tokens.$coral-sizing-l; - height: tokens.$coral-sizing-l; -} diff --git a/packages/design-system/src/components/illustrations/IconDefault.tsx b/packages/design-system/src/components/illustrations/IconDefault.tsx index 586217e839a..edbfbfd1735 100644 --- a/packages/design-system/src/components/illustrations/IconDefault.tsx +++ b/packages/design-system/src/components/illustrations/IconDefault.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconDefault() { return ( diff --git a/packages/design-system/src/components/illustrations/IconDocument.tsx b/packages/design-system/src/components/illustrations/IconDocument.tsx index de2f5496847..9c09d9710bc 100644 --- a/packages/design-system/src/components/illustrations/IconDocument.tsx +++ b/packages/design-system/src/components/illustrations/IconDocument.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconDocument() { return ( diff --git a/packages/design-system/src/components/illustrations/IconFlask.tsx b/packages/design-system/src/components/illustrations/IconFlask.tsx index b12e1cec282..b9a66dd9ce8 100644 --- a/packages/design-system/src/components/illustrations/IconFlask.tsx +++ b/packages/design-system/src/components/illustrations/IconFlask.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconFlask() { return ( diff --git a/packages/design-system/src/components/illustrations/IconInProgress.tsx b/packages/design-system/src/components/illustrations/IconInProgress.tsx index 5a1ebaa7b49..28c77ebec24 100644 --- a/packages/design-system/src/components/illustrations/IconInProgress.tsx +++ b/packages/design-system/src/components/illustrations/IconInProgress.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconInProgress() { return ( diff --git a/packages/design-system/src/components/illustrations/IconLightBulb.tsx b/packages/design-system/src/components/illustrations/IconLightBulb.tsx index 39cb2d9be93..534b517afc9 100644 --- a/packages/design-system/src/components/illustrations/IconLightBulb.tsx +++ b/packages/design-system/src/components/illustrations/IconLightBulb.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconLightBulb() { return ( diff --git a/packages/design-system/src/components/illustrations/IconMessage.tsx b/packages/design-system/src/components/illustrations/IconMessage.tsx index d407c19a859..98967ce291b 100644 --- a/packages/design-system/src/components/illustrations/IconMessage.tsx +++ b/packages/design-system/src/components/illustrations/IconMessage.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconMessage() { return ( diff --git a/packages/design-system/src/components/illustrations/IconPlug.tsx b/packages/design-system/src/components/illustrations/IconPlug.tsx index 18a27067d18..a8c085f6301 100644 --- a/packages/design-system/src/components/illustrations/IconPlug.tsx +++ b/packages/design-system/src/components/illustrations/IconPlug.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconPlug() { return ( diff --git a/packages/design-system/src/components/illustrations/IconRocket.tsx b/packages/design-system/src/components/illustrations/IconRocket.tsx index 1f042309e0d..1f9fe1c9651 100644 --- a/packages/design-system/src/components/illustrations/IconRocket.tsx +++ b/packages/design-system/src/components/illustrations/IconRocket.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconRocket() { return ( diff --git a/packages/design-system/src/components/illustrations/IconSearch.tsx b/packages/design-system/src/components/illustrations/IconSearch.tsx index 905426948c6..d5ee497ded2 100644 --- a/packages/design-system/src/components/illustrations/IconSearch.tsx +++ b/packages/design-system/src/components/illustrations/IconSearch.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconSearch() { return ( diff --git a/packages/design-system/src/components/illustrations/IconSettings.tsx b/packages/design-system/src/components/illustrations/IconSettings.tsx index 00e96ca26e2..077d17a3ddc 100644 --- a/packages/design-system/src/components/illustrations/IconSettings.tsx +++ b/packages/design-system/src/components/illustrations/IconSettings.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconSettings() { return ( diff --git a/packages/design-system/src/components/illustrations/IconUpdate.tsx b/packages/design-system/src/components/illustrations/IconUpdate.tsx index 8832564bc35..6e9a52ac835 100644 --- a/packages/design-system/src/components/illustrations/IconUpdate.tsx +++ b/packages/design-system/src/components/illustrations/IconUpdate.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconUpdate() { return ( diff --git a/packages/design-system/src/components/illustrations/IconUser.tsx b/packages/design-system/src/components/illustrations/IconUser.tsx index e0aeb1543ad..562218ab5b6 100644 --- a/packages/design-system/src/components/illustrations/IconUser.tsx +++ b/packages/design-system/src/components/illustrations/IconUser.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconUser() { return ( diff --git a/packages/design-system/src/components/illustrations/IconWarning.tsx b/packages/design-system/src/components/illustrations/IconWarning.tsx index fc794bc08b4..2bc5da02cb8 100644 --- a/packages/design-system/src/components/illustrations/IconWarning.tsx +++ b/packages/design-system/src/components/illustrations/IconWarning.tsx @@ -1,4 +1,4 @@ -import styles from './IconDefault.module.scss'; +import styles from './IconDefault.module.css'; export function IconWarning() { return ( diff --git a/packages/design-system/src/components/illustrations/SpotDefault.module.css b/packages/design-system/src/components/illustrations/SpotDefault.module.css new file mode 100644 index 00000000000..9c55fb9b8b3 --- /dev/null +++ b/packages/design-system/src/components/illustrations/SpotDefault.module.css @@ -0,0 +1,4 @@ +.largeIllustration { + width: var(--coral-sizing-maximal, 20rem); + height: var(--coral-sizing-xxxl, 13.75rem); +} diff --git a/packages/design-system/src/components/illustrations/SpotDefault.module.scss b/packages/design-system/src/components/illustrations/SpotDefault.module.scss deleted file mode 100644 index 5a563a3e7c9..00000000000 --- a/packages/design-system/src/components/illustrations/SpotDefault.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.largeIllustration { - width: tokens.$coral-sizing-maximal; - height: tokens.$coral-sizing-xxxl; -} diff --git a/packages/design-system/src/components/illustrations/SpotDefault.tsx b/packages/design-system/src/components/illustrations/SpotDefault.tsx index 284dcc17491..387d6f1c082 100644 --- a/packages/design-system/src/components/illustrations/SpotDefault.tsx +++ b/packages/design-system/src/components/illustrations/SpotDefault.tsx @@ -1,4 +1,4 @@ -import styles from './SpotDefault.module.scss'; +import styles from './SpotDefault.module.css'; export default function SpotDefault() { return ( diff --git a/packages/design-system/src/stories/docs/Area.module.scss b/packages/design-system/src/stories/docs/Area.module.css similarity index 53% rename from packages/design-system/src/stories/docs/Area.module.scss rename to packages/design-system/src/stories/docs/Area.module.css index 598ff397b8d..05c2ac357f2 100644 --- a/packages/design-system/src/stories/docs/Area.module.scss +++ b/packages/design-system/src/stories/docs/Area.module.css @@ -1,17 +1,15 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - .area { display: flex; flex-basis: 100%; align-items: center; justify-content: center; - margin: tokens.$coral-spacing-xs tokens.$coral-spacing-m; - padding: tokens.$coral-spacing-xs; + margin: var(--coral-spacing-xs, 0.5rem) var(--coral-spacing-m, 1rem); + padding: var(--coral-spacing-xs, 0.5rem); min-height: 0; font-weight: bold; font-size: 1.25rem; color: coral; background: cornsilk; border: 1px dashed coral; - border-radius: tokens.$coral-radius-s; + border-radius: var(--coral-radius-s, 0.25rem); } diff --git a/packages/design-system/src/stories/docs/Area.tsx b/packages/design-system/src/stories/docs/Area.tsx index 44597b81a9f..e63fe126747 100644 --- a/packages/design-system/src/stories/docs/Area.tsx +++ b/packages/design-system/src/stories/docs/Area.tsx @@ -1,6 +1,6 @@ import { HTMLAttributes } from 'react'; import classnames from 'classnames'; -import styles from './Area.module.scss'; +import styles from './Area.module.css'; export const Area = (props: HTMLAttributes) => { const { children, className, ...rest } = props; diff --git a/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.component.js b/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.component.js index 3d5c8c49704..e37e7d3420f 100644 --- a/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.component.js +++ b/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.component.js @@ -11,7 +11,7 @@ import { badgesFacetedPropTypes } from '../facetedSearch.propTypes'; import { AddFacetPopoverHeader } from './AddFacetPopoverHeader'; import { AddFacetPopoverRowItem, AddFacetPopoverRowItemCategory } from './AddFacetPopoverRow'; -import styles from './AddFacetPopover.module.scss'; +import styles from './AddFacetPopover.module.css'; const filterByLabel = label => row => { const rowLabel = isString(row) ? row : row.properties.label; diff --git a/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.css b/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.css new file mode 100644 index 00000000000..faf35213e1d --- /dev/null +++ b/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.css @@ -0,0 +1,9 @@ +.tc-add-facet-popover { + width: var(--coral-sizing-xxxl, 13.75rem); +} + +.tc-add-facet-popover-items button { + width: 100%; + white-space: break-spaces; + text-align: left; +} diff --git a/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.scss b/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.scss deleted file mode 100644 index e6cc6558722..00000000000 --- a/packages/faceted-search/src/components/AddFacetPopover/AddFacetPopover.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-add-facet-popover { - width: tokens.$coral-sizing-xxxl; -} - -.tc-add-facet-popover-items { - button { - width: 100%; - white-space: break-spaces; - text-align: left; - } -} diff --git a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js index 7afd320a976..7a93a7da16e 100644 --- a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js +++ b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js @@ -10,7 +10,7 @@ import tokens from '@talend/design-tokens'; import { USAGE_TRACKING_TAGS } from '../../constants'; import { useFacetedSearchContext } from '../context/facetedSearch.context'; -import styles from './AdvancedSearch.module.scss'; +import styles from './AdvancedSearch.module.css'; const AdvancedSearchError = ({ id, label }) => (

diff --git a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.css b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.css new file mode 100644 index 00000000000..bc4efa3d41f --- /dev/null +++ b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.css @@ -0,0 +1,36 @@ +.adv-search { + position: relative; + width: inherit; + height: inherit; +} +.adv-search .adv-search-filter-icon { + position: absolute; + z-index: var(--coral-elevation-layer-standard-front, 4); + top: var(--coral-spacing-m, 1rem); + left: var(--coral-spacing-s, 0.75rem); +} +.adv-search-error { + margin-left: var(--coral-spacing-xs, 0.5rem); + color: var(--coral-color-danger-text, hsl(359, 51%, 53%)); +} +.adv-search .adv-search-input { + box-shadow: none; + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); + height: var(--coral-sizing-m, 2.25rem); + line-height: var(--coral-sizing-m, 2.25rem); + margin: var(--coral-spacing-xs, 0.5rem) var(--coral-spacing-xs, 0.5rem); + padding-left: 2rem; + padding-right: 3.75rem; + width: calc(100% - 1.25rem); +} +.adv-search .adv-search-input.has-error { + box-shadow: inset 0 -0.125rem 0 var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.adv-search .adv-search-input::-ms-clear { + display: none; +} +.adv-search-buttons { + position: absolute; + top: var(--coral-spacing-xs, 0.5rem); + right: var(--coral-spacing-m, 1rem); +} diff --git a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss deleted file mode 100644 index c0c53be14a9..00000000000 --- a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss +++ /dev/null @@ -1,49 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$search-icon-offset: 1.125rem; -$search-input-left-offset: 2rem; -$search-input-right-offset: 3.75rem; - -.adv-search { - position: relative; - width: inherit; - height: inherit; - - .adv-search-filter-icon { - position: absolute; - z-index: tokens.$coral-elevation-layer-standard-front; - top: tokens.$coral-spacing-m; - left: tokens.$coral-spacing-s; - } - - &-error { - margin-left: tokens.$coral-spacing-xs; - color: tokens.$coral-color-danger-text; - } - - .adv-search-input { - box-shadow: none; - color: tokens.$coral-color-neutral-text-weak; - height: tokens.$coral-sizing-m; - line-height: tokens.$coral-sizing-m; - margin: tokens.$coral-spacing-xs tokens.$coral-spacing-xs; - padding-left: $search-input-left-offset; - padding-right: $search-input-right-offset; - width: calc(100% - 1.25rem); - - &.has-error { - box-shadow: inset 0 -0.125rem 0 tokens.$coral-color-danger-border; - } - - // sass-lint:disable-next-line no-vendor-prefixes - &::-ms-clear { - display: none; - } - } - - &-buttons { - position: absolute; - top: tokens.$coral-spacing-xs; - right: tokens.$coral-spacing-m; - } -} diff --git a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.css b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.css new file mode 100644 index 00000000000..19957df9558 --- /dev/null +++ b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.css @@ -0,0 +1,5 @@ +.fs-badge-checkbox-form-checkboxes { + max-height: var(--coral-sizing-xxxl, 13.75rem); + width: var(--coral-sizing-maximal, 20rem); + overflow: auto; +} diff --git a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.scss b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.scss deleted file mode 100644 index 9bffcaf289d..00000000000 --- a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.fs-badge-checkbox-form-checkboxes { - max-height: tokens.$coral-sizing-xxxl; - width: tokens.$coral-sizing-maximal; - overflow: auto; -} diff --git a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxesForm.component.js b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxesForm.component.js index f1fb8bf7442..b131b56aaa6 100644 --- a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxesForm.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxesForm.component.js @@ -18,7 +18,7 @@ import { getDataAttrFromProps } from '@talend/utils'; import { I18N_DOMAIN_FACETED_SEARCH } from '../../../constants'; import { getApplyDataFeature } from '../../../helpers/usage.helpers'; -import styles from './BadgeCheckboxes.module.scss'; +import styles from './BadgeCheckboxes.module.css'; const createCheckboxEntity = value => checkbox => { const entity = value.find(v => v.id === checkbox.id); diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.module.scss b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.module.css similarity index 100% rename from packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.module.scss rename to packages/faceted-search/src/components/Badges/BadgeDate/BadgeDate.module.css diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js index c81df4b31ce..cbac2864ba9 100644 --- a/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeDate/BadgeDateForm.component.js @@ -9,7 +9,7 @@ import { getDataAttrFromProps } from '@talend/utils'; import { getApplyDataFeature } from '../../../helpers/usage.helpers'; -import styles from './BadgeDate.module.scss'; +import styles from './BadgeDate.module.css'; const BadgeDateForm = ({ id, onChange, onSubmit, value, feature, t, ...rest }) => { const applyDataFeature = useMemo(() => getApplyDataFeature(feature), [feature]); diff --git a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js index e048b1b95ac..ce5684d5566 100644 --- a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.component.js @@ -14,7 +14,7 @@ import { operatorPropTypes, operatorsPropTypes } from '../../facetedSearch.propT import { BadgeOperatorOverlay } from '../BadgeOperator'; import { BadgeOverlay } from '../BadgeOverlay'; -import styles from './BadgeFaceted.module.scss'; +import styles from './BadgeFaceted.module.css'; const findOperatorByName = name => operator => name === operator.name; diff --git a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.css b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.css new file mode 100644 index 00000000000..e2de07abe42 --- /dev/null +++ b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.css @@ -0,0 +1,42 @@ +.tc-badge-faceted { + padding: var(--coral-spacing-xxs, 0.25rem) var(--coral-spacing-xs, 0.5rem); + max-width: fit-content; +} +.tc-badge-faceted :global(.tc-badge-button) { + max-width: none; +} +.tc-badge-faceted :global(.tc-badge-button:first-child) { + flex-grow: 1; + padding-top: 0; + margin: 0; +} +.tc-badge-faceted :global(.tc-badge-button:first-child) > span { + align-self: center; +} +.tc-badge-faceted :global(.tc-badge-delete-icon) { + align-self: center; +} +.tc-badge-faceted-overlay { + align-items: center; + display: flex; +} +.tc-badge-faceted-overlay > button { + font-style: italic; + height: var(--coral-sizing-xxs, 1.25rem) !important; +} +.tc-badge-faceted-overlay > button > span > span { + white-space: nowrap; + overflow: hidden; + max-width: calc(2 * var(--coral-sizing-l, 2.5rem)); + text-overflow: ellipsis; +} +.tc-badge-faceted-overlay > button > span > span:not(:first-child)::before { + content: '|'; + position: relative; + left: calc(-1 * var(--coral-spacing-xxs, 0.25rem)); + opacity: var(--coral-opacity-m, 0.4); + padding: 0 var(--coral-spacing-xxs, 0.25rem); +} +.tc-badge-faceted:global(.period) .tc-badge-faceted-overlay > button > span > span { + max-width: none; +} diff --git a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss b/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss deleted file mode 100644 index 325bd2f29e9..00000000000 --- a/packages/faceted-search/src/components/Badges/BadgeFaceted/BadgeFaceted.module.scss +++ /dev/null @@ -1,61 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -// stylelint-disable scss/selector-no-redundant-nesting-selector -.tc-badge-faceted { - padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs; - max-width: fit-content; - - :global(.tc-badge-button) { - max-width: none; - } - - :global(.tc-badge-button:first-child) { - flex-grow: 1; - padding-top: 0; - margin: 0; - - > span { - align-self: center; - } - } - - :global(.tc-badge-delete-icon) { - align-self: center; - } - - &-overlay { - align-items: center; - display: flex; - - & > button { - font-style: italic; - height: tokens.$coral-sizing-xxs !important; - - > span > span { - white-space: nowrap; - overflow: hidden; - max-width: calc(2 * tokens.$coral-sizing-l); - text-overflow: ellipsis; - } - - > span > span:not(:first-child)::before { - content: '|'; - position: relative; - left: calc(-1 * tokens.$coral-spacing-xxs); - opacity: tokens.$coral-opacity-m; - padding: 0 tokens.$coral-spacing-xxs; - } - } - } - - - &:global(.period) { - .tc-badge-faceted-overlay { - & > button { - > span > span { - max-width: none; - } - } - } - } -} diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.css b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.css new file mode 100644 index 00000000000..1084e943788 --- /dev/null +++ b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.css @@ -0,0 +1,8 @@ +.fs-badge-menu-form-items { + max-height: var(--coral-sizing-xxxl, 13.75rem); + width: var(--coral-sizing-maximal, 20rem); + overflow: auto; +} +.fs-badge-menu-form-items [role='menuitem'] { + width: 100%; +} diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss deleted file mode 100644 index 7c24b46a00b..00000000000 --- a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.fs-badge-menu-form-items { - max-height: tokens.$coral-sizing-xxxl; - width: tokens.$coral-sizing-maximal; - overflow: auto; - - [role='menuitem'] { - width: 100%; - } -} diff --git a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js index a28b39b2e0b..e38f7159668 100644 --- a/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenuForm.component.js @@ -15,7 +15,7 @@ import { } from '@talend/design-system'; import { getDataAttrFromProps } from '@talend/utils'; -import styles from './BadgeMenu.module.scss'; +import styles from './BadgeMenu.module.css'; const createRowItemEntity = value => option => { return { diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.css b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.css new file mode 100644 index 00000000000..a1b7c629172 --- /dev/null +++ b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.css @@ -0,0 +1,24 @@ +.tc-badge-operator { + align-items: center; + background: var(--coral-color-neutral-background, white); + border-radius: 100%; + display: inline-flex; + justify-content: center; + margin: 0 0 0 var(--coral-spacing-xs, 0.5rem); +} +.tc-badge-operator-small { + height: 1.125rem; +} +.tc-badge-operator-large { + height: 1.375rem; +} +.tc-badge-operator-button { + display: flex; +} +.tc-badge-operator-button > button { + height: var(--coral-sizing-xxs, 1.25rem) !important; +} +.tc-badge-operator-popover { + display: flex; + flex-direction: column; +} diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss deleted file mode 100644 index 98e9f03700d..00000000000 --- a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$circle-size-large: 1.375rem !default; -$circle-size-small: 1.125rem !default; - -.tc-badge-operator { - align-items: center; - background: tokens.$coral-color-neutral-background; - border-radius: 100%; - display: inline-flex; - justify-content: center; - margin: 0 0 0 tokens.$coral-spacing-xs; - - &-small { - height: $circle-size-small; - } - - &-large { - height: $circle-size-large; - } - - &-button { - display: flex; - - > button { - height: tokens.$coral-sizing-xxs !important; - } - } - - &-popover { - display: flex; - flex-direction: column; - } -} diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorOverlay.component.js b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorOverlay.component.js index b5ef554ccea..26956fca026 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorOverlay.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorOverlay.component.js @@ -7,7 +7,7 @@ import { operatorsPropTypes } from '../../facetedSearch.propTypes'; import { BadgeOverlay } from '../BadgeOverlay'; import { BadgeOperatorPopover } from './BadgeOperatorPopover.component'; -import styles from './BadgeOperator.module.scss'; +import styles from './BadgeOperator.module.css'; const BadgeOperatorOverlay = ({ id, diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorPopover.component.js b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorPopover.component.js index ce036725d7a..ae730d512ae 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorPopover.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperatorPopover.component.js @@ -4,7 +4,7 @@ import { ButtonTertiary } from '@talend/design-system'; import { operatorsPropTypes } from '../../facetedSearch.propTypes'; -import styles from './BadgeOperator.module.scss'; +import styles from './BadgeOperator.module.css'; const BadgeOperatorRow = ({ onClick, id, name, label, iconName }) => { const onClickOperatorRow = event => { diff --git a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js index 20e5d06ce32..2708d22c8c0 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import { ButtonTertiary, Popover } from '@talend/design-system'; import { FormatValue, Icon } from '@talend/react-components'; -import styles from './BadgeOverlay.module.scss'; +import styles from './BadgeOverlay.module.css'; const getChildren = (children, setOverlayOpened) => { if (typeof children === 'function') { diff --git a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.module.scss b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.module.css similarity index 53% rename from packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.module.scss rename to packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.module.css index 2d8f922dad2..b5dcdb50399 100644 --- a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.module.scss +++ b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.module.css @@ -1,7 +1,6 @@ .tc-badge-format-value { display: inline-flex; - - svg { - margin: 0; - } +} +.tc-badge-format-value svg { + margin: 0; } diff --git a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.css b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.css new file mode 100644 index 00000000000..998ca8fff3b --- /dev/null +++ b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.css @@ -0,0 +1,32 @@ +.tc-badge-slider-form-body { + width: var(--coral-sizing-maximal, 20rem); +} +.tc-badge-slider-form-body-row { + display: flex; + gap: var(--coral-spacing-s, 0.75rem); + align-items: center; + margin-top: var(--coral-sizing-m, 2.25rem); +} +.tc-badge-slider-form-body-row-icon { + display: inline-flex; + flex: 1 1 45%; + justify-content: flex-end; +} +.tc-badge-slider-form-body-row-icon svg { + width: var(--coral-sizing-l, 2.5rem); + height: var(--coral-sizing-l, 2.5rem); +} +.tc-badge-slider-form-body-row-value { + flex: 1 1 55%; +} +.tc-badge-slider-form-body-row .tc-badge-value-unit { + flex: 1; + font-size: 2rem; + font-weight: 600; + height: 2.9375rem; + margin-bottom: 0; + border: none; + background: none; + padding: 0; + text-align: start; +} diff --git a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss deleted file mode 100644 index c4d49842517..00000000000 --- a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSlider.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -// stylelint-disable property-no-vendor-prefix -.tc-badge-slider-form-body { - width: tokens.$coral-sizing-maximal; - - &-row { - display: flex; - gap: tokens.$coral-spacing-s; - align-items: center; - margin-top: tokens.$coral-sizing-m; - - &-icon { - display: inline-flex; - flex: 1 1 45%; - justify-content: flex-end; - svg { - width: tokens.$coral-sizing-l; - height: tokens.$coral-sizing-l; - } - } - - &-value { - flex: 1 1 55%; - } - - .tc-badge-value-unit { - flex: 1; - font-size: 2rem; - font-weight: 600; - height: 2.9375rem; - margin-bottom: 0; - border: none; - background: none; - padding: 0; - text-align: start; - } - } -} diff --git a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSliderForm.component.js b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSliderForm.component.js index a45f30a2f5d..b55566bf6ce 100644 --- a/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSliderForm.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeSlider/BadgeSliderForm.component.js @@ -10,7 +10,7 @@ import { getDataAttrFromProps } from '@talend/utils'; import { getApplyDataFeature } from '../../../helpers/usage.helpers'; -import styles from './BadgeSlider.module.scss'; +import styles from './BadgeSlider.module.css'; const getSliderMode = ({ name }) => { switch (name) { diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js index 6e7baed1c51..715e52f473b 100644 --- a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js +++ b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js @@ -27,7 +27,7 @@ import { QuickSearchInput } from '../QuickSearchInput'; import { DEFAULT_QUICKSEARCH_OPERATOR } from '../QuickSearchInput/QuickSearchInput.component'; import { generateBadge } from '../types/badgeDefinition.type'; -import styles from './BasicSearch.module.scss'; +import styles from './BasicSearch.module.css'; const isInCreation = badge => get(badge, 'metadata.isInCreation', true); diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.css b/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.css new file mode 100644 index 00000000000..6d14dcf84f1 --- /dev/null +++ b/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.css @@ -0,0 +1,20 @@ +.tc-basic-search { + align-items: center; + display: flex; + height: inherit; + overflow: visible; + position: relative; + width: 100%; + padding-left: var(--coral-spacing-s, 0.75rem); + padding-right: var(--coral-spacing-s, 0.75rem); +} +.tc-basic-search-quicksearch { + margin-right: var(--coral-spacing-xs, 0.5rem); +} +.tc-basic-search-content { + display: flex; + align-items: center; + flex-direction: row; + flex-wrap: wrap; + flex-grow: 1; +} diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss b/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss deleted file mode 100644 index 18c5eb764f2..00000000000 --- a/packages/faceted-search/src/components/BasicSearch/BasicSearch.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tc-basic-search { - align-items: center; - display: flex; - height: inherit; - overflow: visible; - position: relative; - width: 100%; - padding-left: tokens.$coral-spacing-s; - padding-right: tokens.$coral-spacing-s; - - &-quicksearch { - margin-right: tokens.$coral-spacing-xs; - } - - &-content { - display: flex; - align-items: center; - flex-direction: row; - flex-wrap: wrap; - flex-grow: 1; - } -} diff --git a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js index ef1df66abd4..f07bf3c0c29 100644 --- a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js +++ b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.component.js @@ -4,7 +4,7 @@ import { Form } from '@talend/design-system'; import { FACETED_MODE, USAGE_TRACKING_TAGS } from '../../constants'; -import styles from './FacetedToolbar.module.scss'; +import styles from './FacetedToolbar.module.css'; const SwitchFacetedMode = ({ facetedMode, onChange, t }) => (

diff --git a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.css b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.css new file mode 100644 index 00000000000..81007613e9c --- /dev/null +++ b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.css @@ -0,0 +1,25 @@ +.tc-faceted-toolbar { + align-items: center; + display: flex; + justify-content: space-between; + min-height: 3.4375rem; + position: relative; + width: 100%; +} +.tc-faceted-toolbar .tc-faceted-switch-mode { + width: auto; + position: relative; + padding-right: var(--coral-spacing-s, 0.75rem); + padding-left: var(--coral-spacing-s, 0.75rem); +} +.tc-faceted-toolbar .tc-faceted-switch-mode::before { + content: ''; + height: var(--coral-sizing-xs, 1.5rem); + width: 0; + border-right: var(--coral-border-s-solid, 1px solid) + var(--coral-color-neutral-border-weak, hsl(0, 0%, 82%)); + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); +} diff --git a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss b/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss deleted file mode 100644 index 961ac317026..00000000000 --- a/packages/faceted-search/src/components/FacetedToolbar/FacetedToolbar.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -// stylelint-disable order/order -$toolbar-height: 3.4375rem; - -.tc-faceted-toolbar { - align-items: center; - display: flex; - justify-content: space-between; - min-height: $toolbar-height; - position: relative; - width: 100%; - - .tc-faceted-switch-mode { - width: auto; - position: relative; - padding-right: tokens.$coral-spacing-s; - padding-left: tokens.$coral-spacing-s; - - &::before { - content: ''; - height: tokens.$coral-sizing-xs; - width: 0; - border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - } - } -} diff --git a/packages/forms/src/FormSkeleton.module.css b/packages/forms/src/FormSkeleton.module.css new file mode 100644 index 00000000000..13c9efd2b69 --- /dev/null +++ b/packages/forms/src/FormSkeleton.module.css @@ -0,0 +1,14 @@ +:global([data-drawer-content]:has([data-drawer-absolute-footer-buttons])) { + margin-bottom: 66px; +} +:global([data-drawer-content]:has([data-drawer-absolute-footer-buttons])) + .drawer-absolute-footer-buttons { + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--coral-spacing-m, 1rem); + display: flex; + justify-content: space-between; +} diff --git a/packages/forms/src/FormSkeleton.module.scss b/packages/forms/src/FormSkeleton.module.scss deleted file mode 100644 index 288b9309e75..00000000000 --- a/packages/forms/src/FormSkeleton.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -:global([data-drawer-content]:has([data-drawer-absolute-footer-buttons])) { - margin-bottom: 66px; - - .drawer-absolute-footer-buttons { - background: tokens.$coral-color-neutral-background-medium; - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: tokens.$coral-spacing-m; - display: flex; - justify-content: space-between; - } -} diff --git a/packages/forms/src/FormSkeleton.tsx b/packages/forms/src/FormSkeleton.tsx index ed2cdb8f66a..a2592725877 100644 --- a/packages/forms/src/FormSkeleton.tsx +++ b/packages/forms/src/FormSkeleton.tsx @@ -2,7 +2,7 @@ import { SkeletonButton, SkeletonInput, StackItem, StackVertical } from '@talend import { ActionProps, DisplayMode } from './types'; -import theme from './FormSkeleton.module.scss'; +import theme from './FormSkeleton.module.css'; export interface FormSkeletonProps { displayMode?: DisplayMode; diff --git a/packages/forms/src/UIForm/UIForm.component.js b/packages/forms/src/UIForm/UIForm.component.js index ce74512ddfc..23ed91cd775 100644 --- a/packages/forms/src/UIForm/UIForm.component.js +++ b/packages/forms/src/UIForm/UIForm.component.js @@ -21,7 +21,7 @@ import { validateAll, validateSingle } from './utils/validation'; import widgets from './utils/widgets'; import Widget from './Widget'; -import theme from './UIForm.module.scss'; +import theme from './UIForm.module.css'; export class UIFormComponent extends Component { static displayName = 'TalendUIForm'; diff --git a/packages/forms/src/UIForm/UIForm.module.css b/packages/forms/src/UIForm/UIForm.module.css new file mode 100644 index 00000000000..2d66ab0f9a4 --- /dev/null +++ b/packages/forms/src/UIForm/UIForm.module.css @@ -0,0 +1,26 @@ +:global([data-drawer-content]:has([data-drawer-absolute-footer-buttons])) { + margin-bottom: 50px; +} +:global([data-drawer-content]:has([data-drawer-absolute-footer-buttons])) + .drawer-absolute-footer-buttons { + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--coral-spacing-xs, 0.5rem) var(--coral-spacing-m, 1rem); + display: flex; + justify-content: space-between; +} +:global([data-drawer-content]:has([data-drawer-absolute-footer-buttons])) + .drawer-absolute-footer-buttons + > div { + display: flex; + flex: 1; +} +:global([data-drawer-content]:has([data-drawer-absolute-footer-buttons])) + .drawer-absolute-footer-buttons + > div + > div { + padding: 0; +} diff --git a/packages/forms/src/UIForm/UIForm.module.scss b/packages/forms/src/UIForm/UIForm.module.scss deleted file mode 100644 index 3fa346601c5..00000000000 --- a/packages/forms/src/UIForm/UIForm.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -:global([data-drawer-content]:has([data-drawer-absolute-footer-buttons])) { - margin-bottom: 50px; - - .drawer-absolute-footer-buttons { - background: tokens.$coral-color-neutral-background-medium; - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: tokens.$coral-spacing-xs tokens.$coral-spacing-m; - display: flex; - justify-content: space-between; - - > div { - display: flex; - flex: 1; - - > div { - padding: 0; - } - } - } -} diff --git a/packages/forms/src/UIForm/Widget/Widget.component.js b/packages/forms/src/UIForm/Widget/Widget.component.js index 3c2a2bef55b..bfde8848fdd 100644 --- a/packages/forms/src/UIForm/Widget/Widget.component.js +++ b/packages/forms/src/UIForm/Widget/Widget.component.js @@ -9,7 +9,7 @@ import shouldRender from '../utils/condition'; import { getError } from '../utils/errors'; import { getValue } from '../utils/properties'; -import theme from './Widget.component.module.scss'; +import theme from './Widget.component.module.css'; // eslint-disable-next-line @typescript-eslint/default-param-last function isUpdating(updatingKeys = [], key) { diff --git a/packages/forms/src/UIForm/Widget/Widget.component.module.scss b/packages/forms/src/UIForm/Widget/Widget.component.module.css similarity index 100% rename from packages/forms/src/UIForm/Widget/Widget.component.module.scss rename to packages/forms/src/UIForm/Widget/Widget.component.module.css diff --git a/packages/forms/src/UIForm/fields/Code/CodeSkeleton.component.tsx b/packages/forms/src/UIForm/fields/Code/CodeSkeleton.component.tsx index b91ecb17a40..089045e93f4 100644 --- a/packages/forms/src/UIForm/fields/Code/CodeSkeleton.component.tsx +++ b/packages/forms/src/UIForm/fields/Code/CodeSkeleton.component.tsx @@ -1,5 +1,5 @@ import { SkeletonParagraph, SkeletonHeading } from '@talend/design-system'; -import theme from './CodeSkeleton.module.scss'; +import theme from './CodeSkeleton.module.css'; export default function CodeSkeleton() { return ( diff --git a/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.css b/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.css new file mode 100644 index 00000000000..23ca61fed1f --- /dev/null +++ b/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.css @@ -0,0 +1,10 @@ +.code-widget__loading { + display: grid; + gap: var(--coral-spacing-s, 0.75rem); + padding: var(--coral-spacing-m, 1rem); +} +.code-widget__loading__lines { + display: grid; + gap: var(--coral-spacing-s, 0.75rem); + padding-left: var(--coral-spacing-l, 1.75rem); +} diff --git a/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.scss b/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.scss deleted file mode 100644 index 11e49af4775..00000000000 --- a/packages/forms/src/UIForm/fields/Code/CodeSkeleton.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.code-widget__loading { - display: grid; - gap: tokens.$coral-spacing-s; - padding: tokens.$coral-spacing-m; - - &__lines { - display: grid; - gap: tokens.$coral-spacing-s; - padding-left: tokens.$coral-spacing-l; - } -} diff --git a/packages/forms/src/UIForm/fields/Comparator/Comparator.component.js b/packages/forms/src/UIForm/fields/Comparator/Comparator.component.js index 8be02db9200..fa49961066f 100644 --- a/packages/forms/src/UIForm/fields/Comparator/Comparator.component.js +++ b/packages/forms/src/UIForm/fields/Comparator/Comparator.component.js @@ -8,7 +8,7 @@ import { ActionDropdown } from '@talend/react-components/lib/Actions'; import Text from '../Text'; import Widget from '../../Widget'; -import theme from './Comparator.module.scss'; +import theme from './Comparator.module.css'; export const ICONS_MAPPING = { equals: 'talend-equal', diff --git a/packages/forms/src/UIForm/fields/Comparator/Comparator.module.css b/packages/forms/src/UIForm/fields/Comparator/Comparator.module.css new file mode 100644 index 00000000000..34b9d1e24d0 --- /dev/null +++ b/packages/forms/src/UIForm/fields/Comparator/Comparator.module.css @@ -0,0 +1,34 @@ +.comparator { + position: relative; +} +.comparator :global .dropdown { + position: absolute; + top: calc(1.05rem + var(--coral-spacing-xxs, 0.25rem)); +} +.comparator :global .dropdown-menu { + min-width: auto; +} +.comparator :global .dropdown .tc-svg-icon { + flex-shrink: 0; +} +.comparator :global .dropdown .btn { + height: 1.875rem; + width: 3.125rem; + color: var(--coral-color-neutral-text, hsl(0, 0%, 13%)); + background: var(--coral-color-accent-background, hsl(204, 59%, 88%)); + border: 1px solid var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + border-radius: var(--coral-radius-s, 0.25rem) 0 0 var(--coral-radius-s, 0.25rem); + z-index: 1; + padding-left: var(--coral-spacing-xxs, 0.25rem); + padding-right: var(--coral-spacing-xxs, 0.25rem); +} +.comparator :global input { + padding-left: calc(3.125rem + var(--coral-spacing-xs, 0.5rem)); +} + +.operator.selected { + font-weight: bold; +} +.operator .symbol + .name { + padding-left: 0.625rem; +} diff --git a/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss b/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss deleted file mode 100644 index c671bcd902c..00000000000 --- a/packages/forms/src/UIForm/fields/Comparator/Comparator.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -$tf-comparator-operator-height: 1.875rem !default; -$tf-comparator-operator-width: 3.125rem !default; -$tf-comparator-operator-top: 1.5rem !default; -$label-margin-top: 1.05rem; - -.comparator { - position: relative; - - :global { - .dropdown { - position: absolute; - top: calc($label-margin-top + tokens.$coral-spacing-xxs); - - &-menu { - min-width: auto; - } - - .tc-svg-icon { - flex-shrink: 0; - } - - .btn { - height: $tf-comparator-operator-height; - width: $tf-comparator-operator-width; - color: tokens.$coral-color-neutral-text; - background: tokens.$coral-color-accent-background; - border: 1px solid tokens.$coral-color-neutral-border; - border-radius: tokens.$coral-radius-s 0 0 tokens.$coral-radius-s; - z-index: 1; - padding: { - left: tokens.$coral-spacing-xxs; - right: tokens.$coral-spacing-xxs; - } - } - } - - input { - padding-left: calc($tf-comparator-operator-width + tokens.$coral-spacing-xs); - } - } -} - -.operator { - &.selected { - font-weight: bold; - } - - .symbol + .name { - padding-left: 0.625rem; - } -} diff --git a/packages/forms/src/UIForm/fields/KeyValue/KeyValue.component.js b/packages/forms/src/UIForm/fields/KeyValue/KeyValue.component.js index 43732e353e1..dda8ed5b718 100644 --- a/packages/forms/src/UIForm/fields/KeyValue/KeyValue.component.js +++ b/packages/forms/src/UIForm/fields/KeyValue/KeyValue.component.js @@ -4,7 +4,7 @@ import last from 'lodash/last'; import Widget from '../../Widget'; import FieldTemplate from '../FieldTemplate'; -import theme from './KeyValue.module.scss'; +import theme from './KeyValue.module.css'; /** * Default part (key or value) schema diff --git a/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.css b/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.css new file mode 100644 index 00000000000..7c3f47ee572 --- /dev/null +++ b/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.css @@ -0,0 +1,23 @@ +.key-value { + display: flex; +} +.key-value dt, +.key-value dd { + flex: 1; +} +.key-value dt { + display: flex; + align-items: flex-end; +} +.key-value dt > * { + flex: 1; +} +.key-value dt::after { + grid-area: equal; + content: '='; + display: flex; + align-items: center; + justify-content: center; + height: var(--coral-sizing-l, 2.5rem); + width: var(--coral-sizing-m, 2.25rem); +} diff --git a/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.scss b/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.scss deleted file mode 100644 index 5568fd9a933..00000000000 --- a/packages/forms/src/UIForm/fields/KeyValue/KeyValue.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.key-value { - display: flex; - - dt, - dd { - flex: 1; - } - - dt { - display: flex; - align-items: flex-end; - - > * { - flex: 1; - } - - &::after { - grid-area: equal; - content: '='; - display: flex; - align-items: center; - justify-content: center; - height: tokens.$coral-sizing-l; - width: tokens.$coral-sizing-m; - } - } -} diff --git a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.component.js b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.component.js index 4a944c75ffd..9c420892e92 100644 --- a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.component.js +++ b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.component.js @@ -12,7 +12,7 @@ import { generateDescriptionId, generateErrorId } from '../../Message/generateId import callTrigger from '../../trigger'; import FieldTemplate from '../FieldTemplate'; -import theme from './MultiSelectTag.module.scss'; +import theme from './MultiSelectTag.module.css'; function escapeRegexCharacters(str) { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); @@ -280,6 +280,7 @@ export default class MultiSelectTag extends Component { 'aria-invalid': !isValid, 'aria-required': schema.required, 'aria-describedby': `${descriptionId} ${errorId}`, + 'data-multiselect-input-overrides': true, }} /> diff --git a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.css b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.css new file mode 100644 index 00000000000..8b642975669 --- /dev/null +++ b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.css @@ -0,0 +1,27 @@ +.wrapper { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: flex-end; + border: var(--coral-border-s-solid, 1px solid) var(--coral-color-neutral-border, hsl(0, 0%, 55%)); + border-radius: var(--coral-radius-s, 0.25rem); + height: auto; + padding: 0; +} +.wrapper > .focus-manager div:has([data-multiselect-input-overrides='true']) { + border: none; + box-shadow: none; +} +.wrapper .focus-manager { + flex-grow: 1; + outline: none; +} +.wrapper .typeahead .items { + margin: 0; + padding: 0; + list-style-type: none; +} + +.has-error { + border-color: var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} diff --git a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss b/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss deleted file mode 100644 index 0ebe202a970..00000000000 --- a/packages/forms/src/UIForm/fields/MultiSelectTag/MultiSelectTag.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.wrapper { - position: relative; - display: flex; - flex-wrap: wrap; - align-items: flex-end; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border; - border-radius: tokens.$coral-radius-s; - height: auto; - padding: 0; - - [class^='InputWrapper-module'] { - border: none; - box-shadow: none; - } - - .focus-manager { - flex-grow: 1; - outline: none; - } - - .typeahead { - .items { - margin: 0; - padding: 0; - list-style-type: none; - } - } -} - -.has-error { - border-color: tokens.$coral-color-danger-border; -} diff --git a/packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.component.js b/packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.component.js index 7fa91f33c1b..662961b08c5 100644 --- a/packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.component.js +++ b/packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.component.js @@ -4,7 +4,7 @@ import Badge from '@talend/react-components/lib/Badge'; import { TextMode as FieldTemplate } from '../../FieldTemplate'; -import theme from './TextMode.module.scss'; +import theme from './TextMode.module.css'; function getLabel(titleMap, value) { const itemConf = titleMap?.find(item => item.value === value); diff --git a/packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.module.scss b/packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.module.css similarity index 60% rename from packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.module.scss rename to packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.module.css index e0faf2f5c69..e969139b9a4 100644 --- a/packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.module.scss +++ b/packages/forms/src/UIForm/fields/MultiSelectTag/displayMode/TextMode.module.css @@ -2,8 +2,7 @@ display: flex; flex-wrap: wrap; padding: 0; - - > li { - list-style: none; - } +} +.tc-badge-list > li { + list-style: none; } diff --git a/packages/forms/src/UIForm/fields/NestedListView/NestedListView.component.js b/packages/forms/src/UIForm/fields/NestedListView/NestedListView.component.js index d412779a435..85632863ab1 100644 --- a/packages/forms/src/UIForm/fields/NestedListView/NestedListView.component.js +++ b/packages/forms/src/UIForm/fields/NestedListView/NestedListView.component.js @@ -12,7 +12,7 @@ import { generateDescriptionId, generateErrorId } from '../../Message/generateId import FieldTemplate from '../FieldTemplate'; import { getDisplayedItems, prepareItemsFromSchema } from './NestedListView.utils'; -import theme from './NestedListView.module.scss'; +import theme from './NestedListView.module.css'; const DISPLAY_MODE_DEFAULT = 'DISPLAY_MODE_DEFAULT'; const DISPLAY_MODE_SEARCH = 'DISPLAY_MODE_SEARCH'; diff --git a/packages/forms/src/UIForm/fields/NestedListView/NestedListView.module.css b/packages/forms/src/UIForm/fields/NestedListView/NestedListView.module.css new file mode 100644 index 00000000000..3b7c8f7bb45 --- /dev/null +++ b/packages/forms/src/UIForm/fields/NestedListView/NestedListView.module.css @@ -0,0 +1,3 @@ +.nested-list-view header > small { + display: none; +} diff --git a/packages/forms/src/UIForm/fields/NestedListView/NestedListView.module.scss b/packages/forms/src/UIForm/fields/NestedListView/NestedListView.module.scss deleted file mode 100644 index 56d42bd4625..00000000000 --- a/packages/forms/src/UIForm/fields/NestedListView/NestedListView.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.nested-list-view { - // Temporary hide list count with CSS, should be done properly - // once ListView UX/UI specifications have been finished - header > small { - display: none; - } -} diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js index a56f69dbc30..0c41264e257 100644 --- a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js +++ b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js @@ -8,7 +8,7 @@ import { ButtonIcon } from '@talend/design-system'; import { I18N_DOMAIN_FORMS } from '../../../constants'; -import theme from './ArrayItem.module.scss'; +import theme from './ArrayItem.module.css'; export function ReorderButton(props) { const { disabled, index, hasMoveDown, hasMoveUp, id, isMoveDown, onReorder } = props; diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.css b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.css new file mode 100644 index 00000000000..b83fec62158 --- /dev/null +++ b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.css @@ -0,0 +1,38 @@ +.tf-array-item { + display: flex; + column-gap: var(--coral-spacing-s, 0.75rem); + background: var(--coral-color-neutral-background-medium, hsl(0, 0%, 97%)); + padding: var(--coral-spacing-xs, 0.5rem) 0; +} +.tf-array-item .delete button, +.tf-array-item .control button { + opacity: 0; +} +.tf-array-item:hover { + background: var(--coral-color-neutral-background, white); +} +.tf-array-item:hover .control button, +.tf-array-item:hover .delete button { + opacity: 1; +} +.tf-array-item:hover .control button:disabled, +.tf-array-item:hover .delete button:disabled { + color: var(--coral-color-neutral-text-disabled, hsl(0, 0%, 44%)); +} +.tf-array-item > * { + flex-grow: 1; + margin: 0; +} +.tf-array-item .control { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.tf-array-item .delete { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; +} diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss deleted file mode 100644 index 69d40acb9c0..00000000000 --- a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tf-array-item { - display: flex; - column-gap: tokens.$coral-spacing-s; - background: tokens.$coral-color-neutral-background-medium; - padding: tokens.$coral-spacing-xs 0; - - .delete button, - .control button { - opacity: 0; - } - - &:hover { - background: tokens.$coral-color-neutral-background; - - .control button, - .delete button { - opacity: 1; - - &:disabled { - color: tokens.$coral-color-neutral-text-disabled; - } - } - } - - > * { - flex-grow: 1; - margin: 0; - } - - .control { - flex-grow: 0; - flex-shrink: 0; - display: flex; - flex-direction: column; - justify-content: space-between; - } - - .delete { - flex-grow: 0; - flex-shrink: 0; - display: flex; - align-items: center; - } -} diff --git a/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.component.js b/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.component.js index f8772bada12..1028a69706f 100644 --- a/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.component.js +++ b/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.component.js @@ -11,7 +11,7 @@ import Message from '../../Message'; import { generateDescriptionId, generateErrorId } from '../../Message/generateId'; import ArrayItem from './ArrayItem.component'; -import theme from './DefaultArrayTemplate.module.scss'; +import theme from './DefaultArrayTemplate.module.css'; function DefaultArrayTemplate(props) { const { t } = useTranslation(I18N_DOMAIN_FORMS); diff --git a/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.css b/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.css new file mode 100644 index 00000000000..c41df8b965d --- /dev/null +++ b/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.css @@ -0,0 +1,15 @@ +.tf-array-fieldset::before { + content: attr(data-content); + display: inline-block; + margin: var(--coral-spacing-m, 1rem) 0; +} +.tf-array-fieldset .tf-array-add { + float: right; +} +.tf-array-fieldset .tf-array { + padding: 0; + margin: 0; +} +.tf-array-fieldset .tf-array .item { + list-style: none; +} diff --git a/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.scss b/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.scss deleted file mode 100644 index e1cff6d7444..00000000000 --- a/packages/forms/src/UIForm/fieldsets/Array/DefaultArrayTemplate.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tf-array-fieldset { - &::before { - content: attr(data-content); - display: inline-block; - margin: tokens.$coral-spacing-m 0; - } - - .tf-array-add { - float: right; - } - - .tf-array { - padding: 0; - margin: 0; - - .item { - list-style: none; - } - } -} diff --git a/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.component.js b/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.component.js index 80a6172cd0b..ce6b491e080 100644 --- a/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.component.js +++ b/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import theme from './TextModeArrayTemplate.module.scss'; +import theme from './TextModeArrayTemplate.module.css'; function renderListItem(val, index, renderItem) { const valueIsObject = typeof val === 'object'; diff --git a/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.css b/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.css new file mode 100644 index 00000000000..0798a4db58e --- /dev/null +++ b/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.css @@ -0,0 +1,6 @@ +.tf-array-text-mode ol { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--coral-spacing-xxs, 0.25rem); +} diff --git a/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.scss b/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.scss deleted file mode 100644 index 1ab9d3a270b..00000000000 --- a/packages/forms/src/UIForm/fieldsets/Array/displayMode/TextModeArrayTemplate.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.tf-array-text-mode { - ol { - list-style: none; - display: flex; - flex-direction: column; - gap: tokens.$coral-spacing-xxs; - } -} diff --git a/packages/forms/src/UIForm/utils/labels.js b/packages/forms/src/UIForm/utils/labels.js index aac501193b9..fe37b93422b 100644 --- a/packages/forms/src/UIForm/utils/labels.js +++ b/packages/forms/src/UIForm/utils/labels.js @@ -2,7 +2,7 @@ import classnames from 'classnames'; import { ButtonIcon, Popover, StackHorizontal } from '@talend/design-system'; -import styles from './labels.module.scss'; +import styles from './labels.module.css'; export const getLabelProps = (title, labelProps, hint, required) => { if (!hint) { diff --git a/packages/forms/src/UIForm/utils/labels.module.scss b/packages/forms/src/UIForm/utils/labels.module.css similarity index 100% rename from packages/forms/src/UIForm/utils/labels.module.scss rename to packages/forms/src/UIForm/utils/labels.module.css diff --git a/packages/forms/src/declaration.d.ts b/packages/forms/src/declaration.d.ts index 6db039b78b8..602db0beef5 100644 --- a/packages/forms/src/declaration.d.ts +++ b/packages/forms/src/declaration.d.ts @@ -1,2 +1,7 @@ declare module '*.scss'; declare module '*.png'; + +declare module '*.css' { + const contents: Record; + export default contents; +} diff --git a/packages/stepper/custom.d.ts b/packages/stepper/custom.d.ts index 72b53920ccc..59be35437b1 100644 --- a/packages/stepper/custom.d.ts +++ b/packages/stepper/custom.d.ts @@ -3,3 +3,8 @@ declare module '*.scss' { const contents: Record; export default contents; } + +declare module '*.css' { + const contents: Record; + export default contents; +} diff --git a/packages/stepper/src/components/StepperForm/StepFooter/StepFooter.component.tsx b/packages/stepper/src/components/StepperForm/StepFooter/StepFooter.component.tsx index c5aa15881c5..b7753cc2b51 100644 --- a/packages/stepper/src/components/StepperForm/StepFooter/StepFooter.component.tsx +++ b/packages/stepper/src/components/StepperForm/StepFooter/StepFooter.component.tsx @@ -6,7 +6,7 @@ import { ButtonPrimary, ButtonSecondary, Divider, StackHorizontal } from '@talen import I18N from '../../../constants/i18n'; import { StepperFormContext } from '../StepperForm.context'; -import style from '../StepperForm.module.scss'; +import style from '../StepperForm.module.css'; interface StepFooterProps { children?: ReactNode; diff --git a/packages/stepper/src/components/StepperForm/StepHeader/StepHeader.component.tsx b/packages/stepper/src/components/StepperForm/StepHeader/StepHeader.component.tsx index 4e84c2903ad..248fc75f5c2 100644 --- a/packages/stepper/src/components/StepperForm/StepHeader/StepHeader.component.tsx +++ b/packages/stepper/src/components/StepperForm/StepHeader/StepHeader.component.tsx @@ -1,6 +1,6 @@ import { StepHeaderProps } from './StepHeader.types'; -import style from '../StepperForm.module.scss'; +import style from '../StepperForm.module.css'; export const StepHeader = ({ title, subtitle }: StepHeaderProps) => { return ( diff --git a/packages/stepper/src/components/StepperForm/StepperForm.component.tsx b/packages/stepper/src/components/StepperForm/StepperForm.component.tsx index 9148a3b04e8..63a4f427b6f 100644 --- a/packages/stepper/src/components/StepperForm/StepperForm.component.tsx +++ b/packages/stepper/src/components/StepperForm/StepperForm.component.tsx @@ -7,7 +7,7 @@ import { StepperFormContext } from './StepperForm.context'; import { StepperProps } from './StepperForm.types'; import { getStepComponent } from './StepperForm.utils'; -import style from './StepperForm.module.scss'; +import style from './StepperForm.module.css'; const StepperForm = ({ isLoading }: StepperProps) => { const { steps, currentStep } = useContext(StepperFormContext); diff --git a/packages/stepper/src/components/StepperForm/StepperForm.module.css b/packages/stepper/src/components/StepperForm/StepperForm.module.css new file mode 100644 index 00000000000..433f2d81523 --- /dev/null +++ b/packages/stepper/src/components/StepperForm/StepperForm.module.css @@ -0,0 +1,41 @@ +.stepper-form { + display: flex; + height: calc(100% - var(--coral-sizing-m, 2.25rem) * 2); + padding: var(--coral-sizing-m, 2.25rem) 0; +} +.stepper-form__header__title { + font: var(--coral-heading-l, 600 1.125rem/140% 'Source Sans Pro'); +} +.stepper-form__header__subtitle { + font: var(--coral-paragraph-m, 400 0.875rem/140% 'Source Sans Pro'); + color: var(--coral-color-neutral-text-weak, hsl(0, 0%, 38%)); +} +.stepper-form__steps { + display: flex; + height: fit-content; + padding-right: var(--coral-spacing-l, 1.75rem); + width: 12.5rem; +} +.stepper-form__container { + display: flex; + flex-direction: column; + flex: 1; + padding-right: var(--coral-spacing-l, 1.75rem); +} +.stepper-form__content { + display: flex; + flex: 1; + flex-direction: column; + height: 100%; + padding-top: var(--coral-spacing-l, 1.75rem); + overflow: hidden; +} +.stepper-form__footer { + display: flex; +} +.stepper-form__footer hr { + max-height: var(--coral-sizing-xxxs, 1rem); +} +.stepper-form__loading { + width: 50%; +} diff --git a/packages/stepper/src/components/StepperForm/StepperForm.module.scss b/packages/stepper/src/components/StepperForm/StepperForm.module.scss deleted file mode 100644 index 1f81d026c11..00000000000 --- a/packages/stepper/src/components/StepperForm/StepperForm.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use '@talend/design-tokens/lib/_tokens'; - -.stepper-form { - display: flex; - height: calc(100% - tokens.$coral-sizing-m * 2); - padding: tokens.$coral-sizing-m 0; - - &__header { - &__title { - font: tokens.$coral-heading-l; - } - - &__subtitle { - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-text-weak; - } - } - - &__steps { - display: flex; - height: fit-content; - padding-right: tokens.$coral-spacing-l; - width: 12.5rem; - } - - &__container { - display: flex; - flex-direction: column; - flex: 1; - padding-right: tokens.$coral-spacing-l; - } - - &__content { - display: flex; - flex: 1; - flex-direction: column; - height: 100%; - padding-top: tokens.$coral-spacing-l; - overflow: hidden; - } - - &__footer { - display: flex; - - hr { - max-height: tokens.$coral-sizing-xxxs; - } - } - - &__loading { - width: 50%; - } -} diff --git a/packages/storybook-docs/custom.d.ts b/packages/storybook-docs/custom.d.ts index a1208016512..147c17d7373 100644 --- a/packages/storybook-docs/custom.d.ts +++ b/packages/storybook-docs/custom.d.ts @@ -9,3 +9,8 @@ declare module '*.scss' { const contents: Record; export default contents; } + +declare module '*.css' { + const contents: Record; + export default contents; +} diff --git a/packages/storybook-docs/src/components/Card.module.css b/packages/storybook-docs/src/components/Card.module.css new file mode 100644 index 00000000000..513d5019a04 --- /dev/null +++ b/packages/storybook-docs/src/components/Card.module.css @@ -0,0 +1,26 @@ +.card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--coral-spacing-m, 1rem); + border-radius: var(--coral-radius-s, 0.25rem); + box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.15); +} +.card svg { + height: 3.2rem; + margin-bottom: 1rem; +} +.card strong { + margin-bottom: 0.5rem; + font-size: 1.6rem; + font-weight: 700; +} +.card p { + margin-top: 0; + margin-bottom: 1rem; + text-align: center; +} +.card a { + font-weight: 600; +} diff --git a/packages/storybook-docs/src/components/Card.module.scss b/packages/storybook-docs/src/components/Card.module.scss deleted file mode 100644 index 71ec915367b..00000000000 --- a/packages/storybook-docs/src/components/Card.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.card { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: tokens.$coral-spacing-m; - border-radius: tokens.$coral-radius-s; - box-shadow: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.15); - - svg { - height: 3.2rem; - margin-bottom: 1rem; - } - - strong { - margin-bottom: 0.5rem; - font-size: 1.6rem; - font-weight: 700; - } - - p { - margin-top: 0; - margin-bottom: 1rem; - text-align: center; - } - - a { - font-weight: 600; - } -} diff --git a/packages/storybook-docs/src/components/Card.tsx b/packages/storybook-docs/src/components/Card.tsx index e3287413e25..8eb7851f1d7 100644 --- a/packages/storybook-docs/src/components/Card.tsx +++ b/packages/storybook-docs/src/components/Card.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import styles from './Card.module.scss'; +import styles from './Card.module.css'; export const Card = ({ icon, diff --git a/packages/storybook-docs/src/components/FigmaIframe.module.css b/packages/storybook-docs/src/components/FigmaIframe.module.css new file mode 100644 index 00000000000..3283ab839cc --- /dev/null +++ b/packages/storybook-docs/src/components/FigmaIframe.module.css @@ -0,0 +1,5 @@ +.iframe { + border-radius: var(--coral-radius-s, 0.25rem); + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0; + border: 1px solid rgba(0, 0, 0, 0.1); +} diff --git a/packages/storybook-docs/src/components/FigmaIframe.module.scss b/packages/storybook-docs/src/components/FigmaIframe.module.scss deleted file mode 100644 index ca7af94551b..00000000000 --- a/packages/storybook-docs/src/components/FigmaIframe.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.iframe { - border-radius: tokens.$coral-radius-s; - box-shadow: rgb(0 0 0 / 10%) 0 1px 3px 0; - border: 1px solid rgba(0, 0, 0, 0.1); -} diff --git a/packages/storybook-docs/src/components/FigmaIframe.tsx b/packages/storybook-docs/src/components/FigmaIframe.tsx index 40caefd6302..9b66515e85a 100644 --- a/packages/storybook-docs/src/components/FigmaIframe.tsx +++ b/packages/storybook-docs/src/components/FigmaIframe.tsx @@ -1,6 +1,6 @@ import classnames from 'classnames'; -import styles from './FigmaIframe.module.scss'; +import styles from './FigmaIframe.module.css'; const iframeProps = { height: 600, diff --git a/packages/storybook-docs/src/components/FigmaImage.module.scss b/packages/storybook-docs/src/components/FigmaImage.module.css similarity index 62% rename from packages/storybook-docs/src/components/FigmaImage.module.scss rename to packages/storybook-docs/src/components/FigmaImage.module.css index 6bc19d592c9..b635430d348 100644 --- a/packages/storybook-docs/src/components/FigmaImage.module.scss +++ b/packages/storybook-docs/src/components/FigmaImage.module.css @@ -1,5 +1,3 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - .image { display: flex; align-items: center; diff --git a/packages/storybook-docs/src/components/FigmaImage.tsx b/packages/storybook-docs/src/components/FigmaImage.tsx index 7257f63d050..46413312b28 100644 --- a/packages/storybook-docs/src/components/FigmaImage.tsx +++ b/packages/storybook-docs/src/components/FigmaImage.tsx @@ -2,7 +2,7 @@ import { useContext, useState, useEffect, memo } from 'react'; import type { ImgHTMLAttributes } from 'react'; import { FileImageResponse } from 'figma-js'; -import styles from './FigmaImage.module.scss'; +import styles from './FigmaImage.module.css'; import FigmaContext from './FigmaContext'; diff --git a/packages/storybook-docs/src/components/Grid.module.css b/packages/storybook-docs/src/components/Grid.module.css new file mode 100644 index 00000000000..bb9f96390cd --- /dev/null +++ b/packages/storybook-docs/src/components/Grid.module.css @@ -0,0 +1,6 @@ +.grid { + display: grid; + gap: var(--coral-spacing-l, 1.75rem) calc(var(--coral-spacing-l, 1.75rem) * 2); + /* stylelint-disable-next-line declaration-no-important */ + margin: calc(var(--coral-spacing-l, 1.75rem) * 2) 0 !important; +} diff --git a/packages/storybook-docs/src/components/Grid.module.scss b/packages/storybook-docs/src/components/Grid.module.scss deleted file mode 100644 index ea2ee516483..00000000000 --- a/packages/storybook-docs/src/components/Grid.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.grid { - display: grid; - gap: tokens.$coral-spacing-l calc(#{tokens.$coral-spacing-l} * 2); - /* stylelint-disable-next-line declaration-no-important */ - margin: calc(#{tokens.$coral-spacing-l} * 2) 0 !important; -} diff --git a/packages/storybook-docs/src/components/Grid.tsx b/packages/storybook-docs/src/components/Grid.tsx index e2aab2265f4..f73d78dfb90 100644 --- a/packages/storybook-docs/src/components/Grid.tsx +++ b/packages/storybook-docs/src/components/Grid.tsx @@ -1,6 +1,6 @@ import { HTMLAttributes, ReactElement } from 'react'; import classnames from 'classnames'; -import styles from './Grid.module.scss'; +import styles from './Grid.module.css'; export const Grid = ( props: { diff --git a/packages/storybook-docs/src/components/SearchBar/SearchBar.module.scss b/packages/storybook-docs/src/components/SearchBar/SearchBar.module.css similarity index 58% rename from packages/storybook-docs/src/components/SearchBar/SearchBar.module.scss rename to packages/storybook-docs/src/components/SearchBar/SearchBar.module.css index f6cd23a5c75..867f0a7770b 100644 --- a/packages/storybook-docs/src/components/SearchBar/SearchBar.module.scss +++ b/packages/storybook-docs/src/components/SearchBar/SearchBar.module.css @@ -1,10 +1,8 @@ -.link { - &, - &:hover, - &:focus, - &:active { - text-decoration: none; - } +.link, +.link:hover, +.link:focus, +.link:active { + text-decoration: none; } .title { diff --git a/packages/storybook-docs/src/components/SearchBar/SearchBar.tsx b/packages/storybook-docs/src/components/SearchBar/SearchBar.tsx index 6118f3ff4e7..1c1ad94dc48 100644 --- a/packages/storybook-docs/src/components/SearchBar/SearchBar.tsx +++ b/packages/storybook-docs/src/components/SearchBar/SearchBar.tsx @@ -3,7 +3,7 @@ import { getAlgoliaResults } from '@algolia/autocomplete-js'; import { Autocomplete } from './AlgoliaAutocomplete'; -import theme from './SearchBar.module.scss'; +import theme from './SearchBar.module.css'; const searchClient = algoliasearch( process.env.STORYBOOK_ALGOLIA_SEARCH_APP_ID || '', diff --git a/packages/storybook-docs/src/components/Statuses/Status.module.css b/packages/storybook-docs/src/components/Statuses/Status.module.css new file mode 100644 index 00000000000..788a6e0ee40 --- /dev/null +++ b/packages/storybook-docs/src/components/Statuses/Status.module.css @@ -0,0 +1,58 @@ +/* stylelint-disable declaration-no-important */ +.badge { + display: inline-flex; + align-items: center; + font: var(--coral-paragraph-s-bold, 600 0.75rem/140% 'Source Sans Pro'); + background-color: white; + color: hsl(0, 0%, 13%) !important; +} +.badge, +.badge:hover, +.badge:focus, +.badge:active { + text-decoration: none !important; +} +.badge[href] { + cursor: pointer; +} +.badge span { + padding: 0 var(--coral-spacing-xxs, 0.25rem); + border: var(--coral-border-s-solid, 1px solid) hsl(0, 0%, 55%); +} +.badge span:first-child { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 1ch; + border-right: none; + border-radius: var(--coral-radius-s, 0.25rem) 0 0 var(--coral-radius-s, 0.25rem); +} +.badge span:last-child { + border-left: none; + border-radius: 0 var(--coral-radius-s, 0.25rem) var(--coral-radius-s, 0.25rem) 0; + text-transform: uppercase; +} +.badge img { + height: var(--coral-sizing-minimal, 0.75rem); + width: var(--coral-sizing-minimal, 0.75rem); +} +.badge .status-ok { + color: white; + background: hsl(111, 49%, 34%); +} +.badge .status-wip { + color: white; + background: hsl(281, 58%, 29%); +} +.badge .status-deprecated { + color: white; + background: hsl(22, 93%, 41%); +} +.badge .status-ko { + color: white; + background: hsl(359, 51%, 53%); +} +.badge .status-na { + color: hsl(0, 0%, 38%); + background: hsl(0, 0%, 88%); +} diff --git a/packages/storybook-docs/src/components/Statuses/Status.module.scss b/packages/storybook-docs/src/components/Statuses/Status.module.scss deleted file mode 100644 index fffa3cdb64a..00000000000 --- a/packages/storybook-docs/src/components/Statuses/Status.module.scss +++ /dev/null @@ -1,73 +0,0 @@ -/* stylelint-disable declaration-no-important */ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.badge { - display: inline-flex; - align-items: center; - font: tokens.$coral-paragraph-s-bold; - background-color: white; - color: hsl(0, 0%, 13%) !important; - - &, - &:hover, - &:focus, - &:active { - text-decoration: none !important; - } - - &[href] { - cursor: pointer; - } - - span { - padding: 0 tokens.$coral-spacing-xxs; - border: tokens.$coral-border-s-solid hsl(0, 0%, 55%); - - &:first-child { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 1ch; - border-right: none; - border-radius: tokens.$coral-radius-s 0 0 tokens.$coral-radius-s; - } - - &:last-child { - border-left: none; - border-radius: 0 tokens.$coral-radius-s tokens.$coral-radius-s 0; - text-transform: uppercase; - } - } - - img { - height: tokens.$coral-sizing-minimal; - width: tokens.$coral-sizing-minimal; - } - - .status { - &-ok { - color: white; - background: hsl(111, 49%, 34%); - } - - &-wip { - color: white; - background: hsla(281, 58%, 29%, 1); - } - - &-deprecated { - color: white; - background: hsla(22, 93%, 41%, 1); - } - - &-ko { - color: white; - background: hsla(359, 51%, 53%, 1); - } - - &-na { - color: hsla(0, 0%, 38%, 1); - background: hsla(0, 0%, 88%, 1); - } - } -} diff --git a/packages/storybook-docs/src/components/Statuses/Status.tsx b/packages/storybook-docs/src/components/Statuses/Status.tsx index c45fdf9bee7..1f3d0c2d576 100644 --- a/packages/storybook-docs/src/components/Statuses/Status.tsx +++ b/packages/storybook-docs/src/components/Statuses/Status.tsx @@ -1,4 +1,4 @@ -import theme from './Status.module.scss'; +import theme from './Status.module.css'; import { StatusValue } from './Statuses.types'; type StatusProps = { icon: string; label: string; link?: string; status?: StatusValue }; diff --git a/packages/storybook-docs/src/components/Trial/Trial.module.css b/packages/storybook-docs/src/components/Trial/Trial.module.css new file mode 100644 index 00000000000..a08fd07442a --- /dev/null +++ b/packages/storybook-docs/src/components/Trial/Trial.module.css @@ -0,0 +1,4 @@ +.trial { + padding: var(--coral-sizing-m, 2.25rem); + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); +} diff --git a/packages/storybook-docs/src/components/Trial/Trial.module.scss b/packages/storybook-docs/src/components/Trial/Trial.module.scss deleted file mode 100644 index ca607035bf2..00000000000 --- a/packages/storybook-docs/src/components/Trial/Trial.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.trial { - padding: tokens.$coral-sizing-m; - font: tokens.$coral-heading-m; -} diff --git a/packages/storybook-docs/src/components/Trial/Trial.tsx b/packages/storybook-docs/src/components/Trial/Trial.tsx index a0b5a2a2d3b..dbe3de681f7 100644 --- a/packages/storybook-docs/src/components/Trial/Trial.tsx +++ b/packages/storybook-docs/src/components/Trial/Trial.tsx @@ -1,4 +1,4 @@ -import styles from './Trial.module.scss'; +import styles from './Trial.module.css'; export function Trial({ children }: { children: string }) { return
{children}
; diff --git a/packages/storybook-docs/src/components/Use.module.css b/packages/storybook-docs/src/components/Use.module.css new file mode 100644 index 00000000000..21ebf25d2ca --- /dev/null +++ b/packages/storybook-docs/src/components/Use.module.css @@ -0,0 +1,30 @@ +.block { + padding: var(--coral-spacing-s, 0.75rem); + border-radius: var(--coral-radius-s, 0.25rem); +} +.block__title { + display: flex; + align-items: center; + margin-bottom: var(--coral-spacing-m, 1rem); + font: var(--coral-heading-m, 600 1rem/140% 'Source Sans Pro'); +} +.block li { + margin-bottom: var(--coral-spacing-xs, 0.5rem); +} +.block svg { + margin: 0 var(--coral-spacing-xs, 0.5rem); +} +.block_dont { + background: var(--coral-color-danger-background, hsl(0, 100%, 96%)); + border-top: 0.4rem solid var(--coral-color-danger-border, hsl(359, 51%, 53%)); +} +.block_dont svg { + color: var(--coral-color-danger-icon, hsl(359, 69%, 53%)); +} +.block_do { + background: var(--coral-color-success-background, hsl(110, 49%, 90%)); + border-top: 0.4rem solid var(--coral-color-success-border, hsl(111, 49%, 34%)); +} +.block_do svg { + color: var(--coral-color-success-icon, hsl(111, 53%, 40%)); +} diff --git a/packages/storybook-docs/src/components/Use.module.scss b/packages/storybook-docs/src/components/Use.module.scss deleted file mode 100644 index eee81ef4876..00000000000 --- a/packages/storybook-docs/src/components/Use.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use '@talend/design-tokens/lib/tokens' as tokens; - -.block { - padding: tokens.$coral-spacing-s; - border-radius: tokens.$coral-radius-s; - - &__title { - display: flex; - align-items: center; - margin-bottom: tokens.$coral-spacing-m; - font: tokens.$coral-heading-m; - } - - li { - margin-bottom: tokens.$coral-spacing-xs; - } - - svg { - margin: 0 tokens.$coral-spacing-xs; - } - - &_dont { - background: tokens.$coral-color-danger-background; - border-top: 0.4rem solid tokens.$coral-color-danger-border; - - svg { - color: tokens.$coral-color-danger-icon; - } - } - - &_do { - background: tokens.$coral-color-success-background; - border-top: 0.4rem solid tokens.$coral-color-success-border; - - svg { - color: tokens.$coral-color-success-icon; - } - } -} diff --git a/packages/storybook-docs/src/components/Use.tsx b/packages/storybook-docs/src/components/Use.tsx index c91b27d31ab..7cd8a3ff361 100644 --- a/packages/storybook-docs/src/components/Use.tsx +++ b/packages/storybook-docs/src/components/Use.tsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import { Grid } from './Grid'; -import styles from './Use.module.scss'; +import styles from './Use.module.css'; type BlockTypes = { title: string; diff --git a/packages/theme/MIGRATION_SETUP_COMPLETE.md b/packages/theme/MIGRATION_SETUP_COMPLETE.md new file mode 100644 index 00000000000..9cf99b18c43 --- /dev/null +++ b/packages/theme/MIGRATION_SETUP_COMPLETE.md @@ -0,0 +1,170 @@ +# Sass to CSS Migration - Setup Complete ✓ + +## Files Created/Updated + +### 1. **CSS Variables File** + +📄 [packages/theme/src/variables.css](packages/theme/src/variables.css) + +- **Purpose**: Single source of truth for all Sass variable CSS equivalents +- **Content**: + - 300+ CSS variables covering spacing, typography, colors, borders, sizing, z-index, breakpoints + - Organized by category with clear section headers + - All values pre-computed from original Sass definitions +- **Usage**: Import with `@import '@talend/bootstrap-theme/src/variables.css';` + +### 2. **Migration Reference Guide** + +📄 [packages/theme/VARIABLE_MAPPING.md](packages/theme/VARIABLE_MAPPING.md) + +- **Purpose**: Developer reference for Sass → CSS variable mappings +- **Content**: + - Complete mapping tables for all variable categories + - Before/After migration examples + - Usage notes and best practices + - Conversion checklist +- **Usage**: Reference when converting files, embed in documentation + +### 3. **Example Converted File** + +📄 [packages/components/src/TabBar/TabBar.module.css](packages/components/src/TabBar/TabBar.module.css) + +- **Purpose**: Example of successful .scss → .css conversion +- **Shows**: + - Import of variables.css file + - SCSS nesting flattened to flat CSS selectors + - All `$variable` replaced with `var(--talend-bootstrap-variable)` + - Removal of Sass-specific syntax + +### 4. **Migration Plan** + +📄 [packages/theme/SASS_TO_CSS_MIGRATION_PLAN.md](packages/theme/SASS_TO_CSS_MIGRATION_PLAN.md) + +- **Purpose**: Comprehensive plan for full migration +- **Content**: 7-step roadmap, decision points, timeline, success criteria + +## Key Statistics + +- **Total Sass Variables Mapped**: 300+ +- **CSS Variables Created**: 300+ +- **Component Files to Migrate**: 432 +- **Categories Covered**: 14 (spacing, typography, colors, borders, sizing, forms, dropdowns, navbar, pagination, modals, alerts, labels, badges, breakpoints, z-index) + +## Variable Naming Convention + +All CSS variables follow this pattern: + +``` +--talend-bootstrap-{category}-{property} +``` + +Examples: + +- `--talend-bootstrap-padding-smaller` (spacing) +- `--talend-bootstrap-font-size-base` (typography) +- `--talend-bootstrap-border-radius-large` (borders) +- `--talend-bootstrap-screen-md` (breakpoints) +- `--talend-bootstrap-zindex-dropdown` (z-index) + +## Next Steps + +### Immediate Actions + +1. **Review** the created files for accuracy +2. **Test** the example TabBar.module.css conversion +3. **Validate** CSS variables are working in browser dev tools + +### For Agent-Mode Automation + +The following files are now available for automated processing: + +1. **Variable Mapping Reference**: [VARIABLE_MAPPING.md](packages/theme/VARIABLE_MAPPING.md) + - Parse to create automated conversion rules + - 300+ variable mappings ready for regex/transformation + +2. **Migration Plan**: [SASS_TO_CSS_MIGRATION_PLAN.md](packages/theme/SASS_TO_CSS_MIGRATION_PLAN.md) + - Outlines 7-step execution plan + - Ready for agent sequencing + +3. **Example Implementation**: [TabBar.module.css](packages/components/src/TabBar/TabBar.module.css) + - Pattern to follow for all conversions + - Shows before/after transformation + +### Recommended Agent Tasks + +Once approved, agent can execute: + +1. **Create Migration Script** (Tool Development) + - Parse .module.scss files + - Extract variable names + - Apply mappings from VARIABLE_MAPPING.md + - Generate .module.css output + +2. **Batch Convert by Package** (Automated Migration) + - Tier 1: design-system (~90 files) + - Tier 2: components (~100+ files) + - Tier 3: forms, containers (~50+ files) + - Tier 4: remaining packages (~50 files) + +3. **Update Build Configuration** (Build System) + - Remove Sass loaders if no longer needed + - Update webpack/vite config + - Ensure CSS variables available at runtime + +4. **Validation & Testing** (QA) + - Automated: Scan for remaining `$variables` + - Automated: Validate all CSS variables exist + - Visual: Spot check components in Storybook + +## Files Ready for Use + +``` +packages/theme/ +├── src/ +│ └── variables.css ✓ Created (300+ CSS variables) +├── VARIABLE_MAPPING.md ✓ Created (migration reference) +└── SASS_TO_CSS_MIGRATION_PLAN.md ✓ Updated + +packages/components/src/TabBar/ +└── TabBar.module.css ✓ Created (example conversion) +``` + +## Quick Reference Commands + +View the CSS variables file: + +```bash +cat packages/theme/src/variables.css +``` + +View the mapping reference: + +```bash +cat packages/theme/VARIABLE_MAPPING.md +``` + +View example converted file: + +```bash +cat packages/components/src/TabBar/TabBar.module.css +``` + +## Status Summary + +✅ **Phase 1: Mapping & Variable Definition** - COMPLETE + +- All 300+ Sass variables mapped to CSS equivalents +- CSS variables file created with organized sections +- Reference documentation generated +- Example conversion provided + +⏳ **Phase 2: Automation Tooling** - READY FOR AGENT MODE + +- Migration script development needed +- Batch conversion tooling needed + +⏳ **Phase 3-6: Implementation** - READY FOR AGENT MODE + +- File conversions by package tier +- Build system updates +- Testing & validation diff --git a/packages/theme/VARIABLE_MAPPING.md b/packages/theme/VARIABLE_MAPPING.md new file mode 100644 index 00000000000..99d32187c81 --- /dev/null +++ b/packages/theme/VARIABLE_MAPPING.md @@ -0,0 +1,176 @@ +# SCSS to CSS Variables Migration Reference + +This document maps all Sass variables used in the Talend UI component library to their corresponding CSS variable equivalents. + +## Variable Mapping Guide + +### Spacing/Padding Variables + +| Sass Variable | CSS Variable | Value | +| --------------------------- | --------------------------------------------- | ----- | +| `$padding-smaller` | `--talend-bootstrap-padding-smaller` | 5px | +| `$padding-small` | `--talend-bootstrap-padding-small` | 10px | +| `$padding-normal` | `--talend-bootstrap-padding-normal` | 15px | +| `$padding-large` | `--talend-bootstrap-padding-large` | 20px | +| `$padding-larger` | `--talend-bootstrap-padding-larger` | 30px | +| `$padding-base-vertical` | `--talend-bootstrap-padding-base-vertical` | 6px | +| `$padding-base-horizontal` | `--talend-bootstrap-padding-base-horizontal` | 12px | +| `$padding-large-vertical` | `--talend-bootstrap-padding-large-vertical` | 10px | +| `$padding-large-horizontal` | `--talend-bootstrap-padding-large-horizontal` | 16px | +| `$padding-small-vertical` | `--talend-bootstrap-padding-small-vertical` | 5px | +| `$padding-small-horizontal` | `--talend-bootstrap-padding-small-horizontal` | 10px | +| `$padding-xs-vertical` | `--talend-bootstrap-padding-xs-vertical` | 1px | +| `$padding-xs-horizontal` | `--talend-bootstrap-padding-xs-horizontal` | 5px | + +### Typography Variables + +| Sass Variable | CSS Variable | Value | +| ------------------------ | ------------------------------------------ | ----------- | +| `$font-size-base` | `--talend-bootstrap-font-size-base` | 14px | +| `$font-size-large` | `--talend-bootstrap-font-size-large` | 18px | +| `$font-size-small` | `--talend-bootstrap-font-size-small` | 12px | +| `$font-size-h1` | `--talend-bootstrap-font-size-h1` | 18px | +| `$font-size-h2` | `--talend-bootstrap-font-size-h2` | 16px | +| `$font-size-h3` | `--talend-bootstrap-font-size-h3` | 14px | +| `$font-size-h4` | `--talend-bootstrap-font-size-h4` | 12px | +| `$font-size-h5` | `--talend-bootstrap-font-size-h5` | 12px | +| `$font-size-h6` | `--talend-bootstrap-font-size-h6` | 12px | +| `$font-weight-bold` | `--talend-bootstrap-font-weight-bold` | 800 | +| `$font-weight-semi-bold` | `--talend-bootstrap-font-weight-semi-bold` | 600 | +| `$font-weight-regular` | `--talend-bootstrap-font-weight-regular` | 400 | +| `$line-height-base` | `--talend-bootstrap-line-height-base` | 1.428571429 | +| `$line-height-computed` | `--talend-bootstrap-line-height-computed` | 20px | +| `$line-height-large` | `--talend-bootstrap-line-height-large` | 1.3333333 | +| `$line-height-small` | `--talend-bootstrap-line-height-small` | 1.5 | + +### SVG/Icon Sizing + +| Sass Variable | CSS Variable | Value | +| --------------- | --------------------------------- | ------- | +| `$svg-xs-size` | `--talend-bootstrap-svg-xs-size` | 0.5rem | +| `$svg-sm-size` | `--talend-bootstrap-svg-sm-size` | 0.75rem | +| `$svg-md-size` | `--talend-bootstrap-svg-md-size` | 1rem | +| `$svg-rg-size` | `--talend-bootstrap-svg-rg-size` | 1.25rem | +| `$svg-lg-size` | `--talend-bootstrap-svg-lg-size` | 1.5rem | +| `$svg-xlg-size` | `--talend-bootstrap-svg-xlg-size` | 2rem | + +### Border & Radius + +| Sass Variable | CSS Variable | Value | +| ---------------------- | ---------------------------------------- | ----- | +| `$border-radius-base` | `--talend-bootstrap-border-radius-base` | 4px | +| `$border-radius-large` | `--talend-bootstrap-border-radius-large` | 6px | +| `$border-radius-small` | `--talend-bootstrap-border-radius-small` | 3px | + +### Color Variables + +| Sass Variable | CSS Variable | Value | +| --------------- | --------------------------------- | ------- | +| `$gray-base` | `--talend-bootstrap-gray-base` | #000 | +| `$gray-darker` | `--talend-bootstrap-gray-darker` | #222 | +| `$gray-dark` | `--talend-bootstrap-gray-dark` | #333 | +| `$gray` | `--talend-bootstrap-gray` | #555 | +| `$gray-light` | `--talend-bootstrap-gray-light` | #777 | +| `$gray-lighter` | `--talend-bootstrap-gray-lighter` | #bfbfbf | +| `$body-bg` | `--talend-bootstrap-body-bg` | #fff | +| `$text-color` | `--talend-bootstrap-text-color` | #333 | + +### Form & Input Variables + +| Sass Variable | CSS Variable | Value | +| -------------------------- | -------------------------------------------- | ------- | +| `$input-bg` | `--talend-bootstrap-input-bg` | #fff | +| `$input-bg-disabled` | `--talend-bootstrap-input-bg-disabled` | #bfbfbf | +| `$input-color` | `--talend-bootstrap-input-color` | #555 | +| `$input-border` | `--talend-bootstrap-input-border` | #ccc | +| `$input-border-focus` | `--talend-bootstrap-input-border-focus` | #66afe9 | +| `$input-color-placeholder` | `--talend-bootstrap-input-color-placeholder` | #999 | + +### Breakpoint Variables + +| Sass Variable | CSS Variable | Value | +| ---------------- | ---------------------------------- | ------ | +| `$screen-xs` | `--talend-bootstrap-screen-xs` | 480px | +| `$screen-xs-min` | `--talend-bootstrap-screen-xs-min` | 480px | +| `$screen-xs-max` | `--talend-bootstrap-screen-xs-max` | 767px | +| `$screen-sm` | `--talend-bootstrap-screen-sm` | 768px | +| `$screen-sm-min` | `--talend-bootstrap-screen-sm-min` | 768px | +| `$screen-sm-max` | `--talend-bootstrap-screen-sm-max` | 991px | +| `$screen-md` | `--talend-bootstrap-screen-md` | 992px | +| `$screen-md-min` | `--talend-bootstrap-screen-md-min` | 992px | +| `$screen-md-max` | `--talend-bootstrap-screen-md-max` | 1199px | +| `$screen-lg` | `--talend-bootstrap-screen-lg` | 1200px | +| `$screen-lg-min` | `--talend-bootstrap-screen-lg-min` | 1200px | + +### Z-Index Variables + +| Sass Variable | CSS Variable | Value | +| -------------------------- | -------------------------------------------- | ----- | +| `$zindex-navbar` | `--talend-bootstrap-zindex-navbar` | 0 | +| `$zindex-dropdown` | `--talend-bootstrap-zindex-dropdown` | 8 | +| `$zindex-navbar-fixed` | `--talend-bootstrap-zindex-navbar-fixed` | 4 | +| `$zindex-modal-background` | `--talend-bootstrap-zindex-modal-background` | 4 | +| `$zindex-modal` | `--talend-bootstrap-zindex-modal` | 4 | +| `$zindex-popover` | `--talend-bootstrap-zindex-popover` | 8 | +| `$zindex-tooltip` | `--talend-bootstrap-zindex-tooltip` | 16 | + +## Migration Examples + +### SCSS (Before) + +```scss +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; + +.tc-tab-bar-item-icon { + margin-right: $padding-smaller; + width: $svg-sm-size; + height: $svg-sm-size; + font-size: $svg-sm-size; +} + +:global(.dropdown) + :global(.tab-content) { + padding-top: $padding-large; +} +``` + +### CSS (After) + +```css +/* Import CSS variables from theme package */ +@import '@talend/bootstrap-theme/src/variables.css'; + +.tc-tab-bar-item-icon { + margin-right: var(--talend-bootstrap-padding-smaller); + width: var(--talend-bootstrap-svg-sm-size); + height: var(--talend-bootstrap-svg-sm-size); + font-size: var(--talend-bootstrap-svg-sm-size); +} + +:global(.dropdown) + :global(.tab-content) { + padding-top: var(--talend-bootstrap-padding-large); +} +``` + +## Usage Notes + +1. **Naming Convention**: All CSS variables follow the `--talend-bootstrap-*` prefix to avoid conflicts with design-tokens (`--coral-*`) variables. + +2. **Variable Access**: Use `var(--talend-bootstrap-variable-name)` to access CSS variables in CSS files. + +3. **No Sass Features**: CSS variables cannot use Sass functions like `lighten()`, `darken()`, etc. These values are pre-computed and included as hex colors or calculated pixel values. + +## Complete Variable List Location + +All CSS variables are defined in: `/packages/theme/src/variables.css` + +## Conversion Checklist + +When converting a .module.scss file to .module.css: + +- [ ] Remove `@use` imports from bootstrap-theme/src/theme/guidelines +- [ ] Replace all `$variable-name` with `var(--talend-bootstrap-variable-name)` +- [ ] Replace all `$tokens.coral-name` with `var(--coral-name)` +- [ ] Remove Sass-specific features (nesting with `&`, mixins, functions) +- [ ] Convert SCSS nesting to CSS nested selectors +- [ ] Rename file from `.module.scss` to `.module.css` +- [ ] Update any documentation or imports in component files diff --git a/packages/theme/src/index.js b/packages/theme/src/index.js index 01d57fa4d19..5e0a2177a5a 100644 --- a/packages/theme/src/index.js +++ b/packages/theme/src/index.js @@ -1 +1,2 @@ require('./theme/bootstrap.scss'); +require('./variables.css'); diff --git a/packages/theme/src/variables.css b/packages/theme/src/variables.css new file mode 100644 index 00000000000..1d67dd17d2e --- /dev/null +++ b/packages/theme/src/variables.css @@ -0,0 +1,336 @@ +:root { + /* ============================================ + SPACING/PADDING VARIABLES + ============================================ */ + --talend-bootstrap-padding-smaller: 5px; + --talend-bootstrap-padding-small: 10px; + --talend-bootstrap-padding-normal: 15px; + --talend-bootstrap-padding-large: 20px; + --talend-bootstrap-padding-larger: 30px; + + --talend-bootstrap-padding-base-vertical: 6px; + --talend-bootstrap-padding-base-horizontal: 12px; + --talend-bootstrap-padding-large-vertical: 10px; + --talend-bootstrap-padding-large-horizontal: 16px; + --talend-bootstrap-padding-small-vertical: 5px; + --talend-bootstrap-padding-small-horizontal: 10px; + --talend-bootstrap-padding-xs-vertical: 1px; + --talend-bootstrap-padding-xs-horizontal: 5px; + + /* ============================================ + TYPOGRAPHY VARIABLES + ============================================ */ + --talend-bootstrap-font-size-base: 14px; + --talend-bootstrap-font-size-large: 18px; + --talend-bootstrap-font-size-small: 12px; + + --talend-bootstrap-font-size-h1: 18px; + --talend-bootstrap-font-size-h2: 16px; + --talend-bootstrap-font-size-h3: 14px; + --talend-bootstrap-font-size-h4: 12px; + --talend-bootstrap-font-size-h5: 12px; + --talend-bootstrap-font-size-h6: 12px; + + --talend-bootstrap-font-weight-bold: 800; + --talend-bootstrap-font-weight-semi-bold: 600; + --talend-bootstrap-font-weight-regular: 400; + + --talend-bootstrap-line-height-base: 1.428571429; + --talend-bootstrap-line-height-computed: 20px; + --talend-bootstrap-line-height-large: 1.3333333; + --talend-bootstrap-line-height-small: 1.5; + + --talend-bootstrap-font-family-sans-serif: 'Source Sans Pro', sans-serif; + --talend-bootstrap-font-family-serif: Georgia, 'Times New Roman', Times, serif; + --talend-bootstrap-font-family-monospace: 'Inconsolata', monospace; + --talend-bootstrap-font-family-base: 'Source Sans Pro', sans-serif; + + /* ============================================ + BORDER & RADIUS VARIABLES + ============================================ */ + --talend-bootstrap-border-radius-base: 4px; + --talend-bootstrap-border-radius-large: 6px; + --talend-bootstrap-border-radius-small: 3px; + + /* ============================================ + SVG & ICON SIZING VARIABLES + ============================================ */ + --talend-bootstrap-svg-xs-size: 0.5rem; + --talend-bootstrap-svg-sm-size: 0.75rem; + --talend-bootstrap-svg-md-size: 1rem; + --talend-bootstrap-svg-rg-size: 1.25rem; + --talend-bootstrap-svg-lg-size: 1.5rem; + --talend-bootstrap-svg-xlg-size: 2rem; + + /* ============================================ + TABLE VARIABLES + ============================================ */ + --talend-bootstrap-table-cell-padding: 8px; + --talend-bootstrap-table-condensed-cell-padding: 5px; + + /* ============================================ + COLOR VARIABLES + ============================================ */ + --talend-bootstrap-gray-base: #000; + --talend-bootstrap-gray-darker: #222; + --talend-bootstrap-gray-dark: #333; + --talend-bootstrap-gray: #555; + --talend-bootstrap-gray-light: #777; + --talend-bootstrap-gray-lighter: #bfbfbf; + + --talend-bootstrap-body-bg: #fff; + --talend-bootstrap-text-color: #333; + + /* ============================================ + BUTTON VARIABLES + ============================================ */ + --talend-bootstrap-btn-font-weight: normal; + --talend-bootstrap-btn-default-color: #333; + --talend-bootstrap-btn-default-bg: #fff; + --talend-bootstrap-btn-default-border: #ccc; + + --talend-bootstrap-btn-font-size: 14px; + --talend-bootstrap-btn-box-shadow-width: 3px; + + /* ============================================ + FORM & INPUT VARIABLES + ============================================ */ + --talend-bootstrap-input-bg: #fff; + --talend-bootstrap-input-bg-disabled: #bfbfbf; + --talend-bootstrap-input-color: #555; + --talend-bootstrap-input-border: #ccc; + --talend-bootstrap-input-border-focus: #66afe9; + --talend-bootstrap-input-color-placeholder: #999; + + --talend-bootstrap-input-border-radius: 4px; + --talend-bootstrap-input-border-radius-large: 6px; + --talend-bootstrap-input-border-radius-small: 3px; + + --talend-bootstrap-input-height-base: 34px; + --talend-bootstrap-input-height-large: 44px; + --talend-bootstrap-input-height-small: 26px; + + --talend-bootstrap-form-group-margin-bottom: 15px; + --talend-bootstrap-legend-color: #333; + --talend-bootstrap-legend-border-color: #e5e5e5; + --talend-bootstrap-input-group-addon-bg: #bfbfbf; + --talend-bootstrap-input-group-addon-border-color: #ccc; + + /* ============================================ + DROPDOWN VARIABLES + ============================================ */ + --talend-bootstrap-dropdown-bg: #fff; + --talend-bootstrap-dropdown-border: rgba(0, 0, 0, 0.15); + --talend-bootstrap-dropdown-fallback-border: #ccc; + --talend-bootstrap-dropdown-divider-bg: #e5e5e5; + --talend-bootstrap-dropdown-link-color: #333; + --talend-bootstrap-dropdown-link-hover-color: #222; + --talend-bootstrap-dropdown-link-hover-bg: #f5f5f5; + --talend-bootstrap-dropdown-header-color: #777; + --talend-bootstrap-dropdown-caret-color: #000; + --talend-bootstrap-dropdown-caret-size: 5px; + + /* ============================================ + NAVBAR VARIABLES + ============================================ */ + --talend-bootstrap-navbar-height: 50px; + --talend-bootstrap-navbar-margin-bottom: 20px; + --talend-bootstrap-navbar-border-radius: 4px; + --talend-bootstrap-navbar-padding-horizontal: 15px; + --talend-bootstrap-navbar-padding-vertical: 15px; + + --talend-bootstrap-navbar-default-color: #777; + --talend-bootstrap-navbar-default-bg: #f8f8f8; + --talend-bootstrap-navbar-default-border: #e6e6e6; + + --talend-bootstrap-navbar-default-link-color: #777; + --talend-bootstrap-navbar-default-link-hover-color: #333; + --talend-bootstrap-navbar-default-link-hover-bg: transparent; + --talend-bootstrap-navbar-default-link-active-color: #555; + --talend-bootstrap-navbar-default-link-active-bg: #e6e6e6; + + --talend-bootstrap-navbar-brand-logo-width: 75px; + --talend-bootstrap-navbar-brand-logo-height: 20px; + --talend-bootstrap-navbar-default-toggle-hover-bg: #ddd; + --talend-bootstrap-navbar-default-toggle-icon-bar-bg: #888; + --talend-bootstrap-navbar-default-toggle-border-color: #ddd; + + --talend-bootstrap-navbar-inverse-color: #aaa; + --talend-bootstrap-navbar-inverse-bg: #222; + --talend-bootstrap-navbar-inverse-border: #080808; + + --talend-bootstrap-navbar-inverse-link-color: #aaa; + --talend-bootstrap-navbar-inverse-link-hover-color: #fff; + --talend-bootstrap-navbar-inverse-link-hover-bg: transparent; + --talend-bootstrap-navbar-inverse-link-active-color: #fff; + --talend-bootstrap-navbar-inverse-link-active-bg: #080808; + + /* ============================================ + PAGINATION & PAGER VARIABLES + ============================================ */ + --talend-bootstrap-pagination-bg: #fff; + --talend-bootstrap-pagination-border: #ddd; + --talend-bootstrap-pagination-hover-bg: #bfbfbf; + --talend-bootstrap-pagination-hover-border: #ddd; + --talend-bootstrap-pagination-disabled-color: #777; + --talend-bootstrap-pagination-disabled-bg: #fff; + --talend-bootstrap-pagination-disabled-border: #ddd; + + --talend-bootstrap-pager-bg: #fff; + --talend-bootstrap-pager-border: #ddd; + --talend-bootstrap-pager-border-radius: 15px; + --talend-bootstrap-pager-hover-bg: #bfbfbf; + + /* ============================================ + MODAL VARIABLES + ============================================ */ + --talend-bootstrap-modal-inner-padding: 15px; + --talend-bootstrap-modal-title-padding: 15px; + --talend-bootstrap-modal-title-line-height: 1.428571429; + --talend-bootstrap-modal-content-bg: #fff; + --talend-bootstrap-modal-content-border-color: rgba(0, 0, 0, 0.2); + --talend-bootstrap-modal-content-fallback-border-color: #999; + --talend-bootstrap-modal-backdrop-bg: #000; + --talend-bootstrap-modal-backdrop-opacity: 0.5; + --talend-bootstrap-modal-header-border-color: #e5e5e5; + --talend-bootstrap-modal-footer-border-color: #e5e5e5; + --talend-bootstrap-modal-header-bg: #fff; + --talend-bootstrap-modal-header-color: #000; + + --talend-bootstrap-modal-lg: 900px; + --talend-bootstrap-modal-md: 600px; + --talend-bootstrap-modal-sm: 300px; + + /* ============================================ + ALERT & STATE VARIABLES + ============================================ */ + --talend-bootstrap-alert-padding: 15px; + --talend-bootstrap-alert-border-radius: 4px; + + --talend-bootstrap-state-success-text: #3c763d; + --talend-bootstrap-state-success-bg: #dff0d8; + --talend-bootstrap-state-success-border: #d0d7d0; + + --talend-bootstrap-state-info-text: #31708f; + --talend-bootstrap-state-info-bg: #d9edf7; + --talend-bootstrap-state-info-border: #bde0f1; + + --talend-bootstrap-state-warning-text: #8a6d3b; + --talend-bootstrap-state-warning-bg: #fcf8e3; + --talend-bootstrap-state-warning-border: #faebcc; + + --talend-bootstrap-state-danger-text: #a94442; + --talend-bootstrap-state-danger-bg: #f2dede; + --talend-bootstrap-state-danger-border: #ebccd1; + + /* ============================================ + LABEL VARIABLES + ============================================ */ + --talend-bootstrap-label-default-bg: #777; + --talend-bootstrap-label-color: #fff; + + /* ============================================ + BADGE VARIABLES + ============================================ */ + --talend-bootstrap-badge-color: #fff; + --talend-bootstrap-badge-bg: #777; + --talend-bootstrap-badge-font-weight: bold; + --talend-bootstrap-badge-line-height: 1; + --talend-bootstrap-badge-border-radius: 10px; + + /* ============================================ + BREADCRUMB VARIABLES + ============================================ */ + --talend-bootstrap-breadcrumb-padding-vertical: 8px; + --talend-bootstrap-breadcrumb-padding-horizontal: 15px; + --talend-bootstrap-breadcrumb-bg: #f5f5f5; + --talend-bootstrap-breadcrumb-color: #ccc; + --talend-bootstrap-breadcrumb-active-color: #777; + --talend-bootstrap-breadcrumb-separator: '/'; + --talend-bootstrap-breadcrumb-height: 3.125rem; + + /* ============================================ + LIST GROUP VARIABLES + ============================================ */ + --talend-bootstrap-list-group-bg: #fff; + --talend-bootstrap-list-group-border: #ddd; + --talend-bootstrap-list-group-border-radius: 4px; + --talend-bootstrap-list-group-hover-bg: #f5f5f5; + + /* ============================================ + PANEL VARIABLES + ============================================ */ + --talend-bootstrap-panel-bg: #fff; + --talend-bootstrap-panel-body-padding: 15px; + --talend-bootstrap-panel-heading-padding: 10px 15px; + --talend-bootstrap-panel-footer-padding: 10px 15px; + --talend-bootstrap-panel-border-radius: 4px; + --talend-bootstrap-panel-inner-border: #ddd; + --talend-bootstrap-panel-footer-bg: #f5f5f5; + --talend-bootstrap-panel-default-text: #333; + --talend-bootstrap-panel-default-border: #ddd; + --talend-bootstrap-panel-default-heading-bg: #f5f5f5; + + /* ============================================ + TOOLTIP & POPOVER VARIABLES + ============================================ */ + --talend-bootstrap-tooltip-max-width: 200px; + --talend-bootstrap-tooltip-color: #fff; + --talend-bootstrap-tooltip-bg: #000; + --talend-bootstrap-tooltip-opacity: 0.9; + --talend-bootstrap-tooltip-arrow-width: 5px; + --talend-bootstrap-tooltip-arrow-color: #000; + + --talend-bootstrap-popover-bg: #fff; + --talend-bootstrap-popover-max-width: 276px; + --talend-bootstrap-popover-border-color: rgba(0, 0, 0, 0.2); + --talend-bootstrap-popover-fallback-border-color: #ccc; + --talend-bootstrap-popover-title-bg: #f7f7f7; + --talend-bootstrap-popover-arrow-width: 10px; + --talend-bootstrap-popover-arrow-color: #fff; + + /* ============================================ + BREAKPOINT & GRID VARIABLES + ============================================ */ + --talend-bootstrap-screen-xs: 480px; + --talend-bootstrap-screen-xs-min: 480px; + --talend-bootstrap-screen-xs-max: 767px; + + --talend-bootstrap-screen-sm: 768px; + --talend-bootstrap-screen-sm-min: 768px; + --talend-bootstrap-screen-sm-max: 991px; + + --talend-bootstrap-screen-md: 992px; + --talend-bootstrap-screen-md-min: 992px; + --talend-bootstrap-screen-md-max: 1199px; + + --talend-bootstrap-screen-lg: 1200px; + --talend-bootstrap-screen-lg-min: 1200px; + + --talend-bootstrap-grid-columns: 12; + --talend-bootstrap-grid-gutter-width: 30px; + + --talend-bootstrap-container-sm: 750px; + --talend-bootstrap-container-md: 970px; + --talend-bootstrap-container-lg: 1170px; + + /* ============================================ + Z-INDEX VARIABLES + ============================================ */ + --talend-bootstrap-zindex-navbar: 0; + --talend-bootstrap-zindex-dropdown: 8; + --talend-bootstrap-zindex-navbar-fixed: 4; + --talend-bootstrap-zindex-modal-background: 4; + --talend-bootstrap-zindex-modal: 4; + --talend-bootstrap-zindex-popover: 8; + --talend-bootstrap-zindex-tooltip: 16; + + /* ============================================ + MISCELLANEOUS + ============================================ */ + --talend-bootstrap-cursor-disabled: not-allowed; + --talend-bootstrap-caret-width-base: 4px; + --talend-bootstrap-caret-width-large: 5px; + --talend-bootstrap-component-offset-horizontal: 180px; + --talend-bootstrap-text-muted: #777; +} diff --git a/packages/theme/webpack.config.js b/packages/theme/webpack.config.js index f1e03a94215..6a01eacf105 100644 --- a/packages/theme/webpack.config.js +++ b/packages/theme/webpack.config.js @@ -28,6 +28,30 @@ module.exports = (env, argv) => { filename: 'fonts/[name][ext]', }, }, + { + test: /\.css$/, + use: [ + { + loader: isDev ? require.resolve('style-loader') : MiniCssExtractPlugin.loader, + }, + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + sourceMap: true, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + postcssOptions: { + plugins: [postcssPresetEnv({ browsers: 'last 2 versions' })], + }, + sourceMap: true, + }, + }, + ], + }, { test: /bootstrap\.scss$/, use: [