From e0f6306acce6436418eced76abcac85148c96c02 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 10 Nov 2026 16:55:42 -0800 Subject: [PATCH 1/3] feat(note): add recipe and tokens --- BREAKING.md | 37 ++++++++++ core/api.txt | 11 +-- core/src/components.d.ts | 17 ++--- core/src/components/note/_note.docs.scss | 8 +++ core/src/components/note/note.interface.ts | 27 ++++++++ core/src/components/note/note.ios.scss | 11 --- core/src/components/note/note.ios.vars.scss | 10 --- core/src/components/note/note.md.scss | 11 --- core/src/components/note/note.md.vars.scss | 10 --- core/src/components/note/note.scss | 31 ++++++--- core/src/components/note/note.tsx | 35 +++++++--- .../components/note/test/basic/note.e2e.ts | 11 --- ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 380 -> 0 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 654 -> 0 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 599 -> 0 bytes ...note-color-ios-ltr-Mobile-Chrome-linux.png | Bin 443 -> 0 bytes ...ote-color-ios-ltr-Mobile-Firefox-linux.png | Bin 840 -> 0 bytes ...note-color-ios-ltr-Mobile-Safari-linux.png | Bin 532 -> 0 bytes .../note-color-md-ltr-Mobile-Chrome-linux.png | Bin 340 -> 0 bytes ...note-color-md-ltr-Mobile-Firefox-linux.png | Bin 655 -> 0 bytes .../note-color-md-ltr-Mobile-Safari-linux.png | Bin 599 -> 0 bytes core/src/components/note/test/hue/note.e2e.ts | 35 ++++++++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 1677 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 1949 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 1949 bytes ...e-hue-bold-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1991 bytes ...-hue-bold-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2327 bytes ...e-hue-bold-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 2412 bytes ...te-hue-bold-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1656 bytes ...e-hue-bold-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1960 bytes ...te-hue-bold-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 1939 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 1677 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 1949 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 1949 bytes ...hue-subtle-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1991 bytes ...ue-subtle-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2327 bytes ...hue-subtle-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 2412 bytes ...-hue-subtle-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1656 bytes ...hue-subtle-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1960 bytes ...-hue-subtle-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 1939 bytes core/src/components/note/test/note.spec.ts | 65 ++++++++++++++++++ core/src/themes/ionic/default.tokens.ts | 37 ++++++++++ core/src/themes/ios/default.tokens.ts | 37 ++++++++++ core/src/themes/md/default.tokens.ts | 37 ++++++++++ core/src/themes/themes.interfaces.ts | 3 + .../angular/src/lazy/directives/proxies.ts | 4 +- .../src/standalone/directives/ion-note.ts | 4 +- packages/vue/src/proxies.ts | 3 +- 48 files changed, 354 insertions(+), 90 deletions(-) create mode 100644 core/src/components/note/_note.docs.scss create mode 100644 core/src/components/note/note.interface.ts delete mode 100644 core/src/components/note/note.ios.scss delete mode 100644 core/src/components/note/note.ios.vars.scss delete mode 100644 core/src/components/note/note.md.scss delete mode 100644 core/src/components/note/note.md.vars.scss delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Chrome-linux.png delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Firefox-linux.png delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Safari-linux.png delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Chrome-linux.png delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Safari-linux.png delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Chrome-linux.png delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png delete mode 100644 core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/note/test/note.spec.ts diff --git a/BREAKING.md b/BREAKING.md index c14d44c0a57..252d9abe2ee 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -29,6 +29,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Input Otp](#version-10x-input-otp) - [Item Divider](#version-10x-item-divider) - [Menu Toggle](#version-10x-menu-toggle) + - [Note](#version-10x-note) - [Radio Group](#version-10x-radio-group) - [Ripple Effect](#version-10x-ripple-effect) - [Row](#version-10x-row) @@ -426,6 +427,42 @@ The following breaking changes apply to `ion-menu-toggle`: Remove any instances that target the theme classes: `ion-menu-toggle.md`, `ion-menu-toggle.ios`. +

Note

+ +The following breaking changes apply to `ion-note`: + +1. `--color` has been replaced. [1](#version-10x-note-replaced-css-variables) +2. The color applied by the `color` prop is now driven by the centralized Ionic Theming system, scoped to the new `hue` property. [2](#version-10x-note-hue) +3. Mode classes (`ion-note.md`, `ion-note.ios`) are no longer supported. [3](#version-10x-note-mode-classes) + +
Replaced CSS variables
+ +Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides: + +| Old (9.x) | New token (global) | New CSS variable (component-specific) | +|---|---|---| +| `--color` | `IonNote.hue.bold.default.color` | `--ion-note-hue-bold-default-color` | + +> [!NOTE] +> A note with `hue="subtle"` reads `IonNote.hue.subtle.default.color` for global styles, or `--ion-note-hue-subtle-default-color` for component-specific styles. + +
New hue property and color tokens
+ +A new `hue` property selects between vibrant and muted color variants. It defaults to `"bold"`. + +When `color` is set, a bold note now uses the color's `foreground` variant instead of `base`, which is darker so the text stays readable on the page. To revert to the previous appearance, set `IonNote.hue.bold.semantic.default.color` to `var(--ion-color-base)` for global styles, or `--ion-note-hue-bold-semantic-default-color` for component-specific styles. + +When `color` is set, the note color now reads from a token instead of `--ion-color-base` directly. Global overrides should use the theme tokens; component-specific overrides use the corresponding CSS variables: + +| Hue | Token (global) | CSS variable (component-specific) | +|---|---|---| +| `bold` | `IonNote.hue.bold.semantic.default.color` | `--ion-note-hue-bold-semantic-default-color` | +| `subtle` | `IonNote.hue.subtle.semantic.default.color` | `--ion-note-hue-subtle-semantic-default-color` | + +
Mode classes
+ +Remove any instances that target the mode classes: `ion-note.md`, `ion-note.ios`. +

Radio Group

Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). diff --git a/core/api.txt b/core/api.txt index cfb531f2255..15acb9414e7 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1900,11 +1900,14 @@ ion-nav-link,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-note,shadow ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true +ion-note,prop,hue,"bold" | "subtle" | undefined,undefined,false,false ion-note,prop,mode,"ios" | "md",undefined,false,false -ion-note,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-note,css-prop,--color,ionic -ion-note,css-prop,--color,ios -ion-note,css-prop,--color,md +ion-note,css-prop,--ion-note-font-family +ion-note,css-prop,--ion-note-font-size +ion-note,css-prop,--ion-note-hue-bold-default-color +ion-note,css-prop,--ion-note-hue-bold-semantic-default-color +ion-note,css-prop,--ion-note-hue-subtle-default-color +ion-note,css-prop,--ion-note-hue-subtle-semantic-default-color ion-picker,shadow ion-picker,prop,mode,"ios" | "md",undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 70fc0d3cc5d..ce383993d38 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2707,13 +2707,13 @@ export namespace Components { */ "color"?: Color; /** - * The mode determines the platform behaviors of the component. + * Set to `"bold"` for a note with vibrant, bold colors or to `"subtle"` for a note with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset. */ - "mode"?: "ios" | "md"; + "hue"?: Hue; /** - * The theme determines the visual appearance of the component. + * The mode determines the platform behaviors of the component. */ - "theme"?: "ios" | "md" | "ionic"; + "mode"?: "ios" | "md"; } interface IonPicker { "exitInputMode": () => Promise; @@ -8568,13 +8568,13 @@ declare namespace LocalJSX { */ "color"?: Color; /** - * The mode determines the platform behaviors of the component. + * Set to `"bold"` for a note with vibrant, bold colors or to `"subtle"` for a note with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset. */ - "mode"?: "ios" | "md"; + "hue"?: Hue; /** - * The theme determines the visual appearance of the component. + * The mode determines the platform behaviors of the component. */ - "theme"?: "ios" | "md" | "ionic"; + "mode"?: "ios" | "md"; } interface IonPicker { /** @@ -10905,6 +10905,7 @@ declare namespace LocalJSX { } interface IonNoteAttributes { "color": Color; + "hue": Hue; } interface IonPickerColumnAttributes { "disabled": boolean; diff --git a/core/src/components/note/_note.docs.scss b/core/src/components/note/_note.docs.scss new file mode 100644 index 00000000000..62b5b8ff2e7 --- /dev/null +++ b/core/src/components/note/_note.docs.scss @@ -0,0 +1,8 @@ +/** + * @prop --ion-note-font-family: Font family of the note + * @prop --ion-note-font-size: Font size of the note + * @prop --ion-note-hue-bold-default-color: Text color of the `bold` hue + * @prop --ion-note-hue-bold-semantic-default-color: Text color of the `bold` hue when a semantic color is applied + * @prop --ion-note-hue-subtle-default-color: Text color of the `subtle` hue + * @prop --ion-note-hue-subtle-semantic-default-color: Text color of the `subtle` hue when a semantic color is applied + */ diff --git a/core/src/components/note/note.interface.ts b/core/src/components/note/note.interface.ts new file mode 100644 index 00000000000..445d8e0f777 --- /dev/null +++ b/core/src/components/note/note.interface.ts @@ -0,0 +1,27 @@ +import type { Hue } from '../../themes/themes.interfaces'; + +export type IonNoteRecipe = { + font?: { + family?: string; + size?: string; + }; + + hue?: { + [K in Hue]?: { + default?: { + color?: string; + }; + + /** Any of the semantic colors like primary, secondary, etc. */ + semantic?: { + default?: { + color?: string; + }; + }; + }; + }; +}; + +export type IonNoteConfig = { + hue?: Hue; +}; diff --git a/core/src/components/note/note.ios.scss b/core/src/components/note/note.ios.scss deleted file mode 100644 index 2d2581928d3..00000000000 --- a/core/src/components/note/note.ios.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import "./note.ios.vars"; -@import "./note"; - -// iOS Note -// -------------------------------------------------- - -:host { - --color: #{$note-ios-color}; - - font-size: $note-ios-font-size; -} diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss deleted file mode 100644 index 75836d251b7..00000000000 --- a/core/src/components/note/note.ios.vars.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../themes/native/native.globals.ios"; - -// iOS Note -// -------------------------------------------------- - -/// @prop - Text color of the note -$note-ios-color: $text-color-step-650; - -/// @prop - Font size of the note -$note-ios-font-size: dynamic-font-min(0.875, 16px); diff --git a/core/src/components/note/note.md.scss b/core/src/components/note/note.md.scss deleted file mode 100644 index 7698c60a013..00000000000 --- a/core/src/components/note/note.md.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import "./note.md.vars"; -@import "./note"; - -// Material Design Note -// -------------------------------------------------- - -:host { - --color: #{$note-md-color}; - - font-size: $note-md-font-size; -} diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss deleted file mode 100644 index b733c522f8c..00000000000 --- a/core/src/components/note/note.md.vars.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../themes/native/native.globals.md"; - -// Material Design Note -// -------------------------------------------------- - -/// @prop - Text color of the note -$note-md-color: $text-color-step-400; - -/// @prop - Font size of the note -$note-md-font-size: dynamic-font(14px); diff --git a/core/src/components/note/note.scss b/core/src/components/note/note.scss index 5646e0a36bf..25c5a6e874d 100644 --- a/core/src/components/note/note.scss +++ b/core/src/components/note/note.scss @@ -1,19 +1,30 @@ -@import "./note.ios.vars"; +@use "./note.docs"; -// iOS Note +// Note // -------------------------------------------------- :host { - /** - * @prop --color: Color of the note - */ - color: var(--color); + box-sizing: border-box; - font-family: $font-family-base; + font-family: var(--ion-note-font-family, inherit); + font-size: var(--ion-note-font-size); +} - box-sizing: border-box; +// Note: Hue +// -------------------------------------------------- + +:host(.note-hue-bold) { + color: var(--ion-note-hue-bold-default-color); +} + +:host(.note-hue-subtle) { + color: var(--ion-note-hue-subtle-default-color); +} + +:host(.note-hue-bold.ion-color) { + color: var(--ion-note-hue-bold-semantic-default-color); } -:host(.ion-color) { - color: #{current-color(base)}; +:host(.note-hue-subtle.ion-color) { + color: var(--ion-note-hue-subtle-semantic-default-color); } diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx index e694ad94a73..26690bb47d5 100644 --- a/core/src/components/note/note.tsx +++ b/core/src/components/note/note.tsx @@ -2,20 +2,16 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Host, Prop, h } from '@stencil/core'; import { createColorClasses } from '@utils/theme'; -import { getIonTheme } from '../../global/ionic-global'; +import { config } from '../../global/config'; import type { Color } from '../../interface'; +import type { Hue } from '../../themes/themes.interfaces'; /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. - * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. */ @Component({ tag: 'ion-note', - styleUrls: { - ios: 'note.ios.scss', - md: 'note.md.scss', - ionic: 'note.md.scss', - }, + styleUrl: 'note.scss', shadow: true, }) export class Note implements ComponentInterface { @@ -26,12 +22,31 @@ export class Note implements ComponentInterface { */ @Prop({ reflect: true }) color?: Color; + /** + * Set to `"bold"` for a note with vibrant, bold colors or to `"subtle"` for + * a note with muted, subtle colors. + * + * Defaults to `"bold"` if both the hue property and theme config are unset. + */ + @Prop() hue?: Hue; + + /** + * Gets the note hue. Uses the `hue` property if set, otherwise + * checks the theme config and falls back to 'bold' if neither is provided. + */ + get hueValue(): Hue { + const hueConfig = config.getObjectValue('IonNote.hue', 'bold') as Hue; + + return this.hue || hueConfig; + } + render() { - const theme = getIonTheme(this); + const { color, hueValue } = this; + return ( diff --git a/core/src/components/note/test/basic/note.e2e.ts b/core/src/components/note/test/basic/note.e2e.ts index b0fea3322f8..276d07e571b 100644 --- a/core/src/components/note/test/basic/note.e2e.ts +++ b/core/src/components/note/test/basic/note.e2e.ts @@ -16,17 +16,6 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti const note = page.locator('ion-note'); await expect(note).toHaveScreenshot(screenshot(`note-diff`)); }); - - test('should render color correctly', async ({ page }) => { - await page.setContent( - ` - 99 - `, - config - ); - const note = page.locator('ion-note'); - await expect(note).toHaveScreenshot(screenshot(`note-color`)); - }); }); }); diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index bbd670a6166456c6723466a05d81887f6db6e61b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 380 zcmV-?0fYXDP)D&7XA6@_X zlKy?V9JeGHv#d&?rnk51sWdc39JAKdcC}WEi>gphBwHm38Y7M%2l4c>BE%LS?qH4F z%Nw&|*%bVs>GH0DG@IGy*P`cpa%ln9fMIK%4>0I*)R#1GKb*gEa5wJ0@7H)QIMQgy z-hg=FQt}0}+o`=97&}p=m3OYN<1?ijay3Z$c5&{0L21pWe&f5X7@ z*^Z@B%lyk%1V%-Y&{&V6yx9LtXWwhA+LO43h6z)pk#g-45t^UXV9P_u`u*>M8p>%@VX&ThtPPN12y zG1=0J<3Tsu41GW3FjlF>Gwne2q!WqP;}Hguw<6!4OLE&e+!ib5yh2vy7szs0aSxB6 zPtRsU#}yPs1cRp#RVGO-XNWE;@Sp$0*M1#?Il1hx=m|+o_+{YRb1`9G2+Iq6D>i_@%07*qoM6N<$f~%)B%K!iX diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index f0c59ea46d58d632174a43e161813ea0e441d6ab..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 599 zcmV-d0;v6oP)Px#1am@3R0s$N2z&@+hyVZr0ZBwbR5*>zlif?xQ5=WATbh~S)J1AF$|P42*^3vI z_HrT8O#~9yMMT|5bz}4bK}G*U1T7(xK%y?X=%PQNx%b-UoQoD)OSd(Na&PSCe)~OL zn49xJ;~`gOZw@s@jyX+Qrv*R&0&! z;yZFmvJQ6z0{Bl15*WNd*8Q2p^OsE58%a+)09Z~fVmFwG+<8FO>*w3e+c=E7DP^+& zNIn?CDh8C;4_5Q_>J7eJx&}bPGJ&VN7c^}JmP)wy^pYH(1VCSi#zeoRNj92xmT%R3 z`lRH10TB^VqA_XQZx+$%{ykbR%>&0J=bKqs)*IVI%jQJ={ijk)LxU{GlOiHgXKWQE zHeX%b8ZKI~h|6?<@aPy?p+GJW#M9l2V`~=x`CtgEzJ;H!UW2Og>-`68jqQXkURmh? zApOyXbGsSqhE`lV_7T2*3s29{awmyrFR*Ryz^ZS--#^6cxnaViV-*1as){ndfL1IL zx%-g0;mfQ|DW6AKhy&p5J45{G_&UL=XK4v%XAh~Vx9brA8K(zpT^ohy_i8~t7-I3w zJ3QuN`1^-IRm($~qL6WYBL2jJ-C!bm|8bd>1Px$bxA})R5*=e{Qv(y1G#{SY@L*9W`VOl9XR~u!sWm3Kk(UE@jE-9slzV&|NsBL z-@aXO_B+bJe^%A-w5--q2L1To@D=z*JHXd0f1_p*dZ{M*>h$H)uT~_AP!6W~F{lYKH z#K6G7rK|OE{~@^Czwh7QZQAz#_n%)cUgDQ!Vqjp9tFQRD`@o~xmfz1`yx+e2qNyXp zzkdu24FA4h)M;Z8ky?BXVmH{~=zFxZW_sf_6 z|NlSfns8D`{y!?flx6t;|NqOmi(V~Sj;!vSmf4NqSO^=BECa-(V;o|TsQZ5B-kp@( zqf7#yPo9A&#Usn`|NsC0|Nh;}FF(q_4?)K`#9l2~iLeN_EF(Nie!Ft*_v<%|jEvky l`pkTMXlWa(EaTA3&j9>3)+9;E$xi?P002ovPDHLkV1jVu=Q02Q diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 37ffeddd97134e5b35266de866c587295183ad93..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 840 zcmV-O1GoH%P)20009INklSzDzgA4E7d%kn;J>U5*V}T0%;7)KN!eDpxvYJ%n zsf{rm8 zyz&AynCgip-_2CvMDUijL)Xd@^d>|19>TMyaY;Wqp*J=G(#&kE$~UBeJAwtJ64Dz&%!of@qPh+qo%LWku7=`^1R|afjJ!Qyml6*h(-jygC?W-x z*EfKBJA=ySt4QhHzCL=4zKd6=!~y7VOu;!6N?BzC+01upkl2h4`3DiiCu1=Au@PEK zCfJ(-z|FpfdafIsOP<1H#}+l|;=Prl--#5ohO~X8H-%U~EY{GF{+XA{!O+tqW1{*! zn*F!Iy`>iVJSP>YG*dtsc^tOM@#^HcInb^!3E2vVTj?sB6_w#zVKE#iOVL$cjPA(O z6@FFz;t^T)qbWFsoifnE>6&GJ>A(2P&GDK>r63gX<+~H_w*;)J8RTO STKn$+0000Px#1am@3R0s$N2z&@+hyVZqzDYzuR5*>z)Xhs9K^O+`XQ!cIYa~f~5RK78B}yrH zuy_(8q@ZXirB{0qJV>F%-YQZA+mnAq5A7i!D(JzJ2VqH3{6H(UWp%qqj7i!;Mcia{ z^LPkdyAkRfBJ_oUVff8E!#f`eNur7&s+sIs68iphXxsQTzkrkN9r&XWgc5Pwj5c1H zaHS(jOW)(#y-ubA4czMP=jz>drfMVnIWxzxA0c z0^AVzy}0CYr@1^%ws%l4OaOqa^NBzJ4KIhW|8^4MmWpss0(LqBb8G@N?e|gGHOebX zI*??kSfn{N!B634Y6x<*wS(FBA8EWANYODpm+u=*^SjKr0RwMrZ|L`1% WxjG_yFu-&G0000-r;}$|CgU`arpS*<9$Y-{{Q_4G5?pFFpsdb{v`cukP2GBPUNDImozi z!tpCFj^F*w!@~mP^F+RU4h&##i+AGhmO zUfM&$vWvyHo(ZHUh^7Ob`Tu|X{>qor9U1Sw z)ZCi$UxGo8@9Ky5$NT-={qJye+b>@6{rz+Q9acVtVjc6(X}mNpF8XjQ;?;cH6DN+b i^;`QC9y>Vw2ZM~R;H+@V3$uX1#Ng@b=d#Wzp$Pyn53hg# diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 34978ea14ce8159b7bd090de8b3ceabbf733c2c1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 655 zcmV;A0&x9_P) zR!jxOOuc%8_v#R$D$3C0WhuPut#2_GpJukZmjGQnaW}3Iq)(FbGJ}sh((nolB<6f2 z_O=c_pDZQebqm4UQ*heG=~$PD_GmVtSs9Gpy2p6qQ<8>_@*8Qkr_XKJs3*x{#5XcR zMm6OY;hLKx{&79l>v#Ba=_-i>2GLFemy31*7*Se`wlEiIqUEK#|4V0X%)?UD2GSioy$->k$DK;~X-hK=T zsjRKPhURbv6U{I9l$nou{~p#i-Cr`%<8q&n;T#>qH%yEAz+QPGiT&+zS8LsEhDyq1 zUp&UDf`jmjiX`r4%@TlIwYbQY6-F91JF7pJG`&?OU7eU4B;`SwzRhI7FFI-&z@v4h(}<oq0si-3CcplMJmCK9dIkknyPx#1am@3R0s$N2z&@+hyVZr0ZBwbR5*>zlif?xQ5=WATbh~S)J1AF$|P42*^3vI z_HrT8O#~9yMMT|5bz}4bK}G*U1T7(xK%y?X=%PQNx%b-UoQoD)OSd(Na&PSCe)~OL zn49xJ;~`gOZw@s@jyX+Qrv*R&0&! z;yZFmvJQ6z0{Bl15*WNd*8Q2p^OsE58%a+)09Z~fVmFwG+<8FO>*w3e+c=E7DP^+& zNIn?CDh8C;4_5Q_>J7eJx&}bPGJ&VN7c^}JmP)wy^pYH(1VCSi#zeoRNj92xmT%R3 z`lRH10TB^VqA_XQZx+$%{ykbR%>&0J=bKqs)*IVI%jQJ={ijk)LxU{GlOiHgXKWQE zHeX%b8ZKI~h|6?<@aPy?p+GJW#M9l2V`~=x`CtgEzJ;H!UW2Og>-`68jqQXkURmh? zApOyXbGsSqhE`lV_7T2*3s29{awmyrFR*Ryz^ZS--#^6cxnaViV-*1as){ndfL1IL zx%-g0;mfQ|DW6AKhy&p5J45{G_&UL=XK4v%XAh~Vx9brA8K(zpT^ohy_i8~t7-I3w zJ3QuN`1^-IRm($~qL6WYBL2jJ-C!bm|8bd>1 { + test.describe(title('note: hue'), () => { + HUES.forEach((hue) => { + test(`should render ${hue} notes`, async ({ page }) => { + await page.setContent( + ` + + +
+ Default + Danger +
+ `, + config + ); + + const container = page.locator('.container'); + + await expect(container).toHaveScreenshot(screenshot(`note-hue-${hue}`)); + }); + }); + }); +}); diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..fd53c734c8e9e6a7c3d5ab5729054ae26d73d809 GIT binary patch literal 1677 zcmV;826Fj{P)-On_twEJ&j0oFlMI2NM`* zoFGhbn}7%m2c53tHI|AKDzwPEJj$a$d9<|M*ZzcQsr9v)#q>*Q&VTMbm)>)~^PQWY zCYQ?zEfzqB&_W%wc~K8-UerUI7xmEQMLnJ}FKumY+1c3_FJ2^`93>?sJv}|d{~I*? zB_t#a4i3UFHa2#5cMk{%FgG{X5F-!>Qc_af+}xa)6IZ|0!>FVmb zapOiDowv95)YMdAVd4Cq$H&KOYHGT=x1jNgnVHFCGGwZu zp#h`=%b!v3dhFATwGjqbpEMm zUfQ>oTQ)QH?lD>AVf(JXR3y3+pXd@Dfg!n6Dq!C1{h?6Q)~;t|Ni#BnQzjNSAN|7E z-EHs}CcpTau8A>*=2shH)pX|q<>~m(3N*d$Zn)F?5T7*xd`3C zuBYINWMo8*zWDn34h;=;cXz{Pu~_l(@vW_`wY9a0iHXC*!wcu9r>E!S@qj+d|eZhINSJuFf{dZsb z(R9sfa@vxB?Hso1Ml835K6@Jeil80b_Pzf_?Clbr;Uq z2JXOP{fD8*vd8C&*rnm2D`H~^Qg>BAQ365(n&8+`EI4gKsmd)aEh>{yCb6-xP*5h5 zIXXHjm4fvm;@<^@LZHfIGE~iGW+^23Ugp`UUcP*GRx&a=KWoX3ZKPqed>Ox_9ER}L zU((4b`=FhqA2mW6L%&r^r>AL#^uekdiY+X$8D!ohhb(-3NJC9tAQRZ0rKKe(g9M?i z&JU^WQ{Yr%Vwxh%*6Jf)3~icWyqnRprG8`TwDS`H&huES|!%Y z%L`l!4-ZdDN-{Myy?+Re86Ox%D_nf8-||C09=OhI*dMt%ErsmakHia}7hGp~ zr?b$)peZg<;nr_&eayfYJTFfT?fVz?(B?%ww0TjFzX1RM|Nk_?98drN00v1!K~w_( X5V-dkWv6^~00000NkvXXu0mjf&a5&g literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8cb8a6fdf480ca8ef927b95b1fa44b244d9b19d8 GIT binary patch literal 1949 zcmV;O2V(e%P)KQbC^qsi4n*RM2NY41MR$o#^iF=6|oHr3D)s8~FPA z!pzKU+K<%H(ShvjY}~nX2V1sm!IC9QgxIsHy}cbNDJeK`-~e=VbcE|usVY1Q%^#fN zV-2mJK~KC0ue=it6Th_+BYs*Epo_&~xVyXK(W6HwD=Wjzn>Vp-+csEOSWN4QGcqzD z5{Y=SjEszU@}5`9(96rqaqiqX96WeX81tkEdVgI#9FD(-v7sT{FS&ubggp@dIT==O zg$Uz*DiWZ(y1K&K+go_9)2C0Pv$GR%adE=69}`WGzrR16oScMf&#UKwE^BFn+vQJ$ zYi-#dqbe*4t6L?QZD=4|pJ^#ZN2i8Pz>|}c`Q@o{Nkv6PxN_wRhKGk?Yio;ufB?wl za>T~QPTU1(Yilzc`sOMuEJR6338Ydf%+1ZQVZ#QPnwml;lOZ}f8VLyrm^W`8-Xl}(^d%N-6whM*aHZhUt_JS07cLo}M0pgM)bzXhp1Bw+;>t4s0_wZrosyp`oELG&Dqhemgp3uIj+f|ldi4sg1)OW#OZs`{NX9oy_*E* z^QWP0WdX^qRP_9(9A5Qb31GArSi|9iEU3+zg^JfhV7kr^;*1oG^!1@&{vw$At%da; z!_Ze#%M)PYvxcGfRo_O5+bY<&7%0ShdU|-`jE#-?ysfPb zd-v`|W@aXzPZ#?0+6(DR-vEe=4cY5uZS7DD4@29=nq$3H)wt^5j+jV0C)~)MwA;ctudSQ0a86F-HXZ_p>-gt1MsN9Lqn+ z!OxwRa&C`n1u*n*msUd)c3b*1zRou(ON7$RA3vrt4eG($QuxzxuKW z`Yz*pQbS5Qx<0=Q&wpRV?bt;0eO-eUg`aYaR2durxpaV`7cX%|fBk=EbF6O`R@NlkXY9%Sxi-N9@%W>%! zHdvIp3zng8pfT$x8nceUB{v&$7mLv^X+V+KWm?dw>ieo{ez201p&NUxgjHye5GRR@ zjR1A^r*cmT{ltkAxO?|5TL5Xtjvesw^1`ZBzobLQ}|GIX*X+JM)uU(e^{ z=V@ta44o{4RuEYUts+uxZZ40R%wEXTb8>Q?$zI43s-t4Dx}}acy;2{4=vZ6AE;Ehe zVRO57xBRvlWplHivP0O3=#!-{1*w%|FjElKkOA%+l2r_KQiOQ%B(8 z;lZ88ty{OaSEuT>va;fVWEGb#UBbqV8)0c_$#H^_n3%|xqYRxkzRJo9wZsjhBI;1DXeY&Ip%T6AJ zT=odvmy00ToeFVU60F~TlgHF-i$~`_@_5P9=2rX8PW0E-!@H#xvkmm00`nwv0>~Tb z@7BU9B9u4IsyCxy;`}{<4x)ho(={=QOfUf*S zN-!R8awPI-f`0w_bqov)VE+914EgaGW$4tQP`f9QNT9E;&#S1Qpa7dUZ{~??YHGrn zGiUJN!2`}k6L9a|y-A^uj*jB+;lq4SNJz+}Eu-=m=`VLg!SwgO6C;3;-d=na9Et9K z7DLP246pnt1`VnEvFy|_Ztax8JPDmdA6!-8TQPX23r4^8fMQI+E5s@1B*!~*KjqC< z+StS$%EH}oFbjBX>PqJ$m3~xYCF&xPaDLr$4fLIt!8R>fxHes>pie{c{(clM_28cs zUb44C*JoewhmdDk3Fg`_7RF6iD(KTx$N7tFInr;xgU$kLEKE*-$*aE=;?E)#^cj!} j`V2?~eFmh0J_GtcgZ_4bP57NB00000NkvXXu0mjfKcdpv literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..63b20731eee3d27897237bd1b3237b2c901cbef8 GIT binary patch literal 1949 zcmV;O2V(e%P)Px#1am@3R0s$N2z&@+hyVZwM@d9MRA_F)V7h z%&S#ps8+9_=IwWA&N=c->v&d3zBuso^knMPsQ^ryHVuo#LQzo>>FMbX3F-BE5)u+n ztJU93rB6U2li@jI2gmX;Q}y1In1 zva&ML($d(xc{6!=d6-NldV70GNlC$IG?JH>C+tX@%|>ZyDe39ytY5#L{rmUR-rf#? z*=!~yC56`3Rzdsp>CNjGLe#!LVbO`LyJ?bUWvp*M#q_w(bd{$ z$~?&VZ_ngYSpXMbSxn#6&jGL+jTDQ#XgQis*{m2ol?71w+A=I%4+Oog@{4F^%;EHN zzWnuv@m$uV^0zlN!u);hg^^s(Z*g(nYxI3~ZH#vP)?ZSh4CC`(?XqurKtKQ@kqEtB z4?sml1?A=CtXsE^ZQHid)6>I=6DRQU@*+Ds8<|XoMx$ZhzI^~xR#u|bYSCyk?A*B% zKR-VXA3p4mVULoWoQy`JK_-)tot;g1c(_A(BC!~ckYFA*HUV(^$T6DsA7svlxh%R? zgDhw|msY(!Cg*zQL1rJyJ)80_t(I{q!>-+PHytIAL&#M5@NSjg+G zyUL~bw+P+7iP+jorbI_l_4-PN2L^(RX%c3$8H2$5`aYKL z?d^?Dr=zN>ik_YxhKGj*T~}9EhmHGhuyl6e5fTJ|yGlt@)*xc49R^fg@PZsEtm{E*p<`OaOu zUz#%#@Al=I?V5h?-aTNX&3r*pQqp6Ok>1|k&SwGgfZ*Ghe$j?CX%x*7fL1N@?7a zf$8QgI*QM5etHD|YVR0VPuS@?oerH&C%lnv-@YA{N+krw#>Qf?SU7d+6eg1iwOY;E zwQKF}!lg@>VlWuU&CSKf$A=|LmT>OeIeL40k;~;ICMHr)P(VgT25PmMsHiA9J3GhK z3Jncq#*7){awzVg7~pwqw3?m+Iwfa1T@x z_KPhvzMn<^Jw0x6pRY7s;^|3D@ki9AZldkvC-^OxhyS7lFxqmwUyNq%$>UsmZx0Q7 zGLTK5M&$3ZnDo42+?_6R{)yoj!xjrJqfcf4f1dv%eCEDL_;0@ceaiX4%K@x?edxmH z(ouW{)9n^+9?HQ`S&cH`ji=Ic?sNxfJ6TNQ-b{=)Zs8FU#CLZ88pX2LpGwPV`UK!? jFB5>%^a;Re`ULQA9*e^kkc7C&00000NkvXXu0mjfqsGlh literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..41342dd128e0562dfd98f3d23f552af73b3a3757 GIT binary patch literal 1991 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 literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..99bbc246001d61dc83a15a649add58049310720f GIT binary patch literal 2412 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 literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..dd08d116afd7ec4a1a6a3bba2d9154dddbd1b811 GIT binary patch literal 1656 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 Z{{kFcu+FK-On_twEJ&j0oFlMI2NM`* zoFGhbn}7%m2c53tHI|AKDzwPEJj$a$d9<|M*ZzcQsr9v)#q>*Q&VTMbm)>)~^PQWY zCYQ?zEfzqB&_W%wc~K8-UerUI7xmEQMLnJ}FKumY+1c3_FJ2^`93>?sJv}|d{~I*? zB_t#a4i3UFHa2#5cMk{%FgG{X5F-!>Qc_af+}xa)6IZ|0!>FVmb zapOiDowv95)YMdAVd4Cq$H&KOYHGT=x1jNgnVHFCGGwZu zp#h`=%b!v3dhFATwGjqbpEMm zUfQ>oTQ)QH?lD>AVf(JXR3y3+pXd@Dfg!n6Dq!C1{h?6Q)~;t|Ni#BnQzjNSAN|7E z-EHs}CcpTau8A>*=2shH)pX|q<>~m(3N*d$Zn)F?5T7*xd`3C zuBYINWMo8*zWDn34h;=;cXz{Pu~_l(@vW_`wY9a0iHXC*!wcu9r>E!S@qj+d|eZhINSJuFf{dZsb z(R9sfa@vxB?Hso1Ml835K6@Jeil80b_Pzf_?Clbr;Uq z2JXOP{fD8*vd8C&*rnm2D`H~^Qg>BAQ365(n&8+`EI4gKsmd)aEh>{yCb6-xP*5h5 zIXXHjm4fvm;@<^@LZHfIGE~iGW+^23Ugp`UUcP*GRx&a=KWoX3ZKPqed>Ox_9ER}L zU((4b`=FhqA2mW6L%&r^r>AL#^uekdiY+X$8D!ohhb(-3NJC9tAQRZ0rKKe(g9M?i z&JU^WQ{Yr%Vwxh%*6Jf)3~icWyqnRprG8`TwDS`H&huES|!%Y z%L`l!4-ZdDN-{Myy?+Re86Ox%D_nf8-||C09=OhI*dMt%ErsmakHia}7hGp~ zr?b$)peZg<;nr_&eayfYJTFfT?fVz?(B?%ww0TjFzX1RM|Nk_?98drN00v1!K~w_( X5V-dkWv6^~00000NkvXXu0mjf&a5&g literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8cb8a6fdf480ca8ef927b95b1fa44b244d9b19d8 GIT binary patch literal 1949 zcmV;O2V(e%P)KQbC^qsi4n*RM2NY41MR$o#^iF=6|oHr3D)s8~FPA z!pzKU+K<%H(ShvjY}~nX2V1sm!IC9QgxIsHy}cbNDJeK`-~e=VbcE|usVY1Q%^#fN zV-2mJK~KC0ue=it6Th_+BYs*Epo_&~xVyXK(W6HwD=Wjzn>Vp-+csEOSWN4QGcqzD z5{Y=SjEszU@}5`9(96rqaqiqX96WeX81tkEdVgI#9FD(-v7sT{FS&ubggp@dIT==O zg$Uz*DiWZ(y1K&K+go_9)2C0Pv$GR%adE=69}`WGzrR16oScMf&#UKwE^BFn+vQJ$ zYi-#dqbe*4t6L?QZD=4|pJ^#ZN2i8Pz>|}c`Q@o{Nkv6PxN_wRhKGk?Yio;ufB?wl za>T~QPTU1(Yilzc`sOMuEJR6338Ydf%+1ZQVZ#QPnwml;lOZ}f8VLyrm^W`8-Xl}(^d%N-6whM*aHZhUt_JS07cLo}M0pgM)bzXhp1Bw+;>t4s0_wZrosyp`oELG&Dqhemgp3uIj+f|ldi4sg1)OW#OZs`{NX9oy_*E* z^QWP0WdX^qRP_9(9A5Qb31GArSi|9iEU3+zg^JfhV7kr^;*1oG^!1@&{vw$At%da; z!_Ze#%M)PYvxcGfRo_O5+bY<&7%0ShdU|-`jE#-?ysfPb zd-v`|W@aXzPZ#?0+6(DR-vEe=4cY5uZS7DD4@29=nq$3H)wt^5j+jV0C)~)MwA;ctudSQ0a86F-HXZ_p>-gt1MsN9Lqn+ z!OxwRa&C`n1u*n*msUd)c3b*1zRou(ON7$RA3vrt4eG($QuxzxuKW z`Yz*pQbS5Qx<0=Q&wpRV?bt;0eO-eUg`aYaR2durxpaV`7cX%|fBk=EbF6O`R@NlkXY9%Sxi-N9@%W>%! zHdvIp3zng8pfT$x8nceUB{v&$7mLv^X+V+KWm?dw>ieo{ez201p&NUxgjHye5GRR@ zjR1A^r*cmT{ltkAxO?|5TL5Xtjvesw^1`ZBzobLQ}|GIX*X+JM)uU(e^{ z=V@ta44o{4RuEYUts+uxZZ40R%wEXTb8>Q?$zI43s-t4Dx}}acy;2{4=vZ6AE;Ehe zVRO57xBRvlWplHivP0O3=#!-{1*w%|FjElKkOA%+l2r_KQiOQ%B(8 z;lZ88ty{OaSEuT>va;fVWEGb#UBbqV8)0c_$#H^_n3%|xqYRxkzRJo9wZsjhBI;1DXeY&Ip%T6AJ zT=odvmy00ToeFVU60F~TlgHF-i$~`_@_5P9=2rX8PW0E-!@H#xvkmm00`nwv0>~Tb z@7BU9B9u4IsyCxy;`}{<4x)ho(={=QOfUf*S zN-!R8awPI-f`0w_bqov)VE+914EgaGW$4tQP`f9QNT9E;&#S1Qpa7dUZ{~??YHGrn zGiUJN!2`}k6L9a|y-A^uj*jB+;lq4SNJz+}Eu-=m=`VLg!SwgO6C;3;-d=na9Et9K z7DLP246pnt1`VnEvFy|_Ztax8JPDmdA6!-8TQPX23r4^8fMQI+E5s@1B*!~*KjqC< z+StS$%EH}oFbjBX>PqJ$m3~xYCF&xPaDLr$4fLIt!8R>fxHes>pie{c{(clM_28cs zUb44C*JoewhmdDk3Fg`_7RF6iD(KTx$N7tFInr;xgU$kLEKE*-$*aE=;?E)#^cj!} j`V2?~eFmh0J_GtcgZ_4bP57NB00000NkvXXu0mjfKcdpv literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..63b20731eee3d27897237bd1b3237b2c901cbef8 GIT binary patch literal 1949 zcmV;O2V(e%P)Px#1am@3R0s$N2z&@+hyVZwM@d9MRA_F)V7h z%&S#ps8+9_=IwWA&N=c->v&d3zBuso^knMPsQ^ryHVuo#LQzo>>FMbX3F-BE5)u+n ztJU93rB6U2li@jI2gmX;Q}y1In1 zva&ML($d(xc{6!=d6-NldV70GNlC$IG?JH>C+tX@%|>ZyDe39ytY5#L{rmUR-rf#? z*=!~yC56`3Rzdsp>CNjGLe#!LVbO`LyJ?bUWvp*M#q_w(bd{$ z$~?&VZ_ngYSpXMbSxn#6&jGL+jTDQ#XgQis*{m2ol?71w+A=I%4+Oog@{4F^%;EHN zzWnuv@m$uV^0zlN!u);hg^^s(Z*g(nYxI3~ZH#vP)?ZSh4CC`(?XqurKtKQ@kqEtB z4?sml1?A=CtXsE^ZQHid)6>I=6DRQU@*+Ds8<|XoMx$ZhzI^~xR#u|bYSCyk?A*B% zKR-VXA3p4mVULoWoQy`JK_-)tot;g1c(_A(BC!~ckYFA*HUV(^$T6DsA7svlxh%R? zgDhw|msY(!Cg*zQL1rJyJ)80_t(I{q!>-+PHytIAL&#M5@NSjg+G zyUL~bw+P+7iP+jorbI_l_4-PN2L^(RX%c3$8H2$5`aYKL z?d^?Dr=zN>ik_YxhKGj*T~}9EhmHGhuyl6e5fTJ|yGlt@)*xc49R^fg@PZsEtm{E*p<`OaOu zUz#%#@Al=I?V5h?-aTNX&3r*pQqp6Ok>1|k&SwGgfZ*Ghe$j?CX%x*7fL1N@?7a zf$8QgI*QM5etHD|YVR0VPuS@?oerH&C%lnv-@YA{N+krw#>Qf?SU7d+6eg1iwOY;E zwQKF}!lg@>VlWuU&CSKf$A=|LmT>OeIeL40k;~;ICMHr)P(VgT25PmMsHiA9J3GhK z3Jncq#*7){awzVg7~pwqw3?m+Iwfa1T@x z_KPhvzMn<^Jw0x6pRY7s;^|3D@ki9AZldkvC-^OxhyS7lFxqmwUyNq%$>UsmZx0Q7 zGLTK5M&$3ZnDo42+?_6R{)yoj!xjrJqfcf4f1dv%eCEDL_;0@ceaiX4%K@x?edxmH z(ouW{)9n^+9?HQ`S&cH`ji=Ic?sNxfJ6TNQ-b{=)Zs8FU#CLZ88pX2LpGwPV`UK!? jFB5>%^a;Re`ULQA9*e^kkc7C&00000NkvXXu0mjfqsGlh literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..41342dd128e0562dfd98f3d23f552af73b3a3757 GIT binary patch literal 1991 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 literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..99bbc246001d61dc83a15a649add58049310720f GIT binary patch literal 2412 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 literal 0 HcmV?d00001 diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..dd08d116afd7ec4a1a6a3bba2d9154dddbd1b811 GIT binary patch literal 1656 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 Z{{kFcu+FK { + it('should add the color classes when color is set', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('ion-color')).toBe(true); + expect(page.root!.classList.contains('ion-color-primary')).toBe(true); + }); + + it('should add the bold hue class when hue is not set', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('note-hue-bold')).toBe(true); + }); + + it('should add the hue class when hue is set', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('note-hue-subtle')).toBe(true); + expect(page.root!.classList.contains('note-hue-bold')).toBe(false); + }); +}); + +describe('note: config', () => { + beforeEach(() => { + config.reset({ + customTheme: { config: { components: { IonNote: { hue: 'subtle' } } } }, + }); + }); + + afterEach(() => { + config.reset({}); + }); + + it('should use the config hue when the prop is not set', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('note-hue-subtle')).toBe(true); + }); + + it('should use the hue prop over the config value', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('note-hue-bold')).toBe(true); + }); +}); diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts index 81bd9db51fe..263f202c3fa 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -34,6 +34,10 @@ export const defaultTheme: DefaultTheme = { size: 'large', }, + IonNote: { + hue: 'bold', + }, + IonProgressBar: { shape: 'round', }, @@ -837,6 +841,39 @@ export const defaultTheme: DefaultTheme = { }, }, + IonNote: { + font: { + family: 'var(--ion-font-family)', + size: dynamicFont(global.root, 14), + }, + + hue: { + bold: { + default: { + color: `var(--ion-text-color-step-400, ${mix(baseColors.white, baseColors.black, '60%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground'), + }, + }, + }, + + subtle: { + default: { + color: `var(--ion-text-color-step-400, ${mix(baseColors.white, baseColors.black, '60%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground', { subtle: true }), + }, + }, + }, + }, + }, + IonProgressBar: { height: 'var(--ion-scaling-100)', diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts index 2f50868d822..f41f687435d 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/core/src/themes/ios/default.tokens.ts @@ -45,6 +45,10 @@ export const defaultTheme: DefaultTheme = { size: 'large', }, + IonNote: { + hue: 'bold', + }, + IonProgressBar: { shape: 'round', }, @@ -857,6 +861,39 @@ export const defaultTheme: DefaultTheme = { }, }, + IonNote: { + font: { + family: 'var(--ion-font-family)', + size: dynamicFontMin(global.root, 0.875, 16), + }, + + hue: { + bold: { + default: { + color: `var(--ion-text-color-step-650, ${mix(baseColors.white, baseColors.black, '35%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground'), + }, + }, + }, + + subtle: { + default: { + color: `var(--ion-text-color-step-650, ${mix(baseColors.white, baseColors.black, '35%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground', { subtle: true }), + }, + }, + }, + }, + }, + IonProgressBar: { height: 'var(--ion-scaling-100)', diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts index a05e7543be2..f49f41277ed 100644 --- a/core/src/themes/md/default.tokens.ts +++ b/core/src/themes/md/default.tokens.ts @@ -39,6 +39,10 @@ export const defaultTheme: DefaultTheme = { size: 'large', }, + IonNote: { + hue: 'bold', + }, + IonProgressBar: { shape: 'rectangular', }, @@ -973,6 +977,39 @@ export const defaultTheme: DefaultTheme = { }, }, + IonNote: { + font: { + family: 'var(--ion-font-family)', + size: dynamicFont(global.root, 14), + }, + + hue: { + bold: { + default: { + color: `var(--ion-text-color-step-400, ${mix(baseColors.white, baseColors.black, '60%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground'), + }, + }, + }, + + subtle: { + default: { + color: `var(--ion-text-color-step-400, ${mix(baseColors.white, baseColors.black, '60%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground', { subtle: true }), + }, + }, + }, + }, + }, + IonProgressBar: { height: 'var(--ion-scaling-100)', diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index e759c31bce2..0b40252981b 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -5,6 +5,7 @@ import type { IonContentRecipe } from '../components/content/content.interface'; import type { IonGalleryRecipe } from '../components/gallery/gallery.interface'; import type { IonGridRecipe } from '../components/grid/grid.interface'; import type { IonItemDividerRecipe } from '../components/item-divider/item-divider.interface'; +import type { IonNoteConfig, IonNoteRecipe } from '../components/note/note.interface'; import type { IonProgressBarConfig, IonProgressBarRecipe } from '../components/progress-bar/progress-bar.interface'; import type { IonRippleEffectRecipe } from '../components/ripple-effect/ripple-effect.interface'; import type { IonRowRecipe } from '../components/row/row.interface'; @@ -256,6 +257,7 @@ export type IonicConfig = IonicGlobalConfig & { components?: { IonBadge?: IonBadgeConfig; IonChip?: IonChipConfig; + IonNote?: IonNoteConfig; IonProgressBar?: IonProgressBarConfig; IonSpinner?: IonSpinnerConfig; IonText?: IonTextConfig; @@ -304,6 +306,7 @@ type Components = { IonGallery?: IonGalleryRecipe; IonGrid?: IonGridRecipe; IonItemDivider?: IonItemDividerRecipe; + IonNote?: IonNoteRecipe; IonProgressBar?: IonProgressBarRecipe; IonRippleEffect?: IonRippleEffectRecipe; IonRow?: IonRowRecipe; diff --git a/packages/angular/src/lazy/directives/proxies.ts b/packages/angular/src/lazy/directives/proxies.ts index 90355d26bf1..c74c2015115 100644 --- a/packages/angular/src/lazy/directives/proxies.ts +++ b/packages/angular/src/lazy/directives/proxies.ts @@ -1699,14 +1699,14 @@ export declare interface IonNavLink extends Components.IonNavLink {} @ProxyCmp({ - inputs: ['color', 'mode', 'theme'] + inputs: ['color', 'hue', 'mode'] }) @Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'theme'], + inputs: ['color', 'hue', 'mode'], standalone: false }) export class IonNote { diff --git a/packages/angular/src/standalone/directives/ion-note.ts b/packages/angular/src/standalone/directives/ion-note.ts index 460870d2d64..f3e8da07cd8 100644 --- a/packages/angular/src/standalone/directives/ion-note.ts +++ b/packages/angular/src/standalone/directives/ion-note.ts @@ -10,14 +10,14 @@ import { defineCustomElement as defineIonNote } from '@ionic/core/components/ion @ProxyCmp({ defineCustomElementFn: defineIonNote, - inputs: ['color', 'mode', 'theme'] + inputs: ['color', 'hue', 'mode'] }) @Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'theme'], + inputs: ['color', 'hue', 'mode'], }) export class IonNote { protected el: HTMLIonNoteElement; diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index feeeadddac1..d9039024913 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -724,7 +724,8 @@ export const IonNavLink: StencilVueComponent = /*@__PURE__*/ def export const IonNote: StencilVueComponent = /*@__PURE__*/ defineContainer('ion-note', defineIonNote, [ - 'color' + 'color', + 'hue' ]); From f11a991ed414e1c9c70cbe526adaa5b9add2767a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Nov 2026 10:14:01 -0800 Subject: [PATCH 2/3] docs(note): call the removed classes theme classes Co-authored-by: Shane <561207+ShaneK@users.noreply.github.com> --- BREAKING.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index 252d9abe2ee..822c7d0e28c 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -433,7 +433,7 @@ The following breaking changes apply to `ion-note`: 1. `--color` has been replaced. [1](#version-10x-note-replaced-css-variables) 2. The color applied by the `color` prop is now driven by the centralized Ionic Theming system, scoped to the new `hue` property. [2](#version-10x-note-hue) -3. Mode classes (`ion-note.md`, `ion-note.ios`) are no longer supported. [3](#version-10x-note-mode-classes) +3. Theme classes (`ion-note.md`, `ion-note.ios`) are no longer supported. [3](#version-10x-note-theme-classes)
Replaced CSS variables
@@ -459,9 +459,9 @@ When `color` is set, the note color now reads from a token instead of `--ion-col | `bold` | `IonNote.hue.bold.semantic.default.color` | `--ion-note-hue-bold-semantic-default-color` | | `subtle` | `IonNote.hue.subtle.semantic.default.color` | `--ion-note-hue-subtle-semantic-default-color` | -
Mode classes
+
Theme classes
-Remove any instances that target the mode classes: `ion-note.md`, `ion-note.ios`. +Remove any instances that target the theme classes: `ion-note.md`, `ion-note.ios`.

Radio Group

From e2cd08e6ab79ded5abece631eb974425322869de Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Nov 2026 10:20:23 -0800 Subject: [PATCH 3/3] Revert "docs(note): call the removed classes theme classes" This reverts commit f11a991ed414e1c9c70cbe526adaa5b9add2767a. --- BREAKING.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index 822c7d0e28c..252d9abe2ee 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -433,7 +433,7 @@ The following breaking changes apply to `ion-note`: 1. `--color` has been replaced. [1](#version-10x-note-replaced-css-variables) 2. The color applied by the `color` prop is now driven by the centralized Ionic Theming system, scoped to the new `hue` property. [2](#version-10x-note-hue) -3. Theme classes (`ion-note.md`, `ion-note.ios`) are no longer supported. [3](#version-10x-note-theme-classes) +3. Mode classes (`ion-note.md`, `ion-note.ios`) are no longer supported. [3](#version-10x-note-mode-classes)
Replaced CSS variables
@@ -459,9 +459,9 @@ When `color` is set, the note color now reads from a token instead of `--ion-col | `bold` | `IonNote.hue.bold.semantic.default.color` | `--ion-note-hue-bold-semantic-default-color` | | `subtle` | `IonNote.hue.subtle.semantic.default.color` | `--ion-note-hue-subtle-semantic-default-color` | -
Theme classes
+
Mode classes
-Remove any instances that target the theme classes: `ion-note.md`, `ion-note.ios`. +Remove any instances that target the mode classes: `ion-note.md`, `ion-note.ios`.

Radio Group