Add high contrast light theme kind by aeschli · Pull Request #144759 · microsoft/vscode

aeschli · 2022-03-09T13:58:05Z

Adds ColorScheme.HIGH_CONTRAST_LIGHT (value hcLight), renamed ColorScheme.HIGH_CONTRAST (old value hc), to ColorScheme.HIGH_CONTRAST_DARK (new value hcDark)
Adds ColorScheme.isHighContrast to test if the current theme is a high contrast theme
color registrations default colors now take hcDark and hcLight.
- hcLight is currently optional and uses either hcDark if it is null or color id else light if it is a color value
- @daviddossett Fill out the defaults for hcLight in all the registrations (let me know if I can help)
@daviddossett Add css rules for hc-light
- the css class that is active for theme of type hcLight is hc-light (For hcDark it is hc-black, as before
@daviddossett provide letterpress-hcLight.svg (currently just a copy of letterpress-hcDark.svg)
@aeschli new setting preferredHighContrastLightColorTheme
@aeschli color contribution point: new optional property defaults.highContrastLight
- defaults to value of light
- highContrast is not renamed to not break any existing users

    "colors": [
      {
        "id": "gitDecoration.addedResourceForeground",
        "description": "%colors.added%",
        "defaults": {
          "light": "#587c0c",
          "dark": "#81b88b",
          "highContrast": "#1b5225"
          "highContrastLight": "#587c0c"
        }
      }
    ]

@aeschli walkthroughs contribution point: new optional property steps.media.image.hcLight
@aeschli file icon themes use highcontrast icons for both hc light and dark (to be reconsidered) (see here)
@aeschli breaking web.api changes: ColorScheme.HIGH_CONTRAST_LIGHT (value hcLight), renamed ColorScheme.HIGH_CONTRAST (old value hc), to ColorScheme.HIGH_CONTRAST_DARK (new value hcDark)
(@bpasero speak up if we must not break the web API)
@aeschli added standalone hc light theme: https://github.com/microsoft/vscode/blob/aeschli/hcLightThemeKind/src/vs/editor/standalone/common/themes.ts#L214
@daviddossett Review and customize the standalone hc light theme (currently a copy of the light theme)
@daviddossett Add new asset for Get Started walkthrough theme selection

bpasero · 2022-03-09T16:29:29Z

@aeschli as for breaking web API, I suggest to give John Keech a ping either in an issue or via chat, in the end Codespaces is the only external consumer of our API so far. Not sure they would actually leverage any theming related embedder API we have, other than setting the default theme.

bpasero · 2022-03-09T16:33:27Z

In places like these:

export const ACTIVITY_BAR_BORDER = registerColor('activityBar.border', {
	dark: null,
	light: null,
	hcDark: contrastBorder
}, localize('activityBarBorder', "Activity bar border color separating to the side bar. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));

Shouldn't we also set a default for hcLight or is the idea that the theme itself defines this? Here for example, we do not set an explicit border around the activity bar unless a HC theme is picked and I wonder if this applies equally to light and dark HC themes.

aeschli · 2022-03-09T16:43:42Z

Shouldn't we also set a default for hcLight or is the idea that the theme itself defines this? Here for example, we do not set an explicit border around the activity bar unless a HC theme is picked and I wonder if this applies equally to light and dark HC themes.

Yes, this is the task Fill out the defaults for hcLight in all the registrations (let me know if I can help)

daviddossett · 2022-03-10T17:28:53Z

Awesome, thanks so much for getting this going! Working on my items today/early next week.

daviddossett · 2022-03-11T00:59:50Z

Seeing this warning after adding values for highContrastLight. Any ideas what I'm doing wrong?

color contribution gitDecoration.addedResourceForeground does not provide color 'defaults.highContrastLight'. Using color for `light` instead (#587c0c).

vscode/extensions/git/package.json

Lines 2278 to 2288 in 502276a

    
           "colors": [ 
        
             { 
        
               "id": "gitDecoration.addedResourceForeground", 
        
               "description": "%colors.added%", 
        
               "defaults": { 
        
                 "light": "#587c0c", 
        
                 "dark": "#81b88b", 
        
                 "highContrast": "#1b5225", 
        
                 "highContrastLight": "#374e06" 
        
               } 
        
             },

aeschli · 2022-03-11T08:11:08Z

Seeing this warning after adding values for highContrastLight. Any ideas what I'm doing wrong?
color contribution gitDecoration.addedResourceForeground does not provide color 'defaults.highContrastLight'. Using color for `light` instead (#587c0c).

Pushed a fix

daviddossett · 2022-03-14T18:05:36Z

Finished my tasks. Let me know if anything looks off 🙏

I'll update the letterpress assets in distro as well once this is in.

aeschli · 2022-03-15T08:02:52Z

src/vs/base/browser/ui/findinput/findInput.css

@@ -36,10 +36,12 @@
 	animation: monaco-findInput-highlight-1 100ms linear 0s;
 }
 .hc-black .monaco-findInput.highlight-0 .controls,


Looks like there are still hard coded colors in findInput.css that we should externalize.
hcLight uses the same color as hcDark, is that intended?

Fixed so that hc-light uses the light colors/animations. Thansk for catching that.

As for the hard coded bits, are you referencing the disabled background rules and the animation backgrounds? I'd need to go decide on specific colors for each theme if all of them have been using the same values all this time. Might make sense to do this on a separate issue since it goes beyond HC.

aeschli · 2022-03-15T08:04:15Z

src/vs/base/parts/quickinput/browser/quickInputUtils.ts

 		iconClass = iconClassGenerator.nextId();
 		dom.createCSSRule(`.${iconClass}`, `background-image: ${dom.asCSSUrl(iconPath.light || iconPath.dark)}`);
-		dom.createCSSRule(`.vs-dark .${iconClass}, .hc-black .${iconClass}`, `background-image: ${dom.asCSSUrl(iconPath.dark)}`);
+		dom.createCSSRule(`.vs-dark .${iconClass}, .hc-black .${iconClass}, .hc-light .${iconClass}`, `background-image: ${dom.asCSSUrl(iconPath.dark)}`);


Shouldn't hc-light use iconPath.light(if available)

Whoops, fixed.

aeschli · 2022-03-15T12:59:01Z

Thanks a lot @daviddossett !
There are still some color registrations without hcLight. To see these, just remove the type ColorDefaultsDeprecated in https://github.com/microsoft/vscode/blob/aeschli/hcLightThemeKind/src/vs/platform/theme/common/colorRegistry.ts#L63

daviddossett · 2022-03-15T17:59:56Z

Added mising registrations. Thanks for the tip on removing the type 👍

aeschli · 2022-03-16T15:40:51Z

I made a search to hc-black to see if there's always a hc-light rule and found following 'suspicious' places:
Missing hc-light:

https://github.com/microsoft/vscode/blob/aeschli/hcLightThemeKind/src/vs/base/browser/ui/selectBox/selectBoxCustom.css#L12

hc-light uses dark color:

aeschli · 2022-03-16T15:41:15Z

Merging the PR so we get more testing.

daviddossett · 2022-03-16T15:43:33Z

I made a search to hc-black to see if there's always a hc-light rule and found following 'suspicious' places: Missing hc-light:

https://github.com/microsoft/vscode/blob/aeschli/hcLightThemeKind/src/vs/base/browser/ui/selectBox/selectBoxCustom.css#L12

hc-light uses dark color:

https://github.com/microsoft/vscode/blob/aeschli/hcLightThemeKind/src/vs/editor/contrib/colorPicker/browser/colorPicker.css#L27

https://github.com/microsoft/vscode/blob/aeschli/hcLightThemeKind/src/vs/editor/contrib/dnd/browser/dnd.css#L15

Thanks—will take a look and fix as needed

daviddossett · 2022-03-17T18:32:24Z

FYI I updated the letterpress assets in distro to match the new naming scheme e.g. letterpress-hcLight.svg. I noticed that Insiders was falling back to the OSS letterpress on all but dark theme types.

Fixed missing or wrong class additions in 74157b3

aeschli added 2 commits March 8, 2022 17:05

Add hc light theme kind

9245f60

preferredHighContrastLightTheme setting and more changes

1c4ffb2

vscode-triage-bot assigned aeschli Mar 9, 2022

fix tests

069f208

aeschli assigned daviddossett Mar 9, 2022

aeschli requested a review from daviddossett March 9, 2022 14:22

more fixes

cdcaf2c

set hcLight for simple cases (null, color reference)

5bd0a86

aeschli added this to the March 2022 milestone Mar 10, 2022

daviddossett added 15 commits March 10, 2022 11:59

Update colorRegistry

100b38c

Update more color registries

e5a0b19

Update terminal color registry

06ac63d

Update peek view color registrations

42e7f2d

Update extension icon registrations

bf123cb

Update welcome page registrations

8348698

Update settings editor registrations

79bbc88

Update testing color registrations

4aefe50

Update git color contributions

f1bb932

Update debug color registrations

458a294

Update letterpress SVGs

71961b3

Update standalone theme

9d5ed4f

Minor theme fixes

53c2cb9

Minor theme fixes

22de4ab

Revert foreground change

502276a

fix color contribution point warning

ba20a7f

daviddossett added 4 commits March 14, 2022 08:57

Fix settings header color

7fea3c6

Add .hc-light rules

0487dab

Fix word highlighting

cebb49b

Update getting started artwork and labels

037bc4f

daviddossett mentioned this pull request Mar 14, 2022

Get started theme selection thumbnails have resolution/border issues #145067

Closed

more hcLight values

6763f15

aeschli commented Mar 15, 2022

View reviewed changes

aeschli and others added 5 commits March 15, 2022 14:20

Merge branch 'main' into aeschli/hcLightThemeKind

596181c

Fix icon path

c3ded74

Add missing registrations

b32425d

Fix find input rules

34d68a7

Fix find match contrast

ea2e112

remove ColorDefaultsDeprecated

2233bcb

aeschli merged commit 02e8bd1 into main Mar 16, 2022

aeschli deleted the aeschli/hcLightThemeKind branch March 16, 2022 15:41

This was referenced Mar 17, 2022

Git colors in Light HC on web appear off in vscode.dev #144607

Closed

Light High Contrast theme extension view: no contrast between active/inactive extensions #144437

Closed

github-actions bot locked and limited conversation to collaborators Apr 30, 2022

Conversation

aeschli commented Mar 9, 2022 • edited by daviddossett Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bpasero commented Mar 9, 2022

Uh oh!

bpasero commented Mar 9, 2022

Uh oh!

aeschli commented Mar 9, 2022

Uh oh!

daviddossett commented Mar 10, 2022

Uh oh!

daviddossett commented Mar 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aeschli commented Mar 11, 2022

Uh oh!

daviddossett commented Mar 14, 2022

Uh oh!

aeschli Mar 15, 2022

Choose a reason for hiding this comment

Uh oh!

daviddossett Mar 15, 2022

Choose a reason for hiding this comment

Uh oh!

aeschli Mar 15, 2022

Choose a reason for hiding this comment

Uh oh!

daviddossett Mar 15, 2022

Choose a reason for hiding this comment

Uh oh!

aeschli commented Mar 15, 2022

Uh oh!

daviddossett commented Mar 15, 2022

Uh oh!

aeschli commented Mar 16, 2022

Uh oh!

aeschli commented Mar 16, 2022

Uh oh!

daviddossett commented Mar 16, 2022

Uh oh!

daviddossett commented Mar 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

aeschli commented Mar 9, 2022 •

edited by daviddossett

Loading

daviddossett commented Mar 11, 2022 •

edited

Loading

daviddossett commented Mar 17, 2022 •

edited

Loading