Add color and cursor classes

qbicsoftware · Jan 20, 2025 · f4eddcc · f4eddcc
1 parent 975fea9
commit f4eddcc
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/user-interface/frontend/themes/datamanager/components/all.css b/user-interface/frontend/themes/datamanager/components/all.css
@@ -226,6 +226,29 @@ Padding & gaps
   gap: var(--spacing-07);
 }
 
+/***************************
+Colors
+***************************/
+.color-primary {
+  color: var(--lumo-primary-text-color)
+}
+
+.color-secondary {
+  color: var(--lumo-secondary-text-color)
+}
+
+.color-tertiary {
+  color: var(--lumo-tertiary-text-color)
+}
+
+/***************************
+Behaviour
+***************************/
+
+.clickable {
+  cursor: pointer;
+}
+
 
 /***************************
 Dialogs

diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/demo/ComponentDemo.java b/user-interface/src/main/java/life/qbic/datamanager/views/demo/ComponentDemo.java
@@ -61,6 +61,8 @@ public ComponentDemo() {
     addClassNames("padding-left-right-07", "padding-top-bottom-04");
     add(title);
     add(headingShowcase());
+    add(colorShowCase());
+    add(clickableShowCase());
     add(fontsShowCase());
     add(detailBoxShowCase());
     add(dialogShowCase());
@@ -81,6 +83,19 @@ public ComponentDemo() {
     add(b);
   }
 
+  private static Div clickableShowCase() {
+    Div container = new Div();
+    Div heading = createHeading2("Cursor Classes");
+    Div headingClickable = createHeading3("clickable");
+    headingClickable.addClassName("clickable");
+    var handIcon = VaadinIcon.HAND.create();
+    handIcon.addClassName("clickable");
+    Div headingDefault = createHeading3("no class provided");
+    var randomIcon = VaadinIcon.RANDOM.create();
+    container.add(heading, headingClickable, handIcon, headingDefault, randomIcon);
+    return container;
+  }
+
   private static Div dialogSectionShowCase() {
     Div container = new Div();
     container.add(DialogSection.with("Dialog section title...",
@@ -109,6 +124,18 @@ private static Div headingShowcase() {
     return container;
   }
 
+  private static Div colorShowCase() {
+    Div container = new Div();
+    Div heading = createHeading2("Color Classes");
+    Div headingPrimary = createHeading3("color-primary");
+    headingPrimary.addClassName("color-primary");
+    Div headingSecondary = createHeading3("color-secondary");
+    headingSecondary.addClassName("color-secondary");
+    Div headingTertiary = createHeading3("color-tertiary");
+    headingTertiary.addClassName("color-tertiary");
+    container.add(heading, headingPrimary, headingSecondary, headingTertiary);
+    return container;
+  }
   private static Div fontsShowCase() {
     Div container = new Div();
     Div header = new Div("Body Font Styles");