scu-web-components 1.2.0 → 1.2.2

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-mixins.scss

@@ -51,24 +51,24 @@
 
 @mixin absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 49.2 );
+  left: calc( var( --scw-spacing-1 ) * 39.90009765625 );
   width: 124px;
-  top: calc( var( --scw-spacing-1 ) * 3.8 );
+  top: var( --scw-spacing-3 );
   height: 87px; 
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 49.2 );
-  margin-right: calc( var( --scw-spacing-1 ) * 6.5 );
-  margin-top: calc( var( --scw-spacing-1 ) * 3.8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 65.6 );
+  margin-left: calc( var( --scw-spacing-1 ) * 39.90009765625 );
+  margin-right: calc( var( --scw-spacing-1 ) * 15.79990234375 );
+  margin-top: var( --scw-spacing-3 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 103.6 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 49.2 );
-  padding-right: calc( var( --scw-spacing-1 ) * 6.5 );
-  padding-top: calc( var( --scw-spacing-1 ) * 3.8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 65.6 );
+  padding-left: calc( var( --scw-spacing-1 ) * 39.90009765625 );
+  padding-right: calc( var( --scw-spacing-1 ) * 15.79990234375 );
+  padding-top: var( --scw-spacing-3 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 103.6 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-container-label-menu-item-mixins.scss

@@ -39,16 +39,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 1.5 );
-  margin-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
   margin-top: 0px;
   margin-bottom: 0px;
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
-  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
   padding-top: 0px;
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-container-label-menu-item-vars.scss

@@ -26,6 +26,6 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 50%;
 $bottom: 0px;
-$left: calc( var( --scw-spacing-1 ) * 1.5 );
+$left: var( --scw-spacing-1 );
 $left-percent: 50%;
-$right: calc( var( --scw-spacing-1 ) * 1.5 );
+$right: var( --scw-spacing-1 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-container-label-mixins.scss

@@ -13,12 +13,12 @@
 }
 
 @mixin sizing {
-  width: 100px;
+  width: 90px;
   height: 23px;
 }
 
 @mixin width {
-  width: 100px;
+  width: 90px;
 }
 
 @mixin height {
@@ -26,8 +26,8 @@
 }
 
 @mixin padding {
-  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
-  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
   padding-top: 0px;
   padding-bottom: 0px;
 }
@@ -37,8 +37,8 @@
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
-  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
   padding-top: 0px;
   padding-bottom: 0px;
   & > *:not(:last-child) { 

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-container-label-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 100px;
+$width: 90px;
 $height: 23px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -19,7 +19,7 @@ $bottom: 0px;
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;
-$padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
-$padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
+$padding-left: var( --scw-spacing-1 );
+$padding-right: var( --scw-spacing-1 );
 $padding-top: 0px;
 $padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-container-mixins.scss

@@ -13,12 +13,12 @@
 }
 
 @mixin sizing {
-  width: 100px;
+  width: 90px;
   height: 63px;
 }
 
 @mixin width {
-  width: 100px;
+  width: 90px;
 }
 
 @mixin height {

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-container-scw-icon-mixins.scss

@@ -42,16 +42,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: var( --scw-spacing-3 );
-  margin-right: var( --scw-spacing-3 );
+  margin-left: calc( var( --scw-spacing-1 ) * 2.5 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.5 );
   margin-top: 0px;
   margin-bottom: calc( var( --scw-spacing-1 ) * 2.3 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: var( --scw-spacing-3 );
-  padding-right: var( --scw-spacing-3 );
+  padding-left: calc( var( --scw-spacing-1 ) * 2.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.5 );
   padding-top: 0px;
   padding-bottom: calc( var( --scw-spacing-1 ) * 2.3 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-container-scw-icon-vars.scss

@@ -16,9 +16,9 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 31.75%;
 $bottom: calc( var( --scw-spacing-1 ) * 2.3 );
-$left: var( --scw-spacing-3 );
+$left: calc( var( --scw-spacing-1 ) * 2.5 );
 $left-percent: 50%;
-$right: var( --scw-spacing-3 );
+$right: calc( var( --scw-spacing-1 ) * 2.5 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-container-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 100px;
+$width: 90px;
 $height: 63px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-mixins.scss

@@ -15,12 +15,12 @@
 }
 
 @mixin sizing {
-  width: 100px;
+  width: 90px;
   height: 68px;
 }
 
 @mixin width {
-  width: 100px;
+  width: 90px;
 }
 
 @mixin height {
@@ -51,24 +51,24 @@
 
 @mixin absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 50.3 );
-  width: 100px;
-  top: calc( var( --scw-spacing-1 ) * 15 );
+  left: calc( var( --scw-spacing-1 ) * 29.60009765625 );
+  width: 90px;
+  top: calc( var( --scw-spacing-1 ) * 11.7 );
   height: 68px; 
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 50.3 );
-  margin-right: calc( var( --scw-spacing-1 ) * 7.8 );
-  margin-top: calc( var( --scw-spacing-1 ) * 15 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 56.3 );
+  margin-left: calc( var( --scw-spacing-1 ) * 29.60009765625 );
+  margin-right: calc( var( --scw-spacing-1 ) * 29.49990234375 );
+  margin-top: calc( var( --scw-spacing-1 ) * 11.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 96.8 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 50.3 );
-  padding-right: calc( var( --scw-spacing-1 ) * 7.8 );
-  padding-top: calc( var( --scw-spacing-1 ) * 15 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 56.3 );
+  padding-left: calc( var( --scw-spacing-1 ) * 29.60009765625 );
+  padding-right: calc( var( --scw-spacing-1 ) * 29.49990234375 );
+  padding-top: calc( var( --scw-spacing-1 ) * 11.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 96.8 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-size-small-vars.scss

@@ -11,7 +11,7 @@ $shadow-offset-y: 0px;
 $shadow-radius: 0px;
 $shadow-spread: 2px;
 $shadow: var( --scw-effect-focus-shadow );
-$width: 100px;
+$width: 90px;
 $height: 68px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -23,12 +23,12 @@ $counter-axis-align-items: CENTER;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 15 );
-$top-percent: 23.56%;
-$bottom: calc( var( --scw-spacing-1 ) * 56.3 );
-$left: calc( var( --scw-spacing-1 ) * 50.3 );
-$left-percent: 81.2%;
-$right: calc( var( --scw-spacing-1 ) * 7.8 );
+$top: calc( var( --scw-spacing-1 ) * 11.7 );
+$top-percent: 13.1%;
+$bottom: calc( var( --scw-spacing-1 ) * 96.8 );
+$left: calc( var( --scw-spacing-1 ) * 29.60009765625 );
+$left-percent: 50.07%;
+$right: calc( var( --scw-spacing-1 ) * 29.49990234375 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-container-mixins.scss

@@ -6,17 +6,17 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: var( --scw-color-grey-095 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar} , rgba(255,255,255,1) );
+    border-color: var( #{$borderThemeVar}-095 , var( --scw-color-grey-095 ) );
   } @else {
-    border-color: rgba(255,255,255,1);
+    border-color: var( --scw-color-grey-095 );
   }
   box-shadow: var( --scw-effect-focus-shadow ); 
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-container-vars.scss

@@ -1,6 +1,8 @@
 
 
+$background-color: var( --scw-color-grey-095 );
 $blend-mode: NORMAL;
+$stroke-color: var( --scw-color-grey-095 );
 $stroke-weight: 1px;
 $stroke-align: OUTSIDE;
 $corner-radius-top-left: 8px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-mixins.scss

@@ -49,24 +49,24 @@
 
 @mixin absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 50.9 );
+  left: calc( var( --scw-spacing-1 ) * 43.8 );
   width: 140px;
-  top: calc( var( --scw-spacing-1 ) * 51.5 );
+  top: calc( var( --scw-spacing-1 ) * 45.4 );
   height: 137px; 
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 50.9 );
-  margin-right: calc( var( --scw-spacing-1 ) * 3.2 );
-  margin-top: calc( var( --scw-spacing-1 ) * 51.5 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 12.9 );
+  margin-left: calc( var( --scw-spacing-1 ) * 43.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 10.3 );
+  margin-top: calc( var( --scw-spacing-1 ) * 45.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 56.2 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 50.9 );
-  padding-right: calc( var( --scw-spacing-1 ) * 3.2 );
-  padding-top: calc( var( --scw-spacing-1 ) * 51.5 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 12.9 );
+  padding-left: calc( var( --scw-spacing-1 ) * 43.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 10.3 );
+  padding-top: calc( var( --scw-spacing-1 ) * 45.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 56.2 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-container-label-menu-item-mixins.scss

@@ -39,16 +39,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 1.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * 1.4 );
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
   margin-top: calc( var( --scw-spacing-1 ) * 0.8 );
   margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 1.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * 1.4 );
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
   padding-top: calc( var( --scw-spacing-1 ) * 0.8 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-container-label-menu-item-vars.scss

@@ -26,6 +26,6 @@ $layout-grow: 0;
 $top: calc( var( --scw-spacing-1 ) * 0.8 );
 $top-percent: 50%;
 $bottom: calc( var( --scw-spacing-1 ) * 0.8 );
-$left: calc( var( --scw-spacing-1 ) * 1.4 );
+$left: var( --scw-spacing-1 );
 $left-percent: 50%;
-$right: calc( var( --scw-spacing-1 ) * 1.4 );
+$right: var( --scw-spacing-1 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-container-label-mixins.scss

@@ -13,12 +13,12 @@
 }
 
 @mixin sizing {
-  width: 98px;
+  width: 90px;
   height: 39px;
 }
 
 @mixin width {
-  width: 98px;
+  width: 90px;
 }
 
 @mixin height {
@@ -26,8 +26,8 @@
 }
 
 @mixin padding {
-  padding-left: calc( var( --scw-spacing-1 ) * 1.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * 1.4 );
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
   padding-top: calc( var( --scw-spacing-1 ) * 0.8 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
 }
@@ -37,8 +37,8 @@
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
-  padding-left: calc( var( --scw-spacing-1 ) * 1.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * 1.4 );
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
   padding-top: calc( var( --scw-spacing-1 ) * 0.8 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
   & > *:not(:last-child) { 

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-container-label-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 98px;
+$width: 90px;
 $height: 39px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -19,7 +19,7 @@ $bottom: 0px;
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;
-$padding-left: calc( var( --scw-spacing-1 ) * 1.4 );
-$padding-right: calc( var( --scw-spacing-1 ) * 1.4 );
+$padding-left: var( --scw-spacing-1 );
+$padding-right: var( --scw-spacing-1 );
 $padding-top: calc( var( --scw-spacing-1 ) * 0.8 );
 $padding-bottom: calc( var( --scw-spacing-1 ) * 0.8 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-container-mixins.scss

@@ -6,28 +6,28 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: var( --scw-color-grey-095 );
   }
   border-radius: 8px 8px 8px 8px;
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar} , rgba(255,255,255,1) );
+    border-color: var( #{$borderThemeVar}-095 , var( --scw-color-grey-095 ) );
   } @else {
-    border-color: rgba(255,255,255,1);
+    border-color: var( --scw-color-grey-095 );
   }
   box-shadow: var( --scw-effect-focus-shadow ); 
 }
 
 @mixin sizing {
-  width: 98px;
+  width: 90px;
   height: 89px;
 }
 
 @mixin width {
-  width: 98px;
+  width: 90px;
 }
 
 @mixin height {
@@ -64,14 +64,14 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 0.5 );
   margin-right: calc( var( --scw-spacing-1 ) * 0.5 );
-  margin-top: var( --scw-spacing-2 );
-  margin-bottom: var( --scw-spacing-2 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 0.5 );
   padding-right: calc( var( --scw-spacing-1 ) * 0.5 );
-  padding-top: var( --scw-spacing-2 );
-  padding-bottom: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-container-scw-icon-mixins.scss

@@ -42,16 +42,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 2.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * 2.4 );
+  margin-left: var( --scw-spacing-2 );
+  margin-right: var( --scw-spacing-2 );
   margin-top: 0px;
   margin-bottom: calc( var( --scw-spacing-1 ) * 3.9 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 2.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * 2.4 );
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
   padding-top: 0px;
   padding-bottom: calc( var( --scw-spacing-1 ) * 3.9 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-container-scw-icon-vars.scss

@@ -16,9 +16,9 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 28.09%;
 $bottom: calc( var( --scw-spacing-1 ) * 3.9 );
-$left: calc( var( --scw-spacing-1 ) * 2.4 );
+$left: var( --scw-spacing-2 );
 $left-percent: 50%;
-$right: calc( var( --scw-spacing-1 ) * 2.4 );
+$right: var( --scw-spacing-2 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-container-vars.scss

@@ -1,6 +1,8 @@
 
 
+$background-color: var( --scw-color-grey-095 );
 $blend-mode: NORMAL;
+$stroke-color: var( --scw-color-grey-095 );
 $stroke-weight: 1px;
 $stroke-align: OUTSIDE;
 $corner-radius-top-left: 8px;
@@ -13,7 +15,7 @@ $shadow-offset-y: 0px;
 $shadow-radius: 0px;
 $shadow-spread: 2px;
 $shadow: var( --scw-effect-focus-shadow );
-$width: 98px;
+$width: 90px;
 $height: 89px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -25,9 +27,9 @@ $counter-axis-align-items: CENTER;
 $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 0;
-$top: var( --scw-spacing-2 );
+$top: var( --scw-spacing-1 );
 $top-percent: 50%;
-$bottom: var( --scw-spacing-2 );
+$bottom: var( --scw-spacing-1 );
 $left: calc( var( --scw-spacing-1 ) * 0.5 );
 $left-percent: 50%;
 $right: calc( var( --scw-spacing-1 ) * 0.5 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-mixins.scss

@@ -13,23 +13,23 @@
 }
 
 @mixin sizing {
-  width: 108px;
-  height: 129px;
+  width: 100px;
+  height: 109px;
 }
 
 @mixin width {
-  width: 108px;
+  width: 100px;
 }
 
 @mixin height {
-  height: 129px;
+  height: 109px;
 }
 
 @mixin padding {
   padding-left: calc( var( --scw-spacing-1 ) * 0.5 );
   padding-right: calc( var( --scw-spacing-1 ) * 0.5 );
-  padding-top: var( --scw-spacing-2 );
-  padding-bottom: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }
 
 @mixin figma-autolayout { 
@@ -39,8 +39,8 @@
   align-items: center;
   padding-left: calc( var( --scw-spacing-1 ) * 0.5 );
   padding-right: calc( var( --scw-spacing-1 ) * 0.5 );
-  padding-top: var( --scw-spacing-2 );
-  padding-bottom: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
   & > *:not(:last-child) { 
         margin-bottom: 0px; 
         --margin-bottom: 0px; 
@@ -49,24 +49,24 @@
 
 @mixin absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 52 );
-  width: 108px;
-  top: calc( var( --scw-spacing-1 ) * 65.2 );
-  height: 129px; 
+  left: calc( var( --scw-spacing-1 ) * 31.56787109375 );
+  width: 100px;
+  top: calc( var( --scw-spacing-1 ) * 59.1 );
+  height: 109px; 
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 52 );
-  margin-right: calc( var( --scw-spacing-1 ) * 5.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 65.2 );
-  margin-bottom: 0px;
+  margin-left: calc( var( --scw-spacing-1 ) * 31.56787109375 );
+  margin-right: calc( var( --scw-spacing-1 ) * 26.53212890625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 59.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 45.3 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 52 );
-  padding-right: calc( var( --scw-spacing-1 ) * 5.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 65.2 );
-  padding-bottom: 0px;
+  padding-left: calc( var( --scw-spacing-1 ) * 31.56787109375 );
+  padding-right: calc( var( --scw-spacing-1 ) * 26.53212890625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 59.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 45.3 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-focus-style-button-size-small-vars.scss

@@ -1,8 +1,8 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 108px;
-$height: 129px;
+$width: 100px;
+$height: 109px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -13,13 +13,13 @@ $counter-axis-align-items: CENTER;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 65.2 );
-$top-percent: 91.74%;
-$bottom: 0px;
-$left: calc( var( --scw-spacing-1 ) * 52 );
-$left-percent: 84.29%;
-$right: calc( var( --scw-spacing-1 ) * 5.3 );
+$top: calc( var( --scw-spacing-1 ) * 59.1 );
+$top-percent: 55.98%;
+$bottom: calc( var( --scw-spacing-1 ) * 45.3 );
+$left: calc( var( --scw-spacing-1 ) * 31.56787109375 );
+$left-percent: 53.7%;
+$right: calc( var( --scw-spacing-1 ) * 26.53212890625 );
 $padding-left: calc( var( --scw-spacing-1 ) * 0.5 );
 $padding-right: calc( var( --scw-spacing-1 ) * 0.5 );
-$padding-top: var( --scw-spacing-2 );
-$padding-bottom: var( --scw-spacing-2 );
+$padding-top: var( --scw-spacing-1 );
+$padding-bottom: var( --scw-spacing-1 );