@ionic/core 8.8.14-dev.11784238294.131cd99d → 8.8.14-dev.11784563563.137a903a

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

@@ -1,3 +1,168 @@
+/**
+ * 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
@@ -242,6 +407,39 @@
   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 {
@@ -419,10 +617,10 @@ textarea.alert-input {
 }
 
 .alert-head {
-  -webkit-padding-start: 23px;
-  padding-inline-start: 23px;
-  -webkit-padding-end: 23px;
-  padding-inline-end: 23px;
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 15px;
   text-align: start;
@@ -522,30 +720,56 @@ 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;
-  flex: 1;
+  max-width: calc(100% - 20px);
   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));
 }
-.alert-radio-icon {
-  inset-inline-start: 26px;
+
+.radio-label-placement-end .alert-radio-icon {
+  inset-inline-start: 24px;
+}
+
+.radio-label-placement-start .alert-radio-icon {
+  inset-inline-end: 24px;
 }
 
 .alert-radio-inner {
@@ -575,22 +799,42 @@ 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;
-  flex: 1;
-  width: calc(100% - 53px);
+  max-width: calc(100% - 16px);
   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;
@@ -598,8 +842,13 @@ textarea.alert-input {
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-.alert-checkbox-icon {
-  inset-inline-start: 26px;
+
+.checkbox-label-placement-end .alert-checkbox-icon {
+  inset-inline-start: 24px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-icon {
+  inset-inline-end: 24px;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
@@ -658,7 +907,7 @@ textarea.alert-input {
   overflow: hidden;
 }
 
-.alert-button-inner {
+.alert-button-group .alert-button-inner {
   justify-content: flex-end;
 }
 

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

@@ -218,6 +218,10 @@
   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
@@ -372,6 +376,11 @@
 }
 
 .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);
 }
@@ -416,6 +425,10 @@
 }
 
 :host .time-body-active {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .time-body-active {
   color: var(--ion-color-base);
 }
 
@@ -424,6 +437,10 @@
 }
 
 :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);
 }
 
@@ -603,6 +620,11 @@ 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);
 }
 
@@ -768,15 +790,23 @@ ion-picker {
 }
 
 .calendar-day.calendar-day-active {
-  background: rgba(var(--ion-color-base-rgb), 0.2);
+  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);
+}
+
 /**
  * Day that today but not selected
  * 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);
 }
 
@@ -787,16 +817,26 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
-  color: var(--ion-color-base);
+  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);
+}
+
 /**
  * Day that is selected and is today
  * should have base background color
  * 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);
 }

package/dist/collection/components/datetime/datetime.js

@@ -75,12 +75,6 @@ export class Datetime {
             isAdjacentDay: false,
         };
         this.isTimePopoverOpen = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -1256,7 +1250,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
                 ev.stopPropagation();
-            } }, items.map((item) => (h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
+            } }, items.map((item) => (h("ion-picker-column-option", { color: this.color, part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -1329,7 +1323,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
                 ev.stopPropagation();
-            } }, days.map((day) => (h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
+            } }, days.map((day) => (h("ion-picker-column-option", { color: this.color, part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
@@ -1344,7 +1338,7 @@ export class Datetime {
                     this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
                 }
                 ev.stopPropagation();
-            } }, months.map((month) => (h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
+            } }, months.map((month) => (h("ion-picker-column-option", { color: this.color, part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
@@ -1359,7 +1353,7 @@ export class Datetime {
                     this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
                 }
                 ev.stopPropagation();
-            } }, years.map((year) => (h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
+            } }, years.map((year) => (h("ion-picker-column-option", { color: this.color, part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -1392,7 +1386,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
+            } }, hoursData.map((hour) => (h("ion-picker-column-option", { color: this.color, part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
         const { disabled, workingParts } = this;
@@ -1403,7 +1397,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
+            } }, minutesData.map((minute) => (h("ion-picker-column-option", { color: this.color, part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
         const { disabled, workingParts } = this;
@@ -1417,7 +1411,7 @@ export class Datetime {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
+            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { color: this.color, part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
@@ -1754,7 +1748,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '79b906669d3e0d9ff356421a5f571d5cf12b6793', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1764,7 +1758,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: 'e29ce6edd79f3efb8f7cc4a81bb543d580e5f4c6', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -1806,8 +1800,7 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
+                "attribute": "color"
             },
             "name": {
                 "type": "string",

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

@@ -218,6 +218,10 @@
   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
@@ -372,6 +376,11 @@
 }
 
 .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);
 }
@@ -416,6 +425,10 @@
 }
 
 :host .time-body-active {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .time-body-active {
   color: var(--ion-color-base);
 }
 
@@ -424,6 +437,10 @@
 }
 
 :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);
 }
 
@@ -548,6 +565,10 @@ ion-picker {
  */
 :host {
   --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
+  --title-color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) {
   --title-color: var(--ion-color-contrast);
 }
 
@@ -558,10 +579,14 @@ ion-picker {
   padding-inline-end: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
-  background: var(--ion-color-base);
+  background: var(--ion-color-primary, #0054e9);
   color: var(--title-color);
 }
 
+:host(.ion-color) .datetime-header {
+  background: var(--ion-color-base);
+}
+
 :host .datetime-header .datetime-title {
   font-size: 0.75rem;
   text-transform: uppercase;
@@ -643,6 +668,11 @@ ion-picker {
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
+  border: 1px solid var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today {
   border: 1px solid var(--ion-color-base);
   color: var(--ion-color-base);
 }
@@ -654,11 +684,22 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
   color: var(--ion-color-contrast);
 }
 
 .calendar-day.calendar-day-active,
 .calendar-day.calendar-day-active:focus {
+  border: 1px solid var(--ion-color-primary, #0054e9);
+  background: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-active:focus {
   border: 1px solid var(--ion-color-base);
   background: var(--ion-color-base);
 }

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

@@ -82,6 +82,11 @@
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.time-active) #time-button,
+:host(.ion-color.date-active) #date-button {
   color: var(--ion-color-base);
 }