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

package/css/themes/custom/darkly/custom-darkly.css

@@ -267,6 +267,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorSuccess40, #00bc8c);
     --btnDefault: var(--colorDefault40, #444444);
@@ -280,6 +281,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #303030);
 
+    --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(--colorDefault30, #898989);
     --colorPrimary: var(--colorPrimary40, #375a7f);
@@ -304,6 +328,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark30, #828282);
 
+    --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, #444444);
     --comboboxPrimary: var(--colorPrimary40, #375a7f);
@@ -316,6 +351,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #303030);
 
+    --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(--colorDefault50, #3c3c3c);
     --optionPrimary: var(--colorPrimary40, #375a7f);
@@ -328,6 +374,17 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark30, #828282);
 
+    --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, #375a7f);
     --panelPrimary: var(--colorDefault40, #444444);
@@ -339,6 +396,19 @@
     --panelStable: var(--colorStable40, #f8f8f8);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark30, #828282);
+
+    --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 === */
 }
 
 .h1,
@@ -393,36 +463,36 @@ a:hover {
 
 .option-default .k-radio:checked+.k-radio-label:before,
 .option-default .k-radio-label:before {
-    border-color: var(--colorDefault50, #3c3c3c);
+    border-color: var(--colorDefault40, #444444);
 }
 
 .option-light .k-radio:checked+.k-radio-label:before,
 .option-light .k-radio-label:before {
-    border-color: var(--colorLight50, #979ea5);
+    border-color: var(--colorLight40, #adb5bd);
 }
 
 .option-default .k-radio-label:after,
 .option-default .k-radio:checked+.k-radio-label:after {
-    background: var(--colorDefault50, #304f6f);
-    border-color: var(--colorDefault50, #304f6f);
+    background: var(--colorDefault40, #444444);
+    border-color: var(--colorDefault40, #444444);
 }
 
 .option-light .k-radio-label:after,
 .option-light .k-radio:checked+.k-radio-label:after {
-    background: var(--colorLight50, #979ea5);
-    border-color: var(--colorLight50, #979ea5);
+    background: var(--colorLight40, #adb5bd);
+    border-color: var(--colorLight40, #adb5bd);
 }
 
 .option-default .k-radio:focus+.k-radio-label::before,
 .option-default .k-radio:hover+.k-radio-label::before {
-    box-shadow: 0 0 5px 0 var(--colorDefault50, #304f6f);
-    border-color: var(--colorDefault50, #304f6f);
+    box-shadow: 0 0 5px 0 var(--colorDefault40, #444444);
+    border-color: var(--colorDefault40, #444444);
 }
 
 .option-light .k-radio:focus+.k-radio-label::before,
 .option-light .k-radio:hover+.k-radio-label::before {
-    box-shadow: 0 0 5px 0 var(--colorLight50, #979ea5);
-    border-color: var(--colorLight50, #979ea5);
+    box-shadow: 0 0 5px 0 var(--colorLight40, #adb5bd);
+    border-color: var(--colorLight40, #adb5bd);
 }
 
 .option-dark .k-radio-label:before {
@@ -568,6 +638,39 @@ a:hover {
     color: var(--textColorDark40, #ffffff);
 }
 
+.k-grid-header .k-checkbox:checked+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:indeterminate+.k-checkbox-label:before,
+.k-grid-header .k-checkbox-label:hover:before,
+.k-grid-header .k-checkbox:checked+.k-checkbox-label:hover:before,
+.k-grid-header .k-checkbox:checked:hover+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:hover+.k-checkbox-label:before,
+.k-grid-header .k-checkbox-label:active:before,
+.k-grid-header .k-checkbox:active+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:focus+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:hover+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:checked+.k-checkbox-label:after,
+.k-grid-header .k-checkbox:indeterminate+.k-checkbox-label:after,
+.k-grid-header .k-checkbox-label:before {
+    border-color: var(--colorDefault30, #898989);
+}
+
+.k-grid-header .k-checkbox-label:hover:before,
+.k-grid-header .k-checkbox:checked+.k-checkbox-label:hover:before,
+.k-grid-header .k-checkbox:checked:hover+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:hover+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:focus+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:hover+.k-checkbox-label:before{
+    box-shadow: 0 0 5px 0 var(--colorDefault30, #898989);
+}
+
+.k-grid-header .k-checkbox:checked+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:indeterminate+.k-checkbox-label:before,
+.k-grid-header .k-checkbox:checked+.k-checkbox-label:after,
+.k-grid-header .k-checkbox:indeterminate+.k-checkbox-label:after{
+    background: var(--colorDefault30, #898989);
+    color: var(--textColorDefault40, #ffffff);
+}
+
 /* Button */
 .btn.btn-link i,
 .btn.btn-link span,

package/css/themes/custom/darkly/panel-darkly.css

@@ -90,10 +90,8 @@
     border-color: var(--colorLight40, #ecf0f1);
 }
 
-
 /* Stable */
-.panel-stable>.panel-heading,
-.panel-stable>.panel-footer {
+.panel-stable>.panel-heading {
     color: var(--textColorStable40, #444444);
     background: var(--colorStable40, #f8f8f8);
     border-color: transparent
@@ -104,8 +102,7 @@
 }
 
 /* Royal */
-.panel-royal>.panel-heading,
-.panel-royal>.panel-footer {
+.panel-royal>.panel-heading{
     color: var(--textColorRoyal40, #ffffff);
     background: var(--colorRoyal40, #886aea);
     border-color: transparent
@@ -116,8 +113,7 @@
 }
 
 /* Dark */
-.panel-dark>.panel-heading,
-.panel-dark>.panel-footer {
+.panel-dark>.panel-heading{
     color: var(--textColorDark40, #ffffff);
     background: var(--colorDark30, #828282);
     border-color: transparent

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

@@ -42,6 +42,8 @@
 }
 
 /* Primary */
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
 .k-dialog-buttongroup .k-button.k-primary,
 .k-button.k-primary,
 .btn.btn-primary {
@@ -50,6 +52,10 @@
     border: 1px solid var(--colorPrimary40, #1351b4);
 }
 
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover,
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:focus,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:focus,
 .k-dialog-buttongroup .k-button.k-primary:focus,
 .k-dialog-buttongroup .k-button.k-primary:hover,
 .k-button.k-primary:focus,
@@ -61,6 +67,10 @@
     border: 1px solid var(--colorPrimary40, #1351b4);
 }
 
+.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-dialog-buttongroup .k-button.k-primary.active,
 .k-dialog-buttongroup .k-button.k-primary:active,
 .k-button.k-primary.active,
@@ -161,4 +171,4 @@
     background: var(--colorDark30, #898989);
     border-color: transparent;
     color: var(--textColorDark40, #ffffff);
-}
+}

package/css/themes/custom/dsgov/custom-dsgov.css

@@ -17,7 +17,7 @@
 
     /* Font */
     --fontFamily: "Rawline", "Raleway", sans-serif;
-    --textColor: #383838;
+    --textColor: #333333;
     --backgroundColor: #ffffff;
 
     --textSmallSize: 14px;
@@ -27,13 +27,13 @@
     --textExtraBigSize: 34.84px;
     --textFullSize: 41.8px;
 
-    --textColor10: #d8d8d8;
+    --textColor10: #d7d7d7;
     --textColor20: #b2b2b2;
-    --textColor30: #858585;
-    --textColor40: #383838;
-    --textColor50: #313131;
-    --textColor60: #292929;
-    --textColor70: #1f1f1f;
+    --textColor30: #838383;
+    --textColor40: #333333;
+    --textColor50: #2d2d2d;
+    --textColor60: #252525;
+    --textColor70: #1c1c1c;
 
     /* Icon Size */
     --iconSizeDefault: 28px;
@@ -273,10 +273,11 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #1351b4);
     --btnDefault: var(--colorDefault40, #1351b4);
-    --btnPrimary: var(--colorPrimary40, #1351b4);
+    --btnPrimary: transparent;
     --btnSuccess: var(--colorSuccess40, #168821);
     --btnCalm: var(--colorCalm40, #3b448e);
     --btnWarning: var(--colorWarning40, #ffcd07);
@@ -297,6 +298,18 @@
     --textColorRoyal: var(--textColorRoyal40, #ffffff);
     --textColorDark: var(--textColorDark40, #ffffff);
 
+    --borderBtnLink: transparent;
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: var(--colorPrimary40, #1351b4);
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: transparent;
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #1351b4);
     --colorPrimary: var(--colorPrimary40, #1351b4);
@@ -321,6 +334,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, #1351b4);
     --comboboxPrimary: var(--colorPrimary40, #1351b4);
@@ -333,6 +357,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #444444);
 
+    --borderComboboxDefault: var(--colorDefault50, #11479e);
+    --borderComboboxPrimary: var(--colorPrimary50, #11479e);
+    --borderComboboxSuccess: var(--colorSuccess50, #13771d);
+    --borderComboboxCalm: var(--colorCalm50, #343c7c);
+    --borderComboboxWarning: var(--colorWarning50, #dfb306);
+    --borderComboboxDanger: var(--colorDanger50, #c91e06);
+    --borderComboboxLight: var(--colorLight50, #dfdfdf);
+    --borderComboboxStable: var(--colorStable50, #d9d9d9);
+    --borderComboboxRoyal: var(--colorRoyal50, #775dcd);
+    --borderComboboxDark: var(--colorDark50, #3c3c3c);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault40, #1351b4);
     --optionPrimary: var(--colorPrimary40, #1351b4);
@@ -345,6 +380,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(--colorDefault40, #1351b4);
     --panelPrimary: var(--colorPrimary40, #1351b4);
@@ -356,6 +402,19 @@
     --panelStable: var(--colorStable50, #d9d9d9);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark40, #444444);
+
+    --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 === */
 }
 
 body {
@@ -413,6 +472,7 @@ h5 {
 .h6,
 h6 {
     font-weight: 800;
+    font-size: calc(var(--textSmallSize, 14px) + 2.8px);
 }
 
 p,
@@ -748,20 +808,21 @@ a:hover {
 }
 
 .k-scheduler .k-scheduler-footer .k-scheduler-fullday {
-    border: 0;
-    background: var(--colorDefault40, #1351b4);
     border-radius: var(--borderRadiusFull, 99999px);
     padding: var(--distanceExtraSmall, 10px) var(--distanceMedium, 20px);
     cursor: pointer;
+    background: var(--colorPrimary40, #5665be);
+    border-color: var(--colorPrimary40, #5665be);
+    color: var(--textColorPrimary40, #ffffff);
 }
 
-.k-scheduler .k-scheduler-footer .k-scheduler-fullday:hover {
-    background: var(--colorDefault30, #7c8ec8);
+.k-scheduler div.k-scheduler-footer ul li:hover a{
+    background: var(--colorPrimary50, #37479e);
 }
 
+.k-scheduler .k-scheduler-footer .k-scheduler-fullday span,
 .k-scheduler .k-scheduler-footer .k-scheduler-fullday a {
-    color: var(--colorNeutral00, #FFFFFF);
-    padding: 0;
+    color: var(--textColorPrimary40, #ffffff);
 }
 
 .k-scheduler .k-nav-prev a>span,

package/css/themes/custom/dsgov/form-dsgov.css

@@ -1,5 +1,4 @@
 /* Forms - General */
-.form-control,
 .form-control.k-textbox,
 .input-group .form-control:last-child,
 .k-textbox,
@@ -23,7 +22,7 @@ textarea.k-textbox,
     position: initial;
 }
 
-.form-control,
+
 .form-control.k-textbox,
 .input-group .form-control:last-child,
 .k-textbox,
@@ -207,6 +206,7 @@ textarea.k-textbox,
 .k-multiselect .k-multiselect-wrap.k-floatwrap,
 .k-multiselect.k-state-focused .k-multiselect-wrap {
     border-radius: var(--borderRadiusSmallest, 5px);
+    border-color: var(--textColor60, #292929);
 }
 
 .k-multiselect .k-multiselect-wrap input {

package/css/themes/custom/flatly/custom-flatly.css

@@ -266,6 +266,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorSuccess40, #18bc9c);
     --btnDefault: var(--colorDefault40, #798d8f);
@@ -279,6 +280,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #7b8a8b);
 
+    --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, #798d8f);
     --colorPrimary: var(--colorPrimary40, #2c3e50);
@@ -303,6 +327,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #7b8a8b);
 
+    --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, #798d8f);
     --comboboxPrimary: var(--colorPrimary40, #2c3e50);
@@ -315,6 +350,17 @@
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #7b8a8b);
 
+    --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, #798d8f);
     --optionPrimary: var(--colorPrimary40, #2c3e50);
@@ -327,6 +373,17 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark40, #7b8a8b);
 
+    --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, #2c3e50);
     --panelPrimary: var(--colorDefault10, #dfe3e3);
@@ -338,6 +395,19 @@
     --panelStable: var(--colorStable50, #d9d9d9);
     --panelRoyal: var(--colorRoyal40, #886aea);
     --panelDark: var(--colorDark40, #7b8a8b);
+
+    --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 === */
 }
 
 .h1,

package/css/themes/custom/flatly/panel-flatly.css

@@ -10,29 +10,27 @@
 
 /* Default */
 .panel-default .panel-heading {
-    color: var(--textColorPrimary40, #ffffff);
-    background: var(--colorPrimary40, #2c3e50);
-    border-color: var(--colorPrimary40, #2c3e50);
+color: var(--textColor40, #2c3e50);
+background: var(--colorDefault10, #dfe3e3);
+border-color: var(--colorDefault10, #dfe3e3);
 }
 
 .panel-default {
-    border-color: var(--colorPrimary40, #2c3e50);
+    border-color: var(--colorDefault10, #dfe3e3);
 }
 
 /* Primary */
-
 .panel-primary>.panel-heading {
-    color: var(--textColor40, #2c3e50);
-    background: var(--colorDefault10, #dfe3e3);
-    border-color: var(--colorDefault10, #dfe3e3);
+color: var(--textColorPrimary40, #ffffff);
+background: var(--colorPrimary40, #2c3e50);
+border-color: var(--colorPrimary40, #2c3e50);
 }
 
 .panel-primary {
-    border-color: var(--colorDefault10, #dfe3e3);
+    border-color: var(--colorPrimary40, #2c3e50);
 }
 
 /* Sucess */
-
 .panel-success>.panel-heading {
     color: var(--textColorSuccess40, #ffffff);
     background: var(--colorSuccess40, #18bc9c);
@@ -88,8 +86,7 @@
 }
 
 /* Stable */
-.panel-stable>.panel-heading,
-.panel-stable>.panel-footer {
+.panel-stable>.panel-heading{
     color: var(--textColorStable40, #444444);
     background: var(--colorStable50, #d9d9d9);
     border-color: transparent
@@ -100,8 +97,7 @@
 }
 
 /* Royal */
-.panel-royal>.panel-heading,
-.panel-royal>.panel-footer {
+.panel-royal>.panel-heading{
     color: var(--textColorRoyal40, #ffffff);
     background: var(--colorRoyal40, #886aea);
     border-color: transparent
@@ -112,8 +108,7 @@
 }
 
 /* Dark */
-.panel-dark>.panel-heading,
-.panel-dark>.panel-footer {
+.panel-dark>.panel-heading{
     color: var(--textColorDark40, #ffffff);
     background: var(--colorDark40, #7b8a8b);
     border-color: transparent