From e982e8a23689df5aedaf67f7f0c6029c541db0a1 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 22 Aug 2023 16:01:00 -0400
Subject: [PATCH] chore: visually update two components

---
 core/src/components/button/button.scss     | 22 +++++++---------------
 core/src/components/checkbox/checkbox.scss |  8 ++------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index c6668701c5..15cd816729 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -64,11 +64,13 @@
   vertical-align: -webkit-baseline-middle; // the best for those that support it
 
   font-kerning: none;
+
+  transform: scale(2);
 }
 
 :host(.button-disabled) {
   cursor: default;
-  opacity: .5;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -81,7 +83,6 @@
   --color: #{ion-color(primary, contrast)};
 }
 
-
 // Outline Button
 // --------------------------------------------------
 
@@ -92,7 +93,6 @@
   --color: #{ion-color(primary, base)};
 }
 
-
 // Clear Button
 // --------------------------------------------------
 
@@ -103,7 +103,6 @@
   --color: #{ion-color(primary, base)};
 }
 
-
 // Block Button
 // --------------------------------------------------
 
@@ -125,7 +124,6 @@
   clear: both;
 }
 
-
 // Full Button
 // --------------------------------------------------
 
@@ -210,16 +208,14 @@
   z-index: 1;
 }
 
-
 // Button Slots
 // --------------------------------------------------
 
-::slotted([slot=start]),
-::slotted([slot=end]) {
+::slotted([slot="start"]),
+::slotted([slot="end"]) {
   flex-shrink: 0;
 }
 
-
 // Button Icons
 // --------------------------------------------------
 
@@ -229,18 +225,17 @@
 }
 
 ::slotted(ion-icon[slot="start"]) {
-  @include margin(0, .3em, 0, -.3em);
+  @include margin(0, 0.3em, 0, -0.3em);
 }
 
 ::slotted(ion-icon[slot="end"]) {
-  @include margin(0, -.2em, 0, .3em);
+  @include margin(0, -0.2em, 0, 0.3em);
 }
 
 ::slotted(ion-icon[slot="icon-only"]) {
   font-size: 1.8em;
 }
 
-
 // Button Ripple effect
 // --------------------------------------------------
 
@@ -248,7 +243,6 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
-
 // Button: States
 // --------------------------------------------------
 
@@ -291,7 +285,6 @@ ion-ripple-effect {
   opacity: var(--background-activated-opacity);
 }
 
-
 // Button Colors
 // --------------------------------------------------
 
@@ -315,7 +308,6 @@ ion-ripple-effect {
   color: current-color(base);
 }
 
-
 // Button in Toolbar
 // --------------------------------------------------
 
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 9f2b6269ea..76dca66bef 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -36,6 +36,8 @@
 
   user-select: none;
   z-index: $z-index-item-input;
+
+  transform: scale(2);
 }
 
 :host(.in-item) {
@@ -165,7 +167,6 @@ input {
   opacity: 0;
 }
 
-
 // Justify Content
 // ---------------------------------------------
 
@@ -181,7 +182,6 @@ input {
   justify-content: end;
 }
 
-
 // Label Placement - Start
 // ----------------------------------------------------------------
 
@@ -202,7 +202,6 @@ input {
   @include margin(null, $form-control-label-margin, null, 0);
 }
 
-
 // Label Placement - End
 // ----------------------------------------------------------------
 
@@ -223,7 +222,6 @@ input {
   @include margin(null, 0, null, $form-control-label-margin);
 }
 
-
 // Label Placement - Fixed
 // ----------------------------------------------------------------
 
@@ -248,7 +246,6 @@ input {
   max-width: 200px;
 }
 
-
 // Checked / Indeterminate Checkbox
 // ---------------------------------------------
 
@@ -264,7 +261,6 @@ input {
   opacity: 1;
 }
 
-
 // Disabled Checkbox
 // ---------------------------------------------