Clean: Proton - Radio Button, Checkbox

black7375 · May 30, 2022 · 5b7634a · 5b7634a
1 parent c7fdfaf
commit 5b7634a
Show file tree

Hide file tree

Showing 6 changed files with 236 additions and 222 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
@@ -1601,12 +1601,12 @@
       appearance: none !important;
       width: 16px !important;
       height: 16px !important;
-      padding: 0 !important;
       border: 1px solid var(--in-content-box-border-color) !important;
       border-radius: 100% !important;
+      padding: 0 !important;
+      margin-inline: 0 6px !important;
       margin-block: 2px !important;
       /* extend the vertical clicktarget */
-      margin-inline: 0 6px !important;
       background-color: var(--in-content-button-background) !important;
       background-position: center !important;
       flex-shrink: 0 !important;
@@ -1617,7 +1617,6 @@
       background-color: var(--in-content-button-background-hover) !important;
       color: var(--in-content-button-text-color-hover) !important;
     }
-
     xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
       background-color: var(--in-content-button-background-active) !important;
     }
@@ -1637,7 +1636,6 @@
       background-color: var(--in-content-primary-button-background-hover) !important;
       color: var(--in-content-primary-button-text-color-hover) !important;
     }
-
     xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
       background-color: var(--in-content-primary-button-background-active) !important;
     }
@@ -1652,11 +1650,6 @@
     xul|radio[disabled="true"],
     xul|label[disabled="true"] {
       color: inherit !important;
-    }
-
-    xul|checkbox[disabled="true"],
-    xul|radio[disabled="true"],
-    xul|label[disabled="true"] {
       opacity: 0.5 !important;
     }
 
@@ -1682,41 +1675,40 @@
 
     .checkbox-check {
       appearance: none !important;
-      color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
-      background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
+      width: 16px !important;
+      height: 16px !important;
       border: 1px solid currentColor !important;
       border-radius: 2px !important;
+      color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
+      background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
       margin-inline-end: 6px !important;
+      /* or 2px */
+      margin-block: 2px !important;
+      /* From common.css */
     }
 
-    .checkbox-check {
-      height: 16px !important;
-      width: 16px !important;
-    }
-
-    checkbox:not([disabled="true"]):hover > .checkbox-check {
+    checkbox:not([disabled="true"]):hover > .checkbox-check > .checkbox-check {
       background-color: var(
         --checkbox-unchecked-hover-bgcolor,
         color-mix(in srgb, -moz-accent-color 4%, Field)
       ) !important;
     }
-
-    checkbox:not([disabled="true"]):hover:active > .checkbox-check {
+    checkbox:not([disabled="true"]):hover > .checkbox-check:active > .checkbox-check {
       background-color: var(
         --checkbox-unchecked-active-bgcolor,
         color-mix(in srgb, -moz-accent-color 8%, Field)
       ) !important;
     }
 
     .checkbox-check[checked] {
+      -moz-context-properties: fill !important;
+      fill: currentColor !important;
+      color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
       border-color: var(--checkbox-checked-border-color, transparent) !important;
       background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
       background-image: url("chrome://global/skin/icons/check.svg") !important;
       background-position: center !important;
       background-repeat: no-repeat !important;
-      -moz-context-properties: fill !important;
-      fill: currentColor !important;
-      color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
       /* Style the button also when printing with "Print Backgrounds" unchecked */
       color-adjust: exact !important;
     }
@@ -1727,7 +1719,6 @@
         color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
       ) !important;
     }
-
     checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
       background-color: var(
         --checkbox-checked-active-bgcolor,
@@ -1758,10 +1749,6 @@
       }
     }
     /* From common.css */
-    xul|*.checkbox-check {
-      margin-block: 2px !important;
-    }
-
     xul|richlistitem > xul|*.checkbox-check {
       margin: 3px 6px !important;
     }

diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss
@@ -2,6 +2,7 @@
 @use "utils/option" as *;
 @use "utils/color_scheme" as *;
 @use "utils/theme" as *;
+@use "utils/proton_elements" as Proton;
 @use "sass:selector";
 
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

diff --git a/src/leptonContent.scss b/src/leptonContent.scss
@@ -1,6 +1,7 @@
 @use "utils/os" as *;
 @use "utils/option" as *;
 @use "utils/color_scheme" as *;
+@use "utils/proton_elements" as Proton;
 
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");

diff --git a/src/library/_proton_contents.scss b/src/library/_proton_contents.scss
@@ -3,167 +3,99 @@ $checkedIconSelector: "> .menu-iconic-left[checked=\"true\"] > .menu-iconic-icon
 
 /*- Radio Button ---------------------------------------------------------*/
 menuitem[type="radio"] {
-  /* margin-inline-start: 0 !important; */
-  appearance: none !important;
+  @include Proton.RadioGlobal;
 
   #{$iconSelector} {
-    appearance: none !important;
-    width: 16px !important;
-    height: 16px !important;
-
-    border: 1px solid var(--in-content-box-border-color) !important;
-    border-radius: 100% !important;
-
-    padding: 0 !important;
-    margin-inline: 0 6px !important;
-    margin-block: 2px !important; /* extend the vertical clicktarget */
-
-    background-color: var(--in-content-button-background) !important;
-    background-position: center !important;
-
-    flex-shrink: 0 !important; /* avoid shrinking inside flex container */
+    @include Proton.RadioIcon;
   }
   #{$checkedIconSelector} {
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-    color: var(--in-content-primary-button-text-color) !important;
-
-    background-color: var(--in-content-primary-button-background) !important;
-    background-image: url("chrome://global/skin/icons/radio.svg") !important;
-    border-color: transparent !important;
-
-    /* Style the button also when printing with "Print Backgrounds" unchecked */
-    color-adjust: exact !important;
+    @include Proton.RadioCheckedIcon;
   }
 
   &:not([disabled="true"]):hover {
     #{$iconSelector} {
-      background-color: var(--in-content-button-background-hover) !important;
-      color: var(--in-content-button-text-color-hover) !important;
+      @include Proton.RadioIconHover;
     }
     &:active #{$iconSelector} {
-      background-color: var(--in-content-button-background-active) !important;
+      @include Proton.RadioIconActive;
     }
   }
 
   &:not([disabled="true"])[checked="true"]:hover {
     #{$iconSelector} {
-      background-color: var(--in-content-primary-button-background-hover) !important;
-      color: var(--in-content-primary-button-text-color-hover) !important;
+      @include Proton.RadioCheckedIconHover;
     }
     &:active #{$iconSelector} {
-      background-color: var(--in-content-primary-button-background-active) !important;
+      @include Proton.RadioCheckedIconActive;
     }
   }
 
   > .menu-iconic-text {
-    margin-inline: 0 8px !important;
-    padding-inline-start: 0 !important;
+    @include Proton.RadioLabel;
   }
 }
 
 /* Disabled checkboxes, radios and labels */
 menuitem[type="radio"][disabled="true"],
 menuitem[type="checkbox"][disabled="true"] {
-  color: inherit !important;
-  opacity: 0.5 !important;
+  @include Proton.DisabledMenuItem;
 }
 
 /*- Check Box ------------------------------------------------------------*/
 /* From checkbox.css */
 menuitem[type="checkbox"] {
-  appearance: none !important;
-  -moz-box-align: center !important;
-  margin: 0px 2px !important;
+  @include Proton.CheckboxGlobal(true);
 
   #{$iconSelector} {
-    appearance: none !important;
-    width: 16px !important;
-    height: 16px !important;
-
-    border: 1px solid currentColor !important;
-    border-radius: 2px !important;
-
-    color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
-    background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
-
-    margin-inline-end: 6px !important; /* or 2px */
-    margin-block: 2px !important; /* From common.css */
+    @include Proton.CheckboxIcon;
   }
   #{$checkedIconSelector} {
-    -moz-context-properties: fill !important;
-    fill: currentColor !important;
-    color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
-    border-color: var(--checkbox-checked-border-color, transparent) !important;
-
-    background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
-    background-image: url("chrome://global/skin/icons/check.svg") !important;
-    background-position: center !important;
-    background-repeat: no-repeat !important;
-
-    /* Style the button also when printing with "Print Backgrounds" unchecked */
-    color-adjust: exact !important;
+    @include Proton.CheckboxCheckedIcon;
   }
 
   &:not([disabled="true"]):hover {
     #{$iconSelector} {
-      background-color: var(
-        --checkbox-unchecked-hover-bgcolor,
-        color-mix(in srgb, -moz-accent-color 4%, Field)
-      ) !important;
+      @include Proton.CheckboxIconHover;
     }
     &:active #{$iconSelector} {
-      background-color: var(
-        --checkbox-unchecked-active-bgcolor,
-        color-mix(in srgb, -moz-accent-color 8%, Field)
-      ) !important;
+      @include Proton.CheckboxIconActive;
     }
 
     #{$checkedIconSelector} {
-      background-color: var(
-        --checkbox-checked-hover-bgcolor,
-        color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
-      ) !important;
+      @include Proton.CheckboxCheckedIconHover;
     }
     &:active #{$checkedIconSelector} {
-      background-color: var(
-        --checkbox-checked-active-bgcolor,
-        color-mix(in srgb, currentColor 25%, -moz-accent-color)
-      ) !important;
+      @include Proton.CheckboxCheckedIconActive;
     }
   }
 
   &:focus #{$iconSelector} {
-    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
-    outline-offset: var(--focus-outline-offset, 2px) !important;
+    @include Proton.CheckboxFocusRing;
   }
 
   @include Contrast {
     &:not([disabled="true"]) #{$iconSelector} {
-      /* color will set the border-color on the check due to how HCM works for in-content pages. */
-      color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
+      @include Proton.CheckboxIconHoverContrast;
     }
 
     > .menu-iconic-left[checked="true"] {
-      color: var(--checkbox-checked-border-color, currentColor) !important;
-      fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
+      @include Proton.CheckboxCheckedIconContrast;
     }
 
     &:not([disabled="true"]):hover:active,
     &:not([disabled="true"]):hover {
       #{$checkedIconSelector} {
-        color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
-        fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
+        @include Proton.CheckboxCheckedIconHoverContrast;
       }
     }
   }
 
   > .menu-iconic-text {
-    margin: 1px 0 !important;
+    @include Proton.ChexboxLabel;
   }
 
   &[disabled="true"] {
-    opacity: 0.4 !important;
+    @include Proton.DisabledChexbox;
   }
 }