refactor: [M3-9031] - Replace one-off hardcoded color values with color tokens pt5

[hasyed-akamai]

Description 📝

• Replace one-off hardcoded color values with color tokens - Part 5
• colorTokens are global tokens, and they are theme-agnostic.

Note

The new colors are based on design tokens and have been selected to closely match the existing colors.

Changes 🔄

• Replaced #aaa with theme.tokens.color.Neutrals[50] #a3a3ab
• Replaced #243142 with ttheme.tokens.color.Brand[100] #00314d
• Replaced gray with theme.tokens.color.Neutrals[60] #83838c
• Replaced #6e6e6e with theme.tokens.color.Neutrals[70] #696970
• Replaced #979797 with theme.tokens.color.Neutrals[60] #83838c
• Replaced #3683dc with theme.tokens.color.Ultramarine[80] #3a5ccc
• Replaced blue with theme.graphs.blue
• Replaced darkGreen with theme.graphs.darkGreen
• Replaced lightGreen with theme.graphs.lightGreen
• Replaced purple with theme.graphs.purple
• Replaced yellow with theme.graphs.yellow
• Replaced red with theme.graphs.red

Target release date 🗓️

N/A

Preview 📷

• Slight change in the colors.
• The new colors are based on design tokens and have been selected to closely match the existing colors.

How to test 🧪

• Ensure everything builds properly
• Use colorpicker to differentiate between the two colors

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[linode-gh-bot]

Cloud Manager UI test results

🔺 24 failing tests on test run #2 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
24 Failing	449 Passing	2 Skipped	80m 27s

Details

Failing Tests
	Spec	Test
❌	clone-linode.spec.ts	clone linode » can clone a Linode from Linode details page
❌	rescue-linode.spec.ts	Rescue Linodes » Can reboot a Linode into rescue mode
❌	update-firewall.spec.ts	update firewall » updates a firewall's linodes and rules
❌	update-firewall.spec.ts	update firewall » updates a firewall's status
❌	update-firewall.spec.ts	update firewall » updates a firewall's label
❌	rebuild-linode.spec.ts	rebuild linode » rebuilds a linode from Image
❌	rebuild-linode.spec.ts	rebuild linode » rebuilds a linode from Community StackScript
❌	smoke-delete-linode.spec.ts	delete linode » deletes linode from linode details page
❌	smoke-delete-linode.spec.ts	delete linode » deletes linode from setting tab in linode details page
❌	smoke-delete-linode.spec.ts	delete linode » deletes linode from linode landing page
❌	smoke-delete-linode.spec.ts	delete linode » deleting multiple linodes with action menu
❌	create-stackscripts.spec.ts	Create stackscripts » creates a StackScript with Any/All target image
❌	create-firewall.spec.ts	create firewall » creates a firewall assigned to a linode
❌	create-linode-region-select.spec.ts	Linode Create Region Select » region select
❌	create-volume.spec.ts	volume create flow » creates an attached volume
❌	create-volume.spec.ts	volume create flow » displays a warning notice on Volume Create page re: rebooting for client library updates under the appropriate conditions
❌	create-volume.spec.ts	volume create flow » displays a warning notice re: rebooting for client library updates under the appropriate conditions in Create/Attach Volume drawer
❌	create-volume.spec.ts	volume create flow » creates a volume from an existing Linode
❌	migrate-linode-with-firewall.spec.ts	Migrate Linode With Firewall » migrates linode with firewall - real data
❌	service-transfer.spec.ts	Account service transfers » can initiate and cancel a service transfer
❌	backup-linode.spec.ts	linode backups » can enable backups
❌	backup-linode.spec.ts	linode backups » can capture a manual snapshot
❌	attach-volume.spec.ts	volume attach and detach flows » attaches a volume to a Linode
❌	search-images.spec.ts	Search Images » creates two images and make sure they show up in the table and are searchable

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts,cypress/e2e/core/linodes/rescue-linode.spec.ts,cypress/e2e/core/firewalls/update-firewall.spec.ts,cypress/e2e/core/firewalls/update-firewall.spec.ts,cypress/e2e/core/firewalls/update-firewall.spec.ts,cypress/e2e/core/linodes/rebuild-linode.spec.ts,cypress/e2e/core/linodes/rebuild-linode.spec.ts,cypress/e2e/core/linodes/smoke-delete-linode.spec.ts,cypress/e2e/core/linodes/smoke-delete-linode.spec.ts,cypress/e2e/core/linodes/smoke-delete-linode.spec.ts,cypress/e2e/core/linodes/smoke-delete-linode.spec.ts,cypress/e2e/core/stackscripts/create-stackscripts.spec.ts,cypress/e2e/core/firewalls/create-firewall.spec.ts,cypress/e2e/core/linodes/create-linode-region-select.spec.ts,cypress/e2e/core/volumes/create-volume.spec.ts,cypress/e2e/core/volumes/create-volume.spec.ts,cypress/e2e/core/volumes/create-volume.spec.ts,cypress/e2e/core/volumes/create-volume.spec.ts,cypress/e2e/core/firewalls/migrate-linode-with-firewall.spec.ts,cypress/e2e/core/account/service-transfer.spec.ts,cypress/e2e/core/linodes/backup-linode.spec.ts,cypress/e2e/core/linodes/backup-linode.spec.ts,cypress/e2e/core/volumes/attach-volume.spec.ts,cypress/e2e/core/images/search-images.spec.ts"

[dwiley-akamai]

We don't have a suitable color token that can be used in place of #000000?

[hasyed-akamai]

@dwiley-akamai, we have a global token for black color: theme.tokens.color.Neutrals.Black with the value #232326. This is slightly different from #000000. If this is what we are expecting, we can go ahead and make the replacement.

[hasyed-akamai]

@jaalah , could you please provide your thoughts on the comment above ? 😊