feat(chip, spinner): remove old CSS variables

Author: thetaPC

core/api.txt

@@ -602,11 +602,6 @@ ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
-ion-chip,css-prop,--border-radius
-ion-chip,css-prop,--color
-ion-chip,css-prop,--focus-ring-color
-ion-chip,css-prop,--focus-ring-style
-ion-chip,css-prop,--focus-ring-width
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false
@@ -2309,7 +2304,6 @@ ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
-ion-spinner,css-prop,--color
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true

core/src/components/chip/chip.scss

@@ -5,19 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  /**
-   * @prop --border-radius: Border radius of the chip
-   * @prop --color: Color of the chip
-   * @prop --focus-ring-color: Color of the focus ring
-   * @prop --focus-ring-style: Style of the focus ring
-   * @prop --focus-ring-width: Width of the focus ring
-   */
-  --focus-ring-color: var(--ion-chip-state-focus-ring-color);
-  --focus-ring-style: var(--ion-chip-state-focus-ring-style);
-  --focus-ring-width: var(--ion-chip-state-focus-ring-width);
-
   @include mixins.font-smoothing();
-  @include mixins.border-radius(var(--border-radius));
   @include mixins.margin(
     var(--ion-chip-margin-top),
     var(--ion-chip-margin-end),
@@ -37,8 +25,6 @@
   align-items: center;
   justify-content: center;
 
-  color: var(--color);
-
   font-weight: var(--ion-chip-font-weight);
 
   letter-spacing: var(--ion-chip-letter-spacing);
@@ -72,15 +58,15 @@
 // ---------------------------------------------
 
 :host(.chip-shape-soft) {
-  --border-radius: var(--ion-chip-shape-soft-border-radius);
+  @include mixins.border-radius(var(--ion-chip-shape-soft-border-radius));
 }
 
 :host(.chip-shape-round) {
-  --border-radius: var(--ion-chip-shape-round-border-radius);
+  @include mixins.border-radius(var(--ion-chip-shape-round-border-radius));
 }
 
 :host(.chip-shape-rectangular) {
-  --border-radius: var(--ion-chip-shape-rectangular-border-radius);
+  @include mixins.border-radius(var(--ion-chip-shape-rectangular-border-radius));
 }
 
 // Chip: Bold Solid
@@ -358,7 +344,11 @@
 
 // Focus
 :host(.ion-focused) {
-  @include mixins.focused-state(var(--focus-ring-width), var(--focus-ring-style), var(--focus-ring-color));
+  @include mixins.focused-state(
+    var(--ion-chip-state-focus-ring-width),
+    var(--ion-chip-state-focus-ring-style),
+    var(--ion-chip-state-focus-ring-color)
+  );
 }
 
 // Chip Slotted Elements

core/src/components/spinner/spinner.scss

@@ -5,15 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  /**
-   * @prop --color: Color of the spinner
-   */
-  --color: var(--ion-spinner-color);
-
   display: inline-block;
   position: relative;
 
-  color: var(--color);
+  color: var(--ion-spinner-color);
 
   user-select: none;
 }