Style radio buttons using SVG graphics

Signed-off-by: Manuel Quiñones <manuq@laptop.org>

6 files changed, 148 insertions, 4 deletions

diff --git a/gtk3/theme/assets/Makefile.am b/gtk3/theme/assets/Makefile.am
index 661dbc9..c19ff4d 100644
--- a/gtk3/theme/assets/Makefile.am
+++ b/gtk3/theme/assets/Makefile.am
@@ -1,6 +1,10 @@
 assets =			\
 	scale-slider.svg	\
-	scale-slider-active.svg
+	scale-slider-active.svg \
+	radio.svg		\
+	radio-selected.svg	\
+	radio-active.svg	\
+	radio-active-selected.svg
 
 sugar72dir = $(datadir)/themes/sugar-72/gtk-3.0/assets
 sugar100dir = $(datadir)/themes/sugar-100/gtk-3.0/assets
diff --git a/gtk3/theme/assets/radio-active-selected.svg b/gtk3/theme/assets/radio-active-selected.svg
new file mode 100644
index 0000000..c1d1085
--- /dev/null
+++ b/gtk3/theme/assets/radio-active-selected.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#E5E5E5">
+  <!ENTITY stroke_color "#808080">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="26"
+   height="26"
+   id="svg27352">
+  <g
+     transform="translate(0,10)"
+     id="layer1">
+    <path
+       d="M 13,0 C 5.8202983,0 0,5.8202983 0,13 0,20.179702 5.8202983,26 13,26 20.179702,26 26,20.179702 26,13 26,5.8202983 20.179702,0 13,0 z m 0,1 C 19.627417,1 25,6.372583 25,13 25,19.627417 19.627417,25 13,25 6.372583,25 1,19.627417 1,13 1,6.372583 6.372583,1 13,1 z"
+       transform="translate(0,-10)"
+       id="path3002"
+       style="color:#000000;fill:&stroke_color;;fill-opacity:1;stroke:none;stroke-width:0.82332432;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       d="m 11.276603,5.8201666 a 5.3516083,5.3516083 0 1 1 -10.70321633,0 5.3516083,5.3516083 0 1 1 10.70321633,0 z"
+       transform="matrix(2.2423166,0,0,2.2423166,-0.28571452,-10.050656)"
+       id="path4079"
+       style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:none;stroke-width:0.82325572;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       d="m 14.100023,7.3515821 a 5.9129128,5.9129128 0 1 1 -11.8258259,0 5.9129128,5.9129128 0 1 1 11.8258259,0 z"
+       transform="matrix(0.84560692,0,0,0.84560692,6.0769232,-3.2165487)"
+       id="path4754"
+       style="color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.84599996;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>
diff --git a/gtk3/theme/assets/radio-active.svg b/gtk3/theme/assets/radio-active.svg
new file mode 100644
index 0000000..a5fe591
--- /dev/null
+++ b/gtk3/theme/assets/radio-active.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#FFFFFF">
+  <!ENTITY stroke_color "#808080">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="26"
+   height="26"
+   id="svg27352">
+  <g
+     transform="translate(0,10)"
+     id="layer1">
+    <path
+       d="M 13,0 C 5.8202983,0 0,5.8202983 0,13 0,20.179702 5.8202983,26 13,26 20.179702,26 26,20.179702 26,13 26,5.8202983 20.179702,0 13,0 z m 0,1 C 19.627417,1 25,6.372583 25,13 25,19.627417 19.627417,25 13,25 6.372583,25 1,19.627417 1,13 1,6.372583 6.372583,1 13,1 z"
+       transform="translate(0,-10)"
+       id="path3002"
+       style="color:#000000;fill:&stroke_color;;fill-opacity:1;stroke:none;stroke-width:0.82332432;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       d="m 11.276603,5.8201666 a 5.3516083,5.3516083 0 1 1 -10.70321633,0 5.3516083,5.3516083 0 1 1 10.70321633,0 z"
+       transform="matrix(2.2423166,0,0,2.2423166,-0.28571452,-10.050656)"
+       id="path4079"
+       style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:none;stroke-width:0.82325572;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       d="m 14.100023,7.3515821 a 5.9129128,5.9129128 0 1 1 -11.8258259,0 5.9129128,5.9129128 0 1 1 11.8258259,0 z"
+       transform="matrix(0.84560692,0,0,0.84560692,6.0769232,-3.2165487)"
+       id="path4754"
+       style="color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.84599996;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>
diff --git a/gtk3/theme/assets/radio-selected.svg b/gtk3/theme/assets/radio-selected.svg
new file mode 100644
index 0000000..0f180d4
--- /dev/null
+++ b/gtk3/theme/assets/radio-selected.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#E5E5E5">
+  <!ENTITY stroke_color "#010101">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="26"
+   height="26"
+   id="svg27352">
+  <g
+     transform="translate(0,10)"
+     id="layer1">
+    <path
+       d="M 13,0 C 5.8202983,0 0,5.8202983 0,13 0,20.179702 5.8202983,26 13,26 20.179702,26 26,20.179702 26,13 26,5.8202983 20.179702,0 13,0 z m 0,1 C 19.627417,1 25,6.372583 25,13 25,19.627417 19.627417,25 13,25 6.372583,25 1,19.627417 1,13 1,6.372583 6.372583,1 13,1 z"
+       transform="translate(0,-10)"
+       id="path3002"
+       style="color:#000000;fill:&stroke_color;;fill-opacity:1;stroke:none;stroke-width:0.82332432;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       d="m 11.276603,5.8201666 a 5.3516083,5.3516083 0 1 1 -10.70321633,0 5.3516083,5.3516083 0 1 1 10.70321633,0 z"
+       transform="matrix(2.2423166,0,0,2.2423166,-0.28571452,-10.050656)"
+       id="path4079"
+       style="color:#000000;fill:&fill_color;;fill-opacity:1;stroke:none;stroke-width:0.82325572;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>
diff --git a/gtk3/theme/assets/radio.svg b/gtk3/theme/assets/radio.svg
new file mode 100644
index 0000000..25f104c
--- /dev/null
+++ b/gtk3/theme/assets/radio.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+  <!ENTITY fill_color "#FFFFFF">
+  <!ENTITY stroke_color "#808080">
+]>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="26"
+   height="26"
+   id="svg27352">
+  <g
+     transform="translate(0,10)"
+     id="layer1">
+    <path
+       d="M 13,0 C 5.8202983,0 0,5.8202983 0,13 0,20.179702 5.8202983,26 13,26 20.179702,26 26,20.179702 26,13 26,5.8202983 20.179702,0 13,0 z m 0,1 C 19.627417,1 25,6.372583 25,13 25,19.627417 19.627417,25 13,25 6.372583,25 1,19.627417 1,13 1,6.372583 6.372583,1 13,1 z"
+       transform="translate(0,-10)"
+       id="path3002"
+       style="color:#000000;fill:&stroke_color;;fill-opacity:1;stroke:none;stroke-width:0.82332432;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>
diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index 4fc2308..c12078c 100644
--- a/gtk3/theme/gtk-widgets.css.em
+++ b/gtk3/theme/gtk-widgets.css.em
@@ -35,7 +35,13 @@ else: # About 72% of the XO size, adjusted so that eg. toolbuttons work
     toolbutton_padding = 6      # 7.68
 
 
-radio_size = my_floor(subcell_size + bullet_size + line_width)
+# Radio size used to be:
+#
+# radio_size = my_floor(subcell_size + bullet_size + line_width)
+#
+# But a screenshot shows that the graphic was actually rendered at 26px
+# so the SVG displays at the correct size.
+radio_size = 26
 scale_slider_width = my_floor(2 * subcell_size + line_width)
 thickness = my_ceil(line_width)
 
@@ -50,7 +56,6 @@ icon_large = icon_base * 5
     background-color: @button_grey;
     color: @black;
 
-    border-width: $(thickness)px;
     border-color: none;
     border-radius: 0;
     border-style: none;
@@ -71,7 +76,7 @@ icon_large = icon_base * 5
     -GtkEntry-focus-line-width: 0;
     -GtkScale-focus-line-width: 0;
     -GtkScale-focus-line-width: 0;
-    -GtkWidget-focus-padding: 0;
+    -GtkWidget-focus-padding: 3;
     /* 0.05 works good for both the sugar and sugar-xo themes */
     -GtkWidget-cursor-aspect-ratio: 0.05;
 
@@ -111,6 +116,8 @@ icon_large = icon_base * 5
     -GtkButtonBox-child-internal-pad-x: 0;
     -GtkButtonBox-child-internal-pad-y: 0;
 
+    -GtkCheckButton-indicator-size: $radio_size;
+    -GtkCheckButton-indicator-spacing: 3;
 }
 
 /* spinbutton should be *above* button */
@@ -487,3 +494,27 @@ GtkRadioButton:prelight,
 GtkCheckButton:prelight {
     background-color: alpha(@theme_base_color, 0.0);
 }
+
+.radio,
+.radio row:selected,
+.radio row:selected:focused {
+    background-image: url("assets/radio2.svg");
+}
+
+.radio:selected,
+.radio:selected row:selected,
+.radio:selected row:selected:focused {
+    background-image: url("assets/radio-selected.svg");
+}
+
+.radio:active,
+.radio row:selected:active,
+.radio row:selected:focused:active {
+    background-image: url("assets/radio-active.svg");
+}
+
+.radio:active:selected,
+.radio:selected row:selected:active,
+.radio:selected row:selected:focused:active {
+    background-image: url("assets/radio-active-selected.svg");
+}