#371 extend new colors to avatar, badge, icon, knob, linear/circular progress and spinner

nicegui/colors.py

@@ -0,0 +1,31 @@
+from typing import Optional, get_args
+
+from .element import Element
+from .tailwind_types.background_color import BackgroundColor
+
+QUASAR_COLORS = {'primary', 'secondary', 'accent', 'dark', 'positive', 'negative', 'info', 'warning'}
+for color in {'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green',
+              'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'}:
+    QUASAR_COLORS.add(color)
+    for i in range(1, 15):
+        QUASAR_COLORS.add(f'{color}-{i}')
+
+TAILWIND_COLORS = get_args(BackgroundColor)
+
+
+def set_text_color(element: Element, color: Optional[str], *, prop_name: str = 'color') -> None:
+    if color in QUASAR_COLORS:
+        element._props[prop_name] = color
+    elif color in TAILWIND_COLORS:
+        element._classes.append(f'text-{color}')
+    elif color is not None:
+        element._style['color'] = color
+
+
+def set_background_color(element: Element, color: Optional[str], *, prop_name: str = 'color') -> None:
+    if color in QUASAR_COLORS:
+        element._props[prop_name] = color
+    elif color in TAILWIND_COLORS:
+        element._classes.append(f'bg-{color}')
+    elif color is not None:
+        element._style['background-color'] = color

nicegui/elements/avatar.py

@@ -1,5 +1,6 @@
 from typing import Optional
 
+from ..colors import set_background_color, set_text_color
 from ..element import Element
 
 
@@ -7,7 +8,7 @@ class Avatar(Element):
 
     def __init__(self,
                  icon: str = 'none', *,
-                 color: str = 'primary',
+                 color: Optional[str] = 'primary',
                  text_color: Optional[str] = None,
                  size: Optional[str] = None,
                  font_size: Optional[str] = None,
@@ -20,7 +21,7 @@ class Avatar(Element):
         `QAvatar <https://quasar.dev/vue-components/avatar>`_ component.
 
         :param icon: name of the icon or image path with "img:" prefix (e.g. "map", "img:path/to/image.png")
-        :param color: color name for component from the Quasar Color Palette (e.g. "primary", "teal-10")
+        :param color: background color (either a Quasar, Tailwind, or CSS color or `None`, default: "primary")
         :param text_color: color name from the Quasar Color Palette (e.g. "primary", "teal-10")
         :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) (e.g. "16px", "2rem")
         :param font_size: size in CSS units, including unit name, of the content (icon, text) (e.g. "18px", "2rem")
@@ -30,12 +31,11 @@ class Avatar(Element):
         super().__init__('q-avatar')
 
         self._props['icon'] = icon
-        self._props['color'] = color
         self._props['square'] = square
         self._props['rounded'] = rounded
 
-        if text_color is not None:
-            self._props['text-color'] = text_color
+        set_background_color(self, color)
+        set_text_color(self, text_color, prop_name='text-color')
 
         if size is not None:
             self._props['size'] = size

nicegui/elements/badge.py

@@ -1,21 +1,27 @@
+from typing import Optional
+
+from ..colors import set_background_color, set_text_color
 from .mixins.text_element import TextElement
 
 
 class Badge(TextElement):
 
-    def __init__(self, text: str = '', *,
-                 color: str = 'blue', text_color: str = 'white', outline: bool = False) -> None:
+    def __init__(self,
+                 text: str = '', *,
+                 color: Optional[str] = 'primary',
+                 text_color: Optional[str] = None,
+                 outline: bool = False) -> None:
         """Badge
 
         A badge element wrapping Quasar's
         `QBadge <https://quasar.dev/vue-components/badge>`_ component.
 
         :param text: the initial value of the text field
-        :param color: the color name for component from the Quasar Color Palette (default: "blue")
-        :param text_color: overrides text color (if needed); color name from the Quasar Color Palette (default: "white")
+        :param color: the color name for component (either a Quasar, Tailwind, or CSS color or `None`, default: "primary")
+        :param text_color: text color (either a Quasar, Tailwind, or CSS color or `None`, default: `None`)
         :param outline: use 'outline' design (colored text and borders only) (default: False)
         """
         super().__init__(tag='q-badge', text=text)
-        self._props['color'] = color
-        self._props['text_color'] = text_color
+        set_background_color(self, color)
+        set_text_color(self, text_color, prop_name='text-color')
         self._props['outline'] = outline

nicegui/elements/button.py

@@ -1,24 +1,17 @@
-from typing import Callable, Optional, get_args
+from typing import Callable, Optional
 
+from ..colors import set_background_color
 from ..events import ClickEventArguments, handle_event
-from ..tailwind_types.background_color import BackgroundColor
 from .mixins.text_element import TextElement
 
-QUASAR_COLORS = {'primary', 'secondary', 'accent', 'dark', 'positive', 'negative', 'info', 'warning'}
-for color in {'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green',
-              'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'}:
-    for i in range(1, 15):
-        QUASAR_COLORS.add(f'{color}-{i}')
-
-TAILWIND_COLORS = get_args(BackgroundColor)
-
 
 class Button(TextElement):
 
     def __init__(self,
                  text: str = '', *,
                  on_click: Optional[Callable] = None,
-                 color: Optional[str] = 'primary') -> None:
+                 color: Optional[str] = 'primary',
+                 ) -> None:
         """Button
 
         This element is based on Quasar's `QBtn <https://quasar.dev/vue-components/button>`_ component.
@@ -33,12 +26,7 @@ class Button(TextElement):
         :param color: the color of the button (either a Quasar, Tailwind, or CSS color or `None`, default: 'primary')
         """
         super().__init__(tag='q-btn', text=text)
-        if color in QUASAR_COLORS:
-            self._props['color'] = color
-        elif color in TAILWIND_COLORS:
-            self._classes.append(f'bg-{color}')
-        elif color is not None:
-            self._style['background-color'] = color
+        set_background_color(self, color)
 
         if on_click:
             self.on('click', lambda _: handle_event(on_click, ClickEventArguments(sender=self, client=self.client)))

nicegui/elements/icon.py

@@ -1,5 +1,6 @@
 from typing import Optional
 
+from ..colors import set_text_color
 from ..element import Element
 
 
@@ -19,7 +20,7 @@ class Icon(Element):
 
         :param name: name of the icon
         :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl), examples: 16px, 2rem
-        :param color: color name for component, examples: primary, teal-10
+        :param color: icon color (either a Quasar, Tailwind, or CSS color or `None`, default: `None`)
         """
         super().__init__('q-icon')
         self._props['name'] = name
@@ -27,5 +28,4 @@ class Icon(Element):
         if size:
             self._props['size'] = size
 
-        if color:
-            self._props['color'] = color
+        set_text_color(self, color)

nicegui/elements/knob.py

@@ -1,5 +1,6 @@
 from typing import Optional
 
+from ..colors import set_text_color
 from .label import Label
 from .mixins.value_element import ValueElement
 
@@ -27,7 +28,7 @@ class Knob(ValueElement):
         :param min: the minimum value (default: 0.0)
         :param max: the maximum value (default: 1.0)
         :param step: the step size (default: 0.01)
-        :param color: color name for component, examples: primary, teal-10 (default: "primary")
+        :param color: knob color (either a Quasar, Tailwind, or CSS color or `None`, default: "primary")
         :param center_color: color name for the center part of the component, examples: primary, teal-10
         :param track_color: color name for the track of the component, examples: primary, teal-10
         :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl), examples: 16px, 2rem
@@ -38,7 +39,7 @@ class Knob(ValueElement):
         self._props['min'] = min
         self._props['max'] = max
         self._props['step'] = step
-        self._props['color'] = color
+        set_text_color(self, color)
         self._props['show-value'] = True  # NOTE: enable default slot, e.g. for nested icon
 
         if center_color:

nicegui/elements/progress.py

@@ -2,13 +2,19 @@ from typing import Optional
 
 from nicegui import ui
 
+from ..colors import set_text_color
 from .mixins.value_element import ValueElement
 
 
 class LinearProgress(ValueElement):
     VALUE_PROP = 'value'
 
-    def __init__(self, value: float = 0.0, *, size: Optional[str] = None, show_value: bool = True) -> None:
+    def __init__(self,
+                 value: float = 0.0, *,
+                 size: Optional[str] = None,
+                 show_value: bool = True,
+                 color: Optional[str] = 'primary',
+                 ) -> None:
         """Linear Progress
 
         A linear progress bar wrapping Quasar's
@@ -17,9 +23,11 @@ class LinearProgress(ValueElement):
         :param value: the initial value of the field (from 0.0 to 1.0)
         :param size: the height of the progress bar (default: "20px" with value label and "4px" without)
         :param show_value: whether to show a value label in the center (default: `True`)
+        :param color: color (either a Quasar, Tailwind, or CSS color or `None`, default: "primary")
         """
         super().__init__(tag='q-linear-progress', value=value, on_value_change=None)
         self._props['size'] = size if size is not None else '20px' if show_value else '4px'
+        set_text_color(self, color)
 
         if show_value:
             with self:
@@ -29,23 +37,32 @@ class LinearProgress(ValueElement):
 class CircularProgress(ValueElement):
     VALUE_PROP = 'value'
 
-    def __init__(self, value: float = 0.0, *,
-                 min: float = 0.0, max: float = 1.0, size: str = 'xl', show_value: bool = True) -> None:
+    def __init__(self,
+                 value: float = 0.0, *,
+                 min: float = 0.0,
+                 max: float = 1.0,
+                 size: str = 'xl',
+                 show_value: bool = True,
+                 color: Optional[str] = 'primary',
+                 ) -> None:
         """Circular Progress
 
         A circular progress bar wrapping Quasar's
         `QCircularProgress <https://quasar.dev/vue-components/circular-progress>`_.
 
         :param value: the initial value of the field
+        :param min: the minimum value (default: 0.0)
+        :param max: the maximum value (default: 1.0)
         :param size: the size of the progress circle (default: "xl")
         :param show_value: whether to show a value label in the center (default: `True`)
+        :param color: color (either a Quasar, Tailwind, or CSS color or `None`, default: "primary")
         """
         super().__init__(tag='q-circular-progress', value=value, on_value_change=None)
         self._props['min'] = min
         self._props['max'] = max
         self._props['size'] = size
         self._props['show-value'] = show_value
-        self._props['color'] = 'primary'
+        set_text_color(self, color)
         self._props['track-color'] = 'grey-4'
 
         if show_value:

nicegui/elements/spinner.py

@@ -2,6 +2,7 @@ from typing import Optional
 
 from typing_extensions import Literal
 
+from ..colors import set_text_color
 from ..element import Element
 
 SpinnerTypes = Literal[
@@ -33,18 +34,22 @@ SpinnerTypes = Literal[
 
 class Spinner(Element):
 
-    def __init__(self, type: Optional[SpinnerTypes] = 'default', *,
-                 size: str = '1em', color: str = 'primary', thickness: float = 5.0):
+    def __init__(self,
+                 type: Optional[SpinnerTypes] = 'default', *,
+                 size: str = '1em',
+                 color: Optional[str] = 'primary',
+                 thickness: float = 5.0,
+                 ) -> None:
         """Spinner
 
         See `Quasar Spinner <https://quasar.dev/vue-components/spinner>`_ for more information.
 
         :param type: type of spinner (e.g. "audio", "ball", "bars", ..., default: "default")
         :param size: size of the spinner (e.g. "3em", "10px", "xl", ..., default: "1em")
-        :param color: color of the spinner (default: "primary")
+        :param color: color of the spinner (either a Quasar, Tailwind, or CSS color or `None`, default: "primary")
         :param thickness: thickness of the spinner (applies to the "default" spinner only, default: 5.0)
         """
         super().__init__('q-spinner' if type == 'default' else f'q-spinner-{type}')
         self._props['size'] = size
-        self._props['color'] = color
+        set_text_color(self, color)
         self._props['thickness'] = thickness