chore(isct-97): refactor colors mdx story

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

@@ -1,5 +1,5 @@
-import {Meta, Canvas, Source} from '@storybook/addon-docs';
-import * as ColorsPaletteComponent from './colors-palette/colors-palette.stories';
+import {Meta, Source} from '@storybook/addon-docs';
+import {colorPaletteLight} from './colorsData';
 
 <Meta title="V4/Foundation/Palette colors"/>
 
@@ -13,7 +13,118 @@ To use our colors scss variable add in your *.scss
 Or import css variable for *.css
 `@import '~@ironsource/fusion-ui/style/v4/style-guide.css';`
 
-<Canvas of={ColorsPaletteComponent.Palette} sourceState={"none"}/>
+<style>
+{
+`
+.colors-wrapper{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 32px;
+    margin: 32px auto;
+}
+.color-block {
+    width: 425px;
+    background-color: var(--background-default);
+}
+.color-label {
+    padding: 1.5rem 1rem 0.75rem 1rem;
+    color: var(--text-primary);
+    border: solid 1px var(--common-divider);
+}
+.color-label:first-letter {
+    text-transform: uppercase;
+}
+.color-title {
+    display: flex;
+    color: var(--text-primary);
+    border: solid 1px var(--common-divider);
+    border-top: 0px;
+}
+.color-title div {
+    padding: 0.25rem 1rem;
+    width: 50%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+}
+.color-row {
+    display: flex;
+    color: var(--text-primary);
+}
+.color-row > div {
+    border: solid 1px var(--common-divider);
+    border-top: 0px;
+    display: flex;
+    align-items: center;
+    height: 2.5rem;
+    padding: 0.25rem 1rem;
+    width: 50%;
+}
+.color-row .color-name {
+    display: flex;
+    gap: 0.5rem;
+}
+.color-row .color-value {
+    display: flex;
+    gap: 0.5rem;
+    border-left: none;
+}
+.icon-holder {
+    padding: 0;
+    margin: 0;
+    width: 16px;
+    height: 16px;
+    border: none;
+
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='gray' d='M12.548 3.368A6.454 6.454 0 0 0 8 1.5h-.067A6.5 6.5 0 0 0 1.5 8c0 2.688 1.661 4.941 4.335 5.886A2 2 0 0 0 8.5 12a1 1 0 0 1 1-1h2.888a1.988 1.988 0 0 0 1.95-1.555c.112-.492.166-.995.162-1.5a6.457 6.457 0 0 0-1.952-4.577Zm.813 5.857a.993.993 0 0 1-.973.775H9.5a2 2 0 0 0-2 2 1 1 0 0 1-1.332.942C3.906 12.144 2.5 10.25 2.5 8a5.5 5.5 0 0 1 5.443-5.5H8a5.522 5.522 0 0 1 5.5 5.453c.004.428-.042.855-.136 1.272h-.002ZM8.75 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM6 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 3.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm5.5-3.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.color-example {
+    padding: 0;
+    margin: 0;
+    width: 16px;
+    height: 16px;
+    border: solid 1px var(--common-divider);
+    border-radius: 0.1875rem;
+}
+
+`
+}
+</style>
+
+
+<div class="sb-unstyled colors-wrapper fusion-v4">
+    {
+        Object.entries(colorPaletteLight).map(colorGroup=>{
+            return (
+                <div class="color-block">
+                    <div class="color-label font-v4-heading-1">{ colorGroup[0] }</div>
+                    <div class="colors-holder">
+                        <div class="color-title font-v4-table-label">
+                            <div>Name</div>
+                            <div>Value</div>
+                        </div>
+                        {
+                            Object.entries(colorGroup[1]).map(token=>{
+                                return (
+                                    <div class="color-row font-v4-caption">
+                                        <div class="color-name"><div class="icon-holder"></div>{ token[0] }</div>
+                                        <div class="color-value" title={token[1]}>
+                                            <div class="color-example" style={{backgroundColor: token[1]}}></div>
+                                            { token[1] }
+                                        </div>
+                                    </div>
+                                )
+                            })
+                        }
+                    </div>
+                </div>
+            )
+        })
+    }
+</div>
+
 
 #### CSS variables
 from `@ironsource/fusion-ui/style/v4/style-guide.css`