Add High Contrast image assets (#6915)

This commit adds image assets for High Contrast mode

Tagging this issue so it contains a nice list of all the recent HC
fixes: #5360

I made several changes to DHowett's script and added it to the repo:
* Add support for generating high contrast icons
* Add the ability to easily edit the "intermediate" (previously "zbase")
  files for manual hinting
* Appease the spellchecker

I created new SVGs for HC mode. There's one SVG for both Black and White
modes -- I just invert the colors. Then I manually hinted the generated
bitmaps for the production icons. I didn't bother hinting the Dev/Pre
ones, so the text does get unreadable at small sizes.

View the original images in #6915.

Co-authored-by: Jeffrey Tippet <jtippet@microsoft.com>
Co-authored-by: Dustin L. Howett <duhowett@microsoft.com>
Closes #6822

.github/actions/spell-check/dictionary/microsoft.txt

@@ -1,4 +1,5 @@
 ACLs
+altform
 backplating
 DACL
 DACLs
@@ -9,7 +10,9 @@ microsoftonline
 osgvsowi
 powerrename
 powershell
+pscustomobject
 SACLs
 tdbuildteamid
 vcruntime
 visualstudio
+wslpath

.github/actions/spell-check/expect/expect.txt

@@ -1083,6 +1083,8 @@ INITCOMMONCONTROLSEX
 INITDIALOG
 initguid
 INITMENU
+imagemagick
+inkscape
 inl
 INLINEPREFIX
 Inlines
@@ -2266,6 +2268,7 @@ targetentrypoint
 TARGETLIBS
 TARGETNAME
 targetnametoken
+targetsize
 targetver
 taskbar
 tbar

res/terminal/Generate-TerminalAssets.ps1

@@ -0,0 +1,181 @@
+#
+# Generate-TerminalAssets.ps1
+#
+# Typical usage:
+#   .\Generate-TerminalAssets.ps1 -Path .\Terminal.svg -HighContrastPath .\Terminal_HC.svg -Destination .\images
+#   .\Generate-TerminalAssets.ps1 -Path .\Terminal_Pre.svg -HighContrastPath .\Terminal_Pre_HC.svg -Destination .\images-Pre
+#   .\Generate-TerminalAssets.ps1 -Path .\Terminal_Dev.svg -HighContrastPath .\Terminal_Dev_HC.svg -Destination .\images-Dev
+#
+# Some icons benefit from manual hints.  The most efficient way to do that is to run the script twice:
+#
+#   1. Run .\Generate-TerminalAssets.ps1 ...args... -Destination .\images -KeepIntermediates
+#   2. Manually hint the intermediate images under .\images\_intermediate*.png
+#   3. Run .\Generate-TerminalAssets.ps1 ...args... -Destination .\images -UseExistingIntermediates
+#
+# Hinting the intermediate files minimizes the number of times you'll have to
+# hint the same image.  You may want to hint just the _intermediate.*.png and
+# _intermediate.black.*.png files, and delete _intermediate.white.*.png.  The
+# script will then automatically derive _intermediate.white.*.png from
+# _intermediate.black.*.png.
+#
+
+Param(
+  [Parameter(Mandatory=$true,ValueFromPipeline=$true)]
+  [string]$Path,
+  [string]$Destination,
+  [int[]]$Altforms = (16, 20, 24, 30, 32, 36, 40, 48, 60, 64, 72, 80, 96, 256),
+  [switch]$Unplated = $true,
+  [float[]]$Scales = (1.0, 1.25, 1.5, 2.0, 4.0),
+  [string]$HighContrastPath = "",
+  [switch]$UseExistingIntermediates = $false,
+  [switch]$KeepIntermediates = $false
+)
+
+$assetTypes = @(
+  [pscustomobject]@{Name="LargeTile"; W=310; H=310; IconSize=96}
+  [pscustomobject]@{Name="LockScreenLogo"; W=24; H=24; IconSize=24}
+  [pscustomobject]@{Name="SmallTile"; W=71; H=71; IconSize=36}
+  [pscustomobject]@{Name="SplashScreen"; W=620; H=300; IconSize=96}
+  [pscustomobject]@{Name="Square44x44Logo"; W=44; H=44; IconSize=32}
+  [pscustomobject]@{Name="Square150x150Logo"; W=150; H=150; IconSize=48}
+  [pscustomobject]@{Name="StoreLogo"; W=50; H=50; IconSize=36}
+  [pscustomobject]@{Name="Wide310x150Logo"; W=310; H=150; IconSize=48}
+)
+
+function CeilToEven ([int]$i) { if ($i % 2 -eq 0) { [int]($i) } else { [int]($i + 1) } }
+
+$inflatedAssetSizes = $assetTypes | ForEach-Object {
+  $as = $_;
+  $scales | ForEach-Object {
+    [pscustomobject]@{
+      Name = $as.Name + ".scale-$($_*100)"
+      W = [math]::Round($as.W * $_, [System.MidpointRounding]::ToPositiveInfinity)
+      H = [math]::Round($as.H * $_, [System.MidpointRounding]::ToPositiveInfinity)
+      IconSize = CeilToEven ($as.IconSize * $_)
+    }
+  }
+}
+
+$allAssetSizes = $inflatedAssetSizes + ($Altforms | ForEach-Object {
+    [pscustomobject]@{
+      Name = "Square44x44Logo.targetsize-${_}"
+      W = [int]$_
+      H = [int]$_
+      IconSize = [int]$_
+    }
+    If ($Unplated) {
+      [pscustomobject]@{
+        Name = "Square44x44Logo.targetsize-${_}_altform-unplated"
+        W = [int]$_
+        H = [int]$_
+        IconSize = [int]$_
+      }
+    }
+  })
+
+# Cross product with the 3 high contrast modes
+$allAssetSizes = $allAssetSizes | ForEach-Object {
+    $asset = $_
+    ("standard", "black", "white") | ForEach-Object {
+        $contrast = $_
+        $name = $asset.Name
+        If ($contrast -Ne "standard") {
+            If ($HighContrastPath -Eq "") {
+                # "standard" is the default, so we can omit it in filenames
+                return
+            }
+            $name += "_contrast-" + $contrast
+        }
+        [pscustomobject]@{
+            Name = $name
+            W = $asset.W
+            H = $asset.H
+            IconSize = $asset.IconSize
+            Contrast = $_
+      }
+    }
+}
+
+$allSizes = $allAssetSizes.IconSize | Group-Object | Select-Object -Expand Name
+
+$TranslatedSVGPath = & wsl wslpath -u ((Get-Item $Path -ErrorAction:Stop).FullName -Replace "\\","/")
+$TranslatedSVGContrastPath = $null
+If ($HighContrastPath -Ne "") {
+    $TranslatedSVGContrastPath = & wsl wslpath -u ((Get-Item $HighContrastPath -ErrorAction:Stop).FullName -Replace "\\","/")
+}
+& wsl which inkscape | Out-Null
+If ($LASTEXITCODE -Ne 0) { throw "Inkscape is not installed in WSL" }
+& wsl which convert | Out-Null
+If ($LASTEXITCODE -Ne 0) { throw "imagemagick is not installed in WSL" }
+
+If (-Not [string]::IsNullOrEmpty($Destination)) {
+  New-Item -Type Directory $Destination -EA:Ignore
+  $TranslatedOutDir = & wsl wslpath -u ((Get-Item $Destination -EA:Stop).FullName -Replace "\\","/")
+} Else {
+  $TranslatedOutDir = "."
+}
+
+$intermediateFiles = [System.Collections.Concurrent.ConcurrentBag[string]]::new()
+
+# Generate the base icons
+$allSizes | ForEach-Object -Parallel {
+  $sz = $_;
+
+  $destinationNt = $using:Destination
+  $destinationWsl = $using:TranslatedOutDir
+  $svgStandardWsl = $using:TranslatedSVGPath
+  $svgContrastWsl = $using:TranslatedSVGContrastPath
+
+  $intermediateStandardNt = "$destinationNt\_intermediate.standard.$($sz).png"
+  $intermediateStandardWsl = "$destinationWsl/_intermediate.standard.$($sz).png"
+
+  If (($using:UseExistingIntermediates -Eq $false) -Or (-Not (Test-Path $intermediateStandardNt))) {
+    wsl inkscape -z -e "$intermediateStandardWsl" -w $sz -h $sz $svgStandardWsl 
+  } Else {
+    Write-Host "Using existing $intermediateStandardNt"
+  }
+
+  ($using:intermediateFiles).Add($intermediateStandardNt)
+
+  If ($svgContrastWsl -Ne $null) {
+    $intermediateBlackNt = "$destinationNt\_intermediate.black.$($sz).png"
+    $intermediateWhiteNt = "$destinationNt\_intermediate.white.$($sz).png"
+    $intermediateBlackWsl = "$destinationWsl/_intermediate.black.$($sz).png"
+    $intermediateWhiteWsl = "$destinationWsl/_intermediate.white.$($sz).png"
+
+    If (($using:UseExistingIntermediates -Eq $false) -Or (-Not (Test-Path $intermediateBlackNt))) {
+      wsl inkscape -z -e "$intermediateBlackWsl" -w $sz -h $sz $svgContrastWsl 
+    } Else {
+      Write-Host "Using existing $intermediateBlackNt"
+    }
+
+    If (($using:UseExistingIntermediates -Eq $false) -Or (-Not (Test-Path $intermediateWhiteNt))) {
+      # The HC white icon is just a negative image of the HC black one
+      wsl convert "$intermediateBlackWsl" -channel RGB -negate "$intermediateWhiteWsl"
+    } Else {
+      Write-Host "Using existing $intermediateWhiteNt"
+    }
+
+    ($using:intermediateFiles).Add($intermediateBlackNt)
+    ($using:intermediateFiles).Add($intermediateWhiteNt)
+  }
+}
+
+# Once the base icons are done, splat them into the middles of larger canvases.
+$allAssetSizes | ForEach-Object -Parallel {
+  $asset = $_
+  If ($asset.W -Eq $asset.H -And $asset.IconSize -eq $asset.W) {
+    Write-Host "Copying base icon for size=$($asset.IconSize), contrast=$($asset.Contrast) to $($asset.Name)"
+    Copy-Item "${using:Destination}\_intermediate.$($asset.Contrast).$($asset.IconSize).png" "${using:Destination}\$($asset.Name).png" -Force
+  } Else {
+    wsl convert "$($using:TranslatedOutDir)/_intermediate.$($asset.Contrast).$($asset.IconSize).png" -gravity center -background transparent -extent "$($asset.W)x$($asset.H)" "$($using:TranslatedOutDir)/$($asset.Name).png"
+  }
+}
+
+If ($KeepIntermediates -Eq $false) {
+  $intermediateFiles | ForEach-Object {
+    Write-Host "Cleaning up intermediate file $_"
+    Remove-Item $_
+  }
+}
+

res/terminal/Terminal_Dev_HC.svg

@@ -0,0 +1,17 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<linearGradient id="foreground"><stop stop-color="#000000"/></linearGradient>
+<linearGradient id="background"><stop stop-color="#ffffff"/></linearGradient>
+</defs>
+<!-- background rounded rectangle -->
+<path d="M2 6C0.9 6 0 6.9 0 8L0 12L0 13L0 40C0 41.1 0.9 42 2 42L46 42C47.1 42 48 41.1 48 40L48 13L48 12L48 8C48 6.9 47.1 6 46 6L32 6L16 6L2 6Z" fill="url(#background)"/>
+<!-- tab outlines -->
+<rect y="12" x="0" height="1" width="48" fill="url(#foreground)"/>
+<rect y="6" x="15.33" height="7" width="1" fill="url(#foreground)"/>
+<rect y="6" x="31.66" height="7" width="1" fill="url(#foreground)"/>
+<!-- > -->
+<path d="M15.2 24.3L6.4 33.1C5.9 33.6 5.9 34.3 6.4 34.7L8.2 36.5C8.7 37 9.4 37 9.8 36.5L18.6 27.7C19.1 27.2 19.1 26.5 18.6 26.1L16.8 24.3C16.4 23.9 15.6 23.9 15.2 24.3Z" fill="url(#foreground)"/>
+<path d="M9.8 17.3L18.6 26.1C19.1 26.6 19.1 27.3 18.6 27.7L16.8 29.5C16.3 30 15.6 30 15.2 29.5L6.4 20.7C5.9 20.2 5.9 19.5 6.4 19.1L8.2 17.3C8.6 16.9 9.4 16.9 9.8 17.3Z" fill="url(#foreground)"/>
+<!-- "DEV" -->
+<path d="m 26.810547,33.324219 c 0,2.468099 0,4.936198 0,7.404297 1.111732,-0.02994 2.235898,0.08435 3.335087,-0.120798 1.520803,-0.279494 2.813448,-1.588029 2.928427,-3.15363 0.151833,-1.302795 -0.211075,-2.834413 -1.424476,-3.530575 -1.34461,-0.797858 -2.951172,-0.55964 -4.443327,-0.599294 -0.131903,0 -0.263807,0 -0.395711,0 z m 7.201172,0 c 0,2.468099 0,4.936198 0,7.404297 1.440104,0 2.880208,0 4.320312,0 0,-0.454427 0,-0.908855 0,-1.363282 -0.925781,0 -1.851562,0 -2.777343,0 0,-0.566406 0,-1.132812 0,-1.699218 0.805338,0 1.610677,0 2.416015,0 0,-0.454427 0,-0.908855 0,-1.363282 -0.805338,0 -1.610677,0 -2.416015,0 0,-0.536458 0,-1.072917 0,-1.609375 0.873698,0 1.747395,0 2.621093,0 0,-0.45638 0,-0.91276 0,-1.36914 -1.388021,0 -2.776041,0 -4.164062,0 z m 4.314453,0 c 0.871094,2.468099 1.742187,4.936198 2.613281,7.404297 0.522786,0 1.045573,0 1.568359,0 0.886719,-2.468099 1.773438,-4.936198 2.660157,-7.404297 -0.546875,0 -1.09375,0 -1.640625,0 -0.594401,1.782552 -1.188802,3.565104 -1.783203,5.347656 -0.580078,-1.782552 -1.160157,-3.565104 -1.740235,-5.347656 -0.559245,0 -1.118489,0 -1.677734,0 z m -9.976563,1.36914 c 0.937345,0.0013 2.047245,-0.09251 2.704846,0.710677 0.572414,0.79802 0.561189,1.924696 0.194439,2.806167 -0.413758,0.922712 -1.501024,1.222925 -2.434219,1.155031 -0.245561,-0.0018 -0.579112,0.08432 -0.465066,-0.277122 0,-1.464917 0,-2.929835 0,-4.394753 z" fill="url(#foreground)"/>
+</svg>

res/terminal/Terminal_HC.svg

@@ -0,0 +1,17 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<linearGradient id="foreground"><stop stop-color="#000000"/></linearGradient>
+<linearGradient id="background"><stop stop-color="#ffffff"/></linearGradient>
+</defs>
+<!-- background rounded rectangle -->
+<path d="M2 6C0.9 6 0 6.9 0 8L0 12L0 13L0 40C0 41.1 0.9 42 2 42L46 42C47.1 42 48 41.1 48 40L48 13L48 12L48 8C48 6.9 47.1 6 46 6L32 6L16 6L2 6Z" fill="url(#background)"/>
+<!-- tab outlines -->
+<rect y="12" x="0" height="1" width="48" fill="url(#foreground)"/>
+<rect y="6" x="15.33" height="7" width="1" fill="url(#foreground)"/>
+<rect y="6" x="31.66" height="7" width="1" fill="url(#foreground)"/>
+<!-- > -->
+<path d="M15.2 24.3L6.4 33.1C5.9 33.6 5.9 34.3 6.4 34.7L8.2 36.5C8.7 37 9.4 37 9.8 36.5L18.6 27.7C19.1 27.2 19.1 26.5 18.6 26.1L16.8 24.3C16.4 23.9 15.6 23.9 15.2 24.3Z" fill="url(#foreground)"/>
+<path d="M9.8 17.3L18.6 26.1C19.1 26.6 19.1 27.3 18.6 27.7L16.8 29.5C16.3 30 15.6 30 15.2 29.5L6.4 20.7C5.9 20.2 5.9 19.5 6.4 19.1L8.2 17.3C8.6 16.9 9.4 16.9 9.8 17.3Z" fill="url(#foreground)"/>
+<!-- _ -->
+<path d="M40 32H24C23.4 32 23 32.4 23 33V36C23 36.6 23.4 37 24 37H40C40.6 37 41 36.6 41 36V33C41 32.4 40.6 32 40 32Z" fill="url(#foreground)"/>
+</svg>

res/terminal/Terminal_Pre_HC.svg

@@ -0,0 +1,17 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<linearGradient id="foreground"><stop stop-color="#000000"/></linearGradient>
+<linearGradient id="background"><stop stop-color="#ffffff"/></linearGradient>
+</defs>
+<!-- background rounded rectangle -->
+<path d="M2 6C0.9 6 0 6.9 0 8L0 12L0 13L0 40C0 41.1 0.9 42 2 42L46 42C47.1 42 48 41.1 48 40L48 13L48 12L48 8C48 6.9 47.1 6 46 6L32 6L16 6L2 6Z" fill="url(#background)"/>
+<!-- tab outlines -->
+<rect y="12" x="0" height="1" width="48" fill="url(#foreground)"/>
+<rect y="6" x="15.33" height="7" width="1" fill="url(#foreground)"/>
+<rect y="6" x="31.66" height="7" width="1" fill="url(#foreground)"/>
+<!-- > -->
+<path d="M15.2 24.3L6.4 33.1C5.9 33.6 5.9 34.3 6.4 34.7L8.2 36.5C8.7 37 9.4 37 9.8 36.5L18.6 27.7C19.1 27.2 19.1 26.5 18.6 26.1L16.8 24.3C16.4 23.9 15.6 23.9 15.2 24.3Z" fill="url(#foreground)"/>
+<path d="M9.8 17.3L18.6 26.1C19.1 26.6 19.1 27.3 18.6 27.7L16.8 29.5C16.3 30 15.6 30 15.2 29.5L6.4 20.7C5.9 20.2 5.9 19.5 6.4 19.1L8.2 17.3C8.6 16.9 9.4 16.9 9.8 17.3Z" fill="url(#foreground)"/>
+<!-- "PRE" -->
+<path d="m 27.279297,33.324219 c 0,2.468099 0,4.936198 0,7.404297 0.513672,0 1.027343,0 1.541015,0 0,-0.848958 0,-1.697917 0,-2.546875 0.917549,0.01484 1.927453,0.03299 2.65875,-0.616892 1.172278,-0.927905 1.176118,-3.073122 -0.17547,-3.840777 -0.981472,-0.568217 -2.13908,-0.358412 -3.218649,-0.399753 -0.268549,0 -0.537097,0 -0.805646,0 z m 5.869141,0 c 0,2.468099 0,4.936198 0,7.404297 0.513021,0 1.026041,0 1.539062,0 0,-0.950521 0,-1.901042 0,-2.851563 0.431639,-0.03621 0.908827,0.05394 1.148438,0.458985 0.525553,0.771736 0.970414,1.596546 1.458984,2.392578 0.604167,0 1.208333,0 1.8125,0 -0.638695,-0.976785 -1.211177,-1.999445 -1.914561,-2.931671 -0.241051,-0.276681 -0.636923,-0.466649 -0.07177,-0.574189 1.274395,-0.677377 1.378019,-2.774051 0.102268,-3.504493 -0.922467,-0.560429 -2.029423,-0.352936 -3.053526,-0.393944 -0.340466,0 -0.680932,0 -1.021398,0 z m 6.25,0 c 0,2.468099 0,4.936198 0,7.404297 1.440755,0 2.88151,0 4.322265,0 0,-0.454427 0,-0.908855 0,-1.363282 -0.925781,0 -1.851563,0 -2.777344,0 0,-0.566406 0,-1.132812 0,-1.699218 0.804688,0 1.609375,0 2.414063,0 0,-0.454427 0,-0.908855 0,-1.363282 -0.804688,0 -1.609375,0 -2.414063,0 0,-0.536458 0,-1.072917 0,-1.609375 0.873047,0 1.746094,0 2.619141,0 0,-0.45638 0,-0.91276 0,-1.36914 -1.388021,0 -2.776041,0 -4.164062,0 z M 34.6875,34.648438 c 0.570781,0.0371 1.28319,-0.150767 1.691507,0.358943 0.370833,0.564952 0.02331,1.464787 -0.684396,1.526855 -0.334157,0.03512 -0.67147,0.0117 -1.007111,0.0185 0,-0.634765 0,-1.269531 0,-1.904296 z m -5.867188,0.01562 c 0.61736,0.02299 1.42501,-0.135196 1.79395,0.492096 0.333428,0.657753 -0.0252,1.619083 -0.829192,1.664678 -0.319151,0.05007 -0.643164,0.0243 -0.964758,0.03073 0,-0.729167 0,-1.458333 0,-2.1875 z" fill="url(#foreground)"/>
+</svg>