@atlaskit/code 15.6.1 → 15.6.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/code
 
+## 15.6.3
+
+### Patch Changes
+
+- [#152305](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152305)
+  [`0f13c972be628`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0f13c972be628) -
+  [ux] Fix background color override using CSS variable for inlinde code behind a feature flag. If
+  successful, these changes will be made available in a later release.
+
+## 15.6.2
+
+### Patch Changes
+
+- [#146968](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146968)
+  [`55f40e0488d9e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/55f40e0488d9e) -
+  [ux] Use typography tokens where possible for code block component behind a feature flag. If
+  successful, these changes will be made available in a later release.
+
 ## 15.6.1
 
 ### Patch Changes

package/dist/cjs/code.js

@@ -19,6 +19,7 @@ var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _bidiWarning = _interopRequireDefault(require("./bidi-warning"));
 var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-warning-decorator"));
+var _constants = require("./internal/theme/constants");
 var _styles = require("./internal/theme/styles");
 var _excluded = ["testId"],
   _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
@@ -45,7 +46,8 @@ var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
   var styles = (0, _platformFeatureFlags.fg)('platform_design_system_team_code_new_typography') ? (0, _react2.css)({
     display: 'inline',
     padding: '2px 0.5ch',
-    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundColor: "var(".concat(_constants.VAR_CODE_BG_COLOR, ", ", "var(--ds-background-neutral, #091E420F)", ")"),
     borderRadius: "var(--ds-border-radius, 3px)",
     borderStyle: 'none',
     boxDecorationBreak: 'clone',

package/dist/cjs/internal/theme/get-theme.js

@@ -5,11 +5,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColorPalette = exports.getBaseTheme = exports.defaultBaseTheme = exports.default = void 0;
+exports.getColorPalette = exports.getBaseTheme = exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _constants = require("@atlaskit/theme/constants");
+var _tokens = require("@atlaskit/tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -20,15 +22,14 @@ var T800 = '#067384';
 var Y1100 = '#7A5D1A';
 var getBaseTheme = exports.getBaseTheme = function getBaseTheme() {
   return {
-    fontFamily: (0, _constants.codeFontFamily)(),
-    fontFamilyItalic: "SFMono-MediumItalic, ".concat((0, _constants.codeFontFamily)()),
+    fontFamily: (0, _platformFeatureFlags.fg)('platform_design_system_team_code_new_typography') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : (0, _constants.codeFontFamily)(),
+    fontFamilyItalic: "SFMono-MediumItalic, ".concat((0, _platformFeatureFlags.fg)('platform_design_system_team_code_new_typography') ? (0, _tokens.getTokenValue)('font.family.code') : (0, _constants.codeFontFamily)()),
     backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
     textColor: "var(--ds-text, ".concat(colors.N800, ")"),
     lineNumberColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
     lineNumberBgColor: "var(--ds-background-neutral, ".concat(colors.N30, ")")
   };
 };
-var defaultBaseTheme = exports.defaultBaseTheme = getBaseTheme();
 var getColorPalette = exports.getColorPalette = (0, _memoizeOne.default)(function () {
   return {
     highlightedLineBgColor: "var(--ds-background-neutral, ".concat(colors.N30, ")"),

package/dist/cjs/internal/theme/styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getLineNumWidth = exports.getCodeStyles = exports.getCodeBlockTheme = exports.getCodeBlockStyles = exports.getBaseCodeStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _getTheme = require("./get-theme");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -199,7 +200,7 @@ var getBaseCodeStyles = exports.getBaseCodeStyles = function getBaseCodeStyles(t
   return {
     fontSize: _constants.CODE_FONT_SIZE,
     fontFamily: theme.fontFamily,
-    fontWeight: 'normal',
+    fontWeight: (0, _platformFeatureFlags.fg)('platform_design_system_team_code_new_typography') ? "var(--ds-font-weight-regular, 400)" : 'normal',
     backgroundColor: "var(".concat(_constants.VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
     color: theme.textColor,
     borderStyle: 'none',

package/dist/es2019/code.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import CodeBidiWarning from './bidi-warning';
 import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
+import { VAR_CODE_BG_COLOR } from './internal/theme/constants';
 import { getCodeStyles } from './internal/theme/styles';
 /**
  * __Code__
@@ -28,7 +29,8 @@ const Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code({
   const styles = fg('platform_design_system_team_code_new_typography') ? css({
     display: 'inline',
     padding: '2px 0.5ch',
-    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundColor: `var(${VAR_CODE_BG_COLOR}, ${"var(--ds-background-neutral, #091E420F)"})`,
     borderRadius: "var(--ds-border-radius, 3px)",
     borderStyle: 'none',
     boxDecorationBreak: 'clone',

package/dist/es2019/internal/theme/get-theme.js

@@ -1,19 +1,20 @@
 import memoizeOne from 'memoize-one';
+import { fg } from '@atlaskit/platform-feature-flags';
 import * as colors from '@atlaskit/theme/colors';
 import { codeFontFamily } from '@atlaskit/theme/constants';
+import { getTokenValue } from '@atlaskit/tokens';
 // Hardcoded values have been used due to the current color palette not having any
 // accessible color options for Teal and Yellow and +20A
 const T800 = '#067384';
 const Y1100 = '#7A5D1A';
 export const getBaseTheme = () => ({
-  fontFamily: codeFontFamily(),
-  fontFamilyItalic: `SFMono-MediumItalic, ${codeFontFamily()}`,
+  fontFamily: fg('platform_design_system_team_code_new_typography') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : codeFontFamily(),
+  fontFamilyItalic: `SFMono-MediumItalic, ${fg('platform_design_system_team_code_new_typography') ? getTokenValue('font.family.code') : codeFontFamily()}`,
   backgroundColor: `var(--ds-background-neutral, ${colors.N20})`,
   textColor: `var(--ds-text, ${colors.N800})`,
   lineNumberColor: `var(--ds-text-subtlest, ${colors.N400})`,
   lineNumberBgColor: `var(--ds-background-neutral, ${colors.N30})`
 });
-export const defaultBaseTheme = getBaseTheme();
 export const getColorPalette = memoizeOne(() => {
   return {
     highlightedLineBgColor: `var(--ds-background-neutral, ${colors.N30})`,

package/dist/es2019/internal/theme/styles.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CODE_FONT_SIZE, CODE_LINE_HEIGHT, HIGHLIGHT_BORDER_WIDTH, LINE_NUMBER_GUTTER, SPACING, VAR_CODE_BG_COLOR, VAR_CODE_LINE_NUMBER_BG_COLOR } from './constants';
 import { getBaseTheme, getColorPalette } from './get-theme';
 export const getLineNumWidth = numLines => {
@@ -186,7 +187,7 @@ const syntaxKeywordColors = theme => ({
 export const getBaseCodeStyles = theme => ({
   fontSize: CODE_FONT_SIZE,
   fontFamily: theme.fontFamily,
-  fontWeight: 'normal',
+  fontWeight: fg('platform_design_system_team_code_new_typography') ? "var(--ds-font-weight-regular, 400)" : 'normal',
   backgroundColor: `var(${VAR_CODE_BG_COLOR},${theme.backgroundColor})`,
   color: theme.textColor,
   borderStyle: 'none',

package/dist/esm/code.js

@@ -13,6 +13,7 @@ import { css, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import CodeBidiWarning from './bidi-warning';
 import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
+import { VAR_CODE_BG_COLOR } from './internal/theme/constants';
 import { getCodeStyles } from './internal/theme/styles';
 /**
  * __Code__
@@ -30,7 +31,8 @@ var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
   var styles = fg('platform_design_system_team_code_new_typography') ? css({
     display: 'inline',
     padding: '2px 0.5ch',
-    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundColor: "var(".concat(VAR_CODE_BG_COLOR, ", ", "var(--ds-background-neutral, #091E420F)", ")"),
     borderRadius: "var(--ds-border-radius, 3px)",
     borderStyle: 'none',
     boxDecorationBreak: 'clone',

package/dist/esm/internal/theme/get-theme.js

@@ -2,23 +2,24 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import memoizeOne from 'memoize-one';
+import { fg } from '@atlaskit/platform-feature-flags';
 import * as colors from '@atlaskit/theme/colors';
 import { codeFontFamily } from '@atlaskit/theme/constants';
+import { getTokenValue } from '@atlaskit/tokens';
 // Hardcoded values have been used due to the current color palette not having any
 // accessible color options for Teal and Yellow and +20A
 var T800 = '#067384';
 var Y1100 = '#7A5D1A';
 export var getBaseTheme = function getBaseTheme() {
   return {
-    fontFamily: codeFontFamily(),
-    fontFamilyItalic: "SFMono-MediumItalic, ".concat(codeFontFamily()),
+    fontFamily: fg('platform_design_system_team_code_new_typography') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : codeFontFamily(),
+    fontFamilyItalic: "SFMono-MediumItalic, ".concat(fg('platform_design_system_team_code_new_typography') ? getTokenValue('font.family.code') : codeFontFamily()),
     backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
     textColor: "var(--ds-text, ".concat(colors.N800, ")"),
     lineNumberColor: "var(--ds-text-subtlest, ".concat(colors.N400, ")"),
     lineNumberBgColor: "var(--ds-background-neutral, ".concat(colors.N30, ")")
   };
 };
-export var defaultBaseTheme = getBaseTheme();
 export var getColorPalette = memoizeOne(function () {
   return {
     highlightedLineBgColor: "var(--ds-background-neutral, ".concat(colors.N30, ")"),

package/dist/esm/internal/theme/styles.js

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CODE_FONT_SIZE, CODE_LINE_HEIGHT, HIGHLIGHT_BORDER_WIDTH, LINE_NUMBER_GUTTER, SPACING, VAR_CODE_BG_COLOR, VAR_CODE_LINE_NUMBER_BG_COLOR } from './constants';
 import { getBaseTheme, getColorPalette } from './get-theme';
 export var getLineNumWidth = function getLineNumWidth(numLines) {
@@ -194,7 +195,7 @@ export var getBaseCodeStyles = function getBaseCodeStyles(theme) {
   return {
     fontSize: CODE_FONT_SIZE,
     fontFamily: theme.fontFamily,
-    fontWeight: 'normal',
+    fontWeight: fg('platform_design_system_team_code_new_typography') ? "var(--ds-font-weight-regular, 400)" : 'normal',
     backgroundColor: "var(".concat(VAR_CODE_BG_COLOR, ",").concat(theme.backgroundColor, ")"),
     color: theme.textColor,
     borderStyle: 'none',

package/dist/types/internal/theme/get-theme.d.ts

@@ -1,6 +1,5 @@
 import type { CodeBlockTheme, CodeTheme } from './types';
 export declare const getBaseTheme: () => CodeTheme;
-export declare const defaultBaseTheme: CodeTheme;
 export declare const getColorPalette: import("memoize-one").MemoizedFn<() => CodeBlockTheme>;
 declare const getTheme: () => CodeBlockTheme;
 export default getTheme;

package/dist/types-ts4.5/internal/theme/get-theme.d.ts

@@ -1,6 +1,5 @@
 import type { CodeBlockTheme, CodeTheme } from './types';
 export declare const getBaseTheme: () => CodeTheme;
-export declare const defaultBaseTheme: CodeTheme;
 export declare const getColorPalette: import("memoize-one").MemoizedFn<() => CodeBlockTheme>;
 declare const getTheme: () => CodeBlockTheme;
 export default getTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/code",
-	"version": "15.6.1",
+	"version": "15.6.3",
 	"description": "Code highlights short strings of code snippets inline with body text.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,9 +28,9 @@
 	"dependencies": {
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/theme": "^13.0.0",
+		"@atlaskit/theme": "^13.1.0",
 		"@atlaskit/tokens": "^2.0.0",
-		"@atlaskit/tooltip": "^18.7.0",
+		"@atlaskit/tooltip": "^18.8.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -44,7 +44,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^2.6.0",
+		"@atlaskit/ds-lib": "^3.1.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",