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

package/css/themes/custom/dsgov/button-dsgov.css

@@ -20,12 +20,13 @@
 }
 
 /* Positive */
-.button.button-positive{
-    background: transparent;    
+.button.button-positive {
+    background: transparent;
     border: 1px solid var(--colorPrimary40, #1351b4);
 }
 
-.button.button-positive span, .button.button-positive i{
+.button.button-positive span,
+.button.button-positive i {
     color: var(--colorPrimary40, #1351b4);
 }
 
@@ -33,7 +34,7 @@
 .button.button-positive:active,
 .button.button-positive:focus,
 .button.button-positive:hover {
-    background: var(--colorPrimary10, #d6daeb);   
+    background: var(--colorPrimary10, #d6daeb);
     border: 1px solid var(--colorPrimary40, #1351b4);
 }
 
@@ -105,37 +106,35 @@
 
 /* Stable */
 .button.button-stable {
-    background: var(--colorLight40, #dddddd);
-    color: var(--textColorLight40, #383838);
+    background: var(--colorStable40, #f8f8f8);
+    color: var(--textColorStable40, #444444);
 }
 
 .button.button-stable.active,
 .button.button-stable:active,
 .button.button-stable:focus,
 .button.button-stable:hover {
-    color: var(--textColorLight40, #383838);
-    background: var(--colorLight50, #c2c2c2);
+    color: var(--textColorStable40, #444444);
+    background: var(--colorStable50, #c2c2c2);
 }
 
 /* Light */
 .button.button-light {
-    background: transparent;
-    color: var(--colorPrimary40, #1351b4);
-    border: 1px solid var(--colorPrimary40, #1351b4);
+    background: var(--colorLight40, #ffffff);
+    color: var(--textColorLight40, #000000);
 }
 
 .button.button-light.active,
 .button.button-light:active,
 .button.button-light:focus,
 .button.button-light:hover {
-    background: var(--colorPrimary10, #d6daeb);
-    color: var(--colorPrimary40, #1351b4);
-    border: 1px solid var(--colorPrimary40, #1351b4);
+    background: var(--colorLight40, #ffffff);
+    color: var(--textColorLight40, #000000);
 }
 
 .button.button-light span,
 .button.button-light i {
-    color: var(--colorPrimary40, #1351b4);
+    color: var(--textColorLight40, #000000);
 }
 
 /* Link */
@@ -169,4 +168,86 @@
 .button.button-link:focus i,
 .button.button-link:hover i {
     text-decoration: none;
+}
+
+/* Light - Outline */
+
+.button.button-light.button-outline {
+    border-color: var(--colorLight50, #dfdfdf);
+}
+
+.button.button-light.button-outline span,
+.button.button-light.button-outline i {
+    color: var(--colorLight50, #dfdfdf);
+}
+
+.button.button-light.button-outline:active,
+.button.button-light.button-outline.activated {
+    background: var(--colorLight50, #dfdfdf);
+}
+
+/* Stable - Outline */
+.button.button-stable.button-outline {
+    border-color: var(--colorStable50, #d9d9d9);
+}
+
+.button.button-stable.button-outline span,
+.button.button-stable.button-outline i {
+    color: var(--colorStable50, #d9d9d9);
+}
+
+.button.button-stable.button-outline:active,
+.button.button-stable.button-outline.activated {
+    background: var(--colorStable50, #d9d9d9);
+}
+
+/* Colors */
+.button span.default,
+.button i.default {
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.button span.light,
+.button i.light {
+    color: var(--colorPrimary40, #1351b4);
+}
+
+.button span.stable,
+.button i.stable {
+    color: var(--textColorStable40, #f8f8f8);
+}
+
+.button span.positive,
+.button i.positive {
+    color: var(--colorPrimary40, #1351b4);
+}
+
+.button span.calm,
+.button i.calm {
+    color: var(--textColorCalm40, #ffffff);
+}
+
+.button span.assertive,
+.button i.assertive {
+    color: var(--textColorDanger40, #ffffff);
+}
+
+.button span.balanced,
+.button i.balanced {
+    color: var(--textColorSuccess40, #ffffff);
+}
+
+.button span.energized,
+.button i.energized {
+    color: var(--textColorWarning40, #ffffff);
+}
+
+.button span.royal,
+.button i.royal {
+    color: var(--textColorRoyal40, #ffffff);
+}
+
+.button span.dark,
+.button i.dark {
+    color: var(--textColorDark40, #ffffff);
 }

package/css/themes/custom/dsgov/custom-dsgov.css

@@ -259,20 +259,43 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
-
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #1351b4);
     --btnDefault: var(--colorDefault40, #1351b4);
-    --btnPrimary: var(--colorPrimary40, #1351b4);
+    --btnPrimary: transparent;
     --btnSuccess: var(--colorSuccess40, #168821);
     --btnCalm: var(--colorCalm40, #3b448e);
     --btnWarning: var(--colorWarning40, #ffcd07);
     --btnDanger: var(--colorDanger40, #e52207);
-    --btnLight: var(--colorLight40, #ffffff);
+    --btnLight: transparent;
     --btnStable: var(--colorStable40, #f8f8f8);
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #444444);
 
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--colorPrimary40, #1351b4);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--colorPrimary40, #1351b4);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: transparent;
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: var(--colorPrimary40, #1351b4);
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: var(--colorPrimary40, #1351b4);
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #1351b4);
     --colorPrimary: var(--colorPrimary40, #1351b4);
@@ -286,17 +309,28 @@
     --colorDark: var(--colorDark40, #444444);
 
     /* Components - Checkbox */
-    --checkboxDefault: var(--colorDefault30, #909090);
+    --checkboxDefault: var(--colorDefault40, #909090);
     --checkboxPrimary: var(--colorPrimary40, #1351b4);
     --checkboxSuccess: var(--colorSuccess40, #168821);
     --checkboxCalm: var(--colorCalm40, #3b448e);
     --checkboxWarning: var(--colorWarning40, #ffcd07);
     --checkboxDanger: var(--colorDanger40, #e52207);
-    --checkboxLight: var(--textColorLight40, #444444);
+    --checkboxLight: var(--textColorDefault40, #ffffff);
     --checkboxStable: var(--colorStable40, #f8f8f8);
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: var(--colorDefault40, #3b448e);
+    --borderCheckboxPrimary: var(--colorPrimary40, #1351b4);
+    --borderCheckboxSuccess: var(--colorSuccess40, #168821);
+    --borderCheckboxCalm: var(--colorCalm40, #11c3b448ef3);
+    --borderCheckboxWarning: var(--colorWarning40, #ffcd07);
+    --borderCheckboxDanger: var(--colorDanger40, #e52207);
+    --borderCheckboxLight: var(--colorDefault40, #1351b4);
+    --borderCheckboxStable: var(--colorStable60, #f8f8f8);
+    --borderCheckboxRoyal: var(--colorRoyal40, #886aea);
+    --borderCheckboxDark: var(--colorDark40, #444444);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #1351b4);
     --togglePrimary: var(--colorPrimary40, #1351b4);
@@ -309,24 +343,46 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #444444);
 
+    --borderToggleDefault: var(--colorDefault40, #2ca4a8);
+    --borderTogglePrimary: var(--colorPrimary40, #1351b4);
+    --borderToggleSuccess: var(--colorSuccess40, #168821);
+    --borderToggleCalm: var(--colorCalm40, #3b448e);
+    --borderToggleWarning: var(--colorWarning40, #ffcd07);
+    --borderToggleDanger: var(--colorDanger40, #e52207);
+    --borderToggleLight: var(--colorDefault40, #1351b4);
+    --borderToggleStable: var(--colorStable50, #9c9c9c);
+    --borderToggleRoyal: var(--colorRoyal40, #886aea);
+    --borderToggleDark: var(--colorDark40, #444444);
+
     /* Components - Tabs - crn-ion-segment */
-    --bgDefault: var(--colorDefault40, #1351b4);
-    --bgPrimary: var(--colorPrimary40, #1351b4);
-    --bgSuccess: var(--colorSuccess40, #168821);
-    --bgCalm: var(--colorCalm40, #3498db);
-    --bgWarning: var(--colorWarning40, #f39c12);
-    --bgDanger: var(--colorDanger40, #e74c3c);
-    --bgLight: var(--textColorDefault40, #ffffff);
-    --bgStable: var(--colorStable40, #f8f8f8);
-    --bgRoyal: var(--colorRoyal40, #886aea);
-    --bgDark: var(--colorDark40, #444444);
+    --bgDefault: var(--colorDefault10, #d6daeb);
+    --bgPrimary: var(--colorPrimary10, #d6daeb);
+    --bgSuccess: var(--colorSuccess10, #d6e2d6);
+    --bgCalm: var(--colorCalm10, #d8d9e3);
+    --bgWarning: var(--colorWarning10, #fff1d5);
+    --bgDanger: var(--colorDanger10, #f7d6d5);
+    --bgLight: var(--textColorDefault10, #ffffff);
+    --bgStable: var(--colorStable10, #fdfdfd);
+    --bgRoyal: var(--colorRoyal10, #e2ddf9);
+    --bgDark: var(--colorDark10, #d9d9d9);
+
+    --borderActiveBackgroundDefault: var(--colorDefault40, #f5f5f5);
+    --borderActiveBackgroundPrimary: var(--colorPrimary40, #1351b4);
+    --borderActiveBackgroundSuccess: var(--colorSuccess40, #168821);
+    --borderActiveBackgroundCalm: var(--colorCalm40, #3b448e);
+    --borderActiveBackgroundWarning: var(--colorWarning40, #ffcd07);
+    --borderActiveBackgroundDanger: var(--colorDanger50, #c71c22);
+    --borderActiveBackgroundLight: var(--colorLight40, #ffffff);
+    --borderActiveBackgroundStable: var(--colorStable40, #f8f8f8);
+    --borderActiveBackgroundRoyal: var(--colorRoyal40, #886aea);
+    --borderActiveBackgroundDark: var(--colorDark40, #444444);
 
     --activeBackgroundDefault: var(--colorDefault40, #1351b4);
     --activeBackgroundPrimary: var(--colorPrimary40, #1351b4);
     --activeBackgroundSuccess: var(--colorSuccess40, #168821);
-    --activeBackgroundCalm: var(--colorCalm40, #3498db);
-    --activeBackgroundWarning: var(--colorWarning40, #f39c12);
-    --activeBackgroundDanger: var(--colorDanger40, #e74c3c);
+    --activeBackgroundCalm: var(--colorCalm40, #3b448e);
+    --activeBackgroundWarning: var(--colorWarning40, #ffcd07);
+    --activeBackgroundDanger: var(--colorDanger40, #e52207);
     --activeBackgroundLight: var(--textColorDefault40, #ffffff);
     --activeBackgroundStable: var(--colorStable40, #f8f8f8);
     --activeBackgroundRoyal: var(--colorRoyal40, #886aea);
@@ -343,24 +399,24 @@
     --ionSegmentRoyal: var(--textColorRoyal40, #ffffff);
     --ionSegmentDark: var(--textColorDark40, #ffffff);
 
-    --iconThemeLightDefault: var(--textColorDefault40, #ffffff);
-    --iconThemeLightPrimary: var(--textColorPrimary40, #ffffff);
-    --iconThemeLightSuccess: var(--textColorSuccess40, #ffffff);
-    --iconThemeLightCalm: var(--textColorCalm40, #ffffff);
-    --iconThemeLightWarning: var(--textColorWarning40, #ffffff);
-    --iconThemeLightDanger: var(--textColorDanger40, #ffffff);
+    --iconThemeLightDefault: var(--colorDefault40, #ffffff);
+    --iconThemeLightPrimary: var(--colorPrimary40, #1351b4);
+    --iconThemeLightSuccess: var(--colorSuccess40, #168821);
+    --iconThemeLightCalm: var(--colorCalm40, #3b448e);
+    --iconThemeLightWarning: var(--colorWarning40, #ffcd07);
+    --iconThemeLightDanger: var(--colorDanger40, #e52207);
     --iconThemeLightLight: var(--colorDefault40, #1351b4);
-    --iconThemeLightStable: var(--textColorStable40, #444444);
-    --iconThemeLightRoyal: var(--textColorRoyal40, #ffffff);
-    --iconThemeLightDark: var(--textColorDark40, #ffffff);
+    --iconThemeLightStable: var(--colorStable40, #f8f8f8);
+    --iconThemeLightRoyal: var(--colorRoyal40, #886aea);
+    --iconThemeLightDark: var(--colorDark40, #444444);
 
     /* Components - Old Tabs - pallete false */
     --tabsDefault: var(--colorDefault40, #1351b4);
     --tabsPrimary: var(--colorPrimary40, #1351b4);
     --tabsSuccess: var(--colorSuccess40, #168821);
     --tabsCalm: var(--colorCalm40, #3498db);
-    --tabsWarning: var(--colorWarning40, #f39c12);
-    --tabsDanger: var(--colorDanger40, #e74c3c);
+    --tabsWarning: var(--colorWarning40, #ffcd07);
+    --tabsDanger: var(--colorDanger40, #e52207);
     --tabsLight: var(--colorLight40, #ffffff);
     --tabsStable: var(--colorStable40, #f8f8f8);
     --tabsRoyal: var(--colorRoyal40, #886aea);
@@ -372,7 +428,7 @@
     --barSuccess: var(--colorSuccess40, #168821);
     --barCalm: var(--colorCalm40, #3498db);
     --barWarning: var(--colorWarning40, #f39c12);
-    --barDanger: var(--colorDanger40, #e74c3c);
+    --barDanger: var(--colorDanger40, #e52207);
     --barLight: var(--colorLight40, #ffffff);
     --barStable: var(--colorStable40, #f8f8f8);
     --barRoyal: var(--colorRoyal40, #886aea);
@@ -383,8 +439,8 @@
     --backgroundPrimary: var(--colorDefault40, #1351b4);
     --backgroundSuccess: var(--colorSuccess40, #168821);
     --backgroundCalm: var(--colorCalm40, #3498db);
-    --backgroundWarning: var(--colorWarning40, #f39c12);
-    --backgroundDanger: var(--colorDanger40, #e74c3c);
+    --backgroundWarning: var(--colorWarning40, #ffcd07);
+    --backgroundDanger: var(--colorDanger40, #e52207);
     --backgroundLight: var(--colorLight40, #ffffff);
     --backgroundStable: var(--colorStable40, #f8f8f8);
     --backgroundRoyal: var(--colorRoyal40, #886aea);
@@ -396,10 +452,11 @@
     --tabsIconCalm: var(--textColorCalm40, #ffffff);
     --tabsIconWarning: var(--textColorWarning40, #ffffff);
     --tabsIconDanger: var(--textColorDanger40, #ffffff);
-    --tabsIconLight: var(--colorDefault40, #ffffff);
+    --tabsIconLight: var(--colorDefault40, #1351b4);
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #ffffff);
+    /* End - Variables used exclusively in the color palette property */
 }
 
 a,
@@ -452,6 +509,14 @@ h6 {
     font-size: calc(var(--textSmallSize, 14px) + 2.8px);
 }
 
+.font-size-default {
+    font-size: calc(var(--textNormalSize, 24.19px) + 3.36px);
+}
+
+.font-size-big {
+    font-size: var(--textMediumSize, 24.19px);
+}
+
 p,
 span,
 label,
@@ -462,11 +527,11 @@ input,
     font-family: var(--fontFamily, "Rawline", "Raleway", sans-serif);
 }
 
-.color-light {
+.color-light, .light {
     color: var(--colorLight50, #dfdfdf);
 }
 
-.color-stable {
+.color-stable, .stable {
     color: var(--colorStable50, #d9d9d9);
 }
 
@@ -634,6 +699,10 @@ div.crn-ion-segment-light.icon-theme-light-light li a,
     color: var(--colorDefault30, #7c8ec8);
 }
 
+div.crn-ion-segment-light .icon-theme-light-light li.active {
+    border-color: var(--colorDefault30, #7c8ec8);
+}
+
 .crn-ion-segment-modern ul.active-background-light li.active a,
 .crn-ion-segment-classic ul.active-background-light li.active a {
     color: var(--colorDefault40, #1351b4);
@@ -763,16 +832,6 @@ div.crn-ion-segment-light.icon-theme-light-light li a,
     box-shadow: 0 1px 6px rgb(0 0 0 / 16%);
 }
 
-.item h2,
-.item h1 {
-    color: var(--colorPrimary40, #1351b4);
-}
-
-.item h3,
-.item p {
-    color: var(--textColor40, #383838);
-}
-
 .card .item {
     background: var(--colorNeutral00, #ffffff);
     border: 0;

package/css/themes/custom/flatly/custom-flatly.css

@@ -258,6 +258,7 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorSuccess40, #18bc9c);
     --btnDefault: var(--colorDefault40, #798d8f);
@@ -271,6 +272,29 @@
     --btnRoyal: var(--colorRoyal40, #886aea);
     --btnDark: var(--colorDark40, #7b8a8b);
 
+    --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, #798d8f);
     --colorPrimary: var(--colorPrimary40, #2c3e50);
@@ -295,6 +319,17 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #7b8a8b);
 
+    --borderCheckboxDefault: transparent;
+    --borderCheckboxPrimary: transparent;
+    --borderCheckboxSuccess: transparent;
+    --borderCheckboxCalm: transparent;
+    --borderCheckboxWarning: transparent;
+    --borderCheckboxDanger: transparent;
+    --borderCheckboxLight: transparent;
+    --borderCheckboxStable: transparent;
+    --borderCheckboxRoyal: transparent;
+    --borderCheckboxDark: transparent;
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #3c3c3c);
     --togglePrimary: var(--colorPrimary40, #375a7f);
@@ -307,6 +342,17 @@
     --toggleRoyal: var(--colorRoyal40, #886aea);
     --toggleDark: var(--colorDark40, #444444);
 
+    --borderToggleDefault: transparent;
+    --borderTogglePrimary: transparent;
+    --borderToggleSuccess: transparent;
+    --borderToggleCalm: transparent;
+    --borderToggleWarning: transparent;
+    --borderToggleDanger: transparent;
+    --borderToggleLight: transparent;
+    --borderToggleStable: transparent;
+    --borderToggleRoyal: transparent;
+    --borderToggleDark: transparent;
+
     /* Components - Tabs - crn-ion-segment */
     --bgDefault: var(--colorDefault40, #3c3c3c);
     --bgPrimary: var(--colorPrimary40, #375a7f);
@@ -319,6 +365,17 @@
     --bgRoyal: var(--colorRoyal40, #886aea);
     --bgDark: var(--colorDark40, #444444);
 
+    --borderActiveBackgroundDefault: transparent;
+    --borderActiveBackgroundPrimary: transparent;
+    --borderActiveBackgroundSuccess: transparent;
+    --borderActiveBackgroundCalm: transparent;
+    --borderActiveBackgroundWarning: transparent;
+    --borderActiveBackgroundDanger: transparent;
+    --borderActiveBackgroundLight: transparent;
+    --borderActiveBackgroundStable: transparent;
+    --borderActiveBackgroundRoyal: transparent;
+    --borderActiveBackgroundDark: transparent;
+
     --activeBackgroundDefault: var(--colorDefault40, #3c3c3c);
     --activeBackgroundPrimary: var(--colorPrimary40, #375a7f);
     --activeBackgroundSuccess: var(--colorSuccess40, #00bc8c);
@@ -397,7 +454,9 @@
     --tabsIconLight: var(--textColorLight40, #ffffff);
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
-    --tabsIconDark: var(--textColorDark40, #ffffff); 
+    --tabsIconDark: var(--textColorDark40, #ffffff);
+
+    /* End - Variables used exclusively in the color palette property */
 }
 
 h1,

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

@@ -144,17 +144,16 @@
 
 /* stable */
 .button.button-stable {
-    background: var(--colorLight40, #ffffff);
-    border: 1px solid var(--textColor20, #b2b2b2);
-    color: var(--textColor40, #383838);
+    background: var(--colorStable40, #f8f8f8);
+    border-color: transparent;    
 }
 
 .button.button-stable.active,
 .button.button-stable:active,
 .button.button-stable:focus,
 .button.button-stable:hover {
-    background: var(--colorLight50, #dfdfdf);
-    border-color: var(--colorLight50, #dfdfdf);
+    background: var(--colorStable50, #d9d9d9);
+    border-color: transparent;
 }
 
 .button.button-stable span,
@@ -167,22 +166,21 @@
 .button.button-stable:active i,
 .button.button-stable:focus i,
 .button.button-stable:hover i {
-    color: var(--textColor40, #383838);
+    color: var(--textColorStable40, #444444);
 }
 
 /* calm */
 .button.button-calm {
-    background: var(--colorCalm40, #ffffff);
-    border-color: transparent;
-    color: var(--textColorCalm40, #ffffff);
+    background: var(--colorLight40, #ffffff);
+    border: 1px solid var(--textColor20, #b2b2b2);
 }
 
 .button.button-calm.active,
 .button.button-calm:active,
 .button.button-calm:focus,
 .button.button-calm:hover {
-    color: var(--textColorCalm40, #ffffff);
-    background: var(--colorCalm30, #f7b97c);
+    color: var(--textColor40, #383838);
+    background: var(--textColor20, #b2b2b2);
 }
 
 .button.button-calm span,
@@ -195,7 +193,7 @@
 .button.button-calm:active i,
 .button.button-calm:focus i,
 .button.button-calm:hover i {
-    color: var(--textColorCalm40, #ffffff);
+    color: var(--textColor40, #383838);
 }
 
 /* positive */
@@ -280,4 +278,85 @@
 .button.button-dark:focus i,
 .button.button-dark:hover i {
     color: var(--textColorDark40, #000000);
+}
+
+/* Light - Outline */
+.button.button-light.button-outline {
+    border-color: var(--colorLight50, #dfdfdf);
+}
+
+.button.button-light.button-outline span,
+.button.button-light.button-outline i {
+    color: var(--colorLight50, #dfdfdf);
+}
+
+.button.button-light.button-outline:active,
+.button.button-light.button-outline.activated {
+    background: var(--colorLight50, #dfdfdf);
+}
+
+/* Stable - Outline */
+.button.button-stable.button-outline {
+    border-color: var(--colorStable50, #d9d9d9);
+}
+
+.button.button-stable.button-outline span,
+.button.button-stable.button-outline i {
+    color: var(--colorStable50, #d9d9d9);
+}
+
+.button.button-stable.button-outline:active,
+.button.button-stable.button-outline.activated {
+    background: var(--colorStable50, #d9d9d9);
+}
+
+/* Colors */
+.button span.default,
+.button i.default {
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.button span.light,
+.button i.light {
+    color: var(--textColor40, #383838);
+}
+
+.button span.stable,
+.button i.stable {
+    color: var(--textColorStable40, #f8f8f8);
+}
+
+.button span.positive,
+.button i.positive {
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.button span.calm,
+.button i.calm {
+    color: var(--textColorCalm40, #ffffff);
+}
+
+.button span.assertive,
+.button i.assertive {
+    color: var(--textColorDanger40, #ffffff);
+}
+
+.button span.balanced,
+.button i.balanced {
+    color: var(--textColorSuccess40, #ffffff);
+}
+
+.button span.energized,
+.button i.energized {
+    color: var(--textColorWarning40, #ffffff);
+}
+
+.button span.royal,
+.button i.royal {
+    color: var(--textColorRoyal40, #ffffff);
+}
+
+.button span.dark,
+.button i.dark {
+    color: var(--textColorDark40, #ffffff);
 }