Open-ILS/src/eg2/STYLE_GUIDELINES.adoc

   1 = Evergreen Angular App Style Guidelines
   2
   3 == Introduction
   4
   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
   9 are worked out.
  10
  11
  12 == General
  13
  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.
  17
  18
  19 == Colors
  20
  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.