Styling buttons, text inputs, bool inputs. Raw CSS attributes.

docs/source/examples/Widget Styling.ipynb

@@ -645,6 +645,29 @@
     "s1"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Styles can be given when a widget is constructed, either as a specific Style instance or as a dictionary."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "b3 = Button(description='Styled button', style=dict(\n",
+    "    font_style='italic',\n",
+    "    font_weight='bold',\n",
+    "    font_variant=\"small-caps\",\n",
+    "    text_color='red',\n",
+    "    text_decoration='underline'\n",
+    "))\n",
+    "b3"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},

ipywidgets/widgets/widget_bool.py

@@ -6,13 +6,34 @@
 Represents a boolean using a widget.
 """
 
-from .widget_description import DescriptionWidget
+from .widget_description import DescriptionStyle, DescriptionWidget
 from .widget_core import CoreWidget
 from .valuewidget import ValueWidget
-from .widget import register
+from .widget import register, widget_serialization
+from .trait_types import Color, InstanceDict
 from traitlets import Unicode, Bool, CaselessStrEnum
 
 
+@register
+class CheckboxStyle(DescriptionStyle, CoreWidget):
+    """Checkbox widget style."""
+    _model_name = Unicode('CheckboxStyleModel').tag(sync=True)
+    background = Unicode(None, allow_none=True, help="Background specifications.").tag(sync=True)
+
+
+@register
+class ToggleButtonStyle(DescriptionStyle, CoreWidget):
+    """ToggleButton widget style."""
+    _model_name = Unicode('ToggleButtonStyleModel').tag(sync=True)
+    font_family = Unicode(None, allow_none=True, help="Toggle button text font family.").tag(sync=True)
+    font_size = Unicode(None, allow_none=True, help="Toggle button text font size.").tag(sync=True)
+    font_style = Unicode(None, allow_none=True, help="Toggle button text font style.").tag(sync=True)
+    font_variant = Unicode(None, allow_none=True, help="Toggle button text font variant.").tag(sync=True)
+    font_weight = Unicode(None, allow_none=True, help="Toggle button text font weight.").tag(sync=True)
+    text_color = Color(None, allow_none=True, help="Toggle button text color").tag(sync=True)
+    text_decoration = Unicode(None, allow_none=True, help="Toggle button text decoration.").tag(sync=True)
+
+
 class _Bool(DescriptionWidget, ValueWidget, CoreWidget):
     """A base class for creating widgets that represent booleans."""
     value = Bool(False, help="Bool value").tag(sync=True)
@@ -42,6 +63,8 @@ class Checkbox(_Bool):
     _view_name = Unicode('CheckboxView').tag(sync=True)
     _model_name = Unicode('CheckboxModel').tag(sync=True)
     indent = Bool(True, help="Indent the control to align with other controls with a description.").tag(sync=True)
+    style = InstanceDict(CheckboxStyle, help="Styling customizations").tag(sync=True, **widget_serialization)
+
 
 
 @register
@@ -69,6 +92,7 @@ class ToggleButton(_Bool):
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''], default_value='',
         help="""Use a predefined styling for the button.""").tag(sync=True)
+    style = InstanceDict(ToggleButtonStyle, help="Styling customizations").tag(sync=True, **widget_serialization)
 
 
 @register

ipywidgets/widgets/widget_button.py

@@ -22,7 +22,13 @@ class ButtonStyle(Style, CoreWidget):
     """Button style widget."""
     _model_name = Unicode('ButtonStyleModel').tag(sync=True)
     button_color = Color(None, allow_none=True, help="Color of the button").tag(sync=True)
-    font_weight = Unicode(help="Button text font weight.").tag(sync=True)
+    font_family = Unicode(None, allow_none=True, help="Button text font family.").tag(sync=True)
+    font_size = Unicode(None, allow_none=True, help="Button text font size.").tag(sync=True)
+    font_style = Unicode(None, allow_none=True, help="Button text font style.").tag(sync=True)
+    font_variant = Unicode(None, allow_none=True, help="Button text font variant.").tag(sync=True)
+    font_weight = Unicode(None, allow_none=True, help="Button text font weight.").tag(sync=True)
+    text_color = Unicode(None, allow_none=True, help="Button text color.").tag(sync=True)
+    text_decoration = Unicode(None, allow_none=True, help="Button text decoration.").tag(sync=True)
 
 
 @register

ipywidgets/widgets/widget_string.py

@@ -6,15 +6,50 @@
 Represents a unicode string using a widget.
 """
 
-from .widget_description import DescriptionWidget
+from .widget_description import DescriptionStyle, DescriptionWidget
 from .valuewidget import ValueWidget
-from .widget import CallbackDispatcher, register
+from .widget import CallbackDispatcher, register, widget_serialization
 from .widget_core import CoreWidget
-from .trait_types import TypedTuple
+from .trait_types import Color, InstanceDict, TypedTuple
 from traitlets import Unicode, Bool, Int
 from warnings import warn
 
 
+class _StringStyle(DescriptionStyle, CoreWidget):
+    """Text input style widget."""
+    _model_name = Unicode('StringStyleModel').tag(sync=True)
+    background = Unicode(None, allow_none=True, help="Background specifications.").tag(sync=True)
+    font_size = Unicode(None, allow_none=True, help="Text font size.").tag(sync=True)
+    text_color = Color(None, allow_none=True, help="Text color").tag(sync=True)
+
+
+@register
+class LabelStyle(_StringStyle):
+    """Label style widget."""
+    _model_name = Unicode('LabelStyleModel').tag(sync=True)
+    font_family = Unicode(None, allow_none=True, help="Label text font family.").tag(sync=True)
+    font_style = Unicode(None, allow_none=True, help="Label text font style.").tag(sync=True)
+    font_variant = Unicode(None, allow_none=True, help="Label text font variant.").tag(sync=True)
+    font_weight = Unicode(None, allow_none=True, help="Label text font weight.").tag(sync=True)
+    text_decoration = Unicode(None, allow_none=True, help="Label text decoration.").tag(sync=True)
+
+
+@register
+class TextStyle(_StringStyle):
+    """Text input style widget."""
+    _model_name = Unicode('TextStyleModel').tag(sync=True)
+
+@register
+class HTMLStyle(_StringStyle):
+    """HTML style widget."""
+    _model_name = Unicode('HTMLStyleModel').tag(sync=True)
+
+@register
+class HTMLMathStyle(_StringStyle):
+    """HTML with math style widget."""
+    _model_name = Unicode('HTMLMathStyleModel').tag(sync=True)
+
+
 class _String(DescriptionWidget, ValueWidget, CoreWidget):
     """Base class used to create widgets that represent a string."""
 
@@ -24,7 +59,7 @@ class _String(DescriptionWidget, ValueWidget, CoreWidget):
     # the text, not the bottom margin. See the last paragraph of
     # https://www.w3.org/TR/CSS2/visudet.html#leading
     placeholder = Unicode('\u200b', help="Placeholder text to display when nothing has been typed").tag(sync=True)
-
+    style = InstanceDict(_StringStyle).tag(sync=True, **widget_serialization)
 
     def __init__(self, value=None, **kwargs):
         if value is not None:
@@ -33,18 +68,19 @@ def __init__(self, value=None, **kwargs):
 
     _model_name = Unicode('StringModel').tag(sync=True)
 
-
 @register
 class HTML(_String):
     """Renders the string `value` as HTML."""
     _view_name = Unicode('HTMLView').tag(sync=True)
     _model_name = Unicode('HTMLModel').tag(sync=True)
+    style = InstanceDict(HTMLStyle).tag(sync=True, **widget_serialization)
 
 @register
 class HTMLMath(_String):
     """Renders the string `value` as HTML, and render mathematics."""
     _view_name = Unicode('HTMLMathView').tag(sync=True)
     _model_name = Unicode('HTMLMathModel').tag(sync=True)
+    style = InstanceDict(HTMLMathStyle).tag(sync=True, **widget_serialization)
 
 
 @register
@@ -56,6 +92,7 @@ class Label(_String):
     """
     _view_name = Unicode('LabelView').tag(sync=True)
     _model_name = Unicode('LabelModel').tag(sync=True)
+    style = InstanceDict(LabelStyle).tag(sync=True, **widget_serialization)
 
 
 @register
@@ -66,6 +103,7 @@ class Textarea(_String):
     rows = Int(None, allow_none=True, help="The number of rows to display.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
     continuous_update = Bool(True, help="Update the value as the user types. If False, update on submission, e.g., pressing Enter or navigating away.").tag(sync=True)
+    style = InstanceDict(TextStyle).tag(sync=True, **widget_serialization)
 
 @register
 class Text(_String):
@@ -74,6 +112,7 @@ class Text(_String):
     _model_name = Unicode('TextModel').tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
     continuous_update = Bool(True, help="Update the value as the user types. If False, update on submission, e.g., pressing Enter or navigating away.").tag(sync=True)
+    style = InstanceDict(TextStyle).tag(sync=True, **widget_serialization)
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)

packages/base/src/widget_style.ts

@@ -5,6 +5,11 @@ import { assign } from './utils';
 
 import { WidgetModel, WidgetView, DOMWidgetView } from './widget';
 
+/**
+ * Three functions to deal with some CSS attributes
+ * to make them easier to use.
+ */
+
 export class StyleModel extends WidgetModel {
   defaults(): Backbone.ObjectHash {
     const Derived = this.constructor as typeof StyleModel;

packages/controls/src/widget_bool.ts

@@ -1,11 +1,77 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { DOMWidgetView } from '@jupyter-widgets/base';
+
 import { CoreDescriptionModel } from './widget_core';
 
-import { DescriptionView } from './widget_description';
+import { DescriptionStyleModel, DescriptionView } from './widget_description';
 
-import { DOMWidgetView } from '@jupyter-widgets/base';
+export class CheckboxStyleModel extends DescriptionStyleModel {
+  defaults(): Backbone.ObjectHash {
+    return {
+      ...super.defaults(),
+      _model_name: 'CheckboxStyleModel',
+    };
+  }
+
+  public static styleProperties = {
+    ...DescriptionStyleModel.styleProperties,
+    background: {
+      selector: '',
+      attribute: 'background',
+      default: null as any,
+    },
+  };
+}
+
+export class ToggleButtonStyleModel extends DescriptionStyleModel {
+  defaults(): Backbone.ObjectHash {
+    return {
+      ...super.defaults(),
+      _model_name: 'ToggleButtonStyleModel',
+    };
+  }
+
+  public static styleProperties = {
+    ...DescriptionStyleModel.styleProperties,
+    font_family: {
+      selector: '',
+      attribute: 'font-family',
+      default: '',
+    },
+    font_size: {
+      selector: '',
+      attribute: 'font-size',
+      default: '',
+    },
+    font_style: {
+      selector: '',
+      attribute: 'font-style',
+      default: '',
+    },
+    font_variant: {
+      selector: '',
+      attribute: 'font-variant',
+      default: '',
+    },
+    font_weight: {
+      selector: '',
+      attribute: 'font-weight',
+      default: '',
+    },
+    text_color: {
+      selector: '',
+      attribute: 'color',
+      default: '',
+    },
+    text_decoration: {
+      selector: '',
+      attribute: 'text-decoration',
+      default: '',
+    },
+  };
+}
 
 export class BoolModel extends CoreDescriptionModel {
   defaults(): Backbone.ObjectHash {
@@ -23,6 +89,7 @@ export class CheckboxModel extends CoreDescriptionModel {
     return {
       ...super.defaults(),
       indent: true,
+      style: null,
       _view_name: 'CheckboxView',
       _model_name: 'CheckboxModel',
     };
@@ -183,6 +250,7 @@ export class ToggleButtonModel extends BoolModel {
       tooltip: '',
       icon: '',
       button_style: '',
+      style: null,
     };
   }
 }

packages/controls/src/widget_button.ts

@@ -23,11 +23,41 @@ export class ButtonStyleModel extends StyleModel {
       attribute: 'background-color',
       default: null as any,
     },
+    font_family: {
+      selector: '',
+      attribute: 'font-family',
+      default: '',
+    },
+    font_size: {
+      selector: '',
+      attribute: 'font-size',
+      default: '',
+    },
+    font_style: {
+      selector: '',
+      attribute: 'font-style',
+      default: '',
+    },
+    font_variant: {
+      selector: '',
+      attribute: 'font-variant',
+      default: '',
+    },
     font_weight: {
       selector: '',
       attribute: 'font-weight',
       default: '',
     },
+    text_color: {
+      selector: '',
+      attribute: 'color',
+      default: '',
+    },
+    text_decoration: {
+      selector: '',
+      attribute: 'text-decoration',
+      default: '',
+    },
   };
 }