Commit dbf94872 authored by henry's avatar henry
Browse files

TB 41817: tor-browser semantic colors.

parent a3fefd7b

browser/themes/shared/browser-shared.css

+1 −0
Original line number Diff line number Diff line
@@ -28,6 +28,7 @@ 
@import url("chrome://browser/skin/customizableui/customizeMode.css");

@import url("chrome://browser/skin/UITour.css");

@import url("chrome://browser/skin/formautofill-notification.css");

@import url("chrome://global/skin/tor-colors.css");



:root,

body {

toolkit/themes/shared/desktop-jar.inc.mn

+1 −0
Original line number Diff line number Diff line
@@ -47,6 +47,7 @@ 
  skin/classic/global/tabbox.css                           (../../shared/tabbox.css)

  skin/classic/global/toolbar.css                          (../../shared/toolbar.css)

  skin/classic/global/toolbarbutton.css                    (../../shared/toolbarbutton.css)

  skin/classic/global/tor-colors.css                       (../../shared/tor-colors.css)

  skin/classic/global/tree/tree.css                        (../../shared/tree/tree.css)

  skin/classic/global/dirListing/dirListing.css            (../../shared/dirListing/dirListing.css)

#ifdef XP_MACOSX

toolkit/themes/shared/tor-colors.css

0 → 100644
+105 −0
Original line number Diff line number Diff line 
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";



:root {

  /* On light backgrounds. */

  --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);

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

  --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. */

  --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);



  /* Generic colors that adapt to theme. */

  --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));

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

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

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

  --tor-focus-outline-color: light-dark(var(--tor-focus-outline-color-light), var(--tor-focus-outline-color-dark));

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

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

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

}



@media ((prefers-contrast) or (forced-colors)) {

  :root {

    /* Use Firefox design system accent colors. */

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

    --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);

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

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

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

    --tor-button-background-color-active: var(--button-background-color-primary-active);



    /* Use Firefox design system default colors. */

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

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

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

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

  }

}



/* Has a higher specificity than `button` and `button.primary`. */

button.tor-button:is(*, .primary),

xul|button.tor-button:is(*, [default]),

.tor-button {

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

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

}



:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover {

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

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

}



:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover:active {

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

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

}



:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):focus-visible {

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

}