New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 603700 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Apr 2016
Cc:
tapted@chromium.org
█ shrike@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

[MacViews] Bring button stroke and shadow up to spec.

Project Member Reported by shrike@chromium.org, Apr 14 2016 
I am creating specs for each button state, and will add them as separate notes instead of all at once. The four states are Normal, Focused, Pressed, and Disabled. Note that the Primary button will have its own, separate bug.

=========

Button, Normal State
	top edge: (0xCC, 0xCC, 0xCC, 0xFF)
	side edges: (0xBA, 0xBA, 0xBA, 0xFF)
	bottom edge: (0x9D, 0x9D, 0x9D, 0xFF)
	shadow: (0x00, 0x00, 0x00, 0x1C)
	
Screenshot attached as reference.

Comment 1 by shrike@chromium.org, Apr 14 2016 

Note: the spec attached to #1 specifies a corner radius of 4pt but as tapted@ points out I need to divide that by 2 because I'm working from a Retina screenshot. Apparently the current corner radius is 2pt, which doesn't look right, so we should try 3pt and see how that looks. Once we settle on a radius that looks right I can correct the spec.

Comment 2 by shrike@chromium.org, Apr 14 2016 

Button, Pressed State
	Interior: (0xFA, 0xFA, 0xFA, 0xFF)
	top edge: (0xCC, 0xCC, 0xCC, 0xFF)
	side edge: (0xBA, 0xBA, 0xBA, 0xFF)
	bottom edge: (0x9D, 0x9D, 0x9D, 0xFF)
	1pt shadow: (0x00, 0x00, 0x00, 0x1C)
	2nd 1pt Shadow: (0x00, 0x00, 0x00, 0x05)
ButtonPressedSM.png
41.0 KB View Download

Comment 3 by shrike@chromium.org, Apr 14 2016 

Button, Disabled state
	Text @ 50% opacity
	Interior: (0xF6, 0xF6, 0xF6, 0xFF)
	top edge: (0xD2, 0xD2, 0xD2, 0xFF)
	side edge: (0xCA, 0xCA, 0xCA, 0xFF)
	bottom edge: (0xBE, 0xBE, 0xBE, 0xFF)
	1pt shadow: (0x00, 0x00, 0x00, 0x0D)
	2nd 1pt Shadow: (0x00, 0x00, 0x00, 0x03)
ButtonDisabledSM.png
44.4 KB View Download

Comment 4 by shrike@chromium.org, Apr 14 2016 

(Redo of normal state, to include spec for second line of shadow)

Button, Normal State
	Interior: (0xFF, 0xFF, 0xFF, 0xFF)
	top edge: (0xCC, 0xCC, 0xCC, 0xFF)
	side edges: (0xBA, 0xBA, 0xBA, 0xFF)
	bottom edge: (0x9D, 0x9D, 0x9D, 0xFF)
	1pt shadow: (0x00, 0x00, 0x00, 0x1C)
	2nd 1pt Shadow: (0x00, 0x00, 0x00, 0x05)
ButtonNormalSM.png
35.0 KB View Download

Comment 5 by shrike@chromium.org, Apr 14 2016 

For the button focused state, let's go with following for now:

        Focus ring color: (0x79, 0xA7, 0xE9, 0x94)
        Focus ring width: 3pt, overlapping the button edge by 1pt

Re: the radius of the focus ring, how does Skia do its drawing? Do you need to define a path whose center lay along the centerline of the focus ring, and then change the line width to 3pt so that you an extra pixel on either side? Or does starting with the button's path and changing the line width cause the stroke to get fatter on the outside?

Comment 6 by shrike@chromium.org, Apr 15 2016 

One more thing: button text color should be (0x21, 0x21, 0x21, 0xFF), and (0x21, 0x21, 0x21, 0x7F) when disabled.

Comment 7 by ccameron@chromium.org, Apr 15 2016

Cc: tapted@chromium.org
Status: Available (was: Untriaged)

Comment 8 by shrike@chromium.org, Apr 15 2016

Status: WontFix (was: Available)
I'm going to add this to  Issue 543686 , which is the existing tracking bug.

Comment 9 by lafo...@chromium.org, Apr 20 2016

Labels: -Hotlist-MacViews Proj-MacViews
►

Sign in to add a comment