[dom] icon kinds

ivette/src/dome/renderer/controls/icons.tsx

@@ -96,6 +96,8 @@ export function SVG(props: SVGprops): null | JSX.Element {
 // --- Icon Component
 // --------------------------------------------------------------------------
 
+export type IconKind = 'disabled' | 'warning' | 'positive' | 'negative';
+
 /** Icon Component Properties */
 export interface IconProps extends SVGprops {
   /** Additional class name(s). */
@@ -108,6 +110,8 @@ export interface IconProps extends SVGprops {
   style?: React.CSSProperties;
   /** Fill style property. */
   fill?: string;
+  /** Icon Kind. */
+  kind?: IconKind;
   /** Click callback. */
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
@@ -118,7 +122,7 @@ export interface IconProps extends SVGprops {
  */
 export function Icon(props: IconProps): JSX.Element {
   const {
-    id, title, onClick, fill,
+    id, title, onClick, fill, kind,
     size, className, offset, style,
     visible = true, display = true,
   } = props;
@@ -126,6 +130,7 @@ export function Icon(props: IconProps): JSX.Element {
     'dome-xIcon',
     !visible && 'dome-control-hidden',
     !display && 'dome-control-erased',
+    kind && ('dome-xIcon-' + kind),
     className
   );
   const divStyle = styles(fill && { fill }, style);

ivette/src/dome/renderer/controls/labels.tsx

@@ -38,6 +38,9 @@ import './style.css';
 // --- Generic Label
 // --------------------------------------------------------------------------
 
+export type IconKind =
+  'default' | 'disabled' | 'warning' | 'positive' | 'negative';
+
 /** Labels support fowarding refs to their inner [<label/>] element. */
 export interface LabelProps {
   /** Text of the label. Prepend to other children elements. */
@@ -46,8 +49,12 @@ export interface LabelProps {
   icon?: string;
   /** Tool-tip description. */
   title?: string;
+  /** Icon kind. */
+  kind?: IconKind,
   /** Additional class. */
   className?: string;
+  /** Additional class for icon. */
+  iconClassName?: string;
   /** Additional style. */
   style?: React.CSSProperties;
   /** If `false`, do not display the label. Default to `true`. */
@@ -64,15 +71,19 @@ export interface LabelProps {
 
 const makeLabel = (className: string) =>
   function Label(
-      props: LabelProps,
-      ref: LegacyRef<HTMLLabelElement> | undefined
-    ): JSX.Element {
-    const { display = true } = props;
+    props: LabelProps,
+    ref: LegacyRef<HTMLLabelElement> | undefined
+  ): JSX.Element {
+    const { display = true, kind = 'default' } = props;
     const allClasses = classes(
       className,
       !display && 'dome-control-erased',
       props.className,
     );
+    const iconClass = classes(
+      'dome-xIcon-' + kind,
+      props.iconClassName,
+    );
     return (
       <label
         ref={ref}
@@ -83,7 +94,8 @@ const makeLabel = (className: string) =>
         onDoubleClick={props.onDoubleClick}
         onContextMenu={props.onContextMenu}
       >
-        {props.icon && <Icon title={props.title} id={props.icon} />}
+        {props.icon &&
+         <Icon title={props.title} id={props.icon} className={iconClass} />}
         {props.label}
         {props.children}
       </label>

ivette/src/dome/renderer/controls/style.css

@@ -9,11 +9,6 @@
     white-space: nowrap ;
 }
 
-.dome-xLabel .dome-xIcon {
-    margin-right: 4px ;
-    fill: var(--info-text-discrete);
-}
-
 .dome-xLabel.dome-text-descr {
     overflow: auto ;
     white-space: wrap ;
@@ -34,6 +29,12 @@
     position:relative ;
 }
 
+.dome-xIcon-default { fill: var(--var-info-text-discrete) ; }
+.dome-xIcon-positive { fill: var(--positive-button-color) ; }
+.dome-xIcon-negative { fill: var(--negative-button-color) ; }
+.dome-xIcon-warning { fill: var(--warning-button-color) ; }
+.dome-xIcon-disabled { fill: var(--background-intense) ; }
+
 .dome-xBadge {
     flex: 0 0 auto ;
     display: inline ;