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

TB 41817: tor-browser semantic styling.

parent d885cbcc

browser/themes/shared/browser-shared.css

+1 −0
Original line number Diff line number Diff line
@@ -33,6 +33,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-common.css");



:root,

body {

toolkit/themes/shared/design-system/config/tokens-config.js

+22 −0
Original line number Diff line number Diff line
@@ -319,6 +319,28 @@ let customFileHeader = ({ surface, platform, componentName = "" }) => { 
  ].join("\n");



  let commentString = [

    // Add an additional note for Tor Browser developers! See tor-browser#44406.

    "/* Tor Browser instructions",

    " * ========================",

    " *",

    " * DO NOT EDIT this file directly!",

    " *",

    " * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!",

    " *",

    " * This is a file generated by `./mach buildtokens`.",

    " *",

    " * When resolving conflicts, first resolve other conflicts outside the",

    " * 'dist' directory, if there are any:",

    " *   git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'",

    " *",

    " * Then regenerate these 'dist' files:",

    " *",

    " *   ./mach buildtokens",

    " *",

    " * Then add the generated files as resolved:",

    " *",

    " *   git add toolkit/themes/shared/design-system/dist/",

    " */",

    `/* DO NOT EDIT this file directly, instead modify ${componentName ? `moz-${componentName}.tokens.json` : "the relevant *.tokens.json file"}`,

    " * and run `mach buildtokens` to see your changes. */",

  ].join("\n");

toolkit/themes/shared/design-system/src/tokens/base/color.tokens.json

+36 −0
Original line number Diff line number Diff line
@@ -628,6 +628,42 @@ 
        },

        "prefersContrast": "AccentColor"

      }

    },

    "tor": {

      "light": { "value": "{color.purple.60}" },

      "dark": { "value": "{color.purple.30}" },

      "@base": {

        "value": {

          "light": "{color.accent.tor.light}",

          "dark": "{color.accent.tor.dark}",

          "prefersContrast": "{color.accent.primary.@base}",

          "forcedColors": "{color.accent.primary.@base}"

        }

      },

      "hover": {

        "light": { "value": "{color.purple.70}" },

        "dark": { "value": "{color.purple.20}" },

        "@base": {

          "value": {

            "light": "{color.accent.tor.hover.light}",

            "dark": "{color.accent.tor.hover.dark}",

            "prefersContrast": "{color.accent.primary.hover}",

            "forcedColors": "{color.accent.primary.hover}"

          }

        }

      },

      "active": {

        "light": { "value": "{color.purple.80}" },

        "dark": { "value": "{color.purple.10}" },

        "@base": {

          "value": {

            "light": "{color.accent.tor.active.light}",

            "dark": "{color.accent.tor.active.dark}",

            "prefersContrast": "{color.accent.primary.active}",

            "forcedColors": "{color.accent.primary.active}"

          }

        }

      }

    }

  }

}

toolkit/themes/shared/design-system/src/tokens/base/focus.tokens.json

+18 −4
Original line number Diff line number Diff line 
{

  "outline": {

    "@base": {

      "value": "{focus.outline.width} solid {focus.outline.color}"

      "value": "{focus.outline.width} solid {focus.outline.color.@base}"

    },

    "color": {

      "@base": {

        "value": {

          "default": "{color.accent.primary.@base}",

          "forcedColors": "{text.color.@base}"

        }

      },

      "tor": {

        "light": { "value": "{color.accent.tor.light}" },

        "dark": { "value": "{color.accent.tor.dark}" },

        "@base": {

          "value": {

            "light": "{focus.outline.color.tor.light}",

            "dark": "{focus.outline.color.tor.dark}",

            "prefersContrast": "{focus.outline.color.@base}",

            "forcedColors": "{focus.outline.color.@base}"

          }

        }

      }

    },

    "inset": {

      "value": "calc(-1 * {focus.outline.width})"

    },

toolkit/themes/shared/design-system/src/tokens/base/text.tokens.json

+12 −0
Original line number Diff line number Diff line
@@ -56,6 +56,18 @@ 
          }

        }

      }

    },

    "tor": {

      "light": { "value": "{color.purple.60}" },

      "dark": { "value": "{color.purple.20}" },

      "@base": {

        "value": {

          "light": "{text.color.tor.light}",

          "dark": "{text.color.tor.dark}",

          "prefersContrast": "inherit",

          "forcedColors": "inherit"

        }

      }

    }

  }

}