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

package/css/themes/custom/fuse/custom-fuse.css

@@ -259,12 +259,13 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #4f46e5);
     --btnDefault: var(--colorDefault40, #1e293b);
     --btnPrimary: var(--colorPrimary40, #4f46e5);
     --btnSuccess: var(--colorSuccess40, #22c55e);
-    --btnCalm: var(--textColor40, #383838);
+    --btnCalm: var(--colorLight40, #ffffff);
     --btnWarning: var(--colorWarning40, #f59e0b);
     --btnDanger: var(--colorDanger40, #ef4444);
     --btnLight: var(--colorLight50, #dfdfdf);
@@ -272,6 +273,29 @@
     --btnRoyal: var(--colorRoyal40, #9933cc);
     --btnDark: var(--colorDark40, #adafae);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--colorLight40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColor40, #1e293b);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #000000);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: var(--textColor20, #afb0b3);
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: transparent;
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #1e293b);
     --colorPrimary: var(--colorPrimary40, #4f46e5);
@@ -288,7 +312,7 @@
     --checkboxDefault: var(--colorDefault40, #1e293b);
     --checkboxPrimary: var(--colorPrimary40, #4f46e5);
     --checkboxSuccess: var(--colorSuccess40, #22c55e);
-    --checkboxCalm: var(--colorCalm40, #11c1f3);
+    --checkboxCalm: var(--colorLight40, #ffffff);
     --checkboxWarning: var(--colorWarning40, #f59e0b);
     --checkboxDanger: var(--colorDanger40, #ef4444);
     --checkboxLight: var(--colorLight50, #dfdfdf);
@@ -296,29 +320,62 @@
     --checkboxRoyal: var(--colorRoyal40, #9933cc);
     --checkboxDark: var(--colorDark40, #adafae);
 
+    --borderCheckboxDefault: var(--colorDefault40, #1e293b);
+    --borderCheckboxPrimary: var(--colorPrimary40, #4f46e5);
+    --borderCheckboxSuccess: var(--colorSuccess40, #22c55e);
+    --borderCheckboxCalm: var(--textColor20, #afb0b3);
+    --borderCheckboxWarning: var(--colorWarning40, #f59e0b);
+    --borderCheckboxDanger: var(--colorDanger40, #ef4444);
+    --borderCheckboxLight: var(--colorLight50, #dfdfdf);
+    --borderCheckboxStable: var(--colorStable60, #b6b6b6);
+    --borderCheckboxRoyal: var(--colorRoyal40, #9933cc);
+    --borderCheckboxDark: var(--colorDark40, #adafae);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #1e293b);
     --togglePrimary: var(--colorPrimary40, #4f46e5);
     --toggleSuccess: var(--colorSuccess40, #22c55e);
-    --toggleCalm: var(--colorCalm40, #11c1f3);
+    --toggleCalm: var(--colorLight40, #ffffff);
     --toggleWarning: var(--colorWarning40, #f59e0b);
     --toggleDanger: var(--colorDanger40, #ef4444);
     --toggleLight: var(--colorLight50, #dfdfdf);
-    --toggleStable: var(--colorStable50, #d9d9d9);
+    --toggleStable: var(--colorStable40, #f8f8f8);
     --toggleRoyal: var(--colorRoyal40, #9933cc);
     --toggleDark: var(--colorDark40, #adafae);
 
+    --borderToggleDefault: var(--colorDefault40, #1e293b);
+    --borderTogglePrimary: var(--colorPrimary40, #4f46e5);
+    --borderToggleSuccess: var(--colorSuccess40, #22c55e);
+    --borderToggleCalm: var(--textColor20, #afb0b3);
+    --borderToggleWarning: var(--colorWarning40, #f59e0b);
+    --borderToggleDanger: var(--colorDanger40, #ef4444);
+    --borderToggleLight: var(--colorLight50, #dfdfdf);
+    --borderToggleStable: var(--colorStable60, #b6b6b6);
+    --borderToggleRoyal: var(--colorRoyal40, #9933cc);
+    --borderToggleDark: var(--colorDark40, #adafae);
+
     /* Components - Tabs - crn-ion-segment */
-    --bgDefault: var(--colorPrimary40, #4f46e5);
-    --bgPrimary: var(--colorDefault40, #1e293b);
-    --bgSuccess: var(--colorSuccess40, #22c55e);
-    --bgCalm: var(--colorCalm40, #11c1f3);
-    --bgWarning: var(--colorWarning40, #f59e0b);
-    --bgDanger: var(--colorDanger40, #ef4444);
-    --bgLight: var(--colorLight40, #ffffff);
-    --bgStable: var(--colorStable40, #f8f8f8);
-    --bgRoyal: var(--colorRoyal40, #9933cc);
-    --bgDark: var(--colorDark40, #adafae);
+    --bgDefault: var(--colorPrimary10, #c7c9ce);
+    --bgPrimary: var(--colorDefault10, #dad9f7);
+    --bgSuccess: var(--colorSuccess10, #d6efdb);
+    --bgCalm: var(--colorCalm10, #d6eefb);
+    --bgWarning: var(--colorWarning10, #fce6d5);
+    --bgDanger: var(--colorDanger10, #fad9d9);
+    --bgLight: var(--colorLight10, #ffffff);
+    --bgStable: var(--colorStable10, #fdfdfd);
+    --bgRoyal: var(--colorRoyal10, #f8fafc);
+    --bgDark: var(--colorDark10, #e9eaea);
+
+    --borderActiveBackgroundDefault: var(--colorDefault40, #1e293b);
+    --borderActiveBackgroundPrimary: var(--colorPrimary40, #4f46e5);
+    --borderActiveBackgroundSuccess: var(--colorSuccess40, #22c55e);
+    --borderActiveBackgroundCalm: var(--colorCalm40, #033c73);
+    --borderActiveBackgroundWarning: var(--colorWarning40, #f59e0b);
+    --borderActiveBackgroundDanger: var(--colorDanger50, #c71c22);
+    --borderActiveBackgroundLight: var(--colorLight40, #ffffff);
+    --borderActiveBackgroundStable: var(--colorStable40, #f8f8f8);
+    --borderActiveBackgroundRoyal: var(--colorRoyal40, #9933cc);
+    --borderActiveBackgroundDark: var(--colorDark40, #adafae);
 
     --activeBackgroundDefault: var(--colorPrimary40, #4f46e5);
     --activeBackgroundPrimary: var(--colorDefault40, #1e293b);
@@ -342,16 +399,16 @@
     --ionSegmentRoyal: var(--textColorRoyal40, #ffffff);
     --ionSegmentDark: var(--textColorDark40, #000000);
 
-    --iconThemeLightDefault: var(--textColorPrimary40, #ffffff);
-    --iconThemeLightPrimary: var(--textColorDefault40, #ffffff);
-    --iconThemeLightSuccess: var(--textColorSuccess40, #ffffff);
-    --iconThemeLightCalm: var(--textColorCalm40, #ffffff);
-    --iconThemeLightWarning: var(--textColorWarning40, #ffffff);
-    --iconThemeLightDanger: var(--textColorDanger40, #ffffff);
-    --iconThemeLightLight: var(--textColorLight40, #383838);
-    --iconThemeLightStable: var(--textColorStable40, #444444);
-    --iconThemeLightRoyal: var(--textColorRoyal40, #ffffff);
-    --iconThemeLightDark: var(--textColorDark40, #000000);
+    --iconThemeLightDefault: var(--colorPrimary40, #4f46e5);
+    --iconThemeLightPrimary: var(--colorDefault40, #1e293b);
+    --iconThemeLightSuccess: var(--colorSuccess40, #22c55e);
+    --iconThemeLightCalm: var(--colorCalm40, #ffffff);
+    --iconThemeLightWarning: var(--colorWarning40, #f59e0b);
+    --iconThemeLightDanger: var(--colorDanger40, #ef4444);
+    --iconThemeLightLight: var(--colorLight40, #ffffff);
+    --iconThemeLightStable: var(--colorStable40, #f8f8f8);
+    --iconThemeLightRoyal: var(--colorRoyal40, #9933cc);
+    --iconThemeLightDark: var(--colorDark40, #adafae);
 
     /* Components - Old Tabs - pallete false */
     --tabsDefault: var(--colorDefault40, #1e293b);
@@ -366,8 +423,8 @@
     --tabsDark: var(--colorDark40, #adafae);
 
     /* Components - Header */
-    --barDefault: var(--colorPrimary40, #4f46e5);
-    --barPrimary: var(--colorDefault40, #1e293b);
+    --barDefault: var(--colorDefault40, #1e293b);
+    --barPrimary: var(--colorPrimary40, #4f46e5);
     --barSuccess: var(--colorSuccess40, #22c55e);
     --barCalm: var(--colorCalm40, #11c1f3);
     --barWarning: var(--colorWarning40, #f59e0b);
@@ -399,6 +456,7 @@
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #000000);
+    /* End - Variables used exclusively in the color palette property */
 }
 
 h1,
@@ -666,14 +724,39 @@ div[data-component="crn-input-button"] .button-balanced.button-outline.activated
     border-color: var(--textColor20, #b2b2b2);
 }
 
-.toggle.toggle-stable input:checked+.track,
-.checkbox-stable input:checked:before,
-.checkbox-stable input:checked+.checkbox-icon:before {
+.toggle.toggle-calm input:checked+.track,
+.checkbox-calm input:checked:before,
+.checkbox-calm input:checked+.checkbox-icon:before {
     background: var(--colorLight40, #ffffff);
     border: 1px solid var(--textColor20, #b2b2b2);
     color: var(--textColor40, #1e293b);
 }
 
+.checkbox-calm input:checked:after,
+.checkbox-calm input:checked+.checkbox-icon:after,
+.checkbox-calm input:before,
+.checkbox-calm .checkbox-icon:before {
+    border-color: var(--textColor20, #b2b2b2);
+}
+
+.toggle.toggle-stable input:checked+.track,
+.checkbox-stable input:before,
+.checkbox-stable .checkbox-icon:before,
+.checkbox-stable input:checked:after,
+.checkbox-stable input:checked+.checkbox-icon:after,
+.checkbox-stable input:checked:before,
+.checkbox-stable input:checked+.checkbox-icon:before {
+    border-color: var(--colorStable60, #b6b6b6);
+}
+
+.toggle.toggle-stable input:checked+.track,
+.checkbox-stable input:before,
+.checkbox-stable .checkbox-icon:before {
+    background: var(--colorStable40, #f8f8f8);
+    border-color: var(--colorStable60, #b6b6b6);
+    border-width: 1px;
+}
+
 /* Rodapé com ícone */
 .tabs-striped.background-stable .tabs {
     background: var(--colorLight40, #ffffff);

package/css/themes/custom/journal/custom-journal.css

@@ -258,6 +258,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #eb6864);
     --btnDefault: var(--colorDefault40, #2ca4a8);
@@ -271,6 +272,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #222222);
 
+    --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: var(--colorLight50, #d9dadb);
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #3b448e);
     --colorPrimary: var(--colorPrimary40, #eb6864);
@@ -295,6 +319,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #222222);
 
+    --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, #eb6864);
@@ -307,9 +342,20 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #222222);
 
+    --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(--colorPrimary40, #eb6864);
-    --bgPrimary: var(--colorDefault40, #375a7f);
+    --bgPrimary: var(--colorPrimary40, #eb6864);
+    --bgDefault: var(--colorDefault40, #375a7f);
     --bgSuccess: var(--colorSuccess40, #22b24c);
     --bgCalm: var(--colorCalm40, #336699);
     --bgWarning: var(--colorWarning40, #f5e625);
@@ -319,8 +365,19 @@
     --bgRoyal: var(--colorRoyal40, #886aea);
     --bgDark: var(--colorDark40, #222222);
 
-    --activeBackgroundDefault: var(--colorPrimary40, #eb6864);
-    --activeBackgroundPrimary: var(--colorDefault40, #375a7f);
+    --borderActiveBackgroundDefault: transparent;
+    --borderActiveBackgroundPrimary: transparent;
+    --borderActiveBackgroundSuccess: transparent;
+    --borderActiveBackgroundCalm: transparent;
+    --borderActiveBackgroundWarning: transparent;
+    --borderActiveBackgroundDanger: transparent;
+    --borderActiveBackgroundLight: transparent;
+    --borderActiveBackgroundStable: transparent;
+    --borderActiveBackgroundRoyal: transparent;
+    --borderActiveBackgroundDark: transparent;
+
+    --activeBackgroundDefault: var(--colorDefault40, #375a7f);
+    --activeBackgroundPrimary: var(--colorPrimary40, #eb6864);
     --activeBackgroundSuccess: var(--colorSuccess40, #22b24c);
     --activeBackgroundCalm: var(--colorCalm40, #336699);
     --activeBackgroundWarning: var(--colorWarning40, #f5e625);
@@ -330,8 +387,8 @@
     --activeBackgroundRoyal: var(--colorRoyal40, #886aea);
     --activeBackgroundDark: var(--colorDark40, #222222);
 
-    --ionSegmentDefault: var(--textColorPrimary40, #ffffff);
-    --ionSegmentPrimary: var(--textColorDefault40, #ffffff);
+    --ionSegmentDefault: var(--textColorDefault40, #ffffff);
+    --ionSegmentPrimary: var(--textColorPrimary40, #ffffff);
     --ionSegmentSuccess: var(--textColorSuccess40, #ffffff);
     --ionSegmentCalm: var(--textColorCalm40, #ffffff);
     --ionSegmentWarning: var(--textColorWarning40, #ffffff);
@@ -341,8 +398,8 @@
     --ionSegmentRoyal: var(--textColorRoyal40, #ffffff);
     --ionSegmentDark: var(--textColorDark40, #ffffff);
 
-    --iconThemeLightDefault: var(--textColorPrimary40, #ffffff);
-    --iconThemeLightPrimary: var(--textColorDefault40, #ffffff);
+    --iconThemeLightDefault: var(--textColorDefault40, #ffffff);
+    --iconThemeLightPrimary: var(--textColorPrimary40, #ffffff);
     --iconThemeLightSuccess: var(--textColorSuccess40, #ffffff);
     --iconThemeLightCalm: var(--textColorCalm40, #ffffff);
     --iconThemeLightWarning: var(--textColorWarning40, #ffffff);
@@ -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 */
 }
 
 body,
@@ -480,9 +539,7 @@ a:hover {
 .bar.bar-default .button .icon,
 .bar.bar-default .title,
 .bar.bar-default .button span,
-.bar.bar-default .button i,
-.bar .title,
-.platform-android .bar .title {
+.bar.bar-default .button i {
     color: var(--textColor40, #222222);
 }