chore: sync with main (#29267)

.github/CODEOWNERS

@@ -21,65 +21,22 @@
 /packages/angular-server @sean-perkins @thetaPC
 /packages/angular/test @thetaPC
 
-## React
-
-/packages/react/ @amandaejohnston
-/packages/react-router @amandaejohnston
-/packages/react/test-app/
-/packages/react-router/test-app/
-
 ## Vue
 
-/packages/vue/ @liamdebeasi @thetaPC
+/packages/vue/ @thetaPC
 /packages/vue-router/ @liamdebeasi @thetaPC
 /packages/vue/test/ @thetaPC
 /packages/vue-router/__tests__ @thetaPC
 
 # Components
 
-/core/src/components/accordion/ @liamdebeasi
+/core/src/components/datetime/ @sean-perkins
-/core/src/components/accordion-group/ @liamdebeasi
-
-/core/src/components/checkbox/ @amandaejohnston
-
-/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
-/core/src/components/datetime-button/ @liamdebeasi
-
-/core/src/components/item/ @brandyscarney
-
-/core/src/components/menu/ @amandaejohnston
-/core/src/components/menu-toggle/ @amandaejohnston
 
 /core/src/components/nav/ @sean-perkins
 /core/src/components/nav-link/ @sean-perkins
 
-/core/src/components/picker/ @liamdebeasi
-/core/src/components/picker-column/ @liamdebeasi
-
-/core/src/components/radio/ @amandaejohnston
-/core/src/components/radio-group/ @amandaejohnston
-
-/core/src/components/refresher/ @liamdebeasi
-/core/src/components/refresher-content/ @liamdebeasi
-
-/core/src/components/searchbar/ @brandyscarney
-
-/core/src/components/segment/ @brandyscarney
-/core/src/components/segment-button/ @brandyscarney
-
-/core/src/components/skeleton-text/ @brandyscarney
-
 # Utilities
 
-/core/src/utils/animation/ @liamdebeasi
 /core/src/utils/content/ @sean-perkins
 /core/src/utils/gesture/ @liamdebeasi
 /core/src/utils/input-shims/ @liamdebeasi
-/core/src/utils/keyboard/ @liamdebeasi
-/core/src/utils/logging/ @amandaejohnston
-/core/src/utils/sanitization/ @liamdebeasi
-/core/src/utils/tap-click/ @liamdebeasi
-/core/src/utils/transition/ @liamdebeasi
-
-/core/src/css/ @brandyscarney
-/core/src/themes/ @brandyscarney

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
         with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/release-ionic.yml

@@ -41,8 +41,8 @@ jobs:
       uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-docs
-        output: docs/DocsBuild.zip
+        output: packages/docs/DocsBuild.zip
-        paths: docs/core.json docs/core.d.ts
+        paths: packages/docs/core.json packages/docs/core.d.ts
 
   release-docs:
     needs: [release-core]
@@ -53,7 +53,7 @@ jobs:
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-docs
-        path: ./docs
+        path: ./packages/docs
         filename: DocsBuild.zip
     - uses: ./.github/workflows/actions/publish-npm
       with:
@@ -61,7 +61,7 @@ jobs:
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
-        working-directory: 'docs'
+        working-directory: 'packages/docs'
         token: ${{ secrets.NPM_TOKEN }}
 
   release-angular:

CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
 # [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
 
 **Note:** Version bump only for package ionic-framework

core/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
 # [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
 
 **Note:** Version bump only for package @ionic/core

core/package-lock.json

@@ -1793,9 +1793,9 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.7",
+      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.7.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==",
+      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -11248,9 +11248,9 @@
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.7",
+      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.7.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==",
+      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
       "dev": true,
       "requires": {}
     },

core/src/components/button/button.ios.scss

@@ -247,3 +247,12 @@
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
   background: #{current-color(shade)};
 }
+
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-color, var(--color));
+  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
+}

core/src/components/button/button.md.scss

@@ -196,3 +196,12 @@
     background: #{current-color(base)};
   }
 }
+
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-background, var(--color));
+  color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
+}

core/src/components/button/button.scss

@@ -325,11 +325,3 @@ ion-ripple-effect {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
 }
-
-// Activated Button in Toolbar
-// --------------------------------------------------
-
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-toolbar-color, var(--color));
-  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
-}

core/src/components/popover/popover.scss

@@ -101,8 +101,6 @@
   display: flex;
 
   flex-direction: column;
-
-  overflow: hidden;
 }
 
 // Nested Popovers

core/src/components/popover/test/basic/popover.e2e.ts

@@ -48,6 +48,98 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * Translucent popovers are only available on iOS
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('popover: scrolling'), async () => {
+    test.beforeEach(({ skip }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29211',
+      });
+      // We are testing if Ionic sets overflow is set correctly on elements,
+      // so we do not need to test across browsers
+      skip.browser('webkit', 'Behavior does not vary across browsers');
+      skip.browser('firefox', 'Behavior does not vary across browsers');
+    });
+    test('should scroll to bottom without IonContent', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-popover {
+            --height: 150px;
+          }
+        </style>
+        <ion-popover>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+        </ion-popover>
+      `,
+        config
+      );
+
+      const popover = page.locator('ion-popover');
+      const viewport = popover.locator('.popover-viewport');
+      const p = popover.locator('p');
+      const lastP = await p.last();
+
+      await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
+
+      await expect(lastP).not.toBeInViewport();
+
+      // hover over viewport and scroll to bottom
+      await viewport.hover();
+      await page.mouse.wheel(0, 500);
+
+      await expect(lastP).toBeInViewport();
+    });
+    test('should scroll to bottom with IonContent', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-popover {
+            --height: 150px;
+          }
+        </style>
+        <ion-popover>
+          <ion-content>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+          </ion-content>
+        </ion-popover>
+      `,
+        config
+      );
+
+      const popover = page.locator('ion-popover');
+      const content = popover.locator('ion-content');
+      const p = popover.locator('p');
+      const lastP = await p.last();
+
+      await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
+
+      await expect(lastP).not.toBeInViewport();
+
+      // hover over viewport and scroll to bottom
+      await content.hover();
+      await page.mouse.wheel(0, 500);
+
+      await expect(lastP).toBeInViewport();
+    });
+  });
   test.describe(title('popover: translucent variants'), async () => {
     let popoverFixture!: PopoverFixture;
     test.beforeEach(async ({ page }) => {

core/src/components/toolbar/test/basic/toolbar.e2e.ts

@@ -1,14 +1,160 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('toolbar: basic'), () => {
+  test.describe(title('toolbar: basic (LTR only)'), () => {
-    test('should not have visual regressions', async ({ page }) => {
+    test('should not have visual regressions with text only', async ({ page }) => {
-      await page.goto(`/src/components/toolbar/test/basic`, config);
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Toolbar</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        config
+      );
 
-      // capture both header toolbars at once, but don't include all the white space in the ion-content
       const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic`));
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
+    });
+  });
+});
+
+configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toolbar: basic'), () => {
+    test('should truncate long title with ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        config
+      );
+
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-long-text`));
+    });
+
+    test('should not have visual regressions with icon-only buttons', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button>
+                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+                </ion-button>
+                <ion-button>
+                  <ion-icon slot="icon-only" name="search"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary">
+                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Toolbar</ion-title>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button class="ion-activated">
+                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+                </ion-button>
+                <ion-button class="ion-activated">
+                  <ion-icon slot="icon-only" name="search"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" class="ion-activated">
+                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Activated Buttons</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        config
+      );
+
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-icon-buttons`));
+    });
+
+    test('should not have visual regressions with buttons with icons and text', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="solid">
+                  <ion-icon slot="start" name="person-circle"></ion-icon>
+                  Solid
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Solid</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button fill="solid" color="secondary">
+                  Help
+                  <ion-icon slot="end" name="help-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="solid" class="ion-activated">
+                  <ion-icon slot="start" name="person-circle"></ion-icon>
+                  Solid
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Solid Activated</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button fill="solid" color="secondary" class="ion-activated">
+                  Help
+                  <ion-icon slot="end" name="help-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="outline">
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Outline</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" fill="outline">
+                  Info
+                  <ion-icon slot="end" name="information-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="outline" class="ion-activated">
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Outline Activated</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" fill="outline" class="ion-activated">
+                  Info
+                  <ion-icon slot="end" name="information-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        config
+      );
+
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
     });
   });
 });

core/src/css/core.scss

@@ -393,3 +393,30 @@ ion-input input::-webkit-date-and-time-value {
   width: 320px;
   min-height: 320px;
 }
+
+/**
+ * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element
+ * should not be scrollable to ensure the inner content does scroll. However, if the popover
+ * does not have a child ion-content (or class equivalent) then the .popover-viewport element
+ * should remain scrollable. This code exists globally because popover targets
+ * .popover-viewport using ::slotted which only supports simple selectors.
+ *
+ * Note that we do not need to account for .ion-content-scroll-host here because that
+ * class should always be placed within ion-content even if ion-content is not scrollable.
+ */
+.popover-viewport:has(> ion-content) {
+  overflow: hidden;
+}
+
+/**
+ * :has has cross-browser support, but it is still relatively new. As a result,
+ * we should fallback to the old behavior for environments that do not support :has.
+ * Developers can explicitly enable this behavior by setting overflow: visible
+ * on .popover-viewport if they know they are not going to use an ion-content.
+ * TODO FW-6106 Remove this
+ */
+@supports not selector(:has(> ion-content)) {
+  .popover-viewport {
+    overflow: hidden;
+  }
+}

core/src/themes/test/css-variables/css/dark.css

@@ -0,0 +1,155 @@
+/*
+ * Dark Colors
+ * -------------------------------------------
+ */
+
+body {
+  --ion-color-primary: #428cff;
+  --ion-color-primary-rgb: 66, 140, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3a7be0;
+  --ion-color-primary-tint: #5598ff;
+
+  --ion-color-secondary: #50c8ff;
+  --ion-color-secondary-rgb: 80, 200, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #46b0e0;
+  --ion-color-secondary-tint: #62ceff;
+
+  --ion-color-tertiary: #6a64ff;
+  --ion-color-tertiary-rgb: 106, 100, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #5d58e0;
+  --ion-color-tertiary-tint: #7974ff;
+
+  --ion-color-success: #2fdf75;
+  --ion-color-success-rgb: 47, 223, 117;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0, 0, 0;
+  --ion-color-success-shade: #29c467;
+  --ion-color-success-tint: #44e283;
+
+  --ion-color-warning: #ffd534;
+  --ion-color-warning-rgb: 255, 213, 52;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0bb2e;
+  --ion-color-warning-tint: #ffd948;
+
+  --ion-color-danger: #ff4961;
+  --ion-color-danger-rgb: 255, 73, 97;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #e04055;
+  --ion-color-danger-tint: #ff5b71;
+
+  --ion-color-dark: #f4f5f8;
+  --ion-color-dark-rgb: 244, 245, 248;
+  --ion-color-dark-contrast: #000000;
+  --ion-color-dark-contrast-rgb: 0, 0, 0;
+  --ion-color-dark-shade: #d7d8da;
+  --ion-color-dark-tint: #f5f6f9;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152, 154, 162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0, 0, 0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34, 36, 40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255, 255, 255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+}
+
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+.ios body {
+  --ion-background-color: #000000;
+  --ion-background-color-rgb: 0, 0, 0;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-color-step-50: #0d0d0d;
+  --ion-color-step-100: #1a1a1a;
+  --ion-color-step-150: #262626;
+  --ion-color-step-200: #333333;
+  --ion-color-step-250: #404040;
+  --ion-color-step-300: #4d4d4d;
+  --ion-color-step-350: #595959;
+  --ion-color-step-400: #666666;
+  --ion-color-step-450: #737373;
+  --ion-color-step-500: #808080;
+  --ion-color-step-550: #8c8c8c;
+  --ion-color-step-600: #999999;
+  --ion-color-step-650: #a6a6a6;
+  --ion-color-step-700: #b3b3b3;
+  --ion-color-step-750: #bfbfbf;
+  --ion-color-step-800: #cccccc;
+  --ion-color-step-850: #d9d9d9;
+  --ion-color-step-900: #e6e6e6;
+  --ion-color-step-950: #f2f2f2;
+
+  --ion-item-background: #000000;
+
+  --ion-card-background: #1c1c1d;
+}
+
+.ios ion-modal {
+  --ion-background-color: var(--ion-color-step-100);
+  --ion-toolbar-background: var(--ion-color-step-150);
+  --ion-toolbar-border-color: var(--ion-color-step-250);
+}
+
+/*
+ * Material Design Dark Theme
+ * -------------------------------------------
+ */
+
+.md body {
+  --ion-background-color: #121212;
+  --ion-background-color-rgb: 18, 18, 18;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-border-color: #222222;
+
+  --ion-color-step-50: #1e1e1e;
+  --ion-color-step-100: #2a2a2a;
+  --ion-color-step-150: #363636;
+  --ion-color-step-200: #414141;
+  --ion-color-step-250: #4d4d4d;
+  --ion-color-step-300: #595959;
+  --ion-color-step-350: #656565;
+  --ion-color-step-400: #717171;
+  --ion-color-step-450: #7d7d7d;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #949494;
+  --ion-color-step-600: #a0a0a0;
+  --ion-color-step-650: #acacac;
+  --ion-color-step-700: #b8b8b8;
+  --ion-color-step-750: #c4c4c4;
+  --ion-color-step-800: #d0d0d0;
+  --ion-color-step-850: #dbdbdb;
+  --ion-color-step-900: #e7e7e7;
+  --ion-color-step-950: #f3f3f3;
+
+  --ion-item-background: #1e1e1e;
+
+  --ion-toolbar-background: #1f1f1f;
+
+  --ion-tab-bar-background: #1f1f1f;
+
+  --ion-card-background: #1e1e1e;
+}

core/stencil.config.ts

@@ -231,7 +231,7 @@ export const config: Config = {
     },
     {
       type: 'docs-json',
-      file: '../docs/core.json'
+      file: '../packages/docs/core.json'
     },
     {
       type: 'dist-hydrate-script'

lerna.json

@@ -1,7 +1,6 @@
 {
   "packages": [
     "core",
-    "docs",
     "packages/*"
   ],
   "version": "8.0.0-rc.0"