High Contrast: reimplement check and radio

Use a similar structure as Adwaita - using buttons for
radios and checkboxes.

https://bugzilla.gnome.org/show_bug.cgi?id=763707

gtk/Makefile.am

@@ -1249,6 +1249,14 @@ gtk.gresource.xml: Makefile.am inspector/Makefile.inc
 	echo "    <file alias='theme/HighContrastInverse/gtk.css'>theme/HighContrast/gtk-inverse.css</file>" >> $@; \
 	echo "    <file>theme/HighContrast/gtk-contained.css</file>" >> $@; \
 	echo "    <file>theme/HighContrast/gtk-contained-inverse.css</file>" >> $@; \
+	      for f in $(srcdir)/theme/HighContrast/assets/*.png; do \
+          n=`basename $$f`; \
+          echo "    <file preprocess='to-pixdata'>theme/HighContrast/assets/$$n</file>" >> $@; \
+        done; \
+        for f in $(srcdir)/theme/HighContrast/assets/*.svg; do \
+          n=`basename $$f`; \
+          echo "    <file>theme/HighContrast/assets/$$n</file>" >> $@; \
+        done; \
 	echo "    <file>theme/win32/gtk-win32-base.css</file>" >> $@; \
 	echo "    <file>theme/win32/gtk.css</file>" >> $@; \
 	for f in $(srcdir)/cursor/*.png; do \

gtk/theme/HighContrast/_common.scss

@@ -1605,60 +1605,177 @@ switch {
 /*************************
  * Check and Radio items *
  *************************/
+// draw regular check and radio items using our PNG assets
+// all assets are rendered from assets.svg. never add pngs directly
 
-// FIXME
 
-GtkCheckButton.text-button, GtkRadioButton.text-button {
+checkbutton.text-button, radiobutton.text-button {
   // this is for a nice focus on check and radios text
-  padding: 1px;
+  padding: 2px 0;
   outline-offset: 0;
-}
 
-@each $w,$a in ('check', 'checkbox'),
+  label:not(:only-child) {
-               ('radio','radio') {
+    &:first-child { margin-left: 4px; }
-  #{$w} {
+    &:last-child { margin-right: 4px; }
-    color: $fg_color;
+  }
-    background-image: none;
+
-    -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
+  &:disabled {
-    &:hover { color: $bg_color; }
+    &:active, &:indeterminate, & {
-    &:checked, &:active {
+      // set insensitive color, which is overriden otherwise
-      -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic');
-      &:disabled {
-        color: $insensitive_fg_color;
-        &:backdrop { color: $insensitive_fg_color; }
-      }
-      &:backdrop { color: $backdrop_fg_color; }
-    }
-    &:disabled {
       color: $insensitive_fg_color;
+
       &:backdrop { color: $insensitive_fg_color; }
     }
-    &:indeterminate {
-      -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
-    }
-    &:backdrop {
-      color: $backdrop_fg_color;
-      &:selected { color: $backdrop_fg_color; }
-    }
   }
 }
 
-radiobutton radio,
+check,
-checkbutton check {
+radio {
-  min-width: 16px;
+  margin: 0 4px;
-  min-height: 16px;
+
-  margin: 0 2px 0 2px;
+  &:only-child { margin: 0; }
-  &:only-child {
+
-    margin: 0;
+  min-height: 14px;
+  min-width: 14px;
+  border: 1px solid;
+  -gtk-icon-source: none;
+
+  @include button(normal);
+
+  &:hover { @include button(hover); }
+  &:active { @include button(active); }
+  &:disabled { @include button(insensitive); }
+  &:backdrop {
+    @include button(backdrop);
+
+    &:disabled { @include button(backdrop-insensitive); }
+  }
+
+  @if $variant == 'light' {
+    // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
+    // color, hence we need special casing.
+    row:selected & { border-color: $selected_borders_color; }
+  }
+
+  .osd & {
+    @include button(osd);
+
+    &:hover { @include button(osd); }
+    &:active { @include button(osd-active); }
+    &:backdrop { @include button(osd-backdrop); }
+    &:disabled { @include button(osd-insensitive); }
+  }
+
+  menu menuitem & {
+    margin: 0; // this is a workaround for a menu check/radio size allocation issue
+
+    &, &:hover, &:disabled { //FIXME use button reset mixin
+      min-height: 14px;
+      min-width: 14px;
+      background-image: none;
+      background-color: transparent;
+      box-shadow: none;
+      -gtk-icon-shadow: none;
+      color: inherit;
+      border-color: currentColor;
+      animation: none;
+    }
+  }
+}
+
+%check,
+check {
+  border-radius: 3px;
+
+  &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
+                                      -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+
+  &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
+                                            -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+}
+
+%radio,
+radio {
+  border-radius: 100%;
+
+  &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
+                                      -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+
+  &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
+                                            -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+}
+
+// let's animate things
+@keyframes check_check {
+  from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+  to { -gtk-icon-transform: unset; }
+}
+
+@keyframes check_radio {
+  from { -gtk-icon-transform: scale(0); }
+  to { -gtk-icon-transform: unset; }
+}
+
+@keyframes check_indeterminate {
+  from { -gtk-icon-transform: scale(0, 1); }
+  to { -gtk-icon-transform: unset; }
+}
+
+check:not(:indeterminate):checked { animation: check_check 400ms; }
+
+radio:not(:indeterminate):checked { animation: check_radio 400ms; }
+
+check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; }
+
+// no animations in menus
+menu menuitem {
+  check:not(:indeterminate):checked,
+  radio:not(:indeterminate):checked,
+  check:indeterminate:checked:active,
+  radio:indeterminate:checked { animation: none; }
+}
+
+
+// treeview stuff, let's the fun begin:
+treeview.view check:selected {
+  &:focus, &:backdrop, & {
+    &:disabled, & {
+      @extend %check;
+    }
+  }
+}
+
+treeview.view radio:selected {
+  &:focus, &:backdrop, & {
+    &:disabled, & {
+      @extend %radio;
+    }
   }
 }
 
 treeview.view check,
 treeview.view radio {
-  color: $fg_color;
+  &:selected {
-  &:hover { color: $fg_color; }
+    &:focus, &:hover, & { color: $selected_fg_color; }
+
+    &:backdrop {
+      &:hover, & {
+        color: $selected_fg_color;
+        border-color: $selected_fg_color;
+      }
+
+      &:disabled {
+        color: $insensitive_fg_color;
+        border-color: $insensitive_fg_color;
+      }
+    }
+
+    &:disabled { color: $insensitive_fg_color;}
+  }
 }
 
+
+
 /************
  * GtkScale *
  ************/

gtk/theme/HighContrast/assets/bullet-symbolic.svg

@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="bullet-symbolic.svg"
+   inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   height="14"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   width="14">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer9"
+     inkscape:cx="9.6493349"
+     inkscape:cy="5.5864571"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="true"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="true"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1016"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:zoom="22.005438"
+     inkscape:showpageshadow="false">
+    <inkscape:grid
+       dotted="false"
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="-139.99995"
+       originy="120"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)"
+       id="linearGradient19282"
+       osb:paint="solid">
+      <stop
+         id="stop19284"
+         offset="0"
+         style="stop-color:#666666;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-381.00015,-339)">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 388.00015,343.01754 c -1.64587,0 -2.98246,1.33658 -2.98246,2.98246 0,1.64587 1.33659,2.98246 2.98246,2.98246 1.64587,0 2.98246,-1.33659 2.98246,-2.98246 0,-1.64588 -1.33659,-2.98246 -2.98246,-2.98246 z"
+       id="path9555"
+       sodipodi:nodetypes="csssc"
+       style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale Mono';text-indent:0pt;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78125;marker:none" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     style="display:inline"
+     transform="translate(-381.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-381.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     style="display:inline"
+     transform="translate(-381.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-381.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-381.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-381.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-381.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-381.00015,-339)" />
+</svg>

gtk/theme/HighContrast/assets/check-symbolic.svg

@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="check-symbolic.svg"
+   inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   height="14"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   width="14">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer9"
+     inkscape:cx="-15.966869"
+     inkscape:cy="8.8415069"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="true"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="true"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1016"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:zoom="15.238496"
+     inkscape:showpageshadow="false">
+    <inkscape:grid
+       dotted="false"
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="-159.99995"
+       originy="120"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)"
+       id="linearGradient19282"
+       osb:paint="solid">
+      <stop
+         id="stop19284"
+         offset="0"
+         style="stop-color:#666666;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline;opacity:1"
+     transform="translate(-401.00015,-339)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
+       d="m 415.00015,339.98047 -6.5,6.39453 -2.9375,-2.9375 -2.125,2.125 5.0625,5.0625 6.5,-6.60547 0,-4.03906 z"
+       id="path8913-6-7-1-5-1"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     style="display:inline"
+     transform="translate(-401.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-401.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     style="display:inline"
+     transform="translate(-401.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-401.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-401.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-401.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-401.00015,-339)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-401.00015,-339)" />
+</svg>

gtk/theme/HighContrast/assets/dash-symbolic.svg

@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="dash-symbolic.svg"
+   inkscape:export-filename="/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90"
+   height="14"
+   id="svg7384"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   width="14">
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer9"
+     inkscape:cx="6.8118913"
+     inkscape:cy="7.9276321"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="true"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="true"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="1016"
+     inkscape:window-maximized="1"
+     inkscape:window-width="1920"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:zoom="25.058754"
+     inkscape:showpageshadow="false">
+    <inkscape:grid
+       dotted="false"
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="-159.99995"
+       originy="140"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)"
+       id="linearGradient19282"
+       osb:paint="solid">
+      <stop
+         id="stop19284"
+         offset="0"
+         style="stop-color:#666666;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-401.00015,-359)">
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 405.00021,364 5.99999,0 c 1.108,0 2,0.892 2,2 0,1.108 -0.892,2 -2,2 l -5.99999,0 c -1.108,0 -2,-0.892 -2,-2 0,-1.108 0.892,-2 2,-2 z"
+       id="rect3346" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     style="display:inline"
+     transform="translate(-401.00015,-359)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-401.00015,-359)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     style="display:inline"
+     transform="translate(-401.00015,-359)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-401.00015,-359)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-401.00015,-359)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-401.00015,-359)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-401.00015,-359)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-401.00015,-359)" />
+</svg>

gtk/theme/HighContrast/gtk-contained-inverse.css

@@ -1747,75 +1747,198 @@ switch {
 /*************************
  * Check and Radio items *
  *************************/
-GtkCheckButton.text-button, GtkRadioButton.text-button {
+checkbutton.text-button, radiobutton.text-button {
-  padding: 1px;
+  padding: 2px 0;
   outline-offset: 0; }
-
+  checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
-check {
+    margin-left: 4px; }
-  color: #fff;
+  checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
-  background-image: none;
+    margin-right: 4px; }
-  -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
+  checkbutton.text-button:disabled:active, checkbutton.text-button:disabled:indeterminate, checkbutton.text-button:disabled, radiobutton.text-button:disabled:active, radiobutton.text-button:disabled:indeterminate, radiobutton.text-button:disabled {
-  check:hover {
-    color: #000; }
-  check:checked, check:active {
-    -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); }
-    check:checked:disabled, check:active:disabled {
-      color: gray; }
-      check:checked:disabled:backdrop, check:active:disabled:backdrop {
-        color: gray; }
-    check:checked:backdrop, check:active:backdrop {
-      color: #fff; }
-  check:disabled {
     color: gray; }
-    check:disabled:backdrop {
+    checkbutton.text-button:disabled:active:backdrop, checkbutton.text-button:disabled:indeterminate:backdrop, checkbutton.text-button:disabled:backdrop, radiobutton.text-button:disabled:active:backdrop, radiobutton.text-button:disabled:indeterminate:backdrop, radiobutton.text-button:disabled:backdrop {
       color: gray; }
-  check:indeterminate {
-    -gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); }
-  check:backdrop {
-    color: #fff; }
-    check:backdrop:selected {
-      color: #fff; }
 
+check,
 radio {
+  margin: 0 4px;
+  min-height: 14px;
+  min-width: 14px;
+  border: 1px solid;
+  -gtk-icon-source: none;
+  border-width: 2px;
+  border-style: solid;
   color: #fff;
   background-image: none;
-  -gtk-icon-source: -gtk-icontheme("radio-symbolic"); }
+  background-color: #000;
-  radio:hover {
+  border-color: gray; }
-    color: #000; }
+  check:only-child,
-  radio:checked, radio:active {
+  radio:only-child {
-    -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic"); }
-    radio:checked:disabled, radio:active:disabled {
-      color: gray; }
-      radio:checked:disabled:backdrop, radio:active:disabled:backdrop {
-        color: gray; }
-    radio:checked:backdrop, radio:active:backdrop {
-      color: #fff; }
-  radio:disabled {
-    color: gray; }
-    radio:disabled:backdrop {
-      color: gray; }
-  radio:indeterminate {
-    -gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); }
-  radio:backdrop {
-    color: #fff; }
-    radio:backdrop:selected {
-      color: #fff; }
-
-radiobutton radio,
-checkbutton check {
-  min-width: 16px;
-  min-height: 16px;
-  margin: 0 2px 0 2px; }
-  radiobutton radio:only-child,
-  checkbutton check:only-child {
     margin: 0; }
+  check:hover,
+  radio:hover {
+    border-width: 2px;
+    border-style: solid;
+    color: #fff;
+    background-color: #000;
+    border-color: gray;
+    background-image: none; }
+  check:active,
+  radio:active {
+    border-width: 2px;
+    border-style: solid;
+    background-image: none;
+    color: black;
+    background-color: white;
+    border-color: gray; }
+  check:disabled,
+  radio:disabled {
+    border-width: 2px;
+    border-style: solid;
+    color: gray;
+    background-color: #070707;
+    border-color: #494949;
+    background-image: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none; }
+  check:backdrop,
+  radio:backdrop {
+    border-width: 2px;
+    border-style: solid;
+    color: #fff;
+    background-color: #000;
+    border-color: #737373;
+    background-image: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none; }
+    check:backdrop:disabled,
+    radio:backdrop:disabled {
+      border-width: 2px;
+      border-style: solid;
+      color: gray;
+      background-color: #070707;
+      border-color: #494949;
+      background-image: none; }
+  .osd check, .osd
+  radio {
+    border-width: 2px;
+    border-style: solid;
+    color: #fff;
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: none; }
+    .osd check:hover, .osd
+    radio:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-image: none;
+      background-color: rgba(0, 0, 0, 0.8);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    .osd check:active, .osd
+    radio:active {
+      border-width: 2px;
+      border-style: solid;
+      color: rgba(0, 0, 0, 0.8);
+      background-color: #fff;
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    .osd check:backdrop, .osd
+    radio:backdrop {
+      border-width: 2px;
+      border-style: solid; }
+    .osd check:disabled, .osd
+    radio:disabled {
+      border-width: 2px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.2);
+      color: gray; }
+  menu menuitem check, menu menuitem
+  radio {
+    margin: 0; }
+    menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
+    radio, menu menuitem
+    radio:hover, menu menuitem
+    radio:disabled {
+      min-height: 14px;
+      min-width: 14px;
+      background-image: none;
+      background-color: transparent;
+      box-shadow: none;
+      -gtk-icon-shadow: none;
+      color: inherit;
+      border-color: currentColor;
+      animation: none; }
 
-treeview.view check,
+treeview.view check:selected:focus:disabled, treeview.view check:selected:focus, treeview.view check:selected:backdrop:disabled, treeview.view check:selected:backdrop, treeview.view check:selected:disabled, treeview.view check:selected,
-treeview.view radio {
+check {
+  border-radius: 3px; }
+  treeview.view check:checked:selected,
+  check:checked {
+    -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+  treeview.view check:indeterminate:selected,
+  check:indeterminate {
+    -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+
+treeview.view radio:selected:focus:disabled, treeview.view radio:selected:focus, treeview.view radio:selected:backdrop:disabled, treeview.view radio:selected:backdrop, treeview.view radio:selected:disabled, treeview.view radio:selected,
+radio {
+  border-radius: 100%; }
+  treeview.view radio:checked:selected,
+  radio:checked {
+    -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+  treeview.view radio:indeterminate:selected,
+  radio:indeterminate {
+    -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+
+@keyframes check_check {
+  from {
+    -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+  to {
+    -gtk-icon-transform: unset; } }
+@keyframes check_radio {
+  from {
+    -gtk-icon-transform: scale(0); }
+  to {
+    -gtk-icon-transform: unset; } }
+@keyframes check_indeterminate {
+  from {
+    -gtk-icon-transform: scale(0, 1); }
+  to {
+    -gtk-icon-transform: unset; } }
+check:not(:indeterminate):checked {
+  animation: check_check 400ms; }
+
+radio:not(:indeterminate):checked {
+  animation: check_radio 400ms; }
+
+check:indeterminate:checked, radio:indeterminate:checked {
+  animation: check_indeterminate 400ms; }
+
+menu menuitem check:not(:indeterminate):checked,
+menu menuitem radio:not(:indeterminate):checked,
+menu menuitem check:indeterminate:checked:active,
+menu menuitem radio:indeterminate:checked {
+  animation: none; }
+
+treeview.view check:selected:focus, treeview.view check:selected:hover, treeview.view check:selected,
+treeview.view radio:selected:focus,
+treeview.view radio:selected:hover,
+treeview.view radio:selected {
   color: #fff; }
-  treeview.view check:hover,
+treeview.view check:selected:backdrop:hover, treeview.view check:selected:backdrop,
-  treeview.view radio:hover {
+treeview.view radio:selected:backdrop:hover,
-    color: #fff; }
+treeview.view radio:selected:backdrop {
+  color: #fff;
+  border-color: #fff; }
+treeview.view check:selected:backdrop:disabled,
+treeview.view radio:selected:backdrop:disabled {
+  color: gray;
+  border-color: gray; }
+treeview.view check:selected:disabled,
+treeview.view radio:selected:disabled {
+  color: gray; }
 
 /************
  * GtkScale *

gtk/theme/HighContrast/gtk-contained.css

@@ -1747,75 +1747,201 @@ switch {
 /*************************
  * Check and Radio items *
  *************************/
-GtkCheckButton.text-button, GtkRadioButton.text-button {
+checkbutton.text-button, radiobutton.text-button {
-  padding: 1px;
+  padding: 2px 0;
   outline-offset: 0; }
-
+  checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
-check {
+    margin-left: 4px; }
-  color: #000;
+  checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
-  background-image: none;
+    margin-right: 4px; }
-  -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
+  checkbutton.text-button:disabled:active, checkbutton.text-button:disabled:indeterminate, checkbutton.text-button:disabled, radiobutton.text-button:disabled:active, radiobutton.text-button:disabled:indeterminate, radiobutton.text-button:disabled {
-  check:hover {
-    color: #fff; }
-  check:checked, check:active {
-    -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); }
-    check:checked:disabled, check:active:disabled {
-      color: gray; }
-      check:checked:disabled:backdrop, check:active:disabled:backdrop {
-        color: gray; }
-    check:checked:backdrop, check:active:backdrop {
-      color: #000; }
-  check:disabled {
     color: gray; }
-    check:disabled:backdrop {
+    checkbutton.text-button:disabled:active:backdrop, checkbutton.text-button:disabled:indeterminate:backdrop, checkbutton.text-button:disabled:backdrop, radiobutton.text-button:disabled:active:backdrop, radiobutton.text-button:disabled:indeterminate:backdrop, radiobutton.text-button:disabled:backdrop {
       color: gray; }
-  check:indeterminate {
-    -gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); }
-  check:backdrop {
-    color: #000; }
-    check:backdrop:selected {
-      color: #000; }
 
+check,
 radio {
+  margin: 0 4px;
+  min-height: 14px;
+  min-width: 14px;
+  border: 1px solid;
+  -gtk-icon-source: none;
+  border-width: 2px;
+  border-style: solid;
   color: #000;
   background-image: none;
-  -gtk-icon-source: -gtk-icontheme("radio-symbolic"); }
+  background-color: #fff;
-  radio:hover {
+  border-color: gray; }
-    color: #fff; }
+  check:only-child,
-  radio:checked, radio:active {
+  radio:only-child {
-    -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic"); }
-    radio:checked:disabled, radio:active:disabled {
-      color: gray; }
-      radio:checked:disabled:backdrop, radio:active:disabled:backdrop {
-        color: gray; }
-    radio:checked:backdrop, radio:active:backdrop {
-      color: #000; }
-  radio:disabled {
-    color: gray; }
-    radio:disabled:backdrop {
-      color: gray; }
-  radio:indeterminate {
-    -gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); }
-  radio:backdrop {
-    color: #000; }
-    radio:backdrop:selected {
-      color: #000; }
-
-radiobutton radio,
-checkbutton check {
-  min-width: 16px;
-  min-height: 16px;
-  margin: 0 2px 0 2px; }
-  radiobutton radio:only-child,
-  checkbutton check:only-child {
     margin: 0; }
+  check:hover,
+  radio:hover {
+    border-width: 2px;
+    border-style: solid;
+    color: #000;
+    background-color: #fff;
+    border-color: gray;
+    background-image: none; }
+  check:active,
+  radio:active {
+    border-width: 2px;
+    border-style: solid;
+    background-image: none;
+    color: white;
+    background-color: black;
+    border-color: gray; }
+  check:disabled,
+  radio:disabled {
+    border-width: 2px;
+    border-style: solid;
+    color: gray;
+    background-color: white;
+    border-color: silver;
+    background-image: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none; }
+  check:backdrop,
+  radio:backdrop {
+    border-width: 2px;
+    border-style: solid;
+    color: #000;
+    background-color: #fff;
+    border-color: #8d8d8d;
+    background-image: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none; }
+    check:backdrop:disabled,
+    radio:backdrop:disabled {
+      border-width: 2px;
+      border-style: solid;
+      color: gray;
+      background-color: white;
+      border-color: silver;
+      background-image: none; }
+  row:selected check, row:selected
+  radio {
+    border-color: #000; }
+  .osd check, .osd
+  radio {
+    border-width: 2px;
+    border-style: solid;
+    color: #fff;
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: none; }
+    .osd check:hover, .osd
+    radio:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-image: none;
+      background-color: rgba(0, 0, 0, 0.8);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    .osd check:active, .osd
+    radio:active {
+      border-width: 2px;
+      border-style: solid;
+      color: rgba(0, 0, 0, 0.8);
+      background-color: #fff;
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    .osd check:backdrop, .osd
+    radio:backdrop {
+      border-width: 2px;
+      border-style: solid; }
+    .osd check:disabled, .osd
+    radio:disabled {
+      border-width: 2px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.2);
+      color: gray; }
+  menu menuitem check, menu menuitem
+  radio {
+    margin: 0; }
+    menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
+    radio, menu menuitem
+    radio:hover, menu menuitem
+    radio:disabled {
+      min-height: 14px;
+      min-width: 14px;
+      background-image: none;
+      background-color: transparent;
+      box-shadow: none;
+      -gtk-icon-shadow: none;
+      color: inherit;
+      border-color: currentColor;
+      animation: none; }
 
-treeview.view check,
+treeview.view check:selected:focus:disabled, treeview.view check:selected:focus, treeview.view check:selected:backdrop:disabled, treeview.view check:selected:backdrop, treeview.view check:selected:disabled, treeview.view check:selected,
-treeview.view radio {
+check {
-  color: #000; }
+  border-radius: 3px; }
-  treeview.view check:hover,
+  treeview.view check:checked:selected,
-  treeview.view radio:hover {
+  check:checked {
-    color: #000; }
+    -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+  treeview.view check:indeterminate:selected,
+  check:indeterminate {
+    -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+
+treeview.view radio:selected:focus:disabled, treeview.view radio:selected:focus, treeview.view radio:selected:backdrop:disabled, treeview.view radio:selected:backdrop, treeview.view radio:selected:disabled, treeview.view radio:selected,
+radio {
+  border-radius: 100%; }
+  treeview.view radio:checked:selected,
+  radio:checked {
+    -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+  treeview.view radio:indeterminate:selected,
+  radio:indeterminate {
+    -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+
+@keyframes check_check {
+  from {
+    -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+  to {
+    -gtk-icon-transform: unset; } }
+@keyframes check_radio {
+  from {
+    -gtk-icon-transform: scale(0); }
+  to {
+    -gtk-icon-transform: unset; } }
+@keyframes check_indeterminate {
+  from {
+    -gtk-icon-transform: scale(0, 1); }
+  to {
+    -gtk-icon-transform: unset; } }
+check:not(:indeterminate):checked {
+  animation: check_check 400ms; }
+
+radio:not(:indeterminate):checked {
+  animation: check_radio 400ms; }
+
+check:indeterminate:checked, radio:indeterminate:checked {
+  animation: check_indeterminate 400ms; }
+
+menu menuitem check:not(:indeterminate):checked,
+menu menuitem radio:not(:indeterminate):checked,
+menu menuitem check:indeterminate:checked:active,
+menu menuitem radio:indeterminate:checked {
+  animation: none; }
+
+treeview.view check:selected:focus, treeview.view check:selected:hover, treeview.view check:selected,
+treeview.view radio:selected:focus,
+treeview.view radio:selected:hover,
+treeview.view radio:selected {
+  color: #fff; }
+treeview.view check:selected:backdrop:hover, treeview.view check:selected:backdrop,
+treeview.view radio:selected:backdrop:hover,
+treeview.view radio:selected:backdrop {
+  color: #fff;
+  border-color: #fff; }
+treeview.view check:selected:backdrop:disabled,
+treeview.view radio:selected:backdrop:disabled {
+  color: gray;
+  border-color: gray; }
+treeview.view check:selected:disabled,
+treeview.view radio:selected:disabled {
+  color: gray; }
 
 /************
  * GtkScale *