diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index f76f68c598..6a520b2ee8 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -212,3 +212,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))}; +} diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index 2a2a284506..d6a51da87b 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -160,3 +160,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))}; +} diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index c6668701c5..563c9e8959 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -331,11 +331,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))}; -} diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png index fe3b2e9352..05cc450018 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png index eb2596c526..39e62a7b9c 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png index 8468e1b081..df6e2e9655 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png index 6dae9a96f1..619557d7b1 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png index 3d2dc7b669..43172465ec 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png index 8622d21a50..66e25a966c 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css index 29d4c7cbbe..6082882391 100644 --- a/core/src/themes/test/css-variables/css/dark.css +++ b/core/src/themes/test/css-variables/css/dark.css @@ -1,74 +1,84 @@ -:root { +/* + * Dark Colors + * ------------------------------------------- + */ + +body { --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; + --ion-color-primary-rgb: 66, 140, 255; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; + --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-rgb: 80, 200, 255; --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; + --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-rgb: 106, 100, 255; --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; + --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-rgb: 47, 223, 117; --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; + --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-rgb: 255, 213, 52; --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; + --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-rgb: 255, 73, 97; --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; + --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-rgb: 244, 245, 248; --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; + --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-rgb: 152, 154, 162; --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; + --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-rgb: 34, 36, 40; --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; + --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-background-color-rgb: 0, 0, 0; --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; + --ion-text-color-rgb: 255, 255, 255; --ion-color-step-50: #0d0d0d; --ion-color-step-100: #1a1a1a; @@ -90,18 +100,28 @@ --ion-color-step-900: #e6e6e6; --ion-color-step-950: #f2f2f2; - --ion-item-background: #1c1c1c; + --ion-item-background: #000000; - --ion-toolbar-background: #000; - --ion-toolbar-color: #fff; + --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-background-color-rgb: 18, 18, 18; --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; + --ion-text-color-rgb: 255, 255, 255; --ion-border-color: #222222; @@ -125,12 +145,11 @@ --ion-color-step-900: #e7e7e7; --ion-color-step-950: #f3f3f3; - --ion-item-background: #1a1b1e; -} + --ion-item-background: #1e1e1e; -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); + --ion-toolbar-background: #1f1f1f; + + --ion-tab-bar-background: #1f1f1f; + + --ion-card-background: #1e1e1e; }