cronapp-framework-mobile-js 2.9.2-SP.7 → 2.9.2-SP.9

package/components/templates/list.thumbnail.template.html

@@ -1,7 +1,7 @@
 <div crn-datasource="" ng-repeat="rowData in datasource.data" id="crn-list-avatar${RANDOM}">
-    <a data-component="crn-list-item-thumbnail" class="item item-thumbnail-left text-left" xattr-position="item-thumbnail-left" xattr-text-position="text-left">
+    <a data-component="crn-list-item-thumbnail" class="item item-thumbnail-left text-left" xattr-position="item-thumbnail-left" href="" xattr-text-position="text-left">
         <img alt="Thumbnail" src="https://picsum.photos/id/875/100/100" class="component-holder" data-component="crn-image" id="crn-image-${RANDOM}">
         <h2 class="default" xattr-theme="default">List Title</h2>
         <h3 class="dark" xattr-theme="dark">List Subtitle</h3>
     </a>
-</div>
+</div>

package/css/themes/custom/lumen/custom-lumen.css

@@ -258,6 +258,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #158cba);
     --btnDefault: var(--colorDefault40, #f0f0f0);
@@ -271,6 +272,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #555555);
 
+    --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, #222222);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: var(--colorDefault50, #d2d2d2);
+    --borderBtnPrimary: var(--colorPrimary50, #127ba3);
+    --borderBtnSuccess: var(--colorSuccess50, #239f27);
+    --borderBtnCalm: var(--colorCalm50, #66b1ce);
+    --borderBtnWarning: var(--colorWarning50, #df7418);
+    --borderBtnDanger: var(--colorDanger50, #df392f);
+    --borderBtnLight: var(--colorLight50, #d7d7d7);
+    --borderBtnStable: var(--colorStable50, #d9d9d9);
+    --borderBtnRoyal: var(--colorRoyal50, #775dcd);
+    --borderBtnDark: var(--colorDark50, #4a4a4a);
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault50, #d2d2d2);
     --colorPrimary: var(--colorPrimary40, #158cba);
@@ -295,40 +319,73 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #555555);
 
+    --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);
+    --toggleDefault: var(--colorDefault40, #f0f0f0);
     --togglePrimary: var(--colorPrimary40, #158cba);
-    --toggleSuccess: var(--colorSuccess40, #00bc8c);
+    --toggleSuccess: var(--colorSuccess40, #28b62c);
     --toggleCalm: var(--colorCalm40, #75caeb);
     --toggleWarning: var(--colorWarning40, #ff851b);
     --toggleDanger: var(--colorDanger40, #ff4136);
     --toggleLight: var(--colorLight50, #d7d7d7);
     --toggleStable: var(--colorStable50, #d9d9d9);
     --toggleRoyal: var(--colorRoyal40, #886aea);
-    --toggleDark: var(--colorDark40, #444444);
+    --toggleDark: var(--colorDark40, #555555);
+
+    --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, #158cba);
-    --bgPrimary: var(--colorDefault40, #3c3c3c);
-    --bgSuccess: var(--colorSuccess40, #00bc8c);
+    --bgPrimary: var(--colorDefault40, #f0f0f0);
+    --bgSuccess: var(--colorSuccess40, #28b62c);
     --bgCalm: var(--colorCalm40, #75caeb);
     --bgWarning: var(--colorWarning40, #ff851b);
     --bgDanger: var(--colorDanger40, #ff4136);
     --bgLight: var(--colorLight40, #f6f6f6);
     --bgStable: var(--colorStable40, #f8f8f8);
     --bgRoyal: var(--colorRoyal40, #886aea);
-    --bgDark: var(--colorDark40, #444444);
+    --bgDark: var(--colorDark40, #555555);
+
+    --borderActiveBackgroundDefault: transparent;
+    --borderActiveBackgroundPrimary: transparent;
+    --borderActiveBackgroundSuccess: transparent;
+    --borderActiveBackgroundCalm: transparent;
+    --borderActiveBackgroundWarning: transparent;
+    --borderActiveBackgroundDanger: transparent;
+    --borderActiveBackgroundLight: transparent;
+    --borderActiveBackgroundStable: transparent;
+    --borderActiveBackgroundRoyal: transparent;
+    --borderActiveBackgroundDark: transparent;
 
     --activeBackgroundDefault: var(--colorPrimary40, #158cba);
-    --activeBackgroundPrimary: var(--colorDefault40, #3c3c3c);
-    --activeBackgroundSuccess: var(--colorSuccess40, #00bc8c);
+    --activeBackgroundPrimary: var(--colorDefault40, #f0f0f0);
+    --activeBackgroundSuccess: var(--colorSuccess40, #28b62c);
     --activeBackgroundCalm: var(--colorCalm40, #75caeb);
     --activeBackgroundWarning: var(--colorWarning40, #ff851b);
     --activeBackgroundDanger: var(--colorDanger40, #ff4136);
     --activeBackgroundLight: var(--colorLight40, #f6f6f6);
     --activeBackgroundStable: var(--colorStable40, #f8f8f8);
     --activeBackgroundRoyal: var(--colorRoyal40, #886aea);
-    --activeBackgroundDark: var(--colorDark40, #444444);
+    --activeBackgroundDark: var(--colorDark40, #555555);
 
     --ionSegmentDefault: var(--textColorPrimary40, #ffffff);
     --ionSegmentPrimary: var(--textColorDefault40, #222222);
@@ -353,42 +410,42 @@
     --iconThemeLightDark: var(--textColorDark40, #ffffff);
 
     /* Components - Old Tabs - pallete false */
-    --tabsDefault: var(--colorDefault40, #3c3c3c);
+    --tabsDefault: var(--colorDefault40, #f0f0f0);
     --tabsPrimary: var(--colorPrimary40, #158cba);
-    --tabsSuccess: var(--colorSuccess40, #00bc8c);
+    --tabsSuccess: var(--colorSuccess40, #28b62c);
     --tabsCalm: var(--colorCalm40, #75caeb);
     --tabsWarning: var(--colorWarning40, #ff851b);
     --tabsDanger: var(--colorDanger40, #ff4136);
     --tabsLight: var(--colorLight40, #f6f6f6);
     --tabsStable: var(--colorStable40, #f8f8f8);
     --tabsRoyal: var(--colorRoyal40, #886aea);
-    --tabsDark: var(--colorDark40, #444444);
+    --tabsDark: var(--colorDark40, #555555);
 
     /* Components - Header */
-    --barDefault: var(--colorDefault50, #ffffff);
-    --barPrimary: var(--colorPrimary60, #375a7f);
-    --barSuccess: var(--colorSuccess50, #00bc8c);
-    --barCalm: var(--colorCalm50, #3498db);
-    --barWarning: var(--colorWarning50, #f39c12);
-    --barDanger: var(--colorDanger50, #e74c3c);
+    --barDefault: var(--colorDefault50, #d2d2d2);
+    --barPrimary: var(--colorPrimary60, #0f6788);
+    --barSuccess: var(--colorSuccess50, #239f27);
+    --barCalm: var(--colorCalm50, #66b1ce);
+    --barWarning: var(--colorWarning50, #df7418);
+    --barDanger: var(--df7418olorDanger50, #e74c3c);
     --barLight: var(--colorLight50, #d7d7d7);
     --barStable: var(--colorStable50, #d9d9d9);
     --barRoyal: var(--colorRoyal50, #775dcd);
     --barDark: var(--colorDark50, #4a4a4a);
 
     /* Componentes - Footer with icon */
-    --backgroundDefault: var(--colorDefault50, #ffffff);
-    --backgroundPrimary: var(--colorPrimary60, #2780e3);
-    --backgroundSuccess: var(--colorSuccess50, #00bc8c);
-    --backgroundCalm: var(--colorCalm50, #3498db);
-    --backgroundWarning: var(--colorWarning50, #f39c12);
-    --backgroundDanger: var(--colorDanger50, #e74c3c);
+    --backgroundDefault: var(--colorDefault50, #d2d2d2);
+    --backgroundPrimary: var(--colorPrimary60, #0f6788);
+    --backgroundSuccess: var(--colorSuccess50, #239f27);
+    --backgroundCalm: var(--colorCalm50, #66b1ce);
+    --backgroundWarning: var(--colorWarning50, #df7418);
+    --backgroundDanger: var(--colorDanger50, #df392f);
     --backgroundLight: var(--colorLight50, #d7d7d7);
     --backgroundStable: var(--colorStable50, #d9d9d9);
     --backgroundRoyal: var(--colorRoyal50, #775dcd);
     --backgroundDark: var(--colorDark50, #4a4a4a);
 
-    --tabsIconDefault: var(--textColor30, #7f7f7f);
+    --tabsIconDefault: var(--textColor30, #909090);
     --tabsIconPrimary: var(--textColorPrimary40, #ffffff);
     --tabsIconSuccess: var(--textColorSuccess40, #ffffff);
     --tabsIconCalm: var(--textColorCalm40, #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 */
 }
 
 h1,

package/css/themes/custom/paper/custom-paper.css

@@ -257,6 +257,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnDefault: var(--colorDefault40, #ffffff);
     --btnPrimary: var(--colorPrimary40, #2196f3);
@@ -269,6 +270,29 @@
     --btnRoyal: var(--colorRoyal40, #9c27b0);
     --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(--colorDefault50, #dfdfdf);
     --colorPrimary: var(--colorPrimary40, #2196f3);
@@ -293,6 +317,17 @@
     --checkboxRoyal: var(--colorRoyal40, #9c27b0);
     --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(--colorNeutral20, #F1F1F1);
     --togglePrimary: var(--colorPrimary40, #2196f3);
@@ -305,6 +340,17 @@
     --toggleRoyal: var(--colorRoyal40, #9c27b0);
     --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, #ffffff);
     --bgPrimary: var(--colorPrimary40, #2196f3);
@@ -317,6 +363,17 @@
     --bgRoyal: var(--colorRoyal40, #9c27b0);
     --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, #ffffff);
     --activeBackgroundPrimary: var(--colorPrimary40, #2196f3);
     --activeBackgroundSuccess: var(--colorSuccess40, #4caf50);
@@ -396,6 +453,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/readable/custom-readable.css

@@ -259,19 +259,43 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #4582ec);
-    --btnDefault: var(--colorDefault50, #dfdfdf);
+    --btnDefault: var(--colorDefault40, #ffffff);
     --btnPrimary: var(--colorPrimary40, #4582ec);
     --btnSuccess: var(--colorSuccess40, #3fad46);
     --btnCalm: var(--colorCalm40, #11c1f3);
     --btnWarning: var(--colorWarning40, #f0ad4e);
     --btnDanger: var(--colorDanger40, #d9534f);
-    --btnLight: var(--colorLight50, #dfdfdf);
+    --btnLight: var(--colorLight40, #ffffff);
     --btnStable: var(--colorStable40, #f8f8f8);
     --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: var(--colorDefault50, #dfdfdf);
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: var(--colorLight50, #dfdfdf);
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault50, #dfdfdf);
     --colorPrimary: var(--colorPrimary40, #4582ec);
@@ -296,6 +320,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(--colorDefault50, #dfdfdf);
     --togglePrimary: var(--colorPrimary40, #4582ec);
@@ -308,6 +343,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, #ffffff);
     --bgPrimary: var(--colorPrimary40, #4582ec);
@@ -320,6 +366,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, #ffffff);
     --activeBackgroundPrimary: var(--colorPrimary40, #4582ec);
     --activeBackgroundSuccess: var(--colorSuccess40, #3fad46);
@@ -399,6 +456,8 @@
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #ffffff);
+
+    /* End - Variables used exclusively in the color palette property */
 }
 
 .default,

package/css/themes/custom/sandstone/custom-sandstone.css

@@ -255,6 +255,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorSuccess40, #93c54b);
     --btnDefault: var(--colorDefault40, #3e3f3a);
@@ -268,6 +269,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #3e3f3a);
 
+    --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, #3e3f3a);
     --colorPrimary: var(--colorPrimary40, #325d88);
@@ -292,8 +316,19 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #3e3f3a);
 
+    --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, #F1F1F1);
+    --toggleDefault: var(--colorDefault50, #363733);
     --togglePrimary: var(--colorPrimary40, #325d88);
     --toggleSuccess: var(--colorSuccess40, #93c54b);
     --toggleCalm: var(--colorCalm40, #29abe0);
@@ -304,6 +339,17 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #3e3f3a);
 
+    --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, #3e3f3a);
     --bgPrimary: var(--colorPrimary40, #325d88);
@@ -316,6 +362,17 @@
     --bgRoyal: var(--colorRoyal40, #886aea);
     --bgDark: var(--colorDark40, #3e3f3a);
 
+    --borderActiveBackgroundDefault: transparent;
+    --borderActiveBackgroundPrimary: transparent;
+    --borderActiveBackgroundSuccess: transparent;
+    --borderActiveBackgroundCalm: transparent;
+    --borderActiveBackgroundWarning: transparent;
+    --borderActiveBackgroundDanger: transparent;
+    --borderActiveBackgroundLight: transparent;
+    --borderActiveBackgroundStable: transparent;
+    --borderActiveBackgroundRoyal: transparent;
+    --borderActiveBackgroundDark: transparent;
+
     --activeBackgroundDefault: var(--colorDefault40, #3e3f3a);
     --activeBackgroundPrimary: var(--colorPrimary40, #325d88);
     --activeBackgroundSuccess: var(--colorSuccess40, #93c54b);
@@ -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 */
 }
 
 h1,

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,