feat(segment): add ionic theme styles

Author: brandyscarney

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

@@ -84,6 +84,22 @@
   z-index: 1;
 }
 
+// Segment Button: Checked
+// --------------------------------------------------
+
+:host(.segment-button-checked) {
+  background: var(--background-checked);
+  color: var(--color-checked);
+}
+
+// Segment Button: Disabled
+// --------------------------------------------------
+
+:host(.segment-button-disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+
 // Segment Button Icon
 // --------------------------------------------------
 
@@ -153,7 +169,8 @@
 // --------------------------------------------------
 
 .segment-button-indicator {
-  // @include transform-origin(left);
+  @include position(null, 0, 0, 0);
+  @include transform-origin(left);
 
   position: absolute;
 
@@ -170,6 +187,8 @@
   width: 100%;
   height: var(--indicator-height);
 
+  background: var(--indicator-color);
+
   transform: var(--indicator-transform);
 
   box-shadow: var(--indicator-box-shadow);

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

@@ -1,8 +1,68 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "./segment-button.common";
 
 // Ionic Segment Button
 // --------------------------------------------------
 
 :host {
+  --background: #{globals.$ionic-color-base-white};
+  --background-checked: var(--background);
+  --color: #{globals.$ionic-color-neutral-1000};
+  --color-checked: #{globals.$ionic-color-primary-base};
+  --color-disabled: #{globals.$ionic-color-neutral-500};
+  --indicator-color: var(--color-checked);
+  --indicator-height: #{globals.$ionic-border-size-025};
+  --indicator-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --indicator-transform: none;
+  --padding-top: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-200};
+  --padding-bottom: #{globals.$ionic-space-100};
+  --padding-start: #{globals.$ionic-space-200};
+  --transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
 
+  min-width: globals.$ionic-scale-1200;
+  min-height: globals.$ionic-scale-1200;
+
+  border-bottom: globals.$ionic-border-size-025 globals.$ionic-border-style-solid globals.$ionic-color-neutral-300;
+}
+
+.button-inner {
+  @include padding(globals.$ionic-space-100, null, globals.$ionic-space-100, null);
+
+  gap: globals.$ionic-space-100;
+}
+
+// Segment Button Label
+// --------------------------------------------------
+
+::slotted(ion-label) {
+  @include globals.typography(globals.$ionic-action-md);
+
+  color: var(--color);
+}
+
+// Segment Button Icon
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+
+  color: var(--color);
+}
+
+// Segment Button: Checked
+// --------------------------------------------------
+
+:host(.segment-button-checked) ::slotted(ion-label),
+:host(.segment-button-checked) ::slotted(ion-icon) {
+  color: var(--color-checked);
+}
+
+// Segment Button: Disabled
+// --------------------------------------------------
+
+:host(.segment-button-disabled) ::slotted(ion-label),
+:host(.segment-button-disabled) ::slotted(ion-icon) {
+  color: var(--color-disabled);
 }

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

@@ -100,16 +100,11 @@
 
 .segment-button-indicator {
   @include padding(null, $segment-button-ios-margin);
-  @include position(0, 0, 0, 0);
 }
 
 .segment-button-indicator-background {
   @include border-radius(var(--border-radius));
 
-  background: var(--indicator-color);
-}
-
-.segment-button-indicator-background {
   transition: var(--indicator-transition);
 }
 

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

@@ -177,14 +177,6 @@
 // Segment Button: Indicator
 // --------------------------------------------------
 
-.segment-button-indicator {
-  @include position(null, 0, 0, 0);
-}
-
-.segment-button-indicator-background {
-  background: var(--indicator-color);
-}
-
 // Segment button indicator color should use the background checked variable with
 // a fallback to the default value of --indicator-color
 :host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background {

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

@@ -46,7 +46,6 @@
   --color: initial;
   --color-hover: var(--color);
   --color-checked: var(--color);
-  --color-disabled: var(--color);
   --padding-start: 0;
   --padding-end: 0;
   --padding-top: 0;
@@ -61,22 +60,6 @@
   @include button-state();
 }
 
-// Segment Button: Checked
-// --------------------------------------------------
-
-:host(.segment-button-checked) {
-  background: var(--background-checked);
-  color: var(--color-checked);
-}
-
-// Segment Button: Disabled
-// --------------------------------------------------
-
-:host(.segment-button-disabled) {
-  cursor: default;
-  pointer-events: none;
-}
-
 // Segment Button: Focused
 // --------------------------------------------------
 

core/src/components/segment/segment.ionic.scss

@@ -1,9 +1,10 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./segment.common";
 
 // Ionic Segment
 // --------------------------------------------------
 
 :host {
-
+  --background: #{globals.$ionic-color-base-white};
 }