@cagovweb/state-template/dist/css/colortheme-shasta.css

California State Web Template NPM Package

/* -----------------------------------------
   SHASTA COLOR THEME
----------------------------------------- */

:root {
  /* color variations are hardcoded for older browsers
 color-mix is used for the newer browsers */

  /* Highlight */
  --color-p1: #fbad23;
  --color-p1-dark: #fba60f;
  --color-p1-darker: #f69f04;
  --color-p1-darkest: #d38804;
  --color-p1-light: #fcbd4f;
  --color-p1-lighter: #fdce7b;
  --color-p1-lightest: #fddea7;

  /* Primary */
  --color-p2: #336c39;
  --color-p2-dark: #2c5e32;
  --color-p2-darker: #28542c;
  --color-p2-darkest: #1c3c1f;
  --color-p2-light: #5c8961;
  --color-p2-lighter: #85a788;
  --color-p2-lightest: #adc4b0;

  /* Standout */
  --color-p3: #3c4543;
  --color-p3-dark: #333a38;
  --color-p3-darker: #2b3230;
  --color-p3-darkest: #1b1f1e;
  --color-p3-light: #636a69;
  --color-p3-lighter: #8a8f8e;
  --color-p3-lightest: #b1b5b4;

  /* Secondary 1 */
  --color-s1: #e4f1e5;
  --color-s1-darker: #daecdb;
  --color-s1-lighter: #f2f8f2;

  /* Secondary 2 */
  --color-s2: #daefe8;
  --color-s2-dark: #c1e4d9;
  --color-s2-darker: #a8d9c9;

  /* Secondary 3 */
  --color-s3: #a1cca1;
  --color-s3-dark: #8abf8a;
  --color-s3-light: #c7e0c7;
  --color-s3-lighter: #d9ebd9;

  /* Megamenu sub navigation background */
  --sub-nav-bg: var(--color-s1-lighter);

  /* Mobile navigation draver background */
  --mobile-drawer: var(--color-p3);
  --mobile-drawer-active: var(--color-p3-light);
}

/* color-mix is used for the newer browsers */
@supports (color: color-mix) {
  :root {
    --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
    --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
    --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
    --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
    --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
    --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
    --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
    --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
    --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
    --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
    --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
    --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
    --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
    --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
    --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
    --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
    --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
    --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
    --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
    --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
    --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
    --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
    --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
    --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
    --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
    --sub-nav-bg: var(--color-s1-lighter);
    --mobile-drawer: var(--color-p3);
    --mobile-drawer-active: var(--color-p3-light);
  }
}