UNPKG

@sitecore/sc-contenthub-blok

Version:

A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).

440 lines 22.5 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.colorLightBlue = exports.colorIndigo = exports.colorDeepPurple = exports.colorPurple = exports.colorPink = exports.colorBlue = exports.colorOrange = exports.colorGreen = exports.colorRed = exports.colorBlack = exports.colorWhite = exports.colorMap = exports.blueGrey = exports.brown = exports.deepOrange = exports.amber = exports.lightBlue = exports.indigo = exports.deepPurple = exports.lime = exports.lightGreen = exports.neutral = exports.info = exports.success = exports.warning = exports.danger = exports.aiGradient = exports.genAiGradientHorizontal = exports.genAiGradient = exports.aiGradientColor2 = exports.aiGradientColor1 = exports.white = exports.black = exports.pink = exports.purple = exports.blue = exports.cyan = exports.redAlpha = exports.teal = exports.green = exports.yellow = exports.orange = exports.red = exports.gray = exports.blackAlpha = exports.whiteAlpha = exports.themePrimaryAlpha = exports.primary = exports.themePrimary = exports.mainColor = void 0; exports.secondaryButtonActiveBorderColor = exports.secondaryButtonDarkActiveBackgroundColor = exports.secondaryButtonActiveBackgroundColor = exports.secondaryButtonDarkActiveColor = exports.secondaryButtonActiveColor = exports.secondaryButtonFocusDarkBorderColor = exports.secondaryButtonFocusBorderColor = exports.secondaryButtonDarkFocusBackgroundColor = exports.secondaryButtonFocusBackgroundColor = exports.secondaryButtonDarkFocusColor = exports.secondaryButtonFocusColor = exports.secondaryButtonHoverDarkBorderColor = exports.secondaryButtonHoverBorderColor = exports.secondaryButtonDarkHoverBackgroundColor = exports.secondaryButtonHoverBackgroundColor = exports.secondaryButtonDarkHoverColor = exports.secondaryButtonHoverColor = exports.secondaryButtonDarkBorderColor = exports.secondaryButtonBorderColor = exports.secondaryButtonDarkBackgroundColor = exports.secondaryButtonBackgroundColor = exports.secondaryButtonDarkColor = exports.secondaryButtonColor = exports.defaultButtonDarkActiveBackgroundColor = exports.defaultButtonActiveBackgroundColor = exports.defaultButtonDarkActiveColor = exports.defaultButtonActiveColor = exports.defaultButtonDarkFocusBackgroundColor = exports.defaultButtonFocusBackgroundColor = exports.defaultButtonDarkFocusColor = exports.defaultButtonFocusColor = exports.defaultButtonDarkHoverBackgroundColor = exports.defaultButtonHoverBackgroundColor = exports.defaultButtonDarkHoverColor = exports.defaultButtonHoverColor = exports.defaultButtonDarkBackgroundColor = exports.defaultButtonBackgroundColor = exports.defaultButtonDarkColor = exports.defaultButtonColor = exports.colorMainColor = exports.colorRoyalBlue = exports.colorBlueGray = exports.colorBrown = exports.colorDeepOrange = exports.colorAmber = exports.colorYellow = exports.colorLime = exports.colorLightGreen = exports.colorTeal = exports.colorCyan = void 0; exports.backgroundColorByName = exports.colorByName = exports.searchItemIsSelecting = exports.searchItemSelected = exports.imageWrapperBg = exports.bodyBackgroundColor = exports.inputBorderHoveColor = exports.inputBorderColor = exports.borderColorA11y = exports.inputBackgroundColor = exports.borderColorDarkAbs = exports.borderColorDark = exports.textColorDisabledOnDark = exports.textColorDisabled = exports.textColorLightOnDark = exports.textColorLight = exports.textColorDefault = exports.iconColorLight = exports.navbarLinkActiveBg = exports.navbarLinkActiveColor = exports.navbarLinkHoverBg = exports.navbarLinkHoverColor = exports.navbarLinkColor = exports.navbarBg = exports.primaryButtonBg = exports.primaryButtonBackgroundColor = exports.primaryButtonColor = exports.linkButtonDarkActiveBackgroundColor = exports.linkButtonActiveBackgroundColor = exports.linkButtonDarkActiveColor = exports.linkButtonActiveColor = exports.linkButtonDarkFocusBackgroundColor = exports.linkButtonFocusBackgroundColor = exports.linkButtonDarkFocusColor = exports.linkButtonFocusColor = exports.linkButtonDarkHoverBackgroundColor = exports.linkButtonHoverBackgroundColor = exports.linkButtonDarkHoverColor = exports.linkButtonHoverColor = exports.linkButtonDarkBackgroundColor = exports.linkButtonBackgroundColor = exports.linkButtonDarkColor = exports.linkButtonColor = exports.secondaryButtonActiveDarkBorderColor = void 0; const css_1 = require("@emotion/css"); const color_1 = __importDefault(require("color")); const color_string_1 = __importDefault(require("color-string")); const utils_1 = require("./utils"); const normalizeColor = (color) => { return color_string_1.default.to.rgb(color_string_1.default.get.rgb(color)); }; exports.mainColor = normalizeColor((0, utils_1.getStyle)("--main-color") || "#6E3FFF"); const primaryColor = (0, color_1.default)(exports.mainColor); exports.themePrimary = { 50: primaryColor.mix((0, color_1.default)("white"), 0.93).toString(), 100: primaryColor.mix((0, color_1.default)("white"), 0.88).toString(), 200: primaryColor.mix((0, color_1.default)("white"), 0.75).toString(), 300: primaryColor.mix((0, color_1.default)("white"), 0.4).toString(), 400: primaryColor.mix((0, color_1.default)("white"), 0.15).toString(), 500: primaryColor.toString(), 600: primaryColor.mix((0, color_1.default)("black"), 0.15).toString(), 700: primaryColor.mix((0, color_1.default)("black"), 0.3).toString(), 800: primaryColor.mix((0, color_1.default)("black"), 0.45).toString(), 900: primaryColor.mix((0, color_1.default)("black"), 0.55).toString(), }; exports.primary = exports.themePrimary; exports.themePrimaryAlpha = { 50: primaryColor.fade(0.97).string(), 100: primaryColor.fade(0.93).string(), 200: primaryColor.fade(0.9).string(), 300: primaryColor.fade(0.83).string(), 400: primaryColor.fade(0.64).string(), 500: primaryColor.fade(0.45).string(), 600: primaryColor.fade(0.32).string(), 700: primaryColor.fade(0.25).string(), 800: primaryColor.fade(0.15).string(), 900: primaryColor.fade(0.04).string(), }; exports.whiteAlpha = { 50: "rgba(255,255,255, 0.04)", 100: "rgba(255,255,255,0.06)", 200: "rgba(255,255,255,0.11)", 300: "rgba(255,255,255,0.29)", 400: "rgba(255,255,255,0.43)", 500: "rgba(255,255,255,0.55)", 600: "rgba(255,255,255,0.68)", 700: "rgba(255,255,255,0.76)", 800: "rgba(255,255,255,0.78)", 900: "rgba(255,255,255,0.94)", }; exports.blackAlpha = { 50: "rgba(0,0,0, 0.04)", 100: "rgba(0,0,0,0.06)", 200: "rgba(0,0,0,0.11)", 300: "rgba(0,0,0,0.29)", 400: "rgba(0,0,0,0.43)", 500: "rgba(0,0,0,0.55)", 600: "rgba(0,0,0,0.68)", 700: "rgba(0,0,0,0.76)", 800: "rgba(0,0,0,0.78)", 900: "rgba(0,0,0,0.94)", }; exports.gray = { 50: "#F6F6F6", 100: "#E9E9E9", 200: "#D8D8D8", 300: "#B5B5B5", 400: "#8E8E8E", 500: "#717171", 600: "#535353", 700: "#3B3B3B", 800: "#282828", 900: "#212121", }; exports.red = { 50: "#FFF5F4", 100: "#FFE4E2", 200: "#FFCCC8", 300: "#FF9A94", 400: "#F4595A", 500: "#D92739", 600: "#B30426", 700: "#92001F", 800: "#730019", 900: "#580113", }; exports.orange = { 50: "#FFF6E7", 100: "#FFE6BD", 200: "#FDD291", 300: "#FFA037", 400: "#E26E00", 500: "#BA5200", 600: "#953D00", 700: "#7A2F00", 800: "#612300", 900: "#491901", }; exports.yellow = { 50: "#FDF8D2", 100: "#FAEC79", 200: "#F8D904", 300: "#D7B300", 400: "#AE8A00", 500: "#8B6B00", 600: "#705300", 700: "#5B4300", 800: "#483300", 900: "#362500", }; exports.green = { 50: "#E8FCF5", 100: "#BEF6E3", 200: "#8BEBD0", 300: "#44CBAC", 400: "#0EA184", 500: "#007F66", 600: "#006450", 700: "#085040", 800: "#0D3E31", 900: "#0F2D25", }; exports.teal = { 50: "#E7FBFB", 100: "#BBF4F3", 200: "#8BE9E8", 300: "#3CC8CB", 400: "#019EA5", 500: "#007C85", 600: "#00626B", 700: "#0A4E57", 800: "#103B44", 900: "#102C33", }; exports.redAlpha = { 50: "rgba(217, 39, 57, 0.04)", 100: "rgba(217, 39, 57, 0.06)", 200: "rgba(217, 39, 57, 0.11)", 300: "rgba(217, 39, 57, 0.29)", 400: "rgba(217, 39, 57, 0.43)", 500: "rgba(217, 39, 57, 0.55)", 600: "rgba(217, 39, 57, 0.68)", 700: "rgba(217, 39, 57, 0.76)", 800: "rgba(217, 39, 57, 0.78)", 900: "rgba(217, 39, 57, 0.94)", }; exports.cyan = { 50: "#e4fcff", 100: "#b5f4ff", 200: "#88e7fa", 300: "#33c5e8", 400: "#019ac6", 500: "#0079a6", 600: "#005d89", 700: "#004a73", 800: "#00395d", 900: "#002a46", }; exports.blue = { 50: "#F4F7FF", 100: "#E1EAFF", 200: "#C9D8FF", 300: "#9CB3FD", 400: "#6987F9", 500: "#4A65E8", 600: "#344BC3", 700: "#293BA1", 800: "#1F2D7F", 900: "#16215F", }; exports.purple = { 50: "#F7F6FF", 100: "#EAE7FF", 200: "#D9D4FF", 300: "#B8A9FF", 400: "#9373FF", 500: "#6E3FFF", 600: "#5319E0", 700: "#4715AF", 800: "#401791", 900: "#2F1469", }; exports.pink = { 50: "#FFF4FE", 100: "#FFE2FB", 200: "#FEC7F8", 300: "#F592F3", 400: "#DE53E0", 500: "#BC29BD", 600: "#9D039E", 700: "#800081", 800: "#640664", 900: "#470E46", }; exports.black = { 50: "#000000", 100: "#000000 ", 200: "#000000 ", 300: "#000000 ", 400: "#000000 ", 500: "#000000 ", 600: "#000000 ", 700: "#000000 ", 800: "#000000 ", 900: "#000000 ", }; exports.white = { 50: "#ffffff", 100: "#ffffff", 200: "#ffffff", 300: "#ffffff", 400: "#ffffff", 500: "#ffffff", 600: "#ffffff", 700: "#ffffff", 800: "#ffffff", 900: "#ffffff", }; exports.aiGradientColor1 = exports.purple; exports.aiGradientColor2 = exports.red; exports.genAiGradient = { 50: `linear-gradient(to top right, ${exports.aiGradientColor1[50]}, ${exports.aiGradientColor2[50]})`, 100: `linear-gradient(to top right, ${exports.aiGradientColor1[100]}, ${exports.aiGradientColor2[100]})`, 200: `linear-gradient(to top right, ${exports.aiGradientColor1[200]}, ${exports.aiGradientColor2[200]})`, 300: `linear-gradient(to top right, ${exports.aiGradientColor1[300]}, ${exports.aiGradientColor2[300]})`, 400: `linear-gradient(to top right, ${exports.aiGradientColor1[400]}, ${exports.aiGradientColor2[400]})`, 500: `linear-gradient(to top right, ${exports.aiGradientColor1[500]}, ${exports.aiGradientColor2[500]})`, 600: `linear-gradient(to top right, ${exports.aiGradientColor1[600]}, ${exports.aiGradientColor2[600]})`, 700: `linear-gradient(to top right, ${exports.aiGradientColor1[700]}, ${exports.aiGradientColor2[700]})`, 800: `linear-gradient(to top right, ${exports.aiGradientColor1[800]}, ${exports.aiGradientColor2[800]})`, 900: `linear-gradient(to top right, ${exports.aiGradientColor1[900]}, ${exports.aiGradientColor2[900]})`, }; exports.genAiGradientHorizontal = { 50: `linear-gradient(to right, ${exports.aiGradientColor1[50]}, ${exports.aiGradientColor2[50]})`, 100: `linear-gradient(to right, ${exports.aiGradientColor1[100]}, ${exports.aiGradientColor2[100]})`, 200: `linear-gradient(to right, ${exports.aiGradientColor1[200]}, ${exports.aiGradientColor2[200]})`, 300: `linear-gradient(to right, ${exports.aiGradientColor1[300]}, ${exports.aiGradientColor2[300]})`, 400: `linear-gradient(to right, ${exports.aiGradientColor1[400]}, ${exports.aiGradientColor2[400]})`, 500: `linear-gradient(to right, ${exports.aiGradientColor1[500]}, ${exports.aiGradientColor2[500]})`, 600: `linear-gradient(to right, ${exports.aiGradientColor1[600]}, ${exports.aiGradientColor2[600]})`, 700: `linear-gradient(to right, ${exports.aiGradientColor1[700]}, ${exports.aiGradientColor2[700]})`, 800: `linear-gradient(to right, ${exports.aiGradientColor1[800]}, ${exports.aiGradientColor2[800]})`, 900: `linear-gradient(to right, ${exports.aiGradientColor1[900]}, ${exports.aiGradientColor2[900]})`, }; exports.aiGradient = { normal: `linear-gradient(white, white) padding-box, linear-gradient(to top right, ${exports.aiGradientColor1[400]}, ${exports.aiGradientColor2[400]}) border-box`, hover: `linear-gradient(to top right, ${exports.aiGradientColor1[100]}, ${exports.aiGradientColor2[100]}) padding-box, linear-gradient(to top right, ${exports.aiGradientColor1[500]}, ${exports.aiGradientColor2[500]}) border-box`, active: `linear-gradient(to top right, ${exports.aiGradientColor1[200]}, ${exports.aiGradientColor2[200]}) padding-box, linear-gradient(to top right, ${exports.aiGradientColor1[600]}, ${exports.aiGradientColor2[600]}) border-box`, }; exports.danger = exports.red; exports.warning = exports.orange; exports.success = exports.green; exports.info = exports.blue; exports.neutral = exports.blackAlpha; // Map unused colors to the new colors exports.lightGreen = exports.green; exports.lime = exports.green; exports.deepPurple = exports.purple; exports.indigo = exports.blue; exports.lightBlue = exports.blue; exports.amber = exports.orange; exports.deepOrange = exports.orange; exports.brown = exports.orange; exports.blueGrey = exports.gray; exports.colorMap = { gray: exports.gray, red: exports.red, pink: exports.pink, purple: exports.purple, blue: exports.blue, cyan: exports.cyan, teal: exports.teal, green: exports.green, yellow: exports.yellow, orange: exports.orange, "light-green": exports.lightGreen, "deep-purple": exports.deepPurple, lime: exports.lime, indigo: exports.indigo, "light-blue": exports.lightBlue, amber: exports.amber, "deep-orange": exports.deepOrange, brown: exports.brown, "theme-color": exports.themePrimary, primary: exports.themePrimary, "light-gray": exports.gray, "blue-gray": exports.gray, "transparent-gray": exports.blackAlpha, "gen-ai": exports.genAiGradient, ai: exports.genAiGradient, danger: exports.danger, success: exports.success, warning: exports.warning, info: exports.info, neutral: exports.blackAlpha, blackAlpha: exports.blackAlpha, whiteAlpha: exports.whiteAlpha, }; exports.colorWhite = "#ffffff"; exports.colorBlack = "#000000"; exports.colorRed = exports.red[500]; exports.colorGreen = exports.green[500]; exports.colorOrange = exports.orange[500]; exports.colorBlue = exports.blue[500]; exports.colorPink = exports.pink[500]; exports.colorPurple = exports.purple[500]; exports.colorDeepPurple = exports.purple[500]; exports.colorIndigo = exports.indigo[500]; exports.colorLightBlue = exports.lightBlue[500]; exports.colorCyan = exports.cyan[500]; exports.colorTeal = exports.teal[500]; exports.colorLightGreen = exports.lightGreen[500]; exports.colorLime = exports.lime[500]; exports.colorYellow = exports.yellow[500]; exports.colorAmber = exports.amber[500]; exports.colorDeepOrange = exports.deepOrange[500]; exports.colorBrown = exports.brown[500]; exports.colorBlueGray = exports.blueGrey[500]; exports.colorRoyalBlue = "#4169e1"; exports.colorMainColor = normalizeColor((0, utils_1.getStyle)("--main-color") || exports.purple[500]); /* Default button colors */ exports.defaultButtonColor = exports.blackAlpha[600]; exports.defaultButtonDarkColor = exports.whiteAlpha[600]; exports.defaultButtonBackgroundColor = "transparent"; exports.defaultButtonDarkBackgroundColor = "transparent"; exports.defaultButtonHoverColor = exports.blackAlpha[600]; exports.defaultButtonDarkHoverColor = exports.whiteAlpha[600]; exports.defaultButtonHoverBackgroundColor = exports.blackAlpha[100]; exports.defaultButtonDarkHoverBackgroundColor = exports.whiteAlpha[100]; exports.defaultButtonFocusColor = exports.defaultButtonColor; exports.defaultButtonDarkFocusColor = exports.defaultButtonDarkColor; exports.defaultButtonFocusBackgroundColor = exports.defaultButtonBackgroundColor; exports.defaultButtonDarkFocusBackgroundColor = exports.defaultButtonDarkBackgroundColor; exports.defaultButtonActiveColor = exports.defaultButtonColor; exports.defaultButtonDarkActiveColor = exports.defaultButtonDarkColor; exports.defaultButtonActiveBackgroundColor = exports.blackAlpha[200]; exports.defaultButtonDarkActiveBackgroundColor = exports.whiteAlpha[200]; // Secondary button colors exports.secondaryButtonColor = exports.blackAlpha[600]; exports.secondaryButtonDarkColor = exports.whiteAlpha[600]; exports.secondaryButtonBackgroundColor = "transparent"; exports.secondaryButtonDarkBackgroundColor = "transparent"; exports.secondaryButtonBorderColor = exports.blackAlpha[200]; exports.secondaryButtonDarkBorderColor = exports.whiteAlpha[200]; exports.secondaryButtonHoverColor = exports.blackAlpha[600]; exports.secondaryButtonDarkHoverColor = exports.whiteAlpha[600]; exports.secondaryButtonHoverBackgroundColor = exports.blackAlpha[100]; exports.secondaryButtonDarkHoverBackgroundColor = exports.whiteAlpha[100]; exports.secondaryButtonHoverBorderColor = exports.blackAlpha[200]; exports.secondaryButtonHoverDarkBorderColor = exports.whiteAlpha[200]; exports.secondaryButtonFocusColor = exports.blackAlpha[600]; exports.secondaryButtonDarkFocusColor = exports.whiteAlpha[600]; exports.secondaryButtonFocusBackgroundColor = "transparent"; exports.secondaryButtonDarkFocusBackgroundColor = "transparent"; exports.secondaryButtonFocusBorderColor = exports.blackAlpha[200]; exports.secondaryButtonFocusDarkBorderColor = exports.whiteAlpha[200]; exports.secondaryButtonActiveColor = exports.blackAlpha[600]; exports.secondaryButtonDarkActiveColor = exports.whiteAlpha[600]; exports.secondaryButtonActiveBackgroundColor = exports.whiteAlpha[200]; exports.secondaryButtonDarkActiveBackgroundColor = exports.blackAlpha[200]; exports.secondaryButtonActiveBorderColor = exports.blackAlpha[200]; exports.secondaryButtonActiveDarkBorderColor = exports.whiteAlpha[200]; // Link button colors exports.linkButtonColor = exports.themePrimary[600]; exports.linkButtonDarkColor = "white"; exports.linkButtonBackgroundColor = "transparent"; exports.linkButtonDarkBackgroundColor = "transparent"; exports.linkButtonHoverColor = exports.themePrimary[600]; exports.linkButtonDarkHoverColor = "white"; exports.linkButtonHoverBackgroundColor = exports.blackAlpha[100]; exports.linkButtonDarkHoverBackgroundColor = exports.whiteAlpha[100]; exports.linkButtonFocusColor = exports.themePrimary[600]; exports.linkButtonDarkFocusColor = "white"; exports.linkButtonFocusBackgroundColor = "transparent"; exports.linkButtonDarkFocusBackgroundColor = "transparent"; exports.linkButtonActiveColor = exports.themePrimary[600]; exports.linkButtonDarkActiveColor = "white"; exports.linkButtonActiveBackgroundColor = exports.themePrimary[100]; exports.linkButtonDarkActiveBackgroundColor = exports.blackAlpha[300]; /* Primary button colors */ exports.primaryButtonColor = normalizeColor((0, utils_1.getStyle)("--btn-primary-color") || "#ffffff"); exports.primaryButtonBackgroundColor = normalizeColor((0, utils_1.getStyle)("--btn-primary-bg") || exports.themePrimary[500]); const primaryButtonBgColor = (0, color_1.default)(exports.primaryButtonBackgroundColor); exports.primaryButtonBg = { 50: primaryButtonBgColor.mix((0, color_1.default)("white"), 0.93).toString(), 100: primaryButtonBgColor.mix((0, color_1.default)("white"), 0.88).toString(), 200: primaryButtonBgColor.mix((0, color_1.default)("white"), 0.6).toString(), 300: primaryButtonBgColor.mix((0, color_1.default)("white"), 0.4).toString(), 400: primaryButtonBgColor.mix((0, color_1.default)("white"), 0.15).toString(), 500: primaryButtonBgColor.toString(), 600: primaryButtonBgColor.mix((0, color_1.default)("black"), 0.15).toString(), 700: primaryButtonBgColor.mix((0, color_1.default)("black"), 0.3).toString(), 800: primaryButtonBgColor.mix((0, color_1.default)("black"), 0.45).toString(), 900: primaryButtonBgColor.mix((0, color_1.default)("black"), 0.55).toString(), }; // Navbar exports.navbarBg = normalizeColor((0, utils_1.getStyle)("--navbar-bg") || "#ffffff"); exports.navbarLinkColor = normalizeColor((0, utils_1.getStyle)("--navbar-link-color") || "rgba(0,0,0,.54)"); exports.navbarLinkHoverColor = normalizeColor((0, utils_1.getStyle)("--navbar-link-hover-color") || "rgba(0,0,0,.87)"); exports.navbarLinkHoverBg = normalizeColor((0, utils_1.getStyle)("--navbar-link-hover-bg") || "rgba(0,0,0,0.0)"); exports.navbarLinkActiveColor = normalizeColor((0, utils_1.getStyle)("--navbar-link-active-color") || "rgba(0,0,0,0.87)"); exports.navbarLinkActiveBg = normalizeColor((0, utils_1.getStyle)("--navbar-link-active-bg") || "rgba(0,0,0,0.0)"); exports.iconColorLight = exports.blackAlpha[400]; exports.textColorDefault = exports.blackAlpha[900]; exports.textColorLight = exports.blackAlpha[500]; exports.textColorLightOnDark = exports.whiteAlpha[700]; exports.textColorDisabled = exports.blackAlpha[400]; exports.textColorDisabledOnDark = exports.whiteAlpha[600]; exports.borderColorDark = exports.blackAlpha[300]; exports.borderColorDarkAbs = exports.gray[300]; /* Input background colors */ exports.inputBackgroundColor = "white"; exports.borderColorA11y = exports.blackAlpha[400]; exports.inputBorderColor = exports.borderColorA11y; exports.inputBorderHoveColor = exports.blackAlpha[600]; exports.bodyBackgroundColor = normalizeColor((0, utils_1.getStyle)("--body-bg") || "#F7F7F7"); exports.imageWrapperBg = exports.gray[900]; exports.searchItemSelected = exports.themePrimary[100]; exports.searchItemIsSelecting = exports.themePrimaryAlpha[100]; const colorByName = (colorName, colorShade = 500) => { // Because hyphen is not allowed in messages, we had to convert theme-color to themeColor. So, need to be converted here too. const name = colorName === "themeColor" ? "theme-color" : colorName; const color = colorName === "inherit" ? "inherit" : exports.colorMap[name][colorShade]; return (0, css_1.css)({ color, }); }; exports.colorByName = colorByName; const backgroundColorByName = (colorName, colorShade = 100) => { const backgroundColor = colorName === "inherit" ? "inherit" : exports.colorMap[colorName][colorShade]; return (0, css_1.css)({ backgroundColor, }); }; exports.backgroundColorByName = backgroundColorByName; //# sourceMappingURL=colors.js.map