Replace deprecated darken with color.adjust for Sass compliance #634

uditjainstjis · 2025-01-09T05:10:56Z

Summary

This code fixes Deprecated function darken being used, causing warning #633 the warning of depreciated darken function in the terminal and
Removes bug of a '{' bracket missing in the code.
Watching file was made for compiling the '.scss' file.

Changes/explanation

darken function was replaced with color.adjust which is supported
'{' bracket was added at the missing place
Ran the command: sass /css/ion_icon_customization.scss /css/ion_icon_customization.css to generate the compiled css file, which was necessary for "@use keyword" in @use "sass:color" which was used to use color thing to replaced darken the main thing.

Testing

Build the site locally with jekyll serve and verify image and list rendering.
Check bullet points and image scaling on mobile and desktop views.
Ensured now no error is present in the terminal and is clear.

quozl

don't write so much in the pull request alone, what you said should be in the commit message,
rewrite your commit message and force push, see our guidance for a checklist,
- add the problem to the commit message, as the GitHub issue will be lost and the commit message kept,
- add the solution to the commit message, as the GitHub pull request will be lost and the commit message kept,
do not make changes unrelated to your stated intent, be more careful, use interactive add of git if necessary to avoid any changes made by your software tools,

Please fix these things in your existing branch, squash your commits, and then force push to update the pull request.

quozl · 2025-01-09T07:24:25Z

css/ion_icon_customization.css

Generated files should not be committed.

quozl · 2025-01-09T07:24:36Z

css/ion_icon_customization.css.map

Generated files should not be committed.

css/ion_icon_customization.scss

quozl · 2025-01-10T23:43:43Z

While testing another pull request, I hit the deprecation warning so had a quick look at this.

Made changes as requested and pushed to pr634-test branch as 422361a ("Fix darken() is deprecated on local serve"), then tested.

The test failed as follows;

bundle exec jekyll serve --incremental
Configuration file: /root/www/_config.yml
            Source: /root/www
       Destination: /root/www/_site
 Incremental build: enabled
      Generating... 
       Jekyll Feed: Generating feed for posts
Error: There is no module with the namespace "color".
  ╷
9 │ $facebook-color-hover: color.adjust($facebook-color, $darken-percent);
  │                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  /root/www/css/ion_icon_customization.scss 9:24  root stylesheet 
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/ion_icon_customization.scss':
                    There is no module with the namespace "color".
                    ------------------------------------------------
      Jekyll 4.3.4   Please append `--trace` to the `serve` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------
/var/lib/gems/3.2.0/gems/jekyll-sass-converter-3.0.0/lib/jekyll/converters/scss.rb:175:in `rescue in convert': There is no module with the namespace "color". (Jekyll::Converters::Scss::SyntaxError)

        raise SyntaxError, e.message
              ^^^^^^^^^^^^^^^^^^^^^^
        from /var/lib/gems/3.2.0/gems/jekyll-sass-converter-3.0.0/lib/jekyll/converters/scss.rb:159:in `convert'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:105:in `block in convert'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:104:in `each'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:104:in `reduce'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:104:in `convert'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:84:in `render_document'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:63:in `run'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:572:in `render_regenerated'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:564:in `block in render_pages'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:563:in `each'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:563:in `render_pages'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:211:in `render'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:80:in `process'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/command.rb:28:in `process_site'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/commands/build.rb:65:in `build'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/commands/build.rb:36:in `process'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/command.rb:91:in `each'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/exe/jekyll:15:in `<top (required)>'
        from /usr/local/bin/jekyll:25:in `load'
        from /usr/local/bin/jekyll:25:in `<main>'
/var/lib/gems/3.2.0/gems/sass-embedded-1.83.1-x86_64-linux-gnu/lib/sass/compiler/host.rb:86:in `compile_request': There is no module with the namespace "color". (Sass::CompileError)
        from /var/lib/gems/3.2.0/gems/sass-embedded-1.83.1-x86_64-linux-gnu/lib/sass/compiler.rb:171:in `compile_string'
        from /var/lib/gems/3.2.0/gems/sass-embedded-1.83.1-x86_64-linux-gnu/lib/sass/embedded.rb:37:in `compile_string'
        from /var/lib/gems/3.2.0/gems/jekyll-sass-converter-3.0.0/lib/jekyll/converters/scss.rb:160:in `convert'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:105:in `block in convert'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:104:in `each'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:104:in `reduce'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:104:in `convert'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:84:in `render_document'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/renderer.rb:63:in `run'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:572:in `render_regenerated'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:564:in `block in render_pages'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:563:in `each'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:563:in `render_pages'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:211:in `render'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/site.rb:80:in `process'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/command.rb:28:in `process_site'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/commands/build.rb:65:in `build'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/commands/build.rb:36:in `process'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/command.rb:91:in `each'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
        from /var/lib/gems/3.2.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
        from /var/lib/gems/3.2.0/gems/jekyll-4.3.4/exe/jekyll:15:in `<top (required)>'
        from /usr/local/bin/jekyll:25:in `load'
        from /usr/local/bin/jekyll:25:in `<main>'

What do you suggest?

uditjainstjis · 2025-01-11T04:12:27Z

The problem is there are delimeters(--- ---) in the first two lines of your code, which isn't recognised by sass causing this random error, those two lines are needed to be removed to remove the errors.

uditjainstjis · 2025-01-11T04:24:00Z

and while resolving things which you said i am facing an issue, that my code was replacing depreciated to color.adjust same as like yours (without delimeters) , after that errors are gone but when loading the page
[2025-01-11 09:33:54] ERROR '/css/ion_icon_customization.css' not found.
this error comes into the terminal.

When darken is replaced with color.adjust i noticed that on localhost on /css/ion_icon_customization.css shows not found, but with darken func it shows the code, somehow making file not reachable when switching to color.adjust

The problem is darken was depreciated and color.adjust is new, so color.adjust requires the code to be compiled into some file,
that's why in my PR after replacing the function's I ran this command
sass /css/ion_icon_customization.scss /css/ion_icon_customization.css
and created compiled css file, which after then started working nicely and i pushed a PR,
but you said that i should not commit generated file, I am from then facing issue that if I will not commit the generated files ,code won't work and throw the error [2025-01-11 09:33:54] ERROR '/css/ion_icon_customization.css' not found. ,
how to not commit generated files which you said in the message?

quozl · 2025-01-12T00:09:30Z

Thanks, that's interesting.

Using the master branch at 75b2a0d ("Fix section name wording") and removing the two --- lines from css/ion_icon_customization.scss breaks the automatic sass that provides css/ion_icon_customization.css so it doesn't seem right to do that.

You're not seeing errors because you've turned off that part of the build.

Your branch has one unconverted darken( call.

Your branch does not use the correct syntax; the second argument to color.adjust is to be named $lightness:.

I've made further edits in an attempt to get closer to merge, and pushed 8cb4bf3 to pr624-test branch. Please review this commit in detail; it is derived from your work, and has your name on it.

Please do be careful; a change very much like this broke the site build in November, which you should have seen in the closed pull requests and the commit history. You don't mentioned either of these in your commit messages or pull request, so I'm not sure if you are aware of the problem. Please;

read the commit diffs for November, particularly around 16th and 22nd,
read the pull request that was merged on the 16th.

(rhetorical; if you've not seen those two sources of information, what are you doing changing this?)

Integrate this information and determine if it is safe to proceed.

@mohanamisra mentioned because of previous commits.

@pikurasa mentioned because of revert.

MostlyKIGuess · 2025-01-12T05:00:11Z

css/ion_icon_customization.scss

@@ -299,4 +287,4 @@ $medium-background-hover: darken($medium-background, $darken-percent);
      }
    }
  }
-}
+}


no new line at the EOF.

MostlyKIGuess · 2025-01-12T05:00:39Z

css/ion_icon_customization.scss

@@ -106,7 +95,7 @@ $medium-background-hover: darken($medium-background, $darken-percent);
        background: $github-background;
      }
    }
-      
+


all these changes are also not needed

MostlyKIGuess · 2025-01-12T05:00:57Z

css/ion_icon_customization.scss

      &:hover {
        color: $instagram-color-hover;
      }
    }
-      
+


same goes for here.

MostlyKIGuess · 2025-01-12T05:01:00Z

css/ion_icon_customization.scss

@@ -231,12 +219,12 @@ $medium-background-hover: darken($medium-background, $darken-percent);
      display: flex;
      align-items: center;
      justify-content: center;
-    
+


same goes for here.

MostlyKIGuess · 2025-01-12T05:01:03Z

css/ion_icon_customization.scss

      &:hover {
        color: $X-color-hover;
      }
    }
-             
+


same goes for here.

MostlyKIGuess · 2025-01-12T05:01:10Z

css/ion_icon_customization.scss

@@ -116,7 +105,7 @@ $medium-background-hover: darken($medium-background, $darken-percent);
        background: $X-background-hover;
      }
    }
-      
+


same goes for here.

MostlyKIGuess · 2025-01-12T05:01:14Z

css/ion_icon_customization.scss

@@ -127,7 +116,7 @@ $medium-background-hover: darken($medium-background, $darken-percent);
        background: $instagram-background-hover;
      }
    }
-      
+


same goes for here.

MostlyKIGuess · 2025-01-12T05:01:18Z

css/ion_icon_customization.scss

@@ -199,12 +188,12 @@ $medium-background-hover: darken($medium-background, $darken-percent);
      display: flex;
      justify-content: center;
      align-items: center;
-      
+


same goes for here.

MostlyKIGuess · 2025-01-12T05:01:21Z

css/ion_icon_customization.scss

      &:hover {
        color: $github-color-hover;
      }
    }
-      
+


same goes for here.

MostlyKIGuess · 2025-01-12T05:01:25Z

css/ion_icon_customization.scss

@@ -215,14 +204,13 @@ $medium-background-hover: darken($medium-background, $darken-percent);
      display: flex;
      align-items: center;
      justify-content: center;
-      
+


same goes for here.

MostlyKIGuess · 2025-01-12T05:07:39Z

Tested and works as intended.

Replace deprecated darken with color.adjust for Sass compliance

0a6a41a

quozl requested changes Jan 9, 2025

View reviewed changes

MostlyKIGuess reviewed Jan 12, 2025

View reviewed changes

css/ion_icon_customization.scss

&:hover {

color: $instagram-color-hover;

}

}

Copy link

Member

MostlyKIGuess Jan 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same goes for here.

MostlyKIGuess reviewed Jan 12, 2025

View reviewed changes

css/ion_icon_customization.scss

&:hover {

color: $X-color-hover;

}

}

Copy link

Member

MostlyKIGuess Jan 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same goes for here.

MostlyKIGuess reviewed Jan 12, 2025

View reviewed changes

css/ion_icon_customization.scss

&:hover {

color: $github-color-hover;

}

}

Copy link

Member

MostlyKIGuess Jan 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same goes for here.

MostlyKIGuess reviewed Jan 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace deprecated darken with color.adjust for Sass compliance #634

Replace deprecated darken with color.adjust for Sass compliance #634

uditjainstjis commented Jan 9, 2025

quozl left a comment •

edited

Loading

quozl Jan 9, 2025

quozl Jan 9, 2025

quozl commented Jan 10, 2025

uditjainstjis commented Jan 11, 2025

uditjainstjis commented Jan 11, 2025

quozl commented Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess Jan 12, 2025

MostlyKIGuess commented Jan 12, 2025

Replace deprecated darken with color.adjust for Sass compliance #634

Are you sure you want to change the base?

Replace deprecated darken with color.adjust for Sass compliance #634

Conversation

uditjainstjis commented Jan 9, 2025

Summary

Changes/explanation

Testing

quozl left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

quozl commented Jan 10, 2025

uditjainstjis commented Jan 11, 2025

uditjainstjis commented Jan 11, 2025

quozl commented Jan 12, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MostlyKIGuess commented Jan 12, 2025

quozl left a comment •

edited

Loading