From 745fc1cf331c4036d920f312c0c4beddd86cbe6e Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 3 Nov 2024 14:19:47 +0200 Subject: [PATCH 1/6] chore(update-a18): fix sass - silence for @import, fix map.* --- .../fusion-ui/src/style/scss/v1/grid.scss | 7 +++--- .../style/scss/v1/mixins/_breakpoints.scss | 8 ++++--- .../src/style/scss/v1/mixins/_mixins.scss | 11 +++++---- .../fusion-ui/src/style/scss/v2/grid.scss | 7 +++--- .../style/scss/v2/mixins/_breakpoints.scss | 8 ++++--- .../src/style/scss/v2/mixins/_mixins.scss | 12 +++++----- .../fusion-ui/src/style/scss/v3/grid.scss | 7 +++--- .../style/scss/v3/mixins/_breakpoints.scss | 8 ++++--- .../src/style/scss/v3/mixins/_mixins.scss | 11 +++++---- .../style/scss/v4/mixins/_breakpoints.scss | 8 ++++--- .../src/style/scss/v4/mixins/_mixins.scss | 11 +++++---- scripts/build-styles.sh | 24 +++++++++---------- 12 files changed, 68 insertions(+), 54 deletions(-) diff --git a/projects/fusion-ui/src/style/scss/v1/grid.scss b/projects/fusion-ui/src/style/scss/v1/grid.scss index 942a4bb16..9d5722ec6 100644 --- a/projects/fusion-ui/src/style/scss/v1/grid.scss +++ b/projects/fusion-ui/src/style/scss/v1/grid.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:map"; @import "mixins/breakpoints"; @@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default; // create column props by size @mixin make-col($size, $columns: $gridColumns) { flex: 0 0 auto; - width: percentage(math.div($size, $columns)); + width: math.percentage(math.div($size, $columns)); } // create column offset props @mixin make-col-offset($size, $columns: $gridColumns) { $num: math.div($size, $columns); - margin-left: if($num==0, 0, percentage($num)); + margin-left: if($num==0, 0, math.percentage($num)); } // Generate the correct number of grid classes @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) { - @each $breakpoint in map-keys($breakpoints) { + @each $breakpoint in map.keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @include media-breakpoint-min($breakpoint, $breakpoints) { diff --git a/projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss b/projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss index 1dafe70fa..c5efca61d 100644 --- a/projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss +++ b/projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + $breakPoints: ( xxs: 0, // Phones - 768px and below @@ -21,7 +23,7 @@ $breakPoints: ( // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default. // Name of the next breakpoint, or null for the last breakpoint. -@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) { +@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) { $n: index($breakpoint-names, $name); @if not $n { @@ -36,14 +38,14 @@ $breakPoints: ( // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px @function breakpoint-min($name, $breakpoints: $breakPoints) { - $min: map-get($breakpoints, $name); + $min: map.get($breakpoints, $name); @return if($min !=0, $min, null); } // Maximum breakpoint width. // The maximum value is reduced by 0.02px to work around the limitations of @function breakpoint-max($name, $breakpoints: $breakPoints) { - $max: map-get($breakpoints, $name); + $max: map.get($breakpoints, $name); @return if($max and $max > 0, $max - .02, null); } diff --git a/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss index 8490465c2..ee40074d6 100644 --- a/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss +++ b/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:map"; @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @@ -59,7 +60,7 @@ $flexLocationMapping: ( ); @mixin flex-direction($location) { - $direction: map-get($flexLocationMapping, $location); + $direction: map.get($flexLocationMapping, $location); display: -ms-flexbox; display: -webkit-flex; display: flex; @@ -180,19 +181,19 @@ $ZIndexByLayer: ( ); %applicationLayer { - z-index: map-get($ZIndexByLayer, application) !important; + z-index: map.get($ZIndexByLayer, application) !important; } %notificationLayer { - z-index: map-get($ZIndexByLayer, notification) !important; + z-index: map.get($ZIndexByLayer, notification) !important; } %systemLayer { - z-index: map-get($ZIndexByLayer, system) !important; + z-index: map.get($ZIndexByLayer, system) !important; } @function getZIndexLayerOffset($layer, $offset) { - @return map-get($ZIndexByLayer, $layer) + $offset; + @return map.get($ZIndexByLayer, $layer) + $offset; } @function remCalc($pxWidth) { diff --git a/projects/fusion-ui/src/style/scss/v2/grid.scss b/projects/fusion-ui/src/style/scss/v2/grid.scss index 942a4bb16..9d5722ec6 100644 --- a/projects/fusion-ui/src/style/scss/v2/grid.scss +++ b/projects/fusion-ui/src/style/scss/v2/grid.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:map"; @import "mixins/breakpoints"; @@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default; // create column props by size @mixin make-col($size, $columns: $gridColumns) { flex: 0 0 auto; - width: percentage(math.div($size, $columns)); + width: math.percentage(math.div($size, $columns)); } // create column offset props @mixin make-col-offset($size, $columns: $gridColumns) { $num: math.div($size, $columns); - margin-left: if($num==0, 0, percentage($num)); + margin-left: if($num==0, 0, math.percentage($num)); } // Generate the correct number of grid classes @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) { - @each $breakpoint in map-keys($breakpoints) { + @each $breakpoint in map.keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @include media-breakpoint-min($breakpoint, $breakpoints) { diff --git a/projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss b/projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss index 1dafe70fa..c5efca61d 100644 --- a/projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss +++ b/projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + $breakPoints: ( xxs: 0, // Phones - 768px and below @@ -21,7 +23,7 @@ $breakPoints: ( // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default. // Name of the next breakpoint, or null for the last breakpoint. -@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) { +@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) { $n: index($breakpoint-names, $name); @if not $n { @@ -36,14 +38,14 @@ $breakPoints: ( // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px @function breakpoint-min($name, $breakpoints: $breakPoints) { - $min: map-get($breakpoints, $name); + $min: map.get($breakpoints, $name); @return if($min !=0, $min, null); } // Maximum breakpoint width. // The maximum value is reduced by 0.02px to work around the limitations of @function breakpoint-max($name, $breakpoints: $breakPoints) { - $max: map-get($breakpoints, $name); + $max: map.get($breakpoints, $name); @return if($max and $max > 0, $max - .02, null); } diff --git a/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss index 8490465c2..712a08f0d 100644 --- a/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss +++ b/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss @@ -1,5 +1,5 @@ @use "sass:math"; - +@use "sass:map"; @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; @@ -59,7 +59,7 @@ $flexLocationMapping: ( ); @mixin flex-direction($location) { - $direction: map-get($flexLocationMapping, $location); + $direction: map.get($flexLocationMapping, $location); display: -ms-flexbox; display: -webkit-flex; display: flex; @@ -180,19 +180,19 @@ $ZIndexByLayer: ( ); %applicationLayer { - z-index: map-get($ZIndexByLayer, application) !important; + z-index: map.get($ZIndexByLayer, application) !important; } %notificationLayer { - z-index: map-get($ZIndexByLayer, notification) !important; + z-index: map.get($ZIndexByLayer, notification) !important; } %systemLayer { - z-index: map-get($ZIndexByLayer, system) !important; + z-index: map.get($ZIndexByLayer, system) !important; } @function getZIndexLayerOffset($layer, $offset) { - @return map-get($ZIndexByLayer, $layer) + $offset; + @return map.get($ZIndexByLayer, $layer) + $offset; } @function remCalc($pxWidth) { diff --git a/projects/fusion-ui/src/style/scss/v3/grid.scss b/projects/fusion-ui/src/style/scss/v3/grid.scss index 942a4bb16..9d5722ec6 100644 --- a/projects/fusion-ui/src/style/scss/v3/grid.scss +++ b/projects/fusion-ui/src/style/scss/v3/grid.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:map"; @import "mixins/breakpoints"; @@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default; // create column props by size @mixin make-col($size, $columns: $gridColumns) { flex: 0 0 auto; - width: percentage(math.div($size, $columns)); + width: math.percentage(math.div($size, $columns)); } // create column offset props @mixin make-col-offset($size, $columns: $gridColumns) { $num: math.div($size, $columns); - margin-left: if($num==0, 0, percentage($num)); + margin-left: if($num==0, 0, math.percentage($num)); } // Generate the correct number of grid classes @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) { - @each $breakpoint in map-keys($breakpoints) { + @each $breakpoint in map.keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @include media-breakpoint-min($breakpoint, $breakpoints) { diff --git a/projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss b/projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss index 1dafe70fa..c5efca61d 100644 --- a/projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss +++ b/projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + $breakPoints: ( xxs: 0, // Phones - 768px and below @@ -21,7 +23,7 @@ $breakPoints: ( // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default. // Name of the next breakpoint, or null for the last breakpoint. -@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) { +@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) { $n: index($breakpoint-names, $name); @if not $n { @@ -36,14 +38,14 @@ $breakPoints: ( // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px @function breakpoint-min($name, $breakpoints: $breakPoints) { - $min: map-get($breakpoints, $name); + $min: map.get($breakpoints, $name); @return if($min !=0, $min, null); } // Maximum breakpoint width. // The maximum value is reduced by 0.02px to work around the limitations of @function breakpoint-max($name, $breakpoints: $breakPoints) { - $max: map-get($breakpoints, $name); + $max: map.get($breakpoints, $name); @return if($max and $max > 0, $max - .02, null); } diff --git a/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss index 7502bc956..acceaec09 100644 --- a/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss +++ b/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:map"; @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @@ -108,7 +109,7 @@ $flexLocationMapping: ( ); @mixin flex-direction($location) { - $direction: map-get($flexLocationMapping, $location); + $direction: map.get($flexLocationMapping, $location); display: -ms-flexbox; display: -webkit-flex; display: flex; @@ -229,19 +230,19 @@ $ZIndexByLayer: ( ); %applicationLayer { - z-index: map-get($ZIndexByLayer, application) !important; + z-index: map.get($ZIndexByLayer, application) !important; } %notificationLayer { - z-index: map-get($ZIndexByLayer, notification) !important; + z-index: map.get($ZIndexByLayer, notification) !important; } %systemLayer { - z-index: map-get($ZIndexByLayer, system) !important; + z-index: map.get($ZIndexByLayer, system) !important; } @function getZIndexLayerOffset($layer, $offset) { - @return map-get($ZIndexByLayer, $layer) + $offset; + @return map.get($ZIndexByLayer, $layer) + $offset; } @function remCalc($pxWidth) { diff --git a/projects/fusion-ui/src/style/scss/v4/mixins/_breakpoints.scss b/projects/fusion-ui/src/style/scss/v4/mixins/_breakpoints.scss index 1dafe70fa..c5efca61d 100644 --- a/projects/fusion-ui/src/style/scss/v4/mixins/_breakpoints.scss +++ b/projects/fusion-ui/src/style/scss/v4/mixins/_breakpoints.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + $breakPoints: ( xxs: 0, // Phones - 768px and below @@ -21,7 +23,7 @@ $breakPoints: ( // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default. // Name of the next breakpoint, or null for the last breakpoint. -@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) { +@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) { $n: index($breakpoint-names, $name); @if not $n { @@ -36,14 +38,14 @@ $breakPoints: ( // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px @function breakpoint-min($name, $breakpoints: $breakPoints) { - $min: map-get($breakpoints, $name); + $min: map.get($breakpoints, $name); @return if($min !=0, $min, null); } // Maximum breakpoint width. // The maximum value is reduced by 0.02px to work around the limitations of @function breakpoint-max($name, $breakpoints: $breakPoints) { - $max: map-get($breakpoints, $name); + $max: map.get($breakpoints, $name); @return if($max and $max > 0, $max - .02, null); } diff --git a/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss index 7502bc956..acceaec09 100644 --- a/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss +++ b/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "sass:map"; @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @@ -108,7 +109,7 @@ $flexLocationMapping: ( ); @mixin flex-direction($location) { - $direction: map-get($flexLocationMapping, $location); + $direction: map.get($flexLocationMapping, $location); display: -ms-flexbox; display: -webkit-flex; display: flex; @@ -229,19 +230,19 @@ $ZIndexByLayer: ( ); %applicationLayer { - z-index: map-get($ZIndexByLayer, application) !important; + z-index: map.get($ZIndexByLayer, application) !important; } %notificationLayer { - z-index: map-get($ZIndexByLayer, notification) !important; + z-index: map.get($ZIndexByLayer, notification) !important; } %systemLayer { - z-index: map-get($ZIndexByLayer, system) !important; + z-index: map.get($ZIndexByLayer, system) !important; } @function getZIndexLayerOffset($layer, $offset) { - @return map-get($ZIndexByLayer, $layer) + $offset; + @return map.get($ZIndexByLayer, $layer) + $offset; } @function remCalc($pxWidth) { diff --git a/scripts/build-styles.sh b/scripts/build-styles.sh index 2adc04c34..6629fae3d 100644 --- a/scripts/build-styles.sh +++ b/scripts/build-styles.sh @@ -34,36 +34,36 @@ cp -R projects/fusion-ui/src/style/scss/v4/mixins dist/fusion-ui/style/v4 # copy and compile grid by versions echo -e "${GREEN}-- copy and compile grid by versions ${NOCOLOR}" cp -R projects/fusion-ui/src/style/scss/v1/grid.scss dist/fusion-ui/style/v1/grid.scss -sass dist/fusion-ui/style/v1/grid.scss dist/fusion-ui/style/v1/grid.css -s compressed +sass --silence-deprecation=import dist/fusion-ui/style/v1/grid.scss dist/fusion-ui/style/v1/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v2/grid.scss dist/fusion-ui/style/v2/grid.scss -sass dist/fusion-ui/style/v2/grid.scss dist/fusion-ui/style/v2/grid.css -s compressed +sass --silence-deprecation=import dist/fusion-ui/style/v2/grid.scss dist/fusion-ui/style/v2/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v3/grid.scss dist/fusion-ui/style/v3/grid.scss -sass dist/fusion-ui/style/v3/grid.scss dist/fusion-ui/style/v3/grid.css -s compressed +sass --silence-deprecation=import dist/fusion-ui/style/v3/grid.scss dist/fusion-ui/style/v3/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v4/grid.scss dist/fusion-ui/style/v4/grid.scss -sass dist/fusion-ui/style/v4/grid.scss dist/fusion-ui/style/v4/grid.css -s compressed +sass --silence-deprecation=import dist/fusion-ui/style/v4/grid.scss dist/fusion-ui/style/v4/grid.css -s compressed # compile fonts by version -sass projects/fusion-ui/src/style/scss/v1/fonts.scss dist/fusion-ui/style/v1/fonts.css -s compressed -sass projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fonts.css -s compressed -sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed -sass projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v1/fonts.scss dist/fusion-ui/style/v1/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed # copy and compile shadows v4 -sass projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed # common v4 variables -sass projects/fusion-ui/src/style/scss/v4/variables.scss dist/fusion-ui/style/v4/variables.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/variables.scss dist/fusion-ui/style/v4/variables.css -s compressed # common v4 style-guide -sass projects/fusion-ui/src/style/scss/v4/style-guide.scss dist/fusion-ui/style/v4/style-guide.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/style-guide.scss dist/fusion-ui/style/v4/style-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 ) -sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/fonts.css -s compressed # copy default grid (last version default - 3 ) cp -R dist/fusion-ui/style/v3/grid.css dist/fusion-ui/style/grid.css cp -R dist/fusion-ui/style/v3/grid.css.map dist/fusion-ui/style/grid.css.map From 68092886f830c97d51be2dff493ae25816995efd Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 3 Nov 2024 14:35:18 +0200 Subject: [PATCH 2/6] chore(update-a18): fix sass - internal function meta.type_of --- projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss | 7 ++++--- projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss | 8 +++++--- projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss | 7 ++++--- projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss | 7 ++++--- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss index ee40074d6..a6f50b55a 100644 --- a/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss +++ b/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:map"; +@use "sass:meta"; @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @@ -104,7 +105,7 @@ $flexLocationMapping: ( @content; #{$ngDeep} svg { - @if (type_of($size) == 'map') { + @if (meta.type_of($size) == 'map') { @each $css, $value in $size { #{$css}: $value; } @@ -114,10 +115,10 @@ $flexLocationMapping: ( @if $rotate !=0 { transform: rotate(#{$rotate}deg); } - @if (type_of($colors) == 'map') { + @if (meta.type_of($colors) == 'map') { @each $cssSelector, $color in $colors { #{$cssSelector} { - @if (type_of($color) == 'map') { + @if (meta.type_of($color) == 'map') { @each $css, $value in $color { #{$css}: $value; } diff --git a/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss index 712a08f0d..a6f50b55a 100644 --- a/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss +++ b/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss @@ -1,5 +1,7 @@ @use "sass:math"; @use "sass:map"; +@use "sass:meta"; + @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; @@ -103,7 +105,7 @@ $flexLocationMapping: ( @content; #{$ngDeep} svg { - @if (type_of($size) == 'map') { + @if (meta.type_of($size) == 'map') { @each $css, $value in $size { #{$css}: $value; } @@ -113,10 +115,10 @@ $flexLocationMapping: ( @if $rotate !=0 { transform: rotate(#{$rotate}deg); } - @if (type_of($colors) == 'map') { + @if (meta.type_of($colors) == 'map') { @each $cssSelector, $color in $colors { #{$cssSelector} { - @if (type_of($color) == 'map') { + @if (meta.type_of($color) == 'map') { @each $css, $value in $color { #{$css}: $value; } diff --git a/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss index acceaec09..f7cdeb962 100644 --- a/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss +++ b/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:map"; +@use "sass:meta"; @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @@ -153,7 +154,7 @@ $flexLocationMapping: ( @content; #{$ngDeep} svg { - @if (type_of($size) == 'map') { + @if (meta.type_of($size) == 'map') { @each $css, $value in $size { #{$css}: $value; } @@ -163,10 +164,10 @@ $flexLocationMapping: ( @if $rotate !=0 { transform: rotate(#{$rotate}deg); } - @if (type_of($colors) == 'map') { + @if (meta.type_of($colors) == 'map') { @each $cssSelector, $color in $colors { #{$cssSelector} { - @if (type_of($color) == 'map') { + @if (meta.type_of($color) == 'map') { @each $css, $value in $color { #{$css}: $value; } diff --git a/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss index acceaec09..f7cdeb962 100644 --- a/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss +++ b/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss @@ -1,5 +1,6 @@ @use "sass:math"; @use "sass:map"; +@use "sass:meta"; @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @@ -153,7 +154,7 @@ $flexLocationMapping: ( @content; #{$ngDeep} svg { - @if (type_of($size) == 'map') { + @if (meta.type_of($size) == 'map') { @each $css, $value in $size { #{$css}: $value; } @@ -163,10 +164,10 @@ $flexLocationMapping: ( @if $rotate !=0 { transform: rotate(#{$rotate}deg); } - @if (type_of($colors) == 'map') { + @if (meta.type_of($colors) == 'map') { @each $cssSelector, $color in $colors { #{$cssSelector} { - @if (type_of($color) == 'map') { + @if (meta.type_of($color) == 'map') { @each $css, $value in $color { #{$css}: $value; } From 5a7f08bb00fe9527966dd8b782cfb30cf90e2b04 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 3 Nov 2024 15:53:33 +0200 Subject: [PATCH 3/6] chore(update-a18): try with test version 9.0.0-test.0 --- package-lock.json | 4 ++-- package.json | 2 +- projects/fusion-ui/package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index b2415dbbc..54a4aae89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "fusion-ui", - "version": "8.4.0-rc.11", + "version": "9.0.0-test.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "fusion-ui", - "version": "8.4.0-rc.11", + "version": "9.0.0-test.0", "license": "MIT", "dependencies": { "@angular-devkit/architect": "^0.1802.9", diff --git a/package.json b/package.json index 47b1a10f3..269eeb425 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fusion-ui", - "version": "8.4.0-rc.11", + "version": "9.0.0-test.0", "description": "UI library created by ironSource", "license": "MIT", "repository": { diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json index d6fffc430..48c56f0c9 100644 --- a/projects/fusion-ui/package.json +++ b/projects/fusion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ironsource/fusion-ui", - "version": "8.4.0-rc.11", + "version": "9.0.0-test.0", "peerDependencies": { "chart.js": "4.4.2", "@floating-ui/dom": "^1.0.9", From 5c4a9fff668205d27a0a033bac16ad8f8f1c2579 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Mon, 4 Nov 2024 09:49:40 +0200 Subject: [PATCH 4/6] chore(update-a18): refactor common scss --- .../fusion-ui/src/style/scss/v1/fonts.scss | 3 +- .../fusion-ui/src/style/scss/v1/grid.scss | 2 +- .../fusion-ui/src/style/scss/v2/fonts.scss | 3 +- .../fusion-ui/src/style/scss/v2/grid.scss | 2 +- .../fusion-ui/src/style/scss/v3/grid.scss | 2 +- .../src/style/scss/v4/border-radius.scss | 14 +- .../fusion-ui/src/style/scss/v4/colors.scss | 180 +++++++++--------- .../fusion-ui/src/style/scss/v4/grid.scss | 2 +- .../fusion-ui/src/style/scss/v4/shadows.scss | 18 +- .../fusion-ui/src/style/scss/v4/spacings.scss | 36 ++-- .../src/style/scss/v4/style-guide.scss | 12 +- .../src/style/scss/v4/variables.scss | 8 +- scripts/build-styles.sh | 26 +-- 13 files changed, 154 insertions(+), 154 deletions(-) diff --git a/projects/fusion-ui/src/style/scss/v1/fonts.scss b/projects/fusion-ui/src/style/scss/v1/fonts.scss index 72156ddad..ff9d831a5 100644 --- a/projects/fusion-ui/src/style/scss/v1/fonts.scss +++ b/projects/fusion-ui/src/style/scss/v1/fonts.scss @@ -1,3 +1,4 @@ +@use './vars/fonts' as *; @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600'); $baseSDN: 'https://fusion.ironsrc.net/assets'; @@ -56,8 +57,6 @@ $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 index 9d5722ec6..b745944c6 100644 --- 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"; -@import "mixins/breakpoints"; +@use "mixins/breakpoints" as *; $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 index 068f7d65a..7bb411352 100644 --- a/projects/fusion-ui/src/style/scss/v2/fonts.scss +++ b/projects/fusion-ui/src/style/scss/v2/fonts.scss @@ -1,3 +1,5 @@ +@use './vars/fonts' as *; + $baseSDN: 'https://fusion.ironsrc.net/assets'; @font-face { @@ -36,7 +38,6 @@ $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 index 9d5722ec6..b745944c6 100644 --- 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"; -@import "mixins/breakpoints"; +@use "mixins/breakpoints" as *; $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 index 9d5722ec6..b745944c6 100644 --- 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"; -@import "mixins/breakpoints"; +@use "mixins/breakpoints" as *; $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 index ee43dcb31..5bbf9683f 100644 --- 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 @@ -@import './vars/border-radius'; +@use './vars/border-radius'; /* region css variables */ .fusion-v4 { - --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}; + --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}; } diff --git a/projects/fusion-ui/src/style/scss/v4/colors.scss b/projects/fusion-ui/src/style/scss/v4/colors.scss index 88e783d31..7d7fbe9b7 100644 --- a/projects/fusion-ui/src/style/scss/v4/colors.scss +++ b/projects/fusion-ui/src/style/scss/v4/colors.scss @@ -1,106 +1,106 @@ -@import './vars/colors'; +@use './vars/colors'; /* region css variables */ .fusion-v4 { - --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}; + --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}; - --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}; + --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}; - --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}; + --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}; - --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}; + --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}; - --text-primary: #{$color-v4-text-primary}; - --text-secondary: #{$color-v4-text-secondary}; - --text-disabled: #{$color-v4-text-disabled}; + --text-primary: #{colors.$color-v4-text-primary}; + --text-secondary: #{colors.$color-v4-text-secondary}; + --text-disabled: #{colors.$color-v4-text-disabled}; - --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}; + --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}; - --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}; + --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}; - --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}; + --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}; - --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}; + --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}; - --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}; + --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}; - --aba: #{$color-v4-aba}; - --abb: #{$color-v4-abb}; + --aba: #{colors.$color-v4-aba}; + --abb: #{colors.$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 index 9d5722ec6..b745944c6 100644 --- 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"; -@import "mixins/breakpoints"; +@use "mixins/breakpoints" as *; $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 index 32dc1fc7b..8bc47331c 100644 --- a/projects/fusion-ui/src/style/scss/v4/shadows.scss +++ b/projects/fusion-ui/src/style/scss/v4/shadows.scss @@ -1,12 +1,12 @@ -@import './vars/shadows'; +@use './vars/shadows'; .fusion-v4 { - --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}; + --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}; } diff --git a/projects/fusion-ui/src/style/scss/v4/spacings.scss b/projects/fusion-ui/src/style/scss/v4/spacings.scss index 4d7cdb325..c41c72a7e 100644 --- a/projects/fusion-ui/src/style/scss/v4/spacings.scss +++ b/projects/fusion-ui/src/style/scss/v4/spacings.scss @@ -1,21 +1,21 @@ -@import 'vars/spacings'; +@use './vars/spacings'; .fusion-v4 { - --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}; + --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}; } diff --git a/projects/fusion-ui/src/style/scss/v4/style-guide.scss b/projects/fusion-ui/src/style/scss/v4/style-guide.scss index 7068c1628..934c3c173 100644 --- 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 @@ -@import './fonts'; -@import './colors'; -@import './shadows'; -@import './border-radius'; -@import './spacings'; -@import './grid'; +@forward './fonts'; +@forward './colors'; +@forward './shadows'; +@forward './border-radius'; +@forward './spacings'; +@forward './grid'; diff --git a/projects/fusion-ui/src/style/scss/v4/variables.scss b/projects/fusion-ui/src/style/scss/v4/variables.scss index 65e299f4d..6aecf9a43 100644 --- a/projects/fusion-ui/src/style/scss/v4/variables.scss +++ b/projects/fusion-ui/src/style/scss/v4/variables.scss @@ -1,4 +1,4 @@ -@import './colors'; -@import './shadows'; -@import './border-radius'; -@import './spacings'; +@forward './colors'; +@forward './shadows'; +@forward './border-radius'; +@forward './spacings'; diff --git a/scripts/build-styles.sh b/scripts/build-styles.sh index 6629fae3d..b49f94b5e 100644 --- a/scripts/build-styles.sh +++ b/scripts/build-styles.sh @@ -34,37 +34,37 @@ cp -R projects/fusion-ui/src/style/scss/v4/mixins dist/fusion-ui/style/v4 # copy and compile grid by versions echo -e "${GREEN}-- copy and compile grid by versions ${NOCOLOR}" cp -R projects/fusion-ui/src/style/scss/v1/grid.scss dist/fusion-ui/style/v1/grid.scss -sass --silence-deprecation=import dist/fusion-ui/style/v1/grid.scss dist/fusion-ui/style/v1/grid.css -s compressed +sass dist/fusion-ui/style/v1/grid.scss dist/fusion-ui/style/v1/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v2/grid.scss dist/fusion-ui/style/v2/grid.scss -sass --silence-deprecation=import dist/fusion-ui/style/v2/grid.scss dist/fusion-ui/style/v2/grid.css -s compressed +sass dist/fusion-ui/style/v2/grid.scss dist/fusion-ui/style/v2/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v3/grid.scss dist/fusion-ui/style/v3/grid.scss -sass --silence-deprecation=import dist/fusion-ui/style/v3/grid.scss dist/fusion-ui/style/v3/grid.css -s compressed +sass dist/fusion-ui/style/v3/grid.scss dist/fusion-ui/style/v3/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v4/grid.scss dist/fusion-ui/style/v4/grid.scss -sass --silence-deprecation=import dist/fusion-ui/style/v4/grid.scss dist/fusion-ui/style/v4/grid.css -s compressed +sass dist/fusion-ui/style/v4/grid.scss dist/fusion-ui/style/v4/grid.css -s compressed # compile fonts by version -sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v1/fonts.scss dist/fusion-ui/style/v1/fonts.css -s compressed -sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fonts.css -s compressed -sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed -sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed +sass projects/fusion-ui/src/style/scss/v1/fonts.scss dist/fusion-ui/style/v1/fonts.css -s compressed +sass projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fonts.css -s compressed +sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed +sass projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed # copy and compile shadows v4 -sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed +sass projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed # common v4 variables -sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/variables.scss dist/fusion-ui/style/v4/variables.css -s compressed +sass projects/fusion-ui/src/style/scss/v4/variables.scss dist/fusion-ui/style/v4/variables.css -s compressed # common v4 style-guide sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/style-guide.scss dist/fusion-ui/style/v4/style-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 ) -sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/fonts.css -s compressed -# copy default grid (last version default - 3 ) +# compile default fonts (version default - 3 ) +sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/fonts.css -s compressed +# copy default grid (version default - 3 ) cp -R dist/fusion-ui/style/v3/grid.css dist/fusion-ui/style/grid.css cp -R dist/fusion-ui/style/v3/grid.css.map dist/fusion-ui/style/grid.css.map From 1cb22259a8463e0489a83bd2b03f20bc07e362fd Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Mon, 4 Nov 2024 10:07:07 +0200 Subject: [PATCH 5/6] Revert "chore(update-a18): refactor common scss" This reverts commit 5c4a9fff668205d27a0a033bac16ad8f8f1c2579. --- .../fusion-ui/src/style/scss/v1/fonts.scss | 3 +- .../fusion-ui/src/style/scss/v1/grid.scss | 2 +- .../fusion-ui/src/style/scss/v2/fonts.scss | 3 +- .../fusion-ui/src/style/scss/v2/grid.scss | 2 +- .../fusion-ui/src/style/scss/v3/grid.scss | 2 +- .../src/style/scss/v4/border-radius.scss | 14 +- .../fusion-ui/src/style/scss/v4/colors.scss | 180 +++++++++--------- .../fusion-ui/src/style/scss/v4/grid.scss | 2 +- .../fusion-ui/src/style/scss/v4/shadows.scss | 18 +- .../fusion-ui/src/style/scss/v4/spacings.scss | 36 ++-- .../src/style/scss/v4/style-guide.scss | 12 +- .../src/style/scss/v4/variables.scss | 8 +- scripts/build-styles.sh | 26 +-- 13 files changed, 154 insertions(+), 154 deletions(-) diff --git a/projects/fusion-ui/src/style/scss/v1/fonts.scss b/projects/fusion-ui/src/style/scss/v1/fonts.scss index ff9d831a5..72156ddad 100644 --- 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 index b745944c6..9d5722ec6 100644 --- 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 index 7bb411352..068f7d65a 100644 --- 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 index b745944c6..9d5722ec6 100644 --- 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 index b745944c6..9d5722ec6 100644 --- 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 index 5bbf9683f..ee43dcb31 100644 --- 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 index 7d7fbe9b7..88e783d31 100644 --- 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 index b745944c6..9d5722ec6 100644 --- 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 index 8bc47331c..32dc1fc7b 100644 --- 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 index c41c72a7e..4d7cdb325 100644 --- 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 index 934c3c173..7068c1628 100644 --- 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 index 6aecf9a43..65e299f4d 100644 --- 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'; diff --git a/scripts/build-styles.sh b/scripts/build-styles.sh index b49f94b5e..6629fae3d 100644 --- a/scripts/build-styles.sh +++ b/scripts/build-styles.sh @@ -34,37 +34,37 @@ cp -R projects/fusion-ui/src/style/scss/v4/mixins dist/fusion-ui/style/v4 # copy and compile grid by versions echo -e "${GREEN}-- copy and compile grid by versions ${NOCOLOR}" cp -R projects/fusion-ui/src/style/scss/v1/grid.scss dist/fusion-ui/style/v1/grid.scss -sass dist/fusion-ui/style/v1/grid.scss dist/fusion-ui/style/v1/grid.css -s compressed +sass --silence-deprecation=import dist/fusion-ui/style/v1/grid.scss dist/fusion-ui/style/v1/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v2/grid.scss dist/fusion-ui/style/v2/grid.scss -sass dist/fusion-ui/style/v2/grid.scss dist/fusion-ui/style/v2/grid.css -s compressed +sass --silence-deprecation=import dist/fusion-ui/style/v2/grid.scss dist/fusion-ui/style/v2/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v3/grid.scss dist/fusion-ui/style/v3/grid.scss -sass dist/fusion-ui/style/v3/grid.scss dist/fusion-ui/style/v3/grid.css -s compressed +sass --silence-deprecation=import dist/fusion-ui/style/v3/grid.scss dist/fusion-ui/style/v3/grid.css -s compressed cp -R projects/fusion-ui/src/style/scss/v4/grid.scss dist/fusion-ui/style/v4/grid.scss -sass dist/fusion-ui/style/v4/grid.scss dist/fusion-ui/style/v4/grid.css -s compressed +sass --silence-deprecation=import dist/fusion-ui/style/v4/grid.scss dist/fusion-ui/style/v4/grid.css -s compressed # compile fonts by version -sass projects/fusion-ui/src/style/scss/v1/fonts.scss dist/fusion-ui/style/v1/fonts.css -s compressed -sass projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fonts.css -s compressed -sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed -sass projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v1/fonts.scss dist/fusion-ui/style/v1/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed # copy and compile shadows v4 -sass projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed # common v4 variables -sass projects/fusion-ui/src/style/scss/v4/variables.scss dist/fusion-ui/style/v4/variables.css -s compressed +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/variables.scss dist/fusion-ui/style/v4/variables.css -s compressed # common v4 style-guide sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/style-guide.scss dist/fusion-ui/style/v4/style-guide.css -s compressed echo -e "${GREEN}-- copy and compile default fonts and grid by last (v3) versions ${NOCOLOR}" -# compile default fonts (version default - 3 ) -sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/fonts.css -s compressed -# copy default grid (version default - 3 ) +# compile default fonts (last version default - 3 ) +sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/fonts.css -s compressed +# copy default grid (last version default - 3 ) cp -R dist/fusion-ui/style/v3/grid.css dist/fusion-ui/style/grid.css cp -R dist/fusion-ui/style/v3/grid.css.map dist/fusion-ui/style/grid.css.map From c894705e88e6e95aa37451cb61814530fc62174d Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Mon, 4 Nov 2024 11:47:52 +0200 Subject: [PATCH 6/6] chore(update-a18): set version 9.0.0-test.1 --- package-lock.json | 4 ++-- package.json | 2 +- projects/fusion-ui/package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 54a4aae89..46c17b7c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "fusion-ui", - "version": "9.0.0-test.0", + "version": "9.0.0-test.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "fusion-ui", - "version": "9.0.0-test.0", + "version": "9.0.0-test.1", "license": "MIT", "dependencies": { "@angular-devkit/architect": "^0.1802.9", diff --git a/package.json b/package.json index 269eeb425..17b8bccec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fusion-ui", - "version": "9.0.0-test.0", + "version": "9.0.0-test.1", "description": "UI library created by ironSource", "license": "MIT", "repository": { diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json index 48c56f0c9..43a9c7371 100644 --- a/projects/fusion-ui/package.json +++ b/projects/fusion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ironsource/fusion-ui", - "version": "9.0.0-test.0", + "version": "9.0.0-test.1", "peerDependencies": { "chart.js": "4.4.2", "@floating-ui/dom": "^1.0.9",