@sitecore/sc-contenthub-blok/esm/Foundations/colors.js

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

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