[Dark theme] Update and add tokens

[dustinmalik]

WHY are these changes introduced?

Adds tokens needed to use the dark theme for file editor. All tokens are overriding currently existing light tokens.

The general challenge with dark mode given our current base color set is that there isn't much difference in the lower lighter colors where the higher darker colors have much more difference between the numbers.

color-bg-fill

From: colors.gray[1]
To: colors.gray[16]
Description: Need to change this for buttons

color-bg-fill-tertiary-hover

Description: Need to rename this token because color-bg-fill-hover is needed for buttons

color-border-focus

From: colors.blue[13]
To: colors.blue[12]
Description: All textfields on the focus state to brighten it up slightly

color-text-critical

From: colors.red[14]
To: colors.red[10]

color-bg-surface-magic

From: colors.purple[2]
To: colors.purple[16]

color-bg-surface-magic-hover

From: colors.purple[3]
To: colors.purple[15]

color-input-bg-surface

From: colors.gray[2]
To: colors.gray[16]
Description: Matching BG color of dark panels

color-input-bg-surface-hover

From: colors.gray[3]
To: colors.gray[15]

color-input-bg-surface-active

From: colors.gray[4]
To: colors.gray[15]
Description: Gray 14 would be too light.

color-input-border

From: colors.gray[12]
To: colors.gray[14]

color-input-border-active

From: colors.gray[16]
To: colors.gray[12]

color-border-magic-secondary

From: colors.purple[11]
To: colors.purple[12]

color-border-magic-secondary-hover

From: colors.purple[12]
To: colors.purple[11]

color-text-magic

From: colors.purple[14]
To: colors.purple[9]

color-icon-magic

From: colors.purple[12]
To: colors.purple[10]

color-icon-emphasis

From: colors.blue[13]
To: colors.blue[12]

color-bg-surface-tertiary

From: colors.gray[5]
To: colors.gray[15]

color-icon-secondary-active

From: colors.gray[14]
To: colors.gray[1]

color-icon-secondary-hover

From: colors.gray[13]
To: colors.gray[1]

color-bg-fill-disabled

From: colors.blackAlpha[5]
To: colors.gray[16]

color-text-disabled

From: colors.gray[11]
To: colors.gray[13]

color-text-brand-on-bg-fill-disabled

From: colors.gray[1]
To: colors.gray[13]

color-icon-disabled

From: colors.gray[10]
To: colors.gray[13]

color-bg-fill-transparent-secondary

From: colors.blackAlpha[6]
To: colors.whiteAlpha[13]

color-bg-fill-transparent-secondary-active

From: colors.blackAlpha[8]
To: colors.whiteAlpha[9]

color-backdrop-bg

From: colors.blackAlpha[14]
To: colors.blackAlpha[16]

color-bg-fill-hover

From: colors.gray[3]
To: colors.gray[14]

shadow-button

From: 0px -1px 0px 0px #b5b5b5 inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 0.5px 0px 1.5px #FFF inset
To: 0px

shadow-button-primary-inset

From: 0px 3px 0px 0px rgb(0, 0, 0) inset
To: 0px -1px 0px 1px rgba(26, 26, 26, 1) inset, 0px 0px 0px 1px rgba(26, 26, 26, 1) inset, 0px 0.5px 0px 1.5px rgba(0, 0, 0, 0.25) inset

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[alex-page]

@dustinmalik can you fix the CI problems or do you need help? Also before this ships I would love a snapit to be created and pulled into web to confirm there are no regressions and the changes do what is expected.

[dustinmalik]

@alex-page I believe @sophschneider and the topbar team would like to hold off until after editions. But ya I'm not familiar with the Polaris process for reviewing/getting a PR ready. If there are some docs I can give it a go when the time comes but would appreciate a pair with whoever has knowledge 🙏

[sophschneider]

hey @dustinmalik ! if there are no regressions to top bar im cool to ship now. We have contribute guidelines here.

When the time comes Alex or I can pair with you! to test it out now though, I think you will have to add a changeset, then comment /snapit here. It'll give you a snapshot token version that you can pnpm install in our internal library and/or web

[sophschneider]

/snapit

[dustinmalik]

@sophschneider There are a few token changes. Made some suggestions here. Looks like the 2 were only used in that 1 spot but wasn't 100% sure.

[bernardojoaogarcia]

@sophschneider I would prefer to hold off until after editions so we could have a better look at these new values being assigned to semantic tokens in the theme.