@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
110 lines • 4.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getResponsiveValue = getResponsiveValue;
exports.getResponsiveProps = getResponsiveProps;
function getResponsiveValue(prefix, componentName, componentProp, responsiveProp) {
if (!responsiveProp) {
return {};
}
if (typeof responsiveProp === "string") {
return {
[`--__${prefix}c-${componentName}-${componentProp}-xs`]: responsiveProp,
};
}
return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
`--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`,
responsiveValue,
]));
}
/**
* Temporary lookup for mapping legacy spacing tokens to new space tokens.
*/
const legacySpacingTokenLookup = {
"--ax-spacing-32": "--ax-space-128",
"--ax-spacing-24": "--ax-space-96",
"--ax-spacing-20": "--ax-space-80",
"--ax-spacing-18": "--ax-space-72",
"--ax-spacing-16": "--ax-space-64",
"--ax-spacing-14": "--ax-space-56",
"--ax-spacing-12": "--ax-space-48",
"--ax-spacing-11": "--ax-space-44",
"--ax-spacing-10": "--ax-space-40",
"--ax-spacing-9": "--ax-space-36",
"--ax-spacing-8": "--ax-space-32",
"--ax-spacing-7": "--ax-space-28",
"--ax-spacing-6": "--ax-space-24",
"--ax-spacing-5": "--ax-space-20",
"--ax-spacing-4": "--ax-space-16",
"--ax-spacing-3": "--ax-space-12",
"--ax-spacing-2": "--ax-space-8",
"--ax-spacing-1-alt": "--ax-space-6",
"--ax-spacing-1": "--ax-space-4",
"--ax-spacing-05": "--ax-space-2",
"--ax-spacing-0": "--ax-space-0",
};
const legacyBorderRadiusNameTokenLookup = {
full: "full",
xlarge: "12",
large: "8",
medium: "4",
small: "2",
};
const translateTokenStringToCSS = (specialLayout, tokenString, tokenSubgroup, tokenExceptions, invert, prefix) => {
return tokenString
.split(" ")
.map((propValue, _, arr) => {
var _a, _b;
// Handle special layout cases
if (specialLayout === "margin-inline" && propValue === "full") {
return `calc((100vw - ${100 / arr.length}%)/-2)`;
}
if (specialLayout === "padding-inline" && propValue === "full") {
return `calc((100vw - ${100 / arr.length}%)/2)`;
}
if (["mi", "mb"].includes(specialLayout) && propValue === "auto") {
return "auto";
}
// Handle exceptions and space tokens
let output = `var(--${prefix}-${tokenSubgroup}-${propValue})`;
if (tokenExceptions.includes(propValue)) {
output = propValue === "px" ? "1px" : propValue;
}
else if (tokenSubgroup === "spacing" && propValue.startsWith("space")) {
/* Use new "space-x" tokens */
output = `var(--${prefix}-${propValue})`;
}
else if (tokenSubgroup === "spacing") {
/* Translate old "spacing" tokens to new "space" tokens */
const spacingTokenName = `--${prefix}-spacing-${propValue}`;
output = `var(${(_a = legacySpacingTokenLookup[spacingTokenName]) !== null && _a !== void 0 ? _a : spacingTokenName})`;
}
else if (tokenSubgroup === "radius") {
const name = (_b = legacyBorderRadiusNameTokenLookup[propValue]) !== null && _b !== void 0 ? _b : propValue;
output = `var(--${prefix}-radius-${name})`;
}
// Handle inversion for negative values
if (invert) {
if (propValue === "0")
return `0`;
return `calc(-1 * ${output})`;
}
return output;
})
.join(" ");
};
function getResponsiveProps(prefix, componentName, componentProp, tokenSubgroup, responsiveProp, invert = false, tokenExceptions = []) {
if (!responsiveProp) {
return {};
}
if (typeof responsiveProp === "string") {
return {
[`--__${prefix}c-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS(componentProp, responsiveProp, tokenSubgroup, tokenExceptions, invert, prefix),
};
}
const styleProps = {};
Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
styleProps[`--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`] = translateTokenStringToCSS(componentProp, aliasOrScale, tokenSubgroup, tokenExceptions, invert, prefix);
});
return styleProps;
}
//# sourceMappingURL=css.js.map