Commit 90b4958f authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

fixup! TB 41817: tor-browser semantic colors. 

TB 42025: Use new purple colours.
parent e343ef7f

toolkit/themes/shared/tor-colors.css

+21 −24
Original line number Diff line number Diff line 
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";



:root {

  /* Photon colors not available in Firefox. */

  --purple-30: #c069ff;

  --purple-40: #ad3bff;

  --purple-50: #9400ff;

  --purple-60: #8000d7;

  --purple-70: #6200a4;

  --purple-80: #440071;

  --purple-90: #25003e;



  /* On light backgrounds. */

  --tor-accent-color-light: var(--purple-60);

  --tor-accent-color-hover-light: var(--purple-70);

  --tor-accent-color-active-light: var(--purple-80);



  /* Acorn color grey light 05. */

  --tor-accent-color-light: var(--color-purple-60);

  --tor-accent-color-hover-light: var(--color-purple-70);

  --tor-accent-color-active-light: var(--color-purple-80);

  /* Color for text on --background-color-canvas. */

  --tor-text-color-light: var(--color-purple-60);

  /* Buttons. */

  --tor-button-text-color-light: var(--color-gray-05);

  --tor-button-text-color-hover-light: var(--color-gray-05);

  --tor-button-text-color-active-light: var(--color-gray-05);
@@ -23,25 +15,26 @@ 
  --tor-button-background-color-hover-light: var(--tor-accent-color-hover-light);

  --tor-button-background-color-active-light: var(--tor-accent-color-active-light);

  --tor-focus-outline-color-light: var(--tor-accent-color-light);

  /* Links. */

  --tor-link-color-light: var(--tor-accent-color-light);

  --tor-link-color-hover-light: var(--tor-accent-color-hover-light);

  --tor-link-color-active-light: var(--tor-accent-color-active-light);



  /* On dark backgrounds. */

  /* TODO: Need a dark theme purple color that gets *lighter* with hover and

   * active states, see tor-browser#42025 */

  --tor-accent-color-dark: var(--purple-30);

  --tor-accent-color-hover-dark: var(--purple-40);

  --tor-accent-color-active-dark: var(--purple-50);



  /* TODO: Use a dark text color for dark theme. tor-browser#41787. */

  --tor-button-text-color-dark: var(--color-gray-05);

  --tor-button-text-color-hover-dark: var(--color-gray-05);

  --tor-button-text-color-active-dark: var(--color-gray-05);

  --tor-accent-color-dark: var(--color-purple-30);

  --tor-accent-color-hover-dark: var(--color-purple-20);

  --tor-accent-color-active-dark: var(--color-purple-10);

  /* Color for text on --background-color-canvas. */

  --tor-text-color-dark: var(--color-purple-20);

  /* Buttons. */

  --tor-button-text-color-dark: var(--color-gray-100);

  --tor-button-text-color-hover-dark: var(--color-gray-100);

  --tor-button-text-color-active-dark: var(--color-gray-100);

  --tor-button-background-color-dark: var(--tor-accent-color-dark);

  --tor-button-background-color-hover-dark: var(--tor-accent-color-hover-dark);

  --tor-button-background-color-active-dark: var(--tor-accent-color-active-dark);

  --tor-focus-outline-color-dark: var(--tor-accent-color-dark);

  /* Links. */

  --tor-link-color-dark: var(--tor-accent-color-dark);

  --tor-link-color-hover-dark: var(--tor-accent-color-hover-dark);

  --tor-link-color-active-dark: var(--tor-accent-color-active-dark);
@@ -50,6 +43,7 @@ 
  --tor-accent-color: light-dark(var(--tor-accent-color-light), var(--tor-accent-color-dark));

  --tor-accent-color-hover: light-dark(var(--tor-accent-color-hover-light), var(--tor-accent-color-hover-dark));

  --tor-accent-color-active: light-dark(var(--tor-accent-color-active-light), var(--tor-accent-color-active-dark));

  --tor-text-color: light-dark(var(--tor-text-color-light), var(--tor-text-color-dark));

  --tor-button-text-color: light-dark(var(--tor-button-text-color-light), var(--tor-button-text-color-dark));

  --tor-button-text-color-hover: light-dark(var(--tor-button-text-color-hover-light), var(--tor-button-text-color-hover-dark));

  --tor-button-text-color-active: light-dark(var(--tor-button-text-color-active-light), var(--tor-button-text-color-active-dark));
@@ -69,6 +63,9 @@ 
    --tor-accent-color-hover: var(--color-accent-primary-hover);

    --tor-accent-color-active: var(--color-accent-primary-active);



    /* Match surrounding text. */

    --tor-text-color: currentColor;



    /* Use Firefox design system primary button colors. */

    --tor-button-text-color: var(--button-text-color-primary);

    --tor-button-text-color-hover: var(--button-text-color-primary-hover);