<div dir="auto"><div class="gmail_extra" dir="auto"><div style="font-family:sans-serif" dir="auto">From what I read those weird definitions are just an invention of that palette generator. We have only a primary and an optional secondary color and their light and dark variations.</div><div dir="auto" style="font-family:sans-serif"><br></div><div dir="auto" style="font-family:sans-serif">I found this reply very informative:</div><div dir="auto" style="font-family:sans-serif"><br></div><div dir="auto" style="font-family:sans-serif"><a href="https://ux.stackexchange.com/questions/89815/choosing-colors-in-material-design" target="_blank">https://ux.stackexchange.com/<wbr>questions/89815/choosing-<wbr>colors-in-material-design</a><br></div><div dir="auto" style="font-family:sans-serif"><br></div><div dir="auto" style="font-family:sans-serif"><br>Basically text is always black #000000 and you define opacity based on background. There are fixed values for that.<br></div><div dir="auto" style="font-family:sans-serif">Here Google explains the trick on text</div><div dir="auto" style="font-family:sans-serif"><br></div><div dir="auto" style="font-family:sans-serif"><a href="https://material.io/guidelines/style/color.html#color-usability" target="_blank">https://material.io/<wbr>guidelines/style/color.html#<wbr>color-usability</a></div><div dir="auto" style="font-family:sans-serif"><div style="margin:20px 0px;padding:0px 0px 20px;border:0px;font-size:13px;line-height:inherit;font-family:roboto,sans-serif;vertical-align:top;display:inline-block;width:328px;color:rgb(33,33,33);background-color:rgb(250,250,250)" dir="auto"><h2 style="margin:0px 0px 30px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:500;font-size:15px;line-height:24px;font-family:inherit;vertical-align:baseline;max-width:760px"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:600;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline">Dark text on light backgrounds</span></h2><p style="margin:0px 0px 20px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:24px;font-family:inherit;vertical-align:baseline;max-width:760px;word-wrap:break-word">The level of opacity used for text depends on whether your background is dark or light. For dark text on light backgrounds, apply the following opacity levels:</p><ul style="margin:0px 0px 20px;padding:0px 0px 0px 20px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;list-style:none"><li style="margin:0px 0px 0.5em;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:24px;font-family:inherit;vertical-align:baseline;max-width:760px;word-wrap:break-word;list-style-type:disc">The <span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:600;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline">most important text</span> has an opacity of 87%.</li><li style="margin:0px 0px 0.5em;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:24px;font-family:inherit;vertical-align:baseline;max-width:760px;word-wrap:break-word;list-style-type:disc"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:600;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline">Secondary text</span>, which is lower in the visual hierarchy, has an opacity of 54%.</li><li style="margin:0px 0px 0.5em;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:24px;font-family:inherit;vertical-align:baseline;max-width:760px;word-wrap:break-word;list-style-type:disc"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:600;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline">Text hints</span> (such as text fields and labels) and <span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:600;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline">disabled text</span> have even lower visual prominence with an opacity of 38%.</li></ul></div><div style="margin:20px 0px;padding:0px 0px 20px;border:0px;font-size:13px;line-height:inherit;font-family:roboto,sans-serif;vertical-align:top;display:inline-block;width:328px;color:rgb(33,33,33);background-color:rgb(250,250,250)" dir="auto"><figure style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;width:328px"><div style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;max-width:720px"><div style="margin:0px;padding:186.766px 0px 0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;max-width:100%"><img alt="" src="https://storage.googleapis.com/material-design/publish/material_v_11/assets/0BxFyKV4eeNjDa0dlWGxkWXBnTUk/style_color_usability_alpha1_161116.png" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;display:block;max-width:100%;width:328px;height:186.766px"></div></div></figure></div><div style="margin:20px 0px;padding:0px 0px 20px;border:0px;font-size:13px;line-height:inherit;font-family:roboto,sans-serif;vertical-align:top;display:inline-block;width:328px;color:rgb(33,33,33);background-color:rgb(250,250,250)" dir="auto"><br></div></div><div dir="auto" style="font-family:sans-serif"><br></div><div dir="auto" style="font-family:sans-serif">Now, on our UI I see we no longer have distinction with the phone status bar as before. Everything is of primary color while before we correctly have it dark primary color.</div><div dir="auto" style="font-family:sans-serif"><br></div><div dir="auto" style="font-family:sans-serif">I didn't noticed you changed also format of the dive name into the detail page. Amazing. It has a small button [map it] too.</div><div dir="auto" style="font-family:sans-serif"><br></div><div dir="auto" style="font-family:sans-serif">Is there any way to take advantage of the full screen width during the dive edit?</div><div dir="auto" style="font-family:sans-serif"><br></div><div dir="auto" style="font-family:sans-serif">PS</div><div dir="auto" style="font-family:sans-serif">If it could be useful, next week I will play a bit with sidebar organization and settings adding other idea on github.</div></div></div>