@atlaskit/top-layer 6.2.2 → 6.2.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/top-layer
 
+## 6.2.3
+
+### Patch Changes
+
+- [`aaf461aabb51c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aaf461aabb51c) -
+  `Popover` and `Dialog` now use the default text colour (`color.text`). Before, the browser gave
+  them its own default (`CanvasText`). This only affects content that does not set its own text
+  colour. In light and dark mode, that content now looks the same as content rendered in a portal
+  under `<body>`.
+
 ## 6.2.2
 
 ### Patch Changes

package/dist/cjs/dialog/dialog-content.compiled.css

@@ -27,6 +27,7 @@
 ._2hwx1wug{margin-right:auto}
 ._6hkqidpf:defined:defined:defined{inset-block-end:0}
 ._722r1ule[open][open][open]{display:block}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
 ._goh41wug:defined:defined:defined{pointer-events:auto}

package/dist/cjs/dialog/dialog-content.js

@@ -19,9 +19,10 @@ var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useSafariEscapeFix2 = require("../internal/use-safari-escape-fix");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
+// Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
+// KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 var surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 var dialogStyles = {

package/dist/cjs/popover/popover.compiled.css

@@ -25,6 +25,7 @@
 ._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._1yd01wug:defined:defined:defined{min-width:auto}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._az2pidpf:defined:defined:defined{padding-top:0}
 ._b2a9idpf:defined:defined:defined{margin-top:0}

package/dist/cjs/popover/popover.js

@@ -62,14 +62,19 @@ var supportsPopoverHint = (0, _once.default)(function () {
  *
  * The host is still a DOM child of its trigger for inheritance, so it inherits
  * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
- * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * what `<body>` gave the portal path. `font` and direction still inherit.
  * Not `all: initial`: that would also override the UA `[popover]` rules.
  *
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
+ * See `notes/decisions/surface-reset-color.md`.
+ *
  * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
  * The `satisfies` check below catches drift.
  */
 var surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 var styles = {

package/dist/es2019/dialog/dialog-content.compiled.css

@@ -27,6 +27,7 @@
 ._2hwx1wug{margin-right:auto}
 ._6hkqidpf:defined:defined:defined{inset-block-end:0}
 ._722r1ule[open][open][open]{display:block}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
 ._goh41wug:defined:defined:defined{pointer-events:auto}

package/dist/es2019/dialog/dialog-content.js

@@ -10,9 +10,10 @@ import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-l
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
-// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
+// Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
+// KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 const surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 const dialogStyles = {

package/dist/es2019/popover/popover.compiled.css

@@ -25,6 +25,7 @@
 ._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._1yd01wug:defined:defined:defined{min-width:auto}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._az2pidpf:defined:defined:defined{padding-top:0}
 ._b2a9idpf:defined:defined:defined{margin-top:0}

package/dist/es2019/popover/popover.js

@@ -56,14 +56,19 @@ const supportsPopoverHint = once(() => {
  *
  * The host is still a DOM child of its trigger for inheritance, so it inherits
  * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
- * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * what `<body>` gave the portal path. `font` and direction still inherit.
  * Not `all: initial`: that would also override the UA `[popover]` rules.
  *
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
+ * See `notes/decisions/surface-reset-color.md`.
+ *
  * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
  * The `satisfies` check below catches drift.
  */
 const surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 const styles = {

package/dist/esm/dialog/dialog-content.compiled.css

@@ -27,6 +27,7 @@
 ._2hwx1wug{margin-right:auto}
 ._6hkqidpf:defined:defined:defined{inset-block-end:0}
 ._722r1ule[open][open][open]{display:block}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
 ._goh41wug:defined:defined:defined{pointer-events:auto}

package/dist/esm/dialog/dialog-content.js

@@ -10,9 +10,10 @@ import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-l
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
-// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
+// Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
+// KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 var surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 var dialogStyles = {

package/dist/esm/popover/popover.compiled.css

@@ -25,6 +25,7 @@
 ._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._1yd01wug:defined:defined:defined{min-width:auto}
+._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
 ._ao8dglyw:defined:defined:defined{max-height:none}
 ._az2pidpf:defined:defined:defined{padding-top:0}
 ._b2a9idpf:defined:defined:defined{margin-top:0}

package/dist/esm/popover/popover.js

@@ -53,14 +53,19 @@ var supportsPopoverHint = once(function () {
  *
  * The host is still a DOM child of its trigger for inheritance, so it inherits
  * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
- * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * what `<body>` gave the portal path. `font` and direction still inherit.
  * Not `all: initial`: that would also override the UA `[popover]` rules.
  *
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
+ * See `notes/decisions/surface-reset-color.md`.
+ *
  * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
  * The `satisfies` check below catches drift.
  */
 var surfaceResetStyles = {
-  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
 };
 true;
 var styles = {

package/dist/types/internal/surface-reset.d.ts

@@ -7,7 +7,13 @@ type TSurfaceResetDeclarations = {
     textAlign: 'start';
     textIndent: '0';
     textTransform: 'none';
+    color: 'var(--ds-text)';
 };
+/**
+ * `cssMap` widens string literals to `string`, but keeps the literal type that
+ * `token()` returns.
+ */
+type TCompiledValue<TValue> = TValue extends `var(--ds-${string})` ? TValue : string;
 /**
  * The surface reset is duplicated in `popover/popover.tsx` and
  * `dialog/dialog-content.tsx` (ADS forbids shared styles). Each copy checks
@@ -18,7 +24,7 @@ type TSurfaceResetDeclarations = {
  */
 export type TBoostedSurfaceReset<TSelector extends string> = CompiledStyles<{
     [TKey in TSelector]: {
-        [TProperty in keyof TSurfaceResetDeclarations]: string;
+        [TProperty in keyof TSurfaceResetDeclarations]: TCompiledValue<TSurfaceResetDeclarations[TProperty]>;
     };
 }>;
 type TIsIdentical<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => (T extends B ? 1 : 2) ? true : false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "6.2.2",
+	"version": "6.2.3",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -40,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^6.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^20.3.0",
+		"@atlaskit/tokens": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",