Added portable hash-quote-icon, updated and recolored macro stepper toolbar icon

Closes PR 12422

Please merge into release
(cherry picked from commit f1add6929b)

collects/images/icons/symbol.rkt

@@ -13,7 +13,8 @@
           recycle-icon recycle-flomap
           x-icon x-flomap
           check-icon check-flomap
-          lambda-icon lambda-flomap)
+          lambda-icon lambda-flomap
+          hash-quote-icon hash-quote-flomap)
          (only-doc-out (all-defined-out)))
 
 (define (flat-x-flomap color height)
@@ -238,6 +239,35 @@
     (/ height 32)
     material)))
 
+(defproc (hash-quote-flomap [color (or/c string? (is-a?/c color%))]
+                            [height (and/c rational? (>=/c 0)) (default-icon-height)]
+                            [material deep-flomap-material-value? (default-icon-material)]) flomap?
+  (make-cached-flomap
+   [height color material]
+   (define (draw-hash-quote dc)
+     ;; vertical lines
+     (send dc draw-polygon '((6 . 0) (11 . 0) (9 . 30) (4 . 30)))
+     (send dc draw-polygon '((17 . 0) (22 . 0) (20 . 30) (15 . 30)))
+     ;; horizontal lines
+     (send dc draw-polygon '((1 . 6.5) (26 . 6.5) (26 . 11.5) (1 . 11.5)))
+     (send dc draw-polygon '((0 . 18.5) (25 . 18.5) (25 . 23.5) (0 . 23.5)))
+     ;; quote
+     (send dc draw-polygon '((30 . 0) (34 . 0) (33 . 9) (30 . 9))))
+   
+   (define outline-color (icon-color->outline-color color))
+   
+   (draw-rendered-icon-flomap
+    36 32 (λ (dc)
+            (send dc translate 0.5 0.5)
+            (set-icon-pen dc outline-color 2 'solid)
+            (send dc set-brush outline-color 'solid)
+            (draw-hash-quote dc)
+            (send dc set-pen "black" 1 'transparent)
+            (send dc set-brush color 'solid)
+            (draw-hash-quote dc))
+    (/ height 32)
+    material)))
+
 ;; ===================================================================================================
 ;; Bitmaps (icons)
 
@@ -257,4 +287,5 @@
   [recycle-icon recycle-flomap]
   [x-icon x-flomap]
   [check-icon check-flomap]
-  [lambda-icon lambda-flomap])
+  [lambda-icon lambda-flomap]
+  [hash-quote-icon hash-quote-flomap])

collects/images/icons/tool.rkt

@@ -12,6 +12,7 @@
 
 (provide debugger-bomb-color
          macro-stepper-hash-color
+         small-macro-stepper-hash-color
          (activate-contract-out
           check-syntax-icon check-syntax-flomap
           small-check-syntax-icon small-check-syntax-flomap
@@ -25,9 +26,10 @@
   (make-object color% 128 32 32))
 
 ;; Actual color is too dark after rendering
-;(define macro-stepper-hash-color (make-object color% 30 96 30))
 (defthing macro-stepper-hash-color (or/c string? (is-a?/c color%)) #:document-value
-  (make-object color% 90 192 90))
+  (make-object color% 60 192 60))
+(defthing small-macro-stepper-hash-color (or/c string? (is-a?/c color%)) #:document-value
+  (make-object color% 128 255 128))
 
 (defproc (check-syntax-flomap [height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
                               [material deep-flomap-material-value? (default-icon-material)]
@@ -49,8 +51,7 @@
                                [material deep-flomap-material-value? (default-icon-material)]
                                ) flomap?
   (flomap-ht-append
-   (text-flomap "#'" (make-object font% (max 1 (min 1024 height)) 'system)
-                macro-stepper-hash-color #t 'auto height material)
+   (hash-quote-flomap macro-stepper-hash-color height material)
    (make-flomap 4 (max 1 (inexact->exact (round (* 1/32 height)))) 0)
    (step-flomap syntax-icon-color height material)))
 
@@ -60,8 +61,7 @@
   (flomap-pin*
    0 0 7/16 0
    (step-flomap syntax-icon-color height material)
-   (text-flomap "#'" (make-object font% (max 1 (min 1024 height)) 'system)
-                macro-stepper-hash-color #t 'auto (* 3/4 height) material)))
+   (hash-quote-flomap small-macro-stepper-hash-color (* 3/4 height) material)))
 
 (defproc (debugger-flomap [height (and/c rational? (>=/c 0)) (toolbar-icon-height)]
                           [material deep-flomap-material-value? (default-icon-material)]

collects/images/logos.rkt

@@ -298,33 +298,10 @@
    (lambda-flomap light-metal-icon-color (* 5/8 height) metal-icon-material)))
 
 (defproc (macro-stepper-logo-flomap [height (and/c rational? (>=/c 0)) 96]) flomap?
-  (define outline-color (icon-color->outline-color light-metal-icon-color))
-  
-  (define (draw-hash-quote dc)
-    ;; vertical lines
-    (send dc draw-polygon '((5 . 0) (8 . 0) (6 . 19) (3 . 19)))
-    (send dc draw-polygon '((12 . 0) (15 . 0) (13 . 19) (10 . 19)))
-    ;; horizontal lines
-    (send dc draw-polygon '((1 . 4) (1 . 7) (18 . 7) (18 . 4)))
-    (send dc draw-polygon '((0 . 12) (0 . 15) (17 . 15) (17 . 12)))
-    ;; quote
-    (send dc draw-polygon '((20 . 0) (23 . 0) (22.75 . 6) (20.25 . 6)))
-    )
-  
   (flomap-pin*
-   1/2 20/32 1/2 1/2
+   1/2 20/32 15/36 1/2
    (foot-flomap (make-object color% 34 42 160) height glass-icon-material)
-   (draw-rendered-icon-flomap
-    32 32 (λ (dc)
-            (send dc translate 5 6)
-            (set-icon-pen dc outline-color 2 'solid)
-            (send dc set-brush outline-color 'solid)
-            (draw-hash-quote dc)
-            (send dc set-pen "black" 1 'transparent)
-            (send dc set-brush light-metal-icon-color 'solid)
-            (draw-hash-quote dc))
-    (/ (* 3/4 height) 32)
-    metal-icon-material)))
+   (hash-quote-flomap light-metal-icon-color (* 1/2 height) metal-icon-material)))
 
 (define-icon-wrappers
   ([height (and/c rational? (>=/c 0)) 256])

collects/images/scribblings/icons.scrbl

@@ -45,8 +45,7 @@ Its shape and color are a visual metaphor for an action or a message.
 Icons should be @bold{easily recognizable}, @bold{distinguishable}, @bold{visually consistent}, and @bold{metaphorically appropriate} for the actions and messages they are used with.
 It can be difficult to meet all four requirements at once (``distinguishable'' and ``visually consistent' are often at odds), but good examples, good abstractions, and an existing icon library help considerably.
 
-@(define (hash-quote) (text-icon "#'" (make-object font% 32 'system)
-                                 macro-stepper-hash-color #t 'auto 16))
+@(define (hash-quote) (hash-quote-icon macro-stepper-hash-color 16))
 @(define (step) (step-icon syntax-icon-color 16))
 @(define (play) (play-icon syntax-icon-color 16))
 @(define (bar) (bar-icon syntax-icon-color 16))
@@ -283,7 +282,7 @@ Renders a text string as an icon. For example,
 @interaction[#:eval icons-eval
                     (text-icon "An Important Point!"
                                (make-object font% 48 'decorative 'normal 'bold #t)
-                               "lightskyblue" #t 2 48)]
+                               "lightskyblue" #t 'auto 48)]
 
 Before rendering, the drawn text is scaled so that it is exactly @racket[height] pixels tall.
 Make sure the font is large enough that scaling does not create blurry and jagged edge artifacts, as in the following example:
@@ -329,6 +328,12 @@ Returns an ``x'' icon that is guaranteed to look the same on all platforms.
                  (lambda-icon light-metal-icon-color 32 metal-icon-material)]
 }
 
+@doc-apply[hash-quote-icon]{
+@examples[#:eval icons-eval
+                 (require (only-in images/icons/tool macro-stepper-hash-color))
+                 (hash-quote-icon macro-stepper-hash-color 32)]
+}
+
 @;====================================================================================================
 
 @section[#:tag "misc"]{Miscellaneous Icons}
@@ -443,6 +448,7 @@ Icons for the Debugger. The @racket[small-debugger-icon] is used when the toolba
 }
 
 @doc-apply[debugger-bomb-color]
-@doc-apply[macro-stepper-hash-color]{
+@doc-apply[macro-stepper-hash-color]
+@doc-apply[small-macro-stepper-hash-color]{
 Constants used within @racketmodname[images/icons/tool].
 }

collects/images/scribblings/logos.scrbl

@@ -30,11 +30,11 @@ Returns an unofficial PLaneT logo. This is used as the PLaneT icon when DrRacket
 }
 
 @doc-apply[stepper-logo]{
-An algebraic stepper logo.
+Returns the algebraic stepper logo.
 @examples[#:eval logos-eval (stepper-logo)]
 }
 
 @doc-apply[macro-stepper-logo]{
-A macro stepper logo.
+Returns the macro stepper logo.
 @examples[#:eval logos-eval (macro-stepper-logo)]
 }

collects/images/tests/icon-tests.rkt

@@ -48,7 +48,7 @@
               (λ (color) (load-icon syntax-icon-color color))
               (λ (color) (small-save-icon syntax-icon-color color))
               (λ (color) (small-load-icon syntax-icon-color color)))
-        (list x-icon check-icon recycle-icon lambda-icon)
+        (list x-icon check-icon recycle-icon lambda-icon hash-quote-icon)
         (list octagon-icon stop-sign-icon stop-signs-icon foot-icon
               (λ (color) (magnifying-glass-icon metal-icon-color color))
               (λ (color) (left-magnifying-glass-icon metal-icon-color color))