variables.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Photon Colors CSS Variables v3.2.0 */
/* only a subset is included, the complete declaration can be found at
 * https://firefoxux.github.io/design-tokens/photon-colors/photon-colors.css
 */

:root {
  --blue-40: #45a1ff;
  --blue-50: #0a84ff;
  --blue-50-a30: rgba(10, 132, 255, 0.3);
  --blue-60: #0060df;
  --blue-70: #003eaa;

  --green-50: #30e60b;
  --green-60: #12bc00;
  --green-70: #058b00;
  --green-80: #006504;
  --green-90: #003706;

  --yellow-50: #ffe900;
  --yellow-60: #d7b600;
  --yellow-70: #a47f00;
  --yellow-80: #715100;
  --yellow-90: #3e2800;

  --red-50: #ff0039;
  --red-60: #d70022;
  --red-70: #a4000f;
  --red-80: #5a0002;
  --red-90: #3e0200;

  --red-60: #d70022;

  --grey-10: #f9f9fa;
  --grey-20: #ededf0;
  --grey-30: #d7d7db;
  --grey-40: #b1b1b3;
  --grey-50: #737373;
  --grey-60: #4a4a4f;
  --grey-90: #0c0c0d;
  --grey-90-a10: rgba(12, 12, 13, 0.1);
  --grey-90-a20: rgba(12, 12, 13, 0.2);
  --grey-90-a30: rgba(12, 12, 13, 0.3);

  --white-100: #ffffff;
}

/* custom variables, independent of Mozilla's Photon colors
 * or only based upon them */

:root {
  --red-60-a90: rgba(215, 0, 34, 0.9);
  --red-60-light-shadow: rgba(217, 61, 85, 0.75);
  --grey-20-a90: rgba(237, 237, 240, 0.9);

  /* shadows https://design.firefox.com/photon/patterns/shadows.html */
  --shadow-10: 0px 1px 4px var(--grey-90-a20);
  --shadow-20: 0px 1px 4px var(--grey-90-a20);
  --shadow-30: 0px 1px 4px var(--grey-90-a20);
}