Using the Color trait type for styling widgets

IPython/html/widgets/widget.py

@@ -20,7 +20,7 @@ from IPython.kernel.comm import Comm
 from IPython.config import LoggingConfigurable
 from IPython.utils.importstring import import_item
 from IPython.utils.traitlets import Unicode, Dict, Instance, Bool, List, \
-    CaselessStrEnum, Tuple, CUnicode, Int, Set
+    CaselessStrEnum, Tuple, CUnicode, Int, Set, Color
 from IPython.utils.py3compat import string_types
 
 #-----------------------------------------------------------------------------
@@ -438,9 +438,9 @@ class DOMWidget(Widget):
     padding = CUnicode(sync=True)
     margin = CUnicode(sync=True)
 
-    color = Unicode(sync=True)
-    background_color = Unicode(sync=True)
-    border_color = Unicode(sync=True)
+    color = Color(None, allow_none=True, sync=True)
+    background_color = Color(None, allow_none=True, sync=True)
+    border_color = Color(None, allow_none=True, sync=True)
 
     border_width = CUnicode(sync=True)
     border_radius = CUnicode(sync=True)

IPython/html/widgets/widget_float.py

@@ -14,7 +14,7 @@ Represents an unbounded float using a widget.
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, register
-from IPython.utils.traitlets import Unicode, CFloat, Bool, CaselessStrEnum, Tuple
+from IPython.utils.traitlets import Unicode, CFloat, Bool, CaselessStrEnum, Tuple, Color
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
@@ -133,7 +133,7 @@ class FloatSlider(_BoundedFloat):
         default_value='horizontal', help="Vertical or horizontal.", sync=True)
     _range = Bool(False, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
-    slider_color = Unicode(sync=True)
+    slider_color = Color(None, allow_none=True, sync=True)
 
 
 @register('IPython.FloatProgress')
@@ -287,7 +287,7 @@ class FloatRangeSlider(_BoundedFloatRange):
         default_value='horizontal', help="Vertical or horizontal.", sync=True)
     _range = Bool(True, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
-    slider_color = Unicode(sync=True)
+    slider_color = Color(None, allow_none=True, sync=True)
 
 # Remove in IPython 4.0
 FloatTextWidget = DeprecatedClass(FloatText, 'FloatTextWidget')

IPython/html/widgets/widget_int.py

@@ -14,7 +14,7 @@ Represents an unbounded int using a widget.
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, register
-from IPython.utils.traitlets import Unicode, CInt, Bool, CaselessStrEnum, Tuple
+from IPython.utils.traitlets import Unicode, CInt, Bool, CaselessStrEnum, Tuple, Color
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
@@ -87,7 +87,7 @@ class IntSlider(_BoundedInt):
         default_value='horizontal', help="Vertical or horizontal.", sync=True)
     _range = Bool(False, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
-    slider_color = Unicode(sync=True)
+    slider_color = Color(None, allow_none=True, sync=True)
 
 
 @register('IPython.IntProgress')
@@ -198,7 +198,7 @@ class IntRangeSlider(_BoundedIntRange):
         default_value='horizontal', help="Vertical or horizontal.", sync=True)
     _range = Bool(True, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
-    slider_color = Unicode(sync=True)
+    slider_color = Color(None, allow_none=True, sync=True)
 
 # Remove in IPython 4.0
 IntTextWidget = DeprecatedClass(IntText, 'IntTextWidget')