scu-web-components 0.0.61 → 0.0.62

package/dist/themes/themes.css

@@ -6,8 +6,9 @@
   --scw-theme-color-hover: var( --scw-color-primary-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-primary-095 );
+  --scw-theme-color-dark: var( --scw-color-primary-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-primary-06 );
   --scw-theme-icon-color: var( --scw-color-primary-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-primary-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-primary-08 );
@@ -23,8 +24,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-primary-04 );
   --scw-theme-color-light: var( --scw-color-primary-05 );
+  --scw-theme-color-dark: var( --scw-color-primary-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-primary-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-primary-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-primary-08 );
@@ -38,8 +40,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-01 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-grey-095 );
+  --scw-theme-color-dark: var( --scw-color-grey-02 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-grey-06 );
   --scw-theme-icon-color: var( --scw-color-grey-02 );
   --scw-theme-icon-color-secondary: var( --scw-color-grey-03 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-grey-05 );
@@ -55,8 +58,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-01 );
   --scw-theme-color-light: var( --scw-color-grey-02 );
+  --scw-theme-color-dark: var( --scw-color-grey-02 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-grey-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-grey-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-grey-08 );
@@ -70,8 +74,9 @@
   --scw-theme-color-hover: var( --scw-color-mortgage-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-mortgage-095 );
+  --scw-theme-color-dark: var( --scw-color-mortgage-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-mortgage-06 );
   --scw-theme-icon-color: var( --scw-color-mortgage-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-mortgage-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-mortgage-08 );
@@ -87,8 +92,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-mortgage-04 );
   --scw-theme-color-light: var( --scw-color-mortgage-05 );
+  --scw-theme-color-dark: var( --scw-color-mortgage-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-mortgage-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-mortgage-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-mortgage-08 );
@@ -102,8 +108,9 @@
   --scw-theme-color-hover: var( --scw-color-investments-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-investments-095 );
+  --scw-theme-color-dark: var( --scw-color-investments-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-investments-06 );
   --scw-theme-icon-color: var( --scw-color-investments-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-investments-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-investments-08 );
@@ -119,8 +126,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-investments-04 );
   --scw-theme-color-light: var( --scw-color-investments-05 );
+  --scw-theme-color-dark: var( --scw-color-investments-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-investments-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-investments-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-investments-08 );
@@ -134,8 +142,9 @@
   --scw-theme-color-hover: var( --scw-color-credit-cards-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-credit-cards-095 );
+  --scw-theme-color-dark: var( --scw-color-credit-cards-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-credit-cards-06 );
   --scw-theme-icon-color: var( --scw-color-credit-cards-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-credit-cards-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-credit-cards-08 );
@@ -151,8 +160,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-credit-cards-04 );
   --scw-theme-color-light: var( --scw-color-credit-cards-05 );
+  --scw-theme-color-dark: var( --scw-color-credit-cards-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-credit-cards-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-credit-cards-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-credit-cards-08 );
@@ -166,8 +176,9 @@
   --scw-theme-color-hover: var( --scw-color-student-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-student-095 );
+  --scw-theme-color-dark: var( --scw-color-student-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-student-06 );
   --scw-theme-icon-color: var( --scw-color-student-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-student-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-student-08 );
@@ -183,8 +194,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-student-04 );
   --scw-theme-color-light: var( --scw-color-student-05 );
+  --scw-theme-color-dark: var( --scw-color-student-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-student-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-student-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-student-08 );
@@ -198,8 +210,9 @@
   --scw-theme-color-hover: var( --scw-color-savings-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-savings-095 );
+  --scw-theme-color-dark: var( --scw-color-savings-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-savings-06 );
   --scw-theme-icon-color: var( --scw-color-savings-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-savings-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-savings-08 );
@@ -215,8 +228,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-savings-04 );
   --scw-theme-color-light: var( --scw-color-savings-05 );
+  --scw-theme-color-dark: var( --scw-color-savings-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-savings-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-savings-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-savings-08 );
@@ -230,8 +244,9 @@
   --scw-theme-color-hover: var( --scw-color-checking-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-checking-095 );
+  --scw-theme-color-dark: var( --scw-color-checking-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-checking-06 );
   --scw-theme-icon-color: var( --scw-color-checking-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-checking-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-checking-08 );
@@ -247,8 +262,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-checking-04 );
   --scw-theme-color-light: var( --scw-color-checking-05 );
+  --scw-theme-color-dark: var( --scw-color-checking-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-checking-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-checking-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-checking-08 );
@@ -262,8 +278,9 @@
   --scw-theme-color-hover: var( --scw-color-red-shoes-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-red-shoes-095 );
+  --scw-theme-color-dark: var( --scw-color-red-shoes-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-red-shoes-06 );
   --scw-theme-icon-color: var( --scw-color-red-shoes-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-red-shoes-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-red-shoes-08 );
@@ -279,8 +296,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-red-shoes-04 );
   --scw-theme-color-light: var( --scw-color-red-shoes-05 );
+  --scw-theme-color-dark: var( --scw-color-red-shoes-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-red-shoes-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-red-shoes-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-red-shoes-08 );
@@ -294,8 +312,9 @@
   --scw-theme-color-hover: var( --scw-color-business-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-business-095 );
+  --scw-theme-color-dark: var( --scw-color-business-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-business-06 );
   --scw-theme-icon-color: var( --scw-color-business-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-business-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-business-08 );
@@ -311,8 +330,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-business-04 );
   --scw-theme-color-light: var( --scw-color-business-05 );
+  --scw-theme-color-dark: var( --scw-color-business-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-business-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-business-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-business-08 );
@@ -326,8 +346,9 @@
   --scw-theme-color-hover: var( --scw-color-personal-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-personal-095 );
+  --scw-theme-color-dark: var( --scw-color-personal-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-personal-06 );
   --scw-theme-icon-color: var( --scw-color-personal-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-personal-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-personal-08 );
@@ -343,8 +364,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-personal-04 );
   --scw-theme-color-light: var( --scw-color-personal-05 );
+  --scw-theme-color-dark: var( --scw-color-personal-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-personal-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-personal-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-personal-08 );
@@ -358,8 +380,9 @@
   --scw-theme-color-hover: var( --scw-color-heloc-04 );
   --scw-theme-color-hover-inv: var( --scw-color-grey-10 );
   --scw-theme-color-light: var( --scw-color-heloc-095 );
+  --scw-theme-color-dark: var( --scw-color-heloc-05 );
   --scw-theme-body-color: var( --scw-color-grey-02 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-heloc-06 );
   --scw-theme-icon-color: var( --scw-color-heloc-05 );
   --scw-theme-icon-color-secondary: var( --scw-color-heloc-06 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-heloc-08 );
@@ -375,8 +398,9 @@
   --scw-theme-color-hover: var( --scw-color-grey-10 );
   --scw-theme-color-hover-inv: var( --scw-color-heloc-04 );
   --scw-theme-color-light: var( --scw-color-heloc-05 );
+  --scw-theme-color-dark: var( --scw-color-heloc-05 );
   --scw-theme-body-color: var( --scw-color-grey-10 );
-  --scw-theme-border-color: var( --scw-color-grey-09 );
+  --scw-theme-border-color: var( --scw-color-heloc-06 );
   --scw-theme-icon-color: var( --scw-color-grey-10 );
   --scw-theme-icon-color-secondary: var( --scw-color-heloc-09 );
   --scw-theme-icon-color-tiertiary: var( --scw-color-heloc-08 );

package/dist/tokens/segments/comp-scw-base-heading/_default-mixins.scss

@@ -0,0 +1,69 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  }
+  align-self: stretch; 
+}
+
+@mixin sizing {
+  width: 365px;
+  height: 64px;
+}
+
+@mixin width {
+  width: 365px;
+}
+
+@mixin height {
+  height: 64px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: 0px; 
+        --margin-right: 0px; 
+      } 
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: var( --scw-spacing-2 );
+  margin-top: var( --scw-spacing-2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 27.4 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 27.4 );
+}

package/dist/tokens/segments/{comp-scw-block/_default-body-mixins.scss → comp-scw-base-heading/_default-text-mixins.scss}

@@ -5,26 +5,26 @@
   $themeVar: false
 ) { 
   text-align: LEFT;
-  font: var( --scw-type-text-font );
+  font: var( --scw-type-text-bold-condensed-10-font );
   @if $themeVar {
     color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
   } @else {
     color: var( --scw-color-grey-02 );
   }
-  align-self: stretch; 
+  flex: 1; 
 }
 
 @mixin sizing {
-  width: 388px;
-  height: 24px;
+  width: 365px;
+  height: 54px;
 }
 
 @mixin width {
-  width: 388px;
+  width: 365px;
 }
 
 @mixin height {
-  height: 24px;
+  height: 54px;
 }
 
 @mixin padding {
@@ -42,14 +42,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 5.1 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+  margin-top: 0px;
+  margin-bottom: var( --scw-spacing-1 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 5.1 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+  padding-top: 0px;
+  padding-bottom: var( --scw-spacing-1 );
 }

package/dist/tokens/segments/comp-scw-base-heading/_default-text-vars.scss

@@ -0,0 +1,31 @@
+
+
+$characters: 'Content';
+$font-size: 2.5rem;
+$text-align-horizontal: LEFT;
+$text-align-vertical: TOP;
+$text-transform: none;
+$color: var( --scw-color-grey-02 );
+$font-family: 'Proxima Nova Condensed';
+$font-weight: 700;
+$line-height: 3.375rem;
+$letter-spacing: 0rem;
+$font: var( --scw-type-text-bold-condensed-10-font );
+$width: 365px;
+$height: 54px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: NONE;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: INHERIT;
+$layout-grow: 1;
+$top: 0px;
+$top-percent: 42.19%;
+$bottom: var( --scw-spacing-1 );
+$left: 0px;
+$left-percent: 50%;
+$right: 0px;

package/dist/tokens/segments/comp-scw-base-heading/_default-vars.scss

@@ -0,0 +1,27 @@
+
+
+$background-color: rgba(255,255,255,1);
+$blend-mode: NORMAL;
+$width: 365px;
+$height: 64px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: FLEX;
+$layout-mode: HORIZONTAL;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: 0px;
+$layout-align: STRETCH;
+$layout-grow: 0;
+$top: var( --scw-spacing-2 );
+$top-percent: 14.53%;
+$bottom: calc( var( --scw-spacing-1 ) * 27.4 );
+$left: var( --scw-spacing-2 );
+$left-percent: 50%;
+$right: var( --scw-spacing-2 );
+$padding-left: 0px;
+$padding-right: 0px;
+$padding-top: 0px;
+$padding-bottom: var( --scw-spacing-1 );
+$margin-bottom: 0px;

package/dist/tokens/segments/comp-scw-base-heading/_index-mixins.scss

@@ -0,0 +1,76 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 5px 5px 5px 5px;
+  border-width: 1px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , rgba(151,71,255,1) );
+  } @else {
+    border-color: rgba(151,71,255,1);
+  } 
+}
+
+@mixin sizing {
+  width: 405px;
+  height: 358px;
+}
+
+@mixin width {
+  width: 405px;
+}
+
+@mixin height {
+  height: 358px;
+}
+
+@mixin padding {
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: var( --scw-spacing-2 );
+}
+
+@mixin figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: var( --scw-spacing-2 );
+  & > *:not(:last-child) { 
+        margin-bottom: var( --scw-spacing-1 ); 
+        --margin-bottom: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}

package/dist/tokens/segments/comp-scw-base-heading/_index-vars.scss

@@ -0,0 +1,32 @@
+
+
+$background-color: rgba(0,0,0,0);
+$stroke-color: rgba(151,71,255,1);
+$stroke-weight: 1px;
+$stroke-align: INSIDE;
+$corner-radius-top-left: 5px;
+$corner-radius-top-right: 5px;
+$corner-radius-bottom-right: 5px;
+$corner-radius-bottom-left: 5px;
+$width: 405px;
+$height: 358px;
+$constraint-horizontal: MIN;
+$constraint-vertical: MIN;
+$constrain-proportions: false;
+$layout-context: NONE;
+$layout-mode: VERTICAL;
+$primary-axis-align-items: MIN;
+$counter-axis-align-items: MIN;
+$item-spacing: var( --scw-spacing-1 );
+$layout-align: MIN;
+$layout-grow: 0;
+$top: 0px;
+$top-percent: 0%;
+$bottom: 0px;
+$left: 0px;
+$left-percent: 0%;
+$right: 0px;
+$padding-left: var( --scw-spacing-2 );
+$padding-right: var( --scw-spacing-2 );
+$padding-top: var( --scw-spacing-2 );
+$padding-bottom: var( --scw-spacing-2 );

package/dist/tokens/segments/comp-scw-base-heading/_level-h2-mixins.scss

@@ -0,0 +1,69 @@
+
+
+
+@mixin box (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  }
+  align-self: stretch; 
+}
+
+@mixin sizing {
+  width: 365px;
+  height: 51px;
+}
+
+@mixin width {
+  width: 365px;
+}
+
+@mixin height {
+  height: 51px;
+}
+
+@mixin padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: 0px; 
+        --margin-right: 0px; 
+      } 
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: var( --scw-spacing-2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 9.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 21.3 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 9.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 21.3 );
+}

package/dist/tokens/segments/comp-scw-base-heading/_level-h2-text-mixins.scss

@@ -0,0 +1,55 @@
+
+
+
+@mixin text (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-bold-09-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  }
+  flex: 1; 
+}
+
+@mixin sizing {
+  width: 365px;
+  height: 41px;
+}
+
+@mixin width {
+  width: 365px;
+}
+
+@mixin height {
+  height: 41px;
+}
+
+@mixin padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin absolute-layout {
+   
+}
+
+@mixin html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: var( --scw-spacing-1 );
+}