Verified Commit 95088e8f authored by henry's avatar henry Committed by boklm
Browse files

amend! TB 41817: tor-browser semantic colors. 

TB 41817: tor-browser semantic styling.

Note for rebases
================

DO NOT MANUALLY RESOLVE CONFLICTS in the following directory:
  toolkit/themes/shared/design-system/dist/

These files are generated by `./mach buildtokens`.
See #44406.

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/
parent 30fd1a25

browser/themes/shared/browser-shared.css

+1 −1
Original line number Diff line number Diff line
@@ -30,7 +30,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");

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

@import url("chrome://browser/skin/tor-urlbar-button.css");

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

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

+22 −0
Original line number Diff line number Diff line
@@ -73,6 +73,28 @@ let customFileHeader = ({ surface, platform }) => { 
  ].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 design-tokens.json",

    " * and run `npm run build` to see your changes. */",

  ].join("\n");

toolkit/themes/shared/design-system/dist/tokens-brand.css

+21 −0
Original line number Diff line number Diff line
@@ -2,6 +2,27 @@ 
 * License, v. 2.0. If a copy of the MPL was not distributed with this

 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */



/* 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 design-tokens.json

 * and run `npm run build` to see your changes. */

toolkit/themes/shared/design-system/dist/tokens-figma-colors.json

+7 −1
Original line number Diff line number Diff line
@@ -135,5 +135,11 @@ 
  "color/black/alpha/60": "oklch(0 0 0 / 60%)",

  "color/black/alpha/70": "oklch(0 0 0 / 70%)",

  "color/black/alpha/80": "oklch(0 0 0 / 80%)",

  "color/black/alpha/90": "oklch(0 0 0 / 90%)"

  "color/black/alpha/90": "oklch(0 0 0 / 90%)",

  "color/accent/tor/light": "{Colors$color/purple/60}",

  "color/accent/tor/dark": "{Colors$color/purple/30}",

  "color/accent/tor/hover/light": "{Colors$color/purple/70}",

  "color/accent/tor/hover/dark": "{Colors$color/purple/20}",

  "color/accent/tor/active/light": "{Colors$color/purple/80}",

  "color/accent/tor/active/dark": "{Colors$color/purple/10}"

}

toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json

+23 −1
Original line number Diff line number Diff line
@@ -6,6 +6,12 @@ 
  "border/radius/medium": 8,

  "border/radius/large": 16,

  "border/width": 1,

  "button/background/color/tor/light": "{Colors$color/accent/tor/light}",

  "button/background/color/tor/dark": "{Colors$color/accent/tor/dark}",

  "button/background/color/tor/hover/light": "{Colors$color/accent/tor/hover/light}",

  "button/background/color/tor/hover/dark": "{Colors$color/accent/tor/hover/dark}",

  "button/background/color/tor/active/light": "{Colors$color/accent/tor/active/light}",

  "button/background/color/tor/active/dark": "{Colors$color/accent/tor/active/dark}",

  "button/border/radius": "{Primitives$border/radius/medium}",

  "button/min/height": "{Primitives$size/item/large}",

  "button/min/height/small": "{Primitives$size/item/medium}",
@@ -14,8 +20,16 @@ 
  "button/padding/icon": 0,

  "button/size/icon": "{Primitives$button/min/height}",

  "button/size/icon/small": "{Primitives$button/min/height/small}",

  "button/text/color/tor/light": "{Colors$color/gray/05}",

  "button/text/color/tor/dark": "{Colors$color/gray/100}",

  "button/text/color/tor/hover/light": "{Colors$color/gray/05}",

  "button/text/color/tor/hover/dark": "{Colors$color/gray/100}",

  "button/text/color/tor/active/light": "{Colors$color/gray/05}",

  "button/text/color/tor/active/dark": "{Colors$color/gray/100}",

  "checkbox/margin/inline": "{Primitives$space/small}",

  "checkbox/size": "{Primitives$size/item/small}",

  "focus/outline/color/tor/light": "{Colors$color/accent/tor/light}",

  "focus/outline/color/tor/dark": "{Colors$color/accent/tor/dark}",

  "focus/outline/inset": -2,

  "focus/outline/offset": 2,

  "focus/outline/width": 2,
@@ -26,6 +40,12 @@ 
  "icon/size/large": "{Primitives$dimension/24}",

  "icon/size/xlarge": "{Primitives$dimension/32}",

  "input/text/min/height": "{Primitives$button/min/height}",

  "link/color/tor/light": "{Colors$color/accent/tor/light}",

  "link/color/tor/dark": "{Colors$color/accent/tor/dark}",

  "link/color/tor/hover/light": "{Colors$color/accent/tor/hover/light}",

  "link/color/tor/hover/dark": "{Colors$color/accent/tor/hover/dark}",

  "link/color/tor/active/light": "{Colors$color/accent/tor/active/light}",

  "link/color/tor/active/dark": "{Colors$color/accent/tor/active/dark}",

  "link/focus/outline/offset": 1,

  "page/main/content/width": 664,

  "dimension/2": 2,
@@ -117,5 +137,7 @@ 
  "box/shadow/level-4/shadow-2/x": 0,

  "box/shadow/level-4/shadow-2/y": 4,

  "box/shadow/level-4/shadow-2/blur": 16,

  "box/shadow/level-4/shadow-2/spread": 0

  "box/shadow/level-4/shadow-2/spread": 0,

  "text/color/tor/light": "{Colors$color/purple/60}",

  "text/color/tor/dark": "{Colors$color/purple/20}"

}