diff --git a/.changeset/beige-suits-jam.md b/.changeset/beige-suits-jam.md
new file mode 100644
index 00000000000..5dbfa0044da
--- /dev/null
+++ b/.changeset/beige-suits-jam.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+The dependencies on `@itwin/itwinui-css` and `@itwin/itwinui-variable` have been removed. This means `@itwin/itwinui-react` will bring its own stylesheet.
diff --git a/.changeset/loud-adults-deny.md b/.changeset/loud-adults-deny.md
new file mode 100644
index 00000000000..2583012d5b8
--- /dev/null
+++ b/.changeset/loud-adults-deny.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+All elements have had their class names changed to prevent conflict with older versions. It is strongly recommended to switch these internal classes with your own classes or data attributes.
diff --git a/.changeset/ninety-phones-deny.md b/.changeset/ninety-phones-deny.md
new file mode 100644
index 00000000000..46f1036a246
--- /dev/null
+++ b/.changeset/ninety-phones-deny.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': major
+---
+
+`border-box` will now be set for _all_ elements under `iui-root`.
diff --git a/.changeset/smart-guests-play.md b/.changeset/smart-guests-play.md
index a86cd693f2a..9326460c888 100644
--- a/.changeset/smart-guests-play.md
+++ b/.changeset/smart-guests-play.md
@@ -3,4 +3,4 @@
 '@itwin/itwinui-css': major
 ---
 
-Instead of cloning passed icons to set classes on them, the classes will now be set on a wrapping element. Affected components: `Header`, `Select`, `MenuItem`, `RadioTile`, `Tabs`, `ToggleSwitch`, `TreeNode`, `InputContainer` (and all input variants).
+Instead of cloning passed icons to set classes on them, the classes will now be set on a wrapping element. Affected components: `Header`, `Select`, `MenuItem`, `RadioTile`, `Tabs`, `Tile`, `ToggleSwitch`, `TreeNode`, `InputContainer` (and all input variants).
diff --git a/.changeset/twelve-olives-roll.md b/.changeset/twelve-olives-roll.md
new file mode 100644
index 00000000000..ee84129715b
--- /dev/null
+++ b/.changeset/twelve-olives-roll.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-variables': minor
+---
+
+All selectors have been wrapped with `:where` to nullify specificity.
diff --git a/apps/storybook/.storybook/StoryWithDecorator.jsx b/apps/storybook/.storybook/StoryWithDecorator.jsx
index 17855b7dbe6..28c623c0081 100644
--- a/apps/storybook/.storybook/StoryWithDecorator.jsx
+++ b/apps/storybook/.storybook/StoryWithDecorator.jsx
@@ -20,6 +20,7 @@ export default function StoryWithDecorator(Story, context) {
       theme={theme}
       themeOptions={{ highContrast, applyBackground: false }}
       style={{ background }}
+      className='story-wrapper'
     >
       <Story />
     </ThemeProvider>
diff --git a/apps/storybook/.storybook/preview-body.html b/apps/storybook/.storybook/preview-body.html
index 437351d0279..709957e9c30 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 {
+  .story-wrapper {
     padding: 1rem;
     height: 100svh;
   }
diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
index 9043d3b169b..239e967298b 100644
--- a/apps/storybook/.storybook/preview.js
+++ b/apps/storybook/.storybook/preview.js
@@ -12,7 +12,6 @@ const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
 export default {
   parameters: {
     darkMode: {
-      classTarget: '.iui-root',
       dark: { ...themes.dark, ...darkTheme },
       light: { ...themes.light, ...lightTheme },
     },
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Alert.test.ts-Sticky.png b/apps/storybook/cypress-visual-screenshots/baseline/Alert.test.ts-Sticky.png
index 9f8d5643ff3..a57bad06c22 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Alert.test.ts-Sticky.png and b/apps/storybook/cypress-visual-screenshots/baseline/Alert.test.ts-Sticky.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png b/apps/storybook/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png
old mode 100755
new mode 100644
index b6f8ee98182..ef2dfad1297
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png and b/apps/storybook/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png b/apps/storybook/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png
index 691bb416f86..c6cff7b5d67 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png and b/apps/storybook/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Dialog.test.ts-Draggable Relative To Container.png b/apps/storybook/cypress-visual-screenshots/baseline/Dialog.test.ts-Draggable Relative To Container.png
index d53edd2f0b7..979155290c3 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Dialog.test.ts-Draggable Relative To Container.png and b/apps/storybook/cypress-visual-screenshots/baseline/Dialog.test.ts-Draggable Relative To Container.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Header.test.ts-Slim.png b/apps/storybook/cypress-visual-screenshots/baseline/Header.test.ts-Slim.png
index ba406f81d37..14c8e774ded 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Header.test.ts-Slim.png and b/apps/storybook/cypress-visual-screenshots/baseline/Header.test.ts-Slim.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow (Scroll end).png b/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow (Scroll end).png
index 088ed1583d7..8060382982e 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow (Scroll end).png and b/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow (Scroll end).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow (Scroll start).png b/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow (Scroll start).png
index f5ed85d661e..cebab3de5b6 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow (Scroll start).png and b/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow (Scroll start).png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow.png b/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow.png
index 051c8ad39df..4812a4a879a 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow.png and b/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Horizontal Overflow.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Vertical Overflow.png b/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Vertical Overflow.png
index cabfad43336..470ecfded38 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Vertical Overflow.png and b/apps/storybook/cypress-visual-screenshots/baseline/Tabs.test.ts-Vertical Overflow.png differ
diff --git a/apps/storybook/src/AvatarGroup.test.ts b/apps/storybook/src/AvatarGroup.test.ts
index 29a6f8b2651..ed05fa41345 100644
--- a/apps/storybook/src/AvatarGroup.test.ts
+++ b/apps/storybook/src/AvatarGroup.test.ts
@@ -18,7 +18,7 @@ describe('AvatarGroup', () => {
       cy.visit('iframe', { qs: { id } });
 
       if (testName.includes('Tooltip')) {
-        cy.get('.iui-avatar-count').trigger('mouseenter'); // trigger tooltip
+        cy.get('abbr').contains('3').parent().trigger('mouseenter');
       }
 
       cy.compareSnapshot(testName);
diff --git a/apps/storybook/src/Breadcrumbs.test.ts b/apps/storybook/src/Breadcrumbs.test.ts
index 23106829bf2..21fe76d6d0b 100644
--- a/apps/storybook/src/Breadcrumbs.test.ts
+++ b/apps/storybook/src/Breadcrumbs.test.ts
@@ -19,10 +19,6 @@ describe('Breadcrumbs', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
 
-      if (testName === 'Custom Overflow Back Button') {
-        cy.get('.iui-button').eq(1).trigger('mouseenter');
-      }
-
       cy.compareSnapshot(testName);
     });
   });
diff --git a/apps/storybook/src/ColorPicker.test.ts b/apps/storybook/src/ColorPicker.test.ts
index e3d84dc6fdf..3b97dd5712f 100644
--- a/apps/storybook/src/ColorPicker.test.ts
+++ b/apps/storybook/src/ColorPicker.test.ts
@@ -10,7 +10,9 @@ describe('ColorPicker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });
diff --git a/apps/storybook/src/ComboBox.test.ts b/apps/storybook/src/ComboBox.test.ts
index 49b48281fa3..1d12164bd77 100644
--- a/apps/storybook/src/ComboBox.test.ts
+++ b/apps/storybook/src/ComboBox.test.ts
@@ -24,7 +24,7 @@ describe('ComboBox', () => {
       cy.compareSnapshot(`${testName} (Closed)`);
       cy.get('input').focus();
       if (testName === 'Multiple Select') {
-        cy.get('.iui-list-item').then((els) => {
+        cy.get('[role=option]').then((els) => {
           const items = Array.from(els, (el) => el);
           items[3].click();
         });
diff --git a/apps/storybook/src/Dialog.test.ts b/apps/storybook/src/Dialog.test.ts
index 261af9ffbd7..4dd91356b8c 100644
--- a/apps/storybook/src/Dialog.test.ts
+++ b/apps/storybook/src/Dialog.test.ts
@@ -16,7 +16,9 @@ describe('Dialog', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });
diff --git a/apps/storybook/src/DropdownButton.test.ts b/apps/storybook/src/DropdownButton.test.ts
index 457aafd799c..da2dbb97f60 100644
--- a/apps/storybook/src/DropdownButton.test.ts
+++ b/apps/storybook/src/DropdownButton.test.ts
@@ -11,7 +11,9 @@ describe('DropdownButton', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(`${testName} (Closed)`);
-      cy.get('.iui-button').click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').click();
+      });
       cy.compareSnapshot(`${testName} (Open)`);
     });
   });
diff --git a/apps/storybook/src/DropdownMenu.test.ts b/apps/storybook/src/DropdownMenu.test.ts
index a034efd2420..bf313becd1a 100644
--- a/apps/storybook/src/DropdownMenu.test.ts
+++ b/apps/storybook/src/DropdownMenu.test.ts
@@ -19,10 +19,12 @@ describe('DropdownMenu', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(`${testName} (Closed)`);
-      cy.get('.iui-button').click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
 
       if (testName === 'Submenu') {
-        cy.get('.iui-list-item').last().trigger('mouseenter');
+        cy.get('li[aria-expanded=false]').trigger('mouseenter');
       }
 
       cy.compareSnapshot(`${testName} (Open)`);
diff --git a/apps/storybook/src/ExpandableBlock.test.ts b/apps/storybook/src/ExpandableBlock.test.ts
index 910c28cbd79..10d9a5484e9 100644
--- a/apps/storybook/src/ExpandableBlock.test.ts
+++ b/apps/storybook/src/ExpandableBlock.test.ts
@@ -20,7 +20,7 @@ describe('ExpandableBlock', () => {
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(`${testName} (Closed)`);
       if (testName !== 'Disabled') {
-        cy.get('.iui-header').first().click();
+        cy.get('[role=button]').first().click();
         cy.compareSnapshot(`${testName} (Open)`);
       }
     });
diff --git a/apps/storybook/src/FileUpload.test.ts b/apps/storybook/src/FileUpload.test.ts
index f91e267ebb6..3b687ed5429 100644
--- a/apps/storybook/src/FileUpload.test.ts
+++ b/apps/storybook/src/FileUpload.test.ts
@@ -20,7 +20,7 @@ describe('FileUpload', () => {
         testName === 'Default File Upload Card' ||
         testName === 'Custom File Upload Card'
       ) {
-        cy.get('.iui-visually-hidden').selectFile(
+        cy.get('input').selectFile(
           {
             contents: Cypress.Buffer.from('file contents'),
             fileName: 'file.txt',
diff --git a/apps/storybook/src/Flex.stories.tsx b/apps/storybook/src/Flex.stories.tsx
index 385c09bdea8..c5fa073dea8 100644
--- a/apps/storybook/src/Flex.stories.tsx
+++ b/apps/storybook/src/Flex.stories.tsx
@@ -65,11 +65,11 @@ export default {
         <style
           dangerouslySetInnerHTML={{
             __html: /* css */ `
-            :where(.demo-flex-wrapper .iui-flex) {
+            :where(.demo-flex-wrapper > *) {
               outline: 1px solid var(--iui-color-border);
               min-height: 100px;
             }
-            :where(.demo-flex-wrapper :not([class*='iui'])) {
+            :where(.demo-flex-wrapper > * div:not([class])) {
               font-family: var(--iui-font-sans);
               color: var(--iui-color-text);
               padding: 1rem;
diff --git a/apps/storybook/src/InformationPanel.test.ts b/apps/storybook/src/InformationPanel.test.ts
index 4cd8628ea6c..51b1d2f3f18 100644
--- a/apps/storybook/src/InformationPanel.test.ts
+++ b/apps/storybook/src/InformationPanel.test.ts
@@ -10,7 +10,9 @@ describe('InformationPanel', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });
diff --git a/apps/storybook/src/Modal.test.ts b/apps/storybook/src/Modal.test.ts
index f07c9eae054..68f7e0e416a 100644
--- a/apps/storybook/src/Modal.test.ts
+++ b/apps/storybook/src/Modal.test.ts
@@ -10,7 +10,9 @@ describe('Modal', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });
diff --git a/apps/storybook/src/SearchBox.test.ts b/apps/storybook/src/SearchBox.test.ts
index 50dd2437639..80b4177e9b7 100644
--- a/apps/storybook/src/SearchBox.test.ts
+++ b/apps/storybook/src/SearchBox.test.ts
@@ -20,7 +20,9 @@ describe('SearchBox', () => {
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(testName);
       if (!testName.includes('Basic') && testName !== 'Small') {
-        cy.get('.iui-searchbox-open-button').first().click();
+        cy.get('#storybook-root').within(() => {
+          cy.get('button').first().click();
+        });
         cy.compareSnapshot(`${testName} (Open)`);
       }
     });
diff --git a/apps/storybook/src/Select.test.ts b/apps/storybook/src/Select.test.ts
index efd57391ac4..b91a85ae8bf 100644
--- a/apps/storybook/src/Select.test.ts
+++ b/apps/storybook/src/Select.test.ts
@@ -34,17 +34,17 @@ describe('Select', () => {
       }
 
       cy.compareSnapshot(`${testName} (Closed)`);
-      cy.get('.iui-select-button').click();
+      cy.get('[role=combobox]').click();
       cy.compareSnapshot(`${testName} (Open)`);
 
       if (testName.includes('Multi')) {
-        cy.get('.iui-list-item').first().click();
-        cy.get('.iui-list-item').eq(1).click();
+        cy.get('[role=option]').first().click();
+        cy.get('[role=option]').eq(1).click();
         cy.compareSnapshot(`${testName} (Multi selected)`);
       }
 
       if (testName === 'Custom') {
-        cy.get('.iui-list-item').first().click();
+        cy.get('[role=option]').first().click();
         cy.compareSnapshot(`${testName} (Closed With Value)`);
       }
     });
diff --git a/apps/storybook/src/SkipToContentLink.test.ts b/apps/storybook/src/SkipToContentLink.test.ts
index 078b71c9f89..5c5a90ee494 100644
--- a/apps/storybook/src/SkipToContentLink.test.ts
+++ b/apps/storybook/src/SkipToContentLink.test.ts
@@ -10,7 +10,9 @@ describe('SkipToContentLink', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-skip-to-content-link').focus();
+      cy.get('#storybook-root').within(() => {
+        cy.get('a').first().focus();
+      });
       cy.compareSnapshot(testName);
     });
   });
diff --git a/apps/storybook/src/SplitButton.test.ts b/apps/storybook/src/SplitButton.test.ts
index e520752aaa5..0083c288b1e 100644
--- a/apps/storybook/src/SplitButton.test.ts
+++ b/apps/storybook/src/SplitButton.test.ts
@@ -11,7 +11,9 @@ describe('SplitButton', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(`${testName} (Closed)`);
-      cy.get('.iui-button').last().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').last().click();
+      });
       cy.compareSnapshot(`${testName} (Open)`);
     });
   });
diff --git a/apps/storybook/src/Stepper.test.ts b/apps/storybook/src/Stepper.test.ts
index 2a600cdb2df..fbb2a304e33 100644
--- a/apps/storybook/src/Stepper.test.ts
+++ b/apps/storybook/src/Stepper.test.ts
@@ -12,7 +12,9 @@ describe('Stepper', () => {
       cy.visit('iframe', { qs: { id } });
 
       if (testName.includes('Tooltip')) {
-        cy.get('.iui-stepper-step').first().trigger('mouseenter'); // trigger tooltip
+        cy.get('#storybook-root').within(() => {
+          cy.get('li').first().trigger('mouseenter'); // trigger tooltip
+        });
       }
 
       cy.compareSnapshot(testName);
diff --git a/apps/storybook/src/Table.test.ts b/apps/storybook/src/Table.test.ts
index 89eb2f4897a..4577f81348c 100644
--- a/apps/storybook/src/Table.test.ts
+++ b/apps/storybook/src/Table.test.ts
@@ -41,46 +41,48 @@ describe('Table', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
 
-      switch (testName) {
-        case 'Column Manager': {
-          cy.get('.iui-slot .iui-button').click();
-          break;
+      cy.get('#storybook-root').within(() => {
+        switch (testName) {
+          case 'Column Manager': {
+            cy.get('[role=columnheader] button').last().click();
+            break;
+          }
+          case 'Condensed': {
+            cy.get('[role=rowgroup] button').first().click();
+            break;
+          }
+          case 'Custom Filter': {
+            cy.get('button').first().click({ force: true }); // force because the button is hidden
+            break;
+          }
+          case 'Customized Columns': {
+            cy.get('[role=rowgroup] button').last().click();
+            break;
+          }
+          case 'Expandable':
+          case 'Expandable Subrows': {
+            cy.get('[role=rowgroup] button').first().click();
+            break;
+          }
+          case 'Editable': {
+            cy.get('[contenteditable]').first().click().type('Test');
+            break;
+          }
+          case 'Filters': {
+            cy.get('button').first().click({ force: true }); // force because the button is hidden
+            break;
+          }
+          case 'Global Filter': {
+            cy.get('input').first().click().type('Description8');
+            break;
+          }
+          case 'Localized': {
+            cy.get('input').first().click();
+            cy.get('button').first().click({ force: true }); // force because the button is hidden
+            break;
+          }
         }
-        case 'Condensed': {
-          cy.get('.iui-table-row-expander').first().click();
-          break;
-        }
-        case 'Custom Filter': {
-          cy.get('.iui-table-filter-button').first().click({ force: true }); // force because the button is hidden
-          break;
-        }
-        case 'Customized Columns': {
-          cy.get('.iui-table-row-expander').last().click();
-          break;
-        }
-        case 'Expandable':
-        case 'Expandable Subrows': {
-          cy.get('.iui-table-row-expander').first().click();
-          break;
-        }
-        case 'Editable': {
-          cy.get('[contenteditable]').first().click().type('Test');
-          break;
-        }
-        case 'Filters': {
-          cy.get('.iui-table-filter-button').first().click({ force: true }); // force because the button is hidden
-          break;
-        }
-        case 'Global Filter': {
-          cy.get('.iui-input').first().click().type('Description8');
-          break;
-        }
-        case 'Localized': {
-          cy.get('.iui-checkbox').first().click();
-          cy.get('.iui-table-filter-button').first().click({ force: true }); // force because the button is hidden
-          break;
-        }
-      }
+      });
 
       cy.compareSnapshot(testName);
     });
diff --git a/apps/storybook/src/Tabs.test.ts b/apps/storybook/src/Tabs.test.ts
index 083dcaa515e..5b7ccad32c5 100644
--- a/apps/storybook/src/Tabs.test.ts
+++ b/apps/storybook/src/Tabs.test.ts
@@ -22,14 +22,18 @@ describe('Tabs', () => {
       cy.compareSnapshot(testName);
 
       if (testName === 'Horizontal Overflow') {
-        const tabs = cy.get('li > button.iui-tab').should('have.length', 13);
-
-        tabs.last().focus();
+        cy.get('#storybook-root').within(() => {
+          cy.get('[role=tab]').last().focus();
+        });
+        cy.wait(500);
         cy.compareSnapshot(`${testName} (Scroll end)`);
 
         // cy somehow loses tabs list and does not focus on first element so getting it again.
         cy.focused().blur();
-        cy.get('li > button.iui-tab').first().focus();
+        cy.get('#storybook-root').within(() => {
+          cy.get('[role=tab]').first().focus();
+        });
+        cy.wait(500);
         cy.compareSnapshot(`${testName} (Scroll start)`);
       }
     });
diff --git a/apps/storybook/src/Tile.test.ts b/apps/storybook/src/Tile.test.ts
index 51caf94b63d..4c26bb2e6ce 100644
--- a/apps/storybook/src/Tile.test.ts
+++ b/apps/storybook/src/Tile.test.ts
@@ -29,7 +29,7 @@ describe('Tile', () => {
         testName === 'Actionable' ||
         testName === 'Anchor Link'
       ) {
-        cy.get('.iui-tile-thumbnail-picture').hide();
+        cy.get('[style*=background-image]').hide();
       }
 
       cy.compareSnapshot(testName);
diff --git a/apps/storybook/src/TimePicker.test.ts b/apps/storybook/src/TimePicker.test.ts
index 304a0549c10..0941f239d07 100644
--- a/apps/storybook/src/TimePicker.test.ts
+++ b/apps/storybook/src/TimePicker.test.ts
@@ -10,8 +10,10 @@ describe('TimePicker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').last().click();
-      cy.get('.iui-input-container').hide();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').last().click();
+        cy.get('input').parent().hide();
+      });
       cy.compareSnapshot(testName);
     });
   });
diff --git a/apps/storybook/src/Toasts.test.ts b/apps/storybook/src/Toasts.test.ts
index bd0f0c97abc..b50021b7c78 100644
--- a/apps/storybook/src/Toasts.test.ts
+++ b/apps/storybook/src/Toasts.test.ts
@@ -17,7 +17,9 @@ describe('Toasts', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });
diff --git a/apps/storybook/src/WorkflowDiagram.test.ts b/apps/storybook/src/WorkflowDiagram.test.ts
index 8efe47711b1..ceaa80f097b 100644
--- a/apps/storybook/src/WorkflowDiagram.test.ts
+++ b/apps/storybook/src/WorkflowDiagram.test.ts
@@ -12,7 +12,9 @@ describe('WorkflowDiagram', () => {
       cy.visit('iframe', { qs: { id } });
 
       if (testName.includes('Tooltip')) {
-        cy.get('.iui-workflow-diagram-step').first().trigger('mouseenter'); // trigger tooltip
+        cy.get('#storybook-root').within(() => {
+          cy.get('li').first().trigger('mouseenter'); // trigger tooltip
+        });
       }
 
       cy.compareSnapshot(testName);
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_dark_0_demo-sticky_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_dark_0_demo-sticky_0_.png
index 4dd5495978c..d0e317a8431 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_dark_0_demo-sticky_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_dark_0_demo-sticky_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_hc_dark_0_demo-sticky_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_hc_dark_0_demo-sticky_0_.png
index 4ccfd5b5020..ff4b950d286 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_hc_dark_0_demo-sticky_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_hc_dark_0_demo-sticky_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_hc_light_0_demo-sticky_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_hc_light_0_demo-sticky_0_.png
index 9c652abf4bd..8a60086f36c 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_hc_light_0_demo-sticky_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_hc_light_0_demo-sticky_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_light_0_demo-sticky_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_light_0_demo-sticky_0_.png
index f1608749679..48009ffc248 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_light_0_demo-sticky_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_alert_Type_sticky_light_0_demo-sticky_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_dark_0_nis-erroriui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_dark_0_nis-erroriui-non-ideal-state_0_desktop.png
index 27b68a9bdc2..1a62df9dc52 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_dark_0_nis-erroriui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_dark_0_nis-erroriui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_hc_dark_0_nis-erroriui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_hc_dark_0_nis-erroriui-non-ideal-state_0_desktop.png
index 3983ade6140..dfc0cd4fdf0 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_hc_dark_0_nis-erroriui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_hc_dark_0_nis-erroriui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_hc_light_0_nis-erroriui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_hc_light_0_nis-erroriui-non-ideal-state_0_desktop.png
index 81e24fb1b11..26c7baa89d1 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_hc_light_0_nis-erroriui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_hc_light_0_nis-erroriui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_light_0_nis-erroriui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_light_0_nis-erroriui-non-ideal-state_0_desktop.png
index 4a265b3c4f2..c66ef4e4bfe 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_light_0_nis-erroriui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_error_light_0_nis-erroriui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png
index a05a4990ce9..2abce2db085 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png
index a18c42ebf52..afb44133a0f 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_dark_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png
index 0cea900a494..f0ad654cdce 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_hc_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png
index b3ee90d084f..09dc061aab7 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_multi-redirect_light_0_nis-multi-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_dark_0_nis-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_dark_0_nis-redirectiui-non-ideal-state_0_desktop.png
index 485733e168e..4a80b108504 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_dark_0_nis-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_dark_0_nis-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_hc_dark_0_nis-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_hc_dark_0_nis-redirectiui-non-ideal-state_0_desktop.png
index 3569268c09f..80f4cae19c6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_hc_dark_0_nis-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_hc_dark_0_nis-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_hc_light_0_nis-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_hc_light_0_nis-redirectiui-non-ideal-state_0_desktop.png
index 8d1a7e51040..494eedce8a6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_hc_light_0_nis-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_hc_light_0_nis-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_light_0_nis-redirectiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_light_0_nis-redirectiui-non-ideal-state_0_desktop.png
index 8cf4c53774e..2f2cdde5bdd 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_light_0_nis-redirectiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_redirect_light_0_nis-redirectiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_timed-out_dark_0_nis-timed-outiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_timed-out_dark_0_nis-timed-outiui-non-ideal-state_0_desktop.png
index 40a0895ba62..8dce110c43f 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_timed-out_dark_0_nis-timed-outiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_timed-out_dark_0_nis-timed-outiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_timed-out_hc_dark_0_nis-timed-outiui-non-ideal-state_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_timed-out_hc_dark_0_nis-timed-outiui-non-ideal-state_0_desktop.png
index 5dac52aca0e..87e28c7709e 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_timed-out_hc_dark_0_nis-timed-outiui-non-ideal-state_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_non-ideal-state_timed-out_hc_dark_0_nis-timed-outiui-non-ideal-state_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_dark_0_viewport_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_dark_0_viewport_0_.png
index 91b490d940b..45587a79bad 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_dark_0_viewport_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_dark_0_viewport_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_hc_dark_0_viewport_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_hc_dark_0_viewport_0_.png
index fa0eaf09344..07e5eea2ef4 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_hc_dark_0_viewport_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_hc_dark_0_viewport_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_hc_light_0_viewport_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_hc_light_0_viewport_0_.png
index 4a9534b7685..50ac8dc02bf 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_hc_light_0_viewport_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_hc_light_0_viewport_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_light_0_viewport_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_light_0_viewport_0_.png
index 5026e55956f..0d71fb4c867 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_light_0_viewport_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_and_hover_light_0_viewport_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_dark_0_viewport_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_dark_0_viewport_0_.png
index b5445f59e0d..a768b1f1de7 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_dark_0_viewport_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_dark_0_viewport_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_hc_dark_0_viewport_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_hc_dark_0_viewport_0_.png
index b3711f0bb19..c0f3862250c 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_hc_dark_0_viewport_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_hc_dark_0_viewport_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_hc_light_0_viewport_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_hc_light_0_viewport_0_.png
index da8753254e6..01605d11ab5 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_hc_light_0_viewport_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_hc_light_0_viewport_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_light_0_viewport_0_.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_light_0_viewport_0_.png
index 55298af072e..a87e75d80c6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_light_0_viewport_0_.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_skip-to-content_Type_focus_light_0_viewport_0_.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_State_Play_Icon_focus_with_thumbnail_hc_light_0_test-tile-3_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_State_Play_Icon_focus_with_thumbnail_hc_light_0_test-tile-3_0_desktop.png
index 05b4db656d6..11e7b972443 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_State_Play_Icon_focus_with_thumbnail_hc_light_0_test-tile-3_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_State_Play_Icon_focus_with_thumbnail_hc_light_0_test-tile-3_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_State_Play_Icon_focus_with_thumbnail_light_0_test-tile-3_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_State_Play_Icon_focus_with_thumbnail_light_0_test-tile-3_0_desktop.png
index 8c10c626dec..6d43795745d 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_State_Play_Icon_focus_with_thumbnail_light_0_test-tile-3_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_State_Play_Icon_focus_with_thumbnail_light_0_test-tile-3_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_Type_Video_hc_light_0_demo-video_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_Type_Video_hc_light_0_demo-video_0_desktop.png
index 2619aa2aff5..0f8c7b544e6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_Type_Video_hc_light_0_demo-video_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_Type_Video_hc_light_0_demo-video_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_Type_Video_light_0_demo-video_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_Type_Video_light_0_demo-video_0_desktop.png
index bbed241c7c0..7b7953446b5 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_Type_Video_light_0_demo-video_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_tile_Type_Video_light_0_demo-video_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_dark_0_toast-test_0_desktop.png
index d31b5559e56..7eeb4e0eeed 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_hc_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_hc_dark_0_toast-test_0_desktop.png
index f888198c27c..ca37740ceea 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_hc_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_hc_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_hc_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_hc_light_0_toast-test_0_desktop.png
index 8b7a1d708fb..b6c34d2d8fa 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_hc_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_hc_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_light_0_toast-test_0_desktop.png
index 5bfb2129b39..1296e925da7 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_end_placement_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_dark_0_toast-test_0_desktop.png
index 29b2272800f..4fdf2c71166 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_hc_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_hc_dark_0_toast-test_0_desktop.png
index 37344ef0373..4cc7563013f 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_hc_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_hc_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_hc_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_hc_light_0_toast-test_0_desktop.png
index fe6761a776f..b631725cf1c 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_hc_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_hc_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_light_0_toast-test_0_desktop.png
index a367dbf2370..3eb3e2f1685 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_placement_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_dark_0_toast-test_0_desktop.png
index 854326d4c22..9a79b3b436e 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_hc_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_hc_dark_0_toast-test_0_desktop.png
index c06ed80fb4f..4171a61ccb7 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_hc_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_hc_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_hc_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_hc_light_0_toast-test_0_desktop.png
index 4fd6ae83cbd..3f9f2fe1249 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_hc_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_hc_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_light_0_toast-test_0_desktop.png
index 2bd8d7ccdc4..6d3280f3e12 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Bottom_start_placement_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_dark_0_toast-test_0_desktop.png
index 45e43a3a09e..3dd810a6e78 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_hc_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_hc_dark_0_toast-test_0_desktop.png
index eccc41d9217..6562968d5f8 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_hc_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_hc_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_hc_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_hc_light_0_toast-test_0_desktop.png
index 18a9cad38cf..c2101dbf528 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_hc_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_hc_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_light_0_toast-test_0_desktop.png
index c00a2f7a865..4dbed0f7284 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_end_placement_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_dark_0_toast-test_0_desktop.png
index 8feb84bb764..2910b0246f6 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_hc_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_hc_dark_0_toast-test_0_desktop.png
index 58fe3407963..d8b61b679fa 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_hc_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_hc_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_hc_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_hc_light_0_toast-test_0_desktop.png
index 04e88ec10f6..16242e7df32 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_hc_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_hc_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_light_0_toast-test_0_desktop.png
index da66ee0f9dc..abd014fa2f9 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_placement_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_dark_0_toast-test_0_desktop.png
index d820d412fb4..6e55979ae8b 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_hc_dark_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_hc_dark_0_toast-test_0_desktop.png
index 1a462c90e10..d4527d8d145 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_hc_dark_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_hc_dark_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_hc_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_hc_light_0_toast-test_0_desktop.png
index ffc5435ea36..d9e4d3cd12c 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_hc_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_hc_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_light_0_toast-test_0_desktop.png b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_light_0_toast-test_0_desktop.png
index 596ae983966..f73372bf551 100644
Binary files a/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_light_0_toast-test_0_desktop.png and b/packages/itwinui-css/backstop/results/bitmaps_reference/iTwinUI_toast_Top_start_placement_light_0_toast-test_0_desktop.png differ
diff --git a/packages/itwinui-css/scripts/generateCss.js b/packages/itwinui-css/scripts/generateCss.js
index d83cfad1609..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');
@@ -30,19 +28,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..840667f1f09 100644
--- a/packages/itwinui-css/src/global.scss
+++ b/packages/itwinui-css/src/global.scss
@@ -2,34 +2,11 @@
 // 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);
   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-']) {
-    &:where(:not(.iui-root)),
-    * {
-      &,
-      &::before,
-      &::after {
-        box-sizing: border-box;
-      }
-    }
-  }
 }
 
 // reset margin only for <body> element.
@@ -43,10 +20,14 @@
   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]),
-:where(.iui-root),
-:where(.iui-root *) {
+// box-sizing, text selection and scrollbar styling on iui-root and all elements under it
+:where(.iui-root, .iui-root *) {
   @include mixins.iui-text-selection;
   @include mixins.iui-scrollbar;
+
+  &,
+  &::before,
+  &::after {
+    box-sizing: border-box;
+  }
 }
diff --git a/packages/itwinui-css/src/tile/tile.scss b/packages/itwinui-css/src/tile/tile.scss
index eccf2a8489d..c66688dc959 100644
--- a/packages/itwinui-css/src/tile/tile.scss
+++ b/packages/itwinui-css/src/tile/tile.scss
@@ -292,8 +292,11 @@ $thumbnail-selector: ':is(.iui-thumbnail-icon, .iui-tile-thumbnail-picture)';
   }
 
   .iui-thumbnail-icon {
-    @include mixins.iui-icon-style(3xl);
-    @include mixins.iui-icon-color;
+    &,
+    > svg {
+      @include mixins.iui-icon-style(3xl);
+      @include mixins.iui-icon-color;
+    }
     transition: transform var(--iui-duration-2) ease;
     place-self: center;
   }
@@ -311,13 +314,16 @@ $thumbnail-selector: ':is(.iui-thumbnail-icon, .iui-tile-thumbnail-picture)';
   }
 
   ~ .iui-thumbnail-icon {
-    cursor: pointer;
-    transition: fill var(--iui-duration-1) ease;
-    fill: rgba(255, 255, 255, var(--iui-opacity-3));
-    filter: drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
-
-    &:hover {
-      fill: rgba(255, 255, 255, var(--iui-opacity-2));
+    &,
+    > svg {
+      cursor: pointer;
+      transition: fill var(--iui-duration-1) ease;
+      fill: rgba(255, 255, 255, var(--iui-opacity-3));
+      filter: drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
+
+      &:hover {
+        fill: rgba(255, 255, 255, var(--iui-opacity-2));
+      }
     }
   }
 }
diff --git a/packages/itwinui-react/.gitignore b/packages/itwinui-react/.gitignore
index 5ab0055893f..79d90833531 100644
--- a/packages/itwinui-react/.gitignore
+++ b/packages/itwinui-react/.gitignore
@@ -11,6 +11,9 @@ esm
 # Compiled Styles
 src/**/*.css
 
+# CSS modules output
+styles.css
+
 # Storybook
 storybook-static/*
 
diff --git a/packages/itwinui-react/.swcrc b/packages/itwinui-react/.swcrc
index bf12686ff7e..fbcb6fccdc8 100644
--- a/packages/itwinui-react/.swcrc
+++ b/packages/itwinui-react/.swcrc
@@ -7,5 +7,6 @@
   },
   "module": {
     "type": "es6"
-  }
+  },
+  "exclude": ["src/styles.js", "src/styles.d.ts"]
 }
diff --git a/packages/itwinui-react/jest.config.js b/packages/itwinui-react/jest.config.js
index c4ea9ae0fee..dfb28302b57 100644
--- a/packages/itwinui-react/jest.config.js
+++ b/packages/itwinui-react/jest.config.js
@@ -83,6 +83,7 @@ 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: {
+    'styles.js$': '<rootDir>/src/__mocks__/stylesMock.js',
     'useGlobals.js$': '<rootDir>/src/__mocks__/useGlobalsMock.js',
     '^(\\.\\.?\\/.+)\\.jsx?$': '$1', // see https://github.com/kulshekhar/ts-jest/issues/1057
   },
diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json
index 6787931ac8e..b18fc7e2584 100644
--- a/packages/itwinui-react/package.json
+++ b/packages/itwinui-react/package.json
@@ -53,8 +53,10 @@
     "ux"
   ],
   "scripts": {
-    "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
+    "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",
     "clean:build": "rimraf esm && rimraf cjs",
     "clean:coverage": "rimraf coverage",
     "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules",
@@ -63,15 +65,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 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\""
+    "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\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^2.0.0-dev.0",
     "@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",
@@ -81,6 +82,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@itwin/itwinui-css": "^2.0.0-dev.0",
+    "@itwin/itwinui-variables": "*",
     "@swc/cli": "^0.1.57",
     "@swc/core": "^1.3.21",
     "@testing-library/jest-dom": "^5.16.4",
@@ -110,7 +113,8 @@
     "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/__mocks__/stylesMock.js b/packages/itwinui-react/src/__mocks__/stylesMock.js
new file mode 100644
index 00000000000..d3bd967a7ca
--- /dev/null
+++ b/packages/itwinui-react/src/__mocks__/stylesMock.js
@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+module.exports = new Proxy(
+  {},
+  {
+    get: (target, prop) => {
+      // instead of returning scoped css modules, we will preserve the original classes
+      if (prop.startsWith('iui')) {
+        return prop;
+      }
+      return Reflect.get(target, prop);
+    },
+  },
+);
diff --git a/packages/itwinui-react/src/core/Slider/Track.tsx b/packages/itwinui-react/src/core/Slider/Track.tsx
index bdd58905d4a..323640d94f5 100644
--- a/packages/itwinui-react/src/core/Slider/Track.tsx
+++ b/packages/itwinui-react/src/core/Slider/Track.tsx
@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import { Box } from '../utils/index.js';
 import type { SliderProps, TrackDisplayMode } from './Slider.js';
 
 function shouldDisplaySegment(segmentIndex: number, mode: TrackDisplayMode) {
@@ -79,7 +80,7 @@ export const Track = (props: TrackProps) => {
           return (
             <React.Fragment key={index}>
               {shouldDisplaySegment(index, trackDisplayMode) ? (
-                <div
+                <Box
                   className='iui-slider-track'
                   style={{
                     ...(orientation === 'horizontal'
diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx
index dadd4789015..6a64798ded0 100644
--- a/packages/itwinui-react/src/core/Table/Table.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.tsx
@@ -33,6 +33,7 @@ import {
   SvgSortDown,
   SvgSortUp,
   useIsomorphicLayoutEffect,
+  Box,
 } from '../utils/index.js';
 import type { CommonProps } from '../utils/index.js';
 import { getCellStyle, getStickyStyle } from './utils.js';
@@ -859,7 +860,7 @@ export const Table = <
 
   return (
     <>
-      <div
+      <Box
         ref={(element) => {
           ownerDocument.current = element?.ownerDocument;
           if (isResizable) {
@@ -888,7 +889,7 @@ export const Table = <
             className: 'iui-table-row',
           });
           return (
-            <div
+            <Box
               className='iui-table-header-wrapper'
               ref={headerRef}
               onScroll={() => {
@@ -899,8 +900,8 @@ export const Table = <
               }}
               key={headerGroupProps.key}
             >
-              <div className='iui-table-header'>
-                <div {...headerGroupProps}>
+              <Box className='iui-table-header'>
+                <Box {...headerGroupProps}>
                   {headerGroup.headers.map((column, index) => {
                     const { onClick, ...restSortProps } =
                       column.getSortByToggleProps();
@@ -922,7 +923,7 @@ export const Table = <
                       },
                     });
                     return (
-                      <div
+                      <Box
                         {...columnProps}
                         {...column.getDragAndDropProps()}
                         key={columnProps.key}
@@ -954,12 +955,12 @@ export const Table = <
                         {column.render('Header')}
                         {(showFilterButton(column) ||
                           showSortButton(column)) && (
-                          <div className='iui-table-header-actions-container'>
+                          <Box className='iui-table-header-actions-container'>
                             {showFilterButton(column) && (
                               <FilterToggle column={column} />
                             )}
                             {showSortButton(column) && (
-                              <div className='iui-table-cell-end-icon'>
+                              <Box className='iui-table-cell-end-icon'>
                                 {column.isSortedDesc ||
                                 (!column.isSorted && column.sortDescFirst) ? (
                                   <SvgSortDown
@@ -972,42 +973,42 @@ export const Table = <
                                     aria-hidden
                                   />
                                 )}
-                              </div>
+                              </Box>
                             )}
-                          </div>
+                          </Box>
                         )}
                         {isResizable &&
                           column.isResizerVisible &&
                           (index !== headerGroup.headers.length - 1 ||
                             columnResizeMode === 'expand') && (
-                            <div
+                            <Box
                               {...column.getResizerProps()}
                               className='iui-table-resizer'
                             >
-                              <div className='iui-table-resizer-bar' />
-                            </div>
+                              <Box className='iui-table-resizer-bar' />
+                            </Box>
                           )}
                         {enableColumnReordering &&
                           !column.disableReordering && (
-                            <div className='iui-table-reorder-bar' />
+                            <Box className='iui-table-reorder-bar' />
                           )}
                         {column.sticky === 'left' &&
                           state.sticky.isScrolledToRight && (
-                            <div className='iui-table-cell-shadow-right' />
+                            <Box className='iui-table-cell-shadow-right' />
                           )}
                         {column.sticky === 'right' &&
                           state.sticky.isScrolledToLeft && (
-                            <div className='iui-table-cell-shadow-left' />
+                            <Box className='iui-table-cell-shadow-left' />
                           )}
-                      </div>
+                      </Box>
                     );
                   })}
-                </div>
-              </div>
-            </div>
+                </Box>
+              </Box>
+            </Box>
           );
         })}
-        <div
+        <Box
           {...getTableBodyProps({
             className: cx('iui-table-body', {
               'iui-zebra-striping': styleType === 'zebra-rows',
@@ -1040,13 +1041,13 @@ export const Table = <
             </>
           )}
           {isLoading && data.length === 0 && (
-            <div className='iui-table-empty'>
+            <Box className='iui-table-empty'>
               <ProgressRadial indeterminate={true} />
-            </div>
+            </Box>
           )}
           {isLoading && data.length !== 0 && (
-            <div className='iui-table-row'>
-              <div
+            <Box className='iui-table-row'>
+              <Box
                 className='iui-table-cell'
                 style={{ justifyContent: 'center' }}
               >
@@ -1055,24 +1056,24 @@ export const Table = <
                   size='small'
                   style={{ float: 'none', marginLeft: 0 }}
                 />
-              </div>
-            </div>
+              </Box>
+            </Box>
           )}
           {!isLoading && data.length === 0 && !areFiltersSet && (
-            <div className='iui-table-empty'>
+            <Box className='iui-table-empty'>
               <div>{emptyTableContent}</div>
-            </div>
+            </Box>
           )}
           {!isLoading &&
             (data.length === 0 || rows.length === 0) &&
             areFiltersSet && (
-              <div className='iui-table-empty'>
+              <Box className='iui-table-empty'>
                 <div>{emptyFilteredTableContent}</div>
-              </div>
+              </Box>
             )}
-        </div>
+        </Box>
         {paginatorRenderer?.(paginatorRendererProps)}
-      </div>
+      </Box>
     </>
   );
 };
diff --git a/packages/itwinui-react/src/core/Table/TableCell.tsx b/packages/itwinui-react/src/core/Table/TableCell.tsx
index 830709f9111..e9df90cdc06 100644
--- a/packages/itwinui-react/src/core/Table/TableCell.tsx
+++ b/packages/itwinui-react/src/core/Table/TableCell.tsx
@@ -14,6 +14,7 @@ import { getCellStyle, getStickyStyle } from './utils.js';
 import { SubRowExpander } from './SubRowExpander.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { DefaultCell } from './cells/index.js';
+import { Box } from '../utils/index.js';
 
 export type TableCellProps<T extends Record<string, unknown>> = {
   cell: Cell<T>;
@@ -106,11 +107,11 @@ export const TableCell = <T extends Record<string, unknown>>(
         {cellContent}
         {cell.column.sticky === 'left' &&
           tableInstance.state.sticky.isScrolledToRight && (
-            <div className='iui-table-cell-shadow-right' />
+            <Box className='iui-table-cell-shadow-right' />
           )}
         {cell.column.sticky === 'right' &&
           tableInstance.state.sticky.isScrolledToLeft && (
-            <div className='iui-table-cell-shadow-left' />
+            <Box className='iui-table-cell-shadow-left' />
           )}
       </>
     ),
diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.tsx
index daa84d1018c..a20235bb980 100644
--- a/packages/itwinui-react/src/core/Table/TablePaginator.tsx
+++ b/packages/itwinui-react/src/core/Table/TablePaginator.tsx
@@ -14,6 +14,7 @@ import {
   useContainerWidth,
   SvgChevronLeft,
   SvgChevronRight,
+  Box,
 } from '../utils/index.js';
 import type { CommonProps } from '../utils/index.js';
 import type { TablePaginatorRendererProps } from './Table.js';
@@ -169,7 +170,8 @@ export const TablePaginator = (props: TablePaginatorProps) => {
 
   const pageButton = React.useCallback(
     (index: number, tabIndex = index === focusedIndex ? 0 : -1) => (
-      <button
+      <Box
+        as='button'
         key={index}
         type='button'
         className={cx('iui-table-paginator-page-button', {
@@ -182,7 +184,7 @@ export const TablePaginator = (props: TablePaginatorProps) => {
         tabIndex={tabIndex}
       >
         {index + 1}
-      </button>
+      </Box>
     ),
     [focusedIndex, currentPage, localization, buttonSize, onPageChange],
   );
@@ -262,13 +264,14 @@ export const TablePaginator = (props: TablePaginatorProps) => {
     pageSizeList && !!onPageSizeChange && !!totalRowsCount;
 
   const ellipsis = (
-    <span
+    <Box
+      as='span'
       className={cx('iui-table-paginator-ellipsis', {
         'iui-table-paginator-ellipsis-small': size === 'small',
       })}
     >
       …
-    </span>
+    </Box>
   );
 
   const noRowsContent = (
@@ -288,18 +291,18 @@ export const TablePaginator = (props: TablePaginatorProps) => {
   }
 
   return (
-    <div
+    <Box
       className={cx('iui-table-paginator', className)}
       ref={paginatorResizeRef}
       {...rest}
     >
-      <div className='iui-left'>
+      <Box className='iui-left'>
         {totalSelectedRowsCount > 0 && (
           <span>{localization.rowsSelectedLabel(totalSelectedRowsCount)}</span>
         )}
-      </div>
+      </Box>
       {showPagesList && (
-        <div className='iui-center' ref={overflowRef}>
+        <Box className='iui-center' ref={overflowRef}>
           <IconButton
             styleType='borderless'
             disabled={currentPage === 0}
@@ -309,7 +312,8 @@ export const TablePaginator = (props: TablePaginatorProps) => {
           >
             <SvgChevronLeft />
           </IconButton>
-          <span
+          <Box
+            as='span'
             className='iui-table-paginator-pages-group'
             onKeyDown={onKeyDown}
             ref={pageListRef}
@@ -345,7 +349,7 @@ export const TablePaginator = (props: TablePaginatorProps) => {
                 </>
               );
             })()}
-          </span>
+          </Box>
           <IconButton
             styleType='borderless'
             disabled={currentPage === totalPagesCount - 1 || hasNoRows}
@@ -355,16 +359,16 @@ export const TablePaginator = (props: TablePaginatorProps) => {
           >
             <SvgChevronRight />
           </IconButton>
-        </div>
+        </Box>
       )}
-      <div className='iui-right'>
+      <Box className='iui-right'>
         {showPageSizeList && (
           <>
             {localization.rowsPerPageLabel !== null &&
               paginatorWidth >= 1024 && (
-                <span className='iui-table-paginator-page-size-label'>
+                <Box as='span' className='iui-table-paginator-page-size-label'>
                   {localization.rowsPerPageLabel}
-                </span>
+                </Box>
               )}
             <DropdownButton
               styleType='borderless'
@@ -393,8 +397,8 @@ export const TablePaginator = (props: TablePaginatorProps) => {
             </DropdownButton>
           </>
         )}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx
index f35537cbcac..e42a436fd8c 100644
--- a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx
+++ b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import type { CellProps, Row, TableInstance, TableState } from 'react-table';
 import {
+  Box,
   useIntersection,
   useMergedRefs,
   WithCSSTransition,
@@ -103,7 +104,7 @@ export const TableRow = <T extends Record<string, unknown>>(props: {
 
   return (
     <>
-      <div
+      <Box
         {...mergedProps}
         ref={refs}
         onClick={(event) => {
@@ -125,15 +126,15 @@ export const TableRow = <T extends Record<string, unknown>>(props: {
             />
           );
         })}
-      </div>
+      </Box>
       {subComponent && (
         <WithCSSTransition in={row.isExpanded}>
-          <div
+          <Box
             className={cx('iui-table-row', 'iui-table-expanded-content')}
             aria-disabled={isDisabled}
           >
             {subComponent(row)}
-          </div>
+          </Box>
         </WithCSSTransition>
       )}
     </>
diff --git a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx
index 59b5d8d2485..469a47b0826 100644
--- a/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx
+++ b/packages/itwinui-react/src/core/Table/cells/DefaultCell.tsx
@@ -5,6 +5,7 @@
 import * as React from 'react';
 import type { CellRendererProps } from 'react-table';
 import cx from 'classnames';
+import { Box } from '../../utils/index.js';
 
 export type DefaultCellProps<T extends Record<string, unknown>> = {
   /**
@@ -56,7 +57,7 @@ export const DefaultCell = <T extends Record<string, unknown>>(
   } = props;
 
   return (
-    <div
+    <Box
       {...cellElementProps}
       {...rest}
       className={cx(cellElementClassName, className)}
@@ -65,11 +66,11 @@ export const DefaultCell = <T extends Record<string, unknown>>(
       style={{ ...cellElementStyle, ...style }}
     >
       {startIcon && (
-        <div className='iui-table-cell-start-icon'>{startIcon}</div>
+        <Box className='iui-table-cell-start-icon'>{startIcon}</Box>
       )}
       {children}
-      {endIcon && <div className='iui-table-cell-end-icon'>{endIcon}</div>}
-    </div>
+      {endIcon && <Box className='iui-table-cell-end-icon'>{endIcon}</Box>}
+    </Box>
   );
 };
 
diff --git a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx
index 435c4f876ea..f703b1d6f51 100644
--- a/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx
+++ b/packages/itwinui-react/src/core/Table/cells/EditableCell.tsx
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import type { CellRendererProps } from 'react-table';
-import { getRandomValue } from '../../utils/index.js';
+import { Box, getRandomValue } from '../../utils/index.js';
 
 export type EditableCellProps<T extends Record<string, unknown>> =
   CellRendererProps<T> & {
@@ -67,7 +67,7 @@ export const EditableCell = <T extends Record<string, unknown>>(
   const [isDirty, setIsDirty] = React.useState(false);
 
   return (
-    <div
+    <Box
       {...cellElementProps}
       contentEditable
       suppressContentEditableWarning
@@ -114,7 +114,7 @@ export const EditableCell = <T extends Record<string, unknown>>(
       }}
     >
       {children}
-    </div>
+    </Box>
   );
 };
 
diff --git a/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx b/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx
index 4f3aa1dd479..6a60eed10b5 100644
--- a/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx
+++ b/packages/itwinui-react/src/core/Table/filters/BaseFilter.tsx
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useGlobals } from '../../utils/index.js';
+import { Box, useGlobals } from '../../utils/index.js';
 import type { CommonProps } from '../../utils/index.js';
 
 export type BaseFilterProps = {
@@ -34,7 +34,7 @@ export const BaseFilter = (props: BaseFilterProps) => {
   useGlobals();
 
   return (
-    <div
+    <Box
       className={cx('iui-table-column-filter', className)}
       style={style}
       // Prevents from triggering sort
@@ -44,6 +44,6 @@ export const BaseFilter = (props: BaseFilterProps) => {
       id={id}
     >
       {children}
-    </div>
+    </Box>
   );
 };
diff --git a/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx b/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx
index b2c50d9b802..7fe28454f5d 100644
--- a/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx
+++ b/packages/itwinui-react/src/core/Table/filters/FilterButtonBar.tsx
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useGlobals } from '../../utils/index.js';
+import { Box, useGlobals } from '../../utils/index.js';
 import type { CommonProps } from '../../utils/index.js';
 import { Button } from '../../Buttons/index.js';
 
@@ -58,12 +58,12 @@ export const FilterButtonBar = (props: FilterButtonBarProps) => {
   useGlobals();
 
   return (
-    <div className={cx('iui-button-bar', className)} style={style} id={id}>
+    <Box className={cx('iui-button-bar', className)} style={style} id={id}>
       {children}
       <Button styleType='high-visibility' onClick={setFilter}>
         {translatedStrings.filter}
       </Button>
       <Button onClick={clearFilter}>{translatedStrings.clear}</Button>
-    </div>
+    </Box>
   );
 };
diff --git a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx
index 0d6d0b0cf48..eb538aad142 100644
--- a/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx
+++ b/packages/itwinui-react/src/core/Table/hooks/useColumnDragAndDrop.tsx
@@ -13,6 +13,7 @@ import type {
   TableKeyedProps,
   TableState,
 } from 'react-table';
+import styles from '../../../styles.js';
 
 const REORDER_ACTIONS = {
   columnDragStart: 'columnDragStart',
@@ -55,12 +56,12 @@ const defaultGetDragAndDropProps =
       position?: 'left' | 'right',
     ) => {
       const columnElement = event.currentTarget as HTMLElement;
-      columnElement.classList.remove('iui-table-reorder-column-right');
-      columnElement.classList.remove('iui-table-reorder-column-left');
+      columnElement.classList.remove(styles['iui-table-reorder-column-right']);
+      columnElement.classList.remove(styles['iui-table-reorder-column-left']);
       if (position === 'left') {
-        columnElement.classList.add('iui-table-reorder-column-left');
+        columnElement.classList.add(styles['iui-table-reorder-column-left']);
       } else if (position === 'right') {
-        columnElement.classList.add('iui-table-reorder-column-right');
+        columnElement.classList.add(styles['iui-table-reorder-column-right']);
       }
     };
 
diff --git a/packages/itwinui-react/src/core/Tabs/Tabs.tsx b/packages/itwinui-react/src/core/Tabs/Tabs.tsx
index 02c499f917d..c8d6032bca9 100644
--- a/packages/itwinui-react/src/core/Tabs/Tabs.tsx
+++ b/packages/itwinui-react/src/core/Tabs/Tabs.tsx
@@ -14,6 +14,7 @@ import {
   Box,
 } from '../utils/index.js';
 import { Tab } from './Tab.js';
+import styles from '../../styles.js';
 
 export type OverflowOptions = {
   /**
@@ -244,7 +245,9 @@ export const Tabs = (props: TabsProps) => {
   const [focusedIndex, setFocusedIndex] = React.useState<number | undefined>();
   React.useEffect(() => {
     if (tablistRef.current && focusedIndex !== undefined) {
-      const tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
+      const tab = tablistRef.current.querySelectorAll(`.${styles['iui-tab']}`)[
+        focusedIndex
+      ];
       (tab as HTMLElement)?.focus();
     }
   }, [focusedIndex]);
@@ -253,7 +256,9 @@ export const Tabs = (props: TabsProps) => {
   useIsomorphicLayoutEffect(() => {
     setHasSublabel(
       type !== 'pill' && // pill tabs should never have sublabels
-        !!tablistRef.current?.querySelector('.iui-tab-description'), // check directly for the sublabel class
+        !!tablistRef.current?.querySelector(
+          `.${styles['iui-tab-description']}`, // check directly for the sublabel class
+        ),
     );
   }, [type]);
 
@@ -389,7 +394,7 @@ export const Tabs = (props: TabsProps) => {
         overflowOptions?.useOverflow &&
         currentActiveIndex !== undefined
       ) {
-        const activeTab = ownerDoc.querySelectorAll('.iui-tab')[
+        const activeTab = ownerDoc.querySelectorAll(`.${styles['iui-tab']}`)[
           currentActiveIndex
         ] as HTMLElement;
         const isVertical = orientation === 'vertical';
diff --git a/packages/itwinui-react/src/core/Tile/Tile.test.tsx b/packages/itwinui-react/src/core/Tile/Tile.test.tsx
index d6f778574b0..eb73db2c4f5 100644
--- a/packages/itwinui-react/src/core/Tile/Tile.test.tsx
+++ b/packages/itwinui-react/src/core/Tile/Tile.test.tsx
@@ -88,10 +88,8 @@ it('should render thumbnail correctly (svg)', () => {
   const { container } = render(
     <Tile name='test-name' thumbnail={<SvgPlaceholder />} />,
   );
-  const { container: placeholderIcon } = render(
-    <SvgPlaceholder className='iui-thumbnail-icon' />,
-  );
-  expect(container.querySelector('.iui-tile-thumbnail')).toBeTruthy();
+  const { container: placeholderIcon } = render(<SvgPlaceholder />);
+  expect(container.querySelector('.iui-tile-thumbnail svg')).toBeTruthy();
   const svg = container.querySelector('svg') as SVGSVGElement;
   expect(svg).toBeTruthy();
   expect(svg).toEqual(placeholderIcon.firstChild);
diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx
index fc8ff67c5f7..c6a6b8fb716 100644
--- a/packages/itwinui-react/src/core/Tile/Tile.tsx
+++ b/packages/itwinui-react/src/core/Tile/Tile.tsx
@@ -257,15 +257,10 @@ export const Tile = Object.assign(
                 React.cloneElement(thumbnail as JSX.Element, {
                   className: 'iui-tile-thumbnail-picture',
                 })
-              ) : React.isValidElement(thumbnail) ? (
-                React.cloneElement(thumbnail, {
-                  className: cx(
-                    'iui-thumbnail-icon',
-                    thumbnail.props.className,
-                  ),
-                })
               ) : (
-                thumbnail
+                <Box as='span' className='iui-thumbnail-icon'>
+                  {thumbnail}
+                </Box>
               )}
 
               {leftIcon &&
diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx
index e5278c0458c..6bebe73200f 100644
--- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx
@@ -78,7 +78,6 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
 
   const inputElementRef = React.useRef<HTMLInputElement>(null);
   const refs = useMergedRefs<HTMLInputElement>(inputElementRef, ref);
-  const WrapperComponent = label ? 'label' : 'div';
 
   React.useEffect(() => {
     if (inputElementRef.current && setFocus) {
@@ -86,7 +85,8 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
     }
   }, [setFocus]);
   return (
-    <WrapperComponent
+    <Box
+      as={label ? 'label' : 'div'}
       className={cx(
         'iui-toggle-switch-wrapper',
         {
@@ -118,7 +118,7 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
           {label}
         </Box>
       )}
-    </WrapperComponent>
+    </Box>
   );
 }) as PolymorphicForwardRefComponent<'input', ToggleSwitchProps>;
 
diff --git a/packages/itwinui-react/src/core/utils/components/Resizer.test.tsx b/packages/itwinui-react/src/core/utils/components/Resizer.test.tsx
index 0acaa913b9f..427b6190061 100644
--- a/packages/itwinui-react/src/core/utils/components/Resizer.test.tsx
+++ b/packages/itwinui-react/src/core/utils/components/Resizer.test.tsx
@@ -5,9 +5,9 @@
 import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import Resizer, { type ResizerProps } from './Resizer.js';
-import * as Styles from '../functions/styles.js';
+import * as DomUtils from '../functions/dom.js';
 
-jest.spyOn(Styles, 'getTranslateValues').mockReturnValue([100, 100]);
+jest.spyOn(DomUtils, 'getTranslateValues').mockReturnValue([100, 100]);
 jest.spyOn(window, 'getComputedStyle').mockReturnValue({
   minWidth: '50px',
   minHeight: '50px',
diff --git a/packages/itwinui-react/src/core/utils/functions/dom.ts b/packages/itwinui-react/src/core/utils/functions/dom.ts
index 3570a3c9182..e5d8c9ddce1 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;
@@ -56,3 +60,20 @@ export const mergeEventHandlers =
       }
     }
   };
+
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
+ */
+export const getTranslateValues = (element: HTMLElement | null | undefined) => {
+  if (!element) {
+    return [];
+  }
+
+  const transformValue =
+    getComputedStyle(element).getPropertyValue('transform');
+  const matrix = new DOMMatrix(transformValue);
+
+  return [matrix.m41, matrix.m42];
+};
diff --git a/packages/itwinui-react/src/core/utils/functions/index.ts b/packages/itwinui-react/src/core/utils/functions/index.ts
index 6065c0746a3..d5ef0de0b76 100644
--- a/packages/itwinui-react/src/core/utils/functions/index.ts
+++ b/packages/itwinui-react/src/core/utils/functions/index.ts
@@ -7,6 +7,5 @@ export * from './dom.js';
 export * from './colors.js';
 export * from './numbers.js';
 export * from './focusable.js';
-export * from './styles.js';
 export * from './supports.js';
 export * from './polymorphic.js';
diff --git a/packages/itwinui-react/src/core/utils/functions/polymorphic.tsx b/packages/itwinui-react/src/core/utils/functions/polymorphic.tsx
index 1ad3abf4071..d2772c45791 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 = <As extends keyof JSX.IntrinsicElements = 'div'>(
   defaultElement: As,
@@ -21,13 +22,12 @@ const _base = <As extends keyof JSX.IntrinsicElements = 'div'>(
           ref={ref}
           {...attrs}
           {...props}
-          className={cx(className, attrs?.className, props.className)}
+          className={getScopedClassName(
+            cx(className, attrs?.className, props.className),
+          )}
         />
       );
-    }) as PolymorphicForwardRefComponent<
-      NonNullable<typeof defaultElement>,
-      {} // eslint-disable-line
-    >;
+    }) as PolymorphicForwardRefComponent<NonNullable<typeof defaultElement>>;
 
     Comp.displayName = getDisplayNameFromClass(className);
 
@@ -72,3 +72,13 @@ 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(' ') || null
+  );
+};
diff --git a/packages/itwinui-react/src/core/utils/functions/styles.tsx b/packages/itwinui-react/src/core/utils/functions/styles.tsx
deleted file mode 100644
index 6f86921ad13..00000000000
--- a/packages/itwinui-react/src/core/utils/functions/styles.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-
-/**
- * Returns translate values as an array of a given element.
- * @param element HTML element you want to get translate value of
- * @returns Translate values in pixels in an array `[translateX, translateY]`
- */
-export const getTranslateValues = (element: HTMLElement | null | undefined) => {
-  if (!element) {
-    return [];
-  }
-
-  const transformValue =
-    getComputedStyle(element).getPropertyValue('transform');
-  const matrix = new DOMMatrix(transformValue);
-
-  return [matrix.m41, matrix.m42];
-};
diff --git a/packages/itwinui-react/src/styles.d.ts b/packages/itwinui-react/src/styles.d.ts
new file mode 100644
index 00000000000..f1e42866735
--- /dev/null
+++ b/packages/itwinui-react/src/styles.d.ts
@@ -0,0 +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<string, string>;
diff --git a/packages/itwinui-react/src/styles.js/.gitignore b/packages/itwinui-react/src/styles.js/.gitignore
new file mode 100644
index 00000000000..e0c13194435
--- /dev/null
+++ b/packages/itwinui-react/src/styles.js/.gitignore
@@ -0,0 +1,5 @@
+.turbo
+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
new file mode 100644
index 00000000000..1c114097cab
--- /dev/null
+++ b/packages/itwinui-react/src/styles.js/classes.mjs
@@ -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 styles from './styles.module.css';
+
+export default styles;
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..31d851e7b22
--- /dev/null
+++ b/packages/itwinui-react/src/styles.js/package.json
@@ -0,0 +1,17 @@
+{
+  "type": "module",
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "main": "dist/cjs/styles.js",
+  "module": "dist/esm/styles.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/styles.js",
+      "require": "./dist/cjs/styles.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./*": "./*"
+  }
+}
diff --git a/packages/itwinui-react/src/styles.js/styles.module.css b/packages/itwinui-react/src/styles.js/styles.module.css
new file mode 100644
index 00000000000..883796be5be
--- /dev/null
+++ b/packages/itwinui-react/src/styles.js/styles.module.css
@@ -0,0 +1,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-variables';
+@import '@itwin/itwinui-css';
diff --git a/packages/itwinui-react/src/styles.js/vite.config.mjs b/packages/itwinui-react/src/styles.js/vite.config.mjs
new file mode 100644
index 00000000000..eb921fbf6aa
--- /dev/null
+++ b/packages/itwinui-react/src/styles.js/vite.config.mjs
@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ * 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';
+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: {
+    minify: false,
+    cssMinify: false,
+    lib: {
+      entry: resolve(__dirname, './classes.mjs'),
+      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';
+          }
+          return assetInfo.name;
+        },
+      },
+    },
+  },
+  plugins: [
+    {
+      name: 'copy-files-after-build',
+      closeBundle: async () => {
+        await copyBuildOutput();
+      },
+    },
+  ],
+  css: {
+    modules: {
+      // TODO: use proper hash in v4
+      generateScopedName: (name) => {
+        return `_iui3-${name.replace('iui-', '')}`;
+      },
+    },
+  },
+});
+
+// ----------------------------------------------------------------------------
+
+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 () => {
+  // create cjs/ and esm/ directories if they don't exist
+  if (!fs.existsSync(outCjsDir)) {
+    await fs.promises.mkdir(outCjsDir);
+  }
+  if (!fs.existsSync(outEsmDir)) {
+    await fs.promises.mkdir(outEsmDir);
+  }
+
+  // copy styles.js from src/styles.js/dist/ into cjs/ and esm/
+  await fs.promises.copyFile(
+    path.join(distEsmDir, 'styles.js'),
+    path.join(outEsmDir, 'styles.js'),
+  );
+  await fs.promises.copyFile(
+    path.join(distCjsDir, 'styles.js'),
+    path.join(outCjsDir, 'styles.js'),
+  );
+
+  // copy styles.css from src/styles.js/dist/ into <root>/
+  await fs.promises.copyFile(
+    path.join(distDir, 'styles.css'),
+    path.join(root, 'styles.css'),
+  );
+
+  // copy styles.d.ts from src/ into cjs/ and esm/
+  await fs.promises.copyFile(
+    path.join(srcDir, 'styles.d.ts'),
+    path.join(outEsmDir, 'styles.d.ts'),
+  );
+  await fs.promises.copyFile(
+    path.join(srcDir, 'styles.d.ts'),
+    path.join(outCjsDir, 'styles.d.ts'),
+  );
+};
diff --git a/packages/itwinui-react/styles.css b/packages/itwinui-react/styles.css
deleted file mode 100644
index 056890a5413..00000000000
--- a/packages/itwinui-react/styles.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '@itwin/itwinui-variables';
-@import '@itwin/itwinui-css';
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 39661b1990b..6c6f7c7cd88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1826,9 +1826,9 @@
   integrity sha512-WQQNxyGWNwSGRF4AKtGfHNSKFoXJdvBAx+rvVD456BoNAAMj4QgvQqg+clvL/AhZ2Ec2g7JdYJtsSiWlZNSEZg==
 
 "@itwin/itwinui-illustrations-react@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@itwin/itwinui-illustrations-react/-/itwinui-illustrations-react-2.0.0.tgz#14934019ac550c4b491f6b04c0040686be786939"
-  integrity sha512-piLQSgIvE6sRND35UoYwEi4+3xv3N3IRi2wkcknnwPjGLTsOcOc312g1opiX8NzYLBuUGmChHZrqMto0VjHWFw==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@itwin/itwinui-illustrations-react/-/itwinui-illustrations-react-2.0.1.tgz#6e1be28ea924c0b73e2816f7b7bd1ac578603cdc"
+  integrity sha512-uUrr/O3hpL8r0ZSSRExZ68RTxLbR7mlZFytpCLa9qwJqxvdWgTJaZhR3rSOad6HBfqk6KOGlOGz569BuWrD9Lw==
 
 "@jest/console@^28.1.0":
   version "28.1.0"
@@ -14645,7 +14645,7 @@ 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.5:
+vite@^4.0.3, vite@^4.1.5, vite@^4.3.8:
   version "4.3.9"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.9.tgz#db896200c0b1aa13b37cdc35c9e99ee2fdd5f96d"
   integrity sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==