@openremote/theme 1.13.1 → 1.14.0-snapshot

package/README.md

@@ -21,7 +21,7 @@ yarn add @openremote/theme
 ### Using JavaScript / TypeScript:
 Note: using the `<style>` tag is an example here. Please check the documentation of your JavaScript bundler for proper installation of CSS files.
 ```typescript
-import themeCss from "@openremote/theme/default.css";
+import themeCss from "@openremote/theme";
 
 // Apply theme to the app
 const style = document.createElement("style");

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@openremote/theme",
-  "version": "1.13.1",
+  "version": "1.14.0-snapshot",
   "description": "CSS themes for OpenRemote components",
-  "main": "src/index.css",
-  "module": "src/index.css",
+  "main": "src/index.js",
   "types": "src/index.d.ts",
   "exports": {
-    ".": "./src/index.css",
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js"
+    },
     "./*.css": "./src/*.css",
     "./*": "./*"
   },
@@ -17,7 +19,10 @@
   "repository": "https://github.com/openremote/openremote",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@vaadin/vaadin-lumo-styles": "~25.0.1"
+    "@vaadin/vaadin-lumo-styles": "~25.0.3"
+  },
+  "devDependencies": {
+    "@openremote/util": "1.14.0-snapshot"
   },
   "publishConfig": {
     "access": "public"

package/src/components/index.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>
+ */
+
+/* IMPORTANT:
+ * The import order can affect whether styling will be applied or not. This only
+ * seems to be an issue when using Rspack.
+ */
+@import "./or-vaadin-button.css";
+@import "./or-vaadin-checkbox-group.css";
+@import "./or-vaadin-checkbox.css"; /* Must be after the checkbox-group */
+@import "./or-vaadin-date-time-picker.css";
+@import "./or-vaadin-date-picker.css"; /* Must be after the date-time-picker */
+@import "./or-vaadin-dialog.css";
+@import "./or-vaadin-icon.css";
+@import "./or-vaadin-multi-select-combo-box.css";
+@import "./or-vaadin-number-field.css";
+@import "./or-vaadin-password-field.css";
+@import "./or-vaadin-radio-group.css";
+@import "./or-vaadin-select.css";
+@import "./or-vaadin-text-area.css";
+@import "./or-vaadin-text-field.css";
+@import "./or-vaadin-time-picker.css"; /* Must be after the date-time-picker */

package/src/components/or-vaadin-button.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/button.css";
+
+:root::before,
+:host::before {
+    --_lumo-vaadin-button-inject: 1;
+    --_lumo-vaadin-button-inject-modules: lumo_components_button;
+}

package/src/components/or-vaadin-checkbox-group.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/checkbox-group.css";
+
+@media lumo_components_checkbox-group-internal {
+    :host {
+        [part="group-field"] ::slotted([theme~="button"]) {
+            margin-left: 6px;
+        }
+        [part="group-field"] ::slotted([theme~="button"]:first-child) {
+            margin-left: 0;
+        }
+    }
+}
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-checkbox-group-inject: 1;
+  --_lumo-vaadin-checkbox-group-inject-modules:
+    lumo_mixins_group-field,
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-helper,
+    lumo_components_checkbox-group,
+    lumo_components_checkbox-group-internal,
+    lumo_mixins_field-internal;
+}

package/src/components/or-vaadin-checkbox.css

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/checkbox.css";
+
+@media lumo_checkbox_toggle_button {
+    :host([theme~='button']) {
+        &::part(checkbox),
+        &::part(required-indicator) {
+            display: none;
+        }
+        &::part(label) {
+            background: var(--lumo-contrast-5pct);
+            border-radius: var(--lumo-border-radius-m);
+            color: var(--lumo-primary-color);
+            cursor: var(--lumo-clickable-cursor);
+            transition:
+                background-color 0.2s,
+                color 0.2s,
+                filter 0.2s,
+                transform 0.1s,
+                box-shadow 0.2s;
+            user-select: none;
+            --vaadin-checkbox-label-padding: 8px 14px;
+        }
+        &:active:not([disabled])::part(label) {
+            filter: brightness(0.9);
+            transform: scale(0.96);
+            transition: transform 0.05s;
+        }
+    }
+
+    :host([theme~='button'][checked])::part(label) {
+        background: var(--lumo-primary-color);
+        color: white;
+    }
+
+    @media (hover: hover) {
+        :host([theme~='button']:hover:not([checked]))::part(label) {
+            background: var(--lumo-contrast-10pct);
+        }
+
+        :host([theme~='button'][checked]:hover)::part(label) {
+            filter: brightness(1.1);
+        }
+    }
+
+}
+
+:root::before,
+:host::before {
+    --_lumo-vaadin-checkbox-inject: 1;
+    --_lumo-vaadin-checkbox-inject-modules:
+    lumo_mixins_checkable-field,
+    lumo_components_checkbox,
+    lumo_checkbox_toggle_button;
+}

package/src/components/or-vaadin-date-picker.css

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/date-picker.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-date-picker-inject: 1;
+  --_lumo-vaadin-date-picker-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_components_date-picker,
+    lumo_mixins_field-internal;
+
+  --_lumo-vaadin-date-picker-year-inject: 1;
+  --_lumo-vaadin-date-picker-year-inject-modules: lumo_components_date-picker-year;
+
+  --_lumo-vaadin-date-picker-overlay-inject: 1;
+  --_lumo-vaadin-date-picker-overlay-inject-modules:
+    lumo_mixins_overlay,
+    lumo_mixins_menu-overlay-core,
+    lumo_mixins_menu-overlay-ext,
+    lumo_components_date-picker-overlay;
+
+  --_lumo-vaadin-date-picker-overlay-content-inject: 1;
+  --_lumo-vaadin-date-picker-overlay-content-inject-modules: lumo_components_date-picker-overlay-content;
+
+  --_lumo-vaadin-month-calendar-inject: 1;
+  --_lumo-vaadin-month-calendar-inject-modules: lumo_components_date-picker-month-calendar;
+}

package/src/components/or-vaadin-date-time-picker.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/date-time-picker.css";
+
+@media lumo_components_space-evenly {
+    :host {
+        [part="input-fields"] ::slotted([slot="time-picker"]) {
+            flex: 1 1 auto;
+            min-width: 0;
+        }
+    }
+}
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-date-time-picker-inject: 1;
+  --_lumo-vaadin-date-time-picker-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_components_custom-field,
+    lumo_components_date-time-picker,
+    lumo_components_space-evenly,
+    lumo_mixins_field-internal;
+}

package/src/components/or-vaadin-dialog.css

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/dialog.css";
+
+@media lumo_components_dialog-overlay-internal {
+    :host::part(overlay) {
+        max-width: 600px;
+        width: 100%;
+    }
+}
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-dialog-overlay-inject: 1;
+  --_lumo-vaadin-dialog-overlay-inject-modules:
+    lumo_mixins_overlay,
+    lumo_mixins_resizable-overlay,
+    lumo_components_dialog-overlay,
+    lumo_components_dialog-overlay-internal;
+}

package/src/components/or-vaadin-icon.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/icon.css";
+
+:root::before,
+:host::before {
+    --_lumo-vaadin-icon-inject: 1;
+    --_lumo-vaadin-icon-inject-modules: lumo_components_icon;
+}

package/src/components/or-vaadin-multi-select-combo-box.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/multi-select-combo-box.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-multi-select-combo-box-container-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-container-inject-modules:
+    lumo_components_input-container,
+    lumo_components_multi-select-combo-box-container;
+
+  --_lumo-vaadin-multi-select-combo-box-overlay-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-overlay-inject-modules:
+    lumo_mixins_loader,
+    lumo_mixins_combo-box-loader,
+    lumo_mixins_overlay,
+    lumo_mixins_menu-overlay-core,
+    lumo_mixins_combo-box-overlay,
+    lumo_components_multi-select-combo-box-overlay;
+
+  --_lumo-vaadin-multi-select-combo-box-chip-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-chip-inject-modules:
+    lumo_mixins_field-button,
+    lumo_components_multi-select-combo-box-chip;
+
+  --_lumo-vaadin-multi-select-combo-box-item-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-item-inject-modules:
+    lumo_components_item,
+    lumo_components_combo-box-item,
+    lumo_components_multi-select-combo-box-item;
+
+  --_lumo-vaadin-multi-select-combo-box-inject: 1;
+  --_lumo-vaadin-multi-select-combo-box-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_components_multi-select-combo-box,
+    lumo_mixins_field-internal;
+}

package/src/components/or-vaadin-number-field.css

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/number-field.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-number-field-inject: 1;
+  --_lumo-vaadin-number-field-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_components_number-field,
+    lumo_mixins_field-internal;
+}

package/src/components/or-vaadin-password-field.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/password-field.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-password-field-inject: 1;
+  --_lumo-vaadin-password-field-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_components_password-field,
+    lumo_mixins_field-internal;
+
+  --_lumo-vaadin-password-field-button-inject: 1;
+  --_lumo-vaadin-password-field-button-inject-modules:
+    lumo_components_button,
+    lumo_components_password-field-button;
+}

package/src/components/or-vaadin-radio-group.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/radio-group.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-radio-group-inject: 1;
+  --_lumo-vaadin-radio-group-inject-modules:
+    lumo_mixins_group-field,
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-helper,
+    lumo_components_radio-group,
+    lumo_mixins_field-internal;
+}

package/src/components/or-vaadin-select.css

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/select.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-select-inject: 1;
+  --_lumo-vaadin-select-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_components_select,
+    lumo_mixins_field-internal;
+
+  --_lumo-vaadin-select-item-inject: 1;
+  --_lumo-vaadin-select-item-inject-modules: lumo_components_item;
+
+  --_lumo-vaadin-select-overlay-inject: 1;
+  --_lumo-vaadin-select-overlay-inject-modules:
+    lumo_mixins_overlay,
+    lumo_mixins_menu-overlay-core,
+    lumo_mixins_menu-overlay-ext,
+    lumo_components_select-overlay;
+
+  --_lumo-vaadin-select-list-box-inject: 1;
+  --_lumo-vaadin-select-list-box-inject-modules: lumo_components_list-box;
+
+  --_lumo-vaadin-select-value-button-inject: 1;
+  --_lumo-vaadin-select-value-button-inject-modules: lumo_components_select-value-button;
+}

package/src/components/or-vaadin-text-area.css

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/text-area.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-text-area-inject: 1;
+  --_lumo-vaadin-text-area-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_components_text-area,
+    lumo_mixins_field-internal;
+}

package/src/components/or-vaadin-text-field.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/text-field.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-text-field-inject: 1;
+  --_lumo-vaadin-text-field-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_mixins_field-internal;
+}

package/src/components/or-vaadin-time-picker.css

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "@vaadin/vaadin-lumo-styles/components/time-picker.css";
+
+:root::before,
+:host::before {
+  --_lumo-vaadin-time-picker-inject: 1;
+  --_lumo-vaadin-time-picker-inject-modules:
+    lumo_mixins_field-label,
+    lumo_mixins_field-required,
+    lumo_mixins_field-error-message,
+    lumo_mixins_field-button,
+    lumo_mixins_field-helper,
+    lumo_mixins_field-base,
+    lumo_components_time-picker,
+    lumo_mixins_field-internal;
+
+  --_lumo-vaadin-time-picker-item-inject: 1;
+  --_lumo-vaadin-time-picker-item-inject-modules:
+    lumo_components_item,
+    lumo_components_combo-box-item;
+
+  --_lumo-vaadin-time-picker-overlay-inject: 1;
+  --_lumo-vaadin-time-picker-overlay-inject-modules:
+    lumo_mixins_overlay,
+    lumo_mixins_menu-overlay-core,
+    lumo_mixins_combo-box-overlay,
+    lumo_components_time-picker-overlay;
+}

package/src/default.css

@@ -17,10 +17,17 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-@import "@vaadin/vaadin-lumo-styles/lumo.css";
+@import "@vaadin/vaadin-lumo-styles/src/props/index.css";
+@import "@vaadin/vaadin-lumo-styles/src/global/index.css";
+@import "components/index.css";
+@import "mixins/index.css";
+
+:where(:root),
+:where(:host) {
+    --vaadin-lumo-theme: 1;
+}
 
 :root[theme~="dark"] {
-
     /* Dark theme - Base colors */
     --or-color-base: hsla(120, 20%, 1%);
     --or-color-base-5pct: hsla(120, 6%, 14%);
@@ -75,7 +82,6 @@
 }
 
 :root {
-
     /* Light theme - Base colors */
     --or-color-base: hsl(0, 0%, 100%);
     --or-color-base-5pct: hsla(118, 10%, 25%, 0.16);
@@ -165,4 +171,11 @@
     --lumo-secondary-text-color: var(--or-color-text-secondary);
     --lumo-tertiary-text-color: var(--or-color-text-tertiary);
     --lumo-disabled-text-color: var(--or-color-text-disabled);
+
+    /* OpenRemote */
+    --lumo-border-radius-m: 0.5em;
+    --lumo-border-radius-l: 0.75em;
+    --vaadin-field-default-width: 100%;
+    --vaadin-button-margin: 0;
+    --lumo-clickable-cursor: pointer;
 }

package/src/index.d.ts

@@ -33,3 +33,6 @@ declare module "*.css" {
     const css: string;
     export default css;
 }
+
+declare const theme: string;
+export default theme;

package/src/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import css from "./index.css";
+export default css;

package/src/mixins/field-internal.css

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+/* We intentionally remove paddings around fields so we only need to deal with
+ * our own paddings, margins and gaps.
+ */
+@media lumo_mixins_field-internal {
+    :host {
+        padding: 0;
+        width: 100%;
+    }
+    :host([has-label]) {
+        padding-top: 0;
+    }
+    [class$="container"] {
+        width: 100%; /* Lumo sets default field container width as 12em */
+    }
+}

package/src/mixins/index.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+@import "./field-internal.css";

package/build.gradle

@@ -1,16 +0,0 @@
-buildDir = "dist"
-
-tasks.register('clean') {
-    doLast {
-        delete "dist"
-        delete "lib"
-    }
-}
-
-tasks.register('prepareUi') {
-    dependsOn clean, npmPrepare
-}
-
-tasks.register('publishUi') {
-    dependsOn clean, npmPublish
-}

package/rspack.config.js

@@ -1,8 +0,0 @@
-export default {
-  experiments: {
-    css: true
-  },
-  resolve: {
-    extensions: ['.css']
-  }
-}