@ionic/core 8.8.14-dev.11783706459.1d5a7aae → 8.8.14-dev.11783969828.1f28d893

package/dist/collection/components/alert/alert.js

@@ -7,10 +7,8 @@ import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/overlay-control-label";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
-import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
@@ -181,7 +179,22 @@ export class Alert {
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
             var _a;
-            return Object.assign(Object.assign({}, i), { type: i.type || 'text', name: i.name || `${index}`, placeholder: i.placeholder || '', checked: !!i.checked, disabled: !!i.disabled, id: i.id || `alert-input-${this.overlayIndex}-${index}`, cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '', attributes: i.attributes || {}, tabindex: i.type === 'radio' && i !== focusable ? -1 : 0 });
+            return ({
+                type: i.type || 'text',
+                name: i.name || `${index}`,
+                placeholder: i.placeholder || '',
+                value: i.value,
+                label: i.label,
+                checked: !!i.checked,
+                disabled: !!i.disabled,
+                id: i.id || `alert-input-${this.overlayIndex}-${index}`,
+                handler: i.handler,
+                min: i.min,
+                max: i.max,
+                cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '',
+                attributes: i.attributes || {},
+                tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
+            });
         });
     }
     connectedCallback() {
@@ -209,10 +222,6 @@ export class Alert {
             this.gesture.destroy();
             this.gesture = undefined;
         }
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
         (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.buttonGroupResizeObserver = undefined;
     }
@@ -383,61 +392,14 @@ export class Alert {
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
-            var _a, _b;
-            /**
-             * Cast to `SelectAlertInput` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `AlertInput` interface.
-             */
-            const richInput = i;
-            const optionLabelOptions = {
-                id: richInput.id,
-                label: richInput.label,
-                startContent: richInput.startContent,
-                endContent: richInput.endContent,
-                description: richInput.description,
-            };
-            const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox');
-            const defaultJustify = getOverlayLabelJustify(mode, 'checkbox');
-            return (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': !i.disabled, 'ion-activatable': !i.disabled, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: {
-                    'alert-button-inner': true,
-                    [`checkbox-label-placement-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
-                    [`checkbox-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: true,
-                } }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), mode === 'md' && h("ion-ripple-effect", null)));
-        })));
+        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), h("div", { class: "alert-checkbox-label" }, i.label)), mode === 'md' && h("ion-ripple-effect", null))))));
     }
     renderRadio() {
         const inputs = this.processedInputs;
-        const mode = getIonMode(this);
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
-            var _a, _b;
-            /**
-             * Cast to `SelectAlertInput` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `AlertInput` interface.
-             */
-            const richInput = i;
-            const optionLabelOptions = {
-                id: richInput.id,
-                label: richInput.label,
-                startContent: richInput.startContent,
-                endContent: richInput.endContent,
-                description: richInput.description,
-            };
-            const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'radio');
-            const defaultJustify = getOverlayLabelJustify(mode, 'radio');
-            return (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': !i.disabled, 'ion-activatable': !i.disabled, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: {
-                    'alert-button-inner': true,
-                    [`radio-label-placement-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
-                    [`radio-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: true,
-                } }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
-        })));
+        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), h("div", { class: "alert-radio-label" }, i.label)))))));
     }
     renderInput() {
         const inputs = this.processedInputs;
@@ -540,9 +502,9 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '022f3463b8e6c52064b90ec304c524847c3d5ad3', tabindex: "-1", style: {
+        return (h(Host, { key: '8d54ccd725ea634be080e67b56fa5efe498f496c', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'c3cd05738bc2834f54707edeb2fae06ec10d6fd2', tappable: this.backdropDismiss }), h("div", { key: 'b44fadd9ba7ddf073854c5035538d11ae8e66bc2', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: 'fafea048141a6c7957e62aef31faa8041dd610c1', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '3ad9d2d4b7cf425eab8293ddc12eff0fe8df1517', class: "alert-head" }, header && (h("h2", { key: '7d9154f5ee595b7e4da6ecf3a20871f104c1256e', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '1f891f38004be6964e9406b84dd580145c42516a', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '2ab4d344ecb7e384e8f6d3d3e59ee5a1bbcc832c', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '78a4ff09aa3aaafcd0dc2a42d036767d83b3cfa2', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '05a238583342285545587de9dce144a82d779193', tappable: this.backdropDismiss }), h("div", { key: 'e52c53fd9845e66781af01b2a788a291b45a927c', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '8417e52eebca24ff436fab0703666db51072f980', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '5c560d4800b24d41961423718108b54be6cd6f91', class: "alert-head" }, header && (h("h2", { key: '8637b64cd5125b2258115d1c11f3743113658608', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '7a4e61a02c29b16b336d8acaf6569b30de6fe71e', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '30844b6a0a7e3dab46514cd548ecffa86dcd59cb', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '39c824fee1e60ad8d6234c79d22ceb8bba8004af', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/alert/alert.md.css

@@ -1,168 +1,3 @@
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-/**
- * Outer label container has rich content
- * (start, content, description, end) that needs the
- * label to span the available row width.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-content {
-  flex: 1;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.select-option-start,
-.select-option-end {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
-/**
- * Non-rich labels are plain text and should ellipsize when they
- * overflow the row. Rich-content labels switch to flex so the
- * start / content / end pieces can lay out side-by-side and wrap.
- */
-.select-option-label:not(.select-option-label-has-rich-content) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-ion-radio.select-option-has-rich-content::part(label),
-ion-checkbox.select-option-has-rich-content::part(label),
-.select-option-content {
-  flex: 1;
-  /**
-   * Let rich content wrap instead of inheriting the label part's
-   * single-line truncation, so arbitrary slotted elements render
-   * without clipping.
-   */
-  white-space: normal;
-}
-
-/**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content.
- */
-.select-option-start > ion-avatar,
-.select-option-end > ion-avatar {
-  width: 40px;
-  height: 40px;
-}
-
-.select-option-start > ion-icon,
-.select-option-end > ion-icon {
-  width: 24px;
-  height: 24px;
-}
-
-.select-option-start > ion-img,
-.select-option-start > img,
-.select-option-start > svg,
-.select-option-start > ion-thumbnail,
-.select-option-end > ion-img,
-.select-option-end > img,
-.select-option-end > svg,
-.select-option-end > ion-thumbnail {
-  width: 56px;
-  height: 56px;
-}
-
-.select-option-start > video,
-.select-option-end > video {
-  width: 114px;
-  height: 56px;
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -407,39 +242,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
   min-height: inherit;
 }
 
-/**
- * Label is on the right of the radio in LTR and
- * on the left in RTL.
- */
-.radio-label-placement-start,
-.checkbox-label-placement-start {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the radio in LTR and
- * on the right in RTL.
- */
-.radio-label-placement-end,
-.checkbox-label-placement-end {
-  flex-direction: row;
-}
-
-.radio-justify-start,
-.checkbox-justify-start {
-  justify-content: start;
-}
-
-.radio-justify-end,
-.checkbox-justify-end {
-  justify-content: end;
-}
-
-.radio-justify-space-between,
-.checkbox-justify-space-between {
-  justify-content: space-between;
-}
-
 .alert-input-disabled,
 .alert-checkbox-button-disabled .alert-button-inner,
 .alert-radio-button-disabled .alert-button-inner {
@@ -617,10 +419,10 @@ textarea.alert-input {
 }
 
 .alert-head {
-  -webkit-padding-start: 24px;
-  padding-inline-start: 24px;
-  -webkit-padding-end: 24px;
-  padding-inline-end: 24px;
+  -webkit-padding-start: 23px;
+  padding-inline-start: 23px;
+  -webkit-padding-end: 23px;
+  padding-inline-end: 23px;
   padding-top: 20px;
   padding-bottom: 15px;
   text-align: start;
@@ -720,56 +522,30 @@ textarea.alert-input {
 }
 
 .alert-radio-label {
+  -webkit-padding-start: 52px;
+  padding-inline-start: 52px;
+  -webkit-padding-end: 26px;
+  padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  max-width: calc(100% - 20px);
+  flex: 1;
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
-.radio-label-placement-end .alert-radio-label {
-  /**
-   * The label's inline padding clears space for the icon on the icon's side.
-   * When the label is placed at the end, the icon is at the start, so the
-   * larger padding clears it on the start side.
-   */
-  -webkit-padding-start: 56px;
-  padding-inline-start: 56px;
-  -webkit-padding-end: 24px;
-  padding-inline-end: 24px;
-}
-
-.radio-label-placement-start .alert-radio-label {
-  /**
-   * The label's inline padding clears space for the icon on the icon's side.
-   * When the label is placed at the start, the icon is at the end, so the
-   * larger padding clears it on the end side.
-   */
-  -webkit-padding-start: 24px;
-  padding-inline-start: 24px;
-  -webkit-padding-end: 56px;
-  padding-inline-end: 56px;
-}
-
 .alert-radio-icon {
   top: 0;
   border-radius: 50%;
   display: block;
   position: relative;
-  flex-shrink: 0;
   width: 20px;
   height: 20px;
   border-width: 2px;
   border-style: solid;
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
 }
-
-.radio-label-placement-end .alert-radio-icon {
-  inset-inline-start: 24px;
-}
-
-.radio-label-placement-start .alert-radio-icon {
-  inset-inline-end: 24px;
+.alert-radio-icon {
+  inset-inline-start: 26px;
 }
 
 .alert-radio-inner {
@@ -799,42 +575,22 @@ textarea.alert-input {
 }
 
 .alert-checkbox-label {
+  -webkit-padding-start: 53px;
+  padding-inline-start: 53px;
+  -webkit-padding-end: 26px;
+  padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  max-width: calc(100% - 16px);
+  flex: 1;
+  width: calc(100% - 53px);
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
-.checkbox-label-placement-end .alert-checkbox-label {
-  /**
-   * The label's inline padding clears space for the icon on the icon's side.
-   * When the label is placed at the end, the icon is at the start, so the
-   * larger padding clears it on the start side.
-   */
-  -webkit-padding-start: 56px;
-  padding-inline-start: 56px;
-  -webkit-padding-end: 24px;
-  padding-inline-end: 24px;
-}
-
-.checkbox-label-placement-start .alert-checkbox-label {
-  /**
-   * The label's inline padding clears space for the icon on the icon's side.
-   * When the label is placed at the start, the icon is at the end, so the
-   * larger padding clears it on the end side.
-   */
-  -webkit-padding-start: 24px;
-  padding-inline-start: 24px;
-  -webkit-padding-end: 56px;
-  padding-inline-end: 56px;
-}
-
 .alert-checkbox-icon {
   top: 0;
   border-radius: 2px;
   position: relative;
-  flex-shrink: 0;
   width: 16px;
   height: 16px;
   border-width: 2px;
@@ -842,13 +598,8 @@ textarea.alert-input {
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-
-.checkbox-label-placement-end .alert-checkbox-icon {
-  inset-inline-start: 24px;
-}
-
-.checkbox-label-placement-start .alert-checkbox-icon {
-  inset-inline-end: 24px;
+.alert-checkbox-icon {
+  inset-inline-start: 26px;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
@@ -907,7 +658,7 @@ textarea.alert-input {
   overflow: hidden;
 }
 
-.alert-button-group .alert-button-inner {
+.alert-button-inner {
   justify-content: flex-end;
 }
 

package/dist/collection/components/datetime/datetime.ios.css

@@ -218,10 +218,6 @@
   justify-content: space-between;
 }
 
-:host .datetime-action-buttons ion-button {
-  --color: var(--ion-color-primary, #0054e9);
-}
-
 /**
  * The confirm and clear buttons are grouped in a
  * container so that they appear on the end opposite
@@ -376,11 +372,6 @@
 }
 
 .calendar-day:not(.calendar-day-adjacent-day):focus {
-  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
-  box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
-}
-
-:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -425,10 +416,6 @@
 }
 
 :host .time-body-active {
-  color: var(--ion-color-primary, #0054e9);
-}
-
-:host(.ion-color) .time-body-active {
   color: var(--ion-color-base);
 }
 
@@ -437,10 +424,6 @@
 }
 
 :host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
-  color: var(--ion-color-primary, #0054e9);
-}
-
-:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
   color: var(--ion-color-base);
 }
 
@@ -620,11 +603,6 @@ ion-picker {
 
 :host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
-  color: var(--ion-color-primary, #0054e9);
-}
-
-:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,
-:host(.ion-color) .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }
 
@@ -790,12 +768,8 @@ ion-picker {
 }
 
 .calendar-day.calendar-day-active {
-  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
-  font-size: min(1.375rem, 35.2px);
-}
-
-:host(.ion-color) .calendar-day.calendar-day-active {
   background: rgba(var(--ion-color-base-rgb), 0.2);
+  font-size: min(1.375rem, 35.2px);
 }
 
 /**
@@ -803,10 +777,6 @@ ion-picker {
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
-  color: var(--ion-color-primary, #0054e9);
-}
-
-:host(.ion-color) .calendar-day.calendar-day-today {
   color: var(--ion-color-base);
 }
 
@@ -817,13 +787,8 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
-  color: var(--ion-color-primary, #0054e9);
-  font-weight: 600;
-}
-
-:host(.ion-color) .calendar-day.calendar-day-active,
-:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
   color: var(--ion-color-base);
+  font-weight: 600;
 }
 
 /**
@@ -832,11 +797,6 @@ ion-picker {
  * with contrast text.
  */
 :host .calendar-day.calendar-day-today.calendar-day-active {
-  background: var(--ion-color-primary, #0054e9);
-  color: var(--ion-color-primary-contrast, #fff);
-}
-
-:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active {
   background: var(--ion-color-base);
   color: var(--ion-color-contrast);
 }