From 04534c96b55edfaea58aede628981ab1596fac44 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 18 May 2023 11:18:15 -0400 Subject: [PATCH 01/61] wip --- internal/styles/classes.mjs | 3 + internal/styles/package.json | 27 ++ internal/styles/styles.module.css | 2 + internal/styles/vite.config.mjs | 23 ++ packages/itwinui-css/scripts/generateCss.js | 14 +- packages/itwinui-css/src/global.scss | 16 +- packages/itwinui-variables/src/index.scss | 13 +- yarn.lock | 261 ++++++++++---------- 8 files changed, 196 insertions(+), 163 deletions(-) create mode 100644 internal/styles/classes.mjs create mode 100644 internal/styles/package.json create mode 100644 internal/styles/styles.module.css create mode 100644 internal/styles/vite.config.mjs diff --git a/internal/styles/classes.mjs b/internal/styles/classes.mjs new file mode 100644 index 00000000000..d56b9fc9d85 --- /dev/null +++ b/internal/styles/classes.mjs @@ -0,0 +1,3 @@ +import styles from './styles.module.css'; + +export default styles; diff --git a/internal/styles/package.json b/internal/styles/package.json new file mode 100644 index 00000000000..ed1ce812dbc --- /dev/null +++ b/internal/styles/package.json @@ -0,0 +1,27 @@ +{ + "name": "styles", + "type": "module", + "version": "0.0.0", + "private": true, + "files": [ + "dist" + ], + "main": "dist/styles.cjs", + "module": "dist/styles.js", + "exports": { + ".": { + "import": "./dist/styles.js", + "require": "./dist/styles.cjs" + }, + "./*": "./dist/*.js" + }, + "devDependencies": { + "@itwin/itwinui-css": "*", + "@itwin/itwinui-variables": "*", + "vite": "^4.3.8" + }, + "scripts": { + "dev": "vite build --watch", + "build": "vite build" + } +} diff --git a/internal/styles/styles.module.css b/internal/styles/styles.module.css new file mode 100644 index 00000000000..7144f5a540a --- /dev/null +++ b/internal/styles/styles.module.css @@ -0,0 +1,2 @@ +@import '@itwin/itwinui-variables/index.css'; +@import '@itwin/itwinui-css/css/all.css'; diff --git a/internal/styles/vite.config.mjs b/internal/styles/vite.config.mjs new file mode 100644 index 00000000000..62296f9d9bc --- /dev/null +++ b/internal/styles/vite.config.mjs @@ -0,0 +1,23 @@ +import { resolve } from 'path'; +import { defineConfig } from 'vite'; + +// https://vitejs.dev/config/ +export default defineConfig({ + build: { + minify: false, + cssMinify: false, + lib: { + entry: resolve(__dirname, './classes.mjs'), + fileName: 'styles', + formats: ['es', 'cjs'], + }, + }, + css: { + modules: { + // TODO: use proper hash in v4 + generateScopedName: (name, filename, css) => { + return `iui3-${name.replace('iui-', '')}`; + }, + }, + }, +}); diff --git a/packages/itwinui-css/scripts/generateCss.js b/packages/itwinui-css/scripts/generateCss.js index d83cfad1609..2abeaaaddd9 100644 --- a/packages/itwinui-css/scripts/generateCss.js +++ b/packages/itwinui-css/scripts/generateCss.js @@ -30,19 +30,9 @@ const compileScss = async (path, outFile) => { targets, }).code; - let finalOutput = processedOutput; - - if (!['all.css', 'global.css'].includes(outFilename)) { - finalOutput = postcss([ - postcssScoper({ - scope: ':where(.iui-root, [data-iui-theme])', - }), - ]).process(processedOutput).css; - } - - fs.writeFileSync(`${outDir}/${outFilename}`, finalOutput); + fs.writeFileSync(`${outDir}/${outFilename}`, processedOutput); console.log(` Wrote -> ${outFilename}`); - resolve(finalOutput); + resolve(processedOutput); } catch (error) { reject(`${error}\n in ${path}`); } diff --git a/packages/itwinui-css/src/global.scss b/packages/itwinui-css/src/global.scss index b7a2bef7efe..4fca518208f 100644 --- a/packages/itwinui-css/src/global.scss +++ b/packages/itwinui-css/src/global.scss @@ -2,17 +2,6 @@ // See LICENSE.md in the project root for license terms and full copyright notice. @use 'mixins'; -// reset anything that may have been set by v1 -:where(.iui-body, [class*='iui-theme-']) :where(.iui-root, [data-iui-theme]) { - :where([class*='iui-']:not(.iui-root, svg *)) { - &, - &::before, - &::after { - all: revert; - } - } -} - :where(.iui-root) { color: var(--iui-color-text); font-size: var(--iui-font-size-1); @@ -20,7 +9,7 @@ font-family: var(--iui-font-sans); // border-box on all iui- elements and their descendants under iui-root, excluding any nested iui-root elements - :where([class*='iui-']) { + :where([class*='iui-'], [class*='iui3-']) { &:where(:not(.iui-root)), * { &, @@ -43,8 +32,7 @@ background-color: var(--iui-color-background-backdrop); } -// text selection and scrollbar styling on [data-iui-theme], iui-root and all elements under it -:where([data-iui-theme]), +// text selection and scrollbar styling on iui-root and all elements under it :where(.iui-root), :where(.iui-root *) { @include mixins.iui-text-selection; diff --git a/packages/itwinui-variables/src/index.scss b/packages/itwinui-variables/src/index.scss index 80805d98450..947c3d8e497 100644 --- a/packages/itwinui-variables/src/index.scss +++ b/packages/itwinui-variables/src/index.scss @@ -8,8 +8,7 @@ @use './colors'; // global vars shared between all themes -.iui-root, -[data-iui-theme] { +:where(.iui-root) { @include spacing; @include component-heights; @include border-radii; @@ -20,19 +19,21 @@ @include colors.unthemed; } +:where( .iui-root, // default to light theme on root if data attribute not set -[data-iui-theme='light'] { +.iui-root[data-iui-theme='light'] +) { @include themes.light-theme; - &[data-iui-contrast='high'] { + &:where([data-iui-contrast='high']) { @include themes.light-hc-theme; } } -[data-iui-theme='dark'] { +:where(.iui-root[data-iui-theme='dark']) { @include themes.dark-theme; - &[data-iui-contrast='high'] { + &:where([data-iui-contrast='high']) { @include themes.dark-hc-theme; } } diff --git a/yarn.lock b/yarn.lock index c190f386af5..2b878e782ac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1638,226 +1638,226 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== -"@esbuild/android-arm64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.16.17.tgz#cf91e86df127aa3d141744edafcba0abdc577d23" - integrity sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg== - "@esbuild/android-arm64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz#893ad71f3920ccb919e1757c387756a9bca2ef42" integrity sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA== -"@esbuild/android-arm@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.16.17.tgz#025b6246d3f68b7bbaa97069144fb5fb70f2fff2" - integrity sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw== +"@esbuild/android-arm64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz#bafb75234a5d3d1b690e7c2956a599345e84a2fd" + integrity sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA== "@esbuild/android-arm@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.15.tgz#143e0d4e4c08c786ea410b9a7739779a9a1315d8" integrity sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg== -"@esbuild/android-x64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.16.17.tgz#c820e0fef982f99a85c4b8bfdd582835f04cd96e" - integrity sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ== +"@esbuild/android-arm@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.19.tgz#5898f7832c2298bc7d0ab53701c57beb74d78b4d" + integrity sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A== "@esbuild/android-x64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.15.tgz#d2d12a7676b2589864281b2274355200916540bc" integrity sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ== -"@esbuild/darwin-arm64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.16.17.tgz#edef4487af6b21afabba7be5132c26d22379b220" - integrity sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w== +"@esbuild/android-x64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.19.tgz#658368ef92067866d95fb268719f98f363d13ae1" + integrity sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww== "@esbuild/darwin-arm64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz#2e88e79f1d327a2a7d9d06397e5232eb0a473d61" integrity sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA== -"@esbuild/darwin-x64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.16.17.tgz#42829168730071c41ef0d028d8319eea0e2904b4" - integrity sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg== +"@esbuild/darwin-arm64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz#584c34c5991b95d4d48d333300b1a4e2ff7be276" + integrity sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg== "@esbuild/darwin-x64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz#9384e64c0be91388c57be6d3a5eaf1c32a99c91d" integrity sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg== -"@esbuild/freebsd-arm64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.16.17.tgz#1f4af488bfc7e9ced04207034d398e793b570a27" - integrity sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw== +"@esbuild/darwin-x64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz#7751d236dfe6ce136cce343dce69f52d76b7f6cb" + integrity sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw== "@esbuild/freebsd-arm64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz#2ad5a35bc52ebd9ca6b845dbc59ba39647a93c1a" integrity sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg== -"@esbuild/freebsd-x64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.16.17.tgz#636306f19e9bc981e06aa1d777302dad8fddaf72" - integrity sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug== +"@esbuild/freebsd-arm64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz#cacd171665dd1d500f45c167d50c6b7e539d5fd2" + integrity sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ== "@esbuild/freebsd-x64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz#b513a48446f96c75fda5bef470e64d342d4379cd" integrity sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ== -"@esbuild/linux-arm64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.16.17.tgz#a003f7ff237c501e095d4f3a09e58fc7b25a4aca" - integrity sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g== +"@esbuild/freebsd-x64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz#0769456eee2a08b8d925d7c00b79e861cb3162e4" + integrity sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ== "@esbuild/linux-arm64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz#9697b168175bfd41fa9cc4a72dd0d48f24715f31" integrity sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA== -"@esbuild/linux-arm@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.16.17.tgz#b591e6a59d9c4fe0eeadd4874b157ab78cf5f196" - integrity sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ== +"@esbuild/linux-arm64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz#38e162ecb723862c6be1c27d6389f48960b68edb" + integrity sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg== "@esbuild/linux-arm@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz#5b22062c54f48cd92fab9ffd993732a52db70cd3" integrity sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw== -"@esbuild/linux-ia32@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.16.17.tgz#24333a11027ef46a18f57019450a5188918e2a54" - integrity sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg== +"@esbuild/linux-arm@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz#1a2cd399c50040184a805174a6d89097d9d1559a" + integrity sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA== "@esbuild/linux-ia32@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz#eb28a13f9b60b5189fcc9e98e1024f6b657ba54c" integrity sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q== -"@esbuild/linux-loong64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.16.17.tgz#d5ad459d41ed42bbd4d005256b31882ec52227d8" - integrity sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ== +"@esbuild/linux-ia32@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz#e28c25266b036ce1cabca3c30155222841dc035a" + integrity sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ== "@esbuild/linux-loong64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz#32454bdfe144cf74b77895a8ad21a15cb81cfbe5" integrity sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ== -"@esbuild/linux-mips64el@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.16.17.tgz#4e5967a665c38360b0a8205594377d4dcf9c3726" - integrity sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw== +"@esbuild/linux-loong64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz#0f887b8bb3f90658d1a0117283e55dbd4c9dcf72" + integrity sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ== "@esbuild/linux-mips64el@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz#af12bde0d775a318fad90eb13a0455229a63987c" integrity sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ== -"@esbuild/linux-ppc64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.16.17.tgz#206443a02eb568f9fdf0b438fbd47d26e735afc8" - integrity sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g== +"@esbuild/linux-mips64el@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz#f5d2a0b8047ea9a5d9f592a178ea054053a70289" + integrity sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A== "@esbuild/linux-ppc64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz#34c5ed145b2dfc493d3e652abac8bd3baa3865a5" integrity sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg== -"@esbuild/linux-riscv64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.16.17.tgz#c351e433d009bf256e798ad048152c8d76da2fc9" - integrity sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw== +"@esbuild/linux-ppc64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz#876590e3acbd9fa7f57a2c7d86f83717dbbac8c7" + integrity sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg== "@esbuild/linux-riscv64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz#87bd515e837f2eb004b45f9e6a94dc5b93f22b92" integrity sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA== -"@esbuild/linux-s390x@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.16.17.tgz#661f271e5d59615b84b6801d1c2123ad13d9bd87" - integrity sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w== +"@esbuild/linux-riscv64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz#7f49373df463cd9f41dc34f9b2262d771688bf09" + integrity sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA== "@esbuild/linux-s390x@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz#20bf7947197f199ddac2ec412029a414ceae3aa3" integrity sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg== -"@esbuild/linux-x64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.16.17.tgz#e4ba18e8b149a89c982351443a377c723762b85f" - integrity sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw== +"@esbuild/linux-s390x@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz#e2afd1afcaf63afe2c7d9ceacd28ec57c77f8829" + integrity sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q== "@esbuild/linux-x64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz#31b93f9c94c195e852c20cd3d1914a68aa619124" integrity sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg== -"@esbuild/netbsd-x64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.16.17.tgz#7d4f4041e30c5c07dd24ffa295c73f06038ec775" - integrity sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA== +"@esbuild/linux-x64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz#8a0e9738b1635f0c53389e515ae83826dec22aa4" + integrity sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw== "@esbuild/netbsd-x64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz#8da299b3ac6875836ca8cdc1925826498069ac65" integrity sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA== -"@esbuild/openbsd-x64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.16.17.tgz#970fa7f8470681f3e6b1db0cc421a4af8060ec35" - integrity sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg== +"@esbuild/netbsd-x64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz#c29fb2453c6b7ddef9a35e2c18b37bda1ae5c462" + integrity sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q== "@esbuild/openbsd-x64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz#04a1ec3d4e919714dba68dcf09eeb1228ad0d20c" integrity sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w== -"@esbuild/sunos-x64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.16.17.tgz#abc60e7c4abf8b89fb7a4fe69a1484132238022c" - integrity sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw== +"@esbuild/openbsd-x64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz#95e75a391403cb10297280d524d66ce04c920691" + integrity sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g== "@esbuild/sunos-x64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz#6694ebe4e16e5cd7dab6505ff7c28f9c1c695ce5" integrity sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ== -"@esbuild/win32-arm64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.16.17.tgz#7b0ff9e8c3265537a7a7b1fd9a24e7bd39fcd87a" - integrity sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw== +"@esbuild/sunos-x64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz#722eaf057b83c2575937d3ffe5aeb16540da7273" + integrity sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg== "@esbuild/win32-arm64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz#1f95b2564193c8d1fee8f8129a0609728171d500" integrity sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q== -"@esbuild/win32-ia32@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.16.17.tgz#e90fe5267d71a7b7567afdc403dfd198c292eb09" - integrity sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig== +"@esbuild/win32-arm64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz#9aa9dc074399288bdcdd283443e9aeb6b9552b6f" + integrity sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag== "@esbuild/win32-ia32@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz#c362b88b3df21916ed7bcf75c6d09c6bf3ae354a" integrity sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w== -"@esbuild/win32-x64@0.16.17": - version "0.16.17" - resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz#c5a1a4bfe1b57f0c3e61b29883525c6da3e5c091" - integrity sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q== +"@esbuild/win32-ia32@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz#95ad43c62ad62485e210f6299c7b2571e48d2b03" + integrity sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw== "@esbuild/win32-x64@0.17.15": version "0.17.15" resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz#c2e737f3a201ebff8e2ac2b8e9f246b397ad19b8" integrity sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA== +"@esbuild/win32-x64@0.17.19": + version "0.17.19" + resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061" + integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA== + "@eslint-community/eslint-utils@^4.2.0": version "4.4.0" resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59" @@ -6693,34 +6693,6 @@ esbuild-register@^3.4.0: dependencies: debug "^4.3.4" -esbuild@^0.16.14: - version "0.16.17" - resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.16.17.tgz#fc2c3914c57ee750635fee71b89f615f25065259" - integrity sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg== - optionalDependencies: - "@esbuild/android-arm" "0.16.17" - "@esbuild/android-arm64" "0.16.17" - "@esbuild/android-x64" "0.16.17" - "@esbuild/darwin-arm64" "0.16.17" - "@esbuild/darwin-x64" "0.16.17" - "@esbuild/freebsd-arm64" "0.16.17" - "@esbuild/freebsd-x64" "0.16.17" - "@esbuild/linux-arm" "0.16.17" - "@esbuild/linux-arm64" "0.16.17" - "@esbuild/linux-ia32" "0.16.17" - "@esbuild/linux-loong64" "0.16.17" - "@esbuild/linux-mips64el" "0.16.17" - "@esbuild/linux-ppc64" "0.16.17" - "@esbuild/linux-riscv64" "0.16.17" - "@esbuild/linux-s390x" "0.16.17" - "@esbuild/linux-x64" "0.16.17" - "@esbuild/netbsd-x64" "0.16.17" - "@esbuild/openbsd-x64" "0.16.17" - "@esbuild/sunos-x64" "0.16.17" - "@esbuild/win32-arm64" "0.16.17" - "@esbuild/win32-ia32" "0.16.17" - "@esbuild/win32-x64" "0.16.17" - esbuild@^0.17.0: version "0.17.15" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.15.tgz#209ebc87cb671ffb79574db93494b10ffaf43cbc" @@ -6749,6 +6721,34 @@ esbuild@^0.17.0: "@esbuild/win32-ia32" "0.17.15" "@esbuild/win32-x64" "0.17.15" +esbuild@^0.17.5: + version "0.17.19" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.19.tgz#087a727e98299f0462a3d0bcdd9cd7ff100bd955" + integrity sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw== + optionalDependencies: + "@esbuild/android-arm" "0.17.19" + "@esbuild/android-arm64" "0.17.19" + "@esbuild/android-x64" "0.17.19" + "@esbuild/darwin-arm64" "0.17.19" + "@esbuild/darwin-x64" "0.17.19" + "@esbuild/freebsd-arm64" "0.17.19" + "@esbuild/freebsd-x64" "0.17.19" + "@esbuild/linux-arm" "0.17.19" + "@esbuild/linux-arm64" "0.17.19" + "@esbuild/linux-ia32" "0.17.19" + "@esbuild/linux-loong64" "0.17.19" + "@esbuild/linux-mips64el" "0.17.19" + "@esbuild/linux-ppc64" "0.17.19" + "@esbuild/linux-riscv64" "0.17.19" + "@esbuild/linux-s390x" "0.17.19" + "@esbuild/linux-x64" "0.17.19" + "@esbuild/netbsd-x64" "0.17.19" + "@esbuild/openbsd-x64" "0.17.19" + "@esbuild/sunos-x64" "0.17.19" + "@esbuild/win32-arm64" "0.17.19" + "@esbuild/win32-ia32" "0.17.19" + "@esbuild/win32-x64" "0.17.19" + escalade@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" @@ -11960,7 +11960,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@8.4.14, postcss@8.4.20, postcss@^7, postcss@^8.3.11, postcss@^8.4.21: +postcss@8.4.14, postcss@8.4.20, postcss@^7, postcss@^8.3.11, postcss@^8.4.21, postcss@^8.4.23: version "8.4.20" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.20.tgz#64c52f509644cecad8567e949f4081d98349dc56" integrity sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g== @@ -12770,7 +12770,7 @@ resolve@^1.1.6: path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" -resolve@^1.10.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.20.0, resolve@^1.22.1: +resolve@^1.10.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.20.0: version "1.22.1" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw== @@ -12898,10 +12898,10 @@ rimraf@~2.6.2: optionalDependencies: fsevents "~2.3.2" -rollup@^3.10.0: - version "3.15.0" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.15.0.tgz#6f4105e8c4b8145229657b74ad660b02fbfacc05" - integrity sha512-F9hrCAhnp5/zx/7HYmftvsNBkMfLfk/dXUh73hPSM2E3CRgap65orDNJbLetoiUFwSAk6iHPLvBrZ5iHYvzqsg== +rollup@^3.21.0: + version "3.22.0" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.22.0.tgz#e6671baebdd473154ac7998bbc57faabcd7bba20" + integrity sha512-imsigcWor5Y/dC0rz2q0bBt9PabcL3TORry2hAa6O6BuMvY71bqHyfReAz5qyAqiQATD1m70qdntqBfBQjVWpQ== optionalDependencies: fsevents "~2.3.2" @@ -14815,15 +14815,14 @@ vfile@^5.0.0, vfile@^5.3.2: unist-util-stringify-position "^3.0.0" vfile-message "^3.0.0" -vite@^4.0.3, vite@^4.1.1: - version "4.1.4" - resolved "https://registry.yarnpkg.com/vite/-/vite-4.1.4.tgz#170d93bcff97e0ebc09764c053eebe130bfe6ca0" - integrity sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg== +vite@^4.0.3, vite@^4.1.1, vite@^4.3.8: + version "4.3.8" + resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.8.tgz#70cd6a294ab52d7fb8f37f5bc63d117dd19e9918" + integrity sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ== dependencies: - esbuild "^0.16.14" - postcss "^8.4.21" - resolve "^1.22.1" - rollup "^3.10.0" + esbuild "^0.17.5" + postcss "^8.4.23" + rollup "^3.21.0" optionalDependencies: fsevents "~2.3.2" From e112b9fe960de2db576382fde8c07e894961cf4a Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 25 May 2023 14:54:02 -0400 Subject: [PATCH 02/61] move inside src --- packages/itwinui-react/.gitignore | 3 +++ packages/itwinui-react/src/styles/.gitignore | 5 +++++ {internal => packages/itwinui-react/src}/styles/classes.mjs | 0 {internal => packages/itwinui-react/src}/styles/package.json | 5 +++-- .../itwinui-react/src}/styles/styles.module.css | 0 .../itwinui-react/src}/styles/vite.config.mjs | 4 ++-- 6 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 packages/itwinui-react/src/styles/.gitignore rename {internal => packages/itwinui-react/src}/styles/classes.mjs (100%) rename {internal => packages/itwinui-react/src}/styles/package.json (84%) rename {internal => packages/itwinui-react/src}/styles/styles.module.css (100%) rename {internal => packages/itwinui-react/src}/styles/vite.config.mjs (83%) diff --git a/packages/itwinui-react/.gitignore b/packages/itwinui-react/.gitignore index 5ab0055893f..c6f5f2b6ca5 100644 --- a/packages/itwinui-react/.gitignore +++ b/packages/itwinui-react/.gitignore @@ -11,6 +11,9 @@ esm # Compiled Styles src/**/*.css +# CSS modules +!src/styles/* + # Storybook storybook-static/* diff --git a/packages/itwinui-react/src/styles/.gitignore b/packages/itwinui-react/src/styles/.gitignore new file mode 100644 index 00000000000..78b2c8c98f7 --- /dev/null +++ b/packages/itwinui-react/src/styles/.gitignore @@ -0,0 +1,5 @@ +.turbo +node_modules +dist +!dist/styles.d.ts + diff --git a/internal/styles/classes.mjs b/packages/itwinui-react/src/styles/classes.mjs similarity index 100% rename from internal/styles/classes.mjs rename to packages/itwinui-react/src/styles/classes.mjs diff --git a/internal/styles/package.json b/packages/itwinui-react/src/styles/package.json similarity index 84% rename from internal/styles/package.json rename to packages/itwinui-react/src/styles/package.json index ed1ce812dbc..1f5eab7ed38 100644 --- a/internal/styles/package.json +++ b/packages/itwinui-react/src/styles/package.json @@ -1,5 +1,4 @@ { - "name": "styles", "type": "module", "version": "0.0.0", "private": true, @@ -8,12 +7,14 @@ ], "main": "dist/styles.cjs", "module": "dist/styles.js", + "types": "dist/styles.d.ts", "exports": { ".": { + "types": "./dist/styles.d.ts", "import": "./dist/styles.js", "require": "./dist/styles.cjs" }, - "./*": "./dist/*.js" + "./*": "./*" }, "devDependencies": { "@itwin/itwinui-css": "*", diff --git a/internal/styles/styles.module.css b/packages/itwinui-react/src/styles/styles.module.css similarity index 100% rename from internal/styles/styles.module.css rename to packages/itwinui-react/src/styles/styles.module.css diff --git a/internal/styles/vite.config.mjs b/packages/itwinui-react/src/styles/vite.config.mjs similarity index 83% rename from internal/styles/vite.config.mjs rename to packages/itwinui-react/src/styles/vite.config.mjs index 62296f9d9bc..0c2d686bfce 100644 --- a/internal/styles/vite.config.mjs +++ b/packages/itwinui-react/src/styles/vite.config.mjs @@ -9,13 +9,13 @@ export default defineConfig({ lib: { entry: resolve(__dirname, './classes.mjs'), fileName: 'styles', - formats: ['es', 'cjs'], + formats: ['es'], }, }, css: { modules: { // TODO: use proper hash in v4 - generateScopedName: (name, filename, css) => { + generateScopedName: (name) => { return `iui3-${name.replace('iui-', '')}`; }, }, From 858e5de85dd734944071cdc3ef830125ca677790 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 25 May 2023 15:18:09 -0400 Subject: [PATCH 03/61] .js in folder name --- packages/itwinui-react/.swcrc | 3 +- packages/itwinui-react/package.json | 16 +++++++---- .../src/core/utils/components/Box.tsx | 22 ++++++++++++++- .../src/{styles => styles.js}/.gitignore | 2 +- .../src/{styles => styles.js}/classes.mjs | 0 .../src/styles.js/dist/styles.d.ts | 1 + .../itwinui-react/src/styles.js/package.json | 18 ++++++++++++ .../{styles => styles.js}/styles.module.css | 0 .../src/{styles => styles.js}/vite.config.mjs | 4 +-- .../itwinui-react/src/styles/package.json | 28 ------------------- 10 files changed, 55 insertions(+), 39 deletions(-) rename packages/itwinui-react/src/{styles => styles.js}/.gitignore (69%) rename packages/itwinui-react/src/{styles => styles.js}/classes.mjs (100%) create mode 100644 packages/itwinui-react/src/styles.js/dist/styles.d.ts create mode 100644 packages/itwinui-react/src/styles.js/package.json rename packages/itwinui-react/src/{styles => styles.js}/styles.module.css (100%) rename packages/itwinui-react/src/{styles => styles.js}/vite.config.mjs (80%) delete mode 100644 packages/itwinui-react/src/styles/package.json diff --git a/packages/itwinui-react/.swcrc b/packages/itwinui-react/.swcrc index bf12686ff7e..f61907b2c22 100644 --- a/packages/itwinui-react/.swcrc +++ b/packages/itwinui-react/.swcrc @@ -7,5 +7,6 @@ }, "module": { "type": "es6" - } + }, + "exclude": ["src/styles.js"] } diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 98d61f3336a..d0ddc3584b1 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -51,7 +51,8 @@ "ux" ], "scripts": { - "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json", + "build": "yarn clean:build && yarn build:styles && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json", + "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", "clean:build": "rimraf esm && rimraf cjs", "clean:coverage": "rimraf coverage", @@ -61,15 +62,14 @@ "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write", "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0", "lint:fix": "yarn lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"", - "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn dev:types\"", + "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn dev:styles\" \"yarn dev:types\"", "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", - "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"" + "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", + "dev:styles": "yarn build:styles --watch" }, "dependencies": { - "@itwin/itwinui-css": "^1.11.1", "@itwin/itwinui-illustrations-react": "^2.0.0", - "@itwin/itwinui-variables": "^2.0.0", "@tippyjs/react": "^4.2.6", "@types/react-table": "^7.0.18", "classnames": "^2.2.6", @@ -79,6 +79,8 @@ }, "devDependencies": { "@babel/core": "^7.12.10", + "@itwin/itwinui-css": "*", + "@itwin/itwinui-variables": "*", "@swc/cli": "^0.1.57", "@swc/core": "^1.3.21", "@testing-library/jest-dom": "^5.16.4", @@ -105,10 +107,12 @@ "markdown-to-jsx": "6.11.4", "react": "^18.0.0", "react-dom": "^18.0.0", + "styles": "*", "ts-jest": "^28.0.2", "ts-loader": "^9.2.8", "ts-node": "^8.0.2", - "typescript": "^4.4.3" + "typescript": "^4.4.3", + "vite": "^4.3.8" }, "peerDependencies": { "react": ">=16.8.6 < 19.0.0", diff --git a/packages/itwinui-react/src/core/utils/components/Box.tsx b/packages/itwinui-react/src/core/utils/components/Box.tsx index 7d4925bc672..b149125ac28 100644 --- a/packages/itwinui-react/src/core/utils/components/Box.tsx +++ b/packages/itwinui-react/src/core/utils/components/Box.tsx @@ -2,11 +2,31 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; import { polymorphic } from '../functions/polymorphic.js'; +import styles from '../../../styles.js'; +import type { PolymorphicForwardRefComponent } from '../props.js'; + +const BoxInternal = polymorphic.div(''); /** * Polymorphic component that renders a div element by default. * Intended to be used as a base for other components. * @private */ -export const Box = polymorphic.div(''); +export const Box = React.forwardRef((props, forwardedRef) => { + return ( + + ); +}) as PolymorphicForwardRefComponent<'div'>; + +const getScopedClassName = (className = '') => { + return className + .split(' ') + .map((c) => (c in styles ? styles[c] : c)) + .join(' '); +}; diff --git a/packages/itwinui-react/src/styles/.gitignore b/packages/itwinui-react/src/styles.js/.gitignore similarity index 69% rename from packages/itwinui-react/src/styles/.gitignore rename to packages/itwinui-react/src/styles.js/.gitignore index 78b2c8c98f7..d797d693d9c 100644 --- a/packages/itwinui-react/src/styles/.gitignore +++ b/packages/itwinui-react/src/styles.js/.gitignore @@ -2,4 +2,4 @@ node_modules dist !dist/styles.d.ts - +!styles.module.css diff --git a/packages/itwinui-react/src/styles/classes.mjs b/packages/itwinui-react/src/styles.js/classes.mjs similarity index 100% rename from packages/itwinui-react/src/styles/classes.mjs rename to packages/itwinui-react/src/styles.js/classes.mjs diff --git a/packages/itwinui-react/src/styles.js/dist/styles.d.ts b/packages/itwinui-react/src/styles.js/dist/styles.d.ts new file mode 100644 index 00000000000..41e2ddc11da --- /dev/null +++ b/packages/itwinui-react/src/styles.js/dist/styles.d.ts @@ -0,0 +1 @@ +export default styles as Record; diff --git a/packages/itwinui-react/src/styles.js/package.json b/packages/itwinui-react/src/styles.js/package.json new file mode 100644 index 00000000000..d10eb631b95 --- /dev/null +++ b/packages/itwinui-react/src/styles.js/package.json @@ -0,0 +1,18 @@ +{ + "type": "module", + "private": true, + "files": [ + "dist" + ], + "main": "dist/cjs/styles.js", + "module": "dist/esm/styles.js", + "types": "dist/styles.d.ts", + "exports": { + ".": { + "types": "./dist/styles.d.ts", + "import": "./dist/esm/styles.js", + "require": "./dist/cjs/styles.js" + }, + "./*": "./*" + } +} diff --git a/packages/itwinui-react/src/styles/styles.module.css b/packages/itwinui-react/src/styles.js/styles.module.css similarity index 100% rename from packages/itwinui-react/src/styles/styles.module.css rename to packages/itwinui-react/src/styles.js/styles.module.css diff --git a/packages/itwinui-react/src/styles/vite.config.mjs b/packages/itwinui-react/src/styles.js/vite.config.mjs similarity index 80% rename from packages/itwinui-react/src/styles/vite.config.mjs rename to packages/itwinui-react/src/styles.js/vite.config.mjs index 0c2d686bfce..43560324cbf 100644 --- a/packages/itwinui-react/src/styles/vite.config.mjs +++ b/packages/itwinui-react/src/styles.js/vite.config.mjs @@ -8,8 +8,8 @@ export default defineConfig({ cssMinify: false, lib: { entry: resolve(__dirname, './classes.mjs'), - fileName: 'styles', - formats: ['es'], + fileName: (format) => `${format === 'es' ? 'esm' : 'cjs'}/styles.js`, + formats: ['es', 'cjs'], }, }, css: { diff --git a/packages/itwinui-react/src/styles/package.json b/packages/itwinui-react/src/styles/package.json deleted file mode 100644 index 1f5eab7ed38..00000000000 --- a/packages/itwinui-react/src/styles/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "type": "module", - "version": "0.0.0", - "private": true, - "files": [ - "dist" - ], - "main": "dist/styles.cjs", - "module": "dist/styles.js", - "types": "dist/styles.d.ts", - "exports": { - ".": { - "types": "./dist/styles.d.ts", - "import": "./dist/styles.js", - "require": "./dist/styles.cjs" - }, - "./*": "./*" - }, - "devDependencies": { - "@itwin/itwinui-css": "*", - "@itwin/itwinui-variables": "*", - "vite": "^4.3.8" - }, - "scripts": { - "dev": "vite build --watch", - "build": "vite build" - } -} From 263e3f08f1f6cbf5816ca889a37b73c699edeb5c Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 25 May 2023 15:25:15 -0400 Subject: [PATCH 04/61] move dts file out of dist --- packages/itwinui-react/src/{styles.js/dist => }/styles.d.ts | 0 packages/itwinui-react/src/styles.js/package.json | 2 -- 2 files changed, 2 deletions(-) rename packages/itwinui-react/src/{styles.js/dist => }/styles.d.ts (100%) diff --git a/packages/itwinui-react/src/styles.js/dist/styles.d.ts b/packages/itwinui-react/src/styles.d.ts similarity index 100% rename from packages/itwinui-react/src/styles.js/dist/styles.d.ts rename to packages/itwinui-react/src/styles.d.ts diff --git a/packages/itwinui-react/src/styles.js/package.json b/packages/itwinui-react/src/styles.js/package.json index d10eb631b95..8e498b8223b 100644 --- a/packages/itwinui-react/src/styles.js/package.json +++ b/packages/itwinui-react/src/styles.js/package.json @@ -6,10 +6,8 @@ ], "main": "dist/cjs/styles.js", "module": "dist/esm/styles.js", - "types": "dist/styles.d.ts", "exports": { ".": { - "types": "./dist/styles.d.ts", "import": "./dist/esm/styles.js", "require": "./dist/cjs/styles.js" }, From b05246b3a0a36ef07280dee96534ce2f90a9c3f3 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 25 May 2023 15:27:10 -0400 Subject: [PATCH 05/61] fix deps --- packages/itwinui-react/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index d0ddc3584b1..693d2296114 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -107,7 +107,6 @@ "markdown-to-jsx": "6.11.4", "react": "^18.0.0", "react-dom": "^18.0.0", - "styles": "*", "ts-jest": "^28.0.2", "ts-loader": "^9.2.8", "ts-node": "^8.0.2", From 85699bbb6c1ee060ee26caebfca5d1572668c61f Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 25 May 2023 15:41:39 -0400 Subject: [PATCH 06/61] leftover import --- packages/itwinui-css/scripts/generateCss.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/itwinui-css/scripts/generateCss.js b/packages/itwinui-css/scripts/generateCss.js index 2abeaaaddd9..77f27ace1eb 100644 --- a/packages/itwinui-css/scripts/generateCss.js +++ b/packages/itwinui-css/scripts/generateCss.js @@ -6,8 +6,6 @@ const fs = require('fs'); const path = require('path'); const sass = require('sass-embedded'); const css = require('lightningcss'); -const postcss = require('postcss'); -const postcssScoper = require('postcss-scoper'); const targets = require('./lightningCssSettings').targets; const { yellow, green, red } = require('./utils'); From 8b22f877d40c47f1aba8020c885044da9094ba10 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 25 May 2023 15:56:31 -0400 Subject: [PATCH 07/61] kinda working --- packages/itwinui-react/.swcrc | 2 +- packages/itwinui-react/package.json | 5 +++-- packages/itwinui-react/src/styles.js/package.json | 9 +++------ .../itwinui-react/src/styles.js/vite.config.mjs | 14 ++++++++++++-- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/itwinui-react/.swcrc b/packages/itwinui-react/.swcrc index f61907b2c22..fbcb6fccdc8 100644 --- a/packages/itwinui-react/.swcrc +++ b/packages/itwinui-react/.swcrc @@ -8,5 +8,5 @@ "module": { "type": "es6" }, - "exclude": ["src/styles.js"] + "exclude": ["src/styles.js", "src/styles.d.ts"] } diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 693d2296114..a553c93c70d 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -52,8 +52,9 @@ ], "scripts": { "build": "yarn clean:build && yarn build:styles && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json", - "build:styles": "vite build src/styles.js", + "build:styles": "vite build src/styles.js && yarn copy-styles:esm", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", + "copy-styles:esm": "yarn swc src/styles.js/dist/styles.js -o esm/styles.js --no-swcrc --source-maps=false", "clean:build": "rimraf esm && rimraf cjs", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", @@ -66,7 +67,7 @@ "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", - "dev:styles": "yarn build:styles --watch" + "dev:styles": "concurrently \"yarn build:styles --watch\" \"yarn copy-styles:esm\"" }, "dependencies": { "@itwin/itwinui-illustrations-react": "^2.0.0", diff --git a/packages/itwinui-react/src/styles.js/package.json b/packages/itwinui-react/src/styles.js/package.json index 8e498b8223b..c9abd7671e5 100644 --- a/packages/itwinui-react/src/styles.js/package.json +++ b/packages/itwinui-react/src/styles.js/package.json @@ -4,13 +4,10 @@ "files": [ "dist" ], - "main": "dist/cjs/styles.js", - "module": "dist/esm/styles.js", + "module": "dist/style.js", "exports": { - ".": { - "import": "./dist/esm/styles.js", - "require": "./dist/cjs/styles.js" - }, + ".": "./dist/style.js", + "./styles.css": "./dist/styles.css", "./*": "./*" } } diff --git a/packages/itwinui-react/src/styles.js/vite.config.mjs b/packages/itwinui-react/src/styles.js/vite.config.mjs index 43560324cbf..da6fc6bd1f7 100644 --- a/packages/itwinui-react/src/styles.js/vite.config.mjs +++ b/packages/itwinui-react/src/styles.js/vite.config.mjs @@ -8,8 +8,18 @@ export default defineConfig({ cssMinify: false, lib: { entry: resolve(__dirname, './classes.mjs'), - fileName: (format) => `${format === 'es' ? 'esm' : 'cjs'}/styles.js`, - formats: ['es', 'cjs'], + fileName: 'styles', + formats: ['es'], + }, + rollupOptions: { + output: { + assetFileNames: (assetInfo) => { + if (assetInfo.name === 'style.css') { + return 'styles.css'; + } + return assetInfo.name; + }, + }, }, }, css: { From 40c3fbb91ff86f49227a13efa17be89f3fa3a96f Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 15:40:47 -0400 Subject: [PATCH 08/61] fix module structure --- packages/itwinui-react/src/styles.js/package.json | 8 ++++++-- packages/itwinui-react/src/styles.js/vite.config.mjs | 5 +++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/itwinui-react/src/styles.js/package.json b/packages/itwinui-react/src/styles.js/package.json index c9abd7671e5..31d851e7b22 100644 --- a/packages/itwinui-react/src/styles.js/package.json +++ b/packages/itwinui-react/src/styles.js/package.json @@ -4,9 +4,13 @@ "files": [ "dist" ], - "module": "dist/style.js", + "main": "dist/cjs/styles.js", + "module": "dist/esm/styles.js", "exports": { - ".": "./dist/style.js", + ".": { + "import": "./dist/esm/styles.js", + "require": "./dist/cjs/styles.js" + }, "./styles.css": "./dist/styles.css", "./*": "./*" } diff --git a/packages/itwinui-react/src/styles.js/vite.config.mjs b/packages/itwinui-react/src/styles.js/vite.config.mjs index da6fc6bd1f7..efd3ee48292 100644 --- a/packages/itwinui-react/src/styles.js/vite.config.mjs +++ b/packages/itwinui-react/src/styles.js/vite.config.mjs @@ -8,12 +8,13 @@ export default defineConfig({ cssMinify: false, lib: { entry: resolve(__dirname, './classes.mjs'), - fileName: 'styles', - formats: ['es'], + fileName: (format) => `${format}/styles.js`, + formats: ['esm', 'cjs'], }, rollupOptions: { output: { assetFileNames: (assetInfo) => { + // renaming style.css to styles.css if (assetInfo.name === 'style.css') { return 'styles.css'; } From 182524f74fa5ea700a20fcf8819581e7560be75e Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 15:56:39 -0400 Subject: [PATCH 09/61] copy files manually --- packages/itwinui-react/.gitignore | 4 +- packages/itwinui-react/package.json | 9 ++-- packages/itwinui-react/scripts/copyStyles.mjs | 42 +++++++++++++++++++ .../itwinui-react/src/styles.js/.gitignore | 1 - 4 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 packages/itwinui-react/scripts/copyStyles.mjs diff --git a/packages/itwinui-react/.gitignore b/packages/itwinui-react/.gitignore index c6f5f2b6ca5..79d90833531 100644 --- a/packages/itwinui-react/.gitignore +++ b/packages/itwinui-react/.gitignore @@ -11,8 +11,8 @@ esm # Compiled Styles src/**/*.css -# CSS modules -!src/styles/* +# CSS modules output +styles.css # Storybook storybook-static/* diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index a553c93c70d..283efce178a 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -17,6 +17,7 @@ "default": "./cjs/index.js" } }, + "./styles.css": "./styles.css", "./cjs": "./cjs/index.js", "./esm": "./esm/index.js", "./cjs/core/utils": "./cjs/core/utils/index.js", @@ -51,10 +52,10 @@ "ux" ], "scripts": { - "build": "yarn clean:build && yarn build:styles && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json", - "build:styles": "vite build src/styles.js && yarn copy-styles:esm", + "build": "yarn clean:build && yarn build:styles && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && yarn copy-styles", + "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", - "copy-styles:esm": "yarn swc src/styles.js/dist/styles.js -o esm/styles.js --no-swcrc --source-maps=false", + "copy-styles": "node ./scripts/copyStyles.mjs", "clean:build": "rimraf esm && rimraf cjs", "clean:coverage": "rimraf coverage", "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules", @@ -67,7 +68,7 @@ "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", - "dev:styles": "concurrently \"yarn build:styles --watch\" \"yarn copy-styles:esm\"" + "dev:styles": "concurrently \"yarn build:styles --watch\" \"yarn copy-styles\"" }, "dependencies": { "@itwin/itwinui-illustrations-react": "^2.0.0", diff --git a/packages/itwinui-react/scripts/copyStyles.mjs b/packages/itwinui-react/scripts/copyStyles.mjs new file mode 100644 index 00000000000..cf7e87e26be --- /dev/null +++ b/packages/itwinui-react/scripts/copyStyles.mjs @@ -0,0 +1,42 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import fs from 'node:fs/promises'; +import path from 'node:path'; + +const dirname = path.dirname(new URL(import.meta.url).pathname); + +const root = path.join(dirname, '..'); +const srcDir = path.resolve(root, 'src'); +const distDir = path.resolve(srcDir, 'styles.js', 'dist'); +const distEsmDir = path.resolve(distDir, 'esm'); +const distCjsDir = path.resolve(distDir, 'cjs'); +const outCjsDir = path.resolve(root, 'cjs'); +const outEsmDir = path.resolve(root, 'esm'); + +// copy styles.js from src/styles.js/dist into cjs/styles.js and esm/styles.js +await fs.copyFile( + path.join(distEsmDir, 'styles.js'), + path.join(outEsmDir, 'styles.js'), +); +await fs.copyFile( + path.join(distCjsDir, 'styles.js'), + path.join(outCjsDir, 'styles.js'), +); + +// copy styles.js/dist/styles.css into root +await fs.copyFile( + path.join(distDir, 'styles.css'), + path.join(root, 'styles.css'), +); + +// copy styles.d.ts from src into cjs and esm +await fs.copyFile( + path.join(srcDir, 'styles.d.ts'), + path.join(outEsmDir, 'styles.d.ts'), +); +await fs.copyFile( + path.join(srcDir, 'styles.d.ts'), + path.join(outCjsDir, 'styles.d.ts'), +); diff --git a/packages/itwinui-react/src/styles.js/.gitignore b/packages/itwinui-react/src/styles.js/.gitignore index d797d693d9c..ea5eae29678 100644 --- a/packages/itwinui-react/src/styles.js/.gitignore +++ b/packages/itwinui-react/src/styles.js/.gitignore @@ -1,5 +1,4 @@ .turbo node_modules dist -!dist/styles.d.ts !styles.module.css From 55dec6aa8f38de0d9fd1a1f70cb7c9eac4160966 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 16:12:25 -0400 Subject: [PATCH 10/61] use vite plugin instead of script --- packages/itwinui-react/package.json | 4 +- packages/itwinui-react/scripts/copyStyles.mjs | 42 ---------------- .../src/styles.js/vite.config.mjs | 50 +++++++++++++++++++ 3 files changed, 52 insertions(+), 44 deletions(-) delete mode 100644 packages/itwinui-react/scripts/copyStyles.mjs diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 283efce178a..7e1fe4529e5 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -52,7 +52,7 @@ "ux" ], "scripts": { - "build": "yarn clean:build && yarn build:styles && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && yarn copy-styles", + "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && yarn build:styles", "build:styles": "vite build src/styles.js", "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"", "copy-styles": "node ./scripts/copyStyles.mjs", @@ -64,7 +64,7 @@ "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write", "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0", "lint:fix": "yarn lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"", - "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn dev:styles\" \"yarn dev:types\"", + "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn build:styles --watch\" \"yarn dev:types\"", "dev:esm": "swc src -d esm --watch", "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs", "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\"", diff --git a/packages/itwinui-react/scripts/copyStyles.mjs b/packages/itwinui-react/scripts/copyStyles.mjs deleted file mode 100644 index cf7e87e26be..00000000000 --- a/packages/itwinui-react/scripts/copyStyles.mjs +++ /dev/null @@ -1,42 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import fs from 'node:fs/promises'; -import path from 'node:path'; - -const dirname = path.dirname(new URL(import.meta.url).pathname); - -const root = path.join(dirname, '..'); -const srcDir = path.resolve(root, 'src'); -const distDir = path.resolve(srcDir, 'styles.js', 'dist'); -const distEsmDir = path.resolve(distDir, 'esm'); -const distCjsDir = path.resolve(distDir, 'cjs'); -const outCjsDir = path.resolve(root, 'cjs'); -const outEsmDir = path.resolve(root, 'esm'); - -// copy styles.js from src/styles.js/dist into cjs/styles.js and esm/styles.js -await fs.copyFile( - path.join(distEsmDir, 'styles.js'), - path.join(outEsmDir, 'styles.js'), -); -await fs.copyFile( - path.join(distCjsDir, 'styles.js'), - path.join(outCjsDir, 'styles.js'), -); - -// copy styles.js/dist/styles.css into root -await fs.copyFile( - path.join(distDir, 'styles.css'), - path.join(root, 'styles.css'), -); - -// copy styles.d.ts from src into cjs and esm -await fs.copyFile( - path.join(srcDir, 'styles.d.ts'), - path.join(outEsmDir, 'styles.d.ts'), -); -await fs.copyFile( - path.join(srcDir, 'styles.d.ts'), - path.join(outCjsDir, 'styles.d.ts'), -); diff --git a/packages/itwinui-react/src/styles.js/vite.config.mjs b/packages/itwinui-react/src/styles.js/vite.config.mjs index efd3ee48292..0051b82e9ad 100644 --- a/packages/itwinui-react/src/styles.js/vite.config.mjs +++ b/packages/itwinui-react/src/styles.js/vite.config.mjs @@ -1,6 +1,10 @@ +import fs from 'node:fs/promises'; +import path from 'node:path'; import { resolve } from 'path'; import { defineConfig } from 'vite'; +const __dirname = path.dirname(new URL(import.meta.url).pathname); + // https://vitejs.dev/config/ export default defineConfig({ build: { @@ -23,6 +27,14 @@ export default defineConfig({ }, }, }, + plugins: [ + { + name: 'copy-files-after-build', + closeBundle: async () => { + await copyBuildOutput(); + }, + }, + ], css: { modules: { // TODO: use proper hash in v4 @@ -32,3 +44,41 @@ export default defineConfig({ }, }, }); + +// ---------------------------------------------------------------------------- + +const root = path.join(__dirname, '..', '..'); +const srcDir = path.resolve(root, 'src'); +const distDir = path.resolve(srcDir, 'styles.js', 'dist'); +const distEsmDir = path.resolve(distDir, 'esm'); +const distCjsDir = path.resolve(distDir, 'cjs'); +const outCjsDir = path.resolve(root, 'cjs'); +const outEsmDir = path.resolve(root, 'esm'); + +const copyBuildOutput = async () => { + // copy styles.js from src/styles.js/dist into cjs/styles.js and esm/styles.js + await fs.copyFile( + path.join(distEsmDir, 'styles.js'), + path.join(outEsmDir, 'styles.js'), + ); + await fs.copyFile( + path.join(distCjsDir, 'styles.js'), + path.join(outCjsDir, 'styles.js'), + ); + + // copy styles.js/dist/styles.css into /styles.css + await fs.copyFile( + path.join(distDir, 'styles.css'), + path.join(root, 'styles.css'), + ); + + // copy styles.d.ts from src into cjs/styles.d.ts and esm/styles.d.ts + await fs.copyFile( + path.join(srcDir, 'styles.d.ts'), + path.join(outEsmDir, 'styles.d.ts'), + ); + await fs.copyFile( + path.join(srcDir, 'styles.d.ts'), + path.join(outCjsDir, 'styles.d.ts'), + ); +}; From 23ec7b5e2e5460ef8bf08d808eac36f24ad81285 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 16:14:32 -0400 Subject: [PATCH 11/61] less verbose comments --- packages/itwinui-react/src/styles.js/vite.config.mjs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/itwinui-react/src/styles.js/vite.config.mjs b/packages/itwinui-react/src/styles.js/vite.config.mjs index 0051b82e9ad..357d9096858 100644 --- a/packages/itwinui-react/src/styles.js/vite.config.mjs +++ b/packages/itwinui-react/src/styles.js/vite.config.mjs @@ -56,7 +56,7 @@ const outCjsDir = path.resolve(root, 'cjs'); const outEsmDir = path.resolve(root, 'esm'); const copyBuildOutput = async () => { - // copy styles.js from src/styles.js/dist into cjs/styles.js and esm/styles.js + // copy styles.js from src/styles.js/dist/ into cjs/ and esm/ await fs.copyFile( path.join(distEsmDir, 'styles.js'), path.join(outEsmDir, 'styles.js'), @@ -66,13 +66,13 @@ const copyBuildOutput = async () => { path.join(outCjsDir, 'styles.js'), ); - // copy styles.js/dist/styles.css into /styles.css + // copy styles.css from src/styles.js/dist/ into / await fs.copyFile( path.join(distDir, 'styles.css'), path.join(root, 'styles.css'), ); - // copy styles.d.ts from src into cjs/styles.d.ts and esm/styles.d.ts + // copy styles.d.ts from src/ into cjs/ and esm/ await fs.copyFile( path.join(srcDir, 'styles.d.ts'), path.join(outEsmDir, 'styles.d.ts'), From c8ee4b4e85fd03af55ea9e21f7ef1947e4123573 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 16:32:24 -0400 Subject: [PATCH 12/61] remove all css imports --- packages/itwinui-react/src/core/Alert/Alert.tsx | 1 - packages/itwinui-react/src/core/Avatar/Avatar.tsx | 1 - packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx | 1 - packages/itwinui-react/src/core/Backdrop/Backdrop.tsx | 1 - packages/itwinui-react/src/core/Badge/Badge.tsx | 1 - packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx | 1 - packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx | 1 - packages/itwinui-react/src/core/Buttons/Button/Button.tsx | 1 - .../src/core/Buttons/DropdownButton/DropdownButton.tsx | 1 - .../itwinui-react/src/core/Buttons/IconButton/IconButton.tsx | 2 -- .../itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx | 1 - packages/itwinui-react/src/core/Carousel/Carousel.tsx | 1 - packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx | 1 - packages/itwinui-react/src/core/Checkbox/Checkbox.tsx | 1 - packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx | 1 - packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx | 1 - packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx | 1 - packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx | 1 - packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx | 1 - packages/itwinui-react/src/core/ComboBox/ComboBox.tsx | 1 - packages/itwinui-react/src/core/DatePicker/DatePicker.tsx | 1 - packages/itwinui-react/src/core/Dialog/Dialog.tsx | 1 - packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx | 1 - packages/itwinui-react/src/core/Dialog/DialogContent.tsx | 1 - packages/itwinui-react/src/core/Dialog/DialogMain.tsx | 1 - packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx | 1 - packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx | 1 - .../itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx | 1 - packages/itwinui-react/src/core/Fieldset/Fieldset.tsx | 1 - packages/itwinui-react/src/core/FileUpload/FileUpload.tsx | 1 - packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx | 1 - .../itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx | 1 - packages/itwinui-react/src/core/Footer/Footer.tsx | 1 - packages/itwinui-react/src/core/Footer/FooterItem.tsx | 1 - packages/itwinui-react/src/core/Footer/FooterList.tsx | 1 - packages/itwinui-react/src/core/Footer/FooterSeparator.tsx | 1 - packages/itwinui-react/src/core/Header/Header.tsx | 1 - packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx | 1 - packages/itwinui-react/src/core/Header/HeaderButton.tsx | 1 - packages/itwinui-react/src/core/Header/HeaderLogo.tsx | 1 - .../src/core/InformationPanel/InformationPanel.tsx | 1 - .../src/core/InformationPanel/InformationPanelBody.tsx | 1 - .../src/core/InformationPanel/InformationPanelContent.tsx | 1 - .../src/core/InformationPanel/InformationPanelHeader.tsx | 1 - .../src/core/InformationPanel/InformationPanelWrapper.tsx | 1 - packages/itwinui-react/src/core/Input/Input.tsx | 1 - packages/itwinui-react/src/core/InputGroup/InputGroup.tsx | 1 - packages/itwinui-react/src/core/Label/Label.tsx | 1 - packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx | 1 - packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx | 1 - .../itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx | 1 - packages/itwinui-react/src/core/List/List.tsx | 1 - packages/itwinui-react/src/core/List/ListItem.tsx | 1 - packages/itwinui-react/src/core/Menu/Menu.tsx | 1 - packages/itwinui-react/src/core/Menu/MenuDivider.tsx | 1 - packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx | 1 - packages/itwinui-react/src/core/Menu/MenuItem.tsx | 1 - packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx | 1 - packages/itwinui-react/src/core/Modal/Modal.tsx | 1 - packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx | 1 - .../src/core/NotificationMarker/NotificationMarker.tsx | 1 - .../core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx | 1 - .../core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx | 1 - packages/itwinui-react/src/core/Radio/Radio.tsx | 1 - packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx | 1 - packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx | 1 - packages/itwinui-react/src/core/SearchBox/SearchBox.tsx | 1 - packages/itwinui-react/src/core/Select/Select.tsx | 1 - packages/itwinui-react/src/core/Select/SelectTag.tsx | 1 - .../itwinui-react/src/core/SideNavigation/SideNavigation.tsx | 1 - .../itwinui-react/src/core/SideNavigation/SidenavButton.tsx | 1 - .../itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx | 1 - .../src/core/SideNavigation/SidenavSubmenuHeader.tsx | 1 - .../src/core/SkipToContentLink/SkipToContentLink.tsx | 1 - packages/itwinui-react/src/core/Slider/Slider.tsx | 1 - packages/itwinui-react/src/core/Stepper/Stepper.tsx | 1 - packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx | 1 - packages/itwinui-react/src/core/Surface/Surface.tsx | 1 - packages/itwinui-react/src/core/Table/Table.tsx | 1 - packages/itwinui-react/src/core/Table/TablePaginator.tsx | 1 - packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx | 1 - .../src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx | 1 - .../itwinui-react/src/core/Table/filters/FilterButtonBar.tsx | 1 - packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx | 1 - .../core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx | 1 - .../src/core/Table/filters/TextFilter/TextFilter.tsx | 1 - packages/itwinui-react/src/core/Tabs/Tab.tsx | 1 - packages/itwinui-react/src/core/Tabs/Tabs.tsx | 1 - packages/itwinui-react/src/core/Tag/Tag.tsx | 1 - packages/itwinui-react/src/core/Tag/TagContainer.tsx | 1 - packages/itwinui-react/src/core/Textarea/Textarea.tsx | 1 - packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx | 2 -- packages/itwinui-react/src/core/Tile/Tile.tsx | 1 - packages/itwinui-react/src/core/TimePicker/TimePicker.tsx | 1 - packages/itwinui-react/src/core/Toast/Toast.tsx | 1 - packages/itwinui-react/src/core/Toast/ToastWrapper.tsx | 1 - packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx | 1 - packages/itwinui-react/src/core/Tooltip/Tooltip.tsx | 1 - packages/itwinui-react/src/core/Tree/Tree.tsx | 1 - packages/itwinui-react/src/core/Tree/TreeNode.tsx | 1 - packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx | 1 - packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx | 1 - .../itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx | 1 - packages/itwinui-react/src/core/Typography/Code/Code.tsx | 1 - packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx | 1 - packages/itwinui-react/src/core/Typography/Text/Text.tsx | 1 - packages/itwinui-react/src/core/utils/components/Divider.tsx | 1 - packages/itwinui-react/src/core/utils/components/Flex.tsx | 1 - packages/itwinui-react/src/core/utils/components/Icon.tsx | 1 - .../itwinui-react/src/core/utils/components/InputContainer.tsx | 1 - .../src/core/utils/components/InputFlexContainer.tsx | 1 - packages/itwinui-react/src/core/utils/components/LinkAction.tsx | 1 - packages/itwinui-react/src/core/utils/components/Popover.tsx | 1 - .../itwinui-react/src/core/utils/components/VisuallyHidden.tsx | 1 - packages/itwinui-react/src/core/utils/hooks/useGlobals.ts | 2 -- 115 files changed, 118 deletions(-) diff --git a/packages/itwinui-react/src/core/Alert/Alert.tsx b/packages/itwinui-react/src/core/Alert/Alert.tsx index 8ef9aa7406e..041660a33df 100644 --- a/packages/itwinui-react/src/core/Alert/Alert.tsx +++ b/packages/itwinui-react/src/core/Alert/Alert.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import cx from 'classnames'; import * as React from 'react'; -import '@itwin/itwinui-css/css/alert.css'; import { StatusIconMap, SvgCloseSmall, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Avatar/Avatar.tsx b/packages/itwinui-react/src/core/Avatar/Avatar.tsx index 9e2e8571220..fafdd2c8b95 100644 --- a/packages/itwinui-react/src/core/Avatar/Avatar.tsx +++ b/packages/itwinui-react/src/core/Avatar/Avatar.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/avatar.css'; export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline'; diff --git a/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx b/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx index 55fea93988e..6336548f671 100644 --- a/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx +++ b/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/avatar.css'; type AvatarGroupProps = { /** diff --git a/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx b/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx index cafd75c929f..8d83cca4474 100644 --- a/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx +++ b/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/backdrop.css'; export type BackdropProps = { /** diff --git a/packages/itwinui-react/src/core/Badge/Badge.tsx b/packages/itwinui-react/src/core/Badge/Badge.tsx index ab457334cf7..a5999c4c998 100644 --- a/packages/itwinui-react/src/core/Badge/Badge.tsx +++ b/packages/itwinui-react/src/core/Badge/Badge.tsx @@ -9,7 +9,6 @@ import type { AnyString, PolymorphicForwardRefComponent, } from '../utils/index.js'; -import '@itwin/itwinui-css/css/badge.css'; /** * Helper function that returns one of the preset badge color values. diff --git a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx index 58ac34b5055..e98bf61d4fa 100644 --- a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx @@ -11,7 +11,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/breadcrumbs.css'; type BreadcrumbsProps = { /** diff --git a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx index 63e2ddf0dcf..804d63a1082 100644 --- a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx +++ b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { useOverflow, useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; type ButtonGroupProps = { /** diff --git a/packages/itwinui-react/src/core/Buttons/Button/Button.tsx b/packages/itwinui-react/src/core/Buttons/Button/Button.tsx index 128bbcd1365..7fd7b79d4ef 100644 --- a/packages/itwinui-react/src/core/Buttons/Button/Button.tsx +++ b/packages/itwinui-react/src/core/Buttons/Button/Button.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; export type ButtonProps = { /** diff --git a/packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx b/packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx index 87973b1f4db..6110e263e76 100644 --- a/packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx @@ -14,7 +14,6 @@ import { useMergedRefs, } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; export type DropdownButtonProps = { /** diff --git a/packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx b/packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx index 0dc3f09b464..c3f5171191f 100644 --- a/packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx @@ -7,8 +7,6 @@ import * as React from 'react'; import { VisuallyHidden, Popover, Box } from '../../utils/index.js'; import type { ButtonProps } from '../Button/Button.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; -import '@itwin/itwinui-css/css/tooltip.css'; export type IconButtonProps = { /** diff --git a/packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx b/packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx index 0f1cb0aa782..d62198dabb2 100644 --- a/packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx @@ -11,7 +11,6 @@ import { DropdownMenu } from '../../DropdownMenu/index.js'; import type { Placement } from 'tippy.js'; import { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; export type SplitButtonProps = ButtonProps & { /** diff --git a/packages/itwinui-react/src/core/Carousel/Carousel.tsx b/packages/itwinui-react/src/core/Carousel/Carousel.tsx index 1a7f790c3ae..e9aa176cf56 100644 --- a/packages/itwinui-react/src/core/Carousel/Carousel.tsx +++ b/packages/itwinui-react/src/core/Carousel/Carousel.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { getRandomValue, useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/carousel.css'; import { CarouselContext } from './CarouselContext.js'; import { CarouselSlider } from './CarouselSlider.js'; import { CarouselSlide } from './CarouselSlide.js'; diff --git a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx b/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx index d3bc03a9c72..44b7bd23838 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx +++ b/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx @@ -14,7 +14,6 @@ import { } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { CarouselDot } from './CarouselDot.js'; -import '@itwin/itwinui-css/css/carousel.css'; type CarouselDotsListProps = { /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */ diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx index adc1dd615df..e91eaf40f21 100644 --- a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx +++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/checkbox.css'; type CheckboxProps = { /** diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx index 6bf37369500..11e163e89fa 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx @@ -16,7 +16,6 @@ import type { PolymorphicForwardRefComponent, } from '../utils/index.js'; import { Slider } from '../Slider/index.js'; -import '@itwin/itwinui-css/css/color-picker.css'; import { useColorPickerContext } from './ColorPickerContext.js'; const getVerticalPercentageOfRectangle = (rect: DOMRect, pointer: number) => { diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx index 8248659a3b8..48396898eb3 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx @@ -9,7 +9,6 @@ import { Input } from '../Input/index.js'; import { ColorValue, InputContainer, SvgSwap, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { useColorPickerContext } from './ColorPickerContext.js'; -import '@itwin/itwinui-css/css/color-picker.css'; type ColorInputPanelProps = { /** diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx index cb78d85a19f..ac696a93ee7 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx @@ -17,7 +17,6 @@ import type { import { getColorValue } from './ColorPicker.js'; import { ColorSwatch } from './ColorSwatch.js'; import { useColorPickerContext } from './ColorPickerContext.js'; -import '@itwin/itwinui-css/css/color-picker.css'; export type ColorPaletteProps = { /** diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx index 860ccf0b6c8..03f6b101662 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import '@itwin/itwinui-css/css/color-picker.css'; import { ColorValue, getTabbableElements, diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx index f5ee11ffa83..b7ec02d8823 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/color-picker.css'; import { ColorValue, Box } from '../utils/index.js'; import type { ColorType, diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx index b298002386f..79d49649313 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx @@ -21,7 +21,6 @@ import type { InputContainerProps, CommonProps, } from '../utils/index.js'; -import 'tippy.js/animations/shift-away.css'; import { ComboBoxActionContext, comboBoxReducer, diff --git a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx index 6600c2bcff0..0ab62ecb38a 100644 --- a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx +++ b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx @@ -13,7 +13,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/date-picker.css'; import { IconButton } from '../Buttons/IconButton/index.js'; import { TimePicker } from '../TimePicker/index.js'; import type { TimePickerProps } from '../TimePicker/TimePicker.js'; diff --git a/packages/itwinui-react/src/core/Dialog/Dialog.tsx b/packages/itwinui-react/src/core/Dialog/Dialog.tsx index 7a2650ff061..86536492d13 100644 --- a/packages/itwinui-react/src/core/Dialog/Dialog.tsx +++ b/packages/itwinui-react/src/core/Dialog/Dialog.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/dialog.css'; import { DialogTitleBar } from './DialogTitleBar.js'; import { DialogContent } from './DialogContent.js'; import { DialogBackdrop } from './DialogBackdrop.js'; diff --git a/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx b/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx index 706f5a8a490..46e15ecfb54 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; /** * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`. diff --git a/packages/itwinui-react/src/core/Dialog/DialogContent.tsx b/packages/itwinui-react/src/core/Dialog/DialogContent.tsx index 4e722d4128c..b3e8eb1d174 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogContent.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogContent.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; /** * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`. diff --git a/packages/itwinui-react/src/core/Dialog/DialogMain.tsx b/packages/itwinui-react/src/core/Dialog/DialogMain.tsx index 2e670973798..41f42d0508e 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogMain.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogMain.tsx @@ -13,7 +13,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; import { useDialogContext } from './DialogContext.js'; import type { DialogContextProps } from './DialogContext.js'; import { CSSTransition } from 'react-transition-group'; diff --git a/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx b/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx index a4b0cc7d088..8c3cb950346 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx @@ -7,7 +7,6 @@ import cx from 'classnames'; import { SvgClose, mergeEventHandlers, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { IconButton } from '../Buttons/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; import { useDialogContext } from './DialogContext.js'; import type { DialogContextProps } from './DialogContext.js'; import { DialogTitleBarTitle } from './DialogTitleBarTitle.js'; diff --git a/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx b/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx index b4786f38d44..0fd23a4ffad 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; /** * Dialog title bar. Recommended to be used as a child of `Dialog`. diff --git a/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx b/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx index 47fe60e0cc7..c534c4f15fe 100644 --- a/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx +++ b/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx @@ -12,7 +12,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/expandable-block.css'; type ExpandableBlockProps = { /** diff --git a/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx b/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx index bdb1738b55b..dc9de4fd47e 100644 --- a/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx +++ b/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx @@ -7,7 +7,6 @@ import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/fieldset.css'; type FieldsetProps = { /** diff --git a/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx b/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx index 7c59cc505b6..1bac1bf35f1 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx +++ b/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box, useMergedRefs } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/file-upload.css'; type FileUploadProps = { /** diff --git a/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx b/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx index 7e9d803aac3..54353eb2cef 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx +++ b/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx @@ -18,7 +18,6 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import cx from 'classnames'; import { FileEmptyCard } from './FileEmptyCard.js'; import { Anchor } from '../Typography/Anchor/Anchor.js'; -import '@itwin/itwinui-css/css/file-upload.css'; const toBytes = (bytes: number) => { const units = [' bytes', 'KB', 'MB', 'GB', 'TB']; diff --git a/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx b/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx index b5ec511e393..ef7aa945362 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx +++ b/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { SvgUpload, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/file-upload.css'; import { Anchor } from '../Typography/Anchor/Anchor.js'; type FileUploadTemplateProps = { diff --git a/packages/itwinui-react/src/core/Footer/Footer.tsx b/packages/itwinui-react/src/core/Footer/Footer.tsx index 05a38303881..78a6e6eb901 100644 --- a/packages/itwinui-react/src/core/Footer/Footer.tsx +++ b/packages/itwinui-react/src/core/Footer/Footer.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/footer.css'; import { FooterItem } from './FooterItem.js'; import { FooterSeparator } from './FooterSeparator.js'; import { FooterList } from './FooterList.js'; diff --git a/packages/itwinui-react/src/core/Footer/FooterItem.tsx b/packages/itwinui-react/src/core/Footer/FooterItem.tsx index 196995ac2f6..79652436f8d 100644 --- a/packages/itwinui-react/src/core/Footer/FooterItem.tsx +++ b/packages/itwinui-react/src/core/Footer/FooterItem.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/footer.css'; /** * Footer item. Recommended to use inside `Footer.List`. diff --git a/packages/itwinui-react/src/core/Footer/FooterList.tsx b/packages/itwinui-react/src/core/Footer/FooterList.tsx index c4db9661acc..b9ca8b264be 100644 --- a/packages/itwinui-react/src/core/Footer/FooterList.tsx +++ b/packages/itwinui-react/src/core/Footer/FooterList.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/footer.css'; /** * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`. diff --git a/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx b/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx index aaea1f51679..41bbfd146da 100644 --- a/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx +++ b/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/footer.css'; /** * Footer separator. Recommended to use inside `Footer.List`. diff --git a/packages/itwinui-react/src/core/Header/Header.tsx b/packages/itwinui-react/src/core/Header/Header.tsx index 76f9d9fdaad..0b3854679d4 100644 --- a/packages/itwinui-react/src/core/Header/Header.tsx +++ b/packages/itwinui-react/src/core/Header/Header.tsx @@ -8,7 +8,6 @@ import { IconButton } from '../Buttons/index.js'; import { SvgMoreVertical, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/header.css'; import { DropdownMenu } from '../DropdownMenu/index.js'; type HeaderTranslations = { diff --git a/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx b/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx index 1381148cac6..2d7342636ab 100644 --- a/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { SvgChevronRight, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/header.css'; type HeaderBreadcrumbsProps = { /** diff --git a/packages/itwinui-react/src/core/Header/HeaderButton.tsx b/packages/itwinui-react/src/core/Header/HeaderButton.tsx index 7defca10c7e..7964649132f 100644 --- a/packages/itwinui-react/src/core/Header/HeaderButton.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderButton.tsx @@ -8,7 +8,6 @@ import type { ButtonProps } from '../Buttons/Button/Button.js'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/header.css'; import { HeaderSplitButton } from './HeaderSplitButton.js'; import { HeaderDropdownButton } from './HeaderDropdownButton.js'; import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js'; diff --git a/packages/itwinui-react/src/core/Header/HeaderLogo.tsx b/packages/itwinui-react/src/core/Header/HeaderLogo.tsx index 3994d621127..61d43ed1ffb 100644 --- a/packages/itwinui-react/src/core/Header/HeaderLogo.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderLogo.tsx @@ -8,7 +8,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/header.css'; type HeaderLogoOwnProps = { /** diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx index 3b13debcbde..c677f26ba63 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; type InformationPanelProps = { /** diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx index 2dcca1b3af5..def5422c546 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; /** * Body of the `InformationPanel` containing the main content. diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx index 47e0ddbf73c..8bc439df602 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; type InformationPanelContentProps = { /** diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx index 62ecba175fc..6186631b9f5 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx @@ -7,7 +7,6 @@ import cx from 'classnames'; import { IconButton } from '../Buttons/index.js'; import { SvgCloseSmall, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; type InformationPanelHeaderProps = { /** diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx index 18e2d4b92f8..1ebdb68dd59 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; /** * InformationPanelWrapper should contain the `InformationPanel` diff --git a/packages/itwinui-react/src/core/Input/Input.tsx b/packages/itwinui-react/src/core/Input/Input.tsx index 6ecc80498f1..327fbc58345 100644 --- a/packages/itwinui-react/src/core/Input/Input.tsx +++ b/packages/itwinui-react/src/core/Input/Input.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/input.css'; export type InputProps = { /** diff --git a/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx b/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx index a505fd2e596..86e818a83f7 100644 --- a/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx +++ b/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { StatusIconMap, InputContainer, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/utils.css'; type InputGroupProps = { /** diff --git a/packages/itwinui-react/src/core/Label/Label.tsx b/packages/itwinui-react/src/core/Label/Label.tsx index 5d17d65a398..748514449bd 100644 --- a/packages/itwinui-react/src/core/Label/Label.tsx +++ b/packages/itwinui-react/src/core/Label/Label.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/utils.css'; type LabelOwnProps = { /** diff --git a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx index e4ad0f658e5..32c3eaa9dbb 100644 --- a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx +++ b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx @@ -7,7 +7,6 @@ import { Input } from '../Input/Input.js'; import type { InputProps } from '../Input/Input.js'; import { StatusIconMap, InputContainer, useId } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/input.css'; export type LabeledInputProps = { /** diff --git a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx index 4f0e72ebbf6..82891665740 100644 --- a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx +++ b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx @@ -8,7 +8,6 @@ import { Select } from '../Select/index.js'; import type { SelectProps } from '../Select/Select.js'; import { StatusIconMap, InputContainer, useId } from '../utils/index.js'; import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js'; -import '@itwin/itwinui-css/css/input.css'; export type LabeledSelectProps = { /** diff --git a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx index 53054a95d62..f9658ce6a6b 100644 --- a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx +++ b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx @@ -8,7 +8,6 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { Textarea } from '../Textarea/index.js'; import type { TextareaProps } from '../Textarea/Textarea.js'; import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js'; -import '@itwin/itwinui-css/css/input.css'; type LabeledTextareaProps = { /** diff --git a/packages/itwinui-react/src/core/List/List.tsx b/packages/itwinui-react/src/core/List/List.tsx index c71a30636c2..9c62e72b230 100644 --- a/packages/itwinui-react/src/core/List/List.tsx +++ b/packages/itwinui-react/src/core/List/List.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; export const List = polymorphic.ul('iui-list', { role: 'list' }); List.displayName = 'List'; diff --git a/packages/itwinui-react/src/core/List/ListItem.tsx b/packages/itwinui-react/src/core/List/ListItem.tsx index 27833681b79..272301ce25f 100644 --- a/packages/itwinui-react/src/core/List/ListItem.tsx +++ b/packages/itwinui-react/src/core/List/ListItem.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { polymorphic, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; const ListItemComponent = React.forwardRef((props, ref) => { const { diff --git a/packages/itwinui-react/src/core/Menu/Menu.tsx b/packages/itwinui-react/src/core/Menu/Menu.tsx index 314ca3a14b7..83f950158bb 100644 --- a/packages/itwinui-react/src/core/Menu/Menu.tsx +++ b/packages/itwinui-react/src/core/Menu/Menu.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { useMergedRefs, getFocusableElements, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; type MenuProps = { /** diff --git a/packages/itwinui-react/src/core/Menu/MenuDivider.tsx b/packages/itwinui-react/src/core/Menu/MenuDivider.tsx index 361f93003db..f12ac56a11c 100644 --- a/packages/itwinui-react/src/core/Menu/MenuDivider.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuDivider.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; /** * Divider between menu items. Should be used inside `Menu`. diff --git a/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx b/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx index 20d0f52134f..8ba722a205f 100644 --- a/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; /** * Component that allows to have any additional content inside `Menu`. diff --git a/packages/itwinui-react/src/core/Menu/MenuItem.tsx b/packages/itwinui-react/src/core/Menu/MenuItem.tsx index 40399111420..ad34a69a607 100644 --- a/packages/itwinui-react/src/core/Menu/MenuItem.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuItem.tsx @@ -11,7 +11,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; import { Menu } from './Menu.js'; /** diff --git a/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx b/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx index ab892c4dceb..e36939e25f6 100644 --- a/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box, VisuallyHidden } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; type MenuItemSkeletonProps = { /** diff --git a/packages/itwinui-react/src/core/Modal/Modal.tsx b/packages/itwinui-react/src/core/Modal/Modal.tsx index 8309b2a99cd..f9cba942b5b 100644 --- a/packages/itwinui-react/src/core/Modal/Modal.tsx +++ b/packages/itwinui-react/src/core/Modal/Modal.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; import { getContainer, getDocument } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; import { Dialog } from '../Dialog/index.js'; import type { DialogMainProps } from '../Dialog/DialogMain.js'; diff --git a/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx b/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx index 18e32ec684f..ca747a57b2c 100644 --- a/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx +++ b/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/non-ideal-state.css'; type NonIdealStateProps = { /** diff --git a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx index ba2a088cbaa..f08ec2339ec 100644 --- a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx +++ b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/utils.css'; type NotificationMarkerProps = { /** diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx index 4467233a4e7..a02de2381e9 100644 --- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx +++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/progress-indicator.css'; type ProgressLinearProps = { /** diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx index b00cd905c55..ef3d60445c2 100644 --- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx +++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx @@ -10,7 +10,6 @@ import { Box, } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/progress-indicator.css'; type ProgressRadialProps = { /** diff --git a/packages/itwinui-react/src/core/Radio/Radio.tsx b/packages/itwinui-react/src/core/Radio/Radio.tsx index 49a676a91c5..5ecd9ef03e1 100644 --- a/packages/itwinui-react/src/core/Radio/Radio.tsx +++ b/packages/itwinui-react/src/core/Radio/Radio.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/radio.css'; type RadioProps = { /** diff --git a/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx b/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx index 5b669065e68..14042281e79 100644 --- a/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx +++ b/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/radio-tile.css'; type RadioTileProps = { /** diff --git a/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx b/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx index 8e19e560975..4c15f1af808 100644 --- a/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx +++ b/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { InputGroup } from '../InputGroup/index.js'; -import '@itwin/itwinui-css/css/radio-tile.css'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; diff --git a/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx b/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx index c316bc01575..3a9eab547fa 100644 --- a/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx +++ b/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx @@ -22,7 +22,6 @@ import type { } from '../utils/index.js'; import { IconButton } from '../Buttons/IconButton/index.js'; import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js'; -import '@itwin/itwinui-css/css/searchbox.css'; const SearchBoxContext = React.createContext< | { diff --git a/packages/itwinui-react/src/core/Select/Select.tsx b/packages/itwinui-react/src/core/Select/Select.tsx index c12fed1de0f..519404c0155 100644 --- a/packages/itwinui-react/src/core/Select/Select.tsx +++ b/packages/itwinui-react/src/core/Select/Select.tsx @@ -18,7 +18,6 @@ import type { PopoverInstance, CommonProps, } from '../utils/index.js'; -import '@itwin/itwinui-css/css/select.css'; import SelectTag from './SelectTag.js'; import SelectTagContainer from './SelectTagContainer.js'; diff --git a/packages/itwinui-react/src/core/Select/SelectTag.tsx b/packages/itwinui-react/src/core/Select/SelectTag.tsx index ce32613c536..6bd5df6203e 100644 --- a/packages/itwinui-react/src/core/Select/SelectTag.tsx +++ b/packages/itwinui-react/src/core/Select/SelectTag.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/select.css'; type SelectTagProps = { /** diff --git a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx index d853d9914e8..2f6696c514e 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx @@ -8,7 +8,6 @@ import { WithCSSTransition, SvgChevronRight, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { IconButton } from '../Buttons/index.js'; import { Tooltip } from '../Tooltip/index.js'; -import '@itwin/itwinui-css/css/side-navigation.css'; type SideNavigationProps = { /** diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx index f9ac854f208..9134d651b43 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx @@ -8,7 +8,6 @@ import * as React from 'react'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { Button } from '../Buttons/index.js'; import type { ButtonProps } from '../Buttons/Button/Button.js'; -import '@itwin/itwinui-css/css/side-navigation.css'; type SidenavButtonProps = { /** diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx index 5c9e130c0d7..aaeae0de186 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/side-navigation.css'; /** * Subcomponent to be used in the `submenu` prop of `SideNavigation`. diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx index 9191bc38b5a..0754dd77a77 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/side-navigation.css'; type SidenavSubmenuHeaderProps = { /** diff --git a/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx b/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx index 7c176b1b854..2584fecb8f4 100644 --- a/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx +++ b/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/skip-to-content.css'; type SkipToContentLinkProps = { /** diff --git a/packages/itwinui-react/src/core/Slider/Slider.tsx b/packages/itwinui-react/src/core/Slider/Slider.tsx index f7034d434fe..296533e1f72 100644 --- a/packages/itwinui-react/src/core/Slider/Slider.tsx +++ b/packages/itwinui-react/src/core/Slider/Slider.tsx @@ -5,7 +5,6 @@ import cx from 'classnames'; import * as React from 'react'; import { getBoundedValue, useEventListener, Box } from '../utils/index.js'; -import '@itwin/itwinui-css/css/slider.css'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import type { TooltipProps } from '../Tooltip/Tooltip.js'; import { Track } from './Track.js'; diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.tsx index b1b702f77dd..c41fe0914bb 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/stepper.css'; import { StepperStep } from './StepperStep.js'; export type StepperLocalization = { diff --git a/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx b/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx index 1ac97ea29b6..22a312c368d 100644 --- a/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx +++ b/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/workflow-diagram.css'; import type { StepperProps } from './Stepper.js'; import { WorkflowDiagramStep } from './WorkflowDiagramStep.js'; diff --git a/packages/itwinui-react/src/core/Surface/Surface.tsx b/packages/itwinui-react/src/core/Surface/Surface.tsx index 63203a8ef29..ab717c7d02f 100644 --- a/packages/itwinui-react/src/core/Surface/Surface.tsx +++ b/packages/itwinui-react/src/core/Surface/Surface.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { useSafeContext, supportsHas, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/surface.css'; /** * Helper function that returns one of the preset surface elevation values. diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index e29029295bc..dadd4789015 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -35,7 +35,6 @@ import { useIsomorphicLayoutEffect, } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/table.css'; import { getCellStyle, getStickyStyle } from './utils.js'; import { TableRowMemoized } from './TableRowMemoized.js'; import { FilterToggle } from './filters/index.js'; diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.tsx index a99e592b587..daa84d1018c 100644 --- a/packages/itwinui-react/src/core/Table/TablePaginator.tsx +++ b/packages/itwinui-react/src/core/Table/TablePaginator.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/table.css'; import { IconButton, Button, DropdownButton } from '../Buttons/index.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { MenuItem } from '../Menu/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx b/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx index d09e96deb47..4f3aa1dd479 100644 --- a/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx +++ b/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/table.css'; import { useGlobals } from '../../utils/index.js'; import type { CommonProps } from '../../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx index 800a385fbb3..ea770953f22 100644 --- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx +++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx @@ -8,7 +8,6 @@ import { FilterButtonBar } from '../FilterButtonBar.js'; import type { FilterButtonBarTranslation } from '../FilterButtonBar.js'; import { BaseFilter } from '../BaseFilter.js'; import type { TableFilterProps } from '../types.js'; -import '@itwin/itwinui-css/css/table.css'; import DatePickerInput from './DatePickerInput.js'; export type DateRangeTranslation = { diff --git a/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx b/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx index 3aadd93534f..b2c50d9b802 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/table.css'; import { useGlobals } from '../../utils/index.js'; import type { CommonProps } from '../../utils/index.js'; import { Button } from '../../Buttons/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx index 4884d03438e..3a2b65f75d6 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import cx from 'classnames'; import type { HeaderGroup } from 'react-table'; -import '@itwin/itwinui-css/css/table.css'; import { useGlobals, Popover, diff --git a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx index 94d2ccd0a8d..d17a3916a97 100644 --- a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx +++ b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx @@ -8,7 +8,6 @@ import { FilterButtonBar } from '../FilterButtonBar.js'; import type { FilterButtonBarTranslation } from '../FilterButtonBar.js'; import { BaseFilter } from '../BaseFilter.js'; import type { TableFilterProps } from '../types.js'; -import '@itwin/itwinui-css/css/table.css'; import { LabeledInput } from '../../../LabeledInput/index.js'; export type NumberRangeTranslation = { diff --git a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.tsx b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.tsx index fa221c47730..3f7e0a4a0ae 100644 --- a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.tsx +++ b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import '@itwin/itwinui-css/css/table.css'; import { useGlobals } from '../../../utils/index.js'; import { Input } from '../../../Input/index.js'; import { FilterButtonBar } from '../FilterButtonBar.js'; diff --git a/packages/itwinui-react/src/core/Tabs/Tab.tsx b/packages/itwinui-react/src/core/Tabs/Tab.tsx index 3bf97a8d3c1..32288ef0af3 100644 --- a/packages/itwinui-react/src/core/Tabs/Tab.tsx +++ b/packages/itwinui-react/src/core/Tabs/Tab.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tabs.css'; type TabProps = { /** diff --git a/packages/itwinui-react/src/core/Tabs/Tabs.tsx b/packages/itwinui-react/src/core/Tabs/Tabs.tsx index e868e32ef46..02c499f917d 100644 --- a/packages/itwinui-react/src/core/Tabs/Tabs.tsx +++ b/packages/itwinui-react/src/core/Tabs/Tabs.tsx @@ -13,7 +13,6 @@ import { useResizeObserver, Box, } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tabs.css'; import { Tab } from './Tab.js'; export type OverflowOptions = { diff --git a/packages/itwinui-react/src/core/Tag/Tag.tsx b/packages/itwinui-react/src/core/Tag/Tag.tsx index 33144bc094f..5b36cb7ebff 100644 --- a/packages/itwinui-react/src/core/Tag/Tag.tsx +++ b/packages/itwinui-react/src/core/Tag/Tag.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { SvgCloseSmall, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tag.css'; import { IconButton } from '../Buttons/index.js'; type TagProps = { diff --git a/packages/itwinui-react/src/core/Tag/TagContainer.tsx b/packages/itwinui-react/src/core/Tag/TagContainer.tsx index 74a5b90904a..cef0d4e7cf6 100644 --- a/packages/itwinui-react/src/core/Tag/TagContainer.tsx +++ b/packages/itwinui-react/src/core/Tag/TagContainer.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tag.css'; type TagContainerProps = { /** diff --git a/packages/itwinui-react/src/core/Textarea/Textarea.tsx b/packages/itwinui-react/src/core/Textarea/Textarea.tsx index 9807c19d868..bab60e21227 100644 --- a/packages/itwinui-react/src/core/Textarea/Textarea.tsx +++ b/packages/itwinui-react/src/core/Textarea/Textarea.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/input.css'; export type TextareaProps = { /** diff --git a/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx b/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx index dee7354c4d3..e0ff764a3fb 100644 --- a/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx +++ b/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx @@ -12,8 +12,6 @@ import { } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { ThemeContext } from './ThemeContext.js'; -import '@itwin/itwinui-css/css/global.css'; -import '@itwin/itwinui-variables/index.css'; export type ThemeOptions = { /** diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index 7385c0a324e..fc8ff67c5f7 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -15,7 +15,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tile.css'; import { DropdownMenu } from '../DropdownMenu/index.js'; import { IconButton } from '../Buttons/index.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; diff --git a/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx b/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx index c51f6db0d4a..ed7db8e2132 100644 --- a/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx +++ b/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/time-picker.css'; const isSameHour = ( date1: Date, diff --git a/packages/itwinui-react/src/core/Toast/Toast.tsx b/packages/itwinui-react/src/core/Toast/Toast.tsx index 125c6ba5305..f343e1e5c2a 100644 --- a/packages/itwinui-react/src/core/Toast/Toast.tsx +++ b/packages/itwinui-react/src/core/Toast/Toast.tsx @@ -12,7 +12,6 @@ import { Box, } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/toast.css'; import { IconButton } from '../Buttons/index.js'; const isMotionOk = () => diff --git a/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx b/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx index 6a85b066bd1..6b1273b5c1b 100644 --- a/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx +++ b/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx @@ -2,7 +2,6 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import '@itwin/itwinui-css/css/toast.css'; import * as React from 'react'; import cx from 'classnames'; import Toast from './Toast.js'; diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx index 46ba0c8bc37..e5278c0458c 100644 --- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx +++ b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/toggle-switch.css'; type ToggleSwitchProps = { /** diff --git a/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx b/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx index 9d519c118c0..2dd4c3abd4a 100644 --- a/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx +++ b/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Popover, Box } from '../utils/index.js'; import type { CommonProps, PopoverProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tooltip.css'; export type TooltipProps = { /** diff --git a/packages/itwinui-react/src/core/Tree/Tree.tsx b/packages/itwinui-react/src/core/Tree/Tree.tsx index 2cb593e3757..1a381a9c0be 100644 --- a/packages/itwinui-react/src/core/Tree/Tree.tsx +++ b/packages/itwinui-react/src/core/Tree/Tree.tsx @@ -11,7 +11,6 @@ import { polymorphic, } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tree.css'; import cx from 'classnames'; import { TreeContext } from './TreeContext.js'; diff --git a/packages/itwinui-react/src/core/Tree/TreeNode.tsx b/packages/itwinui-react/src/core/Tree/TreeNode.tsx index 3c6338fbf6d..955f0a0d605 100644 --- a/packages/itwinui-react/src/core/Tree/TreeNode.tsx +++ b/packages/itwinui-react/src/core/Tree/TreeNode.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { getFocusableElements, Box } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tree.css'; import cx from 'classnames'; import { TreeNodeExpander } from './TreeNodeExpander.js'; import { useTreeContext } from './TreeContext.js'; diff --git a/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx b/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx index a448427a23b..bf69753c836 100644 --- a/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx +++ b/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx @@ -8,7 +8,6 @@ import { SvgChevronRight } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { IconButton } from '../Buttons/IconButton/index.js'; import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js'; -import '@itwin/itwinui-css/css/tree.css'; type TreeNodeExpanderProps = { isExpanded?: boolean; diff --git a/packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx b/packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx index a3453a05432..db6cd6bdbdd 100644 --- a/packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx +++ b/packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/anchor.css'; /** * A consistently styled anchor component. diff --git a/packages/itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx b/packages/itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx index f701bbfc629..3214ea879b5 100644 --- a/packages/itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx +++ b/packages/itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/blockquote.css'; type BlockquoteProps = { /** diff --git a/packages/itwinui-react/src/core/Typography/Code/Code.tsx b/packages/itwinui-react/src/core/Typography/Code/Code.tsx index e7852d08f1b..b53e4d23b07 100644 --- a/packages/itwinui-react/src/core/Typography/Code/Code.tsx +++ b/packages/itwinui-react/src/core/Typography/Code/Code.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/code.css'; /** * Inline code element. diff --git a/packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx b/packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx index 62aa0beee21..a415d6a9145 100644 --- a/packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx +++ b/packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/keyboard.css'; /** * Some predefined strings for common keyboard keys. diff --git a/packages/itwinui-react/src/core/Typography/Text/Text.tsx b/packages/itwinui-react/src/core/Typography/Text/Text.tsx index 6b55d495522..ea0799c8010 100644 --- a/packages/itwinui-react/src/core/Typography/Text/Text.tsx +++ b/packages/itwinui-react/src/core/Typography/Text/Text.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/text.css'; type TextProps = { /** diff --git a/packages/itwinui-react/src/core/utils/components/Divider.tsx b/packages/itwinui-react/src/core/utils/components/Divider.tsx index 59f93c36aa6..ebb74ccccd9 100644 --- a/packages/itwinui-react/src/core/utils/components/Divider.tsx +++ b/packages/itwinui-react/src/core/utils/components/Divider.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/utils.css'; import { Box } from './Box.js'; import type { PolymorphicForwardRefComponent } from '../props.js'; diff --git a/packages/itwinui-react/src/core/utils/components/Flex.tsx b/packages/itwinui-react/src/core/utils/components/Flex.tsx index 22ecd629006..b487c65f44f 100644 --- a/packages/itwinui-react/src/core/utils/components/Flex.tsx +++ b/packages/itwinui-react/src/core/utils/components/Flex.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import type { AnyString } from '../types.js'; import type { PolymorphicForwardRefComponent } from '../props.js'; -import '@itwin/itwinui-css/css/utils.css'; import { Box } from './Box.js'; const sizeTokens = [ diff --git a/packages/itwinui-react/src/core/utils/components/Icon.tsx b/packages/itwinui-react/src/core/utils/components/Icon.tsx index 1adc84b6992..f7c32577f2f 100644 --- a/packages/itwinui-react/src/core/utils/components/Icon.tsx +++ b/packages/itwinui-react/src/core/utils/components/Icon.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import cx from 'classnames'; import type { AnyString } from '../types.js'; -import '@itwin/itwinui-css/css/utils.css'; import { Box } from './Box.js'; import type { PolymorphicForwardRefComponent } from '../props.js'; diff --git a/packages/itwinui-react/src/core/utils/components/InputContainer.tsx b/packages/itwinui-react/src/core/utils/components/InputContainer.tsx index 3cb8632a77d..426875f4050 100644 --- a/packages/itwinui-react/src/core/utils/components/InputContainer.tsx +++ b/packages/itwinui-react/src/core/utils/components/InputContainer.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/utils.css'; import { Box } from './Box.js'; export type InputContainerProps = { diff --git a/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx b/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx index 1511e1b4bc5..d8135d18221 100644 --- a/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx +++ b/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx @@ -5,7 +5,6 @@ import React from 'react'; import cx from 'classnames'; import type { PolymorphicForwardRefComponent } from '../props.js'; -import '@itwin/itwinui-css/css/input-container.css'; import { Box } from './Box.js'; export type InputFlexContainerProps = { diff --git a/packages/itwinui-react/src/core/utils/components/LinkAction.tsx b/packages/itwinui-react/src/core/utils/components/LinkAction.tsx index c1a234b0957..5fd224abbe5 100644 --- a/packages/itwinui-react/src/core/utils/components/LinkAction.tsx +++ b/packages/itwinui-react/src/core/utils/components/LinkAction.tsx @@ -2,7 +2,6 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import '@itwin/itwinui-css/css/utils.css'; import { polymorphic } from '../functions/polymorphic.js'; /** diff --git a/packages/itwinui-react/src/core/utils/components/Popover.tsx b/packages/itwinui-react/src/core/utils/components/Popover.tsx index 40d956cacff..b8cdc609ec9 100644 --- a/packages/itwinui-react/src/core/utils/components/Popover.tsx +++ b/packages/itwinui-react/src/core/utils/components/Popover.tsx @@ -10,7 +10,6 @@ import type { TippyProps } from '@tippyjs/react'; import type { Placement, Instance } from 'tippy.js'; import { useMergedRefs, useIsClient } from '../hooks/index.js'; export type PopoverInstance = Instance; -import '@itwin/itwinui-css/css/utils.css'; import { ThemeContext } from '../../ThemeProvider/ThemeContext.js'; export type PopoverProps = { diff --git a/packages/itwinui-react/src/core/utils/components/VisuallyHidden.tsx b/packages/itwinui-react/src/core/utils/components/VisuallyHidden.tsx index 7e5c23c4e56..7e6993dd625 100644 --- a/packages/itwinui-react/src/core/utils/components/VisuallyHidden.tsx +++ b/packages/itwinui-react/src/core/utils/components/VisuallyHidden.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/utils.css'; import type { PolymorphicForwardRefComponent } from '../props.js'; import { Box } from './Box.js'; diff --git a/packages/itwinui-react/src/core/utils/hooks/useGlobals.ts b/packages/itwinui-react/src/core/utils/hooks/useGlobals.ts index 0193ec24064..5775be40e01 100644 --- a/packages/itwinui-react/src/core/utils/hooks/useGlobals.ts +++ b/packages/itwinui-react/src/core/utils/hooks/useGlobals.ts @@ -3,8 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import '@itwin/itwinui-css/css/global.css'; -import '@itwin/itwinui-variables/index.css'; import { ThemeContext } from '../../ThemeProvider/ThemeContext.js'; let isDev = false; From bd2d8a0a4d34d2dc3092fa9f28ec206148fc0802 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 16:40:22 -0400 Subject: [PATCH 13/61] update "getting started" instructions --- apps/storybook/src/Overview.stories.mdx | 50 ++++++++++++++++--------- apps/website/src/pages/docs/index.mdx | 42 ++++++++++++--------- packages/itwinui-react/README.md | 50 ++++++++++++++----------- 3 files changed, 85 insertions(+), 57 deletions(-) diff --git a/apps/storybook/src/Overview.stories.mdx b/apps/storybook/src/Overview.stories.mdx index e6d63cccee7..4da9fedd47c 100644 --- a/apps/storybook/src/Overview.stories.mdx +++ b/apps/storybook/src/Overview.stories.mdx @@ -29,38 +29,52 @@ npm install @itwin/itwinui-react yarn add @itwin/itwinui-react ``` -## Usage +--- -Import the component you want and start using it! +## Setup -```jsx -import { Button } from '@itwin/itwinui-react'; +Wrap your application entrypoint in `ThemeProvider` and import `styles.css`. -const App = () => ; +```jsx +import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; + +export default function App() { + return ( + <> + + {/* Your components go here. */} + + + ); +} ``` -Yes, that's really all you need as you can see in this live interactive demo: +ThemeProvider has a `theme` prop which accepts one of the following values: -[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) + - `light` (default) + - `dark` + - `os` (respects the color scheme of the operating system) + - `inherit` -## Theming +--- -By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop: +## Usage -- `light` (default) -- `dark` -- `os` (which respects the color scheme of the operating system) +After setting up ThemeProvider and styles, import the component you want and start using it! ```jsx -import { ThemeProvider } from '@itwin/itwinui-react'; +import { Button } from '@itwin/itwinui-react'; -const App = () => ( - <> - {/* Your components go here. */} - -); +const Page = () => ; ``` +Check out this template for a live interactive demo: + +[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) + +--- + ## FAQ For a list of frequently asked questions, visit the [wiki](https://github.com/iTwin/iTwinUI/wiki/FAQ). diff --git a/apps/website/src/pages/docs/index.mdx b/apps/website/src/pages/docs/index.mdx index 0eeff0c25be..12a5fb98f01 100644 --- a/apps/website/src/pages/docs/index.mdx +++ b/apps/website/src/pages/docs/index.mdx @@ -15,32 +15,40 @@ npm install @itwin/itwinui-react yarn add @itwin/itwinui-react ``` -## Usage +## Setup -Import the component you want and start using it! +Wrap your application entrypoint in `ThemeProvider` and import `styles.css`. ```jsx -import { Button } from '@itwin/itwinui-react'; - -const App = () => ; +import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; + +export default function App() { + return ( + <> + {/* Your components go here. */} + + ); +} ``` -## Theming - -By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop: +ThemeProvider has a `theme` prop which accepts one of the following values: - `light` (default) - `dark` -- `os` (which respects the color scheme of the operating system) +- `os` (respects the color scheme of the operating system) +- `inherit` + +## Usage + +After setting up ThemeProvider and styles, import the component you want and start using it! ```jsx -import { ThemeProvider } from '@itwin/itwinui-react'; +import { Button } from '@itwin/itwinui-react'; -const App = () => ( - <> - - <>{/* Your components go here. */} - - -); +const Page = () => ; ``` + +Check out this template for a live interactive demo: + +[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) diff --git a/packages/itwinui-react/README.md b/packages/itwinui-react/README.md index 83f6ff17adb..276eb6e82e7 100644 --- a/packages/itwinui-react/README.md +++ b/packages/itwinui-react/README.md @@ -39,43 +39,49 @@ yarn add @itwin/itwinui-react --- -## Usage +## Setup -Import the component you want and start using it! +Wrap your application entrypoint in `ThemeProvider` and import `styles.css`. ```jsx -import { Button } from '@itwin/itwinui-react'; - -const App = () => ( - -); +import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; + +export default function App() { + return ( + <> + + {/* Your components go here. */} + + + ); +} ``` -Yes, that's really all you need as you can see in this live interactive demo: - -[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) +ThemeProvider has a `theme` prop which accepts one of the following values: + - `light` (default) + - `dark` + - `os` (respects the color scheme of the operating system) + - `inherit` --- -## Theming +## Usage -By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop: - - `light` (default) - - `dark` - - `os` (which respects the color scheme of the operating system) +After setting up ThemeProvider and styles, import the component you want and start using it! ```jsx -import { ThemeProvider } from '@itwin/itwinui-react'; +import { Button } from '@itwin/itwinui-react'; -const App = () => ( - <> - - {/* Your components go here. */} - - +const Page = () => ( + ); ``` +Check out this template for a live interactive demo: + +[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) + --- ## FAQ From bbc091a0a15a2fea6d6864cb83173110dda19914 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 16:44:25 -0400 Subject: [PATCH 14/61] update all templates --- cra-sandbox/src/index.tsx | 1 + playgrounds/astro/src/pages/_layout.astro | 9 ++++++--- playgrounds/next/next.config.js | 1 - playgrounds/next/pages/_app.tsx | 7 ++++++- playgrounds/next/pages/_document.tsx | 16 ---------------- playgrounds/vite/src/main.tsx | 1 + 6 files changed, 14 insertions(+), 21 deletions(-) delete mode 100644 playgrounds/next/pages/_document.tsx diff --git a/cra-sandbox/src/index.tsx b/cra-sandbox/src/index.tsx index 4b5a6964e10..3d06aa3b1be 100644 --- a/cra-sandbox/src/index.tsx +++ b/cra-sandbox/src/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; import { IconButton, ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; import './styles.css'; const rootElement = document.getElementById('root')!; diff --git a/playgrounds/astro/src/pages/_layout.astro b/playgrounds/astro/src/pages/_layout.astro index ee45919510f..653d13500d5 100644 --- a/playgrounds/astro/src/pages/_layout.astro +++ b/playgrounds/astro/src/pages/_layout.astro @@ -1,5 +1,6 @@ --- import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; --- @@ -8,9 +9,11 @@ import { ThemeProvider } from '@itwin/itwinui-react'; iTwinUI-react + astro - - - + + + + + - + + + + ); } diff --git a/playgrounds/next/pages/_document.tsx b/playgrounds/next/pages/_document.tsx deleted file mode 100644 index 9f97f39a362..00000000000 --- a/playgrounds/next/pages/_document.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { ThemeProvider } from '@itwin/itwinui-react'; -import { Html, Head, Main, NextScript } from 'next/document'; - -export default function Document() { - return ( - - - iTwinUI-react + nextjs - - -
- - - - ); -} diff --git a/playgrounds/vite/src/main.tsx b/playgrounds/vite/src/main.tsx index 5933b442b07..794075d75df 100644 --- a/playgrounds/vite/src/main.tsx +++ b/playgrounds/vite/src/main.tsx @@ -5,6 +5,7 @@ import { ThemeProvider } from '@itwin/itwinui-react'; import App from './App'; import { css, Global } from '@emotion/react'; import { SvgMoon, SvgSun } from '@itwin/itwinui-icons-react'; +import '@itwin/itwinui-react/styles.css'; const Shell = () => { const [theme, setTheme] = React.useState<'light' | 'dark'>(() => From 9fe6d644ae302ce262d88ab7293044aff3104407 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 16:56:59 -0400 Subject: [PATCH 15/61] fix template styling --- playgrounds/astro/src/pages/_layout.astro | 10 ++++--- playgrounds/next/pages/_app.tsx | 33 ++++++++++++----------- 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/playgrounds/astro/src/pages/_layout.astro b/playgrounds/astro/src/pages/_layout.astro index 653d13500d5..99b3664c1d2 100644 --- a/playgrounds/astro/src/pages/_layout.astro +++ b/playgrounds/astro/src/pages/_layout.astro @@ -10,7 +10,7 @@ import '@itwin/itwinui-react/styles.css'; iTwinUI-react + astro - + @@ -18,11 +18,15 @@ import '@itwin/itwinui-react/styles.css'; + diff --git a/playgrounds/next/pages/_app.tsx b/playgrounds/next/pages/_app.tsx index cd507591597..96d7d5635b0 100644 --- a/playgrounds/next/pages/_app.tsx +++ b/playgrounds/next/pages/_app.tsx @@ -1,25 +1,28 @@ import type { AppProps } from 'next/app'; +import css from 'styled-jsx/css'; import { ThemeProvider } from '@itwin/itwinui-react'; import '@itwin/itwinui-react/styles.css'; export default function App({ Component, pageProps }: AppProps) { return ( -
- - - - + <> + + -
+ ); } + +const styles = css.global` + * { + box-sizing: border-box; + } + body { + margin: 0; + } + .app-wrapper { + padding: 2rem 1rem; + height: 100dvh; + } +`; From 55cc47cd8bc734f93fbf144c7d0ca53586649790 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 17:16:47 -0400 Subject: [PATCH 16/61] fix storybook --- apps/storybook/.storybook/StoryWithDecorator.jsx | 1 + apps/storybook/.storybook/preview-body.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/storybook/.storybook/StoryWithDecorator.jsx b/apps/storybook/.storybook/StoryWithDecorator.jsx index a3ea747a999..17855b7dbe6 100644 --- a/apps/storybook/.storybook/StoryWithDecorator.jsx +++ b/apps/storybook/.storybook/StoryWithDecorator.jsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { useDarkMode } from 'storybook-dark-mode'; import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; export default function StoryWithDecorator(Story, context) { const theme = useDarkMode() ? 'dark' : 'light'; diff --git a/apps/storybook/.storybook/preview-body.html b/apps/storybook/.storybook/preview-body.html index 437351d0279..58e014ec2ed 100644 --- a/apps/storybook/.storybook/preview-body.html +++ b/apps/storybook/.storybook/preview-body.html @@ -2,7 +2,7 @@ html, body { padding: 0 !important; } - .iui-root { + .iui3-root { padding: 1rem; height: 100svh; } From 2e16a86027f851742797b1d7f0ebf6fbd6cddb4e Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 17:22:10 -0400 Subject: [PATCH 17/61] fix box-sizing? --- packages/itwinui-css/src/global.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/itwinui-css/src/global.scss b/packages/itwinui-css/src/global.scss index 4fca518208f..c1df4ebf77f 100644 --- a/packages/itwinui-css/src/global.scss +++ b/packages/itwinui-css/src/global.scss @@ -8,15 +8,13 @@ line-height: 1.5; font-family: var(--iui-font-sans); - // border-box on all iui- elements and their descendants under iui-root, excluding any nested iui-root elements - :where([class*='iui-'], [class*='iui3-']) { - &:where(:not(.iui-root)), - * { - &, - &::before, - &::after { - box-sizing: border-box; - } + // border-box on iui-root, all iui- elements and their descendants under it, excluding any nested iui-root elements + &, + :where([class*='iui-'], [class*='iui3-']):where(:not(.iui-root)) { + &, + &::before, + &::after { + box-sizing: border-box; } } } From 8a867ac442952b0cd2dfbf14ec38909991a72dfe Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 17:23:16 -0400 Subject: [PATCH 18/61] lint --- packages/itwinui-react/src/styles.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/itwinui-react/src/styles.d.ts b/packages/itwinui-react/src/styles.d.ts index 41e2ddc11da..f1e42866735 100644 --- a/packages/itwinui-react/src/styles.d.ts +++ b/packages/itwinui-react/src/styles.d.ts @@ -1 +1,5 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ export default styles as Record; From b8fbe355fd5144e7d29144a1d07e5e45203b11af Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 30 May 2023 17:28:37 -0400 Subject: [PATCH 19/61] add underscore prefix --- apps/storybook/.storybook/preview-body.html | 2 +- packages/itwinui-css/src/global.scss | 2 +- packages/itwinui-react/src/styles.js/vite.config.mjs | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/storybook/.storybook/preview-body.html b/apps/storybook/.storybook/preview-body.html index 58e014ec2ed..0a5a3af95db 100644 --- a/apps/storybook/.storybook/preview-body.html +++ b/apps/storybook/.storybook/preview-body.html @@ -2,7 +2,7 @@ html, body { padding: 0 !important; } - .iui3-root { + ._iui3-root { padding: 1rem; height: 100svh; } diff --git a/packages/itwinui-css/src/global.scss b/packages/itwinui-css/src/global.scss index c1df4ebf77f..638a18fe3aa 100644 --- a/packages/itwinui-css/src/global.scss +++ b/packages/itwinui-css/src/global.scss @@ -10,7 +10,7 @@ // border-box on iui-root, all iui- elements and their descendants under it, excluding any nested iui-root elements &, - :where([class*='iui-'], [class*='iui3-']):where(:not(.iui-root)) { + :where([class*='iui-'], [class*='_iui3-']):where(:not(.iui-root)) { &, &::before, &::after { diff --git a/packages/itwinui-react/src/styles.js/vite.config.mjs b/packages/itwinui-react/src/styles.js/vite.config.mjs index 357d9096858..ff9a46cf805 100644 --- a/packages/itwinui-react/src/styles.js/vite.config.mjs +++ b/packages/itwinui-react/src/styles.js/vite.config.mjs @@ -39,7 +39,7 @@ export default defineConfig({ modules: { // TODO: use proper hash in v4 generateScopedName: (name) => { - return `iui3-${name.replace('iui-', '')}`; + return `_iui3-${name.replace('iui-', '')}`; }, }, }, From 1ed88c0043dfca03f8f7723a53bdb621415325f9 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Wed, 31 May 2023 13:45:49 -0400 Subject: [PATCH 20/61] add unscoped table styles --- packages/itwinui-react/src/styles.js/.gitignore | 1 + packages/itwinui-react/src/styles.js/classes.mjs | 1 + packages/itwinui-react/src/styles.js/unscoped.css | 2 ++ 3 files changed, 4 insertions(+) create mode 100644 packages/itwinui-react/src/styles.js/unscoped.css diff --git a/packages/itwinui-react/src/styles.js/.gitignore b/packages/itwinui-react/src/styles.js/.gitignore index ea5eae29678..e0c13194435 100644 --- a/packages/itwinui-react/src/styles.js/.gitignore +++ b/packages/itwinui-react/src/styles.js/.gitignore @@ -2,3 +2,4 @@ node_modules dist !styles.module.css +!unscoped.css diff --git a/packages/itwinui-react/src/styles.js/classes.mjs b/packages/itwinui-react/src/styles.js/classes.mjs index d56b9fc9d85..a5ad06d5e87 100644 --- a/packages/itwinui-react/src/styles.js/classes.mjs +++ b/packages/itwinui-react/src/styles.js/classes.mjs @@ -1,3 +1,4 @@ import styles from './styles.module.css'; +import './unscoped.css'; export default styles; diff --git a/packages/itwinui-react/src/styles.js/unscoped.css b/packages/itwinui-react/src/styles.js/unscoped.css new file mode 100644 index 00000000000..333934f9fd3 --- /dev/null +++ b/packages/itwinui-react/src/styles.js/unscoped.css @@ -0,0 +1,2 @@ +/* temporarily adding unscoped table styles because it is not yet using */ +@import '@itwin/itwinui-css/css/table.css' From c23814ed4f4a5e90f47a0d24bb8c1399d0ce7287 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Wed, 31 May 2023 14:06:22 -0400 Subject: [PATCH 21/61] move scoping from `Box` to `polymorphic` --- .../src/core/utils/components/Box.tsx | 22 +------------------ .../src/core/utils/functions/polymorphic.tsx | 18 ++++++++++----- 2 files changed, 14 insertions(+), 26 deletions(-) diff --git a/packages/itwinui-react/src/core/utils/components/Box.tsx b/packages/itwinui-react/src/core/utils/components/Box.tsx index b149125ac28..7d4925bc672 100644 --- a/packages/itwinui-react/src/core/utils/components/Box.tsx +++ b/packages/itwinui-react/src/core/utils/components/Box.tsx @@ -2,31 +2,11 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import * as React from 'react'; import { polymorphic } from '../functions/polymorphic.js'; -import styles from '../../../styles.js'; -import type { PolymorphicForwardRefComponent } from '../props.js'; - -const BoxInternal = polymorphic.div(''); /** * Polymorphic component that renders a div element by default. * Intended to be used as a base for other components. * @private */ -export const Box = React.forwardRef((props, forwardedRef) => { - return ( - - ); -}) as PolymorphicForwardRefComponent<'div'>; - -const getScopedClassName = (className = '') => { - return className - .split(' ') - .map((c) => (c in styles ? styles[c] : c)) - .join(' '); -}; +export const Box = polymorphic.div(''); diff --git a/packages/itwinui-react/src/core/utils/functions/polymorphic.tsx b/packages/itwinui-react/src/core/utils/functions/polymorphic.tsx index 1ad3abf4071..5419a0d0fb9 100644 --- a/packages/itwinui-react/src/core/utils/functions/polymorphic.tsx +++ b/packages/itwinui-react/src/core/utils/functions/polymorphic.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import cx from 'classnames'; import type { PolymorphicForwardRefComponent } from '../props.js'; import { useGlobals } from '../hooks/useGlobals.js'; +import styles from '../../../styles.js'; const _base = ( defaultElement: As, @@ -21,13 +22,12 @@ const _base = ( ref={ref} {...attrs} {...props} - className={cx(className, attrs?.className, props.className)} + className={getScopedClassName( + cx(className, attrs?.className, props.className), + )} /> ); - }) as PolymorphicForwardRefComponent< - NonNullable, - {} // eslint-disable-line - >; + }) as PolymorphicForwardRefComponent>; Comp.displayName = getDisplayNameFromClass(className); @@ -72,3 +72,11 @@ const getDisplayNameFromClass = (str: string) => { const camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); return camel.substring(3); }; + +// e.g. iui-button -> _iui3-button +const getScopedClassName = (className = '') => { + return className + .split(' ') + .map((c) => (c in styles ? styles[c] : c)) + .join(' '); +}; From a6debbb5da3bb49ed060f5665a4d44284df6b6c8 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Wed, 31 May 2023 15:09:01 -0400 Subject: [PATCH 22/61] fix `getContainer` --- packages/itwinui-react/src/core/utils/functions/dom.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/utils/functions/dom.ts b/packages/itwinui-react/src/core/utils/functions/dom.ts index 3570a3c9182..e5eaeaf3c1a 100644 --- a/packages/itwinui-react/src/core/utils/functions/dom.ts +++ b/packages/itwinui-react/src/core/utils/functions/dom.ts @@ -3,6 +3,8 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +import styles from '../../../styles.js'; + /** * Get the container as a child of body, or create one if it doesn't exist. * Mostly used for dynamic components like Modal or Toast. @@ -18,7 +20,9 @@ export const getContainer = ( if (container == null && !!ownerDocument) { container = ownerDocument.createElement('div'); container.setAttribute('id', containerId); - const root = ownerDocument.querySelector('.iui-root') ?? ownerDocument.body; + const root = + ownerDocument.querySelector(`.${styles['iui-root']}`) ?? + ownerDocument.body; root.appendChild(container); } return container; From 4177e721aad352968085f3d99afc9a363b78f1ca Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Wed, 31 May 2023 15:28:19 -0400 Subject: [PATCH 23/61] add Box to remaining components --- .../src/core/ExpandableBlock/ExpandableBlock.tsx | 16 ++++++++-------- .../itwinui-react/src/core/utils/icons/Svg.tsx | 7 +++++++ .../src/core/utils/icons/SvgCalendar.tsx | 8 +++++--- .../src/core/utils/icons/SvgCaretDownSmall.tsx | 10 +++++++--- .../src/core/utils/icons/SvgCaretRightSmall.tsx | 10 +++++++--- .../src/core/utils/icons/SvgCaretUpSmall.tsx | 10 +++++++--- .../src/core/utils/icons/SvgCheckmark.tsx | 8 +++++--- .../src/core/utils/icons/SvgCheckmarkSmall.tsx | 10 +++++++--- .../src/core/utils/icons/SvgChevronLeft.tsx | 10 +++++++--- .../core/utils/icons/SvgChevronLeftDouble.tsx | 10 +++++++--- .../src/core/utils/icons/SvgChevronRight.tsx | 10 +++++++--- .../core/utils/icons/SvgChevronRightDouble.tsx | 10 +++++++--- .../src/core/utils/icons/SvgClose.tsx | 8 +++++--- .../src/core/utils/icons/SvgCloseSmall.tsx | 8 +++++--- .../src/core/utils/icons/SvgColumnManager.tsx | 10 +++++++--- .../src/core/utils/icons/SvgDocument.tsx | 8 +++++--- .../src/core/utils/icons/SvgFilter.tsx | 8 +++++--- .../src/core/utils/icons/SvgFilterHollow.tsx | 10 +++++++--- .../src/core/utils/icons/SvgImportantSmall.tsx | 10 +++++++--- .../src/core/utils/icons/SvgInfoCircular.tsx | 10 +++++++--- .../src/core/utils/icons/SvgMore.tsx | 8 +++++--- .../src/core/utils/icons/SvgMoreVertical.tsx | 10 +++++++--- .../src/core/utils/icons/SvgNew.tsx | 8 +++++--- .../src/core/utils/icons/SvgSearch.tsx | 8 +++++--- .../src/core/utils/icons/SvgSmileyHappy.tsx | 10 +++++++--- .../src/core/utils/icons/SvgSortDown.tsx | 8 +++++--- .../src/core/utils/icons/SvgSortUp.tsx | 8 +++++--- .../src/core/utils/icons/SvgStatusError.tsx | 10 +++++++--- .../src/core/utils/icons/SvgStatusSuccess.tsx | 10 +++++++--- .../src/core/utils/icons/SvgStatusWarning.tsx | 10 +++++++--- .../src/core/utils/icons/SvgSwap.tsx | 8 +++++--- .../src/core/utils/icons/SvgUpload.tsx | 8 +++++--- 32 files changed, 199 insertions(+), 98 deletions(-) create mode 100644 packages/itwinui-react/src/core/utils/icons/Svg.tsx diff --git a/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx b/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx index 47fe60e0cc7..69e2f91bfee 100644 --- a/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx +++ b/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx @@ -126,7 +126,7 @@ export const ExpandableBlock = React.forwardRef((props, ref) => { ref={ref} {...rest} > -
{ onKeyDown={onKeyDown} > - -
{title}
- {caption &&
{caption}
} - + + {title} + {caption && {caption}} + {icon && {icon}} -
+ -
+
{children}
-
+ ); diff --git a/packages/itwinui-react/src/core/utils/icons/Svg.tsx b/packages/itwinui-react/src/core/utils/icons/Svg.tsx new file mode 100644 index 00000000000..21440dca470 --- /dev/null +++ b/packages/itwinui-react/src/core/utils/icons/Svg.tsx @@ -0,0 +1,7 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import { polymorphic } from '../functions/polymorphic.js'; + +export const Svg = polymorphic.svg('', { viewBox: '0 0 16 16' }); diff --git a/packages/itwinui-react/src/core/utils/icons/SvgCalendar.tsx b/packages/itwinui-react/src/core/utils/icons/SvgCalendar.tsx index 1cb598cfabf..5ae1e6f782f 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgCalendar.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgCalendar.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgCalendar = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgCalendar = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgCaretDownSmall.tsx b/packages/itwinui-react/src/core/utils/icons/SvgCaretDownSmall.tsx index 25653a17a90..9f375d096c0 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgCaretDownSmall.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgCaretDownSmall.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgCaretDownSmall = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgCaretDownSmall = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgCaretRightSmall.tsx b/packages/itwinui-react/src/core/utils/icons/SvgCaretRightSmall.tsx index d588127070f..cfd8da2bf40 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgCaretRightSmall.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgCaretRightSmall.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgCaretRightSmall = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgCaretRightSmall = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgCaretUpSmall.tsx b/packages/itwinui-react/src/core/utils/icons/SvgCaretUpSmall.tsx index bca6a0c1623..767bf11b898 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgCaretUpSmall.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgCaretUpSmall.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgCaretUpSmall = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgCaretUpSmall = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgCheckmark.tsx b/packages/itwinui-react/src/core/utils/icons/SvgCheckmark.tsx index 6e09e20b416..b17ff798aa2 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgCheckmark.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgCheckmark.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgCheckmark = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgCheckmark = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgCheckmarkSmall.tsx b/packages/itwinui-react/src/core/utils/icons/SvgCheckmarkSmall.tsx index 7eb47685aa3..dd95c859d3f 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgCheckmarkSmall.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgCheckmarkSmall.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgCheckmarkSmall = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgCheckmarkSmall = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgChevronLeft.tsx b/packages/itwinui-react/src/core/utils/icons/SvgChevronLeft.tsx index 7287fe4c92b..9f956a6411b 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgChevronLeft.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgChevronLeft.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgChevronLeft = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgChevronLeft = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgChevronLeftDouble.tsx b/packages/itwinui-react/src/core/utils/icons/SvgChevronLeftDouble.tsx index 3b4e07a6633..469e77e54e1 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgChevronLeftDouble.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgChevronLeftDouble.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgChevronLeftDouble = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgChevronLeftDouble = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgChevronRight.tsx b/packages/itwinui-react/src/core/utils/icons/SvgChevronRight.tsx index f7b79ccf832..0407aa16536 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgChevronRight.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgChevronRight.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgChevronRight = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgChevronRight = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgChevronRightDouble.tsx b/packages/itwinui-react/src/core/utils/icons/SvgChevronRightDouble.tsx index 90c015a2e91..61d52f8847b 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgChevronRightDouble.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgChevronRightDouble.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgChevronRightDouble = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgChevronRightDouble = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgClose.tsx b/packages/itwinui-react/src/core/utils/icons/SvgClose.tsx index ff251c98759..0438b470ff9 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgClose.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgClose.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgClose = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgClose = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgCloseSmall.tsx b/packages/itwinui-react/src/core/utils/icons/SvgCloseSmall.tsx index fe56d709011..ca6d27085f6 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgCloseSmall.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgCloseSmall.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgCloseSmall = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgCloseSmall = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgColumnManager.tsx b/packages/itwinui-react/src/core/utils/icons/SvgColumnManager.tsx index 5973cd394c6..03a39526b63 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgColumnManager.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgColumnManager.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgColumnManager = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgColumnManager = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgDocument.tsx b/packages/itwinui-react/src/core/utils/icons/SvgDocument.tsx index a7f6f91b1e9..7566c8f0c8e 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgDocument.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgDocument.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgDocument = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgDocument = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgFilter.tsx b/packages/itwinui-react/src/core/utils/icons/SvgFilter.tsx index 544a53ad210..08d7f2c5de2 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgFilter.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgFilter.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgFilter = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgFilter = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgFilterHollow.tsx b/packages/itwinui-react/src/core/utils/icons/SvgFilterHollow.tsx index d94a90440c2..1f2f50acdbf 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgFilterHollow.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgFilterHollow.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgFilterHollow = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgFilterHollow = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgImportantSmall.tsx b/packages/itwinui-react/src/core/utils/icons/SvgImportantSmall.tsx index f28f70c9f0a..f9b29d0e532 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgImportantSmall.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgImportantSmall.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgImportantSmall = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgImportantSmall = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgInfoCircular.tsx b/packages/itwinui-react/src/core/utils/icons/SvgInfoCircular.tsx index 780435e3f64..30c7f2592cc 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgInfoCircular.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgInfoCircular.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgInfoCircular = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgInfoCircular = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgMore.tsx b/packages/itwinui-react/src/core/utils/icons/SvgMore.tsx index 2d17d49f8ed..b3df4292eb4 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgMore.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgMore.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgMore = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgMore = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgMoreVertical.tsx b/packages/itwinui-react/src/core/utils/icons/SvgMoreVertical.tsx index 1e7255cda07..f60c6a1b9ef 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgMoreVertical.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgMoreVertical.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgMoreVertical = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgMoreVertical = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgNew.tsx b/packages/itwinui-react/src/core/utils/icons/SvgNew.tsx index 050ee7f37f6..19beeab3064 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgNew.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgNew.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgNew = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgNew = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgSearch.tsx b/packages/itwinui-react/src/core/utils/icons/SvgSearch.tsx index b041382b43c..594bd856170 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgSearch.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgSearch.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgSearch = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgSearch = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgSmileyHappy.tsx b/packages/itwinui-react/src/core/utils/icons/SvgSmileyHappy.tsx index e751ef0d2db..ce701270489 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgSmileyHappy.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgSmileyHappy.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgSmileyHappy = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgSmileyHappy = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgSortDown.tsx b/packages/itwinui-react/src/core/utils/icons/SvgSortDown.tsx index 4ae7964dc15..69bfe957aa4 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgSortDown.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgSortDown.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgSortDown = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgSortDown = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgSortUp.tsx b/packages/itwinui-react/src/core/utils/icons/SvgSortUp.tsx index ee525ebcc8a..39aa9526cf2 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgSortUp.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgSortUp.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgSortUp = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgSortUp = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgStatusError.tsx b/packages/itwinui-react/src/core/utils/icons/SvgStatusError.tsx index 08936f6c77a..e3ee80a26a7 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgStatusError.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgStatusError.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgStatusError = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgStatusError = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgStatusSuccess.tsx b/packages/itwinui-react/src/core/utils/icons/SvgStatusSuccess.tsx index 29971a1b418..248b4647ef4 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgStatusSuccess.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgStatusSuccess.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgStatusSuccess = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgStatusSuccess = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgStatusWarning.tsx b/packages/itwinui-react/src/core/utils/icons/SvgStatusWarning.tsx index 9613d0d17cc..3af9625817d 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgStatusWarning.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgStatusWarning.tsx @@ -3,10 +3,14 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgStatusWarning = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgStatusWarning = ( + props: React.ComponentPropsWithoutRef<'svg'>, +) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgSwap.tsx b/packages/itwinui-react/src/core/utils/icons/SvgSwap.tsx index b00cd39208c..2083771ef14 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgSwap.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgSwap.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgSwap = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgSwap = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; diff --git a/packages/itwinui-react/src/core/utils/icons/SvgUpload.tsx b/packages/itwinui-react/src/core/utils/icons/SvgUpload.tsx index 42ce2bd6d01..8c31f4e9c1d 100644 --- a/packages/itwinui-react/src/core/utils/icons/SvgUpload.tsx +++ b/packages/itwinui-react/src/core/utils/icons/SvgUpload.tsx @@ -3,10 +3,12 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -export const SvgUpload = (props: React.ComponentProps<'svg'>) => { +import { Svg } from './Svg.js'; + +export const SvgUpload = (props: React.ComponentPropsWithoutRef<'svg'>) => { return ( - + - + ); }; From 8ad4039f3c78adcabfd9bb29617863639d88644f Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 1 Jun 2023 11:02:44 -0400 Subject: [PATCH 24/61] remove css imports from components --- .../.storybook/StoryWithDecorator.jsx | 1 + apps/storybook/src/Overview.stories.mdx | 50 ++++++++++++------- apps/website/src/pages/docs/index.mdx | 42 +++++++++------- apps/website/src/pages/index.astro | 3 +- cra-sandbox/src/index.tsx | 1 + packages/itwinui-react/README.md | 50 +++++++++++-------- packages/itwinui-react/package.json | 7 ++- .../itwinui-react/src/core/Alert/Alert.tsx | 1 - .../itwinui-react/src/core/Avatar/Avatar.tsx | 1 - .../src/core/AvatarGroup/AvatarGroup.tsx | 1 - .../src/core/Backdrop/Backdrop.tsx | 1 - .../itwinui-react/src/core/Badge/Badge.tsx | 1 - .../src/core/Breadcrumbs/Breadcrumbs.tsx | 1 - .../src/core/ButtonGroup/ButtonGroup.tsx | 1 - .../src/core/Buttons/Button/Button.tsx | 1 - .../Buttons/DropdownButton/DropdownButton.tsx | 1 - .../core/Buttons/IconButton/IconButton.tsx | 2 - .../core/Buttons/SplitButton/SplitButton.tsx | 1 - .../src/core/Carousel/Carousel.tsx | 1 - .../src/core/Carousel/CarouselDotsList.tsx | 1 - .../src/core/Checkbox/Checkbox.tsx | 1 - .../src/core/ColorPicker/ColorBuilder.tsx | 1 - .../src/core/ColorPicker/ColorInputPanel.tsx | 1 - .../src/core/ColorPicker/ColorPalette.tsx | 1 - .../src/core/ColorPicker/ColorPicker.tsx | 1 - .../src/core/ColorPicker/ColorSwatch.tsx | 1 - .../src/core/ComboBox/ComboBox.tsx | 1 - .../src/core/DatePicker/DatePicker.tsx | 1 - .../itwinui-react/src/core/Dialog/Dialog.tsx | 1 - .../src/core/Dialog/DialogButtonBar.tsx | 1 - .../src/core/Dialog/DialogContent.tsx | 1 - .../src/core/Dialog/DialogMain.tsx | 1 - .../src/core/Dialog/DialogTitleBar.tsx | 1 - .../src/core/Dialog/DialogTitleBarTitle.tsx | 1 - .../core/ExpandableBlock/ExpandableBlock.tsx | 1 - .../src/core/Fieldset/Fieldset.tsx | 1 - .../src/core/FileUpload/FileUpload.tsx | 1 - .../src/core/FileUpload/FileUploadCard.tsx | 1 - .../core/FileUpload/FileUploadTemplate.tsx | 1 - .../itwinui-react/src/core/Footer/Footer.tsx | 1 - .../src/core/Footer/FooterItem.tsx | 1 - .../src/core/Footer/FooterList.tsx | 1 - .../src/core/Footer/FooterSeparator.tsx | 1 - .../itwinui-react/src/core/Header/Header.tsx | 1 - .../src/core/Header/HeaderBreadcrumbs.tsx | 1 - .../src/core/Header/HeaderButton.tsx | 1 - .../src/core/Header/HeaderLogo.tsx | 1 - .../InformationPanel/InformationPanel.tsx | 1 - .../InformationPanel/InformationPanelBody.tsx | 1 - .../InformationPanelContent.tsx | 1 - .../InformationPanelHeader.tsx | 1 - .../InformationPanelWrapper.tsx | 1 - .../itwinui-react/src/core/Input/Input.tsx | 1 - .../src/core/InputGroup/InputGroup.tsx | 1 - .../itwinui-react/src/core/Label/Label.tsx | 1 - .../src/core/LabeledInput/LabeledInput.tsx | 1 - .../src/core/LabeledSelect/LabeledSelect.tsx | 1 - .../core/LabeledTextarea/LabeledTextarea.tsx | 1 - packages/itwinui-react/src/core/List/List.tsx | 1 - .../itwinui-react/src/core/List/ListItem.tsx | 1 - packages/itwinui-react/src/core/Menu/Menu.tsx | 1 - .../src/core/Menu/MenuDivider.tsx | 1 - .../src/core/Menu/MenuExtraContent.tsx | 1 - .../itwinui-react/src/core/Menu/MenuItem.tsx | 1 - .../src/core/Menu/MenuItemSkeleton.tsx | 1 - .../itwinui-react/src/core/Modal/Modal.tsx | 1 - .../src/core/NonIdealState/NonIdealState.tsx | 1 - .../NotificationMarker/NotificationMarker.tsx | 1 - .../ProgressLinear/ProgressLinear.tsx | 1 - .../ProgressRadial/ProgressRadial.tsx | 1 - .../itwinui-react/src/core/Radio/Radio.tsx | 1 - .../src/core/RadioTiles/RadioTile.tsx | 1 - .../src/core/RadioTiles/RadioTileGroup.tsx | 1 - .../src/core/SearchBox/SearchBox.tsx | 1 - .../itwinui-react/src/core/Select/Select.tsx | 1 - .../src/core/Select/SelectTag.tsx | 1 - .../core/SideNavigation/SideNavigation.tsx | 1 - .../src/core/SideNavigation/SidenavButton.tsx | 1 - .../core/SideNavigation/SidenavSubmenu.tsx | 1 - .../SideNavigation/SidenavSubmenuHeader.tsx | 1 - .../SkipToContentLink/SkipToContentLink.tsx | 1 - .../itwinui-react/src/core/Slider/Slider.tsx | 1 - .../src/core/Stepper/Stepper.tsx | 1 - .../src/core/Stepper/WorkflowDiagram.tsx | 1 - .../src/core/Surface/Surface.tsx | 1 - .../itwinui-react/src/core/Table/Table.tsx | 1 - .../src/core/Table/TablePaginator.tsx | 1 - .../src/core/Table/filters/BaseFilter.tsx | 1 - .../DateRangeFilter/DateRangeFilter.tsx | 1 - .../core/Table/filters/FilterButtonBar.tsx | 1 - .../src/core/Table/filters/FilterToggle.tsx | 1 - .../NumberRangeFilter/NumberRangeFilter.tsx | 1 - .../Table/filters/TextFilter/TextFilter.tsx | 1 - packages/itwinui-react/src/core/Tabs/Tab.tsx | 1 - packages/itwinui-react/src/core/Tabs/Tabs.tsx | 1 - packages/itwinui-react/src/core/Tag/Tag.tsx | 1 - .../src/core/Tag/TagContainer.tsx | 1 - .../src/core/Textarea/Textarea.tsx | 1 - .../src/core/ThemeProvider/ThemeProvider.tsx | 2 - packages/itwinui-react/src/core/Tile/Tile.tsx | 1 - .../src/core/TimePicker/TimePicker.tsx | 1 - .../itwinui-react/src/core/Toast/Toast.tsx | 1 - .../src/core/Toast/ToastWrapper.tsx | 1 - .../src/core/ToggleSwitch/ToggleSwitch.tsx | 1 - .../src/core/Tooltip/Tooltip.tsx | 1 - packages/itwinui-react/src/core/Tree/Tree.tsx | 1 - .../itwinui-react/src/core/Tree/TreeNode.tsx | 1 - .../src/core/Tree/TreeNodeExpander.tsx | 1 - .../src/core/Typography/Anchor/Anchor.tsx | 1 - .../core/Typography/Blockquote/Blockquote.tsx | 1 - .../src/core/Typography/Code/Code.tsx | 1 - .../src/core/Typography/Kbd/Kbd.tsx | 1 - .../src/core/Typography/Text/Text.tsx | 1 - .../src/core/utils/components/Divider.tsx | 1 - .../src/core/utils/components/Flex.tsx | 1 - .../src/core/utils/components/Icon.tsx | 1 - .../core/utils/components/InputContainer.tsx | 1 - .../utils/components/InputFlexContainer.tsx | 1 - .../src/core/utils/components/LinkAction.tsx | 1 - .../src/core/utils/components/Popover.tsx | 1 - .../core/utils/components/VisuallyHidden.tsx | 1 - .../src/core/utils/hooks/useGlobals.ts | 2 - packages/itwinui-react/styles.css | 2 + playgrounds/astro/src/pages/_layout.astro | 17 +++++-- playgrounds/next/next.config.js | 1 - playgrounds/next/pages/_app.tsx | 36 +++++++------ playgrounds/next/pages/_document.tsx | 16 ------ playgrounds/vite/src/main.tsx | 1 + 128 files changed, 128 insertions(+), 217 deletions(-) create mode 100644 packages/itwinui-react/styles.css delete mode 100644 playgrounds/next/pages/_document.tsx diff --git a/apps/storybook/.storybook/StoryWithDecorator.jsx b/apps/storybook/.storybook/StoryWithDecorator.jsx index a3ea747a999..17855b7dbe6 100644 --- a/apps/storybook/.storybook/StoryWithDecorator.jsx +++ b/apps/storybook/.storybook/StoryWithDecorator.jsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { useDarkMode } from 'storybook-dark-mode'; import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; export default function StoryWithDecorator(Story, context) { const theme = useDarkMode() ? 'dark' : 'light'; diff --git a/apps/storybook/src/Overview.stories.mdx b/apps/storybook/src/Overview.stories.mdx index e6d63cccee7..4da9fedd47c 100644 --- a/apps/storybook/src/Overview.stories.mdx +++ b/apps/storybook/src/Overview.stories.mdx @@ -29,38 +29,52 @@ npm install @itwin/itwinui-react yarn add @itwin/itwinui-react ``` -## Usage +--- -Import the component you want and start using it! +## Setup -```jsx -import { Button } from '@itwin/itwinui-react'; +Wrap your application entrypoint in `ThemeProvider` and import `styles.css`. -const App = () => ; +```jsx +import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; + +export default function App() { + return ( + <> + + {/* Your components go here. */} + + + ); +} ``` -Yes, that's really all you need as you can see in this live interactive demo: +ThemeProvider has a `theme` prop which accepts one of the following values: -[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) + - `light` (default) + - `dark` + - `os` (respects the color scheme of the operating system) + - `inherit` -## Theming +--- -By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop: +## Usage -- `light` (default) -- `dark` -- `os` (which respects the color scheme of the operating system) +After setting up ThemeProvider and styles, import the component you want and start using it! ```jsx -import { ThemeProvider } from '@itwin/itwinui-react'; +import { Button } from '@itwin/itwinui-react'; -const App = () => ( - <> - {/* Your components go here. */} - -); +const Page = () => ; ``` +Check out this template for a live interactive demo: + +[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) + +--- + ## FAQ For a list of frequently asked questions, visit the [wiki](https://github.com/iTwin/iTwinUI/wiki/FAQ). diff --git a/apps/website/src/pages/docs/index.mdx b/apps/website/src/pages/docs/index.mdx index 0eeff0c25be..12a5fb98f01 100644 --- a/apps/website/src/pages/docs/index.mdx +++ b/apps/website/src/pages/docs/index.mdx @@ -15,32 +15,40 @@ npm install @itwin/itwinui-react yarn add @itwin/itwinui-react ``` -## Usage +## Setup -Import the component you want and start using it! +Wrap your application entrypoint in `ThemeProvider` and import `styles.css`. ```jsx -import { Button } from '@itwin/itwinui-react'; - -const App = () => ; +import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; + +export default function App() { + return ( + <> + {/* Your components go here. */} + + ); +} ``` -## Theming - -By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop: +ThemeProvider has a `theme` prop which accepts one of the following values: - `light` (default) - `dark` -- `os` (which respects the color scheme of the operating system) +- `os` (respects the color scheme of the operating system) +- `inherit` + +## Usage + +After setting up ThemeProvider and styles, import the component you want and start using it! ```jsx -import { ThemeProvider } from '@itwin/itwinui-react'; +import { Button } from '@itwin/itwinui-react'; -const App = () => ( - <> - - <>{/* Your components go here. */} - - -); +const Page = () => ; ``` + +Check out this template for a live interactive demo: + +[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro index ce266ba29af..1161ccb02aa 100644 --- a/apps/website/src/pages/index.astro +++ b/apps/website/src/pages/index.astro @@ -1,6 +1,5 @@ --- -import '@itwin/itwinui-css/css/all.css'; -import '@itwin/itwinui-variables'; +import '@itwin/itwinui-react/styles.css'; import Global from './_global.astro'; import Header from '~/components/Header.astro'; import ITwinUILogo from '~/components/iTwinUILogo'; diff --git a/cra-sandbox/src/index.tsx b/cra-sandbox/src/index.tsx index 4b5a6964e10..3d06aa3b1be 100644 --- a/cra-sandbox/src/index.tsx +++ b/cra-sandbox/src/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; import { IconButton, ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; import './styles.css'; const rootElement = document.getElementById('root')!; diff --git a/packages/itwinui-react/README.md b/packages/itwinui-react/README.md index 83f6ff17adb..276eb6e82e7 100644 --- a/packages/itwinui-react/README.md +++ b/packages/itwinui-react/README.md @@ -39,43 +39,49 @@ yarn add @itwin/itwinui-react --- -## Usage +## Setup -Import the component you want and start using it! +Wrap your application entrypoint in `ThemeProvider` and import `styles.css`. ```jsx -import { Button } from '@itwin/itwinui-react'; - -const App = () => ( - -); +import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; + +export default function App() { + return ( + <> + + {/* Your components go here. */} + + + ); +} ``` -Yes, that's really all you need as you can see in this live interactive demo: - -[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) +ThemeProvider has a `theme` prop which accepts one of the following values: + - `light` (default) + - `dark` + - `os` (respects the color scheme of the operating system) + - `inherit` --- -## Theming +## Usage -By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop: - - `light` (default) - - `dark` - - `os` (which respects the color scheme of the operating system) +After setting up ThemeProvider and styles, import the component you want and start using it! ```jsx -import { ThemeProvider } from '@itwin/itwinui-react'; +import { Button } from '@itwin/itwinui-react'; -const App = () => ( - <> - - {/* Your components go here. */} - - +const Page = () => ( + ); ``` +Check out this template for a live interactive demo: + +[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx) + --- ## FAQ diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json index 7eb7cce6c39..3d9cb203f27 100644 --- a/packages/itwinui-react/package.json +++ b/packages/itwinui-react/package.json @@ -17,6 +17,7 @@ "default": "./cjs/index.js" } }, + "./styles.css": "./styles.css", "./cjs": "./cjs/index.js", "./esm": "./esm/index.js", "./cjs/core/utils": "./cjs/core/utils/index.js", @@ -26,6 +27,7 @@ "files": [ "cjs", "esm", + "styles.css", "CHANGELOG.md", "LICENSE.md" ], @@ -124,8 +126,5 @@ ] }, "prettier": "configs/prettier-config", - "sideEffects": [ - "**/*.scss", - "**/*.css" - ] + "sideEffects": false } diff --git a/packages/itwinui-react/src/core/Alert/Alert.tsx b/packages/itwinui-react/src/core/Alert/Alert.tsx index 8ef9aa7406e..041660a33df 100644 --- a/packages/itwinui-react/src/core/Alert/Alert.tsx +++ b/packages/itwinui-react/src/core/Alert/Alert.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import cx from 'classnames'; import * as React from 'react'; -import '@itwin/itwinui-css/css/alert.css'; import { StatusIconMap, SvgCloseSmall, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Avatar/Avatar.tsx b/packages/itwinui-react/src/core/Avatar/Avatar.tsx index 9e2e8571220..fafdd2c8b95 100644 --- a/packages/itwinui-react/src/core/Avatar/Avatar.tsx +++ b/packages/itwinui-react/src/core/Avatar/Avatar.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/avatar.css'; export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline'; diff --git a/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx b/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx index 55fea93988e..6336548f671 100644 --- a/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx +++ b/packages/itwinui-react/src/core/AvatarGroup/AvatarGroup.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/avatar.css'; type AvatarGroupProps = { /** diff --git a/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx b/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx index cafd75c929f..8d83cca4474 100644 --- a/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx +++ b/packages/itwinui-react/src/core/Backdrop/Backdrop.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/backdrop.css'; export type BackdropProps = { /** diff --git a/packages/itwinui-react/src/core/Badge/Badge.tsx b/packages/itwinui-react/src/core/Badge/Badge.tsx index ab457334cf7..a5999c4c998 100644 --- a/packages/itwinui-react/src/core/Badge/Badge.tsx +++ b/packages/itwinui-react/src/core/Badge/Badge.tsx @@ -9,7 +9,6 @@ import type { AnyString, PolymorphicForwardRefComponent, } from '../utils/index.js'; -import '@itwin/itwinui-css/css/badge.css'; /** * Helper function that returns one of the preset badge color values. diff --git a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx index 58ac34b5055..e98bf61d4fa 100644 --- a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx @@ -11,7 +11,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/breadcrumbs.css'; type BreadcrumbsProps = { /** diff --git a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx index 63e2ddf0dcf..804d63a1082 100644 --- a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx +++ b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { useOverflow, useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; type ButtonGroupProps = { /** diff --git a/packages/itwinui-react/src/core/Buttons/Button/Button.tsx b/packages/itwinui-react/src/core/Buttons/Button/Button.tsx index 128bbcd1365..7fd7b79d4ef 100644 --- a/packages/itwinui-react/src/core/Buttons/Button/Button.tsx +++ b/packages/itwinui-react/src/core/Buttons/Button/Button.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; export type ButtonProps = { /** diff --git a/packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx b/packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx index 87973b1f4db..6110e263e76 100644 --- a/packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx @@ -14,7 +14,6 @@ import { useMergedRefs, } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; export type DropdownButtonProps = { /** diff --git a/packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx b/packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx index 0dc3f09b464..c3f5171191f 100644 --- a/packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx @@ -7,8 +7,6 @@ import * as React from 'react'; import { VisuallyHidden, Popover, Box } from '../../utils/index.js'; import type { ButtonProps } from '../Button/Button.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; -import '@itwin/itwinui-css/css/tooltip.css'; export type IconButtonProps = { /** diff --git a/packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx b/packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx index 0f1cb0aa782..d62198dabb2 100644 --- a/packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/SplitButton/SplitButton.tsx @@ -11,7 +11,6 @@ import { DropdownMenu } from '../../DropdownMenu/index.js'; import type { Placement } from 'tippy.js'; import { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/button.css'; export type SplitButtonProps = ButtonProps & { /** diff --git a/packages/itwinui-react/src/core/Carousel/Carousel.tsx b/packages/itwinui-react/src/core/Carousel/Carousel.tsx index 1a7f790c3ae..e9aa176cf56 100644 --- a/packages/itwinui-react/src/core/Carousel/Carousel.tsx +++ b/packages/itwinui-react/src/core/Carousel/Carousel.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { getRandomValue, useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/carousel.css'; import { CarouselContext } from './CarouselContext.js'; import { CarouselSlider } from './CarouselSlider.js'; import { CarouselSlide } from './CarouselSlide.js'; diff --git a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx b/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx index d3bc03a9c72..44b7bd23838 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx +++ b/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx @@ -14,7 +14,6 @@ import { } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { CarouselDot } from './CarouselDot.js'; -import '@itwin/itwinui-css/css/carousel.css'; type CarouselDotsListProps = { /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */ diff --git a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx index adc1dd615df..e91eaf40f21 100644 --- a/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx +++ b/packages/itwinui-react/src/core/Checkbox/Checkbox.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/checkbox.css'; type CheckboxProps = { /** diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx index 6bf37369500..11e163e89fa 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorBuilder.tsx @@ -16,7 +16,6 @@ import type { PolymorphicForwardRefComponent, } from '../utils/index.js'; import { Slider } from '../Slider/index.js'; -import '@itwin/itwinui-css/css/color-picker.css'; import { useColorPickerContext } from './ColorPickerContext.js'; const getVerticalPercentageOfRectangle = (rect: DOMRect, pointer: number) => { diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx index 8248659a3b8..48396898eb3 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorInputPanel.tsx @@ -9,7 +9,6 @@ import { Input } from '../Input/index.js'; import { ColorValue, InputContainer, SvgSwap, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { useColorPickerContext } from './ColorPickerContext.js'; -import '@itwin/itwinui-css/css/color-picker.css'; type ColorInputPanelProps = { /** diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx index cb78d85a19f..ac696a93ee7 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorPalette.tsx @@ -17,7 +17,6 @@ import type { import { getColorValue } from './ColorPicker.js'; import { ColorSwatch } from './ColorSwatch.js'; import { useColorPickerContext } from './ColorPickerContext.js'; -import '@itwin/itwinui-css/css/color-picker.css'; export type ColorPaletteProps = { /** diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx index 860ccf0b6c8..03f6b101662 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorPicker.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import '@itwin/itwinui-css/css/color-picker.css'; import { ColorValue, getTabbableElements, diff --git a/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx b/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx index f5ee11ffa83..b7ec02d8823 100644 --- a/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx +++ b/packages/itwinui-react/src/core/ColorPicker/ColorSwatch.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/color-picker.css'; import { ColorValue, Box } from '../utils/index.js'; import type { ColorType, diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx index 7c3b1e951ac..8b852491cbf 100644 --- a/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx +++ b/packages/itwinui-react/src/core/ComboBox/ComboBox.tsx @@ -20,7 +20,6 @@ import type { InputContainerProps, CommonProps, } from '../utils/index.js'; -import 'tippy.js/animations/shift-away.css'; import { ComboBoxActionContext, comboBoxReducer, diff --git a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx index 6600c2bcff0..0ab62ecb38a 100644 --- a/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx +++ b/packages/itwinui-react/src/core/DatePicker/DatePicker.tsx @@ -13,7 +13,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/date-picker.css'; import { IconButton } from '../Buttons/IconButton/index.js'; import { TimePicker } from '../TimePicker/index.js'; import type { TimePickerProps } from '../TimePicker/TimePicker.js'; diff --git a/packages/itwinui-react/src/core/Dialog/Dialog.tsx b/packages/itwinui-react/src/core/Dialog/Dialog.tsx index 7a2650ff061..86536492d13 100644 --- a/packages/itwinui-react/src/core/Dialog/Dialog.tsx +++ b/packages/itwinui-react/src/core/Dialog/Dialog.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/dialog.css'; import { DialogTitleBar } from './DialogTitleBar.js'; import { DialogContent } from './DialogContent.js'; import { DialogBackdrop } from './DialogBackdrop.js'; diff --git a/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx b/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx index 706f5a8a490..46e15ecfb54 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogButtonBar.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; /** * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`. diff --git a/packages/itwinui-react/src/core/Dialog/DialogContent.tsx b/packages/itwinui-react/src/core/Dialog/DialogContent.tsx index 4e722d4128c..b3e8eb1d174 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogContent.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogContent.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; /** * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`. diff --git a/packages/itwinui-react/src/core/Dialog/DialogMain.tsx b/packages/itwinui-react/src/core/Dialog/DialogMain.tsx index 2e670973798..41f42d0508e 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogMain.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogMain.tsx @@ -13,7 +13,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; import { useDialogContext } from './DialogContext.js'; import type { DialogContextProps } from './DialogContext.js'; import { CSSTransition } from 'react-transition-group'; diff --git a/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx b/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx index a4b0cc7d088..8c3cb950346 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogTitleBar.tsx @@ -7,7 +7,6 @@ import cx from 'classnames'; import { SvgClose, mergeEventHandlers, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { IconButton } from '../Buttons/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; import { useDialogContext } from './DialogContext.js'; import type { DialogContextProps } from './DialogContext.js'; import { DialogTitleBarTitle } from './DialogTitleBarTitle.js'; diff --git a/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx b/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx index b4786f38d44..0fd23a4ffad 100644 --- a/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx +++ b/packages/itwinui-react/src/core/Dialog/DialogTitleBarTitle.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; /** * Dialog title bar. Recommended to be used as a child of `Dialog`. diff --git a/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx b/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx index 69e2f91bfee..cc5409db770 100644 --- a/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx +++ b/packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx @@ -12,7 +12,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/expandable-block.css'; type ExpandableBlockProps = { /** diff --git a/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx b/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx index bdb1738b55b..dc9de4fd47e 100644 --- a/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx +++ b/packages/itwinui-react/src/core/Fieldset/Fieldset.tsx @@ -7,7 +7,6 @@ import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/fieldset.css'; type FieldsetProps = { /** diff --git a/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx b/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx index 7c59cc505b6..1bac1bf35f1 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx +++ b/packages/itwinui-react/src/core/FileUpload/FileUpload.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box, useMergedRefs } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/file-upload.css'; type FileUploadProps = { /** diff --git a/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx b/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx index 7e9d803aac3..54353eb2cef 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx +++ b/packages/itwinui-react/src/core/FileUpload/FileUploadCard.tsx @@ -18,7 +18,6 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import cx from 'classnames'; import { FileEmptyCard } from './FileEmptyCard.js'; import { Anchor } from '../Typography/Anchor/Anchor.js'; -import '@itwin/itwinui-css/css/file-upload.css'; const toBytes = (bytes: number) => { const units = [' bytes', 'KB', 'MB', 'GB', 'TB']; diff --git a/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx b/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx index b5ec511e393..ef7aa945362 100644 --- a/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx +++ b/packages/itwinui-react/src/core/FileUpload/FileUploadTemplate.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { SvgUpload, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/file-upload.css'; import { Anchor } from '../Typography/Anchor/Anchor.js'; type FileUploadTemplateProps = { diff --git a/packages/itwinui-react/src/core/Footer/Footer.tsx b/packages/itwinui-react/src/core/Footer/Footer.tsx index 05a38303881..78a6e6eb901 100644 --- a/packages/itwinui-react/src/core/Footer/Footer.tsx +++ b/packages/itwinui-react/src/core/Footer/Footer.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/footer.css'; import { FooterItem } from './FooterItem.js'; import { FooterSeparator } from './FooterSeparator.js'; import { FooterList } from './FooterList.js'; diff --git a/packages/itwinui-react/src/core/Footer/FooterItem.tsx b/packages/itwinui-react/src/core/Footer/FooterItem.tsx index 196995ac2f6..79652436f8d 100644 --- a/packages/itwinui-react/src/core/Footer/FooterItem.tsx +++ b/packages/itwinui-react/src/core/Footer/FooterItem.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/footer.css'; /** * Footer item. Recommended to use inside `Footer.List`. diff --git a/packages/itwinui-react/src/core/Footer/FooterList.tsx b/packages/itwinui-react/src/core/Footer/FooterList.tsx index c4db9661acc..b9ca8b264be 100644 --- a/packages/itwinui-react/src/core/Footer/FooterList.tsx +++ b/packages/itwinui-react/src/core/Footer/FooterList.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/footer.css'; /** * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`. diff --git a/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx b/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx index aaea1f51679..41bbfd146da 100644 --- a/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx +++ b/packages/itwinui-react/src/core/Footer/FooterSeparator.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/footer.css'; /** * Footer separator. Recommended to use inside `Footer.List`. diff --git a/packages/itwinui-react/src/core/Header/Header.tsx b/packages/itwinui-react/src/core/Header/Header.tsx index 76f9d9fdaad..0b3854679d4 100644 --- a/packages/itwinui-react/src/core/Header/Header.tsx +++ b/packages/itwinui-react/src/core/Header/Header.tsx @@ -8,7 +8,6 @@ import { IconButton } from '../Buttons/index.js'; import { SvgMoreVertical, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/header.css'; import { DropdownMenu } from '../DropdownMenu/index.js'; type HeaderTranslations = { diff --git a/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx b/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx index 1381148cac6..2d7342636ab 100644 --- a/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderBreadcrumbs.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { SvgChevronRight, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/header.css'; type HeaderBreadcrumbsProps = { /** diff --git a/packages/itwinui-react/src/core/Header/HeaderButton.tsx b/packages/itwinui-react/src/core/Header/HeaderButton.tsx index 7defca10c7e..7964649132f 100644 --- a/packages/itwinui-react/src/core/Header/HeaderButton.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderButton.tsx @@ -8,7 +8,6 @@ import type { ButtonProps } from '../Buttons/Button/Button.js'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/header.css'; import { HeaderSplitButton } from './HeaderSplitButton.js'; import { HeaderDropdownButton } from './HeaderDropdownButton.js'; import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js'; diff --git a/packages/itwinui-react/src/core/Header/HeaderLogo.tsx b/packages/itwinui-react/src/core/Header/HeaderLogo.tsx index 3994d621127..61d43ed1ffb 100644 --- a/packages/itwinui-react/src/core/Header/HeaderLogo.tsx +++ b/packages/itwinui-react/src/core/Header/HeaderLogo.tsx @@ -8,7 +8,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/header.css'; type HeaderLogoOwnProps = { /** diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx index 3b13debcbde..c677f26ba63 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanel.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; type InformationPanelProps = { /** diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx index 2dcca1b3af5..def5422c546 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelBody.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; /** * Body of the `InformationPanel` containing the main content. diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx index 47e0ddbf73c..8bc439df602 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelContent.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; type InformationPanelContentProps = { /** diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx index 62ecba175fc..6186631b9f5 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelHeader.tsx @@ -7,7 +7,6 @@ import cx from 'classnames'; import { IconButton } from '../Buttons/index.js'; import { SvgCloseSmall, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; type InformationPanelHeaderProps = { /** diff --git a/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx b/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx index 18e2d4b92f8..1ebdb68dd59 100644 --- a/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx +++ b/packages/itwinui-react/src/core/InformationPanel/InformationPanelWrapper.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/information-panel.css'; /** * InformationPanelWrapper should contain the `InformationPanel` diff --git a/packages/itwinui-react/src/core/Input/Input.tsx b/packages/itwinui-react/src/core/Input/Input.tsx index 6ecc80498f1..327fbc58345 100644 --- a/packages/itwinui-react/src/core/Input/Input.tsx +++ b/packages/itwinui-react/src/core/Input/Input.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/input.css'; export type InputProps = { /** diff --git a/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx b/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx index a505fd2e596..86e818a83f7 100644 --- a/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx +++ b/packages/itwinui-react/src/core/InputGroup/InputGroup.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { StatusIconMap, InputContainer, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/utils.css'; type InputGroupProps = { /** diff --git a/packages/itwinui-react/src/core/Label/Label.tsx b/packages/itwinui-react/src/core/Label/Label.tsx index 5d17d65a398..748514449bd 100644 --- a/packages/itwinui-react/src/core/Label/Label.tsx +++ b/packages/itwinui-react/src/core/Label/Label.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/utils.css'; type LabelOwnProps = { /** diff --git a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx index e4ad0f658e5..32c3eaa9dbb 100644 --- a/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx +++ b/packages/itwinui-react/src/core/LabeledInput/LabeledInput.tsx @@ -7,7 +7,6 @@ import { Input } from '../Input/Input.js'; import type { InputProps } from '../Input/Input.js'; import { StatusIconMap, InputContainer, useId } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/input.css'; export type LabeledInputProps = { /** diff --git a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx index 4f0e72ebbf6..82891665740 100644 --- a/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx +++ b/packages/itwinui-react/src/core/LabeledSelect/LabeledSelect.tsx @@ -8,7 +8,6 @@ import { Select } from '../Select/index.js'; import type { SelectProps } from '../Select/Select.js'; import { StatusIconMap, InputContainer, useId } from '../utils/index.js'; import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js'; -import '@itwin/itwinui-css/css/input.css'; export type LabeledSelectProps = { /** diff --git a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx index 53054a95d62..f9658ce6a6b 100644 --- a/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx +++ b/packages/itwinui-react/src/core/LabeledTextarea/LabeledTextarea.tsx @@ -8,7 +8,6 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { Textarea } from '../Textarea/index.js'; import type { TextareaProps } from '../Textarea/Textarea.js'; import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js'; -import '@itwin/itwinui-css/css/input.css'; type LabeledTextareaProps = { /** diff --git a/packages/itwinui-react/src/core/List/List.tsx b/packages/itwinui-react/src/core/List/List.tsx index c71a30636c2..9c62e72b230 100644 --- a/packages/itwinui-react/src/core/List/List.tsx +++ b/packages/itwinui-react/src/core/List/List.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; export const List = polymorphic.ul('iui-list', { role: 'list' }); List.displayName = 'List'; diff --git a/packages/itwinui-react/src/core/List/ListItem.tsx b/packages/itwinui-react/src/core/List/ListItem.tsx index 74e4f83dab7..5d33ec3e6d4 100644 --- a/packages/itwinui-react/src/core/List/ListItem.tsx +++ b/packages/itwinui-react/src/core/List/ListItem.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { polymorphic, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; const ListItemComponent = React.forwardRef((props, ref) => { const { diff --git a/packages/itwinui-react/src/core/Menu/Menu.tsx b/packages/itwinui-react/src/core/Menu/Menu.tsx index 314ca3a14b7..83f950158bb 100644 --- a/packages/itwinui-react/src/core/Menu/Menu.tsx +++ b/packages/itwinui-react/src/core/Menu/Menu.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { useMergedRefs, getFocusableElements, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; type MenuProps = { /** diff --git a/packages/itwinui-react/src/core/Menu/MenuDivider.tsx b/packages/itwinui-react/src/core/Menu/MenuDivider.tsx index 361f93003db..f12ac56a11c 100644 --- a/packages/itwinui-react/src/core/Menu/MenuDivider.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuDivider.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; /** * Divider between menu items. Should be used inside `Menu`. diff --git a/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx b/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx index 20d0f52134f..8ba722a205f 100644 --- a/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuExtraContent.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; /** * Component that allows to have any additional content inside `Menu`. diff --git a/packages/itwinui-react/src/core/Menu/MenuItem.tsx b/packages/itwinui-react/src/core/Menu/MenuItem.tsx index 3ed9a69c91a..05bdc6a7efd 100644 --- a/packages/itwinui-react/src/core/Menu/MenuItem.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuItem.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { Popover, useMergedRefs, SvgCaretRightSmall } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; import { Menu } from './Menu.js'; import { ListItem } from '../List/ListItem.js'; import type { ListItemOwnProps } from '../List/ListItem.js'; diff --git a/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx b/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx index c8daa03b994..7c79ff14f2a 100644 --- a/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx +++ b/packages/itwinui-react/src/core/Menu/MenuItemSkeleton.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box, VisuallyHidden } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/menu.css'; type MenuItemSkeletonProps = { /** diff --git a/packages/itwinui-react/src/core/Modal/Modal.tsx b/packages/itwinui-react/src/core/Modal/Modal.tsx index 8309b2a99cd..f9cba942b5b 100644 --- a/packages/itwinui-react/src/core/Modal/Modal.tsx +++ b/packages/itwinui-react/src/core/Modal/Modal.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; import { getContainer, getDocument } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/dialog.css'; import { Dialog } from '../Dialog/index.js'; import type { DialogMainProps } from '../Dialog/DialogMain.js'; diff --git a/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx b/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx index 18e32ec684f..ca747a57b2c 100644 --- a/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx +++ b/packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/non-ideal-state.css'; type NonIdealStateProps = { /** diff --git a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx index ba2a088cbaa..f08ec2339ec 100644 --- a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx +++ b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/utils.css'; type NotificationMarkerProps = { /** diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx index 4467233a4e7..a02de2381e9 100644 --- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx +++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressLinear/ProgressLinear.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/progress-indicator.css'; type ProgressLinearProps = { /** diff --git a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx index b00cd905c55..ef3d60445c2 100644 --- a/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx +++ b/packages/itwinui-react/src/core/ProgressIndicators/ProgressRadial/ProgressRadial.tsx @@ -10,7 +10,6 @@ import { Box, } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/progress-indicator.css'; type ProgressRadialProps = { /** diff --git a/packages/itwinui-react/src/core/Radio/Radio.tsx b/packages/itwinui-react/src/core/Radio/Radio.tsx index 49a676a91c5..5ecd9ef03e1 100644 --- a/packages/itwinui-react/src/core/Radio/Radio.tsx +++ b/packages/itwinui-react/src/core/Radio/Radio.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/radio.css'; type RadioProps = { /** diff --git a/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx b/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx index 5b669065e68..14042281e79 100644 --- a/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx +++ b/packages/itwinui-react/src/core/RadioTiles/RadioTile.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/radio-tile.css'; type RadioTileProps = { /** diff --git a/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx b/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx index 8e19e560975..4c15f1af808 100644 --- a/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx +++ b/packages/itwinui-react/src/core/RadioTiles/RadioTileGroup.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { InputGroup } from '../InputGroup/index.js'; -import '@itwin/itwinui-css/css/radio-tile.css'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; diff --git a/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx b/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx index c316bc01575..3a9eab547fa 100644 --- a/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx +++ b/packages/itwinui-react/src/core/SearchBox/SearchBox.tsx @@ -22,7 +22,6 @@ import type { } from '../utils/index.js'; import { IconButton } from '../Buttons/IconButton/index.js'; import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js'; -import '@itwin/itwinui-css/css/searchbox.css'; const SearchBoxContext = React.createContext< | { diff --git a/packages/itwinui-react/src/core/Select/Select.tsx b/packages/itwinui-react/src/core/Select/Select.tsx index 25714526f97..f1fe78be98d 100644 --- a/packages/itwinui-react/src/core/Select/Select.tsx +++ b/packages/itwinui-react/src/core/Select/Select.tsx @@ -18,7 +18,6 @@ import type { PopoverInstance, CommonProps, } from '../utils/index.js'; -import '@itwin/itwinui-css/css/select.css'; import SelectTag from './SelectTag.js'; import SelectTagContainer from './SelectTagContainer.js'; diff --git a/packages/itwinui-react/src/core/Select/SelectTag.tsx b/packages/itwinui-react/src/core/Select/SelectTag.tsx index ce32613c536..6bd5df6203e 100644 --- a/packages/itwinui-react/src/core/Select/SelectTag.tsx +++ b/packages/itwinui-react/src/core/Select/SelectTag.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/select.css'; type SelectTagProps = { /** diff --git a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx index d853d9914e8..2f6696c514e 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx @@ -8,7 +8,6 @@ import { WithCSSTransition, SvgChevronRight, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { IconButton } from '../Buttons/index.js'; import { Tooltip } from '../Tooltip/index.js'; -import '@itwin/itwinui-css/css/side-navigation.css'; type SideNavigationProps = { /** diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx index f9ac854f208..9134d651b43 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavButton.tsx @@ -8,7 +8,6 @@ import * as React from 'react'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { Button } from '../Buttons/index.js'; import type { ButtonProps } from '../Buttons/Button/Button.js'; -import '@itwin/itwinui-css/css/side-navigation.css'; type SidenavButtonProps = { /** diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx index 5c9e130c0d7..aaeae0de186 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenu.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/side-navigation.css'; /** * Subcomponent to be used in the `submenu` prop of `SideNavigation`. diff --git a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx index 9191bc38b5a..0754dd77a77 100644 --- a/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx +++ b/packages/itwinui-react/src/core/SideNavigation/SidenavSubmenuHeader.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/side-navigation.css'; type SidenavSubmenuHeaderProps = { /** diff --git a/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx b/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx index 7c176b1b854..2584fecb8f4 100644 --- a/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx +++ b/packages/itwinui-react/src/core/SkipToContentLink/SkipToContentLink.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/skip-to-content.css'; type SkipToContentLinkProps = { /** diff --git a/packages/itwinui-react/src/core/Slider/Slider.tsx b/packages/itwinui-react/src/core/Slider/Slider.tsx index f7034d434fe..296533e1f72 100644 --- a/packages/itwinui-react/src/core/Slider/Slider.tsx +++ b/packages/itwinui-react/src/core/Slider/Slider.tsx @@ -5,7 +5,6 @@ import cx from 'classnames'; import * as React from 'react'; import { getBoundedValue, useEventListener, Box } from '../utils/index.js'; -import '@itwin/itwinui-css/css/slider.css'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import type { TooltipProps } from '../Tooltip/Tooltip.js'; import { Track } from './Track.js'; diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.tsx index b1b702f77dd..c41fe0914bb 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/stepper.css'; import { StepperStep } from './StepperStep.js'; export type StepperLocalization = { diff --git a/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx b/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx index 1ac97ea29b6..22a312c368d 100644 --- a/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx +++ b/packages/itwinui-react/src/core/Stepper/WorkflowDiagram.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/workflow-diagram.css'; import type { StepperProps } from './Stepper.js'; import { WorkflowDiagramStep } from './WorkflowDiagramStep.js'; diff --git a/packages/itwinui-react/src/core/Surface/Surface.tsx b/packages/itwinui-react/src/core/Surface/Surface.tsx index 63203a8ef29..ab717c7d02f 100644 --- a/packages/itwinui-react/src/core/Surface/Surface.tsx +++ b/packages/itwinui-react/src/core/Surface/Surface.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { useSafeContext, supportsHas, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/surface.css'; /** * Helper function that returns one of the preset surface elevation values. diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx index e29029295bc..dadd4789015 100644 --- a/packages/itwinui-react/src/core/Table/Table.tsx +++ b/packages/itwinui-react/src/core/Table/Table.tsx @@ -35,7 +35,6 @@ import { useIsomorphicLayoutEffect, } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/table.css'; import { getCellStyle, getStickyStyle } from './utils.js'; import { TableRowMemoized } from './TableRowMemoized.js'; import { FilterToggle } from './filters/index.js'; diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.tsx index a99e592b587..daa84d1018c 100644 --- a/packages/itwinui-react/src/core/Table/TablePaginator.tsx +++ b/packages/itwinui-react/src/core/Table/TablePaginator.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/table.css'; import { IconButton, Button, DropdownButton } from '../Buttons/index.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; import { MenuItem } from '../Menu/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx b/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx index d09e96deb47..4f3aa1dd479 100644 --- a/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx +++ b/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/table.css'; import { useGlobals } from '../../utils/index.js'; import type { CommonProps } from '../../utils/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx index 800a385fbb3..ea770953f22 100644 --- a/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx +++ b/packages/itwinui-react/src/core/Table/filters/DateRangeFilter/DateRangeFilter.tsx @@ -8,7 +8,6 @@ import { FilterButtonBar } from '../FilterButtonBar.js'; import type { FilterButtonBarTranslation } from '../FilterButtonBar.js'; import { BaseFilter } from '../BaseFilter.js'; import type { TableFilterProps } from '../types.js'; -import '@itwin/itwinui-css/css/table.css'; import DatePickerInput from './DatePickerInput.js'; export type DateRangeTranslation = { diff --git a/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx b/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx index 3aadd93534f..b2c50d9b802 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/table.css'; import { useGlobals } from '../../utils/index.js'; import type { CommonProps } from '../../utils/index.js'; import { Button } from '../../Buttons/index.js'; diff --git a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx index 4884d03438e..3a2b65f75d6 100644 --- a/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx +++ b/packages/itwinui-react/src/core/Table/filters/FilterToggle.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import cx from 'classnames'; import type { HeaderGroup } from 'react-table'; -import '@itwin/itwinui-css/css/table.css'; import { useGlobals, Popover, diff --git a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx index 94d2ccd0a8d..d17a3916a97 100644 --- a/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx +++ b/packages/itwinui-react/src/core/Table/filters/NumberRangeFilter/NumberRangeFilter.tsx @@ -8,7 +8,6 @@ import { FilterButtonBar } from '../FilterButtonBar.js'; import type { FilterButtonBarTranslation } from '../FilterButtonBar.js'; import { BaseFilter } from '../BaseFilter.js'; import type { TableFilterProps } from '../types.js'; -import '@itwin/itwinui-css/css/table.css'; import { LabeledInput } from '../../../LabeledInput/index.js'; export type NumberRangeTranslation = { diff --git a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.tsx b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.tsx index fa221c47730..3f7e0a4a0ae 100644 --- a/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.tsx +++ b/packages/itwinui-react/src/core/Table/filters/TextFilter/TextFilter.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import '@itwin/itwinui-css/css/table.css'; import { useGlobals } from '../../../utils/index.js'; import { Input } from '../../../Input/index.js'; import { FilterButtonBar } from '../FilterButtonBar.js'; diff --git a/packages/itwinui-react/src/core/Tabs/Tab.tsx b/packages/itwinui-react/src/core/Tabs/Tab.tsx index 3bf97a8d3c1..32288ef0af3 100644 --- a/packages/itwinui-react/src/core/Tabs/Tab.tsx +++ b/packages/itwinui-react/src/core/Tabs/Tab.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tabs.css'; type TabProps = { /** diff --git a/packages/itwinui-react/src/core/Tabs/Tabs.tsx b/packages/itwinui-react/src/core/Tabs/Tabs.tsx index e868e32ef46..02c499f917d 100644 --- a/packages/itwinui-react/src/core/Tabs/Tabs.tsx +++ b/packages/itwinui-react/src/core/Tabs/Tabs.tsx @@ -13,7 +13,6 @@ import { useResizeObserver, Box, } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tabs.css'; import { Tab } from './Tab.js'; export type OverflowOptions = { diff --git a/packages/itwinui-react/src/core/Tag/Tag.tsx b/packages/itwinui-react/src/core/Tag/Tag.tsx index 33144bc094f..5b36cb7ebff 100644 --- a/packages/itwinui-react/src/core/Tag/Tag.tsx +++ b/packages/itwinui-react/src/core/Tag/Tag.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { SvgCloseSmall, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tag.css'; import { IconButton } from '../Buttons/index.js'; type TagProps = { diff --git a/packages/itwinui-react/src/core/Tag/TagContainer.tsx b/packages/itwinui-react/src/core/Tag/TagContainer.tsx index 74a5b90904a..cef0d4e7cf6 100644 --- a/packages/itwinui-react/src/core/Tag/TagContainer.tsx +++ b/packages/itwinui-react/src/core/Tag/TagContainer.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tag.css'; type TagContainerProps = { /** diff --git a/packages/itwinui-react/src/core/Textarea/Textarea.tsx b/packages/itwinui-react/src/core/Textarea/Textarea.tsx index 9807c19d868..bab60e21227 100644 --- a/packages/itwinui-react/src/core/Textarea/Textarea.tsx +++ b/packages/itwinui-react/src/core/Textarea/Textarea.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/input.css'; export type TextareaProps = { /** diff --git a/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx b/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx index dee7354c4d3..e0ff764a3fb 100644 --- a/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx +++ b/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx @@ -12,8 +12,6 @@ import { } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { ThemeContext } from './ThemeContext.js'; -import '@itwin/itwinui-css/css/global.css'; -import '@itwin/itwinui-variables/index.css'; export type ThemeOptions = { /** diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index 7385c0a324e..fc8ff67c5f7 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -15,7 +15,6 @@ import { Box, } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tile.css'; import { DropdownMenu } from '../DropdownMenu/index.js'; import { IconButton } from '../Buttons/index.js'; import { ProgressRadial } from '../ProgressIndicators/index.js'; diff --git a/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx b/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx index c51f6db0d4a..ed7db8e2132 100644 --- a/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx +++ b/packages/itwinui-react/src/core/TimePicker/TimePicker.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/time-picker.css'; const isSameHour = ( date1: Date, diff --git a/packages/itwinui-react/src/core/Toast/Toast.tsx b/packages/itwinui-react/src/core/Toast/Toast.tsx index 125c6ba5305..f343e1e5c2a 100644 --- a/packages/itwinui-react/src/core/Toast/Toast.tsx +++ b/packages/itwinui-react/src/core/Toast/Toast.tsx @@ -12,7 +12,6 @@ import { Box, } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/toast.css'; import { IconButton } from '../Buttons/index.js'; const isMotionOk = () => diff --git a/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx b/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx index 6a85b066bd1..6b1273b5c1b 100644 --- a/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx +++ b/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx @@ -2,7 +2,6 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import '@itwin/itwinui-css/css/toast.css'; import * as React from 'react'; import cx from 'classnames'; import Toast from './Toast.js'; diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx index 46ba0c8bc37..e5278c0458c 100644 --- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx +++ b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { useMergedRefs, Box } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; -import '@itwin/itwinui-css/css/toggle-switch.css'; type ToggleSwitchProps = { /** diff --git a/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx b/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx index 9d519c118c0..2dd4c3abd4a 100644 --- a/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx +++ b/packages/itwinui-react/src/core/Tooltip/Tooltip.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import { Popover, Box } from '../utils/index.js'; import type { CommonProps, PopoverProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tooltip.css'; export type TooltipProps = { /** diff --git a/packages/itwinui-react/src/core/Tree/Tree.tsx b/packages/itwinui-react/src/core/Tree/Tree.tsx index 2cb593e3757..1a381a9c0be 100644 --- a/packages/itwinui-react/src/core/Tree/Tree.tsx +++ b/packages/itwinui-react/src/core/Tree/Tree.tsx @@ -11,7 +11,6 @@ import { polymorphic, } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tree.css'; import cx from 'classnames'; import { TreeContext } from './TreeContext.js'; diff --git a/packages/itwinui-react/src/core/Tree/TreeNode.tsx b/packages/itwinui-react/src/core/Tree/TreeNode.tsx index 3c6338fbf6d..955f0a0d605 100644 --- a/packages/itwinui-react/src/core/Tree/TreeNode.tsx +++ b/packages/itwinui-react/src/core/Tree/TreeNode.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { getFocusableElements, Box } from '../utils/index.js'; import type { CommonProps } from '../utils/index.js'; -import '@itwin/itwinui-css/css/tree.css'; import cx from 'classnames'; import { TreeNodeExpander } from './TreeNodeExpander.js'; import { useTreeContext } from './TreeContext.js'; diff --git a/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx b/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx index a448427a23b..bf69753c836 100644 --- a/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx +++ b/packages/itwinui-react/src/core/Tree/TreeNodeExpander.tsx @@ -8,7 +8,6 @@ import { SvgChevronRight } from '../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../utils/index.js'; import { IconButton } from '../Buttons/IconButton/index.js'; import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js'; -import '@itwin/itwinui-css/css/tree.css'; type TreeNodeExpanderProps = { isExpanded?: boolean; diff --git a/packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx b/packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx index a3453a05432..db6cd6bdbdd 100644 --- a/packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx +++ b/packages/itwinui-react/src/core/Typography/Anchor/Anchor.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/anchor.css'; /** * A consistently styled anchor component. diff --git a/packages/itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx b/packages/itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx index f701bbfc629..3214ea879b5 100644 --- a/packages/itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx +++ b/packages/itwinui-react/src/core/Typography/Blockquote/Blockquote.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/blockquote.css'; type BlockquoteProps = { /** diff --git a/packages/itwinui-react/src/core/Typography/Code/Code.tsx b/packages/itwinui-react/src/core/Typography/Code/Code.tsx index e7852d08f1b..b53e4d23b07 100644 --- a/packages/itwinui-react/src/core/Typography/Code/Code.tsx +++ b/packages/itwinui-react/src/core/Typography/Code/Code.tsx @@ -3,7 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { polymorphic } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/code.css'; /** * Inline code element. diff --git a/packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx b/packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx index 62aa0beee21..a415d6a9145 100644 --- a/packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx +++ b/packages/itwinui-react/src/core/Typography/Kbd/Kbd.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/keyboard.css'; /** * Some predefined strings for common keyboard keys. diff --git a/packages/itwinui-react/src/core/Typography/Text/Text.tsx b/packages/itwinui-react/src/core/Typography/Text/Text.tsx index 6b55d495522..ea0799c8010 100644 --- a/packages/itwinui-react/src/core/Typography/Text/Text.tsx +++ b/packages/itwinui-react/src/core/Typography/Text/Text.tsx @@ -6,7 +6,6 @@ import cx from 'classnames'; import * as React from 'react'; import { Box } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; -import '@itwin/itwinui-css/css/text.css'; type TextProps = { /** diff --git a/packages/itwinui-react/src/core/utils/components/Divider.tsx b/packages/itwinui-react/src/core/utils/components/Divider.tsx index 59f93c36aa6..ebb74ccccd9 100644 --- a/packages/itwinui-react/src/core/utils/components/Divider.tsx +++ b/packages/itwinui-react/src/core/utils/components/Divider.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/utils.css'; import { Box } from './Box.js'; import type { PolymorphicForwardRefComponent } from '../props.js'; diff --git a/packages/itwinui-react/src/core/utils/components/Flex.tsx b/packages/itwinui-react/src/core/utils/components/Flex.tsx index 22ecd629006..b487c65f44f 100644 --- a/packages/itwinui-react/src/core/utils/components/Flex.tsx +++ b/packages/itwinui-react/src/core/utils/components/Flex.tsx @@ -6,7 +6,6 @@ import * as React from 'react'; import cx from 'classnames'; import type { AnyString } from '../types.js'; import type { PolymorphicForwardRefComponent } from '../props.js'; -import '@itwin/itwinui-css/css/utils.css'; import { Box } from './Box.js'; const sizeTokens = [ diff --git a/packages/itwinui-react/src/core/utils/components/Icon.tsx b/packages/itwinui-react/src/core/utils/components/Icon.tsx index 1adc84b6992..f7c32577f2f 100644 --- a/packages/itwinui-react/src/core/utils/components/Icon.tsx +++ b/packages/itwinui-react/src/core/utils/components/Icon.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import cx from 'classnames'; import type { AnyString } from '../types.js'; -import '@itwin/itwinui-css/css/utils.css'; import { Box } from './Box.js'; import type { PolymorphicForwardRefComponent } from '../props.js'; diff --git a/packages/itwinui-react/src/core/utils/components/InputContainer.tsx b/packages/itwinui-react/src/core/utils/components/InputContainer.tsx index 3cb8632a77d..426875f4050 100644 --- a/packages/itwinui-react/src/core/utils/components/InputContainer.tsx +++ b/packages/itwinui-react/src/core/utils/components/InputContainer.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/utils.css'; import { Box } from './Box.js'; export type InputContainerProps = { diff --git a/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx b/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx index 1511e1b4bc5..d8135d18221 100644 --- a/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx +++ b/packages/itwinui-react/src/core/utils/components/InputFlexContainer.tsx @@ -5,7 +5,6 @@ import React from 'react'; import cx from 'classnames'; import type { PolymorphicForwardRefComponent } from '../props.js'; -import '@itwin/itwinui-css/css/input-container.css'; import { Box } from './Box.js'; export type InputFlexContainerProps = { diff --git a/packages/itwinui-react/src/core/utils/components/LinkAction.tsx b/packages/itwinui-react/src/core/utils/components/LinkAction.tsx index c1a234b0957..5fd224abbe5 100644 --- a/packages/itwinui-react/src/core/utils/components/LinkAction.tsx +++ b/packages/itwinui-react/src/core/utils/components/LinkAction.tsx @@ -2,7 +2,6 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -import '@itwin/itwinui-css/css/utils.css'; import { polymorphic } from '../functions/polymorphic.js'; /** diff --git a/packages/itwinui-react/src/core/utils/components/Popover.tsx b/packages/itwinui-react/src/core/utils/components/Popover.tsx index 40d956cacff..b8cdc609ec9 100644 --- a/packages/itwinui-react/src/core/utils/components/Popover.tsx +++ b/packages/itwinui-react/src/core/utils/components/Popover.tsx @@ -10,7 +10,6 @@ import type { TippyProps } from '@tippyjs/react'; import type { Placement, Instance } from 'tippy.js'; import { useMergedRefs, useIsClient } from '../hooks/index.js'; export type PopoverInstance = Instance; -import '@itwin/itwinui-css/css/utils.css'; import { ThemeContext } from '../../ThemeProvider/ThemeContext.js'; export type PopoverProps = { diff --git a/packages/itwinui-react/src/core/utils/components/VisuallyHidden.tsx b/packages/itwinui-react/src/core/utils/components/VisuallyHidden.tsx index 7e5c23c4e56..7e6993dd625 100644 --- a/packages/itwinui-react/src/core/utils/components/VisuallyHidden.tsx +++ b/packages/itwinui-react/src/core/utils/components/VisuallyHidden.tsx @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import cx from 'classnames'; -import '@itwin/itwinui-css/css/utils.css'; import type { PolymorphicForwardRefComponent } from '../props.js'; import { Box } from './Box.js'; diff --git a/packages/itwinui-react/src/core/utils/hooks/useGlobals.ts b/packages/itwinui-react/src/core/utils/hooks/useGlobals.ts index 0193ec24064..5775be40e01 100644 --- a/packages/itwinui-react/src/core/utils/hooks/useGlobals.ts +++ b/packages/itwinui-react/src/core/utils/hooks/useGlobals.ts @@ -3,8 +3,6 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import '@itwin/itwinui-css/css/global.css'; -import '@itwin/itwinui-variables/index.css'; import { ThemeContext } from '../../ThemeProvider/ThemeContext.js'; let isDev = false; diff --git a/packages/itwinui-react/styles.css b/packages/itwinui-react/styles.css new file mode 100644 index 00000000000..056890a5413 --- /dev/null +++ b/packages/itwinui-react/styles.css @@ -0,0 +1,2 @@ +@import '@itwin/itwinui-variables'; +@import '@itwin/itwinui-css'; diff --git a/playgrounds/astro/src/pages/_layout.astro b/playgrounds/astro/src/pages/_layout.astro index ee45919510f..99b3664c1d2 100644 --- a/playgrounds/astro/src/pages/_layout.astro +++ b/playgrounds/astro/src/pages/_layout.astro @@ -1,5 +1,6 @@ --- import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; --- @@ -8,18 +9,24 @@ import { ThemeProvider } from '@itwin/itwinui-react'; iTwinUI-react + astro - - - + + + + + + diff --git a/playgrounds/next/next.config.js b/playgrounds/next/next.config.js index 8ebea4f4f63..3d3bc9990d8 100644 --- a/playgrounds/next/next.config.js +++ b/playgrounds/next/next.config.js @@ -2,7 +2,6 @@ const nextConfig = { reactStrictMode: true, swcMinify: true, - transpilePackages: ['@itwin/itwinui-react'], }; module.exports = nextConfig; diff --git a/playgrounds/next/pages/_app.tsx b/playgrounds/next/pages/_app.tsx index 0a85cc1440c..96d7d5635b0 100644 --- a/playgrounds/next/pages/_app.tsx +++ b/playgrounds/next/pages/_app.tsx @@ -1,20 +1,28 @@ import type { AppProps } from 'next/app'; +import css from 'styled-jsx/css'; +import { ThemeProvider } from '@itwin/itwinui-react'; +import '@itwin/itwinui-react/styles.css'; export default function App({ Component, pageProps }: AppProps) { return ( -
- - - -
+ <> + + + + + ); } + +const styles = css.global` + * { + box-sizing: border-box; + } + body { + margin: 0; + } + .app-wrapper { + padding: 2rem 1rem; + height: 100dvh; + } +`; diff --git a/playgrounds/next/pages/_document.tsx b/playgrounds/next/pages/_document.tsx deleted file mode 100644 index 9f97f39a362..00000000000 --- a/playgrounds/next/pages/_document.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { ThemeProvider } from '@itwin/itwinui-react'; -import { Html, Head, Main, NextScript } from 'next/document'; - -export default function Document() { - return ( - - - iTwinUI-react + nextjs - - -
- - - - ); -} diff --git a/playgrounds/vite/src/main.tsx b/playgrounds/vite/src/main.tsx index 5933b442b07..794075d75df 100644 --- a/playgrounds/vite/src/main.tsx +++ b/playgrounds/vite/src/main.tsx @@ -5,6 +5,7 @@ import { ThemeProvider } from '@itwin/itwinui-react'; import App from './App'; import { css, Global } from '@emotion/react'; import { SvgMoon, SvgSun } from '@itwin/itwinui-icons-react'; +import '@itwin/itwinui-react/styles.css'; const Shell = () => { const [theme, setTheme] = React.useState<'light' | 'dark'>(() => From 041cf936bb541a1fd660f8380d5befe0d64711b1 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 1 Jun 2023 11:04:34 -0400 Subject: [PATCH 25/61] add changeset --- .changeset/calm-owls-shout.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/calm-owls-shout.md diff --git a/.changeset/calm-owls-shout.md b/.changeset/calm-owls-shout.md new file mode 100644 index 00000000000..02fb402a283 --- /dev/null +++ b/.changeset/calm-owls-shout.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': major +--- + +All css imports within components have been removed. `@itwin/itwinui-react/styles.css` must now be manually imported at the entrypoint. From 45c6840f99fedf82ca9f7b1e3f5085dc7986ebf8 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 1 Jun 2023 11:08:57 -0400 Subject: [PATCH 26/61] remove jest style mocks --- packages/itwinui-react/jest.config.js | 2 -- packages/itwinui-react/src/__mocks__/fileMock.js | 5 ----- packages/itwinui-react/src/__mocks__/styleMock.js | 5 ----- 3 files changed, 12 deletions(-) delete mode 100644 packages/itwinui-react/src/__mocks__/fileMock.js delete mode 100644 packages/itwinui-react/src/__mocks__/styleMock.js diff --git a/packages/itwinui-react/jest.config.js b/packages/itwinui-react/jest.config.js index 15b08681023..332d03983d2 100644 --- a/packages/itwinui-react/jest.config.js +++ b/packages/itwinui-react/jest.config.js @@ -83,8 +83,6 @@ module.exports = { // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module moduleNameMapper: { - '\\.(css|less|sass|scss)$': '/src/__mocks__/styleMock.js', - '\\.(gif|ttf|eot|svg)$': '/src/__mocks__/fileMock.js', '^(\\.\\.?\\/.+)\\.jsx?$': '$1', // see https://github.com/kulshekhar/ts-jest/issues/1057 }, diff --git a/packages/itwinui-react/src/__mocks__/fileMock.js b/packages/itwinui-react/src/__mocks__/fileMock.js deleted file mode 100644 index 6999f177ace..00000000000 --- a/packages/itwinui-react/src/__mocks__/fileMock.js +++ /dev/null @@ -1,5 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -module.exports = 'test-file-stub'; diff --git a/packages/itwinui-react/src/__mocks__/styleMock.js b/packages/itwinui-react/src/__mocks__/styleMock.js deleted file mode 100644 index 982be1d84cb..00000000000 --- a/packages/itwinui-react/src/__mocks__/styleMock.js +++ /dev/null @@ -1,5 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -module.exports = {}; From 1a30195fff7d80b80c72950fe79212bc8bf48c74 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 1 Jun 2023 12:00:50 -0400 Subject: [PATCH 27/61] minimize diff --- packages/itwinui-react/src/styles.js/styles.module.css | 2 -- packages/itwinui-react/{styles.css => src/styles.module.css} | 0 2 files changed, 2 deletions(-) delete mode 100644 packages/itwinui-react/src/styles.js/styles.module.css rename packages/itwinui-react/{styles.css => src/styles.module.css} (100%) diff --git a/packages/itwinui-react/src/styles.js/styles.module.css b/packages/itwinui-react/src/styles.js/styles.module.css deleted file mode 100644 index 7144f5a540a..00000000000 --- a/packages/itwinui-react/src/styles.js/styles.module.css +++ /dev/null @@ -1,2 +0,0 @@ -@import '@itwin/itwinui-variables/index.css'; -@import '@itwin/itwinui-css/css/all.css'; diff --git a/packages/itwinui-react/styles.css b/packages/itwinui-react/src/styles.module.css similarity index 100% rename from packages/itwinui-react/styles.css rename to packages/itwinui-react/src/styles.module.css From fdf82f1e30d34a8ceb65a7830e0c8e9a30f9f3fe Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 1 Jun 2023 12:05:49 -0400 Subject: [PATCH 28/61] oop --- packages/itwinui-react/src/{ => styles.js}/styles.module.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/itwinui-react/src/{ => styles.js}/styles.module.css (100%) diff --git a/packages/itwinui-react/src/styles.module.css b/packages/itwinui-react/src/styles.js/styles.module.css similarity index 100% rename from packages/itwinui-react/src/styles.module.css rename to packages/itwinui-react/src/styles.js/styles.module.css From 52144fe8452e120104baf51bcae8175388afa3a2 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 1 Jun 2023 12:32:23 -0400 Subject: [PATCH 29/61] fix searchbox --- .changeset/many-actors-tell.md | 5 +++++ packages/itwinui-css/src/all.scss | 1 + packages/itwinui-css/src/utils/utils.scss | 1 - 3 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/many-actors-tell.md diff --git a/.changeset/many-actors-tell.md b/.changeset/many-actors-tell.md new file mode 100644 index 00000000000..3bc6120839b --- /dev/null +++ b/.changeset/many-actors-tell.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-css': major +--- + +Removed input-container code from `utils.css` in favor of `input-container.css`. diff --git a/packages/itwinui-css/src/all.scss b/packages/itwinui-css/src/all.scss index f441f8f9a4b..53704a6496e 100644 --- a/packages/itwinui-css/src/all.scss +++ b/packages/itwinui-css/src/all.scss @@ -22,6 +22,7 @@ @forward 'header/header'; @forward 'information-panel/information-panel'; @forward 'input/input'; +@forward 'input-container/input-container'; @forward 'keyboard/keyboard'; @forward 'location-marker/location-marker'; @forward 'menu/menu'; diff --git a/packages/itwinui-css/src/utils/utils.scss b/packages/itwinui-css/src/utils/utils.scss index 886f2759664..60f5bd7a595 100644 --- a/packages/itwinui-css/src/utils/utils.scss +++ b/packages/itwinui-css/src/utils/utils.scss @@ -1,7 +1,6 @@ // Copyright (c) Bentley Systems, Incorporated. All rights reserved. // See LICENSE.md in the project root for license terms and full copyright notice. @forward 'icon'; -@forward '../input-container/input-container'; // forwarded here in utils to avoid breaking @forward 'notification-marker'; @forward 'popover'; @forward 'divider'; From 096dd76ec409cfd0fe9ae647ddbab4ad4ddbc71c Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 1 Jun 2023 13:29:50 -0400 Subject: [PATCH 30/61] fix Flex wrapper styles --- apps/storybook/src/Flex.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/storybook/src/Flex.stories.tsx b/apps/storybook/src/Flex.stories.tsx index 385c09bdea8..1f7d0578a1f 100644 --- a/apps/storybook/src/Flex.stories.tsx +++ b/apps/storybook/src/Flex.stories.tsx @@ -65,11 +65,11 @@ export default {