1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import { palette } from "./palette"
/**
* Roles for colors. Prefer using these over the palette. It makes it easier
* to change things.
*
* The only roles we need to place in here are the ones that span through the app.
*
* If you have a specific use-case, like a spinner color. It makes more sense to
* put that in the <Spinner /> component.
*/
export const color = {
/**
* The palette is available to use, but prefer using the name.
*/
palette,
/**
* A helper for making something see-thru. Use sparingly as many layers of transparency
* can cause older Android devices to slow down due to the excessive compositing required
* by their under-powered GPUs.
*/
transparent: "rgba(0, 0, 0, 0)",
/**
* The screen background.
*/
background: palette.white,
/**
* The main tinting color.
*/
primary: palette.orange,
/**
* The main tinting color, but darker.
*/
primaryDarker: palette.orangeDarker,
/**
* A subtle color used for borders and lines.
*/
line: palette.offWhite,
/**
* The default color of text in many components.
*/
text: palette.white,
/**
* Secondary information.
*/
dim: palette.lightGrey,
/**
* Error messages and icons.
*/
error: palette.angry,
/**
* Storybook background for Text stories, or any stories where
* the text color is color.text, which is white by default, and does not show
* in Stories against the default white background
*/
storybookDarkBg: palette.black,
/**
* Storybook text color for stories that display Text components against the
* white background
*/
storybookTextColor: palette.black,
}
|
