chore: use forward rule to get global files

core/package-lock.json

@@ -40,7 +40,7 @@
         "jest-cli": "^27.5.1",
         "prettier": "^2.6.1",
         "rollup": "^2.26.4",
-        "sass": "^1.26.10",
+        "sass": "^1.63.6",
         "serve": "^14.0.1",
         "stylelint": "^13.13.1",
         "stylelint-order": "^4.1.0",
@@ -5145,6 +5145,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -8767,18 +8773,20 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+      "version": "1.63.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
+      "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
       "dev": true,
       "dependencies": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=8.9.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/saxes": {
@@ -8963,6 +8971,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.19",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
@@ -14055,6 +14072,12 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -16702,12 +16725,14 @@
       "dev": true
     },
     "sass": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+      "version": "1.63.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
+      "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
       "dev": true,
       "requires": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
     "saxes": {
@@ -16853,6 +16878,12 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
     "source-map-support": {
       "version": "0.5.19",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",

core/package.json

@@ -62,7 +62,7 @@
     "jest-cli": "^27.5.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
-    "sass": "^1.26.10",
+    "sass": "^1.63.6",
     "serve": "^14.0.1",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",

core/src/components/chip/chip.scss

@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@use "../../themes-migrated/globals" as *;
 
 :host {
   /**

core/src/themes-migrated/globals.ios.scss

@@ -0,0 +1,6 @@
+
+// Global Core
+@import "./globals";
+
+// Global iOS
+@import "./theme.default.ios";

core/src/themes-migrated/globals.md.scss

@@ -0,0 +1,6 @@
+
+// Core Globals
+@import "./globals";
+
+// Material Design Globals
+@import "./theme.default.md";

core/src/themes-migrated/globals.scss

@@ -0,0 +1,67 @@
+
+// Global Utility Functions
+@forward "./ionic.functions.string";
+
+// Global Color Functions
+@forward "./ionic.functions.color";
+
+// Global Mixins
+@forward "./ionic.mixins";
+
+// Default Theme
+@forward "./theme.default";
+
+
+// Default General
+// --------------------------------------------------
+$font-family-base:                  var(--ion-font-family, inherit) !default;
+
+// Global app direction
+$app-direction: null !default;
+
+// Hairlines width
+$hairlines-width: .55px !default;
+
+// The minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries
+$screen-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+// Input placeholder opacity
+// Ensures that the placeholder has the
+// correct color contrast against the background.
+$placeholder-opacity: 0.6 !default;
+
+$form-control-label-margin: 16px !default;
+
+
+// Z-Index
+// --------------------------------------------------
+// Grouped by elements which would be siblings
+
+$z-index-menu-overlay:           1000;
+$z-index-overlay:                1001;
+$z-index-click-block:            99999;
+
+$z-index-fixed-content:          999;
+$z-index-scroll-content:         1;
+$z-index-refresher:              -1;
+
+$z-index-page-container:         0;
+$z-index-toolbar:                10;
+$z-index-toolbar-background:     -1;
+$z-index-toolbar-buttons:        99;
+
+$z-index-backdrop:               2;
+$z-index-overlay-wrapper:        10;
+
+$z-index-item-options:           1;
+$z-index-item-input:             2;
+$z-index-item-divider:           100;
+
+$z-index-reorder-selected:       100;

core/src/themes-migrated/ionic.functions.color.scss

@@ -0,0 +1,59 @@
+// Gets the active color's css variable from a variation. Alpha is optional.
+// --------------------------------------------------------------------------------------------
+// Example usage:
+// current-color(base) => var(--ion-color-base)
+// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+// --------------------------------------------------------------------------------------------
+@function current-color($variation, $alpha: null) {
+  @if $alpha == null {
+    @return var(--ion-color-#{$variation});
+  } @else {
+    @return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
+  }
+}
+
+// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+// --------------------------------------------------------------------------------------------
+// Example usage:
+// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+// --------------------------------------------------------------------------------------------
+@function ion-color($name, $variation, $alpha: null, $rgb: null) {
+  $values: map-get($colors, $name);
+  $value: map-get($values, $variation);
+  $variable: --ion-color-#{$name}-#{$variation};
+
+  @if ($variation == base) {
+    $variable: --ion-color-#{$name};
+  }
+
+  @if ($alpha) {
+    $value: color-to-rgb-list($value);
+    @return rgba(var(#{$variable}-rgb, $value), $alpha);
+  }
+  @if ($rgb) {
+    $value: color-to-rgb-list($value);
+    $variable: #{$variable}-rgb;
+  }
+
+  @return var(#{$variable}, $value);
+}
+
+// Mixes a color with black to create its shade.
+// --------------------------------------------------------------------------------------------
+@function get-color-shade($color) {
+  @return mix(#000, $color, 12%);
+}
+
+// Mixes a color with white to create its tint.
+// --------------------------------------------------------------------------------------------
+@function get-color-tint($color) {
+  @return mix(#fff, $color, 10%);
+}
+
+// Converts a color to a comma separated rgb.
+// --------------------------------------------------------------------------------------------
+@function color-to-rgb-list($color) {
+  @return #{red($color)},#{green($color)},#{blue($color)};
+}

core/src/themes-migrated/ionic.functions.string.scss

@@ -0,0 +1,178 @@
+// String Utility Functions
+// --------------------------------------------------------------------------------
+
+// String Replace Function
+// --------------------------------------------------------------------------------
+
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// String Split Function
+// --------------------------------------------------------------------------------
+
+
+@function str-split($string, $separator) {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index: str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index: str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+
+// String Extract Function
+// --------------------------------------------------------------------------------
+
+@function str-extract($string, $start, $end) {
+  $start-index: str-index($string, $start);
+
+  @if $start-index {
+    $post: str-slice($string, $start-index + str-length($start));
+    $end-index: str-index($post, $end);
+
+    @if $end-index {
+      @return str-slice($post, 1, $end-index - 1);
+    }
+  }
+
+  @return null;
+}
+
+
+// String Contains Function
+// --------------------------------------------------------------------------------
+
+@function str-contains($string, $needle) {
+  @if (type-of($string) == string) {
+    @return str-index($string, $needle) != null;
+  }
+
+  @return false;
+}
+
+
+// URL Encode Function
+// --------------------------------------------------------------------------------
+
+@function url-encode($val) {
+  $spaces: str-replace($val, " ", "%20");
+  $encoded: str-replace($spaces, "#", "%23");
+  @return $encoded;
+}
+
+
+// Add Root Selector
+// --------------------------------------------------------------------------------
+// Adds a root selector using host based on the selector passed
+// --------------------------------------------------------------------------------
+
+@function add-root-selector($root, $addHostSelector) {
+  $selectors: str-split($root, ",");
+
+  $list: ();
+
+  @each $selector in $selectors {
+    // If the selector contains :host( it means it is targeting a class on the host
+    // element so we need to change how we target it:
+    // @include add-root-selector(":host(.fixed)", "[dir=rtl]")
+    // --> :host-context([dir=rtl]):host(.fixed)
+    // --> :host-context([dir=rtl]).fixed
+    @if str-contains($selector, ":host(") {
+      // @include add-root-selector(":host(.fixed)", "[dir=rtl]")
+      // --> :host-context([dir=rtl]):host(.fixed)
+      $shadow-element: str-replace($selector, ":host(", ":host-context(#{$addHostSelector}):host(");
+      $list: append($list, $shadow-element, comma);
+
+      $new-element: ();
+      $elements: str-split($selector, " ");
+
+      @each $element in $elements {
+        @if str-contains($element, ":host(") {
+          $scoped-element: $element;
+
+          // Replace the :host( and ) so all we have left is the class
+          // inside of it:
+          // :host(.fixed) -> .fixed
+          $scoped-element: str-replace($scoped-element, ")", "");
+          $scoped-element: str-replace($scoped-element, ":host(", "");
+
+          // Add the class back inside of host with the rtl selector:
+          // .fixed -> :host-context([dir=rtl]).fixed
+          $scoped-element: str-replace($scoped-element, $scoped-element, ":host-context(#{$addHostSelector})#{$scoped-element}");
+
+          // @include add-root-selector(":host(.fixed)", "[dir=rtl]")
+          // --> :host-context([dir=rtl]).fixed
+          $new-element: append($new-element, $scoped-element, space);
+        } @else {
+          // Add back any selectors that followed the host after transforming the
+          // first selector:
+          // :host(.fixed) ::slotted(ion-icon)
+          // --> :host-context([dir=rtl]):host(.fixed) ::slotted(ion-icon)
+          // --> :host-context([dir=rtl]).fixed ::slotted(ion-icon)
+          $new-element: append($new-element, $element, space);
+        }
+      }
+
+      $list: append($list, $new-element, comma);
+    // If the selector contains :host without a parantheses
+    // it means it is targeting just the host
+    // element so we can change it to look for host-context
+    // @include add-root-selector(":host", "[dir=rtl]")
+    // --> :host-context([dir=rtl])
+    // --> :host:dir(rtl)
+    } @else if str-contains($selector, ":host") {
+      $new-element: ();
+      $elements: str-split($selector, " ");
+
+      @each $element in $elements {
+        @if str-contains($element, ":host") {
+          // Replace the :host with the addHostSelector:
+          // :host -> :host-context([dir=rtl])
+          $updated-element: str-replace($element, ":host", ":host-context(#{$addHostSelector})");
+
+          // Add the final selector after all transformations:
+          // :host -> :host-context([dir=rtl])
+          $new-element: append($new-element, $updated-element, space);
+        } @else {
+          // Add back any selectors that followed the host after transforming the
+          // first selector:
+          // :host ::slotted(ion-icon) -> :host-context([dir=rtl]) ::slotted(ion-icon)
+          $new-element: append($new-element, $element, space);
+        }
+      }
+      
+      $list: append($list, $new-element, comma);
+    // If the selector does not contain host at all it is either a shadow
+    // or normal element so append both the addHostSelector and host-context
+    // @include add-root-selector("ion-component", "[dir=rtl]")
+    // --> :host-context([dir=rtl]) ion-component
+    // --> [dir=rtl] ion-component
+    } @else {
+      $list: append($list, "#{$addHostSelector} #{$selector}", comma);
+      $list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
+    }
+  }
+
+  @return $list;
+}

core/src/themes-migrated/ionic.mixins.scss

@@ -0,0 +1,593 @@
+@mixin input-cover() {
+  @include position(0, null, null, 0);
+  @include margin(0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+
+  appearance: none;
+  outline: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
+@mixin visually-hidden() {
+  position: absolute;
+
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  width: 100%;
+  height: 100%;
+
+  margin: 0;
+  padding: 0;
+
+  border: 0;
+  outline: 0;
+  clip: rect(0 0 0 0);
+
+  opacity: 0;
+  overflow: hidden;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+@mixin text-inherit() {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  white-space: inherit;
+  color: inherit;
+}
+
+@mixin button-state() {
+  @include position(0, 0, 0, 0);
+
+  position: absolute;
+
+  content: "";
+
+  opacity: 0;
+}
+
+// Font smoothing
+// --------------------------------------------------
+
+@mixin font-smoothing() {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Get the key from a map based on the index
+@function index-to-key($map, $index) {
+  $keys: map-keys($map);
+
+  @return nth($keys, $index);
+}
+
+
+// Breakpoint Mixins
+// ---------------------------------------------------------------------------------
+
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// ---------------------------------------------------------------------------------
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
+  $min: map-get($breakpoints, $name);
+
+  @return if($name != index-to-key($breakpoints, 1), $min, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Maximum breakpoint width. Null for the smallest (first) breakpoint.
+// The maximum value is reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
+//
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.	// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261	// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
+  $max: map-get($breakpoints, $name);
+  @return if($max and $max > 0, $max - .02, null);
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+
+// Text Direction - ltr / rtl
+//
+// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
+// to override ltr defaults.
+// ----------------------------------------------------------
+
+@mixin multi-dir() {
+  @content;
+
+  // $root: #{&};
+  // @at-root [dir] {
+  //   #{$root} {
+  //     @content;
+  //   }
+  // }
+}
+
+@mixin rtl() {
+  $root: #{&};
+
+  $rootSplit: str-split($root, ",");
+  $selectors: #{add-root-selector($root, "[dir=rtl]")};
+  $selectorsSplit: str-split($selectors, ",");
+
+  $hostContextSelectors: ();
+  $restSelectors: ();
+  $dirSelectors: ();
+
+  // Selectors must be split into individual selectors in case the browser
+  // doesn't support a specific selector.
+  // For example, Firefox and Safari doesn't support `:host-context()`.
+  // If an invalid selector is used, then the entire group of selectors
+  // will be ignored.
+  // @link https://www.w3.org/TR/selectors-3/#grouping
+  @each $selector in $selectorsSplit {
+    // Group the selectors back into a single selector to optimize the output.
+    @if str-index($selector, ":host-context") {
+      $hostContextSelectors: append($hostContextSelectors, $selector, comma);
+    } @else {
+      // Group the selectors back into a single selector to optimize the output.
+      $restSelectors: append($restSelectors, $selector, comma);
+    }
+  }
+  
+  // Supported by Chrome.
+  @if length($hostContextSelectors) > 0 {
+    @at-root #{$hostContextSelectors} {
+      @content;
+    }
+  }
+
+  // Supported by all browsers.
+  @if length($restSelectors) > 0 {
+    @at-root #{$restSelectors} {
+      @content;
+    }
+  }
+
+  // If browser can support `:dir()`, then add the `:dir()` selectors.
+  @supports selector(:dir(rtl)) {
+    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.
+    // `:host-context()` is added:
+    // - through the `add-root-selector()` function.
+    // - first so that it takes precedence over `:dir()`.
+    // For example,
+    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.
+    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`
+    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/
+    @each $selector in $rootSplit {
+      $dirSelector: "#{$selector}:dir(rtl)";
+      // Group the selectors back into a single selector to optimize the output.
+      $dirSelectors: append($dirSelectors, $dirSelector, comma);
+    }
+
+    // Supported by Firefox.
+    @if length($dirSelectors) > 0 {
+      @at-root #{$dirSelectors} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin ltr() {
+  @content;
+}
+
+
+// SVG Background Image Mixin
+// @param {string} $svg
+// ----------------------------------------------------------
+@mixin svg-background-image($svg, $flip-rtl: false) {
+  $url: url-encode($svg);
+  $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
+
+  @if $flip-rtl != true or $viewBox == null {
+    @include multi-dir() {
+      background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+    }
+  } @else {
+    $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
+    $flipped-url: $svg;
+    $flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
+    $flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
+    $flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
+    $flipped-url: url-encode($flipped-url);
+
+    @include ltr () {
+      background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+    }
+    @include rtl() {
+      background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
+    }
+  }
+}
+
+// Add property horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin property-horizontal($prop, $start, $end: $start) {
+  @if $start == 0 and $end == 0 {
+    #{$prop}-left: $start;
+    #{$prop}-right: $end;
+
+  } @else {
+    -webkit-#{$prop}-start: $start;
+    #{$prop}-inline-start: $start;
+    -webkit-#{$prop}-end: $end;
+    #{$prop}-inline-end: $end;
+  }
+}
+
+// Add property for all directions
+// @param {string} $prop
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// @param {boolean} $content include content or use default
+// ----------------------------------------------------------
+@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
+  @include property-horizontal($prop, $start, $end);
+  #{$prop}-top: $top;
+  #{$prop}-bottom: $bottom;
+}
+
+// Add padding horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin padding-horizontal($start, $end: $start) {
+  @include property-horizontal(padding, $start, $end);
+}
+
+// Add padding for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
+  @include property(padding, $top, $end, $bottom, $start);
+}
+
+// Add margin horizontal
+// @param {string} $start
+// @param {string} $end
+// ----------------------------------------------------------
+@mixin margin-horizontal($start, $end: $start) {
+  @include property-horizontal(margin, $start, $end);
+}
+
+// Add margin for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
+  @include property(margin, $top, $end, $bottom, $start);
+}
+
+// Add position horizontal
+// @param {string} $start - amount to position start
+// @param {string} $end - amount to left: 0; end
+// ----------------------------------------------------------
+@mixin position-horizontal($start: null, $end: null) {
+  @if $start == $end {
+    @include multi-dir() {
+      left: $start;
+      right: $end;
+    }
+  } @else {
+    @at-root {
+      @supports (inset-inline-start: 0) {
+        & {
+          inset-inline-start: $start;
+          inset-inline-end: $end;
+        }
+      }
+    }
+
+    // TODO FW-3766
+    @at-root {
+      @supports not (inset-inline-start: 0) {
+        & {
+          @include ltr() {
+            left: $start;
+            right: $end;
+          }
+          @include rtl() {
+            left: unset;
+            right: unset;
+
+            left: $end;
+            right: $start;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Add position for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin position($top: null, $end: null, $bottom: null, $start: null) {
+  @include position-horizontal($start, $end);
+  top: $top;
+  bottom: $bottom;
+}
+
+// Add border for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
+  @include property(border, $top, $end, $bottom, $start);
+}
+
+// Add border radius for all directions
+// @param {string} $top-start
+// @param {string} $top-end
+// @param {string} $bottom-end
+// @param {string} $bottom-start
+// ----------------------------------------------------------
+@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
+  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
+    @include multi-dir() {
+      border-radius: $top-start;
+    }
+  } @else {
+    @include ltr() {
+      border-top-left-radius: $top-start;
+      border-top-right-radius: $top-end;
+      border-bottom-right-radius: $bottom-end;
+      border-bottom-left-radius: $bottom-start;
+    }
+
+    @include rtl() {
+      border-top-left-radius: $top-end;
+      border-top-right-radius: $top-start;
+      border-bottom-right-radius: $bottom-start;
+      border-bottom-left-radius: $bottom-end;
+    }
+  }
+}
+
+// Add direction for all directions
+// @param {string} $dir - Direction on LTR
+@mixin direction($dir) {
+  $other-dir: null;
+
+  @if $dir == ltr {
+    $other-dir: rtl;
+  } @else {
+    $other-dir: ltr;
+  }
+
+  @include ltr() {
+    direction: $dir;
+  }
+  @include rtl() {
+    direction: $other-dir;
+  }
+}
+
+// Add float for all directions
+// @param {string} $side
+// @param {string} $decorator - !important
+@mixin float($side, $decorator: null) {
+  @if $side == start {
+    @include ltr() {
+      float: left $decorator;
+    }
+    @include rtl() {
+      float: right $decorator;
+    }
+  } @else if $side == end {
+    @include ltr() {
+      float: right $decorator;
+    }
+    @include rtl() {
+      float: left $decorator;
+    }
+  } @else {
+    @include multi-dir() {
+      float: $side $decorator;
+    }
+  }
+}
+
+@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
+  @if $horizontal == start or $horizontal == end {
+    $horizontal-ltr: null;
+    $horizontal-rtl: null;
+    @if $horizontal == start {
+      $horizontal-ltr: left;
+      $horizontal-rtl: right;
+    } @else {
+      $horizontal-ltr: right;
+      $horizontal-rtl: left;
+    }
+
+    @include ltr() {
+      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
+    }
+    @include rtl() {
+      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
+    }
+  } @else {
+    @include multi-dir() {
+      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
+    }
+  }
+}
+
+@mixin transform-origin($x-axis, $y-axis: null) {
+  @if $x-axis == start {
+    @include ltr() {
+      transform-origin: left $y-axis;
+    }
+    @include rtl() {
+      transform-origin: right $y-axis;
+    }
+  } @else if $x-axis == end {
+    @include ltr() {
+      transform-origin: right $y-axis;
+    }
+    @include rtl() {
+      transform-origin: left $y-axis;
+    }
+  } @else if $x-axis == left or $x-axis == right {
+    @include multi-dir() {
+      transform-origin: $x-axis $y-axis;
+    }
+  } @else {
+    @include ltr() {
+      transform-origin: $x-axis $y-axis;
+    }
+    @include rtl() {
+      transform-origin: calc(100% - #{$x-axis}) $y-axis;
+    }
+  }
+}
+
+// Add transform for all directions
+// @param {string} $transforms - comma separated list of transforms
+@mixin transform($transforms...) {
+  $extra: null;
+
+  $x: null;
+  $ltr-translate: null;
+  $rtl-translate: null;
+
+  @each $transform in $transforms {
+    @if (str-index($transform, translate3d)) {
+      $transform: str-replace($transform, 'translate3d(');
+      $transform: str-replace($transform, ')');
+
+      $coordinates: str-split($transform, ',');
+
+      $x: nth($coordinates, 1);
+      $y: nth($coordinates, 2);
+      $z: nth($coordinates, 3);
+
+      $ltr-translate: translate3d($x, $y, $z);
+      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
+    } @else {
+      @if $extra == null {
+        $extra: $transform;
+      } @else {
+        $extra: $extra $transform;
+      }
+    }
+  }
+
+  @if $x == '0' or $x == null {
+    @include multi-dir() {
+      transform: $ltr-translate $extra;
+    }
+  } @else {
+    @include ltr() {
+      transform: $ltr-translate $extra;
+    }
+
+    @include rtl() {
+      transform: $rtl-translate $extra;
+    }
+  }
+}

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

@@ -0,0 +1,136 @@
+:root {
+  --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 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: #1c1c1c;
+
+  --ion-toolbar-background: #000;
+  --ion-toolbar-color: #fff;
+}
+
+.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: #1a1b1e;
+}
+
+ion-modal.ios {
+  --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);
+  --ion-item-background: var(--ion-color-step-150);
+}

core/src/themes-migrated/test/css-variables/css/default.css

@@ -0,0 +1,75 @@
+/**
+ * Default
+ * -----------------------------------------------------
+ * The default theme uses a white background with
+ * varying shades of black as contrast and the Ionic
+ * primary color as an accent.
+ *
+ * Looking to create a custom theme? Check out the generator!
+ * https://ionicframework.com/docs/theming/color-generator
+**/
+
+/* :root {
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+} */

core/src/themes-migrated/test/css-variables/css/oceanic.css

@@ -0,0 +1,119 @@
+/**
+ * Oceanic
+ * -----------------------------------------------------
+ * The Oceanic theme uses dark backgrounds with hues
+ * of gray and blue and changes the Ionic colors to
+ * less vibrant shades.
+ *
+ * Looking to create a custom theme? Check out the generator!
+ * https://ionicframework.com/docs/theming/color-generator
+**/
+
+:root {
+  /* Ionic Colors */
+  --ion-color-primary: #549ee7;
+  --ion-color-primary-contrast: #fff;
+  --ion-color-primary-contrast-rgb: 255,255,255;
+  --ion-color-primary-rgb: 84,158,231;
+  --ion-color-primary-shade: #498bce;
+  --ion-color-primary-tint: #59aafc;
+
+  --ion-color-secondary: #5fb3b3;
+  --ion-color-secondary-contrast: #fff;
+  --ion-color-secondary-contrast-rgb: 255,255,255;
+  --ion-color-secondary-rgb: 95,179,179;
+  --ion-color-secondary-shade: #34a29d;
+  --ion-color-secondary-tint: #6ececf;
+
+  --ion-color-tertiary: #fac863;
+  --ion-color-tertiary-contrast: #fff;
+  --ion-color-tertiary-contrast-rgb: 255,255,255;
+  --ion-color-tertiary-rgb: 250,200,99;
+  --ion-color-tertiary-shade: #eab30f;
+  --ion-color-tertiary-tint: #ffd36a;
+
+  --ion-color-success: #90d089;
+  --ion-color-success-contrast: #fff;
+  --ion-color-success-contrast-rgb: 255,255,255;
+  --ion-color-success-rgb: 144,208,137;
+  --ion-color-success-shade: #81bc7b;
+  --ion-color-success-tint: #a1eb9a;
+
+  --ion-color-warning: #f99157;
+  --ion-color-warning-contrast: #fff;
+  --ion-color-warning-contrast-rgb: 255,255,255;
+  --ion-color-warning-rgb: 249,145,87;
+  --ion-color-warning-shade: #ec8a54;
+  --ion-color-warning-tint: #ff9e60;
+
+  --ion-color-danger: #ec5f67;
+  --ion-color-danger-contrast: #fff;
+  --ion-color-danger-contrast-rgb: 255,255,255;
+  --ion-color-danger-rgb: 236,95,103;
+  --ion-color-danger-shade: #cb535b;
+  --ion-color-danger-tint: #ff707b;
+
+  --ion-color-light: #d8dee9;
+  --ion-color-light-contrast: #1b2b34;
+  --ion-color-light-contrast-rgb: 27,43,52;
+  --ion-color-light-rgb: 216,222,233;
+  --ion-color-light-shade: #bcc1cd;
+  --ion-color-light-tint: #ecf2ff;
+
+  --ion-color-medium: #65737e;
+  --ion-color-medium-contrast: #fff;
+  --ion-color-medium-contrast-rgb: 255,255,255;
+  --ion-color-medium-rgb: 101,115,126;
+  --ion-color-medium-shade: #4f5b66;
+  --ion-color-medium-tint: #a7adba;
+
+  --ion-color-dark: #1b2b34;
+  --ion-color-dark-contrast: #d8dee9;
+  --ion-color-dark-contrast-rgb: 216,222,233;
+  --ion-color-dark-rgb: 27,43,52;
+  --ion-color-dark-shade: #070b0d;
+  --ion-color-dark-tint: #343d46;
+
+  /* Component Colors */
+  --ion-backdrop-color: #1b2b34;
+  --ion-overlay-background-color: #142129;
+
+  --ion-border-color: #1b2b34;
+  --ion-box-shadow-color: #000;
+
+  --ion-tab-bar-background: #343d46;
+  --ion-tab-bar-background-focused: #293039;
+  --ion-tab-bar-color: #a7adba;
+  --ion-tab-bar-color-selected: #549ee7;
+
+  --ion-toolbar-background: #343d46;
+  --ion-toolbar-color: #a7adba;
+
+  /* Background, Text, Step Colors */
+  --ion-background-color: #1b2b34;
+  --ion-background-color-rgb: 27,43,52;
+
+  --ion-text-color: #fff;
+  --ion-text-color-rgb: 255,255,255;
+
+  --ion-color-step-50: #26363e;
+  --ion-color-step-100: #324048;
+  --ion-color-step-150: #3d4b52;
+  --ion-color-step-200: #49555d;
+  --ion-color-step-250: #546067;
+  --ion-color-step-300: #5f6b71;
+  --ion-color-step-350: #6b757b;
+  --ion-color-step-400: #768085;
+  --ion-color-step-450: #828a8f;
+  --ion-color-step-500: #8d959a;
+  --ion-color-step-550: #98a0a4;
+  --ion-color-step-600: #a4aaae;
+  --ion-color-step-650: #afb5b8;
+  --ion-color-step-700: #bbbfc2;
+  --ion-color-step-750: #c6cacc;
+  --ion-color-step-800: #d1d5d6;
+  --ion-color-step-850: #dddfe1;
+  --ion-color-step-900: #e8eaeb;
+  --ion-color-step-950: #f4f4f5;
+  --ion-color-step-1000: #fff;
+}

core/src/themes-migrated/test/css-variables/css/toolbar.css

@@ -0,0 +1,26 @@
+/**
+ * Toolbar
+ * -----------------------------------------------------
+ * The toolbar theme customizes the toolbar only
+ *
+ * Looking to create a custom theme? Check out the generator!
+ * https://ionicframework.com/docs/theming/color-generator
+**/
+
+:root {
+  --ion-color-primary: #3880ff;
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+
+  --ion-toolbar-background: var(--ion-color-primary);
+  --ion-toolbar-color: var(--ion-color-light);
+}
+
+.md body {
+  --ion-toolbar-segment-color: rgba(var(--ion-color-light-rgb), .7);
+  --ion-toolbar-segment-color-checked: var(--ion-color-light);
+}
+
+.ios body {
+  --ion-toolbar-segment-color-checked: var(--ion-color-primary);
+}

core/src/themes-migrated/test/css-variables/css/vibrant.css

@@ -0,0 +1,80 @@
+/**
+ * Vibrant
+ * -----------------------------------------------------
+ * The vibrant theme uses a white background with
+ * varying shades of black as contrast and the Ionic
+ * colors are all changed to more vibrant shades.
+ *
+ * Looking to create a custom theme? Check out the generator!
+ * https://ionicframework.com/docs/theming/color-generator
+**/
+
+:root {
+  --ion-color-primary: #ff7f50;
+  --ion-color-primary-rgb: 255,127,80;
+  --ion-color-primary-contrast: #000000;
+  --ion-color-primary-contrast-rgb: 0,0,0;
+  --ion-color-primary-shade: #e07046;
+  --ion-color-primary-tint: #ff8c62;
+
+  --ion-color-secondary: #17deee;
+  --ion-color-secondary-rgb: 23,222,238;
+  --ion-color-secondary-contrast: #000000;
+  --ion-color-secondary-contrast-rgb: 0,0,0;
+  --ion-color-secondary-shade: #14c3d1;
+  --ion-color-secondary-tint: #2ee1f0;
+
+  --ion-color-tertiary: #ff4162;
+  --ion-color-tertiary-rgb: 255,65,98;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255,255,255;
+  --ion-color-tertiary-shade: #e03956;
+  --ion-color-tertiary-tint: #ff5472;
+
+  --ion-color-success: #39ff14;
+  --ion-color-success-rgb: 57,255,20;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0,0,0;
+  --ion-color-success-shade: #32e012;
+  --ion-color-success-tint: #4dff2c;
+
+  --ion-color-warning: #ffce00;
+  --ion-color-warning-rgb: 255,206,0;
+  --ion-color-warning-contrast: #ffffff;
+  --ion-color-warning-contrast-rgb: 255,255,255;
+  --ion-color-warning-shade: #e0b500;
+  --ion-color-warning-tint: #ffd31a;
+
+  --ion-color-danger: #f04141;
+  --ion-color-danger-rgb: 245,61,61;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255,255,255;
+  --ion-color-danger-shade: #d33939;
+  --ion-color-danger-tint: #f25454;
+
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34,34,34;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255,255,255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152,154,162;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255,255,255;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244,244,244;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0,0,0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+
+  /* Item Backgrounds */
+  --ion-background-color: #778899;
+  --ion-item-background: #fff;
+  --ion-item-border-color: #5bff76;
+}

core/src/themes-migrated/test/steps/index.html

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Themes - Steps</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .block {
+        display: inline-block;
+        height: 60px;
+        width: 150px;
+      }
+
+      .background-step-50 {
+        background: var(--ion-color-step-50, #f2f2f2);
+      }
+
+      .background-step-100 {
+        background: var(--ion-color-step-100, #e6e6e6);
+      }
+
+      .background-step-150 {
+        background: var(--ion-color-step-150, #d9d9d9);
+      }
+
+      .background-step-200 {
+        background: var(--ion-color-step-200, #cccccc);
+      }
+
+      .background-step-250 {
+        background: var(--ion-color-step-250, #bfbfbf);
+      }
+
+      .background-step-300 {
+        background: var(--ion-color-step-300, #b3b3b3);
+      }
+
+      .background-step-350 {
+        background: var(--ion-color-step-350, #a6a6a6);
+      }
+
+      .background-step-400 {
+        background: var(--ion-color-step-400, #999999);
+      }
+
+      .background-step-450 {
+        background: var(--ion-color-step-450, #8c8c8c);
+      }
+
+      .background-step-500 {
+        background: var(--ion-color-step-500, gray);
+      }
+
+      .background-step-550 {
+        background: var(--ion-color-step-550, #737373);
+      }
+
+      .background-step-600 {
+        background: var(--ion-color-step-600, #666666);
+      }
+
+      .background-step-650 {
+        background: var(--ion-color-step-650, #595959);
+      }
+
+      .background-step-700 {
+        background: var(--ion-color-step-700, #4d4d4d);
+      }
+
+      .background-step-750 {
+        background: var(--ion-color-step-750, #404040);
+      }
+
+      .background-step-800 {
+        background: var(--ion-color-step-800, #333333);
+      }
+
+      .background-step-850 {
+        background: var(--ion-color-step-850, #262626);
+      }
+
+      .background-step-900 {
+        background: var(--ion-color-step-900, #1a1a1a);
+      }
+
+      .background-step-950 {
+        background: var(--ion-color-step-950, #0d0d0d);
+      }
+
+      .text-step-50 {
+        color: var(--ion-color-step-950, #0d0d0d);
+      }
+
+      .text-step-100 {
+        color: var(--ion-color-step-900, #1a1a1a);
+      }
+
+      .text-step-150 {
+        color: var(--ion-color-step-850, #262626);
+      }
+
+      .text-step-200 {
+        color: var(--ion-color-step-800, #333333);
+      }
+
+      .text-step-250 {
+        color: var(--ion-color-step-750, #404040);
+      }
+
+      .text-step-300 {
+        color: var(--ion-color-step-700, #4d4d4d);
+      }
+
+      .text-step-350 {
+        color: var(--ion-color-step-650, #595959);
+      }
+
+      .text-step-400 {
+        color: var(--ion-color-step-600, #666666);
+      }
+
+      .text-step-450 {
+        color: var(--ion-color-step-550, #737373);
+      }
+
+      .text-step-500 {
+        color: var(--ion-color-step-500, gray);
+      }
+
+      .text-step-550 {
+        color: var(--ion-color-step-450, #8c8c8c);
+      }
+
+      .text-step-600 {
+        color: var(--ion-color-step-400, #999999);
+      }
+
+      .text-step-650 {
+        color: var(--ion-color-step-350, #a6a6a6);
+      }
+
+      .text-step-700 {
+        color: var(--ion-color-step-300, #b3b3b3);
+      }
+
+      .text-step-750 {
+        color: var(--ion-color-step-250, #bfbfbf);
+      }
+
+      .text-step-800 {
+        color: var(--ion-color-step-200, #cccccc);
+      }
+
+      .text-step-850 {
+        color: var(--ion-color-step-150, #d9d9d9);
+      }
+
+      .text-step-900 {
+        color: var(--ion-color-step-100, #e6e6e6);
+      }
+
+      .text-step-950 {
+        color: var(--ion-color-step-50, #f2f2f2);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content class="ion-padding">
+        <div class="block">Background</div>
+        <div class="block background-step-50">Step 50</div>
+        <div class="block background-step-100">Step 100</div>
+        <div class="block background-step-150">Step 150</div>
+        <div class="block background-step-200">Step 200</div>
+        <div class="block background-step-250">Step 250</div>
+        <div class="block background-step-300">Step 300</div>
+        <div class="block background-step-350">Step 350</div>
+        <div class="block background-step-400">Step 400</div>
+        <div class="block background-step-450">Step 450</div>
+        <div class="block background-step-500">Step 500</div>
+        <div class="block background-step-550">Step 550</div>
+        <div class="block background-step-600">Step 600</div>
+        <div class="block background-step-650">Step 650</div>
+        <div class="block background-step-700">Step 700</div>
+        <div class="block background-step-750">Step 750</div>
+        <div class="block background-step-800">Step 800</div>
+        <div class="block background-step-850">Step 850</div>
+        <div class="block background-step-900">Step 900</div>
+        <div class="block background-step-950">Step 950</div>
+        <hr />
+
+        <div class="block">Text</div>
+        <div class="block text-step-50">Step 50</div>
+        <div class="block text-step-100">Step 100</div>
+        <div class="block text-step-150">Step 150</div>
+        <div class="block text-step-200">Step 200</div>
+        <div class="block text-step-250">Step 250</div>
+        <div class="block text-step-300">Step 300</div>
+        <div class="block text-step-350">Step 350</div>
+        <div class="block text-step-400">Step 400</div>
+        <div class="block text-step-450">Step 450</div>
+        <div class="block text-step-500">Step 500</div>
+        <div class="block text-step-550">Step 550</div>
+        <div class="block text-step-600">Step 600</div>
+        <div class="block text-step-650">Step 650</div>
+        <div class="block text-step-700">Step 700</div>
+        <div class="block text-step-750">Step 750</div>
+        <div class="block text-step-800">Step 800</div>
+        <div class="block text-step-850">Step 850</div>
+        <div class="block text-step-900">Step 900</div>
+        <div class="block text-step-950">Step 950</div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

core/src/themes-migrated/theme.default.ios.scss

@@ -0,0 +1,41 @@
+// Ionic iOS Theme
+// -------------------------------------------------------------------------------------------
+// This file contains the theme variables shared
+// between modes. This should only include variables
+// used to theme the application colors for iOS.
+
+// iOS General Colors
+// --------------------------------------------------
+$backdrop-ios-color:                        var(--ion-backdrop-color, #000) !default;
+$border-ios-color:                          var(--ion-border-color, var(--ion-color-step-150, #dedede)) !default;
+$box-shadow-ios-color:                      var(--ion-box-shadow-color, #000) !default;
+$overlay-ios-background-color:              var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9)) !default;
+
+// iOS Tabs & Tab bar
+// --------------------------------------------------
+$tabbar-ios-background:                     var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)) !default;
+$tabbar-ios-background-focused:             var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
+$tabbar-ios-border-color:                   var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
+$tabbar-ios-color:                          var(--ion-tab-bar-color, $text-color-step-400) !default;
+$tabbar-ios-color-selected:                 var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
+
+// iOS Toolbar
+// --------------------------------------------------
+$toolbar-ios-background:                    var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7)) !default;
+$toolbar-ios-border-color:                  var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
+$toolbar-ios-color:                         var(--ion-toolbar-color, $text-color) !default;
+
+// iOS List & List Items
+// --------------------------------------------------
+$item-ios-background:                       var(--ion-item-background, $background-color) !default;
+$item-ios-border-color:                     var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default;
+$item-ios-color:                            var(--ion-item-color, $text-color) !default;
+
+// iOS Card
+// --------------------------------------------------
+$card-ios-background:                       var(--ion-card-background, $item-ios-background) !default;
+$card-ios-color:                            var(--ion-card-color, var(--ion-item-color, $text-color-step-400)) !default;
+
+// iOS Form Controls
+// --------------------------------------------------
+$form-control-ios-disabled-opacity:         0.3;

core/src/themes-migrated/theme.default.md.scss

@@ -0,0 +1,44 @@
+
+// Material Design Default Theme
+// --------------------------------------------------
+// This file should only contain variables that are
+// used to theme the application colors for Material
+// Design.
+
+// Material Design General Colors
+// --------------------------------------------------
+$backdrop-md-color:                         var(--ion-backdrop-color, #000) !default;
+$border-md-color:                           var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default;
+$box-shadow-md-color:                       var(--ion-box-shadow-color, #000) !default;
+$overlay-md-background-color:               var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default;
+
+// Material Design Tabs & Tab bar
+// --------------------------------------------------
+$tabbar-md-background:                      var(--ion-tab-bar-background, $background-color) !default;
+$tabbar-md-background-focused:              var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
+$tabbar-md-border-color:                    var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .07)))) !default;
+$tabbar-md-color:                           var(--ion-tab-bar-color, $text-color-step-350) !default;
+$tabbar-md-color-selected:                  var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
+
+// Material Design Toolbar
+// --------------------------------------------------
+$toolbar-md-background:                     var(--ion-toolbar-background, $background-color) !default;
+$toolbar-md-border-color:                   var(--ion-toolbar-border-color, $border-md-color) !default;
+$toolbar-md-color:                          var(--ion-toolbar-color, var(--ion-text-color, #424242)) !default;
+
+// Material Design List & List Items
+// --------------------------------------------------
+$item-md-background:                        var(--ion-item-background, $background-color) !default;
+$item-md-border-color:                      var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
+$item-md-color:                             var(--ion-item-color, $text-color) !default;
+
+// Material Design Card
+// --------------------------------------------------
+$card-md-background:                        var(--ion-card-background, $item-md-background) !default;
+$card-md-color:                             var(--ion-card-color, var(--ion-item-color, $text-color-step-450)) !default;
+
+// Material Design Form Controls
+// --------------------------------------------------
+/// This value comes from the Material Design spec:
+/// https://m3.material.io/components/text-fields/specs
+$form-control-md-disabled-opacity:          0.38;

core/src/themes-migrated/theme.default.scss

@@ -0,0 +1,146 @@
+// Ionic Theme
+// -------------------------------------------------------------------------------------------
+// This file contains the theme variables shared
+// between modes. This should only include variables
+// used to theme the application colors.
+
+// Default Ionic Colors
+// -------------------------------------------------------------------------------------------
+// Color map should provide
+// - base: main color to be used.
+// - contrast: Color that will provide readable text against the base color
+// - shade: 12% darker version of the base color (mix with black)
+// - tint: 10% lighter version of the base color (mix with white)
+
+$primary:         #3880ff !default;
+$secondary:       #3dc2ff !default;
+$tertiary:        #5260ff !default;
+$success:         #2dd36f !default;
+$warning:         #ffc409 !default;
+$danger:          #eb445a !default;
+$light:           #f4f5f8 !default;
+$medium:          #92949c !default;
+$dark:            #222428 !default;
+
+$colors:  (
+  primary: (
+    base:             $primary,
+    contrast:         #fff,
+    shade:            get-color-shade($primary),
+    tint:             get-color-tint($primary)
+  ),
+  secondary: (
+    base:             $secondary,
+    contrast:         #fff,
+    shade:            get-color-shade($secondary),
+    tint:             get-color-tint($secondary)
+  ),
+  tertiary: (
+    base:             $tertiary,
+    contrast:         #fff,
+    shade:            get-color-shade($tertiary),
+    tint:             get-color-tint($tertiary)
+  ),
+  success: (
+    base:             $success,
+    contrast:         #fff,
+    shade:            get-color-shade($success),
+    tint:             get-color-tint($success)
+  ),
+  warning: (
+    base:             $warning,
+    contrast:         #000,
+    shade:            get-color-shade($warning),
+    tint:             get-color-tint($warning)
+  ),
+  danger: (
+    base:             $danger,
+    contrast:         #fff,
+    shade:            get-color-shade($danger),
+    tint:             get-color-tint($danger)
+  ),
+  light: (
+    base:             $light,
+    contrast:         #000,
+    shade:            get-color-shade($light),
+    tint:             get-color-tint($light)
+  ),
+  medium: (
+    base:             $medium,
+    contrast:         #fff,
+    shade:            get-color-shade($medium),
+    tint:             get-color-tint($medium)
+  ),
+  dark: (
+    base:             $dark,
+    contrast:         #fff,
+    shade:            get-color-shade($dark),
+    tint:             get-color-tint($dark)
+  )
+) !default;
+
+// Default Foreground and Background Colors
+// -------------------------------------------------------------------------------------------
+// Used internally to calculate the default steps
+
+$background-color-value:            #fff !default;
+$background-color-rgb-value:        255, 255, 255 !default;
+
+$text-color-value:                  #000 !default;
+$text-color-rgb-value:              0, 0, 0 !default;
+
+$background-color:                  var(--ion-background-color, $background-color-value) !default;
+$background-color-rgb:              var(--ion-background-color-rgb, $background-color-rgb-value) !default;
+$text-color:                        var(--ion-text-color, $text-color-value) !default;
+$text-color-rgb:                    var(--ion-text-color-rgb, $text-color-rgb-value) !default;
+
+// Default Foreground and Background Step Colors
+// -------------------------------------------------------------------------------------------
+// Color Steps are used to provide variations in text and background colors of elements.
+// Steps move towards their contrasting color.
+// For example, $text-color-step-XXX will be $text-color stepping towards $background-color,
+// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
+
+$background-color-step-50:          var(--ion-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
+$background-color-step-100:         var(--ion-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
+$background-color-step-150:         var(--ion-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
+$background-color-step-200:         var(--ion-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
+$background-color-step-250:         var(--ion-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
+$background-color-step-300:         var(--ion-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
+$background-color-step-350:         var(--ion-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
+$background-color-step-400:         var(--ion-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
+$background-color-step-450:         var(--ion-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
+$background-color-step-500:         var(--ion-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
+$background-color-step-550:         var(--ion-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
+$background-color-step-600:         var(--ion-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
+$background-color-step-650:         var(--ion-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
+$background-color-step-700:         var(--ion-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
+$background-color-step-750:         var(--ion-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
+$background-color-step-800:         var(--ion-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
+$background-color-step-850:         var(--ion-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
+$background-color-step-900:         var(--ion-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
+$background-color-step-950:         var(--ion-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
+$text-color-step-50:                var(--ion-color-step-950, mix($background-color-value, $text-color-value, 5%)) !default;
+$text-color-step-100:               var(--ion-color-step-900, mix($background-color-value, $text-color-value, 10%)) !default;
+$text-color-step-150:               var(--ion-color-step-850, mix($background-color-value, $text-color-value, 15%)) !default;
+$text-color-step-200:               var(--ion-color-step-800, mix($background-color-value, $text-color-value, 20%)) !default;
+$text-color-step-250:               var(--ion-color-step-750, mix($background-color-value, $text-color-value, 25%)) !default;
+$text-color-step-300:               var(--ion-color-step-700, mix($background-color-value, $text-color-value, 30%)) !default;
+$text-color-step-350:               var(--ion-color-step-650, mix($background-color-value, $text-color-value, 35%)) !default;
+$text-color-step-400:               var(--ion-color-step-600, mix($background-color-value, $text-color-value, 40%)) !default;
+$text-color-step-450:               var(--ion-color-step-550, mix($background-color-value, $text-color-value, 45%)) !default;
+$text-color-step-500:               var(--ion-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
+$text-color-step-550:               var(--ion-color-step-450, mix($background-color-value, $text-color-value, 55%)) !default;
+$text-color-step-600:               var(--ion-color-step-400, mix($background-color-value, $text-color-value, 60%)) !default;
+$text-color-step-650:               var(--ion-color-step-350, mix($background-color-value, $text-color-value, 65%)) !default;
+$text-color-step-700:               var(--ion-color-step-300, mix($background-color-value, $text-color-value, 70%)) !default;
+$text-color-step-750:               var(--ion-color-step-250, mix($background-color-value, $text-color-value, 75%)) !default;
+$text-color-step-800:               var(--ion-color-step-200, mix($background-color-value, $text-color-value, 80%)) !default;
+$text-color-step-850:               var(--ion-color-step-150, mix($background-color-value, $text-color-value, 85%)) !default;
+$text-color-step-900:               var(--ion-color-step-100, mix($background-color-value, $text-color-value, 90%)) !default;
+$text-color-step-950:               var(--ion-color-step-50, mix($background-color-value, $text-color-value, 95%)) !default;
+
+// Default General Colors
+// --------------------------------------------------
+$overlay-background-color:          var(--ion-overlay-background-color, #fafafa) !default;
+$placeholder-text-color:            var(--ion-placeholder-color, $text-color-step-600) !default;