fix: update deprecated Sass functions to modern syntax

[Roque98]

Replace deprecated Sass functions with modern alternatives to prepare for Dart Sass 3.0.0 and eliminate build warnings:

• Replace lighten() and darken() with color.adjust()
• Replace transparentize() with color.adjust($alpha)
• Replace red(), green(), blue() with color.channel()
• Replace mix() with color.mix()
• Replace map-merge() with map.merge()
• Replace index() with list.index()
• Replace nth() with list.nth()

Files modified:

• src/scss/_variables.scss
• src/scss/_general.scss
• src/scss/_generic.scss
• src/scss/menu/_menu-lite.scss
• src/scss/mixins/_function.scss
• src/scss/mixins/_buttons.scss
• src/scss/theme-elements/_data-tables.scss
• src/scss/theme-elements/_labels-badges.scss
• src/scss/theme-elements/_radiobox-checkbox.scss

Commit Checklist

• Remove UNUSED comment code
• Remove any logging like console.log
• Remove all warnings and errors while build
• Check vulnerabilities
• Make sure build for production is working. Try running command for prod build in local.
• Fix prettier: npx prettier --write .
• Fix eslint: npx eslint src\ --fix command
• Push package.lock only if you used npm, push yarn.lock only if you used yarn. NPM will udpate both lock file so make sure you dont push yarn.lock updated by NPM
• WCAG

General

• Follow import structure. module/third-party/files/component/style/types/asset
• Try to use theme for design like palette, typography, variant, components, etc. (don't use custom color code anyhow)
• Before adding custom style follow our pre-built components/elements

[phoenixcoded20]

{
"file": "src/scss/_general.scss",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "The use of 'color.adjust' with a negative alpha value may lead to confusion regarding transparency. It's important to ensure that the intended color adjustment aligns with the design specifications.",
"recommendedFix": "Consider using a more clear method for adjusting transparency instead of a negative alpha value.",
"codeFix": "@use "sass:color";\n\n body {\n font-family: $theme-font-family;\n font-size: $theme-font-size;\n }\n\n p.text-muted {\n &:active,\n &:focus,\n &:hover {\n- background: transparentize($primary-color, 0.9);\n+ background: color.opacity($primary-color, 0.1);\n \n > a {\n background: transparent;\n }\n }\n }"
}
]
}

[phoenixcoded20]

{
"file": "src/scss/_generic.scss",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "low",
"description": "The usage of the new Sass module system is good, but consistency in naming conventions is important for maintainability.\nIn the context of the patch, it seems better to use @use for importing all necessary Sass utilities upfront to keep uniformity.",
"recommendedFix": "Consider importing all necessary Sass features at the start of the file for clarity.",
"codeFix": "@use "sass:list" as list;\n\n@use "sass:list" as list;"
}
]
}

[phoenixcoded20]

{
"file": "src/scss/_variables.scss",
"approved": false,
"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "The variable names should be consistent with respect to casing. For example, $Menu-width and $menu-icon-color use different casing conventions.",
"recommendedFix": "Change variable names to follow a consistent naming convention.",
"codeFix": "$menu-width: 264px;\n$menu-collapsed-width: 80px;"
}
]
}

[phoenixcoded20]

{
"file": "src/scss/menu/_menu-lite.scss",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "The usage of 'color.adjust' might not be fully compatible with all versions of SASS. Using 'color.adjust' assumes the presence of the new Sass color module. Ensure that compatibility with existing codebase and SASS version is verified.",
"recommendedFix": "Test compatibility with the current Sass version. If 'color.adjust' is not supported, consider using 'transparentize' or 'darken' as appropriate.",
"codeFix": "@use "sass:color";\n\n &.notification:hover {\n- background: transparentize($primary-color, 0.9);\n+ background: color.adjust($primary-color, $alpha: -0.9);\n }\n\n &:active,\n &:focus,\n &:hover {\n- background: transparentize($primary-color, 0.9);\n+ background: color.adjust($primary-color, $alpha: -0.9);\n }\n\n .pcoded-submenu {\n- background: darken($header-dark-background, 3%);\n+ background: color.adjust($header-dark-background, $lightness: -3%);\n }\n\n background: transparentize($menu-dark-text-color, 0.9);\n+ background: color.adjust($menu-dark-text-color, $alpha: -0.9);\n }\n\n > a {\n- background: darken($menu-dark-background, 6%);\n+ background: color.adjust($menu-dark-background, $lightness: -6%);\n }"
}
]
}

[phoenixcoded20]

{
"file": "src/scss/mixins/_buttons.scss",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "The usage of the color.adjust function replaces the deprecated darken and transparentize functions. However, the transition to color.adjust is not fully consistent across the button-variant mixin and button-glow-variant mixin. Ensure that all color adjustments are uniformly handled using the newer functions.",
"recommendedFix": "Use color.adjust consistently in both the button-variant and button-glow-variant mixins to enhance maintainability.",
"codeFix": "@mixin button-variant(\n $background,\n $border,\n $hover-background: color.adjust($background, $lightness: -7.5%),\n $hover-border: color.adjust($border, $lightness: -10%),\n $active-background: color.adjust($background, $lightness: -10%),\n $active-border: color.adjust($border, $lightness: -12.5%)\n) {\n color: color-yiq($background);\n background-color: $border;\n}\n@mixin button-glow-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {\n box-shadow:\n 0 1px 6px 2px color.adjust($color, $alpha: -0.44),\n 0 6px 11px 2px color.adjust($color, $alpha: -0.8);\n &:hover {\n box-shadow:\n 0 1px 4px 2px color.adjust($color, $alpha: -0.44),\n 0 4px 9px 2px color.adjust($color, $alpha: -0.9);\n }\n &:not(:disabled):not(.disabled).active,\n &:not(:disabled):not(.disabled):active:focus,"
}
]
}

[phoenixcoded20]

{
"file": "src/scss/mixins/_function.scss",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "The use of SASS color functions is improved from deprecated color extraction functions to the new color functions. However, ensure that the input to color.channel is always in a compatible format to avoid runtime errors.",
"recommendedFix": "Check that the $color variable is always a valid color format before calling color.channel on it.",
"codeFix": "\n@if type-of($color) != 'color' {\n @error 'Invalid color input';\n} "
}
]
}

[phoenixcoded20]

{
"file": "src/scss/theme-elements/_data-tables.scss",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "The use of color.adjust with $alpha and $lightness provides similar functionality to the previously used functions but may not be widely supported across all environments depending on the version of Sass being used. Ensure compatibility with your intended Sass version.",
"recommendedFix": "Verify compatibility of color.adjust in your project's Sass version or consider sticking with established methods like lighten and darken for broader support.",
"codeFix": "@use "sass:color";\n\n.table-striped {\n tbody tr:nth-of-type(2n + 1) {\n background-color: transparentize($primary-color, 0.95);\n }\n}\n\n.table-hover {\n tbody tr {\n &:hover {\n background-color: transparentize($primary-color, 0.95);\n }\n }\n}\n\nth {\n border-color: darken($dark-color, 10%);\n}\n\n&.table-striped {\n tbody tr:nth-of-type(odd) {\n background-color: darken($dark-color, 2%);\n }\n}\n\n&.table-hover {\n tbody tr {\n &:hover {\n background-color: darken($dark-color, 5%);\n }\n }\n}"
}
]
}

[phoenixcoded20]

{
"file": "src/scss/theme-elements/_labels-badges.scss",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "Usage of @use is correct, but there is no indication of where $color-bt-name and $color-bt-color are defined or imported, which can lead to confusion. Ensure these variables are globally available or define them appropriately within this file.",
"recommendedFix": "Check that the variables are imported correctly or define them in a relevant scope.",
"codeFix": ""
},
{
"type": "improvement",
"severity": "low",
"description": "Consider naming variables in a more descriptive manner to enhance readability and maintainability. For example, $color-bt-name could be renamed to something more specific based on its use.",
"recommendedFix": "Rename the variable to a more descriptive name to clarify its purpose.",
"codeFix": ""
}
]
}

[phoenixcoded20]

{
"file": "src/scss/theme-elements/_radiobox-checkbox.scss",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The code utilizes the new list functions, but the original code used Sass's built-in functions. As a best practice, ensure consistency in using either the newer techniques or the older ones throughout the file.",
"recommendedFix": "Choose to consistently use either the new list functions or the previous versions for better maintainability.",
"codeFix": "@use "sass:list";\n\n $i: index($color-bt-name, $value);\n\n background: nth($color-bt-color, $i);\n border-color: nth($color-bt-color, $i);"
}
]
}