1 = Evergreen Angular App Style Guidelines
5 This guide serves as a place to capture thoughts and reasoning about
6 stylistic choices made in the Evergreen staff client interfaces. It
7 will initially have little content and no authority, but will accrue
8 both over time as thoughts are expressed and recorded, and conflicts
14 * All root styles are initially from Bootstrap 4. Custom styles will
15 generally proceed as derivations from there. Eventually it may
16 amount to a unique design language, but that will take time.
21 * Colors which are present primarily for decorative or aesthetic
22 purposes will be derived from the standard "Evergreen Green" with
23 a hue value of around 161.
24 * At this time there is some discreprancy as to what color the
25 official "Evergreen Green" actually is. (Since different screen
26 colorings need different shades, tints, and intensities, when we
27 say color in this context, we more precisely mean hue.) The current
28 green used in the staff client header and the standard OPAC are
29 roughly a hue value of 161 (on a 360 degree scale), while the
30 official Evergreen logo graphic uses a somewhat more blue color,
31 with a hue value of 166. This is not a large difference, but it
32 would be nice to settle this difference at some point.
33 * Colors used to represent "action" elements (links, major buttons,
34 and user selection highlights) will generally be blue. At this time
35 we are normally using the standard Bootstrap blue for such elements
36 (or a close derivative).
37 * Colors used to delineate minor or background elements (areas of the
38 screen, table headers, secondary buttons) will use neutral grays
39 (expressed as equal values for RGB, i.e. 0 saturation).
40 * Some buttons are using the Bootstrap green and red button variants.
41 This usage is not currently well defined, but generally means "major
42 positive" (green) and "major negative" (red) actions.