@reusable-ui/foreground
Version:
Foreground (text color) stuff of UI.
50 lines (49 loc) • 2.23 kB
JavaScript
// cssfn:
import {
// writes css in javascript:
style, vars, cssVars, switchOf, } from '@cssfn/core'; // writes css in javascript
// reusable-ui variants:
import {
// hooks:
usesThemeable, } from '@reusable-ui/themeable'; // color options of UI
import {
// hooks:
usesOutlineable, } from '@reusable-ui/outlineable'; // outlined (background-less) variant of UI
import {
// hooks:
usesMildable, } from '@reusable-ui/mildable'; // mild (soft color) variant of UI
const [foregroundVars] = cssVars({ prefix: 'fg', minify: false }); // shared variables: ensures the server-side & client-side have the same generated css variable names
/**
* Uses foreground color (text color).
* @param config A configuration of `foregroundRule`.
* @returns A `ForegroundStuff` represents the foreground rules.
*/
export const usesForeground = (config) => {
// dependencies:
const { themeableVars } = usesThemeable();
const { outlineableVars } = usesOutlineable();
const { mildableVars } = usesMildable();
return {
foregroundRule: () => style({
// color functions:
...vars({
// adaptive color functions:
[foregroundVars.foregFn]: switchOf(themeableVars.foregCond, // first priority
themeableVars.foreg, // second priority
config?.foreg),
[foregroundVars.altForegFn]: switchOf(themeableVars.altForegCond, // first priority
themeableVars.altForeg, // second priority
config?.altForeg),
// final color functions:
[foregroundVars.foreg]: switchOf(outlineableVars.foregTg, // toggle outlined (if `usesOutlineable()` applied)
mildableVars.foregTg, // toggle mild (if `usesMildable()` applied)
foregroundVars.foregFn),
[foregroundVars.altForeg]: switchOf(outlineableVars.altForegTg, // toggle outlined (if `usesOutlineable()` applied)
mildableVars.altForegTg, // toggle mild (if `usesMildable()` applied)
foregroundVars.altForegFn),
}),
}),
foregroundVars,
};
};
//#endregion foreground