@atlaskit/tokens 1.25.2 → 1.26.0

package/dist/esm/tokens/atlassian-light-increased-contrast/color/chart.js

@@ -0,0 +1,412 @@
+var color = {
+  color: {
+    chart: {
+      brand: {
+        '[default]': {
+          value: 'Blue700'
+        },
+        // TODO: Confirm. This token wasn't included in theme design, but color.chart.brand.bold was... and that token doesn't exist?
+        // Assuming it's meant to be color.chart.brand.hovered
+        hovered: {
+          value: 'Blue800'
+        }
+      },
+      neutral: {
+        '[default]': {
+          value: 'Neutral700'
+        },
+        hovered: {
+          value: 'Neutral800'
+        }
+      },
+      success: {
+        '[default]': {
+          '[default]': {
+            value: 'Green800'
+          },
+          // TODO: Confirm. No hovered colors included in theme design for many tokens here but I've stepped them up by one
+          // or they won't have a color difference to default states
+          hovered: {
+            value: 'Green900'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Green900'
+          },
+          hovered: {
+            value: 'Green1000'
+          }
+        }
+      },
+      danger: {
+        '[default]': {
+          '[default]': {
+            value: 'Red700'
+          },
+          hovered: {
+            value: 'Red800'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Red900'
+          },
+          hovered: {
+            value: 'Red1000'
+          }
+        }
+      },
+      warning: {
+        '[default]': {
+          '[default]': {
+            value: 'Yellow800'
+          },
+          hovered: {
+            value: 'Yellow900'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Yellow900'
+          },
+          hovered: {
+            value: 'Yellow1000'
+          }
+        }
+      },
+      information: {
+        '[default]': {
+          '[default]': {
+            value: 'Blue700'
+          },
+          hovered: {
+            value: 'Blue800'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Blue900'
+          },
+          hovered: {
+            value: 'Blue1000'
+          }
+        }
+      },
+      discovery: {
+        '[default]': {
+          '[default]': {
+            value: 'Purple700'
+          },
+          hovered: {
+            value: 'Purple800'
+          }
+        },
+        bold: {
+          '[default]': {
+            value: 'Purple900'
+          },
+          hovered: {
+            value: 'Purple1000'
+          }
+        }
+      },
+      categorical: {
+        1: {
+          '[default]': {
+            value: 'Teal800'
+          },
+          hovered: {
+            value: 'Teal900'
+          }
+        },
+        3: {
+          '[default]': {
+            value: 'Orange800'
+          },
+          hovered: {
+            value: 'Orange900'
+          }
+        },
+        6: {
+          '[default]': {
+            value: 'Purple800'
+          },
+          hovered: {
+            value: 'Purple900'
+          }
+        }
+      },
+      blue: {
+        bold: {
+          '[default]': {
+            value: 'Blue800'
+          },
+          hovered: {
+            value: 'Blue900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Blue900'
+          },
+          hovered: {
+            value: 'Blue1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Blue1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Blue1100).
+            value: '#022353'
+          }
+        }
+      },
+      red: {
+        bold: {
+          '[default]': {
+            value: 'Red800'
+          },
+          hovered: {
+            value: 'Red900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Red900'
+          },
+          hovered: {
+            value: 'Red1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Red1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Red1100).
+            value: '#49120C'
+          }
+        }
+      },
+      orange: {
+        bold: {
+          '[default]': {
+            value: 'Orange800'
+          },
+          hovered: {
+            value: 'Orange900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Orange900'
+          },
+          hovered: {
+            value: 'Orange1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Orange1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Orange1100).
+            value: '#3E2108'
+          }
+        }
+      },
+      yellow: {
+        bold: {
+          '[default]': {
+            value: 'Yellow800'
+          },
+          hovered: {
+            value: 'Yellow900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Yellow900'
+          },
+          hovered: {
+            value: 'Yellow1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Yellow1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Yellow1100).
+            value: '#342800'
+          }
+        }
+      },
+      green: {
+        bold: {
+          '[default]': {
+            value: 'Green800'
+          },
+          hovered: {
+            value: 'Green900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Green900'
+          },
+          hovered: {
+            value: 'Green1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Green1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Green1100).
+            value: '#0F3324'
+          }
+        }
+      },
+      teal: {
+        bold: {
+          '[default]': {
+            value: 'Teal800'
+          },
+          hovered: {
+            value: 'Teal900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Teal900'
+          },
+          hovered: {
+            value: 'Teal1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Teal1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Teal1100).
+            value: '#103034'
+          }
+        }
+      },
+      purple: {
+        bold: {
+          '[default]': {
+            value: 'Purple800'
+          },
+          hovered: {
+            value: 'Purple900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Purple900'
+          },
+          hovered: {
+            value: 'Purple1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Purple1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Purple1100).
+            value: '#211A47'
+          }
+        }
+      },
+      magenta: {
+        bold: {
+          '[default]': {
+            value: 'Magenta800'
+          },
+          hovered: {
+            value: 'Magenta900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Magenta900'
+          },
+          hovered: {
+            value: 'Magenta1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Magenta1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Magenta1100).
+            value: '#37172A'
+          }
+        }
+      },
+      lime: {
+        bold: {
+          '[default]': {
+            value: 'Lime800'
+          },
+          hovered: {
+            value: 'Lime900'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Lime900'
+          },
+          hovered: {
+            value: 'Lime1000'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Lime1000'
+          },
+          hovered: {
+            // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Lime1100).
+            value: '#233013'
+          }
+        }
+      },
+      gray: {
+        bold: {
+          '[default]': {
+            value: 'Neutral700'
+          },
+          hovered: {
+            value: 'Neutral800'
+          }
+        },
+        bolder: {
+          '[default]': {
+            value: 'Neutral800'
+          },
+          hovered: {
+            value: 'Neutral900'
+          }
+        },
+        boldest: {
+          '[default]': {
+            value: 'Neutral900'
+          },
+          hovered: {
+            value: 'Neutral1000'
+          }
+        }
+      }
+    }
+  }
+};
+export default color;

package/dist/esm/tokens/atlassian-light-increased-contrast/color/icon.js

@@ -0,0 +1,43 @@
+var color = {
+  color: {
+    icon: {
+      '[default]': {
+        value: 'Neutral1000'
+      },
+      subtle: {
+        value: 'Neutral900'
+      },
+      // TODO: Confirm - was not included in theme design but seems like it should be darker
+      // disabled: {
+      //   value: 'Neutral400A',
+      // },
+      brand: {
+        value: 'Blue800'
+      },
+      selected: {
+        value: 'Blue800'
+      },
+      danger: {
+        value: 'Red700'
+      },
+      warning: {
+        '[default]': {
+          value: 'Orange800'
+        },
+        inverse: {
+          value: 'Neutral0'
+        }
+      },
+      success: {
+        value: 'Green800'
+      },
+      discovery: {
+        value: 'Purple700'
+      },
+      information: {
+        value: 'Blue800'
+      }
+    }
+  }
+};
+export default color;

package/dist/esm/tokens/atlassian-light-increased-contrast/color/interaction.js

@@ -0,0 +1,16 @@
+var color = {
+  color: {
+    interaction: {
+      // TODO: Confirm - was not included in theme design but seems like it should be darker
+      // hovered: {
+      //   // @ts-ignore temporary values
+      //   value: '#00000029',
+      // },
+      // pressed: {
+      //   // @ts-ignore temporary values
+      //   value: '#00000052',
+      // },
+    }
+  }
+};
+export default color;

package/dist/esm/tokens/atlassian-light-increased-contrast/color/skeleton.js

@@ -0,0 +1,15 @@
+var color = {
+  color: {
+    skeleton: {
+      // TODO: Confirm - was not included in theme design but seems like it should be darker
+      // but I think they should definitely be darker?
+      // '[default]': {
+      //   value: 'Neutral200A',
+      // },
+      // subtle: {
+      //   value: 'Neutral100A',
+      // },
+    }
+  }
+};
+export default color;

package/dist/esm/tokens/atlassian-light-increased-contrast/color/text.js

@@ -0,0 +1,50 @@
+var color = {
+  color: {
+    text: {
+      '[default]': {
+        value: 'Neutral1100'
+      },
+      subtle: {
+        value: 'Neutral1000'
+      },
+      subtlest: {
+        value: 'Neutral900'
+      },
+      brand: {
+        value: 'Blue900'
+      },
+      selected: {
+        value: 'Blue900'
+      },
+      danger: {
+        value: 'Red900'
+      },
+      warning: {
+        '[default]': {
+          value: 'Orange900'
+        },
+        inverse: {
+          value: 'Neutral0'
+        }
+      },
+      success: {
+        value: 'Green900'
+      },
+      information: {
+        value: 'Blue900'
+      },
+      discovery: {
+        value: 'Purple900'
+      }
+    },
+    link: {
+      '[default]': {
+        value: 'Blue900'
+      },
+      pressed: {
+        value: 'Blue1000'
+      }
+    }
+  }
+};
+export default color;

package/dist/esm/tokens/atlassian-light-increased-contrast/elevation/shadow.js

@@ -0,0 +1,56 @@
+var shadow = {
+  elevation: {
+    shadow: {
+      raised: {
+        value: [{
+          radius: 0,
+          spread: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'Neutral1100',
+          opacity: 0.5,
+          inset: true
+        }]
+      },
+      // TODO: Confirm - overflow not included in theme design
+      // overflow: {
+      //   '[default]': {
+      //     value: [
+      //       {
+      //         radius: 8,
+      //         offset: { x: 0, y: 0 },
+      //         color: 'Neutral1100',
+      //         opacity: 0.16,
+      //       },
+      //       {
+      //         radius: 1,
+      //         offset: { x: 0, y: 0 },
+      //         color: 'Neutral1100',
+      //         opacity: 0.12,
+      //       },
+      //     ],
+      //   },
+      //   // @ts-ignore no current palette colour for this yet
+      //   spread: { value: '#091e4229' },
+      //   // @ts-ignore no current palette colour for this yet
+      //   perimeter: { value: '#091e421f' },
+      // },
+      overlay: {
+        value: [{
+          radius: 0,
+          spread: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'Neutral1100',
+          opacity: 0.5,
+          inset: true
+        }]
+      }
+    }
+  }
+};
+export default shadow;

package/dist/esm/tokens/atlassian-light-increased-contrast/elevation/surface.js

@@ -0,0 +1,12 @@
+var elevation = {
+  elevation: {
+    surface: {
+      // TODO: Confirm - seems too light in Jira issue view. Difficult to identify columns
+      sunken: {
+        // @ts-expect-error TODO: Consider extending palette. Uses value outside range of palettes (would be Neutral50).
+        value: '#FCFDFE'
+      }
+    }
+  }
+};
+export default elevation;

package/dist/esm/utils/configure-page.js

@@ -1,6 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import getThemeHtmlAttrs from '../get-theme-html-attrs';
 import ColorModeObserver from './color-mode-listeners';
+import ContrastModeObserver from './contrast-mode-listeners';
 
 /**
  * Given ThemeState, sets appropriate html attributes on the documentElement,
@@ -15,6 +17,16 @@ export default function configurePage(themeState) {
   } else {
     ColorModeObserver.unbind();
   }
+  if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
+    if (themeState.contrastMode === 'auto') {
+      // Set contrastMode based on the user preference
+      themeState.contrastMode = ContrastModeObserver.getContrastMode();
+      // Bind a listener (if one doesn't already exist) to keep contrastMode updated
+      ContrastModeObserver.bind();
+    } else {
+      ContrastModeObserver.unbind();
+    }
+  }
   var themeAttributes = getThemeHtmlAttrs(themeState);
   Object.entries(themeAttributes).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
@@ -23,6 +35,9 @@ export default function configurePage(themeState) {
     document.documentElement.setAttribute(key, value);
   });
   return function () {
-    return ColorModeObserver.unbind;
+    ColorModeObserver.unbind();
+    if (getBooleanFF('platform.design-system-team.increased-contrast-themes')) {
+      ContrastModeObserver.unbind();
+    }
   };
 }

package/dist/esm/utils/contrast-mode-listeners.js

@@ -0,0 +1,58 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { bind as _bind } from 'bind-event-listener';
+import { CONTRAST_MODE_ATTRIBUTE } from '../constants';
+import { moreContrastMediaQuery } from './theme-loading';
+var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+
+/**
+ * Updates the current theme when the system contrast preference changes. Should be bound
+ * to an event listener listening on the '(prefers-contrast: more)' query
+ * @param e The event representing a change in system theme.
+ */
+function checkNativeListener(e) {
+  var element = document.documentElement;
+  element.setAttribute(CONTRAST_MODE_ATTRIBUTE, e.matches ? 'more' : 'no-preference');
+}
+var contrastModeMql = isMatchMediaAvailable && window.matchMedia(moreContrastMediaQuery);
+var ContrastModeObserver = /*#__PURE__*/function () {
+  function ContrastModeObserver() {
+    _classCallCheck(this, ContrastModeObserver);
+    _defineProperty(this, "unbindContrastChangeListener", null);
+  }
+  _createClass(ContrastModeObserver, [{
+    key: "getContrastMode",
+    value: function getContrastMode() {
+      if (!contrastModeMql) {
+        return 'no-preference';
+      }
+      return contrastModeMql !== null && contrastModeMql !== void 0 && contrastModeMql.matches ? 'more' : 'no-preference';
+    }
+  }, {
+    key: "bind",
+    value: function bind() {
+      if (contrastModeMql && this.unbindContrastChangeListener === null) {
+        this.unbindContrastChangeListener = _bind(contrastModeMql, {
+          type: 'change',
+          listener: checkNativeListener
+        });
+      }
+    }
+  }, {
+    key: "unbind",
+    value: function unbind() {
+      if (this.unbindContrastChangeListener) {
+        this.unbindContrastChangeListener();
+        this.unbindContrastChangeListener = null;
+      }
+    }
+  }]);
+  return ContrastModeObserver;
+}();
+/**
+ * A singleton contrast mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
+ * that can be unbound by any consumer when no longer needed.
+ */
+var SingletonContrastModeObserver = new ContrastModeObserver();
+export default SingletonContrastModeObserver;