87
edits
Changes
Human Interface Guidelines/The Sugar Interface/Controls/Custom Controls (view source)
Revision as of 14:32, 1 May 2007
, 14:32, 1 May 2007→Control Color Palette
=====Control Color Palette=====
=====Control Color Palette=====
The Sugar interface defines a strict palette for the control widgets, along with guidelines for using these colors for various states and control types. Custom controls should adhere to the same set of colors and associated rules in order to ensure that their behavior mimics those of the core Sugar controls, and can be easily inferred by those who are familiar with them. Though their name and primary uses define these colors, any color within the palette provided below may be used for various parts of your control where it doesn't interfere with the basic rules associated with them.
{|border=1 cellpadding=3 cellspacing=0 style="border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
!style="background:#cccccc;"|Name!!style="background:#cccccc;"|Primary Uses!!style="background:#cccccc;"|Hex!!style="background:#cccccc;"|% Gray
|-
|Black||Palettes, Popups||#000000||100%
|-
|Toolbar Grey||Toolbars, Trays, Palette Groupings||#404040||75%
|-
|Button Grey||Default Button States||#808080||50%
|-
|Selection Grey||Selections, Panel Groupings||#A6A6A6||35%
|-
|Panel Grey||Panels, Desktop||#C0C0C0||25%
|-
|Text Field Grey||Text entry background||#E5E5E5||10%
|-
|White||Pressed states, multiline text areas||#FFFFFF||0%
|}
=====Control Sizing=====
=====Control Sizing=====