Colors listed below are in the process of being killed or renamed.
linkBlueSuperLight is in use in some animations currently, but isn't in the current style guide.
#CBE4F5
orangeLighter is not in the style guide, nor in the code base
#F9C97B
Renamed colors. Use the new name
coral is now red
#F3336c
coralLighter is now redLight
#ffe0e6
coralLightest is now redLight
#ffe0e6
redLightest is now redLight
#ffe0e6
black is now gray20
#333333
gray is now gray75
#bfbfbf
grayDark is now gray45
#727272
grayDarker is now gray45
#727272
grayLighter is now gray92
#EBEBEB
grayLightest is now gray96
#f5f5f5
greenLighter is now greenLight
#b3ffc9
highlightSolidBlue is now cyan
#43dcff
highlightSolidMagenta is now magenta
#ff00bd
highlightSolidYellow is now yellow
#fec70a
blueDark is now navy
#0e5595
blueDark5 is now frost
#eef9ff
blueDark70 is now navy
#0e5595
#eef9ff
linkBlue is now azure
main link and button color
#146aff
linkBlueDark is now azureDark
#004cc9
linkBlueLight is now blueLighter
input accent color, link and button color against dark backgrounds where main color does not have enough contrast
#E4EFF5
linkBlueMed is now glacier
secondary color for cycling dots
#d4f0ff
orangeDark is now ochre
#e68800
purpleLighter is now purpleLight
#f7ebff
purpleLightest is now purpleLight
#f7ebff
turquoiseLighter is now turquoiseLight
#e0fffe
turquoiseLightest is now turquoiseLight
#e0fffe
yellowDark is now yellow
#FEC709
yellowLight is now sunshine
#fffadc
module Nri.Colors.Deprecated
exposing
( black
, blueDark
, blueDark5
, blueDark70
, blueLighter
, coral
, coralLighter
, coralLightest
, gray
, grayDark
, grayDarker
, grayLighter
, grayLightest
, greenLighter
, highlightSolidBlue
, highlightSolidMagenta
, highlightSolidYellow
, linkBlue
, linkBlueDark
, linkBlueLight
, linkBlueMed
, linkBlueSuperLight
, orangeDark
, orangeLighter
, purpleLighter
, purpleLightest
, redLightest
, turquoiseLighter
, turquoiseLightest
, yellowDark
, yellowLight
)
{-|
## Deprecated Colors
Colors listed below are in the process of being killed or renamed.
@docs linkBlueSuperLight
@docs orangeLighter
Renamed colors. Use the new name
@docs coral, coralLighter, coralLightest, redLightest
@docs black, gray, grayDark, grayDarker, grayLighter, grayLightest
@docs greenLighter
@docs highlightSolidBlue, highlightSolidMagenta, highlightSolidYellow
@docs blueDark, blueDark5, blueDark70, blueLighter, linkBlue, linkBlueDark, linkBlueLight, linkBlueMed
@docs orangeDark
@docs purpleLighter, purpleLightest
@docs turquoiseLighter, turquoiseLightest
@docs yellowDark, yellowLight
-}
import Css exposing (hex, rgba)
import Nri.Colors exposing (..)
{-| black is now gray20
<p style="font-size:2em; color: #333333">#333333</p>
-}
black : Css.Color
black =
gray20
{-| blueDark is now navy
<p style="font-size:2em; color: #0e5595">#0e5595</p>
-}
blueDark : Css.Color
blueDark =
navy
{-| blueDark5 is now frost
<p style="font-size:2em; color: #eef9ff; background-color: black;">#eef9ff</p>
-}
blueDark5 : Css.Color
blueDark5 =
frost
{-| blueDark70 is now navy
<p style="font-size:2em; color: #0e5595">#0e5595</p>
-}
blueDark70 : Css.Color
blueDark70 =
navy
{-|
<p style="font-size:2em; color: #eef9ff; background-color: black;">#eef9ff</p>
-}
blueLighter : Css.Color
blueLighter =
frost
{-| coral is now red
<p style="font-size:2em; color: #F3336c">#F3336c</p>
-}
coral : Css.Color
coral =
red
{-| coralLighter is now redLight
<p style="font-size:2em; color: #ffe0e6; background-color: black;">#ffe0e6</p>
-}
coralLighter : Css.Color
coralLighter =
redLight
{-| coralLightest is now redLight
<p style="font-size:2em; color: #ffe0e6; background-color: black;">#ffe0e6</p>
-}
coralLightest : Css.Color
coralLightest =
redLight
{-| gray is now gray75
<p style="font-size:2em; color: #bfbfbf; background-color: black;">#bfbfbf</p>
-}
gray : Css.Color
gray =
gray75
{-| grayDark is now gray45
<p style="font-size:2em; color: #727272">#727272</p>
-}
grayDark : Css.Color
grayDark =
gray45
{-| grayDarker is now gray45
<p style="font-size:2em; color: #727272">#727272</p>
-}
grayDarker : Css.Color
grayDarker =
gray45
{-| grayLighter is now gray92
<p style="font-size:2em; color: #EBEBEB; background-color: black;">#EBEBEB</p>
-}
grayLighter : Css.Color
grayLighter =
gray92
{-| grayLightest is now gray96
<p style="font-size:2em; color: #f5f5f5; background-color: black;">#f5f5f5</p>
-}
grayLightest : Css.Color
grayLightest =
gray96
{-| greenLighter is now greenLight
<p style="font-size:2em; color: #b3ffc9; background-color: black;">#b3ffc9</p>
-}
greenLighter : Css.Color
greenLighter =
greenLight
{-| highlightSolidBlue is now cyan
<p style="font-size:2em; color: #43dcff">#43dcff</p>
-}
highlightSolidBlue : Css.Color
highlightSolidBlue =
cyan
{-| highlightSolidMagenta is now magenta
<p style="font-size:2em; color: #ff00bd">#ff00bd</p>
-}
highlightSolidMagenta : Css.Color
highlightSolidMagenta =
magenta
{-| highlightSolidYellow is now yellow
<p style="font-size:2em; color: #fec70a">#fec70a</p>
-}
highlightSolidYellow : Css.Color
highlightSolidYellow =
yellow
{-| linkBlue is now azure
main link and button color
<p style="font-size:2em; color: #146aff">#146aff</p>
-}
linkBlue : Css.Color
linkBlue =
azure
{-| linkBlueDark is now azureDark
<p style="font-size:2em; color: #004cc9">#004cc9</p>
-}
linkBlueDark : Css.Color
linkBlueDark =
azureDark
{-| linkBlueLight is now blueLighter
input accent color, link and button color against dark backgrounds where main color does not have enough contrast
<p style="font-size:2em; color: #E4EFF5; background-color: black;">#E4EFF5</p>
-}
linkBlueLight : Css.Color
linkBlueLight =
blueLighter
{-| linkBlueMed is now glacier
secondary color for cycling dots
<p style="font-size:2em; color: #d4f0ff; background-color: black;">#d4f0ff</p>
-}
linkBlueMed : Css.Color
linkBlueMed =
glacier
{-| linkBlueSuperLight is in use in some animations currently, but isn't in the
current style guide.
<p style="font-size:2em; color: #CBE4F5; background-color: black;">#CBE4F5</p>
-}
linkBlueSuperLight : Css.Color
linkBlueSuperLight =
hex "#CBE4F5"
{-| orangeDark is now ochre
<p style="font-size:2em; color: #e68800">#e68800</p>
-}
orangeDark : Css.Color
orangeDark =
ochre
{-| orangeLighter is not in the style guide, nor in the code base
<p style="font-size:2em; color: #F9C97B; background-color: black;">#F9C97B</p>
-}
orangeLighter : Css.Color
orangeLighter =
hex "#F9C97B"
{-| purpleLighter is now purpleLight
<p style="font-size:2em; color: #f7ebff; background-color: black;">#f7ebff</p>
-}
purpleLighter : Css.Color
purpleLighter =
purpleLight
{-| purpleLightest is now purpleLight
<p style="font-size:2em; color: #f7ebff; background-color: black;">#f7ebff</p>
-}
purpleLightest : Css.Color
purpleLightest =
purpleLight
{-| redLightest is now redLight
<p style="font-size:2em; color: #ffe0e6">#ffe0e6</p>
-}
redLightest : Css.Color
redLightest =
redLight
{-| turquoiseLighter is now turquoiseLight
<p style="font-size:2em; color: #e0fffe; background-color: black;">#e0fffe</p>
-}
turquoiseLighter : Css.Color
turquoiseLighter =
turquoiseLight
{-| turquoiseLightest is now turquoiseLight
<p style="font-size:2em; color: #e0fffe; background-color: black;">#e0fffe</p>
-}
turquoiseLightest : Css.Color
turquoiseLightest =
turquoiseLight
{-| yellowDark is now yellow
<p style="font-size:2em; color: #FEC709; background-color: black;">#FEC709</p>
-}
yellowDark : Css.Color
yellowDark =
yellow
{-| yellowLight is now sunshine
<p style="font-size:2em; color: #fffadc; background-color: black;">#fffadc</p>
-}
yellowLight : Css.Color
yellowLight =
sunshine