@rdlabo/ionic-theme-ios27 1.0.2 → 1.0.3-beta.pr198.sha4493fd0903d8

package/docs/special-markup.md

@@ -101,7 +101,7 @@ Add `.segment-style-glass` to give a segment the same glass surface and selected
 </ion-segment>
 ```
 
-For colored segments, use Ionic's `color` property (for example, `color="primary"` or `color="secondary"`). The selected surface uses the palette's base color and the selected label uses its contrast color. The optional moving glass inherits the same surface color; custom Ionic palettes work without additional registration.
+For colored segments, use Ionic's `color` property (for example, `color="primary"` or `color="secondary"`). Ionic uses the palette's base color for the softly tinted track while keeping the selected surface and labels neutral. A surrounding colored toolbar only supplies colors when the segment has no color of its own. The optional moving glass inherits the selected surface color, and custom Ionic palettes work without additional registration.
 
 Add `.segment-expand` when segment buttons should divide the available width evenly. The class also changes the Liquid Glass effect sizing when `registerSegmentEffect` is used.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.3-beta.pr198.sha4493fd0903d8",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/styles/components/ion-segment.scss

@@ -82,8 +82,12 @@ ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
     }
   }
 
-  ion-segment-button:is(.in-toolbar-color, .in-segment-color)::part(indicator-background) {
-    // Ionic sets a direct background for color contexts, bypassing --indicator-color.
+  ion-segment-button.in-segment-color::part(indicator-background) {
+    // Ionic sets a direct background for segment color contexts, bypassing --indicator-color.
+    background: var(--indicator-color);
+  }
+
+  ion-segment-button.in-toolbar-color:not(.in-segment-color)::part(indicator-background) {
     background: var(--indicator-color);
   }
 
@@ -93,12 +97,6 @@ ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
     }
   }
 
-  &.in-toolbar-color:not(.in-segment-color) {
-    ion-segment-button:not(.segment-button-checked)::part(native) {
-      color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1);
-    }
-  }
-
   // The indicator grows independently; the label has no additional scale.
   &:not(.ios27-enable-gesture, .segment-disabled):is(.segment-activated, :has(ion-segment-button:is(:active, .ion-activated))) {
     ion-segment-button.segment-button-checked:not(.segment-button-disabled)::part(indicator-background) {
@@ -201,7 +199,8 @@ ion-segment-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
 :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button) {
   --indicator-color: var(--ion-background-color, #fff);
 }
-:where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled).ion-color ion-segment-button.in-segment-color) {
-  --indicator-color: var(--ion-color-base);
-  --color-checked: var(--ion-color-contrast);
+:where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button.in-toolbar-color:not(.in-segment-color)) {
+  // Match Ionic's colored-toolbar contract while preserving its public
+  // toolbar and segment-button customization properties.
+  --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-contrast));
 }

package/src/styles/utils/dark/ion-segment.scss

@@ -32,7 +32,10 @@
   :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled)) {
     --background: rgba(var(--ion-color-medium-rgb, 152, 154, 162), 0.19);
   }
-  :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled, .ion-color) ion-segment-button:not(.ion-color, .in-segment-color)) {
+  :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button) {
     --indicator-color: color-mix(in srgb, rgb(var(--ion-color-medium-rgb, 152, 154, 162)) 59%, var(--ion-background-color, #000));
   }
+  :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button.in-toolbar-color:not(.in-segment-color)) {
+    --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-contrast));
+  }
 }