chore(isct-97): add style-guide.scss

ironSource · Nov 5, 2023 · cdb51b2 · cdb51b2
1 parent d73af50
commit cdb51b2
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 50 deletions.
diff --git a/.storybook/preview-head.html b/.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.0/style/v4/fonts.css">
+<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/6.2.2-rc.0/style/v4/stule-guide.css">
 
 <style>
     body {

diff --git a/...n-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.scss b/...n-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.scss
@@ -21,7 +21,7 @@ $menuItemHoverColor: #F5F5F5;
         width: $menuWidth;
         padding: 0 8px;
         background-color: $fu-nav-menu-white-100;
-        box-shadow: $boxShadowLG;
+        box-shadow: $boxShadowV4-LG;
         border-radius: $borderRadius;
 
         .truncate{

diff --git a/projects/fusion-ui/components/shadows-v4.mdx b/projects/fusion-ui/components/shadows-v4.mdx
@@ -102,38 +102,38 @@ Or Import css file for *.css with shadow classes
 
 ## SCSS.
 <Source language="css" code={`
-$boxShadowXS: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-$boxShadowSM: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-$boxShadowMD: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-$boxShadowLG: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-$boxShadowXL: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
-$boxShadowXXL: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
-$boxShadowXXXL: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
-$boxShadowSLG: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
+$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);
+$boxShadowV4-MD: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+$boxShadowV4-LG: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+$boxShadowV4-XL: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
+$boxShadowV4-XXL: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+$boxShadowV4-XXXL: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
+$boxShadowV4-SLG: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
 
 %shadow-v4-xs{
-    box-shadow: $boxShadowXS;
+    box-shadow: $boxShadowV4-XS;
 }
 %shadow-v4-sm{
-    box-shadow: $boxShadowSM;
+    box-shadow: $boxShadowV4-SM;
 }
 %shadow-v4-md{
-    box-shadow: $boxShadowMD;
+    box-shadow: $boxShadowV4-MD;
 }
 %shadow-v4-lg{
-    box-shadow: $boxShadowLG;
+    box-shadow: $boxShadowV4-LG;
 }
 %shadow-v4-xl{
-    box-shadow: $boxShadowXL;
+    box-shadow: $boxShadowV4-XL;
 }
 %shadow-v4-xxl{
-    box-shadow: $boxShadowXXL;
+    box-shadow: $boxShadowV4-XXL;
 }
 %shadow-v4-xxxl{
-    box-shadow: $boxShadowXXXL;
+    box-shadow: $boxShadowV4-XXXL;
 }
 %shadow-v4-slg{
-    box-shadow: $boxShadowSLG;
+    box-shadow: $boxShadowV4-SLG;
 }
 `} />
 

diff --git a/projects/fusion-ui/src/style/scss/v4/shadows.scss b/projects/fusion-ui/src/style/scss/v4/shadows.scss
@@ -2,40 +2,40 @@
 
 /* region css variables */
 .fusion-v4 {
-    --fu-shadow-v4-xs: #{$boxShadowXS};
-    --fu-shadow-v4-sm: #{$boxShadowSM};
-    --fu-shadow-v4-md: #{$boxShadowMD};
-    --fu-shadow-v4-lg: #{$boxShadowLG};
-    --fu-shadow-v4-xl: #{$boxShadowXL};
-    --fu-shadow-v4-xxl: #{$boxShadowXXL};
-    --fu-shadow-v4-xxxl: #{$boxShadowXXXL};
-    --fu-shadow-v4-slg: #{$boxShadowSLG};
+    --fu-shadow-v4-xs: #{$boxShadowV4-XS};
+    --fu-shadow-v4-sm: #{$boxShadowV4-SM};
+    --fu-shadow-v4-md: #{$boxShadowV4-MD};
+    --fu-shadow-v4-lg: #{$boxShadowV4-LG};
+    --fu-shadow-v4-xl: #{$boxShadowV4-XL};
+    --fu-shadow-v4-xxl: #{$boxShadowV4-XXL};
+    --fu-shadow-v4-xxxl: #{$boxShadowV4-XXXL};
+    --fu-shadow-v4-slg: #{$boxShadowV4-SLG};
 }
 /* endregion css variables */
 
 /* region css classes */
 .fu-shadow-v4-xs {
-    box-shadow: var(--fu-shadow-v4-xs);
+    box-shadow: var(--fu-shadow-v4-xs, #{$boxShadowV4-XS});
 }
 .fu-shadow-v4-sm {
-    box-shadow: var(--fu-shadow-v4-sm);
+    box-shadow: var(--fu-shadow-v4-sm, #{$boxShadowV4-SM});
 }
 .fu-shadow-v4-md {
-    box-shadow: var(--fu-shadow-v4-md);
+    box-shadow: var(--fu-shadow-v4-md, #{$boxShadowV4-MD});
 }
 .fu-shadow-v4-lg {
-    box-shadow: var(--fu-shadow-v4-lg);
+    box-shadow: var(--fu-shadow-v4-lg, #{$boxShadowV4-LG});
 }
 .fu-shadow-v4-xl {
-    box-shadow: var(--fu-shadow-v4-xl);
+    box-shadow: var(--fu-shadow-v4-xl, #{$boxShadowV4-XL});
 }
 .fu-shadow-v4-xxl {
-    box-shadow: var(--fu-shadow-v4-xxl);
+    box-shadow: var(--fu-shadow-v4-xxl, #{$boxShadowV4-XXL});
 }
 .fu-shadow-v4-xxxl {
-    box-shadow: var(--fu-shadow-v4-xxxl);
+    box-shadow: var(--fu-shadow-v4-xxxl, #{$boxShadowV4-XXXL});
 }
 .fu-shadow-v4-slg {
-    box-shadow: var(--fu-shadow-v4-slg);
+    box-shadow: var(--fu-shadow-v4-slg, #{$boxShadowV4-SLG});
 }
 /* endregion css classes */
diff --git a/projects/fusion-ui/src/style/scss/v4/style-guide.scss b/projects/fusion-ui/src/style/scss/v4/style-guide.scss
@@ -0,0 +1,3 @@
+@import './fonts';
+@import './shadows';
+@import './grid';
diff --git a/projects/fusion-ui/src/style/scss/v4/vars/_shadows.scss b/projects/fusion-ui/src/style/scss/v4/vars/_shadows.scss
@@ -1,33 +1,33 @@
-$boxShadowXS: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-$boxShadowSM: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-$boxShadowMD: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-$boxShadowLG: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-$boxShadowXL: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
-$boxShadowXXL: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
-$boxShadowXXXL: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
-$boxShadowSLG: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
+$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);
+$boxShadowV4-MD: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+$boxShadowV4-LG: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+$boxShadowV4-XL: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
+$boxShadowV4-XXL: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+$boxShadowV4-XXXL: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
+$boxShadowV4-SLG: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
 
 %shadow-v4-xs{
-    box-shadow: $boxShadowXS;
+    box-shadow: $boxShadowV4-XS;
 }
 %shadow-v4-sm{
-    box-shadow: $boxShadowSM;
+    box-shadow: $boxShadowV4-SM;
 }
 %shadow-v4-md{
-    box-shadow: $boxShadowMD;
+    box-shadow: $boxShadowV4-MD;
 }
 %shadow-v4-lg{
-    box-shadow: $boxShadowLG;
+    box-shadow: $boxShadowV4-LG;
 }
 %shadow-v4-xl{
-    box-shadow: $boxShadowXL;
+    box-shadow: $boxShadowV4-XL;
 }
 %shadow-v4-xxl{
-    box-shadow: $boxShadowXXL;
+    box-shadow: $boxShadowV4-XXL;
 }
 %shadow-v4-xxxl{
-    box-shadow: $boxShadowXXXL;
+    box-shadow: $boxShadowV4-XXXL;
 }
 %shadow-v4-slg{
-    box-shadow: $boxShadowSLG;
+    box-shadow: $boxShadowV4-SLG;
 }
diff --git a/scripts/build-styles.sh b/scripts/build-styles.sh
@@ -60,6 +60,9 @@ sass projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/
 # copy and compile shadows v4
 sass projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed
 
+# common v4 style-guide
+sass projects/fusion-ui/src/style/scss/v4/style-guide.scss dist/fusion-ui/style/v4/stule-guide.css -s compressed
+
 
 echo  -e "${GREEN}-- copy and compile default fonts and grid by last (v3) versions ${NOCOLOR}"
 # compile default fonts (last version default - 3 )