Add lighting

[keithclark]

Support lighting models through CSS. Ideally this should:

• Allow multiple lights to be defined using a single rule
• Provide multiple light types (ambient, point, directional etc)
• Play nicely with CSS principles - i.e use inheritance / cascade

Initial thoughts:

Allow CSS authors to use a custom property (--light?) to define lighting and access it with JavaScript using the CSSOM.

--light: <light-function> [<light-position>]? [<light-attachment>]?

Where:

• <light-function> could be something along the lines of:
  • ambient-light(<color>, [<intensity>]?)
  • point-light(<color>, [<intensity>, [,distance]?]?)
• <light-position> is a triplet of css <length>s:
  • -100px 200px 300px (defaults to 50% 50% 0?)
• <light-attachment> is one of
  • fixed - light is clamped to the viewport / scrollbox?
  • absolute - light is positioned relative to the document?
  • static - light is is positioned / transformed relative to the element it's defined on.

Examples:

body {
  --light: ambient-light(#fff, .3),
      point-light(#f00, 1) 50% 50% 50% relative,
      point-light(#0f0, 1) 0px 300px 800px absolute,
      point-light(#00f,24) 700px 400px 800px static;
}