File size: 2,913 Bytes
9697ede | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import { blend, contrastRatio, hexToOklch, shift } from "../color"
import { mapV2Semantics } from "./mapping"
import type { ColorValue, HexColor, V2ColorValue } from "../types"
const GREY_STEPS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] as const
const greyRef = (step: number): V2ColorValue => `var(--v2-grey-${step})`
function greyHex(primitives: Record<string, V2ColorValue>, step: number) {
const hex = primitives[`v2-grey-${step}`]
if (typeof hex === "string" && hex.startsWith("#")) return hex as HexColor
}
function resolveGreyRef(value: V2ColorValue, primitives: Record<string, V2ColorValue>) {
const step = value.match(/^var\(--v2-grey-(\d+)\)$/)?.[1]
if (!step) throw new Error(`Expected grey primitive ref, got ${value}`)
const hex = greyHex(primitives, Number(step))
if (!hex) throw new Error(`Missing grey primitive v2-grey-${step}`)
return hex
}
function pickGrey(primitives: Record<string, V2ColorValue>, background: HexColor, minContrast: number, target: number) {
const matches = GREY_STEPS.filter((step) => {
const hex = greyHex(primitives, step)
return hex && contrastRatio(hex, background) >= minContrast
})
if (matches.length === 0) return target
return matches.reduce((best, step) => (Math.abs(step - target) < Math.abs(best - target) ? step : best))
}
export function mapV2Foreground(
ink: HexColor,
isDark: boolean,
primitives: Record<string, V2ColorValue>,
overrides: Record<string, ColorValue> = {},
): Record<string, V2ColorValue> {
const tint = hexToOklch(ink)
const body = shift(ink, {
l: isDark ? Math.max(0, 0.88 - tint.l) * 0.4 : -Math.max(0, tint.l - 0.18) * 0.24,
c: isDark ? 1.04 : 1.02,
})
const semantics = mapV2Semantics(isDark)
const bgBase = resolveGreyRef(semantics["v2-background-bg-base"], primitives)
const bgContrast = resolveGreyRef(semantics["v2-background-bg-contrast"], primitives)
const bgInverse = resolveGreyRef(semantics["v2-background-bg-inverse"], primitives)
const inverseTarget = hexToOklch(bgInverse).l > 0.55 ? 1100 : greyHex(primitives, 50) ? 50 : 100
return {
"v2-text-text-base": isDark ? blend("#ffffff", body, 0.9) : shift(body, { l: -0.07, c: 1.04 }),
"v2-text-text-muted": overrides["text-weak"] ?? shift(body, { l: isDark ? -0.11 : 0.11, c: 0.9 }),
"v2-text-text-faint": shift(body, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 }),
"v2-icon-icon-base": greyRef(pickGrey(primitives, bgBase, 7, isDark ? 400 : 800)),
"v2-icon-icon-muted": greyRef(pickGrey(primitives, bgBase, 3, 600)),
"v2-icon-icon-inverse": greyRef(pickGrey(primitives, bgInverse, 7, inverseTarget)),
"v2-icon-icon-contrast": greyRef(pickGrey(primitives, bgContrast, 7, 100)),
"v2-icon-icon-accent": isDark ? "var(--v2-blue-400)" : "var(--v2-blue-600)",
"v2-icon-icon-accent-hover": isDark ? "var(--v2-blue-300)" : "var(--v2-blue-700)",
}
}
|