Clean: SASS - Using Contrast, Animate mixin

src/contents/_activity_stream.scss

@@ -34,7 +34,7 @@
 
   /** Activity Stream - Animate ***********************************************/
   @include Option("userContent.newTab.animate") {
-    @media (prefers-reduced-motion: no-preference) {
+    @include Animate {
       :root {
         --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
       }

src/contents/_video_player.scss

@@ -24,7 +24,7 @@
       --box-shadow3: rgba(82, 82, 94, 0.04);
     }
   }
-  @media (prefers-contrast) {
+  @include Contrast {
     video {
       --duration-color: #929292; /* Like Original */
       --media-background: rgba(26,26,26,.8); /* Like Original */
@@ -98,7 +98,7 @@
 }
 
 /* Animation */
-@media (prefers-reduced-motion: no-preference) {
+@include Animate {
   /* Control Bar */
   #controlsContainer .controlBar {
     transition: transform 350ms ease;

src/decoration/_index.scss

@@ -3,7 +3,7 @@
   @import "cursor";
 }
 
-@media (prefers-reduced-motion: no-preference) {
+@include Animate {
   /*= Field Border ===========================================================*/
   @include Option($fieldBorder) {
     @import "field_border";

src/library/_proton.scss

@@ -23,7 +23,7 @@
   --organizer-pane-field-border-color: ThreeDShadow;
 }
 
-@media not all and (prefers-contrast) {
+@include NotContrast {
   :root {
     --organizer-color: var(--in-content-page-color);
     --organizer-deemphasized-color: var(--in-content-deemphasized-text);

src/library/_proton_contents.scss

@@ -145,7 +145,7 @@ menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
   outline-offset: var(--focus-outline-offset, 2px) !important;
 }
 
-@media (prefers-contrast) {
+@inclue Contrast {
   menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon {
     /* 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;

src/tabbar/_container_tab.scss

@@ -25,7 +25,7 @@
 }
 
 /* Animate */
-@media (prefers-reduced-motion: no-preference) {
+@include Animate {
   .tab-content:not([titlechanged])::before {
     transition: 0.15s var(--animation-easing-function) !important;
     transition-property: width, opacity;

src/tabbar/clipped_tab/_show_close_button_at_hover.scss

@@ -17,7 +17,7 @@
 }
 
 /* Animate */
-@media (prefers-reduced-motion: no-preference) {
+@include Animate {
   /* Fade out */
   #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
     transition: opacity 0.1s var(--animation-easing-function) !important;

src/tabbar/sound_tab/_show_with_favicons.scss

@@ -31,7 +31,7 @@
 }
 
 /* Animate */
-@media (prefers-reduced-motion: no-preference) {
+@include Animate {
   .tab-icon-overlay:not([crashed]),
   .tab-icon-overlay[pinned][crashed][selected] {
     transition: 0.1s var(--animation-easing-function);

src/tabbar/unselected_tab/_dynamic_separator.scss

@@ -107,7 +107,7 @@
 }
 
 /* Animate */
-@media (prefers-reduced-motion: no-preference) {
+@include Animate {
   .tab-background::before {
     transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
   }

src/theme/proton_chrome/_proton_commons.scss

@@ -121,7 +121,7 @@
     border-color: transparent !important;
   }
 
-  @media (prefers-contrast) {
+  @inclue Contrast {
     xul|button[default]:not([disabled="true"]):hover {
       border-color: currentColor !important;
     }
@@ -283,7 +283,7 @@
     outline-offset: var(--focus-outline-offset, 2px) !important;
   }
 
-  @media (prefers-contrast) {
+  @include Contrast {
     checkbox:not([disabled="true"]):hover > .checkbox-check {
       /* 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;
@@ -509,7 +509,7 @@
 
   /* Use a 2px border so that selected row highlight is still visible behind
         an existing high-contrast border that uses the background color */
-  @media (prefers-contrast) {
+  @include Contrast {
     xul|treechildren::-moz-tree-row(selected) {
       border: 2px solid currentColor !important;
       border-radius: 4px !important;