Revert "chore(update-a18): refactor common scss"

This reverts commit 5c4a9ff.
ironSource · Nov 4, 2024 · 1cb2225 · 1cb2225
1 parent 5c4a9ff
commit 1cb2225
Show file tree

Hide file tree

Showing 13 changed files with 154 additions and 154 deletions.
diff --git a/projects/fusion-ui/src/style/scss/v1/fonts.scss b/projects/fusion-ui/src/style/scss/v1/fonts.scss
@@ -1,4 +1,3 @@
-@use './vars/fonts' as *;
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
 $baseSDN: 'https://fusion.ironsrc.net/assets';
 
@@ -57,6 +56,8 @@ $baseSDN: 'https://fusion.ironsrc.net/assets';
     font-style: normal;
 }
 
+@import 'vars/fonts';
+
 .fu-font1 {
     @extend %font1;
 }

diff --git a/projects/fusion-ui/src/style/scss/v1/grid.scss b/projects/fusion-ui/src/style/scss/v1/grid.scss
@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "sass:map";
 
-@use "mixins/breakpoints" as *;
+@import "mixins/breakpoints";
 
 $gridColumns: 12 !default;
 $gridColumnGap: 32px !default;

diff --git a/projects/fusion-ui/src/style/scss/v2/fonts.scss b/projects/fusion-ui/src/style/scss/v2/fonts.scss
@@ -1,5 +1,3 @@
-@use './vars/fonts' as *;
-
 $baseSDN: 'https://fusion.ironsrc.net/assets';
 
 @font-face {
@@ -38,6 +36,7 @@ $baseSDN: 'https://fusion.ironsrc.net/assets';
     url('#{$baseSDN}/fonts/HelveticaNeue-Medium.ttf') format('truetype');
 }
 
+@import 'vars/fonts';
 
 // fonts v2
 .fu-font-headlineLarge {

diff --git a/projects/fusion-ui/src/style/scss/v2/grid.scss b/projects/fusion-ui/src/style/scss/v2/grid.scss
@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "sass:map";
 
-@use "mixins/breakpoints" as *;
+@import "mixins/breakpoints";
 
 $gridColumns: 12 !default;
 $gridColumnGap: 32px !default;

diff --git a/projects/fusion-ui/src/style/scss/v3/grid.scss b/projects/fusion-ui/src/style/scss/v3/grid.scss
@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "sass:map";
 
-@use "mixins/breakpoints" as *;
+@import "mixins/breakpoints";
 
 $gridColumns: 12 !default;
 $gridColumnGap: 32px !default;

diff --git a/projects/fusion-ui/src/style/scss/v4/border-radius.scss b/projects/fusion-ui/src/style/scss/v4/border-radius.scss
@@ -1,11 +1,11 @@
-@use './vars/border-radius';
+@import './vars/border-radius';
 
 /* region css variables */
 .fusion-v4 {
-    --border-radius-xs: #{border-radius.$borderRadiusV4-xs};
-    --border-radius-sm: #{border-radius.$borderRadiusV4-sm};
-    --border-radius-md: #{border-radius.$borderRadiusV4-md};
-    --border-radius-lg: #{border-radius.$borderRadiusV4-lg};
-    --border-radius-xl: #{border-radius.$borderRadiusV4-xl};
-    --border-radius-full: #{border-radius.$borderRadiusV4-full};
+    --border-radius-xs: #{$borderRadiusV4-xs};
+    --border-radius-sm: #{$borderRadiusV4-sm};
+    --border-radius-md: #{$borderRadiusV4-md};
+    --border-radius-lg: #{$borderRadiusV4-lg};
+    --border-radius-xl: #{$borderRadiusV4-xl};
+    --border-radius-full: #{$borderRadiusV4-full};
 }
diff --git a/projects/fusion-ui/src/style/scss/v4/colors.scss b/projects/fusion-ui/src/style/scss/v4/colors.scss
@@ -1,106 +1,106 @@
-@use './vars/colors';
+@import './vars/colors';
 
 /* region css variables */
 .fusion-v4 {
-    --background-default: #{colors.$color-v4-background-default};
-    --background-paper: #{colors.$color-v4-background-paper};
-    --background-model-elevation: #{colors.$color-v4-background-model-elevation};
-    --background-backdrop: #{colors.$color-v4-background-backdrop};
-    --background-paper-elevation-0: #{colors.$color-v4-background-paper-elevation-0};
-    --background-paper-elevation-1: #{colors.$color-v4-background-paper-elevation-1};
-    --background-paper-elevation-2: #{colors.$color-v4-background-paper-elevation-2};
-    --background-paper-elevation-3: #{colors.$color-v4-background-paper-elevation-3};
-    --background-paper-elevation-4: #{colors.$color-v4-background-paper-elevation-4};
-    --background-paper-elevation-5: #{colors.$color-v4-background-paper-elevation-5};
-    --background-paper-elevation-6: #{colors.$color-v4-background-paper-elevation-6};
-    --background-paper-elevation-7: #{colors.$color-v4-background-paper-elevation-7};
-    --background-paper-elevation-8: #{colors.$color-v4-background-paper-elevation-8};
-    --background-paper-elevation-9: #{colors.$color-v4-background-paper-elevation-9};
+    --background-default: #{$color-v4-background-default};
+    --background-paper: #{$color-v4-background-paper};
+    --background-model-elevation: #{$color-v4-background-model-elevation};
+    --background-backdrop: #{$color-v4-background-backdrop};
+    --background-paper-elevation-0: #{$color-v4-background-paper-elevation-0};
+    --background-paper-elevation-1: #{$color-v4-background-paper-elevation-1};
+    --background-paper-elevation-2: #{$color-v4-background-paper-elevation-2};
+    --background-paper-elevation-3: #{$color-v4-background-paper-elevation-3};
+    --background-paper-elevation-4: #{$color-v4-background-paper-elevation-4};
+    --background-paper-elevation-5: #{$color-v4-background-paper-elevation-5};
+    --background-paper-elevation-6: #{$color-v4-background-paper-elevation-6};
+    --background-paper-elevation-7: #{$color-v4-background-paper-elevation-7};
+    --background-paper-elevation-8: #{$color-v4-background-paper-elevation-8};
+    --background-paper-elevation-9: #{$color-v4-background-paper-elevation-9};
 
-    --action-primary: #{colors.$color-v4-action-primary};
-    --action-active: #{colors.$color-v4-action-active};
-    --action-hover: #{colors.$color-v4-action-hover};
-    --action-selected: #{colors.$color-v4-action-selected};
-    --action-disabled: #{colors.$color-v4-action-disabled};
-    --action-disabled-background: #{colors.$color-v4-action-disabled-background};
-    --action-focus: #{colors.$color-v4-action-focus};
-    --action-outlined-border: #{colors.$color-v4-action-outlined-border};
+    --action-primary: #{$color-v4-action-primary};
+    --action-active: #{$color-v4-action-active};
+    --action-hover: #{$color-v4-action-hover};
+    --action-selected: #{$color-v4-action-selected};
+    --action-disabled: #{$color-v4-action-disabled};
+    --action-disabled-background: #{$color-v4-action-disabled-background};
+    --action-focus: #{$color-v4-action-focus};
+    --action-outlined-border: #{$color-v4-action-outlined-border};
 
-    --default-light: #{colors.$color-v4-default-light};
-    --default-main: #{colors.$color-v4-default-main};
-    --default-dark: #{colors.$color-v4-default-dark};
-    --default-outlined-border: #{colors.$color-v4-default-outlined-border};
-    --default-contrast-text: #{colors.$color-v4-default-contrast-text};
-    --default-button-contrast-text: #{colors.$color-v4-default-button-contrast-text};
+    --default-light: #{$color-v4-default-light};
+    --default-main: #{$color-v4-default-main};
+    --default-dark: #{$color-v4-default-dark};
+    --default-outlined-border: #{$color-v4-default-outlined-border};
+    --default-contrast-text: #{$color-v4-default-contrast-text};
+    --default-button-contrast-text: #{$color-v4-default-button-contrast-text};
 
-    --common-white: #{colors.$color-v4-common-white};
-    --common-black: #{colors.$color-v4-common-black};
-    --common-inverse-white: #{colors.$color-v4-common-inverse-white};
-    --common-inverse-black: #{colors.$color-v4-common-inverse-black};
-    --common-divider: #{colors.$color-v4-common-divider};
-    --common-divider-elevation-0: #{colors.$color-v4-common-divider-elevation-0};
+    --common-white: #{$color-v4-common-white};
+    --common-black: #{$color-v4-common-black};
+    --common-inverse-white: #{$color-v4-common-inverse-white};
+    --common-inverse-black: #{$color-v4-common-inverse-black};
+    --common-divider: #{$color-v4-common-divider};
+    --common-divider-elevation-0: #{$color-v4-common-divider-elevation-0};
 
-    --text-primary: #{colors.$color-v4-text-primary};
-    --text-secondary: #{colors.$color-v4-text-secondary};
-    --text-disabled: #{colors.$color-v4-text-disabled};
+    --text-primary: #{$color-v4-text-primary};
+    --text-secondary: #{$color-v4-text-secondary};
+    --text-disabled: #{$color-v4-text-disabled};
 
-    --primary-lighter: #{colors.$color-v4-primary-lighter};
-    --primary-light: #{colors.$color-v4-primary-light};
-    --primary-main: #{colors.$color-v4-primary-main};
-    --primary-main-8-p: #{colors.$color-v4-primary-main-8-p};
-    --primary-main-50-p: #{colors.$color-v4-primary-main-50-p};
-    --primary-dark: #{colors.$color-v4-primary-dark};
-    --primary-darker: #{colors.$color-v4-primary-darker};
-    --primary-outlined-border: #{colors.$color-v4-primary-outlined-border};
-    --primary-contrast-text: #{colors.$color-v4-primary-contrast-text};
-    --primary-button-contrast-text: #{colors.$color-v4-primary-button-contrast-text};
+    --primary-lighter: #{$color-v4-primary-lighter};
+    --primary-light: #{$color-v4-primary-light};
+    --primary-main: #{$color-v4-primary-main};
+    --primary-main-8-p: #{$color-v4-primary-main-8-p};
+    --primary-main-50-p: #{$color-v4-primary-main-50-p};
+    --primary-dark: #{$color-v4-primary-dark};
+    --primary-darker: #{$color-v4-primary-darker};
+    --primary-outlined-border: #{$color-v4-primary-outlined-border};
+    --primary-contrast-text: #{$color-v4-primary-contrast-text};
+    --primary-button-contrast-text: #{$color-v4-primary-button-contrast-text};
 
-    --info-lighter: #{colors.$color-v4-info-lighter};
-    --info-light: #{colors.$color-v4-info-light};
-    --info-main: #{colors.$color-v4-info-main};
-    --info-main-8-p: #{colors.$color-v4-info-main-8-p};
-    --info-main-50-p: #{colors.$color-v4-info-main-50-p};
-    --info-dark: #{colors.$color-v4-info-dark};
-    --info-darker: #{colors.$color-v4-info-darker};
-    --info-outlined-border: #{colors.$color-v4-info-outlined-border};
-    --info-contrast-text: #{colors.$color-v4-info-contrast-text};
-    --info-button-contrast-text: #{colors.$color-v4-info-button-contrast-text};
+    --info-lighter: #{$color-v4-info-lighter};
+    --info-light: #{$color-v4-info-light};
+    --info-main: #{$color-v4-info-main};
+    --info-main-8-p: #{$color-v4-info-main-8-p};
+    --info-main-50-p: #{$color-v4-info-main-50-p};
+    --info-dark: #{$color-v4-info-dark};
+    --info-darker: #{$color-v4-info-darker};
+    --info-outlined-border: #{$color-v4-info-outlined-border};
+    --info-contrast-text: #{$color-v4-info-contrast-text};
+    --info-button-contrast-text: #{$color-v4-info-button-contrast-text};
 
-    --success-lighter: #{colors.$color-v4-success-lighter};
-    --success-light: #{colors.$color-v4-success-light};
-    --success-main: #{colors.$color-v4-success-main};
-    --success-main-8-p: #{colors.$color-v4-success-main-8-p};
-    --success-main-50-p: #{colors.$color-v4-success-main-50-p};
-    --success-dark: #{colors.$color-v4-success-dark};
-    --success-darker: #{colors.$color-v4-success-darker};
-    --success-outlined-border: #{colors.$color-v4-success-outlined-border};
-    --success-contrast-text: #{colors.$color-v4-success-contrast-text};
-    --success-button-contrast-text: #{colors.$color-v4-success-button-contrast-text};
+    --success-lighter: #{$color-v4-success-lighter};
+    --success-light: #{$color-v4-success-light};
+    --success-main: #{$color-v4-success-main};
+    --success-main-8-p: #{$color-v4-success-main-8-p};
+    --success-main-50-p: #{$color-v4-success-main-50-p};
+    --success-dark: #{$color-v4-success-dark};
+    --success-darker: #{$color-v4-success-darker};
+    --success-outlined-border: #{$color-v4-success-outlined-border};
+    --success-contrast-text: #{$color-v4-success-contrast-text};
+    --success-button-contrast-text: #{$color-v4-success-button-contrast-text};
 
-    --warning-lighter: #{colors.$color-v4-warning-lighter};
-    --warning-light: #{colors.$color-v4-warning-light};
-    --warning-main: #{colors.$color-v4-warning-main};
-    --warning-main-8-p: #{colors.$color-v4-warning-main-8-p};
-    --warning-main-50-p: #{colors.$color-v4-warning-main-50-p};
-    --warning-dark: #{colors.$color-v4-warning-dark};
-    --warning-darker: #{colors.$color-v4-warning-darker};
-    --warning-outlined-border: #{colors.$color-v4-warning-outlined-border};
-    --warning-contrast-text: #{colors.$color-v4-warning-contrast-text};
-    --warning-button-contrast-text: #{colors.$color-v4-warning-button-contrast-text};
+    --warning-lighter: #{$color-v4-warning-lighter};
+    --warning-light: #{$color-v4-warning-light};
+    --warning-main: #{$color-v4-warning-main};
+    --warning-main-8-p: #{$color-v4-warning-main-8-p};
+    --warning-main-50-p: #{$color-v4-warning-main-50-p};
+    --warning-dark: #{$color-v4-warning-dark};
+    --warning-darker: #{$color-v4-warning-darker};
+    --warning-outlined-border: #{$color-v4-warning-outlined-border};
+    --warning-contrast-text: #{$color-v4-warning-contrast-text};
+    --warning-button-contrast-text: #{$color-v4-warning-button-contrast-text};
 
-    --error-lighter: #{colors.$color-v4-error-lighter};
-    --error-light: #{colors.$color-v4-error-light};
-    --error-main: #{colors.$color-v4-error-main};
-    --error-main-8-p: #{colors.$color-v4-error-main-8-p};
-    --error-main-50-p: #{colors.$color-v4-error-main-50-p};
-    --error-dark: #{colors.$color-v4-error-dark};
-    --error-darker: #{colors.$color-v4-error-darker};
-    --error-outlined-border: #{colors.$color-v4-error-outlined-border};
-    --error-contrast-text: #{colors.$color-v4-error-contrast-text};
-    --error-button-contrast-text: #{colors.$color-v4-error-button-contrast-text};
+    --error-lighter: #{$color-v4-error-lighter};
+    --error-light: #{$color-v4-error-light};
+    --error-main: #{$color-v4-error-main};
+    --error-main-8-p: #{$color-v4-error-main-8-p};
+    --error-main-50-p: #{$color-v4-error-main-50-p};
+    --error-dark: #{$color-v4-error-dark};
+    --error-darker: #{$color-v4-error-darker};
+    --error-outlined-border: #{$color-v4-error-outlined-border};
+    --error-contrast-text: #{$color-v4-error-contrast-text};
+    --error-button-contrast-text: #{$color-v4-error-button-contrast-text};
 
-    --aba: #{colors.$color-v4-aba};
-    --abb: #{colors.$color-v4-abb};
+    --aba: #{$color-v4-aba};
+    --abb: #{$color-v4-abb};
 }
 /* endregion css variables */
 
diff --git a/projects/fusion-ui/src/style/scss/v4/grid.scss b/projects/fusion-ui/src/style/scss/v4/grid.scss
@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "sass:map";
 
-@use "mixins/breakpoints" as *;
+@import "mixins/breakpoints";
 
 $gridColumns: 12 !default;
 $gridColumnGap: 32px !default;

diff --git a/projects/fusion-ui/src/style/scss/v4/shadows.scss b/projects/fusion-ui/src/style/scss/v4/shadows.scss
@@ -1,12 +1,12 @@
-@use './vars/shadows';
+@import './vars/shadows';
 
 .fusion-v4 {
-    --box-shadow-xs: #{shadows.$boxShadowV4-XS};
-    --box-shadow-sm: #{shadows.$boxShadowV4-SM};
-    --box-shadow-md: #{shadows.$boxShadowV4-MD};
-    --box-shadow-lg: #{shadows.$boxShadowV4-LG};
-    --box-shadow-xl: #{shadows.$boxShadowV4-XL};
-    --box-shadow-xxl: #{shadows.$boxShadowV4-XXL};
-    --box-shadow-xxxl: #{shadows.$boxShadowV4-XXXL};
-    --box-shadow-slg: #{shadows.$boxShadowV4-SLG};
+    --box-shadow-xs: #{$boxShadowV4-XS};
+    --box-shadow-sm: #{$boxShadowV4-SM};
+    --box-shadow-md: #{$boxShadowV4-MD};
+    --box-shadow-lg: #{$boxShadowV4-LG};
+    --box-shadow-xl: #{$boxShadowV4-XL};
+    --box-shadow-xxl: #{$boxShadowV4-XXL};
+    --box-shadow-xxxl: #{$boxShadowV4-XXXL};
+    --box-shadow-slg: #{$boxShadowV4-SLG};
 }
diff --git a/projects/fusion-ui/src/style/scss/v4/spacings.scss b/projects/fusion-ui/src/style/scss/v4/spacings.scss
@@ -1,21 +1,21 @@
-@use './vars/spacings';
+@import 'vars/spacings';
 
 .fusion-v4 {
-    --spacing-tockenset: #{spacings.$spacingV4-tokenset};
-    --spacing-25: #{spacings.$spacingV4-25};
-    --spacing-50: #{spacings.$spacingV4-50};
-    --spacing-75: #{spacings.$spacingV4-75};
-    --spacing-100: #{spacings.$spacingV4-100};
-    --spacing-125: #{spacings.$spacingV4-125};
-    --spacing-150: #{spacings.$spacingV4-150};
-    --spacing-200: #{spacings.$spacingV4-200};
-    --spacing-250: #{spacings.$spacingV4-250};
-    --spacing-300: #{spacings.$spacingV4-300};
-    --spacing-400: #{spacings.$spacingV4-400};
-    --spacing-500: #{spacings.$spacingV4-500};
-    --spacing-600: #{spacings.$spacingV4-600};
-    --spacing-700: #{spacings.$spacingV4-700};
-    --spacing-800: #{spacings.$spacingV4-800};
-    --spacing-900: #{spacings.$spacingV4-900};
-    --spacing-1000: #{spacings.$spacingV4-1000};
+    --spacing-tockenset: #{$spacingV4-tokenset};
+    --spacing-25: #{$spacingV4-25};
+    --spacing-50: #{$spacingV4-50};
+    --spacing-75: #{$spacingV4-75};
+    --spacing-100: #{$spacingV4-100};
+    --spacing-125: #{$spacingV4-125};
+    --spacing-150: #{$spacingV4-150};
+    --spacing-200: #{$spacingV4-200};
+    --spacing-250: #{$spacingV4-250};
+    --spacing-300: #{$spacingV4-300};
+    --spacing-400: #{$spacingV4-400};
+    --spacing-500: #{$spacingV4-500};
+    --spacing-600: #{$spacingV4-600};
+    --spacing-700: #{$spacingV4-700};
+    --spacing-800: #{$spacingV4-800};
+    --spacing-900: #{$spacingV4-900};
+    --spacing-1000: #{$spacingV4-1000};
 }
diff --git a/projects/fusion-ui/src/style/scss/v4/style-guide.scss b/projects/fusion-ui/src/style/scss/v4/style-guide.scss
@@ -1,6 +1,6 @@
-@forward './fonts';
-@forward './colors';
-@forward './shadows';
-@forward './border-radius';
-@forward './spacings';
-@forward './grid';
+@import './fonts';
+@import './colors';
+@import './shadows';
+@import './border-radius';
+@import './spacings';
+@import './grid';
diff --git a/projects/fusion-ui/src/style/scss/v4/variables.scss b/projects/fusion-ui/src/style/scss/v4/variables.scss
@@ -1,4 +1,4 @@
-@forward './colors';
-@forward './shadows';
-@forward './border-radius';
-@forward './spacings';
+@import './colors';
+@import './shadows';
+@import './border-radius';
+@import './spacings';