Add color options for step numbers and screenshot annotations (arrows, outlines)

[adamschwartz]

Currently there are three color options for the theme:

static theme = {
  accentColor: "#2d88f3",
  backgroundColor: "#ffffff",
  textColor: "#000000"
};

Per our discussion today:

• There will be two additional color options, something like stepNumberColor and screenshotAnnotationColor.
• By default, stepNumberColor will default to accentColor.
• By default, screenshotAnnotationColor will default to #fde757, currently defined as attentionYellow in the Stylus.

By not defaulting the screenshotAnnotationColor color to the accentColor, as we do with the stepNumberColor, we can avoid the surprise of a developer ending up with a poor color for the annotation arrows. However, if a particular accent color works well as an annotation color, as with the purple and green designs below, a developer would be able to achieve these by setting the accentColor, stepNumberColor and screenshotAnnotationColor to the same hex value.

[adamschwartz]

cc @zackbloom @TeffenEllis

[GirlBossRush]

@adamschwartz,

I like the color feature quite a bit!

It's longterm goal to replace all the PNGs with iframe screenshots. The iframe screenshots are slightly different on smaller screens and have new line heights when content wraps. The absolute positioning of the arrow may be off in this case.

IE10 is especially touchy with SVG viewboxes and horizontal scrolling. I believe the arrow that is aligned is imprinted the PNG. The misaligned one is the SVG.

The current feature we have with inline pseudo element arrows will fit any screen width. My feeling is that they're the best option along with occasionally highlighting key elements.

At the moment these pseudo elements are set with unicode arrows. Replacing them data URI SVGs with the size could get us the prettiness of a custom arrow, and the simplicity of our current system.

Cheers

[adamschwartz]

I’ll see what I can do about IE.

As for horizontal scrolling, I would guess that’s a separate issue?

Lastly, the implementation is not of primary concern to me (inline SVG vs. SVG data URI in CSS), however, I want to note that I am not satisfied with the existing unicode arrows because IMHO they blend into the content much more easily. I designed these arrows intentionally curvy because the way they gesture is more attention grabbing as it breaks the horizontality/verticality of a typical web UI.

I’m willing to be convinced otherwise, but for now, I’d like to implement the HTML screenshots in such a way that they scale as images do, retaining their exact layout, such that their behavior mimics an actually screenshot. This will double as solving the arrow positioning issue for us.

Back to implementation. As I said it’s a secondary concern of mine. That being said I think you may find it annoying to implement the annotation-arrow mixin with string interpolation inside Stylus.

[adamschwartz]

@TeffenEllis updated the description per our discussion today. 😄

[adamschwartz]

@TeffenEllis as part of this, I assume you’ll have to touch the .screenshot .focal-point styling. After playing around with that a bit I’d like to remove the blur on that and go with something more like this:

.screenshot
  //...

  .focal-point
    box-shadow 0 0 0 4px attentionYellow

[GirlBossRush]

Sounds good to me 😄

[adamschwartz]

Thanks! 👍