diff --git a/.changeset/short-yaks-smile.md b/.changeset/short-yaks-smile.md new file mode 100644 index 00000000000..bf46acbc158 --- /dev/null +++ b/.changeset/short-yaks-smile.md @@ -0,0 +1,5 @@ +--- +"@talend/scripts-core": minor +--- + +feat: add support for css diff --git a/docs/adr-transition-from-scss-to-css.md b/docs/adr-transition-from-scss-to-css.md new file mode 100644 index 00000000000..37866469d5b --- /dev/null +++ b/docs/adr-transition-from-scss-to-css.md @@ -0,0 +1,44 @@ +# Transition from scss to CSS [Draft] + +## Context + +Our current use of SCSS is primarily for nesting capabilities, a feature which we have found to be less essential over time. +The SCSS compilation step is adding significant overhead to our build process, and the advanced features of SASS/SCSS are largely underutilized in our projects. Simplifying our styling workflow by using plain CSS could decrease compilation time and streamline our development process. + +## Decision + +We will start a transition from using SCSS to using plain CSS in our codebase. This decision involves rewriting existing SCSS files into CSS and updating our build and development processes to remove the SASS compiler. + +## Consequences + +- Reduced Compilation Time: Removing the SCSS compilation step will decrease build times, making our development and deployment processes faster and more efficient. + +- Simplification of Code: Transitioning to CSS simplifies our stylesheets by eliminating unnecessary complexities and focusing on essential styling. + +- Ease of Maintenance: CSS is universally understood by front-end developers without the need for additional knowledge of SASS/SCSS syntax, which can make our codebase more accessible to new team members. + +- Potential Loss of Features: While this change will simplify our toolchain, we will lose some of the features provided by SCSS, such as variables and mixins. However, given our current usage primarily involves nesting, this loss is considered manageable. + +- Rewriting Effort: Existing SCSS files need to be carefully rewritten in CSS. This task requires a one-time development effort to ensure that styles remain consistent and functional across the platform. + +## Implementation Plan + +- Provide a tool to make it possible. + +- Iteration will be made over the code every time a component is modified. + +- Gradual Refactoring: Implement the transition in phases, starting with less complex stylesheets. This approach minimizes risk by allowing iterative testing and adjustment. + Update Build Process: Modify the build tools and processes to remove SASS compilers and integrate with the new CSS-based workflow. + +- Documentation and Training: Update project documentation to reflect the new styling practices and conduct training sessions for the development team on effective CSS management without SCSS features. + +- By documenting this decision in this ADR, we ensure that the rationale and implications are clear and well-communicated to all stakeholders involved. This change aligns with our goals of streamlining our development processes and maintaining a robust and efficient codebase. + +## Tips + +A [script](https://gist.github.com/jmfrancois/16b52b313d35eef589fa2935431d4b70) has been created for this occasion + +`node sassToCss.js /home/jmfrancois/ui/packages/design-system/src /home/jmfrancois/ui/packages/design-system/src` + +Before applying this script you can use this regexp +`var\(([a-z-]*), (.*)\)` to remove the default value in `_tokens.scss` before applying the script diff --git a/packages/design-system/css.js b/packages/design-system/css.js new file mode 100755 index 00000000000..da4a9e59e25 --- /dev/null +++ b/packages/design-system/css.js @@ -0,0 +1,91 @@ +#!/usr/bin/env node +/* eslint-disable no-console */ +const fs = require('fs'); +const sass = require('sass'); +const path = require('path'); +const pathToFileURL = require('url').pathToFileURL; + +const CWD = process.cwd(); +const nodeModulesPath = path.join(CWD, 'node_modules'); +const SRC_PATH = process.argv[2]; // /home/user/project/src +const TARGET_PATH = process.argv[3]; // /home/user/project/lib + +function getPkgRoot(filename) { + const dir = path.dirname(filename); + if (fs.existsSync(path.join(dir, 'package.json'))) { + return path.join(dir, '/'); + } + return getPkgRoot(dir); +} + +function getInfo(importPath) { + let scope, name, rest, mainPath; + if (importPath.startsWith('@')) { + [scope, name, ...rest] = importPath.split('/'); + mainPath = require.resolve(`${scope}/${name}`); + } else { + [name, ...rest] = importPath.split('/'); + mainPath = require.resolve(name); + } + const info = { + base: getPkgRoot(mainPath), + url: rest.join('/'), + }; + return info; +} + +function transform(filename) { + const scssFileDirectory = path.dirname(filename); + let content; + let target = filename.replace(SRC_PATH, TARGET_PATH); + + if (filename.match(/\/_.*\.scss/) === null) { + //compile + // https://sass-lang.com/documentation/js-api/interfaces/Options + const opts = { + sourceMap: true, + loadPaths: [nodeModulesPath, scssFileDirectory, CWD], + importers: [ + { + findFileUrl(url) { + // Load paths only support relative URLs. + if (url.startsWith('~')) { + const info = getInfo(url.replace('~', '')); + // console.log(new URL(info.url, pathToFileURL(info.base))); + return new URL(info.url, pathToFileURL(info.base)); + } + return new URL(url, pathToFileURL(loadPath)); + }, + }, + ], + }; + const sassResult = sass.compile(filename, { ...opts }); + content = sassResult.css; + target = target.replace('.scss', '.css'); + // console.log('transform', filename, target); + } else { + content = fs.readFileSync(filename).toString(); + // console.log('copy', filename, target); + } + if (!fs.existsSync(path.dirname(target))) { + fs.mkdirSync(path.dirname(target), { recursive: true }); + } + fs.writeFileSync(target, content); +} + +function findAllSrcFiles(current = SRC_PATH, buff = []) { + return fs.readdirSync(current, { withFileTypes: true }).reduce((acc, info) => { + if (info.isDirectory()) { + return acc.concat(findAllSrcFiles(path.join(current, info.name))); + } + if (info.name.endsWith('.scss')) { + acc.push(path.join(current, info.name)); + } + return acc; + }, buff); +} +const result = findAllSrcFiles(); + +result.forEach(filename => { + transform(filename); +}); 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/src/components/Accordion/Primitive/CollapsiblePanel.module.css b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.css new file mode 100644 index 00000000000..07381976c2e --- /dev/null +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.css @@ -0,0 +1,20 @@ +.panelWrapper { + box-shadow: var(--coral-elevation-shadow-neutral-s); + overflow: hidden; +} +.panelWrapper__alone { + border-radius: var(--coral-radius-s); +} +.panelWrapper__first { + border-radius: var(--coral-radius-s) var(--coral-radius-s) 0 0; +} +.panelWrapper__last { + border-radius: 0 0 var(--coral-radius-s) var(--coral-radius-s); +} +.panelWrapper__notLast { + border-bottom: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} + +.panelContent { + padding: var(--coral-spacing-xs); +} \ No newline at end of file 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 a4a8e6c18d3..00000000000 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use '~@talend/design-tokens/lib/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..3a9a1aad4a5 100644 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx @@ -5,11 +5,10 @@ import classNames from 'classnames'; import { DataAttributes } from '../../../types'; import { useId } from '../../../useId'; import { variants } from '../../Status/Primitive/StatusPrimitive'; +import styles from './CollapsiblePanel.module.css'; import CollapsiblePanelHeader from './CollapsiblePanelHeader'; import { PanelHeaderAction } from './types'; -import styles from './CollapsiblePanel.module.scss'; - type CollapsiblePanelCommonPropsType = { children: ReactChild; managed?: boolean; 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..2d5c4d27432 --- /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); + background-color: var(--coral-color-accent-background-weak); + width: 100%; + border: none; + min-height: var(--coral-sizing-l); + padding: var(--coral-spacing-xs); +} +.headerWrapper__size-s { + min-height: var(--coral-sizing-s); + padding: var(--coral-spacing-xxs); +} +.headerWrapper__clickable { + cursor: pointer; +} +.headerWrapper__clickable:hover { + background-color: var(--coral-color-accent-background-weak-hover); +} +.headerWrapper__clickable:active { + background-color: var(--coral-color-accent-background-weak-active); +} +.headerWrapper > .headerTitle { + flex-grow: 1; +} +.headerWrapper > *:not(.headerTitle) { + flex-shrink: 0; +} + +.headerTitle { + font: var(--coral-heading-m); + text-align: left; +} +.headerTitle__size-s { + font: var(--coral-heading-s); +} +.headerTitle__disabled { + color: var(--coral-color-neutral-text-disabled); +} + +.iconWrapper { + width: var(--coral-sizing-s); + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; +} \ No newline at end of file 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 32d161ae85d..00000000000 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss +++ /dev/null @@ -1,60 +0,0 @@ -@use '~@talend/design-tokens/lib/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 b94c8a4bfb7..dc1e67392c3 100644 --- a/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx @@ -10,10 +10,9 @@ import { SizedIcon } from '../../Icon'; import { StackHorizontal } from '../../Stack'; import { Status } from '../../Status'; import { variants } from '../../Status/Primitive/StatusPrimitive'; +import styles from './CollapsiblePanelHeader.module.css'; import { PanelHeaderAction } from './types'; -import styles from './CollapsiblePanelHeader.module.scss'; - export type CollapsiblePanelHeaderPropsType = { controlId: string; sectionId: 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..a7db47454d9 --- /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); + font: var(--coral-paragraph-m-bold); + height: var(--coral-sizing-xs); + padding: var(--coral-spacing-xxs) var(--coral-spacing-xs); + color: var(--coral-color-accent-text); +} +.badge__button:hover { + background: var(--coral-color-accent-background-weak-hover); + color: var(--coral-color-accent-text-strong-hover); +} +.badge__button:active { + background: var(--coral-color-accent-background-weak-active); + color: var(--coral-color-accent-text-strong-active); +} \ No newline at end of file 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 8bed31946f1..00000000000 --- a/packages/design-system/src/components/Badge/button/BadgeButton.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '~@talend/design-tokens/lib/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..ceb2e9cc0f9 100644 --- a/packages/design-system/src/components/Badge/button/BadgeButton.tsx +++ b/packages/design-system/src/components/Badge/button/BadgeButton.tsx @@ -4,8 +4,7 @@ import classnames from 'classnames'; 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..0f14ac3d641 --- /dev/null +++ b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.css @@ -0,0 +1,17 @@ +.badge { + display: inline-block; + background: var(--coral-color-neutral-background); + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + border-radius: var(--coral-radius-s); +} + +.badge__label { + font: var(--coral-paragraph-m); + padding: var(--coral-spacing-xxs); +} + +.badge__divider { + align-items: center; + display: flex; + flex-direction: row; +} \ No newline at end of file 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 42793906fab..00000000000 --- a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '~@talend/design-tokens/lib/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..bd40f081c10 100644 --- a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx +++ b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx @@ -5,8 +5,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..c15145bca8c --- /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); + font: var(--coral-heading-s); + padding: 0 var(--coral-spacing-xxs); +} + +.badge-dropdown__button__caret { + align-items: center; + display: inline-flex; + transition: transform var(--coral-transition-fast); +} + +.badge-dropdown__button[aria-expanded=true] .badge-dropdown__button__caret { + transform: rotate(-180deg); +} \ No newline at end of file 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 88ace286784..00000000000 --- a/packages/design-system/src/components/Badge/variants/BadgeDropdown.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '~@talend/design-tokens/lib/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..c95456345d4 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx +++ b/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx @@ -13,8 +13,7 @@ import BadgePrimitive, { BadgeDropdownItem, 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..286ef06b330 --- /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); + font: var(--coral-heading-s); + padding: 0 var(--coral-spacing-xxs); +} \ No newline at end of file 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 83d9e4c1e9d..00000000000 --- a/packages/design-system/src/components/Badge/variants/BadgeValue.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '~@talend/design-tokens/lib/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..f919fb6651d 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeValue.tsx +++ b/packages/design-system/src/components/Badge/variants/BadgeValue.tsx @@ -5,8 +5,7 @@ import classnames from 'classnames'; 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..be2e5cdcc9d --- /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); + min-width: var(--coral-sizing-m); + position: relative; +} +.breadcrumbs .entry__collapsed { + flex-shrink: 0; +} +.breadcrumbs .entry .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} \ No newline at end of file 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 88525307d1e..00000000000 --- a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use '~@talend/design-tokens/lib/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..b36f8aa6fde 100644 --- a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -1,15 +1,16 @@ import { forwardRef, HTMLAttributes, ReactElement, Ref } from 'react'; import { useTranslation } from 'react-i18next'; + import classnames from 'classnames'; -import styles from './Breadcrumbs.module.scss'; -import { Link } from '../Link'; -import { Dropdown } from '../Dropdown/Dropdown'; import { ButtonTertiary } from '../Button'; -import { StackHorizontal } from '../Stack'; +import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; import { Divider } from '../Divider'; +import { Dropdown } from '../Dropdown/Dropdown'; +import { Link } from '../Link'; +import { StackHorizontal } from '../Stack'; import { VisuallyHidden } from '../VisuallyHidden'; -import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; +import styles from './Breadcrumbs.module.css'; type BreadcrumbsLink = { label: string; diff --git a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx index ebbcbd43197..4517af872e6 100644 --- a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx +++ b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx @@ -12,8 +12,7 @@ import { SizedIcon } from '../../Icon'; 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..e01e1d39e4b --- /dev/null +++ b/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.css @@ -0,0 +1,60 @@ +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font: var(--coral-paragraph-m-bold); + border-radius: var(--coral-radius-s); + height: var(--coral-sizing-m); + padding: var(--coral-spacing-xxs) var(--coral-spacing-m); + white-space: nowrap; +} + +.button .button__icon { + display: inline-flex; + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + align-items: center; +} + +.button .button__caret { + display: inline-flex; + align-items: center; + transition: transform var(--coral-transition-fast); +} + +.button .button__loading { + display: inline-flex; + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + align-items: center; + color: var(--coral-color-accent-icon); +} +.button .button__loading svg { + /* // Safari fix */ + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); +} + +.button .size-S { + height: var(--coral-sizing-s); + padding: var(--coral-spacing-xxs var(--coral-spacing-xs)); +} + +.button:disabled, +.button[aria-disabled='true'], +.button[aria-busy='true'] { + color: var(--coral-color-neutral-text-disabled); + border-color: var(--coral-color-neutral-border-disabled); +} + +.button[aria-expanded='true'] .button__caret { + transform: rotate(-180deg); +} + +.button.size-S .button__icon { + display: inline-flex; + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); + 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 6cdaf74ca31..00000000000 --- a/packages/design-system/src/components/Button/Primitive/ButtonStyles.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use '~@talend/design-tokens/lib/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..5df50594b01 --- /dev/null +++ b/packages/design-system/src/components/Button/variations/ButtonDestructive.module.css @@ -0,0 +1,16 @@ +.destructive { + color: var(--coral-color-danger-text-weak); + background: var(--coral-color-danger-background-strong); +} +.destructive:hover { + color: var(--coral-color-danger-text-weak-hover); + background: var(--coral-color-danger-background-strong-hover); +} +.destructive:active { + color: var(--coral-color-danger-text-weak-active); + background: var(--coral-color-danger-background-strong-active); +} +.destructive:disabled, .destructive[aria-disabled=true], .destructive[aria-busy=true] { + background: var(--coral-color-neutral-background-disabled); + color: var(--coral-color-neutral-text-disabled); +} \ No newline at end of file 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 8e81dfc2a9d..00000000000 --- a/packages/design-system/src/components/Button/variations/ButtonDestructive.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '~@talend/design-tokens/lib/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..d31e8ff9b3f 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 ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; +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..2847a5916bc --- /dev/null +++ b/packages/design-system/src/components/Button/variations/ButtonPrimary.module.css @@ -0,0 +1,16 @@ +.primary { + color: var(--coral-color-accent-text-weak); + background: var(--coral-color-accent-background-strong); +} +.primary:hover { + color: var(--coral-color-accent-text-weak-hover); + background: var(--coral-color-accent-background-strong-hover); +} +.primary:active { + color: var(--coral-color-accent-text-weak-active); + background: var(--coral-color-accent-background-strong-active); +} +.primary:disabled, .primary[aria-disabled=true], .primary[aria-busy=true] { + color: var(--coral-color-neutral-text-disabled); + background: var(--coral-color-neutral-background-disabled); +} \ No newline at end of file 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 9dfdbda4406..00000000000 --- a/packages/design-system/src/components/Button/variations/ButtonPrimary.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '~@talend/design-tokens/lib/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 f842f596661..f7cc29f2f8a 100644 --- a/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx @@ -1,7 +1,7 @@ import { forwardRef, Ref } from 'react'; -import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; -import styles from './ButtonPrimary.module.scss'; +import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; +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..81a5a0ebf22 --- /dev/null +++ b/packages/design-system/src/components/Button/variations/ButtonSecondary.module.css @@ -0,0 +1,19 @@ +.secondary { + color: var(--coral-color-accent-text); + border: var(--coral-border-s-solid) var(--coral-color-accent-border); +} +.secondary:hover { + color: var(--coral-color-accent-text-strong-hover); + border: var(--coral-border-s-solid) var(--coral-color-accent-border-hover); + background: var(--coral-color-accent-background-weak-hover); +} +.secondary:active { + color: var(--coral-color-accent-text-strong-active); + border: var(--coral-border-s-solid) var(--coral-color-accent-border-active); + background: var(--coral-color-accent-background-weak-active); +} +.secondary:disabled, .secondary[aria-disabled=true], .secondary[aria-busy=true] { + background: transparent; + color: var(--coral-color-neutral-text-disabled); + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); +} \ No newline at end of file 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 8dbd9bb909b..00000000000 --- a/packages/design-system/src/components/Button/variations/ButtonSecondary.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use '~@talend/design-tokens/lib/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..f5e72287fa1 100644 --- a/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx @@ -1,8 +1,8 @@ import { forwardRef, Ref } from 'react'; -import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; -import styles from './ButtonSecondary.module.scss'; +import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; import { ButtonDestructivePropsType } from './ButtonDestructive'; +import styles from './ButtonSecondary.module.css'; export type ButtonSecondaryPropsType = Omit< BaseButtonProps, 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..18725d6a421 --- /dev/null +++ b/packages/design-system/src/components/Button/variations/ButtonTertiary.module.css @@ -0,0 +1,15 @@ +.tertiary { + color: var(--coral-color-accent-text); +} +.tertiary:hover { + color: var(--coral-color-accent-text-strong-hover); + background: var(--coral-color-accent-background-weak-hover); +} +.tertiary:active { + color: var(--coral-color-accent-text-strong-active); + background: var(--coral-color-accent-background-weak-active); +} +.tertiary:disabled, .tertiary[aria-disabled=true], .tertiary[aria-busy=true] { + color: var(--coral-color-neutral-text-disabled); + background: transparent; +} \ No newline at end of file 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 407fd34eaab..00000000000 --- a/packages/design-system/src/components/Button/variations/ButtonTertiary.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '~@talend/design-tokens/lib/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..8fad0838f88 100644 --- a/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx @@ -1,8 +1,8 @@ import { forwardRef, Ref } from 'react'; -import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; -import styles from './ButtonTertiary.module.scss'; +import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive'; import { ButtonDestructivePropsType } from './ButtonDestructive'; +import styles from './ButtonTertiary.module.css'; export type ButtonTertiaryPropsType = Omit< BaseButtonProps, 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..90bbc65f240 --- /dev/null +++ b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.css @@ -0,0 +1,9 @@ +.button { + text-decoration: none; +} +.button:hover, .button:focus { + text-decoration: none; +} +.button [data-test="link.icon.external"] { + top: 0; +} \ No newline at end of file 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 7d6282209b9..00000000000 --- a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '~@talend/design-tokens/lib/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..aa68cc65c17 100644 --- a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx @@ -1,14 +1,13 @@ import { forwardRef, Ref } from 'react'; -import classnames from 'classnames'; -import { Linkable, LinkableType } from '../../Linkable'; -import { StackHorizontal } from '../../Stack'; +import classnames from 'classnames'; 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 { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; +import { Linkable, LinkableType } from '../../Linkable'; +import { StackHorizontal } from '../../Stack'; +import linkStyles from './ButtonPrimitiveAsLink.module.css'; export type BaseButtonPropsAsLink = LinkableType & Omit, 'isDropdown' | 'isLoading'>; diff --git a/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx index b634bb30536..967a2d47c57 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx @@ -1,8 +1,8 @@ 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 { AvailableSizes } from '../../Button/Primitive/ButtonPrimitive'; +import styles from '../../Button/variations/ButtonDestructive.module.css'; +import ButtonPrimitiveAsLink, { BaseButtonPropsAsLink } from '../Primitive/ButtonPrimitiveAsLink'; 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..4e9280a4e90 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonPrimaryAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonPrimaryAsLink.tsx @@ -1,8 +1,8 @@ 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 { AvailableSizes } from '../../Button/Primitive/ButtonPrimitive'; +import styles from '../../Button/variations/ButtonPrimary.module.css'; +import ButtonPrimitiveAsLink, { BaseButtonPropsAsLink } from '../Primitive/ButtonPrimitiveAsLink'; 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..aae5da7a7cd 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonSecondaryAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonSecondaryAsLink.tsx @@ -1,8 +1,8 @@ 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 { AvailableSizes } from '../../Button/Primitive/ButtonPrimitive'; +import styles from '../../Button/variations/ButtonSecondary.module.css'; +import ButtonPrimitiveAsLink, { BaseButtonPropsAsLink } from '../Primitive/ButtonPrimitiveAsLink'; 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..210a73a4c11 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonTertiaryAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonTertiaryAsLink.tsx @@ -1,8 +1,8 @@ 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 { AvailableSizes } from '../../Button/Primitive/ButtonPrimitive'; +import styles from '../../Button/variations/ButtonTertiary.module.css'; +import ButtonPrimitiveAsLink, { BaseButtonPropsAsLink } from '../Primitive/ButtonPrimitiveAsLink'; 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..189646592dd --- /dev/null +++ b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.css @@ -0,0 +1,82 @@ +.buttonIcon { + display: inline-flex; + justify-content: center; + align-items: center; + border: 0; + background: transparent; + cursor: pointer; + padding: 0; + width: var(--coral-sizing-m); + height: var(--coral-sizing-m); + color: var(--coral-color-accent-icon); + border-radius: var(--coral-radius-round); + transition: var(--coral-transition-fast); + flex-shrink: 0; +} +.buttonIcon__icon { + display: inline-flex; + justify-content: center; + align-items: center; + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); +} +.buttonIcon__icon svg { + pointer-events: none; +} +.buttonIcon.size_S { + width: var(--coral-sizing-s); + height: var(--coral-sizing-s); +} +.buttonIcon.size_XS { + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + border-radius: var(--coral-radius-s); +} +.buttonIcon.size_XS .buttonIcon__icon { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); +} +.buttonIcon.floating { + background: var(--coral-color-neutral-background); + box-shadow: var(--coral-elevation-shadow-neutral-m); +} +.buttonIcon.toggle { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); +} +.buttonIcon.toggle:hover { + border: var(--coral-border-s-solid) var(--coral-color-accent-border-hover); +} +.buttonIcon.toggle:active { + border: var(--coral-border-s-solid) var(--coral-color-accent-border-active); +} +.buttonIcon.toggle:disabled { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); +} +.buttonIcon.toggle[aria-pressed=true] { + color: var(--coral-color-accent-text-weak); + background: var(--coral-color-accent-background-strong); +} +.buttonIcon.toggle[aria-pressed=true]:hover { + color: var(--coral-color-accent-text-weak-hover); + background: var(--coral-color-accent-background-strong-hover); +} +.buttonIcon.toggle[aria-pressed=true]:active { + color: var(--coral-color-accent-text-weak-active); + background: var(--coral-color-accent-background-strong-active); +} +.buttonIcon.toggle[aria-pressed=true]:disabled { + color: var(--coral-color-neutral-text-disabled); + background: var(--coral-color-neutral-background-disabled); +} +.buttonIcon:hover { + color: var(--coral-color-accent-icon-hover); + background: var(--coral-color-accent-background-weak-hover); +} +.buttonIcon:active { + color: var(--coral-color-accent-icon-active); + background: var(--coral-color-accent-background-weak-active); +} +.buttonIcon:disabled { + color: var(--coral-color-neutral-text-disabled); + cursor: not-allowed; +} \ No newline at end of file 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 4e932e225a3..00000000000 --- a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIcon.module.scss +++ /dev/null @@ -1,101 +0,0 @@ -@use '~@talend/design-tokens/lib/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..48d7b432e99 100644 --- a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx +++ b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx @@ -1,5 +1,5 @@ import { forwardRef } from 'react'; -import type { MouseEvent, ReactElement, ButtonHTMLAttributes, Ref } from 'react'; +import type { ButtonHTMLAttributes, MouseEvent, ReactElement, Ref } from 'react'; import classnames from 'classnames'; @@ -12,8 +12,7 @@ import { Clickable } from '../../Clickable'; 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..6b87b3024c8 --- /dev/null +++ b/packages/design-system/src/components/Card/Card.module.css @@ -0,0 +1,11 @@ +.card { + width: 100%; + height: 100%; + box-shadow: var(--coral-elevation-shadow-neutral-m); + border-radius: var(--coral-radius-m); + padding: var(--coral-spacing-xl); + background-color: var(--coral-color-neutral-background); +} +.card__header, .card__body { + width: 100%; +} \ No newline at end of file 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 8571f0aa18d..00000000000 --- a/packages/design-system/src/components/Card/Card.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '~@talend/design-tokens/lib/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..6d8421128f1 100644 --- a/packages/design-system/src/components/Card/Card.tsx +++ b/packages/design-system/src/components/Card/Card.tsx @@ -1,8 +1,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..0810f6db62d --- /dev/null +++ b/packages/design-system/src/components/Clickable/Clickable.module.css @@ -0,0 +1,12 @@ +.clickable { + cursor: pointer; + margin: 0; + padding: 0; + border: none; + line-height: 1; + background: transparent; + transition: var(--coral-transition-fast); +} +.clickable:disabled, .clickable[aria-disabled=true], .clickable[aria-busy=true] { + cursor: not-allowed; +} \ No newline at end of file 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 d5115bf1194..00000000000 --- a/packages/design-system/src/components/Clickable/Clickable.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '~@talend/design-tokens/lib/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..1b2124c7e5a 100644 --- a/packages/design-system/src/components/Clickable/Clickable.tsx +++ b/packages/design-system/src/components/Clickable/Clickable.tsx @@ -1,7 +1,8 @@ -import { forwardRef, MouseEvent, ReactNode, Ref, HTMLProps } from 'react'; +import { forwardRef, HTMLProps, MouseEvent, ReactNode, Ref } 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..1abb3c775b4 --- /dev/null +++ b/packages/design-system/src/components/Combobox/Combobox.module.css @@ -0,0 +1,95 @@ +.combobox__input { + background: transparent; + color: var(--coral-color-neutral-text); + padding: var(--coral-spacing-xs); + font: var(--coral-paragraph-m); + line-height: 1; + border: 0; + margin: 0; + transition: var(--coral-transition-instant); + display: block; + flex-grow: 1; + width: 100%; + border: var(--coral-border-s-solid) var(--coral-color-neutral-border); + box-shadow: 0 0 0 0 transparent; + border-radius: var(--coral-radius-s); + transition: var(--coral-transition-instant); + background: var(--coral-color-neutral-background); + height: 1.875rem; +} +.combobox__input:only-child { + border-radius: var(--coral-radius-s); +} +.combobox__input:disabled, .combobox__input_disabled { + color: var(--coral-color-neutral-text-disabled); + cursor: not-allowed; +} +.combobox__input_readOnly { + color: var(--coral-color-neutral-text); +} +.combobox__input:focus { + outline: 0; +} +.combobox__input:disabled { + color: var(--coral-color-neutral-text-disabled); +} +.combobox__input::placeholder { + color: var(--coral-color-neutral-text-weak); + opacity: var(--coral-opacity-s); +} +.combobox__input[disabled] { + opacity: 1; +} +.combobox__input[disabled] > option { + color: var(--coral-color-neutral-text); +} +.combobox__input:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-strong-hover); +} +.combobox__input_disabled { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); +} +.combobox__input_readOnly { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + background: var(--coral-color-neutral-background-strong); +} +.combobox__input_disabled:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); +} +.combobox__input_readOnly:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.combobox__input:focus-within, .combobox__input:focus { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); + box-shadow: 0 0 0 0.0625rem var(--coral-color-accent-border); +} +.combobox__input_borderError { + border: var(--coral-border-s-solid) var(--coral-color-danger-border); +} +.combobox__input_borderError:hover { + border: var(--coral-border-s-solid) var(--coral-color-danger-border-hover); +} +.combobox__input_borderError:focus-within, .combobox__input_borderError:focus { + border: var(--coral-border-s-solid) var(--coral-color-danger-border); + box-shadow: 0 0 0 0.0625rem var(--coral-color-danger-border); +} +.combobox [role=listbox] { + margin-top: var(--coral-spacing-xs); + background: var(--coral-color-neutral-background); + border-radius: var(--coral-radius-s); + box-shadow: var(--coral-elevation-shadow-neutral-m); + width: var(--coral-sizing-xxxl); + z-index: var(--coral-elevation-layer-interactive-front); +} +.combobox [role=option] { + padding: var(--coral-spacing-xxs) var(--coral-spacing-s); + cursor: pointer; +} +.combobox [role=option]:hover { + background: var(--coral-color-accent-background-weak-hover); + color: var(--coral-color-accent-text-strong-hover); +} +.combobox [role=combobox]:focus + [role=listbox] [aria-selected=true] { + background: var(--coral-color-accent-background-weak-active); + color: var(--coral-color-accent-text-strong-active); +} \ No newline at end of file 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 bab40e2e9ff..00000000000 --- a/packages/design-system/src/components/Combobox/Combobox.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '~@talend/design-tokens/lib/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..6b5575ec880 100644 --- a/packages/design-system/src/components/Combobox/Combobox.tsx +++ b/packages/design-system/src/components/Combobox/Combobox.tsx @@ -1,10 +1,9 @@ -import { useState, useCallback, useEffect, useRef, FocusEvent, KeyboardEvent } from 'react'; +import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react'; 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..18a591cec28 --- /dev/null +++ b/packages/design-system/src/components/Divider/Divider.module.css @@ -0,0 +1,15 @@ +.divider { + border: none; +} +.divider[aria-orientation=horizontal] { + width: 100%; + margin: 0; + border-top: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.divider[aria-orientation=vertical] { + margin: 0; + display: inline-block; + min-height: 2ch; + height: 100%; + border-left: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} \ No newline at end of file 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 87d35b1e927..00000000000 --- a/packages/design-system/src/components/Divider/Divider.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '~@talend/design-tokens/lib/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..67a421ead44 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 { forwardRef, HTMLAttributes, Ref, 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..2d2b8a7ad80 --- /dev/null +++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.css @@ -0,0 +1,26 @@ +.drawer { + width: var(--coral-sizing-maximal); + height: 100%; + background: var(--coral-color-neutral-background); + display: flex; +} +.drawer .header { + flex-grow: 0; + flex-shrink: 0; + flex-basis: var(--coral-sizing-l); + font: var(--coral-heading-m); + display: flex; +} +.drawer .body { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + overflow: auto; + display: flex; +} +.drawer .footer { + flex-grow: 0; + flex-shrink: 0; + flex-basis: calc(var(--coral-sizing-l) + 2 * var(--coral-spacing-xs)); + display: flex; +} \ No newline at end of file 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 e18430463d6..00000000000 --- a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '~@talend/design-tokens/lib/tokens'; - -.drawer { - width: tokens.$coral-sizing-maximal; - height: 100%; - background: tokens.$coral-color-neutral-background; - display: flex; - - .header { - flex-grow: 0; - flex-shrink: 0; - flex-basis: tokens.$coral-sizing-l; - font: tokens.$coral-heading-m; - - display: flex; - } - - .body { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 0; - overflow: auto; - - 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 3d85e2affde..aef83adb239 100644 --- a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx +++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx @@ -1,8 +1,8 @@ import { forwardRef } from 'react'; -import type { Ref, ReactNode } from 'react'; -import { StackVertical } from '../../Stack'; +import type { ReactNode, Ref } from 'react'; -import theme from './PrimitiveDrawer.module.scss'; +import { StackVertical } from '../../Stack'; +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..f382d03aae1 --- /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); + z-index: var(--coral-elevation-layer-standard-front); + transition: transform var(--coral-transition-fast); +} \ No newline at end of file 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 d9c9eaf78ca..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'; - -.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 3157baf9cca..5d32e367af5 100644 --- a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx +++ b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx @@ -1,10 +1,10 @@ -import { useEffect, useState, cloneElement } from 'react'; +import { cloneElement, useEffect, useState } from 'react'; import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from 'react'; import { Transition } from 'react-transition-group'; -import { PrimitiveDrawer } from '../../Primitive/PrimitiveDrawer'; -import theme from './FloatingDrawer.module.scss'; import { useId } from '../../../../useId'; +import { PrimitiveDrawer } from '../../Primitive/PrimitiveDrawer'; +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..8b5468267d7 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx @@ -7,8 +7,7 @@ import { DeprecatedIconNames } from '../../../types'; 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..3594c0aeab0 --- /dev/null +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.css @@ -0,0 +1,5 @@ +.divider { + margin: 0; + border: none; + border-top: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} \ No newline at end of file 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 5eae3152dbd..00000000000 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '~@talend/design-tokens/lib/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..3e2ceca6ca3 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 { forwardRef, HTMLAttributes, Ref } 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..36a89b4cb89 --- /dev/null +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.css @@ -0,0 +1,40 @@ +.dropdownEntry { + background: var(--coral-color-accent-background-weak); + display: flex; + align-items: center; + width: 100%; + min-width: 0; + color: var(--coral-color-neutral-text); + font: var(--coral-paragraph-m); + transition: var(--coral-transition-fast); + padding: var(--coral-spacing-xxs) var(--coral-spacing-s); + text-align: start; +} +.dropdownEntry > span { + min-width: 0; +} +.dropdownEntry > span:global(.checked) { + font-weight: 600; +} +.dropdownEntry .buttonIcon { + margin-right: var(--coral-spacing-xxs); + 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); + color: var(--coral-color-accent-text-strong-hover); +} +.dropdownEntry:active { + background: var(--coral-color-accent-background-weak-active); + color: var(--coral-color-accent-text-strong-active); +} +.dropdownEntry:disabled { + background: var(--coral-color-neutral-background); + color: var(--coral-color-neutral-text-disabled); +} \ No newline at end of file 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 97731f49726..00000000000 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownEntry.module.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use '~@talend/design-tokens/lib/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 2f1cffa3786..69a55f6d0c3 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx @@ -1,7 +1,7 @@ import { forwardRef, ReactElement, Ref } from 'react'; -import { Linkable, LinkableType } from '../../Linkable'; -import styles from './DropdownEntry.module.scss'; +import { Linkable, LinkableType } from '../../Linkable'; +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..348e80dbd29 --- /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); + position: absolute; + width: max-content; + top: 0; + left: 0; +} +.dropdownShell .animatedZone { + background: var(--coral-color-neutral-background); + border-radius: var(--coral-radius-s); + box-shadow: var(--coral-elevation-shadow-neutral-m); + max-height: var(--coral-sizing-maximal); + overflow: auto; + min-width: calc(var(--coral-sizing-maximal) / 2); + max-width: var(--coral-sizing-maximal); + transition: var(--coral-transition-fast); +} \ No newline at end of file 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 ce144eb6d44..00000000000 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '~@talend/design-tokens/lib/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..3ed4b123e88 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx @@ -1,7 +1,8 @@ import { forwardRef } from 'react'; import type { HTMLAttributes, ReactNode } from 'react'; -import styles from './DropdownShell.module.scss'; + import { StackVertical } from '../../Stack'; +import styles from './DropdownShell.module.css'; type ShellProps = HTMLAttributes & { onClick: () => void; 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..0983f54d8e3 --- /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); + min-height: var(--coral-sizing-s); + display: inline-flex; + justify-content: flex-start; + align-items: center; + white-space: nowrap; + width: 100%; + color: var(--coral-color-neutral-text); + font: var(--coral-paragraph-m-bold); + padding: var(--coral-spacing-xxs) var(--coral-spacing-s); + max-width: var(--coral-sizing-maximal); +} \ No newline at end of file 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 f14b12359d5..00000000000 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '~@talend/design-tokens/lib/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..e53cafbeaa0 --- /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); + text-align: center; +} +.emptyState .title { + font: var(--coral-heading-s); + color: var(--coral-color-neutral-text); +} +.emptyState .description { + font: var(--coral-paragraph-m); + color: var(--coral-color-neutral-text); +} \ No newline at end of file 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 144b394df04..00000000000 --- a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '~@talend/design-tokens/lib/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..febabe22943 100644 --- a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx +++ b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx @@ -1,15 +1,14 @@ import { forwardRef, HTMLAttributes, ReactElement, Ref } from 'react'; import { useTranslation } from 'react-i18next'; -import { StackVertical } from '../../Stack'; -import { Link } from '../../Link'; import { ButtonPrimary } from '../../Button'; -import { ButtonPrimaryAsLink } from '../../ButtonAsLink'; import { ButtonPrimaryPropsType } from '../../Button/variations/ButtonPrimary'; +import { ButtonPrimaryAsLink } from '../../ButtonAsLink'; import { ButtonPrimaryAsLinkPropsType } from '../../ButtonAsLink/variations/ButtonPrimaryAsLink'; - -import styles from './EmptyStatePrimitive.module.scss'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants'; +import { Link } from '../../Link'; +import { StackVertical } from '../../Stack'; +import styles from './EmptyStatePrimitive.module.css'; type CallbackTypes = | (Omit, 'size'> & { actionType: 'button' }) diff --git a/packages/design-system/src/components/Enumeration/Enumeration.component.tsx b/packages/design-system/src/components/Enumeration/Enumeration.component.tsx index b575bfe704c..12257b47573 100644 --- a/packages/design-system/src/components/Enumeration/Enumeration.component.tsx +++ b/packages/design-system/src/components/Enumeration/Enumeration.component.tsx @@ -5,12 +5,11 @@ import { AutoSizer, InfiniteLoader, List } from 'react-virtualized'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; import { EmptyState } from '../EmptyState'; import { StackHorizontal } from '../Stack'; +import styles from './Enumeration.module.css'; import { EnumerationMode, EnumerationProps, UiEnumerationItem } from './Enumeration.types'; import { EnumerationHeader } from './EnumerationHeader/EnumerationHeader.component'; import { EnumerationItem } from './EnumerationItem/EnumerationItem.component'; -import styles from './Enumeration.module.scss'; - const ENUMERATION_ITEM_HEIGHT = 38; export const Enumeration = ({ 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..892407f34ba --- /dev/null +++ b/packages/design-system/src/components/Enumeration/Enumeration.module.css @@ -0,0 +1,21 @@ +.enumeration { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border); + border-radius: var(--coral-radius-m); + 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); +} \ No newline at end of file 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 831d7e3e445..00000000000 --- a/packages/design-system/src/components/Enumeration/Enumeration.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '~@talend/design-tokens/lib/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..bcda1dfb64c 100644 --- a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.component.tsx +++ b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.component.tsx @@ -9,10 +9,9 @@ import { InlineEditing } from '../../InlineEditing'; import { InlineMessageDestructive } from '../../InlineMessage'; import { StackHorizontal, StackVertical } from '../../Stack'; import { EnumerationMode } from '../Enumeration.types'; +import styles from './EnumerationHeader.module.css'; import { EnumerationHeaderProps } from './EnumerationIHeader.types'; -import styles from './EnumerationHeader.module.scss'; - export const EnumerationHeader = ({ filteredItems, id, 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..48b49995951 --- /dev/null +++ b/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.css @@ -0,0 +1,20 @@ +.enumeration__header { + border-bottom: var(--coral-border-s-solid) var(--coral-color-neutral-border); + display: flex; + flex-direction: column; + padding: var(--coral-spacing-s); + gap: var(--coral-spacing-s); +} +.enumeration__header h4 { + font: var(--coral-heading-m); +} +.enumeration__header [type=file] { + display: none; +} +.enumeration__title { + align-items: center; + display: flex; +} +.enumeration__title > button { + margin-left: auto; +} \ No newline at end of file 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 da02bad011e..00000000000 --- a/packages/design-system/src/components/Enumeration/EnumerationHeader/EnumerationHeader.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use '~@talend/design-tokens/lib/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..cee46e797e9 100644 --- a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.component.tsx +++ b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.component.tsx @@ -11,10 +11,9 @@ import { Form } from '../../Form'; import { InlineEditing } from '../../InlineEditing'; import { Skeleton } from '../../Skeleton'; import { EnumerationMode } from '../Enumeration.types'; +import styles from './EnumerationItem.module.css'; import { EnumerationItemProps } from './EnumerationItem.types'; -import styles from './EnumerationItem.module.scss'; - export const EnumerationItem = ({ isToAnimate, mode, 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..768a4422662 --- /dev/null +++ b/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.css @@ -0,0 +1,33 @@ +.enumeration__item { + align-items: center; + background-color: var(--coral-color-neutral-background); + display: flex; + height: 38px; + justify-content: space-between; + padding: var(--coral-spacing-xxs) var(--coral-spacing-xs) var(--coral-spacing-xxs) var(--coral-spacing-s); + transition: background-color var(--coral-transition-fast); +} +.enumeration__item:hover { + background-color: var(--coral-color-neutral-background-medium); +} +.enumeration__item > :first-child { + width: 100%; +} +.enumeration__item > :first-child label { + flex: 1; +} +.enumeration__item--edit { + padding: 0 var(--coral-spacing-xxs); +} +.enumeration__item--animate { + animation: highlight 1500ms both 100ms; +} + +@keyframes highlight { + 0% { + background-color: var(--coral-color-neutral-background); + } + 75% { + background-color: var(--coral-color-accent-background); + } +} \ No newline at end of file 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 61b413d3082..00000000000 --- a/packages/design-system/src/components/Enumeration/EnumerationItem/EnumerationItem.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use '~@talend/design-tokens/lib/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..fc0050adeb7 --- /dev/null +++ b/packages/design-system/src/components/ErrorState/ErrorState.module.css @@ -0,0 +1,6 @@ +.error-state { + font: var(--coral-paragraph-m); +} +.error-state__title { + font: var(--coral-heading-m); +} \ No newline at end of file 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 c5995f63e68..00000000000 --- a/packages/design-system/src/components/ErrorState/ErrorState.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '~@talend/design-tokens/lib/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..973104abe89 100644 --- a/packages/design-system/src/components/ErrorState/ErrorState.tsx +++ b/packages/design-system/src/components/ErrorState/ErrorState.tsx @@ -1,15 +1,13 @@ -import { ReactElement, isValidElement } from 'react'; +import { isValidElement, ReactElement } from 'react'; import { ButtonPrimary } from '../Button'; import { ButtonPrimaryPropsType } from '../Button/variations/ButtonPrimary'; import { Link } from '../Link'; import { LinkProps } from '../Link/Link'; import { StackVertical } from '../Stack'; - +import styles from './ErrorState.module.css'; import ErrorIllustration from './illutstrations/ErrorIllustration'; -import styles from './ErrorState.module.scss'; - export type ErrorStatePropTypes = { title: string; description: 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..7909976985a --- /dev/null +++ b/packages/design-system/src/components/Form/Affix/AffixStyles.module.css @@ -0,0 +1,63 @@ +.affix { + display: inline-flex; + flex-grow: 1; + flex-shrink: 0; + color: var(--coral-color-neutral-text); + background: var(--coral-color-neutral-background-strong); + padding: 0 var(--coral-spacing-xs); + justify-content: center; + align-items: center; + font: var(--coral-paragraph-m); + border: 0; + height: 100%; + min-height: auto; + max-height: var(--coral-sizing-m); + transition: var(--coral-transition-fast); + border-radius: 2px 0 0 2px; + border-right: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.affix_isSuffix { + border-radius: 0 2px 2px 0; + border-right: 0; + border-left: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.affix__icon { + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + display: flex; + justify-content: center; + align-items: center; +} +.affix__icon > svg { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); +} +.affix__caret { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); + display: flex; + justify-content: center; + align-items: center; +} +.affix__caret > svg { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); +} +.affix.button { + color: var(--coral-color-accent-text); + background: var(--coral-color-accent-background); + cursor: pointer; +} +.affix.button:hover { + color: var(--coral-color-accent-text-hover); + background: var(--coral-color-accent-background-hover); +} +.affix.button:active { + color: var(--coral-color-accent-text-active); + background: var(--coral-color-accent-background-active); +} +.affix.button:disabled { + color: var(--coral-color-neutral-text-weak); + background: var(--coral-color-neutral-background-strong); + cursor: not-allowed; +} \ No newline at end of file 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 38b18d3a0d3..00000000000 --- a/packages/design-system/src/components/Form/Affix/AffixStyles.module.scss +++ /dev/null @@ -1,86 +0,0 @@ -@use '~@talend/design-tokens/lib/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..3cf1475e707 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx @@ -13,8 +13,7 @@ import { SizedIcon } from '../../../Icon'; 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..cb9c58d77ec 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx @@ -1,13 +1,14 @@ import { forwardRef, HTMLAttributes, Ref } from 'react'; + import classnames from 'classnames'; + import { IconNameWithSize } from '@talend/icons'; import { DeprecatedIconNames } from '../../../../types'; +import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper'; 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..70b0eaf1e1e --- /dev/null +++ b/packages/design-system/src/components/Form/Buttons/Buttons.module.css @@ -0,0 +1,12 @@ + +.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 75093dbb0d9..00000000000 --- a/packages/design-system/src/components/Form/Buttons/Buttons.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '~@talend/design-tokens/lib/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..083fd6624b4 100644 --- a/packages/design-system/src/components/Form/Buttons/Buttons.tsx +++ b/packages/design-system/src/components/Form/Buttons/Buttons.tsx @@ -1,9 +1,9 @@ -import { forwardRef, Children, cloneElement } from 'react'; +import { Children, cloneElement, forwardRef } from 'react'; import type { HTMLAttributes, Ref } from 'react'; import { isElement } from 'react-is'; -import { StackHorizontal } from '../../Stack'; -import styles from './Buttons.module.scss'; +import { StackHorizontal } from '../../Stack'; +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..722ba978dc5 --- /dev/null +++ b/packages/design-system/src/components/Form/Field/Input/Input.File.module.css @@ -0,0 +1,114 @@ +.wrapper { + width: 100%; +} + +.inputFile { + position: relative; + border: var(--coral-border-s-dashed) var(--coral-color-neutral-border); + border-radius: var(--coral-radius-s); + color: var(--coral-color-neutral-text); + background: var(--coral-color-neutral-background); + transition: var(--coral-transition-fast); + min-height: var(--coral-sizing-m); + cursor: pointer; +} +.inputFile .text { + display: flex; + gap: var(--coral-spacing-xs); + align-items: center; + justify-content: center; + color: var(--coral-color-neutral-text-weak); + transition: var(--coral-transition-fast); +} +.inputFile .text > svg { + color: var(--coral-color-neutral-icon); +} +.inputFile .text > span > span { + font: var(--coral-paragraph-m-bold); + color: var(--coral-color-accent-text); + transition: var(--coral-transition-fast); +} +.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) var(--coral-color-assistive-border-focus); +} +.inputFile .preview { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: var(--coral-spacing-xxs) var(--coral-spacing-xs); +} +.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); +} +.inputFile:hover:not(.inputFile_disabled) { + border: var(--coral-border-s-dashed) var(--coral-color-neutral-border-strong-hover); +} +.inputFile:hover:not(.inputFile_disabled) .text { + color: var(--coral-color-neutral-text); +} +.inputFile:hover:not(.inputFile_disabled) .text__fakeLink { + color: var(--coral-color-accent-text-hover); + text-decoration: underline; +} +.inputFile_dragging { + background: var(--coral-color-accent-background-selected); + border: var(--coral-border-s-dashed) var(--coral-color-accent-border); +} +.inputFile_dragging .text { + color: var(--coral-color-accent-text); +} +.inputFile_disabled { + border: var(--coral-border-s-dashed) var(--coral-color-neutral-border-disabled); + cursor: not-allowed; +} +.inputFile_disabled .text { + color: var(--coral-color-neutral-text-disabled); + cursor: not-allowed; +} +.inputFile_disabled .text svg { + color: var(--coral-color-neutral-icon-weak); +} +.inputFile_disabled .text__fakeLink { + color: var(--coral-color-neutral-text-disabled); +} +.inputFile_error { + border: var(--coral-border-s-dashed) var(--coral-color-danger-border); +} +.inputFile_error .text svg { + color: var(--coral-color-danger-icon); +} +.inputFile__text, .inputFile__preview, .inputFile__input { + min-height: calc(var(--coral-sizing-m) - 0.125rem); +} +.inputFile__input { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0; +} \ No newline at end of file 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 0e3ef0793a4..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'; - -.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..f01f6070cbe 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 @@ -1,9 +1,12 @@ import { forwardRef, Key, Ref, useEffect, useRef, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { TFunction } from 'i18next'; + import classnames from 'classnames'; -import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../constants'; +import { TFunction } from 'i18next'; + +import { useId } from '../../../../useId'; import { ButtonIcon } from '../../../ButtonIcon'; +import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../constants'; import { SizedIcon } from '../../../Icon'; import { VisuallyHidden } from '../../../VisuallyHidden'; import { @@ -12,9 +15,7 @@ import { InputPrimitive, InputPrimitiveProps, } from '../../Primitives'; - -import styles from './Input.File.module.scss'; -import { useId } from '../../../../useId'; +import styles from './Input.File.module.css'; function getFileSize(size: number, t: TFunction) { if (size < 1024) { 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..a8a6640d73b --- /dev/null +++ b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.module.css @@ -0,0 +1,91 @@ +.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)); + display: inline-block; + font: var(--coral-paragraph-m); + color: var(--coral-color-neutral-text); +} +.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); + margin: 0; +} +.switch input[type=checkbox] + .legend::before { + width: 2rem; + height: var(--coral-sizing-xxxs); + background: var(--coral-color-accent-background); + 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); +} +.switch input[type=checkbox]:not(:disabled):hover + .legend::before { + background: var(--coral-color-accent-background-hover); +} +.switch input[type=checkbox]:not(.switch_disabled):not(.switch_readOnly) input:hover + .legend::before { + background: var(--coral-color-accent-background-hover); +} +.switch input[type=checkbox]:focus-visible + .legend { + outline: var(--coral-border-s-solid) var(--coral-color-assistive-border-focus); +} +.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); +} +.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); +} +.switch_readOnly input[type=checkbox] + .legend::before { + background: var(--coral-color-neutral-background-heavy); +} +.switch_readOnly input[type=checkbox] + .legend::after { + background: var(--coral-color-neutral-background); +} +.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); +} +.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); +} +.switch_disabled label { + cursor: not-allowed; +} +.switch_disabled label > * { + cursor: not-allowed; +} \ No newline at end of file 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 098cf05ce7e..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'; - -$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..4393876d81e 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 @@ -6,8 +6,7 @@ import classnames from 'classnames'; 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..2ac66d504c2 --- /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); + background: transparent; + color: var(--coral-color-neutral-icon-weak); + transition: var(--coral-transition-instant); + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} +.button_readOnly { + background: var(--coral-color-neutral-background-strong); +} +.button__icon { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); +} +.button:hover { + color: var(--coral-color-accent-icon-hover); +} +.button:active { + color: var(--coral-color-accent-icon-active); +} +.button:disabled { + color: var(--coral-color-neutral-text-disabled); +} +.button:disabled .button__icon { + opacity: var(--coral-opacity-s); +} \ No newline at end of file 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 179e17b2c20..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'; - -.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..e2cab0b5338 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 @@ -2,12 +2,12 @@ import { useState } from 'react'; import type { MouseEvent } from 'react'; import { useTranslation } from 'react-i18next'; -import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../../constants'; import { Clickable } from '../../../../Clickable'; -import { Tooltip } from '../../../../Tooltip'; +import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../../constants'; import { SizedIcon } from '../../../../Icon'; -import styles from './passwordButton.module.scss'; +import { Tooltip } from '../../../../Tooltip'; import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../../Tooltip/Tooltip'; +import styles from './passwordButton.module.css'; export default function useRevealPassword() { const [revealed, setRevealed] = useState(false); 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..0c31b8df85b --- /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); + padding: var(--coral-spacing-m) 0; + font: var(--coral-heading-m); + margin: 0; +} + +.fieldset-content { + display: flex; + flex-flow: column; + gap: var(--coral-spacing-s); +} \ No newline at end of file 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 89d3c439174..00000000000 --- a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '~@talend/design-tokens/lib/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..2e9c1bc3a13 --- /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); + gap: var(--coral-spacing-s); +} +.form fieldset { + padding: 0; + border: none; +} \ No newline at end of file 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 b469d04383b..00000000000 --- a/packages/design-system/src/components/Form/Form.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '~@talend/design-tokens/lib/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..d8f225a7015 100644 --- a/packages/design-system/src/components/Form/Form.tsx +++ b/packages/design-system/src/components/Form/Form.tsx @@ -1,9 +1,8 @@ -import { forwardRef, cloneElement, Children } from 'react'; +import { Children, cloneElement, forwardRef } from 'react'; 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..3782ae7adcb --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.module.css @@ -0,0 +1,138 @@ +.checkbox { + display: flex; + gap: var(--coral-spacing-xs); + justify-content: flex-start; + align-items: center; + position: relative; +} +.checkbox input[type=checkbox] { + margin: 0; + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + 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); + height: var(--coral-sizing-xxxs); + border-radius: var(--coral-radius-s); + transition: var(--coral-transition-fast); + 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) var(--coral-color-neutral-border); + background: var(--coral-color-neutral-background-medium); +} +.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); + width: calc(var(--coral-sizing-xxxs) / 2); + height: calc(var(--coral-sizing-xxxs) / 2); + left: calc(var(--coral-sizing-xxxs) / 2 - var(--coral-sizing-xxxs) / 4); +} +.checkbox input[type=checkbox]:hover + label::before { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); +} +.checkbox input[type=checkbox]:active + label::before { + background: var(--coral-color-accent-background-active); +} +.checkbox input[type=checkbox]:checked + label::before { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); + background: var(--coral-color-accent-background-strong); +} +.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) var(--coral-color-assistive-border-focus); + outline-offset: 1px; +} +.checkbox input[type=checkbox][aria-checked=mixed] + label::before { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); + background: var(--coral-color-accent-background-strong); +} +.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) var(--coral-color-accent-border-hover); + background: var(--coral-color-accent-background-strong-hover); +} +.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) var(--coral-color-accent-border-active); + background: var(--coral-color-accent-background-strong-active); +} +.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); + 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) var(--coral-color-neutral-border-disabled); + opacity: var(--coral-opacity-s); + cursor: not-allowed; + background: var(--coral-color-neutral-background-disabled); +} +.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); + opacity: var(--coral-opacity-m); +} +.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); + 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) var(--coral-color-neutral-border-weak); + background: var(--coral-color-neutral-background-strong); + 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); + 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) var(--coral-color-neutral-border-weak); + background: var(--coral-color-neutral-background-strong); +} \ No newline at end of file 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 1ba49d45dfa..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'; - -$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..82f041b4dd7 100644 --- a/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.tsx +++ b/packages/design-system/src/components/Form/Primitives/Checkbox/Checkbox.tsx @@ -13,8 +13,7 @@ import classnames from 'classnames'; 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..ea663dfb37a --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Input/Input.module.css @@ -0,0 +1,59 @@ +.input { + background: transparent; + color: var(--coral-color-neutral-text); + padding: var(--coral-spacing-xs); + font: var(--coral-paragraph-m); + line-height: 1; + border: 0; + margin: 0; + transition: var(--coral-transition-instant); + display: block; + flex-grow: 1; + width: 100%; + height: 1.875rem; +} +.input:only-child { + border-radius: var(--coral-radius-s); +} +.input:disabled, .input_disabled { + color: var(--coral-color-neutral-text-disabled); + cursor: not-allowed; +} +.input_readOnly { + color: var(--coral-color-neutral-text); +} +.input:focus { + outline: 0; +} +.input:disabled { + color: var(--coral-color-neutral-text-disabled); +} +.input::placeholder { + color: var(--coral-color-neutral-text-weak); + opacity: var(--coral-opacity-s); +} +.input[disabled] { + opacity: 1; +} +.input[disabled] > option { + color: var(--coral-color-neutral-text); +} +.input[type=color] { + padding: var(--coral-spacing-xxs); +} +.icon { + padding: 0 0 0 var(--coral-spacing-xs); + background: transparent; + color: var(--coral-color-neutral-icon-weak); + transition: var(--coral-transition-instant); + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.icon_disabled { + color: var(--coral-color-neutral-text-disabled); +} +.icon_readOnly { + color: var(--coral-color-neutral-text-weak); +} \ No newline at end of file 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 474b660d635..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'; -@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..ac5f3f3c830 100644 --- a/packages/design-system/src/components/Form/Primitives/Input/Input.tsx +++ b/packages/design-system/src/components/Form/Primitives/Input/Input.tsx @@ -14,8 +14,7 @@ import useRevealPassword from '../../../Form/Field/Input/hooks/useRevealPassword 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 & 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..2359d3ed31d --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.css @@ -0,0 +1,73 @@ +.inputShell { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border); + box-shadow: 0 0 0 0 transparent; + border-radius: var(--coral-radius-s); + transition: var(--coral-transition-instant); + background: var(--coral-color-neutral-background); + height: 2rem; + display: flex; + flex-flow: row; + gap: 0; + justify-content: stretch; + align-items: stretch; + position: relative; + overflow: hidden; +} +.inputShell:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-strong-hover); +} +.inputShell_disabled { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); +} +.inputShell_readOnly { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + background: var(--coral-color-neutral-background-strong); +} +.inputShell_disabled:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); +} +.inputShell_readOnly:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.inputShell:focus-within, .inputShell:focus { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); + box-shadow: 0 0 0 0.0625rem var(--coral-color-accent-border); +} +.inputShell_borderError { + border: var(--coral-border-s-solid) var(--coral-color-danger-border); +} +.inputShell_borderError:hover { + border: var(--coral-border-s-solid) var(--coral-color-danger-border-hover); +} +.inputShell_borderError:focus-within, .inputShell_borderError:focus { + border: var(--coral-border-s-solid) var(--coral-color-danger-border); + box-shadow: 0 0 0 0.0625rem var(--coral-color-danger-border); +} +.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; +} \ No newline at end of file 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 fe962a8f999..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'; -@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..74ab32d2284 100644 --- a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.tsx +++ b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.tsx @@ -10,8 +10,7 @@ import AffixReadOnly, { 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..e51549ae36b --- /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); + margin: 0; + padding: 0; + color: var(--coral-color-neutral-text); +} +.label_inline { + font: var(--coral-paragraph-m); +} \ No newline at end of file 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 7dcf5fa9439..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'; - -.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..cd4f963f986 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,14 @@ import { forwardRef, LabelHTMLAttributes, ReactElement, Ref } from 'react'; + import classnames from 'classnames'; -import styles from './Label.module.scss'; -export type LabelPrimitiveProps = - | LabelHTMLAttributes & { - children: string | ReactElement; - inline?: boolean; - required?: boolean; - }; +import styles from './Label.module.css'; + +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..a62971f2563 --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Radio/Radio.module.css @@ -0,0 +1,120 @@ +.radio { + display: inline-flex; + gap: var(--coral-spacing-xs); + justify-content: flex-start; + align-items: center; + position: relative; +} +.radio input[type=radio] { + margin: 0; + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + 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); + transition: var(--coral-transition-fast); + 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); + height: var(--coral-sizing-xxxs); + border: var(--coral-border-s-solid) var(--coral-color-neutral-border); + background: var(--coral-color-neutral-background-medium); +} +.radio input[type=radio] + label::after { + z-index: 2; + opacity: 0; + background-image: none; + background-color: var(--coral-color-accent-background-strong); + width: calc(var(--coral-sizing-xxs) / 2); + height: calc(var(--coral-sizing-xxs) / 2); + border: 0; + left: calc(var(--coral-sizing-xxxs) / 2 - calc(var(--coral-sizing-xxs) / 2) / 2); +} +.radio input[type=radio]:hover + label::before { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); +} +.radio input[type=radio]:active + label::before { + background: var(--coral-color-accent-background-active); +} +.radio input[type=radio]:focus-visible + label::before, +.radio input[type=radio]:global(.focus-visible) + label::before { + outline: var(--coral-border-m-solid) var(--coral-color-assistive-border-focus); + outline-offset: 1px; +} +.radio input[type=radio]:checked + label::before { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); +} +.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) var(--coral-color-accent-border-hover); +} +.radio input[type=radio]:checked:not(:disabled):hover + label::after { + background: var(--coral-color-accent-background-strong-hover); +} +.radio input[type=radio]:checked:not(:disabled):active + label::before { + border: var(--coral-border-s-solid) var(--coral-color-accent-border-active); + background: var(--coral-color-accent-background-strong-active); +} +.radio input[type=radio]:disabled + label, +.radio input[type=radio]:checked:disabled + label { + color: var(--coral-color-neutral-text-disabled); + cursor: not-allowed; +} +.radio input[type=radio]:disabled + label::before, +.radio input[type=radio]:checked:disabled + label::before { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); + opacity: var(--coral-opacity-s); + cursor: not-allowed; + background: var(--coral-color-neutral-background-disabled); +} +.radio input[type=radio]:checked:disabled + label::after { + background-color: var(--coral-color-neutral-icon-weak); + opacity: var(--coral-opacity-m); +} +.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); + 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) var(--coral-color-neutral-border-weak); + background: var(--coral-color-neutral-background-strong); + 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) var(--coral-color-neutral-border-weak); + background: var(--coral-color-neutral-background-strong); +} +.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); + opacity: 1; +} \ No newline at end of file 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 e0ae538d9f7..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'; - -$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..a184e898e0f 100644 --- a/packages/design-system/src/components/Form/Primitives/Radio/Radio.tsx +++ b/packages/design-system/src/components/Form/Primitives/Radio/Radio.tsx @@ -1,11 +1,11 @@ import { forwardRef, InputHTMLAttributes, Ref } from 'react'; import classnames from 'classnames'; -import Label from '../Label/Label'; -import useReadOnly from '../../../Form/Field/Input/hooks/useReadOnly'; -import styles from './Radio.module.scss'; import { useId } from '../../../../useId'; +import useReadOnly from '../../../Form/Field/Input/hooks/useReadOnly'; +import Label from '../Label/Label'; +import styles from './Radio.module.css'; export type RadioPrimitiveType = Omit, 'type' | 'prefix'> & { label: string; 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..828f80f9e31 --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Select/Select.module.css @@ -0,0 +1,215 @@ +.affix { + display: inline-flex; + flex-grow: 1; + flex-shrink: 0; + color: var(--coral-color-neutral-text); + background: var(--coral-color-neutral-background-strong); + padding: 0 var(--coral-spacing-xs); + justify-content: center; + align-items: center; + font: var(--coral-paragraph-m); + border: 0; + height: 100%; + min-height: auto; + max-height: var(--coral-sizing-m); + transition: var(--coral-transition-fast); + border-radius: 2px 0 0 2px; + border-right: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.affix_isSuffix { + border-radius: 0 2px 2px 0; + border-right: 0; + border-left: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.affix__icon { + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + display: flex; + justify-content: center; + align-items: center; +} +.affix__icon > svg { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); +} +.affix__caret { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); + display: flex; + justify-content: center; + align-items: center; +} +.affix__caret > svg { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); +} +.affix.button { + color: var(--coral-color-accent-text); + background: var(--coral-color-accent-background); + cursor: pointer; +} +.affix.button:hover { + color: var(--coral-color-accent-text-hover); + background: var(--coral-color-accent-background-hover); +} +.affix.button:active { + color: var(--coral-color-accent-text-active); + background: var(--coral-color-accent-background-active); +} +.affix.button:disabled { + color: var(--coral-color-neutral-text-weak); + background: var(--coral-color-neutral-background-strong); + cursor: not-allowed; +} + +.select { + background: transparent; + color: var(--coral-color-neutral-text); + padding: var(--coral-spacing-xs); + font: var(--coral-paragraph-m); + line-height: 1; + border: 0; + margin: 0; + transition: var(--coral-transition-instant); + display: block; + flex-grow: 1; + width: 100%; + height: 1.875rem; + appearance: none; + padding-right: calc(var(--coral-sizing-minimal) + var(--coral-sizing-xxs)); +} +.select:only-child { + border-radius: var(--coral-radius-s); +} +.select:disabled, .select_disabled { + color: var(--coral-color-neutral-text-disabled); + cursor: not-allowed; +} +.select_readOnly { + color: var(--coral-color-neutral-text); +} +.select:focus { + outline: 0; +} +.select:disabled { + color: var(--coral-color-neutral-text-disabled); +} +.select::placeholder { + color: var(--coral-color-neutral-text-weak); + opacity: var(--coral-opacity-s); +} +.select[disabled] { + opacity: 1; +} +.select[disabled] > option { + color: var(--coral-color-neutral-text); +} +.select option:disabled { + color: var(--coral-color-neutral-text-weak); + opacity: var(--coral-opacity-s); +} +.select_multiple + .select__icon { + display: none; +} +.select_isAffix { + display: inline-flex; + flex-grow: 1; + flex-shrink: 0; + color: var(--coral-color-neutral-text); + background: var(--coral-color-neutral-background-strong); + padding: 0 var(--coral-spacing-xs); + justify-content: center; + align-items: center; + font: var(--coral-paragraph-m); + border: 0; + height: 100%; + min-height: auto; + max-height: var(--coral-sizing-m); + transition: var(--coral-transition-fast); + border-radius: 2px 0 0 2px; + border-right: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + color: var(--coral-color-accent-text); + background: var(--coral-color-accent-background); + cursor: pointer; + padding-right: calc(var(--coral-sizing-minimal) + var(--coral-sizing-xxxs)); + flex-shrink: 0; + max-height: 100%; +} +.select_isAffix_isSuffix { + border-radius: 0 2px 2px 0; + border-right: 0; + border-left: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.select_isAffix__icon { + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + display: flex; + justify-content: center; + align-items: center; +} +.select_isAffix__icon > svg { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); +} +.select_isAffix__caret { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); + display: flex; + justify-content: center; + align-items: center; +} +.select_isAffix__caret > svg { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); +} +.select_isAffix:hover { + color: var(--coral-color-accent-text-hover); + background: var(--coral-color-accent-background-hover); +} +.select_isAffix:active { + color: var(--coral-color-accent-text-active); + background: var(--coral-color-accent-background-active); +} +.select_isAffix:disabled { + color: var(--coral-color-neutral-text-weak); + background: var(--coral-color-neutral-background-strong); + cursor: not-allowed; +} +.select_isAffix + .select__icon { + color: var(--coral-color-accent-text); +} +.select_isAffix:hover + .select__icon { + color: var(--coral-color-accent-text-hover); +} +.select_isSuffix, .select_isSuffix:first-child { + border-radius: 0 2px 2px 0; + border-left: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + border-right: 0; +} + +.select__wrapper { + display: block; + flex-grow: 1; + position: relative; + width: 100%; + height: 100%; +} + +.select__icon { + width: var(--coral-sizing-minimal); + height: var(--coral-sizing-minimal); + position: absolute; + right: var(--coral-spacing-xs); + top: 50%; + transform: translateY(-50%); + color: var(--coral-color-neutral-icon); + pointer-events: none; + display: inline-flex; + justify-content: center; + align-items: center; +} + +.select:disabled + .select__icon { + color: var(--coral-color-neutral-text-disabled); + opacity: var(--coral-opacity-s); +} \ No newline at end of file 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 bf5edbbc8fd..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'; -@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..609f4de5a04 100644 --- a/packages/design-system/src/components/Form/Primitives/Select/SelectNoWrapper.tsx +++ b/packages/design-system/src/components/Form/Primitives/Select/SelectNoWrapper.tsx @@ -3,8 +3,7 @@ import { forwardRef, ReactElement, Ref, SelectHTMLAttributes } from 'react'; 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..af14fd08195 --- /dev/null +++ b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.css @@ -0,0 +1,78 @@ +.textarea { + background: transparent; + color: var(--coral-color-neutral-text); + padding: var(--coral-spacing-xs); + font: var(--coral-paragraph-m); + line-height: 1; + border: 0; + margin: 0; + transition: var(--coral-transition-instant); + display: block; + flex-grow: 1; + width: 100%; + border: var(--coral-border-s-solid) var(--coral-color-neutral-border); + box-shadow: 0 0 0 0 transparent; + border-radius: var(--coral-radius-s); + transition: var(--coral-transition-instant); + background: var(--coral-color-neutral-background); + min-height: calc(var(--coral-sizing-l) * 2); + max-height: var(--coral-sizing-xxxl); + resize: vertical; + line-height: 140%; +} +.textarea:only-child { + border-radius: var(--coral-radius-s); +} +.textarea:disabled, .textarea_disabled { + color: var(--coral-color-neutral-text-disabled); + cursor: not-allowed; +} +.textarea_readOnly { + color: var(--coral-color-neutral-text); +} +.textarea:focus { + outline: 0; +} +.textarea:disabled { + color: var(--coral-color-neutral-text-disabled); +} +.textarea::placeholder { + color: var(--coral-color-neutral-text-weak); + opacity: var(--coral-opacity-s); +} +.textarea[disabled] { + opacity: 1; +} +.textarea[disabled] > option { + color: var(--coral-color-neutral-text); +} +.textarea:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-strong-hover); +} +.textarea_disabled { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); +} +.textarea_readOnly { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + background: var(--coral-color-neutral-background-strong); +} +.textarea_disabled:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-disabled); +} +.textarea_readOnly:hover { + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); +} +.textarea:focus-within, .textarea:focus { + border: var(--coral-border-s-solid) var(--coral-color-accent-border); + box-shadow: 0 0 0 0.0625rem var(--coral-color-accent-border); +} +.textarea_borderError { + border: var(--coral-border-s-solid) var(--coral-color-danger-border); +} +.textarea_borderError:hover { + border: var(--coral-border-s-solid) var(--coral-color-danger-border-hover); +} +.textarea_borderError:focus-within, .textarea_borderError:focus { + border: var(--coral-border-s-solid) var(--coral-color-danger-border); + box-shadow: 0 0 0 0.0625rem var(--coral-color-danger-border); +} \ No newline at end of file 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 de49e66dce7..00000000000 --- a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '~@talend/design-tokens/lib/tokens'; -@use '../mixins' as Form; - -.textarea { - @include Form.base-input(); - @include Form.border-styles(); - min-height: calc(#{tokens.$coral-sizing-l} * 2); - 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 43f1962389c..e4b13447a78 100644 --- a/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.tsx +++ b/packages/design-system/src/components/Form/Primitives/Textarea/Textarea.tsx @@ -1,6 +1,8 @@ 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 4d8ec9a2776..00000000000 --- a/packages/design-system/src/components/Form/Primitives/_mixins.scss +++ /dev/null @@ -1,101 +0,0 @@ -@use '~@talend/design-tokens/lib/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..7e2936175e5 --- /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); + align-self: start; +} +.row_stretched { + align-self: stretch; +} \ No newline at end of file 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 3514d36c408..00000000000 --- a/packages/design-system/src/components/Form/Row/Row.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '~@talend/design-tokens/lib/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..3d12d2aaf12 100644 --- a/packages/design-system/src/components/Form/Row/Row.tsx +++ b/packages/design-system/src/components/Form/Row/Row.tsx @@ -1,10 +1,11 @@ -import { forwardRef, Children, cloneElement } from 'react'; -import type { Ref, HTMLAttributes } from 'react'; +import { Children, cloneElement, forwardRef } from 'react'; +import type { HTMLAttributes, Ref } from 'react'; import { isElement } from 'react-is'; -import styles from './Row.module.scss'; import classNames from 'classnames'; +import styles from './Row.module.css'; + type RowProps = HTMLAttributes & { disabled?: boolean; readOnly?: boolean; 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..6daad7f204a --- /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); + height: var(--coral-sizing-xxs); + 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); + } +} \ No newline at end of file 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 bc9ac6b50c4..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..e9f51307774 100644 --- a/packages/design-system/src/components/Icon/Icon.tsx +++ b/packages/design-system/src/components/Icon/Icon.tsx @@ -1,9 +1,11 @@ -import { forwardRef, createRef, useState, useEffect, memo } from 'react'; +import { createRef, forwardRef, memo, useEffect, useState } from 'react'; 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.css b/packages/design-system/src/components/IconsProvider/IconsProvider.module.css new file mode 100644 index 00000000000..361fc9daf01 --- /dev/null +++ b/packages/design-system/src/components/IconsProvider/IconsProvider.module.css @@ -0,0 +1,11 @@ +.hidden { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} \ No newline at end of file diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.module.scss b/packages/design-system/src/components/IconsProvider/IconsProvider.module.scss deleted file mode 100644 index 1566bc4c79b..00000000000 --- a/packages/design-system/src/components/IconsProvider/IconsProvider.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -.hidden { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} 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..38e30b67a58 --- /dev/null +++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.css @@ -0,0 +1,64 @@ +.inlineEditor__editor { + position: relative; +} +.inlineEditor__editor [role=status] { + position: absolute; + bottom: 0; + left: 0; + z-index: 1; + background: var(--coral-color-neutral-background); + padding: var(--coral-spacing-xxs); + transform: translateY(100%); + box-shadow: var(--coral-elevation-shadow-neutral-s); +} +.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); +} +.inlineEditor__content { + display: flex; +} +.inlineEditor__content_loading { + animation: var(--coral-animation-heartbeat); +} +.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); +} +.inlineEditor__content__button { + flex: 0 0 auto; + opacity: 0; + margin-left: var(--coral-spacing-xxs); + transition: opacity var(--coral-transition-fast); +} +.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; +} \ No newline at end of file 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 19edd2b4def..00000000000 --- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.module.scss +++ /dev/null @@ -1,87 +0,0 @@ -@use '~@talend/design-tokens/lib/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 85567e4bf53..1d5f00aa221 100644 --- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx +++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx @@ -22,8 +22,7 @@ import { ButtonIcon } from '../../ButtonIcon'; 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..ca109b712f8 --- /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); + color: var(--coral-color-neutral-text); +} +.inlineMessage strong { + font: var(--coral-paragraph-m-bold); +} +.inlineMessage .icon { + margin-right: var(--coral-spacing-xxs); + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); + display: inline-flex; + position: relative; +} +.inlineMessage .icon svg { + width: var(--coral-sizing-xxxs); + height: var(--coral-sizing-xxxs); +} +.inlineMessage > * { + display: inline; +} +.inlineMessage__contents > * { + display: inline; + margin-right: var(--coral-spacing-xxs); +} +.inlineMessage__contents > *:last-child { + margin-right: 0; +} +.inlineMessage_withBackground { + display: inline-flex; + padding: var(--coral-spacing-xxs) var(--coral-spacing-xs); + border-radius: var(--coral-radius-s); + justify-content: flex-start; + align-items: flex-start; +} +.inlineMessage_withBackground .icon { + top: 0.0625rem; +} \ No newline at end of file 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 6dca77eb921..00000000000 --- a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.module.scss +++ /dev/null @@ -1,55 +0,0 @@ -@use '~@talend/design-tokens/lib/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..5db21d5c428 100644 --- a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx +++ b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx @@ -8,8 +8,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..cedbe83ce99 --- /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); + box-shadow: var(--coral-elevation-shadow-beta); +} +.beta__icon { + color: var(--coral-color-beta-icon); +} \ No newline at end of file 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 c05e61ba874..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '~@talend/design-tokens/lib/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..68de6353133 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageBeta.tsx @@ -3,8 +3,7 @@ import { forwardRef, Ref } from 'react'; 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..aee6a2c731f --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.css @@ -0,0 +1,7 @@ +.destructive_withBackground { + background-color: var(--coral-color-danger-background); + box-shadow: var(--coral-elevation-shadow-danger); +} +.destructive__icon { + color: var(--coral-color-danger-icon); +} \ No newline at end of file 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 7085a083698..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '~@talend/design-tokens/lib/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..48aa2745e8c 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageDestructive.tsx @@ -3,8 +3,7 @@ import { forwardRef, Ref } from 'react'; 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..b4f18a4ae28 --- /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); + box-shadow: var(--coral-elevation-shadow-info); +} +.information__icon { + color: var(--coral-color-info-icon); +} \ No newline at end of file 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 7d255e6c298..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '~@talend/design-tokens/lib/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..46c61866105 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageInformation.tsx @@ -3,8 +3,7 @@ import { forwardRef, Ref } from 'react'; 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..fb3fad49faa --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.css @@ -0,0 +1,7 @@ +.success_withBackground { + background-color: var(--coral-color-success-background); + box-shadow: var(--coral-elevation-shadow-success); +} +.success__icon { + color: var(--coral-color-success-icon); +} \ No newline at end of file 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 f2d3725a5c7..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '~@talend/design-tokens/lib/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..bd078c69903 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageSuccess.tsx @@ -3,8 +3,7 @@ import { forwardRef, Ref } from 'react'; 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..68c52166000 --- /dev/null +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.css @@ -0,0 +1,7 @@ +.warning_withBackground { + background-color: var(--coral-color-warning-background); + box-shadow: var(--coral-elevation-shadow-warning); +} +.warning__icon { + color: var(--coral-color-warning-icon); +} \ No newline at end of file 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 e624548ad00..00000000000 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use '~@talend/design-tokens/lib/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..d7201d41684 100644 --- a/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.tsx +++ b/packages/design-system/src/components/InlineMessage/variations/InlineMessageWarning.tsx @@ -3,8 +3,7 @@ import { forwardRef, Ref } from 'react'; 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..1da495b1e6d --- /dev/null +++ b/packages/design-system/src/components/Link/Link.module.css @@ -0,0 +1,43 @@ +.link { + font: var(--coral-paragraph-m-bold); + color: var(--coral-color-accent-text); + 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) transparent; + transition: var(--coral-transition-fast); +} +.link:hover { + color: var(--coral-color-accent-text-hover); +} +.link:hover .link__text { + border-bottom-color: var(--coral-color-accent-border-hover); +} +.link:active { + color: var(--coral-color-accent-text-active); +} +.link:active .link__text { + border-bottom-color: var(--coral-color-accent-border-active); +} +.link.linkDisabled { + opacity: var(--coral-opacity-s); + cursor: not-allowed; +} +.link.linkDisabled .link__text { + border-bottom-color: transparent; +} +.link[aria-current=page] { + color: var(--coral-color-neutral-text); +} +.link[aria-current=page]:hover { + color: var(--coral-color-accent-text-hover); +} +.link[aria-current=page]:active { + color: var(--coral-color-accent-text-active); +} \ No newline at end of file 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 17ddb227b2a..00000000000 --- a/packages/design-system/src/components/Link/Link.module.scss +++ /dev/null @@ -1,64 +0,0 @@ -@use '~@talend/design-tokens/lib/tokens'; - -$icon-alignment-offset-m: -0.1875rem; -$icon-alignment-offset-s: -0.0625rem; - -.link { - font: tokens.$coral-paragraph-m-bold; - color: tokens.$coral-color-accent-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-accent-text-hover; - - .link__text { - border-bottom-color: tokens.$coral-color-accent-border-hover; - } - } - - &:active { - color: tokens.$coral-color-accent-text-active; - - .link__text { - border-bottom-color: tokens.$coral-color-accent-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-accent-text-hover; - } - - &:active { - color: tokens.$coral-color-accent-text-active; - } - } -} diff --git a/packages/design-system/src/components/Link/Link.tsx b/packages/design-system/src/components/Link/Link.tsx index 990c03aa694..fb060c97b2f 100644 --- a/packages/design-system/src/components/Link/Link.tsx +++ b/packages/design-system/src/components/Link/Link.tsx @@ -6,8 +6,7 @@ import classNames from 'classnames'; 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..a26cd174ca6 100644 --- a/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx +++ b/packages/design-system/src/components/LinkAsButton/LinkAsButton.tsx @@ -1,14 +1,15 @@ import { cloneElement, forwardRef, Ref } from 'react'; -import classnames from 'classnames'; import { useTranslation } from 'react-i18next'; -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 classnames from 'classnames'; + +import { Clickable, ClickableProps } from '../Clickable'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; import { SizedIcon } from '../Icon'; +import { Icon } from '../Icon/Icon'; +import { LinkComponentProps } from '../Link'; +import linkStyles from '../Link/Link.module.css'; +import sharedLinkableStyles from '../Linkable/LinkableStyles.module.css'; export type LinkAsButtonProps = Omit & Omit & { openInNewTab?: boolean }; diff --git a/packages/design-system/src/components/Linkable/Linkable.tsx b/packages/design-system/src/components/Linkable/Linkable.tsx index c504341a944..1229f0c75ef 100644 --- a/packages/design-system/src/components/Linkable/Linkable.tsx +++ b/packages/design-system/src/components/Linkable/Linkable.tsx @@ -7,14 +7,16 @@ import { Ref, useMemo, } from 'react'; + +import classnames from 'classnames'; + // eslint-disable-next-line @talend/import-depth import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; -import classnames from 'classnames'; + import { DeprecatedIconNames } from '../../types'; import { SizedIcon } from '../Icon'; - -import style from './LinkableStyles.module.scss'; import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper'; +import style from './LinkableStyles.module.css'; export type LinkableType = Omit, 'style'> & { as?: 'a' | ReactElement; 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..024daf9e17e --- /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); + flex-shrink: 0; +} + +.link__iconExternal { + position: relative; + top: 0.0625rem; + height: var(--coral-sizing-minimal); + width: var(--coral-sizing-minimal); + margin-left: var(--coral-spacing-xxs); + 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; +} \ No newline at end of file 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 954d8cfee1d..00000000000 --- a/packages/design-system/src/components/Linkable/LinkableStyles.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use '~@talend/design-tokens/lib/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..487e5c78dd9 100644 --- a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx +++ b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx @@ -17,8 +17,7 @@ import { Dropdown, DropdownPropsType } from '../../Dropdown'; 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..4f751773b53 --- /dev/null +++ b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.css @@ -0,0 +1,33 @@ +.message { + display: flex; + border-radius: var(--coral-radius-s); + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + background-color: var(--coral-color-neutral-background); + color: var(--coral-color-neutral-text-weak); + height: 100%; + width: 100%; + border-top-left-radius: var(--coral-radius-s); + border-bottom-left-radius: var(--coral-radius-s); + border-left: 0.6rem solid var(--coral-color-neutral-border-hover); +} +.message__children { + text-wrap: pretty; +} +.message__title { + font: var(--coral-heading-m); + width: 100%; +} +.message__title__info { + font: var(--coral-paragraph-s); + color: var(--coral-color-neutral-text-weak); + white-space: nowrap; + margin-left: auto; +} +.message__actions { + margin-left: auto; +} +.message__description { + font: var(--coral-paragraph-m); + color: var(--coral-color-neutral-text-weak); + margin: 0; +} \ No newline at end of file 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 7c0623cc6de..00000000000 --- a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use '~@talend/design-tokens/lib/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..dd6802721d8 100644 --- a/packages/design-system/src/components/Message/variations/MessageCollectionDestructive.tsx +++ b/packages/design-system/src/components/Message/variations/MessageCollectionDestructive.tsx @@ -1,8 +1,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..0f1f47406d1 100644 --- a/packages/design-system/src/components/Message/variations/MessageCollectionInformation.tsx +++ b/packages/design-system/src/components/Message/variations/MessageCollectionInformation.tsx @@ -1,8 +1,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..b8eab5b418c 100644 --- a/packages/design-system/src/components/Message/variations/MessageCollectionSuccess.tsx +++ b/packages/design-system/src/components/Message/variations/MessageCollectionSuccess.tsx @@ -1,8 +1,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..eec1ba19eaa 100644 --- a/packages/design-system/src/components/Message/variations/MessageCollectionWarning.tsx +++ b/packages/design-system/src/components/Message/variations/MessageCollectionWarning.tsx @@ -1,8 +1,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..1d0cb632fd7 --- /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); +} \ No newline at end of file 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 8202a245329..00000000000 --- a/packages/design-system/src/components/Message/variations/MessageDestructive.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '~@talend/design-tokens/lib/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..cc55f94b99a 100644 --- a/packages/design-system/src/components/Message/variations/MessageDestructive.tsx +++ b/packages/design-system/src/components/Message/variations/MessageDestructive.tsx @@ -1,8 +1,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..df4b03f1bf3 --- /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); +} \ No newline at end of file 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 7b57987a95d..00000000000 --- a/packages/design-system/src/components/Message/variations/MessageInformation.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '~@talend/design-tokens/lib/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..9db3cc2377a 100644 --- a/packages/design-system/src/components/Message/variations/MessageInformation.tsx +++ b/packages/design-system/src/components/Message/variations/MessageInformation.tsx @@ -1,8 +1,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..a0850616e22 --- /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); +} \ No newline at end of file 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 112267b9a84..00000000000 --- a/packages/design-system/src/components/Message/variations/MessageSuccess.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '~@talend/design-tokens/lib/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..90ba0e6bea5 100644 --- a/packages/design-system/src/components/Message/variations/MessageSuccess.tsx +++ b/packages/design-system/src/components/Message/variations/MessageSuccess.tsx @@ -1,8 +1,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..9d9f49faa15 --- /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); +} \ No newline at end of file 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 91ed70d6d33..00000000000 --- a/packages/design-system/src/components/Message/variations/MessageWarning.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '~@talend/design-tokens/lib/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..9cd9f93952c 100644 --- a/packages/design-system/src/components/Message/variations/MessageWarning.tsx +++ b/packages/design-system/src/components/Message/variations/MessageWarning.tsx @@ -1,8 +1,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..5060755774c --- /dev/null +++ b/packages/design-system/src/components/Modal/Modal.module.css @@ -0,0 +1,91 @@ +.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); + opacity: var(--coral-opacity-l); +} + +.modal-backdrop { + z-index: var(--coral-elevation-layer-interactive-front); + display: flex; + justify-content: center; + align-items: center; +} + +.modal { + z-index: calc(var(--coral-elevation-layer-interactive-front) + 1); + position: fixed; + min-width: 660px; + max-width: 95%; + max-height: 80%; + box-shadow: var(--coral-elevation-shadow-neutral-m); + border-radius: var(--coral-radius-s); + background: var(--coral-color-neutral-background); + 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); +} +.modal__header { + flex-shrink: 0; + height: 3.75rem; + padding: var(--coral-spacing-xs) var(--coral-spacing-xl); + border-bottom: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + display: flex; + align-items: center; + column-gap: var(--coral-spacing-m); +} +.modal__content { + overflow-x: hidden; + overflow-y: auto; + padding-top: var(--coral-spacing-l); + margin-bottom: var(--coral-spacing-l); +} +.modal__buttons { + margin-bottom: var(--coral-spacing-m); + 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); +} + +.modal-icon { + flex-grow: 0; + flex-shrink: 0; + width: var(--coral-sizing-xs); + height: var(--coral-sizing-xs); + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file 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 c54a2699a0f..00000000000 --- a/packages/design-system/src/components/Modal/Modal.module.scss +++ /dev/null @@ -1,108 +0,0 @@ -@use '~@talend/design-tokens/lib/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..a1bb657d28c 100644 --- a/packages/design-system/src/components/Modal/Modal.tsx +++ b/packages/design-system/src/components/Modal/Modal.tsx @@ -10,11 +10,10 @@ import { ButtonSecondaryPropsType } from '../Button/variations/ButtonSecondary'; import { Disclosure } from '../Disclosure/Disclosure'; import { Icon } from '../Icon'; import { StackHorizontal, StackVertical } from '../Stack'; +import styles from './Modal.module.css'; import { Dialog, DialogPropsType, useDialogState } from './Primitives/Dialog'; import { DialogBackdrop } from './Primitives/DialogBackdrop'; -import styles from './Modal.module.scss'; - type IconProp = DeprecatedIconNames | ReactElement; function ModalIcon(props: { icon: IconProp; 'data-test'?: string }): 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..7e66ec722d3 --- /dev/null +++ b/packages/design-system/src/components/Popover/Popover.module.css @@ -0,0 +1,12 @@ +.popover { + background-color: var(--coral-color-neutral-background); + transition: opacity var(--coral-transition-fast); + box-shadow: var(--coral-elevation-shadow-neutral-m); + border-radius: var(--coral-radius-s); + z-index: var(--coral-elevation-layer-interactive-front); + opacity: 1; +} + +.withPadding { + padding: var(--coral-spacing-m); +} \ No newline at end of file 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 929e599bc71..00000000000 --- a/packages/design-system/src/components/Popover/Popover.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '~@talend/design-tokens/lib/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..dbdd8cdda95 100644 --- a/packages/design-system/src/components/Popover/Popover.tsx +++ b/packages/design-system/src/components/Popover/Popover.tsx @@ -8,10 +8,9 @@ import tokens from '@talend/design-tokens'; import { renderChildren } from '../../renderChildren'; import { ChildOrGenerator, renderOrClone } from '../../renderOrClone'; +import theme from './Popover.module.css'; import { usePopover } from './usePopover'; -import theme from './Popover.module.scss'; - type PopoverOptions = { initialOpen?: boolean; placement?: Placement; diff --git a/packages/design-system/src/components/QualityBar/QualityRatioBar.component.tsx b/packages/design-system/src/components/QualityBar/QualityRatioBar.component.tsx index 06a9ff931c7..1f9fe3248ce 100644 --- a/packages/design-system/src/components/QualityBar/QualityRatioBar.component.tsx +++ b/packages/design-system/src/components/QualityBar/QualityRatioBar.component.tsx @@ -4,8 +4,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..a73778390fa --- /dev/null +++ b/packages/design-system/src/components/QualityBar/QualityRatioBar.module.css @@ -0,0 +1,29 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable color-hex-case */ +.quality-ratio-bar { + border-radius: 1px; + height: 100%; + width: 100%; +} +.quality-ratio-bar--empty { + background-color: var(--coral-color-charts-neutral); +} +.quality-ratio-bar--valid { + background-color: var(--coral-color-charts-success); +} +.quality-ratio-bar--invalid { + background-color: var(--coral-color-charts-danger); +} +.quality-ratio-bar--na { + background-color: var(--coral-color-charts-success-weak); +} +.quality-ratio-bar--placeholder { + background-color: var(--coral-color-charts-neutral-weak); +} +:global(.tc-ratio-bar) .quality-ratio-bar--placeholder:hover { + height: 0.25rem; +} + +.split-ratio-bar-percentage { + flex: none; +} \ No newline at end of file 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 b9f5fa53533..00000000000 --- a/packages/design-system/src/components/QualityBar/QualityRatioBar.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/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..aba8d86e6e2 100644 --- a/packages/design-system/src/components/QualityBar/SplitQualityBar.component.tsx +++ b/packages/design-system/src/components/QualityBar/SplitQualityBar.component.tsx @@ -8,8 +8,7 @@ import { QualityType, } 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..b3780c3afd4 100644 --- a/packages/design-system/src/components/RatioBar/RatioBar.component.tsx +++ b/packages/design-system/src/components/RatioBar/RatioBar.component.tsx @@ -1,10 +1,9 @@ import { ReactNode } from 'react'; +import styles from './RatioBar.module.css'; import { RatioBarComposition } from './RatioBarComposition.component'; import { EmptyLine, ErrorLine, FilledLine } from './RatioBarLines.component'; -import styles from './RatioBar.module.scss'; - const getFilledValues = (amount: number, total: number) => { if (!amount || amount < 0) { return { percentage: 0, 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..4dcca2f2a90 --- /dev/null +++ b/packages/design-system/src/components/RatioBar/RatioBar.module.css @@ -0,0 +1,44 @@ +/* stylelint-disable color-hex-case */ +/* stylelint-disable color-hex-case */ +.tc-ratio-bar { + align-items: center; + display: flex; + height: 0.5rem; + padding: 10px 0; + width: 100%; +} +.tc-ratio-bar-counter { + padding-left: 5px; +} +.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.4rem; + margin: 0 2px 0 0; + min-width: 0.4rem; + transition: var(--coral-transition-instant); +} +.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); +} +.tc-ratio-bar .tc-ratio-bar-line-filled { + background-color: var(--coral-color-charts-default); +} +.tc-ratio-bar .tc-ratio-bar-line-error { + background-color: var(--coral-color-charts-danger); +} \ No newline at end of file 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 351dc2dbaf4..00000000000 --- a/packages/design-system/src/components/RatioBar/RatioBar.module.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; - -$custom-ratio-bar-height: 0.5rem; -$custom-ratio-bar-line-height: 0.4rem; -$custom-ratio-bar-line-hover-height: 0.5rem; - -.tc-ratio-bar { - align-items: center; - display: flex; - height: $custom-ratio-bar-height; - padding: $padding-small 0; - width: 100%; - - &-counter { - padding-left: $padding-smaller; - } - - &-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..284c7c9c2a6 100644 --- a/packages/design-system/src/components/RatioBar/RatioBarComposition.component.tsx +++ b/packages/design-system/src/components/RatioBar/RatioBarComposition.component.tsx @@ -3,8 +3,7 @@ import { KeyboardEvent, MouseEvent, ReactNode } from 'react'; 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..0aed99d027f 100644 --- a/packages/design-system/src/components/RatioBar/RatioBarLines.component.tsx +++ b/packages/design-system/src/components/RatioBar/RatioBarLines.component.tsx @@ -1,7 +1,6 @@ +import styles from './RatioBar.module.css'; import { RatioBarLine } from './RatioBarComposition.component'; -import styles from './RatioBar.module.scss'; - type RatioBarLineProps = { value: number; percentage: 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..12f193c4798 100644 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx @@ -1,15 +1,16 @@ +import { DataAttributes } from 'src/types'; + +import { Icon } from '../Icon'; +import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper'; +import { StackHorizontal, StackVertical } from '../Stack'; +import { Tag } from '../Tag'; +import style from './RichRadioButton.module.css'; import { - RichRadioButtonProps, - LogoAsset, - IllustrationAsset, IconAsset, + IllustrationAsset, + LogoAsset, + RichRadioButtonProps, } from './RichRadioButton.types'; -import { StackVertical, StackHorizontal } from '../Stack'; -import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper'; -import style from './RichRadioButton.module.scss'; -import { Tag } from '../Tag'; -import { Icon } from '../Icon'; -import { DataAttributes } from 'src/types'; function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset | IconAsset }) { if (asset?.illustration) { 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..1578e064662 --- /dev/null +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.css @@ -0,0 +1,122 @@ +.rich-radio-button { + background-color: var(--coral-color-accent-background-weak); + border: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak); + border-radius: var(--coral-radius-m); + padding: var(--coral-spacing-m); + transition: background-color var(--coral-transition-normal), box-shadow var(--coral-transition-normal), border-color var(--coral-transition-normal); + width: 100%; +} +.rich-radio-button h4 { + color: var(--coral-color-accent-text); + font: var(--coral-heading-s); +} +.rich-radio-button p { + color: var(--coral-color-neutral-text-weak); + font: var(--coral-paragraph-s); +} +.rich-radio-button__icon { + color: var(--coral-color-accent-icon); + min-height: var(--coral-sizing-xs); + min-width: var(--coral-sizing-xs); + transition: color var(--coral-transition-normal); +} +.rich-radio-button__illustration, .rich-radio-button__logo { + height: var(--coral-sizing-l); + width: var(--coral-sizing-l); +} +.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); +} +.rich-radio-button__input:disabled + .rich-radio-button h4 { + color: var(--coral-color-neutral-text-disabled); +} +.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); +} +.rich-radio-button__input[readonly] + .rich-radio-button h4 { + color: var(--coral-color-neutral-text); +} +.rich-radio-button__input:not(:disabled, [readonly]):is(:hover, :active) + .rich-radio-button { + box-shadow: var(--coral-elevation-shadow-neutral-m); +} +.rich-radio-button__input:not(:disabled, [readonly]):hover + .rich-radio-button .rich-radio-button__icon { + color: var(--coral-color-accent-icon-hover); +} +.rich-radio-button__input:not(:disabled, [readonly]):hover + .rich-radio-button h4 { + color: var(--coral-color-accent-text-hover); +} +.rich-radio-button__input:not(:disabled, [readonly]):active + .rich-radio-button .rich-radio-button__icon { + color: var(--coral-color-accent-icon-active); +} +.rich-radio-button__input:not(:disabled, [readonly]):active + .rich-radio-button h4 { + color: var(--coral-color-accent-text-active); +} +.rich-radio-button__input:not(:disabled, [readonly]):focus + .rich-radio-button { + outline: var(--coral-border-m-solid) var(--coral-color-assistive-border-focus); +} +.rich-radio-button__input:not(:disabled, [readonly]):focus + .rich-radio-button .rich-radio-button__icon { + color: var(--coral-color-accent-icon); +} +.rich-radio-button__input:not(:checked):not(:disabled, [readonly]):hover + .rich-radio-button { + border-color: var(--coral-color-neutral-border-weak-hover); +} +.rich-radio-button__input:not(:checked):not(:disabled, [readonly]):active + .rich-radio-button { + border-color: var(--coral-color-neutral-border); +} +.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); +} +.rich-radio-button__input:checked:not(:disabled, [readonly]) + .rich-radio-button { + background-color: var(--coral-color-accent-background-selected); + border: var(--coral-border-m-solid) var(--coral-color-accent-border); +} +.rich-radio-button__input:checked:not(:disabled, [readonly]):hover + .rich-radio-button { + border-color: var(--coral-color-accent-border-hover); +} +.rich-radio-button__input:checked:not(:disabled, [readonly]):active + .rich-radio-button { + border-color: var(--coral-color-accent-border-active); +} +.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); + border: var(--coral-border-m-solid) var(--coral-color-neutral-border); +} +.rich-radio-button__input:checked:disabled + .rich-radio-button { + background-color: var(--coral-color-neutral-background-disabled); + border: var(--coral-border-m-solid) var(--coral-color-neutral-border-disabled); +} \ No newline at end of file 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 c3e6366d008..00000000000 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss +++ /dev/null @@ -1,199 +0,0 @@ -@use '~@talend/design-tokens/lib/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..b6132c21199 --- /dev/null +++ b/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.css @@ -0,0 +1,33 @@ +.skeleton { + display: inline-block; + height: var(--coral-sizing-m); + width: var(--coral-sizing-m); + background: var(--coral-color-neutral-background-strong); + animation: var(--coral-animation-heartbeat); + border-radius: var(--coral-radius-s); + cursor: wait; +} +.skeleton.isBlock { + display: block; + width: 100%; +} + +.size-XL { + height: var(--coral-sizing-m); +} + +.size-L { + height: var(--coral-sizing-s); +} + +.size-M { + height: var(--coral-sizing-xxxs); +} + +.size-S { + height: var(--coral-sizing-minimal); +} + +.size-XS { + height: var(--coral-spacing-xs); +} \ No newline at end of file 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 7fcc5e10391..00000000000 --- a/packages/design-system/src/components/Skeleton/Primitive/Skeleton.module.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use '~@talend/design-tokens/lib/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..f30dc2ab4aa --- /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; +} \ No newline at end of file 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..28a0afa5804 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonButton.tsx @@ -2,10 +2,9 @@ import { forwardRef, Ref } from 'react'; import classNames from 'classnames'; +import PrimitiveStyles from '../Primitive/Skeleton.module.css'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; - -import PrimitiveStyles from '../Primitive/Skeleton.module.scss'; -import styles from './SkeletonButton.module.scss'; +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..efd59bf0fdc --- /dev/null +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.css @@ -0,0 +1,11 @@ +.buttonIconSkeleton { + width: var(--coral-sizing-m); + border-radius: var(--coral-radius-round); +} +.buttonIconSkeleton.size-S { + width: var(--coral-sizing-s); +} +.buttonIconSkeleton.size-XS { + width: var(--coral-sizing-xxxs); + border-radius: var(--coral-radius-s); +} \ No newline at end of file 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 e9a03cf3f8a..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '~@talend/design-tokens/lib/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..900d8907e92 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonButtonIcon.tsx @@ -2,10 +2,9 @@ import { forwardRef, Ref } from 'react'; import classNames from 'classnames'; +import PrimitiveStyles from '../Primitive/Skeleton.module.css'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; - -import PrimitiveStyles from '../Primitive/Skeleton.module.scss'; -import styles from './SkeletonButtonIcon.module.scss'; +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..3b5fbbfee40 --- /dev/null +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.css @@ -0,0 +1,30 @@ +.skeletonHeading { + max-width: var(--coral-sizing-maximal); +} +.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%; +} \ No newline at end of file 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 4fa92b74744..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss +++ /dev/null @@ -1,42 +0,0 @@ -@use '~@talend/design-tokens/lib/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..8234f4f2298 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx @@ -3,8 +3,7 @@ import { forwardRef, Ref } from 'react'; 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..37ff50831a6 --- /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); +} \ No newline at end of file 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 ff4b579a799..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '~@talend/design-tokens/lib/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..584e9d21c23 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonInput.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonInput.tsx @@ -2,10 +2,9 @@ import { forwardRef, Ref } from 'react'; import { StackVertical } from '../../Stack'; import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive'; +import styles from './SkeletonInput.module.css'; import SkeletonParagraph from './SkeletonParagraph'; -import styles from './SkeletonInput.module.scss'; - export type SkeletonInputProps = Omit; const SkeletonInput = forwardRef((props: SkeletonInputProps, ref: Ref) => { 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..a0ee74dea56 --- /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%; +} \ No newline at end of file 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..8e856e8a504 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx @@ -3,8 +3,7 @@ import { forwardRef, Ref } from 'react'; 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..ddec65e29ca --- /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); +} \ No newline at end of file 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 7c6098962bc..00000000000 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '~@talend/design-tokens/lib/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..08f690ce007 100644 --- a/packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx +++ b/packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx @@ -3,8 +3,7 @@ import { forwardRef, Ref } from 'react'; 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..39a6ded89bc --- /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); +} +.stack.gap-x-XS { + column-gap: var(--coral-spacing-xs); +} +.stack.gap-x-S { + column-gap: var(--coral-spacing-s); +} +.stack.gap-x-M { + column-gap: var(--coral-spacing-m); +} +.stack.gap-x-L { + column-gap: var(--coral-spacing-l); +} +.stack.gap-x-XL { + column-gap: var(--coral-spacing-xl); +} +.stack.gap-y-NONE { + row-gap: 0; +} +.stack.gap-y-XXS { + row-gap: var(--coral-spacing-xxs); +} +.stack.gap-y-XS { + row-gap: var(--coral-spacing-xs); +} +.stack.gap-y-S { + row-gap: var(--coral-spacing-s); +} +.stack.gap-y-M { + row-gap: var(--coral-spacing-m); +} +.stack.gap-y-L { + row-gap: var(--coral-spacing-l); +} +.stack.gap-y-XL { + row-gap: var(--coral-spacing-xl); +} +.stack.padding-top-NONE { + padding-top: 0; +} +.stack.padding-top-XXS { + padding-top: var(--coral-spacing-xxs); +} +.stack.padding-top-XS { + padding-top: var(--coral-spacing-xs); +} +.stack.padding-top-S { + padding-top: var(--coral-spacing-s); +} +.stack.padding-top-M { + padding-top: var(--coral-spacing-m); +} +.stack.padding-top-L { + padding-top: var(--coral-spacing-l); +} +.stack.padding-top-XL { + padding-top: var(--coral-spacing-xl); +} +.stack.padding-right-NONE { + padding-right: 0; +} +.stack.padding-right-XXS { + padding-right: var(--coral-spacing-xxs); +} +.stack.padding-right-XS { + padding-right: var(--coral-spacing-xs); +} +.stack.padding-right-S { + padding-right: var(--coral-spacing-s); +} +.stack.padding-right-M { + padding-right: var(--coral-spacing-m); +} +.stack.padding-right-L { + padding-right: var(--coral-spacing-l); +} +.stack.padding-right-XL { + padding-right: var(--coral-spacing-xl); +} +.stack.padding-bottom-NONE { + padding-bottom: 0; +} +.stack.padding-bottom-XXS { + padding-bottom: var(--coral-spacing-xxs); +} +.stack.padding-bottom-XS { + padding-bottom: var(--coral-spacing-xs); +} +.stack.padding-bottom-S { + padding-bottom: var(--coral-spacing-s); +} +.stack.padding-bottom-M { + padding-bottom: var(--coral-spacing-m); +} +.stack.padding-bottom-L { + padding-bottom: var(--coral-spacing-l); +} +.stack.padding-bottom-XL { + padding-bottom: var(--coral-spacing-xl); +} +.stack.padding-left-NONE { + padding-left: 0; +} +.stack.padding-left-XXS { + padding-left: var(--coral-spacing-xxs); +} +.stack.padding-left-XS { + padding-left: var(--coral-spacing-xs); +} +.stack.padding-left-S { + padding-left: var(--coral-spacing-s); +} +.stack.padding-left-M { + padding-left: var(--coral-spacing-m); +} +.stack.padding-left-L { + padding-left: var(--coral-spacing-l); +} +.stack.padding-left-XL { + padding-left: var(--coral-spacing-xl); +} +.stack.margin-top-NONE { + margin-top: 0; +} +.stack.margin-top-auto { + margin-top: auto; +} +.stack.margin-top-XXS { + margin-top: var(--coral-spacing-xxs); +} +.stack.margin-top-XS { + margin-top: var(--coral-spacing-xs); +} +.stack.margin-top-S { + margin-top: var(--coral-spacing-s); +} +.stack.margin-top-M { + margin-top: var(--coral-spacing-m); +} +.stack.margin-top-L { + margin-top: var(--coral-spacing-l); +} +.stack.margin-top-XL { + margin-top: var(--coral-spacing-xl); +} +.stack.margin-right-NONE { + margin-right: 0; +} +.stack.margin-right-auto { + margin-right: auto; +} +.stack.margin-right-XXS { + margin-right: var(--coral-spacing-xxs); +} +.stack.margin-right-XS { + margin-right: var(--coral-spacing-xs); +} +.stack.margin-right-S { + margin-right: var(--coral-spacing-s); +} +.stack.margin-right-M { + margin-right: var(--coral-spacing-m); +} +.stack.margin-right-L { + margin-right: var(--coral-spacing-l); +} +.stack.margin-right-XL { + margin-right: var(--coral-spacing-xl); +} +.stack.margin-bottom-NONE { + margin-bottom: 0; +} +.stack.margin-bottom-auto { + margin-bottom: auto; +} +.stack.margin-bottom-XXS { + margin-bottom: var(--coral-spacing-xxs); +} +.stack.margin-bottom-XS { + margin-bottom: var(--coral-spacing-xs); +} +.stack.margin-bottom-S { + margin-bottom: var(--coral-spacing-s); +} +.stack.margin-bottom-M { + margin-bottom: var(--coral-spacing-m); +} +.stack.margin-bottom-L { + margin-bottom: var(--coral-spacing-l); +} +.stack.margin-bottom-XL { + margin-bottom: var(--coral-spacing-xl); +} +.stack.margin-left-NONE { + margin-left: 0; +} +.stack.margin-left-auto { + margin-left: auto; +} +.stack.margin-left-XXS { + margin-left: var(--coral-spacing-xxs); +} +.stack.margin-left-XS { + margin-left: var(--coral-spacing-xs); +} +.stack.margin-left-S { + margin-left: var(--coral-spacing-s); +} +.stack.margin-left-M { + margin-left: var(--coral-spacing-m); +} +.stack.margin-left-L { + margin-left: var(--coral-spacing-l); +} +.stack.margin-left-XL { + margin-left: var(--coral-spacing-xl); +} +.stack.fullWidth { + width: 100%; +} +.stack.height-100 { + height: 100%; +} +.stack.height-XXXS { + height: var(--coral-sizing-xxxs); +} +.stack.height-XXS { + height: var(--coral-sizing-xxs); +} +.stack.height-XS { + height: var(--coral-sizing-xs); +} +.stack.height-S { + height: var(--coral-sizing-s); +} +.stack.height-M { + height: var(--coral-sizing-m); +} +.stack.height-L { + height: var(--coral-sizing-l); +} +.stack.height-XXXL { + height: var(--coral-sizing-xxxl); +} \ No newline at end of file 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 dba3cf10a07..00000000000 --- a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.module.scss +++ /dev/null @@ -1,475 +0,0 @@ -@use '~@talend/design-tokens/lib/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..88ee0ef1205 100644 --- a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.tsx +++ b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.tsx @@ -4,8 +4,7 @@ import type { ReactNode, Ref } from 'react'; 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..46b2eac9a84 --- /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; +} \ No newline at end of file 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..d7d641bf587 --- /dev/null +++ b/packages/design-system/src/components/Status/Primitive/Status.module.css @@ -0,0 +1,40 @@ +.status { + display: flex; + font: var(--coral-paragraph-m-bold); + color: var(--coral-color-neutral-text-weak); +} +.status .status__icon { + width: var(--coral-sizing-xxxs); + color: var(--coral-color-neutral-icon-weak); +} +.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); +} +.status.failed .status__icon { + color: var(--coral-color-danger-icon); +} +.status.successful { + color: var(--coral-color-success-text); +} +.status.successful .status__icon { + color: var(--coral-color-success-icon); +} +.status.inProgress { + color: var(--coral-color-info-text); +} +.status.inProgress .status__icon { + color: var(--coral-color-info-icon); +} +.status.warning { + color: var(--coral-color-warning-text); +} +.status.warning .status__icon { + color: var(--coral-color-warning-icon); +} \ No newline at end of file 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 37802ebe77a..00000000000 --- a/packages/design-system/src/components/Status/Primitive/Status.module.scss +++ /dev/null @@ -1,56 +0,0 @@ -@use '~@talend/design-tokens/lib/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..0e867f81389 100644 --- a/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx +++ b/packages/design-system/src/components/Status/Primitive/StatusPrimitive.tsx @@ -12,8 +12,7 @@ import { SizedIcon } from '../../Icon'; 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/Stepper/Progress/Primitive/Progress.module.css b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.module.css new file mode 100644 index 00000000000..5d3c8d845a3 --- /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); +} \ No newline at end of file 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 cba18ddc047..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'; - - -.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..d4e011c0c58 100644 --- a/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx +++ b/packages/design-system/src/components/Stepper/Progress/Primitive/Progress.tsx @@ -1,11 +1,11 @@ import { forwardRef, HTMLAttributes, ReactElement, Ref } from 'react'; import { useTranslation } from 'react-i18next'; + import classnames from 'classnames'; -import { VisuallyHidden } from '../../../VisuallyHidden'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../constants'; - -import styles from './Progress.module.scss'; +import { VisuallyHidden } from '../../../VisuallyHidden'; +import styles from './Progress.module.css'; type StepperOrientation = 'vertical' | 'horizontal'; diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.css b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.css new file mode 100644 index 00000000000..30dd4338a3d --- /dev/null +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.css @@ -0,0 +1,14 @@ +.horizontal { + top: calc(var(--coral-sizing-xxxs) / 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; +} +.horizontal div { + top: 0; + height: 0.125rem; + transition: width var(--coral-transition-slow); +} \ No newline at end of file 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.scss deleted file mode 100644 index c4380e24b85..00000000000 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '~@talend/design-tokens/lib/tokens'; - -.horizontal { - top: calc(#{tokens.$coral-sizing-xxxs} / 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; - } -} 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..67c85aa7df1 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,7 @@ 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.css b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.css new file mode 100644 index 00000000000..cd9af69e8f9 --- /dev/null +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.css @@ -0,0 +1,11 @@ +.vertical { + top: var(--coral-sizing-xxs); + right: calc(var(--coral-sizing-xxxs) / 2 - 0.0313rem); + bottom: var(--coral-sizing-xxs); + 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"); +} +.vertical div { + width: 0.125rem; + transition: height var(--coral-transition-slow); +} \ No newline at end of file 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.scss deleted file mode 100644 index 4433cfcb9a3..00000000000 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use '~@talend/design-tokens/lib/tokens'; - -.vertical { - top: tokens.$coral-sizing-xxs; - right: calc(#{tokens.$coral-sizing-xxxs} / 2 - 0.0313rem); - bottom: tokens.$coral-sizing-xxs; - 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; - } -} 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..657ad15fee8 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,7 @@ 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..6b7ed4332d6 --- /dev/null +++ b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.css @@ -0,0 +1,106 @@ +@keyframes pulse { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0.1875rem var(--coral-color-accent-background), 0 0 0 0.375rem var(--coral-color-accent-background); + } + 80% { + transform: scale(1); + box-shadow: 0 0 0 0.1875rem var(--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 var(--coral-color-accent-background), 0 0 0 0 rgba(0, 0, 0, 0); + } +} +.step { + display: flex; + max-width: var(--coral-sizing-xxxl); + align-items: center; + justify-content: flex-end; + z-index: 1; +} +.step[data-index]::before { + content: attr(data-index) ". "; + margin-right: var(--coral-spacing-xxs); +} +.step__title { + font: var(--coral-paragraph-m); + margin-right: var(--coral-spacing-s); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.step__icon { + flex-shrink: 0; + display: block; + height: var(--coral-sizing-xxxs); + width: var(--coral-sizing-xxxs); + border-radius: var(--coral-radius-round); + position: relative; + z-index: 2; +} +.step__icon .tc-svg-icon { + margin-left: var(--coral-spacing-xxs); + margin-top: var(--coral-spacing-xxs); + background: var(--coral-color-neutral-background); + border-radius: var(--coral-radius-round); + height: var(--coral-sizing-m); + width: var(--coral-sizing-m); +} +.step_enabled .step__icon { + background: var(--coral-color-neutral-background); + border: var(--coral-border-m-solid) var(--coral-color-accent-border); +} +.step_progress { + color: var(--coral-color-accent-text); +} +.step_progress .step__icon { + background: var(--coral-color-accent-background-strong); + box-shadow: 0 0 0 0.1875rem var(--coral-color-accent-background); + z-index: 1; + transform: scale(1); + animation: pulse 2s 0.2s infinite; +} +.step_disabled { + color: var(--coral-color-neutral-text-disabled); + cursor: not-allowed; +} +.step_disabled::before, +.step_disabled .step__title { + opacity: var(--coral-opacity-m); +} +.step_disabled .step__icon { + background: var(--coral-color-neutral-background-disabled); +} +.step_validated .step__icon { + background: var(--coral-color-accent-background-strong); +} +.step_error { + color: var(--coral-color-danger-text); +} +.step_error .step__icon { + background: var(--coral-color-danger-background-strong); +} +.step_vertical { + padding-top: var(--coral-spacing-l); + 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); + display: flex; + justify-content: flex-end; + align-items: stretch; +} \ No newline at end of file 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 b8a047b7edb..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'; - -@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..33bfcc198ed 100644 --- a/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx +++ b/packages/design-system/src/components/Stepper/Step/Primitive/Step.tsx @@ -1,8 +1,9 @@ import { forwardRef, ReactElement, Ref } from 'react'; + import classnames from 'classnames'; -import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip'; -import styles from './Step.module.scss'; +import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip'; +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..38761eee886 --- /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); + display: flex; + justify-content: flex-end; +} +.skeleton > span { + max-width: 7.1875rem; +} +.skeleton_vertical { + margin: 0 auto; + width: 12.5rem; + justify-content: center; +} \ No newline at end of file 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 63613d13d30..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'; - -.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..e039ca65135 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 @@ -1,9 +1,10 @@ -import { memo, forwardRef, Ref } from 'react'; -import { Skeleton } from '../../../Skeleton'; +import { forwardRef, memo, Ref } from 'react'; + import classnames from 'classnames'; -import stepStyles from '../Primitive/Step.module.scss'; -import styles from './Step.Skeleton.module.scss'; +import { Skeleton } from '../../../Skeleton'; +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..ccfc404a47c --- /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%; +} \ No newline at end of file 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 f4811a5a7f0..00000000000 --- a/packages/design-system/src/components/Stepper/Stepper.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use '~@talend/design-tokens/lib/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..6706641d396 100644 --- a/packages/design-system/src/components/Stepper/Stepper.tsx +++ b/packages/design-system/src/components/Stepper/Stepper.tsx @@ -1,11 +1,11 @@ -import classnames from 'classnames'; import { Children, cloneElement, forwardRef, ReactElement, Ref, useMemo } from 'react'; import { isElement } from 'react-is'; +import classnames from 'classnames'; + 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..c7bf4930f5b --- /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); + 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); +} +.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); + font: var(--coral-paragraph-s); + opacity: var(--coral-opacity-m); + user-select: none; + cursor: pointer; + background: none; + border: none; + z-index: var(--coral-elevation-layer-interactive-front); +} +.switch .container > .btn[aria-checked=true] { + color: var(--coral-color-accent-text-weak); + 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); +} +.switch .switchIndicator[data-animated=true] { + transition: var(--coral-transition-fast); +} +.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); + border-radius: 100px; +} +.switch.readOnly div .btn[aria-checked] { + transition: color var(--coral-transition-normal); +} +.switch.disabled div { + opacity: var(--coral-opacity-m); +} \ No newline at end of file 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 d6a697a3248..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..0366501522b 100644 --- a/packages/design-system/src/components/Switch/Switch.tsx +++ b/packages/design-system/src/components/Switch/Switch.tsx @@ -1,11 +1,11 @@ -import { MouseEvent, useLayoutEffect, useRef, useState, useEffect } from 'react'; -import type { PropsWithChildren, HTMLAttributes } from 'react'; +import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react'; +import type { HTMLAttributes, PropsWithChildren } from 'react'; 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..237d0a59b26 100644 --- a/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/TabPanel.tsx @@ -3,8 +3,7 @@ import { useContext } from 'react'; 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..ddc51bc4192 --- /dev/null +++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.css @@ -0,0 +1,107 @@ +.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); + height: var(--coral-sizing-xs); + color: var(--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: var(--coral-transition-fast); + text-decoration: none; +} +.tab__copy { + max-width: var(--coral-sizing-xxxl); + 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); +} +.tab::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border-top: var(--coral-border-m-solid) var(--coral-color-accent-border); + opacity: 0; + transition: var(--coral-transition-fast); + transform: translateY(100%); +} +.tab[aria-selected=true] { + color: var(--coral-color-accent-text); +} +.tab[aria-selected=true] > svg { + color: var(--coral-color-accent-icon); +} +.tab[aria-selected=true]::after { + opacity: 1; + transform: translateY(0%); +} +.tab:hover { + color: var(--coral-color-accent-text-hover); + text-decoration: none; +} +.tab:hover > svg { + color: var(--coral-color-accent-icon-hover); +} +.tab:active { + color: var(--coral-color-accent-text-active); +} +.tab:active > svg { + color: var(--coral-color-accent-icon-active); +} +.tab_large { + font: var(--coral-heading-l); + height: var(--coral-sizing-s); +} +.tab_large:not(:last-of-type) { + margin-right: var(--coral-spacing-s); +} +.tab_error { + color: var(--coral-color-danger-text); +} +.tab_error[aria-selected=true] { + color: var(--coral-color-danger-text); +} +.tab_error::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border-top: var(--coral-border-m-solid) var(--coral-color-danger-text); + opacity: 0; + transition: var(--coral-transition-fast); + transform: translateY(100%); +} \ No newline at end of file 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 5d41881b7a0..00000000000 --- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss +++ /dev/null @@ -1,125 +0,0 @@ -@use '~@talend/design-tokens/lib/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%); - } -} diff --git a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx index afb41f25541..154a62fd5cc 100644 --- a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx @@ -9,8 +9,7 @@ import { StackHorizontal } from '../../Stack'; 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..d2afd2d2661 --- /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); + max-width: var(--coral-sizing-maximal); + font: var(--coral-paragraph-s-bold); + vertical-align: middle; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + border-radius: var(--coral-radius-s); +} \ No newline at end of file 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 f08ad123d9c..00000000000 --- a/packages/design-system/src/components/Tag/primitive/TagPrimitive.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '~@talend/design-tokens/lib/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..41e230ff47a --- /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); + background: var(--coral-color-beta-background); +} \ No newline at end of file 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 02336f4f7ea..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagBeta.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '~@talend/design-tokens/lib/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..19d02f8f290 100644 --- a/packages/design-system/src/components/Tag/variations/TagBeta.tsx +++ b/packages/design-system/src/components/Tag/variations/TagBeta.tsx @@ -1,8 +1,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..e821c344841 --- /dev/null +++ b/packages/design-system/src/components/Tag/variations/TagDefault.module.css @@ -0,0 +1,4 @@ +.tag { + color: var(--coral-color-neutral-text); + background: var(--coral-color-neutral-background-strong); +} \ No newline at end of file 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 33a388a01b8..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagDefault.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '~@talend/design-tokens/lib/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..1016f8c87bc 100644 --- a/packages/design-system/src/components/Tag/variations/TagDefault.tsx +++ b/packages/design-system/src/components/Tag/variations/TagDefault.tsx @@ -1,8 +1,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..2fcc36835c8 --- /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); + background: var(--coral-color-danger-background); +} \ No newline at end of file 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 484f407a404..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagDestructive.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '~@talend/design-tokens/lib/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..7a4197d99ad 100644 --- a/packages/design-system/src/components/Tag/variations/TagDestructive.tsx +++ b/packages/design-system/src/components/Tag/variations/TagDestructive.tsx @@ -1,8 +1,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..a7d9a00ed8b --- /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); + background: var(--coral-color-info-background); +} \ No newline at end of file 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 3057d15a389..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagInformation.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '~@talend/design-tokens/lib/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..57250a2b7db 100644 --- a/packages/design-system/src/components/Tag/variations/TagInformation.tsx +++ b/packages/design-system/src/components/Tag/variations/TagInformation.tsx @@ -1,8 +1,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..55759221765 --- /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); + background: var(--coral-color-success-background); +} \ No newline at end of file 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 b823889cf6b..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagSuccess.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '~@talend/design-tokens/lib/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..0c3a2177aef 100644 --- a/packages/design-system/src/components/Tag/variations/TagSuccess.tsx +++ b/packages/design-system/src/components/Tag/variations/TagSuccess.tsx @@ -1,8 +1,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..57cb009e6bd --- /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); + background: var(--coral-color-warning-background); +} \ No newline at end of file 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 f3dc2af8e96..00000000000 --- a/packages/design-system/src/components/Tag/variations/TagWarning.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '~@talend/design-tokens/lib/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..524da9b75db 100644 --- a/packages/design-system/src/components/Tag/variations/TagWarning.tsx +++ b/packages/design-system/src/components/Tag/variations/TagWarning.tsx @@ -1,8 +1,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..6857bec28cf --- /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); + color: var(--coral-color-neutral-text); + background-color: var(--coral-color-neutral-background); +} + +a { + text-decoration: none; +} + +[role=list] { + margin: 0; + padding: 0; +} + +.focus-outline-hidden *:focus { + outline: none; +} + +::selection { + color: var(--coral-color-neutral-text); + background-color: var(--coral-color-accent-background-selected); +} \ 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 11b3c6b5698..00000000000 --- a/packages/design-system/src/components/ThemeProvider/ThemeProvider.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use '~@talend/design-tokens/lib/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/Tooltip/Tooltip.module.css b/packages/design-system/src/components/Tooltip/Tooltip.module.css new file mode 100644 index 00000000000..5b227f4fc25 --- /dev/null +++ b/packages/design-system/src/components/Tooltip/Tooltip.module.css @@ -0,0 +1,17 @@ +.container { + padding: var(--coral-spacing-xxs) var(--coral-spacing-xs); + max-width: var(--coral-sizing-maximal); + font: var(--coral-paragraph-s); + color: var(--coral-color-assistive-text); + background: var(--coral-color-assistive-background); + border-radius: var(--coral-radius-s); + transition: opacity var(--coral-transition-fast); + opacity: 1; +} + +.arrow { + fill: var(--coral-color-assistive-background); +} +.arrow :global(.stroke) { + display: none; +} \ No newline at end of file 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 f3659df1388..00000000000 --- a/packages/design-system/src/components/Tooltip/Tooltip.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '~@talend/design-tokens/lib/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..0526ba3da82 100644 --- a/packages/design-system/src/components/Tooltip/Tooltip.tsx +++ b/packages/design-system/src/components/Tooltip/Tooltip.tsx @@ -21,8 +21,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.css b/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.css new file mode 100644 index 00000000000..361fc9daf01 --- /dev/null +++ b/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.css @@ -0,0 +1,11 @@ +.hidden { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} \ No newline at end of file diff --git a/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.scss b/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.scss deleted file mode 100644 index 1566bc4c79b..00000000000 --- a/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -.hidden { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} diff --git a/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.tsx index 6378f084cd1..be359be2469 100644 --- a/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.tsx +++ b/packages/design-system/src/components/VisuallyHidden/VisuallyHidden.tsx @@ -1,5 +1,6 @@ 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..9636296c020 --- /dev/null +++ b/packages/design-system/src/components/illustrations/IconDefault.module.css @@ -0,0 +1,4 @@ +.mediumIllustration { + width: var(--coral-sizing-l); + height: var(--coral-sizing-l); +} \ No newline at end of file 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 90a894d1ba4..00000000000 --- a/packages/design-system/src/components/illustrations/IconDefault.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '~@talend/design-tokens/lib/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/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/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..e00e1e5f8a4 --- /dev/null +++ b/packages/design-system/src/components/illustrations/SpotDefault.module.css @@ -0,0 +1,4 @@ +.largeIllustration { + width: var(--coral-sizing-maximal); + height: var(--coral-sizing-xxxl); +} \ No newline at end of file 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 ac8ae9a9fff..00000000000 --- a/packages/design-system/src/components/illustrations/SpotDefault.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '~@talend/design-tokens/lib/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.css b/packages/design-system/src/stories/docs/Area.module.css new file mode 100644 index 00000000000..3cc7057b26d --- /dev/null +++ b/packages/design-system/src/stories/docs/Area.module.css @@ -0,0 +1,15 @@ +.area { + display: flex; + flex-basis: 100%; + align-items: center; + justify-content: center; + margin: var(--coral-spacing-xs) var(--coral-spacing-m); + padding: var(--coral-spacing-xs); + min-height: 0; + font-weight: bold; + font-size: 1.25rem; + color: coral; + background: cornsilk; + border: 1px dashed coral; + border-radius: var(--coral-radius-s); +} \ No newline at end of file diff --git a/packages/design-system/src/stories/docs/Area.module.scss b/packages/design-system/src/stories/docs/Area.module.scss deleted file mode 100644 index 8226cd21986..00000000000 --- a/packages/design-system/src/stories/docs/Area.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '~@talend/design-tokens/lib/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; - min-height: 0; - font-weight: bold; - font-size: 1.25rem; - color: coral; - background: cornsilk; - border: 1px dashed coral; - border-radius: tokens.$coral-radius-s; -} diff --git a/packages/design-system/src/stories/docs/Area.tsx b/packages/design-system/src/stories/docs/Area.tsx index 44597b81a9f..1a50c0d4f54 100644 --- a/packages/design-system/src/stories/docs/Area.tsx +++ b/packages/design-system/src/stories/docs/Area.tsx @@ -1,6 +1,8 @@ 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/tools/scripts-core/src/scripts/build-lib.js b/tools/scripts-core/src/scripts/build-lib.js index 2a3a3f48bf9..a13741dba2f 100755 --- a/tools/scripts-core/src/scripts/build-lib.js +++ b/tools/scripts-core/src/scripts/build-lib.js @@ -144,7 +144,7 @@ export default async function build(env, presetApi, unsafeOptions) { const copyPromise = () => new Promise((resolve, reject) => { if (options.includes('--watch')) { - const evtEmitter = cpx.watch(`${srcFolder}/**/*.{scss,json}`, targetFolder); + const evtEmitter = cpx.watch(`${srcFolder}/**/*.{css,scss,json}`, targetFolder); evtEmitter.on('watch-error', err => { reject(err); }); @@ -153,7 +153,7 @@ export default async function build(env, presetApi, unsafeOptions) { }); } else { console.log('Copying assets...'); - cpx.copy(`${srcFolder}/**/*.{scss,json}`, targetFolder, err => { + cpx.copy(`${srcFolder}/**/*.{css,scss,json}`, targetFolder, err => { if (err) { console.error(err); reject(err);