Mobile: Update the border colours

[enejb]

Description

This PR updates deprecates the following colour variables.

$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
$light-gray-400: #e8eaeb;
$light-dim: #0000001e; //rgba(0, 0, 0, 0.12); 

and replaces them with

$neutral-dim-light: rgba($black, 0.12);
and
$neutral-dim-dark: rgba($white, 0.15);

While at the same create a few different design tokens which make it easier to update the colours in the future.

How has this been tested?

This has been tested using the demo app on both Android and iOS. In light and dark mode.

Screenshots

In order to make the different changes easier to see. I made the
following changes to the _colors.native.scss file.

$border-color: red;
$border-color-dark: red;
$modal-border-color: orange;
$modal-border-color-dark: orange;
$drag-indicator: yellow;
$drag-indicator-dark: yellow;
$spacer-color: blue;
$spacer-color-dark: blue;

Highligheted colours

$border-color and $border-color-dark Column Block 

Media Text Block

Cover Block

Buttons Block

Contact Info Block

$modal-border-color and $modal-border-color-dark

Toolbar

Model colours

.

$drag-indicator and $drag-indicator-dark.

Notice the yellow drag handle.

$spacer-color and $spacer-color-dark.
Spacer Block

With the true colours.

iOS

Toolbar

Modal

iOS DarkMode

Modal

Toolbar

Android

Blocks

Toolbar

Modal

DarkMode

Blocks

Modal

Toolbar

Types of changes

Color Refactor.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: 0 B

Total Size: 1.2 MB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.52 kB	0 B
build/api-fetch/index.js	3.34 kB	0 B
build/autop/index.js	2.72 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	8.41 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	128 kB	0 B
build/block-editor/style-rtl.css	11.1 kB	0 B
build/block-editor/style.css	11.1 kB	0 B
build/block-library/editor-rtl.css	8.59 kB	0 B
build/block-library/editor.css	8.59 kB	0 B
build/block-library/index.js	135 kB	0 B
build/block-library/style-rtl.css	7.6 kB	0 B
build/block-library/style.css	7.59 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	741 B	0 B
build/block-serialization-default-parser/index.js	1.77 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.5 kB	0 B
build/components/index.js	202 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	9.42 kB	0 B
build/core-data/index.js	12 kB	0 B
build/data-controls/index.js	1.27 kB	0 B
build/data/index.js	8.43 kB	0 B
build/date/index.js	31.9 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.42 kB	0 B
build/edit-navigation/index.js	10.4 kB	0 B
build/edit-navigation/style-rtl.css	868 B	0 B
build/edit-navigation/style.css	871 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.24 kB	0 B
build/edit-post/style.css	6.22 kB	0 B
build/edit-site/index.js	19.6 kB	0 B
build/edit-site/style-rtl.css	3.3 kB	0 B
build/edit-site/style.css	3.3 kB	0 B
build/edit-widgets/index.js	17.6 kB	0 B
build/edit-widgets/style-rtl.css	2.79 kB	0 B
build/edit-widgets/style.css	2.79 kB	0 B
build/editor/editor-styles-rtl.css	492 B	0 B
build/editor/editor-styles.css	493 B	0 B
build/editor/index.js	45.3 kB	0 B
build/editor/style-rtl.css	3.8 kB	0 B
build/editor/style.css	3.8 kB	0 B
build/element/index.js	4.45 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.49 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	1.74 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.54 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.39 kB	0 B
build/keycodes/index.js	1.85 kB	0 B
build/list-reusable-blocks/index.js	3.02 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.12 kB	0 B
build/notices/index.js	1.69 kB	0 B
build/nux/index.js	3.27 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.44 kB	0 B
build/primitives/index.js	1.34 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13.7 kB	0 B
build/server-side-render/index.js	2.6 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.24 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.74 kB	0 B
build/warning/index.js	1.13 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[enejb]

Just pushed a change that updates the dark mode to

And light more do

[guarani]

This PR focuses on border colors, but I just want clarify one aspect of this, dashed border colors.

Looking at the changes regarding dashed border colors, I see:

Before	After
$gray (#87a6bc) light-gray-500 (#e2e4e7)	$border-dashed-color (rgba($black, 0.25))
$gray-70 (#3c434a) rgba($color: $light-gray-500, $alpha: 0.3)	$border-dashed-color-dark (rgba($white, 0.27))

What I don't understand is where these conversions are coming from, could you please clarify this?

Also, I'm not able to test this unfortunately, the branch needs updating and I get quite a few linter errors when running git merge --continue after manually resolving the conflicts. Let me know if there's anything I can do to help.

[iamthomasbishop]

What I don't understand is where these conversions are coming from, could you please clarify this?

@guarani Good question! They're discrete values, chosen specifically so that the optical weight of the dashed border is roughly the same as the standard border when side-by-side.

[guarani]

Un-assigning myself here as I'm no longer working on the editor part of the app.

[enejb]

I am closing this now since I think we should come up with a different approach to unifying the colours in the editor. This PR was trying to do too much.