Commit 5bb99b26 authored by Tim Giles's avatar Tim Giles Committed by tgiles@mozilla.com
Browse files

Bug 1946790 - Update --border-color token, add --border-color-transparent.... 

Bug 1946790 - Update --border-color token, add --border-color-transparent. r=reusable-components-reviewers,desktop-theme-reviewers,hjones

We update the --border-color token to use #CFCFD8 in light mode,
forced-colors mode. At the same time, we changed the name of the
previous border color token to --border-color-transparent.

By utilizing the --border-color-transparent token, we can ensure that
borders do not appear around certain UI elements until the user requests
higher contrast or forced colors.

Differential Revision: https://phabricator.services.mozilla.com/D248362
parent dd6576de

toolkit/themes/shared/design-system/design-tokens.json

+10 −1
Changes for toolkit/themes/shared/design-system/design-tokens.json: 10 added lines, 1 removed line.
Original line number Diff line number Diff line
@@ -70,7 +70,16 @@ 
    "color": {

      "@base": {

        "value": {

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

          "comment": "TODO Bug 1821203 - Gray tones need to be consolidated",

          "light": "#CFCFD8",

          "dark": "#3A3944",

          "prefersContrast": "CanvasText"

        }

      },

      "transparent": {

        "value": {

          "default": "transparent",

          "prefersContrast": "CanvasText"

        }

      },

      "card": {

toolkit/themes/shared/design-system/tokens-figma-theme.json

+6 −1
Changes for toolkit/themes/shared/design-system/tokens-figma-theme.json: 6 added lines, 1 removed line.
Original line number Diff line number Diff line
@@ -35,9 +35,14 @@ 
    "forcedColors": "{Theme$background/color/canvas}"

  },

  "border/color": {

    "light": "#CFCFD8",

    "dark": "#3A3944",

    "forcedColors": "{HCM Theme$CanvasText}"

  },

  "border/color/transparent": {

    "light": "transparent",

    "dark": "transparent",

    "forcedColors": "{Theme$text/color}"

    "forcedColors": "{HCM Theme$CanvasText}"

  },

  "border/color/card": {

    "light": "color-mix(in srgb, currentColor 10%, transparent)",

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

+4 −1
Changes for toolkit/themes/shared/design-system/tokens-shared.css: 4 added lines, 1 removed line.
Original line number Diff line number Diff line
@@ -18,10 +18,12 @@ 
    --background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-90));



    /** Border **/

    --border-color: light-dark(#CFCFD8, #3A3944);

    --border-color-card: color-mix(in srgb, currentColor 10%, transparent);

    --border-color-interactive-hover: var(--border-color-interactive);

    --border-color-interactive-active: var(--border-color-interactive);

    --border-color-interactive-disabled: var(--border-color-interactive);

    --border-color-transparent: transparent;

    --border-radius-circle: 9999px;

    --border-radius-small: 4px;

    --border-radius-medium: 8px;
@@ -305,10 +307,11 @@ 
      --background-color-warning: var(--background-color-canvas);



      /** Border **/

      --border-color: var(--text-color);

      --border-color: CanvasText;

      --border-color-card: color-mix(in srgb, currentColor 41%, transparent);

      --border-color-deemphasized: currentColor;

      --border-color-interactive: var(--text-color);

      --border-color-transparent: CanvasText;



      /** Button **/

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

toolkit/themes/shared/design-system/tokens-storybook.mjs

+25 −2
Changes for toolkit/themes/shared/design-system/tokens-storybook.mjs: 25 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -212,7 +212,20 @@ export const storybookTables = { 
    },

  ],

  "border-color": [

    { value: { prefersContrast: "var(--text-color)" }, name: "--border-color" },

    {

      value: {

        comment: "TODO Bug 1946826 - Border colors need to be consolidated",

        light: "#CFCFD8",

        dark: "#3A3944",

        prefersContrast: "CanvasText",

        default: "light-dark(#CFCFD8, #3A3944)",

      },

      name: "--border-color",

    },

    {

      value: { default: "transparent", prefersContrast: "CanvasText" },

      name: "--border-color-transparent",

    },

    {

      value: {

        default: "color-mix(in srgb, currentColor 10%, transparent)",
@@ -1011,7 +1024,17 @@ export const variableLookupTable = { 
    prefersContrast: "var(--background-color-canvas)",

    default: "light-dark(var(--color-yellow-0), var(--color-yellow-90))",

  },

  "border-color": { prefersContrast: "var(--text-color)" },

  "border-color": {

    comment: "TODO Bug 1946826 - Border colors need to be consolidated",

    light: "#CFCFD8",

    dark: "#3A3944",

    prefersContrast: "CanvasText",

    default: "light-dark(#CFCFD8, #3A3944)",

  },

  "border-color-transparent": {

    default: "transparent",

    prefersContrast: "CanvasText",

  },

  "border-color-card": {

    default: "color-mix(in srgb, currentColor 10%, transparent)",

    prefersContrast: "color-mix(in srgb, currentColor 41%, transparent)",