Closed MisRob closed 1 week ago
The proposal confirmed with the team. Ready to be worked on.
Hi @MisRob, The issue is now pretty clear to me. We've to replace the previous hard coded colors with new utility $darken_
. For example, If we have to achieve a shade of a color darker than darkest shade (already available) then $darken_
helps to achieve this without hardcoding.
I'm ready to work on this.
Sounds we're on the same page @shivam-daksh! Please follow the guidance as close as possible and message me in case of any doubts. I will assign you now. Thank you.
Hi @MisRob , I've added new file in darkenColors.js
in lib/styles/darkenColors.js , also added to KThemePlugin.js
to make it globally. It is working fine in playground.vue
.
Here is the code of darkenColors.js
:
import Color from 'color';
export function darken1(color) {
return Color(color)
.darken(0.15)
.hex();
}
export function darken2(color) {
return Color(color)
.darken(0.3)
.hex();
}
export function darken3(color) {
return Color(color)
.darken(0.45)
.hex();
}
Need your suggestions before making a PR!
Hi @shivam-daksh, thanks! This particular file looks fine to me. To be able to say more, I will need to briefly preview other changes. You're welcome to open a draft pull request to demonstrate your work in progress - then we can chat there.
🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.
Blocks
Summary
$darken1
,$darken2
, and$darken3
will be new utilities that will allow us to darken palette colors to achieve new colors that are still derived from a palette, but without the need to add them to the palette.When Kolibri Design System is initialized in a consumer via
Vue.use(KThemePlugin)
, these three$darken_
helpers should be installed to all Vue instances, similarly how it’s currently done for$themeTokens
,$themePalette
, and other helpers.Then, every Vue component can use them without the need to import. Examples:
As for the actual color darkness shifts, we will use the following guidance from designers as a starting point. Note that (1) the algorithm used for
$darken_
helpers should always be the same (no need to distinguish on which color it is being applied), (2) the expected hex values below are just estimates. So, the resulting hex values don't need to be exactly the same, but rather be as close as possible.$darken1($themePalette.red.v_1100)
to produce#A81700
$darken2($themePalette.red.v_1100)
to produce#7E1200
$darken3($themePalette.red.v_1100)
to produce#540C00
$darken1($themePalette.lightblue.v_1100)
to produce#00619B
$darken2($themePalette.lightblue.v_1100)
to produce#004974
$darken3($themePalette.lightblue.v_1100)
to produce#00304E
References
Slack thread
Guidance
color.darken()
)$themeTokens
or$themePalette
in KThemePlugin.js to understand how to define new helpers in a similar mannerThe Value Add
Background
Motivated by a Kolibri’s red button that needs to use
palette.red.v_1100
as its background color. This is our darkest red and for the button’s hover state, we needed even darker color that is currently hardcoded here Additionally, designers had some work in progress figuring out adding more flexibility to our palette that is aligned with this approach.Acceptance Criteria
red.v_1100