cronapp-framework-mobile-js 2.9.1 → 2.9.2-SP.2

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

@@ -262,18 +262,43 @@
     --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(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #444444);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault40, #f5f5f5);
+    --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);
@@ -299,6 +324,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: var(--colorDefault40, #f5f5f5);
+    --borderCheckboxPrimary: var(--colorPrimary40, #2fa4e7);
+    --borderCheckboxSuccess: var(--colorSuccess40, #73a839);
+    --borderCheckboxCalm: var(--colorCalm40, #033c73);
+    --borderCheckboxWarning: var(--colorWarning40, #dd5600);
+    --borderCheckboxDanger: var(--colorDanger40, #ce3a36);
+    --borderCheckboxLight: var(--colorLight40, #ffffff);
+    --borderCheckboxStable: var(--colorStable40, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark40, #444444);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #f5f5f5);
     --togglePrimary: var(--colorPrimary40, #2fa4e7);
@@ -311,28 +347,50 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #444444);
 
+    --borderToggleDefault: var(--colorDefault40, #f5f5f5);
+    --borderTogglePrimary: var(--colorPrimary40, #2fa4e7);
+    --borderToggleSuccess: var(--colorSuccess40, #73a839);
+    --borderToggleCalm: var(--colorCalm40, #033c73);
+    --borderToggleWarning: var(--colorWarning40, #dd5600);
+    --borderToggleDanger: var(--colorDanger40, #a82c2c);
+    --borderToggleLight: var(--colorLight50, #dfdfdf);
+    --borderToggleStable: var(--colorStable50, #d9d9d9);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark40, #444444);
+
     /* Components - Tabs - crn-ion-segment */
-    --bgDefault: var(--colorDefault40, #f5f5f5);
-    --bgPrimary: var(--colorPrimary40, #2fa4e7);
-    --bgSuccess: var(--colorSuccess40, #73a839);
-    --bgCalm: var(--colorCalm40, #033c73);
-    --bgWarning: var(--colorWarning40, #dd5600);
-    --bgDanger: var(--colorDanger40, #c71c22);
-    --bgLight: var(--colorLight40, #ffffff);
-    --bgStable: var(--colorStable40, #f8f8f8);
-    --bgRoyal: var(--colorRoyal40, #886aea);
-    --bgDark: var(--colorDark40, #444444);
-
-    --activeBackgroundDefault: var(--colorDefault40, #f5f5f5);
-    --activeBackgroundPrimary: var(--colorPrimary40, #2fa4e7);
-    --activeBackgroundSuccess: var(--colorSuccess40, #73a839);
-    --activeBackgroundCalm: var(--colorCalm40, #033c73);
-    --activeBackgroundWarning: var(--colorWarning40, #dd5600);
-    --activeBackgroundDanger: var(--colorDanger40, #c71c22);
-    --activeBackgroundLight: var(--colorLight40, #ffffff);
-    --activeBackgroundStable: var(--colorStable40, #f8f8f8);
-    --activeBackgroundRoyal: var(--colorRoyal40, #886aea);
-    --activeBackgroundDark: var(--colorDark40, #444444);
+    --bgDefault: var(--colorDefault10, #fcfcfc);
+    --bgPrimary: var(--colorPrimary10, #d7e7f8);
+    --bgSuccess: var(--colorSuccess10, #dee8d8);
+    --bgCalm: var(--colorCalm10, #d5d8de);
+    --bgWarning: var(--colorWarning10, #f5dad5);
+    --bgDanger: var(--colorDanger10, #f0d6d6);
+    --bgLight: var(--colorLight10, #ffffff);
+    --bgStable: var(--colorStable10, #fdfdfd);
+    --bgRoyal: var(--colorRoyal10, #e2ddf9);
+    --bgDark: var(--colorDark10, #d9d9d9);
+
+    --borderActiveBackgroundDefault: var(--colorDefault40, #f5f5f5);
+    --borderActiveBackgroundPrimary: var(--colorPrimary40, #2fa4e7);
+    --borderActiveBackgroundSuccess: var(--colorSuccess40, #73a839);
+    --borderActiveBackgroundCalm: var(--colorCalm40, #033c73);
+    --borderActiveBackgroundWarning: var(--colorWarning40, #dd5600);
+    --borderActiveBackgroundDanger: var(--colorDanger50, #ae191e);
+    --borderActiveBackgroundLight: var(--colorLight40, #ffffff);
+    --borderActiveBackgroundStable: var(--colorStable40, #f8f8f8);
+    --borderActiveBackgroundRoyal: var(--colorRoyal40, #886aea);
+    --borderActiveBackgroundDark: var(--colorDark40, #444444);
+
+    --activeBackgroundDefault: linear-gradient(var(--colorDefault30, #f7f7f7), var(--colorDefault40, #f5f5f5));
+    --activeBackgroundPrimary: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary40, #2fa4e7));
+    --activeBackgroundSuccess: linear-gradient(var(--colorSuccess30, #9fc085), var(--colorSuccess40, #73a839));
+    --activeBackgroundCalm: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm40, #033c73));
+    --activeBackgroundWarning: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning40, #dd5600));
+    --activeBackgroundDanger: linear-gradient(var(--colorDanger40, #ef473a), var(--colorDanger50, #ae191e));
+    --activeBackgroundLight: linear-gradient(var(--colorLight30, #ffffff), var(--colorLight40, #ffffff));
+    --activeBackgroundStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8));
+    --activeBackgroundRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea));
+    --activeBackgroundDark: linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444));
 
     --ionSegmentDefault: var(--textColorDefault40, #444444);
     --ionSegmentPrimary: var(--textColorPrimary40, #ffffff);
@@ -345,16 +403,16 @@
     --ionSegmentRoyal: var(--textColorRoyal40, #ffffff);
     --ionSegmentDark: var(--textColorDark40, #ffffff);
 
-    --iconThemeLightDefault: var(--textColorDefault40, #444444);
-    --iconThemeLightPrimary: var(--textColorPrimary40, #ffffff);
-    --iconThemeLightSuccess: var(--textColorSuccess40, #ffffff);
-    --iconThemeLightCalm: var(--textColorCalm40, #ffffff);
-    --iconThemeLightWarning: var(--textColorWarning40, #ffffff);
-    --iconThemeLightDanger: var(--textColorDanger40, #ffffff);
-    --iconThemeLightLight: var(--textColorLight30, #3c3c3c);
+    --iconThemeLightDefault: var(--colorDefault40, #f5f5f5);
+    --iconThemeLightPrimary: var(--colorPrimary40, #2fa4e7);
+    --iconThemeLightSuccess: var(--colorSuccess40, #73a839);
+    --iconThemeLightCalm: var(--colorCalm40, #033c73);
+    --iconThemeLightWarning: var(--colorWarning40, #dd5600);
+    --iconThemeLightDanger: var(--colorDanger40, #ffffff);
+    --iconThemeLightLight: var(--textColorLight40, #3c3c3c);
     --iconThemeLightStable: var(--textColorStable40, #444444);
-    --iconThemeLightRoyal: var(--textColorRoyal40, #ffffff);
-    --iconThemeLightDark: var(--textColorDark40, #ffffff);
+    --iconThemeLightRoyal: var(--colorRoyal40, #886aea);
+    --iconThemeLightDark: var(--colorDark40, #444444);
 
     /* Components - Old Tabs - pallete false */
     --tabsDefault: var(--colorDefault40, #f5f5f5);
@@ -369,31 +427,31 @@
     --tabsDark: var(--colorDark40, #444444);
 
     /* Components - Header */
-    --barDefault: var(--colorDefault70, #2ca4a8);
-    --barPrimary: var(--colorPrimary40, #2fa4e7);
-    --barSuccess: var(--colorSuccess40, #73a839);
-    --barCalm: var(--colorCalm40, #033c73);
-    --barWarning: var(--colorWarning40, #dd5600);
-    --barDanger: var(--colorDanger40, #c71c22);
-    --barLight: var(--colorLight40, #ffffff);
-    --barStable: var(--colorStable40, #f8f8f8);
-    --barRoyal: var(--colorRoyal40, #886aea);
-    --barDark: var(--colorDark40, #444444);
+    --barPrimary: linear-gradient(var(--colorDefault10, #fcfcfc), var(--colorDefault10, #fcfcfc) 60%, var(--colorDefault40, #f5f5f5));
+    --barDefault: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary40, #2fa4e7) 60%, var(--colorPrimary50, #3c6088));
+    --barSuccess: linear-gradient(var(--colorSuccess30, #9fc085), var(--colorSuccess40, #73a839) 60%, var(--colorSuccess50, #359e1d));
+    --barCalm: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm40, #033c73) 60%, var(--colorCalm50, #033565));
+    --barWarning: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning40, #dd5600) 60%, var(--colorWarning50, #c24b00));
+    --barDanger: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger40, #c71c22) 60%, var(--colorDanger50, #ae191e));
+    --barLight: linear-gradient(var(--colorLight30, #ffffff), var(--colorLight40, #ffffff) 60%, var(--colorLight50, #dfdfdf));
+    --barStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
+    --barRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
+    --barDark: linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444) 60%, var(--colorDark50, #3c3c3c));
 
     /* Componentes - Footer with icon */
-    --backgroundDefault: var(--colorDefault10, #d6d6d6);
-    --backgroundPrimary: var(--colorPrimary40, #2fa4e7);
-    --backgroundSuccess: var(--colorSuccess40, #73a839);
-    --backgroundCalm: var(--colorCalm40, #033c73);
-    --backgroundWarning: var(--colorWarning40, #dd5600);
-    --backgroundDanger: var(--colorDanger40, #c71c22);
-    --backgroundLight: var(--colorLight40, #ffffff);
-    --backgroundStable: var(--colorStable40, #f8f8f8);
-    --backgroundRoyal: var(--colorRoyal40, #886aea);
-    --backgroundDark: var(--colorDark40, #444444);
-
-    --tabsIconDefault: var(--textColorDefault40, #444444);
-    --tabsIconPrimary: var(--textColorPrimary40, #ffffff);
+    --backgroundPrimary: linear-gradient(var(--colorDefault10, #fcfcfc), var(--colorDefault10, #fcfcfc) 60%, var(--colorDefault40, #f5f5f5));
+    --backgroundDefault: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary40, #2fa4e7) 60%, var(--colorPrimary50, #3c6088));
+    --backgroundSuccess: linear-gradient(var(--colorSuccess30, #9fc085), var(--colorSuccess40, #73a839) 60%, var(--colorSuccess50, #359e1d));
+    --backgroundCalm: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm40, #033c73) 60%, var(--colorCalm50, #033565));
+    --backgroundWarning: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning40, #dd5600) 60%, var(--colorWarning50, #c24b00));
+    --backgroundDanger: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger40, #c71c22) 60%, var(--colorDanger50, #ae191e));
+    --backgroundLight: linear-gradient(var(--colorLight30, #ffffff), var(--colorLight40, #ffffff) 60%, var(--colorLight50, #dfdfdf));
+    --backgroundStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
+    --backgroundRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
+    --backgroundDark: linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444) 60%, var(--colorDark50, #3c3c3c));
+
+    --tabsIconPrimary: var(--textColorDefault40, #444444);
+    --tabsIconDefault: var(--textColorPrimary40, #ffffff);
     --tabsIconSuccess: var(--textColorSuccess40, #ffffff);
     --tabsIconCalm: var(--textColorCalm40, #ffffff);
     --tabsIconWarning: var(--textColorWarning40, #ffffff);
@@ -402,6 +460,8 @@
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #ffffff);
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 h1,

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

@@ -255,6 +255,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #2780e3);
     --btnDefault: var(--colorDefault40, #222222);
@@ -268,6 +269,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #444444);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorDefault40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #333333);
+    --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);
@@ -292,6 +316,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 - Toggle */
     --toggleDefault: var(--colorDefault40, #222222);
     --togglePrimary: var(--colorPrimary40, #2780e3);
@@ -304,6 +339,17 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #444444);
 
+    --borderToggleDefault: transparent;
+    --borderTogglePrimary: transparent;
+    --borderToggleSuccess: transparent;
+    --borderToggleCalm: transparent;
+    --borderToggleWarning: transparent;
+    --borderToggleDanger: transparent;
+    --borderToggleLight: transparent;
+    --borderToggleStable: transparent;
+    --borderToggleRoyal: transparent;
+    --borderToggleDark: transparent;
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #222222);
     --bgPrimary: var(--colorPrimary40, #2780e3);
@@ -316,6 +362,17 @@
     --bgRoyal: var(--colorRoyal40, #886aea);
     --bgDark: var(--colorDark40, #444444);
 
+    --borderActiveBackgroundDefault: transparent;
+    --borderActiveBackgroundPrimary: transparent;
+    --borderActiveBackgroundSuccess: transparent;
+    --borderActiveBackgroundCalm: transparent;
+    --borderActiveBackgroundWarning: transparent;
+    --borderActiveBackgroundDanger: transparent;
+    --borderActiveBackgroundLight: transparent;
+    --borderActiveBackgroundStable: transparent;
+    --borderActiveBackgroundRoyal: transparent;
+    --borderActiveBackgroundDark: transparent;
+
     --activeBackgroundDefault: var(--colorDefault40, #222222);
     --activeBackgroundPrimary: var(--colorPrimary40, #2780e3);
     --activeBackgroundSuccess: var(--colorSuccess40, #3fb618);
@@ -395,6 +452,8 @@
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #ffffff);
+
+    /* End - Variables used exclusively in the color palette property */
 }
 
 a,

package/css/themes/custom/cyborg/custom-cyborg.css

@@ -258,6 +258,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #2a9fd6);
     --btnDefault: var(--colorDefault40, #555555);
@@ -271,6 +272,29 @@
     --btnRoyal: var(--colorRoyal40, #9933cc);
     --btnDark: var(--colorDark40, #adafae);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorDefault40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #333333);
+    --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(--colorDefault50, #4a4a4a);
     --colorPrimary: var(--colorPrimary40, #2a9fd6);
@@ -295,6 +319,17 @@
     --checkboxRoyal: var(--colorRoyal40, #9933cc);
     --checkboxDark: var(--colorDark40, #adafae);
 
+    --borderCheckboxDefault: transparent;
+    --borderCheckboxPrimary: transparent;
+    --borderCheckboxSuccess: transparent;
+    --borderCheckboxCalm: transparent;
+    --borderCheckboxWarning: transparent;
+    --borderCheckboxDanger: transparent;
+    --borderCheckboxLight: transparent;
+    --borderCheckboxStable: transparent;
+    --borderCheckboxRoyal: transparent;
+    --borderCheckboxDark: transparent;
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #555555);
     --togglePrimary: var(--colorPrimary40, #2a9fd6);
@@ -307,6 +342,17 @@
     --toggleRoyal: var(--colorRoyal40, #9933cc);
     --toggleDark: var(--colorDark40, #adafae);
 
+    --borderToggleDefault: transparent;
+    --borderTogglePrimary: transparent;
+    --borderToggleSuccess: transparent;
+    --borderToggleCalm: transparent;
+    --borderToggleWarning: transparent;
+    --borderToggleDanger: transparent;
+    --borderToggleLight: transparent;
+    --borderToggleStable: transparent;
+    --borderToggleRoyal: transparent;
+    --borderToggleDark: transparent;
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #555555);
     --bgPrimary: var(--colorPrimary40, #2a9fd6);
@@ -319,6 +365,17 @@
     --bgRoyal: var(--colorRoyal40, #9933cc);
     --bgDark: var(--colorDark40, #adafae);
 
+    --borderActiveBackgroundDefault: transparent;
+    --borderActiveBackgroundPrimary: transparent;
+    --borderActiveBackgroundSuccess: transparent;
+    --borderActiveBackgroundCalm: transparent;
+    --borderActiveBackgroundWarning: transparent;
+    --borderActiveBackgroundDanger: transparent;
+    --borderActiveBackgroundLight: transparent;
+    --borderActiveBackgroundStable: transparent;
+    --borderActiveBackgroundRoyal: transparent;
+    --borderActiveBackgroundDark: transparent;
+
     --activeBackgroundDefault: var(--colorDefault40, #555555);
     --activeBackgroundPrimary: var(--colorPrimary40, #2a9fd6);
     --activeBackgroundSuccess: var(--colorSuccess40, #3fb618);
@@ -398,6 +455,8 @@
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #000000);
+
+    /* End - Variables used exclusively in the color palette property */
 }
 
 h1,

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

@@ -258,6 +258,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorSuccess40, #00bc8c);
     --btnDefault: var(--colorDefault40, #444444);
@@ -271,6 +272,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #303030);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorDefault40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #333333);
+    --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);
@@ -295,6 +319,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #828282);
 
+    --borderCheckboxDefault: transparent;
+    --borderCheckboxPrimary: transparent;
+    --borderCheckboxSuccess: transparent;
+    --borderCheckboxCalm: transparent;
+    --borderCheckboxWarning: transparent;
+    --borderCheckboxDanger: transparent;
+    --borderCheckboxLight: transparent;
+    --borderCheckboxStable: transparent;
+    --borderCheckboxRoyal: transparent;
+    --borderCheckboxDark: transparent;
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #3c3c3c);
     --togglePrimary: var(--colorPrimary40, #375a7f);
@@ -307,6 +342,17 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #444444);
 
+    --borderToggleDefault: transparent;
+    --borderTogglePrimary: transparent;
+    --borderToggleSuccess: transparent;
+    --borderToggleCalm: transparent;
+    --borderToggleWarning: transparent;
+    --borderToggleDanger: transparent;
+    --borderToggleLight: transparent;
+    --borderToggleStable: transparent;
+    --borderToggleRoyal: transparent;
+    --borderToggleDark: transparent;
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #3c3c3c);
     --bgPrimary: var(--colorPrimary40, #375a7f);
@@ -319,6 +365,17 @@
     --bgRoyal: var(--colorRoyal40, #886aea);
     --bgDark: var(--colorDark40, #444444);
 
+    --borderActiveBackgroundDefault: transparent;
+    --borderActiveBackgroundPrimary: transparent;
+    --borderActiveBackgroundSuccess: transparent;
+    --borderActiveBackgroundCalm: transparent;
+    --borderActiveBackgroundWarning: transparent;
+    --borderActiveBackgroundDanger: transparent;
+    --borderActiveBackgroundLight: transparent;
+    --borderActiveBackgroundStable: transparent;
+    --borderActiveBackgroundRoyal: transparent;
+    --borderActiveBackgroundDark: transparent;
+
     --activeBackgroundDefault: var(--colorDefault40, #3c3c3c);
     --activeBackgroundPrimary: var(--colorPrimary40, #375a7f);
     --activeBackgroundSuccess: var(--colorSuccess40, #00bc8c);
@@ -365,8 +422,8 @@
     --tabsDark: var(--colorDark40, #444444);
 
     /* Components - Header */
-    --barDefault: var(--colorDefault40, #3c3c3c);
-    --barPrimary: var(--colorPrimary40, #375a7f);
+    --barDefault: var(--colorPrimary40, #375a7f);
+    --barPrimary: var(--colorDefault40, #3c3c3c);
     --barSuccess: var(--colorSuccess40, #00bc8c);
     --barCalm: var(--colorCalm40, #3498db);
     --barWarning: var(--colorWarning40, #f39c12);
@@ -398,6 +455,8 @@
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #ffffff);
+
+    /* End - Variables used exclusively in the color palette property */
 }
 
 .h1,
@@ -435,20 +494,6 @@ a.dark,
     color: var(--colorDark30, #828282);
 }
 
-/* Cabeçalho */
-.bar.bar-default {
-    border-color: var(--colorPrimary40, #375a7f);
-    background: var(--colorPrimary40, #375a7f);
-    color: var(--textColorPrimary40, #ffffff);
-}
-
-.bar.bar-default .button .icon,
-.bar.bar-default .button i,
-.bar.bar-default .button span,
-.bar.bar-default .title {
-    color: var(--textColorPrimary40, #ffffff);
-}
-
 /* Menu */
 .menu-view {
     background: var(--colorPrimary40, #375a7f);
@@ -462,13 +507,39 @@ a.dark,
     border-color: var(--textColorPrimary40, #ffffff);
 }
 
-/* Rodapé */
+/* Cabeçalho e rodapé */
 .bar.bar-default.bar-footer .button.button-default {
     border-color: var(--colorPrimary20, #b1b3b7);
     background: var(--colorPrimary40, #375a7f);
     color: var(--textColorPrimary40, #ffffff);
 }
 
+.bar.bar-default ,
+.bar.bar-default.bar-footer {
+    border-color: var(--colorPrimary40, #387ef5);
+    background: var(--colorPrimary40, #387ef5);
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.bar.bar-default .button .icon,
+.bar.bar-default .button i,
+.bar.bar-default .button span,
+.bar.bar-default .title {
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.bar.bar-positive.bar-footer,
+.bar.bar-positive {
+    border-color: var(--colorDefault40, #3b448e);
+    background: var(--colorDefault40, #3b448e);
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.bar.bar-positive .button .icon,
+.bar.bar-positive .title {
+    color: var(--textColorDefault40, #ffffff);
+}
+
 /* Login */
 .login-bg {
     background: var(--backgroundLogin40, #222222);