Merge branch 'ionic-modular' of github.com:ionic-team/ionic-framework into FW-6841

Author: thetaPC

BREAKING.md

@@ -14,6 +14,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 ## Version 9.x
 
+- [Global Styles](#version-9x-global-styles)
 - [Components](#version-9x-components)
   - [Button](#version-9x-button)
   - [Card](#version-9x-card)
@@ -22,6 +23,12 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Item Divider](#version-9x-item-divider)
   - [Spinner](#version-9x-spinner)
 
+<h2 id="version-9x-global-styles">Global Styles</h2>
+
+<h4 id="version-9x-color-steps">Color Steps</h4>
+
+- The deprecated color step CSS variables, `--ion-color-step-[number]`, have been removed and should be replaced with either `--ion-background-color-step-[number]` or `--ion-text-color-step-[number]` depending on the specific use case, as outlined in the [migration guide](https://ionicframework.com/docs/updating/8-0#step-color-tokens).
+
 <h2 id="version-9x-components">Components</h2>
 
 <h4 id="version-9x-button">Button</h4>

core/src/components.d.ts

@@ -14,6 +14,7 @@ import { AlertButton, AlertInput } from "./components/alert/alert-interface";
 import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
+import { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
@@ -53,6 +54,7 @@ export { AlertButton, AlertInput } from "./components/alert/alert-interface";
 export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
+export { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
@@ -876,11 +878,11 @@ export namespace Components {
         /**
           * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"` if both the fill property and theme config are unset.
          */
-        "fill"?: 'outline' | 'solid';
+        "fill"?: IonChipFill;
         /**
           * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"` if both the hue property and theme config are unset.
          */
-        "hue"?: 'bold' | 'subtle';
+        "hue"?: IonChipHue;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -894,11 +896,11 @@ export namespace Components {
         /**
           * 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"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'soft' | 'round' | 'rectangular';
+        "shape"?: IonChipShape;
         /**
           * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
          */
-        "size"?: 'small' | 'large';
+        "size"?: IonChipSize;
     }
     interface IonCol {
         /**
@@ -6842,11 +6844,11 @@ declare namespace LocalJSX {
         /**
           * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"` if both the fill property and theme config are unset.
          */
-        "fill"?: 'outline' | 'solid';
+        "fill"?: IonChipFill;
         /**
           * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"` if both the hue property and theme config are unset.
          */
-        "hue"?: 'bold' | 'subtle';
+        "hue"?: IonChipHue;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -6860,11 +6862,11 @@ declare namespace LocalJSX {
         /**
           * 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"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'soft' | 'round' | 'rectangular';
+        "shape"?: IonChipShape;
         /**
           * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` if both the size property and theme config are unset.
          */
-        "size"?: 'small' | 'large';
+        "size"?: IonChipSize;
     }
     interface IonCol {
         /**

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -115,10 +115,7 @@ $action-sheet-ios-button-background: linear-gradient(
 $action-sheet-ios-button-background-activated: $text-color;
 
 /// @prop - Background color of the selected action sheet button
-$action-sheet-ios-button-background-selected: var(
-  --ion-color-step-150,
-  var(--ion-background-color-step-150, $background-color)
-);
+$action-sheet-ios-button-background-selected: var(--ion-background-color-step-150, $background-color);
 
 /// @prop - Destructive text color of the action sheet button
 $action-sheet-ios-button-destructive-text-color: ion-color(danger, base);

core/src/components/breadcrumb/breadcrumb.ios.vars.scss

@@ -4,25 +4,22 @@
 // --------------------------------------------------
 
 /// @prop - Color of the breadcrumb
-$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));
+$breadcrumb-ios-color: var(--ion-text-color-step-150, #2d4665);
 
 /// @prop - Color of the active breadcrumb
 $breadcrumb-ios-color-active: var(--ion-text-color, #03060b);
 
 /// @prop - Background color of the focused breadcrumb
-$breadcrumb-ios-background-focused: var(
-  --ion-color-step-50,
-  var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))
-);
+$breadcrumb-ios-background-focused: var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7));
 
 /// @prop - Color of the breadcrumb icon
-$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
+$breadcrumb-ios-icon-color: var(--ion-text-color-step-600, #92a0b3);
 
 /// @prop - Color of the breadcrumb icon when active
-$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39));
+$breadcrumb-ios-icon-color-active: var(--ion-text-color-step-150, #242d39);
 
 /// @prop - Color of the breadcrumb icon when focused
-$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78));
+$breadcrumb-ios-icon-color-focused: var(--ion-text-color-step-250, #445b78);
 
 /// @prop - Color of the breadcrumb separator
 $breadcrumb-ios-separator-color: $breadcrumb-separator-color;
@@ -31,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color;
 $breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color;
 
 /// @prop - Background color of the breadcrumb indicator
-$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));
+$breadcrumb-ios-indicator-background: var(--ion-background-color-step-100, #e9edf3);
 
 /// @prop - Background color of the breadcrumb indicator when focused
-$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea));
+$breadcrumb-ios-indicator-background-focused: var(--ion-background-color-step-150, #d9e0ea);

core/src/components/breadcrumb/breadcrumb.md.vars.scss

@@ -4,22 +4,22 @@
 // --------------------------------------------------
 
 /// @prop - Color of the breadcrumb
-$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483));
+$breadcrumb-md-color: var(--ion-text-color-step-400, #677483);
 
 /// @prop - Color of the active breadcrumb
 $breadcrumb-md-color-active: var(--ion-text-color, #03060b);
 
 /// @prop - Color of the focused breadcrumb
-$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));
+$breadcrumb-md-color-focused: var(--ion-text-color-step-200, #35404e);
 
 /// @prop - Background color of the focused breadcrumb
-$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff));
+$breadcrumb-md-background-focused: var(--ion-background-color-step-50, #fff);
 
 /// @prop - Color of the breadcrumb icon
-$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));
+$breadcrumb-md-icon-color: var(--ion-text-color-step-450, #7d8894);
 
 /// @prop - Color of the breadcrumb icon when active
-$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a));
+$breadcrumb-md-icon-color-active: var(--ion-text-color-step-150, #222d3a);
 
 /// @prop - Margin top of the breadcrumb separator
 $breadcrumb-md-separator-margin-top: -1px;
@@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color;
 $breadcrumb-md-indicator-color: $breadcrumb-md-separator-color;
 
 /// @prop - Background color of the breadcrumb indicator
-$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));
+$breadcrumb-md-indicator-background: var(--ion-background-color-step-100, #eef1f3);
 
 /// @prop - Background color of the breadcrumb indicator when focused
-$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8));
+$breadcrumb-md-indicator-background-focused: var(--ion-background-color-step-150, #dfe5e8);

core/src/components/breadcrumb/breadcrumb.vars.scss

@@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px;
 $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size);
 
 /// @prop - Color of the breadcrumb separator
-$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
+$breadcrumb-separator-color: var(--ion-text-color-step-450, #73849a);

core/src/components/checkbox/test/validation/index.html

@@ -24,7 +24,7 @@
         font-size: 12px;
         font-weight: normal;
 
-        color: var(--ion-color-step-600);
+        color: var(--ion-text-color-step-400);
 
         margin-top: 10px;
         margin-bottom: 5px;

core/src/components/chip/chip.interfaces.ts

@@ -13,21 +13,17 @@ export type IonChipRecipe = {
 
   // Hues with fills
   hue?: {
-    bold?: IonChipFillDefinition;
-    subtle?: IonChipFillDefinition;
+    [K in IonChipHue]?: IonChipFillDefinition;
   };
 
   // Sizes
   size?: {
-    small?: IonChipSizeDefinition;
-    large?: IonChipSizeDefinition;
+    [K in IonChipSize]?: IonChipSizeDefinition;
   };
 
   // Shapes
   shape?: {
-    soft?: IonChipShapeDefinition;
-    round?: IonChipShapeDefinition;
-    rectangular?: IonChipShapeDefinition;
+    [K in IonChipShape]?: IonChipShapeDefinition;
   };
 
   // Shared States
@@ -50,11 +46,7 @@ export type IonChipRecipe = {
 };
 
 type IonChipFillDefinition = {
-  solid?: IonChipStateDefinition & {
-    semantic?: IonChipStateDefinition;
-  };
-
-  outline?: IonChipStateDefinition & {
+  [K in IonChipFill]?: IonChipStateDefinition & {
     semantic?: IonChipStateDefinition;
   };
 };
@@ -118,8 +110,13 @@ type IonChipAvatarDefinition = IonChipMediaDefinition & {
 };
 
 export type IonChipConfig = {
-  fill?: 'outline' | 'solid';
-  hue?: 'bold' | 'subtle';
-  size?: 'small' | 'large';
-  shape?: 'soft' | 'round' | 'rectangular';
+  fill?: IonChipFill;
+  hue?: IonChipHue;
+  size?: IonChipSize;
+  shape?: IonChipShape;
 };
+
+export type IonChipFill = 'outline' | 'solid';
+export type IonChipHue = 'bold' | 'subtle';
+export type IonChipSize = 'small' | 'large';
+export type IonChipShape = 'soft' | 'round' | 'rectangular';

core/src/components/chip/chip.tsx

@@ -6,6 +6,8 @@ import { createColorClasses } from '@utils/theme';
 import { config } from '../../global/config';
 import type { Color } from '../../interface';
 
+import type { IonChipFill, IonChipHue, IonChipSize, IonChipShape } from './chip.interfaces';
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  */
@@ -39,7 +41,7 @@ export class Chip implements ComponentInterface {
    *
    * Defaults to `"solid"` if both the fill property and theme config are unset.
    */
-  @Prop() fill?: 'outline' | 'solid';
+  @Prop() fill?: IonChipFill;
 
   /**
    * If `true`, the user cannot interact with the chip.
@@ -52,7 +54,7 @@ export class Chip implements ComponentInterface {
    *
    * Defaults to `"subtle"` if both the hue property and theme config are unset.
    */
-  @Prop() hue?: 'bold' | 'subtle';
+  @Prop() hue?: IonChipHue;
 
   /**
    * Set to `"soft"` for a chip with slightly rounded corners,
@@ -61,15 +63,15 @@ export class Chip implements ComponentInterface {
    *
    * Defaults to `"round"` if both the shape property and theme config are unset.
    */
-  @Prop() shape?: 'soft' | 'round' | 'rectangular';
+  @Prop() shape?: IonChipShape;
 
   // TODO(FW-6266): Determine if `medium` size is needed.
   /**
    * Set to `"small"` for a chip with less height and padding.
    *
    * Defaults to `"large"` if both the size property and theme config are unset.
    */
-  @Prop() size?: 'small' | 'large';
+  @Prop() size?: IonChipSize;
 
   componentDidLoad() {
     if (this.outline) {
@@ -84,8 +86,8 @@ export class Chip implements ComponentInterface {
    * Gets the chip fill. Uses the `fill` property if set, otherwise
    * checks the theme config and falls back to 'solid' if neither is provided.
    */
-  get fillValue(): string {
-    const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as string;
+  get fillValue(): IonChipFill {
+    const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as IonChipFill;
     const fill = this.fill || (this.outline ? 'outline' : undefined) || fillConfig;
 
     return fill;
@@ -95,8 +97,8 @@ export class Chip implements ComponentInterface {
    * Gets the chip hue. Uses the `hue` property if set, otherwise
    * checks the theme config and falls back to 'subtle' if neither is provided.
    */
-  get hueValue(): string {
-    const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as string;
+  get hueValue(): IonChipHue {
+    const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as IonChipHue;
     const hue = this.hue || hueConfig;
 
     return hue;
@@ -106,8 +108,8 @@ export class Chip implements ComponentInterface {
    * Gets the chip shape. Uses the `shape` property if set, otherwise
    * checks the theme config and falls back to 'round' if neither is provided.
    */
-  get shapeValue(): string {
-    const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as string;
+  get shapeValue(): IonChipShape {
+    const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as IonChipShape;
     const shape = this.shape || shapeConfig;
 
     return shape;
@@ -117,8 +119,8 @@ export class Chip implements ComponentInterface {
    * Gets the chip size. Uses the `size` property if set, otherwise
    * checks the theme config and falls back to 'large' if neither is provided.
    */
-  get sizeValue(): string {
-    const sizeConfig = config.getObjectValue('IonChip.size', 'large') as string;
+  get sizeValue(): IonChipSize {
+    const sizeConfig = config.getObjectValue('IonChip.size', 'large') as IonChipSize;
     const size = this.size || sizeConfig;
 
     return size;

core/src/components/datetime-button/datetime-button.scss

@@ -23,7 +23,7 @@
 
   border: none;
 
-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-background-color-step-300, #edeef0);
 
   color: $text-color;