Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

BlackBerry® World™ Development

Reply
Developer
Posts: 1,269
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

GIMP palette for UI design guideline colors

[ Edited ]

For folks who use Gimp and/or Inkscape:

 

Here's my Gimp palette file for the UI design guideline colors.  The "_pxx" at

the end of each color swatch's name refers to the page of the UI guidelines doc

where that color's usage is described.

 

I leave it as an exercise for the reader to type "how to import Gimp color palettes"

and "how to import Gimp color palettes into Inkscape" into a Google search.

 

GIMP Palette
Name: BB10
Columns: 2
#
150 184 0 IconPaletteGreen_p72
204 63 16 IconPaletteRed_p72
0 152 240 IconPaletteBlue_p72
163 13 126 IconPalettePurple_p72
18 18 18 IconPaletteDark1_p72
38 38 38 IconPaletteDark2_p72
248 248 248 IconPaletteWhite_p72
79 79 79 InAppIconLBgTopGrad_p86
54 54 54 InAppIconLBgBotGrad_p86
227 227 227 InAppIconDBgTopGrad_p86
209 209 209 InAppIconDBgBotGrad_p86
60 188 231 InAppIconSelectedTopGrad_p87
1 168 223 InAppIconSelectedBotGrad_p87
0 184 0 ContentIconGreen_p87
230 180 0 ContentIconYellow_p87
214 0 0 ContentIconRed_p87
0 168 223 ContentIconBlue_p87
38 38 38 PrimTextLBg_p92
85 85 85 SecTextLBg_p92
0 115 188 LinkTextLBg_p92
250 250 250 PrimTextDBg_p92
177 177 177 SecTextDBg_p92
0 168 223 LinkTextDBg_p92

Highlighted
Developer
Posts: 1,269
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: GIMP palette for UI design guideline colors

And again, as Sass variable declarations:

 

 

$IconPaletteGreen_p72: #96B800;
$IconPaletteRed_p72: #CC3F10;
$IconPaletteBlue_p72: #0098F0;
$IconPalettePurple_p72: #A30D7E;
$IconPaletteDark1_p72: #121212;
$IconPaletteDark2_p72: #262626;
$IconPaletteWhite_p72: #F8F8F8;
$InAppIconLBgTopGrad_p86: #4F4F4F;
$InAppIconLBgBotGrad_p86: #363636;
$InAppIconDBgTopGrad_p86: #E3E3E3;
$InAppIconDBgBotGrad_p86: #D1D1D1;
$InAppIconSelectedTopGrad_p87: #3CBCE7;
$InAppIconSelectedBotGrad_p87: #01A8DF;
$ContentIconGreen_p87: #00B800;
$ContentIconYellow_p87: #E6B400;
$ContentIconRed_p87: #D60000;
$ContentIconBlue_p87: #00A8DF;
$PrimTextLBg_p92: #262626;
$SecTextLBg_p92: #555555;
$LinkTextLBg_p92: #0073BC;
$PrimTextDBg_p92: #FAFAFA;
$SecTextDBg_p92: #B1B1B1;
$LinkTextDBg_p92: #00A8DF;