cronapp-framework-mobile-js 2.9.2 → 2.9.3-SP.1

package/css/themes/custom/simplex/custom-simplex.css

@@ -258,18 +258,42 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #d9230f);
-    --btnDefault: var(--colorDefault40, #474949);
-    --btnPrimary: var(--colorPrimary40, #d9230f);
-    --btnSuccess: var(--colorSuccess40, #469408);
-    --btnCalm: var(--colorCalm40, #029acf);
-    --btnWarning: var(--colorWarning40, #9b479f);
-    --btnDanger: var(--colorDanger40, #d9831f);
-    --btnLight: var(--colorLight40, #ffffff);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #373a3c);
+    --btnDefault: linear-gradient(var(--colorDefault40, #474949), var(--colorDefault40, #474949) 6%, var(--colorDefault50, #3e4040));
+    --btnPrimary: linear-gradient(var(--colorPrimary40, #d9230f), var(--colorPrimary40, #d9230f), var(--colorPrimary50, #be1f0d));
+    --btnSuccess: linear-gradient(var(--colorSuccess40, #469408), var(--colorSuccess40, #469408), var(--colorSuccess50, #3d8207));
+    --btnCalm: linear-gradient(var(--colorCalm40, #029acf), var(--colorCalm40, #029acf), var(--colorCalm50, #0287b5));
+    --btnWarning: linear-gradient(var(--colorWarning40, #9b479f), var(--colorWarning40, #9b479f), var(--colorWarning50, #883e8b));
+    --btnDanger: linear-gradient(var(--colorDanger40, #d9831f), var(--colorDanger40, #d9831f), var(--colorDanger50, #be731b));
+    --btnLight: linear-gradient(var(--colorLight30, #ffffff), var(--colorLight40, #ffffff) 6%, var(--colorLight50, #dfdfdf));
+    --btnStable: linear-gradient(var(--colorStable40, #f8f8f8), var(--colorStable40, #f8f8f8), var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal40, #9b479f), var(--colorRoyal40, #9b479f), var(--colorRoyal50, #883e8b));
+    --btnDark: linear-gradient(var(--colorDark40, #373a3c), var(--colorDark40, #373a3c), var(--colorDark50, #303335));
+
+    --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: var(--colorDefault50, #3e4040);
+    --borderBtnPrimary: var(--colorPrimary50, #be1f0d);
+    --borderBtnSuccess: var(--colorSuccess40, #469408);
+    --borderBtnCalm: var(--colorCalm40, #029acf);
+    --borderBtnWarning: var(--colorWarning40, #9b479f);
+    --borderBtnDanger: var(--colorDanger50, #be731b);
+    --borderBtnLight: var(--colorLight50, #dfdfdf);
+    --borderBtnStable: var(--colorStable40, #f8f8f8);
+    --borderBtnRoyal: var(--colorRoyal40, #886aea);
+    --borderBtnDark: var(--colorDark40, #373a3c);
 
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #474949);
@@ -295,6 +319,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #373a3c);
 
+    --borderCheckboxDefault: transparent;
+    --borderCheckboxPrimary: transparent;
+    --borderCheckboxSuccess: transparent;
+    --borderCheckboxCalm: transparent;
+    --borderCheckboxWarning: transparent;
+    --borderCheckboxDanger: transparent;
+    --borderCheckboxLight: transparent;
+    --borderCheckboxStable: transparent;
+    --borderCheckboxRoyal: transparent;
+    --borderCheckboxDark: transparent;
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault50, #3e4040);
     --togglePrimary: var(--colorPrimary40, #d9230f);
@@ -307,17 +342,38 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #373a3c);
 
+    --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, #3e3f3a);
-    --bgPrimary: var(--colorPrimary40, #d9230f);
-    --bgSuccess: var(--colorSuccess40, #469408);
-    --bgCalm: var(--colorCalm40, #029acf);
-    --bgWarning: var(--colorWarning40, #9b479f);
-    --bgDanger: var(--colorDanger40, #d9831f);
-    --bgLight: var(--colorLight50, #dfdfdf);
-    --bgStable: var(--colorStable40, #f8f8f8);
-    --bgRoyal: var(--colorRoyal40, #886aea);
-    --bgDark: var(--colorDark40, #373a3c);
+    --bgDefault: linear-gradient(var(--colorDefault40, #474949), var(--colorDefault40, #474949) 6%, var(--colorDefault50, #3e4040));
+    --bgPrimary: linear-gradient(var(--colorPrimary40, #d9230f), var(--colorPrimary40, #d9230f), var(--colorPrimary50, #be1f0d));
+    --bgSuccess: linear-gradient(var(--colorSuccess40, #469408), var(--colorSuccess40, #469408), var(--colorSuccess50, #3d8207));
+    --bgCalm: linear-gradient(var(--colorCalm40, #029acf), var(--colorCalm40, #029acf), var(--colorCalm50, #0287b5));
+    --bgWarning: linear-gradient(var(--colorWarning40, #9b479f), var(--colorWarning40, #9b479f), var(--colorWarning50, #883e8b));
+    --bgDanger: linear-gradient(var(--colorDanger40, #d9831f), var(--colorDanger40, #d9831f), var(--colorDanger50, #be731b));
+    --bgLight: linear-gradient(var(--colorLight30, #ffffff), var(--colorLight40, #ffffff) 6%, var(--colorLight50, #dfdfdf));
+    --bgStable: linear-gradient(var(--colorStable40, #f8f8f8), var(--colorStable40, #f8f8f8), var(--colorStable50, #d9d9d9));
+    --bgRoyal: linear-gradient(var(--colorRoyal40, #886aea), var(--colorRoyal40, #886aea), var(--colorRoyal50, #883e8b));
+    --bgDark: linear-gradient(var(--colorDark40, #373a3c), var(--colorDark40, #373a3c), var(--colorDark50, #303335));
+
+    --borderActiveBackgroundDefault: var(--colorDefault50, #3e4040);
+    --borderActiveBackgroundPrimary: var(--colorPrimary50, #be1f0d);
+    --borderActiveBackgroundSuccess: var(--colorSuccess40, #469408);
+    --borderActiveBackgroundCalm: var(--colorCalm40, #029acf);
+    --borderActiveBackgroundWarning: var(--colorWarning40, #9b479f);
+    --borderActiveBackgroundDanger: var(--colorDanger50, #be731b);
+    --borderActiveBackgroundLight: var(--colorLight50, #dfdfdf);
+    --borderActiveBackgroundStable: var(--colorStable40, #f8f8f8);
+    --borderActiveBackgroundRoyal: var(--colorRoyal40, #886aea);
+    --borderActiveBackgroundDark: var(--colorDark40, #373a3c);
 
     --activeBackgroundDefault: var(--colorDefault40, #3e3f3a);
     --activeBackgroundPrimary: var(--colorPrimary40, #d9230f);
@@ -398,6 +454,8 @@
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #ffffff);
+
+    /* End - Variables used exclusively in the color palette property */
 }
 
 

package/css/themes/custom/slate/crn-ion-segment-slate.css

@@ -1,8 +1,8 @@
 /* background-color-active */
 div.crn-ion-segment-classic ul.active-background-default li.active,
 div.crn-ion-segment-modern ul.active-background-default li.active {
-    background: linear-gradient(var(--colorDefault30, #e27f7c), var(--colorDefault40, #d9230f));
-    border-color: var(--colorDefault40, #d9230f);
+    background: linear-gradient(var(--colorDefault40, #3a3f44), var(--colorDefault40, #3a3f44), var(--colorDefault50, #33373c));
+    border-color: var(--colorDefault40, #3a3f44);
 }
 
 div.crn-ion-segment-classic ul.active-background-assertive li.active,
@@ -43,8 +43,8 @@ div.crn-ion-segment-modern ul.active-background-calm li.active {
 
 div.crn-ion-segment-classic ul.active-background-positive li.active,
 div.crn-ion-segment-modern ul.active-background-positive li.active {
-    background: linear-gradient(var(--colorDefault30, #82bded), var(--colorDefault40, #3b448e));
-    border-color: var(--colorDefault40, #3b448e);
+    background: linear-gradient(var(--colorPrimary50, #6b7277), var(--colorPrimary50, #6b7277), var(--colorPrimary60, #595f64));
+    border-color: var(--colorPrimary60, #595f64);
 }
 
 div.crn-ion-segment-classic ul.active-background-royal li.active,

package/css/themes/custom/slate/custom-slate.css

@@ -259,17 +259,40 @@
     --colorNeutral220: #000000;
 
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #7a8288);
-    --btnDefault: var(--colorDefault40, #3a3f44);
-    --btnPrimary: var(--colorPrimary40, #7a8288);
-    --btnSuccess: var(--colorSuccess40, #62c462);
-    --btnCalm: var(--colorCalm40, #5bc0de);
-    --btnWarning: var(--colorWarning40, #f89406);
-    --btnDanger: var(--colorDanger40, #ee5f5b);
-    --btnLight: var(--colorLight40, #e9ecef);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #272b30);
+    --btnLink: var(--textColorDefault40, #ffffff);
+    --btnDefault: linear-gradient(var(--colorDefault40, #3a3f44), var(--colorDefault40, #3a3f44) 60%, var(--colorDefault50, #33373c));
+    --btnPrimary: linear-gradient(var(--colorPrimary60, #595f64), var(--colorPrimary60, #595f64) 40%, var(--colorPrimary50, #6b7277));
+    --btnSuccess: linear-gradient(var(--colorSuccess40, #62c462), var(--colorSuccess40, #62c462) 60%, var(--colorSuccess50, #56ac56));
+    --btnCalm: linear-gradient(var(--colorCalm40, #5bc0de), var(--colorCalm40, #5bc0de) 60%, var(--colorCalm50, #50a8c2));
+    --btnWarning: linear-gradient(var(--colorWarning40, #f89406), var(--colorWarning40, #f89406) 60%, var(--colorWarning50, #d98205));
+    --btnDanger: linear-gradient(var(--colorDanger40, #ee5f5b), var(--colorDanger40, #ee5f5b) 60%, var(--colorDanger50, #d05350));
+    --btnLight: linear-gradient(var(--colorLight40, #e9ecef), var(--colorLight40, #e9ecef) 60%, var(--colorLight50, #cccfd1));
+    --btnStable: linear-gradient(var(--colorStable40, #f8f8f8), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal40, #886aea), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
+    --btnDark: linear-gradient(var(--colorDark40, #272b30), var(--colorDark40, #272b30) 60%, var(--colorDark50, #22262a));
+
+    --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: var(--colorDefault70, #202325);
+    --borderBtnPrimary: var(--colorPrimary70, #43474a);
+    --borderBtnSuccess: var(--colorSuccess70, #366b36);
+    --borderBtnCalm: var(--colorCalm70, #32697a);
+    --borderBtnWarning: var(--colorWarning70, #885103);
+    --borderBtnDanger: var(--colorDanger70, #823432);
+    --borderBtnLight: var(--colorLight70, #808183);
+    --borderBtnStable: var(--colorStable70, #888888);
+    --borderBtnRoyal: var(--colorRoyal70, #4a3a80);
+    --borderBtnDark: var(--colorDark70, #15181a);
 
     /* Components - Text color */
     --colorDefault: var(--colorDefault30, #858789);
@@ -295,6 +318,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark30, #808182);
 
+    --borderCheckboxDefault: var(--colorDefault40, #858789);
+    --borderCheckboxPrimary: var(--colorPrimary40, #7a8288);
+    --borderCheckboxSuccess: var(--colorSuccess40, #62c462);
+    --borderCheckboxCalm: var(--colorCalm40, #5bc0de);
+    --borderCheckboxWarning: var(--colorWarning40, #f89406);
+    --borderCheckboxDanger: var(--colorDanger40, #ee5f5b);
+    --borderCheckboxLight: var(--colorLight40, #e9ecef);
+    --borderCheckboxStable: var(--colorStable40, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark30, #808182);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault50, #F1F1F1);
     --togglePrimary: var(--colorPrimary40, #7a8288);
@@ -306,6 +340,17 @@
     --toggleStable: var(--colorStable50, #d9d9d9);
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark30, #808182);
+    
+    --borderToggleDefault: var(--colorDefault50, #F1F1F1);
+    --borderTogglePrimary: var(--colorPrimary40, #7a8288);
+    --borderToggleSuccess: var(--colorSuccess40, #62c462);
+    --borderToggleCalm: var(--colorCalm40, #5bc0de);
+    --borderToggleWarning: var(--colorWarning40, #f89406);
+    --borderToggleDanger: var(--colorDanger40, #ee5f5b);
+    --borderToggleLight: var(--colorLight50, #cccfd1);
+    --borderToggleStable: var(--colorStable50, #d9d9d9);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark30, #808182);
 
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #3e3f3a);

package/css/themes/custom/spacelab/bar-spacelab.css

@@ -3,6 +3,7 @@
 }
 
 /* Default */
+.bar.bar-default.bar-footer,
 .bar.bar-default {
     background: linear-gradient(var(--colorLight10, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight40, #aeaeae));
     border-color: var(--colorLight50);
@@ -16,6 +17,7 @@
 }
 
 /* Positive */
+.bar.bar-positive.bar-footer,
 .bar.bar-positive {
     background: linear-gradient(var(--colorPrimary30, #b6b6b6), var(--colorPrimary40, #999999), var(--colorPrimary50, #868686));
     border-color: var(--colorPrimary50, #868686);
@@ -29,6 +31,7 @@
 }
 
 /* Calm */
+.bar.bar-calm.bar-footer,
 .bar.bar-calm {
     background: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #3399f3), var(--colorCalm50, #2d86d5));
     border-color: var(--colorCalm40, #3399f3);
@@ -42,6 +45,7 @@
 }
 
 /* assertive */
+.bar.bar-assertive.bar-footer,
 .bar.bar-assertive {
     background: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200), var(--colorDanger50, #b30200));
     border-color: var(--colorDanger50, #b30200);
@@ -55,6 +59,7 @@
 }
 
 /* Energized */
+.bar.bar-energized.bar-footer,
 .bar.bar-energized {
     background: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500), var(--colorWarning50, #ba6600));
     border: 1px solid var(--colorWarning40, #d47500);
@@ -68,6 +73,7 @@
 }
 
 /* Balanced */
+.bar.bar-balanced.bar-footer,
 .bar.bar-balanced {
     background: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521), var(--colorSuccess50, #359e1d));
     border-color: var(--colorSuccess40, #3cb521);
@@ -81,6 +87,7 @@
 }
 
 /* Royal */
+.bar.bar-royal.bar-footer,
 .bar.bar-royal {
     background: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea), var(--colorRoyal50, #775dcd));
     border-color: var(--colorRoyal40, #886aea);
@@ -94,6 +101,7 @@
 }
 
 /* Light */
+.bar.bar-light.bar-footer,
 .bar.bar-light {
     background: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee), var(--colorLight50, #d0d0d0));
     border-color: var(--colorLight40, #eeeeee);
@@ -107,27 +115,29 @@
 }
 
 /* Stable */
-.bar.bar-light {
+.bar.bar-stable.bar-footer,
+.bar.bar-stable {
     background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8), var(--colorStable50, #d9d9d9));
     border-color: var(--colorStable40, #f8f8f8);
 }
 
-.bar.bar-light .button .icon,
-.bar.bar-light .button i,
-.bar.bar-light .button span,
-.bar.bar-light .title {
+.bar.bar-stable .button .icon,
+.bar.bar-stable .button i,
+.bar.bar-stable .button span,
+.bar.bar-stable .title {
     color: var(--textColorStable40, #444444);
 }
 
 /* Dark */
-.bar.bar-light {
+.bar.bar-dark.bar-footer,
+.bar.bar-dark {
     background: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333), var(--colorDark50, #2d2d2d));
     border-color: var(--colorDark40, #333333);
 }
 
-.bar.bar-light .button .icon,
-.bar.bar-light .button i,
-.bar.bar-light .button span,
-.bar.bar-light .title {
+.bar.bar-dark .button .icon,
+.bar.bar-dark .button i,
+.bar.bar-dark .button span,
+.bar.bar-dark .title {
     color: var(--textColorDark40, #ffffff);
 }

package/css/themes/custom/spacelab/custom-spacelab.css

@@ -260,17 +260,40 @@
     --colorNeutral220: #000000;
 
     /* Components - Button */
-    --btnLink: var(--colorPrimary40, #446e9b);
-    --btnDefault: var(--colorDefault40, #474949);
-    --btnPrimary: var(--colorPrimary40, #446e9b);
-    --btnSuccess: var(--colorSuccess40, #3cb521);
-    --btnCalm: var(--colorCalm40, #3399f3);
-    --btnWarning: var(--colorWarning40, #d47500);
-    --btnDanger: var(--colorDanger40, #cd0200);
-    --btnLight: var(--colorLight40, #eeeeee);
-    --btnStable: var(--colorStable40, #f8f8f8);
-    --btnRoyal: var(--colorRoyal40, #886aea);
-    --btnDark: var(--colorDark40, #333333);
+    --btnLink: var(--colorCalm40, #3399f3);
+    --btnDefault: linear-gradient(var(--colorDefault30, #8a8b8b), var(--colorDefault40, #474949) 50%, var(--colorDefault50, #3e4040));
+    --btnPrimary: linear-gradient(var(--colorPrimary30, #899cb7), var(--colorPrimary40, #446e9b) 50%, var(--colorPrimary50, #3c6088));
+    --btnSuccess: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
+    --btnCalm: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #474949) 50%, var(--colorCalm50, #2d86d5));
+    --btnWarning: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500) 50%, var(--colorWarning50, #ba6600));
+    --btnDanger: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
+    --btnLight: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight50, #d0d0d0));
+    --btnStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 50%, var(--colorStable50, #d9d9d9));
+    --btnRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 50%, var(--colorRoyal50, #775dcd));
+    --btnDark: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333) 50%, var(--colorDark50, #2d2d2d));
+
+    --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: var(--colorDefault40, #474949);
+    --borderBtnPrimary: var(--colorPrimary40, #446e9b);
+    --borderBtnSuccess: var(--colorSuccess40, #3cb521);
+    --borderBtnCalm: var(--colorCalm40, #3399f3);
+    --borderBtnWarning: var(--colorWarning40, #d47500);
+    --borderBtnDanger: var(--colorDanger40, #cd0200);
+    --borderBtnLight: var(--colorLight40, #eeeeee);
+    --borderBtnStable: var(--colorStable40, #f8f8f8);
+    --borderBtnRoyal: var(--colorRoyal40, #886aea);
+    --borderBtnDark: var(--colorDark40, #333333);
 
     /* Components - Text color */
     --colorDefault: var(--colorDefault30, #474949);
@@ -292,10 +315,21 @@
     --checkboxWarning: var(--colorWarning40, #d47500);
     --checkboxDanger: var(--colorDanger40, #cd0200);
     --checkboxLight: var(--colorLight50, #d0d0d0);
-    --checkboxStable: var(--colorStable40, #f8f8f8);
+    --checkboxStable: var(--colorStable50, #d9d9d9);
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark30, #838383);
 
+    --borderCheckboxDefault: var(--colorDefault40, #474949);
+    --borderCheckboxPrimary: var(--colorPrimary40, #446e9b);
+    --borderCheckboxSuccess: var(--colorSuccess40, #3cb521);
+    --borderCheckboxCalm: var(--colorCalm40, #3399f3);
+    --borderCheckboxWarning: var(--colorWarning40, #d47500);
+    --borderCheckboxDanger: var(--colorDanger40, #cd0200);
+    --borderCheckboxLight: var(--colorLight50, #d0d0d0);
+    --borderCheckboxStable: var(--colorStable50, #d9d9d9);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark30, #838383);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #474949);
     --togglePrimary: var(--colorPrimary40, #446e9b);
@@ -308,6 +342,17 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark30, #838383);
 
+    --borderToggleDefault: var(--colorDefault40, #474949);
+    --borderTogglePrimary: var(--colorPrimary40, #446e9b);
+    --borderToggleSuccess: var(--colorSuccess40, #3cb521);
+    --borderToggleCalm: var(--colorCalm40, #3399f3);
+    --borderToggleWarning: var(--colorWarning40, #d47500);
+    --borderToggleDanger: var(--colorDanger40, #cd0200);
+    --borderToggleLight: var(--colorLight50, #d0d0d0);
+    --borderToggleStable: var(--colorStable50, #d9d9d9);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark30, #838383);
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #474949);
     --bgPrimary: var(--colorPrimary40, #446e9b);
@@ -366,28 +411,28 @@
     --tabsDark: var(--colorDark40, #333333);
 
     /* Components - Header */
-    --barDefault: var(--colorDefault40, #474949);
-    --barPrimary: var(--colorPrimary40, #446e9b);
-    --barSuccess: var(--colorSuccess40, #3cb521);
-    --barCalm: var(--colorCalm40, #3399f3);
-    --barWarning: var(--colorWarning40, #d47500);
-    --barDanger: var(--colorDanger40, #cd0200);
-    --barLight: var(--colorLight40, #eeeeee);
-    --barStable: var(--colorStable40, #f8f8f8);
-    --barRoyal: var(--colorRoyal40, #886aea);
-    --barDark: var(--colorDark40, #333333);
+    --barDefault: linear-gradient(var(--colorLight10, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight40, #aeaeae));
+    --barPrimary: linear-gradient(var(--colorPrimary30, #b6b6b6), var(--colorPrimary40, #999999), var(--colorPrimary50, #868686));
+    --barSuccess: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
+    --barCalm: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #474949) 50%, var(--colorCalm50, #2d86d5));
+    --barWarning: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500) 50%, var(--colorWarning50, #ba6600));
+    --barDanger: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
+    --barLight: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight50, #d0d0d0));
+    --barStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 50%, var(--colorStable50, #d9d9d9));
+    --barRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 50%, var(--colorRoyal50, #775dcd));
+    --barDark: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333) 50%, var(--colorDark50, #2d2d2d));
 
     /* Componentes - Footer with icon */
-    --backgroundDefault: var(--colorDefault40, #474949);
-    --backgroundPrimary: var(--colorPrimary40, #446e9b);
-    --backgroundSuccess: var(--colorSuccess40, #3cb521);
-    --backgroundCalm: var(--colorCalm40, #3399f3);
-    --backgroundWarning: var(--colorWarning40, #d47500);
-    --backgroundDanger: var(--colorDanger40, #cd0200);
-    --backgroundLight: var(--colorLight40, #eeeeee);
-    --backgroundStable: var(--colorStable40, #f8f8f8);
-    --backgroundRoyal: var(--colorRoyal40, #886aea);
-    --backgroundDark: var(--colorDark40, #333333);
+    --backgroundDefault: linear-gradient(var(--colorDefault30, #8a8b8b), var(--colorDefault40, #474949) 50%, var(--colorDefault50, #3e4040));
+    --backgroundPrimary: linear-gradient(var(--colorPrimary30, #899cb7), var(--colorPrimary40, #446e9b) 50%, var(--colorPrimary50, #3c6088));
+    --backgroundSuccess: linear-gradient(var(--colorSuccess30, #86c97f), var(--colorSuccess40, #3cb521) 50%, var(--colorSuccess50, #359e1d));
+    --backgroundCalm: linear-gradient(var(--colorCalm30, #83b6f6), var(--colorCalm40, #474949) 50%, var(--colorCalm50, #2d86d5));
+    --backgroundWarning: linear-gradient(var(--colorWarning30, #dfa07b), var(--colorWarning40, #d47500) 50%, var(--colorWarning50, #ba6600));
+    --backgroundDanger: linear-gradient(var(--colorDanger30, #da7b7b), var(--colorDanger40, #cd0200) 50%, var(--colorDanger50, #b30200));
+    --backgroundLight: linear-gradient(var(--colorLight30, #f2f2f2), var(--colorLight40, #eeeeee) 50%, var(--colorLight50, #d0d0d0));
+    --backgroundStable: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 50%, var(--colorStable50, #d9d9d9));
+    --backgroundRoyal: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 50%, var(--colorRoyal50, #775dcd));
+    --backgroundDark: linear-gradient(var(--colorDark30, #838383), var(--colorDark40, #333333) 50%, var(--colorDark50, #2d2d2d));
 
     --tabsIconDefault: var(--textColorDefault40, #ffffff);
     --tabsIconPrimary: var(--textColorPrimary40, #ffffff);

package/css/themes/custom/superhero/custom-superhero.css

@@ -268,6 +268,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #20374c);
 
+    --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, #8d949b);
     --colorPrimary: var(--colorPrimary40, #df691a);
@@ -292,6 +315,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #20374c);
 
+    --borderCheckboxDefault: var(--colorDefault20, #b7babf);
+    --borderCheckboxPrimary: var(--colorPrimary40, #df691a);
+    --borderCheckboxSuccess: var(--colorSuccess40, #5cb85c);
+    --borderCheckboxCalm: var(--colorCalm40, #5bc0de);
+    --borderCheckboxWarning: var(--colorWarning40, #f0ad4e);
+    --borderCheckboxDanger: var(--colorDanger40, #d9534f);
+    --borderCheckboxLight: var(--colorLight50, #969faa);
+    --borderCheckboxStable: var(--colorStable40, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark40, #20374c);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #4e5d6c);
     --togglePrimary: var(--colorPrimary40, #df691a);
@@ -302,7 +336,18 @@
     --toggleLight: var(--colorLight50, #969faa);
     --toggleStable: var(--colorStable40, #f8f8f8);
     --toggleRoyal: var(--colorRoyal40, #886aea);
-    --toggleDark: var(--colorDark40, #20374c);
+    --toggleDark: var(--colorDark30, #7e848c);
+
+    --borderToggleDefault: var(--colorDefault40, #4e5d6c);
+    --borderTogglePrimary: var(--colorPrimary40, #df691a);
+    --borderToggleSuccess: var(--colorSuccess40, #5cb85c);
+    --borderToggleCalm: var(--colorCalm40, #5bc0de);
+    --borderToggleWarning: var(--colorWarning40, #f0ad4e);
+    --borderToggleDanger: var(--colorDanger40, #d9534f);
+    --borderToggleLight: var(--colorLight50, #969faa);
+    --borderToggleStable: var(--colorStable40, #f8f8f8);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark30, #7e848c);
 
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #4e5d6c);
@@ -582,4 +627,10 @@ button#crn-button-signup {
 /* Input Date icon */
 input::-webkit-calendar-picker-indicator {
     filter: invert(1);
+}
+
+/* Toggle - Dark */
+.toggle.toggle-dark input:checked+.track {
+    border-color: var(--colorDark30, #7e848c);
+    background: var(--colorDark30, #7e848c);
 }

package/css/themes/custom/theme-general/theme-general.css

@@ -127,7 +127,7 @@ a:hover {
 }
 
 .has-header .scroll {
-    background: var(--backgroundColor40, #ffffff);
+    background: transparent;
 }
 
 /* Colors */