fix(checkbox, radio): update border colors to match MD2 spec (#27357)

Issue number: resolves #27170 --------- Updates the Material Design border colors for checkbox and radio to `rgb($text-color-rgb, 0.60)` or `#666666`. This is based on the [Material Design 2 kit](https://www.figma.com/community/file/778763161265841481/Material-2-Design-Kit). The border color when disabled is also wrong, but changing this affects the label so I have reverted this to do as part of FW-4037. ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: ionitron <[email protected]> Co-authored-by: Liam DeBeasi <[email protected]>
ionic-team · May 11, 2023 · eabc6f3 · eabc6f3
1 parent 7c7fb2b
commit eabc6f3
Show file tree

Hide file tree

Showing 54 changed files with 23 additions and 7 deletions.
diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss
@@ -38,7 +38,7 @@ $checkbox-md-icon-border-style:          solid !default;
 $checkbox-md-icon-border-radius:         2px !default;
 
 /// @prop - Border color of the checkbox icon when off
-$checkbox-md-icon-border-color-off:      rgba($text-color-rgb, .51) !default;
+$checkbox-md-icon-border-color-off:      rgb($text-color-rgb, 0.60) !default;
 
 /// @prop - Border color of the checkbox icon when on
 $checkbox-md-icon-border-color-on:       ion-color(primary, base) !default;

diff --git a/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png
diff --git a/...sabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/...sabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png
diff --git a/...sabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/...sabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png b/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png
diff --git a/...sabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png b/...sabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png
diff --git a/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png b/...isabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png
diff --git a/...inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png b/...inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png
diff --git a/...nputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png b/...nputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png
diff --git a/...inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png b/...inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png
diff --git a/...inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png b/...inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png
diff --git a/...nputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png b/...nputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png
diff --git a/...inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png b/...inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png
diff --git a/...ic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Chrome-linux.png b/...ic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Chrome-linux.png
diff --git a/...c/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Firefox-linux.png b/...c/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/...ic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Safari-linux.png b/...ic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/...ic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Chrome-linux.png b/...ic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Chrome-linux.png
diff --git a/...c/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Firefox-linux.png b/...c/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Firefox-linux.png
diff --git a/...ic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Safari-linux.png b/...ic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss
@@ -11,7 +11,7 @@ $radio-md-color-on:                  current-color(base) !default;
 $radio-md-background-color-focused:  ion-color(primary, tint) !default;
 
 /// @prop - Color of the unchecked radio
-$radio-md-color-off:                 $text-color-step-600 !default;
+$radio-md-color-off:                 rgb($text-color-rgb, 0.60) !default;
 
 /// @prop - Width of the radio icon
 $radio-md-icon-width:                20px !default;

diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html
@@ -12,6 +12,13 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-radio {
+        display: block;
+        margin-bottom: 8px;
+      }
+    </style>
   </head>
 
   <body>
@@ -23,11 +30,20 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-radio
-          >Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications
-          Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable
-          Notifications</ion-radio
-        >
+        <div id="radios">
+          <ion-radio-group>
+            <ion-radio value="radio" justify="start" label-placement="end">Unchecked</ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="radio">
+            <ion-radio value="radio" justify="start" label-placement="end">Checked</ion-radio>
+          </ion-radio-group>
+          <ion-radio-group>
+            <ion-radio value="radio" justify="start" label-placement="end" disabled>Disabled</ion-radio>
+          </ion-radio-group>
+          <ion-radio-group value="radio">
+            <ion-radio value="radio" justify="start" label-placement="end" disabled>Disabled, Checked</ion-radio>
+          </ion-radio-group>
+        </div>
       </ion-content>
     </ion-app>
   </body>

diff --git a/...lor/radio.e2e.ts-snapshots/radio-color-unchecked-md-ltr-Mobile-Chrome-linux.png b/...lor/radio.e2e.ts-snapshots/radio-color-unchecked-md-ltr-Mobile-Chrome-linux.png
diff --git a/...or/radio.e2e.ts-snapshots/radio-color-unchecked-md-ltr-Mobile-Firefox-linux.png b/...or/radio.e2e.ts-snapshots/radio-color-unchecked-md-ltr-Mobile-Firefox-linux.png
diff --git a/...lor/radio.e2e.ts-snapshots/radio-color-unchecked-md-ltr-Mobile-Safari-linux.png b/...lor/radio.e2e.ts-snapshots/radio-color-unchecked-md-ltr-Mobile-Safari-linux.png
diff --git a/...est/item/radio.e2e.ts-snapshots/radio-inset-list-md-ltr-Mobile-Chrome-linux.png b/...est/item/radio.e2e.ts-snapshots/radio-inset-list-md-ltr-Mobile-Chrome-linux.png
diff --git a/...st/item/radio.e2e.ts-snapshots/radio-inset-list-md-ltr-Mobile-Firefox-linux.png b/...st/item/radio.e2e.ts-snapshots/radio-inset-list-md-ltr-Mobile-Firefox-linux.png
diff --git a/...est/item/radio.e2e.ts-snapshots/radio-inset-list-md-ltr-Mobile-Safari-linux.png b/...est/item/radio.e2e.ts-snapshots/radio-inset-list-md-ltr-Mobile-Safari-linux.png
diff --git a/...est/item/radio.e2e.ts-snapshots/radio-inset-list-md-rtl-Mobile-Chrome-linux.png b/...est/item/radio.e2e.ts-snapshots/radio-inset-list-md-rtl-Mobile-Chrome-linux.png
diff --git a/...st/item/radio.e2e.ts-snapshots/radio-inset-list-md-rtl-Mobile-Firefox-linux.png b/...st/item/radio.e2e.ts-snapshots/radio-inset-list-md-rtl-Mobile-Firefox-linux.png
diff --git a/...est/item/radio.e2e.ts-snapshots/radio-inset-list-md-rtl-Mobile-Safari-linux.png b/...est/item/radio.e2e.ts-snapshots/radio-inset-list-md-rtl-Mobile-Safari-linux.png
diff --git a/...dio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Chrome-linux.png b/...dio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Chrome-linux.png
diff --git a/...io/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Firefox-linux.png b/...io/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Firefox-linux.png
diff --git a/...dio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Safari-linux.png b/...dio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Safari-linux.png
diff --git a/...dio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Chrome-linux.png b/...dio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Chrome-linux.png
diff --git a/...io/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Firefox-linux.png b/...io/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Firefox-linux.png
diff --git a/...dio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Safari-linux.png b/...dio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Safari-linux.png
diff --git a/...basic/radio.e2e.ts-snapshots/radio-group-checked-md-ltr-Mobile-Chrome-linux.png b/...basic/radio.e2e.ts-snapshots/radio-group-checked-md-ltr-Mobile-Chrome-linux.png
diff --git a/...asic/radio.e2e.ts-snapshots/radio-group-checked-md-ltr-Mobile-Firefox-linux.png b/...asic/radio.e2e.ts-snapshots/radio-group-checked-md-ltr-Mobile-Firefox-linux.png
diff --git a/...basic/radio.e2e.ts-snapshots/radio-group-checked-md-ltr-Mobile-Safari-linux.png b/...basic/radio.e2e.ts-snapshots/radio-group-checked-md-ltr-Mobile-Safari-linux.png
diff --git a/...basic/radio.e2e.ts-snapshots/radio-group-checked-md-rtl-Mobile-Chrome-linux.png b/...basic/radio.e2e.ts-snapshots/radio-group-checked-md-rtl-Mobile-Chrome-linux.png
diff --git a/...asic/radio.e2e.ts-snapshots/radio-group-checked-md-rtl-Mobile-Firefox-linux.png b/...asic/radio.e2e.ts-snapshots/radio-group-checked-md-rtl-Mobile-Firefox-linux.png
diff --git a/...basic/radio.e2e.ts-snapshots/radio-group-checked-md-rtl-Mobile-Safari-linux.png b/...basic/radio.e2e.ts-snapshots/radio-group-checked-md-rtl-Mobile-Safari-linux.png
diff --git a/...sic/radio.e2e.ts-snapshots/radio-group-unchecked-md-ltr-Mobile-Chrome-linux.png b/...sic/radio.e2e.ts-snapshots/radio-group-unchecked-md-ltr-Mobile-Chrome-linux.png
diff --git a/...ic/radio.e2e.ts-snapshots/radio-group-unchecked-md-ltr-Mobile-Firefox-linux.png b/...ic/radio.e2e.ts-snapshots/radio-group-unchecked-md-ltr-Mobile-Firefox-linux.png
diff --git a/...sic/radio.e2e.ts-snapshots/radio-group-unchecked-md-ltr-Mobile-Safari-linux.png b/...sic/radio.e2e.ts-snapshots/radio-group-unchecked-md-ltr-Mobile-Safari-linux.png
diff --git a/...sic/radio.e2e.ts-snapshots/radio-group-unchecked-md-rtl-Mobile-Chrome-linux.png b/...sic/radio.e2e.ts-snapshots/radio-group-unchecked-md-rtl-Mobile-Chrome-linux.png
diff --git a/...ic/radio.e2e.ts-snapshots/radio-group-unchecked-md-rtl-Mobile-Firefox-linux.png b/...ic/radio.e2e.ts-snapshots/radio-group-unchecked-md-rtl-Mobile-Firefox-linux.png
diff --git a/...sic/radio.e2e.ts-snapshots/radio-group-unchecked-md-rtl-Mobile-Safari-linux.png b/...sic/radio.e2e.ts-snapshots/radio-group-unchecked-md-rtl-Mobile-Safari-linux.png
diff --git a/...st/states/radio.e2e.ts-snapshots/radio-unchecked-md-ltr-Mobile-Chrome-linux.png b/...st/states/radio.e2e.ts-snapshots/radio-unchecked-md-ltr-Mobile-Chrome-linux.png
diff --git a/...t/states/radio.e2e.ts-snapshots/radio-unchecked-md-ltr-Mobile-Firefox-linux.png b/...t/states/radio.e2e.ts-snapshots/radio-unchecked-md-ltr-Mobile-Firefox-linux.png
diff --git a/...st/states/radio.e2e.ts-snapshots/radio-unchecked-md-ltr-Mobile-Safari-linux.png b/...st/states/radio.e2e.ts-snapshots/radio-unchecked-md-ltr-Mobile-Safari-linux.png