refactor(many): use Sass variables again

thetaPC · thetaPC · commit 91d4483d3250 · 2025-12-04T16:14:53.000-08:00
diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss
@@ -276,7 +276,7 @@ $alert-ios-checkbox-border-style: solid;
 $alert-ios-checkbox-border-radius: 50%;
 
 /// @prop - Border color of the checkbox in the alert when off
-$alert-ios-checkbox-border-color-off: var(--ion-components-ion-item-border-color);
+$alert-ios-checkbox-border-color-off: $item-ios-border-color;
 
 /// @prop - Border color of the checkbox in the alert when on
 $alert-ios-checkbox-border-color-on: ion-color(primary, base);
diff --git a/core/src/components/input-otp/input-otp.ios.scss b/core/src/components/input-otp/input-otp.ios.scss
@@ -16,5 +16,5 @@
 // --------------------------------------------------
 
 :host(.input-otp-fill-outline) {
-  --border-color: var(--ion-components-ion-item-border-color);
+  --border-color: #{$item-ios-border-color};
 }
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
@@ -3,7 +3,7 @@
 
 :host {
   --border-width: #{$hairlines-width};
-  --border-color: var(--ion-components-ion-item-border-color);
+  --border-color: #{$item-ios-border-color};
   --highlight-height: 0px;
 
   font-size: $input-ios-font-size;
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
@@ -9,7 +9,7 @@
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-components-ion-item-border-color);
+  --border-color: #{$item-md-border-color};
   --highlight-height: 2px;
 
   font-size: $input-md-font-size;
diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss
@@ -17,7 +17,7 @@ $item-divider-md-background: $background-color;
 $item-divider-md-font-size: 14px;
 
 /// @prop - Border bottom for the divider
-$item-divider-md-border-bottom: 1px solid var(--ion-components-ion-item-border-color);
+$item-divider-md-border-bottom: 1px solid $item-md-border-color;
 
 /// @prop - Padding start for the divider
 $item-divider-md-padding-start: $item-md-padding-start;
diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss
@@ -55,7 +55,7 @@ $item-ios-border-bottom-width: $hairlines-width;
 $item-ios-border-bottom-style: solid;
 
 /// @prop - Border bottom color for the item when lines are displayed
-$item-ios-border-bottom-color: var(--ion-components-ion-item-border-color);
+$item-ios-border-bottom-color: $item-ios-border-color;
 
 // Item Slots
 // --------------------------------------------------
diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss
@@ -40,7 +40,7 @@ $item-md-border-bottom-width: 1px;
 $item-md-border-bottom-style: solid;
 
 /// @prop - Border bottom color for the item when lines are displayed
-$item-md-border-bottom-color: var(--ion-components-ion-item-border-color);
+$item-md-border-bottom-color: $item-md-border-color;
 
 // Item Label
 // --------------------------------------------------
diff --git a/core/src/components/picker-legacy/picker.ios.vars.scss b/core/src/components/picker-legacy/picker.ios.vars.scss
@@ -7,7 +7,7 @@
 $picker-ios-height: 260px;
 
 /// @prop - Border color of the picker wrapper
-$picker-ios-border-color: var(--ion-components-ion-item-border-color);
+$picker-ios-border-color: $item-ios-border-color;
 
 /// @prop - Background Color of the picker wrapper
 $picker-ios-background-color: $background-color;
diff --git a/core/src/components/picker-legacy/picker.md.vars.scss b/core/src/components/picker-legacy/picker.md.vars.scss
@@ -7,7 +7,7 @@
 $picker-md-height: 260px;
 
 /// @prop - Border color of the picker wrapper
-$picker-md-border-color: var(--ion-components-ion-item-border-color);
+$picker-md-border-color: $item-md-border-color;
 
 /// @prop - Background Color of the picker wrapper
 $picker-md-background-color: $background-color;
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
@@ -6,7 +6,7 @@
 
 :host {
   --border-width: #{$hairlines-width};
-  --border-color: var(--ion-components-ion-item-border-color);
+  --border-color: #{$item-ios-border-color};
   --highlight-height: 0px;
 }
 
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
@@ -8,7 +8,7 @@
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-components-ion-item-border-color);
+  --border-color: #{$item-md-border-color};
   --highlight-height: 2px;
 }
 
diff --git a/core/src/components/split-pane/split-pane.ios.vars.scss b/core/src/components/split-pane/split-pane.ios.vars.scss
@@ -10,4 +10,4 @@ $split-pane-ios-side-min-width: $split-pane-side-min-width;
 $split-pane-ios-side-max-width: $split-pane-side-max-width;
 
 /// @prop - Border style of the side pane
-$split-pane-ios-border: $hairlines-width solid var(--ion-components-ion-item-border-color);
+$split-pane-ios-border: $hairlines-width solid $item-ios-border-color;
diff --git a/core/src/components/split-pane/split-pane.md.vars.scss b/core/src/components/split-pane/split-pane.md.vars.scss
@@ -10,4 +10,4 @@ $split-pane-md-side-min-width: $split-pane-side-min-width;
 $split-pane-md-side-max-width: $split-pane-side-max-width;
 
 /// @prop - Border style of the side pane
-$split-pane-md-border: 1px solid var(--ion-components-ion-item-border-color);
+$split-pane-md-border: 1px solid $item-md-border-color;
diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss
@@ -7,7 +7,7 @@
 
 :host {
   --border-width: #{$hairlines-width};
-  --border-color: var(--ion-components-ion-item-border-color);
+  --border-color: #{$item-ios-border-color};
   --padding-top: #{$textarea-ios-padding-top};
   --padding-end: 0px;
   --padding-bottom: #{$textarea-padding-bottom};
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
@@ -9,7 +9,7 @@
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-components-ion-item-border-color);
+  --border-color: #{$item-md-border-color};
   --padding-top: 18px;
   --padding-end: 0px;
   --padding-bottom: #{$textarea-padding-bottom};
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts b/core/src/components/toolbar/test/basic/toolbar.e2e.ts
@@ -41,7 +41,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'] }).forEa
       await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-long-text`));
     });
 
-    test('should not have visual regressions with icon-only buttons', async ({ page }) => {
+    test.only('should not have visual regressions with icon-only buttons', async ({ page }) => {
       await page.setContent(
         `
           <ion-header>
diff --git a/core/src/themes/native/native.theme.default.ios.scss b/core/src/themes/native/native.theme.default.ios.scss
@@ -23,6 +23,7 @@ $toolbar-ios-color: var(--ion-toolbar-color, $text-color);
 // iOS List & List Items
 // --------------------------------------------------
 $item-ios-background: var(--ion-item-background, $background-color);
+$item-ios-border-color: var(--ion-components-ion-item-border-color);
 $item-ios-color: var(--ion-item-color, $text-color);
 
 // iOS Card
diff --git a/core/src/themes/native/native.theme.default.md.scss b/core/src/themes/native/native.theme.default.md.scss
@@ -25,6 +25,7 @@ $toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242));
 // Material Design List & List Items
 // --------------------------------------------------
 $item-md-background: var(--ion-item-background, $background-color);
+$item-md-border-color: var(--ion-components-ion-item-border-color);
 $item-md-color: var(--ion-item-color, $text-color);
 
 // Material Design Card

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,5 @@`
`16`	`16`	`// --------------------------------------------------`
`17`	`17`
`18`	`18`	`:host(.input-otp-fill-outline) {`
`19`		`- --border-color: var(--ion-components-ion-item-border-color);`
	`19`	`+ --border-color: #{$item-ios-border-color};`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`
`7`	`7`	`:host {`
`8`	`8`	`--border-width: #{$hairlines-width};`
`9`		`- --border-color: var(--ion-components-ion-item-border-color);`
	`9`	`+ --border-color: #{$item-ios-border-color};`
`10`	`10`	`--highlight-height: 0px;`
`11`	`11`	`}`
`12`	`12`