chore(isct-97): added border-radius and spacing, some changes in colo…

…rs and shadows

.storybook/preview-head.html

@@ -1,5 +1,5 @@
 <link rel="stylesheet" href="https://fusion.ironsrc.net/Angular_14/v26/styles.5859cbb869f0ab3e.css">
-<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/6.2.2-rc.2/style/v4/stylele-guide.css">
+<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/6.2.2-rc.3/style/v4/style-guide.css">
 
 <style>
     body {

projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.mdx

@@ -0,0 +1,81 @@
+import {Meta, Source} from '@storybook/addon-docs';
+import {borderRadiusData} from './borderRadiusData';
+
+<Meta title="V4/Foundation/Border radius"/>
+
+# Elevations (shadows)
+
+CSS **box-shadow** is a style property used to add a shadow effect to an element's box (such as a div or an image) on a web page. The property allows you to create a visually appealing 3D-like effect, making the element appear elevated or floating.
+
+To use scss variable add in your *.scss
+`@import '~@ironsource/fusion-ui/style/v4/vars/border-radius';`
+
+Or import css file for css variables
+`@import '~@ironsource/fusion-ui/style/v4/style-guide.css';`
+
+<style>
+{
+ `
+.border-radius-wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--spacing-300);
+    align-items: flex-start;
+    gap: 32px;
+    align-self: stretch;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--common-divider, #E4E4E4);
+}
+.border-radius-item {
+    display: flex;
+    padding: var(--spacing-tokenset);
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+.border-radius-example {
+    display: flex;
+    width: var(--spacing-800);
+    height: var(--spacing-800);
+    padding: var(--spacing-300);
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    color: var(--text-secondary);
+    background: var(--background-default);
+    border: 1px solid var(--action-primary);
+}
+`
+}
+</style>
+
+<div class="sb-unstyled border-radius-wrapper fusion-v4">
+    {
+        borderRadiusData.map(borderRadius => {
+            return (
+                <div class="border-radius-item">
+                    <div class="border-radius-example font-v4-caption" style={{borderRadius: borderRadius.borderRadius}}>
+                        {borderRadius.borderRadius}
+                    </div>
+                    <div class="border-radius-item font-v4-heading-4">
+                        {borderRadius.name}
+                    </div>
+                </div>
+            )
+        })
+    }
+</div>
+
+<br/><br/><br/>
+### CSS variables
+from `@ironsource/fusion-ui/style/v4/style-guide.css`
+<Source code={`
+.fusion-v4 {
+    --border-radius-xs: 2px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 6px;
+    --border-radius-lg: 8px;
+    --border-radius-xl: 16px;
+    --border-radius-full: 100px
+}
+`} language={'css'}/>

projects/fusion-ui/storybook-foundations/v4/colors.mdx

@@ -7,10 +7,10 @@ import * as ColorsPaletteComponent from './colors-palette/colors-palette.stories
 
 Radix Colors scales are just simple JavaScript objects, so you can use them with your preferred styling solution easily. [radix-ui.com](https://www.radix-ui.com/colors)
 
-To use our typography add in your *.scss
+To use our colors scss variable add in your *.scss
 `@import '~@ironsource/fusion-ui/style/v4/vars/_colors.scss';`
 
-Or Import css file for *.css
+Or import css variable for *.css
 `@import '~@ironsource/fusion-ui/style/v4/style-guide.css';`
 
 <Canvas of={ColorsPaletteComponent.Palette} sourceState={"none"}/>

projects/fusion-ui/storybook-foundations/v4/shadows.mdx

@@ -21,31 +21,31 @@ Or Import css file for *.css with shadow classes
     <div class="fu-shadow-examples fusion-v4">
         <div className="fu-shadow-example-holder">
             <div className="fu-shadow-example-label font-v4-heading-4">xsmall</div>
-            <div className="fu-shadow-example fu-shadow-v4-xs"></div>
+            <div className="fu-shadow-example" style={{boxShadow: `var(--box-shadow-xs)`}}></div>
         </div>
         <div className="fu-shadow-example-holder">
             <div className="fu-shadow-example-label font-v4-heading-4">small</div>
-            <div className="fu-shadow-example fu-shadow-v4-sm"></div>
+            <div className="fu-shadow-example" style={{boxShadow: `var(--box-shadow-sm)`}}></div>
         </div>
         <div className="fu-shadow-example-holder">
             <div className="fu-shadow-example-label font-v4-heading-4">medium</div>
-            <div className="fu-shadow-example fu-shadow-v4-md"></div>
+            <div className="fu-shadow-example" style={{boxShadow: `var(--box-shadow-md)`}}></div>
         </div>
         <div className="fu-shadow-example-holder">
             <div className="fu-shadow-example-label font-v4-heading-4">large</div>
-            <div className="fu-shadow-example fu-shadow-v4-lg"></div>
+            <div className="fu-shadow-example" style={{boxShadow: `var(--box-shadow-lg)`}}></div>
         </div>
         <div className="fu-shadow-example-holder">
             <div className="fu-shadow-example-label font-v4-heading-4">xlarge</div>
-            <div className="fu-shadow-example fu-shadow-v4-xl"></div>
+            <div className="fu-shadow-example" style={{boxShadow: `var(--box-shadow-xl)`}}></div>
         </div>
         <div className="fu-shadow-example-holder">
             <div className="fu-shadow-example-label font-v4-heading-4">xxlarge</div>
-            <div className="fu-shadow-example fu-shadow-v4-xxl"></div>
+            <div className="fu-shadow-example" style={{boxShadow: `var(--box-shadow-xxl)`}}></div>
         </div>
         <div className="fu-shadow-example-holder">
             <div className="fu-shadow-example-label font-v4-heading-4">xxxlarge</div>
-            <div className="fu-shadow-example fu-shadow-v4-xxxl"></div>
+            <div className="fu-shadow-example" style={{boxShadow: `var(--box-shadow-xxxl)`}}></div>
         </div>
         <div className="fu-shadow-example-holder">
             <div className="fu-shadow-example-label font-v4-heading-4">slarge</div>
@@ -54,7 +54,8 @@ Or Import css file for *.css with shadow classes
     </div>
 </div>
 
-## used CSS variables and classes.
+<br/><br/><br/>
+### CSS variables
 <Source language="css" code={`
 .fusion-v4 {
     --box-shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
@@ -68,7 +69,8 @@ Or Import css file for *.css with shadow classes
 }
 `} />
 
-## SCSS.
+<br/><br/><br/>
+### SCSS variables
 <Source language="css" code={`
 $boxShadowV4-XS: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
 $boxShadowV4-SM: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);