@devopness/ui-react

import { Flatten, OpacityFromFloatToHex } from './types'; declare const colors: { readonly amber: { readonly 800: "#a39015"; readonly 500: "#fab01c"; readonly 400: "#fdb762"; readonly 300: "#fdd88e"; readonly 200: "#fee2c0"; readonly 150: "#feebc6"; readonly 100: "#fff1e0"; readonly 50: "#fff6ef"; readonly 10: "#fffcf5"; }; readonly black: "#000000"; readonly blue: { readonly 950: "#2e374e"; readonly 800: "#2e364e"; readonly 750: "#37436b"; readonly 700: "#0064a5"; readonly 600: "#016ee9"; readonly 500: "#0496f5"; readonly 400: "#96c7fe"; readonly 300: "#b9daff"; readonly 100: "#dcecff"; readonly 50: "#e8f6ff"; readonly 25: "#eef2ff"; }; readonly brown: { readonly 400: "#b5a7a2"; readonly 50: "#faf8f1"; }; readonly cyan: { readonly 800: "#537e8c"; readonly 400: "#00d7d7"; readonly 300: "#02e0d1"; readonly 200: "#e0f7fa"; readonly 100: "#ebfafb"; readonly 50: "#f6fffe"; }; readonly fuchsia: { readonly 600: "#d000ff"; readonly 10: "#fdf5ff"; }; readonly gray: { readonly 900: "#42495a"; readonly 800: "#828795"; readonly 615: "#9198a5"; readonly 600: "#9196a4"; readonly 500: "#b0b3bc"; readonly 400: "#afb8c9"; readonly 300: "#bdc4d3"; readonly 200: "#f3f7fe"; }; readonly green: { readonly 800: "#57b261"; readonly 600: "#0cd356"; readonly 300: "#9eedbb"; readonly 200: "#b6f2cc"; readonly 150: "#cef6dd"; readonly 125: "#effff1"; readonly 100: "#edf9ee"; }; readonly indigo: { readonly 100: "#f5f6ff"; readonly 50: "#f6f8ff"; readonly 10: "#f8faff"; }; readonly orange: { readonly 700: "#f89532"; readonly 600: "#ff8700"; readonly 500: "#f8bf4d"; readonly 400: "#fdba62"; readonly 100: "#f6f4e7"; readonly 50: "#fff6f0"; readonly 10: "#fff9f0"; }; readonly purple: { readonly 800: "#786efd"; readonly 400: "#cac7fc"; readonly 300: "#dfe4fd"; readonly 275: "#dfe6ff"; readonly 250: "#e6ecff"; readonly 100: "#f2f1ff"; readonly 50: "#f2f2fa"; }; readonly red: { readonly 500: "#fd595c"; readonly 450: "#ff6666"; readonly 400: "#f67771"; readonly 300: "#febdbe"; readonly 200: "#fecdce"; readonly 150: "#ffdede"; readonly 100: "#ffe8e8"; readonly 50: "#fff3f3"; }; readonly slate: { readonly 600: "#4a526a"; readonly 450: "#72798f"; readonly 400: "#abb4c5"; readonly 300: "#e3e8f9"; }; readonly stone: { readonly 100: "#f6f6f6"; readonly 50: "#edf2f3"; }; readonly transparent: "transparent"; readonly white: "#ffffff"; readonly yellow: { readonly 300: "#fff793"; }; }; /** * Maps Color paths on format <color>.<shade> to its value in hex, based on colors object */ type ColorToHexMapper = Flatten<typeof colors>; /** * Lists all valid color codes, following format <color>.<shade> */ type Color = keyof ColorToHexMapper; /** * Gets the color' hex value * * @param name Color name on format <color>.<shade> */ declare const getColor: <TColor extends Color>(name: TColor) => ColorToHexMapper[TColor]; /** * Adds opacity suffix to colors * * @param color string in hexadecimal format #rrggbb * * @param opacity number in range 0.0 to 1.0 * * This methods transform opacity from number to a hexadecimal (16) color alpha component, meaning * a number between 0 and ff (255) in base 16 * * @returns color with added opacity information #rrggbbaa * * @example * * > getOpacity(#fff1e0, 0.5) // => #fff1e07f, 7f == 0.5 * * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color#a} */ declare const getOpacity: <HexColor extends ColorToHexMapper[Color], Opacity extends number>(color: HexColor, opacity: Opacity) => Exclude<HexColor, `#${string}`> | `${Extract<HexColor, `#${string}`>}${Opacity extends keyof OpacityFromFloatToHex ? OpacityFromFloatToHex[Opacity] : "00" | "19" | "33" | "4c" | "66" | "7f" | "99" | "b2" | "cc" | "e5" | "ff" | "01" | "02" | "03" | "04" | "05" | "06" | "07" | "08" | "09" | "0a" | "0b" | "0c" | "0d" | "0e" | "0f" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "1a" | "1b" | "1c" | "1d" | "1e" | "1f" | "20" | "21" | "22" | "23" | "24" | "25" | "26" | "27" | "28" | "29" | "2a" | "2b" | "2c" | "2d" | "2e" | "2f" | "30" | "31" | "32" | "34" | "35" | "36" | "37" | "38" | "39" | "3a" | "3b" | "3c" | "3d" | "3e" | "3f" | "40" | "41" | "42" | "43" | "44" | "45" | "46" | "47" | "48" | "49" | "4a" | "4b" | "4d" | "4e" | "4f" | "50" | "51" | "52" | "53" | "54" | "55" | "56" | "57" | "58" | "59" | "5a" | "5b" | "5c" | "5d" | "5e" | "5f" | "60" | "61" | "62" | "63" | "64" | "65" | "67" | "68" | "69" | "6a" | "6b" | "6c" | "6d" | "6e" | "6f" | "70" | "71" | "72" | "73" | "74" | "75" | "76" | "77" | "78" | "79" | "7a" | "7b" | "7c" | "7d" | "7e" | "80" | "81" | "82" | "83" | "84" | "85" | "86" | "87" | "88" | "89" | "8a" | "8b" | "8c" | "8d" | "8e" | "8f" | "90" | "91" | "92" | "93" | "94" | "95" | "96" | "97" | "98" | "9a" | "9b" | "9c" | "9d" | "9e" | "9f" | "a0" | "a1" | "a2" | "a3" | "a4" | "a5" | "a6" | "a7" | "a8" | "a9" | "aa" | "ab" | "ac" | "ad" | "ae" | "af" | "b0" | "b1" | "b3" | "b4" | "b5" | "b6" | "b7" | "b8" | "b9" | "ba" | "bb" | "bc" | "bd" | "be" | "bf" | "c0" | "c1" | "c2" | "c3" | "c4" | "c5" | "c6" | "c7" | "c8" | "c9" | "ca" | "cb" | "cd" | "ce" | "cf" | "d0" | "d1" | "d2" | "d3" | "d4" | "d5" | "d6" | "d7" | "d8" | "d9" | "da" | "db" | "dc" | "dd" | "de" | "df" | "e0" | "e1" | "e2" | "e3" | "e4" | "e6" | "e7" | "e8" | "e9" | "ea" | "eb" | "ec" | "ed" | "ee" | "ef" | "f0" | "f1" | "f2" | "f3" | "f4" | "f5" | "f6" | "f7" | "f8" | "f9" | "fa" | "fb" | "fc" | "fd" | "fe"}`; export type { Color }; export { getColor, getOpacity };