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

package/components/crn-checkbox.components.json

@@ -270,6 +270,8 @@
       "displayName_pt_BR": "Valor Inicial",
       "displayName_en_US": "Initial Value",
       "type": "logic",
+      "onSave": "javascript:function() { var result = arguments[0]; let elem = this.currentObject.find('input[type=checkbox]'); if (elem && elem[0]) { elem[0].checked = (result == 'Sim' || result == 'true');  } return result; }",
+      "onDisplay": "javascript:function() { var result = arguments[0]; let elem = this.currentObject.find('input[type=checkbox]'); if (elem && elem[0]) { elem[0].checked = (result == 'Sim' || result == 'true');  } return result; }",
       "order": 4
     },
     {

package/components/crn-component.components.json

@@ -13,13 +13,13 @@
   ],
   "designTimeHTML": "<img src=\"node_modules/cronapp-framework-mobile-js/img/web.png\" style=\"height: 80px; width: 80px; margin: auto; display: table-cell; vertical-align: middle; text-align: center;\">",
   "designTimeSelector": "crn-component",
-  "template": "<crn-component origin=\"\"></crn-component>",
+  "template": "<crn-component origin=\"\" params=\"\"></crn-component>",
   "properties": {
     "class": {
       "order": 9999
     },
     "id": {
-      "order": 3
+      "order": 1
     }
   },
   "childrenProperties": [
@@ -30,7 +30,14 @@
       "displayName_en_US": "Component",
       "resourceType": "text/html",
       "extraOptions": {
-        "underComponentsFolder": true
+        "underComponentsFolder": true,
+        "returnAction" : [ 
+          { 
+            "regExp" : "screen-params=\"(.*?)\"",
+            "selector" : "crn-component[params]",
+            "property" : "params"
+          }
+        ]
       },
       "selector": "crn-component[origin]",
       "mandatory": true,
@@ -38,6 +45,14 @@
       "underViewsFolder" : true,
       "webPath" : true,
       "order": 1
+    },
+    {
+      "name": "params",
+      "displayName_pt_BR": "Parametros",
+      "displayName_en_US": "Parameters",
+      "selector": "crn-component[params]",
+      "removable": false,
+      "order": 3
     }
   ]
 }

package/components/crn-item-select.components.json

@@ -31,6 +31,9 @@
     "id": {
       "order": 1
     },
+    "value" : {
+      "order": 2
+    },
     "class": {
       "order": 9999
     },
@@ -62,7 +65,7 @@
   "childrenProperties": [
     {
       "name": "content",
-      "selector": "self",
+      "selector": ":self",
       "type": "content"
     }
   ]

package/components/crn-toggle.components.json

@@ -33,6 +33,8 @@
     {
       "name": "ng-initial-value",
       "selector": "input",
+      "onSave": "javascript:function() { var result = arguments[0]; let elem = this.currentObject.find('input[type=checkbox]'); if (elem && elem[0]) { elem[0].checked = (result == 'Sim' || result == 'true');  } return result; }",
+      "onDisplay": "javascript:function() { var result = arguments[0]; let elem = this.currentObject.find('input[type=checkbox]'); if (elem && elem[0]) { elem[0].checked = (result == 'Sim' || result == 'true');  } return result; }",
       "order": 3
     },
     {

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" href="" xattr-text-position="text-left">
+    <a data-component="crn-list-item-thumbnail" class="item item-thumbnail-left text-left" xattr-position="item-thumbnail-left" 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,