radix-theme-generator
Version:
A utility for generating themes for the Radix Themes UI library
28 lines • 2.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getBackgroundColorCss = exports.getColorScaleCss = void 0;
var getColorScaleCss = function (_a) {
var isDarkMode = _a.isDarkMode, name = _a.name, scale = _a.scale, scaleWideGamut = _a.scaleWideGamut, scaleAlpha = _a.scaleAlpha, scaleAlphaWideGamut = _a.scaleAlphaWideGamut, contrast = _a.contrast, surface = _a.surface, surfaceWideGamut = _a.surfaceWideGamut;
var selector = isDarkMode
? ".dark, .dark-theme"
: ":root, .light, .light-theme";
return "\n".concat(selector, " {\n ").concat(scale
.map(function (value, index) { return "--".concat(name, "-").concat(index + 1, ": ").concat(value, ";"); })
.join("\n "), "\n\n ").concat(scaleAlpha
.map(function (value, index) { return "--".concat(name, "-a").concat(index + 1, ": ").concat(value, ";"); })
.join("\n "), "\n\n --").concat(name, "-contrast: ").concat(contrast, ";\n --").concat(name, "-surface: ").concat(surface, ";\n --").concat(name, "-indicator: ").concat(scale[8], ";\n --").concat(name, "-track: ").concat(scale[8], ";\n}\n\n@supports (color: color(display-p3 1 1 1)) {\n @media (color-gamut: p3) {\n ").concat(selector, " {\n ").concat(scaleWideGamut
.map(function (value, index) { return "--".concat(name, "-").concat(index + 1, ": ").concat(value, ";"); })
.join("\n "), "\n\n ").concat(scaleAlphaWideGamut
.map(function (value, index) { return "--".concat(name, "-a").concat(index + 1, ": ").concat(value, ";"); })
.join("\n "), "\n\n --").concat(name, "-contrast: ").concat(contrast, ";\n --").concat(name, "-surface: ").concat(surfaceWideGamut, ";\n --").concat(name, "-indicator: ").concat(scaleWideGamut[8], ";\n --").concat(name, "-track: ").concat(scaleWideGamut[8], ";\n }\n }\n}\n ").trim();
};
exports.getColorScaleCss = getColorScaleCss;
var getBackgroundColorCss = function (_a) {
var isDarkMode = _a.isDarkMode, background = _a.background;
if (isDarkMode) {
return "\n.dark, .dark-theme, :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {\n --color-background: ".concat(background, ";\n}\n ").trim();
}
return "\n:root, .light, .light-theme, .radix-themes {\n --color-background: ".concat(background, ";\n}\n ").trim();
};
exports.getBackgroundColorCss = getBackgroundColorCss;
//# sourceMappingURL=getColorScaleCss.js.map