From 53dea5f934572c4613d36860e0c65d8b30d68782 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 20 Nov 2024 17:16:52 +0200 Subject: [PATCH 1/3] style(*): replace CSS style comments with Sass style comments This reduces the amount of produced CSS by quite a few lines. --- sass/animations/_mixins.scss | 2 +- sass/bem/_index.scss | 2 +- sass/color/_functions.scss | 2 +- sass/themes/charts/_category-chart-theme.scss | 2 +- sass/themes/charts/_data-chart-theme.scss | 2 +- sass/themes/charts/_financial-chart-theme.scss | 2 +- sass/themes/charts/_funnel-chart-theme.scss | 2 +- sass/themes/charts/_gauge-theme.scss | 2 +- sass/themes/charts/_geo-map-theme.scss | 2 +- sass/themes/charts/_graph-theme.scss | 2 +- sass/themes/charts/_pie-chart-theme.scss | 2 +- sass/themes/charts/_shape-chart-theme.scss | 2 +- sass/themes/schemas/charts/dark/_category-chart.scss | 2 +- sass/themes/schemas/charts/light/_category-chart.scss | 2 +- sass/themes/schemas/charts/light/_data-chart.scss | 2 +- sass/themes/schemas/charts/light/_doughnut-chart.scss | 2 +- sass/themes/schemas/charts/light/_financial-chart.scss | 2 +- sass/themes/schemas/charts/light/_funnel-chart.scss | 3 ++- sass/themes/schemas/charts/light/_gauge.scss | 2 +- sass/themes/schemas/charts/light/_geo-map.scss | 2 +- sass/themes/schemas/charts/light/_graph.scss | 2 +- sass/themes/schemas/charts/light/_pie-chart.scss | 2 +- sass/themes/schemas/charts/light/_shape-chart.scss | 3 ++- sass/themes/schemas/components/dark/_button.scss | 2 +- sass/themes/schemas/components/dark/_combo.scss | 2 +- sass/themes/schemas/components/dark/_drop-down.scss | 2 +- sass/themes/schemas/components/dark/_icon-button.scss | 2 +- sass/themes/schemas/components/dark/_input-group.scss | 2 +- sass/themes/schemas/components/dark/_select.scss | 2 +- sass/themes/schemas/components/dark/_slider.scss | 2 +- sass/themes/schemas/components/dark/_switch.scss | 2 +- sass/themes/schemas/components/dark/_tabs.scss | 2 +- sass/themes/schemas/components/dark/_tree.scss | 2 +- .../themes/schemas/components/elevation/_input-group.scss | 2 +- sass/themes/schemas/components/light/_button.scss | 2 +- sass/themes/schemas/components/light/_checkbox.scss | 2 +- sass/themes/schemas/components/light/_combo.scss | 2 +- sass/themes/schemas/components/light/_drop-down.scss | 2 +- sass/themes/schemas/components/light/_input-group.scss | 2 +- sass/themes/schemas/components/light/_rating.scss | 2 +- sass/themes/schemas/components/light/_select.scss | 2 +- sass/themes/schemas/components/light/_slider.scss | 2 +- sass/themes/schemas/components/light/_switch.scss | 2 +- sass/themes/schemas/components/light/_tabs.scss | 2 +- sass/themes/schemas/components/light/_tree.scss | 2 +- sass/typography/presets/_bootstrap.scss | 2 +- test/_animations.spec.scss | 2 +- test/_bem.spec.scss | 4 ++-- test/_color.spec.scss | 4 ++-- test/_elevations.spec.scss | 2 +- test/_themes.spec.scss | 8 ++++---- test/_typography.spec.scss | 6 +++--- test/_utils.spec.scss | 4 ++-- 53 files changed, 63 insertions(+), 61 deletions(-) diff --git a/sass/animations/_mixins.scss b/sass/animations/_mixins.scss index 9d40ddf7..28a5e979 100644 --- a/sass/animations/_mixins.scss +++ b/sass/animations/_mixins.scss @@ -1,4 +1,4 @@ -/* stylelint-disable keyframes-name-pattern */ +// stylelint-disable keyframes-name-pattern @use 'sass:list'; @use 'sass:map'; @use 'sass:string'; diff --git a/sass/bem/_index.scss b/sass/bem/_index.scss index 154572e3..73a67435 100644 --- a/sass/bem/_index.scss +++ b/sass/bem/_index.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:string'; @use 'sass:meta'; @use 'sass:list'; diff --git a/sass/color/_functions.scss b/sass/color/_functions.scss index a1c69b09..e8c13fca 100644 --- a/sass/color/_functions.scss +++ b/sass/color/_functions.scss @@ -358,7 +358,7 @@ $_enhanced-accessibility: false; /// @param {Number} $value - The sRGB color /// @returns {Number} - The calculated linear channel value @function _lcv($value) { - /* stylelint-disable number-max-precision */ + // stylelint-disable number-max-precision @return if($value < 0.03928, math.div($value, 12.92), math.pow(math.div($value + 0.055, 1.055), 2.4)); } diff --git a/sass/themes/charts/_category-chart-theme.scss b/sass/themes/charts/_category-chart-theme.scss index 5ccf73ef..22d8664c 100644 --- a/sass/themes/charts/_category-chart-theme.scss +++ b/sass/themes/charts/_category-chart-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/charts/_data-chart-theme.scss b/sass/themes/charts/_data-chart-theme.scss index 209411de..3860c9d0 100644 --- a/sass/themes/charts/_data-chart-theme.scss +++ b/sass/themes/charts/_data-chart-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/charts/_financial-chart-theme.scss b/sass/themes/charts/_financial-chart-theme.scss index 5c86117b..c3aa66a9 100644 --- a/sass/themes/charts/_financial-chart-theme.scss +++ b/sass/themes/charts/_financial-chart-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/charts/_funnel-chart-theme.scss b/sass/themes/charts/_funnel-chart-theme.scss index 00a72c50..e5c0be8c 100644 --- a/sass/themes/charts/_funnel-chart-theme.scss +++ b/sass/themes/charts/_funnel-chart-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/charts/_gauge-theme.scss b/sass/themes/charts/_gauge-theme.scss index 3bf2c445..e469af69 100644 --- a/sass/themes/charts/_gauge-theme.scss +++ b/sass/themes/charts/_gauge-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/charts/_geo-map-theme.scss b/sass/themes/charts/_geo-map-theme.scss index 538ce9c1..41545586 100644 --- a/sass/themes/charts/_geo-map-theme.scss +++ b/sass/themes/charts/_geo-map-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/charts/_graph-theme.scss b/sass/themes/charts/_graph-theme.scss index 74018bcc..a282519b 100644 --- a/sass/themes/charts/_graph-theme.scss +++ b/sass/themes/charts/_graph-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/charts/_pie-chart-theme.scss b/sass/themes/charts/_pie-chart-theme.scss index 4021273a..d58e58de 100644 --- a/sass/themes/charts/_pie-chart-theme.scss +++ b/sass/themes/charts/_pie-chart-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/charts/_shape-chart-theme.scss b/sass/themes/charts/_shape-chart-theme.scss index d7c93f3e..76665cf5 100644 --- a/sass/themes/charts/_shape-chart-theme.scss +++ b/sass/themes/charts/_shape-chart-theme.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use 'sass:map'; @use '../mixins' as *; @use '../functions' as *; diff --git a/sass/themes/schemas/charts/dark/_category-chart.scss b/sass/themes/schemas/charts/dark/_category-chart.scss index 19d5daf7..d57444c2 100644 --- a/sass/themes/schemas/charts/dark/_category-chart.scss +++ b/sass/themes/schemas/charts/dark/_category-chart.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use '../light/category-chart' as *; //// diff --git a/sass/themes/schemas/charts/light/_category-chart.scss b/sass/themes/schemas/charts/light/_category-chart.scss index ec407739..4b4a0d20 100644 --- a/sass/themes/schemas/charts/light/_category-chart.scss +++ b/sass/themes/schemas/charts/light/_category-chart.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming /// @group schemas diff --git a/sass/themes/schemas/charts/light/_data-chart.scss b/sass/themes/schemas/charts/light/_data-chart.scss index 8b81eaed..b16442ca 100644 --- a/sass/themes/schemas/charts/light/_data-chart.scss +++ b/sass/themes/schemas/charts/light/_data-chart.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming /// @group schemas diff --git a/sass/themes/schemas/charts/light/_doughnut-chart.scss b/sass/themes/schemas/charts/light/_doughnut-chart.scss index b89dd04e..af6599e9 100644 --- a/sass/themes/schemas/charts/light/_doughnut-chart.scss +++ b/sass/themes/schemas/charts/light/_doughnut-chart.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming /// @group schemas diff --git a/sass/themes/schemas/charts/light/_financial-chart.scss b/sass/themes/schemas/charts/light/_financial-chart.scss index 1b9ef1a8..7d0a744f 100644 --- a/sass/themes/schemas/charts/light/_financial-chart.scss +++ b/sass/themes/schemas/charts/light/_financial-chart.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming /// @group schemas diff --git a/sass/themes/schemas/charts/light/_funnel-chart.scss b/sass/themes/schemas/charts/light/_funnel-chart.scss index 373befac..e0b208b7 100644 --- a/sass/themes/schemas/charts/light/_funnel-chart.scss +++ b/sass/themes/schemas/charts/light/_funnel-chart.scss @@ -1,4 +1,5 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length + //// /// @package theming /// @group schemas diff --git a/sass/themes/schemas/charts/light/_gauge.scss b/sass/themes/schemas/charts/light/_gauge.scss index 76b6a04a..bb4df066 100644 --- a/sass/themes/schemas/charts/light/_gauge.scss +++ b/sass/themes/schemas/charts/light/_gauge.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use '../../../../utils/map' as *; //// diff --git a/sass/themes/schemas/charts/light/_geo-map.scss b/sass/themes/schemas/charts/light/_geo-map.scss index e3205556..a96a480c 100644 --- a/sass/themes/schemas/charts/light/_geo-map.scss +++ b/sass/themes/schemas/charts/light/_geo-map.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming diff --git a/sass/themes/schemas/charts/light/_graph.scss b/sass/themes/schemas/charts/light/_graph.scss index a85550c4..bbef368e 100644 --- a/sass/themes/schemas/charts/light/_graph.scss +++ b/sass/themes/schemas/charts/light/_graph.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming diff --git a/sass/themes/schemas/charts/light/_pie-chart.scss b/sass/themes/schemas/charts/light/_pie-chart.scss index 19fae3c2..af0d4b75 100644 --- a/sass/themes/schemas/charts/light/_pie-chart.scss +++ b/sass/themes/schemas/charts/light/_pie-chart.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming /// @group schemas diff --git a/sass/themes/schemas/charts/light/_shape-chart.scss b/sass/themes/schemas/charts/light/_shape-chart.scss index f1b21a41..04babdb7 100644 --- a/sass/themes/schemas/charts/light/_shape-chart.scss +++ b/sass/themes/schemas/charts/light/_shape-chart.scss @@ -1,4 +1,5 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length + //// /// @package theming /// @group schemas diff --git a/sass/themes/schemas/components/dark/_button.scss b/sass/themes/schemas/components/dark/_button.scss index cfa90116..4256341c 100644 --- a/sass/themes/schemas/components/dark/_button.scss +++ b/sass/themes/schemas/components/dark/_button.scss @@ -1,7 +1,7 @@ @use '../../../../utils/map' as *; @use '../light/button' as *; -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming diff --git a/sass/themes/schemas/components/dark/_combo.scss b/sass/themes/schemas/components/dark/_combo.scss index f2928123..860daf7a 100644 --- a/sass/themes/schemas/components/dark/_combo.scss +++ b/sass/themes/schemas/components/dark/_combo.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a dark material combo schema. /// @type {Map} diff --git a/sass/themes/schemas/components/dark/_drop-down.scss b/sass/themes/schemas/components/dark/_drop-down.scss index 953774c0..1c149263 100644 --- a/sass/themes/schemas/components/dark/_drop-down.scss +++ b/sass/themes/schemas/components/dark/_drop-down.scss @@ -9,7 +9,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base dark drop-down schema. /// @type {Map} diff --git a/sass/themes/schemas/components/dark/_icon-button.scss b/sass/themes/schemas/components/dark/_icon-button.scss index 379c447a..29efd426 100644 --- a/sass/themes/schemas/components/dark/_icon-button.scss +++ b/sass/themes/schemas/components/dark/_icon-button.scss @@ -1,7 +1,7 @@ @use '../../../../utils/map' as *; @use '../light/icon-button' as *; -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming diff --git a/sass/themes/schemas/components/dark/_input-group.scss b/sass/themes/schemas/components/dark/_input-group.scss index 6483954f..03b84ced 100644 --- a/sass/themes/schemas/components/dark/_input-group.scss +++ b/sass/themes/schemas/components/dark/_input-group.scss @@ -1,7 +1,7 @@ @use '../../../../utils/map' as *; @use '../light/input-group' as *; -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming diff --git a/sass/themes/schemas/components/dark/_select.scss b/sass/themes/schemas/components/dark/_select.scss index 5ba2c3dd..f94155d7 100644 --- a/sass/themes/schemas/components/dark/_select.scss +++ b/sass/themes/schemas/components/dark/_select.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a dark material select schema. /// @type {Map} diff --git a/sass/themes/schemas/components/dark/_slider.scss b/sass/themes/schemas/components/dark/_slider.scss index 2672f8fb..040f8155 100644 --- a/sass/themes/schemas/components/dark/_slider.scss +++ b/sass/themes/schemas/components/dark/_slider.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a dark material slider schema. /// @type {Map} diff --git a/sass/themes/schemas/components/dark/_switch.scss b/sass/themes/schemas/components/dark/_switch.scss index 546f557a..1ae3551e 100644 --- a/sass/themes/schemas/components/dark/_switch.scss +++ b/sass/themes/schemas/components/dark/_switch.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a dark material switch schema. /// @type {Map} /// @prop {Map} thumb-off-color [color: ('gray', 100)] - The color of the thumb when the switch is off. diff --git a/sass/themes/schemas/components/dark/_tabs.scss b/sass/themes/schemas/components/dark/_tabs.scss index c7a63129..6b0b2959 100644 --- a/sass/themes/schemas/components/dark/_tabs.scss +++ b/sass/themes/schemas/components/dark/_tabs.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base dark tabs schema. /// @type {Map} diff --git a/sass/themes/schemas/components/dark/_tree.scss b/sass/themes/schemas/components/dark/_tree.scss index 6401248e..0ed7b6eb 100644 --- a/sass/themes/schemas/components/dark/_tree.scss +++ b/sass/themes/schemas/components/dark/_tree.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base dark tree schema. /// @type {Map} diff --git a/sass/themes/schemas/components/elevation/_input-group.scss b/sass/themes/schemas/components/elevation/_input-group.scss index 7d5b64a8..c932fd30 100644 --- a/sass/themes/schemas/components/elevation/_input-group.scss +++ b/sass/themes/schemas/components/elevation/_input-group.scss @@ -4,7 +4,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// @type Map /// @prop {Number} search-resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state of the search input. diff --git a/sass/themes/schemas/components/light/_button.scss b/sass/themes/schemas/components/light/_button.scss index 9b173673..151c7823 100644 --- a/sass/themes/schemas/components/light/_button.scss +++ b/sass/themes/schemas/components/light/_button.scss @@ -2,7 +2,7 @@ @use '../../../../typography/functions' as *; @use '../elevation/button' as *; -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length //// /// @package theming diff --git a/sass/themes/schemas/components/light/_checkbox.scss b/sass/themes/schemas/components/light/_checkbox.scss index 0e1da652..1a594903 100644 --- a/sass/themes/schemas/components/light/_checkbox.scss +++ b/sass/themes/schemas/components/light/_checkbox.scss @@ -7,7 +7,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a light checkbox schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_combo.scss b/sass/themes/schemas/components/light/_combo.scss index 8e1cd5c8..f2aa090e 100644 --- a/sass/themes/schemas/components/light/_combo.scss +++ b/sass/themes/schemas/components/light/_combo.scss @@ -7,7 +7,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a light combo schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_drop-down.scss b/sass/themes/schemas/components/light/_drop-down.scss index 30c0f7cb..7802128c 100644 --- a/sass/themes/schemas/components/light/_drop-down.scss +++ b/sass/themes/schemas/components/light/_drop-down.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a light drop-down schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_input-group.scss b/sass/themes/schemas/components/light/_input-group.scss index f97789f3..d434c78c 100644 --- a/sass/themes/schemas/components/light/_input-group.scss +++ b/sass/themes/schemas/components/light/_input-group.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base light input-group schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_rating.scss b/sass/themes/schemas/components/light/_rating.scss index 9875df85..a1e431b5 100644 --- a/sass/themes/schemas/components/light/_rating.scss +++ b/sass/themes/schemas/components/light/_rating.scss @@ -7,7 +7,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base light rating schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_select.scss b/sass/themes/schemas/components/light/_select.scss index 45fb68d9..9c9ae149 100644 --- a/sass/themes/schemas/components/light/_select.scss +++ b/sass/themes/schemas/components/light/_select.scss @@ -7,7 +7,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base light select schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_slider.scss b/sass/themes/schemas/components/light/_slider.scss index ec5ceeb0..97d7353c 100644 --- a/sass/themes/schemas/components/light/_slider.scss +++ b/sass/themes/schemas/components/light/_slider.scss @@ -7,7 +7,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base light slider schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_switch.scss b/sass/themes/schemas/components/light/_switch.scss index 7a32d373..0e8b6f56 100644 --- a/sass/themes/schemas/components/light/_switch.scss +++ b/sass/themes/schemas/components/light/_switch.scss @@ -8,7 +8,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base light switch schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_tabs.scss b/sass/themes/schemas/components/light/_tabs.scss index abca4a2c..d9e8a581 100644 --- a/sass/themes/schemas/components/light/_tabs.scss +++ b/sass/themes/schemas/components/light/_tabs.scss @@ -7,7 +7,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base light tabs schema. /// @type {Map} diff --git a/sass/themes/schemas/components/light/_tree.scss b/sass/themes/schemas/components/light/_tree.scss index b76a6cf4..e1f2a65b 100644 --- a/sass/themes/schemas/components/light/_tree.scss +++ b/sass/themes/schemas/components/light/_tree.scss @@ -7,7 +7,7 @@ /// @access public //// -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length /// Generates a base light tree schema. /// @type {Map} diff --git a/sass/typography/presets/_bootstrap.scss b/sass/typography/presets/_bootstrap.scss index da5291f4..1ac97626 100644 --- a/sass/typography/presets/_bootstrap.scss +++ b/sass/typography/presets/_bootstrap.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-line-length */ +// stylelint-disable max-line-length @use '../../config' as *; @use '../functions' as *; @use '../../utils/map' as *; diff --git a/test/_animations.spec.scss b/test/_animations.spec.scss index 8a80e05a..5b498b64 100644 --- a/test/_animations.spec.scss +++ b/test/_animations.spec.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-nesting-depth */ +// stylelint-disable max-nesting-depth @use '../node_modules/sass-true/' as *; @use '../sass/animations/mixins' as *; @use 'sass:map'; diff --git a/test/_bem.spec.scss b/test/_bem.spec.scss index 642c6c70..c82c96b4 100644 --- a/test/_bem.spec.scss +++ b/test/_bem.spec.scss @@ -1,5 +1,5 @@ -/* stylelint-disable selector-class-pattern */ -/* stylelint-disable max-nesting-depth */ +// stylelint-disable selector-class-pattern +// stylelint-disable max-nesting-depth @use '../node_modules/sass-true/' as *; @use '../sass/bem' as *; diff --git a/test/_color.spec.scss b/test/_color.spec.scss index 67875fe8..8b7079ef 100644 --- a/test/_color.spec.scss +++ b/test/_color.spec.scss @@ -1,5 +1,5 @@ -/* stylelint-disable custom-property-no-missing-var-function */ -/* stylelint-disable max-nesting-depth */ +// stylelint-disable custom-property-no-missing-var-function +// stylelint-disable max-nesting-depth @use 'sass:map'; @use 'sass:list'; @use 'sass:math'; diff --git a/test/_elevations.spec.scss b/test/_elevations.spec.scss index 905a2e31..328df26f 100644 --- a/test/_elevations.spec.scss +++ b/test/_elevations.spec.scss @@ -1,4 +1,4 @@ -/* stylelint-disable scss/operator-no-unspaced */ +// stylelint-disable scss/operator-no-unspaced @use 'sass:meta'; @use 'sass:list'; @use '../node_modules/sass-true/' as *; diff --git a/test/_themes.spec.scss b/test/_themes.spec.scss index 771432c1..6e5f454d 100644 --- a/test/_themes.spec.scss +++ b/test/_themes.spec.scss @@ -1,7 +1,7 @@ -/* stylelint-disable max-line-length */ -/* stylelint-disable value-no-vendor-prefix */ -/* stylelint-disable color-function-notation */ -/* stylelint-disable max-nesting-depth */ +// stylelint-disable max-line-length +// stylelint-disable value-no-vendor-prefix +// stylelint-disable color-function-notation +// stylelint-disable max-nesting-depth @use 'sass:list'; @use 'sass:map'; @use 'sass:meta'; diff --git a/test/_typography.spec.scss b/test/_typography.spec.scss index 59e01dfb..6c4702c4 100644 --- a/test/_typography.spec.scss +++ b/test/_typography.spec.scss @@ -1,6 +1,6 @@ -/* stylelint-disable value-keyword-case */ -/* stylelint-disable custom-property-no-missing-var-function */ -/* stylelint-disable max-nesting-depth */ +// stylelint-disable value-keyword-case +// stylelint-disable custom-property-no-missing-var-function +// stylelint-disable max-nesting-depth @use 'sass:map'; @use 'sass:math'; @use 'sass:meta'; diff --git a/test/_utils.spec.scss b/test/_utils.spec.scss index 571c2afb..0d2b87b4 100644 --- a/test/_utils.spec.scss +++ b/test/_utils.spec.scss @@ -1,4 +1,4 @@ -/* stylelint-disable max-nesting-depth */ +// stylelint-disable max-nesting-depth @use '../node_modules/sass-true/' as *; @use '../sass/utils/' as *; @use 'sass:meta'; @@ -106,7 +106,7 @@ @include describe('math') { @include it('returns a number to a fixed floating point') { - /* stylelint-disable-next-line number-max-precision */ + // stylelint-disable-next-line number-max-precision $pi: 3.141592653589793; $fixed: to-fixed($pi, 2); From 3c540e0b86e2154ff67a2219368c0edd30a66568 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 20 Nov 2024 17:20:12 +0200 Subject: [PATCH 2/3] refactor(chart-themes): replace repeating brushes styles with a CSS variable This reduces the amount of generated CSS by quite a few lines. --- sass/themes/_functions.scss | 2 +- sass/themes/charts/_theme.scss | 10 ++++++++++ test/_themes.spec.scss | 2 +- test/e2e/theme.scss | 2 -- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/sass/themes/_functions.scss b/sass/themes/_functions.scss index eba0b2f7..868b5cad 100644 --- a/sass/themes/_functions.scss +++ b/sass/themes/_functions.scss @@ -44,7 +44,7 @@ // Special case for chart brushes @if $value == 'series' { - $result: map.merge($result, (#{$key}: #{color.chart-brushes()})); + $result: map.merge($result, (#{$key}: var(--chart-brushes))); } } diff --git a/sass/themes/charts/_theme.scss b/sass/themes/charts/_theme.scss index ccc37f66..c89f8af8 100644 --- a/sass/themes/charts/_theme.scss +++ b/sass/themes/charts/_theme.scss @@ -1,4 +1,5 @@ @use '../mixins' as *; +@use '../../color/functions' as color; @use './category-chart-theme' as *; @use './data-chart-theme' as *; @use './doughnut-chart-theme' as *; @@ -12,6 +13,15 @@ @use './sparkline-theme' as *; @mixin chart-themes($schema, $target: 'angular') { + :root { + @include css-vars-from-theme( + ( + chart-brushes: color.chart-brushes(), + ), + 'ig' + ); + } + @include css-vars(category-chart-theme($schema: $schema, $target: $target)); @include css-vars(data-chart-theme($schema: $schema, $target: $target)); @include css-vars(doughnut-chart-theme($schema: $schema, $target: $target)); diff --git a/test/_themes.spec.scss b/test/_themes.spec.scss index 6e5f454d..96e74998 100644 --- a/test/_themes.spec.scss +++ b/test/_themes.spec.scss @@ -109,7 +109,7 @@ $schema: ( hover-foreground: color-mix(in oklch, var(--ig-secondary-700-contrast) 100%, transparent), border-style: solid, border-radius: .125rem, - brushes: #{chart-brushes()}, + brushes: var(--chart-brushes), resting-elevation: var(--ig-elevation-2), _meta: ( version: 1 diff --git a/test/e2e/theme.scss b/test/e2e/theme.scss index ff7cfc10..c0137706 100644 --- a/test/e2e/theme.scss +++ b/test/e2e/theme.scss @@ -20,6 +20,4 @@ $handmade-palette: mocks.$handmade-palette; @include palette($handmade-palette); - - color: color($handmade-palette, 'primary', 300); } From ec2233672092078edf3bfa50893e4ba058b7437e Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 20 Nov 2024 17:20:55 +0200 Subject: [PATCH 3/3] style(*): replace percentage values with floating point numbers --- sass/animations/entrances/_flicker.scss | 74 ++++----- sass/animations/exits/_flicker.scss | 74 ++++----- sass/animations/generic/_shadows.scss | 156 +++++++++--------- .../schemas/components/dark/_overlay.scss | 2 +- .../schemas/components/light/_overlay.scss | 2 +- 5 files changed, 154 insertions(+), 154 deletions(-) diff --git a/sass/animations/entrances/_flicker.scss b/sass/animations/entrances/_flicker.scss index 06c27f72..a1334994 100644 --- a/sass/animations/entrances/_flicker.scss +++ b/sass/animations/entrances/_flicker.scss @@ -165,7 +165,7 @@ 20.1% { opacity: 1; - box-shadow: 0 0 30px rgb(255 255 255 / 25%); + box-shadow: 0 0 30px rgb(255 255 255 / 0.25); } 20.6% { @@ -181,15 +181,15 @@ 30.1% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 30.5% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 30.6% { @@ -205,22 +205,22 @@ 45.1% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 50% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 55% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 55.1% { @@ -236,15 +236,15 @@ 57.1% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 30%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.3); } 60% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 30%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.3); } 60.1% { @@ -260,17 +260,17 @@ 65.1% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 30%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.3), + 0 0 100px rgb(255 255 255 / 0.1); } 75% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 30%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.3), + 0 0 100px rgb(255 255 255 / 0.1); } 75.1% { @@ -286,19 +286,19 @@ 77.1% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 60%), - 0 0 60px rgb(255 255 255 / 40%), - 0 0 110px rgb(255 255 255 / 20%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.6), + 0 0 60px rgb(255 255 255 / 0.4), + 0 0 110px rgb(255 255 255 / 0.2), + 0 0 100px rgb(255 255 255 / 0.1); } 85% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 60%), - 0 0 60px rgb(255 255 255 / 40%), - 0 0 110px rgb(255 255 255 / 20%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.6), + 0 0 60px rgb(255 255 255 / 0.4), + 0 0 110px rgb(255 255 255 / 0.2), + 0 0 100px rgb(255 255 255 / 0.1); } 85.1% { @@ -314,19 +314,19 @@ 86.1% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 60%), - 0 0 60px rgb(255 255 255 / 45%), - 0 0 110px rgb(255 255 255 / 25%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.6), + 0 0 60px rgb(255 255 255 / 0.45), + 0 0 110px rgb(255 255 255 / 0.25), + 0 0 100px rgb(255 255 255 / 0.1); } 100% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 60%), - 0 0 60px rgb(255 255 255 / 45%), - 0 0 110px rgb(255 255 255 / 25%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.6), + 0 0 60px rgb(255 255 255 / 0.45), + 0 0 110px rgb(255 255 255 / 0.25), + 0 0 100px rgb(255 255 255 / 0.1); } } } diff --git a/sass/animations/exits/_flicker.scss b/sass/animations/exits/_flicker.scss index cad7f776..90e5cd27 100644 --- a/sass/animations/exits/_flicker.scss +++ b/sass/animations/exits/_flicker.scss @@ -158,19 +158,19 @@ 0% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 60%), - 0 0 60px rgb(255 255 255 / 45%), - 0 0 110px rgb(255 255 255 / 25%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.6), + 0 0 60px rgb(255 255 255 / 0.45), + 0 0 110px rgb(255 255 255 / 0.25), + 0 0 100px rgb(255 255 255 / 0.1); } 13.9% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 60%), - 0 0 60px rgb(255 255 255 / 45%), - 0 0 110px rgb(255 255 255 / 25%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.6), + 0 0 60px rgb(255 255 255 / 0.45), + 0 0 110px rgb(255 255 255 / 0.25), + 0 0 100px rgb(255 255 255 / 0.1); } 14% { @@ -186,19 +186,19 @@ 15% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 40%), - 0 0 110px rgb(255 255 255 / 20%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.4), + 0 0 110px rgb(255 255 255 / 0.2), + 0 0 100px rgb(255 255 255 / 0.1); } 22.9% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 40%), - 0 0 110px rgb(255 255 255 / 20%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.4), + 0 0 110px rgb(255 255 255 / 0.2), + 0 0 100px rgb(255 255 255 / 0.1); } 23% { @@ -214,17 +214,17 @@ 25% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 35%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.35), + 0 0 100px rgb(255 255 255 / 0.1); } 34.9% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 35%), - 0 0 100px rgb(255 255 255 / 10%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.35), + 0 0 100px rgb(255 255 255 / 0.1); } 35% { @@ -240,15 +240,15 @@ 40% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 35%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.35); } 42.9% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 55%), - 0 0 60px rgb(255 255 255 / 35%); + 0 0 30px rgb(255 255 255 / 0.55), + 0 0 60px rgb(255 255 255 / 0.35); } 43% { @@ -264,22 +264,22 @@ 45% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 50% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 54.9% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 55% { @@ -295,15 +295,15 @@ 69.5% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 69.9% { opacity: 1; box-shadow: - 0 0 30px rgb(255 255 255 / 45%), - 0 0 60px rgb(255 255 255 / 25%); + 0 0 30px rgb(255 255 255 / 0.45), + 0 0 60px rgb(255 255 255 / 0.25); } 70% { @@ -318,7 +318,7 @@ 79.9% { opacity: 1; - box-shadow: 0 0 30px rgb(255 255 255 / 25%); + box-shadow: 0 0 30px rgb(255 255 255 / 0.25); } 80% { diff --git a/sass/animations/generic/_shadows.scss b/sass/animations/generic/_shadows.scss index 887e2616..78505c69 100644 --- a/sass/animations/generic/_shadows.scss +++ b/sass/animations/generic/_shadows.scss @@ -11,11 +11,11 @@ @mixin shadow-drop-center { @include keyframes(shadow-drop-center) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: 0 0 20px 0 rgb(0 0 0 / 35%); + box-shadow: 0 0 20px 0 rgb(0 0 0 / 0.35); } } } @@ -25,14 +25,14 @@ @include keyframes(shadow-drop-tb) { 0% { box-shadow: - 0 0 0 0 rgb(0 0 0 / 0%), - 0 0 0 0 rgb(0 0 0 / 0%); + 0 0 0 0 rgb(0 0 0 / 0), + 0 0 0 0 rgb(0 0 0 / 0); } 100% { box-shadow: - 0 -12px 20px -12px rgb(0 0 0 / 35%), - 0 12px 20px -12px rgb(0 0 0 / 35%); + 0 -12px 20px -12px rgb(0 0 0 / 0.35), + 0 12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -41,11 +41,11 @@ @mixin shadow-drop-top { @include keyframes(shadow-drop-top) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: 0 -12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: 0 -12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -54,11 +54,11 @@ @mixin shadow-drop-tr { @include keyframes(shadow-drop-tr) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: 12px -12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: 12px -12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -67,11 +67,11 @@ @mixin shadow-drop-right { @include keyframes(shadow-drop-right) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: 12px 0 20px -12px rgb(0 0 0 / 35%); + box-shadow: 12px 0 20px -12px rgb(0 0 0 / 0.35); } } } @@ -80,11 +80,11 @@ @mixin shadow-drop-br { @include keyframes(shadow-drop-br) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: 12px 12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: 12px 12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -93,11 +93,11 @@ @mixin shadow-drop-bottom { @include keyframes(shadow-drop-bottom) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: 0 12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: 0 12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -106,11 +106,11 @@ @mixin shadow-drop-bl { @include keyframes(shadow-drop-bl) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: -12px 12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: -12px 12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -119,11 +119,11 @@ @mixin shadow-drop-left { @include keyframes(shadow-drop-left) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: -12px 0 20px -12px rgb(0 0 0 / 35%); + box-shadow: -12px 0 20px -12px rgb(0 0 0 / 0.35); } } } @@ -132,11 +132,11 @@ @mixin shadow-drop-tl { @include keyframes(shadow-drop-tl) { 0% { - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: -12px -12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: -12px -12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -146,14 +146,14 @@ @include keyframes(shadow-drop-lr) { 0% { box-shadow: - 0 0 0 0 rgb(0 0 0 / 0%), - 0 0 0 0 rgb(0 0 0 / 0%); + 0 0 0 0 rgb(0 0 0 / 0), + 0 0 0 0 rgb(0 0 0 / 0); } 100% { box-shadow: - -12px 0 20px -12px rgb(0 0 0 / 35%), - 12px 0 20px -12px rgb(0 0 0 / 35%); + -12px 0 20px -12px rgb(0 0 0 / 0.35), + 12px 0 20px -12px rgb(0 0 0 / 0.35); } } } @@ -163,12 +163,12 @@ @include keyframes(shadow-drop-2-center) { 0% { transform: translateZ(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px); - box-shadow: 0 0 20px 0 rgb(0 0 0 / 35%); + box-shadow: 0 0 20px 0 rgb(0 0 0 / 0.35); } } } @@ -179,15 +179,15 @@ 0% { transform: translateZ(0); box-shadow: - 0 0 0 0 rgb(0 0 0 / 0%), - 0 0 0 0 rgb(0 0 0 / 0%); + 0 0 0 0 rgb(0 0 0 / 0), + 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px); box-shadow: - 0 -12px 20px -12px rgb(0 0 0 / 35%), - 0 12px 20px -12px rgb(0 0 0 / 35%); + 0 -12px 20px -12px rgb(0 0 0 / 0.35), + 0 12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -197,12 +197,12 @@ @include keyframes(shadow-drop-2-top) { 0% { transform: translateZ(0) translateY(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px) translateY(12px); - box-shadow: 0 -12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: 0 -12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -212,12 +212,12 @@ @include keyframes(shadow-drop-2-tr) { 0% { transform: translateZ(0) translateX(0) translateY(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px) translateX(-12px) translateY(12px); - box-shadow: 12px -12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: 12px -12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -227,12 +227,12 @@ @include keyframes(shadow-drop-2-right) { 0% { transform: translateZ(0) translateX(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px) translateX(-12px); - box-shadow: 12px 0 20px -12px rgb(0 0 0 / 35%); + box-shadow: 12px 0 20px -12px rgb(0 0 0 / 0.35); } } } @@ -242,12 +242,12 @@ @include keyframes(shadow-drop-2-br) { 0% { transform: translateZ(0) translateX(0) translateY(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px) translateX(-12px) translateY(-12px); - box-shadow: 12px 12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: 12px 12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -257,12 +257,12 @@ @include keyframes(shadow-drop-2-bottom) { 0% { transform: translateZ(0) translateY(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px) translateY(-12px); - box-shadow: 0 12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: 0 12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -272,12 +272,12 @@ @include keyframes(shadow-drop-2-bl) { 0% { transform: translateZ(0) translateX(0) translateY(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px) translateX(12px) translateY(-12px); - box-shadow: -12px 12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: -12px 12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -287,12 +287,12 @@ @include keyframes(shadow-drop-2-left) { 0% { transform: translateZ(0) translateX(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px) translateX(12px); - box-shadow: -12px 0 20px -12px rgb(0 0 0 / 35%); + box-shadow: -12px 0 20px -12px rgb(0 0 0 / 0.35); } } } @@ -302,12 +302,12 @@ @include keyframes(shadow-drop-2-tl) { 0% { transform: translateZ(0) translateX(0) translateY(0); - box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px) translateX(12px) translateY(12px); - box-shadow: -12px -12px 20px -12px rgb(0 0 0 / 35%); + box-shadow: -12px -12px 20px -12px rgb(0 0 0 / 0.35); } } } @@ -318,15 +318,15 @@ 0% { transform: translateZ(0); box-shadow: - 0 0 0 0 rgb(0 0 0 / 0%), - 0 0 0 0 rgb(0 0 0 / 0%); + 0 0 0 0 rgb(0 0 0 / 0), + 0 0 0 0 rgb(0 0 0 / 0); } 100% { transform: translateZ(50px); box-shadow: - -12px 0 20px -12px rgb(0 0 0 / 35%), - 12px 0 20px -12px rgb(0 0 0 / 35%); + -12px 0 20px -12px rgb(0 0 0 / 0.35), + 12px 0 20px -12px rgb(0 0 0 / 0.35); } } } @@ -460,14 +460,14 @@ @include keyframes(shadow-inset-tb) { 0% { box-shadow: - inset 0 0 0 0 rgb(0 0 0 / 0%), - inset 0 0 0 0 rgb(0 0 0 / 0%); + inset 0 0 0 0 rgb(0 0 0 / 0), + inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { box-shadow: - inset 0 -6px 14px -6px rgb(0 0 0 / 50%), - inset 0 6px 14px -6px rgb(0 0 0 / 50%); + inset 0 -6px 14px -6px rgb(0 0 0 / 0.5), + inset 0 6px 14px -6px rgb(0 0 0 / 0.5); } } } @@ -476,11 +476,11 @@ @mixin shadow-inset-top { @include keyframes(shadow-inset-top) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset 0 6px 14px -6px rgb(0 0 0 / 50%); + box-shadow: inset 0 6px 14px -6px rgb(0 0 0 / 0.5); } } } @@ -489,11 +489,11 @@ @mixin shadow-inset-center { @include keyframes(shadow-inset-center) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset 0 0 14px 0 rgb(0 0 0 / 50%); + box-shadow: inset 0 0 14px 0 rgb(0 0 0 / 0.5); } } } @@ -502,11 +502,11 @@ @mixin shadow-inset-tr { @include keyframes(shadow-inset-tr) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset -6px 6px 14px -6px rgb(0 0 0 / 50%); + box-shadow: inset -6px 6px 14px -6px rgb(0 0 0 / 0.5); } } } @@ -515,11 +515,11 @@ @mixin shadow-inset-right { @include keyframes(shadow-inset-right) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset -6px 0 14px -6px rgb(0 0 0 / 50%); + box-shadow: inset -6px 0 14px -6px rgb(0 0 0 / 0.5); } } } @@ -528,11 +528,11 @@ @mixin shadow-inset-br { @include keyframes(shadow-inset-br) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset -6px -6px 14px -6px rgb(0 0 0 / 50%); + box-shadow: inset -6px -6px 14px -6px rgb(0 0 0 / 0.5); } } } @@ -541,11 +541,11 @@ @mixin shadow-inset-bottom { @include keyframes(shadow-inset-bottom) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset 0 -6px 14px -6px rgb(0 0 0 / 50%); + box-shadow: inset 0 -6px 14px -6px rgb(0 0 0 / 0.5); } } } @@ -554,11 +554,11 @@ @mixin shadow-inset-bl { @include keyframes(shadow-inset-bl) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset 6px -6px 14px -6px rgb(0 0 0 / 50%); + box-shadow: inset 6px -6px 14px -6px rgb(0 0 0 / 0.5); } } } @@ -567,11 +567,11 @@ @mixin shadow-inset-left { @include keyframes(shadow-inset-left) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset 6px 0 14px -6px rgb(0 0 0 / 50%); + box-shadow: inset 6px 0 14px -6px rgb(0 0 0 / 0.5); } } } @@ -580,11 +580,11 @@ @mixin shadow-inset-tl { @include keyframes(shadow-inset-tl) { 0% { - box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0%); + box-shadow: inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { - box-shadow: inset 6px 6px 14px -6px rgb(0 0 0 / 50%); + box-shadow: inset 6px 6px 14px -6px rgb(0 0 0 / 0.5); } } } @@ -594,14 +594,14 @@ @include keyframes(shadow-inset-lr) { 0% { box-shadow: - inset 0 0 0 0 rgb(0 0 0 / 0%), - inset 0 0 0 0 rgb(0 0 0 / 0%); + inset 0 0 0 0 rgb(0 0 0 / 0), + inset 0 0 0 0 rgb(0 0 0 / 0); } 100% { box-shadow: - inset -6px 0 14px -6px rgb(0 0 0 / 50%), - inset 6px 0 14px -6px rgb(0 0 0 / 50%); + inset -6px 0 14px -6px rgb(0 0 0 / 0.5), + inset 6px 0 14px -6px rgb(0 0 0 / 0.5); } } } diff --git a/sass/themes/schemas/components/dark/_overlay.scss b/sass/themes/schemas/components/dark/_overlay.scss index c8bb0536..f3eb8c48 100644 --- a/sass/themes/schemas/components/dark/_overlay.scss +++ b/sass/themes/schemas/components/dark/_overlay.scss @@ -19,7 +19,7 @@ $dark-material-overlay: $material-overlay; $dark-fluent-overlay: extend( $fluent-overlay, ( - background-color: rgb(0 0 0 / 40%), + background-color: rgb(0 0 0 / 0.4), ) ); diff --git a/sass/themes/schemas/components/light/_overlay.scss b/sass/themes/schemas/components/light/_overlay.scss index 5b886b55..e14b5f57 100644 --- a/sass/themes/schemas/components/light/_overlay.scss +++ b/sass/themes/schemas/components/light/_overlay.scss @@ -32,7 +32,7 @@ $material-overlay: $light-overlay; $fluent-overlay: extend( $light-overlay, ( - background-color: rgb(255 255 255 / 40%), + background-color: rgb(255 255 255 / 0.4), ) );