ws-voice-infinity-global-module 1.11.2 → 1.11.4

package/lib/wsVoiceFontMap.scss

@@ -0,0 +1,2689 @@
+@import 'fontFaces.scss';
+@import 'variables.scss';
+@import 'wsVoiceColorMap';
+@import 'mixins.scss';
+
+/* Оставил для фолбэка */
+%ws-san-francisco-text-bold {
+  font-family: 'sanFranciscoTextBold', sans-serif !important;
+}
+
+%ws-font-weight-bold {
+  font-family: 'sanFranciscoTextBold', sans-serif !important;
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayBold', sans-serif !important;
+  }
+}
+
+/* *** PAGE-TITLE-1 *** */
+%ws-page-title-1 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextBold', sans-serif;
+  font-size: 48px;
+  line-height: 48px;
+
+  @include maxWidth(768) {
+    font-size: 38px;
+    line-height: 38px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 30px;
+    line-height: 30px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 28px;
+    line-height: 28px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoExtraBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+  }
+}
+
+.ws-page-title-1-primary {
+  @extend %ws-page-title-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-page-title-1-secondary {
+  @extend %ws-page-title-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-page-title-1-white {
+  @extend %ws-page-title-1;
+
+  color: $bs000;
+}
+
+/* *** PAGE-TITLE-2 *** */
+%ws-page-title-2 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextBold', sans-serif;
+  font-size: 52px;
+
+  @include maxWidth(768) {
+    font-size: 43px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 38px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 36px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+    font-size: 56px;
+
+    @include maxWidth(768) {
+      font-size: 40px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 36px;
+    }
+
+    @include maxWidth(375) {
+      font-size: 32px;
+    }
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoExtraBold', sans-serif;
+    font-size: 56px;
+
+    @include maxWidth(768) {
+      font-size: 40px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 36px;
+    }
+
+    @include maxWidth(375) {
+      font-size: 32px;
+    }
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+    font-size: 56px;
+
+    @include maxWidth(768) {
+      font-size: 40px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 36px;
+    }
+
+    @include maxWidth(375) {
+      font-size: 32px;
+    }
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+  }
+}
+
+.ws-page-title-2-primary {
+  @extend %ws-page-title-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-page-title-2-secondary {
+  @extend %ws-page-title-2;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-page-title-2-white {
+  @extend %ws-page-title-2;
+
+  color: $bs000;
+}
+
+/* *** PAGE-HEADER *** */
+%ws-page-header {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 40px;
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoExtraBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 64px;
+  }
+
+  @include maxWidth(768) {
+    font-size: 31px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 26px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 24px;
+  }
+}
+
+.ws-page-header-primary {
+  @extend %ws-page-header;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-page-header-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-page-header-secondary {
+  @extend %ws-page-header;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-page-header-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-page-header-white {
+  @extend %ws-page-header;
+
+  color: $bs000;
+}
+
+.ws-page-header-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** SUBHEADER-1 *** */
+%ws-subheader-1 {
+  color: $bs750;
+  font-family: 'robotoSlabBold', sans-serif;
+  font-size: 16px;
+
+  @include maxWidth(768) {
+    font-size: 15px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+    font-size: 18px;
+
+    @include maxWidth(768) {
+      font-size: 17px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 16px;
+    }
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+    font-size: 18px;
+
+    @include maxWidth(768) {
+      font-size: 17px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 16px;
+    }
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+    font-size: 18px;
+
+    @include maxWidth(768) {
+      font-size: 17px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 16px;
+    }
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+    font-size: 20px;
+  }
+}
+
+.ws-subheader-1-primary {
+  @extend %ws-subheader-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-subheader-1-secondary {
+  @extend %ws-subheader-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-subheader-1-white {
+  @extend %ws-subheader-1;
+
+  color: $bs000;
+}
+
+/* *** SUBHEADER-2 *** */
+%ws-subheader-2 {
+  color: $bs750;
+  font-family: 'robotoSlabBold', sans-serif;
+  font-size: 22px;
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplaySemibold', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+    font-size: 24px;
+  }
+  
+  @include maxWidth(768) {
+    font-size: 20px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 18px;
+  }
+}
+
+.ws-subheader-2-primary {
+  @extend %ws-subheader-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-subheader-2-secondary {
+  @extend %ws-subheader-2;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+
+  @include styleFor($apiriTemplate) {
+    color: $sg800;
+  }
+}
+
+.ws-subheader-2-white {
+  @extend %ws-subheader-2;
+
+  color: $bs000;
+}
+
+/* *** SUBHEADER-3 *** */
+%ws-subheader-3 {
+  color: $bs750;
+  font-family: 'robotoSlabBold', sans-serif;
+  font-size: 28px;
+
+  @include maxWidth(768) {
+    font-size: 24px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 21px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 20px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayBold', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-weight: bold;
+  }
+}
+
+.ws-subheader-3-primary {
+  @extend %ws-subheader-3;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-subheader-3-secondary {
+  @extend %ws-subheader-3;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-subheader-3-white {
+  @extend %ws-subheader-3;
+
+  color: $bs000;
+}
+
+/* *** SUBHEADER-4 *** */
+%ws-subheader-4 {
+  color: $bs750;
+  font-family: 'robotoSlabBold', sans-serif;
+  font-size: 36px;
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($kamTemplate) {
+    font-family: 'gothamProBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoCondensedBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplaySemibold', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 32px;
+    font-weight: bold;
+  }
+  
+  @include maxWidth(768) {
+    font-size: 30px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 26px;
+  }
+
+  @include maxWidth(375) {
+    font-size: 24px;
+  }
+}
+
+.ws-subheader-4-primary {
+  @extend %ws-subheader-4;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-subheader-4-secondary {
+  @extend %ws-subheader-4;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-subheader-4-white {
+  @extend %ws-subheader-4;
+
+  color: $bs000;
+}
+
+/* *** BODY-1 *** */
+%ws-body-1 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 15px;
+
+  @include maxWidth(768) {
+    font-size: 14px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 13px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-body-1-primary {
+  @extend %ws-body-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-body-1-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-secondary {
+  @extend %ws-body-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-body-1-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-white {
+  @extend %ws-body-1;
+
+  color: $bs000;
+}
+
+.ws-body-1-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-warning
+.ws-body-1-warning {
+  @extend %ws-body-1;
+
+  color: $oy600;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $oy500;
+  }
+}
+
+.ws-body-1-warning--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-success
+.ws-body-1-success {
+  @extend %ws-body-1;
+
+  color: $ae500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $gc400;
+  }
+}
+
+.ws-body-1-success--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-error {
+  @extend %ws-body-1;
+
+  color: $ru500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $ra300;
+  }
+}
+
+.ws-body-1-error--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-link
+.ws-body-1-link {
+  @extend %ws-body-1;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-1-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-progress
+.ws-body-1-progress {
+  @extend %ws-body-1;
+
+  color: $cb200;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-1-progress--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-gray {
+  @extend %ws-body-1;
+
+  color: $gray-color;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-gray;
+  }
+}
+
+.ws-body-1-gray--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-satisfaction-0
+.ws-body-1-satisfaction-zero {
+  @extend %ws-body-1;
+
+  color: $ru500;
+
+  @include styleFor($kamTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $ra300;
+  }
+}
+
+.ws-body-1-satisfaction-zero--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-satisfaction-low {
+  @extend %ws-body-1;
+
+  color: $oc500;
+
+  @include styleFor($r41Template) {
+    color: $ru090;
+  }
+}
+
+.ws-body-1-satisfaction-low--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old body-1-satisfaction-40
+.ws-body-1-satisfaction-regular {
+  @extend %ws-body-1;
+
+  color: $oy500;
+}
+
+.ws-body-1-satisfaction-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old body-1-satisfaction-60
+.ws-body-1-satisfaction-medium {
+  @extend %ws-body-1;
+
+  color: $ae100;
+}
+
+.ws-body-1-satisfaction-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-satisfaction-80
+.ws-body-1-satisfaction-high {
+  @extend %ws-body-1;
+
+  color: $ae500;
+
+  @include styleFor($kamTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $gc400;
+  }
+}
+
+.ws-body-1-satisfaction-high--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-action-secondary
+.ws-body-1-light {
+  @extend %ws-body-1;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-1-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-regular {
+  @extend %ws-body-1;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-body-1-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-medium {
+  @extend %ws-body-1;
+
+  color: $cb500;
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-body-1-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-1-dark {
+  @extend %ws-body-1;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-body-1-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** BODY-2 *** */
+%ws-body-2 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 16px;
+
+  @include maxWidth(768) {
+    font-size: 15px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-body-2-primary {
+  @extend %ws-body-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-body-2-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-secondary {
+  @extend %ws-body-2;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-body-2-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-white {
+  @extend %ws-body-2;
+
+  color: $bs000;
+}
+
+.ws-body-2-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old body-2-link
+.ws-body-2-link {
+  @extend %ws-body-2;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-2-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-progress {
+  @extend %ws-body-2;
+
+  color: $cb200;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-2-progress--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-gray {
+  @extend %ws-body-2;
+
+  color: $gray;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-gray;
+  }
+}
+
+.ws-body-2-gray--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-2-success
+.ws-body-2-success {
+  @extend %ws-body-2;
+
+  color: $ae500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $gc400;
+  }
+}
+
+.ws-body-2-success--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-2-warning
+.ws-body-2-warning {
+  @extend %ws-body-2;
+
+  color: $oy600;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $oy500;
+  }
+}
+
+.ws-body-2-warning--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-1-satisfaction-0
+.ws-body-2-satisfaction-zero {
+  @extend %ws-body-2;
+
+  color: $ru500;
+
+  @include styleFor($kamTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $ra300;
+  }
+}
+
+.ws-body-2-satisfaction-zero--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-satisfaction-low {
+  @extend %ws-body-2;
+
+  color: $oc500;
+
+  @include styleFor($r41Template) {
+    color: $ru090;
+  }
+}
+
+.ws-body-2-satisfaction-low--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-2-satisfaction-40
+.ws-body-2-satisfaction-regular {
+  @extend %ws-body-2;
+
+  color: $oy500;
+
+  @include styleFor($kamTemplate) {
+    color: $gm500;
+  }
+}
+
+.ws-body-2-satisfaction-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old body-2-satisfaction-60
+.ws-body-2-satisfaction-medium {
+  @extend %ws-body-2;
+
+  color: $ae100;
+}
+
+.ws-body-2-satisfaction-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-2-satisfaction-80
+.ws-body-2-satisfaction-high {
+  @extend %ws-body-2;
+
+  color: $ae500;
+
+  @include styleFor($kamTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $gc500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $gc400;
+  }
+}
+
+.ws-body-2-satisfaction-high--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-light {
+  @extend %ws-body-2;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-2-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-regular {
+  @extend %ws-body-2;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-body-2-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-medium {
+  @extend %ws-body-2;
+
+  color: $cb500;
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-body-2-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-2-dark {
+  @extend %ws-body-2;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-body-2-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** BODY-3 *** */
+%ws-body-3 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 18px;
+
+  @include maxWidth(768) {
+    font-size: 16px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 15px;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+
+  @include styleFor($skhTemplate) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-body-3-primary {
+  @extend %ws-body-3;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-body-3-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-secondary {
+  @extend %ws-body-3;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-body-3-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-white {
+  @extend %ws-body-3;
+
+  color: $bs000;
+}
+
+.ws-body-3-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-3-link
+.ws-body-3-link {
+  @extend %ws-body-3;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-3-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-3-action-secondary
+.ws-body-3-light {
+  @extend %ws-body-3;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-3-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-regular {
+  @extend %ws-body-3;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-body-3-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-medium {
+  @extend %ws-body-3;
+
+  color: $cb500;
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-body-3-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-3-dark {
+  @extend %ws-body-3;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-body-3-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** BODY-4 *** */
+%ws-body-4 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 24px;
+
+  @include maxWidth(768) {
+    font-size: 22px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 20px;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 22px;
+
+    @include maxWidth(768) {
+      font-size: 20px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 18px;
+    }
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+    font-size: 22px;
+
+    @include maxWidth(768) {
+      font-size: 20px;
+    }
+
+    @include maxWidth(480) {
+      font-size: 18px;
+    }
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 20px;
+
+    @include maxWidth(768) {
+      font-size: 18px;
+    }
+  }
+}
+
+.ws-body-4-primary {
+  @extend %ws-body-4;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-body-4-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-secondary {
+  @extend %ws-body-4;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-body-4-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-white {
+  @extend %ws-body-4;
+
+  color: $bs000;
+}
+
+.ws-body-4-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-green {
+  @extend %ws-body-4;
+
+  color: $green;
+}
+
+.ws-body-4-green--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-4-link
+.ws-body-4-link {
+  @extend %ws-body-4;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-4-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-peach {
+  @extend %ws-body-4;
+
+  color: $peach;
+}
+
+.ws-body-4-peach--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-blue-gray {
+  @extend %ws-body-4;
+
+  color: $blue-gray;
+
+  @include styleFor($kamTemplate) {
+    @extend %ws-font-weight-bold;
+
+    color: $kam-medium-blue;
+    font-size: 16px;
+  }
+}
+
+.ws-body-4-blue-gray--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - body-4-action-secondary
+.ws-body-4-light {
+  @extend %ws-body-4;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-body-4-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-regular {
+  @extend %ws-body-4;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-body-4-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-medium {
+  @extend %ws-body-4;
+
+  color: $cb500;
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-body-4-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-body-4-dark {
+  @extend %ws-body-4;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-body-4-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+/* *** LABEL-1 *** */
+%ws-label-1 {
+  background-color: inherit;
+  color: $bs750;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 14px;
+
+  @include maxWidth(768) {
+    font-size: 13px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 12px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayHeavy', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+// Old - label-primary
+.ws-label-1-primary {
+  @extend %ws-label-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+// Old - label-secondary
+.ws-label-1-secondary {
+  @extend %ws-label-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+// Old - label-white
+.ws-label-1-white {
+  @extend %ws-label-1;
+
+  color: $bs000;
+}
+
+/* *** LABEL-2 *** */
+%ws-label-2 {
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 14px;
+
+  @include maxWidth(768) {
+    font-size: 13px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 12px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayHeavy', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-label-2-primary {
+  @extend %ws-label-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+/* *** LABEL-3 *** */
+%ws-label-3 {
+  color: $bs750;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 16px;
+
+  @include maxWidth(768) {
+    font-size: 15px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayHeavy', sans-serif;
+  }
+
+  @include styleFor($apiriTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+}
+
+.ws-label-3-primary {
+  @extend %ws-label-3;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+/* *** CAPTION-1 *** */
+%ws-caption-1 {
+  color: $bs750;
+  font-family: 'sanFranciscoTextRegular', sans-serif;
+  font-size: 13px;
+
+  @include maxWidth(768) {
+    font-size: 12px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 11px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratRegular', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoRegular', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoRegular', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayRegular', sans-serif;
+  }
+}
+
+// Old - caption-primary
+.ws-caption-1-primary {
+  @extend %ws-caption-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-caption-1-primary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-secondary
+.ws-caption-1-secondary {
+  @extend %ws-caption-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-caption-1-secondary--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-white
+.ws-caption-1-white {
+  @extend %ws-caption-1;
+
+  color: $bs000;
+}
+
+.ws-caption-1-white--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-light {
+  @extend %ws-caption-1;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-caption-1-light--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-regular {
+  @extend %ws-caption-1;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-caption-1-regular--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-medium {
+  @extend %ws-caption-1;
+
+  color: $cb500;
+
+  @include styleFor($adTemplate) {
+    color: $ra800;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss200;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-caption-1-medium--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-dark {
+  @extend %ws-caption-1;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-caption-1-dark--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-peach {
+  @extend %ws-caption-1;
+
+  color: $peach;
+}
+
+.ws-caption-1-peach--bold {
+  @extend %ws-font-weight-bold;
+}
+
+.ws-caption-1-gray-title {
+  @extend %ws-caption-1;
+
+  color: $gray-title;
+}
+
+.ws-caption-1-gray-title--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-warning
+.ws-caption-1-warning {
+  @extend %ws-caption-1;
+
+  color: $oy600;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $ev500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $oy500;
+  }
+}
+
+.ws-caption-1-warning--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-error
+.ws-caption-1-error {
+  @extend %ws-caption-1;
+
+  color: $ru500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $ra300;
+  }
+}
+
+.ws-caption-1-error--bold {
+  @extend %ws-font-weight-bold;
+}
+
+// Old - caption-link
+.ws-caption-1-link {
+  @extend %ws-caption-1;
+
+  color: $de500;
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-caption-1-link--bold {
+  @extend %ws-font-weight-bold;
+}
+
+%ws-action-1 {
+  color: $bs750;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 16px;
+
+  @include maxWidth(768) {
+    font-size: 15px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 14px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayBold', sans-serif;
+  }
+}
+
+.ws-action-1-primary {
+  @extend %ws-action-1;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-action-1-secondary {
+  @extend %ws-action-1;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-action-1-white {
+  @extend %ws-action-1;
+
+  color: $bs000;
+}
+
+.ws-action-1-action-secondary {
+  @extend %ws-action-1;
+
+  color: $action-secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+}
+
+// Old - action-1-link
+.ws-action-1-link {
+  @extend %ws-action-1;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-action-1-light {
+  @extend %ws-action-1;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-action-1-regular {
+  @extend %ws-action-1;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+// Old - action-1-medium-blue
+.ws-action-1-medium {
+  @extend %ws-action-1;
+
+  color: $cb500;
+
+  @include styleFor($adTemplate) {
+    color: $ra800;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss200;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-action-1-dark {
+  @extend %ws-action-1;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-action-1-peach {
+  @extend %ws-action-1;
+
+  color: $peach;
+}
+
+%ws-action-2 {
+  color: $bs750;
+  font-family: 'sourceSansProBold', sans-serif;
+  font-size: 18px;
+
+  @include maxWidth(768) {
+    font-size: 16px;
+  }
+
+  @include maxWidth(480) {
+    font-size: 15px;
+  }
+
+  @include styleFor($zabTemplate) {
+    font-family: 'montserratBold', sans-serif;
+  }
+
+  @include styleFor($adTemplate) {
+    font-family: 'robotoBold', sans-serif;
+  }
+
+  @include styleFor($usrTemplate) {
+    font-family: 'latoBold', sans-serif;
+  }
+
+  @include styleFor($r41Template) {
+    font-family: 'sfUiDisplayMedium', sans-serif;
+  }
+}
+
+.ws-action-2-primary {
+  @extend %ws-action-2;
+
+  @include styleFor($kamTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs900;
+  }
+
+  @include styleFor($r41Template) {
+    color: $dss900;
+  }
+}
+
+.ws-action-2-secondary {
+  @extend %ws-action-2;
+
+  color: $pb500;
+
+  @include styleFor($kamTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $bs080;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss090;
+  }
+}
+
+.ws-action-2-white {
+  @extend %ws-action-2;
+
+  color: $bs000;
+}
+
+.ws-action-2-link {
+  @extend %ws-action-2;
+
+  color: $de500;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-regular-blue;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra500;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr600;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-action-2-light {
+  @extend %ws-action-2;
+
+  color: $cb200;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+
+  @include styleFor($zabTemplate) {
+    color: $bs250;
+  }
+
+  @include styleFor($adTemplate) {
+    color: $ra400;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $sr500;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab500;
+  }
+}
+
+.ws-action-2-regular {
+  @extend %ws-action-2;
+
+  color: $de500;
+
+  @include styleFor($r41Template) {
+    color: $cab700;
+  }
+}
+
+.ws-action-2-medium {
+  @extend %ws-action-2;
+
+  color: $cb500;
+
+  @include styleFor($adTemplate) {
+    color: $ra800;
+  }
+
+  @include styleFor($usrTemplate) {
+    color: $dss200;
+  }
+
+  @include styleFor($r41Template) {
+    color: $cab800;
+  }
+}
+
+.ws-action-2-dark {
+  @extend %ws-action-2;
+
+  color: $cb900;
+
+  @include styleFor($r41Template) {
+    color: $dss800;
+  }
+}
+
+.ws-action-2-action-secondary {
+  @extend %ws-action-2;
+
+  color: $action-secondary;
+
+  @include styleFor($kamTemplate) {
+    color: $kam-action-secondary;
+  }
+}