ShadowFox/color_variables.css

/* Photon Colors CSS Variables v1.4.0
* Colors are taken from: https://github.com/FirefoxUX/design-tokens */
:root {
  --blue-40: #45a1ff;
  --blue-50: #0a84ff;
  --blue-60: #0060df;
  --blue-70: #003eaa;
  --blue-80: #002275;
  --blue-90: #000f40;

  --grey-10: #f9f9fa;
  --grey-20: #ededf0;
  --grey-30: #d7d7db;
  --grey-40: #b1b1b3;
  --grey-50: #737373;
  --grey-60: #4a4a4f;
  --grey-70: #38383d;
  --grey-80: #2a2a2e;
  --grey-90: #0c0c0d;

  --tone-1: var(--grey-10);
  --tone-2: var(--grey-20);
  --tone-3: var(--grey-30);
  --tone-4: var(--grey-40);
  --tone-5: var(--grey-50);
  --tone-6: var(--grey-60);
  --tone-7: var(--grey-70);
  --tone-8: var(--grey-80);
  --tone-9: var(--grey-90);

	--accent-1: var(--blue-40);
  --accent-2: var(--blue-50);
  --accent-3: var(--blue-60);

  /*
  --primary-light-color: var(--grey-40);
  --light-accent-color: var(--grey-50);
  --mid-way-color: var(--grey-60);
  --primary-dark-color: var(--grey-70);
  --dark-accent: var(--grey-80);
  --darksest: var(--grey-90);
  --primary-accent-color: var(--blue-40);
  --primary-accent-color-dark: var(--blue-50);
  --primary-accent-color-darkest: var(--blue-60);
*/
  --in-content-page-color: var(--tone-4) !important;        /* Main Background Color */
  --in-content-page-background: var(--tone-7) !important;   /* Main Text Color       */
  --in-content-text-color: var(--tone-3) !important;        /* Text in Search Boxes  */
  --in-content-selected-text: var(--tone-1) !important;
  --in-content-box-background: var(--tone-6) !important;    /* Text Boxes */
  --in-content-box-background-odd: #f3f6fa;
  --in-content-box-background-hover: var(--tone-6) !important; /* Box Hover */
  --in-content-box-background-active: var(--tone-6) !important; /* Selected, but not hovered */
  --in-content-box-border-color: var(--tone-5) !important;  /* Text Box Border */
  --in-content-item-hover: rgba(0,149,221,0.25);
  --in-content-item-selected: var(--tone-8) !important;
  --in-content-border-highlight: var(--accent-1) !important;
  --in-content-border-focus: var(--accent-1) !important;    /* Border on Focus */
  --in-content-border-color: var(--tone-6) !important;
  --in-content-category-outline-focus: 1px dotted #0a84ff;
  --in-content-category-text: var(--tone-4) !important;     /* Non-selected Menu Items */
  --in-content-category-text-active: #0c0c0d;
  --in-content-category-text-selected: var(--accent-1) !important; /* Selected Menu Itemes */
  --in-content-category-text-selected-active: #0060df;
  --in-content-category-background-hover: rgba(12,12,13,0.1);
  --in-content-category-background-active: rgba(12,12,13,0.15);
  --in-content-category-background-selected-hover: rgba(12,12,13,0.15);
  --in-content-category-background-selected-active: rgba(12,12,13,0.2);
  --in-content-tab-color: #424f5a;
  --in-content-link-color: var(--accent-1) !important;
  --in-content-link-color-hover: var(--accent-2) !important;
  --in-content-link-color-active: #003eaa;
  --in-content-link-color-visited: #0a8dff;
  --in-content-primary-button-background: var(--accent-2) !important;
  --in-content-primary-button-background-hover: var(--accent-3) !important;
  --in-content-primary-button-background-active: var(--accent-3) !important;
  --in-content-table-border-dark-color: var(--tone-7) !important;
  --in-content-table-header-background: var(--accent-2) !important;

  --theme-selection-background: var(--accent-2) !important;
  --theme-selection-background-hover: var(--accent-1) !important;

  --in-content-category-header-background: var(--tone-8) !important;
  --selected-icon-fill-color: var(--tone-2) !important;

  --in-content-dark-header-background: var(--tone-9) !important;

  --code-green: #86de74 !important;

  --warning-color: #FCE19F;
  --warning-background-color: #44391F;

}

/*! Begin color overrides */
/*! End color overrides */