35 lines
969 B
JavaScript
35 lines
969 B
JavaScript
import { clsx } from "clsx"
|
|
import { extendTailwindMerge } from "tailwind-merge"
|
|
|
|
/**
|
|
* The design system adds named type-scale utilities (`text-title`, `text-body-sm`,
|
|
* `text-caption`…). tailwind-merge does not know them, so by default it files
|
|
* them under the text-colour group and treats `text-title-lg text-ink-1` as a
|
|
* conflict — silently dropping one of the two.
|
|
*
|
|
* Registering the scale as font sizes makes size and colour independent again,
|
|
* which is what lets components set both without ordering mattering.
|
|
*/
|
|
const twMerge = extendTailwindMerge({
|
|
extend: {
|
|
classGroups: {
|
|
'font-size': [
|
|
{
|
|
text: [
|
|
'display-lg', 'display',
|
|
'title-lg', 'title',
|
|
'body-lg', 'body', 'body-sm',
|
|
'caption', 'overline',
|
|
],
|
|
},
|
|
],
|
|
},
|
|
},
|
|
})
|
|
|
|
export function cn(...inputs) {
|
|
return twMerge(clsx(inputs))
|
|
}
|
|
|
|
export const isIframe = window.self !== window.top;
|