From 0eed4fbb4cd4deb21938cbea55cd33e3d4c07b43 Mon Sep 17 00:00:00 2001 From: Eugene Date: Wed, 2 Oct 2024 18:05:28 +0000 Subject: [PATCH] Add biome for linting and formatting CSS (#5316) * Add biome for formatting CSS * Format CSS --- .husky/pre-commit | 3 - biome.json | 48 +++++ lint-staged.config.js | 1 + package-lock.json | 166 ++++++++++++++++++ package.json | 3 + .../decorator/private/BorderFlair.module.css | 40 +++-- .../decorator/private/BorderLoader.module.css | 17 +- .../activity/ActivityDecorator.module.css | 51 ++++-- .../activity/CopilotMessageHeader.module.css | 1 - .../components/dropZone/DropZone.module.css | 4 +- .../private/LinerMessageActivity.module.css | 6 +- .../components/sendBox/Attachments.module.css | 2 +- .../src/components/sendBox/SendBox.module.css | 7 +- .../components/sendBox/TextArea.module.css | 6 +- .../src/components/sendBox/Toolbar.module.css | 12 +- .../SuggestedAction.module.css | 12 +- .../SuggestedActions.module.css | 5 +- .../telephoneKeypad/private/Button.module.css | 5 +- .../private/TelephoneKeypad.module.css | 1 - .../src/components/theme/Theme.module.css | 76 +++++--- 20 files changed, 371 insertions(+), 95 deletions(-) create mode 100644 biome.json diff --git a/.husky/pre-commit b/.husky/pre-commit index 57757f4eda..0100eae146 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - npm run lint-staged diff --git a/biome.json b/biome.json new file mode 100644 index 0000000000..c97dbe0c45 --- /dev/null +++ b/biome.json @@ -0,0 +1,48 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json", + "vcs": { + "enabled": true, + "clientKind": "git", + "useIgnoreFile": true + }, + "files": { + "ignoreUnknown": false, + "ignore": [] + }, + "formatter": { + "indentStyle": "space", + "indentWidth": 2 + }, + "organizeImports": { + "enabled": false + }, + "javascript": { + "formatter": { + "enabled": false + }, + "linter": { + "enabled": false + } + }, + "json": { + "formatter": { + "enabled": false + }, + "linter": { + "enabled": false + } + }, + "css": { + "parser": { + "cssModules": true + }, + "formatter": { + "enabled": true, + "quoteStyle": "single", + "lineWidth": 120 + }, + "linter": { + "enabled": true + } + } +} diff --git a/lint-staged.config.js b/lint-staged.config.js index 826e00e7b9..de671362d4 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -10,6 +10,7 @@ function prettierMarkdown(filenames) { module.exports = { '{docs,samples}/**/*.{html,js,jsx,ts,tsx}': prettierCode, '**/*.md': prettierMarkdown, + 'packages/**/*.css': ['npm run precommit:biome'], 'packages/api/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:api'], 'packages/bundle/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:bundle'], 'packages/component/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:component'], diff --git a/package-lock.json b/package-lock.json index 955b23f02d..e5c0285e10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@babel/runtime": "^7.19.0", + "@biomejs/biome": "1.9.3", "@testing-library/react": "^12.1.5", "@types/jest": "^28.1.8", "@types/react": "^16.14.60", @@ -2010,6 +2011,170 @@ "dev": true, "license": "MIT" }, + "node_modules/@biomejs/biome": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-1.9.3.tgz", + "integrity": "sha512-POjAPz0APAmX33WOQFGQrwLvlu7WLV4CFJMlB12b6ZSg+2q6fYu9kZwLCOA+x83zXfcPd1RpuWOKJW0GbBwLIQ==", + "dev": true, + "hasInstallScript": true, + "license": "MIT OR Apache-2.0", + "bin": { + "biome": "bin/biome" + }, + "engines": { + "node": ">=14.21.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/biome" + }, + "optionalDependencies": { + "@biomejs/cli-darwin-arm64": "1.9.3", + "@biomejs/cli-darwin-x64": "1.9.3", + "@biomejs/cli-linux-arm64": "1.9.3", + "@biomejs/cli-linux-arm64-musl": "1.9.3", + "@biomejs/cli-linux-x64": "1.9.3", + "@biomejs/cli-linux-x64-musl": "1.9.3", + "@biomejs/cli-win32-arm64": "1.9.3", + "@biomejs/cli-win32-x64": "1.9.3" + } + }, + "node_modules/@biomejs/cli-darwin-arm64": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.9.3.tgz", + "integrity": "sha512-QZzD2XrjJDUyIZK+aR2i5DDxCJfdwiYbUKu9GzkCUJpL78uSelAHAPy7m0GuPMVtF/Uo+OKv97W3P9nuWZangQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-darwin-x64": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-1.9.3.tgz", + "integrity": "sha512-vSCoIBJE0BN3SWDFuAY/tRavpUtNoqiceJ5PrU3xDfsLcm/U6N93JSM0M9OAiC/X7mPPfejtr6Yc9vSgWlEgVw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-arm64": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-1.9.3.tgz", + "integrity": "sha512-vJkAimD2+sVviNTbaWOGqEBy31cW0ZB52KtpVIbkuma7PlfII3tsLhFa+cwbRAcRBkobBBhqZ06hXoZAN8NODQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-arm64-musl": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.9.3.tgz", + "integrity": "sha512-VBzyhaqqqwP3bAkkBrhVq50i3Uj9+RWuj+pYmXrMDgjS5+SKYGE56BwNw4l8hR3SmYbLSbEo15GcV043CDSk+Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-x64": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-1.9.3.tgz", + "integrity": "sha512-x220V4c+romd26Mu1ptU+EudMXVS4xmzKxPVb9mgnfYlN4Yx9vD5NZraSx/onJnd3Gh/y8iPUdU5CDZJKg9COA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-x64-musl": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-1.9.3.tgz", + "integrity": "sha512-TJmnOG2+NOGM72mlczEsNki9UT+XAsMFAOo8J0me/N47EJ/vkLXxf481evfHLlxMejTY6IN8SdRSiPVLv6AHlA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-win32-arm64": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-1.9.3.tgz", + "integrity": "sha512-lg/yZis2HdQGsycUvHWSzo9kOvnGgvtrYRgoCEwPBwwAL8/6crOp3+f47tPwI/LI1dZrhSji7PNsGKGHbwyAhw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-win32-x64": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-1.9.3.tgz", + "integrity": "sha512-cQMy2zanBkVLpmmxXdK6YePzmZx0s5Z7KEnwmrW54rcXK3myCNbQa09SwGZ8i/8sLw0H9F3X7K4rxVNGU8/D4Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.21.3" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -25312,6 +25477,7 @@ } }, "packages/styles": { + "name": "botframework-webchat-styles", "version": "0.0.0-0", "license": "MIT", "devDependencies": { diff --git a/package.json b/package.json index f35e28bf13..47e09e6144 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "./packages/test/fluent-bundle" ], "scripts": { + "biome": "biome check ./packages", "browser": "node ./packages/test/harness/src/host/dev/index http://localhost:5001/__tests__/html/", "browser:watch": "node-dev --no-notify --respawn ./packages/test/harness/src/host/dev/index http://localhost:5001/__tests__/html/", "build": "npm run build --if-present --workspaces", @@ -47,6 +48,7 @@ "eslint": "npm run precommit", "lint-staged": "lint-staged", "precommit": "npm run precommit --if-present --workspaces", + "precommit:biome": "npm run biome -- --no-errors-on-unmatched", "precommit:eslint:api": "cd packages && cd api && npm run precommit:eslint", "precommit:eslint:bundle": "cd packages && cd bundle && npm run precommit:eslint", "precommit:eslint:component": "cd packages && cd component && npm run precommit:eslint", @@ -165,6 +167,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@babel/runtime": "^7.19.0", + "@biomejs/biome": "1.9.3", "@testing-library/react": "^12.1.5", "@types/jest": "^28.1.8", "@types/react": "^16.14.60", diff --git a/packages/component/src/decorator/private/BorderFlair.module.css b/packages/component/src/decorator/private/BorderFlair.module.css index c5f1a7f5f5..40b9cc8a5f 100644 --- a/packages/component/src/decorator/private/BorderFlair.module.css +++ b/packages/component/src/decorator/private/BorderFlair.module.css @@ -98,10 +98,12 @@ /* Helper variables */ --webchat-decorator-borderFlair-backgroundSize: calc(100% + (2 * var(--webchat-decorator-borderFlair-borderSize))); - --webchat-decorator-borderFlair-borderGradient: linear-gradient(calc(var(--webchat-decorator-borderFlair-animated-angle) * 180deg + 45deg), - var(--webchat-decorator-borderFlair-animated-color1), - var(--webchat-decorator-borderFlair-animated-color2), - var(--webchat-decorator-borderFlair-animated-color3)); + --webchat-decorator-borderFlair-borderGradient: linear-gradient( + calc(var(--webchat-decorator-borderFlair-animated-angle) * 180deg + 45deg), + var(--webchat-decorator-borderFlair-animated-color1), + var(--webchat-decorator-borderFlair-animated-color2), + var(--webchat-decorator-borderFlair-animated-color3) + ); --webchat-decorator-borderFlair-borderMask: linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box, linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%)) border-box; @@ -110,7 +112,8 @@ borderAnimation-color1 1200ms linear 0ms forwards, borderAnimation-color2 1200ms linear 200ms forwards, borderAnimation-color3 1200ms linear 400ms forwards; - background: var(--webchat-decorator-borderFlair-borderGradient) center center / var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize); + background: var(--webchat-decorator-borderFlair-borderGradient) center center / + var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize); border: var(--webchat-decorator-borderFlair-borderSize) solid transparent; border-radius: inherit; inset: 0; @@ -537,15 +540,24 @@ :global(.webchat) .border-flair { --webchat-decorator-borderFlair-animated-angle: calc(0.75 + 2 * var(--webchat-decorator-borderFlair-animated)); - --webchat-decorator-borderFlair-animated-color1: color-mix(in srgb, - var(--webchat-decorator-borderFlair-color1) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.5)) * 100%), - var(--webchat-decorator-borderFlair-color1Fade)); - --webchat-decorator-borderFlair-animated-color2: color-mix(in srgb, - var(--webchat-decorator-borderFlair-color2) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.75)) * 100%), - var(--webchat-decorator-borderFlair-color2Fade)); - --webchat-decorator-borderFlair-animated-color3: color-mix(in srgb, - var(--webchat-decorator-borderFlair-color3) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 2)) * 100%), - var(--webchat-decorator-borderFlair-color3Fade)); + --webchat-decorator-borderFlair-animated-color1: color-mix( + in srgb, + var(--webchat-decorator-borderFlair-color1) + calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.5)) * 100%), + var(--webchat-decorator-borderFlair-color1Fade) + ); + --webchat-decorator-borderFlair-animated-color2: color-mix( + in srgb, + var(--webchat-decorator-borderFlair-color2) + calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.75)) * 100%), + var(--webchat-decorator-borderFlair-color2Fade) + ); + --webchat-decorator-borderFlair-animated-color3: color-mix( + in srgb, + var(--webchat-decorator-borderFlair-color3) + calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 2)) * 100%), + var(--webchat-decorator-borderFlair-color3Fade) + ); animation: borderFlair-animation 2000ms linear forwards; } diff --git a/packages/component/src/decorator/private/BorderLoader.module.css b/packages/component/src/decorator/private/BorderLoader.module.css index e15aa1a257..82b4f263c8 100644 --- a/packages/component/src/decorator/private/BorderLoader.module.css +++ b/packages/component/src/decorator/private/BorderLoader.module.css @@ -23,24 +23,23 @@ width: 100%; } - :global(.webchat) .border-loader__loader { - --webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1, - var(--webchat__border-animation--color-1)); - --webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2, - var(--webchat__border-animation--color-2)); - --webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3, - var(--webchat__border-animation--color-3)); + --webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1, var(--webchat__border-animation--color-1)); + --webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2, var(--webchat__border-animation--color-2)); + --webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3, var(--webchat__border-animation--color-3)); --webchat-decorator-borderLoader-color1Fade: var(--webchat-borderLoader-color1Fade, transparent); --webchat-decorator-borderLoader-color3Fade: var(--webchat-borderLoader-color1Fade, transparent); animation: borderAnimation-position 3s linear infinite; - background: linear-gradient(90deg, + background: linear-gradient( + 90deg, var(--webchat-decorator-borderLoader-color1Fade) 0%, var(--webchat-decorator-borderLoader-color1) 35%, var(--webchat-decorator-borderLoader-color2) 70%, var(--webchat-decorator-borderLoader-color3) 92%, - var(--webchat-decorator-borderLoader-color3Fade)) no-repeat; + var(--webchat-decorator-borderLoader-color3Fade) + ) + no-repeat; height: var(--webchat-decorator-borderLoader-borderSize); inset: 0; isolation: isolate; diff --git a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css index 75e3a9c5e5..09757dbe63 100644 --- a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css +++ b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css @@ -1,4 +1,3 @@ - :global(.webchat-fluent) .activity-decorator { display: contents; font-family: var(--webchat__font--primary); @@ -10,7 +9,11 @@ --webchat-bubble-maxWidth: var(--bubble-maxWidth, 450px); --webchat-bubble-minHeight: var(--bubble-minHeight, 36px); - --webchat-externalLink-mask: var(--externalLink-mask, var(--webchat__icon-url--external-link) center center / 10px 10px); + --webchat-externalLink-mask: var( + --externalLink-mask, + var(--webchat__icon-url--external-link) center center / + 10px 10px + ); --webchat-externalLink-maxWidth: var(--externalLink-maxWidth, 204px); /* Override for stacked layout message which has user message bubble props */ @@ -49,7 +52,7 @@ } } -/* Decorator copilot variant which has bot message */ +/* Decorator copilot variant which has bot message */ :global(.webchat-fluent) .activity-decorator.variant-copilot:not(:has(:global(.webchat__bubble--from-user))) { --webchat__bubble--block-padding: 0; --webchat__bubble--border-radius: var(--webchat-borderRadiusMedium); @@ -116,7 +119,9 @@ } /* Stacked layout which has message bubble */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__stacked-layout__content:has(.webchat__bubble)) { +:global(.webchat-fluent) + .activity-decorator + :global(.webchat__stacked-layout .webchat__stacked-layout__content:has(.webchat__bubble)) { max-width: 100%; overflow: visible; } @@ -134,7 +139,9 @@ } /* Message bubble content */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content) { +:global(.webchat-fluent) + .activity-decorator + :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content) { background-color: var(--webchat__bubble--background-color); border-radius: var(--webchat__bubble--border-radius); border-width: 0; @@ -157,13 +164,15 @@ padding-block-end: 0; } - +:global(.webchat__text-content) { + + :global(.webchat__text-content) { margin-top: calc(var(--webchat__bubble--block-padding) * -1); } } /* Message bubble text content generated badge */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content__generated-badge) { +:global(.webchat-fluent) + .activity-decorator + :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content__generated-badge) { align-items: center; align-self: flex-start; background-color: var(--webchat-colorNeutralBackground5); @@ -179,7 +188,9 @@ } /* Message bubble attachment content */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) { +:global(.webchat-fluent) + .activity-decorator + :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) { cursor: default; font-size: var(--webchat-fontSizeBase300); line-height: var(--webchat-lineHeightBase300); @@ -201,7 +212,10 @@ } /* Markdown links and citation links */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) a[href]:not(:global(.webchat__render-markdown__pure-identifier)) { +:global(.webchat-fluent) + .activity-decorator + :global(.webchat__render-markdown) + a[href]:not(:global(.webchat__render-markdown__pure-identifier)) { color: var(--webchat-colorBrandForegroundLink); text-decoration-color: transparent; @@ -231,8 +245,14 @@ } /* Citation inline references */ -:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) :global(.webchat__render-markdown__citation), -:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) :global(.webchat__render-markdown__pure-identifier) { +:global(.webchat-fluent) + .activity-decorator + :global(.webchat__render-markdown) + :global(.webchat__render-markdown__citation), +:global(.webchat-fluent) + .activity-decorator + :global(.webchat__render-markdown) + :global(.webchat__render-markdown__pure-identifier) { align-items: center; background-color: var(--webchat-colorNeutralBackground3); border-radius: var(--webchat-borderRadiusMedium); @@ -265,7 +285,8 @@ color: var(--webchat-colorBrandForeground2Pressed); } - &::before, &::after { + &::before, + &::after { all: unset; } @@ -284,7 +305,7 @@ /* Citation summary chevron */ :global(.webchat-fluent) .activity-decorator :global(.webchat__link-definitions__header) { border-radius: var(--webchat-borderRadiusMedium); - + :global(.webchat__link-definitions__header-text) { color: var(--webchat-colorNeutralForeground3); } @@ -375,7 +396,9 @@ text-overflow: ellipsis; } - :global(.webchat__link-definitions__list-item-main-text):has(:global(.webchat__link-definitions__open-in-new-window-icon))::before { + :global(.webchat__link-definitions__list-item-main-text):has( + :global(.webchat__link-definitions__open-in-new-window-icon) + )::before { align-self: center; background: currentColor; color: currentColor; diff --git a/packages/fluent-theme/src/components/activity/CopilotMessageHeader.module.css b/packages/fluent-theme/src/components/activity/CopilotMessageHeader.module.css index fc869d0a8d..1bd3549435 100644 --- a/packages/fluent-theme/src/components/activity/CopilotMessageHeader.module.css +++ b/packages/fluent-theme/src/components/activity/CopilotMessageHeader.module.css @@ -1,4 +1,3 @@ - :global(.webchat-fluent) .copilot-message-header { align-items: center; box-sizing: border-box; diff --git a/packages/fluent-theme/src/components/dropZone/DropZone.module.css b/packages/fluent-theme/src/components/dropZone/DropZone.module.css index 64aba2af56..5e95ffb827 100644 --- a/packages/fluent-theme/src/components/dropZone/DropZone.module.css +++ b/packages/fluent-theme/src/components/dropZone/DropZone.module.css @@ -12,12 +12,12 @@ :global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable { background-color: #e00; - color: White + color: White; } :global(.webchat-fluent) .sendbox__attachment-drop-zone-icon { height: 36px; /* Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the "--droppable" modifier.*/ pointer-events: none; - width: 36px + width: 36px; } diff --git a/packages/fluent-theme/src/components/linerActivity/private/LinerMessageActivity.module.css b/packages/fluent-theme/src/components/linerActivity/private/LinerMessageActivity.module.css index 04798b0e7f..17165e5630 100644 --- a/packages/fluent-theme/src/components/linerActivity/private/LinerMessageActivity.module.css +++ b/packages/fluent-theme/src/components/linerActivity/private/LinerMessageActivity.module.css @@ -1,4 +1,3 @@ - :global(.webchat-fluent) .liner-message-activity { align-items: center; box-sizing: border-box; @@ -14,9 +13,10 @@ text-align: center; width: 100%; - &::before, &::after { + &::before, + &::after { border-top: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2); - content: ""; + content: ''; display: flex; flex: auto; min-width: 8px; diff --git a/packages/fluent-theme/src/components/sendBox/Attachments.module.css b/packages/fluent-theme/src/components/sendBox/Attachments.module.css index 198ac16620..3c368c8c86 100644 --- a/packages/fluent-theme/src/components/sendBox/Attachments.module.css +++ b/packages/fluent-theme/src/components/sendBox/Attachments.module.css @@ -3,5 +3,5 @@ border: 1px solid var(--webchat-colorNeutralStroke1); cursor: default; padding: 6px 8px; - width: fit-content + width: fit-content; } diff --git a/packages/fluent-theme/src/components/sendBox/SendBox.module.css b/packages/fluent-theme/src/components/sendBox/SendBox.module.css index 00c96fe2d6..7e98f25c2b 100644 --- a/packages/fluent-theme/src/components/sendBox/SendBox.module.css +++ b/packages/fluent-theme/src/components/sendBox/SendBox.module.css @@ -28,14 +28,13 @@ grid-template: [telephone-keypad-start] 'text-area' [telephone-keypad-end] var(--webchat-sendbox-attachment-area-active) - 'controls' / [telephone-keypad] 1fr - ; + 'controls' / [telephone-keypad] 1fr; line-height: 20px; padding: 8px; position: relative; &:has(.sendbox__attachment--in-grid) { - --webchat-sendbox-attachment-area-active: 'attachment' + --webchat-sendbox-attachment-area-active: 'attachment'; } &:focus-within { @@ -48,7 +47,7 @@ border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover); bottom: -1px; clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%); - content: ""; + content: ''; height: var(--webchat-sendbox-border-radius); left: -1px; position: absolute; diff --git a/packages/fluent-theme/src/components/sendBox/TextArea.module.css b/packages/fluent-theme/src/components/sendBox/TextArea.module.css index 6a0be28621..b7f01dc62a 100644 --- a/packages/fluent-theme/src/components/sendBox/TextArea.module.css +++ b/packages/fluent-theme/src/components/sendBox/TextArea.module.css @@ -44,17 +44,17 @@ /* Chrome, Edge, and Safari */ &::-webkit-scrollbar { - width: 8px + width: 8px; } &::-webkit-scrollbar-track { background-color: var(--webchat-colorNeutralBackground5); - border-radius: 16px + border-radius: 16px; } &::-webkit-scrollbar-thumb { background-color: var(--webchat-colorNeutralForeground2); - border-radius: 16px + border-radius: 16px; } &::-webkit-scrollbar-corner { diff --git a/packages/fluent-theme/src/components/sendBox/Toolbar.module.css b/packages/fluent-theme/src/components/sendBox/Toolbar.module.css index 5fcd63acfa..b775bf27e7 100644 --- a/packages/fluent-theme/src/components/sendBox/Toolbar.module.css +++ b/packages/fluent-theme/src/components/sendBox/Toolbar.module.css @@ -31,16 +31,16 @@ } @media (hover: hover) { - &:not([aria-disabled="true"]):hover { + &:not([aria-disabled='true']):hover { color: var(--webchat-colorNeutralForeground2BrandHover); } } - &:not([aria-disabled="true"]):active { + &:not([aria-disabled='true']):active { color: var(--webchat-colorNeutralForeground2BrandPressed); } - &[aria-disabled="true"] { + &[aria-disabled='true'] { color: var(--webchat-colorNeutralForegroundDisabled); cursor: not-allowed; } @@ -51,7 +51,9 @@ border-inline-end: 1px solid var(--webchat-colorNeutralStroke2); height: 28px; - &:first-child, &:last-child, &:only-child { - display: none + &:first-child, + &:last-child, + &:only-child { + display: none; } } diff --git a/packages/fluent-theme/src/components/suggestedActions/SuggestedAction.module.css b/packages/fluent-theme/src/components/suggestedActions/SuggestedAction.module.css index c6fd13d3ec..0485ee8002 100644 --- a/packages/fluent-theme/src/components/suggestedActions/SuggestedAction.module.css +++ b/packages/fluent-theme/src/components/suggestedActions/SuggestedAction.module.css @@ -14,18 +14,18 @@ transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid); @media (hover: hover) { - &:not([aria-disabled="true"]):hover { + &:not([aria-disabled='true']):hover { background-color: var(--webchat-colorBrandBackground2Hover); - color: var(--webchat-colorBrandForeground2Hover) + color: var(--webchat-colorBrandForeground2Hover); } } - &:not([aria-disabled="true"]):active { + &:not([aria-disabled='true']):active { background-color: var(--webchat-colorBrandBackground2Pressed); - color: var(--webchat-colorBrandForeground2Pressed) + color: var(--webchat-colorBrandForeground2Pressed); } - &[aria-disabled="true"] { + &[aria-disabled='true'] { color: var(--webchat-colorNeutralForegroundDisabled); - cursor: not-allowed + cursor: not-allowed; } } diff --git a/packages/fluent-theme/src/components/suggestedActions/SuggestedActions.module.css b/packages/fluent-theme/src/components/suggestedActions/SuggestedActions.module.css index 36b090badb..163c88a5c2 100644 --- a/packages/fluent-theme/src/components/suggestedActions/SuggestedActions.module.css +++ b/packages/fluent-theme/src/components/suggestedActions/SuggestedActions.module.css @@ -1,4 +1,3 @@ - :global(.webchat-fluent) .suggested-actions { align-items: flex-end; align-self: flex-end; @@ -8,7 +7,7 @@ &:not(:empty) { padding-block-end: 8px; - padding-inline-start: 4px + padding-inline-start: 4px; } &.suggested-actions--flow { @@ -18,6 +17,6 @@ } &.suggested-actions--stacked { - flex-direction: column + flex-direction: column; } } diff --git a/packages/fluent-theme/src/components/telephoneKeypad/private/Button.module.css b/packages/fluent-theme/src/components/telephoneKeypad/private/Button.module.css index 58a9c5cf2c..40fc07e781 100644 --- a/packages/fluent-theme/src/components/telephoneKeypad/private/Button.module.css +++ b/packages/fluent-theme/src/components/telephoneKeypad/private/Button.module.css @@ -1,4 +1,3 @@ - :global(.webchat-fluent) .telephone-keypad__button { -webkit-user-select: none; align-items: center; @@ -28,7 +27,7 @@ &:hover { /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */ - background-color: var(--webchat-colorGray30) + background-color: var(--webchat-colorGray30); } } @@ -49,7 +48,7 @@ justify-content: center; margin: 8px 4px; width: 32px; - }; + } .telephone-keypad__button__ruby { display: none; diff --git a/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.module.css b/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.module.css index 2bf4a54826..5b88f40368 100644 --- a/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.module.css +++ b/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.module.css @@ -1,4 +1,3 @@ - :global(.webchat-fluent) .telephone-keypad { /* Commented out whitelabel styles for now. */ /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */ diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css index 6fab846981..31b5199e20 100644 --- a/packages/fluent-theme/src/components/theme/Theme.module.css +++ b/packages/fluent-theme/src/components/theme/Theme.module.css @@ -97,8 +97,27 @@ --webchat-spacingVerticalXXXL: var(--spacingVerticalXXXL, 32px); /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */ - --webchat-fontFamilyBase: var(--fontFamilyBase, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif); - --webchat-fontFamilyNumeric: var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif); + --webchat-fontFamilyBase: var( + --fontFamilyBase, + 'Segoe UI', + 'Segoe UI Web (West European)', + -apple-system, + BlinkMacSystemFont, + Roboto, + 'Helvetica Neue', + sans-serif + ); + --webchat-fontFamilyNumeric: var( + --fontFamilyNumeric, + Bahnschrift, + 'Segoe UI', + 'Segoe UI Web (West European)', + -apple-system, + BlinkMacSystemFont, + Roboto, + 'Helvetica Neue', + sans-serif + ); /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */ --webchat-fontWeightRegular: var(--fontWeightRegular, 400); @@ -143,8 +162,8 @@ --webchat-durationUltraSlow: var(--durationUltraSlow, 500ms); /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts */ - --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1)); - --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1)); + --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1, 0, 1, 1)); + --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0, 0, 0, 1)); } @media (prefers-reduced-motion) { @@ -167,22 +186,17 @@ --webchat__max-width--bubble: var(--webchat-bubble-maxWidth); --webchat__min-height--bubble: var(--webchat-bubble-minHeight); --webchat__padding--regular: var(--webchat-spacingVerticalS); - --webchat__padding--sendbox: - var(--webchat-spacingVerticalNone) - var(--webchat-spacingHorizontalMNudge) + --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalMNudge) var(--webchat-spacingHorizontalMNudge); - --webchat__border-animation--color-1: #464FEB; - --webchat__border-animation--color-2: #47CFFA; - --webchat__border-animation--color-3: #B47CF8; + --webchat__border-animation--color-1: #464feb; + --webchat__border-animation--color-2: #47cffa; + --webchat__border-animation--color-3: #b47cf8; } :global(.webchat-fluent).theme.variant-copilot :global(.webchat__css-custom-properties) { - --webchat__padding--sendbox: - var(--webchat-spacingVerticalNone) - var(--webchat-spacingHorizontalXL) - var(--webchat-spacingVerticalMNudge) - var(--webchat-spacingHorizontalMNudge); + --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalXL) + var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalMNudge); } /* Transcript surface */ @@ -230,23 +244,31 @@ } } -:global(.webchat-fluent).theme.variant-copilot :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) { +:global(.webchat-fluent).theme.variant-copilot + :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) { scrollbar-gutter: stable; } /* Transcript focus indicator color when in focus-visible state */ -:global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__terminator:focus-visible + .webchat__basic-transcript__focus-indicator) { +:global(.webchat-fluent).theme + :global( + .webchat__basic-transcript + .webchat__basic-transcript__terminator:focus-visible + + .webchat__basic-transcript__focus-indicator + ) { border-color: var(--webchat-colorStrokeFocus2); } /* Transcript Activity indicator without focus-visible state */ -:global(.webchat-fluent).theme :global(.webchat__basic-transcript:not(:focus-visible) .webchat__basic-transcript__activity-indicator--focus) { +:global(.webchat-fluent).theme + :global(.webchat__basic-transcript:not(:focus-visible) .webchat__basic-transcript__activity-indicator--focus) { /* Hide activity focus when no focus-visible state */ display: none; } /* Transcript Focus indicator when activity focused */ -:global(.webchat-fluent).theme :global(.webchat__basic-transcript:focus-visible:has(.webchat__basic-transcript__activity-indicator--focus)) { +:global(.webchat-fluent).theme + :global(.webchat__basic-transcript:focus-visible:has(.webchat__basic-transcript__activity-indicator--focus)) { :global(.webchat__basic-transcript__focus-indicator) { /* Hide transcript focus when an activity is focused */ display: none; @@ -254,13 +276,17 @@ } /* Transcript focused activity */ -:global(.webchat-fluent).theme :global(.webchat__basic-transcript:focus-visible .webchat__basic-transcript__activity:has(.webchat__basic-transcript__activity-indicator--focus)) { +:global(.webchat-fluent).theme + :global( + .webchat__basic-transcript:focus-visible + .webchat__basic-transcript__activity:has(.webchat__basic-transcript__activity-indicator--focus) + ) { :global(.webchat__basic-transcript__activity-indicator--focus) { /* Hide transcript activity focus when the activity is focused */ display: none; } - :global(.webchat__bubble)::after, + :global(.webchat__bubble)::after, :global(.pre-chat-message-activity)::after { border-radius: var(--webchat__bubble--border-radius); content: ''; @@ -290,7 +316,11 @@ } /* Transcript with a single pre-chat activity */ -:global(.webchat-fluent).theme :global(.webchat__basic-transcript:has(.webchat__basic-transcript__activity:only-child):has(.pre-chat-message-activity) .webchat__basic-transcript__filler) { +:global(.webchat-fluent).theme + :global( + .webchat__basic-transcript:has(.webchat__basic-transcript__activity:only-child):has(.pre-chat-message-activity) + .webchat__basic-transcript__filler + ) { /* limit grow to half of the size to center the activity */ flex-grow: 0.5; } @@ -367,7 +397,7 @@ outline-offset: calc(var(--webchat-strokeWidthThick) * -1); } - &[aria-disabled="true"] { + &[aria-disabled='true'] { background: var(--webchat-colorNeutralBackgroundDisabled); border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStrokeDisabled); color: var(--webchat-colorNeutralForegroundDisabled);