diff --git a/core/src/themes-migrated/ionic.theme.default.ios.scss b/core/src/themes-migrated/ionic.theme.default.ios.scss index e3bb9d5919..37fd161d88 100644 --- a/core/src/themes-migrated/ionic.theme.default.ios.scss +++ b/core/src/themes-migrated/ionic.theme.default.ios.scss @@ -1,3 +1,5 @@ +@use "ionic.theme.default" as defaultTheme; + // Ionic iOS Theme // ------------------------------------------------------------------------------------------- // This file contains the theme variables shared @@ -16,25 +18,25 @@ $overlay-ios-background-color: var(--ion-overlay-background-color, $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: var(--ion-tab-bar-color, defaultTheme.$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; +$toolbar-ios-color: var(--ion-toolbar-color, defaultTheme.$text-color) !default; // iOS List & List Items // -------------------------------------------------- -$item-ios-background: var(--ion-item-background, $background-color) !default; +$item-ios-background: var(--ion-item-background, defaultTheme.$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; +$item-ios-color: var(--ion-item-color, defaultTheme.$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; +$card-ios-color: var(--ion-card-color, var(--ion-item-color, defaultTheme.$text-color-step-400)) !default; // iOS Form Controls // -------------------------------------------------- diff --git a/core/src/themes-migrated/ionic.theme.default.md.scss b/core/src/themes-migrated/ionic.theme.default.md.scss index b58c1073c1..813dc737f3 100644 --- a/core/src/themes-migrated/ionic.theme.default.md.scss +++ b/core/src/themes-migrated/ionic.theme.default.md.scss @@ -1,3 +1,4 @@ +@use "ionic.theme.default" as defaultTheme; // Material Design Default Theme // -------------------------------------------------- @@ -14,28 +15,28 @@ $overlay-md-background-color: var(--ion-overlay-background-color, // Material Design Tabs & Tab bar // -------------------------------------------------- -$tabbar-md-background: var(--ion-tab-bar-background, $background-color) !default; +$tabbar-md-background: var(--ion-tab-bar-background, defaultTheme.$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: var(--ion-tab-bar-color, defaultTheme.$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-background: var(--ion-toolbar-background, defaultTheme.$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-background: var(--ion-item-background, defaultTheme.$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; +$item-md-color: var(--ion-item-color, defaultTheme.$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; +$card-md-color: var(--ion-card-color, var(--ion-item-color, defaultTheme.$text-color-step-450)) !default; // Material Design Form Controls // --------------------------------------------------