fix #993 Make the components more low resolution friendly

domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java

@@ -81,6 +81,123 @@ public interface GenericCss {
                   () -> "dui-success"))
           .replaceWith(CompositeCssClass.of(() -> "dui-ctx", () -> "dui-accent"));
 
+  CssClass dui_accent_l_5 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-4",
+                  () -> "dui-accent-l-3",
+                  () -> "dui-accent-l-2",
+                  () -> "dui-accent-l-1",
+                  () -> "dui-accent-d-1",
+                  () -> "dui-accent-d-2",
+                  () -> "dui-accent-d-3",
+                  () -> "dui-accent-d-4"))
+          .replaceWith(() -> "dui-accent-l-5");
+
+  CssClass dui_accent_l_4 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-5",
+                  () -> "dui-accent-l-3",
+                  () -> "dui-accent-l-2",
+                  () -> "dui-accent-l-1",
+                  () -> "dui-accent-d-1",
+                  () -> "dui-accent-d-2",
+                  () -> "dui-accent-d-3",
+                  () -> "dui-accent-d-4"))
+          .replaceWith(() -> "dui-accent-l-4");
+
+  CssClass dui_accent_l_3 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-5",
+                  () -> "dui-accent-l-4",
+                  () -> "dui-accent-l-2",
+                  () -> "dui-accent-l-1",
+                  () -> "dui-accent-d-1",
+                  () -> "dui-accent-d-2",
+                  () -> "dui-accent-d-3",
+                  () -> "dui-accent-d-4"))
+          .replaceWith(() -> "dui-accent-l-3");
+
+  CssClass dui_accent_l_2 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-5",
+                  () -> "dui-accent-l-4",
+                  () -> "dui-accent-l-3",
+                  () -> "dui-accent-l-1",
+                  () -> "dui-accent-d-1",
+                  () -> "dui-accent-d-2",
+                  () -> "dui-accent-d-3",
+                  () -> "dui-accent-d-4"))
+          .replaceWith(() -> "dui-accent-l-2");
+
+  CssClass dui_accent_l_1 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-5",
+                  () -> "dui-accent-l-4",
+                  () -> "dui-accent-l-3",
+                  () -> "dui-accent-l-2",
+                  () -> "dui-accent-d-1",
+                  () -> "dui-accent-d-2",
+                  () -> "dui-accent-d-3",
+                  () -> "dui-accent-d-4"))
+          .replaceWith(() -> "dui-accent-l-1");
+
+  CssClass dui_accent_d_1 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-5",
+                  () -> "dui-accent-l-4",
+                  () -> "dui-accent-l-3",
+                  () -> "dui-accent-l-2",
+                  () -> "dui-accent-l-1",
+                  () -> "dui-accent-d-2",
+                  () -> "dui-accent-d-3",
+                  () -> "dui-accent-d-4"))
+          .replaceWith(() -> "dui-accent-d-1");
+
+  CssClass dui_accent_d_2 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-5",
+                  () -> "dui-accent-l-4",
+                  () -> "dui-accent-l-3",
+                  () -> "dui-accent-l-2",
+                  () -> "dui-accent-l-1",
+                  () -> "dui-accent-d-1",
+                  () -> "dui-accent-d-3",
+                  () -> "dui-accent-d-4"))
+          .replaceWith(() -> "dui-accent-d-2");
+
+  CssClass dui_accent_d_3 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-5",
+                  () -> "dui-accent-l-4",
+                  () -> "dui-accent-l-3",
+                  () -> "dui-accent-l-2",
+                  () -> "dui-accent-l-1",
+                  () -> "dui-accent-d-1",
+                  () -> "dui-accent-d-2",
+                  () -> "dui-accent-d-4"))
+          .replaceWith(() -> "dui-accent-d-3");
+
+  CssClass dui_accent_d_4 =
+      new ReplaceCssClass(
+              CompositeCssClass.of(
+                  () -> "dui-accent-l-5",
+                  () -> "dui-accent-l-4",
+                  () -> "dui-accent-l-3",
+                  () -> "dui-accent-l-2",
+                  () -> "dui-accent-l-1",
+                  () -> "dui-accent-d-1",
+                  () -> "dui-accent-d-2",
+                  () -> "dui-accent-d-3"))
+          .replaceWith(() -> "dui-accent-d-4");
+
   CssClass dui_success =
       new ReplaceCssClass(
               CompositeCssClass.of(

domino-ui/src/main/java/org/dominokit/domino/ui/style/Waves.java

@@ -21,6 +21,7 @@
 import static org.dominokit.domino.ui.utils.ElementsFactory.elements;
 
 import elemental2.dom.DOMRect;
+import elemental2.dom.DomGlobal;
 import elemental2.dom.Element;
 import elemental2.dom.Event;
 import elemental2.dom.EventListener;
@@ -141,7 +142,10 @@ public void run() {
   private void stopCurrentWave() {
     if (nonNull(delayTimer)) delayTimer.cancel();
     if (nonNull(removeTimer)) removeTimer.cancel();
-    if (nonNull(ripple)) ripple.remove();
+    if (nonNull(ripple)) {
+      final DivElement temp = ripple;
+      DomGlobal.setTimeout(p -> temp.remove(), 100);
+    }
   }
 
   private String convertStyle(JsPropertyMap<String> rippleStyle) {
@@ -186,7 +190,6 @@ public void handleEvent(Event evt) {
 
       ripple = elements.div().addCss("dui-waves-ripple", "dui-waves-rippling");
       target.appendChild(ripple);
-
       ElementOffset position = offset(target.element());
       double relativeY = (mouseEvent.pageY - position.top);
       double relativeX = (mouseEvent.pageX - position.left);

domino-ui/src/main/java/org/dominokit/domino/ui/utils/AttributesObserver.java

@@ -16,7 +16,6 @@
 package org.dominokit.domino.ui.utils;
 
 import static elemental2.dom.DomGlobal.document;
-import static org.dominokit.domino.ui.utils.ElementsFactory.elements;
 
 import elemental2.core.JsArray;
 import elemental2.dom.CustomEvent;
@@ -80,11 +79,11 @@ static void startObserving() {
   private static void onElementAttributesChanged(MutationRecord record) {
     CustomEventInit<MutationRecord> ceinit = CustomEventInit.create();
     ceinit.setDetail(record);
-    DominoElement<Element> element = elements.elementOf(Js.<Element>uncheckedCast(record.target));
-    String type = ObserverEventType.attributeType(element);
+    Element target = Js.uncheckedCast(record.target);
+    String type = ObserverEventType.attributeType(target);
 
     CustomEvent<MutationRecord> event = new CustomEvent<>(type, ceinit);
-    element.element().dispatchEvent(event);
+    target.dispatchEvent(event);
   }
 
   private static void observe() {

domino-ui/src/main/java/org/dominokit/domino/ui/utils/ObserverEventType.java

@@ -15,6 +15,8 @@
  */
 package org.dominokit.domino.ui.utils;
 
+import elemental2.dom.Element;
+
 /** A utility class for generating event types related to attaching and detaching elements. */
 public class ObserverEventType {
 
@@ -38,6 +40,17 @@ public static String detachedType(HasAttributes<?> element) {
     return "dui-detached-" + element.getAttribute(BaseDominoElement.DETACH_UID_KEY);
   }
 
+  /**
+   * Generates an event type for a detached element.
+   *
+   * @param element The element that has been detached.
+   * @return A string representing the event type for detached elements.
+   */
+  public static String attributeType(Element element) {
+    return "dui-attribute-change-"
+        + element.getAttribute(BaseDominoElement.ATTRIBUTE_CHANGE_UID_KEY);
+  }
+
   /**
    * Generates an event type for a detached element.
    *

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-app-layout.css

@@ -141,6 +141,7 @@
 .dui-layout-header > .dui-nav-bar {
     background-color: var(--dui-layout-nav-bar-bg, var(--dui-accent));
     color: var(--dui-layout-nav-bar-clr, var(--dui-clr-white));
+    padding: 0 var(--dui-spc-4);
 }
 
 .dui-shrink-content.dui-left-open > .dui-layout-body > .dui-layout-header {

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-breadcrumb.css

@@ -31,20 +31,20 @@
 .dui-breadcrumb li.dui .dui.mdi,
 .dui-breadcrumb li.dui a.dui .dui.mdi {
     margin: var(--dui-bc-icon-margin);
-    line-height: 24px;
+    line-height: var(--dui-spc-px-24);
 }
 
 .dui-breadcrumb li.dui .dui.mdi.mdi-18px {
-    line-height: 18px;
+    line-height: var(--dui-spc-px-18);
 }
 .dui-breadcrumb li.dui .dui.mdi.mdi-24px {
-    line-height: 24px;
+    line-height: var(--dui-spc-px-24);
 }
 .dui-breadcrumb li.dui .dui.mdi.mdi-36px {
-    line-height: 36px;
+    line-height: var(--dui-spc-px-36);
 }
 .dui-breadcrumb li.dui .dui.mdi.mdi-48px {
-    line-height: 48px;
+    line-height: var(--dui-spc-px-48);
 }
 
 .dui-breadcrumb[disabled] {

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-buttons.css

@@ -97,31 +97,27 @@ fieldset[disabled] .dui-btn {
 .dui-btn.dui-lg,
 .dui-btn-group.dui-lg > .dui-btn {
     font-size: var(--dui-btn-lg-font-size);
-    line-height: var(--dui-btn-lg-line-height);
     padding: var(--dui-btn-lg-padding);
     --dui-btn-text-height:25px;
 }
 
 .dui-btn.dui-md,
 .dui-btn-group.dui-md > .dui-btn {
     font-size: var(--dui-btn-md-font-size);
-    line-height: var(--dui-btn-md-line-height);
     padding: var(--dui-btn-md-padding);
     --dui-btn-text-height:28px;
 }
 
 .dui-btn.dui-sm,
 .dui-btn-group.dui-sm > .dui-btn {
     font-size: var(--dui-btn-sm-font-size);
-    line-height: var(--dui-btn-sm-line-height);
     padding: var(--dui-btn-sm-padding);
     --dui-btn-text-height:27px;
 }
 
 .dui-btn.dui-xs,
 .dui-btn-group.dui-xs > .dui-btn {
     font-size: var(--dui-btn-xs-font-size);
-    line-height: var(--dui-btn-xs-line-height);
     padding: var(--dui-btn-xs-padding);
     --dui-btn-text-height:29px;
 }

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-cards.css

@@ -73,7 +73,6 @@
     display: block;
     font: var(--dui-card-description-font);
     margin: var(--dui-card-description-margin);
-    color: var(--dui-text-color, var(--dui-card-description-color));
     line-height: var(--dui-card-description-line-height);
 }
 

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-collapse.css

@@ -92,6 +92,7 @@
 }
 .dui-panel-header.dui-nav-bar {
     padding: var(--dui-collapse-panel-title-padding);
+    color: var(--dui-accent-fg-clr);
 }
 
 .dui-panel-content-header {

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-colors-dark.css

@@ -420,7 +420,7 @@
     --dui-datatable-border-color: var(--dui-accent-d-4);
     --dui-datatable-column-resizer-color: var(--dui-accent-d-2);
     --dui-datatable-pin-column-border-color: var(--dui-accent-d-2);
-    --dui-nav-bar-description-color: inherit;
+    --dui-nav-bar-description-color: --dui-color;
     --dui-datatable-tfoot-bg-color: var(--dui-accent-d-4);
 
 }

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-colors-light.css

@@ -408,6 +408,6 @@
     --dui-datatable-border-color: var(--dui-accent-l-4);
     --dui-datatable-column-resizer-color: var(--dui-accent-l-4);
     --dui-datatable-pin-column-border-color: var(--dui-accent-l-2);
-    --dui-nav-bar-description-color: inherit;
+    --dui-nav-bar-description-color: --dui-color;
     --dui-datatable-tfoot-bg-color: var(--dui-accent-l-5);
 }

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-forms.css

@@ -292,7 +292,6 @@ textarea.dui-field-input {
     cursor: pointer;
     display: flex;
     align-items: center;
-    padding: 1px 2px;
 }
 
 .dui.mdi.dui-form-select-clear {
@@ -373,13 +372,18 @@ textarea.dui-field-input {
     font: var(--dui-form-field-sub-label-font);
 }
 .dui-radio-label{
-    height: 24px;
+    height: var(--dui-spc-px24);
 }
 
 .dui-checkbox-label span {
     line-height: var(--dui-checkbox-label-line-height);
 }
 
+.dui-form-checkbox .dui-field-input-wrapper {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
 .dui-form-radio:focus-within .dui-radio-label:before,
 .dui-radio-label:hover:before,
 .dui-form-checkbox:focus-within .dui-checkbox-label:after,

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-generic.css

@@ -71,13 +71,59 @@
     --dui-bg-l-2: var(--dui-accent-l-2);
     --dui-bg-l-1: var(--dui-accent-l-1);
     --dui-bg: var(--dui-clr-accent);
+    --dui-bg-main: var(--dui-bg);
     --dui-bg-d-1: var(--dui-accent-d-1);
     --dui-bg-d-2: var(--dui-accent-d-2);
     --dui-bg-d-3: var(--dui-accent-d-3);
     --dui-bg-d-4: var(--dui-accent-d-4);
     --dui-text-color: var(--dui-color);
 }
 
+.dui.dui-accent-l-5 {
+    --dui-bg: var(--dui-accent-l-5);
+    --dui-accent: var(--dui-bg);
+}
+
+.dui.dui-accent-l-4 {
+    --dui-bg: var(--dui-accent-l-4);
+    --dui-accent: var(--dui-bg);
+}
+
+.dui.dui-accent-l-3 {
+    --dui-bg: var(--dui-accent-l-3);
+    --dui-accent: var(--dui-bg);
+}
+
+.dui.dui-accent.dui-accent-l-2 {
+    --dui-bg: var(--dui-accent-l-2);
+    --dui-accent: var(--dui-bg);
+}
+
+.dui.dui-accent.dui-accent-l-1 {
+    --dui-bg: var(--dui-accent-l-1);
+    --dui-accent: var(--dui-bg);
+}
+
+.dui.dui-accent.dui-accent-d-1 {
+    --dui-bg: var(--dui-accent-d-1);
+    --dui-accent: var(--dui-bg);
+}
+
+.dui.dui-accent.dui-accent-d-2 {
+    --dui-bg: var(--dui-accent-d-2);
+    --dui-accent: var(--dui-bg);
+}
+
+.dui.dui-accent.dui-accent-d-3 {
+    --dui-bg: var(--dui-accent-d-3);
+    --dui-accent: var(--dui-bg);
+}
+
+.dui.dui-accent.dui-accent-d-4 {
+    --dui-bg: var(--dui-accent-d-4);
+    --dui-accent: var(--dui-bg);
+}
+
 .dui.dui-accent:not(.dui-ignore-bg) {
     background-color: var(--dui-accent);
 }