diff --git a/source/img/Breeze_Color_Palette.png b/source/img/Breeze_Color_Palette.png new file mode 100644 index 0000000..baf2952 Binary files /dev/null and b/source/img/Breeze_Color_Palette.png differ diff --git a/source/style/color/dark.rst b/source/style/color/dark.rst new file mode 100644 index 0000000..b972c9b --- /dev/null +++ b/source/style/color/dark.rst @@ -0,0 +1,297 @@ +Breeze Dark +=========== + +See :doc:`here ` for more information about usage of colors. + + ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| Color Set | Color Role | Color | HEX | RGB | NAME | ++==============+========================+===============================================================================+=========+==============+===================+ +| button | BackgroundAlternate | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| selection | BackgroundAlternate | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #fdbc4b | 253,188,75 | Icon Yellow | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| tooltip | BackgroundAlternate | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| view | BackgroundAlternate | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #232629 | 35,38,41 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| window | BackgroundAlternate | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| complementary| BackgroundAlternate | .. raw:: html | #3b4045 | 59,64,69 | Burnt Charcoal | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1e92ff | 30,146,255 | Deco Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #afb0b3 | 175,176,179 | Lazy Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #ed1515 | 237,21,21 | Danger Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #c9ce3b | 201,206,59 | Sunbeam Yellow | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #11d116 | 17,209,22 | Verdant Green | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ diff --git a/source/style/color/default.rst b/source/style/color/default.rst new file mode 100644 index 0000000..0da235c --- /dev/null +++ b/source/style/color/default.rst @@ -0,0 +1,303 @@ +Breeze +====== + +.. figure:: /img/Breeze_Color_Palette.png + :alt: Breeze Color Palette + + Breeze Color Palette + + +See :doc:`here ` for more information about usage of colors. + + ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| Color Set | Color Role | Color | HEX | RGB | NAME | ++==============+========================+===============================================================================+=========+==============+===================+ +| button | BackgroundAlternate | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #93cee9 | 147,206,233 | Hover Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #232627 | 35,38,39 | Shade Black | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| selection | BackgroundAlternate | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #93cee9 | 147,206,233 | Hover Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #fdbc4b | 253,188,75 | Icon Yellow | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| tooltip | BackgroundAlternate | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #232627 | 35,38,39 | Shade Black | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #93cee9 | 147,206,233 | Hover Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| view | BackgroundAlternate | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #93cee9 | 147,206,233 | Hover Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #232627 | 35,38,39 | Shade Black | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| window | BackgroundAlternate | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #93cee9 | 147,206,233 | Hover Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #232627 | 35,38,39 | Shade Black | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| complementary| BackgroundAlternate | .. raw:: html | #3b4045 | 59,64,69 | Burnt Charcoal | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1e92ff | 30,146,255 | Deco Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #93cee9 | 147,206,233 | Hover Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #afb0b3 | 175,176,179 | Lazy Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #e74c3c | 231,76,60 | Pimpinella | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #fdbc4b | 253,188,75 | Icon Yellow | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #2ecc71 | 46,204,113 | Icon Green | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ diff --git a/source/style/color/high.rst b/source/style/color/high.rst new file mode 100644 index 0000000..cf18f63 --- /dev/null +++ b/source/style/color/high.rst @@ -0,0 +1,297 @@ +Breeze High Contrast +==================== + +See :doc:`here ` for more information about usage of colors. + + ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| Color Set | Color Role | Color | HEX | RGB | NAME | ++==============+========================+===============================================================================+=========+==============+===================+ +| button | BackgroundAlternate | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| selection | BackgroundAlternate | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #34495e | 52,73,94 | Night Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #fdbc4b | 253,188,75 | Icon Yellow | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| tooltip | BackgroundAlternate | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| view | BackgroundAlternate | .. raw:: html | #292c30 | 41,44,48 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #232629 | 35,38,41 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| window | BackgroundAlternate | .. raw:: html | #bdc3c7 | 189,195,199 | Alternate Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| complementary| BackgroundAlternate | .. raw:: html | #292c30 | 41,44,48 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #232629 | 35,38,41 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1d99f3 | 29,153,243 | Icon Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #4d4d4d | 77,77,77 | Icon Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #2980b9 | 41,128,185 | Abyss Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #da4453 | 218,68,83 | Icon Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #27ae60 | 39,174,96 | Noble Fir | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #7f8c8d | 127,140,141 | Coastal Fog | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ diff --git a/source/style/color/index.rst b/source/style/color/index.rst new file mode 100644 index 0000000..c4547f2 --- /dev/null +++ b/source/style/color/index.rst @@ -0,0 +1,81 @@ +Color +===== + +.. toctree:: + :caption: Contents: + :titlesonly: + :hidden: + + default + dark + light + high + + +Purpose +------- + +Color is a distinguishing quality of human perception. Color can be used +to communicate and draw attention efficiently. Color can assign +significance to an object. However, color is a historical and cultural +phenomenon and is subject to continuous aesthetical changes. It should +also be noted that a large part of the population cannot perceive color +in the same way that most people will. + +A consistent color set helps create a familiar visual language +throughout the user interface. + +Guidelines +---------- + + +- While the system color theme can be selected by the user, the + :doc:`Breeze color palette ` is used for the reference + visual design of KDE Applications and Workspaces, and make up the + default system color theme. + + - Primary colors are used throughout the main interface of the + applications and workspaces. **Plasma Blue** is used as the + primary highlight color. + - Secondary colors are used sparingly as accents throughout the + visual design. + - Whenever transparency is used (e.g. shadows) consider using the + opacities listed. + +- Avoid using color as a primary method of communication. Color is best + used as a secondary method to reinforce meaning visually. You should + not only rely on color to convey meaning but also typography, layout, + sizes, etc. +- Ensure sufficient contrast between foreground and background colors. +- Keep in mind accessibility for users with color vision deficiency + (~5% population). Use one of the many available online color + blindness simulators to ensure colors intended to be distinguishable + remain distinguishable for color-blind users. + +Implementation +-------------- + +- When implementing colors in your application, select the appropriate + theme color or system color from the palette provided by the Qt or + KDE Platform/Frameworks library. You can use the `CheckColorRoles`_ + theme to detect bugs regarding the use of system colors in your + application. +- `KColorScheme`_ provides methods to pick the colors from the system + color scheme to avoid hardcoding colors where possible. +- For QML use: + + - in applications use `Kirigami.Theme`_ to pick theme colors + - in Plasmoids use `PlasmaCore.Theme`_ to pick theme colors + +- Color Mapping - The Breeze color palettes maps to the KColorScheme + color roles as shown as follow: + + - :doc:`Breeze ` + - :doc:`Breeze Dark ` + - :doc:`Breeze Light ` + - :doc:`Breeze High Contrast ` + +.. _CheckColorRoles: http://kde-look.org/content/show.php/CheckColorRoles?content=90034 +.. _KColorScheme: http://api.kde.org/frameworks-api/frameworks5-apidocs/kconfigwidgets/html/classKColorScheme.html +.. _Kirigami.Theme: https://api.kde.org/frameworks/kirigami/html/classKirigami_1_1PlatformTheme.html +.. _PlasmaCore.Theme: https://api.kde.org/frameworks/plasma-framework/html/classPlasma_1_1QuickTheme.html diff --git a/source/style/color/light.rst b/source/style/color/light.rst new file mode 100644 index 0000000..d1583bf --- /dev/null +++ b/source/style/color/light.rst @@ -0,0 +1,296 @@ +Breeze Light +============ + +See :doc:`here ` for more information about usage of colors. + ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| Color Set | Color Role | Color | HEX | RGB | NAME | ++==============+========================+===============================================================================+=========+==============+===================+ +| button | BackgroundAlternate | .. raw:: html | #e0dfde | 224,223,222 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #8ecbe9 | 142,203,233 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #ff80e0 | 255,128,224 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #888786 | 136,135,134 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #0057ae | 0,87,174 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #bf0303 | 191,3,3 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #b08000 | 176,128,0 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #006e28 | 0,110,40 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #452886 | 69,40,134 | | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| selection | BackgroundAlternate | .. raw:: html | #3e8acc | 62,138,204 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #8ecbe9 | 142,203,233 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #ff80e0 | 255,128,224 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #8ecbe9 | 142,203,233 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #00316e | 0,49,110 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #9c0e0e | 156,14,14 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #ffdd00 | 255,221,0 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #80ff80 | 128,255,128 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #452886 | 69,40,134 | | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| tooltip | BackgroundAlternate | .. raw:: html | #c4e0ff | 196,224,255 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #8ecbe9 | 142,203,233 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #ff80e0 | 255,128,224 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #607080 | 96,112,128 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #0057ae | 0,87,174 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #bf0303 | 191,3,3 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #b08000 | 176,128,0 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #006e28 | 0,110,40 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #452886 | 69,40,134 | | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| view | BackgroundAlternate | .. raw:: html | #f8f7f6 | 248,247,246 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #fcfcfc | 252,252,252 | Paper White | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #8ecbe9 | 142,203,233 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #ff80e0 | 255,128,224 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #888786 | 136,135,134 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #0057ae | 0,87,174 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #bf0303 | 191,3,3 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #b08000 | 176,128,0 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #006e28 | 0,110,40 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #452886 | 69,40,134 | | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| window | BackgroundAlternate | .. raw:: html | #dad9d8 | 218,217,216 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #3daee9 | 61,174,233 | Plasma Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #8ecbe9 | 142,203,233 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #ff80e0 | 255,128,224 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #888786 | 136,135,134 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #0057ae | 0,87,174 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #bf0303 | 191,3,3 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #b08000 | 176,128,0 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #006e28 | 0,110,40 | | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #452886 | 69,40,134 | | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| complementary| BackgroundAlternate | .. raw:: html | #3b4045 | 59,64,69 | Burnt Charcoal | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | BackgroundNormal | .. raw:: html | #31363b | 49,54,59 | Charcoal Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationFocus | .. raw:: html | #1e92ff | 30,146,255 | Deco Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | DecorationHover | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundActive | .. raw:: html | #f67400 | 246,116,0 | Beware Orange | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundInactive | .. raw:: html | #afb0b3 | 175,176,179 | Lazy Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundLink | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNegative | .. raw:: html | #ed1515 | 237,21,21 | Danger Red | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNeutral | .. raw:: html | #c9ce3b | 201,206,59 | Sunbeam Yellow | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundNormal | .. raw:: html | #eff0f1 | 239,240,241 | Cardboard Grey | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundPositive | .. raw:: html | #11d116 | 17,209,22 | Verdant Green | +| | | | | | | +| | |
 
| | | | +| +------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ +| | ForegroundVisited | .. raw:: html | #3daee6 | 61,174,230 | Hyper Blue | +| | | | | | | +| | |
 
| | | | ++--------------+------------------------+-------------------------------------------------------------------------------+---------+--------------+-------------------+ diff --git a/source/style/index.rst b/source/style/index.rst index 300ac2a..73d1d2f 100644 --- a/source/style/index.rst +++ b/source/style/index.rst @@ -1,23 +1,25 @@ Style ===== .. toctree:: :caption: Contents: :titlesonly: :hidden: + color/index elevation icon imagery theme typography writing/index The Style layer is concerned with emotion, tone, and visual vocabulary. Because it is the most visible and concrete aspect of an interface, it typically accounts for people’s first impression of a product. Style is influenced by the use of color,the design of icons throughout the interface and the use of typography. Elements of style support Organization, Viewing and Navigation, Editing and Manipulation and User Assistance. +* :doc:`color/index` * :doc:`elevation` * :doc:`icon` * :doc:`imagery` * :doc:`theme` * :doc:`typography` * :doc:`writing/index`