jebcolors/src/colors/web-variables.ts

npm module that contains colors, gradients and a class used to modify the colors or gradients

// In this module I save all the web colors
// src = https://en.wikipedia.org/wiki/Web_colors

// Final color variables

// Pinks
const mediumVioletRed = "#c71585"
const deepPink = "#ff1493"
const paleVioletRed = "#db7093"
const hotPink = "#ff69b4"
const lightPink = "#ffb6c1"
const pink = "#ffc0cb"

// Reds
const darkRed = "#8b0000"
const red = "#ff0000"
const firebrick = "#b22222"
const crimson = "#dc143c"
const indianRed = "#cd5c5c"
const lightCoral = "#f08080"
const salmon = "#fa8072"
const darkSalmon = "#e9967a"
const lightSalmon = "#ffa07a"

// Oranges
const orangeRed = "#ff4500"
const tomato = "#ff6347"
const darkOrange = "#ff8c00"
const coral = "#ff7f50"
const orange = "#ffa500"

// Yellows
const darkKhaki = "#bdb76b"
const gold = "#ffd700"
const khaki = "#f0e68c"
const peachPuff = "#ffdab9"
const yellow = "#ffff00"
const paleGoldenrod = "#eee8aa"
const moccasin = "#ffe4b5"
const papayaWhip = "#ffefd5"
const lightGoldenrodYellow = "#fafad2"
const lemonChiffon = "#fffacd"
const lightYellow = "#ffffe0"

// Browns
const maroon = "#800000"
const brown = "#a52a2a"
const saddleBrown = "#8b4513"
const sienna = "#a0522d"
const chocolate = "#d2691e"
const darkGoldenrod = "#b8860b"
const peru = "#cd853f"
const rosyBrown = "#bc8f8f"
const goldenrod = "#daa520"
const sandyBrown = "#f4a460"
const tan = "#d2b48c"
const burlywood = "#deb887"
const wheat = "#f5deb3"
const navajoWhite = "#ffdead"
const bisque = "#ffe4c4"
const blanchedAlmond = "#ffebcd"
const cornsilk = "#fff8dc"

// Greens
const darkGreen = "#006400"
const green = "#008000"
const darkOliveGreen = "#556b2f"
const forestGreen = "#228b22"
const seaGreen = "#2e8b57"
const olive = "#808000"
const oliveDrab = "#6b8e23"
const mediumSeaGreen = "#3cb371"
const limeGreen = "#32cd32"
const lime = "#00ff00"
const springGreen = "#00ff7f"
const mediumSpringGreen = "#00fa9a"
const darkSeaGreen = "#8fbc8f"
const mediumAquamarine = "#66cdaa"
const yellowGreen = "#9acd32"
const lawnGreen = "#7cfc00"
const chartreuse = "#7fff00"
const lightGreen = "#90ee90"
const greenYellow = "#adff2f"
const paleGreen = "#98fb98"

// Cyans
const teal = "#008080"
const darkCyan = "#008b8b"
const lightSeaGreen = "#20b2aa"
const cadetBlue = "#5f9ea0"
const darkTurquoise = "#00ced1"
const mediumTurquoise = "#48d1cc"
const turquoise = "#40e0d0"
const aqua = "#00ffff"
const cyan = "#00ffff"
const aquamarine = "#7fffd4"
const paleTurquoise = "#afeeee"
const lightCyan = "#e0ffff"

// Blues
const navy = "#000080"
const darkBlue = "#00008b"
const mediumBlue = "#0000cd"
const blue = "#0000ff"
const midnightBlue = "#191970"
const royalBlue = "#4169e1"
const steelBlue = "#4682b4"
const dodgerBlue = "#1e90ff"
const deepSkyBlue = "#00bfff"
const cornflowerBlue = "#6495ed"
const skyBlue = "#87ceeb"
const lightSkyBlue = "#87cefa"
const lightSteelBlue = "#b0c4de"
const lightBlue = "#add8e6"
const powderBlue = "#b0e0e6"

// Purples, Vioconsts and Magentas
const indigo = "#4b0082"
const purple = "#800080"
const darkMagenta = "#8b008b"
const darkViolet = "#9400d3"
const darkSlateBlue = "#483d8b"
const blueViolet = "#8a2be2"
const darkOrchid = "#9932cc"
const fuchsia = "#ff00ff"
const magenta = "#ff00ff"
const slateBlue = "#6a5acd"
const mediumSlateBlue = "#7b68ee"
const mediumOrchid = "#ba55d3"
const mediumPurple = "#9370db"
const orchid = "#da70d6"
const violet = "#ee82ee"
const plum = "#dda0dd"
const thistle = "#d8bfd8"
const lavender = "#e6e6fa"
const rebeccaPurple = "#663399"

// Whites
const mistyRose = "#ffe4e1"
const antiqueWhite = "#faebd7"
const linen = "#faf0e6"
const beige = "#f5f5dc"
const whiteSmoke = "#f5f5f5"
const lavenderBlush = "#fff0f5"
const oldLace = "#fdf5e6"
const aliceBlue = "#f0f8ff"
const seashell = "#fff5ee"
const ghostWhite = "#f8f8ff"
const honeydew = "#f0fff0"
const floralWhite = "#fffaf0"
const azure = "#f0ffff"
const mintCream = "#f5fffa"
const snow = "#fffafa"
const ivory = "#fffff0"
const white = "#ffffff"

// Grays and Blacks
const black = "#000000"
const darkSlateGray = "#2f4f4f"
const dimGray = "#696969"
const slateGray = "#708090"
const gray = "#808080"
const lightSlateGray = "#778899"
const darkGray = "#a9a9a9"
const silver = "#c0c0c0"
const lightGray = "#d3d3d3"
const gainsboro = "#dcdcdc"

// Exports
export const webMainColors = {
    mediumVioletRed,
    deepPink,
    paleVioletRed,
    hotPink,
    lightPink,
    pink,

    darkRed,
    red,
    firebrick,
    crimson,
    indianRed,
    lightCoral,
    salmon,
    darkSalmon,
    lightSalmon,

    orangeRed,
    tomato,
    darkOrange,
    coral,
    orange,

    darkKhaki,
    gold,
    khaki,
    peachPuff,
    yellow,
    paleGoldenrod,
    moccasin,
    papayaWhip,
    lightGoldenrodYellow,
    lemonChiffon,
    lightYellow,

    maroon,
    brown,
    saddleBrown,
    sienna,
    chocolate,
    darkGoldenrod,
    peru,
    rosyBrown,
    goldenrod,
    sandyBrown,
    tan,
    burlywood,
    wheat,
    navajoWhite,
    bisque,
    blanchedAlmond,
    cornsilk,

    darkGreen,
    green,
    darkOliveGreen,
    forestGreen,
    seaGreen,
    olive,
    oliveDrab,
    mediumSeaGreen,
    limeGreen,
    lime,
    springGreen,
    mediumSpringGreen,
    darkSeaGreen,
    mediumAquamarine,
    yellowGreen,
    lawnGreen,
    chartreuse,
    lightGreen,
    greenYellow,
    paleGreen,

    teal,
    darkCyan,
    lightSeaGreen,
    cadetBlue,
    darkTurquoise,
    mediumTurquoise,
    turquoise,
    aqua,
    cyan,
    aquamarine,
    paleTurquoise,
    lightCyan,

    navy,
    darkBlue,
    mediumBlue,
    blue,
    midnightBlue,
    royalBlue,
    steelBlue,
    dodgerBlue,
    deepSkyBlue,
    cornflowerBlue,
    skyBlue,
    lightSkyBlue,
    lightSteelBlue,
    lightBlue,
    powderBlue,

    indigo,
    purple,
    darkMagenta,
    darkViolet,
    darkSlateBlue,
    blueViolet,
    darkOrchid,
    fuchsia,
    magenta,
    slateBlue,
    mediumSlateBlue,
    mediumOrchid,
    mediumPurple,
    orchid,
    violet,
    plum,
    thistle,
    lavender,
    rebeccaPurple,

    mistyRose,
    antiqueWhite,
    linen,
    beige,
    whiteSmoke,
    lavenderBlush,
    oldLace,
    aliceBlue,
    seashell,
    ghostWhite,
    honeydew,
    floralWhite,
    azure,
    mintCream,
    snow,
    ivory,
    white,

    black,
    darkSlateGray,
    dimGray,
    slateGray,
    gray,
    lightSlateGray,
    darkGray,
    silver,
    lightGray,
    gainsboro,
}

/**
 * This color group SHOULDN'T be exported to index, this is only to the css() function, but if you see this
 * means that the keys are lowercased.
 * @example
 * lightSlateGray -> lightslategray
 * @deprecated
 * Please don't use this variable in your proyect, this is for the internal use of the css() function
 */
const _webMainColorsLowercased_ONLY_TO_INTERN_USE = {
    mediumvioletred: mediumVioletRed,
    deeppink: deepPink,
    palevioletred: paleVioletRed,
    hotpink: hotPink,
    lightpink: lightPink,
    pink: pink,
    darkred: darkRed,
    red: red,
    firebrick: firebrick,
    crimson: crimson,
    indianred: indianRed,
    lightcoral: lightCoral,
    salmon: salmon,
    darksalmon: darkSalmon,
    lightsalmon: lightSalmon,
    orangered: orangeRed,
    tomato: tomato,
    darkorange: darkOrange,
    coral: coral,
    orange: orange,
    darkkhaki: darkKhaki,
    gold: gold,
    khaki: khaki,
    peachpuff: peachPuff,
    yellow: yellow,
    palegoldenrod: paleGoldenrod,
    moccasin: moccasin,
    papayawhip: papayaWhip,
    lightgoldenrodyellow: lightGoldenrodYellow,
    lemonchiffon: lemonChiffon,
    lightyellow: lightYellow,
    maroon: maroon,
    brown: brown,
    saddlebrown: saddleBrown,
    sienna: sienna,
    chocolate: chocolate,
    darkgoldenrod: darkGoldenrod,
    peru: peru,
    rosybrown: rosyBrown,
    goldenrod: goldenrod,
    sandybrown: sandyBrown,
    tan: tan,
    burlywood: burlywood,
    wheat: wheat,
    navajowhite: navajoWhite,
    bisque: bisque,
    blanchedalmond: blanchedAlmond,
    cornsilk: cornsilk,
    darkgreen: darkGreen,
    green: green,
    darkolivegreen: darkOliveGreen,
    forestgreen: forestGreen,
    seagreen: seaGreen,
    olive: olive,
    olivedrab: oliveDrab,
    mediumseagreen: mediumSeaGreen,
    limegreen: limeGreen,
    lime: lime,
    springgreen: springGreen,
    mediumspringgreen: mediumSpringGreen,
    darkseagreen: darkSeaGreen,
    mediumaquamarine: mediumAquamarine,
    yellowgreen: yellowGreen,
    lawngreen: lawnGreen,
    chartreuse: chartreuse,
    lightgreen: lightGreen,
    greenyellow: greenYellow,
    palegreen: paleGreen,
    teal: teal,
    darkcyan: darkCyan,
    lightseagreen: lightSeaGreen,
    cadetblue: cadetBlue,
    darkturquoise: darkTurquoise,
    mediumturquoise: mediumTurquoise,
    turquoise: turquoise,
    aqua: aqua,
    cyan: cyan,
    aquamarine: aquamarine,
    paleturquoise: paleTurquoise,
    lightcyan: lightCyan,
    navy: navy,
    darkblue: darkBlue,
    mediumblue: mediumBlue,
    blue: blue,
    midnightblue: midnightBlue,
    royalblue: royalBlue,
    steelblue: steelBlue,
    dodgerblue: dodgerBlue,
    deepskyblue: deepSkyBlue,
    cornflowerblue: cornflowerBlue,
    skyblue: skyBlue,
    lightskyblue: lightSkyBlue,
    lightsteelblue: lightSteelBlue,
    lightblue: lightBlue,
    powderblue: powderBlue,
    indigo: indigo,
    purple: purple,
    darkmagenta: darkMagenta,
    darkviolet: darkViolet,
    darkslateblue: darkSlateBlue,
    blueviolet: blueViolet,
    darkorchid: darkOrchid,
    fuchsia: fuchsia,
    magenta: magenta,
    slateblue: slateBlue,
    mediumslateblue: mediumSlateBlue,
    mediumorchid: mediumOrchid,
    mediumpurple: mediumPurple,
    orchid: orchid,
    violet: violet,
    plum: plum,
    thistle: thistle,
    lavender: lavender,
    rebeccapurple: rebeccaPurple,
    mistyrose: mistyRose,
    antiquewhite: antiqueWhite,
    linen: linen,
    beige: beige,
    whitesmoke: whiteSmoke,
    lavenderblush: lavenderBlush,
    oldlace: oldLace,
    aliceblue: aliceBlue,
    seashell: seashell,
    ghostwhite: ghostWhite,
    honeydew: honeydew,
    floralwhite: floralWhite,
    azure: azure,
    mintcream: mintCream,
    snow: snow,
    ivory: ivory,
    white: white,
    black: black,
    darkslategray: darkSlateGray,
    dimgray: dimGray,
    slategray: slateGray,
    gray: gray,
    lightslategray: lightSlateGray,
    darkgray: darkGray,
    silver: silver,
    lightgray: lightGray,
    gainsboro: gainsboro,
}

/**
 * Mix of webMainColors and _webMainColorsLowercased (to handle keys better:) )
 * @example
 * You can find light blue color either as lightblue or lightBlue
 * @deprecated
 * Please don't use this variable in your proyect, is just for internal use of css() function
 */
export const _webMainColorsMixedKeys_ONLY_TO_INTERN_USE = {
    ..._webMainColorsLowercased_ONLY_TO_INTERN_USE,
    ...webMainColors
}