javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: grab theme changes from next

Browse Source
This commit is contained in:
Brandy Smith
2025-08-13 10:46:59 -04:00
parent 8c21980a70
commit 360fce73d4
12 changed files with 685 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
core/api.txt
View File

@@ -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

18
core/src/components.d.ts vendored
View File

@@ -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.
*/

24
core/src/components/my-chip/my-chip.base.scss
View File

@@ -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
}

3
core/src/components/nav-link/nav-link.tsx
View File

@@ -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',
})

85
core/src/css/palettes/dark.scss
View File

@@ -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() {

108
core/src/css/palettes/high-contrast-dark.scss
View File

@@ -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)};

103
core/src/css/palettes/high-contrast.scss
View File

@@ -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

40
core/src/global/ionic-global.ts
View File

@@ -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;

203
core/src/themes/ionic.functions.color.scss
View File

@@ -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)};
}
}
}
}
}

348
core/src/themes/ionic.theme.default.scss
View File

@@ -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);

4
packages/angular/src/directives/proxies.ts
View File

@@ -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: '<ng-content></ng-content>',
// 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;

4
packages/angular/standalone/src/directives/proxies.ts
View File

@@ -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: '<ng-content></ng-content>',
// 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 {