fix(segment): fix css var + host-context()

core/src/components/segment-button/readme.md

@@ -26,24 +26,23 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
 
 ## CSS Custom Properties
 
-| Name               | Description                  |
+| Name                 | Description                  |
-| ------------------ | ---------------------------- |
+| -------------------- | ---------------------------- |
-| `--background`     | Background of the button     |
+| `--border-radius`    | Radius of the button border  |
-| `--border-color`   | Color of the button border   |
+| `--border-style`     | Style of the button border   |
-| `--border-radius`  | Radius of the button border  |
+| `--border-width`     | Width of the button border   |
-| `--border-style`   | Style of the button border   |
+| `--btn-background`   | Background of the button     |
-| `--border-width`   | Width of the button border   |
+| `--btn-border-color` | Color of the button border   |
-| `--color`          | Color of the button text     |
+| `--icon-size`        | Size of the button icon      |
-| `--icon-size`      | Size of the button icon      |
+| `--margin-bottom`    | Bottom margin of the button  |
-| `--margin-bottom`  | Bottom margin of the button  |
+| `--margin-end`       | End margin of the button     |
-| `--margin-end`     | End margin of the button     |
+| `--margin-start`     | Start margin of the button   |
-| `--margin-start`   | Start margin of the button   |
+| `--margin-top`       | Top margin of the button     |
-| `--margin-top`     | Top margin of the button     |
+| `--padding-bottom`   | Bottom padding of the button |
-| `--padding-bottom` | Bottom padding of the button |
+| `--padding-end`      | End padding of the button    |
-| `--padding-end`    | End padding of the button    |
+| `--padding-start`    | Start padding of the button  |
-| `--padding-start`  | Start padding of the button  |
+| `--padding-top`      | Top padding of the button    |
-| `--padding-top`    | Top padding of the button    |
+| `--transition`       | Transition of the button     |
-| `--transition`     | Transition of the button     |
 
 
 ----------------------------------------------

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

@@ -5,12 +5,11 @@
 
 :host {
   /**
-   * @prop --background: Background of the button
+   * @prop --btn-background: Background of the button
-   * @prop --border-color: Color of the button border
+   * @prop --btn-border-color: Color of the button border
    * @prop --border-radius: Radius of the button border
    * @prop --border-style: Style of the button border
    * @prop --border-width: Width of the button border
-   * @prop --color: Color of the button text
    * @prop --icon-size: Size of the button icon
    * @prop --margin-top: Top margin of the button
    * @prop --margin-end: End margin of the button
@@ -27,10 +26,12 @@
   --padding-top: 0;
   --padding-bottom: 0;
   --icon-size: 1em;
+  --btn-background: inherit;
+  --btn-border-color: inherit;
 
   flex: 1;
 
-  color: var(--color);
+  color: inherit;
 
   text-decoration: none;
   text-overflow: ellipsis;
@@ -70,10 +71,9 @@
 
   border-width: var(--border-width);
   border-style: var(--border-style);
-  border-color: var(--border-color);
+  border-color: var(--btn-border-color);
 
-  background: var(--background);
+  background: var(--btn-background);
-  color: inherit;
 
   contain: content;
   cursor: pointer;

core/src/components/segment/segment.ios.scss

@@ -37,24 +37,36 @@
 }
 
 ::slotted(.segment-button-disabled) {
-  --border-color: var(--border-color-disabled);
+  --btn-border-color: var(--border-color-disabled);
-  --color: var(--color-disabled);
+
+  color: var(--color-disabled);
 }
 
-:host(.ion-color) ::slotted(.segment-button-disabled) {
+:host(.ion-color)::slotted(ion-segment-button) {
-  --border-color: #{current-color(base)};
+  color: #{current-color(base)};
-  --color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
+}
+
+:host(.ion-color)::slotted(.segment-button-checked) {
+  --btn-background: #{current-color(base)};
+  --btn-border-color: #{current-color(base)};
+  color: #{current-color(contrast)};
+}
+
+:host(.ion-color)::slotted(.segment-button-disabled) {
+  --btn-border-color: #{current-color(base)};
+  color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
 }
 
 // iOS Segment in Toolbar
 // --------------------------------------------------
-:host(.in-toolbar) {
+:host-context(ion-toolbar) {
   @include position(0, 0, 0, 0);
+  @include margin(0);
 
   position: absolute;
 }
 
-:host(.in-toolbar) ::slotted(ion-segment-button) {
+:host-context(ion-toolbar)::slotted(ion-segment-button) {
   max-width: $segment-button-ios-toolbar-button-max-width;
   height: $segment-button-ios-toolbar-button-height;
 
@@ -63,7 +75,7 @@
   line-height: $segment-button-ios-toolbar-line-height;
 }
 
-:host(.in-color-toolbar:not(.ion-color)) {
+:host-context(ion-toolbar.ion-color):not(.ion-color) {
   --color: #{current-color(contrast)};
   --color-checked: #{current-color(base)};
   --color-disabled: #{current-color(contrast, $segment-button-ios-opacity-disabled)};

core/src/components/segment/segment.md.scss

@@ -16,6 +16,19 @@
   opacity: $segment-md-opacity-disabled;
 }
 
+// Material Design Segment Button Color
+// --------------------------------------------------
+
+:host-context(ion-toolbar.ion-color):not(.ion-color) {
+  --color: currentColor;
+  --color-checked: currentColor;
+}
+
+:host(.ion-color)::slotted(.segment-button-checked) {
+  color: #{current-color(base)};
+}
+
+
 // Material Design Segment Button
 // --------------------------------------------------
 
@@ -26,7 +39,6 @@
   --padding-start: #{$segment-button-md-padding-start};
   --border-width: #{0 0 $segment-button-md-border-bottom-width 0};
   --border-style: solid;
-  --opacity: #{$segment-button-md-opacity};
   --transition: #{$segment-button-md-transition};
   --icon-size: #{$segment-button-md-icon-size};
 
@@ -45,11 +57,6 @@
 // Checked Segment Button
 // --------------------------------------------------
 
-:host(.ion-color) ::slotted(.segment-button-checked) {
-  --background: transparent;
-  --color: #{current-color(base)};
-}
-
 ::slotted(.activated),
 ::slotted(.segment-button-checked) {
   opacity: $segment-button-md-opacity-activated;
@@ -61,11 +68,3 @@
 ::slotted(.segment-button-disabled) {
   opacity: $segment-button-md-opacity-disabled;
 }
-
-// In Toolbar
-// --------------------------------------------------
-
-:host(.in-color-toolbar:not(.ion-color)) {
-  --color: #{current-color(contrast)};
-  --color-checked: #{current-color(contrast)};
-}

core/src/components/segment/segment.scss

@@ -30,32 +30,23 @@
   text-align: center;
 }
 
-:host(.segment-disabled) {
-  pointer-events: none;
-}
-
 ::slotted(ion-segment-button) {
-  --color: inherit;
+  --btn-background: var(--background);
-  --background: inherit;
+  --btn-border-color: var(--border-color);
-  --border-color: inherit;
-}
 
-:host(.ion-color) ::slotted(ion-segment-button) {
+  color: var(--color);
-  --color: #{current-color(base)};
 }
 
 ::slotted(.segment-button-checked) {
-  --color: var(--color-checked);
+  --btn-background: var(--background-checked);
-  --background: var(--background-checked);
+  --btn-border-color: var(--border-color-checked);
-  --border-color: var(--border-color-checked);
+
+  color: var(--color-checked);
 }
 
-:host(.ion-color) ::slotted(.segment-button-checked) {
+// Disabled
-  --background: #{current-color(base)};
-  --border-color: #{current-color(base)};
-  --color: #{current-color(contrast)};
-}
 
+:host(.segment-disabled),
 ::slotted(.segment-button-disabled) {
   pointer-events: none;
 }

core/src/components/segment/segment.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 
 import { Color, Mode, TextInputChangeEvent } from '../../interface';
-import { createColorClasses, hostContext } from '../../utils/theme';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-segment',
@@ -9,7 +9,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
     ios: 'segment.ios.scss',
     md: 'segment.md.scss'
   },
-  shadow: true
+  scoped: true
 })
 export class Segment {
 
@@ -81,15 +81,8 @@ export class Segment {
       class: {
         ...createColorClasses(this.color),
 
-        'segment-disabled': this.disabled,
+        'segment-disabled': this.disabled
-        'in-toolbar': hostContext('ion-toolbar', this.el),
-        'in-color-toolbar': hostContext('ion-toolbar.ion-color', this.el)
       }
     };
   }
-
-  render() {
-    return <slot></slot>;
-  }
-
 }