@daracl/form 0.0.20 → 0.0.22

package/dist/daracl.form.css

@@ -1,54 +1,267 @@
-@charset "UTF-8";
-/* ==========================================================================
-   Theme
-   ========================================================================== */
+@charset "UTF-8";:root, [data-daracl-theme=light] {
+  --dui-primary-color: #2563eb;
+  --dui-primary-hover-color: #1d4ed8;
+  --dui-primary-font-color: #ffffff;
+  --dui-primary-soft-bg: rgba(37, 99, 235, 0.08);
+  --dui-danger-color: #dc2626;
+  --dui-alert-success-color: #0abf30;
+  --dui-alert-error-color: #e24d4c;
+  --dui-alert-warning-color: #e9bd0c;
+  --dui-alert-info-color: #3498db;
+  --dui-active-bg: #337ab7;
+  --dui-active-color: #ffffff;
+  --dui-sunday-color: #f00d0d;
+  --dui-bar-positive-bg: #77c0fc;
+  --dui-bar-negative-bg: #ff8989;
+  --dui-tooltip-color: #ffffff;
+  --dui-icon-stroke-on-color: #ffffff;
+  --dui-icon-fill-stroke-on-color: #494949;
+  --dui-font-color: #222222;
+  --dui-label-color: #444444;
+  --dui-font-hover-color: #000000;
+  --dui-font-disable-color: #9aa1ab;
+  --dui-muted-color: #8a919c;
+  --dui-border-color: #d9dde3;
+  --dui-border-thick-color: #b9bdc1;
+  --dui-border-light-color: #e5e7eb;
+  --dui-divider-color: #cccccc;
+  --dui-body-bg: #ffffff;
+  --dui-body-bg-thin: #f0f0f0;
+  --dui-body-bg-deep: #dedede;
+  --dui-body-bg-hover: #d2d2d2;
+  --dui-disabled-bg: #ebebeb;
+  --dui-panel-header-bg: #f7f9fc;
+  --dui-input-bg: #ffffff;
+  --dui-input-color: #212529;
+  --dui-input-border-color: #cdcdcd;
+  --dui-input-border-hover-color: #b9bdc1;
+  --dui-input-disabled-bg: #ebebeb;
+  --dui-button-bg: #ffffff;
+  --dui-button-border-color: #c9ced6;
+  --dui-button-hover-bg: #e3e3e3;
+  --dui-button-bg-active: #dfe7f3;
+  --dui-tab-bg: #f6f6f6;
+  --dui-tab-bg-hover: #ebebeb;
+  --dui-tooltip-bg: #3e3e3e;
+  --dui-error-color: #b42318;
+  --dui-error-bg: #fff4f4;
+  --dui-error-border-color: #f0b4b4;
+  --dui-required-color: #ff4136;
+  --dui-invalid-font-color: #ff4136;
+  --dui-invalid-border-color: #ffb6b4;
+  --dui-invalid-bg: #ffdddd;
+  --dui-hover-bg: #eef3fc;
+  --dui-hover-color: #000000;
+  --dui-hover-accent-bg: #dff5ff;
+  --dui-hover-accent-color: #000000;
+  --dui-selected-bg: #e9faff;
+  --dui-selected-color: #212529;
+  --dui-selected-border-color: #4762fa;
+  --dui-item-check-color: #1a73e8;
+  --dui-search-match-color: #0040ff;
+  --dui-accent-text-color: #5970f5;
+  --dui-today-bg: #a9d5ff;
+  --dui-check-bg: #dfdfdf;
+  --dui-check-active-bg: #4caf50;
+  --dui-check-mark-color: #ffffff;
+  --dui-check-indeterminate-bg: #686868;
+  --dui-scroll-bg: #f7f7f7;
+  --dui-scroll-track-bg: #f7f7f7;
+  --dui-scroll-thumb-bg: #a5a5a5;
+  --dui-scroll-thumb-hover-bg: #696969;
+  --dui-scroll-button-bg: #c5c3c3;
+  --dui-icon-stroke-color: #5a5858;
+  --dui-icon-fill-stroke-color: #ffffff;
+  --dui-empty-icon-color: #adabab;
+  --dui-overlay-bg: rgba(15, 23, 42, 0.45);
+  --dui-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --dui-page-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-daracl-theme]) {
+    --dui-primary-color: #2563eb;
+    --dui-primary-hover-color: #1d4ed8;
+    --dui-primary-font-color: #ffffff;
+    --dui-primary-soft-bg: rgba(37, 99, 235, 0.08);
+    --dui-danger-color: #dc2626;
+    --dui-alert-success-color: #0abf30;
+    --dui-alert-error-color: #e24d4c;
+    --dui-alert-warning-color: #e9bd0c;
+    --dui-alert-info-color: #3498db;
+    --dui-active-bg: #337ab7;
+    --dui-active-color: #ffffff;
+    --dui-sunday-color: #f00d0d;
+    --dui-bar-positive-bg: #77c0fc;
+    --dui-bar-negative-bg: #ff8989;
+    --dui-tooltip-color: #ffffff;
+    --dui-icon-stroke-on-color: #ffffff;
+    --dui-icon-fill-stroke-on-color: #494949;
+    --dui-font-color: #dddddd;
+    --dui-label-color: #c5ccd6;
+    --dui-font-hover-color: #ffffff;
+    --dui-font-disable-color: #6b7482;
+    --dui-muted-color: #8d96a3;
+    --dui-border-color: #3a4456;
+    --dui-border-thick-color: #807e7e;
+    --dui-border-light-color: #3a4456;
+    --dui-divider-color: #4a5466;
+    --dui-body-bg: #1f2836;
+    --dui-body-bg-thin: #273244;
+    --dui-body-bg-deep: #2f3b4f;
+    --dui-body-bg-hover: #2f3b4f;
+    --dui-disabled-bg: #555555;
+    --dui-panel-header-bg: #18202c;
+    --dui-input-bg: #2a2a2a;
+    --dui-input-color: #f0f0f0;
+    --dui-input-border-color: #585858;
+    --dui-input-border-hover-color: #807e7e;
+    --dui-input-disabled-bg: #555555;
+    --dui-button-bg: #2a3444;
+    --dui-button-border-color: #444c5c;
+    --dui-button-hover-bg: #3a4558;
+    --dui-button-bg-active: #444c5c;
+    --dui-tab-bg: #18202c;
+    --dui-tab-bg-hover: #2f3b4f;
+    --dui-tooltip-bg: #444444;
+    --dui-error-color: #ff8a80;
+    --dui-error-bg: #3a2326;
+    --dui-error-border-color: #6b3036;
+    --dui-required-color: #ff9b9b;
+    --dui-invalid-font-color: #ff9b9b;
+    --dui-invalid-border-color: #ff5e5e;
+    --dui-invalid-bg: #3a1f1f;
+    --dui-hover-bg: #2f3b4f;
+    --dui-hover-color: #ffffff;
+    --dui-hover-accent-bg: #1f3d5c;
+    --dui-hover-accent-color: #ffffff;
+    --dui-selected-bg: #264f78;
+    --dui-selected-color: #ffffff;
+    --dui-selected-border-color: #47dcfa;
+    --dui-item-check-color: #68a9ff;
+    --dui-search-match-color: #1fa0ff;
+    --dui-accent-text-color: #68e4f9;
+    --dui-today-bg: #5660d9;
+    --dui-check-bg: #979797;
+    --dui-check-active-bg: #00c1ff;
+    --dui-check-mark-color: #4e4e4e;
+    --dui-check-indeterminate-bg: #fffbfb;
+    --dui-scroll-bg: #18202c;
+    --dui-scroll-track-bg: #18202c;
+    --dui-scroll-thumb-bg: #3a4456;
+    --dui-scroll-thumb-hover-bg: #4a5466;
+    --dui-scroll-button-bg: #2a3444;
+    --dui-icon-stroke-color: #fffbfb;
+    --dui-icon-fill-stroke-color: #1a1a1a;
+    --dui-empty-icon-color: #888888;
+    --dui-overlay-bg: rgba(0, 0, 0, 0.6);
+    --dui-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
+    --dui-page-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+  }
+}
+[data-daracl-theme=dark] {
+  --dui-primary-color: #2563eb;
+  --dui-primary-hover-color: #1d4ed8;
+  --dui-primary-font-color: #ffffff;
+  --dui-primary-soft-bg: rgba(37, 99, 235, 0.08);
+  --dui-danger-color: #dc2626;
+  --dui-alert-success-color: #0abf30;
+  --dui-alert-error-color: #e24d4c;
+  --dui-alert-warning-color: #e9bd0c;
+  --dui-alert-info-color: #3498db;
+  --dui-active-bg: #337ab7;
+  --dui-active-color: #ffffff;
+  --dui-sunday-color: #f00d0d;
+  --dui-bar-positive-bg: #77c0fc;
+  --dui-bar-negative-bg: #ff8989;
+  --dui-tooltip-color: #ffffff;
+  --dui-icon-stroke-on-color: #ffffff;
+  --dui-icon-fill-stroke-on-color: #494949;
+  --dui-font-color: #dddddd;
+  --dui-label-color: #c5ccd6;
+  --dui-font-hover-color: #ffffff;
+  --dui-font-disable-color: #6b7482;
+  --dui-muted-color: #8d96a3;
+  --dui-border-color: #3a4456;
+  --dui-border-thick-color: #807e7e;
+  --dui-border-light-color: #3a4456;
+  --dui-divider-color: #4a5466;
+  --dui-body-bg: #1f2836;
+  --dui-body-bg-thin: #273244;
+  --dui-body-bg-deep: #2f3b4f;
+  --dui-body-bg-hover: #2f3b4f;
+  --dui-disabled-bg: #555555;
+  --dui-panel-header-bg: #18202c;
+  --dui-input-bg: #2a2a2a;
+  --dui-input-color: #f0f0f0;
+  --dui-input-border-color: #585858;
+  --dui-input-border-hover-color: #807e7e;
+  --dui-input-disabled-bg: #555555;
+  --dui-button-bg: #2a3444;
+  --dui-button-border-color: #444c5c;
+  --dui-button-hover-bg: #3a4558;
+  --dui-button-bg-active: #444c5c;
+  --dui-tab-bg: #18202c;
+  --dui-tab-bg-hover: #2f3b4f;
+  --dui-tooltip-bg: #444444;
+  --dui-error-color: #ff8a80;
+  --dui-error-bg: #3a2326;
+  --dui-error-border-color: #6b3036;
+  --dui-required-color: #ff9b9b;
+  --dui-invalid-font-color: #ff9b9b;
+  --dui-invalid-border-color: #ff5e5e;
+  --dui-invalid-bg: #3a1f1f;
+  --dui-hover-bg: #2f3b4f;
+  --dui-hover-color: #ffffff;
+  --dui-hover-accent-bg: #1f3d5c;
+  --dui-hover-accent-color: #ffffff;
+  --dui-selected-bg: #264f78;
+  --dui-selected-color: #ffffff;
+  --dui-selected-border-color: #47dcfa;
+  --dui-item-check-color: #68a9ff;
+  --dui-search-match-color: #1fa0ff;
+  --dui-accent-text-color: #68e4f9;
+  --dui-today-bg: #5660d9;
+  --dui-check-bg: #979797;
+  --dui-check-active-bg: #00c1ff;
+  --dui-check-mark-color: #4e4e4e;
+  --dui-check-indeterminate-bg: #fffbfb;
+  --dui-scroll-bg: #18202c;
+  --dui-scroll-track-bg: #18202c;
+  --dui-scroll-thumb-bg: #3a4456;
+  --dui-scroll-thumb-hover-bg: #4a5466;
+  --dui-scroll-button-bg: #2a3444;
+  --dui-icon-stroke-color: #fffbfb;
+  --dui-icon-fill-stroke-color: #1a1a1a;
+  --dui-empty-icon-color: #888888;
+  --dui-overlay-bg: rgba(0, 0, 0, 0.6);
+  --dui-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
+  --dui-page-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+}
+
 /* ==========================================================================
    Common
    ========================================================================== */
 .daracl-form {
-  background: var(--body-bg);
-  --color-danger: #d9534f;
-  --background-danger: #d9534f;
-  --invalid-font-color: #ff4136;
-  --invalid-border-color: #ffb6b4;
-  --invalid-background-color: #fdd;
-  --tooltip-background: #3e3e3e;
-  --tooltip-color: #fff;
-  --field-margin-top: 10px;
-  --field-padding-top: 3px;
-  --field-padding-right: 15px;
-  --line-height: 1.2em;
-  --line-height-lg: 1.5em;
-  --font-size-sm: 12px;
-  --font-size: 14px;
-  --font-size-lg: 16px;
-  --border-color: #cdcdcd;
-  --font-color: #686868;
-  --font-hover-color: #3a3d41;
-  --font-disable-color: #ebebeb;
-  --button-bg: #ffffff;
-  --button-bg-hover: #e3e3e3;
-  --tab-bg: #f6f6f6;
-  --tab-bg-hover: #ebebeb;
-  --input-bg: #fff;
-  --input-color: #212529;
-  --input-disabled-bg: #ebebeb;
-  --bg-grid-header: #f1f1f1;
-  --icon-color: #5f6368;
-  --body-bg: #ffffff;
-  --body-bg-thin: #f0f0f0;
-  --body-bg-hover: #d2d2d2;
+  --df-field-margin-top: 10px;
+  --df-field-padding-top: 3px;
+  --df-field-padding-right: 15px;
+  --df-line-height: 1.2em;
+  --df-line-height-lg: 1.5em;
+  --df-font-size-sm: 12px;
+  --df-font-size: 14px;
+  background: var(--dui-body-bg, #ffffff);
   padding: 0px;
   margin-top: 8px;
-  color: var(--font-color);
+  color: var(--dui-font-color, #222222);
 }
 .daracl-form *,
 .daracl-form ::after,
 .daracl-form ::before {
   box-sizing: border-box;
-  line-height: var(--line-height);
-  font-size: var(--font-size);
-  color: var(--font-color);
+  line-height: var(--df-line-height);
+  font-size: var(--df-font-size);
+  color: var(--dui-font-color, #222222);
 }
 .daracl-form .df-txt-left {
   text-align: left;
@@ -85,28 +298,28 @@
 .daracl-form select,
 .daracl-form textarea {
   background-color: transparent;
-  color: var(--font-color);
+  color: var(--dui-font-color, #222222);
 }
 .daracl-form input[disabled],
 .daracl-form select[disabled],
 .daracl-form textarea[disabled] {
-  background-color: var(--input-disabled-bg);
+  background-color: var(--dui-input-disabled-bg, #ebebeb);
   opacity: 0.8;
 }
 .daracl-form .df-label {
   position: relative;
   vertical-align: top;
-  padding-right: var(--field-padding-right);
+  padding-right: var(--df-field-padding-right);
   display: flex;
   align-items: flex-start;
 }
 .daracl-form .df-label .required {
-  color: var(--color-danger);
+  color: var(--dui-error-color, #b42318);
   display: inline-block;
   vertical-align: middle;
 }
 .daracl-form .df-label .required::after {
-  color: var(--color-danger);
+  color: var(--dui-error-color, #b42318);
   content: "*";
   vertical-align: middle;
 }
@@ -119,13 +332,13 @@
 }
 .daracl-form .df-label .df-tooltip {
   visibility: visible;
-  color: var(--tooltip-color);
-  background: var(--tooltip-background);
+  color: var(--dui-tooltip-color, #ffffff);
+  background: var(--dui-tooltip-bg, #3e3e3e);
   width: 16px;
   height: 16px;
   border-radius: 8px;
   text-align: center;
-  line-height: var(--line-height-lg);
+  line-height: var(--df-line-height-lg);
   margin: 0 5px;
   font-size: 12px;
   cursor: help;
@@ -136,9 +349,9 @@
 .daracl-form .df-label .df-tooltip .df-tooltip-text {
   display: none;
   text-align: initial;
-  background: var(--tooltip-background);
+  background: var(--dui-tooltip-bg, #3e3e3e);
   border-radius: 5px;
-  color: var(--tooltip-color);
+  color: var(--dui-tooltip-color, #ffffff);
   padding: 10px 5px;
   position: absolute;
   z-index: 2;
@@ -151,18 +364,18 @@
   display: block;
 }
 .daracl-form .df-form-field {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--dui-input-border-color, #cdcdcd);
   display: block;
   width: 100%;
   padding: 0px 0.75rem;
   font-weight: 400;
-  line-height: var(--line-height);
+  line-height: var(--df-line-height);
   height: 30px;
   border-radius: 4px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  background-color: var(--input-bg);
+  background-color: var(--dui-input-bg, #ffffff);
   background-clip: padding-box;
-  color: var(--input-color);
+  color: var(--dui-input-color, #212529);
 }
 .daracl-form .df-form-field[type=radio], .daracl-form .df-form-field[type=checkbox] {
   width: 14px;
@@ -176,6 +389,11 @@
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 7px center;
+  background-size: 12px;
+  padding-right: 20px;
 }
 .daracl-form .df-form-field.df-textarea {
   padding-right: 0px;
@@ -373,20 +591,20 @@
   text-align: left;
 }
 .daracl-form .df-field-container .df-field .df-file-wrapper {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--dui-input-border-color, #cdcdcd);
   text-align: center;
   display: block;
   width: 100%;
   padding: 0.375rem 0.75rem;
   font-weight: 400;
-  line-height: var(--line-height-lg);
+  line-height: var(--df-line-height-lg);
   background-clip: padding-box;
   border-radius: 4px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 .daracl-form .df-field-container .df-description {
   padding: 3px 0px 0px;
-  font-size: var(--font-size-sm);
+  font-size: var(--df-font-size-sm);
 }
 .daracl-form .df-file-list .df-file-item {
   height: 25px;
@@ -399,14 +617,14 @@
   cursor: pointer;
 }
 .daracl-form .df-file-list .df-file-icon:hover {
-  background-color: var(--button-bg-hover);
+  background-color: var(--dui-button-hover-bg, #e3e3e3);
 }
 .daracl-form .df-file-list .df-file-icon::before {
   content: "";
   display: block;
   width: 100%;
   height: 100%;
-  background-color: var(--icon-color);
+  background-color: var(--dui-icon-stroke-color, #5a5858);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
 }
@@ -441,7 +659,7 @@
   align-items: center;
 }
 .daracl-form .df-field-group .df-field-item {
-  padding-top: var(--field-padding-top);
+  padding-top: var(--df-field-padding-top);
   padding-right: 8px;
 }
 .daracl-form .df-field-group .df-field-item.df-vertical > * {
@@ -452,9 +670,9 @@
   margin: 0px;
   padding: 0px;
   display: flex;
-  line-height: var(--line-height);
+  line-height: var(--df-line-height);
   width: 100%;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--dui-border-color, #d9dde3);
 }
 .daracl-form .df-tab-header.df-tab-al-left {
   justify-content: left;
@@ -475,8 +693,8 @@
   white-space: nowrap;
 }
 .daracl-form .df-tab-header > .df-tab-item.active a {
-  color: var(--font-hover-color);
-  background-color: var(--tab-bg);
+  color: var(--dui-font-hover-color, #000000);
+  background-color: var(--dui-tab-bg, #f6f6f6);
 }
 .daracl-form .df-tab-header > .df-tab-item a {
   border-top-left-radius: calc(0.45rem - 1px);
@@ -486,12 +704,12 @@
   float: left;
   padding: 0.5em 1em;
   text-decoration: none;
-  color: var(--font-color);
+  color: var(--dui-font-color, #222222);
   height: 30px;
 }
 .daracl-form .df-tab-header > .df-tab-item a:hover {
-  background-color: var(--tab-bg-hover);
-  border: 1px solid var(--border-color);
+  background-color: var(--dui-tab-bg-hover, #ebebeb);
+  border: 1px solid var(--dui-border-color, #d9dde3);
   border-bottom-width: 0;
 }
 .daracl-form .df-tab-body .df-tab-panel {
@@ -503,14 +721,14 @@
 .daracl-form .df-btn {
   padding: 5px 10px;
   border-radius: calc(0.45rem - 1px);
-  border: 1px solid var(--border-color);
-  background-color: var(--button-bg);
+  border: 1px solid var(--dui-input-border-color, #cdcdcd);
+  background-color: var(--dui-button-bg, #ffffff);
   cursor: pointer;
   transition: background-color 0.3s;
 }
 .daracl-form .df-btn:hover {
-  color: var(--font-hover-color);
-  background-color: var(--button-bg-hover);
+  color: var(--dui-font-hover-color, #000000);
+  background-color: var(--dui-button-hover-bg, #e3e3e3);
 }
 .daracl-form .df-icon {
   display: inline-block;
@@ -520,7 +738,7 @@
 }
 .daracl-form .df-add-icon,
 .daracl-form .df-remove-icon {
-  background-color: var(--icon-color);
+  background-color: var(--dui-icon-stroke-color, #5a5858);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
 }
@@ -542,7 +760,7 @@
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-top: var(--field-margin-top);
+  margin-top: var(--df-field-margin-top);
   margin-bottom: 0px;
   margin-right: 0px !important;
   margin-left: 0px !important;
@@ -589,8 +807,8 @@
   margin-right: 15px;
 }
 .daracl-form .df-form-group.invalid .df-form-field {
-  border-color: var(--invalid-border-color);
-  outline-color: var(--invalid-border-color);
+  border-color: var(--dui-invalid-border-color, #ffb6b4);
+  outline-color: var(--dui-invalid-border-color, #ffb6b4);
 }
 .daracl-form .df-form-group.invalid > .df-field-container.required > .df-field .df-help-icon {
   display: block;
@@ -600,8 +818,8 @@
   display: block;
 }
 .daracl-form .df-form-group.invalid .df-help-message > * {
-  color: var(--invalid-font-color);
-  font-size: var(--font-size-sm);
+  color: var(--dui-invalid-font-color, #ff4136);
+  font-size: var(--df-font-size-sm);
   padding: 3px 0px;
 }
 .daracl-form .df-form-group.valid > .df-field-container.required > .df-field .df-help-icon {
@@ -609,7 +827,7 @@
   background-image: url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjMTlhOTc0OyYjMTA7Ij48cGF0aCBkPSJNMzc4LTI0NiAxNTQtNDcwbDQzLTQzIDE4MSAxODEgMzg0LTM4NCA0MyA0My00MjcgNDI3WiIvPjwvc3ZnPg==");
 }
 .daracl-form .df-form-group .df-file-label {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--dui-input-border-color, #cdcdcd);
   display: inline;
   width: 100%;
   padding: 3px 15px;
@@ -619,17 +837,17 @@
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 .daracl-form .df-form-group .df-file-label:hover {
-  background-color: var(--button-bg-hover);
+  background-color: var(--dui-button-hover-bg, #e3e3e3);
 }
 .daracl-form .df-grid-field .df-grid-btn-area {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--dui-border-color, #d9dde3);
   padding: 3px;
 }
 .daracl-form .df-grid-field .df-grid-container {
   width: 100%;
   height: auto;
   overflow-y: auto;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--dui-border-color, #d9dde3);
 }
 .daracl-form .df-grid-field .df-grid-container .df-btn {
   padding: 3px 5px;
@@ -643,8 +861,8 @@
   position: sticky;
   top: 0px;
   z-index: 10;
-  border-bottom: 1px solid var(--border-color);
-  background-color: var(--bg-grid-header);
+  border-bottom: 1px solid var(--dui-border-color, #d9dde3);
+  background-color: var(--dui-panel-header-bg, #f7f9fc);
   text-align: center;
 }
 .daracl-form .df-grid-field .df-grid-container .df-grid .df-help-message {
@@ -675,8 +893,8 @@
   position: relative;
 }
 .daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-form-field {
-  border-color: var(--invalid-border-color);
-  outline-color: var(--invalid-border-color);
+  border-color: var(--dui-invalid-border-color, #ffb6b4);
+  outline-color: var(--dui-invalid-border-color, #ffb6b4);
 }
 .daracl-form .df-grid-field .df-grid-container .df-grid .invalid > .df-grid-column.required .df-field .df-help-icon {
   display: block;
@@ -685,8 +903,8 @@
 .daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-help-message {
   display: block;
   position: absolute;
-  border: 1px solid var(--invalid-border-color);
-  border-color: var(--invalid-border-color) transparent transparent transparent;
+  border: 1px solid var(--dui-invalid-border-color, #ffb6b4);
+  border-color: var(--dui-invalid-border-color, #ffb6b4) transparent transparent transparent;
   top: calc(100% + 6px);
   left: 50%;
   transform: translateX(-50%);
@@ -694,8 +912,8 @@
   padding: 5px 5px;
   border-radius: 0.4rem;
   z-index: 2;
-  background-color: var(--invalid-background-color);
-  color: var(--invalid-font-color);
+  background-color: var(--dui-invalid-bg, #ffdddd);
+  color: var(--dui-invalid-font-color, #ff4136);
 }
 .daracl-form .df-grid-field .df-grid-container .df-grid .invalid .df-help-message::after {
   content: "";
@@ -705,7 +923,7 @@
   width: 0;
   height: 0;
   border: 7px solid transparent;
-  border-bottom-color: var(--invalid-border-color);
+  border-bottom-color: var(--dui-invalid-border-color, #ffb6b4);
   border-top: 0;
   border-left: 0;
   margin-left: -3.5px;
@@ -714,75 +932,6 @@
 .daracl-form .df-grid-field .df-grid-container .df-grid .valid > .df-grid-column.required .df-field .df-help-icon {
   display: block;
   background-image: url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSImIzEwOyAgICBmaWxsOiAjMTlhOTc0OyYjMTA7Ij48cGF0aCBkPSJNMzc4LTI0NiAxNTQtNDcwbDQzLTQzIDE4MSAxODEgMzg0LTM4NCA0MyA0My00MjcgNDI3WiIvPjwvc3ZnPg==");
-}
-
-[data-daracl-theme=dark] .daracl-form {
-  --color-danger: #ff6b6b;
-  --background-danger: #ff6b6b;
-  --invalid-font-color: #ff9b9b;
-  --invalid-border-color: #ff5e5e;
-  --invalid-background-color: #3a1f1f;
-  --tooltip-background: #444;
-  --tooltip-color: #fff;
-  --field-margin-top: 10px;
-  --field-padding-top: 3px;
-  --field-padding-right: 15px;
-  --line-height: 1.2em;
-  --line-height-lg: 1.5em;
-  --font-size-sm: 12px;
-  --font-size: 14px;
-  --font-size-lg: 16px;
-  --border-color: #585858;
-  --font-color: #e0e0e0;
-  --font-hover-color: #ffffff;
-  --font-disable-color: #ebebeb;
-  --button-bg: #5a5a5a;
-  --button-bg-hover: #727272;
-  --tab-bg: #2c2c2c;
-  --tab-bg-hover: #3c3c3c;
-  --input-bg: #2a2a2a;
-  --input-color: #f0f0f0;
-  --input-disabled-bg: #555;
-  --bg-grid-header: #1a1717;
-  --icon-color: #fffbfb;
-  --body-bg: #1a1a1a;
-  --body-bg-thin: #444343;
-  --body-bg-hover: #565555;
-}
-
-body.dark .daracl-form,
-.daracl-form.dark {
-  --color-danger: #ff6b6b;
-  --background-danger: #ff6b6b;
-  --invalid-font-color: #ff9b9b;
-  --invalid-border-color: #ff5e5e;
-  --invalid-background-color: #3a1f1f;
-  --tooltip-background: #444;
-  --tooltip-color: #fff;
-  --field-margin-top: 10px;
-  --field-padding-top: 3px;
-  --field-padding-right: 15px;
-  --line-height: 1.2em;
-  --line-height-lg: 1.5em;
-  --font-size-sm: 12px;
-  --font-size: 14px;
-  --font-size-lg: 16px;
-  --border-color: #585858;
-  --font-color: #e0e0e0;
-  --font-hover-color: #ffffff;
-  --font-disable-color: #ebebeb;
-  --button-bg: #5a5a5a;
-  --button-bg-hover: #727272;
-  --tab-bg: #2c2c2c;
-  --tab-bg-hover: #3c3c3c;
-  --input-bg: #2a2a2a;
-  --input-color: #f0f0f0;
-  --input-disabled-bg: #555;
-  --bg-grid-header: #1a1717;
-  --icon-color: #fffbfb;
-  --body-bg: #1a1a1a;
-  --body-bg-thin: #444343;
-  --body-bg-hover: #565555;
 }/*!
 * @daracl/datetimepicker v0.0.13
 * Copyright 2023-2026 darainfo;