From 16302c013063ca85088240e3054ac20466d8e9f4 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Thu, 12 Dec 2024 12:30:13 -0500 Subject: [PATCH] Move component styles to use CSS files (#298) --- package-lock.json | 924 +++++++++++++++++- package.json | 1 + scripts/build.js | 6 +- .../animated-image/animated-image.css | 50 + .../animated-image/animated-image.styles.ts | 54 - .../animated-image/animated-image.ts | 2 +- src/components/animation/animation.css | 3 + src/components/animation/animation.styles.ts | 7 - src/components/animation/animation.ts | 2 +- src/components/avatar/avatar.css | 63 ++ src/components/avatar/avatar.styles.ts | 67 -- src/components/avatar/avatar.ts | 2 +- src/components/badge/badge.css | 77 ++ src/components/badge/badge.styles.ts | 81 -- src/components/badge/badge.ts | 2 +- .../breadcrumb-item/breadcrumb-item.css | 83 ++ .../breadcrumb-item/breadcrumb-item.styles.ts | 87 -- .../breadcrumb-item/breadcrumb-item.ts | 2 +- src/components/breadcrumb/breadcrumb.css | 5 + .../breadcrumb/breadcrumb.styles.ts | 9 - src/components/breadcrumb/breadcrumb.ts | 2 +- src/components/button-group/button-group.css | 19 + .../button-group/button-group.styles.ts | 23 - src/components/button-group/button-group.ts | 2 +- src/components/button/button.css | 545 +++++++++++ src/components/button/button.styles.ts | 551 ----------- src/components/button/button.ts | 2 +- src/components/callout/callout.css | 64 ++ src/components/callout/callout.style.ts | 68 -- src/components/callout/callout.ts | 2 +- src/components/card/card.css | 75 ++ src/components/card/card.styles.ts | 79 -- src/components/card/card.ts | 2 +- .../carousel-item/carousel-item.css | 19 + .../carousel-item/carousel-item.styles.ts | 23 - src/components/carousel-item/carousel-item.ts | 2 +- src/components/carousel/carousel.css | 157 +++ src/components/carousel/carousel.styles.ts | 161 --- src/components/carousel/carousel.ts | 2 +- src/components/checkbox/checkbox.css | 121 +++ src/components/checkbox/checkbox.styles.ts | 125 --- src/components/checkbox/checkbox.ts | 2 +- src/components/code-demo/code-demo.css | 193 ++++ src/components/code-demo/code-demo.styles.ts | 197 ---- src/components/code-demo/code-demo.ts | 2 +- src/components/color-picker/color-picker.css | 342 +++++++ .../color-picker/color-picker.styles.ts | 346 ------- src/components/color-picker/color-picker.ts | 2 +- src/components/copy-button/copy-button.css | 74 ++ .../copy-button/copy-button.styles.ts | 78 -- src/components/copy-button/copy-button.ts | 2 +- src/components/details/details.css | 107 ++ src/components/details/details.styles.ts | 111 --- src/components/details/details.ts | 2 +- src/components/dialog/dialog.css | 173 ++++ src/components/dialog/dialog.styles.ts | 177 ---- src/components/dialog/dialog.ts | 2 +- src/components/divider/divider.css | 18 + src/components/divider/divider.styles.ts | 22 - src/components/divider/divider.ts | 2 +- src/components/drawer/drawer.css | 280 ++++++ src/components/drawer/drawer.styles.ts | 284 ------ src/components/drawer/drawer.ts | 2 +- src/components/dropdown/dropdown.css | 47 + src/components/dropdown/dropdown.styles.ts | 51 - src/components/dropdown/dropdown.ts | 2 +- src/components/icon-button/icon-button.css | 49 + .../icon-button/icon-button.styles.ts | 53 - src/components/icon-button/icon-button.ts | 2 +- src/components/icon/icon.css | 33 + src/components/icon/icon.styles.ts | 37 - src/components/icon/icon.ts | 2 +- .../image-comparer/image-comparer.css | 72 ++ .../image-comparer/image-comparer.styles.ts | 76 -- .../image-comparer/image-comparer.ts | 2 +- src/components/include/include.css | 3 + src/components/include/include.styles.ts | 7 - src/components/include/include.ts | 2 +- src/components/input/input.css | 262 +++++ src/components/input/input.styles.ts | 266 ----- src/components/input/input.ts | 2 +- src/components/menu-item/menu-item.css | 152 +++ src/components/menu-item/menu-item.styles.ts | 156 --- src/components/menu-item/menu-item.ts | 2 +- src/components/menu-label/menu-label.css | 14 + .../menu-label/menu-label.styles.ts | 18 - src/components/menu-label/menu-label.ts | 2 +- src/components/menu/menu.css | 15 + src/components/menu/menu.styles.ts | 19 - src/components/menu/menu.ts | 2 +- .../mutation-observer/mutation-observer.css | 3 + .../mutation-observer.styles.ts | 7 - .../mutation-observer/mutation-observer.ts | 2 +- src/components/option/option.css | 85 ++ src/components/option/option.styles.ts | 89 -- src/components/option/option.ts | 2 +- src/components/page/page.css | 258 +++++ src/components/page/page.styles.ts | 262 ----- src/components/page/page.ts | 2 +- src/components/popup/popup.css | 96 ++ src/components/popup/popup.styles.ts | 100 -- src/components/popup/popup.ts | 2 +- src/components/progress-bar/progress-bar.css | 80 ++ .../progress-bar/progress-bar.styles.ts | 84 -- src/components/progress-bar/progress-bar.ts | 2 +- .../progress-ring/progress-ring.css | 64 ++ .../progress-ring/progress-ring.styles.ts | 68 -- src/components/progress-ring/progress-ring.ts | 2 +- src/components/qr-code/qr-code.css | 12 + src/components/qr-code/qr-code.styles.ts | 16 - src/components/qr-code/qr-code.ts | 2 +- src/components/radio-button/radio-button.css | 21 + .../radio-button/radio-button.styles.ts | 28 - src/components/radio-button/radio-button.ts | 5 +- src/components/radio-group/radio-group.css | 31 + .../radio-group/radio-group.styles.ts | 35 - src/components/radio-group/radio-group.ts | 2 +- src/components/radio/radio.css | 110 +++ src/components/radio/radio.styles.ts | 114 --- src/components/radio/radio.ts | 2 +- src/components/range/range.css | 218 +++++ src/components/range/range.styles.ts | 222 ----- src/components/range/range.ts | 2 +- src/components/rating/rating.css | 87 ++ src/components/rating/rating.styles.ts | 91 -- src/components/rating/rating.ts | 2 +- .../resize-observer/resize-observer.css | 3 + .../resize-observer/resize-observer.styles.ts | 7 - .../resize-observer/resize-observer.ts | 2 +- src/components/select/select.css | 332 +++++++ src/components/select/select.styles.ts | 336 ------- src/components/select/select.ts | 2 +- src/components/skeleton/skeleton.css | 59 ++ src/components/skeleton/skeleton.styles.ts | 63 -- src/components/skeleton/skeleton.ts | 2 +- src/components/spinner/spinner.css | 59 ++ src/components/spinner/spinner.styles.ts | 63 -- src/components/spinner/spinner.ts | 2 +- src/components/split-panel/split-panel.css | 74 ++ .../split-panel/split-panel.styles.ts | 78 -- src/components/split-panel/split-panel.ts | 2 +- src/components/switch/switch.css | 124 +++ src/components/switch/switch.styles.ts | 128 --- src/components/switch/switch.ts | 2 +- src/components/tab-group/tab-group.css | 245 +++++ src/components/tab-group/tab-group.styles.ts | 249 ----- src/components/tab-group/tab-group.ts | 2 +- src/components/tab-panel/tab-panel.css | 14 + src/components/tab-panel/tab-panel.styles.ts | 18 - src/components/tab-panel/tab-panel.ts | 2 +- src/components/tab/tab.css | 47 + src/components/tab/tab.styles.ts | 51 - src/components/tab/tab.ts | 2 +- src/components/tag/tag.css | 105 ++ src/components/tag/tag.styles.ts | 109 --- src/components/tag/tag.ts | 2 +- src/components/textarea/textarea.css | 144 +++ src/components/textarea/textarea.styles.ts | 148 --- src/components/textarea/textarea.ts | 2 +- src/components/tooltip/tooltip.css | 53 + src/components/tooltip/tooltip.styles.ts | 57 -- src/components/tooltip/tooltip.ts | 2 +- src/components/tree-item/tree-item.css | 152 +++ src/components/tree-item/tree-item.styles.ts | 156 --- src/components/tree-item/tree-item.ts | 2 +- .../tree/{tree.styles.ts => tree.css} | 26 +- src/components/tree/tree.ts | 2 +- .../viewport-demo/viewport-demo.css | 154 +++ .../viewport-demo/viewport-demo.styles.ts | 158 --- src/components/viewport-demo/viewport-demo.ts | 2 +- .../visually-hidden/visually-hidden.css | 11 + .../visually-hidden/visually-hidden.styles.ts | 15 - .../visually-hidden/visually-hidden.ts | 2 +- src/internal/webawesome-element.ts | 10 +- 174 files changed, 6752 insertions(+), 6073 deletions(-) create mode 100644 src/components/animated-image/animated-image.css delete mode 100644 src/components/animated-image/animated-image.styles.ts create mode 100644 src/components/animation/animation.css delete mode 100644 src/components/animation/animation.styles.ts create mode 100644 src/components/avatar/avatar.css delete mode 100644 src/components/avatar/avatar.styles.ts create mode 100644 src/components/badge/badge.css delete mode 100644 src/components/badge/badge.styles.ts create mode 100644 src/components/breadcrumb-item/breadcrumb-item.css delete mode 100644 src/components/breadcrumb-item/breadcrumb-item.styles.ts create mode 100644 src/components/breadcrumb/breadcrumb.css delete mode 100644 src/components/breadcrumb/breadcrumb.styles.ts create mode 100644 src/components/button-group/button-group.css delete mode 100644 src/components/button-group/button-group.styles.ts create mode 100644 src/components/button/button.css delete mode 100644 src/components/button/button.styles.ts create mode 100644 src/components/callout/callout.css delete mode 100644 src/components/callout/callout.style.ts create mode 100644 src/components/card/card.css delete mode 100644 src/components/card/card.styles.ts create mode 100644 src/components/carousel-item/carousel-item.css delete mode 100644 src/components/carousel-item/carousel-item.styles.ts create mode 100644 src/components/carousel/carousel.css delete mode 100644 src/components/carousel/carousel.styles.ts create mode 100644 src/components/checkbox/checkbox.css delete mode 100644 src/components/checkbox/checkbox.styles.ts create mode 100644 src/components/code-demo/code-demo.css delete mode 100644 src/components/code-demo/code-demo.styles.ts create mode 100644 src/components/color-picker/color-picker.css delete mode 100644 src/components/color-picker/color-picker.styles.ts create mode 100644 src/components/copy-button/copy-button.css delete mode 100644 src/components/copy-button/copy-button.styles.ts create mode 100644 src/components/details/details.css delete mode 100644 src/components/details/details.styles.ts create mode 100644 src/components/dialog/dialog.css delete mode 100644 src/components/dialog/dialog.styles.ts create mode 100644 src/components/divider/divider.css delete mode 100644 src/components/divider/divider.styles.ts create mode 100644 src/components/drawer/drawer.css delete mode 100644 src/components/drawer/drawer.styles.ts create mode 100644 src/components/dropdown/dropdown.css delete mode 100644 src/components/dropdown/dropdown.styles.ts create mode 100644 src/components/icon-button/icon-button.css delete mode 100644 src/components/icon-button/icon-button.styles.ts create mode 100644 src/components/icon/icon.css delete mode 100644 src/components/icon/icon.styles.ts create mode 100644 src/components/image-comparer/image-comparer.css delete mode 100644 src/components/image-comparer/image-comparer.styles.ts create mode 100644 src/components/include/include.css delete mode 100644 src/components/include/include.styles.ts create mode 100644 src/components/input/input.css delete mode 100644 src/components/input/input.styles.ts create mode 100644 src/components/menu-item/menu-item.css delete mode 100644 src/components/menu-item/menu-item.styles.ts create mode 100644 src/components/menu-label/menu-label.css delete mode 100644 src/components/menu-label/menu-label.styles.ts create mode 100644 src/components/menu/menu.css delete mode 100644 src/components/menu/menu.styles.ts create mode 100644 src/components/mutation-observer/mutation-observer.css delete mode 100644 src/components/mutation-observer/mutation-observer.styles.ts create mode 100644 src/components/option/option.css delete mode 100644 src/components/option/option.styles.ts create mode 100644 src/components/page/page.css delete mode 100644 src/components/page/page.styles.ts create mode 100644 src/components/popup/popup.css delete mode 100644 src/components/popup/popup.styles.ts create mode 100644 src/components/progress-bar/progress-bar.css delete mode 100644 src/components/progress-bar/progress-bar.styles.ts create mode 100644 src/components/progress-ring/progress-ring.css delete mode 100644 src/components/progress-ring/progress-ring.styles.ts create mode 100644 src/components/qr-code/qr-code.css delete mode 100644 src/components/qr-code/qr-code.styles.ts create mode 100644 src/components/radio-button/radio-button.css delete mode 100644 src/components/radio-button/radio-button.styles.ts create mode 100644 src/components/radio-group/radio-group.css delete mode 100644 src/components/radio-group/radio-group.styles.ts create mode 100644 src/components/radio/radio.css delete mode 100644 src/components/radio/radio.styles.ts create mode 100644 src/components/range/range.css delete mode 100644 src/components/range/range.styles.ts create mode 100644 src/components/rating/rating.css delete mode 100644 src/components/rating/rating.styles.ts create mode 100644 src/components/resize-observer/resize-observer.css delete mode 100644 src/components/resize-observer/resize-observer.styles.ts create mode 100644 src/components/select/select.css delete mode 100644 src/components/select/select.styles.ts create mode 100644 src/components/skeleton/skeleton.css delete mode 100644 src/components/skeleton/skeleton.styles.ts create mode 100644 src/components/spinner/spinner.css delete mode 100644 src/components/spinner/spinner.styles.ts create mode 100644 src/components/split-panel/split-panel.css delete mode 100644 src/components/split-panel/split-panel.styles.ts create mode 100644 src/components/switch/switch.css delete mode 100644 src/components/switch/switch.styles.ts create mode 100644 src/components/tab-group/tab-group.css delete mode 100644 src/components/tab-group/tab-group.styles.ts create mode 100644 src/components/tab-panel/tab-panel.css delete mode 100644 src/components/tab-panel/tab-panel.styles.ts create mode 100644 src/components/tab/tab.css delete mode 100644 src/components/tab/tab.styles.ts create mode 100644 src/components/tag/tag.css delete mode 100644 src/components/tag/tag.styles.ts create mode 100644 src/components/textarea/textarea.css delete mode 100644 src/components/textarea/textarea.styles.ts create mode 100644 src/components/tooltip/tooltip.css delete mode 100644 src/components/tooltip/tooltip.styles.ts create mode 100644 src/components/tree-item/tree-item.css delete mode 100644 src/components/tree-item/tree-item.styles.ts rename src/components/tree/{tree.styles.ts => tree.css} (53%) create mode 100644 src/components/viewport-demo/viewport-demo.css delete mode 100644 src/components/viewport-demo/viewport-demo.styles.ts create mode 100644 src/components/visually-hidden/visually-hidden.css delete mode 100644 src/components/visually-hidden/visually-hidden.styles.ts diff --git a/package-lock.json b/package-lock.json index 9e41e6bd5..b8ed8140f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "devDependencies": { "@11ty/eleventy": "3.0.0-alpha.5", "@custom-elements-manifest/analyzer": "^0.9.4", + "@konnorr/esbuild-plugin-lit-css": "^1.0.1", "@lit-labs/eleventy-plugin-lit": "^1.0.3", "@lit-labs/testing": "^0.2.4", "@lit/react": "^1.0.0", @@ -1573,6 +1574,21 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@konnorr/esbuild-plugin-lit-css": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@konnorr/esbuild-plugin-lit-css/-/esbuild-plugin-lit-css-1.0.1.tgz", + "integrity": "sha512-RIK1KGZ/jO/0ijDVi4ccd9RdlsfLbwB6vMe05ZpZn+t53ODnAwU/AfHxUHxt+jfNAyTGslRSfWncgXQOGx1uQw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@pwrs/lit-css": "^3.0.0" + }, + "peerDependencies": { + "@types/node": "^20.14.8", + "esbuild": ">=0.16.17 <0.24.0", + "lit": "^2.7.2 || ^3.0.0" + } + }, "node_modules/@lit-labs/eleventy-plugin-lit": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@lit-labs/eleventy-plugin-lit/-/eleventy-plugin-lit-1.0.3.tgz", @@ -1992,6 +2008,16 @@ "streamx": "^2.15.0" } }, + "node_modules/@pwrs/lit-css": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@pwrs/lit-css/-/lit-css-3.0.0.tgz", + "integrity": "sha512-10Xod+Z8jh/uHRmgRjMwroXHoG7hVgMcl3G+4FvS3B1yzyopF0niFjCEyg+ZXeLWBJ45BckyyP8aZtZhtk5EYQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "cssnano": "^6.1.2" + } + }, "node_modules/@rollup/plugin-node-resolve": { "version": "15.2.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz", @@ -2348,6 +2374,16 @@ "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==", "dev": true }, + "node_modules/@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@types/accepts": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.7.tgz", @@ -2606,12 +2642,13 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.11.6", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.6.tgz", - "integrity": "sha512-+EOokTnksGVgip2PbYbr3xnR7kZigh4LbybAfBAw5BpnQ+FqBYUsvCEjYd70IXKlbohQ64mzEYmMtlWUY8q//Q==", + "version": "20.17.10", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.10.tgz", + "integrity": "sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==", "dev": true, + "license": "MIT", "dependencies": { - "undici-types": "~5.26.4" + "undici-types": "~6.19.2" } }, "node_modules/@types/parse5": { @@ -4684,6 +4721,39 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/browserslist": { + "version": "4.24.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", + "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "caniuse-lite": "^1.0.30001669", + "electron-to-chromium": "^1.5.41", + "node-releases": "^2.0.18", + "update-browserslist-db": "^1.1.1" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, "node_modules/bs-recipes": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz", @@ -4859,6 +4929,40 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/caniuse-api": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", + "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.0.0", + "caniuse-lite": "^1.0.0", + "lodash.memoize": "^4.1.2", + "lodash.uniq": "^4.5.0" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001688", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001688.tgz", + "integrity": "sha512-Nmqpru91cuABu/DTCXbM2NSRHzM2uVHfPnhJ/1zEAJx/ILBRVmz3pzH4N7DZqbdG0gWClsCC05Oj0mJ/1AWMbA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, "node_modules/capital-case": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", @@ -5320,6 +5424,13 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "dev": true, + "license": "MIT" + }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", @@ -5838,6 +5949,19 @@ "node": ">=8" } }, + "node_modules/css-declaration-sorter": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz", + "integrity": "sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.0.9" + } + }, "node_modules/css-select": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", @@ -5909,6 +6033,20 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -5921,6 +6059,147 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/cssnano": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-6.1.2.tgz", + "integrity": "sha512-rYk5UeX7VAM/u0lNqewCdasdtPK81CgX8wJFLEIXHbV2oldWRgJAsZrdhRXkV1NJzA2g850KiFm9mMU2HxNxMA==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssnano-preset-default": "^6.1.2", + "lilconfig": "^3.1.1" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/cssnano" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/cssnano-preset-default": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.1.2.tgz", + "integrity": "sha512-1C0C+eNaeN8OcHQa193aRgYexyJtU8XwbdieEjClw+J9d94E41LwT6ivKH0WT+fYwYWB0Zp3I3IZ7tI/BbUbrg==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.0", + "css-declaration-sorter": "^7.2.0", + "cssnano-utils": "^4.0.2", + "postcss-calc": "^9.0.1", + "postcss-colormin": "^6.1.0", + "postcss-convert-values": "^6.1.0", + "postcss-discard-comments": "^6.0.2", + "postcss-discard-duplicates": "^6.0.3", + "postcss-discard-empty": "^6.0.3", + "postcss-discard-overridden": "^6.0.2", + "postcss-merge-longhand": "^6.0.5", + "postcss-merge-rules": "^6.1.1", + "postcss-minify-font-values": "^6.1.0", + "postcss-minify-gradients": "^6.0.3", + "postcss-minify-params": "^6.1.0", + "postcss-minify-selectors": "^6.0.4", + "postcss-normalize-charset": "^6.0.2", + "postcss-normalize-display-values": "^6.0.2", + "postcss-normalize-positions": "^6.0.2", + "postcss-normalize-repeat-style": "^6.0.2", + "postcss-normalize-string": "^6.0.2", + "postcss-normalize-timing-functions": "^6.0.2", + "postcss-normalize-unicode": "^6.1.0", + "postcss-normalize-url": "^6.0.2", + "postcss-normalize-whitespace": "^6.0.2", + "postcss-ordered-values": "^6.0.2", + "postcss-reduce-initial": "^6.1.0", + "postcss-reduce-transforms": "^6.0.2", + "postcss-svgo": "^6.0.3", + "postcss-unique-selectors": "^6.0.4" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/cssnano-utils": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.2.tgz", + "integrity": "sha512-ZR1jHg+wZ8o4c3zqf1SIUSTIvm/9mU343FMR6Obe/unskbvpGhZOo1J6d/r8D1pzkRQYuwbcH3hToOuoA2G7oQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/cssnano/node_modules/lilconfig": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, + "node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dev": true, + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "dev": true, + "license": "CC0-1.0" + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -6716,6 +6995,13 @@ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", "dev": true }, + "node_modules/electron-to-chromium": { + "version": "1.5.73", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.73.tgz", + "integrity": "sha512-8wGNxG9tAG5KhGd3eeA0o6ixhiNdgr0DcHWm85XPCphwZgD1lIEoi6t3VERayWao7SF7AAZTw6oARGJeVjH8Kg==", + "dev": true, + "license": "ISC" + }, "node_modules/emoji-regex": { "version": "10.3.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz", @@ -7086,10 +7372,11 @@ } }, "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", "dev": true, + "license": "MIT", "engines": { "node": ">=6" } @@ -10813,12 +11100,26 @@ "integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA==", "dev": true }, + "node_modules/lodash.memoize": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", + "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==", + "dev": true, + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "node_modules/lodash.uniq": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", + "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", + "dev": true, + "license": "MIT" + }, "node_modules/log-symbols": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-6.0.0.tgz", @@ -11351,6 +11652,13 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true, + "license": "CC0-1.0" + }, "node_modules/mdurl": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", @@ -11854,6 +12162,13 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/node-releases": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", + "dev": true, + "license": "MIT" + }, "node_modules/node-retrieve-globals": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-5.0.0.tgz", @@ -12715,6 +13030,13 @@ "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", "dev": true }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, "node_modules/picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", @@ -12911,6 +13233,491 @@ "lodash": "^4.17.14" } }, + "node_modules/postcss": { + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "peer": true, + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-calc": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz", + "integrity": "sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.0.11", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.2.2" + } + }, + "node_modules/postcss-colormin": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.1.0.tgz", + "integrity": "sha512-x9yX7DOxeMAR+BgGVnNSAxmAj98NX/YxEMNFP+SDCEeNLb2r3i6Hh1ksMsnW8Ub5SLCpbescQqn9YEbE9554Sw==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.0", + "caniuse-api": "^3.0.0", + "colord": "^2.9.3", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-convert-values": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.1.0.tgz", + "integrity": "sha512-zx8IwP/ts9WvUM6NkVSkiU902QZL1bwPhaVaLynPtCsOTqp+ZKbNi+s6XJg3rfqpKGA/oc7Oxk5t8pOQJcwl/w==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.0", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-discard-comments": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.2.tgz", + "integrity": "sha512-65w/uIqhSBBfQmYnG92FO1mWZjJ4GL5b8atm5Yw2UgrwD7HiNiSSNwJor1eCFGzUgYnN/iIknhNRVqjrrpuglw==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-discard-duplicates": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.3.tgz", + "integrity": "sha512-+JA0DCvc5XvFAxwx6f/e68gQu/7Z9ud584VLmcgto28eB8FqSFZwtrLwB5Kcp70eIoWP/HXqz4wpo8rD8gpsTw==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-discard-empty": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.3.tgz", + "integrity": "sha512-znyno9cHKQsK6PtxL5D19Fj9uwSzC2mB74cpT66fhgOadEUPyXFkbgwm5tvc3bt3NAy8ltE5MrghxovZRVnOjQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-discard-overridden": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.2.tgz", + "integrity": "sha512-j87xzI4LUggC5zND7KdjsI25APtyMuynXZSujByMaav2roV6OZX+8AaCUcZSWqckZpjAjRyFDdpqybgjFO0HJQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-merge-longhand": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.5.tgz", + "integrity": "sha512-5LOiordeTfi64QhICp07nzzuTDjNSO8g5Ksdibt44d+uvIIAE1oZdRn8y/W5ZtYgRH/lnLDlvi9F8btZcVzu3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0", + "stylehacks": "^6.1.1" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-merge-rules": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.1.1.tgz", + "integrity": "sha512-KOdWF0gju31AQPZiD+2Ar9Qjowz1LTChSjFFbS+e2sFgc4uHOp3ZvVX4sNeTlk0w2O31ecFGgrFzhO0RSWbWwQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.0", + "caniuse-api": "^3.0.0", + "cssnano-utils": "^4.0.2", + "postcss-selector-parser": "^6.0.16" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-minify-font-values": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.1.0.tgz", + "integrity": "sha512-gklfI/n+9rTh8nYaSJXlCo3nOKqMNkxuGpTn/Qm0gstL3ywTr9/WRKznE+oy6fvfolH6dF+QM4nCo8yPLdvGJg==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-minify-gradients": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.3.tgz", + "integrity": "sha512-4KXAHrYlzF0Rr7uc4VrfwDJ2ajrtNEpNEuLxFgwkhFZ56/7gaE4Nr49nLsQDZyUe+ds+kEhf+YAUolJiYXF8+Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "colord": "^2.9.3", + "cssnano-utils": "^4.0.2", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-minify-params": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.1.0.tgz", + "integrity": "sha512-bmSKnDtyyE8ujHQK0RQJDIKhQ20Jq1LYiez54WiaOoBtcSuflfK3Nm596LvbtlFcpipMjgClQGyGr7GAs+H1uA==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.0", + "cssnano-utils": "^4.0.2", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-minify-selectors": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.4.tgz", + "integrity": "sha512-L8dZSwNLgK7pjTto9PzWRoMbnLq5vsZSTu8+j1P/2GB8qdtGQfn+K1uSvFgYvgh83cbyxT5m43ZZhUMTJDSClQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.0.16" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-charset": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.2.tgz", + "integrity": "sha512-a8N9czmdnrjPHa3DeFlwqst5eaL5W8jYu3EBbTTkI5FHkfMhFZh1EGbku6jhHhIzTA6tquI2P42NtZ59M/H/kQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-display-values": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.2.tgz", + "integrity": "sha512-8H04Mxsb82ON/aAkPeq8kcBbAtI5Q2a64X/mnRRfPXBq7XeogoQvReqxEfc0B4WPq1KimjezNC8flUtC3Qz6jg==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-positions": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.2.tgz", + "integrity": "sha512-/JFzI441OAB9O7VnLA+RtSNZvQ0NCFZDOtp6QPFo1iIyawyXg0YI3CYM9HBy1WvwCRHnPep/BvI1+dGPKoXx/Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-repeat-style": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.2.tgz", + "integrity": "sha512-YdCgsfHkJ2jEXwR4RR3Tm/iOxSfdRt7jplS6XRh9Js9PyCR/aka/FCb6TuHT2U8gQubbm/mPmF6L7FY9d79VwQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-string": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.2.tgz", + "integrity": "sha512-vQZIivlxlfqqMp4L9PZsFE4YUkWniziKjQWUtsxUiVsSSPelQydwS8Wwcuw0+83ZjPWNTl02oxlIvXsmmG+CiQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-timing-functions": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.2.tgz", + "integrity": "sha512-a+YrtMox4TBtId/AEwbA03VcJgtyW4dGBizPl7e88cTFULYsprgHWTbfyjSLyHeBcK/Q9JhXkt2ZXiwaVHoMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-unicode": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.1.0.tgz", + "integrity": "sha512-QVC5TQHsVj33otj8/JD869Ndr5Xcc/+fwRh4HAsFsAeygQQXm+0PySrKbr/8tkDKzW+EVT3QkqZMfFrGiossDg==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.0", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-url": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.2.tgz", + "integrity": "sha512-kVNcWhCeKAzZ8B4pv/DnrU1wNh458zBNp8dh4y5hhxih5RZQ12QWMuQrDgPRw3LRl8mN9vOVfHl7uhvHYMoXsQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-normalize-whitespace": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.2.tgz", + "integrity": "sha512-sXZ2Nj1icbJOKmdjXVT9pnyHQKiSAyuNQHSgRCUgThn2388Y9cGVDR+E9J9iAYbSbLHI+UUwLVl1Wzco/zgv0Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-ordered-values": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.2.tgz", + "integrity": "sha512-VRZSOB+JU32RsEAQrO94QPkClGPKJEL/Z9PCBImXMhIeK5KAYo6slP/hBYlLgrCjFxyqvn5VC81tycFEDBLG1Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssnano-utils": "^4.0.2", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-reduce-initial": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.1.0.tgz", + "integrity": "sha512-RarLgBK/CrL1qZags04oKbVbrrVK2wcxhvta3GCxrZO4zveibqbRPmm2VI8sSgCXwoUHEliRSbOfpR0b/VIoiw==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.0", + "caniuse-api": "^3.0.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-reduce-transforms": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.2.tgz", + "integrity": "sha512-sB+Ya++3Xj1WaT9+5LOOdirAxP7dJZms3GRcYheSPi1PiTMigsxHAdkrbItHxwYHr4kt1zL7mmcHstgMYT+aiA==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-svgo": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.3.tgz", + "integrity": "sha512-dlrahRmxP22bX6iKEjOM+c8/1p+81asjKT+V5lrgOH944ryx/OHpclnIbGsKVd3uWOXFLYJwCVf0eEkJGvO96g==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.2.0", + "svgo": "^3.2.0" + }, + "engines": { + "node": "^14 || ^16 || >= 18" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-unique-selectors": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.4.tgz", + "integrity": "sha512-K38OCaIrO8+PzpArzkLKB42dSARtC2tmG6PvD4b1o1Q2E9Os8jzfWFfSy/rixsHwohtsDdFtAWGjFVFUdwYaMg==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.0.16" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, "node_modules/posthtml": { "version": "0.16.6", "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz", @@ -14457,6 +15264,16 @@ "node": ">= 8" } }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/sourcemap-codec": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", @@ -14738,6 +15555,23 @@ "node": ">=0.8.0" } }, + "node_modules/stylehacks": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.1.1.tgz", + "integrity": "sha512-gSTTEQ670cJNoaeIp9KX6lZmm8LJ3jPB5yJmX8Zq/wQxOsAFXV3qjWzHas3YYk1qesuVIyYWWUpZ0vSE/dTSGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.0", + "postcss-selector-parser": "^6.0.16" + }, + "engines": { + "node": "^14 || ^16 || >=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -14762,6 +15596,42 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svgo": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", + "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" + } + }, + "node_modules/svgo/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 10" + } + }, "node_modules/table-layout": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-3.0.2.tgz", @@ -15222,10 +16092,11 @@ } }, "node_modules/undici-types": { - "version": "5.26.5", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", - "dev": true + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "dev": true, + "license": "MIT" }, "node_modules/unique-string": { "version": "2.0.0", @@ -15257,6 +16128,37 @@ "node": ">= 0.8" } }, + "node_modules/update-browserslist-db": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", + "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.0" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, "node_modules/upper-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", diff --git a/package.json b/package.json index 3fb6d13d2..830b72229 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "devDependencies": { "@11ty/eleventy": "3.0.0-alpha.5", "@custom-elements-manifest/analyzer": "^0.9.4", + "@konnorr/esbuild-plugin-lit-css": "^1.0.1", "@lit-labs/eleventy-plugin-lit": "^1.0.3", "@lit-labs/testing": "^0.2.4", "@lit/react": "^1.0.0", diff --git a/scripts/build.js b/scripts/build.js index 7712e493f..a5e952546 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -13,6 +13,7 @@ import esbuild from 'esbuild'; import getPort, { portNumbers } from 'get-port'; import ora from 'ora'; import process from 'process'; +import { litCssPlugin } from '@konnorr/esbuild-plugin-lit-css'; const __dirname = dirname(fileURLToPath(import.meta.url)); const isDeveloping = process.argv.includes('--develop'); @@ -171,7 +172,10 @@ async function generateBundle() { bundle: true, splitting: true, minify: false, - plugins: [replace({ __WEBAWESOME_VERSION__: version })] + plugins: [replace({ __WEBAWESOME_VERSION__: version }), litCssPlugin()], + loader: { + '.css': 'text' + } }; const unbundledConfig = { diff --git a/src/components/animated-image/animated-image.css b/src/components/animated-image/animated-image.css new file mode 100644 index 000000000..91028b6e2 --- /dev/null +++ b/src/components/animated-image/animated-image.css @@ -0,0 +1,50 @@ +:host { + --control-box-size: 3rem; + --icon-size: calc(var(--control-box-size) * 0.625); + + display: inline-flex; + position: relative; + cursor: pointer; +} + +img { + display: block; + width: 100%; + height: 100%; +} + +img[aria-hidden='true'] { + display: none; +} + +.animated-image__control-box { + display: flex; + position: absolute; + align-items: center; + justify-content: center; + top: calc(50% - var(--control-box-size) / 2); + right: calc(50% - var(--control-box-size) / 2); + width: var(--control-box-size); + height: var(--control-box-size); + font-size: calc(var(--icon-size) * 0.75); + background: none; + border: solid var(--wa-border-width-s) currentColor; + background-color: rgb(0 0 0 / 50%); + border-radius: var(--wa-border-radius-circle); + color: white; + pointer-events: none; + transition: opacity var(--wa-transition-normal) var(--wa-transition-easing); +} + +:host([play]:hover) .animated-image__control-box { + opacity: 1; +} + +:host([play]:not(:hover)) .animated-image__control-box { + opacity: 0; +} + +:host([play]) slot[name='play-icon'], +:host(:not([play])) slot[name='pause-icon'] { + display: none; +} diff --git a/src/components/animated-image/animated-image.styles.ts b/src/components/animated-image/animated-image.styles.ts deleted file mode 100644 index 5a274bdac..000000000 --- a/src/components/animated-image/animated-image.styles.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --control-box-size: 3rem; - --icon-size: calc(var(--control-box-size) * 0.625); - - display: inline-flex; - position: relative; - cursor: pointer; - } - - img { - display: block; - width: 100%; - height: 100%; - } - - img[aria-hidden='true'] { - display: none; - } - - .animated-image__control-box { - display: flex; - position: absolute; - align-items: center; - justify-content: center; - top: calc(50% - var(--control-box-size) / 2); - right: calc(50% - var(--control-box-size) / 2); - width: var(--control-box-size); - height: var(--control-box-size); - font-size: calc(var(--icon-size) * 0.75); - background: none; - border: solid var(--wa-border-width-s) currentColor; - background-color: rgb(0 0 0 / 50%); - border-radius: var(--wa-border-radius-circle); - color: white; - pointer-events: none; - transition: opacity var(--wa-transition-normal) var(--wa-transition-easing); - } - - :host([play]:hover) .animated-image__control-box { - opacity: 1; - } - - :host([play]:not(:hover)) .animated-image__control-box { - opacity: 0; - } - - :host([play]) slot[name='play-icon'], - :host(:not([play])) slot[name='pause-icon'] { - display: none; - } -`; diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts index b409e3b50..b7e0e4246 100644 --- a/src/components/animated-image/animated-image.ts +++ b/src/components/animated-image/animated-image.ts @@ -4,7 +4,7 @@ import { html } from 'lit'; import { WaErrorEvent } from '../../events/error.js'; import { WaLoadEvent } from '../../events/load.js'; import { watch } from '../../internal/watch.js'; -import styles from './animated-image.styles.js'; +import styles from './animated-image.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/animation/animation.css b/src/components/animation/animation.css new file mode 100644 index 000000000..92d692cdd --- /dev/null +++ b/src/components/animation/animation.css @@ -0,0 +1,3 @@ +:host { + display: contents; +} diff --git a/src/components/animation/animation.styles.ts b/src/components/animation/animation.styles.ts deleted file mode 100644 index 1ef4bf6f3..000000000 --- a/src/components/animation/animation.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: contents; - } -`; diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts index d072fe632..0b9438c05 100644 --- a/src/components/animation/animation.ts +++ b/src/components/animation/animation.ts @@ -5,7 +5,7 @@ import { WaCancelEvent } from '../../events/cancel.js'; import { WaFinishEvent } from '../../events/finish.js'; import { WaStartEvent } from '../../events/start.js'; import { watch } from '../../internal/watch.js'; -import styles from './animation.styles.js'; +import styles from './animation.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css new file mode 100644 index 000000000..0ce9455da --- /dev/null +++ b/src/components/avatar/avatar.css @@ -0,0 +1,63 @@ +:host { + --background-color: var(--wa-color-neutral-fill-normal); + --content-color: var(--wa-color-neutral-on-normal); + --size: 3rem; + + display: inline-block; +} + +.avatar { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + width: var(--size); + height: var(--size); + background-color: var(--background-color); + font: inherit; + font-size: calc(var(--size) * 0.4); + color: var(--content-color); + user-select: none; + -webkit-user-select: none; + vertical-align: middle; +} + +.avatar--circle, +.avatar--circle .avatar__image { + border-radius: var(--wa-border-radius-circle); +} + +.avatar--rounded, +.avatar--rounded .avatar__image { + border-radius: var(--wa-border-radius-s); +} + +.avatar--square { + border-radius: 0; +} + +.avatar__icon { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.avatar__initials { + line-height: 1; + text-transform: uppercase; +} + +.avatar__image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + overflow: hidden; +} diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts deleted file mode 100644 index 3fb64004e..000000000 --- a/src/components/avatar/avatar.styles.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-color-neutral-fill-normal); - --content-color: var(--wa-color-neutral-on-normal); - --size: 3rem; - - display: inline-block; - } - - .avatar { - display: inline-flex; - align-items: center; - justify-content: center; - position: relative; - width: var(--size); - height: var(--size); - background-color: var(--background-color); - font: inherit; - font-size: calc(var(--size) * 0.4); - color: var(--content-color); - user-select: none; - -webkit-user-select: none; - vertical-align: middle; - } - - .avatar--circle, - .avatar--circle .avatar__image { - border-radius: var(--wa-border-radius-circle); - } - - .avatar--rounded, - .avatar--rounded .avatar__image { - border-radius: var(--wa-border-radius-s); - } - - .avatar--square { - border-radius: 0; - } - - .avatar__icon { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .avatar__initials { - line-height: 1; - text-transform: uppercase; - } - - .avatar__image { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - overflow: hidden; - } -`; diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 007e1aceb..15438d4ce 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js'; import { html } from 'lit'; import { WaErrorEvent } from '../../events/error.js'; import { watch } from '../../internal/watch.js'; -import styles from './avatar.styles.js'; +import styles from './avatar.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css new file mode 100644 index 000000000..07fdb6928 --- /dev/null +++ b/src/components/badge/badge.css @@ -0,0 +1,77 @@ +:host { + --border-color: var(--background-color); + --border-radius: var(--wa-border-radius-xs); + --border-style: var(--wa-border-style); + --border-width: var(--wa-border-width-s); + + display: inline-flex; +} + +:host([variant='brand']) { + --background-color: var(--wa-color-brand-fill-loud); + --content-color: var(--wa-color-brand-on-loud); +} + +:host([variant='success']) { + --background-color: var(--wa-color-success-fill-loud); + --content-color: var(--wa-color-success-on-loud); +} + +:host([variant='warning']) { + --background-color: var(--wa-color-warning-fill-loud); + --content-color: var(--wa-color-warning-on-loud); +} + +:host([variant='neutral']) { + --background-color: var(--wa-color-neutral-fill-loud); + --content-color: var(--wa-color-neutral-on-loud); +} + +:host([variant='danger']) { + --background-color: var(--wa-color-danger-fill-loud); + --content-color: var(--wa-color-danger-on-loud); +} + +.badge { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: max(var(--wa-font-size-2xs), 0.75em); + font-weight: var(--wa-font-weight-semibold); + line-height: 1; + background-color: var(--background-color); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + color: var(--content-color); + white-space: nowrap; + padding: 0.375em 0.625em; + user-select: none; + -webkit-user-select: none; + cursor: inherit; +} + +/* Pill modifier */ +.badge--pill { + border-radius: var(--wa-border-radius-pill); +} + +/* Pulse modifier */ +.badge--pulse { + --pulse-color: var(--background-color); + + animation: pulse 1.5s infinite; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 var(--pulse-color); + } + 70% { + box-shadow: 0 0 0 0.5rem transparent; + } + 100% { + box-shadow: 0 0 0 0 transparent; + } +} diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts deleted file mode 100644 index 9eaad6c05..000000000 --- a/src/components/badge/badge.styles.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --border-color: var(--background-color); - --border-radius: var(--wa-border-radius-xs); - --border-style: var(--wa-border-style); - --border-width: var(--wa-border-width-s); - - display: inline-flex; - } - - :host([variant='brand']) { - --background-color: var(--wa-color-brand-fill-loud); - --content-color: var(--wa-color-brand-on-loud); - } - - :host([variant='success']) { - --background-color: var(--wa-color-success-fill-loud); - --content-color: var(--wa-color-success-on-loud); - } - - :host([variant='warning']) { - --background-color: var(--wa-color-warning-fill-loud); - --content-color: var(--wa-color-warning-on-loud); - } - - :host([variant='neutral']) { - --background-color: var(--wa-color-neutral-fill-loud); - --content-color: var(--wa-color-neutral-on-loud); - } - - :host([variant='danger']) { - --background-color: var(--wa-color-danger-fill-loud); - --content-color: var(--wa-color-danger-on-loud); - } - - .badge { - display: inline-flex; - align-items: center; - justify-content: center; - font-size: max(var(--wa-font-size-2xs), 0.75em); - font-weight: var(--wa-font-weight-semibold); - line-height: 1; - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - color: var(--content-color); - white-space: nowrap; - padding: 0.375em 0.625em; - user-select: none; - -webkit-user-select: none; - cursor: inherit; - } - - /* Pill modifier */ - .badge--pill { - border-radius: var(--wa-border-radius-pill); - } - - /* Pulse modifier */ - .badge--pulse { - --pulse-color: var(--background-color); - - animation: pulse 1.5s infinite; - } - - @keyframes pulse { - 0% { - box-shadow: 0 0 0 0 var(--pulse-color); - } - 70% { - box-shadow: 0 0 0 0.5rem transparent; - } - 100% { - box-shadow: 0 0 0 0 transparent; - } - } -`; diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index b07a0307f..70709077a 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -1,7 +1,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; -import styles from './badge.styles.js'; +import styles from './badge.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/breadcrumb-item/breadcrumb-item.css b/src/components/breadcrumb-item/breadcrumb-item.css new file mode 100644 index 000000000..d9242f328 --- /dev/null +++ b/src/components/breadcrumb-item/breadcrumb-item.css @@ -0,0 +1,83 @@ +:host { + color: var(--wa-color-text-link); + display: inline-flex; +} + +:host(:last-of-type) { + color: var(--wa-color-text-quiet); +} + +.breadcrumb-item { + display: inline-flex; + align-items: center; + font: inherit; + font-weight: var(--wa-font-weight-action); + line-height: var(--wa-line-height-normal); + white-space: nowrap; +} + +.breadcrumb-item__label { + display: inline-block; + font: inherit; + text-decoration: none; + color: currentColor; + background: none; + border: none; + border-radius: var(--wa-border-radius-s); + padding: 0; + margin: 0; + cursor: pointer; + transition: color var(--wa-transition-normal) var(--wa-transition-easing); +} + +:host(:not(:last-of-type)) .breadcrumb-item__label:hover { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); +} + +:host(:not(:last-of-type)) .breadcrumb-item__label:active { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); +} + +.breadcrumb-item__label:focus { + outline: none; +} + +.breadcrumb-item__label:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.breadcrumb-item__prefix, +.breadcrumb-item__suffix { + display: none; + flex: 0 0 auto; + display: flex; + align-items: center; +} + +.breadcrumb-item__prefix, +.breadcrumb-item__suffix { + display: inline-flex; + color: var(--wa-color-text-quiet); +} + +::slotted([slot='prefix']) { + margin-inline-end: var(--wa-space-s); +} + +::slotted([slot='suffix']) { + margin-inline-start: var(--wa-space-s); +} + +:host(:last-of-type) .breadcrumb-item__separator { + display: none; +} + +.breadcrumb-item__separator { + color: var(--wa-color-text-quiet); + display: inline-flex; + align-items: center; + margin: 0 var(--wa-space-s); + user-select: none; + -webkit-user-select: none; +} diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts deleted file mode 100644 index d290f884a..000000000 --- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - color: var(--wa-color-text-link); - display: inline-flex; - } - - :host(:last-of-type) { - color: var(--wa-color-text-quiet); - } - - .breadcrumb-item { - display: inline-flex; - align-items: center; - font: inherit; - font-weight: var(--wa-font-weight-action); - line-height: var(--wa-line-height-normal); - white-space: nowrap; - } - - .breadcrumb-item__label { - display: inline-block; - font: inherit; - text-decoration: none; - color: currentColor; - background: none; - border: none; - border-radius: var(--wa-border-radius-s); - padding: 0; - margin: 0; - cursor: pointer; - transition: color var(--wa-transition-normal) var(--wa-transition-easing); - } - - :host(:not(:last-of-type)) .breadcrumb-item__label:hover { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); - } - - :host(:not(:last-of-type)) .breadcrumb-item__label:active { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); - } - - .breadcrumb-item__label:focus { - outline: none; - } - - .breadcrumb-item__label:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .breadcrumb-item__prefix, - .breadcrumb-item__suffix { - display: none; - flex: 0 0 auto; - display: flex; - align-items: center; - } - - .breadcrumb-item__prefix, - .breadcrumb-item__suffix { - display: inline-flex; - color: var(--wa-color-text-quiet); - } - - ::slotted([slot='prefix']) { - margin-inline-end: var(--wa-space-s); - } - - ::slotted([slot='suffix']) { - margin-inline-start: var(--wa-space-s); - } - - :host(:last-of-type) .breadcrumb-item__separator { - display: none; - } - - .breadcrumb-item__separator { - color: var(--wa-color-text-quiet); - display: inline-flex; - align-items: center; - margin: 0 var(--wa-space-s); - user-select: none; - -webkit-user-select: none; - } -`; diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts index df053698f..2727a5fe5 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.ts @@ -2,7 +2,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { watch } from '../../internal/watch.js'; -import styles from './breadcrumb-item.styles.js'; +import styles from './breadcrumb-item.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/breadcrumb/breadcrumb.css b/src/components/breadcrumb/breadcrumb.css new file mode 100644 index 000000000..a45d4f776 --- /dev/null +++ b/src/components/breadcrumb/breadcrumb.css @@ -0,0 +1,5 @@ +.breadcrumb { + display: flex; + align-items: center; + flex-wrap: wrap; +} diff --git a/src/components/breadcrumb/breadcrumb.styles.ts b/src/components/breadcrumb/breadcrumb.styles.ts deleted file mode 100644 index 86c0e16e0..000000000 --- a/src/components/breadcrumb/breadcrumb.styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { css } from 'lit'; - -export default css` - .breadcrumb { - display: flex; - align-items: center; - flex-wrap: wrap; - } -`; diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts index 773920c3f..edeb4d4f5 100644 --- a/src/components/breadcrumb/breadcrumb.ts +++ b/src/components/breadcrumb/breadcrumb.ts @@ -2,7 +2,7 @@ import '../icon/icon.js'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; -import styles from './breadcrumb.styles.js'; +import styles from './breadcrumb.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type WaBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js'; diff --git a/src/components/button-group/button-group.css b/src/components/button-group/button-group.css new file mode 100644 index 000000000..e835cadcb --- /dev/null +++ b/src/components/button-group/button-group.css @@ -0,0 +1,19 @@ +:host { + display: inline-flex; +} + +.button-group { + display: flex; + position: relative; + flex-wrap: wrap; + isolation: isolate; +} + +:host([orientation='vertical']) .button-group { + flex-direction: column; +} + +/* Show the focus indicator above other buttons */ +::slotted(:focus) { + z-index: 1 !important; +} diff --git a/src/components/button-group/button-group.styles.ts b/src/components/button-group/button-group.styles.ts deleted file mode 100644 index 0e3ac3831..000000000 --- a/src/components/button-group/button-group.styles.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: inline-flex; - } - - .button-group { - display: flex; - position: relative; - flex-wrap: wrap; - isolation: isolate; - } - - :host([orientation='vertical']) .button-group { - flex-direction: column; - } - - /* Show the focus indicator above other buttons */ - ::slotted(:focus) { - z-index: 1 !important; - } -`; diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts index e001a1053..ef5be5856 100644 --- a/src/components/button-group/button-group.ts +++ b/src/components/button-group/button-group.ts @@ -1,6 +1,6 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; -import styles from './button-group.styles.js'; +import styles from './button-group.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/button/button.css b/src/components/button/button.css new file mode 100644 index 000000000..db71f3987 --- /dev/null +++ b/src/components/button/button.css @@ -0,0 +1,545 @@ +:host { + --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); + --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); + --border-color: initial; + --border-color-hover: var(--border-color); + --border-color-active: var(--border-color); + --border-radius: var(--wa-form-control-border-radius); + --border-style: var(--wa-border-style); + --border-width: var(--wa-form-control-border-width); + --box-shadow: initial; + --label-color-hover: var(--label-color); + --label-color-active: var(--label-color); + + display: inline-block; + position: relative; + width: auto; + cursor: pointer; +} + +/* + * Filled buttons + */ + +:host([appearance='filled'][variant='neutral']) { + --background-color: var(--wa-color-neutral-fill-loud); + --label-color: var(--wa-color-neutral-on-loud); +} + +:host([appearance='filled'][variant='brand']) { + --background-color: var(--wa-color-brand-fill-loud); + --label-color: var(--wa-color-brand-on-loud); +} + +:host([appearance='filled'][variant='success']) { + --background-color: var(--wa-color-success-fill-loud); + --label-color: var(--wa-color-success-on-loud); +} + +:host([appearance='filled'][variant='warning']) { + --background-color: var(--wa-color-warning-fill-loud); + --label-color: var(--wa-color-warning-on-loud); +} + +:host([appearance='filled'][variant='danger']) { + --background-color: var(--wa-color-danger-fill-loud); + --label-color: var(--wa-color-danger-on-loud); +} + +/* + * Tinted buttons + */ + +:host([appearance='tinted']) { + --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%); + --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%); +} + +:host([appearance='tinted'][variant='neutral']) { + --background-color: var(--wa-color-neutral-fill-normal); + --label-color: var(--wa-color-neutral-on-normal); +} + +:host([appearance='tinted'][variant='brand']) { + --background-color: var(--wa-color-brand-fill-normal); + --label-color: var(--wa-color-brand-on-normal); +} + +:host([appearance='tinted'][variant='success']) { + --background-color: var(--wa-color-success-fill-normal); + --label-color: var(--wa-color-success-on-normal); +} + +:host([appearance='tinted'][variant='warning']) { + --background-color: var(--wa-color-warning-fill-normal); + --label-color: var(--wa-color-warning-on-normal); +} + +:host([appearance='tinted'][variant='danger']) { + --background-color: var(--wa-color-danger-fill-normal); + --label-color: var(--wa-color-danger-on-normal); +} + +/* + * Outlined buttons + */ + +:host([appearance='outlined']), +:host(.wa-button-group__button--radio:not([checked])) { + --background-color: transparent; + --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%); +} + +:host([appearance='outlined'][variant='neutral']), +:host(.wa-button-group__button--radio:not([checked])) { + --background-color-hover: var(--wa-color-neutral-fill-quiet); + --border-color: var(--wa-color-neutral-border-loud); + --label-color: var(--wa-color-neutral-on-quiet); +} + +:host([appearance='outlined'][variant='brand']) { + --background-color-hover: var(--wa-color-brand-fill-quiet); + --border-color: var(--wa-color-brand-border-loud); + --label-color: var(--wa-color-brand-on-quiet); +} + +:host([appearance='outlined'][variant='success']) { + --background-color-hover: var(--wa-color-success-fill-quiet); + --border-color: var(--wa-color-success-border-loud); + --label-color: var(--wa-color-success-on-quiet); +} + +:host([appearance='outlined'][variant='warning']) { + --background-color-hover: var(--wa-color-warning-fill-quiet); + --border-color: var(--wa-color-warning-border-loud); + --label-color: var(--wa-color-warning-on-quiet); +} + +:host([appearance='outlined'][variant='danger']) { + --background-color-hover: var(--wa-color-danger-fill-quiet); + --border-color: var(--wa-color-danger-border-loud); + --label-color: var(--wa-color-danger-on-quiet); +} + +/* + * Text buttons + */ + +:host([appearance='text']) { + --background-color: transparent; + --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%); +} + +:host([appearance='text'][variant='neutral']) { + --label-color: var(--wa-color-neutral-on-quiet); + --background-color-hover: var(--wa-color-neutral-fill-quiet); +} + +:host([appearance='text'][variant='brand']) { + --label-color: var(--wa-color-brand-on-quiet); + --background-color-hover: var(--wa-color-brand-fill-quiet); +} + +:host([appearance='text'][variant='success']) { + --label-color: var(--wa-color-success-on-quiet); + --background-color-hover: var(--wa-color-success-fill-quiet); +} + +:host([appearance='text'][variant='warning']) { + --label-color: var(--wa-color-warning-on-quiet); + --background-color-hover: var(--wa-color-warning-fill-quiet); +} + +:host([appearance='text'][variant='danger']) { + --label-color: var(--wa-color-danger-on-quiet); + --background-color-hover: var(--wa-color-danger-fill-quiet); +} + +/* + * Checked buttons + */ + +:host([checked]) { + --background-color: var(--wa-color-brand-fill-quiet); + --background-color-hover: var(--background-color); + --border-color: var(--wa-form-control-activated-color); + --label-color: var(--wa-color-brand-on-normal); + --indicator-color: var(--border-color); + --indicator-width: var(--wa-border-width-s); +} + +/* + * Sizes + */ + +:host([size='small']) { + font-size: var(--wa-font-size-s); +} + +:host([size='medium']) { + font-size: var(--wa-font-size-m); +} + +:host([size='large']) { + font-size: var(--wa-font-size-l); +} + +/* + * Internal + */ + +.button { + background-color: var(--background-color); + border-color: var(--border-color, var(--background-color)); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: max(1px, var(--border-width)); + box-shadow: var(--box-shadow); + color: var(--label-color); + display: inline-flex; + align-items: stretch; + justify-content: center; + width: 100%; + font: inherit; + font-weight: var(--wa-font-weight-action); + text-decoration: none; + user-select: none; + -webkit-user-select: none; + white-space: nowrap; + vertical-align: middle; + padding: 0; + transition: + background var(--wa-transition-fast) var(--wa-transition-easing), + border var(--wa-transition-fast) var(--wa-transition-easing), + box-shadow var(--wa-transition-fast) var(--wa-transition-easing), + color var(--wa-transition-fast) var(--wa-transition-easing); + cursor: inherit; +} + +.button--checked { + box-shadow: + var(--box-shadow, 0 0 transparent), + inset 0 0 0 var(--indicator-width) var(--indicator-color); +} + +/* + * States + */ + +.button::-moz-focus-inner { + border: 0; +} + +.button:focus { + outline: none; +} + +.button:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.button--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* When disabled, prevent mouse events from bubbling up from children */ +.button--disabled * { + pointer-events: none; +} + +.button:hover:not(.button--disabled, .button--loading) { + background-color: var(--background-color-hover, var(--background-color, none)); + border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover))); + color: var(--label-color-hover, var(--label-color)); +} + +.button:active:not(.button--disabled, .button--loading) { + background-color: var(--background-color-active, var(--background-color, none)); + border-color: var(--border-color-active, var(--border-color, var(--background-color-active))); + color: var(--label-color-active, var(--label-color)); +} + +@media (forced-colors: active) { + .button.button--outlined.button--checked:not(.button--disabled) { + outline: solid 2px transparent; + } +} + +/* + * Label + */ + +.button__prefix, +.button__suffix { + flex: 0 0 auto; + display: flex; + align-items: center; + pointer-events: none; +} + +.button__label { + display: inline-block; +} + +.button__label::slotted(wa-icon) { + vertical-align: -2px; +} + +/* + * Size modifiers + */ + +.button--small { + height: var(--wa-form-control-height-s); + line-height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2); +} + +.button--medium { + height: var(--wa-form-control-height-m); + line-height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2); +} + +.button--large { + height: var(--wa-form-control-height-l); + line-height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2); +} + +/* + * Pill modifier + */ + +.button--pill.button--small { + border-radius: var(--wa-border-radius-pill); +} + +.button--pill.button--medium { + border-radius: var(--wa-border-radius-pill); +} + +.button--pill.button--large { + border-radius: var(--wa-border-radius-pill); +} + +/* + * Caret modifier + */ + +.button--caret .button__suffix { + display: none; +} + +.button--caret .button__caret { + display: flex; + align-self: center; + align-items: center; +} + +.button--caret .button__caret::part(svg) { + width: 0.875em; + height: 0.875em; +} + +/* + * Loading modifier + */ + +.button--loading { + position: relative; + cursor: wait; +} + +.button--loading .button__prefix, +.button--loading .button__label, +.button--loading .button__suffix, +.button--loading .button__caret { + visibility: hidden; +} + +.button--loading wa-spinner { + --indicator-color: currentColor; + --track-color: color-mix(in oklab, currentColor, transparent 90%); + position: absolute; + font-size: 1em; + height: 1em; + width: 1em; + top: calc(50% - 0.5em); + left: calc(50% - 0.5em); +} + +/* + * Badges + */ + +.button ::slotted(wa-badge) { + --border-color: var(--wa-color-surface-default); + position: absolute; + top: 0; + right: 0; + translate: 50% -50%; + pointer-events: none; +} + +.button--rtl ::slotted(wa-badge) { + right: auto; + left: 0; + translate: -50% -50%; +} + +/* + * Button spacing + */ + +.button--small { + padding: 0 var(--wa-space-s); +} + +.button--medium { + padding: 0 var(--wa-space-m); +} + +.button--large { + padding: 0 var(--wa-space-l); +} + +.button--small ::slotted([slot='prefix']) { + margin-inline-end: var(--wa-space-s); +} + +.button--medium ::slotted([slot='prefix']) { + margin-inline-end: var(--wa-space-m); +} + +.button--large ::slotted([slot='prefix']) { + margin-inline-end: var(--wa-space-l); +} + +.button--small ::slotted([slot='suffix']), +.button--small.button--caret:not(.button--visually-hidden-label) .button__caret { + margin-inline-start: var(--wa-space-s); +} + +.button--medium ::slotted([slot='suffix']), +.button--medium.button--caret:not(.button--visually-hidden-label) .button__caret { + margin-inline-start: var(--wa-space-m); +} + +.button--large ::slotted([slot='suffix']), +.button--large.button--caret:not(.button--visually-hidden-label) .button__caret { + margin-inline-start: var(--wa-space-l); +} + +/* + * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.). + * This means buttons aren't always direct descendants of the button group, thus we can't target them with the + * ::slotted selector. To work around this, the button group component does some magic to add these special classes to + * buttons and we style them here instead. + */ + +/* + :host([data-button-group-middle]) #button { + border-radius: 0; + } + + :host([data-button-group-horizontal][data-button-group-first]) #button { + border-start-end-radius: 0; + border-end-end-radius: 0; + } + + :host([data-button-group-horizontal][data-button-group-last]) #button { + border-start-start-radius: 0; + border-end-start-radius: 0; + } + + :host([data-button-group-vertical][data-button-group-first]) #button { + border-end-start-radius: 0; + border-end-end-radius: 0; + } + + :host([data-button-group-vertical][data-button-group-last]) #button { + border-start-start-radius: 0; + border-start-end-radius: 0; + } + */ + +:host(.wa-button-group__button--inner) .button { + border-radius: 0; +} + +:host(.wa-button-group-horizontal.wa-button-group__button--first:not(.wa-button-group__button--last)) .button { + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +:host(.wa-button-group-horizontal.wa-button-group__button--last:not(.wa-button-group__button--first)) .button { + border-start-start-radius: 0; + border-end-start-radius: 0; +} + +:host(.wa-button-group-vertical.wa-button-group__button--first:not(.wa-button-group__button--last)) .button { + border-end-start-radius: 0; + border-end-end-radius: 0; +} + +:host(.wa-button-group-vertical.wa-button-group__button--last:not(.wa-button-group__button--first)) .button { + border-start-start-radius: 0; + border-start-end-radius: 0; +} + +/* All except the first */ +:host( + .wa-button-group-horizontal.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first) + ) { + margin-inline-start: calc(-1 * var(--border-width)); +} + +:host( + .wa-button-group-vertical.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first) + ) { + margin-block-start: calc(-1 * var(--border-width)); +} + +/* Add a visual separator between filled buttons */ +:host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio)) .button:after { + content: ''; + position: absolute; + z-index: 2; /* Keep separators visible on hover */ +} + +:host( + .wa-button-group-horizontal.wa-button-group__button:not( + .wa-button-group__button--first, + .wa-button-group__button--radio + ) + ) + .button:after { + top: 0; + bottom: 0; + inset-inline-start: 0; + border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3)); +} + +:host( + .wa-button-group-vertical.wa-button-group__button:not( + .wa-button-group__button--first, + .wa-button-group__button--radio + ) + ) + .button:after { + left: 0; + right: 0; + inset-block-start: 0; + border-top: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3)); +} + +/* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */ +:host(.wa-button-group__button--hover) { + z-index: 1; +} + +/* Focus and checked are always on top */ +:host(.wa-button-group__button--focus), +:host(.wa-button-group__button[checked]) { + z-index: 2; +} diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts deleted file mode 100644 index d6f6141d6..000000000 --- a/src/components/button/button.styles.ts +++ /dev/null @@ -1,551 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); - --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); - --border-color: initial; - --border-color-hover: var(--border-color); - --border-color-active: var(--border-color); - --border-radius: var(--wa-form-control-border-radius); - --border-style: var(--wa-border-style); - --border-width: var(--wa-form-control-border-width); - --box-shadow: initial; - --label-color-hover: var(--label-color); - --label-color-active: var(--label-color); - - display: inline-block; - position: relative; - width: auto; - cursor: pointer; - } - - /* - * Filled buttons - */ - - :host([appearance='filled'][variant='neutral']) { - --background-color: var(--wa-color-neutral-fill-loud); - --label-color: var(--wa-color-neutral-on-loud); - } - - :host([appearance='filled'][variant='brand']) { - --background-color: var(--wa-color-brand-fill-loud); - --label-color: var(--wa-color-brand-on-loud); - } - - :host([appearance='filled'][variant='success']) { - --background-color: var(--wa-color-success-fill-loud); - --label-color: var(--wa-color-success-on-loud); - } - - :host([appearance='filled'][variant='warning']) { - --background-color: var(--wa-color-warning-fill-loud); - --label-color: var(--wa-color-warning-on-loud); - } - - :host([appearance='filled'][variant='danger']) { - --background-color: var(--wa-color-danger-fill-loud); - --label-color: var(--wa-color-danger-on-loud); - } - - /* - * Tinted buttons - */ - - :host([appearance='tinted']) { - --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%); - --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%); - } - - :host([appearance='tinted'][variant='neutral']) { - --background-color: var(--wa-color-neutral-fill-normal); - --label-color: var(--wa-color-neutral-on-normal); - } - - :host([appearance='tinted'][variant='brand']) { - --background-color: var(--wa-color-brand-fill-normal); - --label-color: var(--wa-color-brand-on-normal); - } - - :host([appearance='tinted'][variant='success']) { - --background-color: var(--wa-color-success-fill-normal); - --label-color: var(--wa-color-success-on-normal); - } - - :host([appearance='tinted'][variant='warning']) { - --background-color: var(--wa-color-warning-fill-normal); - --label-color: var(--wa-color-warning-on-normal); - } - - :host([appearance='tinted'][variant='danger']) { - --background-color: var(--wa-color-danger-fill-normal); - --label-color: var(--wa-color-danger-on-normal); - } - - /* - * Outlined buttons - */ - - :host([appearance='outlined']), - :host(.wa-button-group__button--radio:not([checked])) { - --background-color: transparent; - --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%); - } - - :host([appearance='outlined'][variant='neutral']), - :host(.wa-button-group__button--radio:not([checked])) { - --background-color-hover: var(--wa-color-neutral-fill-quiet); - --border-color: var(--wa-color-neutral-border-loud); - --label-color: var(--wa-color-neutral-on-quiet); - } - - :host([appearance='outlined'][variant='brand']) { - --background-color-hover: var(--wa-color-brand-fill-quiet); - --border-color: var(--wa-color-brand-border-loud); - --label-color: var(--wa-color-brand-on-quiet); - } - - :host([appearance='outlined'][variant='success']) { - --background-color-hover: var(--wa-color-success-fill-quiet); - --border-color: var(--wa-color-success-border-loud); - --label-color: var(--wa-color-success-on-quiet); - } - - :host([appearance='outlined'][variant='warning']) { - --background-color-hover: var(--wa-color-warning-fill-quiet); - --border-color: var(--wa-color-warning-border-loud); - --label-color: var(--wa-color-warning-on-quiet); - } - - :host([appearance='outlined'][variant='danger']) { - --background-color-hover: var(--wa-color-danger-fill-quiet); - --border-color: var(--wa-color-danger-border-loud); - --label-color: var(--wa-color-danger-on-quiet); - } - - /* - * Text buttons - */ - - :host([appearance='text']) { - --background-color: transparent; - --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%); - } - - :host([appearance='text'][variant='neutral']) { - --label-color: var(--wa-color-neutral-on-quiet); - --background-color-hover: var(--wa-color-neutral-fill-quiet); - } - - :host([appearance='text'][variant='brand']) { - --label-color: var(--wa-color-brand-on-quiet); - --background-color-hover: var(--wa-color-brand-fill-quiet); - } - - :host([appearance='text'][variant='success']) { - --label-color: var(--wa-color-success-on-quiet); - --background-color-hover: var(--wa-color-success-fill-quiet); - } - - :host([appearance='text'][variant='warning']) { - --label-color: var(--wa-color-warning-on-quiet); - --background-color-hover: var(--wa-color-warning-fill-quiet); - } - - :host([appearance='text'][variant='danger']) { - --label-color: var(--wa-color-danger-on-quiet); - --background-color-hover: var(--wa-color-danger-fill-quiet); - } - - /* - * Checked buttons - */ - - :host([checked]) { - --background-color: var(--wa-color-brand-fill-quiet); - --background-color-hover: var(--background-color); - --border-color: var(--wa-form-control-activated-color); - --label-color: var(--wa-color-brand-on-normal); - --indicator-color: var(--border-color); - --indicator-width: var(--wa-border-width-s); - } - - /* - * Sizes - */ - - :host([size='small']) { - font-size: var(--wa-font-size-s); - } - - :host([size='medium']) { - font-size: var(--wa-font-size-m); - } - - :host([size='large']) { - font-size: var(--wa-font-size-l); - } - - /* - * Internal - */ - - .button { - background-color: var(--background-color); - border-color: var(--border-color, var(--background-color)); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: max(1px, var(--border-width)); - box-shadow: var(--box-shadow); - color: var(--label-color); - display: inline-flex; - align-items: stretch; - justify-content: center; - width: 100%; - font: inherit; - font-weight: var(--wa-font-weight-action); - text-decoration: none; - user-select: none; - -webkit-user-select: none; - white-space: nowrap; - vertical-align: middle; - padding: 0; - transition: - background var(--wa-transition-fast) var(--wa-transition-easing), - border var(--wa-transition-fast) var(--wa-transition-easing), - box-shadow var(--wa-transition-fast) var(--wa-transition-easing), - color var(--wa-transition-fast) var(--wa-transition-easing); - cursor: inherit; - } - - .button--checked { - box-shadow: - var(--box-shadow, 0 0 transparent), - inset 0 0 0 var(--indicator-width) var(--indicator-color); - } - - /* - * States - */ - - .button::-moz-focus-inner { - border: 0; - } - - .button:focus { - outline: none; - } - - .button:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .button--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - /* When disabled, prevent mouse events from bubbling up from children */ - .button--disabled * { - pointer-events: none; - } - - .button:hover:not(.button--disabled, .button--loading) { - background-color: var(--background-color-hover, var(--background-color, none)); - border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover))); - color: var(--label-color-hover, var(--label-color)); - } - - .button:active:not(.button--disabled, .button--loading) { - background-color: var(--background-color-active, var(--background-color, none)); - border-color: var(--border-color-active, var(--border-color, var(--background-color-active))); - color: var(--label-color-active, var(--label-color)); - } - - @media (forced-colors: active) { - .button.button--outlined.button--checked:not(.button--disabled) { - outline: solid 2px transparent; - } - } - - /* - * Label - */ - - .button__prefix, - .button__suffix { - flex: 0 0 auto; - display: flex; - align-items: center; - pointer-events: none; - } - - .button__label { - display: inline-block; - } - - .button__label::slotted(wa-icon) { - vertical-align: -2px; - } - - /* - * Size modifiers - */ - - .button--small { - height: var(--wa-form-control-height-s); - line-height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2); - } - - .button--medium { - height: var(--wa-form-control-height-m); - line-height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2); - } - - .button--large { - height: var(--wa-form-control-height-l); - line-height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2); - } - - /* - * Pill modifier - */ - - .button--pill.button--small { - border-radius: var(--wa-border-radius-pill); - } - - .button--pill.button--medium { - border-radius: var(--wa-border-radius-pill); - } - - .button--pill.button--large { - border-radius: var(--wa-border-radius-pill); - } - - /* - * Caret modifier - */ - - .button--caret .button__suffix { - display: none; - } - - .button--caret .button__caret { - display: flex; - align-self: center; - align-items: center; - } - - .button--caret .button__caret::part(svg) { - width: 0.875em; - height: 0.875em; - } - - /* - * Loading modifier - */ - - .button--loading { - position: relative; - cursor: wait; - } - - .button--loading .button__prefix, - .button--loading .button__label, - .button--loading .button__suffix, - .button--loading .button__caret { - visibility: hidden; - } - - .button--loading wa-spinner { - --indicator-color: currentColor; - --track-color: color-mix(in oklab, currentColor, transparent 90%); - position: absolute; - font-size: 1em; - height: 1em; - width: 1em; - top: calc(50% - 0.5em); - left: calc(50% - 0.5em); - } - - /* - * Badges - */ - - .button ::slotted(wa-badge) { - --border-color: var(--wa-color-surface-default); - position: absolute; - top: 0; - right: 0; - translate: 50% -50%; - pointer-events: none; - } - - .button--rtl ::slotted(wa-badge) { - right: auto; - left: 0; - translate: -50% -50%; - } - - /* - * Button spacing - */ - - .button--small { - padding: 0 var(--wa-space-s); - } - - .button--medium { - padding: 0 var(--wa-space-m); - } - - .button--large { - padding: 0 var(--wa-space-l); - } - - .button--small ::slotted([slot='prefix']) { - margin-inline-end: var(--wa-space-s); - } - - .button--medium ::slotted([slot='prefix']) { - margin-inline-end: var(--wa-space-m); - } - - .button--large ::slotted([slot='prefix']) { - margin-inline-end: var(--wa-space-l); - } - - .button--small ::slotted([slot='suffix']), - .button--small.button--caret:not(.button--visually-hidden-label) .button__caret { - margin-inline-start: var(--wa-space-s); - } - - .button--medium ::slotted([slot='suffix']), - .button--medium.button--caret:not(.button--visually-hidden-label) .button__caret { - margin-inline-start: var(--wa-space-m); - } - - .button--large ::slotted([slot='suffix']), - .button--large.button--caret:not(.button--visually-hidden-label) .button__caret { - margin-inline-start: var(--wa-space-l); - } - - /* - * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.). - * This means buttons aren't always direct descendants of the button group, thus we can't target them with the - * ::slotted selector. To work around this, the button group component does some magic to add these special classes to - * buttons and we style them here instead. - */ - - /* - :host([data-button-group-middle]) #button { - border-radius: 0; - } - - :host([data-button-group-horizontal][data-button-group-first]) #button { - border-start-end-radius: 0; - border-end-end-radius: 0; - } - - :host([data-button-group-horizontal][data-button-group-last]) #button { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - - :host([data-button-group-vertical][data-button-group-first]) #button { - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - :host([data-button-group-vertical][data-button-group-last]) #button { - border-start-start-radius: 0; - border-start-end-radius: 0; - } - */ - - :host(.wa-button-group__button--inner) .button { - border-radius: 0; - } - - :host(.wa-button-group-horizontal.wa-button-group__button--first:not(.wa-button-group__button--last)) .button { - border-start-end-radius: 0; - border-end-end-radius: 0; - } - - :host(.wa-button-group-horizontal.wa-button-group__button--last:not(.wa-button-group__button--first)) .button { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - - :host(.wa-button-group-vertical.wa-button-group__button--first:not(.wa-button-group__button--last)) .button { - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - :host(.wa-button-group-vertical.wa-button-group__button--last:not(.wa-button-group__button--first)) .button { - border-start-start-radius: 0; - border-start-end-radius: 0; - } - - /* All except the first */ - :host( - .wa-button-group-horizontal.wa-button-group-horizontal.wa-button-group__button:not( - .wa-button-group__button--first - ) - ) { - margin-inline-start: calc(-1 * var(--border-width)); - } - - :host( - .wa-button-group-vertical.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first) - ) { - margin-block-start: calc(-1 * var(--border-width)); - } - - /* Add a visual separator between filled buttons */ - :host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio)) .button:after { - content: ''; - position: absolute; - z-index: 2; /* Keep separators visible on hover */ - } - - :host( - .wa-button-group-horizontal.wa-button-group__button:not( - .wa-button-group__button--first, - .wa-button-group__button--radio - ) - ) - .button:after { - top: 0; - bottom: 0; - inset-inline-start: 0; - border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3)); - } - - :host( - .wa-button-group-vertical.wa-button-group__button:not( - .wa-button-group__button--first, - .wa-button-group__button--radio - ) - ) - .button:after { - left: 0; - right: 0; - inset-block-start: 0; - border-top: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3)); - } - - /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */ - :host(.wa-button-group__button--hover) { - z-index: 1; - } - - /* Focus and checked are always on top */ - :host(.wa-button-group__button--focus), - :host(.wa-button-group__button[checked]) { - z-index: 2; - } -`; diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 7bf37cd81..19a6d7292 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -11,7 +11,7 @@ import { WaFocusEvent } from '../../events/focus.js'; import { WaInvalidEvent } from '../../events/invalid.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import styles from './button.styles.js'; +import styles from './button.css'; /** * @summary Buttons represent actions that are available to the user. diff --git a/src/components/callout/callout.css b/src/components/callout/callout.css new file mode 100644 index 000000000..8bf187924 --- /dev/null +++ b/src/components/callout/callout.css @@ -0,0 +1,64 @@ +:host { + --icon-color: currentColor; + --icon-size: var(--wa-font-size-l); + --spacing: var(--wa-space-m); + + position: relative; + display: flex; + align-items: stretch; + border-radius: var(--wa-panel-border-radius); + background-color: var(--background-color); + border-color: var(--border-color); + border-style: var(--wa-panel-border-style); + border-width: var(--wa-panel-border-width); + color: var(--content-color); + padding: var(--spacing); +} + +:host([variant='brand']) { + --background-color: var(--wa-color-brand-fill-quiet); + --border-color: var(--wa-color-brand-border-quiet); + --content-color: var(--wa-color-brand-on-normal); +} + +:host([variant='success']) { + --background-color: var(--wa-color-success-fill-quiet); + --border-color: var(--wa-color-success-border-quiet); + --content-color: var(--wa-color-success-on-normal); +} + +:host([variant='neutral']) { + --background-color: var(--wa-color-neutral-fill-quiet); + --border-color: var(--wa-color-neutral-border-quiet); + --content-color: var(--wa-color-neutral-on-normal); +} + +:host([variant='warning']) { + --background-color: var(--wa-color-warning-fill-quiet); + --border-color: var(--wa-color-warning-border-quiet); + --content-color: var(--wa-color-warning-on-normal); +} + +:host([variant='danger']) { + --background-color: var(--wa-color-danger-fill-quiet); + --border-color: var(--wa-color-danger-border-quiet); + --content-color: var(--wa-color-danger-on-normal); +} + +[part~='icon'] { + flex: 0 0 auto; + display: flex; + align-items: center; + color: var(--icon-color); + font-size: var(--icon-size); + + ::slotted(*) { + margin-inline-end: var(--spacing); + } +} + +[part~='message'] { + flex: 1 1 auto; + display: block; + overflow: hidden; +} diff --git a/src/components/callout/callout.style.ts b/src/components/callout/callout.style.ts deleted file mode 100644 index e21df8460..000000000 --- a/src/components/callout/callout.style.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --icon-color: currentColor; - --icon-size: var(--wa-font-size-l); - --spacing: var(--wa-space-m); - - position: relative; - display: flex; - align-items: stretch; - border-radius: var(--wa-panel-border-radius); - background-color: var(--background-color); - border-color: var(--border-color); - border-style: var(--wa-panel-border-style); - border-width: var(--wa-panel-border-width); - color: var(--content-color); - padding: var(--spacing); - } - - :host([variant='brand']) { - --background-color: var(--wa-color-brand-fill-quiet); - --border-color: var(--wa-color-brand-border-quiet); - --content-color: var(--wa-color-brand-on-normal); - } - - :host([variant='success']) { - --background-color: var(--wa-color-success-fill-quiet); - --border-color: var(--wa-color-success-border-quiet); - --content-color: var(--wa-color-success-on-normal); - } - - :host([variant='neutral']) { - --background-color: var(--wa-color-neutral-fill-quiet); - --border-color: var(--wa-color-neutral-border-quiet); - --content-color: var(--wa-color-neutral-on-normal); - } - - :host([variant='warning']) { - --background-color: var(--wa-color-warning-fill-quiet); - --border-color: var(--wa-color-warning-border-quiet); - --content-color: var(--wa-color-warning-on-normal); - } - - :host([variant='danger']) { - --background-color: var(--wa-color-danger-fill-quiet); - --border-color: var(--wa-color-danger-border-quiet); - --content-color: var(--wa-color-danger-on-normal); - } - - [part~='icon'] { - flex: 0 0 auto; - display: flex; - align-items: center; - color: var(--icon-color); - font-size: var(--icon-size); - - ::slotted(*) { - margin-inline-end: var(--spacing); - } - } - - [part~='message'] { - flex: 1 1 auto; - display: block; - overflow: hidden; - } -`; diff --git a/src/components/callout/callout.ts b/src/components/callout/callout.ts index 28c902fe5..3fadb6091 100644 --- a/src/components/callout/callout.ts +++ b/src/components/callout/callout.ts @@ -1,6 +1,6 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; -import styles from './callout.style.js'; +import styles from './callout.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/card/card.css b/src/components/card/card.css new file mode 100644 index 000000000..504cace42 --- /dev/null +++ b/src/components/card/card.css @@ -0,0 +1,75 @@ +:host { + --background-color: var(--wa-color-surface-default); + --border-color: var(--wa-color-surface-border); + --border-radius: var(--wa-panel-border-radius); + --border-style: var(--wa-panel-border-style); + --border-width: var(--wa-panel-border-width); + --box-shadow: var(--wa-shadow-s); + --spacing: var(--wa-space-xl); + + display: inline-block; +} + +.card { + display: flex; + flex-direction: column; + background-color: var(--background-color); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + box-shadow: var(--box-shadow); + color: var(--wa-color-text-normal); + font: inherit; +} + +.card__image { + display: flex; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + margin: calc(-1 * var(--border-width)); + overflow: hidden; +} + +.card__image::slotted(img) { + display: block; + width: 100%; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.card:not(.card--has-image) .card__image { + display: none; +} + +.card__header { + display: block; + border-bottom: inherit; + padding: calc(var(--spacing) / 2) var(--spacing); +} + +.card:not(.card--has-header) .card__header { + display: none; +} + +.card:not(.card--has-image) .card__header { + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); +} + +.card__body { + display: block; + padding: var(--spacing); +} + +.card--has-footer .card__footer { + display: block; + border-top: inherit; + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + padding: var(--spacing); +} + +.card:not(.card--has-footer) .card__footer { + display: none; +} diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts deleted file mode 100644 index d2757a030..000000000 --- a/src/components/card/card.styles.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-color-surface-default); - --border-color: var(--wa-color-surface-border); - --border-radius: var(--wa-panel-border-radius); - --border-style: var(--wa-panel-border-style); - --border-width: var(--wa-panel-border-width); - --box-shadow: var(--wa-shadow-s); - --spacing: var(--wa-space-xl); - - display: inline-block; - } - - .card { - display: flex; - flex-direction: column; - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - box-shadow: var(--box-shadow); - color: var(--wa-color-text-normal); - font: inherit; - } - - .card__image { - display: flex; - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); - margin: calc(-1 * var(--border-width)); - overflow: hidden; - } - - .card__image::slotted(img) { - display: block; - width: 100%; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; - } - - .card:not(.card--has-image) .card__image { - display: none; - } - - .card__header { - display: block; - border-bottom: inherit; - padding: calc(var(--spacing) / 2) var(--spacing); - } - - .card:not(.card--has-header) .card__header { - display: none; - } - - .card:not(.card--has-image) .card__header { - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); - } - - .card__body { - display: block; - padding: var(--spacing); - } - - .card--has-footer .card__footer { - display: block; - border-top: inherit; - border-bottom-left-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - padding: var(--spacing); - } - - .card:not(.card--has-footer) .card__footer { - display: none; - } -`; diff --git a/src/components/card/card.ts b/src/components/card/card.ts index a7ae6b4a4..ee956ded0 100644 --- a/src/components/card/card.ts +++ b/src/components/card/card.ts @@ -1,7 +1,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; -import styles from './card.styles.js'; +import styles from './card.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/carousel-item/carousel-item.css b/src/components/carousel-item/carousel-item.css new file mode 100644 index 000000000..abc65e317 --- /dev/null +++ b/src/components/carousel-item/carousel-item.css @@ -0,0 +1,19 @@ +:host { + --aspect-ratio: inherit; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 100%; + max-height: 100%; + aspect-ratio: var(--aspect-ratio); + scroll-snap-align: start; + scroll-snap-stop: always; +} + +::slotted(img) { + width: 100% !important; + height: 100% !important; + object-fit: cover; +} diff --git a/src/components/carousel-item/carousel-item.styles.ts b/src/components/carousel-item/carousel-item.styles.ts deleted file mode 100644 index 11e07af3c..000000000 --- a/src/components/carousel-item/carousel-item.styles.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --aspect-ratio: inherit; - - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - width: 100%; - max-height: 100%; - aspect-ratio: var(--aspect-ratio); - scroll-snap-align: start; - scroll-snap-stop: always; - } - - ::slotted(img) { - width: 100% !important; - height: 100% !important; - object-fit: cover; - } -`; diff --git a/src/components/carousel-item/carousel-item.ts b/src/components/carousel-item/carousel-item.ts index d9466c1be..6654ff748 100644 --- a/src/components/carousel-item/carousel-item.ts +++ b/src/components/carousel-item/carousel-item.ts @@ -1,6 +1,6 @@ import { customElement } from 'lit/decorators.js'; import { html } from 'lit'; -import styles from './carousel-item.styles.js'; +import styles from './carousel-item.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/carousel/carousel.css b/src/components/carousel/carousel.css new file mode 100644 index 000000000..1bb403b0d --- /dev/null +++ b/src/components/carousel/carousel.css @@ -0,0 +1,157 @@ +:host { + --aspect-ratio: 16 / 9; + --navigation-color: var(--wa-color-text-quiet); + --pagination-color: var(--wa-form-control-resting-color); + --pagination-color-active: var(--wa-form-control-activated-color); + --scroll-hint: 0px; + --slide-gap: var(--wa-space-m, 1rem); + + display: flex; +} + +.carousel { + display: grid; + grid-template-columns: min-content 1fr min-content; + grid-template-rows: 1fr min-content; + grid-template-areas: + '. slides .' + '. pagination .'; + gap: var(--wa-space-m); + align-items: center; + min-height: 100%; + min-width: 100%; + position: relative; +} + +.carousel__pagination { + grid-area: pagination; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--wa-space-s); +} + +.carousel__slides { + grid-area: slides; + + display: grid; + height: 100%; + width: 100%; + align-items: center; + justify-items: center; + overflow: auto; + overscroll-behavior-x: contain; + scrollbar-width: none; + aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page)); + border-radius: var(--wa-border-radius-s); + + --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page)); +} + +@media (prefers-reduced-motion) { + :where(.carousel__slides) { + scroll-behavior: auto; + } +} + +.carousel__slides--horizontal { + grid-auto-flow: column; + grid-auto-columns: var(--slide-size); + grid-auto-rows: 100%; + column-gap: var(--slide-gap); + scroll-snap-type: x mandatory; + scroll-padding-inline: var(--scroll-hint); + padding-inline: var(--scroll-hint); + overflow-y: hidden; +} + +.carousel__slides--vertical { + grid-auto-flow: row; + grid-auto-columns: 100%; + grid-auto-rows: var(--slide-size); + row-gap: var(--slide-gap); + scroll-snap-type: y mandatory; + scroll-padding-block: var(--scroll-hint); + padding-block: var(--scroll-hint); + overflow-x: hidden; +} + +.carousel__slides--dragging, +.carousel__slides--dropping { + scroll-snap-type: unset; +} + +:host([vertical]) ::slotted(wa-carousel-item) { + height: 100%; +} + +.carousel__slides::-webkit-scrollbar { + display: none; +} + +.carousel__navigation { + grid-area: navigation; + display: contents; + font-size: var(--wa-font-size-l); +} + +.carousel__navigation-button { + flex: 0 0 auto; + display: flex; + align-items: center; + background: none; + border: none; + border-radius: var(--wa-border-radius-s); + font-size: inherit; + color: var(--navigation-color); + padding: var(--wa-space-xs); + cursor: pointer; + transition: var(--wa-transition-normal) color; + appearance: none; +} + +.carousel__navigation-button--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.carousel__navigation-button--disabled::part(base) { + pointer-events: none; +} + +.carousel__navigation-button--previous { + grid-column: 1; + grid-row: 1; +} + +.carousel__navigation-button--next { + grid-column: 3; + grid-row: 1; +} + +.carousel__pagination-item { + display: block; + cursor: pointer; + background: none; + border: 0; + border-radius: var(--wa-border-radius-circle); + width: var(--wa-space-s); + height: var(--wa-space-s); + background-color: var(--pagination-color); + padding: 0; + margin: 0; + transition: transform var(--wa-transition-slow); +} + +.carousel__pagination-item--active { + background-color: var(--pagination-color-active); + transform: scale(1.25); +} + +/* Focus styles */ +.carousel__slides:focus-visible, +.carousel__navigation-button:focus-visible, +.carousel__pagination-item:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} diff --git a/src/components/carousel/carousel.styles.ts b/src/components/carousel/carousel.styles.ts deleted file mode 100644 index 1d3c700c8..000000000 --- a/src/components/carousel/carousel.styles.ts +++ /dev/null @@ -1,161 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --aspect-ratio: 16 / 9; - --navigation-color: var(--wa-color-text-quiet); - --pagination-color: var(--wa-form-control-resting-color); - --pagination-color-active: var(--wa-form-control-activated-color); - --scroll-hint: 0px; - --slide-gap: var(--wa-space-m, 1rem); - - display: flex; - } - - .carousel { - display: grid; - grid-template-columns: min-content 1fr min-content; - grid-template-rows: 1fr min-content; - grid-template-areas: - '. slides .' - '. pagination .'; - gap: var(--wa-space-m); - align-items: center; - min-height: 100%; - min-width: 100%; - position: relative; - } - - .carousel__pagination { - grid-area: pagination; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: var(--wa-space-s); - } - - .carousel__slides { - grid-area: slides; - - display: grid; - height: 100%; - width: 100%; - align-items: center; - justify-items: center; - overflow: auto; - overscroll-behavior-x: contain; - scrollbar-width: none; - aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page)); - border-radius: var(--wa-border-radius-s); - - --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page)); - } - - @media (prefers-reduced-motion) { - :where(.carousel__slides) { - scroll-behavior: auto; - } - } - - .carousel__slides--horizontal { - grid-auto-flow: column; - grid-auto-columns: var(--slide-size); - grid-auto-rows: 100%; - column-gap: var(--slide-gap); - scroll-snap-type: x mandatory; - scroll-padding-inline: var(--scroll-hint); - padding-inline: var(--scroll-hint); - overflow-y: hidden; - } - - .carousel__slides--vertical { - grid-auto-flow: row; - grid-auto-columns: 100%; - grid-auto-rows: var(--slide-size); - row-gap: var(--slide-gap); - scroll-snap-type: y mandatory; - scroll-padding-block: var(--scroll-hint); - padding-block: var(--scroll-hint); - overflow-x: hidden; - } - - .carousel__slides--dragging, - .carousel__slides--dropping { - scroll-snap-type: unset; - } - - :host([vertical]) ::slotted(wa-carousel-item) { - height: 100%; - } - - .carousel__slides::-webkit-scrollbar { - display: none; - } - - .carousel__navigation { - grid-area: navigation; - display: contents; - font-size: var(--wa-font-size-l); - } - - .carousel__navigation-button { - flex: 0 0 auto; - display: flex; - align-items: center; - background: none; - border: none; - border-radius: var(--wa-border-radius-s); - font-size: inherit; - color: var(--navigation-color); - padding: var(--wa-space-xs); - cursor: pointer; - transition: var(--wa-transition-normal) color; - appearance: none; - } - - .carousel__navigation-button--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .carousel__navigation-button--disabled::part(base) { - pointer-events: none; - } - - .carousel__navigation-button--previous { - grid-column: 1; - grid-row: 1; - } - - .carousel__navigation-button--next { - grid-column: 3; - grid-row: 1; - } - - .carousel__pagination-item { - display: block; - cursor: pointer; - background: none; - border: 0; - border-radius: var(--wa-border-radius-circle); - width: var(--wa-space-s); - height: var(--wa-space-s); - background-color: var(--pagination-color); - padding: 0; - margin: 0; - transition: transform var(--wa-transition-slow); - } - - .carousel__pagination-item--active { - background-color: var(--pagination-color-active); - transform: scale(1.25); - } - - /* Focus styles */ - .carousel__slides:focus-visible, - .carousel__navigation-button:focus-visible, - .carousel__pagination-item:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } -`; diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts index a034e7ce0..0893954b0 100644 --- a/src/components/carousel/carousel.ts +++ b/src/components/carousel/carousel.ts @@ -13,7 +13,7 @@ import { range } from 'lit/directives/range.js'; import { waitForEvent } from '../../internal/event.js'; import { WaSlideChangeEvent } from '../../events/slide-change.js'; import { watch } from '../../internal/watch.js'; -import styles from './carousel.styles.js'; +import styles from './carousel.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { PropertyValueMap } from 'lit'; import type WaCarouselItem from '../carousel-item/carousel-item.js'; diff --git a/src/components/checkbox/checkbox.css b/src/components/checkbox/checkbox.css new file mode 100644 index 000000000..e49ae9f4f --- /dev/null +++ b/src/components/checkbox/checkbox.css @@ -0,0 +1,121 @@ +:host { + --background-color: var(--wa-form-control-background-color); + --background-color-checked: var(--wa-form-control-activated-color); + --border-color: var(--wa-form-control-resting-color); + --border-color-checked: var(--wa-form-control-activated-color); + --border-radius: min( + calc(var(--toggle-size) * 0.375), + var(--wa-border-radius-xs) + ); /* min so it doesn't look like a circle/radio */ + --border-style: var(--wa-border-style); + --border-width: var(--wa-form-control-border-width); + --box-shadow: none; + --checked-icon-color: var(--wa-color-brand-on-loud); + --toggle-size: calc(1em * var(--wa-form-control-value-line-height)); + + display: inline-block; +} + +.checkbox { + position: relative; + display: flex; + align-items: flex-start; + font: inherit; + color: var(--wa-form-control-value-color); + vertical-align: middle; + cursor: pointer; +} + +.checkbox--small { + font-size: var(--wa-font-size-s); +} + +.checkbox--medium { + font-size: var(--wa-font-size-m); +} + +.checkbox--large { + font-size: var(--wa-font-size-l); +} + +.checkbox__control { + flex: 0 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: var(--toggle-size); + height: var(--toggle-size); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--wa-form-control-value-color); + transition: + background var(--wa-transition-normal) var(--wa-transition-easing), + border-color var(--wa-transition-fast) var(--wa-transition-easing), + box-shadow var(--wa-transition-fast) var(--wa-transition-easing), + color var(--wa-transition-fast) var(--wa-transition-easing); +} + +.checkbox__input { + position: absolute; + opacity: 0; + padding: 0; + margin: 0; + pointer-events: none; + height: 100%; + width: 100%; +} + +.checkbox__icon--invisible { + visibility: hidden; +} + +.checkbox__checked-icon, +.checkbox__indeterminate-icon { + display: inline-flex; +} + +/* Focus */ +.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:has(> input:focus-visible) { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +/* Checked/indeterminate */ +.checkbox--checked .checkbox__control, +.checkbox--indeterminate .checkbox__control { + color: var(--checked-icon-color); + border-color: var(--border-color-checked); + background-color: var(--background-color-checked); +} + +/* Checked/indeterminate + focus */ +.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:has(> input:focus-visible), +.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:has(> input:focus-visible) { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +/* Disabled */ +.checkbox--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.checkbox__label { + display: inline-block; + line-height: var(--toggle-size); + margin-inline-start: var(--wa-space-xs); + user-select: none; + -webkit-user-select: none; +} + +:host([required]) .checkbox__label::after { + content: var(--wa-form-control-required-content); + color: var(--wa-form-control-required-content-color); + margin-inline-start: var(--wa-form-control-required-content-offset); +} diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts deleted file mode 100644 index 6363f8412..000000000 --- a/src/components/checkbox/checkbox.styles.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-form-control-background-color); - --background-color-checked: var(--wa-form-control-activated-color); - --border-color: var(--wa-form-control-resting-color); - --border-color-checked: var(--wa-form-control-activated-color); - --border-radius: min( - calc(var(--toggle-size) * 0.375), - var(--wa-border-radius-xs) - ); /* min so it doesn't look like a circle/radio */ - --border-style: var(--wa-border-style); - --border-width: var(--wa-form-control-border-width); - --box-shadow: none; - --checked-icon-color: var(--wa-color-brand-on-loud); - --toggle-size: calc(1em * var(--wa-form-control-value-line-height)); - - display: inline-block; - } - - .checkbox { - position: relative; - display: flex; - align-items: flex-start; - font: inherit; - color: var(--wa-form-control-value-color); - vertical-align: middle; - cursor: pointer; - } - - .checkbox--small { - font-size: var(--wa-font-size-s); - } - - .checkbox--medium { - font-size: var(--wa-font-size-m); - } - - .checkbox--large { - font-size: var(--wa-font-size-l); - } - - .checkbox__control { - flex: 0 0 auto; - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: var(--toggle-size); - height: var(--toggle-size); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: var(--wa-form-control-value-color); - transition: - background var(--wa-transition-normal) var(--wa-transition-easing), - border-color var(--wa-transition-fast) var(--wa-transition-easing), - box-shadow var(--wa-transition-fast) var(--wa-transition-easing), - color var(--wa-transition-fast) var(--wa-transition-easing); - } - - .checkbox__input { - position: absolute; - opacity: 0; - padding: 0; - margin: 0; - pointer-events: none; - height: 100%; - width: 100%; - } - - .checkbox__icon--invisible { - visibility: hidden; - } - - .checkbox__checked-icon, - .checkbox__indeterminate-icon { - display: inline-flex; - } - - /* Focus */ - .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:has(> input:focus-visible) { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - /* Checked/indeterminate */ - .checkbox--checked .checkbox__control, - .checkbox--indeterminate .checkbox__control { - color: var(--checked-icon-color); - border-color: var(--border-color-checked); - background-color: var(--background-color-checked); - } - - /* Checked/indeterminate + focus */ - .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:has(> input:focus-visible), - .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:has(> input:focus-visible) { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - /* Disabled */ - .checkbox--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .checkbox__label { - display: inline-block; - line-height: var(--toggle-size); - margin-inline-start: var(--wa-space-xs); - user-select: none; - -webkit-user-select: none; - } - - :host([required]) .checkbox__label::after { - content: var(--wa-form-control-required-content); - color: var(--wa-form-control-required-content-color); - margin-inline-start: var(--wa-form-control-required-content-offset); - } -`; diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index e2ecbe941..5f2748221 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -13,7 +13,7 @@ import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import formControlStyles from '../../styles/form-control.styles.js'; -import styles from './checkbox.styles.js'; +import styles from './checkbox.css'; import type { PropertyValues } from 'lit'; /** diff --git a/src/components/code-demo/code-demo.css b/src/components/code-demo/code-demo.css new file mode 100644 index 000000000..5ed132691 --- /dev/null +++ b/src/components/code-demo/code-demo.css @@ -0,0 +1,193 @@ +:host { + --preview-background: var(--wa-color-surface-default, canvas); + --preview-backdrop: var(--wa-color-surface-lowered, rgb(0 0 0 / 0.25)); + --preview-resize: inline; + --preview-min-width: 10em; + --preview-max-width: 100%; + --preview-padding: var(--wa-space-2xl, 2rem); + --divider-width: var(--wa-border-width-s, 1px); + --viewport-initial-aspect-ratio: 16 / 9; + --viewport-bezel-width: 0.25em; + + --code-expand-duration: var(--wa-transition-fast, 0.3s); + --code-collapse-duration: var(--wa-transition-normal, 0.3s); + + display: flex; + flex-flow: column; + border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet); + border-radius: var(--wa-code-demo-rounding, var(--wa-border-radius-m)); + color: var(--wa-color-text-normal); + margin-block-end: var(--wa-flow-spacing); + background: var(--preview-backdrop); + interpolate-size: allow-keywords; +} + +/* Different defaults for isolated demos */ +:host([viewport]) { + --preview-resize: none; /* handled by wa-viewport-demo */ + --preview-padding: var(--wa-space-l, 1rem); +} + +#preview { + display: block; + padding: var(--preview-padding); + border-block-end: inherit; + border-block-end-width: var(--divider-width); + border-start-start-radius: inherit; + border-start-end-radius: inherit; + background: var(--preview-background); + resize: var(--preview-resize); + contain: inline-size; /* Safari chokes on scaled down viewports without this */ + + :host(:not([viewport])) & { + max-width: min(var(--preview-max-width), 100%); + min-width: var(--preview-min-width); + overflow: auto; + + @container style(--preview-resize: none) { + overflow: visible; + } + } + + > :first-child { + margin-block-start: 0; + } + + > :last-child { + margin-block-end: 0; + } +} + +wa-viewport-demo + slot[name='preview'].has-slotted { + display: none; +} + +#source { + border-block-end: inherit; + overflow: hidden; + transition-property: height, display; + transition-behavior: allow-discrete; + display: block; + + &::slotted(pre) { + position: relative; + border-radius: 0 !important; + margin: 0; + white-space: normal; + } + + &:has(+ #buttons) { + border-end-start-radius: 0; + border-end-end-radius: 0; + } + + &:not(:has(+ #buttons)) { + border-bottom: none; + } + + /* Collapsed */ + &:not(:host([open]) *) { + height: 0px; + display: none; + } + + /* Expanded */ + &:is(:host([open]) *) { + height: auto; + display: block; + } +} + +[part~='toggle-button'] wa-icon { + transition-property: rotate; + + &:is(:host([open]) *) { + rotate: 180deg; + } +} + +#source, +[part~='toggle-button'] wa-icon { + &:not(:host([open]) *) { + transition-duration: var(--code-collapse-duration); + } + + &:is(:host([open]) *) { + transition-duration: var(--code-expand-duration); + } +} + +#buttons { + display: flex; + align-items: stretch; + background: var(--controls-background, var(--wa-color-surface-default, canvas)); + border-end-start-radius: inherit; + border-end-end-radius: inherit; + border: inherit; + /* so that we don't get a visible border + border-style: none would be better but it affects how the others cascade :( + */ + border-width: 0; + + button { + --padding-block: 0.5em; + --padding-inline: 1.5em; + + all: unset; + padding-block: var(--padding-block); + padding-inline: var(--padding-inline); + cursor: pointer; + white-space: nowrap; + font-size: 0.875rem; + color: var(--wa-color-text-quiet); + text-align: center; + + &:not(#preview:active ~ #buttons *) { + /* Interactive states should not apply while the preview is being resized */ + &:hover { + background: oklab(from var(--wa-color-surface-lowered, rgb(0 0 0 / 0.05)) l a b / 50%); + } + + &:active { + box-shadow: var(--wa-shadow-s) inset; + padding-block: calc(var(--padding-block) + 1px) calc(var(--padding-block) - 1px); + } + } + + &:first-child { + /* bottom left in en */ + border-end-start-radius: inherit; + } + + &:last-child { + /* bottom right in en */ + border-end-end-radius: inherit; + } + + &:not(:first-child) { + /* bottom left in en */ + border-end-start-radius: 0; + border-inline-start: inherit; + border-inline-start-width: var(--divider-width); + } + + &:not(:last-child) { + /* bottom right in en */ + border-end-end-radius: 0; + } + + &:focus-visible { + outline: var(--wa-focus-ring); + } + + &[part~='toggle-button'] { + flex: 1; + } + } + + wa-icon { + width: 1em; + height: 1em; + vertical-align: -0.1em; + } +} diff --git a/src/components/code-demo/code-demo.styles.ts b/src/components/code-demo/code-demo.styles.ts deleted file mode 100644 index 4c68a59b5..000000000 --- a/src/components/code-demo/code-demo.styles.ts +++ /dev/null @@ -1,197 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --preview-background: var(--wa-color-surface-default, canvas); - --preview-backdrop: var(--wa-color-surface-lowered, rgb(0 0 0 / 0.25)); - --preview-resize: inline; - --preview-min-width: 10em; - --preview-max-width: 100%; - --preview-padding: var(--wa-space-2xl, 2rem); - --divider-width: var(--wa-border-width-s, 1px); - --viewport-initial-aspect-ratio: 16 / 9; - --viewport-bezel-width: 0.25em; - - --code-expand-duration: var(--wa-transition-fast, 0.3s); - --code-collapse-duration: var(--wa-transition-normal, 0.3s); - - display: flex; - flex-flow: column; - border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet); - border-radius: var(--wa-code-demo-rounding, var(--wa-border-radius-m)); - color: var(--wa-color-text-normal); - margin-block-end: var(--wa-flow-spacing); - background: var(--preview-backdrop); - interpolate-size: allow-keywords; - } - - /* Different defaults for isolated demos */ - :host([viewport]) { - --preview-resize: none; /* handled by wa-viewport-demo */ - --preview-padding: var(--wa-space-l, 1rem); - } - - #preview { - display: block; - padding: var(--preview-padding); - border-block-end: inherit; - border-block-end-width: var(--divider-width); - border-start-start-radius: inherit; - border-start-end-radius: inherit; - background: var(--preview-background); - resize: var(--preview-resize); - contain: inline-size; /* Safari chokes on scaled down viewports without this */ - - :host(:not([viewport])) & { - max-width: min(var(--preview-max-width), 100%); - min-width: var(--preview-min-width); - overflow: auto; - - @container style(--preview-resize: none) { - overflow: visible; - } - } - - > :first-child { - margin-block-start: 0; - } - - > :last-child { - margin-block-end: 0; - } - } - - wa-viewport-demo + slot[name='preview'].has-slotted { - display: none; - } - - #source { - border-block-end: inherit; - overflow: hidden; - transition-property: height, display; - transition-behavior: allow-discrete; - display: block; - - &::slotted(pre) { - position: relative; - border-radius: 0 !important; - margin: 0; - white-space: normal; - } - - &:has(+ #buttons) { - border-end-start-radius: 0; - border-end-end-radius: 0; - } - - &:not(:has(+ #buttons)) { - border-bottom: none; - } - - /* Collapsed */ - &:not(:host([open]) *) { - height: 0px; - display: none; - } - - /* Expanded */ - &:is(:host([open]) *) { - height: auto; - display: block; - } - } - - [part~='toggle-button'] wa-icon { - transition-property: rotate; - - &:is(:host([open]) *) { - rotate: 180deg; - } - } - - #source, - [part~='toggle-button'] wa-icon { - &:not(:host([open]) *) { - transition-duration: var(--code-collapse-duration); - } - - &:is(:host([open]) *) { - transition-duration: var(--code-expand-duration); - } - } - - #buttons { - display: flex; - align-items: stretch; - background: var(--controls-background, var(--wa-color-surface-default, canvas)); - border-end-start-radius: inherit; - border-end-end-radius: inherit; - border: inherit; - /* so that we don't get a visible border - border-style: none would be better but it affects how the others cascade :( - */ - border-width: 0; - - button { - --padding-block: 0.5em; - --padding-inline: 1.5em; - - all: unset; - padding-block: var(--padding-block); - padding-inline: var(--padding-inline); - cursor: pointer; - white-space: nowrap; - font-size: 0.875rem; - color: var(--wa-color-text-quiet); - text-align: center; - - &:not(#preview:active ~ #buttons *) { - /* Interactive states should not apply while the preview is being resized */ - &:hover { - background: oklab(from var(--wa-color-surface-lowered, rgb(0 0 0 / 0.05)) l a b / 50%); - } - - &:active { - box-shadow: var(--wa-shadow-s) inset; - padding-block: calc(var(--padding-block) + 1px) calc(var(--padding-block) - 1px); - } - } - - &:first-child { - /* bottom left in en */ - border-end-start-radius: inherit; - } - - &:last-child { - /* bottom right in en */ - border-end-end-radius: inherit; - } - - &:not(:first-child) { - /* bottom left in en */ - border-end-start-radius: 0; - border-inline-start: inherit; - border-inline-start-width: var(--divider-width); - } - - &:not(:last-child) { - /* bottom right in en */ - border-end-end-radius: 0; - } - - &:focus-visible { - outline: var(--wa-focus-ring); - } - - &[part~='toggle-button'] { - flex: 1; - } - } - - wa-icon { - width: 1em; - height: 1em; - vertical-align: -0.1em; - } - } -`; diff --git a/src/components/code-demo/code-demo.ts b/src/components/code-demo/code-demo.ts index 18a08aa86..0af0c79b5 100644 --- a/src/components/code-demo/code-demo.ts +++ b/src/components/code-demo/code-demo.ts @@ -4,7 +4,7 @@ import { customElement, property, query } from 'lit/decorators.js'; import { getInnerHTML, HasSlotController } from '../../internal/slot.js'; import { html } from 'lit'; import { viewportPropertyConverter } from '../viewport-demo/viewport-demo.js'; -import styles from './code-demo.styles.js'; +import styles from './code-demo.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { TemplateResult } from 'lit'; diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css new file mode 100644 index 000000000..854646f8a --- /dev/null +++ b/src/components/color-picker/color-picker.css @@ -0,0 +1,342 @@ +:host { + --background-color: var(--wa-color-surface-raised); + --border-color: var(--wa-color-surface-border); + --border-radius: var(--wa-form-control-border-radius); + --border-style: var(--wa-form-control-border-style); + --border-width: var(--wa-form-control-border-width); + --grid-width: 17rem; + --grid-height: 12rem; + --grid-handle-size: 1.25rem; + --spacing: var(--wa-space-s); + --preview-size: 2.25rem; + --preview-border-radius: var(--wa-border-radius-circle); + --slider-height: 1rem; + --slider-handle-size: calc(var(--slider-height) + 0.25rem); + --swatch-border-radius: var(--wa-border-radius-s); + --swatch-size: 1.5rem; + --trigger-border-radius: var(--wa-border-radius-circle); + + display: inline-block; +} + +.color-picker { + background-color: var(--background-color); + border-radius: var(--border-radius); + color: var(--color); + font: inherit; + user-select: none; + width: var(--grid-width); + -webkit-user-select: none; +} + +.color-picker__grid { + position: relative; + height: var(--grid-height); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), + linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); + border-top-left-radius: calc(var(--border-radius) - var(--border-width)); + border-top-right-radius: calc(var(--border-radius) - var(--border-width)); + cursor: crosshair; + forced-color-adjust: none; +} + +.color-picker__grid-handle { + position: absolute; + width: var(--grid-handle-size); + height: var(--grid-handle-size); + border-radius: var(--wa-border-radius-circle); + box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2); + border: solid 0.125rem white; + margin-top: calc(var(--grid-handle-size) / -2); + margin-left: calc(var(--grid-handle-size) / -2); + transition: scale var(--wa-transition-normal) var(--wa-transition-easing); +} + +.color-picker__grid-handle--dragging { + cursor: none; + scale: 1.5; +} + +.color-picker__grid-handle:focus-visible { + outline: var(--wa-focus-ring); +} + +.color-picker__controls { + padding: var(--spacing); + display: flex; + align-items: center; +} + +.color-picker__sliders { + flex: 1 1 auto; +} + +.color-picker__slider { + position: relative; + height: var(--slider-height); + border-radius: var(--wa-border-radius-xs); + box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2); + forced-color-adjust: none; +} + +.color-picker__slider:not(:last-of-type) { + margin-bottom: var(--wa-space-s); +} + +.color-picker__slider-handle { + position: absolute; + top: calc(50% - var(--slider-handle-size) / 2); + width: var(--slider-handle-size); + height: var(--slider-handle-size); + border-radius: var(--wa-border-radius-circle); + border: solid 0.125rem white; + box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2); + margin-left: calc(var(--slider-handle-size) / -2); +} + +.color-picker__slider-handle:focus-visible { + outline: var(--wa-focus-ring); +} + +.color-picker__hue { + background-image: linear-gradient( + to right, + rgb(255, 0, 0) 0%, + rgb(255, 255, 0) 17%, + rgb(0, 255, 0) 33%, + rgb(0, 255, 255) 50%, + rgb(0, 0, 255) 67%, + rgb(255, 0, 255) 83%, + rgb(255, 0, 0) 100% + ); +} + +.color-picker__alpha .color-picker__alpha-gradient { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: inherit; +} + +.color-picker__preview { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + width: var(--preview-size); + height: var(--preview-size); + border: none; + border-radius: var(--preview-border-radius); + background: none; + margin-inline-start: var(--spacing); + cursor: copy; + forced-color-adjust: none; +} + +.color-picker__preview:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: inherit; + box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2); + + /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */ + background-color: var(--preview-color); +} + +.color-picker__preview:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.color-picker__preview-color { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: solid 0.0625rem rgba(0, 0, 0, 0.125); +} + +.color-picker__preview-color--copied { + animation: pulse 850ms; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud); + } + 70% { + box-shadow: 0 0 0 0.5rem transparent; + } + 100% { + box-shadow: 0 0 0 0 transparent; + } +} + +.color-picker__user-input { + display: flex; + padding: 0 var(--spacing) var(--spacing) var(--spacing); +} + +.color-picker__user-input wa-input { + min-width: 0; /* fix input width in Safari */ + flex: 1 1 auto; +} + +.color-picker__user-input wa-button-group { + margin-inline-start: var(--spacing); +} + +.color-picker__user-input wa-button:first-of-type { + min-width: 3rem; + max-width: 3rem; +} + +.color-picker__swatches { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(var(--swatch-size), 100%), 1fr)); + grid-gap: var(--wa-space-xs); + justify-items: center; + border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width) + var(--wa-color-surface-border); + padding: var(--spacing); + forced-color-adjust: none; +} + +.color-picker__swatch { + position: relative; + aspect-ratio: 1 / 1; + width: 100%; + border-radius: var(--swatch-border-radius); +} + +.color-picker__swatch .color-picker__swatch-color { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: solid 0.0625rem rgba(0, 0, 0, 0.125); + border-radius: inherit; + cursor: pointer; +} + +.color-picker__swatch:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.color-picker__transparent-bg { + background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%), + linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%), + linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%); + background-size: 0.5rem 0.5rem; + background-position: + 0 0, + 0 0, + -0.25rem -0.25rem, + 0.25rem 0.25rem; +} + +.color-picker--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.color-picker--disabled .color-picker__grid, +.color-picker--disabled .color-picker__grid-handle, +.color-picker--disabled .color-picker__slider, +.color-picker--disabled .color-picker__slider-handle, +.color-picker--disabled .color-picker__preview, +.color-picker--disabled .color-picker__swatch, +.color-picker--disabled .color-picker__swatch-color { + pointer-events: none; +} + +/* + * Color dropdown + */ + +.color-dropdown { + display: flex; +} + +.color-dropdown::part(panel) { + max-height: none; + background-color: var(--background-color); + border: var(--border-style) var(--border-width) var(--border-color); + border-radius: var(--border-radius); + overflow: visible; +} + +.color-dropdown__trigger { + display: block; + position: relative; + background-color: transparent; + border: none; + cursor: pointer; + forced-color-adjust: none; +} + +.color-dropdown__trigger.color-dropdown__trigger--small { + width: var(--wa-form-control-height-s); + height: var(--wa-form-control-height-s); + border-radius: var(--trigger-border-radius); +} + +.color-dropdown__trigger.color-dropdown__trigger--medium { + width: var(--wa-form-control-height-m); + height: var(--wa-form-control-height-m); + border-radius: var(--trigger-border-radius); +} + +.color-dropdown__trigger.color-dropdown__trigger--large { + width: var(--wa-form-control-height-l); + height: var(--wa-form-control-height-l); + border-radius: var(--trigger-border-radius); +} + +.color-dropdown__trigger:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: inherit; + background-color: currentColor; + box-shadow: + inset 0 0 0 0.0625rem var(--wa-form-control-resting-color), + inset 0 0 0 0.25rem var(--wa-color-surface-default); +} + +.color-dropdown__trigger--empty:before { + background-color: transparent; +} + +.color-dropdown__trigger:focus-visible { + outline: none; +} + +.color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +:host(:disabled) :is(.color-dropdown__label, .color-dropdown__trigger) { + opacity: 0.5; + cursor: not-allowed; +} + +.form-control.form-control--has-label .form-control__label { + cursor: pointer; + display: inline-block; +} diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts deleted file mode 100644 index 1bd5da2e7..000000000 --- a/src/components/color-picker/color-picker.styles.ts +++ /dev/null @@ -1,346 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-color-surface-raised); - --border-color: var(--wa-color-surface-border); - --border-radius: var(--wa-form-control-border-radius); - --border-style: var(--wa-form-control-border-style); - --border-width: var(--wa-form-control-border-width); - --grid-width: 17rem; - --grid-height: 12rem; - --grid-handle-size: 1.25rem; - --spacing: var(--wa-space-s); - --preview-size: 2.25rem; - --preview-border-radius: var(--wa-border-radius-circle); - --slider-height: 1rem; - --slider-handle-size: calc(var(--slider-height) + 0.25rem); - --swatch-border-radius: var(--wa-border-radius-s); - --swatch-size: 1.5rem; - --trigger-border-radius: var(--wa-border-radius-circle); - - display: inline-block; - } - - .color-picker { - background-color: var(--background-color); - border-radius: var(--border-radius); - color: var(--color); - font: inherit; - user-select: none; - width: var(--grid-width); - -webkit-user-select: none; - } - - .color-picker__grid { - position: relative; - height: var(--grid-height); - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), - linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); - border-top-left-radius: calc(var(--border-radius) - var(--border-width)); - border-top-right-radius: calc(var(--border-radius) - var(--border-width)); - cursor: crosshair; - forced-color-adjust: none; - } - - .color-picker__grid-handle { - position: absolute; - width: var(--grid-handle-size); - height: var(--grid-handle-size); - border-radius: var(--wa-border-radius-circle); - box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2); - border: solid 0.125rem white; - margin-top: calc(var(--grid-handle-size) / -2); - margin-left: calc(var(--grid-handle-size) / -2); - transition: scale var(--wa-transition-normal) var(--wa-transition-easing); - } - - .color-picker__grid-handle--dragging { - cursor: none; - scale: 1.5; - } - - .color-picker__grid-handle:focus-visible { - outline: var(--wa-focus-ring); - } - - .color-picker__controls { - padding: var(--spacing); - display: flex; - align-items: center; - } - - .color-picker__sliders { - flex: 1 1 auto; - } - - .color-picker__slider { - position: relative; - height: var(--slider-height); - border-radius: var(--wa-border-radius-xs); - box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2); - forced-color-adjust: none; - } - - .color-picker__slider:not(:last-of-type) { - margin-bottom: var(--wa-space-s); - } - - .color-picker__slider-handle { - position: absolute; - top: calc(50% - var(--slider-handle-size) / 2); - width: var(--slider-handle-size); - height: var(--slider-handle-size); - border-radius: var(--wa-border-radius-circle); - border: solid 0.125rem white; - box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2); - margin-left: calc(var(--slider-handle-size) / -2); - } - - .color-picker__slider-handle:focus-visible { - outline: var(--wa-focus-ring); - } - - .color-picker__hue { - background-image: linear-gradient( - to right, - rgb(255, 0, 0) 0%, - rgb(255, 255, 0) 17%, - rgb(0, 255, 0) 33%, - rgb(0, 255, 255) 50%, - rgb(0, 0, 255) 67%, - rgb(255, 0, 255) 83%, - rgb(255, 0, 0) 100% - ); - } - - .color-picker__alpha .color-picker__alpha-gradient { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: inherit; - } - - .color-picker__preview { - flex: 0 0 auto; - display: inline-flex; - align-items: center; - justify-content: center; - position: relative; - width: var(--preview-size); - height: var(--preview-size); - border: none; - border-radius: var(--preview-border-radius); - background: none; - margin-inline-start: var(--spacing); - cursor: copy; - forced-color-adjust: none; - } - - .color-picker__preview:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: inherit; - box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2); - - /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */ - background-color: var(--preview-color); - } - - .color-picker__preview:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .color-picker__preview-color { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: solid 0.0625rem rgba(0, 0, 0, 0.125); - } - - .color-picker__preview-color--copied { - animation: pulse 850ms; - } - - @keyframes pulse { - 0% { - box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud); - } - 70% { - box-shadow: 0 0 0 0.5rem transparent; - } - 100% { - box-shadow: 0 0 0 0 transparent; - } - } - - .color-picker__user-input { - display: flex; - padding: 0 var(--spacing) var(--spacing) var(--spacing); - } - - .color-picker__user-input wa-input { - min-width: 0; /* fix input width in Safari */ - flex: 1 1 auto; - } - - .color-picker__user-input wa-button-group { - margin-inline-start: var(--spacing); - } - - .color-picker__user-input wa-button:first-of-type { - min-width: 3rem; - max-width: 3rem; - } - - .color-picker__swatches { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(var(--swatch-size), 100%), 1fr)); - grid-gap: var(--wa-space-xs); - justify-items: center; - border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width) - var(--wa-color-surface-border); - padding: var(--spacing); - forced-color-adjust: none; - } - - .color-picker__swatch { - position: relative; - aspect-ratio: 1 / 1; - width: 100%; - border-radius: var(--swatch-border-radius); - } - - .color-picker__swatch .color-picker__swatch-color { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: solid 0.0625rem rgba(0, 0, 0, 0.125); - border-radius: inherit; - cursor: pointer; - } - - .color-picker__swatch:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .color-picker__transparent-bg { - background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%), - linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%), - linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%), - linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%); - background-size: 0.5rem 0.5rem; - background-position: - 0 0, - 0 0, - -0.25rem -0.25rem, - 0.25rem 0.25rem; - } - - .color-picker--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .color-picker--disabled .color-picker__grid, - .color-picker--disabled .color-picker__grid-handle, - .color-picker--disabled .color-picker__slider, - .color-picker--disabled .color-picker__slider-handle, - .color-picker--disabled .color-picker__preview, - .color-picker--disabled .color-picker__swatch, - .color-picker--disabled .color-picker__swatch-color { - pointer-events: none; - } - - /* - * Color dropdown - */ - - .color-dropdown { - display: flex; - } - - .color-dropdown::part(panel) { - max-height: none; - background-color: var(--background-color); - border: var(--border-style) var(--border-width) var(--border-color); - border-radius: var(--border-radius); - overflow: visible; - } - - .color-dropdown__trigger { - display: block; - position: relative; - background-color: transparent; - border: none; - cursor: pointer; - forced-color-adjust: none; - } - - .color-dropdown__trigger.color-dropdown__trigger--small { - width: var(--wa-form-control-height-s); - height: var(--wa-form-control-height-s); - border-radius: var(--trigger-border-radius); - } - - .color-dropdown__trigger.color-dropdown__trigger--medium { - width: var(--wa-form-control-height-m); - height: var(--wa-form-control-height-m); - border-radius: var(--trigger-border-radius); - } - - .color-dropdown__trigger.color-dropdown__trigger--large { - width: var(--wa-form-control-height-l); - height: var(--wa-form-control-height-l); - border-radius: var(--trigger-border-radius); - } - - .color-dropdown__trigger:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: inherit; - background-color: currentColor; - box-shadow: - inset 0 0 0 0.0625rem var(--wa-form-control-resting-color), - inset 0 0 0 0.25rem var(--wa-color-surface-default); - } - - .color-dropdown__trigger--empty:before { - background-color: transparent; - } - - .color-dropdown__trigger:focus-visible { - outline: none; - } - - .color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - :host(:disabled) :is(.color-dropdown__label, .color-dropdown__trigger) { - opacity: 0.5; - cursor: not-allowed; - } - - .form-control.form-control--has-label .form-control__label { - cursor: pointer; - display: inline-block; - } -`; diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 4da6075f8..efb944c49 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -23,7 +23,7 @@ import { WaInvalidEvent } from '../../events/invalid.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import formControlStyles from '../../styles/form-control.styles.js'; -import styles from './color-picker.styles.js'; +import styles from './color-picker.css'; import type { PropertyValues } from 'lit'; import type WaDropdown from '../dropdown/dropdown.js'; import type WaInput from '../input/input.js'; diff --git a/src/components/copy-button/copy-button.css b/src/components/copy-button/copy-button.css new file mode 100644 index 000000000..870ea50e8 --- /dev/null +++ b/src/components/copy-button/copy-button.css @@ -0,0 +1,74 @@ +:host { + --background-color: transparent; + --background-color-hover: var(--wa-color-neutral-fill-quiet); + --error-color: var(--wa-color-danger-fill-loud); + --success-color: var(--wa-color-success-fill-loud); + + display: inline-block; + color: var(--wa-color-text-quiet); +} + +.copy-button__button { + flex: 0 0 auto; + display: flex; + align-items: center; + background-color: var(--background-color); + border: none; + border-radius: var(--wa-border-radius-s); + color: inherit; + font-size: inherit; + padding: var(--wa-space-xs); + cursor: pointer; + transition: color var(--wa-transition-fast) var(--wa-transition-easing); +} + +.copy-button__button:hover:not([disabled]), +.copy-button__button:focus-visible:not([disabled]) { + background-color: var(--background-color-hover); + color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); +} + +.copy-button__button:active:not([disabled]) { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); +} + +slot[name='success-icon'] { + color: var(--success-color); +} + +slot[name='error-icon'] { + color: var(--error-color); +} + +.copy-button__button:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.copy-button__button[disabled] { + opacity: 0.5; + cursor: not-allowed !important; +} + +slot { + display: inline-flex; +} + +.show { + animation: show 100ms ease; +} + +.hide { + animation: show 100ms ease reverse; +} + +@keyframes show { + from { + scale: 0.25; + opacity: 0.25; + } + to { + scale: 1; + opacity: 1; + } +} diff --git a/src/components/copy-button/copy-button.styles.ts b/src/components/copy-button/copy-button.styles.ts deleted file mode 100644 index 63b61828b..000000000 --- a/src/components/copy-button/copy-button.styles.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: transparent; - --background-color-hover: var(--wa-color-neutral-fill-quiet); - --error-color: var(--wa-color-danger-fill-loud); - --success-color: var(--wa-color-success-fill-loud); - - display: inline-block; - color: var(--wa-color-text-quiet); - } - - .copy-button__button { - flex: 0 0 auto; - display: flex; - align-items: center; - background-color: var(--background-color); - border: none; - border-radius: var(--wa-border-radius-s); - color: inherit; - font-size: inherit; - padding: var(--wa-space-xs); - cursor: pointer; - transition: color var(--wa-transition-fast) var(--wa-transition-easing); - } - - .copy-button__button:hover:not([disabled]), - .copy-button__button:focus-visible:not([disabled]) { - background-color: var(--background-color-hover); - color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); - } - - .copy-button__button:active:not([disabled]) { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); - } - - slot[name='success-icon'] { - color: var(--success-color); - } - - slot[name='error-icon'] { - color: var(--error-color); - } - - .copy-button__button:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .copy-button__button[disabled] { - opacity: 0.5; - cursor: not-allowed !important; - } - - slot { - display: inline-flex; - } - - .show { - animation: show 100ms ease; - } - - .hide { - animation: show 100ms ease reverse; - } - - @keyframes show { - from { - scale: 0.25; - opacity: 0.25; - } - to { - scale: 1; - opacity: 1; - } - } -`; diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts index 02a4ab573..82563bf49 100644 --- a/src/components/copy-button/copy-button.ts +++ b/src/components/copy-button/copy-button.ts @@ -8,7 +8,7 @@ import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { WaCopyEvent } from '../../events/copy.js'; import { WaErrorEvent } from '../../events/error.js'; -import styles from './copy-button.styles.js'; +import styles from './copy-button.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type WaTooltip from '../tooltip/tooltip.js'; diff --git a/src/components/details/details.css b/src/components/details/details.css new file mode 100644 index 000000000..5d24ef7c0 --- /dev/null +++ b/src/components/details/details.css @@ -0,0 +1,107 @@ +:host { + --background-color: var(--wa-color-surface-default); + --border-color: var(--wa-color-surface-border); + --border-radius: var(--wa-panel-border-radius); + --border-style: var(--wa-panel-border-style); + --border-width: var(--wa-panel-border-width); + --icon-color: var(--wa-color-text-quiet); + --spacing: var(--wa-space-m); + --show-duration: 200ms; + --hide-duration: 200ms; + + display: block; +} + +.details { + background-color: var(--background-color); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + overflow-anchor: none; +} + +.details--disabled { + opacity: 0.5; +} + +.details__header { + display: flex; + align-items: center; + padding: var(--spacing); + user-select: none; + -webkit-user-select: none; + cursor: pointer; +} + +.details__header::-webkit-details-marker { + display: none; +} + +.details__header:focus { + outline: none; +} + +.details__header:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: calc(1px + var(--wa-focus-ring-offset)); +} + +.details--disabled .details__header { + cursor: not-allowed; +} + +.details--disabled .details__header:focus-visible { + outline: none; + box-shadow: none; +} + +.details__summary { + flex: 1 1 auto; + display: flex; + align-items: center; +} + +.details__summary-icon { + flex: 0 0 auto; + display: flex; + align-items: center; + color: var(--icon-color); + transition: rotate var(--wa-transition-normal) var(--wa-transition-easing); +} + +.details--open .details__summary-icon { + rotate: 90deg; +} + +.details--open.details--rtl .details__summary-icon { + rotate: -90deg; +} + +.details--open slot[name='expand-icon'], +.details:not(.details--open) slot[name='collapse-icon'] { + display: none; +} + +/* Overflows get clipped during the closing animation if we don't wait until the close is gone. */ +:not(.details--open) .details__body { + overflow: hidden; +} + +.details__content { + display: block; + padding: var(--spacing); +} + +.show { +} + +.hide { +} + +@keyframes show { + from { + } + to { + } +} diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts deleted file mode 100644 index 654bb2c59..000000000 --- a/src/components/details/details.styles.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-color-surface-default); - --border-color: var(--wa-color-surface-border); - --border-radius: var(--wa-panel-border-radius); - --border-style: var(--wa-panel-border-style); - --border-width: var(--wa-panel-border-width); - --icon-color: var(--wa-color-text-quiet); - --spacing: var(--wa-space-m); - --show-duration: 200ms; - --hide-duration: 200ms; - - display: block; - } - - .details { - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - overflow-anchor: none; - } - - .details--disabled { - opacity: 0.5; - } - - .details__header { - display: flex; - align-items: center; - padding: var(--spacing); - user-select: none; - -webkit-user-select: none; - cursor: pointer; - } - - .details__header::-webkit-details-marker { - display: none; - } - - .details__header:focus { - outline: none; - } - - .details__header:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: calc(1px + var(--wa-focus-ring-offset)); - } - - .details--disabled .details__header { - cursor: not-allowed; - } - - .details--disabled .details__header:focus-visible { - outline: none; - box-shadow: none; - } - - .details__summary { - flex: 1 1 auto; - display: flex; - align-items: center; - } - - .details__summary-icon { - flex: 0 0 auto; - display: flex; - align-items: center; - color: var(--icon-color); - transition: rotate var(--wa-transition-normal) var(--wa-transition-easing); - } - - .details--open .details__summary-icon { - rotate: 90deg; - } - - .details--open.details--rtl .details__summary-icon { - rotate: -90deg; - } - - .details--open slot[name='expand-icon'], - .details:not(.details--open) slot[name='collapse-icon'] { - display: none; - } - - /* Overflows get clipped during the closing animation if we don't wait until the close is gone. */ - :not(.details--open) .details__body { - overflow: hidden; - } - - .details__content { - display: block; - padding: var(--spacing); - } - - .show { - } - - .hide { - } - - @keyframes show { - from { - } - to { - } - } -`; diff --git a/src/components/details/details.ts b/src/components/details/details.ts index 36ad812fd..1a40c5c05 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -10,7 +10,7 @@ import { WaHideEvent } from '../../events/hide.js'; import { waitForEvent } from '../../internal/event.js'; import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; -import styles from './details.styles.js'; +import styles from './details.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css new file mode 100644 index 000000000..6a56a0980 --- /dev/null +++ b/src/components/dialog/dialog.css @@ -0,0 +1,173 @@ +:host { + --background-color: var(--wa-color-surface-raised); + --border-radius: var(--wa-panel-border-radius); + --box-shadow: var(--wa-shadow-l); + --width: 31rem; + --spacing: var(--wa-space-xl); + --show-duration: 200ms; + --hide-duration: 200ms; + + display: none; +} + +:host([open]) { + display: block; +} + +.dialog { + display: flex; + flex-direction: column; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: var(--width); + max-width: calc(100% - var(--wa-space-2xl)); + max-height: calc(100% - var(--wa-space-2xl)); + background-color: var(--background-color); + border-radius: var(--border-radius); + border: none; + box-shadow: var(--box-shadow); + padding: 0; + margin: auto; + + &.show { + animation: show-dialog var(--show-duration) ease; + + &::backdrop { + animation: show-backdrop var(--show-duration, 200ms) ease; + } + } + + &.hide { + animation: show-dialog var(--hide-duration) ease reverse; + + &::backdrop { + animation: show-backdrop var(--hide-duration, 200ms) ease reverse; + } + } + + &.pulse { + animation: pulse 250ms ease; + } +} + +.dialog:focus { + outline: none; +} + +/* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */ +@media screen and (max-width: 420px) { + .dialog { + max-height: 80vh; + } +} + +.dialog--open { + display: flex; + opacity: 1; +} + +.dialog__header { + flex: 0 0 auto; + display: flex; + flex-wrap: nowrap; + padding: var(--spacing); + padding-block-end: 0; +} + +.dialog__title { + align-self: center; + flex: 1 1 auto; + font-family: inherit; + font-size: var(--wa-font-size-l); + font-weight: var(--wa-font-weight-heading); + line-height: var(--wa-line-height-condensed); + margin: 0; +} + +.dialog__header-actions { + align-self: start; + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + justify-content: end; + gap: var(--wa-space-2xs); + padding-inline-start: var(--spacing); +} + +.dialog__header-actions wa-icon-button, +.dialog__header-actions ::slotted(wa-icon-button) { + flex: 0 0 auto; + display: flex; + align-items: center; + font-size: var(--wa-font-size-m); +} + +.dialog__body { + flex: 1 1 auto; + display: block; + padding: var(--spacing); + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.dialog__footer { + flex: 0 0 auto; + display: flex; + flex-wrap: wrap; + gap: var(--wa-space-xs); + justify-content: end; + padding: var(--spacing); + padding-block-start: 0; +} + +.dialog__footer ::slotted(wa-button:not(:first-of-type)) { + margin-inline-start: var(--wa-spacing-xs); +} + +.dialog::backdrop { + /* + NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can + remove the fallback values here. + */ + background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25)); +} + +@keyframes pulse { + 0% { + scale: 1; + } + 50% { + scale: 1.02; + } + 100% { + scale: 1; + } +} + +@keyframes show-dialog { + from { + opacity: 0; + scale: 0.8; + } + to { + opacity: 1; + scale: 1; + } +} + +@keyframes show-backdrop { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@media (forced-colors: active) { + .dialog { + border: solid 1px white; + } +} diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts deleted file mode 100644 index 2756d8f3d..000000000 --- a/src/components/dialog/dialog.styles.ts +++ /dev/null @@ -1,177 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-color-surface-raised); - --border-radius: var(--wa-panel-border-radius); - --box-shadow: var(--wa-shadow-l); - --width: 31rem; - --spacing: var(--wa-space-xl); - --show-duration: 200ms; - --hide-duration: 200ms; - - display: none; - } - - :host([open]) { - display: block; - } - - .dialog { - display: flex; - flex-direction: column; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: var(--width); - max-width: calc(100% - var(--wa-space-2xl)); - max-height: calc(100% - var(--wa-space-2xl)); - background-color: var(--background-color); - border-radius: var(--border-radius); - border: none; - box-shadow: var(--box-shadow); - padding: 0; - margin: auto; - - &.show { - animation: show-dialog var(--show-duration) ease; - - &::backdrop { - animation: show-backdrop var(--show-duration, 200ms) ease; - } - } - - &.hide { - animation: show-dialog var(--hide-duration) ease reverse; - - &::backdrop { - animation: show-backdrop var(--hide-duration, 200ms) ease reverse; - } - } - - &.pulse { - animation: pulse 250ms ease; - } - } - - .dialog:focus { - outline: none; - } - - /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */ - @media screen and (max-width: 420px) { - .dialog { - max-height: 80vh; - } - } - - .dialog--open { - display: flex; - opacity: 1; - } - - .dialog__header { - flex: 0 0 auto; - display: flex; - flex-wrap: nowrap; - padding: var(--spacing); - padding-block-end: 0; - } - - .dialog__title { - align-self: center; - flex: 1 1 auto; - font-family: inherit; - font-size: var(--wa-font-size-l); - font-weight: var(--wa-font-weight-heading); - line-height: var(--wa-line-height-condensed); - margin: 0; - } - - .dialog__header-actions { - align-self: start; - display: flex; - flex-shrink: 0; - flex-wrap: wrap; - justify-content: end; - gap: var(--wa-space-2xs); - padding-inline-start: var(--spacing); - } - - .dialog__header-actions wa-icon-button, - .dialog__header-actions ::slotted(wa-icon-button) { - flex: 0 0 auto; - display: flex; - align-items: center; - font-size: var(--wa-font-size-m); - } - - .dialog__body { - flex: 1 1 auto; - display: block; - padding: var(--spacing); - overflow: auto; - -webkit-overflow-scrolling: touch; - } - - .dialog__footer { - flex: 0 0 auto; - display: flex; - flex-wrap: wrap; - gap: var(--wa-space-xs); - justify-content: end; - padding: var(--spacing); - padding-block-start: 0; - } - - .dialog__footer ::slotted(wa-button:not(:first-of-type)) { - margin-inline-start: var(--wa-spacing-xs); - } - - .dialog::backdrop { - /* - NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can - remove the fallback values here. - */ - background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25)); - } - - @keyframes pulse { - 0% { - scale: 1; - } - 50% { - scale: 1.02; - } - 100% { - scale: 1; - } - } - - @keyframes show-dialog { - from { - opacity: 0; - scale: 0.8; - } - to { - opacity: 1; - scale: 1; - } - } - - @keyframes show-backdrop { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - - @media (forced-colors: active) { - .dialog { - border: solid 1px white; - } - } -`; diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 72b621c80..51bfd7557 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -10,7 +10,7 @@ import { WaAfterShowEvent } from '../../events/after-show.js'; import { WaHideEvent } from '../../events/hide.js'; import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; -import styles from './dialog.styles.js'; +import styles from './dialog.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/divider/divider.css b/src/components/divider/divider.css new file mode 100644 index 000000000..20499b64d --- /dev/null +++ b/src/components/divider/divider.css @@ -0,0 +1,18 @@ +:host { + --color: var(--wa-color-surface-border); + --width: var(--wa-border-width-s); + --spacing: var(--wa-space-m); +} + +:host(:not([vertical])) { + display: block; + border-top: solid var(--width) var(--color); + margin: var(--spacing) 0; +} + +:host([vertical]) { + display: inline-block; + height: 100%; + border-left: solid var(--width) var(--color); + margin: 0 var(--spacing); +} diff --git a/src/components/divider/divider.styles.ts b/src/components/divider/divider.styles.ts deleted file mode 100644 index 5ce40e283..000000000 --- a/src/components/divider/divider.styles.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --color: var(--wa-color-surface-border); - --width: var(--wa-border-width-s); - --spacing: var(--wa-space-m); - } - - :host(:not([vertical])) { - display: block; - border-top: solid var(--width) var(--color); - margin: var(--spacing) 0; - } - - :host([vertical]) { - display: inline-block; - height: 100%; - border-left: solid var(--width) var(--color); - margin: 0 var(--spacing); - } -`; diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts index 2a59e93d6..54ba8a189 100644 --- a/src/components/divider/divider.ts +++ b/src/components/divider/divider.ts @@ -1,6 +1,6 @@ import { customElement, property } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; -import styles from './divider.styles.js'; +import styles from './divider.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/drawer/drawer.css b/src/components/drawer/drawer.css new file mode 100644 index 000000000..6ea217750 --- /dev/null +++ b/src/components/drawer/drawer.css @@ -0,0 +1,280 @@ +:host { + --background-color: var(--wa-color-surface-raised); + --box-shadow: var(--wa-shadow-l); + --size: 25rem; + --spacing: var(--wa-space-xl); + --show-duration: 200ms; + --hide-duration: 200ms; + + display: none; +} + +:host([open]) { + display: block; +} + +.drawer { + display: flex; + flex-direction: column; + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + overflow: hidden; + background-color: var(--background-color); + border: none; + box-shadow: var(--box-shadow); + overflow: auto; + padding: 0; + margin: 0; + animation-duration: var(--show-duration); + animation-timing-function: ease; + + &.show::backdrop { + animation: show-backdrop var(--show-duration, 200ms) ease; + } + + &.hide::backdrop { + animation: show-backdrop var(--hide-duration, 200ms) ease reverse; + } + + &.show.drawer--top { + animation: show-drawer-from-top var(--show-duration) ease; + } + + &.hide.drawer--top { + animation: show-drawer-from-top var(--hide-duration) ease reverse; + } + + &.show.drawer--end { + animation: show-drawer-from-end var(--show-duration) ease; + + &.drawer--rtl { + animation-name: show-drawer-from-start; + } + } + + &.hide.drawer--end { + animation: show-drawer-from-end var(--hide-duration) ease reverse; + + &.drawer--rtl { + animation-name: show-drawer-from-start; + } + } + + &.show.drawer--bottom { + animation: show-drawer-from-bottom var(--show-duration) ease; + } + + &.hide.drawer--bottom { + animation: show-drawer-from-bottom var(--hide-duration) ease reverse; + } + + &.show.drawer--start { + animation: show-drawer-from-start var(--show-duration) ease; + + &.drawer--rtl { + animation-name: show-drawer-from-end; + } + } + + &.hide.drawer--start { + animation: show-drawer-from-start var(--hide-duration) ease reverse; + + &.drawer--rtl { + animation-name: show-drawer-from-end; + } + } + + &.pulse { + animation: pulse 250ms ease; + } +} + +.drawer:focus { + outline: none; +} + +.drawer--top { + top: 0; + inset-inline-end: auto; + bottom: auto; + inset-inline-start: 0; + width: 100%; + height: var(--size); +} + +.drawer--end { + top: 0; + inset-inline-end: 0; + bottom: auto; + inset-inline-start: auto; + width: var(--size); + height: 100%; +} + +.drawer--bottom { + top: auto; + inset-inline-end: auto; + bottom: 0; + inset-inline-start: 0; + width: 100%; + height: var(--size); +} + +.drawer--start { + top: 0; + inset-inline-end: auto; + bottom: auto; + inset-inline-start: 0; + width: var(--size); + height: 100%; +} + +.drawer__header { + display: flex; + flex-wrap: nowrap; + padding: var(--spacing); + padding-block-end: 0; +} + +.drawer__title { + align-self: center; + flex: 1 1 auto; + font: inherit; + font-size: var(--wa-font-size-l); + font-weight: var(--wa-font-weight-heading); + line-height: var(--wa-line-height-condensed); + margin: 0; +} + +.drawer__header-actions { + align-self: start; + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + justify-content: end; + gap: var(--wa-space-2xs); + padding-inline-start: var(--spacing); +} + +.drawer__header-actions wa-icon-button, +.drawer__header-actions ::slotted(wa-icon-button) { + flex: 0 0 auto; + display: flex; + align-items: center; + font-size: var(--wa-font-size-m); +} + +.drawer__body { + flex: 1 1 auto; + display: block; + padding: var(--spacing); + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.drawer__footer { + display: flex; + flex-wrap: wrap; + gap: var(--wa-space-xs); + justify-content: end; + padding: var(--spacing); + padding-block-start: 0; +} + +.drawer__footer ::slotted(wa-button:not(:last-of-type)) { + margin-inline-end: var(--wa-spacing-xs); +} + +.drawer::backdrop { + /* + NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can + remove the fallback values here. + */ + background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25)); +} + +@keyframes pulse { + 0% { + scale: 1; + } + 50% { + scale: 1.01; + } + 100% { + scale: 1; + } +} + +@keyframes show-drawer { + from { + opacity: 0; + scale: 0.8; + } + to { + opacity: 1; + scale: 1; + } +} + +@keyframes show-drawer-from-top { + from { + opacity: 0; + translate: 0 -100%; + } + to { + opacity: 1; + translate: 0 0; + } +} + +@keyframes show-drawer-from-end { + from { + opacity: 0; + translate: 100%; + } + to { + opacity: 1; + translate: 0 0; + } +} + +@keyframes show-drawer-from-bottom { + from { + opacity: 0; + translate: 0 100%; + } + to { + opacity: 1; + translate: 0 0; + } +} + +@keyframes show-drawer-from-start { + from { + opacity: 0; + translate: -100% 0; + } + to { + opacity: 1; + translate: 0 0; + } +} + +@keyframes show-backdrop { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@media (forced-colors: active) { + .drawer { + border: solid 1px white; + } +} diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts deleted file mode 100644 index 111089fdc..000000000 --- a/src/components/drawer/drawer.styles.ts +++ /dev/null @@ -1,284 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-color-surface-raised); - --box-shadow: var(--wa-shadow-l); - --size: 25rem; - --spacing: var(--wa-space-xl); - --show-duration: 200ms; - --hide-duration: 200ms; - - display: none; - } - - :host([open]) { - display: block; - } - - .drawer { - display: flex; - flex-direction: column; - top: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - overflow: hidden; - background-color: var(--background-color); - border: none; - box-shadow: var(--box-shadow); - overflow: auto; - padding: 0; - margin: 0; - animation-duration: var(--show-duration); - animation-timing-function: ease; - - &.show::backdrop { - animation: show-backdrop var(--show-duration, 200ms) ease; - } - - &.hide::backdrop { - animation: show-backdrop var(--hide-duration, 200ms) ease reverse; - } - - &.show.drawer--top { - animation: show-drawer-from-top var(--show-duration) ease; - } - - &.hide.drawer--top { - animation: show-drawer-from-top var(--hide-duration) ease reverse; - } - - &.show.drawer--end { - animation: show-drawer-from-end var(--show-duration) ease; - - &.drawer--rtl { - animation-name: show-drawer-from-start; - } - } - - &.hide.drawer--end { - animation: show-drawer-from-end var(--hide-duration) ease reverse; - - &.drawer--rtl { - animation-name: show-drawer-from-start; - } - } - - &.show.drawer--bottom { - animation: show-drawer-from-bottom var(--show-duration) ease; - } - - &.hide.drawer--bottom { - animation: show-drawer-from-bottom var(--hide-duration) ease reverse; - } - - &.show.drawer--start { - animation: show-drawer-from-start var(--show-duration) ease; - - &.drawer--rtl { - animation-name: show-drawer-from-end; - } - } - - &.hide.drawer--start { - animation: show-drawer-from-start var(--hide-duration) ease reverse; - - &.drawer--rtl { - animation-name: show-drawer-from-end; - } - } - - &.pulse { - animation: pulse 250ms ease; - } - } - - .drawer:focus { - outline: none; - } - - .drawer--top { - top: 0; - inset-inline-end: auto; - bottom: auto; - inset-inline-start: 0; - width: 100%; - height: var(--size); - } - - .drawer--end { - top: 0; - inset-inline-end: 0; - bottom: auto; - inset-inline-start: auto; - width: var(--size); - height: 100%; - } - - .drawer--bottom { - top: auto; - inset-inline-end: auto; - bottom: 0; - inset-inline-start: 0; - width: 100%; - height: var(--size); - } - - .drawer--start { - top: 0; - inset-inline-end: auto; - bottom: auto; - inset-inline-start: 0; - width: var(--size); - height: 100%; - } - - .drawer__header { - display: flex; - flex-wrap: nowrap; - padding: var(--spacing); - padding-block-end: 0; - } - - .drawer__title { - align-self: center; - flex: 1 1 auto; - font: inherit; - font-size: var(--wa-font-size-l); - font-weight: var(--wa-font-weight-heading); - line-height: var(--wa-line-height-condensed); - margin: 0; - } - - .drawer__header-actions { - align-self: start; - display: flex; - flex-shrink: 0; - flex-wrap: wrap; - justify-content: end; - gap: var(--wa-space-2xs); - padding-inline-start: var(--spacing); - } - - .drawer__header-actions wa-icon-button, - .drawer__header-actions ::slotted(wa-icon-button) { - flex: 0 0 auto; - display: flex; - align-items: center; - font-size: var(--wa-font-size-m); - } - - .drawer__body { - flex: 1 1 auto; - display: block; - padding: var(--spacing); - overflow: auto; - -webkit-overflow-scrolling: touch; - } - - .drawer__footer { - display: flex; - flex-wrap: wrap; - gap: var(--wa-space-xs); - justify-content: end; - padding: var(--spacing); - padding-block-start: 0; - } - - .drawer__footer ::slotted(wa-button:not(:last-of-type)) { - margin-inline-end: var(--wa-spacing-xs); - } - - .drawer::backdrop { - /* - NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can - remove the fallback values here. - */ - background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25)); - } - - @keyframes pulse { - 0% { - scale: 1; - } - 50% { - scale: 1.01; - } - 100% { - scale: 1; - } - } - - @keyframes show-drawer { - from { - opacity: 0; - scale: 0.8; - } - to { - opacity: 1; - scale: 1; - } - } - - @keyframes show-drawer-from-top { - from { - opacity: 0; - translate: 0 -100%; - } - to { - opacity: 1; - translate: 0 0; - } - } - - @keyframes show-drawer-from-end { - from { - opacity: 0; - translate: 100%; - } - to { - opacity: 1; - translate: 0 0; - } - } - - @keyframes show-drawer-from-bottom { - from { - opacity: 0; - translate: 0 100%; - } - to { - opacity: 1; - translate: 0 0; - } - } - - @keyframes show-drawer-from-start { - from { - opacity: 0; - translate: -100% 0; - } - to { - opacity: 1; - translate: 0 0; - } - } - - @keyframes show-backdrop { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - - @media (forced-colors: active) { - .drawer { - border: solid 1px white; - } - } -`; diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index 65ceba1f8..1ea662015 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -10,7 +10,7 @@ import { WaAfterShowEvent } from '../../events/after-show.js'; import { WaHideEvent } from '../../events/hide.js'; import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; -import styles from './drawer.styles.js'; +import styles from './drawer.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css new file mode 100644 index 000000000..f47fb4347 --- /dev/null +++ b/src/components/dropdown/dropdown.css @@ -0,0 +1,47 @@ +:host { + --box-shadow: var(--wa-shadow-m); + + display: inline-block; +} + +.dropdown::part(popup) { + z-index: 900; +} + +.dropdown[data-current-placement^='top']::part(popup) { + transform-origin: bottom; +} + +.dropdown[data-current-placement^='bottom']::part(popup) { + transform-origin: top; +} + +.dropdown[data-current-placement^='left']::part(popup) { + transform-origin: right; +} + +.dropdown[data-current-placement^='right']::part(popup) { + transform-origin: left; +} + +.dropdown__trigger { + display: block; +} + +.dropdown__panel { + font: inherit; + box-shadow: var(--box-shadow); + border-radius: var(--wa-border-radius-s); + pointer-events: none; +} + +.dropdown--open .dropdown__panel { + display: block; + pointer-events: all; +} + +/* When users slot a menu, make sure it conforms to the popup's auto-size */ +::slotted(wa-menu) { + max-width: var(--auto-size-available-width) !important; + max-height: var(--auto-size-available-height) !important; +} diff --git a/src/components/dropdown/dropdown.styles.ts b/src/components/dropdown/dropdown.styles.ts deleted file mode 100644 index 43f06b734..000000000 --- a/src/components/dropdown/dropdown.styles.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --box-shadow: var(--wa-shadow-m); - - display: inline-block; - } - - .dropdown::part(popup) { - z-index: 900; - } - - .dropdown[data-current-placement^='top']::part(popup) { - transform-origin: bottom; - } - - .dropdown[data-current-placement^='bottom']::part(popup) { - transform-origin: top; - } - - .dropdown[data-current-placement^='left']::part(popup) { - transform-origin: right; - } - - .dropdown[data-current-placement^='right']::part(popup) { - transform-origin: left; - } - - .dropdown__trigger { - display: block; - } - - .dropdown__panel { - font: inherit; - box-shadow: var(--box-shadow); - border-radius: var(--wa-border-radius-s); - pointer-events: none; - } - - .dropdown--open .dropdown__panel { - display: block; - pointer-events: all; - } - - /* When users slot a menu, make sure it conforms to the popup's auto-size */ - ::slotted(wa-menu) { - max-width: var(--auto-size-available-width) !important; - max-height: var(--auto-size-available-height) !important; - } -`; diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 00c78ab76..d9a714190 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -10,7 +10,7 @@ import { WaHideEvent } from '../../events/hide.js'; import { waitForEvent } from '../../internal/event.js'; import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; -import styles from './dropdown.styles.js'; +import styles from './dropdown.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { WaSelectEvent } from '../../events/select.js'; import type WaButton from '../button/button.js'; diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css new file mode 100644 index 000000000..31e865fae --- /dev/null +++ b/src/components/icon-button/icon-button.css @@ -0,0 +1,49 @@ +:host { + --background-color-hover: var(--wa-color-neutral-fill-quiet); + + display: inline-block; + color: var(--wa-color-text-quiet); +} + +.icon-button { + flex: 0 0 auto; + display: flex; + align-items: center; + background: none; + border: none; + border-radius: var(--wa-border-radius-s); + font-size: inherit; + color: inherit; + padding: var(--wa-space-xs); + cursor: pointer; + transition: color var(--wa-transition-fast) var(--wa-transition-easing); + -webkit-appearance: none; +} + +.icon-button:hover:not(.icon-button--disabled), +.icon-button:focus-visible:not(.icon-button--disabled) { + background-color: var(--wa-color-neutral-fill-quiet); + color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); +} + +.icon-button:active:not(.icon-button--disabled) { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); +} + +.icon-button:focus { + outline: none; +} + +.icon-button--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.icon-button:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.icon-button__icon { + pointer-events: none; +} diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts deleted file mode 100644 index 1212d8d9f..000000000 --- a/src/components/icon-button/icon-button.styles.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color-hover: var(--wa-color-neutral-fill-quiet); - - display: inline-block; - color: var(--wa-color-text-quiet); - } - - .icon-button { - flex: 0 0 auto; - display: flex; - align-items: center; - background: none; - border: none; - border-radius: var(--wa-border-radius-s); - font-size: inherit; - color: inherit; - padding: var(--wa-space-xs); - cursor: pointer; - transition: color var(--wa-transition-fast) var(--wa-transition-easing); - -webkit-appearance: none; - } - - .icon-button:hover:not(.icon-button--disabled), - .icon-button:focus-visible:not(.icon-button--disabled) { - background-color: var(--wa-color-neutral-fill-quiet); - color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); - } - - .icon-button:active:not(.icon-button--disabled) { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); - } - - .icon-button:focus { - outline: none; - } - - .icon-button--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .icon-button:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .icon-button__icon { - pointer-events: none; - } -`; diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index 7162a73a4..d6426af9f 100644 --- a/src/components/icon-button/icon-button.ts +++ b/src/components/icon-button/icon-button.ts @@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { WaBlurEvent } from '../../events/blur.js'; import { WaFocusEvent } from '../../events/focus.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import styles from './icon-button.styles.js'; +import styles from './icon-button.css'; /** * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css new file mode 100644 index 000000000..162fc6498 --- /dev/null +++ b/src/components/icon/icon.css @@ -0,0 +1,33 @@ +:host { + --primary-color: currentColor; + --primary-opacity: 1; + --secondary-color: currentColor; + --secondary-opacity: 0.4; + + display: inline-flex; + box-sizing: content-box !important; + width: auto; + height: 1em; +} + +svg { + display: inline-block; + width: auto; + height: 1em; + fill: currentColor; + + .fa-primary { + color: var(--primary-color); + opacity: var(--primary-opacity); + } + + .fa-secondary { + color: var(--secondary-color); + opacity: var(--secondary-opacity); + } +} + +:host([fixed-width]) { + width: 1em; + justify-content: center; +} diff --git a/src/components/icon/icon.styles.ts b/src/components/icon/icon.styles.ts deleted file mode 100644 index 4bb5e5db9..000000000 --- a/src/components/icon/icon.styles.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --primary-color: currentColor; - --primary-opacity: 1; - --secondary-color: currentColor; - --secondary-opacity: 0.4; - - display: inline-flex; - box-sizing: content-box !important; - width: auto; - height: 1em; - } - - svg { - display: inline-block; - width: auto; - height: 1em; - fill: currentColor; - - .fa-primary { - color: var(--primary-color); - opacity: var(--primary-opacity); - } - - .fa-secondary { - color: var(--secondary-color); - opacity: var(--secondary-opacity); - } - } - - :host([fixed-width]) { - width: 1em; - justify-content: center; - } -`; diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index 64a290b9c..249918086 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -5,7 +5,7 @@ import { isTemplateResult } from 'lit/directive-helpers.js'; import { WaErrorEvent } from '../../events/error.js'; import { WaLoadEvent } from '../../events/load.js'; import { watch } from '../../internal/watch.js'; -import styles from './icon.styles.js'; +import styles from './icon.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { HTMLTemplateResult, PropertyValues } from 'lit'; diff --git a/src/components/image-comparer/image-comparer.css b/src/components/image-comparer/image-comparer.css new file mode 100644 index 000000000..f65cce522 --- /dev/null +++ b/src/components/image-comparer/image-comparer.css @@ -0,0 +1,72 @@ +:host { + --divider-color: var(--wa-color-neutral-fill-quiet); + --divider-width: 0.125rem; + --handle-color: var(--wa-color-neutral-on-quiet); + --handle-size: 2.5rem; + + display: inline-block; + position: relative; +} + +.image-comparer { + max-width: 100%; + max-height: 100%; + overflow: hidden; +} + +.image-comparer__before, +.image-comparer__after { + display: block; + pointer-events: none; +} + +.image-comparer__before::slotted(img), +.image-comparer__after::slotted(img), +.image-comparer__before::slotted(svg), +.image-comparer__after::slotted(svg) { + display: block; + max-width: 100% !important; + height: auto; +} + +.image-comparer__after { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.image-comparer__divider { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + width: var(--divider-width); + height: 100%; + background-color: var(--divider-color); + translate: calc(var(--divider-width) / -2); + cursor: ew-resize; +} + +.image-comparer__handle { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: calc(50% - (var(--handle-size) / 2)); + width: var(--handle-size); + height: var(--handle-size); + background-color: var(--divider-color); + border-radius: var(--wa-border-radius-circle); + font-size: calc(var(--handle-size) * 0.4); + color: var(--handle-color); + cursor: inherit; + z-index: 10; +} + +.image-comparer__handle:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts deleted file mode 100644 index 05781f9ce..000000000 --- a/src/components/image-comparer/image-comparer.styles.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --divider-color: var(--wa-color-neutral-fill-quiet); - --divider-width: 0.125rem; - --handle-color: var(--wa-color-neutral-on-quiet); - --handle-size: 2.5rem; - - display: inline-block; - position: relative; - } - - .image-comparer { - max-width: 100%; - max-height: 100%; - overflow: hidden; - } - - .image-comparer__before, - .image-comparer__after { - display: block; - pointer-events: none; - } - - .image-comparer__before::slotted(img), - .image-comparer__after::slotted(img), - .image-comparer__before::slotted(svg), - .image-comparer__after::slotted(svg) { - display: block; - max-width: 100% !important; - height: auto; - } - - .image-comparer__after { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - } - - .image-comparer__divider { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - width: var(--divider-width); - height: 100%; - background-color: var(--divider-color); - translate: calc(var(--divider-width) / -2); - cursor: ew-resize; - } - - .image-comparer__handle { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: calc(50% - (var(--handle-size) / 2)); - width: var(--handle-size); - height: var(--handle-size); - background-color: var(--divider-color); - border-radius: var(--wa-border-radius-circle); - font-size: calc(var(--handle-size) * 0.4); - color: var(--handle-color); - cursor: inherit; - z-index: 10; - } - - .image-comparer__handle:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } -`; diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts index f2f7c8186..61b6ada79 100644 --- a/src/components/image-comparer/image-comparer.ts +++ b/src/components/image-comparer/image-comparer.ts @@ -8,7 +8,7 @@ import { LocalizeController } from '../../utilities/localize.js'; import { styleMap } from 'lit/directives/style-map.js'; import { WaChangeEvent } from '../../events/change.js'; import { watch } from '../../internal/watch.js'; -import styles from './image-comparer.styles.js'; +import styles from './image-comparer.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/include/include.css b/src/components/include/include.css new file mode 100644 index 000000000..5d4e87f30 --- /dev/null +++ b/src/components/include/include.css @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/components/include/include.styles.ts b/src/components/include/include.styles.ts deleted file mode 100644 index 940a1557b..000000000 --- a/src/components/include/include.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: block; - } -`; diff --git a/src/components/include/include.ts b/src/components/include/include.ts index cf984cfa9..493eb9172 100644 --- a/src/components/include/include.ts +++ b/src/components/include/include.ts @@ -4,7 +4,7 @@ import { requestInclude } from './request.js'; import { WaIncludeErrorEvent } from '../../events/include-error.js'; import { WaLoadEvent } from '../../events/load.js'; import { watch } from '../../internal/watch.js'; -import styles from './include.styles.js'; +import styles from './include.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/input/input.css b/src/components/input/input.css new file mode 100644 index 000000000..4ec5e478c --- /dev/null +++ b/src/components/input/input.css @@ -0,0 +1,262 @@ +:host { + --background-color: var(--wa-form-control-background-color); + --border-color: var(--wa-form-control-resting-color); + --border-radius: var(--wa-form-control-border-radius); + --border-style: var(--wa-form-control-border-style); + --border-width: var(--wa-form-control-border-width); + --box-shadow: initial; + + display: block; +} + +:host([filled]) { + --background-color: var(--wa-color-neutral-fill-quiet); + --border-color: var(--background-color); +} + +.input { + background-color: var(--background-color); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + box-shadow: var(--box-shadow); + flex: 1 1 auto; + display: inline-flex; + align-items: stretch; + justify-content: start; + position: relative; + width: 100%; + font: inherit; + vertical-align: middle; + overflow: hidden; + cursor: text; + transition: + background var(--wa-transition-normal) var(--wa-transition-easing), + border var(--wa-transition-normal) var(--wa-transition-easing), + outline var(--wa-transition-fast) var(--wa-transition-easing); +} + +/* Standard inputs */ +.input--standard.input--focused:not(.input--disabled) { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); + border-color: var(--wa-form-control-activated-color); +} + +.input--standard.input--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Filled inputs */ +.input--filled.input--focused:not(.input--disabled) { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.input--filled.input--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.input__control { + flex: 1 1 auto; + min-width: 0; + height: 100%; + font: inherit; + line-height: var(--wa-form-control-value-line-height); + color: var(--wa-form-control-value-color); + border: none; + /* prettier-ignore */ + background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */ + box-shadow: none; + padding: 0; + margin: 0; + cursor: inherit; + -webkit-appearance: none; +} + +.input__control::-webkit-search-decoration, +.input__control::-webkit-search-cancel-button, +.input__control::-webkit-search-results-button, +.input__control::-webkit-search-results-decoration { + -webkit-appearance: none; +} + +.input__control:-webkit-autofill, +.input__control:-webkit-autofill:hover, +.input__control:-webkit-autofill:focus, +.input__control:-webkit-autofill:active { + box-shadow: none; + -webkit-text-fill-color: var(--wa-color-brand-on-normal); + caret-color: var(--wa-form-control-value-color); +} + +.input--filled .input__control:-webkit-autofill, +.input--filled .input__control:-webkit-autofill:hover, +.input--filled .input__control:-webkit-autofill:focus, +.input--filled .input__control:-webkit-autofill:active { + box-shadow: none; +} + +.input__control::placeholder { + color: var(--wa-form-control-placeholder-color); + user-select: none; + -webkit-user-select: none; +} + +.input__control:focus { + outline: none; +} + +.input__prefix, +.input__suffix { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + cursor: default; +} + +.input__prefix ::slotted(wa-icon), +.input__suffix ::slotted(wa-icon) { + color: var(--wa-color-neutral-on-quiet); +} + +/* + * Size modifiers + */ + +.input--small { + font-size: var(--wa-font-size-s); + height: var(--wa-form-control-height-s); +} + +.input--small .input__control { + height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2); + padding: 0 var(--wa-space-s); +} + +.input--small .input__clear, +.input--small .input__password-toggle { + width: calc(1em + var(--wa-space-s) * 2); +} + +.input--small .input__prefix ::slotted(*) { + margin-inline-start: var(--wa-space-s); +} + +.input--small .input__suffix ::slotted(*) { + margin-inline-end: var(--wa-space-s); +} + +.input--medium { + font-size: var(--wa-font-size-m); + height: var(--wa-form-control-height-m); +} + +.input--medium .input__control { + height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2); + padding: 0 var(--wa-space-m); +} + +.input--medium .input__clear, +.input--medium .input__password-toggle { + width: calc(1em + var(--wa-space-m) * 2); +} + +.input--medium .input__prefix ::slotted(*) { + margin-inline-start: var(--wa-space-m); +} + +.input--medium .input__suffix ::slotted(*) { + margin-inline-end: var(--wa-space-m); +} + +.input--large { + font-size: var(--wa-font-size-l); + height: var(--wa-form-control-height-l); +} + +.input--large .input__control { + height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2); + padding: 0 var(--wa-space-l); +} + +.input--large .input__clear, +.input--large .input__password-toggle { + width: calc(1em + var(--wa-space-l) * 2); +} + +.input--large .input__prefix ::slotted(*) { + margin-inline-start: var(--wa-space-l); +} + +.input--large .input__suffix ::slotted(*) { + margin-inline-end: var(--wa-space-l); +} + +/* + * Pill modifier + */ + +.input--pill.input--small { + border-radius: var(--wa-border-radius-pill); +} + +.input--pill.input--medium { + border-radius: var(--wa-border-radius-pill); +} + +.input--pill.input--large { + border-radius: var(--wa-border-radius-pill); +} + +/* + * Clearable + Password Toggle + */ + +.input__clear, +.input__password-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: inherit; + color: var(--wa-color-neutral-on-quiet); + border: none; + background: none; + padding: 0; + transition: var(--wa-transition-normal) color; + cursor: pointer; +} + +.input__clear:hover, +.input__password-toggle:hover { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); +} + +.input__clear:active, +.input__password-toggle:active { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); +} + +.input__clear:focus, +.input__password-toggle:focus { + outline: none; +} + +/* Don't show the browser's password toggle in Edge */ +::-ms-reveal { + display: none; +} + +/* Hide the built-in number spinner */ +.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button, +.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; +} + +.input--no-spin-buttons input[type='number'] { + -moz-appearance: textfield; +} diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts deleted file mode 100644 index 3ee5dac09..000000000 --- a/src/components/input/input.styles.ts +++ /dev/null @@ -1,266 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-form-control-background-color); - --border-color: var(--wa-form-control-resting-color); - --border-radius: var(--wa-form-control-border-radius); - --border-style: var(--wa-form-control-border-style); - --border-width: var(--wa-form-control-border-width); - --box-shadow: initial; - - display: block; - } - - :host([filled]) { - --background-color: var(--wa-color-neutral-fill-quiet); - --border-color: var(--background-color); - } - - .input { - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - box-shadow: var(--box-shadow); - flex: 1 1 auto; - display: inline-flex; - align-items: stretch; - justify-content: start; - position: relative; - width: 100%; - font: inherit; - vertical-align: middle; - overflow: hidden; - cursor: text; - transition: - background var(--wa-transition-normal) var(--wa-transition-easing), - border var(--wa-transition-normal) var(--wa-transition-easing), - outline var(--wa-transition-fast) var(--wa-transition-easing); - } - - /* Standard inputs */ - .input--standard.input--focused:not(.input--disabled) { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - border-color: var(--wa-form-control-activated-color); - } - - .input--standard.input--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - /* Filled inputs */ - .input--filled.input--focused:not(.input--disabled) { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .input--filled.input--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .input__control { - flex: 1 1 auto; - min-width: 0; - height: 100%; - font: inherit; - line-height: var(--wa-form-control-value-line-height); - color: var(--wa-form-control-value-color); - border: none; - /* prettier-ignore */ - background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */ - box-shadow: none; - padding: 0; - margin: 0; - cursor: inherit; - -webkit-appearance: none; - } - - .input__control::-webkit-search-decoration, - .input__control::-webkit-search-cancel-button, - .input__control::-webkit-search-results-button, - .input__control::-webkit-search-results-decoration { - -webkit-appearance: none; - } - - .input__control:-webkit-autofill, - .input__control:-webkit-autofill:hover, - .input__control:-webkit-autofill:focus, - .input__control:-webkit-autofill:active { - box-shadow: none; - -webkit-text-fill-color: var(--wa-color-brand-on-normal); - caret-color: var(--wa-form-control-value-color); - } - - .input--filled .input__control:-webkit-autofill, - .input--filled .input__control:-webkit-autofill:hover, - .input--filled .input__control:-webkit-autofill:focus, - .input--filled .input__control:-webkit-autofill:active { - box-shadow: none; - } - - .input__control::placeholder { - color: var(--wa-form-control-placeholder-color); - user-select: none; - -webkit-user-select: none; - } - - .input__control:focus { - outline: none; - } - - .input__prefix, - .input__suffix { - display: inline-flex; - flex: 0 0 auto; - align-items: center; - cursor: default; - } - - .input__prefix ::slotted(wa-icon), - .input__suffix ::slotted(wa-icon) { - color: var(--wa-color-neutral-on-quiet); - } - - /* - * Size modifiers - */ - - .input--small { - font-size: var(--wa-font-size-s); - height: var(--wa-form-control-height-s); - } - - .input--small .input__control { - height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2); - padding: 0 var(--wa-space-s); - } - - .input--small .input__clear, - .input--small .input__password-toggle { - width: calc(1em + var(--wa-space-s) * 2); - } - - .input--small .input__prefix ::slotted(*) { - margin-inline-start: var(--wa-space-s); - } - - .input--small .input__suffix ::slotted(*) { - margin-inline-end: var(--wa-space-s); - } - - .input--medium { - font-size: var(--wa-font-size-m); - height: var(--wa-form-control-height-m); - } - - .input--medium .input__control { - height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2); - padding: 0 var(--wa-space-m); - } - - .input--medium .input__clear, - .input--medium .input__password-toggle { - width: calc(1em + var(--wa-space-m) * 2); - } - - .input--medium .input__prefix ::slotted(*) { - margin-inline-start: var(--wa-space-m); - } - - .input--medium .input__suffix ::slotted(*) { - margin-inline-end: var(--wa-space-m); - } - - .input--large { - font-size: var(--wa-font-size-l); - height: var(--wa-form-control-height-l); - } - - .input--large .input__control { - height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2); - padding: 0 var(--wa-space-l); - } - - .input--large .input__clear, - .input--large .input__password-toggle { - width: calc(1em + var(--wa-space-l) * 2); - } - - .input--large .input__prefix ::slotted(*) { - margin-inline-start: var(--wa-space-l); - } - - .input--large .input__suffix ::slotted(*) { - margin-inline-end: var(--wa-space-l); - } - - /* - * Pill modifier - */ - - .input--pill.input--small { - border-radius: var(--wa-border-radius-pill); - } - - .input--pill.input--medium { - border-radius: var(--wa-border-radius-pill); - } - - .input--pill.input--large { - border-radius: var(--wa-border-radius-pill); - } - - /* - * Clearable + Password Toggle - */ - - .input__clear, - .input__password-toggle { - display: inline-flex; - align-items: center; - justify-content: center; - font-size: inherit; - color: var(--wa-color-neutral-on-quiet); - border: none; - background: none; - padding: 0; - transition: var(--wa-transition-normal) color; - cursor: pointer; - } - - .input__clear:hover, - .input__password-toggle:hover { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); - } - - .input__clear:active, - .input__password-toggle:active { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); - } - - .input__clear:focus, - .input__password-toggle:focus { - outline: none; - } - - /* Don't show the browser's password toggle in Edge */ - ::-ms-reveal { - display: none; - } - - /* Hide the built-in number spinner */ - .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button, - .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button { - -webkit-appearance: none; - display: none; - } - - .input--no-spin-buttons input[type='number'] { - -moz-appearance: textfield; - } -`; diff --git a/src/components/input/input.ts b/src/components/input/input.ts index fed1d0e37..ed93412ae 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -15,7 +15,7 @@ import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import formControlStyles from '../../styles/form-control.styles.js'; -import styles from './input.styles.js'; +import styles from './input.css'; import type WaButton from '../button/button.js'; /** diff --git a/src/components/menu-item/menu-item.css b/src/components/menu-item/menu-item.css new file mode 100644 index 000000000..fe3996db9 --- /dev/null +++ b/src/components/menu-item/menu-item.css @@ -0,0 +1,152 @@ +:host { + --background-color-hover: var(--wa-color-neutral-fill-normal); + --label-color-hover: var(--wa-color-neutral-on-normal); + --submenu-offset: -0.125rem; + + display: block; + color: var(--wa-color-text-normal); +} + +:host([inert]) { + display: none; +} + +.menu-item { + position: relative; + display: flex; + align-items: stretch; + font: inherit; + padding: var(--wa-space-xs) var(--wa-space-2xs); + line-height: var(--wa-line-height-condensed); + transition: fill var(--wa-transition-normal) var(--wa-transition-easing); + user-select: none; + -webkit-user-select: none; + white-space: nowrap; + cursor: pointer; +} + +.menu-item.menu-item--disabled { + outline: none; + opacity: 0.5; + cursor: not-allowed; +} + +.menu-item.menu-item--loading { + outline: none; + cursor: wait; +} + +.menu-item.menu-item--loading *:not(wa-spinner) { + opacity: 0.5; +} + +.menu-item--loading wa-spinner { + --indicator-color: currentColor; + --track-width: 0.0625rem; + position: absolute; + font-size: 0.8em; + top: calc(50% - 0.5em); + left: 0.5rem; + opacity: 1; +} + +.menu-item .menu-item__label { + flex: 1 1 auto; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; +} + +.menu-item .menu-item__prefix { + flex: 0 0 auto; + display: flex; + align-items: center; +} + +.menu-item .menu-item__prefix::slotted(*) { + margin-inline-end: var(--wa-space-xs); +} + +.menu-item .menu-item__suffix { + flex: 0 0 auto; + display: flex; + align-items: center; +} + +.menu-item .menu-item__suffix::slotted(*) { + margin-inline-start: var(--wa-space-xs); +} + +/* Safe triangle */ +.menu-item--submenu-expanded::after { + content: ''; + position: fixed; + z-index: 899; + top: 0; + right: 0; + bottom: 0; + left: 0; + clip-path: polygon( + var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), + var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), + var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0) + ); +} + +:host(:focus-visible) { + outline: none; +} + +:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item, +.menu-item--submenu-expanded { + background-color: var(--background-color-hover); + color: var(--label-color-hover); +} + +:host(:focus-visible) .menu-item { + outline: var(--wa-focus-ring); + outline-offset: calc(-1 * var(--wa-focus-ring-width)); + background: var(--background-color-hover); + color: var(--label-color-hover); + opacity: 1; +} + +.menu-item .menu-item__check, +.menu-item .menu-item__chevron { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.875em; + width: var(--wa-space-xl); + visibility: hidden; +} + +.menu-item--checked .menu-item__check, +.menu-item--has-submenu .menu-item__chevron { + visibility: visible; +} + +/* Add elevation and z-index to submenus */ +wa-popup::part(popup) { + box-shadow: var(--wa-shadow-m); + z-index: 900; + margin-left: var(--submenu-offset); +} + +.menu-item--rtl wa-popup::part(popup) { + margin-left: calc(-1 * var(--submenu-offset)); +} + +@media (forced-colors: active) { + :host(:hover:not([aria-disabled='true'])) .menu-item, + :host(:focus-visible) .menu-item { + outline: dashed 1px SelectedItem; + outline-offset: -1px; + } +} + +::slotted(wa-menu) { + max-width: var(--auto-size-available-width) !important; + max-height: var(--auto-size-available-height) !important; +} diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts deleted file mode 100644 index 1a6ba59bd..000000000 --- a/src/components/menu-item/menu-item.styles.ts +++ /dev/null @@ -1,156 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color-hover: var(--wa-color-neutral-fill-normal); - --label-color-hover: var(--wa-color-neutral-on-normal); - --submenu-offset: -0.125rem; - - display: block; - color: var(--wa-color-text-normal); - } - - :host([inert]) { - display: none; - } - - .menu-item { - position: relative; - display: flex; - align-items: stretch; - font: inherit; - padding: var(--wa-space-xs) var(--wa-space-2xs); - line-height: var(--wa-line-height-condensed); - transition: fill var(--wa-transition-normal) var(--wa-transition-easing); - user-select: none; - -webkit-user-select: none; - white-space: nowrap; - cursor: pointer; - } - - .menu-item.menu-item--disabled { - outline: none; - opacity: 0.5; - cursor: not-allowed; - } - - .menu-item.menu-item--loading { - outline: none; - cursor: wait; - } - - .menu-item.menu-item--loading *:not(wa-spinner) { - opacity: 0.5; - } - - .menu-item--loading wa-spinner { - --indicator-color: currentColor; - --track-width: 0.0625rem; - position: absolute; - font-size: 0.8em; - top: calc(50% - 0.5em); - left: 0.5rem; - opacity: 1; - } - - .menu-item .menu-item__label { - flex: 1 1 auto; - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - } - - .menu-item .menu-item__prefix { - flex: 0 0 auto; - display: flex; - align-items: center; - } - - .menu-item .menu-item__prefix::slotted(*) { - margin-inline-end: var(--wa-space-xs); - } - - .menu-item .menu-item__suffix { - flex: 0 0 auto; - display: flex; - align-items: center; - } - - .menu-item .menu-item__suffix::slotted(*) { - margin-inline-start: var(--wa-space-xs); - } - - /* Safe triangle */ - .menu-item--submenu-expanded::after { - content: ''; - position: fixed; - z-index: 899; - top: 0; - right: 0; - bottom: 0; - left: 0; - clip-path: polygon( - var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), - var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), - var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0) - ); - } - - :host(:focus-visible) { - outline: none; - } - - :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item, - .menu-item--submenu-expanded { - background-color: var(--background-color-hover); - color: var(--label-color-hover); - } - - :host(:focus-visible) .menu-item { - outline: var(--wa-focus-ring); - outline-offset: calc(-1 * var(--wa-focus-ring-width)); - background: var(--background-color-hover); - color: var(--label-color-hover); - opacity: 1; - } - - .menu-item .menu-item__check, - .menu-item .menu-item__chevron { - flex: 0 0 auto; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.875em; - width: var(--wa-space-xl); - visibility: hidden; - } - - .menu-item--checked .menu-item__check, - .menu-item--has-submenu .menu-item__chevron { - visibility: visible; - } - - /* Add elevation and z-index to submenus */ - wa-popup::part(popup) { - box-shadow: var(--wa-shadow-m); - z-index: 900; - margin-left: var(--submenu-offset); - } - - .menu-item--rtl wa-popup::part(popup) { - margin-left: calc(-1 * var(--submenu-offset)); - } - - @media (forced-colors: active) { - :host(:hover:not([aria-disabled='true'])) .menu-item, - :host(:focus-visible) .menu-item { - outline: dashed 1px SelectedItem; - outline-offset: -1px; - } - } - - ::slotted(wa-menu) { - max-width: var(--auto-size-available-width) !important; - max-height: var(--auto-size-available-height) !important; - } -`; diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 269b41dfe..be1549c60 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -8,7 +8,7 @@ import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { SubmenuController } from './submenu-controller.js'; import { watch } from '../../internal/watch.js'; -import styles from './menu-item.styles.js'; +import styles from './menu-item.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { PropertyValues } from 'lit'; diff --git a/src/components/menu-label/menu-label.css b/src/components/menu-label/menu-label.css new file mode 100644 index 000000000..fc1773dfc --- /dev/null +++ b/src/components/menu-label/menu-label.css @@ -0,0 +1,14 @@ +:host { + display: block; + color: var(--wa-color-text-quiet); + font-size: var(--wa-font-size-s); + font-weight: var(--wa-font-weight-semibold); +} + +.menu-label { + display: inline-block; + font: inherit; + padding: var(--wa-space-2xs) calc(var(--wa-space-2xs) + var(--wa-space-xl)); + user-select: none; + -webkit-user-select: none; +} diff --git a/src/components/menu-label/menu-label.styles.ts b/src/components/menu-label/menu-label.styles.ts deleted file mode 100644 index 2edf5ebeb..000000000 --- a/src/components/menu-label/menu-label.styles.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: block; - color: var(--wa-color-text-quiet); - font-size: var(--wa-font-size-s); - font-weight: var(--wa-font-weight-semibold); - } - - .menu-label { - display: inline-block; - font: inherit; - padding: var(--wa-space-2xs) calc(var(--wa-space-2xs) + var(--wa-space-xl)); - user-select: none; - -webkit-user-select: none; - } -`; diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts index 4f6fdd892..8eeeff2ba 100644 --- a/src/components/menu-label/menu-label.ts +++ b/src/components/menu-label/menu-label.ts @@ -1,6 +1,6 @@ import { customElement } from 'lit/decorators.js'; import { html } from 'lit'; -import styles from './menu-label.styles.js'; +import styles from './menu-label.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css new file mode 100644 index 000000000..f19873426 --- /dev/null +++ b/src/components/menu/menu.css @@ -0,0 +1,15 @@ +:host { + display: block; + position: relative; + text-align: start; + background-color: var(--wa-color-surface-raised); + border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border); + border-radius: var(--wa-border-radius-s); + padding: var(--wa-space-xs) 0; + overflow: auto; + overscroll-behavior: none; +} + +::slotted(wa-divider) { + --spacing: var(--wa-space-xs); +} diff --git a/src/components/menu/menu.styles.ts b/src/components/menu/menu.styles.ts deleted file mode 100644 index 6931773cd..000000000 --- a/src/components/menu/menu.styles.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: block; - position: relative; - text-align: start; - background-color: var(--wa-color-surface-raised); - border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border); - border-radius: var(--wa-border-radius-s); - padding: var(--wa-space-xs) 0; - overflow: auto; - overscroll-behavior: none; - } - - ::slotted(wa-divider) { - --spacing: var(--wa-space-xs); - } -`; diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 9219d82a6..1e2a567f7 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -2,7 +2,7 @@ import '../menu-item/menu-item.js'; import { customElement, query } from 'lit/decorators.js'; import { html } from 'lit'; import { WaSelectEvent } from '../../events/select.js'; -import styles from './menu.styles.js'; +import styles from './menu.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type WaMenuItem from '../menu-item/menu-item.js'; diff --git a/src/components/mutation-observer/mutation-observer.css b/src/components/mutation-observer/mutation-observer.css new file mode 100644 index 000000000..92d692cdd --- /dev/null +++ b/src/components/mutation-observer/mutation-observer.css @@ -0,0 +1,3 @@ +:host { + display: contents; +} diff --git a/src/components/mutation-observer/mutation-observer.styles.ts b/src/components/mutation-observer/mutation-observer.styles.ts deleted file mode 100644 index 1ef4bf6f3..000000000 --- a/src/components/mutation-observer/mutation-observer.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: contents; - } -`; diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts index 5998e576e..05a04aa7d 100644 --- a/src/components/mutation-observer/mutation-observer.ts +++ b/src/components/mutation-observer/mutation-observer.ts @@ -2,7 +2,7 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; import { WaMutationEvent } from '../../events/mutation.js'; import { watch } from '../../internal/watch.js'; -import styles from './mutation-observer.styles.js'; +import styles from './mutation-observer.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/option/option.css b/src/components/option/option.css new file mode 100644 index 000000000..cced8cdc4 --- /dev/null +++ b/src/components/option/option.css @@ -0,0 +1,85 @@ +:host { + --background-color-current: var(--wa-color-brand-fill-loud); + --background-color-hover: var(--wa-color-neutral-fill-normal); + --label-color-current: var(--wa-color-brand-on-loud); + --label-color-hover: var(--wa-color-neutral-on-normal); + + display: block; + color: var(--wa-color-text-normal); + -webkit-user-select: none; + user-select: none; +} + +:host(:focus) { + outline: none; +} + +.option { + position: relative; + display: flex; + align-items: center; + font: inherit; + padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs); + line-height: var(--wa-line-height-condensed); + transition: fill var(--wa-transition-normal) var(--wa-transition-easing); + cursor: pointer; +} + +.option--hover:not(.option--current):not(.option--disabled) { + background-color: var(--background-color-hover); + color: var(--label-color-hover); +} + +.option--current, +.option--current.option--disabled { + background-color: var(--background-color-current); + color: var(--label-color-current); + opacity: 1; +} + +.option--disabled { + outline: none; + opacity: 0.5; + cursor: not-allowed; +} + +.option__label { + flex: 1 1 auto; + display: inline-block; +} + +.option .option__check { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.875em; + visibility: hidden; + width: var(--wa-space-xl); +} + +.option--selected .option__check { + visibility: visible; +} + +.option__prefix, +.option__suffix { + flex: 0 0 auto; + display: flex; + align-items: center; +} + +.option__prefix::slotted(*) { + margin-inline-end: var(--wa-space-xs); +} + +.option__suffix::slotted(*) { + margin-inline-start: var(--wa-space-xs); +} + +@media (forced-colors: active) { + :host(:hover:not([aria-disabled='true'])) .option { + outline: dashed 1px SelectedItem; + outline-offset: -1px; + } +} diff --git a/src/components/option/option.styles.ts b/src/components/option/option.styles.ts deleted file mode 100644 index 8fb964e01..000000000 --- a/src/components/option/option.styles.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color-current: var(--wa-color-brand-fill-loud); - --background-color-hover: var(--wa-color-neutral-fill-normal); - --label-color-current: var(--wa-color-brand-on-loud); - --label-color-hover: var(--wa-color-neutral-on-normal); - - display: block; - color: var(--wa-color-text-normal); - -webkit-user-select: none; - user-select: none; - } - - :host(:focus) { - outline: none; - } - - .option { - position: relative; - display: flex; - align-items: center; - font: inherit; - padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs); - line-height: var(--wa-line-height-condensed); - transition: fill var(--wa-transition-normal) var(--wa-transition-easing); - cursor: pointer; - } - - .option--hover:not(.option--current):not(.option--disabled) { - background-color: var(--background-color-hover); - color: var(--label-color-hover); - } - - .option--current, - .option--current.option--disabled { - background-color: var(--background-color-current); - color: var(--label-color-current); - opacity: 1; - } - - .option--disabled { - outline: none; - opacity: 0.5; - cursor: not-allowed; - } - - .option__label { - flex: 1 1 auto; - display: inline-block; - } - - .option .option__check { - flex: 0 0 auto; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.875em; - visibility: hidden; - width: var(--wa-space-xl); - } - - .option--selected .option__check { - visibility: visible; - } - - .option__prefix, - .option__suffix { - flex: 0 0 auto; - display: flex; - align-items: center; - } - - .option__prefix::slotted(*) { - margin-inline-end: var(--wa-space-xs); - } - - .option__suffix::slotted(*) { - margin-inline-start: var(--wa-space-xs); - } - - @media (forced-colors: active) { - :host(:hover:not([aria-disabled='true'])) .option { - outline: dashed 1px SelectedItem; - outline-offset: -1px; - } - } -`; diff --git a/src/components/option/option.ts b/src/components/option/option.ts index 46789e8a3..0e4b6e9a1 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -4,7 +4,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { watch } from '../../internal/watch.js'; -import styles from './option.styles.js'; +import styles from './option.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/page/page.css b/src/components/page/page.css new file mode 100644 index 000000000..d53ffd1e2 --- /dev/null +++ b/src/components/page/page.css @@ -0,0 +1,258 @@ +:host { + display: block; + background-color: var(--wa-color-surface-default); + box-sizing: border-box; + height: 100%; + --menu-width: auto; + --main-width: 1fr; + --aside-width: auto; + --banner-height: 0px; + --header-height: 0px; + --subheader-height: 0px; + --scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px)); +} + +slot[name]:not([name='skip-to-content'], [name='navigation-toggle'])::slotted(*) { + display: flex; + background-color: var(--wa-color-surface-default); +} + +::slotted([slot='banner']) { + align-items: center; + justify-content: center; + gap: var(--wa-space-m); + padding: var(--wa-space-xs) var(--wa-space-m); +} + +::slotted([slot='header']) { + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--wa-space-m); + padding: var(--wa-space-m); + flex: auto; +} + +::slotted([slot='subheader']) { + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--wa-space-m); + padding: var(--wa-space-xs) var(--wa-space-m); +} + +::slotted([slot*='navigation']), +::slotted([slot='menu']), +::slotted([slot='aside']) { + flex-direction: column; + gap: var(--wa-space-m); + padding: var(--wa-space-m); +} + +::slotted([slot='main-header']) { + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--wa-space-m); + padding: var(--wa-space-m) var(--wa-space-3xl); +} + +::slotted(:not([slot])) { + padding: var(--wa-space-3xl); +} + +::slotted([slot='main-footer']), +::slotted([slot='footer']) { + align-items: start; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--wa-space-m); + padding: var(--wa-space-3xl); +} + +:host([disable-sticky~='banner']) :is([part~='header'], [part~='subheader']) { + --banner-height: 0px !important; +} +:host([disable-sticky~='header']) [part~='subheader'] { + --header-height: 0px !important; +} + +/* Nothing else depends on subheader-height. */ +:host([disable-sticky~='subheader']) { +} +:host([disable-sticky~='aside']) [part~='aside'], +:host([disable-sticky~='menu']) [part~='menu'] { + height: unset; + max-height: unset; +} + +:host([disable-sticky~='banner']) [part~='banner'], +:host([disable-sticky~='header']) [part~='header'], +:host([disable-sticky~='subheader']) [part~='subheader'], +:host([disable-sticky~='aside']) [part~='aside'], +:host([disable-sticky~='menu']) [part~='menu'] { + position: static; + overflow: unset; +} + +:host([disable-sticky~='aside']) [part~='aside'], +:host([disable-sticky~='menu']) [part~='menu'] { + height: auto; + max-height: auto; +} + +[part~='base'] { + min-height: 100%; + display: grid; + grid-template-rows: repeat(3, minmax(0, auto)) minmax(0, 1fr) minmax(0, auto); + grid-template-columns: 100%; + width: 100%; + grid-template-areas: + 'banner' + 'header' + 'subheader' + 'body' + 'footer'; +} + +/* Grid areas */ +[part~='banner'] { + grid-area: banner; +} +[part~='header'] { + grid-area: header; +} +[part~='subheader'] { + grid-area: subheader; +} +[part~='menu'] { + grid-area: menu; +} +[part~='body'] { + grid-area: body; +} +[part~='main'] { + grid-area: main; +} +[part~='aside'] { + grid-area: aside; +} +[part~='footer'] { + grid-area: footer; +} + +/* Z-indexes */ +[part~='banner'], +[part~='header'], +[part~='subheader'] { + position: sticky; + z-index: 5; +} +[part~='banner'] { + top: 0px; +} +[part~='header'] { + top: var(--banner-height); + + /** Make the header flex so that you don't unexpectedly have the default toggle button appearing above a slotted div because block elements are fun. */ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +[part~='subheader'] { + top: calc(var(--header-height) + var(--banner-height)); +} +[part~='body'] { + display: grid; + height: 100%; + align-items: flex-start; + grid-template-columns: minmax(0, var(--menu-width)) minmax(0, var(--main-width)) minmax(0, var(--aside-width)); + grid-template-rows: minmax(0, 1fr); + grid-template-areas: 'menu main aside'; +} +[part~='main'] { + display: grid; + min-height: 100%; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); + grid-template-areas: + 'main-header' + 'main-content' + 'main-footer'; +} +[part~='main-header'] { + grid-area: main-header; +} +[part~='main-content'] { + grid-area: main-content; +} +[part~='main-footer'] { + grid-area: main-footer; +} + +/* Visually hidden */ +.skip-to-content:not(:focus-within) { + position: absolute !important; + width: 1px !important; + height: 1px !important; + clip: rect(0 0 0 0) !important; + clip-path: inset(50%) !important; + border: none !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; +} + +.skip-to-content { + position: absolute; + top: var(--wa-space-m); + left: var(--wa-space-m); + z-index: 6; + border-radius: var(--wa-corners-1x); + background-color: var(--wa-color-surface-default); + color: var(--wa-color-text-link); + text-decoration: none; + padding: var(--wa-space-s) var(--wa-space-m); + box-shadow: var(--wa-shadow-l); + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +[part~='menu'], +[part~='aside'] { + position: sticky; + top: calc(var(--banner-height) + var(--header-height) + var(--subheader-height)); + z-index: 4; + height: calc(100dvh - var(--header-height) - var(--banner-height) - var(--subheader-height)); + max-height: calc(100dvh - var(--header-height) - var(--banner-height) - var(--subheader-height)); + overflow: auto; +} + +[part~='navigation'] { + height: 100%; + display: grid; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); +} + +[part~='drawer']::part(dialog) { + background-color: var(--wa-color-surface-default); +} + +/* Set these on the slot because we don't always control the navigation-toggle since that may be slotted. */ +slot[name~='navigation-toggle'], +:host([disable-navigation-toggle]) slot[name~='navigation-toggle'] { + display: none; +} + +/* Sometimes the media query in the viewport is stubborn in iframes. This is an extra check to make it behave properly. */ +:host(:not([disable-navigation-toggle])[view='mobile']) slot[name~='navigation-toggle'] { + display: contents; +} + +[part~='navigation-toggle'] { + /* Use only a margin-inline-start because the slotted header is expected to have default padding + so it looks really awkward if this sets a margin-inline-end and the slotted header has a padding-inline-start. */ + margin-inline-start: var(--wa-space-m); +} diff --git a/src/components/page/page.styles.ts b/src/components/page/page.styles.ts deleted file mode 100644 index 01799fb42..000000000 --- a/src/components/page/page.styles.ts +++ /dev/null @@ -1,262 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: block; - background-color: var(--wa-color-surface-default); - box-sizing: border-box; - height: 100%; - --menu-width: auto; - --main-width: 1fr; - --aside-width: auto; - --banner-height: 0px; - --header-height: 0px; - --subheader-height: 0px; - --scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px)); - } - - slot[name]:not([name='skip-to-content'], [name='navigation-toggle'])::slotted(*) { - display: flex; - background-color: var(--wa-color-surface-default); - } - - ::slotted([slot='banner']) { - align-items: center; - justify-content: center; - gap: var(--wa-space-m); - padding: var(--wa-space-xs) var(--wa-space-m); - } - - ::slotted([slot='header']) { - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - gap: var(--wa-space-m); - padding: var(--wa-space-m); - flex: auto; - } - - ::slotted([slot='subheader']) { - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - gap: var(--wa-space-m); - padding: var(--wa-space-xs) var(--wa-space-m); - } - - ::slotted([slot*='navigation']), - ::slotted([slot='menu']), - ::slotted([slot='aside']) { - flex-direction: column; - gap: var(--wa-space-m); - padding: var(--wa-space-m); - } - - ::slotted([slot='main-header']) { - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - gap: var(--wa-space-m); - padding: var(--wa-space-m) var(--wa-space-3xl); - } - - ::slotted(:not([slot])) { - padding: var(--wa-space-3xl); - } - - ::slotted([slot='main-footer']), - ::slotted([slot='footer']) { - align-items: start; - justify-content: space-between; - flex-wrap: wrap; - gap: var(--wa-space-m); - padding: var(--wa-space-3xl); - } - - :host([disable-sticky~='banner']) :is([part~='header'], [part~='subheader']) { - --banner-height: 0px !important; - } - :host([disable-sticky~='header']) [part~='subheader'] { - --header-height: 0px !important; - } - - /* Nothing else depends on subheader-height. */ - :host([disable-sticky~='subheader']) { - } - :host([disable-sticky~='aside']) [part~='aside'], - :host([disable-sticky~='menu']) [part~='menu'] { - height: unset; - max-height: unset; - } - - :host([disable-sticky~='banner']) [part~='banner'], - :host([disable-sticky~='header']) [part~='header'], - :host([disable-sticky~='subheader']) [part~='subheader'], - :host([disable-sticky~='aside']) [part~='aside'], - :host([disable-sticky~='menu']) [part~='menu'] { - position: static; - overflow: unset; - } - - :host([disable-sticky~='aside']) [part~='aside'], - :host([disable-sticky~='menu']) [part~='menu'] { - height: auto; - max-height: auto; - } - - [part~='base'] { - min-height: 100%; - display: grid; - grid-template-rows: repeat(3, minmax(0, auto)) minmax(0, 1fr) minmax(0, auto); - grid-template-columns: 100%; - width: 100%; - grid-template-areas: - 'banner' - 'header' - 'subheader' - 'body' - 'footer'; - } - - /* Grid areas */ - [part~='banner'] { - grid-area: banner; - } - [part~='header'] { - grid-area: header; - } - [part~='subheader'] { - grid-area: subheader; - } - [part~='menu'] { - grid-area: menu; - } - [part~='body'] { - grid-area: body; - } - [part~='main'] { - grid-area: main; - } - [part~='aside'] { - grid-area: aside; - } - [part~='footer'] { - grid-area: footer; - } - - /* Z-indexes */ - [part~='banner'], - [part~='header'], - [part~='subheader'] { - position: sticky; - z-index: 5; - } - [part~='banner'] { - top: 0px; - } - [part~='header'] { - top: var(--banner-height); - - /** Make the header flex so that you don't unexpectedly have the default toggle button appearing above a slotted div because block elements are fun. */ - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - } - [part~='subheader'] { - top: calc(var(--header-height) + var(--banner-height)); - } - [part~='body'] { - display: grid; - height: 100%; - align-items: flex-start; - grid-template-columns: minmax(0, var(--menu-width)) minmax(0, var(--main-width)) minmax(0, var(--aside-width)); - grid-template-rows: minmax(0, 1fr); - grid-template-areas: 'menu main aside'; - } - [part~='main'] { - display: grid; - min-height: 100%; - grid-template-columns: minmax(0, 1fr); - grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); - grid-template-areas: - 'main-header' - 'main-content' - 'main-footer'; - } - [part~='main-header'] { - grid-area: main-header; - } - [part~='main-content'] { - grid-area: main-content; - } - [part~='main-footer'] { - grid-area: main-footer; - } - - /* Visually hidden */ - .skip-to-content:not(:focus-within) { - position: absolute !important; - width: 1px !important; - height: 1px !important; - clip: rect(0 0 0 0) !important; - clip-path: inset(50%) !important; - border: none !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - } - - .skip-to-content { - position: absolute; - top: var(--wa-space-m); - left: var(--wa-space-m); - z-index: 6; - border-radius: var(--wa-corners-1x); - background-color: var(--wa-color-surface-default); - color: var(--wa-color-text-link); - text-decoration: none; - padding: var(--wa-space-s) var(--wa-space-m); - box-shadow: var(--wa-shadow-l); - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - [part~='menu'], - [part~='aside'] { - position: sticky; - top: calc(var(--banner-height) + var(--header-height) + var(--subheader-height)); - z-index: 4; - height: calc(100dvh - var(--header-height) - var(--banner-height) - var(--subheader-height)); - max-height: calc(100dvh - var(--header-height) - var(--banner-height) - var(--subheader-height)); - overflow: auto; - } - - [part~='navigation'] { - height: 100%; - display: grid; - grid-template-columns: minmax(0, 1fr); - grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); - } - - [part~='drawer']::part(dialog) { - background-color: var(--wa-color-surface-default); - } - - /* Set these on the slot because we don't always control the navigation-toggle since that may be slotted. */ - slot[name~='navigation-toggle'], - :host([disable-navigation-toggle]) slot[name~='navigation-toggle'] { - display: none; - } - - /* Sometimes the media query in the viewport is stubborn in iframes. This is an extra check to make it behave properly. */ - :host(:not([disable-navigation-toggle])[view='mobile']) slot[name~='navigation-toggle'] { - display: contents; - } - - [part~='navigation-toggle'] { - /* Use only a margin-inline-start because the slotted header is expected to have default padding - so it looks really awkward if this sets a margin-inline-end and the slotted header has a padding-inline-start. */ - margin-inline-start: var(--wa-space-m); - } -`; diff --git a/src/components/page/page.ts b/src/components/page/page.ts index 11add910f..7e5bc8ccd 100644 --- a/src/components/page/page.ts +++ b/src/components/page/page.ts @@ -4,7 +4,7 @@ import { html, isServer } from 'lit'; import { live } from 'lit/directives/live.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import mobileStyles from './page.mobile.styles.js'; -import styles from './page.styles.js'; +import styles from './page.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { PropertyValues } from 'lit'; import type WaDrawer from '../drawer/drawer.js'; diff --git a/src/components/popup/popup.css b/src/components/popup/popup.css new file mode 100644 index 000000000..63f35bbf9 --- /dev/null +++ b/src/components/popup/popup.css @@ -0,0 +1,96 @@ +:host { + --arrow-color: black; + --arrow-size: var(--wa-tooltip-arrow-size); + --show-duration: 100ms; + --hide-duration: 100ms; + + /* + * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant + * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating. + */ + --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071); + --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size)); + + display: contents; +} + +.popup { + position: absolute; + isolation: isolate; + max-width: var(--auto-size-available-width, none); + max-height: var(--auto-size-available-height, none); +} + +.popup--fixed { + position: fixed; +} + +.popup:not(.popup--active) { + display: none; +} + +.popup__arrow { + position: absolute; + width: calc(var(--arrow-size-diagonal) * 2); + height: calc(var(--arrow-size-diagonal) * 2); + rotate: 45deg; + background: var(--arrow-color); + z-index: -1; +} + +/* Hover bridge */ +.popup-hover-bridge:not(.popup-hover-bridge--visible) { + display: none; +} + +.popup-hover-bridge { + position: fixed; + z-index: 899; + top: 0; + right: 0; + bottom: 0; + left: 0; + clip-path: polygon( + var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0), + var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0), + var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0), + var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0) + ); +} + +/* Built-in animations */ +.show { + animation: show var(--show-duration) ease; +} + +.hide { + animation: show var(--hide-duration) ease reverse; +} + +@keyframes show { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.show-with-scale { + animation: show-with-scale var(--show-duration) ease; +} + +.hide-with-scale { + animation: show-with-scale var(--hide-duration) ease reverse; +} + +@keyframes show-with-scale { + from { + opacity: 0; + scale: 0.8; + } + to { + opacity: 1; + scale: 1; + } +} diff --git a/src/components/popup/popup.styles.ts b/src/components/popup/popup.styles.ts deleted file mode 100644 index c8df0bfd5..000000000 --- a/src/components/popup/popup.styles.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --arrow-color: black; - --arrow-size: var(--wa-tooltip-arrow-size); - --show-duration: 100ms; - --hide-duration: 100ms; - - /* - * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant - * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating. - */ - --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071); - --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size)); - - display: contents; - } - - .popup { - position: absolute; - isolation: isolate; - max-width: var(--auto-size-available-width, none); - max-height: var(--auto-size-available-height, none); - } - - .popup--fixed { - position: fixed; - } - - .popup:not(.popup--active) { - display: none; - } - - .popup__arrow { - position: absolute; - width: calc(var(--arrow-size-diagonal) * 2); - height: calc(var(--arrow-size-diagonal) * 2); - rotate: 45deg; - background: var(--arrow-color); - z-index: -1; - } - - /* Hover bridge */ - .popup-hover-bridge:not(.popup-hover-bridge--visible) { - display: none; - } - - .popup-hover-bridge { - position: fixed; - z-index: 899; - top: 0; - right: 0; - bottom: 0; - left: 0; - clip-path: polygon( - var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0), - var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0), - var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0), - var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0) - ); - } - - /* Built-in animations */ - .show { - animation: show var(--show-duration) ease; - } - - .hide { - animation: show var(--hide-duration) ease reverse; - } - - @keyframes show { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - - .show-with-scale { - animation: show-with-scale var(--show-duration) ease; - } - - .hide-with-scale { - animation: show-with-scale var(--hide-duration) ease reverse; - } - - @keyframes show-with-scale { - from { - opacity: 0; - scale: 0.8; - } - to { - opacity: 1; - scale: 1; - } - } -`; diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts index 5269f8b14..b39388e17 100644 --- a/src/components/popup/popup.ts +++ b/src/components/popup/popup.ts @@ -5,7 +5,7 @@ import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { offsetParent } from 'composed-offset-position'; import { WaRepositionEvent } from '../../events/reposition.js'; -import styles from './popup.styles.js'; +import styles from './popup.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; export interface VirtualElement { diff --git a/src/components/progress-bar/progress-bar.css b/src/components/progress-bar/progress-bar.css new file mode 100644 index 000000000..b1ebf5c37 --- /dev/null +++ b/src/components/progress-bar/progress-bar.css @@ -0,0 +1,80 @@ +:host { + --height: 1.25rem; + --track-color: var(--wa-color-neutral-fill-normal); + --indicator-color: var(--wa-color-brand-fill-loud); + --label-color: var(--wa-color-brand-on-loud); + --box-shadow: none; + + display: block; +} + +.progress-bar { + position: relative; + background-color: var(--track-color); + height: var(--height); + border-radius: var(--wa-border-radius-pill); + box-shadow: var(--box-shadow); + overflow: hidden; +} + +.progress-bar__indicator { + height: 100%; + font: inherit; + background-color: var(--indicator-color); + color: var(--label-color); + text-align: center; + line-height: var(--height); + white-space: nowrap; + overflow: hidden; + transition: + 400ms width, + 400ms background-color; + user-select: none; + -webkit-user-select: none; +} + +/* Indeterminate */ +.progress-bar--indeterminate .progress-bar__indicator { + position: absolute; + animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1); +} + +.progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator { + animation-name: indeterminate-rtl; +} + +@media (forced-colors: active) { + .progress-bar { + outline: solid 1px SelectedItem; + background-color: var(--wa-color-surface-default); + } + + .progress-bar__indicator { + outline: solid 1px SelectedItem; + background-color: SelectedItem; + } +} + +@keyframes indeterminate { + 0% { + left: -50%; + width: 50%; + } + 75%, + 100% { + left: 100%; + width: 50%; + } +} + +@keyframes indeterminate-rtl { + 0% { + right: -50%; + width: 50%; + } + 75%, + 100% { + right: 100%; + width: 50%; + } +} diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts deleted file mode 100644 index bf96e018e..000000000 --- a/src/components/progress-bar/progress-bar.styles.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --height: 1.25rem; - --track-color: var(--wa-color-neutral-fill-normal); - --indicator-color: var(--wa-color-brand-fill-loud); - --label-color: var(--wa-color-brand-on-loud); - --box-shadow: none; - - display: block; - } - - .progress-bar { - position: relative; - background-color: var(--track-color); - height: var(--height); - border-radius: var(--wa-border-radius-pill); - box-shadow: var(--box-shadow); - overflow: hidden; - } - - .progress-bar__indicator { - height: 100%; - font: inherit; - background-color: var(--indicator-color); - color: var(--label-color); - text-align: center; - line-height: var(--height); - white-space: nowrap; - overflow: hidden; - transition: - 400ms width, - 400ms background-color; - user-select: none; - -webkit-user-select: none; - } - - /* Indeterminate */ - .progress-bar--indeterminate .progress-bar__indicator { - position: absolute; - animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1); - } - - .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator { - animation-name: indeterminate-rtl; - } - - @media (forced-colors: active) { - .progress-bar { - outline: solid 1px SelectedItem; - background-color: var(--wa-color-surface-default); - } - - .progress-bar__indicator { - outline: solid 1px SelectedItem; - background-color: SelectedItem; - } - } - - @keyframes indeterminate { - 0% { - left: -50%; - width: 50%; - } - 75%, - 100% { - left: 100%; - width: 50%; - } - } - - @keyframes indeterminate-rtl { - 0% { - right: -50%; - width: 50%; - } - 75%, - 100% { - right: 100%; - width: 50%; - } - } -`; diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index d88529ae2..26bf54e05 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -4,7 +4,7 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LocalizeController } from '../../utilities/localize.js'; import { styleMap } from 'lit/directives/style-map.js'; -import styles from './progress-bar.styles.js'; +import styles from './progress-bar.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/progress-ring/progress-ring.css b/src/components/progress-ring/progress-ring.css new file mode 100644 index 000000000..8b9ee3e9f --- /dev/null +++ b/src/components/progress-ring/progress-ring.css @@ -0,0 +1,64 @@ +:host { + --size: 8rem; + --track-width: 0.25em; /* avoid using rems here - https://github.com/shoelace-style/webawesome-alpha/issues/89 */ + --track-color: var(--wa-color-neutral-fill-normal); + --indicator-width: var(--track-width); + --indicator-color: var(--wa-color-brand-fill-loud); + --indicator-transition-duration: 0.35s; + + display: inline-flex; +} + +.progress-ring { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; +} + +.progress-ring__image { + width: var(--size); + height: var(--size); + rotate: -90deg; + transform-origin: 50% 50%; +} + +.progress-ring__track, +.progress-ring__indicator { + --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5); + --circumference: calc(var(--radius) * 2 * 3.141592654); + + fill: none; + r: var(--radius); + cx: calc(var(--size) / 2); + cy: calc(var(--size) / 2); +} + +.progress-ring__track { + stroke: var(--track-color); + stroke-width: var(--track-width); +} + +.progress-ring__indicator { + stroke: var(--indicator-color); + stroke-width: var(--indicator-width); + stroke-linecap: round; + transition-property: stroke-dashoffset; + transition-duration: var(--indicator-transition-duration); + stroke-dasharray: var(--circumference) var(--circumference); + stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference)); +} + +.progress-ring__label { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + user-select: none; + -webkit-user-select: none; +} diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts deleted file mode 100644 index 44fa3d25a..000000000 --- a/src/components/progress-ring/progress-ring.styles.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --size: 8rem; - --track-width: 0.25em; /* avoid using rems here - https://github.com/shoelace-style/webawesome-alpha/issues/89 */ - --track-color: var(--wa-color-neutral-fill-normal); - --indicator-width: var(--track-width); - --indicator-color: var(--wa-color-brand-fill-loud); - --indicator-transition-duration: 0.35s; - - display: inline-flex; - } - - .progress-ring { - display: inline-flex; - align-items: center; - justify-content: center; - position: relative; - } - - .progress-ring__image { - width: var(--size); - height: var(--size); - rotate: -90deg; - transform-origin: 50% 50%; - } - - .progress-ring__track, - .progress-ring__indicator { - --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5); - --circumference: calc(var(--radius) * 2 * 3.141592654); - - fill: none; - r: var(--radius); - cx: calc(var(--size) / 2); - cy: calc(var(--size) / 2); - } - - .progress-ring__track { - stroke: var(--track-color); - stroke-width: var(--track-width); - } - - .progress-ring__indicator { - stroke: var(--indicator-color); - stroke-width: var(--indicator-width); - stroke-linecap: round; - transition-property: stroke-dashoffset; - transition-duration: var(--indicator-transition-duration); - stroke-dasharray: var(--circumference) var(--circumference); - stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference)); - } - - .progress-ring__label { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - user-select: none; - -webkit-user-select: none; - } -`; diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 3aeecfdb7..1717a4fa1 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -1,7 +1,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; -import styles from './progress-ring.styles.js'; +import styles from './progress-ring.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/qr-code/qr-code.css b/src/components/qr-code/qr-code.css new file mode 100644 index 000000000..2777d853f --- /dev/null +++ b/src/components/qr-code/qr-code.css @@ -0,0 +1,12 @@ +:host { + --size: 128px; + display: inline-block; +} + +:host, +canvas { + max-width: var(--size); + max-height: var(--size); + width: var(--size); + height: var(--size); +} diff --git a/src/components/qr-code/qr-code.styles.ts b/src/components/qr-code/qr-code.styles.ts deleted file mode 100644 index b790cc3b0..000000000 --- a/src/components/qr-code/qr-code.styles.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --size: 128px; - display: inline-block; - } - - :host, - canvas { - max-width: var(--size); - max-height: var(--size); - width: var(--size); - height: var(--size); - } -`; diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts index 432bdb563..d90c7f1ad 100644 --- a/src/components/qr-code/qr-code.ts +++ b/src/components/qr-code/qr-code.ts @@ -1,7 +1,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { watch } from '../../internal/watch.js'; -import styles from './qr-code.styles.js'; +import styles from './qr-code.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { PropertyValues } from 'lit'; import type _QrCreator from 'qr-creator'; diff --git a/src/components/radio-button/radio-button.css b/src/components/radio-button/radio-button.css new file mode 100644 index 000000000..69f0a0fbe --- /dev/null +++ b/src/components/radio-button/radio-button.css @@ -0,0 +1,21 @@ +.button__prefix, +.button__suffix, +.button__label { + display: inline-flex; + position: relative; + align-items: center; +} + +/* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons. + We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */ +.hidden-input { + all: unset; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + outline: dotted 1px red; + opacity: 0; + z-index: -1; +} diff --git a/src/components/radio-button/radio-button.styles.ts b/src/components/radio-button/radio-button.styles.ts deleted file mode 100644 index 5a9e4501e..000000000 --- a/src/components/radio-button/radio-button.styles.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { css } from 'lit'; -import buttonStyles from '../button/button.styles.js'; - -export default css` - ${buttonStyles} - - .button__prefix, - .button__suffix, - .button__label { - display: inline-flex; - position: relative; - align-items: center; - } - - /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons. - We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */ - .hidden-input { - all: unset; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - outline: dotted 1px red; - opacity: 0; - z-index: -1; - } -`; diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts index 7fada2fa0..fae2c5aea 100644 --- a/src/components/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button.ts @@ -7,7 +7,8 @@ import { WaBlurEvent } from '../../events/blur.js'; import { WaFocusEvent } from '../../events/focus.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import styles from './radio-button.styles.js'; +import buttonStyles from '../button/button.css'; +import styles from './radio-button.css'; /** * @summary Radios buttons allow the user to select a single option from a group using a button-like control. @@ -47,7 +48,7 @@ import styles from './radio-button.styles.js'; */ @customElement('wa-radio-button') export default class WaRadioButton extends WebAwesomeFormAssociatedElement { - static shadowStyle = styles; + static shadowStyle = [buttonStyles, styles]; private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix'); diff --git a/src/components/radio-group/radio-group.css b/src/components/radio-group/radio-group.css new file mode 100644 index 000000000..db2e7fe50 --- /dev/null +++ b/src/components/radio-group/radio-group.css @@ -0,0 +1,31 @@ +:host { + display: block; +} + +.form-control { + position: relative; + border: none; + padding: 0; + margin: 0; +} + +.form-control__label { + padding: 0; +} + +.radio-group--required .radio-group__label::after { + content: var(--wa-form-control-required-content); + margin-inline-start: var(--wa-form-control-required-content-offset); +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} diff --git a/src/components/radio-group/radio-group.styles.ts b/src/components/radio-group/radio-group.styles.ts deleted file mode 100644 index 938515916..000000000 --- a/src/components/radio-group/radio-group.styles.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: block; - } - - .form-control { - position: relative; - border: none; - padding: 0; - margin: 0; - } - - .form-control__label { - padding: 0; - } - - .radio-group--required .radio-group__label::after { - content: var(--wa-form-control-required-content); - margin-inline-start: var(--wa-form-control-required-content-offset); - } - - .visually-hidden { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; - } -`; diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 96aa92219..5021a6414 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -11,7 +11,7 @@ import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import formControlStyles from '../../styles/form-control.styles.js'; -import styles from './radio-group.styles.js'; +import styles from './radio-group.css'; import type WaRadio from '../radio/radio.js'; import type WaRadioButton from '../radio-button/radio-button.js'; diff --git a/src/components/radio/radio.css b/src/components/radio/radio.css new file mode 100644 index 000000000..0948ae4d5 --- /dev/null +++ b/src/components/radio/radio.css @@ -0,0 +1,110 @@ +:host { + --background-color: var(--wa-form-control-background-color); + --background-color-checked: var(--background-color); + --border-color: var(--wa-form-control-resting-color); + --border-color-checked: var(--wa-form-control-activated-color); + --border-style: var(--wa-border-style); + --border-width: var(--wa-form-control-border-width); + --box-shadow: none; + --checked-icon-color: var(--wa-form-control-activated-color); + --checked-icon-scale: 0.75; + --toggle-size: calc(1em * var(--wa-form-control-value-line-height)); + + display: inline-block; +} + +:host(:focus-visible) { + outline: none; +} + +.radio { + display: flex; + align-items: top; + font: inherit; + color: var(--wa-form-control-value-color); + vertical-align: middle; + cursor: pointer; +} + +.radio--small { + font-size: var(--wa-font-size-s); +} + +.radio--medium { + font-size: var(--wa-font-size-m); +} + +.radio--large { + font-size: var(--wa-font-size-l); +} + +.radio__checked-icon { + display: flex; + fill: currentColor; + width: var(--toggle-size); + height: var(--toggle-size); + scale: var(--checked-icon-scale); +} + +.radio__control { + flex: 0 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: var(--toggle-size); + height: var(--toggle-size); + border-color: var(--border-color); + border-style: var(--border-style); + border-width: var(--border-width); + border-radius: 50%; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: transparent; + transition: + background var(--wa-transition-normal) var(--wa-transition-easing), + border-color var(--wa-transition-normal) var(--wa-transition-easing), + box-shadow var(--wa-transition-normal) var(--wa-transition-easing), + color var(--wa-transition-normal) var(--wa-transition-easing); +} + +.radio__input { + position: absolute; + opacity: 0; + padding: 0; + margin: 0; + pointer-events: none; +} + +/* Checked */ +.radio--checked .radio__control { + color: var(--checked-icon-color); + border-color: var(--border-color-checked); + background-color: var(--background-color-checked); +} + +/* Checked + focus */ +:host(:focus-visible) .radio__control { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +/* Disabled */ +.radio--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */ +.radio:not(.radio--checked) svg circle { + opacity: 0; +} + +.radio__label { + display: inline-block; + color: var(--wa-form-control-value-color); + line-height: var(--toggle-size); + margin-inline-start: 0.5em; + user-select: none; + -webkit-user-select: none; +} diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts deleted file mode 100644 index b94df82d2..000000000 --- a/src/components/radio/radio.styles.ts +++ /dev/null @@ -1,114 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-form-control-background-color); - --background-color-checked: var(--background-color); - --border-color: var(--wa-form-control-resting-color); - --border-color-checked: var(--wa-form-control-activated-color); - --border-style: var(--wa-border-style); - --border-width: var(--wa-form-control-border-width); - --box-shadow: none; - --checked-icon-color: var(--wa-form-control-activated-color); - --checked-icon-scale: 0.75; - --toggle-size: calc(1em * var(--wa-form-control-value-line-height)); - - display: inline-block; - } - - :host(:focus-visible) { - outline: none; - } - - .radio { - display: flex; - align-items: top; - font: inherit; - color: var(--wa-form-control-value-color); - vertical-align: middle; - cursor: pointer; - } - - .radio--small { - font-size: var(--wa-font-size-s); - } - - .radio--medium { - font-size: var(--wa-font-size-m); - } - - .radio--large { - font-size: var(--wa-font-size-l); - } - - .radio__checked-icon { - display: flex; - fill: currentColor; - width: var(--toggle-size); - height: var(--toggle-size); - scale: var(--checked-icon-scale); - } - - .radio__control { - flex: 0 0 auto; - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: var(--toggle-size); - height: var(--toggle-size); - border-color: var(--border-color); - border-style: var(--border-style); - border-width: var(--border-width); - border-radius: 50%; - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: transparent; - transition: - background var(--wa-transition-normal) var(--wa-transition-easing), - border-color var(--wa-transition-normal) var(--wa-transition-easing), - box-shadow var(--wa-transition-normal) var(--wa-transition-easing), - color var(--wa-transition-normal) var(--wa-transition-easing); - } - - .radio__input { - position: absolute; - opacity: 0; - padding: 0; - margin: 0; - pointer-events: none; - } - - /* Checked */ - .radio--checked .radio__control { - color: var(--checked-icon-color); - border-color: var(--border-color-checked); - background-color: var(--background-color-checked); - } - - /* Checked + focus */ - :host(:focus-visible) .radio__control { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - /* Disabled */ - .radio--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */ - .radio:not(.radio--checked) svg circle { - opacity: 0; - } - - .radio__label { - display: inline-block; - color: var(--wa-form-control-value-color); - line-height: var(--toggle-size); - margin-inline-start: 0.5em; - user-select: none; - -webkit-user-select: none; - } -`; diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index f89cbb605..d200749ec 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -6,7 +6,7 @@ import { WaBlurEvent } from '../../events/blur.js'; import { WaFocusEvent } from '../../events/focus.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; -import styles from './radio.styles.js'; +import styles from './radio.css'; /** * @summary Radios allow the user to select a single option from a group. diff --git a/src/components/range/range.css b/src/components/range/range.css new file mode 100644 index 000000000..58e99ad23 --- /dev/null +++ b/src/components/range/range.css @@ -0,0 +1,218 @@ +:host { + --thumb-color: var(--wa-form-control-activated-color); + --thumb-gap: calc(var(--thumb-size) * 0.125); + --thumb-shadow: initial; + --thumb-size: calc(1rem * var(--wa-form-control-value-line-height)); + --tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 1.375); + --track-color-active: var(--wa-color-neutral-fill-normal); + --track-color-inactive: var(--wa-color-neutral-fill-normal); + --track-active-offset: 0%; + --track-height: calc(var(--thumb-size) * 0.25); + + display: block; +} + +.range { + position: relative; + display: flex; + align-items: center; + height: max(var(--thumb-size), var(--track-height)); +} + +.range__control { + --percent: 0%; + -webkit-appearance: none; + border-radius: calc(var(--track-height) / 2); + width: 100%; + height: var(--track-height); + background: transparent; + line-height: var(--wa-form-control-height-m); + vertical-align: middle; + margin: 0; + + background-image: linear-gradient( + to right, + var(--track-color-inactive) 0%, + var(--track-color-inactive) min(var(--percent), var(--track-active-offset)), + var(--track-color-active) min(var(--percent), var(--track-active-offset)), + var(--track-color-active) max(var(--percent), var(--track-active-offset)), + var(--track-color-inactive) max(var(--percent), var(--track-active-offset)), + var(--track-color-inactive) 100% + ); +} + +.range--rtl .range__control { + background-image: linear-gradient( + to left, + var(--track-color-inactive) 0%, + var(--track-color-inactive) min(var(--percent), var(--track-active-offset)), + var(--track-color-active) min(var(--percent), var(--track-active-offset)), + var(--track-color-active) max(var(--percent), var(--track-active-offset)), + var(--track-color-inactive) max(var(--percent), var(--track-active-offset)), + var(--track-color-inactive) 100% + ); +} + +/* Webkit */ +.range__control::-webkit-slider-runnable-track { + width: 100%; + height: var(--track-height); + border-radius: 3px; + border: none; +} + +.range__control::-webkit-slider-thumb { + width: var(--thumb-size); + height: var(--thumb-size); + border-radius: 50%; + background-color: var(--thumb-color); + box-shadow: + var(--thumb-shadow, 0 0 transparent), + 0 0 0 var(--thumb-gap) var(--wa-color-surface-default); + -webkit-appearance: none; + margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2); + cursor: pointer; +} + +.range__control:enabled:focus-visible::-webkit-slider-thumb { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.range__control:enabled::-webkit-slider-thumb:active { + cursor: grabbing; +} + +/* Firefox */ +.range__control::-moz-focus-outer { + border: 0; +} + +.range__control::-moz-range-progress { + background-color: var(--track-color-active); + border-radius: 3px; + height: var(--track-height); +} + +.range__control::-moz-range-track { + width: 100%; + height: var(--track-height); + background-color: var(--track-color-inactive); + border-radius: 3px; + border: none; +} + +.range__control::-moz-range-thumb { + height: var(--thumb-size); + width: var(--thumb-size); + border-radius: 50%; + background-color: var(--thumb-color); + box-shadow: + var(--thumb-shadow), + 0 0 0 var(--thumb-gap) var(--wa-color-surface-default); + transition: + background-color var(--wa-transition-normal) var(--wa-transition-easing), + border-color var(--wa-transition-normal) var(--wa-transition-easing), + box-shadow var(--wa-transition-normal) var(--wa-transition-easing), + color var(--wa-transition-normal) var(--wa-transition-easing); + cursor: pointer; +} + +.range__control:enabled:focus-visible::-moz-range-thumb { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.range__control:enabled::-moz-range-thumb:active { + cursor: grabbing; +} + +/* States */ +.range__control:focus-visible { + outline: none; +} + +.range__control:disabled { + opacity: 0.5; +} + +.range__control:disabled::-webkit-slider-thumb { + cursor: not-allowed; +} + +.range__control:disabled::-moz-range-thumb { + cursor: not-allowed; +} + +/* Tooltip output */ +.range__tooltip { + position: absolute; + z-index: 1000; + left: 0; + border-radius: var(--wa-tooltip-border-radius); + background-color: var(--wa-tooltip-background-color); + font-family: inherit; + font-size: var(--wa-tooltip-font-size); + line-height: var(--wa-tooltip-line-height); + color: var(--wa-tooltip-content-color); + opacity: 0; + padding: var(--wa-space-2xs) var(--wa-space-xs); + transition: var(--wa-transition-normal) opacity; + pointer-events: none; +} + +.range__tooltip:after { + content: ''; + position: absolute; + width: 0; + height: 0; + left: 50%; + translate: calc(-1 * var(--wa-tooltip-arrow-size)); +} + +.range--tooltip-visible .range__tooltip { + opacity: 1; +} + +/* Tooltip on top */ +.range--tooltip-top .range__tooltip { + bottom: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset)); +} + +.range--tooltip-top .range__tooltip:after { + border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud); + border-left: var(--wa-tooltip-arrow-size) solid transparent; + border-right: var(--wa-tooltip-arrow-size) solid transparent; + top: 100%; +} + +/* Tooltip on bottom */ +.range--tooltip-bottom .range__tooltip { + top: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset)); +} + +.range--tooltip-bottom .range__tooltip:after { + border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud); + border-left: var(--wa-tooltip-arrow-size) solid transparent; + border-right: var(--wa-tooltip-arrow-size) solid transparent; + bottom: 100%; +} + +@media (forced-colors: active) { + .range__control, + .range__tooltip { + border: solid 1px transparent; + } + + .range__control::-webkit-slider-thumb { + border: solid 1px transparent; + } + + .range__control::-moz-range-thumb { + border: solid 1px transparent; + } + + .range__tooltip:after { + display: none; + } +} diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts deleted file mode 100644 index 801346b78..000000000 --- a/src/components/range/range.styles.ts +++ /dev/null @@ -1,222 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --thumb-color: var(--wa-form-control-activated-color); - --thumb-gap: calc(var(--thumb-size) * 0.125); - --thumb-shadow: initial; - --thumb-size: calc(1rem * var(--wa-form-control-value-line-height)); - --tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 1.375); - --track-color-active: var(--wa-color-neutral-fill-normal); - --track-color-inactive: var(--wa-color-neutral-fill-normal); - --track-active-offset: 0%; - --track-height: calc(var(--thumb-size) * 0.25); - - display: block; - } - - .range { - position: relative; - display: flex; - align-items: center; - height: max(var(--thumb-size), var(--track-height)); - } - - .range__control { - --percent: 0%; - -webkit-appearance: none; - border-radius: calc(var(--track-height) / 2); - width: 100%; - height: var(--track-height); - background: transparent; - line-height: var(--wa-form-control-height-m); - vertical-align: middle; - margin: 0; - - background-image: linear-gradient( - to right, - var(--track-color-inactive) 0%, - var(--track-color-inactive) min(var(--percent), var(--track-active-offset)), - var(--track-color-active) min(var(--percent), var(--track-active-offset)), - var(--track-color-active) max(var(--percent), var(--track-active-offset)), - var(--track-color-inactive) max(var(--percent), var(--track-active-offset)), - var(--track-color-inactive) 100% - ); - } - - .range--rtl .range__control { - background-image: linear-gradient( - to left, - var(--track-color-inactive) 0%, - var(--track-color-inactive) min(var(--percent), var(--track-active-offset)), - var(--track-color-active) min(var(--percent), var(--track-active-offset)), - var(--track-color-active) max(var(--percent), var(--track-active-offset)), - var(--track-color-inactive) max(var(--percent), var(--track-active-offset)), - var(--track-color-inactive) 100% - ); - } - - /* Webkit */ - .range__control::-webkit-slider-runnable-track { - width: 100%; - height: var(--track-height); - border-radius: 3px; - border: none; - } - - .range__control::-webkit-slider-thumb { - width: var(--thumb-size); - height: var(--thumb-size); - border-radius: 50%; - background-color: var(--thumb-color); - box-shadow: - var(--thumb-shadow, 0 0 transparent), - 0 0 0 var(--thumb-gap) var(--wa-color-surface-default); - -webkit-appearance: none; - margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2); - cursor: pointer; - } - - .range__control:enabled:focus-visible::-webkit-slider-thumb { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .range__control:enabled::-webkit-slider-thumb:active { - cursor: grabbing; - } - - /* Firefox */ - .range__control::-moz-focus-outer { - border: 0; - } - - .range__control::-moz-range-progress { - background-color: var(--track-color-active); - border-radius: 3px; - height: var(--track-height); - } - - .range__control::-moz-range-track { - width: 100%; - height: var(--track-height); - background-color: var(--track-color-inactive); - border-radius: 3px; - border: none; - } - - .range__control::-moz-range-thumb { - height: var(--thumb-size); - width: var(--thumb-size); - border-radius: 50%; - background-color: var(--thumb-color); - box-shadow: - var(--thumb-shadow), - 0 0 0 var(--thumb-gap) var(--wa-color-surface-default); - transition: - background-color var(--wa-transition-normal) var(--wa-transition-easing), - border-color var(--wa-transition-normal) var(--wa-transition-easing), - box-shadow var(--wa-transition-normal) var(--wa-transition-easing), - color var(--wa-transition-normal) var(--wa-transition-easing); - cursor: pointer; - } - - .range__control:enabled:focus-visible::-moz-range-thumb { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .range__control:enabled::-moz-range-thumb:active { - cursor: grabbing; - } - - /* States */ - .range__control:focus-visible { - outline: none; - } - - .range__control:disabled { - opacity: 0.5; - } - - .range__control:disabled::-webkit-slider-thumb { - cursor: not-allowed; - } - - .range__control:disabled::-moz-range-thumb { - cursor: not-allowed; - } - - /* Tooltip output */ - .range__tooltip { - position: absolute; - z-index: 1000; - left: 0; - border-radius: var(--wa-tooltip-border-radius); - background-color: var(--wa-tooltip-background-color); - font-family: inherit; - font-size: var(--wa-tooltip-font-size); - line-height: var(--wa-tooltip-line-height); - color: var(--wa-tooltip-content-color); - opacity: 0; - padding: var(--wa-space-2xs) var(--wa-space-xs); - transition: var(--wa-transition-normal) opacity; - pointer-events: none; - } - - .range__tooltip:after { - content: ''; - position: absolute; - width: 0; - height: 0; - left: 50%; - translate: calc(-1 * var(--wa-tooltip-arrow-size)); - } - - .range--tooltip-visible .range__tooltip { - opacity: 1; - } - - /* Tooltip on top */ - .range--tooltip-top .range__tooltip { - bottom: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset)); - } - - .range--tooltip-top .range__tooltip:after { - border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud); - border-left: var(--wa-tooltip-arrow-size) solid transparent; - border-right: var(--wa-tooltip-arrow-size) solid transparent; - top: 100%; - } - - /* Tooltip on bottom */ - .range--tooltip-bottom .range__tooltip { - top: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset)); - } - - .range--tooltip-bottom .range__tooltip:after { - border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud); - border-left: var(--wa-tooltip-arrow-size) solid transparent; - border-right: var(--wa-tooltip-arrow-size) solid transparent; - bottom: 100%; - } - - @media (forced-colors: active) { - .range__control, - .range__tooltip { - border: solid 1px transparent; - } - - .range__control::-webkit-slider-thumb { - border: solid 1px transparent; - } - - .range__control::-moz-range-thumb { - border: solid 1px transparent; - } - - .range__tooltip:after { - display: none; - } - } -`; diff --git a/src/components/range/range.ts b/src/components/range/range.ts index abe79af60..b86e899bc 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -13,7 +13,7 @@ import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import formControlStyles from '../../styles/form-control.styles.js'; -import styles from './range.styles.js'; +import styles from './range.css'; /** * @summary Ranges allow the user to select a single value within a given range using a slider. diff --git a/src/components/rating/rating.css b/src/components/rating/rating.css new file mode 100644 index 000000000..d1b0e8271 --- /dev/null +++ b/src/components/rating/rating.css @@ -0,0 +1,87 @@ +:host { + --symbol-color: var(--wa-color-neutral-fill-normal); + --symbol-color-active: var(--wa-color-yellow-70); + --symbol-size: var(--wa-font-size-l); + --symbol-spacing: var(--wa-space-3xs); + + display: inline-flex; +} + +.rating { + position: relative; + display: inline-flex; + border-radius: var(--wa-border-radius-s); + vertical-align: middle; +} + +.rating:focus { + outline: none; +} + +.rating:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +.rating__symbols { + display: inline-flex; + position: relative; + font-size: var(--symbol-size); + line-height: 0; + color: var(--symbol-color); + white-space: nowrap; + cursor: pointer; +} + +.rating__symbols > * { + padding: var(--symbol-spacing); +} + +.rating__symbol--active, +.rating__partial--filled { + color: var(--symbol-color-active); +} + +.rating__partial-symbol-container { + position: relative; +} + +.rating__partial--filled { + position: absolute; + top: var(--symbol-spacing); + left: var(--symbol-spacing); +} + +.rating__symbol { + transition: scale var(--wa-transition-normal) var(--wa-transition-easing); + pointer-events: none; +} + +.rating__symbol--hover { + scale: 1.2; +} + +.rating--disabled .rating__symbols, +.rating--readonly .rating__symbols { + cursor: default; +} + +.rating--disabled .rating__symbol--hover, +.rating--readonly .rating__symbol--hover { + scale: none; +} + +.rating--disabled { + opacity: 0.5; +} + +.rating--disabled .rating__symbols { + cursor: not-allowed; +} + +/* Forced colors mode */ +@media (forced-colors: active) { + .rating__symbol--active { + color: SelectedItem; + } +} diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts deleted file mode 100644 index 1b7b8a22d..000000000 --- a/src/components/rating/rating.styles.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --symbol-color: var(--wa-color-neutral-fill-normal); - --symbol-color-active: var(--wa-color-yellow-70); - --symbol-size: var(--wa-font-size-l); - --symbol-spacing: var(--wa-space-3xs); - - display: inline-flex; - } - - .rating { - position: relative; - display: inline-flex; - border-radius: var(--wa-border-radius-s); - vertical-align: middle; - } - - .rating:focus { - outline: none; - } - - .rating:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - .rating__symbols { - display: inline-flex; - position: relative; - font-size: var(--symbol-size); - line-height: 0; - color: var(--symbol-color); - white-space: nowrap; - cursor: pointer; - } - - .rating__symbols > * { - padding: var(--symbol-spacing); - } - - .rating__symbol--active, - .rating__partial--filled { - color: var(--symbol-color-active); - } - - .rating__partial-symbol-container { - position: relative; - } - - .rating__partial--filled { - position: absolute; - top: var(--symbol-spacing); - left: var(--symbol-spacing); - } - - .rating__symbol { - transition: scale var(--wa-transition-normal) var(--wa-transition-easing); - pointer-events: none; - } - - .rating__symbol--hover { - scale: 1.2; - } - - .rating--disabled .rating__symbols, - .rating--readonly .rating__symbols { - cursor: default; - } - - .rating--disabled .rating__symbol--hover, - .rating--readonly .rating__symbol--hover { - scale: none; - } - - .rating--disabled { - opacity: 0.5; - } - - .rating--disabled .rating__symbols { - cursor: not-allowed; - } - - /* Forced colors mode */ - @media (forced-colors: active) { - .rating__symbol--active { - color: SelectedItem; - } - } -`; diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index 2f33b2537..0df37ba05 100644 --- a/src/components/rating/rating.ts +++ b/src/components/rating/rating.ts @@ -9,7 +9,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { WaChangeEvent } from '../../events/change.js'; import { WaHoverEvent } from '../../events/hover.js'; import { watch } from '../../internal/watch.js'; -import styles from './rating.styles.js'; +import styles from './rating.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/resize-observer/resize-observer.css b/src/components/resize-observer/resize-observer.css new file mode 100644 index 000000000..92d692cdd --- /dev/null +++ b/src/components/resize-observer/resize-observer.css @@ -0,0 +1,3 @@ +:host { + display: contents; +} diff --git a/src/components/resize-observer/resize-observer.styles.ts b/src/components/resize-observer/resize-observer.styles.ts deleted file mode 100644 index 1ef4bf6f3..000000000 --- a/src/components/resize-observer/resize-observer.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - display: contents; - } -`; diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts index d8d0661fa..22cc27b1c 100644 --- a/src/components/resize-observer/resize-observer.ts +++ b/src/components/resize-observer/resize-observer.ts @@ -2,7 +2,7 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; import { WaResizeEvent } from '../../events/resize.js'; import { watch } from '../../internal/watch.js'; -import styles from './resize-observer.styles.js'; +import styles from './resize-observer.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/select/select.css b/src/components/select/select.css new file mode 100644 index 000000000..2c9bf1156 --- /dev/null +++ b/src/components/select/select.css @@ -0,0 +1,332 @@ +:host { + --background-color: var(--wa-form-control-background-color); + --border-color: var(--wa-form-control-resting-color); + --border-radius: var(--wa-form-control-border-radius); + --border-style: var(--wa-form-control-border-style); + --border-width: var(--wa-form-control-border-width); + --box-shadow: initial; + + display: block; +} + +:host([filled]) { + --background-color: var(--wa-color-neutral-fill-quiet); + --border-color: var(--background-color); +} + +/** The popup */ +.select { + flex: 1 1 auto; + display: inline-flex; + width: 100%; + position: relative; + vertical-align: middle; +} + +.select::part(popup) { + z-index: 900; +} + +.select[data-current-placement^='top']::part(popup) { + transform-origin: bottom; +} + +.select[data-current-placement^='bottom']::part(popup) { + transform-origin: top; +} + +/* Combobox */ +.select__combobox { + background-color: var(--background-color); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + box-shadow: var(--box-shadow); + flex: 1; + display: flex; + width: 100%; + min-width: 0; + position: relative; + align-items: center; + justify-content: start; + font: inherit; + vertical-align: middle; + overflow: hidden; + cursor: pointer; + transition: + background var(--wa-transition-normal) var(--wa-transition-easing), + border var(--wa-transition-normal) var(--wa-transition-easing), + box-shadow var(--wa-transition-normal) var(--wa-transition-easing), + color var(--wa-transition-normal) var(--wa-transition-easing), + outline var(--wa-transition-fast) var(--wa-transition-easing); +} + +.select__display-input { + position: relative; + width: 100%; + font: inherit; + border: none; + background: none; + line-height: var(--wa-form-control-value-line-height); + color: var(--wa-form-control-value-color); + cursor: inherit; + overflow: hidden; + padding: 0; + margin: 0; + -webkit-appearance: none; +} + +.select__display-input:focus { + outline: none; +} + +.select__display-input::placeholder { + color: var(--wa-form-controls-placeholder-color); +} + +/* Visually hide the display input when multiple is enabled */ +.select--multiple:not(.select--placeholder-visible) .select__display-input { + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; +} + +.select__value-input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: -1; +} + +.select__tags { + display: flex; + flex: 1; + align-items: center; + flex-wrap: wrap; + margin-inline-start: var(--wa-space-2xs); +} + +.select__tags::slotted(wa-tag) { + cursor: pointer !important; +} + +.select--disabled .select__tags, +.select--disabled .select__tags::slotted(wa-tag) { + cursor: not-allowed !important; +} + +/* Standard selects */ +.select--standard.select--disabled .select__combobox { + opacity: 0.5; + cursor: not-allowed; + outline: none; +} + +.select--standard:not(.select--disabled).select--open .select__combobox, +.select--standard:not(.select--disabled).select--focused .select__combobox { + border-color: var(--wa-form-control-activated-color); + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +/* Filled selects */ +.select--filled.select--disabled .select__combobox { + opacity: 0.5; + cursor: not-allowed; +} + +/* Sizes */ +.select--small .select__combobox { + font-size: var(--wa-font-size-s); + min-height: var(--wa-form-control-height-s); + padding-block: 0; + padding-inline: var(--wa-space-s); +} + +.select--small .select__clear { + margin-inline-start: var(--wa-space-s); +} + +.select--small .select__prefix::slotted(*) { + margin-inline-end: var(--wa-space-s); +} + +.select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) { + margin-inline-start: var(--wa-space-s); +} + +.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox { + padding-block: 2px; + padding-inline-start: 0; +} + +.select--small .select__tags { + gap: 2px; +} + +.select--medium .select__combobox { + font-size: var(--wa-font-size-m); + min-height: var(--wa-form-control-height-m); + padding-block: 0; + padding-inline: var(--wa-space-m); +} + +.select--medium .select__clear { + margin-inline-start: var(--wa-space-m); +} + +.select--medium .select__prefix::slotted(*) { + margin-inline-end: var(--wa-space-m); +} + +.select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) { + margin-inline-start: var(--wa-space-m); +} + +.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox { + padding-inline-start: 0; + padding-block: 3px; +} + +.select--medium .select__tags { + gap: 3px; +} + +.select--large .select__combobox { + font-size: var(--wa-font-size-l); + min-height: var(--wa-form-control-height-l); + padding-block: 0; + padding-inline: var(--wa-space-l); +} + +.select--large .select__clear { + margin-inline-start: var(--wa-space-l); +} + +.select--large .select__prefix::slotted(*) { + margin-inline-end: var(--wa-space-l); +} + +.select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) { + margin-inline-start: var(--wa-space-l); +} + +.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox { + padding-inline-start: 0; + padding-block: 4px; +} + +.select--large .select__tags { + gap: 4px; +} + +/* Pills */ +.select--pill.select--small .select__combobox { + border-radius: var(--wa-border-radius-pill); +} + +.select--pill.select--medium .select__combobox { + border-radius: var(--wa-border-radius-pill); +} + +.select--pill.select--large .select__combobox { + border-radius: var(--wa-border-radius-pill); +} + +/* Prefix and Suffix */ +.select__prefix, +.select__suffix { + flex: 0; + display: inline-flex; + align-items: center; + color: var(--wa-color-neutral-on-quiet); +} + +.select__suffix::slotted(*) { + margin-inline-start: var(--wa-space-sm); +} + +/* Clear button */ +.select__clear { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: inherit; + color: var(--wa-color-neutral-on-quiet); + border: none; + background: none; + padding: 0; + transition: color var(--wa-transition-normal); + cursor: pointer; +} + +.select__clear:focus { + outline: none; +} + +.select__clear:hover { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); +} + +.select__clear:active { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); +} + +/* Expand icon */ +.select__expand-icon { + flex: 0 0 auto; + display: flex; + align-items: center; + color: var(--wa-color-neutral-on-quiet); + transition: rotate var(--wa-transition-slow) ease; + rotate: 0; + margin-inline-start: var(--wa-space-s); +} + +.select--open .select__expand-icon { + rotate: -180deg; +} + +/* Listbox */ +.select__listbox { + display: block; + position: relative; + font: inherit; + box-shadow: var(--wa-shadow-m); + background: var(--wa-color-surface-raised); + border-color: var(--wa-color-surface-border); + border-radius: var(--wa-border-radius-s); + border-style: var(--border-style); + border-width: var(--border-width); + padding-block: var(--wa-space-xs); + padding-inline: 0; + overflow: auto; + overscroll-behavior: none; + + /* Make sure it adheres to the popup's auto size */ + max-width: var(--auto-size-available-width); + max-height: var(--auto-size-available-height); +} + +.select__listbox ::slotted(wa-divider) { + --spacing: var(--wa-space-xs); +} + +.select__listbox ::slotted(small) { + display: block; + font-size: var(--wa-font-size-s); + font-weight: var(--wa-font-weight-semibold); + color: var(--wa-color-text-quiet); + padding-block: var(--wa-space-xs); + padding-inline: var(--wa-space-xl); +} diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts deleted file mode 100644 index 344d3a2f5..000000000 --- a/src/components/select/select.styles.ts +++ /dev/null @@ -1,336 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-form-control-background-color); - --border-color: var(--wa-form-control-resting-color); - --border-radius: var(--wa-form-control-border-radius); - --border-style: var(--wa-form-control-border-style); - --border-width: var(--wa-form-control-border-width); - --box-shadow: initial; - - display: block; - } - - :host([filled]) { - --background-color: var(--wa-color-neutral-fill-quiet); - --border-color: var(--background-color); - } - - /** The popup */ - .select { - flex: 1 1 auto; - display: inline-flex; - width: 100%; - position: relative; - vertical-align: middle; - } - - .select::part(popup) { - z-index: 900; - } - - .select[data-current-placement^='top']::part(popup) { - transform-origin: bottom; - } - - .select[data-current-placement^='bottom']::part(popup) { - transform-origin: top; - } - - /* Combobox */ - .select__combobox { - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - box-shadow: var(--box-shadow); - flex: 1; - display: flex; - width: 100%; - min-width: 0; - position: relative; - align-items: center; - justify-content: start; - font: inherit; - vertical-align: middle; - overflow: hidden; - cursor: pointer; - transition: - background var(--wa-transition-normal) var(--wa-transition-easing), - border var(--wa-transition-normal) var(--wa-transition-easing), - box-shadow var(--wa-transition-normal) var(--wa-transition-easing), - color var(--wa-transition-normal) var(--wa-transition-easing), - outline var(--wa-transition-fast) var(--wa-transition-easing); - } - - .select__display-input { - position: relative; - width: 100%; - font: inherit; - border: none; - background: none; - line-height: var(--wa-form-control-value-line-height); - color: var(--wa-form-control-value-color); - cursor: inherit; - overflow: hidden; - padding: 0; - margin: 0; - -webkit-appearance: none; - } - - .select__display-input:focus { - outline: none; - } - - .select__display-input::placeholder { - color: var(--wa-form-controls-placeholder-color); - } - - /* Visually hide the display input when multiple is enabled */ - .select--multiple:not(.select--placeholder-visible) .select__display-input { - position: absolute; - z-index: -1; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - } - - .select__value-input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - opacity: 0; - z-index: -1; - } - - .select__tags { - display: flex; - flex: 1; - align-items: center; - flex-wrap: wrap; - margin-inline-start: var(--wa-space-2xs); - } - - .select__tags::slotted(wa-tag) { - cursor: pointer !important; - } - - .select--disabled .select__tags, - .select--disabled .select__tags::slotted(wa-tag) { - cursor: not-allowed !important; - } - - /* Standard selects */ - .select--standard.select--disabled .select__combobox { - opacity: 0.5; - cursor: not-allowed; - outline: none; - } - - .select--standard:not(.select--disabled).select--open .select__combobox, - .select--standard:not(.select--disabled).select--focused .select__combobox { - border-color: var(--wa-form-control-activated-color); - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - /* Filled selects */ - .select--filled.select--disabled .select__combobox { - opacity: 0.5; - cursor: not-allowed; - } - - /* Sizes */ - .select--small .select__combobox { - font-size: var(--wa-font-size-s); - min-height: var(--wa-form-control-height-s); - padding-block: 0; - padding-inline: var(--wa-space-s); - } - - .select--small .select__clear { - margin-inline-start: var(--wa-space-s); - } - - .select--small .select__prefix::slotted(*) { - margin-inline-end: var(--wa-space-s); - } - - .select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) { - margin-inline-start: var(--wa-space-s); - } - - .select--small.select--multiple:not(.select--placeholder-visible) .select__combobox { - padding-block: 2px; - padding-inline-start: 0; - } - - .select--small .select__tags { - gap: 2px; - } - - .select--medium .select__combobox { - font-size: var(--wa-font-size-m); - min-height: var(--wa-form-control-height-m); - padding-block: 0; - padding-inline: var(--wa-space-m); - } - - .select--medium .select__clear { - margin-inline-start: var(--wa-space-m); - } - - .select--medium .select__prefix::slotted(*) { - margin-inline-end: var(--wa-space-m); - } - - .select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) { - margin-inline-start: var(--wa-space-m); - } - - .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox { - padding-inline-start: 0; - padding-block: 3px; - } - - .select--medium .select__tags { - gap: 3px; - } - - .select--large .select__combobox { - font-size: var(--wa-font-size-l); - min-height: var(--wa-form-control-height-l); - padding-block: 0; - padding-inline: var(--wa-space-l); - } - - .select--large .select__clear { - margin-inline-start: var(--wa-space-l); - } - - .select--large .select__prefix::slotted(*) { - margin-inline-end: var(--wa-space-l); - } - - .select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) { - margin-inline-start: var(--wa-space-l); - } - - .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox { - padding-inline-start: 0; - padding-block: 4px; - } - - .select--large .select__tags { - gap: 4px; - } - - /* Pills */ - .select--pill.select--small .select__combobox { - border-radius: var(--wa-border-radius-pill); - } - - .select--pill.select--medium .select__combobox { - border-radius: var(--wa-border-radius-pill); - } - - .select--pill.select--large .select__combobox { - border-radius: var(--wa-border-radius-pill); - } - - /* Prefix and Suffix */ - .select__prefix, - .select__suffix { - flex: 0; - display: inline-flex; - align-items: center; - color: var(--wa-color-neutral-on-quiet); - } - - .select__suffix::slotted(*) { - margin-inline-start: var(--wa-space-sm); - } - - /* Clear button */ - .select__clear { - display: inline-flex; - align-items: center; - justify-content: center; - font-size: inherit; - color: var(--wa-color-neutral-on-quiet); - border: none; - background: none; - padding: 0; - transition: color var(--wa-transition-normal); - cursor: pointer; - } - - .select__clear:focus { - outline: none; - } - - .select__clear:hover { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); - } - - .select__clear:active { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); - } - - /* Expand icon */ - .select__expand-icon { - flex: 0 0 auto; - display: flex; - align-items: center; - color: var(--wa-color-neutral-on-quiet); - transition: rotate var(--wa-transition-slow) ease; - rotate: 0; - margin-inline-start: var(--wa-space-s); - } - - .select--open .select__expand-icon { - rotate: -180deg; - } - - /* Listbox */ - .select__listbox { - display: block; - position: relative; - font: inherit; - box-shadow: var(--wa-shadow-m); - background: var(--wa-color-surface-raised); - border-color: var(--wa-color-surface-border); - border-radius: var(--wa-border-radius-s); - border-style: var(--border-style); - border-width: var(--border-width); - padding-block: var(--wa-space-xs); - padding-inline: 0; - overflow: auto; - overscroll-behavior: none; - - /* Make sure it adheres to the popup's auto size */ - max-width: var(--auto-size-available-width); - max-height: var(--auto-size-available-height); - } - - .select__listbox ::slotted(wa-divider) { - --spacing: var(--wa-space-xs); - } - - .select__listbox ::slotted(small) { - display: block; - font-size: var(--wa-font-size-s); - font-weight: var(--wa-font-weight-semibold); - color: var(--wa-color-text-quiet); - padding-block: var(--wa-space-xs); - padding-inline: var(--wa-space-xl); - } -`; diff --git a/src/components/select/select.ts b/src/components/select/select.ts index dab1ccea3..fc900b8d0 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -23,7 +23,7 @@ import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import formControlStyles from '../../styles/form-control.styles.js'; -import styles from './select.styles.js'; +import styles from './select.css'; import type { TemplateResult } from 'lit'; import type { WaRemoveEvent } from '../../events/remove.js'; import type WaOption from '../option/option.js'; diff --git a/src/components/skeleton/skeleton.css b/src/components/skeleton/skeleton.css new file mode 100644 index 000000000..d60150989 --- /dev/null +++ b/src/components/skeleton/skeleton.css @@ -0,0 +1,59 @@ +:host { + --border-radius: var(--wa-border-radius-pill); + --color: var(--wa-color-neutral-fill-normal); + --sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), var(--wa-color-surface-raised)); + + display: block; + position: relative; +} + +.skeleton { + display: flex; + width: 100%; + height: 100%; + min-height: 1rem; +} + +.skeleton__indicator { + flex: 1 1 auto; + background: var(--color); + border-radius: var(--border-radius); +} + +.skeleton--sheen .skeleton__indicator { + background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color)); + background-size: 400% 100%; + animation: sheen 8s ease-in-out infinite; +} + +.skeleton--pulse .skeleton__indicator { + animation: pulse 2s ease-in-out 0.5s infinite; +} + +/* Forced colors mode */ +@media (forced-colors: active) { + :host { + --color: GrayText; + } +} + +@keyframes sheen { + 0% { + background-position: 200% 0; + } + to { + background-position: -200% 0; + } +} + +@keyframes pulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.4; + } + 100% { + opacity: 1; + } +} diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts deleted file mode 100644 index 943236e73..000000000 --- a/src/components/skeleton/skeleton.styles.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --border-radius: var(--wa-border-radius-pill); - --color: var(--wa-color-neutral-fill-normal); - --sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), var(--wa-color-surface-raised)); - - display: block; - position: relative; - } - - .skeleton { - display: flex; - width: 100%; - height: 100%; - min-height: 1rem; - } - - .skeleton__indicator { - flex: 1 1 auto; - background: var(--color); - border-radius: var(--border-radius); - } - - .skeleton--sheen .skeleton__indicator { - background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color)); - background-size: 400% 100%; - animation: sheen 8s ease-in-out infinite; - } - - .skeleton--pulse .skeleton__indicator { - animation: pulse 2s ease-in-out 0.5s infinite; - } - - /* Forced colors mode */ - @media (forced-colors: active) { - :host { - --color: GrayText; - } - } - - @keyframes sheen { - 0% { - background-position: 200% 0; - } - to { - background-position: -200% 0; - } - } - - @keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.4; - } - 100% { - opacity: 1; - } - } -`; diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts index 8ddf3618c..0c3febaf5 100644 --- a/src/components/skeleton/skeleton.ts +++ b/src/components/skeleton/skeleton.ts @@ -1,7 +1,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; -import styles from './skeleton.styles.js'; +import styles from './skeleton.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/spinner/spinner.css b/src/components/spinner/spinner.css new file mode 100644 index 000000000..e9e99278a --- /dev/null +++ b/src/components/spinner/spinner.css @@ -0,0 +1,59 @@ +:host { + --track-width: 2px; + --track-color: var(--wa-color-neutral-fill-normal); + --indicator-color: var(--wa-color-brand-fill-loud); + --speed: 2s; + + /* Resizing a spinner element using anything but font-size will break the animation because the animation uses em units. + Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and + break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized + according to its actual dimensions. + */ + flex: none; + display: inline-flex; + width: 1em; + height: 1em; +} + +svg { + width: 100%; + height: 100%; + aspect-ratio: 1; + animation: spin var(--speed) linear infinite; +} + +.spinner__track { + stroke: var(--track-color); +} + +.spinner__indicator { + stroke: var(--indicator-color); + stroke-dasharray: 75, 100; + stroke-dashoffset: -5; + animation: dash 1.5s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts deleted file mode 100644 index 75aa258ae..000000000 --- a/src/components/spinner/spinner.styles.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { css } from 'lit'; - -// Resizing a spinner element using anything but font-size will break the animation because the animation uses em units. -// Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and -// break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized -// according to its actual dimensions. - -export default css` - :host { - --track-width: 2px; - --track-color: var(--wa-color-neutral-fill-normal); - --indicator-color: var(--wa-color-brand-fill-loud); - --speed: 2s; - - flex: none; - display: inline-flex; - width: 1em; - height: 1em; - } - - svg { - width: 100%; - height: 100%; - aspect-ratio: 1; - animation: spin var(--speed) linear infinite; - } - - .spinner__track { - stroke: var(--track-color); - } - - .spinner__indicator { - stroke: var(--indicator-color); - stroke-dasharray: 75, 100; - stroke-dashoffset: -5; - animation: dash 1.5s ease-in-out infinite; - stroke-linecap: round; - } - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } - - @keyframes dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } - } -`; diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts index 20a5e4267..b49f6a038 100644 --- a/src/components/spinner/spinner.ts +++ b/src/components/spinner/spinner.ts @@ -1,7 +1,7 @@ import { customElement } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; -import styles from './spinner.styles.js'; +import styles from './spinner.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/split-panel/split-panel.css b/src/components/split-panel/split-panel.css new file mode 100644 index 000000000..7b49ac166 --- /dev/null +++ b/src/components/split-panel/split-panel.css @@ -0,0 +1,74 @@ +:host { + --divider-color: var(--wa-color-neutral-border-normal); + --divider-width: 0.25rem; + --divider-hit-area: 0.75rem; + --min: 0%; + --max: 100%; + + display: grid; +} + +.start, +.end { + overflow: hidden; +} + +.divider { + flex: 0 0 var(--divider-width); + display: flex; + position: relative; + align-items: center; + justify-content: center; + background-color: var(--divider-color); + color: var(--wa-color-neutral-on-normal); + z-index: 1; +} + +.divider:focus { + outline: none; +} + +:host(:not([disabled])) .divider:focus-visible { + outline: var(--wa-focus-ring); +} + +:host([disabled]) .divider { + cursor: not-allowed; +} + +/* Horizontal */ +:host(:not([vertical], [disabled])) .divider { + cursor: col-resize; +} + +:host(:not([vertical])) .divider::after { + display: flex; + content: ''; + position: absolute; + height: 100%; + left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2); + width: var(--divider-hit-area); +} + +/* Vertical */ +:host([vertical]) { + flex-direction: column; +} + +:host([vertical]:not([disabled])) .divider { + cursor: row-resize; +} + +:host([vertical]) .divider::after { + content: ''; + position: absolute; + width: 100%; + top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2); + height: var(--divider-hit-area); +} + +@media (forced-colors: active) { + .divider { + outline: solid 1px transparent; + } +} diff --git a/src/components/split-panel/split-panel.styles.ts b/src/components/split-panel/split-panel.styles.ts deleted file mode 100644 index 5aa74a199..000000000 --- a/src/components/split-panel/split-panel.styles.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --divider-color: var(--wa-color-neutral-border-normal); - --divider-width: 0.25rem; - --divider-hit-area: 0.75rem; - --min: 0%; - --max: 100%; - - display: grid; - } - - .start, - .end { - overflow: hidden; - } - - .divider { - flex: 0 0 var(--divider-width); - display: flex; - position: relative; - align-items: center; - justify-content: center; - background-color: var(--divider-color); - color: var(--wa-color-neutral-on-normal); - z-index: 1; - } - - .divider:focus { - outline: none; - } - - :host(:not([disabled])) .divider:focus-visible { - outline: var(--wa-focus-ring); - } - - :host([disabled]) .divider { - cursor: not-allowed; - } - - /* Horizontal */ - :host(:not([vertical], [disabled])) .divider { - cursor: col-resize; - } - - :host(:not([vertical])) .divider::after { - display: flex; - content: ''; - position: absolute; - height: 100%; - left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2); - width: var(--divider-hit-area); - } - - /* Vertical */ - :host([vertical]) { - flex-direction: column; - } - - :host([vertical]:not([disabled])) .divider { - cursor: row-resize; - } - - :host([vertical]) .divider::after { - content: ''; - position: absolute; - width: 100%; - top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2); - height: var(--divider-hit-area); - } - - @media (forced-colors: active) { - .divider { - outline: solid 1px transparent; - } - } -`; diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts index 40edc9bb8..bb0e2f4c8 100644 --- a/src/components/split-panel/split-panel.ts +++ b/src/components/split-panel/split-panel.ts @@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { LocalizeController } from '../../utilities/localize.js'; import { WaRepositionEvent } from '../../events/reposition.js'; import { watch } from '../../internal/watch.js'; -import styles from './split-panel.styles.js'; +import styles from './split-panel.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/switch/switch.css b/src/components/switch/switch.css new file mode 100644 index 000000000..99acf2288 --- /dev/null +++ b/src/components/switch/switch.css @@ -0,0 +1,124 @@ +:host { + --background-color: var(--wa-form-control-background-color); + --background-color-checked: var(--wa-form-control-activated-color); + --border-color: var(--wa-form-control-resting-color); + --border-color-checked: var(--background-color-checked); + --border-style: var(--wa-form-control-border-style); + --border-width: var(--wa-form-control-border-width); + --box-shadow: initial; + --height: calc(1em * var(--wa-form-control-value-line-height)); + --thumb-color: var(--wa-form-control-resting-color); + --thumb-color-checked: var(--wa-form-control-background-color); + --thumb-shadow: initial; + --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75); + --width: calc(var(--height) * 1.75); + + display: inline-block; +} + +:host([size='small']) { + font-size: var(--wa-font-size-s); +} + +:host([size='medium']) { + font-size: var(--wa-font-size-m); +} + +:host([size='large']) { + font-size: var(--wa-font-size-l); +} + +.switch { + position: relative; + display: flex; + align-items: center; + font: inherit; + color: var(--wa-form-control-value-color); + vertical-align: middle; + cursor: pointer; +} + +.switch__control { + flex: 0 0 auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: var(--width); + height: var(--height); + background-color: var(--background-color); + border-color: var(--border-color); + border-radius: var(--height); + border-style: var(--border-style); + border-width: var(--border-width); + box-shadow: var(--box-shadow); + transition: + background var(--wa-transition-normal) var(--wa-transition-easing), + border-color var(--wa-transition-normal) var(--wa-transition-easing); +} + +.switch__control .switch__thumb { + width: var(--thumb-size); + height: var(--thumb-size); + background-color: var(--thumb-color); + border-radius: 50%; + box-shadow: var(--thumb-shadow); + translate: calc((var(--width) - var(--height)) / -2); + transition: + translate var(--wa-transition-normal) var(--wa-transition-easing), + background-color var(--wa-transition-normal) var(--wa-transition-easing), + border-color var(--wa-transition-normal) var(--wa-transition-easing), + box-shadow var(--wa-transition-normal) var(--wa-transition-easing); +} + +.switch__input { + position: absolute; + opacity: 0; + padding: 0; + margin: 0; + pointer-events: none; +} + +/* Focus */ +.switch:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +/* Checked */ +.switch--checked .switch__control { + background-color: var(--background-color-checked); + border-color: var(--border-color-checked); +} + +.switch--checked .switch__control .switch__thumb { + background-color: var(--thumb-color-checked); + translate: calc((var(--width) - var(--height)) / 2); +} + +/* Disabled */ +.switch--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.switch__label { + display: inline-block; + line-height: var(--height); + margin-inline-start: 0.5em; + user-select: none; + -webkit-user-select: none; +} + +:host([required]) .switch__label::after { + content: var(--wa-form-control-required-content); + color: var(--wa-form-control-required-content-color); + margin-inline-start: var(--wa-form-control-required-content-offset); +} + +@media (forced-colors: active) { + .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb, + .switch--checked .switch__control .switch__thumb { + background-color: ButtonText; + } +} diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts deleted file mode 100644 index 151e0cd32..000000000 --- a/src/components/switch/switch.styles.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-form-control-background-color); - --background-color-checked: var(--wa-form-control-activated-color); - --border-color: var(--wa-form-control-resting-color); - --border-color-checked: var(--background-color-checked); - --border-style: var(--wa-form-control-border-style); - --border-width: var(--wa-form-control-border-width); - --box-shadow: initial; - --height: calc(1em * var(--wa-form-control-value-line-height)); - --thumb-color: var(--wa-form-control-resting-color); - --thumb-color-checked: var(--wa-form-control-background-color); - --thumb-shadow: initial; - --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75); - --width: calc(var(--height) * 1.75); - - display: inline-block; - } - - :host([size='small']) { - font-size: var(--wa-font-size-s); - } - - :host([size='medium']) { - font-size: var(--wa-font-size-m); - } - - :host([size='large']) { - font-size: var(--wa-font-size-l); - } - - .switch { - position: relative; - display: flex; - align-items: center; - font: inherit; - color: var(--wa-form-control-value-color); - vertical-align: middle; - cursor: pointer; - } - - .switch__control { - flex: 0 0 auto; - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: var(--width); - height: var(--height); - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--height); - border-style: var(--border-style); - border-width: var(--border-width); - box-shadow: var(--box-shadow); - transition: - background var(--wa-transition-normal) var(--wa-transition-easing), - border-color var(--wa-transition-normal) var(--wa-transition-easing); - } - - .switch__control .switch__thumb { - width: var(--thumb-size); - height: var(--thumb-size); - background-color: var(--thumb-color); - border-radius: 50%; - box-shadow: var(--thumb-shadow); - translate: calc((var(--width) - var(--height)) / -2); - transition: - translate var(--wa-transition-normal) var(--wa-transition-easing), - background-color var(--wa-transition-normal) var(--wa-transition-easing), - border-color var(--wa-transition-normal) var(--wa-transition-easing), - box-shadow var(--wa-transition-normal) var(--wa-transition-easing); - } - - .switch__input { - position: absolute; - opacity: 0; - padding: 0; - margin: 0; - pointer-events: none; - } - - /* Focus */ - .switch:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - } - - /* Checked */ - .switch--checked .switch__control { - background-color: var(--background-color-checked); - border-color: var(--border-color-checked); - } - - .switch--checked .switch__control .switch__thumb { - background-color: var(--thumb-color-checked); - translate: calc((var(--width) - var(--height)) / 2); - } - - /* Disabled */ - .switch--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .switch__label { - display: inline-block; - line-height: var(--height); - margin-inline-start: 0.5em; - user-select: none; - -webkit-user-select: none; - } - - :host([required]) .switch__label::after { - content: var(--wa-form-control-required-content); - color: var(--wa-form-control-required-content-color); - margin-inline-start: var(--wa-form-control-required-content-offset); - } - - @media (forced-colors: active) { - .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb, - .switch--checked .switch__control .switch__thumb { - background-color: ButtonText; - } - } -`; diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 3eb325176..ca91cd358 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -12,7 +12,7 @@ import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import formControlStyles from '../../styles/form-control.styles.js'; -import styles from './switch.styles.js'; +import styles from './switch.css'; import type { PropertyValues } from 'lit'; /** diff --git a/src/components/tab-group/tab-group.css b/src/components/tab-group/tab-group.css new file mode 100644 index 000000000..9ead6fa33 --- /dev/null +++ b/src/components/tab-group/tab-group.css @@ -0,0 +1,245 @@ +:host { + --indicator-color: var(--wa-color-brand-fill-loud); + --track-color: var(--wa-color-neutral-fill-normal); + --track-width: 0.125rem; + + display: block; +} + +.tab-group { + display: flex; + border-radius: 0; +} + +.tab-group__tabs { + display: flex; + position: relative; +} + +.tab-group__indicator { + position: absolute; +} + +.tab-group--has-scroll-controls .tab-group__nav-container { + position: relative; + padding: 0 var(--wa-space-xl); +} + +.tab-group__body { + display: block; + overflow: auto; +} + +.tab-group__scroll-button { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + bottom: 0; + width: var(--wa-space-xl); +} + +.tab-group__scroll-button--start { + left: 0; +} + +.tab-group__scroll-button--end { + right: 0; +} + +.tab-group--rtl .tab-group__scroll-button--start { + left: auto; + right: 0; +} + +.tab-group--rtl .tab-group__scroll-button--end { + left: 0; + right: auto; +} + +/* + * Top + */ + +.tab-group--top { + flex-direction: column; +} + +.tab-group--top .tab-group__nav-container { + order: 1; +} + +.tab-group--top .tab-group__nav { + display: flex; + overflow-x: auto; + + /* Hide scrollbar in Firefox */ + scrollbar-width: none; +} + +/* Hide scrollbar in Chrome/Safari */ +.tab-group--top .tab-group__nav::-webkit-scrollbar { + width: 0; + height: 0; +} + +.tab-group--top .tab-group__tabs { + flex: 1 1 auto; + position: relative; + flex-direction: row; + border-bottom: solid var(--track-width) var(--track-color); +} + +.tab-group--top .tab-group__indicator { + bottom: calc(-1 * var(--track-width)); + border-bottom: solid var(--track-width) var(--indicator-color); +} + +.tab-group--top .tab-group__body { + order: 2; +} + +.tab-group--top ::slotted(wa-tab[active]) { + border-block-end: solid var(--track-width) var(--indicator-color); + margin-block-end: calc(-1 * var(--track-width)); +} + +.tab-group--top ::slotted(wa-tab-panel) { + --padding: var(--wa-space-m) 0; +} + +/* + * Bottom + */ + +.tab-group--bottom { + flex-direction: column; +} + +.tab-group--bottom .tab-group__nav-container { + order: 2; +} + +.tab-group--bottom .tab-group__nav { + display: flex; + overflow-x: auto; + + /* Hide scrollbar in Firefox */ + scrollbar-width: none; +} + +/* Hide scrollbar in Chrome/Safari */ +.tab-group--bottom .tab-group__nav::-webkit-scrollbar { + width: 0; + height: 0; +} + +.tab-group--bottom .tab-group__tabs { + flex: 1 1 auto; + position: relative; + flex-direction: row; + border-top: solid var(--track-width) var(--track-color); +} + +.tab-group--bottom .tab-group__indicator { + top: calc(-1 * var(--track-width)); + border-top: solid var(--track-width) var(--indicator-color); +} + +.tab-group--bottom .tab-group__body { + order: 1; +} + +.tab-group--bottom ::slotted(wa-tab[active]) { + border-block-start: solid var(--track-width) var(--indicator-color); + margin-block-start: calc(-1 * var(--track-width)); +} + +.tab-group--bottom ::slotted(wa-tab-panel) { + --padding: var(--wa-space-m) 0; +} + +/* + * Start + */ + +.tab-group--start { + flex-direction: row; +} + +.tab-group--start .tab-group__nav-container { + order: 1; +} + +.tab-group--start .tab-group__tabs { + flex: 0 0 auto; + flex-direction: column; + border-inline-end: solid var(--track-width) var(--track-color); +} + +.tab-group--start .tab-group__indicator { + right: calc(-1 * var(--track-width)); + border-right: solid var(--track-width) var(--indicator-color); +} + +.tab-group--start.tab-group--rtl .tab-group__indicator { + right: auto; + left: calc(-1 * var(--track-width)); +} + +.tab-group--start .tab-group__body { + flex: 1 1 auto; + order: 2; +} + +.tab-group--start ::slotted(wa-tab[active]) { + border-inline-end: solid var(--track-width) var(--indicator-color); + margin-inline-end: calc(-1 * var(--track-width)); +} + +.tab-group--start ::slotted(wa-tab-panel) { + --padding: 0 var(--wa-space-m); +} + +/* + * End + */ + +.tab-group--end { + flex-direction: row; +} + +.tab-group--end .tab-group__nav-container { + order: 2; +} + +.tab-group--end .tab-group__tabs { + flex: 0 0 auto; + flex-direction: column; + border-left: solid var(--track-width) var(--track-color); +} + +.tab-group--end .tab-group__indicator { + left: calc(-1 * var(--track-width)); + border-inline-start: solid var(--track-width) var(--indicator-color); +} + +.tab-group--end.tab-group--rtl .tab-group__indicator { + right: calc(-1 * var(--track-width)); + left: auto; +} + +.tab-group--end .tab-group__body { + flex: 1 1 auto; + order: 1; +} + +.tab-group--end ::slotted(wa-tab[active]) { + border-inline-start: solid var(--track-width) var(--indicator-color); + margin-inline-start: calc(-1 * var(--track-width)); +} + +.tab-group--end ::slotted(wa-tab-panel) { + --padding: 0 var(--wa-space-m); +} diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts deleted file mode 100644 index 4afb40a15..000000000 --- a/src/components/tab-group/tab-group.styles.ts +++ /dev/null @@ -1,249 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --indicator-color: var(--wa-color-brand-fill-loud); - --track-color: var(--wa-color-neutral-fill-normal); - --track-width: 0.125rem; - - display: block; - } - - .tab-group { - display: flex; - border-radius: 0; - } - - .tab-group__tabs { - display: flex; - position: relative; - } - - .tab-group__indicator { - position: absolute; - } - - .tab-group--has-scroll-controls .tab-group__nav-container { - position: relative; - padding: 0 var(--wa-space-xl); - } - - .tab-group__body { - display: block; - overflow: auto; - } - - .tab-group__scroll-button { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - bottom: 0; - width: var(--wa-space-xl); - } - - .tab-group__scroll-button--start { - left: 0; - } - - .tab-group__scroll-button--end { - right: 0; - } - - .tab-group--rtl .tab-group__scroll-button--start { - left: auto; - right: 0; - } - - .tab-group--rtl .tab-group__scroll-button--end { - left: 0; - right: auto; - } - - /* - * Top - */ - - .tab-group--top { - flex-direction: column; - } - - .tab-group--top .tab-group__nav-container { - order: 1; - } - - .tab-group--top .tab-group__nav { - display: flex; - overflow-x: auto; - - /* Hide scrollbar in Firefox */ - scrollbar-width: none; - } - - /* Hide scrollbar in Chrome/Safari */ - .tab-group--top .tab-group__nav::-webkit-scrollbar { - width: 0; - height: 0; - } - - .tab-group--top .tab-group__tabs { - flex: 1 1 auto; - position: relative; - flex-direction: row; - border-bottom: solid var(--track-width) var(--track-color); - } - - .tab-group--top .tab-group__indicator { - bottom: calc(-1 * var(--track-width)); - border-bottom: solid var(--track-width) var(--indicator-color); - } - - .tab-group--top .tab-group__body { - order: 2; - } - - .tab-group--top ::slotted(wa-tab[active]) { - border-block-end: solid var(--track-width) var(--indicator-color); - margin-block-end: calc(-1 * var(--track-width)); - } - - .tab-group--top ::slotted(wa-tab-panel) { - --padding: var(--wa-space-m) 0; - } - - /* - * Bottom - */ - - .tab-group--bottom { - flex-direction: column; - } - - .tab-group--bottom .tab-group__nav-container { - order: 2; - } - - .tab-group--bottom .tab-group__nav { - display: flex; - overflow-x: auto; - - /* Hide scrollbar in Firefox */ - scrollbar-width: none; - } - - /* Hide scrollbar in Chrome/Safari */ - .tab-group--bottom .tab-group__nav::-webkit-scrollbar { - width: 0; - height: 0; - } - - .tab-group--bottom .tab-group__tabs { - flex: 1 1 auto; - position: relative; - flex-direction: row; - border-top: solid var(--track-width) var(--track-color); - } - - .tab-group--bottom .tab-group__indicator { - top: calc(-1 * var(--track-width)); - border-top: solid var(--track-width) var(--indicator-color); - } - - .tab-group--bottom .tab-group__body { - order: 1; - } - - .tab-group--bottom ::slotted(wa-tab[active]) { - border-block-start: solid var(--track-width) var(--indicator-color); - margin-block-start: calc(-1 * var(--track-width)); - } - - .tab-group--bottom ::slotted(wa-tab-panel) { - --padding: var(--wa-space-m) 0; - } - - /* - * Start - */ - - .tab-group--start { - flex-direction: row; - } - - .tab-group--start .tab-group__nav-container { - order: 1; - } - - .tab-group--start .tab-group__tabs { - flex: 0 0 auto; - flex-direction: column; - border-inline-end: solid var(--track-width) var(--track-color); - } - - .tab-group--start .tab-group__indicator { - right: calc(-1 * var(--track-width)); - border-right: solid var(--track-width) var(--indicator-color); - } - - .tab-group--start.tab-group--rtl .tab-group__indicator { - right: auto; - left: calc(-1 * var(--track-width)); - } - - .tab-group--start .tab-group__body { - flex: 1 1 auto; - order: 2; - } - - .tab-group--start ::slotted(wa-tab[active]) { - border-inline-end: solid var(--track-width) var(--indicator-color); - margin-inline-end: calc(-1 * var(--track-width)); - } - - .tab-group--start ::slotted(wa-tab-panel) { - --padding: 0 var(--wa-space-m); - } - - /* - * End - */ - - .tab-group--end { - flex-direction: row; - } - - .tab-group--end .tab-group__nav-container { - order: 2; - } - - .tab-group--end .tab-group__tabs { - flex: 0 0 auto; - flex-direction: column; - border-left: solid var(--track-width) var(--track-color); - } - - .tab-group--end .tab-group__indicator { - left: calc(-1 * var(--track-width)); - border-inline-start: solid var(--track-width) var(--indicator-color); - } - - .tab-group--end.tab-group--rtl .tab-group__indicator { - right: calc(-1 * var(--track-width)); - left: auto; - } - - .tab-group--end .tab-group__body { - flex: 1 1 auto; - order: 1; - } - - .tab-group--end ::slotted(wa-tab[active]) { - border-inline-start: solid var(--track-width) var(--indicator-color); - margin-inline-start: calc(-1 * var(--track-width)); - } - - .tab-group--end ::slotted(wa-tab-panel) { - --padding: 0 var(--wa-space-m); - } -`; diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index 3dd3cd99e..8118322d6 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -9,7 +9,7 @@ import { scrollIntoView } from '../../internal/scroll.js'; import { WaTabHideEvent } from '../../events/tab-hide.js'; import { WaTabShowEvent } from '../../events/tab-show.js'; import { watch } from '../../internal/watch.js'; -import styles from './tab-group.styles.js'; +import styles from './tab-group.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type WaTab from '../tab/tab.js'; import type WaTabPanel from '../tab-panel/tab-panel.js'; diff --git a/src/components/tab-panel/tab-panel.css b/src/components/tab-panel/tab-panel.css new file mode 100644 index 000000000..cc74c9f1c --- /dev/null +++ b/src/components/tab-panel/tab-panel.css @@ -0,0 +1,14 @@ +:host { + --padding: 0; + + display: none; +} + +:host([active]) { + display: block; +} + +.tab-panel { + display: block; + padding: var(--padding); +} diff --git a/src/components/tab-panel/tab-panel.styles.ts b/src/components/tab-panel/tab-panel.styles.ts deleted file mode 100644 index e0c9f2142..000000000 --- a/src/components/tab-panel/tab-panel.styles.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --padding: 0; - - display: none; - } - - :host([active]) { - display: block; - } - - .tab-panel { - display: block; - padding: var(--padding); - } -`; diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts index 9ddee9e31..6ccd557ff 100644 --- a/src/components/tab-panel/tab-panel.ts +++ b/src/components/tab-panel/tab-panel.ts @@ -2,7 +2,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; import { watch } from '../../internal/watch.js'; -import styles from './tab-panel.styles.js'; +import styles from './tab-panel.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; let id = 0; diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css new file mode 100644 index 000000000..8311b1e50 --- /dev/null +++ b/src/components/tab/tab.css @@ -0,0 +1,47 @@ +:host { + --active-tab-color: var(--wa-color-brand-on-quiet); + display: inline-block; + color: var(--wa-color-neutral-on-quiet); + font-weight: var(--wa-font-weight-action); +} + +.tab { + display: inline-flex; + align-items: center; + font: inherit; + padding: var(--wa-space-m) var(--wa-space-l); + white-space: nowrap; + user-select: none; + -webkit-user-select: none; + cursor: pointer; + transition: color var(--wa-transition-fast) var(--wa-transition-easing); +} + +:host(:hover:not([disabled])) .tab { + color: currentColor; +} + +:host(:focus) { + outline: transparent; +} + +:host(:focus-visible) .tab { + outline: var(--wa-focus-ring); + outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset)); +} + +:host([active]:not([disabled])) .tab { + color: var(--active-tab-color); +} + +:host([disabled]) .tab { + opacity: 0.5; + cursor: not-allowed; +} + +@media (forced-colors: active) { + :host([active]:not([disabled])) { + outline: solid 1px transparent; + outline-offset: -3px; + } +} diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts deleted file mode 100644 index d7f49dc22..000000000 --- a/src/components/tab/tab.styles.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --active-tab-color: var(--wa-color-brand-on-quiet); - display: inline-block; - color: var(--wa-color-neutral-on-quiet); - font-weight: var(--wa-font-weight-action); - } - - .tab { - display: inline-flex; - align-items: center; - font: inherit; - padding: var(--wa-space-m) var(--wa-space-l); - white-space: nowrap; - user-select: none; - -webkit-user-select: none; - cursor: pointer; - transition: color var(--wa-transition-fast) var(--wa-transition-easing); - } - - :host(:hover:not([disabled])) .tab { - color: currentColor; - } - - :host(:focus) { - outline: transparent; - } - - :host(:focus-visible) .tab { - outline: var(--wa-focus-ring); - outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset)); - } - - :host([active]:not([disabled])) .tab { - color: var(--active-tab-color); - } - - :host([disabled]) .tab { - opacity: 0.5; - cursor: not-allowed; - } - - @media (forced-colors: active) { - :host([active]:not([disabled])) { - outline: solid 1px transparent; - outline-offset: -3px; - } - } -`; diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts index 2908a837a..3a3297450 100644 --- a/src/components/tab/tab.ts +++ b/src/components/tab/tab.ts @@ -2,7 +2,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; import { watch } from '../../internal/watch.js'; -import styles from './tab.styles.js'; +import styles from './tab.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; let id = 0; diff --git a/src/components/tag/tag.css b/src/components/tag/tag.css new file mode 100644 index 000000000..2590abe48 --- /dev/null +++ b/src/components/tag/tag.css @@ -0,0 +1,105 @@ +:host { + --border-radius: var(--wa-border-radius-xs); + --border-style: var(--wa-border-style); + --border-width: var(--wa-border-width-s); + + display: inline-block; +} + +:host([variant='brand']) { + --background-color: var(--wa-color-brand-fill-quiet); + --border-color: var(--wa-color-brand-border-normal); + --content-color: var(--wa-color-brand-on-normal); +} + +:host([variant='success']) { + --background-color: var(--wa-color-success-fill-quiet); + --border-color: var(--wa-color-success-border-normal); + --content-color: var(--wa-color-success-on-normal); +} + +:host([variant='warning']) { + --background-color: var(--wa-color-warning-fill-quiet); + --border-color: var(--wa-color-warning-border-normal); + --content-color: var(--wa-color-warning-on-normal); +} + +:host([variant='neutral']) { + --background-color: var(--wa-color-neutral-fill-quiet); + --border-color: var(--wa-color-neutral-border-normal); + --content-color: var(--wa-color-neutral-on-normal); +} + +:host([variant='danger']) { + --background-color: var(--wa-color-danger-fill-quiet); + --border-color: var(--wa-color-danger-border-normal); + --content-color: var(--wa-color-danger-on-normal); +} + +.tag { + display: flex; + align-items: center; + background-color: var(--background-color); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + color: var(--content-color); + line-height: 1; + white-space: nowrap; + user-select: none; + -webkit-user-select: none; +} + +.tag__remove::part(base) { + color: inherit; + padding: 0; +} + +.tag:hover > wa-icon-button { + color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-hover)); +} + +.tag:active > wa-icon-button { + color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-active)); +} + +/* + * Size modifiers + */ + +.tag--small { + font-size: var(--wa-font-size-xs); + height: calc(var(--wa-form-control-height-s) * 0.8); + line-height: calc(var(--wa-form-control-height-s) - var(--wa-form-control-border-width) * 2); + border-radius: var(--wa-border-radius-s); + padding: 0 var(--wa-space-xs); +} + +.tag--medium { + font-size: var(--wa-font-size-s); + height: calc(var(--wa-form-control-height-m) * 0.8); + line-height: calc(var(--wa-form-control-height-m) - var(--wa-form-control-border-width) * 2); + border-radius: var(--wa-border-radius-s); + padding: 0 var(--wa-space-s); +} + +.tag--large { + font-size: var(--wa-font-size-m); + height: calc(var(--wa-form-control-height-l) * 0.8); + line-height: calc(var(--wa-form-control-height-l) - var(--wa-form-control-border-width) * 2); + border-radius: var(--wa-border-radius-s); + padding: 0 var(--wa-space-m); +} + +.tag__remove { + margin-inline-start: 0.75em; +} + +/* + * Pill modifier + */ + +.tag--pill { + border-radius: var(--wa-border-radius-pill); +} diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts deleted file mode 100644 index 090d88e3c..000000000 --- a/src/components/tag/tag.styles.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --border-radius: var(--wa-border-radius-xs); - --border-style: var(--wa-border-style); - --border-width: var(--wa-border-width-s); - - display: inline-block; - } - - :host([variant='brand']) { - --background-color: var(--wa-color-brand-fill-quiet); - --border-color: var(--wa-color-brand-border-normal); - --content-color: var(--wa-color-brand-on-normal); - } - - :host([variant='success']) { - --background-color: var(--wa-color-success-fill-quiet); - --border-color: var(--wa-color-success-border-normal); - --content-color: var(--wa-color-success-on-normal); - } - - :host([variant='warning']) { - --background-color: var(--wa-color-warning-fill-quiet); - --border-color: var(--wa-color-warning-border-normal); - --content-color: var(--wa-color-warning-on-normal); - } - - :host([variant='neutral']) { - --background-color: var(--wa-color-neutral-fill-quiet); - --border-color: var(--wa-color-neutral-border-normal); - --content-color: var(--wa-color-neutral-on-normal); - } - - :host([variant='danger']) { - --background-color: var(--wa-color-danger-fill-quiet); - --border-color: var(--wa-color-danger-border-normal); - --content-color: var(--wa-color-danger-on-normal); - } - - .tag { - display: flex; - align-items: center; - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - color: var(--content-color); - line-height: 1; - white-space: nowrap; - user-select: none; - -webkit-user-select: none; - } - - .tag__remove::part(base) { - color: inherit; - padding: 0; - } - - .tag:hover > wa-icon-button { - color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-hover)); - } - - .tag:active > wa-icon-button { - color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-active)); - } - - /* - * Size modifiers - */ - - .tag--small { - font-size: var(--wa-font-size-xs); - height: calc(var(--wa-form-control-height-s) * 0.8); - line-height: calc(var(--wa-form-control-height-s) - var(--wa-form-control-border-width) * 2); - border-radius: var(--wa-border-radius-s); - padding: 0 var(--wa-space-xs); - } - - .tag--medium { - font-size: var(--wa-font-size-s); - height: calc(var(--wa-form-control-height-m) * 0.8); - line-height: calc(var(--wa-form-control-height-m) - var(--wa-form-control-border-width) * 2); - border-radius: var(--wa-border-radius-s); - padding: 0 var(--wa-space-s); - } - - .tag--large { - font-size: var(--wa-font-size-m); - height: calc(var(--wa-form-control-height-l) * 0.8); - line-height: calc(var(--wa-form-control-height-l) - var(--wa-form-control-border-width) * 2); - border-radius: var(--wa-border-radius-s); - padding: 0 var(--wa-space-m); - } - - .tag__remove { - margin-inline-start: 0.75em; - } - - /* - * Pill modifier - */ - - .tag--pill { - border-radius: var(--wa-border-radius-pill); - } -`; diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index 38676a2bc..ae1d43ad0 100644 --- a/src/components/tag/tag.ts +++ b/src/components/tag/tag.ts @@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { WaRemoveEvent } from '../../events/remove.js'; -import styles from './tag.styles.js'; +import styles from './tag.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/components/textarea/textarea.css b/src/components/textarea/textarea.css new file mode 100644 index 000000000..54114c26f --- /dev/null +++ b/src/components/textarea/textarea.css @@ -0,0 +1,144 @@ +:host { + --background-color: var(--wa-form-control-background-color); + --border-color: var(--wa-form-control-resting-color); + --border-radius: var(--wa-form-control-border-radius); + --border-style: var(--wa-form-control-border-style); + --border-width: var(--wa-form-control-border-width); + --box-shadow: initial; + + display: block; +} + +:host([filled]) { + --background-color: var(--wa-color-neutral-fill-quiet); + --border-color: var(--background-color); +} + +.textarea { + background-color: var(--background-color); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + box-shadow: var(--box-shadow); + display: grid; + align-items: center; + position: relative; + width: 100%; + font: inherit; + line-height: var(--wa-form-control-value-line-height); + vertical-align: middle; + transition: + background var(--wa-transition-normal) var(--wa-transition-easing), + border var(--wa-transition-normal) var(--wa-transition-easing), + outline var(--wa-transition-fast) var(--wa-transition-easing); + cursor: text; +} + +.textarea__control, +.textarea__size-adjuster { + grid-area: 1 / 1 / 2 / 2; +} + +.textarea__size-adjuster { + visibility: hidden; + pointer-events: none; + opacity: 0; +} + +/* Standard textareas */ +.textarea--standard.textarea--focused:not(.textarea--disabled) { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); + border-color: var(--wa-form-control-activated-color); +} + +.textarea--standard.textarea--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Filled textareas */ +.textarea--filled.textarea--focused:not(.textarea--disabled) { + outline: var(--wa-focus-ring); + outline-offset: 0; +} + +.textarea--filled.textarea--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.textarea__control { + font: inherit; + line-height: var(--wa-line-height-expanded); + color: var(--wa-form-control-value-color); + border: none; + background: none; + box-shadow: none; + cursor: inherit; + -webkit-appearance: none; +} + +.textarea__control::-webkit-search-decoration, +.textarea__control::-webkit-search-cancel-button, +.textarea__control::-webkit-search-results-button, +.textarea__control::-webkit-search-results-decoration { + -webkit-appearance: none; +} + +.textarea__control::placeholder { + color: var(--wa-form-control-placeholder-color); + user-select: none; + -webkit-user-select: none; +} + +.textarea__control:focus { + outline: none; +} + +/* + * Size modifiers + */ + +.textarea--small { + font-size: var(--wa-font-size-s); +} + +.textarea--small .textarea__control { + padding: 0.5em var(--wa-space-s); +} + +.textarea--medium { + font-size: var(--wa-font-size-m); +} + +.textarea--medium .textarea__control { + padding: 0.5em var(--wa-space-m); +} + +.textarea--large { + font-size: var(--wa-font-size-l); +} + +.textarea--large .textarea__control { + padding: 0.5em var(--wa-space-l); +} + +/* + * Resize types + */ + +.textarea--resize-none .textarea__control { + resize: none; +} + +.textarea--resize-vertical .textarea__control { + resize: vertical; +} + +.textarea--resize-auto .textarea__control { + height: auto; + resize: none; + overflow-y: hidden; +} diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts deleted file mode 100644 index d96b5ccf1..000000000 --- a/src/components/textarea/textarea.styles.ts +++ /dev/null @@ -1,148 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-form-control-background-color); - --border-color: var(--wa-form-control-resting-color); - --border-radius: var(--wa-form-control-border-radius); - --border-style: var(--wa-form-control-border-style); - --border-width: var(--wa-form-control-border-width); - --box-shadow: initial; - - display: block; - } - - :host([filled]) { - --background-color: var(--wa-color-neutral-fill-quiet); - --border-color: var(--background-color); - } - - .textarea { - background-color: var(--background-color); - border-color: var(--border-color); - border-radius: var(--border-radius); - border-style: var(--border-style); - border-width: var(--border-width); - box-shadow: var(--box-shadow); - display: grid; - align-items: center; - position: relative; - width: 100%; - font: inherit; - line-height: var(--wa-form-control-value-line-height); - vertical-align: middle; - transition: - background var(--wa-transition-normal) var(--wa-transition-easing), - border var(--wa-transition-normal) var(--wa-transition-easing), - outline var(--wa-transition-fast) var(--wa-transition-easing); - cursor: text; - } - - .textarea__control, - .textarea__size-adjuster { - grid-area: 1 / 1 / 2 / 2; - } - - .textarea__size-adjuster { - visibility: hidden; - pointer-events: none; - opacity: 0; - } - - /* Standard textareas */ - .textarea--standard.textarea--focused:not(.textarea--disabled) { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - border-color: var(--wa-form-control-activated-color); - } - - .textarea--standard.textarea--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - /* Filled textareas */ - .textarea--filled.textarea--focused:not(.textarea--disabled) { - outline: var(--wa-focus-ring); - outline-offset: 0; - } - - .textarea--filled.textarea--disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .textarea__control { - font: inherit; - line-height: var(--wa-line-height-expanded); - color: var(--wa-form-control-value-color); - border: none; - background: none; - box-shadow: none; - cursor: inherit; - -webkit-appearance: none; - } - - .textarea__control::-webkit-search-decoration, - .textarea__control::-webkit-search-cancel-button, - .textarea__control::-webkit-search-results-button, - .textarea__control::-webkit-search-results-decoration { - -webkit-appearance: none; - } - - .textarea__control::placeholder { - color: var(--wa-form-control-placeholder-color); - user-select: none; - -webkit-user-select: none; - } - - .textarea__control:focus { - outline: none; - } - - /* - * Size modifiers - */ - - .textarea--small { - font-size: var(--wa-font-size-s); - } - - .textarea--small .textarea__control { - padding: 0.5em var(--wa-space-s); - } - - .textarea--medium { - font-size: var(--wa-font-size-m); - } - - .textarea--medium .textarea__control { - padding: 0.5em var(--wa-space-m); - } - - .textarea--large { - font-size: var(--wa-font-size-l); - } - - .textarea--large .textarea__control { - padding: 0.5em var(--wa-space-l); - } - - /* - * Resize types - */ - - .textarea--resize-none .textarea__control { - resize: none; - } - - .textarea--resize-vertical .textarea__control { - resize: vertical; - } - - .textarea--resize-auto .textarea__control { - height: auto; - resize: none; - overflow-y: hidden; - } -`; diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 87cedf16c..5588efacf 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -12,7 +12,7 @@ import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import formControlStyles from '../../styles/form-control.styles.js'; -import styles from './textarea.styles.js'; +import styles from './textarea.css'; /** * @summary Textareas collect data from the user and allow multiple lines of text. diff --git a/src/components/tooltip/tooltip.css b/src/components/tooltip/tooltip.css new file mode 100644 index 000000000..b7a448bc7 --- /dev/null +++ b/src/components/tooltip/tooltip.css @@ -0,0 +1,53 @@ +:host { + --background-color: var(--wa-tooltip-background-color); + --border-radius: var(--wa-tooltip-border-radius); + --max-width: 30ch; + --padding: var(--wa-space-2xs) var(--wa-space-xs); + + display: inline-block; + position: absolute; + + /** These styles are added so we dont interfere in the DOM. */ +} + +.tooltip { + --arrow-size: var(--wa-tooltip-arrow-size); + --arrow-color: var(--wa-tooltip-background-color); +} + +.tooltip::part(popup) { + z-index: 1000; +} + +.tooltip[placement^='top']::part(popup) { + transform-origin: bottom; +} + +.tooltip[placement^='bottom']::part(popup) { + transform-origin: top; +} + +.tooltip[placement^='left']::part(popup) { + transform-origin: right; +} + +.tooltip[placement^='right']::part(popup) { + transform-origin: left; +} + +.tooltip__body { + display: block; + width: max-content; + max-width: var(--max-width); + border-radius: var(--border-radius); + background-color: var(--background-color); + font: inherit; + color: var(--wa-tooltip-content-color); + font-size: var(--wa-tooltip-font-size); + line-height: var(--wa-tooltip-line-height); + text-align: start; + white-space: normal; + padding: var(--padding); + user-select: none; + -webkit-user-select: none; +} diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts deleted file mode 100644 index d77c7bc91..000000000 --- a/src/components/tooltip/tooltip.styles.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --background-color: var(--wa-tooltip-background-color); - --border-radius: var(--wa-tooltip-border-radius); - --max-width: 30ch; - --padding: var(--wa-space-2xs) var(--wa-space-xs); - - display: inline-block; - position: absolute; - - /** These styles are added so we dont interfere in the DOM. */ - } - - .tooltip { - --arrow-size: var(--wa-tooltip-arrow-size); - --arrow-color: var(--wa-tooltip-background-color); - } - - .tooltip::part(popup) { - z-index: 1000; - } - - .tooltip[placement^='top']::part(popup) { - transform-origin: bottom; - } - - .tooltip[placement^='bottom']::part(popup) { - transform-origin: top; - } - - .tooltip[placement^='left']::part(popup) { - transform-origin: right; - } - - .tooltip[placement^='right']::part(popup) { - transform-origin: left; - } - - .tooltip__body { - display: block; - width: max-content; - max-width: var(--max-width); - border-radius: var(--border-radius); - background-color: var(--background-color); - font: inherit; - color: var(--wa-tooltip-content-color); - font-size: var(--wa-tooltip-font-size); - line-height: var(--wa-tooltip-line-height); - text-align: start; - white-space: normal; - padding: var(--padding); - user-select: none; - -webkit-user-select: none; - } -`; diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 3abaaf150..e0fa7af2a 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -9,7 +9,7 @@ import { WaHideEvent } from '../../events/hide.js'; import { waitForEvent } from '../../internal/event.js'; import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; -import styles from './tooltip.styles.js'; +import styles from './tooltip.css'; import WaPopup from '../popup/popup.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; diff --git a/src/components/tree-item/tree-item.css b/src/components/tree-item/tree-item.css new file mode 100644 index 000000000..b7691fbda --- /dev/null +++ b/src/components/tree-item/tree-item.css @@ -0,0 +1,152 @@ +:host { + --selection-background-color: var(--wa-color-neutral-fill-quiet); + --selection-indicator-color: var(--wa-color-brand-fill-loud); + --expand-button-color: var(--wa-color-text-quiet); + --show-duration: 200ms; + --hide-duration: 200ms; + + display: block; + color: var(--wa-color-text-normal); + outline: 0; + z-index: 0; +} + +:host(:focus) { + outline: none; +} + +slot:not([name])::slotted(wa-icon) { + margin-inline-end: var(--wa-space-xs); +} + +.tree-item { + position: relative; + display: flex; + align-items: stretch; + flex-direction: column; + cursor: default; + user-select: none; + -webkit-user-select: none; +} + +.tree-item__checkbox { + pointer-events: none; +} + +.tree-item__expand-button, +.tree-item__checkbox, +.tree-item__label { + font: inherit; + font-size: var(--wa-font-size-m); +} + +.tree-item__checkbox::part(base) { + display: flex; + align-items: center; +} + +.tree-item__indentation { + display: block; + width: 1em; + flex-shrink: 0; +} + +.tree-item__expand-button { + display: flex; + align-items: center; + justify-content: center; + color: var(--expand-button-color); + width: 2em; + height: 2em; + flex-shrink: 0; + cursor: pointer; +} + +.tree-item__expand-button { + transition: rotate var(--wa-transition-normal) var(--wa-transition-easing); +} + +.tree-item--expanded .tree-item__expand-button { + rotate: 90deg; +} + +.tree-item--expanded.tree-item--rtl .tree-item__expand-button { + rotate: -90deg; +} + +.tree-item--expanded slot[name='expand-icon'], +.tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] { + display: none; +} + +.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot { + display: none; +} + +.tree-item__expand-button--visible { + cursor: pointer; +} + +.tree-item__item { + display: flex; + align-items: center; + border-inline-start: solid 3px transparent; +} + +.tree-item--disabled .tree-item__item { + opacity: 0.5; + outline: none; + cursor: not-allowed; +} + +:host(:focus-visible) .tree-item__item { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); + z-index: 2; +} + +:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item { + background-color: var(--selection-background-color); + border-inline-start-color: var(--selection-indicator-color); +} + +:host(:not([aria-disabled='true'])) .tree-item__expand-button { + color: var(--expand-button-color); +} + +.tree-item__label { + display: flex; + align-items: center; + transition: color var(--wa-transition-normal) var(--wa-transition-easing); +} + +.tree-item__children { + display: block; + font-size: calc(1em + var(--indent-size, var(--wa-space-m))); +} + +/* Indentation lines */ +.tree-item__children { + position: relative; +} + +.tree-item__children::before { + content: ''; + position: absolute; + top: var(--indent-guide-offset); + bottom: var(--indent-guide-offset); + left: calc(1em - (var(--indent-guide-width) / 2) - 1px); + border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color); + z-index: 1; +} + +.tree-item--rtl .tree-item__children::before { + left: auto; + right: 1em; +} + +@media (forced-colors: active) { + :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item { + outline: dashed 1px SelectedItem; + } +} diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts deleted file mode 100644 index 749d8b778..000000000 --- a/src/components/tree-item/tree-item.styles.ts +++ /dev/null @@ -1,156 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --selection-background-color: var(--wa-color-neutral-fill-quiet); - --selection-indicator-color: var(--wa-color-brand-fill-loud); - --expand-button-color: var(--wa-color-text-quiet); - --show-duration: 200ms; - --hide-duration: 200ms; - - display: block; - color: var(--wa-color-text-normal); - outline: 0; - z-index: 0; - } - - :host(:focus) { - outline: none; - } - - slot:not([name])::slotted(wa-icon) { - margin-inline-end: var(--wa-space-xs); - } - - .tree-item { - position: relative; - display: flex; - align-items: stretch; - flex-direction: column; - cursor: default; - user-select: none; - -webkit-user-select: none; - } - - .tree-item__checkbox { - pointer-events: none; - } - - .tree-item__expand-button, - .tree-item__checkbox, - .tree-item__label { - font: inherit; - font-size: var(--wa-font-size-m); - } - - .tree-item__checkbox::part(base) { - display: flex; - align-items: center; - } - - .tree-item__indentation { - display: block; - width: 1em; - flex-shrink: 0; - } - - .tree-item__expand-button { - display: flex; - align-items: center; - justify-content: center; - color: var(--expand-button-color); - width: 2em; - height: 2em; - flex-shrink: 0; - cursor: pointer; - } - - .tree-item__expand-button { - transition: rotate var(--wa-transition-normal) var(--wa-transition-easing); - } - - .tree-item--expanded .tree-item__expand-button { - rotate: 90deg; - } - - .tree-item--expanded.tree-item--rtl .tree-item__expand-button { - rotate: -90deg; - } - - .tree-item--expanded slot[name='expand-icon'], - .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] { - display: none; - } - - .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot { - display: none; - } - - .tree-item__expand-button--visible { - cursor: pointer; - } - - .tree-item__item { - display: flex; - align-items: center; - border-inline-start: solid 3px transparent; - } - - .tree-item--disabled .tree-item__item { - opacity: 0.5; - outline: none; - cursor: not-allowed; - } - - :host(:focus-visible) .tree-item__item { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); - z-index: 2; - } - - :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item { - background-color: var(--selection-background-color); - border-inline-start-color: var(--selection-indicator-color); - } - - :host(:not([aria-disabled='true'])) .tree-item__expand-button { - color: var(--expand-button-color); - } - - .tree-item__label { - display: flex; - align-items: center; - transition: color var(--wa-transition-normal) var(--wa-transition-easing); - } - - .tree-item__children { - display: block; - font-size: calc(1em + var(--indent-size, var(--wa-space-m))); - } - - /* Indentation lines */ - .tree-item__children { - position: relative; - } - - .tree-item__children::before { - content: ''; - position: absolute; - top: var(--indent-guide-offset); - bottom: var(--indent-guide-offset); - left: calc(1em - (var(--indent-guide-width) / 2) - 1px); - border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color); - z-index: 1; - } - - .tree-item--rtl .tree-item__children::before { - left: auto; - right: 1em; - } - - @media (forced-colors: active) { - :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item { - outline: dashed 1px SelectedItem; - } - } -`; diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts index 84c12e2b1..5191d6482 100644 --- a/src/components/tree-item/tree-item.ts +++ b/src/components/tree-item/tree-item.ts @@ -15,7 +15,7 @@ import { WaLazyChangeEvent } from '../../events/lazy-change.js'; import { WaLazyLoadEvent } from '../../events/lazy-load.js'; import { watch } from '../../internal/watch.js'; import { when } from 'lit/directives/when.js'; -import styles from './tree-item.styles.js'; +import styles from './tree-item.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { PropertyValueMap } from 'lit'; diff --git a/src/components/tree/tree.styles.ts b/src/components/tree/tree.css similarity index 53% rename from src/components/tree/tree.styles.ts rename to src/components/tree/tree.css index 666100ae2..b5ca3878e 100644 --- a/src/components/tree/tree.styles.ts +++ b/src/components/tree/tree.css @@ -1,23 +1,19 @@ -import { css } from 'lit'; - -export default css` - :host { - /* +:host { + /* * These are actually used by tree item, but we define them here so they can more easily be set and all tree items * stay consistent. */ - --indent-guide-color: var(--wa-color-surface-border); - --indent-guide-offset: 0; - --indent-guide-style: solid; - --indent-guide-width: 0; - --indent-size: var(--wa-space-l); + --indent-guide-color: var(--wa-color-surface-border); + --indent-guide-offset: 0; + --indent-guide-style: solid; + --indent-guide-width: 0; + --indent-size: var(--wa-space-l); - display: block; + display: block; - /* + /* * Tree item indentation uses the "em" unit to increment its width on each level, so setting the font size to zero * here removes the indentation for all the nodes on the first level. */ - font-size: 0; - } -`; + font-size: 0; +} diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts index 49e111b57..d4dac8a9d 100644 --- a/src/components/tree/tree.ts +++ b/src/components/tree/tree.ts @@ -4,7 +4,7 @@ import { html, isServer } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { WaSelectionChangeEvent } from '../../events/selection-change.js'; import { watch } from '../../internal/watch.js'; -import styles from './tree.styles.js'; +import styles from './tree.css'; import WaTreeItem from '../tree-item/tree-item.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; diff --git a/src/components/viewport-demo/viewport-demo.css b/src/components/viewport-demo/viewport-demo.css new file mode 100644 index 000000000..3958a540d --- /dev/null +++ b/src/components/viewport-demo/viewport-demo.css @@ -0,0 +1,154 @@ +:host { + --viewport-background-color: var(--wa-color-surface-default, canvas); + --viewport-resize: both; + --viewport-min-width: 10em; + --viewport-min-height: 5em; + --viewport-max-width: 100%; + --viewport-padding: var(--wa-space-2xl, 2rem); + --viewport-initial-aspect-ratio: 16 / 9; + --viewport-bezel-width: 0.25em; + + display: block; + /* Needed for measuring the available space */ + contain: inline-size; + container-type: inline-size; + container-name: host; +} + +[part~='frame'] { + --zoom: 1; /* overridden by JS */ + --available-width: calc((100cqw - var(--offset-inline, 0px))); + --iframe-manual-aspect-ratio: calc(var(--iframe-manual-width-px) / var(--iframe-manual-height-px)); + --iframe-manual-width: calc(var(--iframe-manual-width-px) * 1px * var(--zoom)); + --iframe-manual-height: calc(var(--iframe-manual-height-px) * 1px * var(--zoom)); + --width: var(--iframe-manual-width, var(--available-width)); + --height-auto: calc(var(--width) / (var(--aspect-ratio))); + + --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px)); + --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio)); + + display: flex; + flex-flow: column; + align-items: start; + + width: fit-content; + height: fit-content; + + /* Style frame like a window */ + border: var(--viewport-bezel-width) solid transparent; + border-radius: calc(var(--wa-border-radius-s)); + + /* Window-like frame styling */ + --button-params: 0.4em / 0.5em 0.5em border-box; + background: + radial-gradient(circle closest-side, var(--wa-color-red-60) 80%, var(--wa-color-red-50) 98%, transparent) 0.4em + var(--button-params), + radial-gradient(circle closest-side, var(--wa-color-yellow-80) 80%, var(--wa-color-yellow-70) 98%, transparent) + 1.1em var(--button-params), + radial-gradient(circle closest-side, var(--wa-color-green-70) 80%, var(--wa-color-green-60) 98%, transparent) 1.8em + var(--button-params), + var(--wa-color-gray-95); + background-repeat: no-repeat; + box-shadow: + 0 0 0 1px var(--wa-color-gray-90), + var(--wa-shadow-m); + + &.resized { + aspect-ratio: var(--iframe-manual-aspect-ratio); + } + + /* User has not yet resized the viewport */ + &:not(.resized) ::slotted(iframe), + &:not(.resized) slot { + /* Will only be set if we have BOTH width and height */ + aspect-ratio: var(--aspect-ratio); + } +} + +slot { + display: block; + overflow: clip; + width: var(--width); + max-width: var(--available-width); + height: var(--iframe-manual-height, var(--height-auto)); +} + +::slotted(iframe) { + display: block; + flex: auto; + scale: var(--zoom); + transform-origin: top left; + resize: var(--viewport-resize); + overflow: auto; + + /* The width and height specified here are only applied if the iframe is not manually resized */ + width: calc(var(--available-width) / var(--zoom)); + height: calc(var(--height-auto) / var(--zoom)); + + min-width: calc(var(--viewport-min-width, 10em) / var(--zoom)); + max-width: calc(var(--available-width) / var(--zoom)) !important; + min-height: calc(var(--viewport-min-height) / var(--zoom)); + + /* Divide with var(--zoom) to get lengths that stay constant regardless of zoom level */ + border: calc(1px / var(--zoom)) solid var(--wa-color-gray-90); + background: var(--viewport-background-color); +} + +[part~='controls'] { + display: flex; + align-items: center; + align-self: end; + gap: 0.3em; + margin-top: -0.2em; + font-size: var(--wa-font-size-xs); + padding-block-end: 0.25em; + padding-inline: 1em 0.2em; + white-space: nowrap; + + /* Until we can implement info that is not lying, we don’t show it when it's lying */ + .needs-internal-zoom & > * { + opacity: 0 !important; + pointer-events: none; + } + + .dimensions { + word-spacing: -0.15em; + margin-inline-end: 1em; + } + + wa-icon { + display: none; + vertical-align: -0.1em; + font-size: 85%; + color: var(--wa-color-gray-70); + } + + wa-icon-button { + &:not(:hover, :focus) { + opacity: 0.5; + } + + &::part(base) { + padding: 0; + } + } + + .zoom { + display: flex; + align-items: center; + gap: 0.3em; + font-weight: 600; + color: var(--wa-color-text-quiet); + opacity: 80%; + } + + [part~='zoom-in'], + [part~='zoom-in']::part(base) { + cursor: zoom-in; + } + + [part~='zoom-out'], + [part~='zoom-out']::part(base) { + cursor: zoom-out; + } +} diff --git a/src/components/viewport-demo/viewport-demo.styles.ts b/src/components/viewport-demo/viewport-demo.styles.ts deleted file mode 100644 index eb73de3d8..000000000 --- a/src/components/viewport-demo/viewport-demo.styles.ts +++ /dev/null @@ -1,158 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --viewport-background-color: var(--wa-color-surface-default, canvas); - --viewport-resize: both; - --viewport-min-width: 10em; - --viewport-min-height: 5em; - --viewport-max-width: 100%; - --viewport-padding: var(--wa-space-2xl, 2rem); - --viewport-initial-aspect-ratio: 16 / 9; - --viewport-bezel-width: 0.25em; - - display: block; - /* Needed for measuring the available space */ - contain: inline-size; - container-type: inline-size; - container-name: host; - } - - [part~='frame'] { - --zoom: 1; /* overridden by JS */ - --available-width: calc((100cqw - var(--offset-inline, 0px))); - --iframe-manual-aspect-ratio: calc(var(--iframe-manual-width-px) / var(--iframe-manual-height-px)); - --iframe-manual-width: calc(var(--iframe-manual-width-px) * 1px * var(--zoom)); - --iframe-manual-height: calc(var(--iframe-manual-height-px) * 1px * var(--zoom)); - --width: var(--iframe-manual-width, var(--available-width)); - --height-auto: calc(var(--width) / (var(--aspect-ratio))); - - --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px)); - --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio)); - - display: flex; - flex-flow: column; - align-items: start; - - width: fit-content; - height: fit-content; - - /* Style frame like a window */ - border: var(--viewport-bezel-width) solid transparent; - border-radius: calc(var(--wa-border-radius-s)); - - /* Window-like frame styling */ - --button-params: 0.4em / 0.5em 0.5em border-box; - background: - radial-gradient(circle closest-side, var(--wa-color-red-60) 80%, var(--wa-color-red-50) 98%, transparent) 0.4em - var(--button-params), - radial-gradient(circle closest-side, var(--wa-color-yellow-80) 80%, var(--wa-color-yellow-70) 98%, transparent) - 1.1em var(--button-params), - radial-gradient(circle closest-side, var(--wa-color-green-70) 80%, var(--wa-color-green-60) 98%, transparent) - 1.8em var(--button-params), - var(--wa-color-gray-95); - background-repeat: no-repeat; - box-shadow: - 0 0 0 1px var(--wa-color-gray-90), - var(--wa-shadow-m); - - &.resized { - aspect-ratio: var(--iframe-manual-aspect-ratio); - } - - /* User has not yet resized the viewport */ - &:not(.resized) ::slotted(iframe), - &:not(.resized) slot { - /* Will only be set if we have BOTH width and height */ - aspect-ratio: var(--aspect-ratio); - } - } - - slot { - display: block; - overflow: clip; - width: var(--width); - max-width: var(--available-width); - height: var(--iframe-manual-height, var(--height-auto)); - } - - ::slotted(iframe) { - display: block; - flex: auto; - scale: var(--zoom); - transform-origin: top left; - resize: var(--viewport-resize); - overflow: auto; - - /* The width and height specified here are only applied if the iframe is not manually resized */ - width: calc(var(--available-width) / var(--zoom)); - height: calc(var(--height-auto) / var(--zoom)); - - min-width: calc(var(--viewport-min-width, 10em) / var(--zoom)); - max-width: calc(var(--available-width) / var(--zoom)) !important; - min-height: calc(var(--viewport-min-height) / var(--zoom)); - - /* Divide with var(--zoom) to get lengths that stay constant regardless of zoom level */ - border: calc(1px / var(--zoom)) solid var(--wa-color-gray-90); - background: var(--viewport-background-color); - } - - [part~='controls'] { - display: flex; - align-items: center; - align-self: end; - gap: 0.3em; - margin-top: -0.2em; - font-size: var(--wa-font-size-xs); - padding-block-end: 0.25em; - padding-inline: 1em 0.2em; - white-space: nowrap; - - /* Until we can implement info that is not lying, we don’t show it when it's lying */ - .needs-internal-zoom & > * { - opacity: 0 !important; - pointer-events: none; - } - - .dimensions { - word-spacing: -0.15em; - margin-inline-end: 1em; - } - - wa-icon { - display: none; - vertical-align: -0.1em; - font-size: 85%; - color: var(--wa-color-gray-70); - } - - wa-icon-button { - &:not(:hover, :focus) { - opacity: 0.5; - } - - &::part(base) { - padding: 0; - } - } - - .zoom { - display: flex; - align-items: center; - gap: 0.3em; - font-weight: 600; - color: var(--wa-color-text-quiet); - opacity: 80%; - } - - [part~='zoom-in'], - [part~='zoom-in']::part(base) { - cursor: zoom-in; - } - - [part~='zoom-out'], - [part~='zoom-out']::part(base) { - cursor: zoom-out; - } - } -`; diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts index b95832b3f..10b863eea 100644 --- a/src/components/viewport-demo/viewport-demo.ts +++ b/src/components/viewport-demo/viewport-demo.ts @@ -5,7 +5,7 @@ import { getComputedStyle } from '../../internal/computedStyle.js'; import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { watch } from '../../internal/watch.js'; -import styles from './viewport-demo.styles.js'; +import styles from './viewport-demo.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; export interface ViewportDimensions { diff --git a/src/components/visually-hidden/visually-hidden.css b/src/components/visually-hidden/visually-hidden.css new file mode 100644 index 000000000..82b5a99b7 --- /dev/null +++ b/src/components/visually-hidden/visually-hidden.css @@ -0,0 +1,11 @@ +:host(:not(:focus-within)) { + position: absolute !important; + width: 1px !important; + height: 1px !important; + clip: rect(0 0 0 0) !important; + clip-path: inset(50%) !important; + border: none !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; +} diff --git a/src/components/visually-hidden/visually-hidden.styles.ts b/src/components/visually-hidden/visually-hidden.styles.ts deleted file mode 100644 index fd1d8910d..000000000 --- a/src/components/visually-hidden/visually-hidden.styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host(:not(:focus-within)) { - position: absolute !important; - width: 1px !important; - height: 1px !important; - clip: rect(0 0 0 0) !important; - clip-path: inset(50%) !important; - border: none !important; - overflow: hidden !important; - white-space: nowrap !important; - padding: 0 !important; - } -`; diff --git a/src/components/visually-hidden/visually-hidden.ts b/src/components/visually-hidden/visually-hidden.ts index 190dc328f..2a7c65ed1 100644 --- a/src/components/visually-hidden/visually-hidden.ts +++ b/src/components/visually-hidden/visually-hidden.ts @@ -1,6 +1,6 @@ import { customElement } from 'lit/decorators.js'; import { html } from 'lit'; -import styles from './visually-hidden.styles.js'; +import styles from './visually-hidden.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; /** diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index a868ae00b..1ca0262bf 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -1,5 +1,5 @@ import { CustomErrorValidator } from './validators/custom-error-validator.js'; -import { isServer, LitElement } from 'lit'; +import { isServer, LitElement, unsafeCSS } from 'lit'; import { property } from 'lit/decorators.js'; import { WaInvalidEvent } from '../events/invalid.js'; import componentStyles from '../styles/component.styles.js'; @@ -15,7 +15,7 @@ export default class WebAwesomeElement extends LitElement { * Shared component styles will automatically be added. * If that is not desirable, the subclass can define its own styles property. */ - static shadowStyle?: CSSResultGroup | CSSResult; + static shadowStyle?: CSSResultGroup | CSSResult | string | (CSSResult | string)[]; /** The base styles property will only get called if the subclass does not define a styles property of its own */ static get styles(): CSSResultGroup { @@ -24,7 +24,11 @@ export default class WebAwesomeElement extends LitElement { ? this.shadowStyle : [this.shadowStyle] : []; - return [componentStyles, ...shadowStyle]; + + // Convert any string styles to Lit’s CSSResult + const shadowStyles = shadowStyle.map(style => (typeof style === 'string' ? unsafeCSS(style) : style)); + + return [componentStyles, ...shadowStyles]; } @property({ type: Boolean, reflect: true, attribute: 'did-ssr' }) didSSR = isServer || Boolean(this.shadowRoot);