import { parseToRgb } from "polished" ; import React from "react" ; import tinycolor , { Instance } from "tinycolor2" ; export const Color = tinycolor ; export type ColorInstance = Instance ; /**
 * Page-wide color mode (light/dark)
 */ export enum ColorMode { Dark = "dark" , Light = "light" } export const defaultMode = ColorMode . Dark ; const nonDefaultModes = Object . values ( ColorMode ) . filter ( ( m ) => m !== defaultMode ) ; export type ColorModeContext = { mode : ColorMode ; setMode : ( newMode : ColorMode ) => void ; } ; export const ColorModeContext = React . createContext < ColorModeContext > ( { mode : defaultMode , setMode : ( ) => null , } ) ; const colors = { [ ColorMode . Light ] : { text : "rgba(33, 33, 33, 0.7)" , textStrong : "rgba(33, 33, 33, 0.85)" , textFade : "rgba(33, 33, 33, 0.6)" , textLight : "rgba(33, 33, 33, 0.4)" , textReverse : "rgba(244, 246, 249, 0.7)" , textOverlay : "rgba(33, 33, 33, 0.1)" , "bg-40" : "hsl(200, 20%, 75%)" , "bg-30" : "hsl(200, 20%, 80%)" , "bg-20" : "hsl(200, 20%, 85%)" , "bg-10" : "hsl(200, 19%, 91%)" , bg : "hsl(200, 20%, 97%)" , "bg+10" : "hsl(200, 20%, 100%)" , "bg+20" : "hsl(200, 20%, 100%)" , "primary-40" : "#121c26" , "primary-30" : "#24394d" , "primary-20" : "#355573" , "primary-10" : "#47729a" , primary : "#598ec0" , "primary+10" : "#7aa5cd" , "primary+20" : "#9bbbd9" , "primary+30" : "#bdd2e6" , "primary+40" : "#dee8f2" , "secondary-40" : "#292112" , "secondary-30" : "#524125" , "secondary-20" : "#7a6237" , "secondary-10" : "#a3824a" , secondary : "#cca35c" , "secondary+10" : "#d6b57d" , "secondary+20" : "#e0c89d" , "secondary+30" : "#ebdabe" , "secondary+40" : "#f5edde" , contrastBorder : "rgba(194, 207, 214, 0.9)" , border : "rgba(194, 207, 214, 0.8)" , inputFocusBorder : "hsl(209, 45%, 55%)" , shadowLight : "rgba(0, 0, 0, 0.06)" , shadowMedium : "rgba(0, 0, 0, 0.075)" , shadowBold : "rgba(0, 0, 0, 0.09)" , shadowHeavy : "rgba(0, 0, 0, 0.3)" , tooltip : "hsl(220, 15%, 35%)" , footer : "hsl(220, 13%, 28%)" , modalOverlay : "rgba(255, 255, 255, 0.7)" , hoverOverlay : "rgba(33, 33, 33, 0.05)" , activeOverlay : "rgba(33, 33, 33, 0.1)" , contrastOverlay : "rgba(0, 0, 0, 0.04)" , } , [ ColorMode . Dark ] : { text : "rgba(201, 213, 219, 0.85)" , textStrong : "rgba(244, 246, 249, 0.9)" , textFade : "rgba(201, 213, 219, 0.7)" , textLight : "rgba(201, 213, 219, 0.4)" , textReverse : "rgba(0, 0, 0, 0.5)" , textOverlay : "rgba(201, 213, 219, 0.1)" , "bg-40" : "hsl(220, 19%, 2%)" , "bg-30" : "hsl(220, 17%, 5%)" , "bg-20" : "hsl(220, 18%, 10%)" , "bg-10" : "hsl(220, 15%, 13%)" , bg : "hsl(220, 13%, 18%)" , "bg+10" : "hsl(220, 13%, 22%)" , "bg+20" : "hsl(220, 13%, 28%)" , "primary-40" : "#151f28" , "primary-30" : "#2a3e50" , "primary-20" : "#3f5d79" , "primary-10" : "#547ca1" , primary : "#699bc9" , "primary+10" : "#87afd4" , "primary+20" : "#a5c3df" , "primary+30" : "#c3d7e9" , "primary+40" : "#e1ebf4" , "secondary-40" : "#2a2216" , "secondary-30" : "#53452b" , "secondary-20" : "#7d6741" , "secondary-10" : "#a68a56" , secondary : "#d0ac6c" , "secondary+10" : "#d9bd89" , "secondary+20" : "#e3cda7" , "secondary+30" : "#ecdec4" , "secondary+40" : "#f6eee2" , contrastBorder : "transparent" , border : "rgba(246, 248, 249, 0.09)" , inputFocusBorder : "transparent" , shadowLight : "rgba(0, 0, 0, 0.08)" , shadowMedium : "rgba(0, 0, 0, 0.12)" , shadowBold : "rgba(0, 0, 0, 0.18)" , shadowHeavy : "rgba(0, 0, 0, 0.5)" , tooltip : "rgb(11, 12, 15)" , footer : "hsl(220, 13%, 18%)" , modalOverlay : "rgba(0, 0, 0, 0.7)" , hoverOverlay : "rgba(201, 213, 219, 0.05)" , activeOverlay : "rgba(201, 213, 219, 0.1)" , contrastOverlay : "rgba(255, 255, 255, 0.023)" , } , } ; const staticColors = { tertiary : "#453e3e" , info : "#73a3ba" , warning : "#e3c75b" , success : "#5da161" , danger : "#e6584d" , light : "rgb(232, 234, 235)" , dark : "rgb(22, 24, 30)" , } ; export const themeColor = "#6496c4" ; export const themeBgColor = "#496D8F" ; export const msTileColor = "#2b5797" ; /**
 * Bootstrap-like variant, using colors injected from the theme.
 * See https://getbootstrap.com/docs/4.0/content/tables/#contextual-classes
 */ export type Variant = "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "info" | "light" | "dark" ; export const applicationThemeColor = "#6496C4" ; export const safariTabColor = "#6192be" ; export const windowsTileColor = "#ffc40d" ; type DynamicColorTable = typeof colors [ keyof typeof colors ] ; export type DynamicColorKey = keyof DynamicColorTable ; export type StaticColorKey = keyof typeof staticColors ; export type ColorKey = DynamicColorKey | StaticColorKey ; type ThemeDifference < A extends ColorMode , B extends ColorMode > = Exclude < typeof colors [ A ] , typeof colors [ B ] > ; type MustBeEmpty1 = ThemeDifference < ColorMode . Light , ColorMode . Dark > ; type MustBeEmpty2 = ThemeDifference < ColorMode . Dark , ColorMode . Light > ; const n1 = null as MustBeEmpty1 ; const n2 = null as MustBeEmpty2 ; type MustBeEmpty3 = Exclude < Variant , ColorKey > ; const n3 = null as MustBeEmpty3 ; export function toVariable ( key ) { return `--c-${ key . replace ( "+" , "_plus_" ) }` ; } param key export function color ( key ) { if ( key in staticColors ) { return staticColors [ key as StaticColorKey ] ; } return `var(${ toVariable ( key ) })` ; } param map param colorMode export function makeVariableDefinitions ( map , colorMode ) { return Object . entries ( map [ colorMode ] ) . map ( ( [ key , value ] ) => `${ toVariable ( key as ColorKey ) }: ${ value };` ) . join ( "" ) ; } param map export function makeRootDefinitions ( map ) { return ( makeVariableDefinitions ( map , defaultMode ) + Object . values ( ColorMode ) . filter ( ( colorMode ) => defaultMode !== colorMode ) . map ( ( colorMode ) => `&.${ colorMode } { ${ makeVariableDefinitions ( map , colorMode ) } }` ) . join ( " " ) ) ; } /**
 * Gets the css for use in the global CSS root
 */ export function injectColorGlobals ( ) { return `body { ${ makeRootDefinitions ( colors ) } }` ; } param key export function staticColor ( key ) { return staticColors [ key ] ; } param key param colorMode export function dynamicColor ( key , colorMode = defaultMode ) { return colors [ colorMode ] [ key ] ; } param colorMode export function mode ( colorMode ) { if ( colorMode === defaultMode ) return `body${ nonDefaultModes . map ( ( m ) => `:not(.${ m })` ) . join ( "" ) } &` ; return `body.${ colorMode } &` ; } param baseColor export function splitColor ( baseColor ) { const { red , green , blue } = parseToRgb ( baseColor ) ; return `${ red }, ${ green }, ${ blue }` ; } param key param colorMode export function hybridColor ( key , colorMode = defaultMode ) { if ( key in staticColors ) { return staticColors [ key as StaticColorKey ] ; } return ( colors [ colorMode ] ?? colors [ defaultMode ] ) [ key as DynamicColorKey ] ; }