abe33 / abe33/atom-project-palette-finder

tint and shade function results are reverse of what they should be.

Open Beginner friendly
#37 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
CoffeeScript
Stars
10
Forks
0
PR merge metrics
No merged PRs in 30d

Description

I have these 2 color functions:

```
@function tint($color, $percentage) { @return mix($color, #fff, $percentage); }
@function shade($color, $percentage) { @return mix($color, #000, $percentage); }
```

They take a color and mix it with white or black, respectively.
used as `$mycolor: tint(#0072b8, 10%);`

This should be a very light blue, 10% blue and 90% white. It looks right when used in the CSS/HTML.
But it shows as the reverse -- 90% blue, 10% white!
![screen shot 2015-03-10 at 1 46 06 pm](https://cloud.githubusercontent.com/assets/835148/6581204/cf6df896-c72b-11e4-8e43-2c81e894874e.png)

If I tried the reverse `$mycolor: tint(#0072b8, 90%);` it looks very light in your preview, but shows up the opposite in the css.

Contributor guide

No contributing guide indexed for this repository

Research direction

Look at the code that handles Sass/SCSS color functions, likely in a file parsing colors from stylesheets. The issue is that the tint and shade functions are displaying the mixed color incorrectly in the preview. Start by finding where these functions are evaluated or displayed, compare the expected mix ratio with the actual output, and adjust the calculation or display logic. Check the CSS output to confirm the fix matches the intended color.

Written by the indexing model from the issue text.

Assessment

Tech stack
sass
Domain
devtools
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.