From 23dd255a8dce2f26184ddd819a5d699a5f4f74be Mon Sep 17 00:00:00 2001 From: Ross Gerbasi Date: Tue, 13 Feb 2018 16:38:50 -0600 Subject: [PATCH] fix(themes): added overlay-background-color --- packages/core/scripts/theme-builder/src/theme-variables.ts | 3 +++ .../src/components/action-sheet/action-sheet.ios.vars.scss | 2 +- packages/core/src/components/action-sheet/action-sheet.md.scss | 2 +- .../core/src/components/action-sheet/action-sheet.md.vars.scss | 2 +- packages/core/src/components/alert/alert.ios.vars.scss | 2 +- packages/core/src/components/alert/alert.md.vars.scss | 2 +- packages/core/src/themes/css/default.css | 1 + packages/core/src/themes/css/oceanic.css | 1 + packages/core/src/themes/ionic.theme.default.ios.scss | 1 + packages/core/src/themes/ionic.theme.default.md.scss | 1 + packages/core/src/themes/ionic.theme.default.scss | 1 + 11 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/core/scripts/theme-builder/src/theme-variables.ts b/packages/core/scripts/theme-builder/src/theme-variables.ts index a9ab92b9b4..2d81d14ca3 100644 --- a/packages/core/scripts/theme-builder/src/theme-variables.ts +++ b/packages/core/scripts/theme-builder/src/theme-variables.ts @@ -210,6 +210,9 @@ export const THEME_VARIABLES: ThemeVariable[] = [ { property: '--ion-backdrop-color' }, + { + property: '--ion-overlay-background-color' + }, { property: '--ion-background-color', quickPick: { diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss index 515857e75f..b2805fb949 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -28,7 +28,7 @@ $action-sheet-ios-group-margin-top: 10px !default; $action-sheet-ios-group-margin-bottom: 10px !default; /// @prop - Background color of the action sheet -$action-sheet-ios-background-color: $background-ios-color-step-50 !default; +$action-sheet-ios-background-color: $overlay-ios-background-color !default; /// @prop - Background color of the action sheet when translucent $action-sheet-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default; diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss index 155c546312..51e9020d0d 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.scss @@ -31,7 +31,7 @@ // ----------------------------------------- .action-sheet-md .action-sheet-group { - background: $action-sheet-md-background; + background-color: $action-sheet-md-background-color; } .action-sheet-md .action-sheet-group:first-child { diff --git a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss index 347cca1591..beb8d45416 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -10,7 +10,7 @@ $action-sheet-md-font-family: $font-family-md-base !de $action-sheet-md-text-align: start !default; /// @prop - Background color of the action sheet -$action-sheet-md-background: $background-md-color-step-50 !default; +$action-sheet-md-background-color: $overlay-md-background-color !default; /// @prop - Padding top of the action sheet $action-sheet-md-padding-top: 8px !default; diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss index d0cbe2b0da..12247b59eb 100644 --- a/packages/core/src/components/alert/alert.ios.vars.scss +++ b/packages/core/src/components/alert/alert.ios.vars.scss @@ -18,7 +18,7 @@ $alert-ios-max-width: 270px !default; $alert-ios-border-radius: 13px !default; /// @prop - Background color of the alert -$alert-ios-background-color: $background-ios-color-step-50 !default; +$alert-ios-background-color: $overlay-ios-background-color !default; /// @prop - Background color of the alert when translucent $alert-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default; diff --git a/packages/core/src/components/alert/alert.md.vars.scss b/packages/core/src/components/alert/alert.md.vars.scss index 1c4fc66c1f..9208748128 100644 --- a/packages/core/src/components/alert/alert.md.vars.scss +++ b/packages/core/src/components/alert/alert.md.vars.scss @@ -18,7 +18,7 @@ $alert-md-max-width: 280px !default; $alert-md-border-radius: 2px !default; /// @prop - Background color of the alert -$alert-md-background-color: $background-md-color-step-50 !default; +$alert-md-background-color: $overlay-md-background-color !default; /// @prop - Box shadow color of the alert $alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default; diff --git a/packages/core/src/themes/css/default.css b/packages/core/src/themes/css/default.css index ec8946babc..da32e7cd22 100644 --- a/packages/core/src/themes/css/default.css +++ b/packages/core/src/themes/css/default.css @@ -52,6 +52,7 @@ --ion-color-dark-shade: #1e1e1e; --ion-color-dark-tint: #383838; --ion-backdrop-color: #000000; + --ion-overlay-background-color: #fafafa; --ion-background-color: #ffffff; --ion-background-color-rgb: 255,255,255; --ion-background-color-step-50: #f2f2f2; diff --git a/packages/core/src/themes/css/oceanic.css b/packages/core/src/themes/css/oceanic.css index 81008bbe7f..181edbb210 100644 --- a/packages/core/src/themes/css/oceanic.css +++ b/packages/core/src/themes/css/oceanic.css @@ -53,6 +53,7 @@ --ion-color-dark-tint: #343d46; --ion-backdrop-color: #1b2b34; --ion-background-color: #1b2b34; + --ion-overlay-background-color: #142129; --ion-background-color-rgb: 27,43,52; --ion-background-color-step-50: #26363e; --ion-background-color-step-100: #324048; diff --git a/packages/core/src/themes/ionic.theme.default.ios.scss b/packages/core/src/themes/ionic.theme.default.ios.scss index f484c3c70f..89f68972b8 100644 --- a/packages/core/src/themes/ionic.theme.default.ios.scss +++ b/packages/core/src/themes/ionic.theme.default.ios.scss @@ -91,6 +91,7 @@ $text-ios-color-step-1000: css-var(mix($background-ios-color- $backdrop-ios-color: css-var($backdrop-color, backdrop-ios-color) !default; $border-ios-color: css-var(#c1c4cd, border-ios-color) !default; $box-shadow-ios-color: css-var($box-shadow-color, box-shadow-ios-color) !default; +$overlay-ios-background-color: css-var(#f9f9f9, overlay-ios-background-color) !default; // iOS Tabs & Tab bar // -------------------------------------------------- diff --git a/packages/core/src/themes/ionic.theme.default.md.scss b/packages/core/src/themes/ionic.theme.default.md.scss index db7f04c902..8c099a1ea5 100644 --- a/packages/core/src/themes/ionic.theme.default.md.scss +++ b/packages/core/src/themes/ionic.theme.default.md.scss @@ -90,6 +90,7 @@ $text-md-color-step-1000: css-var(mix($background-md-color-value, $backdrop-md-color: css-var($backdrop-color, backdrop-md-color) !default; $border-md-color: css-var(#c1c4cd, border-md-color) !default; $box-shadow-md-color: css-var($box-shadow-color, box-shadow-md-color) !default; +$overlay-md-background-color: css-var(#fafafa, overlay-md-background-color) !default; // Material Design Tabs & Tab bar // -------------------------------------------------- diff --git a/packages/core/src/themes/ionic.theme.default.scss b/packages/core/src/themes/ionic.theme.default.scss index 3c99cd9b6c..ffabf81af9 100644 --- a/packages/core/src/themes/ionic.theme.default.scss +++ b/packages/core/src/themes/ionic.theme.default.scss @@ -185,6 +185,7 @@ $text-color-step-1000: css-var(mix($background-color-value, $te $backdrop-color: css-var(#000, backdrop-color) !default; $border-color: css-var(#b2b2b2, border-color) !default; $box-shadow-color: css-var(#000, box-shadow-color) !default; +$overlay-background-color: css-var(#fafafa, overlay-background-color) !default; // Default Tabs & Tab bar // --------------------------------------------------