Change Details

====What are we doing? We would like to define all of the colors used in the app (on all reading themes) as well as identify where we might need new colors. We will also complete an accessibility audit of current designs with recommendations for improvements. Finally we will create guidelines for when colors should be used. ===Figma file https://www.figma.com/file/bgDCK2F4Km6nJvgKzDyl5J/iOS-Component-Audit?node-id=682%3A40112 ===Proposed designs {F35182848 width=500}

====What are we doing? We would like to define all of the colors used in the app (on all reading themes) as well as identify where we might need new colors. We will also complete an accessibility audit of current designs with recommendations for improvements. Finally we will create guidelines for when colors should be used. ===Figma file https://www.figma.com/file/bgDCK2F4Km6nJvgKzDyl5J/iOS-Component-Audit?node-id=682%3A40112 ===Proposed designs {F35182848 width=500} ===Color name changes | Hex | Color name |--- |--- |#000 | color-black | #101418 | color-gray800 | #202122 | color-gray700 | #27292D | color-gray675 | #2E3136 | color-grey650 | #54595D | color-gray600 | #72777D | color-gray500 |#A2A9B1 | color-gray400 | #C8CCD1 | color-gray300 | #EAECF0 | color-gray200 | #F8F9FA | color-gray100 | #fff | color-white | #2A4B8D | color-blue700 | #3366CC | color-blue600 | #6699FF | color-blue300 | #EAF3FF | color-blue100 | #B32424 | color-red700 | #DD3333 | color-red600 | #FEE7E6 | color-red100 | #00AF89 | color-green600 | #D5FDF4 | color-green100 | #FFCC33 | color-yellow600 | #E1DAD1 | color-beige400 | #F0E6D6 | color-beige300 | #F8F1E3 | color-beige100 | #646059 | color-taupe600 | #CBC8C1 | color-taupe200 | #6b4ba1 | color-purple | #FF9500 | color-orange | #EEF2FB | color-gray150 | #8E8E93 | color-gray450 ===Color changes by theme ====Default ====Sepia ====Dark - Base, Popover background abd Shadows change to #101418 / color-gray800 - Mid-background and Chrome change to #202122 / color-gray700 - Paper changes to #27292d / color-gray675 - Border, card button background, diff move paragraph background change to #2e3136 / color-grey650 - Disabled link text changes to #a2a9b1 / color-gray400 - Secondary action changes to #eaf3ff / color-blue-100 - Destructive, error, diff text delete, diff text strike through change to #dd3333 / color-red600 ====Black - Border and card button background change to #27292d / color-gray675 - Disabled link text changes to #a2a9b1 / color-gray400 - Secondary action changes to #eaf3ff / color-blue-100 - Destructive, error, diff text delete, diff text strike through change to #dd3333 / color-red600

====What are we doing? We would like to define all of the colors used in the app (on all reading themes) as well as identify where we might need new colors. We will also complete an accessibility audit of current designs with recommendations for improvements. Finally we will create guidelines for when colors should be used. ===Figma file https://www.figma.com/file/bgDCK2F4Km6nJvgKzDyl5J/iOS-Component-Audit?node-id=682%3A40112 ===Proposed designs {F35182848 width=500} ===Color name changes | Hex | Color name |--- |--- |#000 | color-black | #101418 | color-gray800 | #202122 | color-gray700 | #27292D | color-gray675 | #2E3136 | color-grey650 | #54595D | color-gray600 | #72777D | color-gray500 |#A2A9B1 | color-gray400 | #C8CCD1 | color-gray300 | #EAECF0 | color-gray200 | #F8F9FA | color-gray100 | #fff | color-white | #2A4B8D | color-blue700 | #3366CC | color-blue600 | #6699FF | color-blue300 | #EAF3FF | color-blue100 | #B32424 | color-red700 | #DD3333 | color-red600 | #FEE7E6 | color-red100 | #00AF89 | color-green600 | #D5FDF4 | color-green100 | #FFCC33 | color-yellow600 | #E1DAD1 | color-beige400 | #F0E6D6 | color-beige300 | #F8F1E3 | color-beige100 | #646059 | color-taupe600 | #CBC8C1 | color-taupe200 | #6b4ba1 | color-purple | #FF9500 | color-orange | #EEF2FB | color-gray150 | #8E8E93 | color-gray450 ===Color changes by theme ====Default ====Sepia ====Dark - Base, Popover background abd Shadows change to #101418 / color-gray800 - Mid-background and Chrome change to #202122 / color-gray700 - Paper changes to #27292d / color-gray675 - Border, card button background, diff move paragraph background change to #2e3136 / color-grey650 - Disabled link text changes to #a2a9b1 / color-gray400 - Secondary action changes to #eaf3ff / color-blue-100 - Destructive, error, diff text delete, diff text strike through change to #dd3333 / color-red600 ====Black - Border and card button background change to #27292d / color-gray675 - Disabled link text changes to #a2a9b1 / color-gray400 - Secondary action changes to #eaf3ff / color-blue-100 - Destructive, error, diff text delete, diff text strike through change to #dd3333 / color-red600