cronapp-framework-js 2.9.1-SP.9 → 2.9.2

package/css/themes/custom/aquamarine/custom-aquamarine.css

@@ -268,18 +268,19 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #2c72a8);
-    --btnDefault: var(--colorDefault40, #2ca4a8);
-    --btnPrimary: var(--colorPrimary40, #2c72a8);
-    --btnSuccess: var(--colorSuccess40, #38a82c);
-    --btnCalm: var(--colorCalm40, #11c1f3);
-    --btnWarning: var(--colorWarning40, #daa31f);
-    --btnDanger: var(--colorDanger40, #a82c2c);
-    --btnLight: var(--textColorLight40, #444444);
-    --btnStable: var(--colorStable40, #b2b2b2);
-    --btnRoyal: var(--colorRoyal40, #7e5ee8);
-    --btnDark: var(--colorDark40, #444444);
+    --btnLink: transparent;
+    --btnDefault: linear-gradient(90deg, var(--colorDefault40, #2ca4a8) 40%, var(--colorDefault30, #81bdc0) 100%);
+    --btnPrimary: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%);
+    --btnSuccess: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%);
+    --btnCalm: transparent;
+    --btnWarning: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%);
+    --btnDanger: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%);
+    --btnLight: transparent;
+    --btnStable: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%);
+    --btnRoyal: linear-gradient(90deg, var(--colorRoyal40, #7e5ee8) 40%, var(--colorRoyal30, #a594ee) 100%);
+    --btnDark: linear-gradient(90deg, var(--colorDark40, #444444) 40%, var(--colorDark30, #898989) 100%);
 
     --textColorDefault: var(--textColorDefault40, #ffffff);
     --textColorPrimary: var(--textColorPrimary40, #ffffff);
@@ -287,70 +288,128 @@
     --textColorCalm: var(--colorCalm40, #11c1f3);
     --textColorWarning: var(--textColorWarning40, #ffffff);
     --textColorDanger: var(--textColorDanger40, #ffffff);
-    --textColorLight: var(--textColorLight40, #ffffff);
+    --textColorLight: var(--textColorLight40, #444444);
     --textColorStable: var(--textColorStable40, #444444);
     --textColorRoyal: var(--textColorRoyal40, #ffffff);
     --textColorDark: var(--textColorDark40, #ffffff);
 
+    --borderBtnLink: var(--colorPrimary40, #2c72a8);
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: var(--colorCalm40, #11c1f3);
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: var(--textColorLight40, #444444);
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
-    --colorDefault: var(--colorDefault40, #3b448e);
-    --colorPrimary: var(--colorPrimary40, #5665be);
-    --colorSuccess: var(--colorSuccess40, #257d25);
-    --colorCalm: var(--colorDefault40, #3b448e);
-    --colorWarning: var(--colorWarning40, #f0ad4e);
+    --colorDefault: var(--colorDefault40, #2ca4a8);
+    --colorPrimary: var(--colorPrimary40, #2c72a8);
+    --colorSuccess: var(--colorSuccess40, #38a82c);
+    --colorCalm: var(--colorDefault40, #2ca4a8);
+    --colorWarning: var(--colorWarning40, #daa31f);
     --colorDanger: var(--colorDanger40, #ce3a36);
     --colorLight: var(--colorLight50, #c2c2c2);
-    --colorStable: var(--colorStable40, #ffc900);
-    --colorRoyal: var(--colorRoyal40, #886aea);
+    --colorStable: var(--colorStable40, #b2b2b2);
+    --colorRoyal: var(--colorRoyal40, #7e5ee8);
     --colorDark: var(--colorDark40, #444444);
 
     /* Components - Checkbox */
-    --checkboxDefault: var(--colorDefault40, #3b448e);
-    --checkboxPrimary: var(--colorPrimary40, #5665be);
-    --checkboxSuccess: var(--colorSuccess40, #257d25);
+    --checkboxDefault: var(--colorDefault40, #2ca4a8);
+    --checkboxPrimary: var(--colorPrimary40, #2c72a8);
+    --checkboxSuccess: var(--colorSuccess40, #38a82c);
     --checkboxCalm: var(--colorCalm40, #11c1f3);
-    --checkboxWarning: var(--colorWarning40, #f0ad4e);
+    --checkboxWarning: var(--colorWarning40, #daa31f);
     --checkboxDanger: var(--colorDanger40, #ce3a36);
     --checkboxLight: var(--colorLight40, #dddddd);
     --checkboxStable: var(--colorStable40, #b2b2b2);
-    --checkboxRoyal: var(--colorRoyal40, #886aea);
+    --checkboxRoyal: var(--colorRoyal40, #7e5ee8);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: transparent;
+    --borderCheckboxPrimary: transparent;
+    --borderCheckboxSuccess: transparent;
+    --borderCheckboxCalm: transparent;
+    --borderCheckboxWarning: transparent;
+    --borderCheckboxDanger: transparent;
+    --borderCheckboxLight: transparent;
+    --borderCheckboxStable: transparent;
+    --borderCheckboxRoyal: transparent;
+    --borderCheckboxDark: transparent;
+
     /* Components - Combobox */
-    --comboboxDefault: var(--colorDefault40, #3b448e);
-    --comboboxPrimary: var(--colorPrimary40, #5665be);
-    --comboboxSuccess: var(--colorSuccess40, #257d25);
+    --comboboxDefault: var(--colorDefault40, #2ca4a8);
+    --comboboxPrimary: var(--colorPrimary40, #2c72a8);
+    --comboboxSuccess: var(--colorSuccess40, #38a82c);
     --comboboxCalm: var(--colorCalm40, #11c1f3);
-    --comboboxWarning: var(--colorWarning40, #f0ad4e);
+    --comboboxWarning: var(--colorWarning40, #daa31f);
     --comboboxDanger: var(--colorDanger40, #ce3a36);
-    --comboboxLight: var(--colorLight40, #dddddd);
+    --comboboxLight: transparent;
     --comboboxStable: var(--colorStable40, #b2b2b2);
-    --comboboxRoyal: var(--colorRoyal40, #886aea);
+    --comboboxRoyal: var(--colorRoyal40, #7e5ee8);
     --comboboxDark: var(--colorDark40, #444444);
 
+    --borderComboboxDefault: var(--colorDefault50, #3b448e);
+    --borderComboboxPrimary: var(--colorPrimary50, #5665be);
+    --borderComboboxSuccess: var(--colorSuccess50, #257d25);
+    --borderComboboxCalm: var(--colorCalm50, #11c1f3);
+    --borderComboboxWarning: var(--colorWarning50, #f0ad4e);
+    --borderComboboxDanger: var(--colorDanger50, #ce3a36);
+    --borderComboboxLight: var(--textColorLight40, #444444);
+    --borderComboboxStable: var(--colorStable50, #b2b2b2);
+    --borderComboboxRoyal: var(--colorRoyal50, #886aea);
+    --borderComboboxDark: var(--colorDark50, #444444);
+
     /* Components - Radio input */
-    --optionDefault: var(--colorDefault40, #3b448e);
-    --optionPrimary: var(--colorPrimary40, #5665be);
-    --optionSuccess: var(--colorSuccess40, #257d25);
+    --optionDefault: var(--colorDefault40, #2ca4a8);
+    --optionPrimary: var(--colorPrimary40, #2c72a8);
+    --optionSuccess: var(--colorSuccess40, #38a82c);
     --optionCalm: var(--colorCalm40, #11c1f3);
-    --optionWarning: var(--colorWarning40, #f0ad4e);
+    --optionWarning: var(--colorWarning40, #daa31f);
     --optionDanger: var(--colorDanger40, #ce3a36);
-    --optionLight: var(--colorLight40, #ffffff);
-    --optionStable: var(--colorStable40, #f8f8f8);
-    --optionRoyal: var(--colorRoyal40, #886aea);
+    --optionLight: var(--colorLight40, #dddddd);
+    --optionStable: var(--colorStable40, #b2b2b2);
+    --optionRoyal: var(--colorRoyal40, #7e5ee8);
     --optionDark: var(--colorDark40, #444444);
 
+    --borderOptionDefault: transparent;
+    --borderOptionPrimary: transparent;
+    --borderOptionSuccess: transparent;
+    --borderOptionCalm: transparent;
+    --borderOptionWarning: transparent;
+    --borderOptionDanger: transparent;
+    --borderOptionLight: transparent;
+    --borderOptionStable: transparent;
+    --borderOptionRoyal: transparent;
+    --borderOptionDark: transparent;
+
     /* Components - Panel */
-    --panelDefault: var(--colorDefault40, #2ca4a8);
-    --panelPrimary: var(--colorPrimary40, #2c72a8);
-    --panelSuccess: var(--colorSuccess40, #38a82c);
+    --panelDefault: linear-gradient(90deg, var(--colorDefault70, #185a5c) 0%, var(--colorPrimary60, #20547b) 100%);
+    --panelPrimary: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%);
+    --panelSuccess: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%);
     --panelCalm: var(--colorCalm40, #11c1f3);
-    --panelWarning: var(--colorWarning40, #daa31f);
-    --panelDanger: var(--colorDanger40, #a82c2c);
-    --panelLight: var(--colorLight40, #dddddd);
-    --panelStable: var(--colorStable40, #b2b2b2);
-    --panelRoyal: var(--colorRoyal40, #7e5ee8);
-    --panelDark: var(--colorDark40, #444444);
+    --panelWarning: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%);
+    --panelDanger: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%);
+    --panelLight: transparent;
+    --panelStable: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%);
+    --panelRoyal: linear-gradient(90deg, var(--colorRoyal40, #7e5ee8) 40%, var(--colorRoyal30, #a594ee) 100%);
+    --panelDark: linear-gradient(90deg, var(--colorDark40, #444444) 40%, var(--colorDark30, #898989) 100%);
+
+    --borderPanelDefault: transparent;
+    --borderPanelPrimary: transparent;
+    --borderPanelSuccess: transparent;
+    --borderPanelCalm: transparent;
+    --borderPanelWarning: transparent;
+    --borderPanelDanger: transparent;
+    --borderPanelLight: transparent;
+    --borderPanelStable: transparent;
+    --borderPanelRoyal: transparent;
+    --borderPanelDark: transparent;
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 .text-color-info {
@@ -811,7 +870,7 @@ td.k-state-focused.k-state-selected,
 }
 
 /* Grid */
-.k-grid .k-grid-header .k-header .k-checkbox-label:before{
+.k-grid .k-grid-header .k-header .k-checkbox-label:before {
     border-color: var(--textColorDefault40, #ffffff);
     color: var(--textColorDefault40, #ffffff);
 }
@@ -979,7 +1038,7 @@ table.table thead th {
     display: inline-flex;
 }
 
-.k-grid table .k-button.k-custom-command{
+.k-grid table .k-button.k-custom-command {
     width: inherit;
     min-width: 64px;
 }
@@ -1180,7 +1239,6 @@ thead.k-grid-header th.k-header:last-child {
 }
 
 .k-scheduler-edit-form .k-edit-field .k-button,
-.k-edit-form-container .k-edit-buttons .k-primary,
 .k-scheduler .k-state-selected>.k-link,
 .k-scheduler .k-scheduler-toolbar .k-state-selected,
 .k-scheduler .k-today.k-state-selected,
@@ -1200,8 +1258,7 @@ thead.k-grid-header th.k-header:last-child {
 .k-scheduler-navigation .k-nav-prev .k-link:hover,
 .k-scheduler div.k-scheduler-footer .k-link:hover,
 .k-scheduler div.k-scheduler-footer ul li:hover,
-.k-scheduler-edit-form .k-edit-field .k-button:hover,
-.k-edit-form-container .k-edit-buttons .k-primary:hover {
+.k-scheduler-edit-form .k-edit-field .k-button:hover{
     color: var(--colorDefault40, #2ca4a8);
     box-shadow: none;
     background: var(--colorDefault20, #b1d3d5);
@@ -1320,6 +1377,10 @@ td.k-state-focused.k-state-selected {
     color: var(--colorDefault40, #2a9fd6);
 }
 
+.k-window-titlebar {
+    background: transparent;
+}
+
 /* Slider */
 .k-slider-buttons .k-slider-items {
     display: flex;

package/css/themes/custom/cerulean/button-cerulean.css

@@ -44,6 +44,8 @@
 }
 
 /* Primary */
+.k-scheduler-edit-form .k-edit-field .k-button,
+.k-edit-form-container .k-edit-buttons .k-primary,
 .k-dialog-buttongroup .k-button.k-primary,
 .k-button.k-primary,
 .btn.btn-primary {
@@ -52,6 +54,10 @@
     color: var(--textColorPrimary40, #ffffff);
 }
 
+.k-scheduler-edit-form .k-edit-field .k-button:focus,
+.k-edit-form-container .k-edit-buttons .k-primary:focus,
+.k-scheduler-edit-form .k-edit-field .k-button:hover,
+.k-edit-form-container .k-edit-buttons .k-primary:hover,
 .k-dialog-buttongroup .k-button.k-primary:focus,
 .k-dialog-buttongroup .k-button.k-primary:hover,
 .k-button.k-primary:focus,
@@ -63,6 +69,10 @@
     border-color: var(--colorPrimary40, #2fa4e7);
 }
 
+.k-scheduler-edit-form .k-edit-field .k-button:active,
+.k-edit-form-container .k-edit-buttons .k-primary:active,
+.k-scheduler-edit-form .k-edit-field .k-button.active,
+.k-edit-form-container .k-edit-buttons .k-primary.active,
 .k-dialog-buttongroup .k-button.k-primary.active,
 .k-dialog-buttongroup .k-button.k-primary:active,
 .k-button.k-primary.active,
@@ -130,6 +140,8 @@
 }
 
 /* Danger */
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
 .k-button.k-danger,
 .btn.btn-danger {
     background: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger40, #c71c22) 60%, var(--colorDanger50, #ae191e));
@@ -137,6 +149,10 @@
     color: var(--textColorDanger40, #ffffff);
 }
 
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:focus,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:focus,
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover,
 .k-button.k-danger:focus,
 .k-button.k-danger:hover,
 .btn.btn-danger:focus,
@@ -146,6 +162,10 @@
     border-color: var(--colorDanger40, #c71c22);
 }
 
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:active,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:active,
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone.active,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel.active,
 .k-button.k-danger.active,
 .k-button.k-danger:active,
 .btn.btn-danger.active,
@@ -287,7 +307,6 @@
     border-color: var(--colorRoyal70, #4a3a80);
 }
 
-
 /* Dark */
 .k-button.k-dark,
 .btn.btn-dark {

package/css/themes/custom/cerulean/custom-cerulean.css

@@ -266,23 +266,25 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
+
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #2fa4e7);
-    --btnDefault: var(--colorDefault40, #f5f5f5);
-    --btnPrimary: var(--colorPrimary40, #2fa4e7);
-    --btnSuccess: var(--colorSuccess40, #73a839);
-    --btnCalm: var(--colorCalm40, #033c73);
-    --btnWarning: var(--colorWarning40, #dd5600);
-    --btnDanger: var(--colorDanger40, #c71c22);
-    --btnLight: var(--colorLight40, #ffffff);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #444444);
+    --btnDefault: linear-gradient(var(--colorDefault10, #fcfcfc), var(--colorDefault10, #fcfcfc) 60%, var(--colorDefault40, #f5f5f5));
+    --btnPrimary: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary40, #2fa4e7) 60%, var(--colorPrimary50, #3c6088));
+    --btnSuccess: linear-gradient(var(--colorSuccess30, #9fc085), var(--colorSuccess40, #73a839) 60%, var(--colorSuccess50, #359e1d));
+    --btnCalm: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm40, #033c73) 60%, var(--colorCalm50, #033565));
+    --btnWarning: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning40, #dd5600) 60%, var(--colorWarning50, #c24b00));
+    --btnDanger: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger40, #c71c22) 60%, var(--colorDanger50, #ae191e));
+    --btnLight: linear-gradient(var(--colorLight30, #ffffff), var(--colorLight40, #ffffff) 60%, var(--colorLight50, #dfdfdf));
+    --btnStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
+    --btnDark: linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444) 60%, var(--colorDark50, #3c3c3c));
 
     --textColorDefault: var(--textColorDefault40, #444444);
     --textColorPrimary: var(--textColorPrimary40, #ffffff);
     --textColorSuccess: var(--textColorSuccess40, #ffffff);
-    --textColorCalm: var(--textColorDefault40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
     --textColorWarning: var(--textColorWarning40, #ffffff);
     --textColorDanger: var(--textColorDanger40, #ffffff);
     --textColorLight: var(--textColorLight40, #444444);
@@ -290,6 +292,18 @@
     --textColorRoyal: var(--textColorRoyal40, #ffffff);
     --textColorDark: var(--textColorDark40, #ffffff);
 
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault50, #d7d7d7);
+    --borderBtnPrimary: var(--colorPrimary40, #2fa4e7);
+    --borderBtnSuccess: var(--colorSuccess40, #73a839);
+    --borderBtnCalm: var(--colorCalm40, #033c73);
+    --borderBtnWarning: var(--colorWarning40, #dd5600);
+    --borderBtnDanger: var(--colorDanger50, #ae191e);
+    --borderBtnLight: var(--colorLight40, #ffffff);
+    --borderBtnStable: var(--colorStable40, #f8f8f8);
+    --borderBtnRoyal: var(--colorRoyal40, #886aea);
+    --borderBtnDark: var(--colorDark40, #444444);
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault50, #d7d7d7);
     --colorPrimary: var(--colorPrimary40, #2fa4e7);
@@ -314,6 +328,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: transparent;
+    --borderCheckboxPrimary: transparent;
+    --borderCheckboxSuccess: transparent;
+    --borderCheckboxCalm: transparent;
+    --borderCheckboxWarning: transparent;
+    --borderCheckboxDanger: transparent;
+    --borderCheckboxLight: transparent;
+    --borderCheckboxStable: transparent;
+    --borderCheckboxRoyal: transparent;
+    --borderCheckboxDark: transparent;
+
     /* Components - Combobox */
     --comboboxDefault: var(--colorDefault40, #f5f5f5);
     --comboboxPrimary: var(--colorPrimary40, #2fa4e7);
@@ -326,6 +351,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #444444);
 
+    --borderComboboxDefault: var(--colorDefault50, #d7d7d7);
+    --borderComboboxPrimary: var(--colorPrimary50, #4b58a6);
+    --borderComboboxSuccess: var(--colorSuccess50, #73a839);
+    --borderComboboxCalm: var(--colorCalm50, #033c73);
+    --borderComboboxWarning: var(--colorWarning50, #dd5600);
+    --borderComboboxDanger: var(--colorDanger50, #ae191e);
+    --borderComboboxLight: var(--colorLight50, #dfdfdf);
+    --borderComboboxStable: var(--colorStable50, #f8f8f8);
+    --borderComboboxRoyal: var(--colorRoyal50, #775dcd);
+    --borderComboboxDark: var(--colorDark50, #3c3c3c);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault50, #d7d7d7);
     --optionPrimary: var(--colorPrimary40, #2fa4e7);
@@ -338,8 +374,19 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark40, #444444);
 
+    --borderOptionDefault: transparent;
+    --borderOptionPrimary: transparent;
+    --borderOptionSuccess: transparent;
+    --borderOptionCalm: transparent;
+    --borderOptionWarning: transparent;
+    --borderOptionDanger: transparent;
+    --borderOptionLight: transparent;
+    --borderOptionStable: transparent;
+    --borderOptionRoyal: transparent;
+    --borderOptionDark: transparent;
+
     /* Components - Panel */
-    --panelDefault: var(--colorPrimary40, #2ca4a8);
+    --panelDefault: var(--colorPrimary40, #2fa4e7);
     --panelPrimary: var(--colorDefault40, #f5f5f5);
     --panelSuccess: var(--colorSuccess40, #73a839);
     --panelCalm: var(--colorCalm40, #033c73);
@@ -349,6 +396,19 @@
     --panelStable: var(--colorStable50, #d9d9d9);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark40, #444444);
+
+    --borderPanelDefault: var(--colorPrimary40, #2fa4e7);
+    --borderPanelPrimary: var(--colorDefault40, #f5f5f5);
+    --borderPanelSuccess: var(--colorSuccess40, #73a839);
+    --borderPanelCalm: var(--colorCalm40, #033c73);
+    --borderPanelWarning: var(--colorWarning40, #dd5600);
+    --borderPanelDanger: var(--colorDanger40, #c71c22);
+    --borderPanelLight: var(--colorLight50, #dfdfdf);
+    --borderPanelStable: var(--colorStable50, #d9d9d9);
+    --borderPanelRoyal: var(--colorRoyal40, #886aea);
+    --borderPanelDark: var(--colorDark40, #444444);
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 h1,
@@ -829,6 +889,17 @@ td.k-state-focused.k-state-selected {
     color: var(--colorPrimary60, #2278a9);
 }
 
+.k-autocomplete.k-state-focused,
+.k-dropdown-wrap.k-state-focused,
+.k-multiselect.k-header.k-state-focused,
+.k-numeric-wrap.k-state-focused,
+.k-picker-wrap.k-state-focused,
+.k-textbox:focus,
+.cardinput:focus-within {
+    border-color: var(--colorPrimary30, #82bded);
+    outline: 0;
+    box-shadow: inset 0 1px 1px transparent, 0 0 8px var(--colorPrimary30, #82bded);
+}
 
 /* Modal button - password */
 #forgotPasswordModal .modal-footer .k-button.k-success,
@@ -877,4 +948,8 @@ td.k-state-focused.k-state-selected {
 .k-scheduler-navigation .k-nav-next.k-state-hover .k-link span,
 .k-scheduler-navigation .k-nav-prev.k-state-hover .k-link span {
     color: var(--textColorPrimary40, #ffffff);
+}
+
+.k-window-titlebar {
+    background: transparent;
 }

package/css/themes/custom/cosmo/custom-cosmo.css

@@ -266,6 +266,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #2780e3);
     --btnDefault: var(--colorDefault40, #222222);
@@ -279,6 +280,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #444444);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #000000);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: transparent;
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #222222);
     --colorPrimary: var(--colorPrimary40, #2780e3);
@@ -303,6 +327,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: transparent;
+    --borderCheckboxPrimary: transparent;
+    --borderCheckboxSuccess: transparent;
+    --borderCheckboxCalm: transparent;
+    --borderCheckboxWarning: transparent;
+    --borderCheckboxDanger: transparent;
+    --borderCheckboxLight: transparent;
+    --borderCheckboxStable: transparent;
+    --borderCheckboxRoyal: transparent;
+    --borderCheckboxDark: transparent;
+
     /* Components - Combobox */
     --comboboxDefault: var(--colorDefault40, #222222);
     --comboboxPrimary: var(--colorPrimary40, #2780e3);
@@ -315,6 +350,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #444444);
 
+    --borderComboboxDefault: var(--colorDefault50, #555555);
+    --borderComboboxPrimary: var(--colorPrimary50, #2a9fd6);
+    --borderComboboxSuccess: var(--colorSuccess50, #77b300);
+    --borderComboboxCalm: var(--colorCalm50, #11c1f3);
+    --borderComboboxWarning: var(--colorWarning50, #ff8800);
+    --borderComboboxDanger: var(--colorDanger50, #cc0000);
+    --borderComboboxLight: var(--colorLight50, #222222);
+    --borderComboboxStable: var(--colorStable50, #f8f8f8);
+    --borderComboboxRoyal: var(--colorRoyal50, #9933cc);
+    --borderComboboxDark: var(--colorDark50, #adafae);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault40, #222222);
     --optionPrimary: var(--colorPrimary40, #2780e3);
@@ -327,6 +373,17 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark40, #444444);
 
+    --borderOptionDefault: transparent;
+    --borderOptionPrimary: transparent;
+    --borderOptionSuccess: transparent;
+    --borderOptionCalm: transparent;
+    --borderOptionWarning: transparent;
+    --borderOptionDanger: transparent;
+    --borderOptionLight: transparent;
+    --borderOptionStable: transparent;
+    --borderOptionRoyal: transparent;
+    --borderOptionDark: transparent;
+
     /* Components - Panel */
     --panelDefault: var(--colorPrimary40, #2780e3);
     --panelPrimary: var(--colorDefault10, #d6d6d6);
@@ -338,6 +395,19 @@
     --panelStable: var(--colorStable50, #d9d9d9);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark40, #444444);
+
+    --borderPanelDefault: var(--colorDefault10, #d6d6d6);
+    --borderPanelPrimary: transparent;
+    --borderPanelSuccess: transparent;
+    --borderPanelCalm: transparent;
+    --borderPanelWarning: transparent;
+    --borderPanelDanger: transparent;
+    --borderPanelLight: var(--colorLight50, #dfdfdf);
+    --borderPanelStable: var(--colorStable50, #d9d9d9);
+    --borderPanelRoyal: transparent;
+    --borderPanelDark: transparent;
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 .color-light {
@@ -419,7 +489,6 @@ a:hover {
 }
 
 .k-pager-wrap .k-pager-refresh,
-.k-dropdown-wrap.k-state-default,
 .k-header,
 .k-pager-wrap,
 .k-grid-toolbar {
@@ -770,7 +839,7 @@ a:hover {
     color: var(--textColorStable40, #444444);
 }
 
-
+.input-group .k-button,
 .crn-textinputbutton-button button {
     padding: 6px 10px;
 }
@@ -793,7 +862,6 @@ textarea.k-textbox,
 textarea.k-textbox:hover,
 .k-dropdown .k-state-focused,
 .k-filebrowser-dropzone,
-.k-list>.k-state-hover,
 .k-listbox .k-item:hover:not(.k-state-disabled),
 .k-mobile-list .k-edit-label.k-check:active,
 .k-mobile-list .k-item>.k-label:active,
@@ -803,8 +871,6 @@ textarea.k-textbox:hover,
 .k-scheduler .k-scheduler-toolbar ul li.k-state-hover,
 .k-splitbar-horizontal-hover:hover,
 .k-splitbar-vertical-hover:hover,
-.k-state-hover,
-.k-state-hover:hover,
 .k-grid-header:first-child th.k-header:first-child,
 .k-rtl thead.k-grid-header th.k-header:last-child,
 thead.k-grid-header th.k-header:first-child,
@@ -880,6 +946,12 @@ thead.k-grid-header th.k-header:first-child,
 .k-window-titleless .k-window-content,
 .k-treeview .k-item {
     border-radius: var(--borderRadiusNone, 0);
+    border-color: var(--textColor10, #d7d7d7);
+    box-shadow: none;
+}
+
+.k-autocomplete.k-state-default {
+    border: 1px solid var(--textColor10, #d7d7d7);
 }
 
 .k-scheduler-edit-form .k-edit-field .k-button,
@@ -1002,4 +1074,51 @@ td.k-state-focused.k-state-selected,
 
 .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
     border-top-color: var(--backgroundColor40, #ffffff);
+}
+
+/* Dropdown */
+.k-dropdown-wrap {
+    background: transparent;
+}
+
+/* .cronMultiSelect, */
+.k-multiselect-clearable .k-multiselect-wrap,
+.k-dropdown-wrap.k-state-default {
+    color: var(--textColor40, #393939);
+    border: 1px solid var(--textColor10, #d7d7d7);
+    background: transparent;
+    border-radius: var(--borderRadiusNone, 0);
+}
+
+.k-autocomplete.k-state-default .k-input,
+.k-combobox .k-state-default .k-input,
+.k-multiselect-wrap,
+.k-numeric-wrap.k-state-default .k-input,
+.k-picker-wrap.k-state-default .k-input,
+.k-progress-status-wrap,
+.k-slider-selection,
+.k-slider-track {
+    box-shadow: none;
+}
+
+.k-widget.k-multiselect.k-state-focused,
+.k-dropdown .k-state-focused,
+.k-autocomplete.k-state-focused,
+.k-dropdown-wrap.k-state-focused,
+.k-multiselect.k-header.k-state-focused,
+.k-numeric-wrap.k-state-focused,
+.k-picker-wrap.k-state-focused,
+.k-textbox:focus,
+.cardinput:focus-within {
+    border-color: var(--colorPrimary30, #82bded);
+    outline: 0;
+    box-shadow: inset 0 1px 1px transparent, 0 0 8px var(--colorPrimary30, #82bded);
+}
+
+.k-popup .k-list .k-state-focused {
+    border-radius: var(--borderRadiusNone, 0);
+}
+
+.cardinput {
+    padding: 0;
 }