From 360fce73d4f6ce1edaef3f186e7052b55e3750bc Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 13 Aug 2025 10:46:59 -0400
Subject: [PATCH] chore: grab theme changes from next
---
core/api.txt | 27 +-
core/src/components.d.ts | 18 +
core/src/components/my-chip/my-chip.base.scss | 24 +-
core/src/components/nav-link/nav-link.tsx | 3 +
core/src/css/palettes/dark.scss | 85 +++--
core/src/css/palettes/high-contrast-dark.scss | 108 +++---
core/src/css/palettes/high-contrast.scss | 103 +++---
core/src/global/ionic-global.ts | 40 +-
core/src/themes/ionic.functions.color.scss | 203 +++++++++-
core/src/themes/ionic.theme.default.scss | 348 +++++++++++++-----
packages/angular/src/directives/proxies.ts | 4 +-
.../standalone/src/directives/proxies.ts | 4 +-
12 files changed, 685 insertions(+), 282 deletions(-)
diff --git a/core/api.txt b/core/api.txt
index 2e1e7b51a4..6c74d4b4c0 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1214,11 +1214,27 @@ ion-my-chip,prop,outline,boolean,false,false,false
ion-my-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,'soft',false,false
ion-my-chip,prop,size,"large" | "small" | undefined,'small',false,false
ion-my-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-my-chip,css-prop,--background
-ion-my-chip,css-prop,--border-radius
-ion-my-chip,css-prop,--color
-ion-my-chip,css-prop,--focus-ring-color
-ion-my-chip,css-prop,--focus-ring-width
+ion-my-chip,css-prop,--ion-chip-border-width
+ion-my-chip,css-prop,--ion-chip-focus-ring-color
+ion-my-chip,css-prop,--ion-chip-focus-ring-width
+ion-my-chip,css-prop,--ion-chip-font-weight
+ion-my-chip,css-prop,--ion-chip-gap
+ion-my-chip,css-prop,--ion-chip-hue-bold-bg
+ion-my-chip,css-prop,--ion-chip-hue-bold-border-color
+ion-my-chip,css-prop,--ion-chip-hue-bold-color
+ion-my-chip,css-prop,--ion-chip-hue-subtle-bg
+ion-my-chip,css-prop,--ion-chip-hue-subtle-border-color
+ion-my-chip,css-prop,--ion-chip-hue-subtle-color
+ion-my-chip,css-prop,--ion-chip-line-height
+ion-my-chip,css-prop,--ion-chip-padding-horizontal
+ion-my-chip,css-prop,--ion-chip-padding-vertical
+ion-my-chip,css-prop,--ion-chip-shape-rectangular-border-radius
+ion-my-chip,css-prop,--ion-chip-shape-round-border-radius
+ion-my-chip,css-prop,--ion-chip-shape-soft-border-radius
+ion-my-chip,css-prop,--ion-chip-size-large-font-size
+ion-my-chip,css-prop,--ion-chip-size-large-min-height
+ion-my-chip,css-prop,--ion-chip-size-small-font-size
+ion-my-chip,css-prop,--ion-chip-size-small-min-height
ion-nav,shadow
ion-nav,prop,animated,boolean,true,false,false
@@ -1246,6 +1262,7 @@ ion-nav,event,ionNavWillChange,void,false
ion-nav-link,none
ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+ion-nav-link,prop,mode,"ios" | "md",undefined,false,false
ion-nav-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 92cf2f201b..67b7f8bdd9 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2079,10 +2079,12 @@ export namespace Components {
"color"?: Color;
/**
* If `true`, the user cannot interact with the chip.
+ * @default false
*/
"disabled": boolean;
/**
* Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors. Only applies to the `ionic` theme.
+ * @default 'subtle'
*/
"hue"?: 'bold' | 'subtle';
/**
@@ -2091,14 +2093,17 @@ export namespace Components {
"mode"?: "ios" | "md";
/**
* Display an outline style button.
+ * @default false
*/
"outline": boolean;
/**
* Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+ * @default 'soft'
*/
"shape"?: 'soft' | 'round' | 'rectangular';
/**
* Set to `"small"` for a chip with less height and padding. Defaults to `"large"` for the ionic theme, and undefined for all other themes.
+ * @default 'small'
*/
"size"?: 'small' | 'large';
/**
@@ -2242,6 +2247,10 @@ export namespace Components {
* Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
*/
"componentProps"?: ComponentProps;
+ /**
+ * The mode determines the platform behaviors of the component.
+ */
+ "mode"?: "ios" | "md";
/**
* The transition animation when navigating to another page.
*/
@@ -7423,10 +7432,12 @@ declare namespace LocalJSX {
"color"?: Color;
/**
* If `true`, the user cannot interact with the chip.
+ * @default false
*/
"disabled"?: boolean;
/**
* Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors. Only applies to the `ionic` theme.
+ * @default 'subtle'
*/
"hue"?: 'bold' | 'subtle';
/**
@@ -7435,14 +7446,17 @@ declare namespace LocalJSX {
"mode"?: "ios" | "md";
/**
* Display an outline style button.
+ * @default false
*/
"outline"?: boolean;
/**
* Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+ * @default 'soft'
*/
"shape"?: 'soft' | 'round' | 'rectangular';
/**
* Set to `"small"` for a chip with less height and padding. Defaults to `"large"` for the ionic theme, and undefined for all other themes.
+ * @default 'small'
*/
"size"?: 'small' | 'large';
/**
@@ -7495,6 +7509,10 @@ declare namespace LocalJSX {
* Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
*/
"componentProps"?: ComponentProps;
+ /**
+ * The mode determines the platform behaviors of the component.
+ */
+ "mode"?: "ios" | "md";
/**
* The transition animation when navigating to another page.
*/
diff --git a/core/src/components/my-chip/my-chip.base.scss b/core/src/components/my-chip/my-chip.base.scss
index 10c25d8d7c..8ab89e37f8 100644
--- a/core/src/components/my-chip/my-chip.base.scss
+++ b/core/src/components/my-chip/my-chip.base.scss
@@ -1,5 +1,5 @@
-@use "../../themes/functions.color" as color;
-@use "../../themes/mixins" as mixins;
+@import "../../themes/ionic.functions.color";
+@import "../../themes/ionic.mixins";
:host {
/**
@@ -52,10 +52,10 @@
--ion-chip-hue-bold-bg: var(--ion-color-gray-700);
--ion-chip-hue-bold-color: var(--ion-color-white);
--ion-chip-hue-bold-border-color: var(--ion-color-gray-800);
-
- @include mixins.font-smoothing();
- @include mixins.padding(var(--ion-chip-padding-horizontal), var(--ion-chip-padding-vertical));
- @include mixins.border-radius(var(--ion-chip-border-radius));
+
+ @include font-smoothing();
+ @include padding(var(--ion-chip-padding-horizontal), var(--ion-chip-padding-vertical));
+ @include border-radius(var(--ion-chip-border-radius));
display: inline-flex;
@@ -153,18 +153,18 @@
// Subtle
:host(.chip-subtle.ion-color) {
- background: color.current-color(
+ background: current-color(
base,
$subtle: true
); // these don't work because we need to update the function to use the new color system
- color: color.current-color(
+ color: current-color(
contrast,
$subtle: true
); // these don't work because we need to update the function to use the new color system
}
:host(.chip-subtle.chip-outline.ion-color) {
- border-color: color.current-color(
+ border-color: current-color(
shade,
$subtle: true
); // these don't work because we need to update the function to use the new color system
@@ -172,16 +172,16 @@
// Bold
:host(.chip-bold.ion-color) {
- background: color.current-color(
+ background: current-color(
base
); // these don't work because we need to update the function to use the new color system
- color: color.current-color(
+ color: current-color(
contrast
); // these don't work because we need to update the function to use the new color system
}
:host(.chip-bold.chip-outline.ion-color) {
- border-color: color.current-color(
+ border-color: current-color(
shade
); // these don't work because we need to update the function to use the new color system
}
diff --git a/core/src/components/nav-link/nav-link.tsx b/core/src/components/nav-link/nav-link.tsx
index db5ba4a5b2..b3419afafb 100644
--- a/core/src/components/nav-link/nav-link.tsx
+++ b/core/src/components/nav-link/nav-link.tsx
@@ -7,6 +7,9 @@ import type { RouterDirection } from '../router/utils/interface';
import { navLink } from './nav-link-utils';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ */
@Component({
tag: 'ion-nav-link',
})
diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss
index 0c5ef08dd9..eb4df62af6 100644
--- a/core/src/css/palettes/dark.scss
+++ b/core/src/css/palettes/dark.scss
@@ -11,61 +11,70 @@ $light: #222428;
$medium: #989aa2;
$dark: #f4f5f8;
-$colors: (
+$colors: (
primary: (
- base: $primary,
- contrast: #000,
- shade: get-color-shade($primary),
- tint: get-color-tint($primary)
+ base: $primary,
+ contrast: #000,
+ shade: get-color-shade($primary),
+ tint: get-color-tint($primary),
+ foreground: $primary,
),
secondary: (
- base: $secondary,
- contrast: #000,
- shade: get-color-shade($secondary),
- tint: get-color-tint($secondary)
+ base: $secondary,
+ contrast: #000,
+ shade: get-color-shade($secondary),
+ tint: get-color-tint($secondary),
+ foreground: $secondary,
),
tertiary: (
- base: $tertiary,
- contrast: #000,
- shade: get-color-shade($tertiary),
- tint: get-color-tint($tertiary)
+ base: $tertiary,
+ contrast: #000,
+ shade: get-color-shade($tertiary),
+ tint: get-color-tint($tertiary),
+ foreground: $tertiary,
),
success: (
- base: $success,
- contrast: #000,
- shade: get-color-shade($success),
- tint: get-color-tint($success)
+ base: $success,
+ contrast: #000,
+ shade: get-color-shade($success),
+ tint: get-color-tint($success),
+ foreground: $success,
),
warning: (
- base: $warning,
- contrast: #000,
- shade: get-color-shade($warning),
- tint: get-color-tint($warning)
+ base: $warning,
+ contrast: #000,
+ shade: get-color-shade($warning),
+ tint: get-color-tint($warning),
+ foreground: $warning,
),
danger: (
- base: $danger,
- contrast: #000,
- shade: get-color-shade($danger),
- tint: get-color-tint($danger)
+ base: $danger,
+ contrast: #000,
+ shade: get-color-shade($danger),
+ tint: get-color-tint($danger),
+ foreground: $danger,
),
light: (
- base: $light,
- contrast: #fff,
- shade: get-color-shade($light),
- tint: get-color-tint($light)
+ base: $light,
+ contrast: #fff,
+ shade: get-color-shade($light),
+ tint: get-color-tint($light),
+ foreground: $light,
),
medium: (
- base: $medium,
- contrast: #000,
- shade: get-color-shade($medium),
- tint: get-color-tint($medium)
+ base: $medium,
+ contrast: #000,
+ shade: get-color-shade($medium),
+ tint: get-color-tint($medium),
+ foreground: $medium,
),
dark: (
- base: $dark,
- contrast: #000,
- shade: get-color-shade($dark),
- tint: get-color-tint($dark)
- )
+ base: $dark,
+ contrast: #000,
+ shade: get-color-shade($dark),
+ tint: get-color-tint($dark),
+ foreground: $dark,
+ ),
);
@mixin dark-base-palette() {
diff --git a/core/src/css/palettes/high-contrast-dark.scss b/core/src/css/palettes/high-contrast-dark.scss
index e0f3b8aeb5..63ac0d87fb 100644
--- a/core/src/css/palettes/high-contrast-dark.scss
+++ b/core/src/css/palettes/high-contrast-dark.scss
@@ -1,71 +1,80 @@
@use "sass:map";
@import "../../themes/ionic.functions.color";
-$primary: #7cabff;
-$secondary: #62bdff;
-$tertiary: #b6b9f9;
-$success: #4ada71;
-$warning: #ffce31;
-$danger: #fc9aa2;
-$light: #222428;
-$medium: #a8aab3;
-$dark: #f4f5f8;
+$primary: #7cabff;
+$secondary: #62bdff;
+$tertiary: #b6b9f9;
+$success: #4ada71;
+$warning: #ffce31;
+$danger: #fc9aa2;
+$light: #222428;
+$medium: #a8aab3;
+$dark: #f4f5f8;
-$colors: (
+$colors: (
primary: (
- base: $primary,
- contrast: #000,
- shade: get-color-shade($primary),
- tint: get-color-tint($primary)
+ base: $primary,
+ contrast: #000,
+ shade: get-color-shade($primary),
+ tint: get-color-tint($primary),
+ foreground: $primary,
),
secondary: (
- base: $secondary,
- contrast: #000,
- shade: get-color-shade($secondary),
- tint: get-color-tint($secondary)
+ base: $secondary,
+ contrast: #000,
+ shade: get-color-shade($secondary),
+ tint: get-color-tint($secondary),
+ foreground: $secondary,
),
tertiary: (
- base: $tertiary,
- contrast: #000,
- shade: get-color-shade($tertiary),
- tint: get-color-tint($tertiary)
+ base: $tertiary,
+ contrast: #000,
+ shade: get-color-shade($tertiary),
+ tint: get-color-tint($tertiary),
+ foreground: $tertiary,
),
success: (
- base: $success,
- contrast: #000,
- shade: get-color-shade($success),
- tint: get-color-tint($success)
+ base: $success,
+ contrast: #000,
+ shade: get-color-shade($success),
+ tint: get-color-tint($success),
+ foreground: $success,
),
warning: (
- base: $warning,
- contrast: #000,
- shade: get-color-shade($warning),
- tint: get-color-tint($warning)
+ base: $warning,
+ contrast: #000,
+ shade: get-color-shade($warning),
+ tint: get-color-tint($warning),
+ foreground: $warning,
),
danger: (
- base: $danger,
- contrast: #000,
- shade: get-color-shade($danger),
- tint: get-color-tint($danger)
+ base: $danger,
+ contrast: #000,
+ shade: get-color-shade($danger),
+ tint: get-color-tint($danger),
+ foreground: $danger,
),
light: (
- base: $light,
- contrast: #fff,
- shade: get-color-shade($light),
- tint: get-color-tint($light)
+ base: $light,
+ contrast: #fff,
+ shade: get-color-shade($light),
+ tint: get-color-tint($light),
+ foreground: $light,
),
medium: (
- base: $medium,
- contrast: #000,
- shade: get-color-shade($medium),
- tint: get-color-tint($medium)
+ base: $medium,
+ contrast: #000,
+ shade: get-color-shade($medium),
+ tint: get-color-tint($medium),
+ foreground: $medium,
),
dark: (
- base: $dark,
- contrast: #000,
- shade: get-color-shade($dark),
- tint: get-color-tint($dark)
- )
+ base: $dark,
+ contrast: #000,
+ shade: get-color-shade($dark),
+ tint: get-color-tint($dark),
+ foreground: $dark,
+ ),
);
/// Text step colors are generated based on
@@ -105,13 +114,12 @@ $lightest-text-color: $text-color;
--ion-color-#{$color-name}-shade: #{map.get($value, shade)};
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
}
-
}
}
@mixin high-contrast-dark-ios-palette() {
$background-color: #000000;
-
+
& {
--ion-background-color: #{$background-color};
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
@@ -175,7 +183,7 @@ $lightest-text-color: $text-color;
@mixin high-contrast-dark-md-palette() {
$background-color: #121212;
-
+
& {
--ion-background-color: #{$background-color};
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
diff --git a/core/src/css/palettes/high-contrast.scss b/core/src/css/palettes/high-contrast.scss
index c7387aa649..348c84f49e 100644
--- a/core/src/css/palettes/high-contrast.scss
+++ b/core/src/css/palettes/high-contrast.scss
@@ -1,71 +1,80 @@
@use "sass:map";
@import "../../themes/ionic.functions.color";
-$primary: #003fae;
-$secondary: #01487b;
-$tertiary: #3400e6;
-$success: #004314;
-$warning: #5f4100;
-$danger: #9c000c;
-$light: #f4f5f8;
-$medium: #444446;
-$dark: #222428;
+$primary: #003fae;
+$secondary: #01487b;
+$tertiary: #3400e6;
+$success: #004314;
+$warning: #5f4100;
+$danger: #9c000c;
+$light: #f4f5f8;
+$medium: #444446;
+$dark: #222428;
-$colors: (
+$colors: (
primary: (
- base: $primary,
- contrast: #fff,
- shade: get-color-shade($primary),
- tint: get-color-tint($primary)
+ base: $primary,
+ contrast: #fff,
+ shade: get-color-shade($primary),
+ tint: get-color-tint($primary),
+ foreground: $primary,
),
secondary: (
- base: $secondary,
- contrast: #fff,
- shade: get-color-shade($secondary),
- tint: get-color-tint($secondary)
+ base: $secondary,
+ contrast: #fff,
+ shade: get-color-shade($secondary),
+ tint: get-color-tint($secondary),
+ foreground: $secondary,
),
tertiary: (
- base: $tertiary,
- contrast: #fff,
- shade: get-color-shade($tertiary),
- tint: get-color-tint($tertiary)
+ base: $tertiary,
+ contrast: #fff,
+ shade: get-color-shade($tertiary),
+ tint: get-color-tint($tertiary),
+ foreground: $tertiary,
),
success: (
- base: $success,
- contrast: #fff,
- shade: get-color-shade($success),
- tint: get-color-tint($success)
+ base: $success,
+ contrast: #fff,
+ shade: get-color-shade($success),
+ tint: get-color-tint($success),
+ foreground: $success,
),
warning: (
- base: $warning,
- contrast: #fff,
- shade: get-color-shade($warning),
- tint: get-color-tint($warning)
+ base: $warning,
+ contrast: #fff,
+ shade: get-color-shade($warning),
+ tint: get-color-tint($warning),
+ foreground: $warning,
),
danger: (
- base: $danger,
- contrast: #fff,
- shade: get-color-shade($danger),
- tint: get-color-tint($danger)
+ base: $danger,
+ contrast: #fff,
+ shade: get-color-shade($danger),
+ tint: get-color-tint($danger),
+ foreground: $danger,
),
light: (
- base: $light,
- contrast: #000,
- shade: get-color-shade($light),
- tint: get-color-tint($light)
+ base: $light,
+ contrast: #000,
+ shade: get-color-shade($light),
+ tint: get-color-tint($light),
+ foreground: $light,
),
medium: (
- base: $medium,
- contrast: #fff,
- shade: get-color-shade($medium),
- tint: get-color-tint($medium)
+ base: $medium,
+ contrast: #fff,
+ shade: get-color-shade($medium),
+ tint: get-color-tint($medium),
+ foreground: $medium,
),
dark: (
- base: $dark,
- contrast: #fff,
- shade: get-color-shade($dark),
- tint: get-color-tint($dark)
- )
+ base: $dark,
+ contrast: #fff,
+ shade: get-color-shade($dark),
+ tint: get-color-tint($dark),
+ foreground: $dark,
+ ),
);
/// Text step colors are generated based on
diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts
index 0ffd70d8e5..2438baf8cb 100644
--- a/core/src/global/ionic-global.ts
+++ b/core/src/global/ionic-global.ts
@@ -1,11 +1,10 @@
import { getMode, setMode } from '@stencil/core';
-import { printIonWarning } from '@utils/logging';
-import type { IonicConfig, Mode, Theme } from '../interface';
+import type { IonicConfig, Mode } from '../interface';
import { defaultTheme as baseTheme } from '../themes/base/base.tokens';
import type { Theme as BaseTheme } from '../themes/base/base.tokens';
import { deepMerge, generateCSSVars } from '../themes/base/generate-css-vars';
-import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
+import { printIonWarning } from '../utils/logging';
import { isPlatform, setupPlatforms } from '../utils/platform';
import { config, configFromSession, configFromURL, saveConfig } from './config';
@@ -14,6 +13,15 @@ import { config, configFromSession, configFromURL, saveConfig } from './config';
let defaultMode: Mode;
+type Theme = 'ios' | 'md' | 'ionic';
+
+const getElement = (ref: any): HTMLElement => {
+ if (ref && typeof ref === 'object' && ref.tagName) {
+ return ref;
+ }
+ return document.documentElement;
+};
+
/**
* Prints a warning message to the developer to inform them of
* an invalid configuration of mode and theme.
@@ -85,11 +93,11 @@ const getDefaultThemeForMode = (mode: Mode): Theme => {
return 'md';
};
-const isModeSupported = (elmMode: string) => ['ios', 'md'].includes(elmMode);
+// const isModeSupported = (elmMode: string) => ['ios', 'md'].includes(elmMode);
-const isThemeSupported = (theme: string) => ['ios', 'md', 'ionic'].includes(theme);
+// const isThemeSupported = (theme: string) => ['ios', 'md', 'ionic'].includes(theme);
-const isIonicElement = (elm: HTMLElement) => elm.tagName?.startsWith('ION-');
+// const isIonicElement = (elm: HTMLElement) => elm.tagName?.startsWith('ION-');
/**
* Returns the mode value of the element reference or the closest
@@ -135,10 +143,6 @@ export const getIonTheme = (ref?: any): Theme => {
return theme;
}
- /**
- * If the theme cannot be detected, then fallback to using
- * the `mode` attribute to determine the style sheets to use.
- */
const el = getElement(ref);
const mode = ref?.mode ?? (el.closest('[mode]')?.getAttribute('mode') as Mode);
@@ -146,11 +150,8 @@ export const getIonTheme = (ref?: any): Theme => {
return getDefaultThemeForMode(mode);
}
- /**
- * If a mode is not detected, then fallback to using the
- * default theme.
- */
- return defaultTheme;
+ // Return a default theme string, not the baseTheme object
+ return 'md'; // or 'ionic' as your default
};
export const getIonCustomTheme = (): any => {
@@ -158,7 +159,7 @@ export const getIonCustomTheme = (): any => {
if (customTheme) {
return customTheme;
}
- return defaultTheme;
+ return baseTheme;
};
export const rIC = (callback: () => void) => {
@@ -230,9 +231,10 @@ export const initialize = (userConfig: IonicConfig = {}) => {
doc.documentElement.setAttribute('mode', defaultMode);
doc.documentElement.classList.add(defaultMode);
- config.set('theme', defaultTheme);
- doc.documentElement.setAttribute('theme', defaultTheme);
- doc.documentElement.classList.add(defaultTheme);
+ // Remove this line as 'theme' is not a valid IonicConfig key
+ // config.set('theme', defaultTheme);
+ // doc.documentElement.setAttribute('theme', defaultTheme);
+ // doc.documentElement.classList.add(defaultTheme);
const customTheme: BaseTheme | undefined = configObj.customTheme;
diff --git a/core/src/themes/ionic.functions.color.scss b/core/src/themes/ionic.functions.color.scss
index 1d78bbe131..06a01c13c0 100644
--- a/core/src/themes/ionic.functions.color.scss
+++ b/core/src/themes/ionic.functions.color.scss
@@ -1,14 +1,18 @@
+@use "sass:map";
+
// 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) {
+@function current-color($variation, $alpha: null, $subtle: false) {
+ $variable: if($subtle, "--ion-color-subtle-#{$variation}", "--ion-color-#{$variation}");
+
@if $alpha == null {
- @return var(--ion-color-#{$variation});
+ @return var(#{$variable});
} @else {
- @return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
+ @return rgba(var(#{$variable}-rgb), #{$alpha});
}
}
@@ -19,19 +23,36 @@
// 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};
+@function ion-color($name, $variation, $alpha: null, $rgb: null, $subtle: false) {
+ $values: map.get($colors, $name);
+ $values: map.get($values, if($subtle, subtle, bold));
+ $value: map.get($values, $variation);
+
+ // TODO(FW-6417): this can be removed when foreground is required
+ // Fallback to "base" variant when "foreground" variant is undefined
+ @if ($variation == foreground and $value == null) {
+ $variation: base;
+ $value: map.get($values, $variation);
+ }
+
+ // If the color requested is subtle we return `--ion-color-{color}-subtle-contrast`,
+ // otherwise we return `--ion-color-{color}-contrast`.
+ $variable: if($subtle, "--ion-color-#{$name}-subtle-#{$variation}", "--ion-color-#{$name}-#{$variation}");
+
+ // If the variation being used is "base", we do not include the variant.
+ // If the color requested is subtle we return `--ion-color-{color}-subtle`,
+ // otherwise we return `--ion-color-{color}`.
@if ($variation == base) {
- $variable: --ion-color-#{$name};
+ $variable: if($subtle, "--ion-color-#{$name}-subtle", "--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;
@@ -43,17 +64,181 @@
// Mixes a color with black to create its shade.
// --------------------------------------------------------------------------------------------
@function get-color-shade($color) {
+ @if (type-of($color) != color) {
+ @return $color;
+ }
@return mix(#000, $color, 12%);
}
// Mixes a color with white to create its tint.
// --------------------------------------------------------------------------------------------
@function get-color-tint($color) {
+ @if (type-of($color) != color) {
+ @return $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)};
+ @if (type-of($color) != color) {
+ @return $color;
+ }
+ @return #{red($color)}, #{green($color)}, #{blue($color)};
+}
+
+// Generates color variants for the specified color based on the
+// colors map for whichever hue is passed (bold, subtle).
+// --------------------------------------------------------------------------------------------
+// Example usage (bold):
+// .ion-color-primary {
+// @include generate-color-variants("primary");
+// }
+//
+// Example output (bold):
+// .ion-color-primary {
+// --ion-color-base: var(--ion-color-primary-base, #105cef) !important;
+// --ion-color-base-rgb: var(--ion-color-primary-base-rgb, 16, 92, 239) !important;
+// --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
+// --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
+// --ion-color-shade: var(--ion-color-primary-shade, #0f54da) !important;
+// --ion-color-tint: var(--ion-color-primary-tint, #94a5f4) !important;
+// }
+// --------------------------------------------------------------------------------------------
+// Example usage (subtle):
+// .ion-color-primary {
+// @include generate-color-variants("primary", "subtle")
+// }
+//
+// Example output (subtle):
+// .ion-color-primary {
+// --ion-color-subtle-base: var(--ion-color-primary-subtle-base, #f2f4fd) !important;
+// --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-base-rgb, 242, 244, 253) !important;
+// --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast, #105cef) !important;
+// --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb, 16, 92, 239) !important;
+// --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade, #d0d7fa) !important;
+// --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint, #e9ecfc) !important;
+// }
+// --------------------------------------------------------------------------------------------
+@mixin generate-color-variants($color-name, $hue: "bold") {
+ @if not($colors) {
+ @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
+ }
+
+ // Grab the different hue color maps for the
+ // specified color and then grab the map of color variants
+ $hue-colors: map.get($colors, $color-name);
+ $color-variants: map.get($hue-colors, $hue);
+
+ $prefix: if($hue == "subtle", "-subtle", "");
+
+ // TODO(FW-6417) this @if can be removed if we add subtle colors for ios and md
+ // Only proceed if the color variants exist
+ @if $color-variants {
+ // Grab the individual color variants
+ $base: map.get($color-variants, base);
+ $base-rgb: map.get($color-variants, base-rgb);
+ $contrast: map.get($color-variants, contrast);
+ $contrast-rgb: map.get($color-variants, contrast-rgb);
+ $shade: map.get($color-variants, shade);
+ $tint: map.get($color-variants, tint);
+ $foreground: map.get($color-variants, foreground);
+
+ // Generate CSS variables dynamically
+ --ion-color#{$prefix}-base: var(--ion-color-#{$color-name}#{$prefix}, #{$base}) !important;
+ --ion-color#{$prefix}-base-rgb: var(--ion-color-#{$color-name}#{$prefix}-rgb, #{$base-rgb}) !important;
+ --ion-color#{$prefix}-contrast: var(--ion-color-#{$color-name}#{$prefix}-contrast, #{$contrast}) !important;
+ --ion-color#{$prefix}-contrast-rgb: var(
+ --ion-color-#{$color-name}#{$prefix}-contrast-rgb,
+ #{$contrast-rgb}
+ ) !important;
+ --ion-color#{$prefix}-shade: var(--ion-color-#{$color-name}#{$prefix}-shade, #{$shade}) !important;
+ --ion-color#{$prefix}-tint: var(--ion-color-#{$color-name}#{$prefix}-tint, #{$tint}) !important;
+ // TODO(FW-6417): remove the fallback variable when the foreground variable is
+ // required by all palettes for all themes:
+ // --ion-color#{$prefix}-foreground: var(--ion-color-#{$color-name}#{$prefix}-foreground, #{$foreground}) !important;
+ --ion-color#{$prefix}-foreground: var(
+ --ion-color-#{$color-name}#{$prefix}-foreground,
+ var(--ion-color-#{$color-name}#{$prefix}, #{$foreground})
+ ) !important;
+ }
+}
+
+// Generates both bold and subtle color variables
+// for the specified color in the colors map.
+// --------------------------------------------------------------------------------------------
+@mixin generate-color($color-name) {
+ @include generate-color-variants($color-name);
+ @include generate-color-variants($color-name, "subtle");
+}
+
+// Generates color variables for all colors in the colors map for both hues (bold, subtle).
+// --------------------------------------------------------------------------------------------
+// Example usage:
+// :root {
+// generate-color-variables()
+// }
+//
+// Example output:
+// :root {
+// --ion-color-primary: #105cef;
+// --ion-color-primary-rgb: 16, 92, 239;
+// --ion-color-primary-contrast: #ffffff;
+// --ion-color-primary-contrast-rgb: 255, 255, 255;
+// --ion-color-primary-shade: #0f54da;
+// --ion-color-primary-tint: #94a5f4;
+// --ion-color-primary-foreground: #105cef;
+// --ion-color-primary-subtle: #f2f4fd;
+// --ion-color-primary-subtle-rgb: 242, 244, 253;
+// --ion-color-primary-subtle-contrast: #105cef;
+// --ion-color-primary-subtle-contrast-rgb: 16, 92, 239;
+// --ion-color-primary-subtle-shade: #d0d7fa;
+// --ion-color-primary-subtle-tint: #e9ecfc;
+// --ion-color-primary-foreground: #105cef;
+// ...
+// --ion-color-dark: #292929;
+// --ion-color-dark-rgb: 41, 41, 41;
+// --ion-color-dark-contrast: #ffffff;
+// --ion-color-dark-contrast-rgb: 255, 255, 255;
+// --ion-color-dark-shade: #242424;
+// --ion-color-dark-tint: #4e4e4e;
+// --ion-color-dark-foreground: #242424;
+// --ion-color-dark-subtle: #f5f5f5;
+// --ion-color-dark-subtle-rgb: 245, 245, 245;
+// --ion-color-dark-subtle-contrast: #292929;
+// --ion-color-dark-subtle-contrast-rgb: 41, 41, 41;
+// --ion-color-dark-subtle-shade: #e0e0e0;
+// --ion-color-dark-subtle-tint: #efefef;
+// --ion-color-dark-subtle-foreground: #242424;
+// }
+// --------------------------------------------------------------------------------------------
+@mixin generate-color-variables() {
+ @if not($colors) {
+ @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color().';
+ }
+
+ @each $color-name, $value in $colors {
+ @each $hue in (bold, subtle) {
+ $colors: map.get($value, $hue);
+
+ @if $colors != null {
+ $prefix: if($hue == subtle, "-subtle", "");
+
+ --ion-color-#{$color-name}#{$prefix}: #{map.get($colors, base)};
+ --ion-color-#{$color-name}#{$prefix}-rgb: #{map.get($colors, base-rgb)};
+ --ion-color-#{$color-name}#{$prefix}-contrast: #{map.get($colors, contrast)};
+ --ion-color-#{$color-name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
+ --ion-color-#{$color-name}#{$prefix}-shade: #{map.get($colors, shade)};
+ --ion-color-#{$color-name}#{$prefix}-tint: #{map.get($colors, tint)};
+ // TODO(FW-6417): this "if" can be removed when foreground is defined for ios/md
+ // themes. It should not be added until we want foreground to be required for
+ // ios and md because this will be a breaking change, requiring users to add
+ // `--ion-color-{color}-foreground` in order to override the default colors
+ @if (map.get($colors, foreground)) {
+ --ion-color-#{$color-name}#{$prefix}-foreground: #{map.get($colors, foreground)};
+ }
+ }
+ }
+ }
}
diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss
index 6ed8d34cd1..22edeb872f 100644
--- a/core/src/themes/ionic.theme.default.scss
+++ b/core/src/themes/ionic.theme.default.scss
@@ -7,92 +7,130 @@
// 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)
+// - base: The main color used for backgrounds
+// - base-rgb: The base color in RGB format
+// - contrast: A color that ensures readable text on the base color
+// - contrast-rgb: The contrast color in RGB format
+// - shade: 12% darker version of the base color (mix with black), used for pressed/active states
+// - tint: 10% lighter version of the base color (mix with white), used for focused/hover states
-$primary: #0054e9;
-$secondary: #0163aa;
-$tertiary: #6030ff;
-$success: #2dd55b;
-$warning: #ffc409;
-$danger: #c5000f;
-$light: #f4f5f8;
-$medium: #636469;
-$dark: #222428;
+$primary: #0054e9;
+$secondary: #0163aa;
+$tertiary: #6030ff;
+$success: #2dd55b;
+$warning: #ffc409;
+$danger: #c5000f;
+$light: #f4f5f8;
+$medium: #636469;
+$dark: #222428;
-$colors: (
+$colors: (
primary: (
- base: $primary,
- contrast: #fff,
- shade: get-color-shade($primary),
- tint: get-color-tint($primary)
+ bold: (
+ base: $primary,
+ base-rgb: color-to-rgb-list($primary),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#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)
+ bold: (
+ base: $secondary,
+ base-rgb: color-to-rgb-list($secondary),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#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)
+ bold: (
+ base: $tertiary,
+ base-rgb: color-to-rgb-list($tertiary),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#fff),
+ shade: get-color-shade($tertiary),
+ tint: get-color-tint($tertiary),
+ ),
),
success: (
- base: $success,
- contrast: #000,
- shade: get-color-shade($success),
- tint: get-color-tint($success)
+ bold: (
+ base: $success,
+ base-rgb: color-to-rgb-list($success),
+ contrast: #000,
+ contrast-rgb: color-to-rgb-list(#000),
+ 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)
+ bold: (
+ base: $warning,
+ base-rgb: color-to-rgb-list($warning),
+ contrast: #000,
+ contrast-rgb: color-to-rgb-list(#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)
+ bold: (
+ base: $danger,
+ base-rgb: color-to-rgb-list($danger),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#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)
+ bold: (
+ base: $light,
+ base-rgb: color-to-rgb-list($light),
+ contrast: #000,
+ contrast-rgb: color-to-rgb-list(#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)
+ bold: (
+ base: $medium,
+ base-rgb: color-to-rgb-list($medium),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#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)
- )
+ bold: (
+ base: $dark,
+ base-rgb: color-to-rgb-list($dark),
+ contrast: #fff,
+ contrast-rgb: color-to-rgb-list(#fff),
+ shade: get-color-shade($dark),
+ tint: get-color-tint($dark),
+ ),
+ ),
);
// Default Foreground and Background Colors
// -------------------------------------------------------------------------------------------
// Used internally to calculate the default steps
-$background-color-value: #fff;
-$background-color-rgb-value: 255, 255, 255;
+$background-color-value: #fff;
+$background-color-rgb-value: 255, 255, 255;
-$text-color-value: #000;
-$text-color-rgb-value: 0, 0, 0;
+$text-color-value: #000;
+$text-color-rgb-value: 0, 0, 0;
-$background-color: var(--ion-background-color, $background-color-value);
-$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value);
-$text-color: var(--ion-text-color, $text-color-value);
-$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
+$background-color: var(--ion-background-color, $background-color-value);
+$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value);
+$text-color: var(--ion-text-color, $text-color-value);
+$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
// Default Foreground and Background Step Colors
// -------------------------------------------------------------------------------------------
@@ -101,45 +139,159 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-va
// 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, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)));
-$background-color-step-100: var(--ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)));
-$background-color-step-150: var(--ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)));
-$background-color-step-200: var(--ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)));
-$background-color-step-250: var(--ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)));
-$background-color-step-300: var(--ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)));
-$background-color-step-350: var(--ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)));
-$background-color-step-400: var(--ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)));
-$background-color-step-450: var(--ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)));
-$background-color-step-500: var(--ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)));
-$background-color-step-550: var(--ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)));
-$background-color-step-600: var(--ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)));
-$background-color-step-650: var(--ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)));
-$background-color-step-700: var(--ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)));
-$background-color-step-750: var(--ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)));
-$background-color-step-800: var(--ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)));
-$background-color-step-850: var(--ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)));
-$background-color-step-900: var(--ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)));
-$background-color-step-950: var(--ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)));
-$text-color-step-50: var(--ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)));
-$text-color-step-100: var(--ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)));
-$text-color-step-150: var(--ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)));
-$text-color-step-200: var(--ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)));
-$text-color-step-250: var(--ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)));
-$text-color-step-300: var(--ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)));
-$text-color-step-350: var(--ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)));
-$text-color-step-400: var(--ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)));
-$text-color-step-450: var(--ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)));
-$text-color-step-500: var(--ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)));
-$text-color-step-550: var(--ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)));
-$text-color-step-600: var(--ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)));
-$text-color-step-650: var(--ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)));
-$text-color-step-700: var(--ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)));
-$text-color-step-750: var(--ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)));
-$text-color-step-800: var(--ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)));
-$text-color-step-850: var(--ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)));
-$text-color-step-900: var(--ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)));
-$text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)));
+$background-color-step-50: var(
+ --ion-color-step-50,
+ var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))
+);
+$background-color-step-100: var(
+ --ion-color-step-100,
+ var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))
+);
+$background-color-step-150: var(
+ --ion-color-step-150,
+ var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))
+);
+$background-color-step-200: var(
+ --ion-color-step-200,
+ var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))
+);
+$background-color-step-250: var(
+ --ion-color-step-250,
+ var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))
+);
+$background-color-step-300: var(
+ --ion-color-step-300,
+ var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))
+);
+$background-color-step-350: var(
+ --ion-color-step-350,
+ var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))
+);
+$background-color-step-400: var(
+ --ion-color-step-400,
+ var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))
+);
+$background-color-step-450: var(
+ --ion-color-step-450,
+ var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))
+);
+$background-color-step-500: var(
+ --ion-color-step-500,
+ var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))
+);
+$background-color-step-550: var(
+ --ion-color-step-550,
+ var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))
+);
+$background-color-step-600: var(
+ --ion-color-step-600,
+ var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))
+);
+$background-color-step-650: var(
+ --ion-color-step-650,
+ var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))
+);
+$background-color-step-700: var(
+ --ion-color-step-700,
+ var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))
+);
+$background-color-step-750: var(
+ --ion-color-step-750,
+ var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))
+);
+$background-color-step-800: var(
+ --ion-color-step-800,
+ var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))
+);
+$background-color-step-850: var(
+ --ion-color-step-850,
+ var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))
+);
+$background-color-step-900: var(
+ --ion-color-step-900,
+ var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))
+);
+$background-color-step-950: var(
+ --ion-color-step-950,
+ var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))
+);
+$text-color-step-50: var(
+ --ion-color-step-950,
+ var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))
+);
+$text-color-step-100: var(
+ --ion-color-step-900,
+ var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))
+);
+$text-color-step-150: var(
+ --ion-color-step-850,
+ var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))
+);
+$text-color-step-200: var(
+ --ion-color-step-800,
+ var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))
+);
+$text-color-step-250: var(
+ --ion-color-step-750,
+ var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))
+);
+$text-color-step-300: var(
+ --ion-color-step-700,
+ var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))
+);
+$text-color-step-350: var(
+ --ion-color-step-650,
+ var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))
+);
+$text-color-step-400: var(
+ --ion-color-step-600,
+ var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))
+);
+$text-color-step-450: var(
+ --ion-color-step-550,
+ var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))
+);
+$text-color-step-500: var(
+ --ion-color-step-500,
+ var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))
+);
+$text-color-step-550: var(
+ --ion-color-step-450,
+ var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))
+);
+$text-color-step-600: var(
+ --ion-color-step-400,
+ var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))
+);
+$text-color-step-650: var(
+ --ion-color-step-350,
+ var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))
+);
+$text-color-step-700: var(
+ --ion-color-step-300,
+ var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))
+);
+$text-color-step-750: var(
+ --ion-color-step-250,
+ var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))
+);
+$text-color-step-800: var(
+ --ion-color-step-200,
+ var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))
+);
+$text-color-step-850: var(
+ --ion-color-step-150,
+ var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))
+);
+$text-color-step-900: var(
+ --ion-color-step-100,
+ var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))
+);
+$text-color-step-950: var(
+ --ion-color-step-50,
+ var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))
+);
// Default General Colors
// --------------------------------------------------
-$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600);
+$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600);
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index fbb819bc9f..61be1b88cb 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1486,14 +1486,14 @@ export declare interface IonMyChip extends Components.IonMyChip {}
@ProxyCmp({
- inputs: ['component', 'componentProps', 'mode', 'routerAnimation', 'routerDirection', 'theme']
+ inputs: ['component', 'componentProps', 'mode', 'routerAnimation', 'routerDirection']
})
@Component({
selector: 'ion-nav-link',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'],
+ inputs: ['component', 'componentProps', 'mode', 'routerAnimation', 'routerDirection'],
})
export class IonNavLink {
protected el: HTMLIonNavLinkElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 42a0b95bb2..93316bdca1 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1419,14 +1419,14 @@ export declare interface IonMyChip extends Components.IonMyChip {}
@ProxyCmp({
defineCustomElementFn: defineIonNavLink,
- inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection']
+ inputs: ['component', 'componentProps', 'mode', 'routerAnimation', 'routerDirection']
})
@Component({
selector: 'ion-nav-link',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'],
+ inputs: ['component', 'componentProps', 'mode', 'routerAnimation', 'routerDirection'],
standalone: true
})
export class IonNavLink {