First approach to use dark mode adding shadow color variables [WIP]

[elenatorro]

Fix #558

This first approach adds a set of css variables to allow changes in colors with alpha value. Right now, rgba function doesn't allow css variables that has a hexadecimal value.

The following code doesn't work:

--color-01: #FFFFFF;
bacgkround-color: rgba(var(--color-01), 0.16);

However, we can use directly the hexadecimal color that includes the alpha code, it works:

--color-01: #FFFFFF29;
bacgkround-color: var(--color-01);

So, if we can change the colors with alpha values, we can directly change those variables. An example would be, if we want to have colors that fit for a dark mode (set by default, but the user change use their own)

      --as--color--alpha-01: var(--as--color--alpha-dark-01);
      --as--color--alpha-02: var(--as--color--alpha-dark-02);

• CSS Variables example:

• Dark Mode example:

The only css variables that needed to changed were the following:

      /* Use 'dark' as default alpha value */
      --as--color--alpha-01: var(--as--color--alpha-dark-01);
      --as--color--alpha-02: var(--as--color--alpha-dark-02);
      --as--color--alpha-03: var(--as--color--alpha-dark-03);

      /* Brand */
      --as--color--primary: #17b0ff;
      --as--color--secondary: #212129;
      --as--color--complementary: #17ff66;

      /* "Type Colors" from lighter to darker */
      --as--color--type-01: #edf2f7;
      --as--color--type-02: #dbe6f0;
      --as--color--type-03: #c9d9e8;
      --as--color--type-04: #b8cce0;

      /* "UI Colors" from darker to lighter */
      --as--color--ui-01: #323949;
      --as--color--ui-02: #3d3e51;
      --as--color--ui-03: #40445a;
      --as--color--ui-04: #4c5265;

      /* Badges */
      --as--color--badge-gray: #4c5265;
      --as--color--badge-blue: #3f6892;
      --as--color--badge-green: #3f9269;
      --as--color--badge-pink: #923f68;
      --as--color--badge-yellow: #92693f;

To be done:

• [ ] Check and add necessary changes in order to have a proper customization component by component.

[ivanmalagon]

Good job. And great trick with the alpha values.

I'll pick it up this evening where you left it, adding the whole range of components to check if they get modified by modifying the root variables.

[elenatorro]

Closing in favor of https://github.com/CartoDB/airship/pull/568