diff --git a/jekyll/_includes/color/blue.md b/jekyll/_includes/color/blue.md index 05c8f9bfc..15c79c25e 100644 --- a/jekyll/_includes/color/blue.md +++ b/jekyll/_includes/color/blue.md @@ -1,5 +1,17 @@ + + + + + + + + + + + + diff --git a/jekyll/_includes/color/devtools.md b/jekyll/_includes/color/devtools.md new file mode 100644 index 000000000..d1bdf8c2e --- /dev/null +++ b/jekyll/_includes/color/devtools.md @@ -0,0 +1,57 @@ +
Blue 20#baddffAAAFails
Blue 30#80bfffAAAFails
Blue 40 #45a1ff
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Blue 55#0074e8AAAA
Magenta 65#dd00a9AAAA
Yellow 65#be9b00AAFails
Grey 25#e0e0e2AAAFails
Grey 45#939395AAAA Large
Grey 55#5c5c5fAAAA
Grey 85#1b1b1dAAAAAA
+ + + + + + + + + + + diff --git a/jekyll/_includes/color/magenta.md b/jekyll/_includes/color/magenta.md index faeac8d1a..bd1a1d6a5 100644 --- a/jekyll/_includes/color/magenta.md +++ b/jekyll/_includes/color/magenta.md @@ -1,5 +1,11 @@ + + + + + + diff --git a/jekyll/_includes/color/red.md b/jekyll/_includes/color/red.md index b9b635e74..173e890cb 100644 --- a/jekyll/_includes/color/red.md +++ b/jekyll/_includes/color/red.md @@ -1,5 +1,11 @@
Magenta 40#ff54e3AAAA Large
Magenta 50 #ff1ad9
+ + + + + + @@ -32,3 +38,4 @@
Red 40#ff3b65AA LargeAA Large
Red 50 #ff0039
+ diff --git a/jekyll/_sass/_colors.scss b/jekyll/_sass/_colors.scss index 723871a62..107482d3a 100644 --- a/jekyll/_sass/_colors.scss +++ b/jekyll/_sass/_colors.scss @@ -151,6 +151,24 @@ } /* Blues. */ + .blue-20 { + .name::before, .bg { + background-color: $blue-20; + color: $blue-90; + } + .fg { + color: $blue-20; + } + } + .blue-30 { + .name::before, .bg { + background-color: $blue-30; + color: $blue-90; + } + .fg { + color: $blue-30; + } + } .blue-40 { .name::before, .bg { background-color: $blue-40; @@ -254,6 +272,15 @@ } /* Magentas. */ + .magenta-40 { + .name::before, .bg { + background-color: $magenta-40; + color: $magenta-90; + } + .fg { + color: $magenta-40; + } + } .magenta-50 { .name::before, .bg { background-color: $magenta-50; @@ -395,6 +422,15 @@ } /* Reds. */ + .red-40 { + .name::before, .bg { + background-color: $red-40; + color: $white-100; + } + .fg { + color: $red-40; + } + } .red-50 { .name::before, .bg { background-color: $red-50; @@ -671,4 +707,69 @@ border: 1px solid $grey-color-light; } } + + /* DevTools Specific. */ + .blue-55 { + .name::before, .bg { + background-color: $blue-55; + color: $white-100; + } + .fg { + color: $blue-55; + } + } + .magenta-65 { + .name::before, .bg { + background-color: $magenta-65; + color: $white-100; + } + .fg { + color: $magenta-65; + } + } + .yellow-65 { + .name::before, .bg { + background-color: $yellow-65; + color: $yellow-90; + } + .fg { + color: $yellow-65; + } + } + .grey-25 { + .name::before, .bg { + background-color: $grey-25; + color: $grey-90; + } + .fg { + color: $grey-25; + } + } + .grey-45 { + .name::before, .bg { + background-color: $grey-45; + color: $grey-90; + } + .fg { + color: $grey-45; + } + } + .grey-55 { + .name::before, .bg { + background-color: $grey-55; + color: $white-100; + } + .fg { + color: $grey-55; + } + } + .grey-85 { + .name::before, .bg { + background-color: $grey-85; + color: $white-100; + } + .fg { + color: $grey-85; + } + } } \ No newline at end of file diff --git a/jekyll/_sass/_photon-colors.scss b/jekyll/_sass/_photon-colors.scss index 8ddf7ea59..d10473650 100644 --- a/jekyll/_sass/_photon-colors.scss +++ b/jekyll/_sass/_photon-colors.scss @@ -3,7 +3,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* Photon Colors SCSS Variables v3.3.1 */ - +$magenta-40: #ff54e3; $magenta-50: #ff1ad9; $magenta-60: #ed00b5; $magenta-70: #b5007f; @@ -18,6 +18,8 @@ $purple-70: #6200a4; $purple-80: #440071; $purple-90: #25003e; +$blue-20: #baddff; +$blue-30: #80bfff; $blue-40: #45a1ff; $blue-50: #0a84ff; $blue-50-a30: rgba(10, 132, 255, 0.3); @@ -44,6 +46,7 @@ $yellow-70: #a47f00; $yellow-80: #715100; $yellow-90: #3e2800; +$red-40: #ff3b65; $red-50: #ff0039; $red-60: #d70022; $red-70: #a4000f; @@ -90,3 +93,13 @@ $ink-90: #0f1126; $white-100: #ffffff; +//DevTools Special Case +$blue-55: #0074e8; +$magenta-65: #dd00a9; +$yellow-65: #be9b00; +$grey-25: #e0e0e2; +$grey-45: #939395; +$grey-55: #5c5c5f; +$grey-85: #1b1b1d; + + diff --git a/jekyll/_visuals/color.md b/jekyll/_visuals/color.md index 82d86ad4b..057a2e7aa 100644 --- a/jekyll/_visuals/color.md +++ b/jekyll/_visuals/color.md @@ -81,6 +81,15 @@ We use white for the background of doorhangers or in-content menus. {% include color/white.md %} +### DevTools Exclusive Additions + +The complex interface of DevTools has yielded an expansion to the standard Photon color chart. +These Photon colors should **only** be used in exceptional circumstances when standard photon colors do not provide a sufficient color range or contrast in DevTools interfaces. + +**These reserve colors should not be used in any other scenario.** + +{% include color/devtools.md %} + ## Text and Background Colors Visit [typography](typography.html) for more information on text color. diff --git a/jekyll/interactives/variables.css b/jekyll/interactives/variables.css index 7e5e54afc..5cb6b7972 100644 --- a/jekyll/interactives/variables.css +++ b/jekyll/interactives/variables.css @@ -15,6 +15,7 @@ --purple-80:#440071; --purple-90:#25003e; + --blue-30:#80bfff; --blue-40:#45a1ff; --blue-50:#0a84ff; --blue-60:#0060df;