scu-web-components 0.0.57 → 0.0.59

package/dist/tokens/source/componentScssMixins.scss

@@ -6808,11 +6808,18 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+  } @else {
+    border-color: var( --scw-color-primary );
+  } 
 }
 
 @mixin comp-scw-link-default--sizing {
@@ -7054,16 +7061,16 @@
 }
 
 @mixin comp-scw-link-design-text--sizing {
-  width: 39px;
-  height: 25px;
+  width: 43px;
+  height: 28px;
 }
 
 @mixin comp-scw-link-design-text--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-design-text--height {
-  height: 25px;
+  height: 28px;
 }
 
 @mixin comp-scw-link-design-text--padding {
@@ -7091,25 +7098,25 @@
 @mixin comp-scw-link-design-text--absolute-layout {
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 36.1 );
-  width: 39px;
+  width: 43px;
   top: calc( var( --scw-spacing-1 ) * 2.7 );
-  height: 25px; 
+  height: 28px; 
 }
 
 @mixin comp-scw-link-design-text--html-autolayout-margins {
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 36.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 3.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.7 );
   margin-top: calc( var( --scw-spacing-1 ) * 2.7 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 40.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 39.8 );
 }
 
 @mixin comp-scw-link-design-text--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 36.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 3.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.7 );
   padding-top: calc( var( --scw-spacing-1 ) * 2.7 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 40.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 39.8 );
 }
 
 
@@ -7117,7 +7124,7 @@
   $themeVar: false
 ) { 
   text-align: LEFT;
-  font: var( --scw-type-text-font );
+  font: var( --scw-type-text-06-font );
   @if $themeVar {
     color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
   } @else {
@@ -7126,16 +7133,16 @@
 }
 
 @mixin comp-scw-link-design-text-label--sizing {
-  width: 39px;
-  height: 24px;
+  width: 43px;
+  height: 27px;
 }
 
 @mixin comp-scw-link-design-text-label--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-design-text-label--height {
-  height: 24px;
+  height: 27px;
 }
 
 @mixin comp-scw-link-design-text-label--padding {
@@ -7179,12 +7186,12 @@
 }
 
 @mixin comp-scw-link-design-text-underline--sizing {
-  width: 39px;
+  width: 43px;
   height: 1px;
 }
 
 @mixin comp-scw-link-design-text-underline--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-design-text-underline--height {
@@ -7210,7 +7217,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 2.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 2.7 );
   margin-bottom: 0px;
 }
 
@@ -7218,7 +7225,7 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 2.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 2.7 );
   padding-bottom: 0px;
 }
 
@@ -7235,16 +7242,16 @@
 }
 
 @mixin comp-scw-link-state-hover-design-text--sizing {
-  width: 39px;
-  height: 25px;
+  width: 43px;
+  height: 28px;
 }
 
 @mixin comp-scw-link-state-hover-design-text--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-hover-design-text--height {
-  height: 25px;
+  height: 28px;
 }
 
 @mixin comp-scw-link-state-hover-design-text--padding {
@@ -7272,25 +7279,25 @@
 @mixin comp-scw-link-state-hover-design-text--absolute-layout {
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 36.1 );
-  width: 39px;
+  width: 43px;
   top: calc( var( --scw-spacing-1 ) * 8.1 );
-  height: 25px; 
+  height: 28px; 
 }
 
 @mixin comp-scw-link-state-hover-design-text--html-autolayout-margins {
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 36.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 3.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.7 );
   margin-top: calc( var( --scw-spacing-1 ) * 8.1 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 34.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 34.4 );
 }
 
 @mixin comp-scw-link-state-hover-design-text--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 36.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 3.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.7 );
   padding-top: calc( var( --scw-spacing-1 ) * 8.1 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 34.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 34.4 );
 }
 
 
@@ -7298,7 +7305,7 @@
   $themeVar: false
 ) { 
   text-align: LEFT;
-  font: var( --scw-type-text-font );
+  font: var( --scw-type-text-06-font );
   @if $themeVar {
     color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
@@ -7307,16 +7314,16 @@
 }
 
 @mixin comp-scw-link-state-hover-design-text-label--sizing {
-  width: 39px;
-  height: 24px;
+  width: 43px;
+  height: 27px;
 }
 
 @mixin comp-scw-link-state-hover-design-text-label--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-hover-design-text-label--height {
-  height: 24px;
+  height: 27px;
 }
 
 @mixin comp-scw-link-state-hover-design-text-label--padding {
@@ -7360,12 +7367,12 @@
 }
 
 @mixin comp-scw-link-state-hover-design-text-underline--sizing {
-  width: 39px;
+  width: 43px;
   height: 1px;
 }
 
 @mixin comp-scw-link-state-hover-design-text-underline--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-hover-design-text-underline--height {
@@ -7391,7 +7398,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 2.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 2.7 );
   margin-bottom: 0px;
 }
 
@@ -7399,7 +7406,7 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 2.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 2.7 );
   padding-bottom: 0px;
 }
 
@@ -7416,16 +7423,16 @@
 }
 
 @mixin comp-scw-link-state-disabled-design-text--sizing {
-  width: 39px;
-  height: 25px;
+  width: 43px;
+  height: 28px;
 }
 
 @mixin comp-scw-link-state-disabled-design-text--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-disabled-design-text--height {
-  height: 25px;
+  height: 28px;
 }
 
 @mixin comp-scw-link-state-disabled-design-text--padding {
@@ -7453,25 +7460,25 @@
 @mixin comp-scw-link-state-disabled-design-text--absolute-layout {
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 36.1 );
-  width: 39px;
+  width: 43px;
   top: calc( var( --scw-spacing-1 ) * 18.1 );
-  height: 25px; 
+  height: 28px; 
 }
 
 @mixin comp-scw-link-state-disabled-design-text--html-autolayout-margins {
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 36.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 3.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.7 );
   margin-top: calc( var( --scw-spacing-1 ) * 18.1 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 24.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
 }
 
 @mixin comp-scw-link-state-disabled-design-text--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 36.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 3.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.7 );
   padding-top: calc( var( --scw-spacing-1 ) * 18.1 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 24.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 24.4 );
 }
 
 
@@ -7479,7 +7486,7 @@
   $themeVar: false
 ) { 
   text-align: LEFT;
-  font: var( --scw-type-text-font );
+  font: var( --scw-type-text-06-font );
   @if $themeVar {
     color: var( #{$themeVar}-07 , var( --scw-color-grey-07 ) );
   } @else {
@@ -7488,16 +7495,16 @@
 }
 
 @mixin comp-scw-link-state-disabled-design-text-label--sizing {
-  width: 39px;
-  height: 24px;
+  width: 43px;
+  height: 27px;
 }
 
 @mixin comp-scw-link-state-disabled-design-text-label--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-disabled-design-text-label--height {
-  height: 24px;
+  height: 27px;
 }
 
 @mixin comp-scw-link-state-disabled-design-text-label--padding {
@@ -7541,12 +7548,12 @@
 }
 
 @mixin comp-scw-link-state-disabled-design-text-underline--sizing {
-  width: 39px;
+  width: 43px;
   height: 1px;
 }
 
 @mixin comp-scw-link-state-disabled-design-text-underline--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-disabled-design-text-underline--height {
@@ -7572,7 +7579,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 2.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 2.7 );
   margin-bottom: 0px;
 }
 
@@ -7580,7 +7587,7 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 2.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 2.7 );
   padding-bottom: 0px;
 }
 
@@ -7599,16 +7606,16 @@
 }
 
 @mixin comp-scw-link-state-focused-design-text--sizing {
-  width: 39px;
-  height: 25px;
+  width: 43px;
+  height: 28px;
 }
 
 @mixin comp-scw-link-state-focused-design-text--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-focused-design-text--height {
-  height: 25px;
+  height: 28px;
 }
 
 @mixin comp-scw-link-state-focused-design-text--padding {
@@ -7636,25 +7643,25 @@
 @mixin comp-scw-link-state-focused-design-text--absolute-layout {
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 36.1 );
-  width: 39px;
+  width: 43px;
   top: calc( var( --scw-spacing-1 ) * 13.6 );
-  height: 25px; 
+  height: 28px; 
 }
 
 @mixin comp-scw-link-state-focused-design-text--html-autolayout-margins {
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 36.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 3.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.7 );
   margin-top: calc( var( --scw-spacing-1 ) * 13.6 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 29.2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
 }
 
 @mixin comp-scw-link-state-focused-design-text--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 36.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 3.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.7 );
   padding-top: calc( var( --scw-spacing-1 ) * 13.6 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 29.2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
 }
 
 
@@ -7662,7 +7669,7 @@
   $themeVar: false
 ) { 
   text-align: LEFT;
-  font: var( --scw-type-text-font );
+  font: var( --scw-type-text-06-font );
   @if $themeVar {
     color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );
   } @else {
@@ -7671,16 +7678,16 @@
 }
 
 @mixin comp-scw-link-state-focused-design-text-label--sizing {
-  width: 39px;
-  height: 24px;
+  width: 43px;
+  height: 27px;
 }
 
 @mixin comp-scw-link-state-focused-design-text-label--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-focused-design-text-label--height {
-  height: 24px;
+  height: 27px;
 }
 
 @mixin comp-scw-link-state-focused-design-text-label--padding {
@@ -7724,12 +7731,12 @@
 }
 
 @mixin comp-scw-link-state-focused-design-text-underline--sizing {
-  width: 39px;
+  width: 43px;
   height: 1px;
 }
 
 @mixin comp-scw-link-state-focused-design-text-underline--width {
-  width: 39px;
+  width: 43px;
 }
 
 @mixin comp-scw-link-state-focused-design-text-underline--height {
@@ -7755,7 +7762,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 2.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 2.7 );
   margin-bottom: 0px;
 }
 
@@ -7763,7 +7770,7 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 2.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 2.7 );
   padding-bottom: 0px;
 }
 
@@ -7781,9 +7788,9 @@
   border-width: 2px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary );
   } 
 }
 
@@ -7910,9 +7917,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -8027,9 +8034,9 @@
   border-width: 2px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary );
   } 
 }
 
@@ -8156,9 +8163,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -8265,11 +8272,18 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+  } @else {
+    border-color: var( --scw-color-primary );
+  } 
 }
 
 @mixin comp-scw-link-icon-left--sizing {
@@ -8504,11 +8518,18 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+  } @else {
+    border-color: var( --scw-color-primary );
+  } 
 }
 
 @mixin comp-scw-link-icon-right--sizing {
@@ -8747,7 +8768,14 @@
   } @else {
     background-color: var( --scw-color-primary-01 );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );
+  } @else {
+    border-color: var( --scw-color-primary-01 );
+  } 
 }
 
 @mixin comp-scw-link-state-hover-icon-left--sizing {
@@ -8986,7 +9014,14 @@
   } @else {
     background-color: var( --scw-color-primary-01 );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );
+  } @else {
+    border-color: var( --scw-color-primary-01 );
+  } 
 }
 
 @mixin comp-scw-link-state-hover-icon-right--sizing {
@@ -9221,11 +9256,18 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
   border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+  } @else {
+    border-color: var( --scw-color-primary );
+  }
   box-shadow: var( --scw-effect-focus-shadow ); 
 }
 
@@ -9461,11 +9503,18 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
   border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+  } @else {
+    border-color: var( --scw-color-primary );
+  }
   box-shadow: var( --scw-effect-focus-shadow ); 
 }
 
@@ -9705,7 +9754,14 @@
   } @else {
     background-color: var( --scw-color-grey-095 );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-095 , var( --scw-color-grey-095 ) );
+  } @else {
+    border-color: var( --scw-color-grey-095 );
+  } 
 }
 
 @mixin comp-scw-link-state-disabled-icon-left--sizing {
@@ -9944,7 +10000,14 @@
   } @else {
     background-color: var( --scw-color-grey-095 );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-095 , var( --scw-color-grey-095 ) );
+  } @else {
+    border-color: var( --scw-color-grey-095 );
+  } 
 }
 
 @mixin comp-scw-link-state-disabled-icon-right--sizing {
@@ -10183,7 +10246,14 @@
   } @else {
     background-color: var( --scw-color-primary-01 );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );
+  } @else {
+    border-color: var( --scw-color-primary-01 );
+  } 
 }
 
 @mixin comp-scw-link-state-hover--sizing {
@@ -10910,11 +10980,18 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
   border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
+  } @else {
+    border-color: var( --scw-color-primary );
+  }
   box-shadow: var( --scw-effect-focus-shadow ); 
 }
 
@@ -11158,9 +11235,9 @@
   border-width: 2px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary );
   }
   box-shadow: var( --scw-effect-focus-shadow ); 
 }
@@ -11288,9 +11365,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -11405,9 +11482,9 @@
   border-width: 2px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary );
   }
   box-shadow: var( --scw-effect-focus-shadow ); 
 }
@@ -11535,9 +11612,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -11648,7 +11725,14 @@
   } @else {
     background-color: var( --scw-color-grey-095 );
   }
-  border-radius: 6px 6px 6px 6px; 
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-095 , var( --scw-color-grey-095 ) );
+  } @else {
+    border-color: var( --scw-color-grey-095 );
+  } 
 }
 
 @mixin comp-scw-link-state-disabled--sizing {
@@ -12383,9 +12467,9 @@
   border-width: 2px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary );
   } 
 }
 
@@ -12512,9 +12596,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -12875,9 +12959,9 @@
   border-width: 2px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar} , var( --scw-color-primary ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary );
   }
   box-shadow: var( --scw-effect-focus-shadow ); 
 }
@@ -13005,9 +13089,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -30229,9 +30313,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-10-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -30465,9 +30549,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-10-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -30593,9 +30677,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-10-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -30646,9 +30730,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -30764,9 +30848,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-09-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -31009,9 +31093,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-09-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -31062,9 +31146,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -31182,9 +31266,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-09-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -31299,9 +31383,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-08-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -31427,9 +31511,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-08-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -31480,9 +31564,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -31600,9 +31684,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-08-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -31834,9 +31918,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-07-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -31962,9 +32046,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-07-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -32015,9 +32099,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -32135,9 +32219,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-07-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -32369,9 +32453,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -32497,9 +32581,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -32550,9 +32634,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary );
   }
   align-self: stretch; 
 }
@@ -32670,9 +32754,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-condensed-06-font );
   @if $themeVar {
-    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
   } @else {
-    color: var( --scw-color-primary-04 );
+    color: var( --scw-color-primary );
   } 
 }
 
@@ -47550,7 +47634,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-default--sizing {
@@ -47671,7 +47756,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-size-h2--sizing {
@@ -47792,7 +47878,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-size-h3--sizing {
@@ -47913,7 +48000,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-size-h4--sizing {
@@ -48034,7 +48122,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-size-h5--sizing {
@@ -48155,7 +48244,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-size-h6--sizing {
@@ -48276,7 +48366,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-size-p--sizing {
@@ -48397,7 +48488,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-size-bold--sizing {
@@ -48518,7 +48610,8 @@
     background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
   } @else {
     background-color: rgba(255,255,255,1);
-  } 
+  }
+  align-self: stretch; 
 }
 
 @mixin comp-scw-rich-text-size-link--sizing {