mirror of https://github.com/docker/docs.git
Merge pull request #14595 from mark-dr/update-color-palette
Update color palette, fix link visibility in dark theme
This commit is contained in:
Usha Mandya
GitHub
commit
e77783ca57
|
|
@ -0,0 +1,25 @@
|
|||
/* This palette is deprecated */
|
||||
|
||||
$red-90: #9e1011;
|
||||
|
||||
$marine-10: #9fd1f9;
|
||||
$marine-50: #007bff;
|
||||
$marine-90: #002c66;
|
||||
|
||||
$grey-10: #d7dade;
|
||||
|
||||
$blue-60: #2496ed;
|
||||
$blue-70: #1282d7;
|
||||
$blue-80: #076cad;
|
||||
|
||||
$orange-10: #fef5c3;
|
||||
$orange-20: #f9e3ae;
|
||||
$orange-90: #d4611d;
|
||||
|
||||
$white-0: #ffffff;
|
||||
$white-5: #fafafb;
|
||||
$white-10: #f7f7f8;
|
||||
$white-15: #f2f3f5;
|
||||
$white-25: #e9ebee;
|
||||
|
||||
$black-0: #0f161e;
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
// This file defines two palettes. The light palette should only be used
|
||||
// in light mode, and vice versa. In general, if you use one of the colors
|
||||
// in light mode, you should the same-named color in the dark palette in
|
||||
// dark mode.
|
||||
|
||||
// light palette contrast colors:
|
||||
// 100-400: black
|
||||
// 500-800: white
|
||||
|
||||
$light-palette-background: #F9F9FA;
|
||||
|
||||
$light-palette-amber-100: #FFF6E2;
|
||||
$light-palette-amber-200: #FCE1A9;
|
||||
$light-palette-amber-300: #FBB552;
|
||||
$light-palette-amber-400: #DD7805;
|
||||
$light-palette-amber-500: #B85504;
|
||||
$light-palette-amber-600: #AA4409;
|
||||
$light-palette-amber-700: #893607;
|
||||
$light-palette-amber-800: #421A02;
|
||||
$light-palette-blue-100: #E8F4FD;
|
||||
$light-palette-blue-200: #C0E0FA;
|
||||
$light-palette-blue-300: #8BC7F5;
|
||||
$light-palette-blue-400: #1C90ED;
|
||||
$light-palette-blue-500: #116ED0;
|
||||
$light-palette-blue-600: #0055BD;
|
||||
$light-palette-blue-700: #1144A6;
|
||||
$light-palette-blue-800: #00084D;
|
||||
$light-palette-green-100: #F3FAF9;
|
||||
$light-palette-green-200: #C6EAE1;
|
||||
$light-palette-green-300: #88D5C0;
|
||||
$light-palette-green-400: #3BA08D;
|
||||
$light-palette-green-500: #2E7F74;
|
||||
$light-palette-green-600: #1E6C5F;
|
||||
$light-palette-green-700: #185A51;
|
||||
$light-palette-green-800: #0C2C28;
|
||||
$light-palette-grey-100: #EAEAED;
|
||||
$light-palette-grey-200: #E1E2E6;
|
||||
$light-palette-grey-300: #C4C8D1;
|
||||
$light-palette-grey-400: #8993A5;
|
||||
$light-palette-grey-500: #677285;
|
||||
$light-palette-grey-600: #505968;
|
||||
$light-palette-grey-700: #393F49;
|
||||
$light-palette-grey-800: #17191E;
|
||||
$light-palette-red-100: #FEEFEF;
|
||||
$light-palette-red-200: #F6CFD0;
|
||||
$light-palette-red-300: #EEA3A5;
|
||||
$light-palette-red-400: #E25D68;
|
||||
$light-palette-red-500: #D52536;
|
||||
$light-palette-red-600: #B72132;
|
||||
$light-palette-red-700: #8B1924;
|
||||
$light-palette-red-800: #350A10;
|
||||
$light-palette-violet-100: #F7ECFF;
|
||||
$light-palette-violet-200: #E9D4FF;
|
||||
$light-palette-violet-300: #C9A6FF;
|
||||
$light-palette-violet-400: #9860FF;
|
||||
$light-palette-violet-500: #7D2EFF;
|
||||
$light-palette-violet-600: #6D00EB;
|
||||
$light-palette-violet-700: #5700BB;
|
||||
$light-palette-violet-800: #220041;
|
||||
|
||||
// dark palette contrast colors:
|
||||
// 100-400: white
|
||||
// 500-800: black
|
||||
|
||||
$dark-palette-background: #1C262D;
|
||||
|
||||
$dark-palette-amber-100: #672805;
|
||||
$dark-palette-amber-200: #7B3606;
|
||||
$dark-palette-amber-300: #944307;
|
||||
$dark-palette-amber-400: #AF560A;
|
||||
$dark-palette-amber-500: #CD6A0A;
|
||||
$dark-palette-amber-600: #ED8D25;
|
||||
$dark-palette-amber-700: #F6A650;
|
||||
$dark-palette-amber-800: #F8B974;
|
||||
$dark-palette-blue-100: #0B1B46;
|
||||
$dark-palette-blue-200: #06326D;
|
||||
$dark-palette-blue-300: #084391;
|
||||
$dark-palette-blue-400: #1557B8;
|
||||
$dark-palette-blue-500: #116ED0;
|
||||
$dark-palette-blue-600: #3391EE;
|
||||
$dark-palette-blue-700: #55A4F1;
|
||||
$dark-palette-blue-800: #7CB9F4;
|
||||
$dark-palette-green-100: #0D342E;
|
||||
$dark-palette-green-200: #11423B;
|
||||
$dark-palette-green-300: #145348;
|
||||
$dark-palette-green-400: #1A655A;
|
||||
$dark-palette-green-500: #228375;
|
||||
$dark-palette-green-600: #2AA391;
|
||||
$dark-palette-green-700: #3CC1AD;
|
||||
$dark-palette-green-800: #7ACCC3;
|
||||
$dark-palette-grey-100: #141B1F;
|
||||
$dark-palette-grey-200: #27343E;
|
||||
$dark-palette-grey-300: #364754;
|
||||
$dark-palette-grey-400: #465C6E;
|
||||
$dark-palette-grey-500: #7794AB;
|
||||
$dark-palette-grey-600: #94ABBC;
|
||||
$dark-palette-grey-700: #ADBECB;
|
||||
$dark-palette-grey-800: #C4D0DA;
|
||||
$dark-palette-red-100: #58111B;
|
||||
$dark-palette-red-200: #741624;
|
||||
$dark-palette-red-300: #951C2F;
|
||||
$dark-palette-red-400: #BC233C;
|
||||
$dark-palette-red-500: #C32438;
|
||||
$dark-palette-red-600: #DD4659;
|
||||
$dark-palette-red-700: #E36676;
|
||||
$dark-palette-red-800: #EA8E9A;
|
||||
$dark-palette-violet-100: #341458;
|
||||
$dark-palette-violet-200: #491D7B;
|
||||
$dark-palette-violet-300: #5F25A0;
|
||||
$dark-palette-violet-400: #8032D6;
|
||||
$dark-palette-violet-500: #8A53EC;
|
||||
$dark-palette-violet-600: #A371FC;
|
||||
$dark-palette-violet-700: #B38BFC;
|
||||
$dark-palette-violet-800: #C5A6FD;
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
$red-10: #f8a09a;
|
||||
$red-20: #f3847e;
|
||||
$red-30: #ee635f;
|
||||
$red-40: #e9524f;
|
||||
$red-50: #e44141;
|
||||
$red-60: #da3333;
|
||||
$red-70: #c82828;
|
||||
$red-80: #b21c1c;
|
||||
$red-90: #9e1011;
|
||||
$red-100: #8c0607;
|
||||
|
||||
$magenta-10: #fbd5fa;
|
||||
$magenta-20: #f5b8f3;
|
||||
$magenta-30: #ef94eb;
|
||||
$magenta-40: #e96fe4;
|
||||
$magenta-50: #e34adc;
|
||||
$magenta-60: #dd26d5;
|
||||
$magenta-70: #cc18c4;
|
||||
$magenta-80: #a611a0;
|
||||
$magenta-90: #7b0a76;
|
||||
$magenta-100: #530450;
|
||||
|
||||
$purple-10: #d4c1f8;
|
||||
$purple-20: #bca5ea;
|
||||
$purple-30: #aa92dc;
|
||||
$purple-40: #987ece;
|
||||
$purple-50: #866abf;
|
||||
$purple-60: #7457b1;
|
||||
$purple-70: #6243a3;
|
||||
$purple-80: #4e2d8f;
|
||||
$purple-90: #3c1980;
|
||||
$purple-100: #270769;
|
||||
|
||||
$marine-10: #9fd1f9;
|
||||
$marine-20: #6fb6f6;
|
||||
$marine-30: #4ba0f3;
|
||||
$marine-40: #268aef;
|
||||
$marine-50: #007bff;
|
||||
$marine-60: #0162cc;
|
||||
$marine-70: #0151ad;
|
||||
$marine-80: #003f8c;
|
||||
$marine-90: #002c66;
|
||||
$marine-100: #0b214a;
|
||||
|
||||
$grey-10: #d7dade;
|
||||
$grey-20: #b9c2c9;
|
||||
$grey-30: #a5b1ba;
|
||||
$grey-40: #90a0ac;
|
||||
$grey-50: #768491;
|
||||
$grey-60: #5a6774;
|
||||
$grey-70: #404d59;
|
||||
$grey-80: #26323f;
|
||||
$grey-90: #17222f;
|
||||
$grey-100: #161f2a;
|
||||
|
||||
$blue-10: #c4f0ff;
|
||||
$blue-20: #98e0ff;
|
||||
$blue-30: #71cfff;
|
||||
$blue-40: #51bcfd;
|
||||
$blue-50: #37aaf7;
|
||||
$blue-60: #2496ed;
|
||||
$blue-70: #1282d7;
|
||||
$blue-80: #076cad;
|
||||
$blue-90: #025391;
|
||||
$blue-100: #004375;
|
||||
|
||||
$green-10: #c7efe6;
|
||||
$green-20: #aae8d8;
|
||||
$green-30: #8de0ca;
|
||||
$green-40: #70d8bd;
|
||||
$green-50: #54d1b0;
|
||||
$green-60: #43b899;
|
||||
$green-70: #33977e;
|
||||
$green-80: #237663;
|
||||
$green-90: #135446;
|
||||
$green-100: #094539;
|
||||
|
||||
$orange-10: #fef5c3;
|
||||
$orange-20: #f9e3ae;
|
||||
$orange-30: #f5d19a;
|
||||
$orange-40: #f0bf85;
|
||||
$orange-50: #ecad71;
|
||||
$orange-60: #e79a5c;
|
||||
$orange-70: #e28847;
|
||||
$orange-80: #db7432;
|
||||
$orange-90: #d4611d;
|
||||
$orange-100: #cc4e09;
|
||||
|
||||
$white-0: #ffffff;
|
||||
$white-5: #fafafb;
|
||||
$white-10: #f7f7f8;
|
||||
$white-15: #f2f3f5;
|
||||
$white-25: #e9ebee;
|
||||
|
||||
$black-0: #0f161e;
|
||||
$black-5: #121a24;
|
||||
$black-15: #151c26;
|
||||
|
|
@ -41,6 +41,10 @@ The available classes are:
|
|||
> p:only-child, > p:not(:first-child) {
|
||||
color: $body-text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -51,36 +55,36 @@ blockquote {
|
|||
|
||||
&:not(.important):not(.warning):not(.restricted) {
|
||||
@include notification(
|
||||
$bg-color: change-color($marine-10, $alpha: 0.2),
|
||||
$header-color: $marine-10,
|
||||
$body-text-color: $marine-10,
|
||||
$bg-color: $dark-palette-blue-200,
|
||||
$header-color: $white-0,
|
||||
$body-text-color: $white-0,
|
||||
$icon: "\f06a"
|
||||
);
|
||||
}
|
||||
|
||||
&.important {
|
||||
@include notification(
|
||||
$bg-color: change-color($orange-60, $alpha: 0.4),
|
||||
$header-color: $orange-20,
|
||||
$body-text-color: $orange-20,
|
||||
$bg-color: $dark-palette-amber-200,
|
||||
$header-color: $white-0,
|
||||
$body-text-color: $white-0,
|
||||
$icon: "\f06a"
|
||||
);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@include notification(
|
||||
$bg-color: change-color($red-60, $alpha: 0.3),
|
||||
$header-color: $red-10,
|
||||
$body-text-color: $red-10,
|
||||
$bg-color: $dark-palette-red-200,
|
||||
$header-color: $white-0,
|
||||
$body-text-color: $white-0,
|
||||
$icon: "\f06a"
|
||||
);
|
||||
}
|
||||
|
||||
&.restricted {
|
||||
@include notification(
|
||||
$bg-color: change-color($purple-60, $alpha: 0.44),
|
||||
$header-color: $purple-10,
|
||||
$body-text-color: $purple-10,
|
||||
$bg-color: $dark-palette-violet-200,
|
||||
$header-color: $white-0,
|
||||
$body-text-color: $white-0,
|
||||
$icon: "\f135"
|
||||
);
|
||||
}
|
||||
|
|
@ -91,8 +95,8 @@ blockquote {
|
|||
|
||||
&:not(.important):not(.warning):not(.restricted) {
|
||||
@include notification(
|
||||
$bg-color: #E8F4FD, // Hardcoding this variable temporary till we migrate to the new color pallette
|
||||
$header-color: $blue-80,
|
||||
$bg-color: $light-palette-blue-100,
|
||||
$header-color: $light-palette-blue-500,
|
||||
$body-text-color: inherit,
|
||||
$icon: "\f05a"
|
||||
);
|
||||
|
|
@ -100,8 +104,8 @@ blockquote {
|
|||
|
||||
&.important {
|
||||
@include notification(
|
||||
$bg-color: $orange-10,
|
||||
$header-color: $orange-100,
|
||||
$bg-color: $light-palette-amber-100,
|
||||
$header-color: $light-palette-amber-500,
|
||||
$body-text-color: inherit,
|
||||
$icon: "\f06a"
|
||||
);
|
||||
|
|
@ -109,8 +113,8 @@ blockquote {
|
|||
|
||||
&.warning {
|
||||
@include notification(
|
||||
$bg-color: #FEEFEF, // Hardcoding this variable temporary till we migrate to the new color pallette
|
||||
$header-color: $red-50,
|
||||
$bg-color: $light-palette-red-100,
|
||||
$header-color: $light-palette-red-500,
|
||||
$body-text-color: inherit,
|
||||
$icon: "\f06a"
|
||||
);
|
||||
|
|
@ -118,8 +122,8 @@ blockquote {
|
|||
|
||||
&.restricted {
|
||||
@include notification(
|
||||
$bg-color: $purple-10,
|
||||
$header-color: $purple-50,
|
||||
$bg-color: $light-palette-violet-100,
|
||||
$header-color: $light-palette-violet-500,
|
||||
$body-text-color: inherit,
|
||||
$icon: "\f135"
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
@import "color-palette";
|
||||
@import "color-palette-v2";
|
||||
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
---
|
||||
|
||||
@import "breakpoint";
|
||||
@import "color-palette";
|
||||
@import "color-palette-v2";
|
||||
@import "color-palette-v3";
|
||||
@import "variables";
|
||||
@import "night-mode";
|
||||
@import "base";
|
||||
|
|
|
|||
Loading…
Reference in New Issue