[FEAT] Create a theming function that switches color depending on the theme

[xelaint]

💡 Feature request

Feature Name

Create a theming function that switches color depending on the theme

Possibly named: daff-switch-color-by-theme

The Desired Behavior

Currently, components in design are not truly themable. daff-illuminate is currently being used to "switch" the color that's displayed depending on the theme (light vs dark). daff-illuminate doesn't work this way though. It only works with $neutral as a side effect of how it's built.

daff-switch-color-by-theme function should:

Given a theme and a palette, give me back a color from the palette that is "n" steps away from the start of the given theme.

Example:

$primary: (
	10: #ebf1ff,
	20: #c4d8ff,
	30: #9dbeff,
	40: #79a7ff,
	50: #548fff,
	60: #1f66ff,
	70: #093cf3,
	80: #001bcb,
	90: #00098a,
	100: #000033
);

$base: daff-theme.daff-map-get($theme, 'core', 'base');
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');

daff-switch-color-by-theme($base-contrast, $primary, 2);

This function returns: #00098a because it's 2 steps away from the base-contrast of core.

$base: daff-theme.daff-map-get($theme, 'core', 'base');
$base-contrast: daff-theme.daff-map-get($theme, 'core', 'base-contrast');

daff-switch-color-by-theme($base, $primary, 3);

This function returns: #9dbeff because it's 3 steps away from the base of core.

Your Use Case

I want to set a background to $primary, 10 on a light theme and $primary, 90 on a dark theme. How do I accomplish that?

Prior Work

Related to #1412

Environment

Daffodil version: X.Y.Z
Angular version: X.Y.Z 

 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[xelaint]

Notes from initial daff-illuminate discussion and why it doesn't work as I thought it should:

// Returns a color 
// Smart switch a color with another color in the palette depending upon theme.
// Smart switch - 
$daff-????


"light" | 10 | (10,20..., 90) | 1 | 90

Theme Version (daff-switch-color-by-theme)
--
border: "dark" | (10,20..., 90) | 1 | 20
background: "dark" | (10,20..., 90) | 1 | 30

border: "light" | (10,20..., 90) | 1 | 90
background: "light" | (10,20..., 90) | 1 | 0

Color Version (similar to daff text contrast)
Given a color, give me back a text color.
daff-palette-contrast

// Given a color, give me back a color from the $palette that is "n" steps away in the opposite direction in the pallete for my color.
// For example, given a bright color, and a palette, this will give you a darker color in the given palette.
// Similarly, for example, given a dark color, and a palette, this will give you a brighter color in the given palette.
// This is especially useful for contrast text on top of a different color background. 
// Note, that this only works if your color palettes are perceptually uniform.
---
border: 10 | (10,20..., 90) | 1 | 20
background:  10 | (10,20..., 90) | 1 | 30

border: 10 | (10,20..., 90) | 1 | 90
background: 10 | (10,20..., 90) | 1 | 0

font-color: daff-text-contrast(color);

font-color: daff-text-contrast(color, $palette);

$color: daff-color(daff-map-get($theme, primary))
font-color: daff-text-contrast($color, $palette)
background: $color;

$color: daff-palette-contrast($theme, $palette, 1);  —> (spits out $primary, 10)
background: daff-palette-contrast($theme, $palette, 1);  —> (spits out $primary, 10 on light theme, spits out $primary, 90 on dark theme)
color: daff-text-contrast($color, $palette); —> (spits out opposite of $primary, 10)

daff-theme-aware-color($palette, 10) -> Gives the 90 on a dark theme, gives a 10 on a light theme.

// Revise Text-contrast api
// Create a new function called daff-theme-aware-color (internal only, not in public api)
// Potentially deprecate daff-illuminate after daff-theme-aware-color is finished
// Create a new function called daff-palette-contrast

Theme |  Color | Palette | "steps?" | Result |
-----
Light | A light green | Success Green Palette  | null |  |