@atlaskit/primitives 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/primitives
 
+## 1.0.4
+
+### Patch Changes
+
+- [`74f7af9882b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74f7af9882b) - [ux] correct fallback color of token color.border.focused to meet contrast requirement
+
+## 1.0.3
+
+### Patch Changes
+
+- [`298df94426c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/298df94426c) - Regenerates codegen'd artifacts as a result of introducting new brand background design tokens.
+- Updated dependencies
+
 ## 1.0.2
 
 ### Patch Changes

package/constellation/box/code.mdx

@@ -4,6 +4,14 @@ description: Box is a primitive component that leverages the foundations of the
 order: 1
 ---
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 import BoxProps from '!!extract-react-types-loader!../../extract-react-types/box-props'
 
 ## Props

package/constellation/box/examples.mdx

@@ -8,6 +8,13 @@ import BoxBasic from '../../examples/constellation/box/basic';
 import BoxPadding from '../../examples/constellation/box/padding';
 import BoxBackgroundColor from '../../examples/constellation/box/background-color';
 import BoxXcss from '../../examples/constellation/box/xcss';
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
 
 ## Basic
 
@@ -31,7 +38,7 @@ Padding props can be used to access spacing design token and control internal la
 
 ## xCSS
 
-Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value. 
+Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value.
 
 <Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
 

package/constellation/flex/code.mdx

@@ -1,7 +1,19 @@
 ---
 title: Flex
-description: Flex is a primitive component that leverages the foundations of the Atlassian Design System.
+description: Flex is a primitive layout component that implements the CSS Flexbox API.
 order: 1
 ---
 
-TBD
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import FlexProps from '!!extract-react-types-loader!../../extract-react-types/flex-props'
+
+## Props
+
+<PropsTable heading="" props={FlexProps} />

package/constellation/flex/examples.mdx

@@ -9,6 +9,15 @@ import FlexAlignItems from '../../examples/constellation/flex/align-items';
 import FlexJustifyContent from '../../examples/constellation/flex/justify-content';
 import FlexWrap from '../../examples/constellation/flex/wrap';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+
 ## Basic
 
 The `Flex` component is designed as a very basic mapping to the CSS Flexbox API.

package/constellation/grid/code.mdx

@@ -1,7 +1,19 @@
 ---
 title: Grid
-description: Grid is a primitive component that leverages the foundations of the Atlassian Design System.
+description: Grid is a primitive layout component that implements the CSS Grid API.
 order: 1
 ---
 
-TBD
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import BoxProps from '!!extract-react-types-loader!../../extract-react-types/grid-props'
+
+## Props
+
+<PropsTable heading="" props={BoxProps} />

package/constellation/grid/examples.mdx

@@ -9,6 +9,14 @@ import GridGap from '../../examples/constellation/grid/gap';
 import GridTemplate from '../../examples/constellation/grid/template';
 import GridAutoFlow from '../../examples/constellation/grid/auto-flow';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Basic
 
 The `Grid` component is designed as a very basic mapping to the CSS Grid API.

package/constellation/inline/code.mdx

@@ -4,6 +4,14 @@ description: Inline is a primitive component based on flexbox that manages the h
 order: 1
 ---
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 import InlineProps from '!!extract-react-types-loader!../../extract-react-types/inline-props'
 
 ## Props

package/constellation/inline/examples.mdx

@@ -15,9 +15,17 @@ import InlineSeparator from '../../examples/constellation/inline/separator';
 import InlineGrow from '../../examples/constellation/inline/grow';
 import InlineAs from '../../examples/constellation/inline/as';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Basic
 
-Inline is an abstraction to efficiently lay-out a group of elements horizontally.  
+Inline is an abstraction to efficiently lay-out a group of elements horizontally.
 Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
 
 <Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />

package/constellation/overview/index.mdx

@@ -11,6 +11,14 @@ import boxUsageExample from './images/box-usage-example.png';
 import inlineUsageExample from './images/inline-usage-example.png';
 import stackUsageExample from './images/stack-usage-example.png';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 Primitive components are a new type of component for layouts and placement of elements.
 They act as building blocks to compose different parts of the user experience,
 from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured).

package/constellation/responsive/01-show/examples.mdx

@@ -0,0 +1,31 @@
+---
+title: Show
+description: Show is a responsive primitive that displays children at specified breakpoints
+order: 1
+---
+
+import ShowExample from '../../../examples/constellation/responsive/show';
+import ShowHideExample from '../../../examples/constellation/responsive/show-hide';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+
+### Show
+
+This allows you to Show the children using CSS `display: …` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+
+Note that this does not skip rendering of your children; the contents are rendered into the DOM at all times, so there is typically little performance savings—primarily that this is not painted.
+
+<Example Component={ShowExample} packageName="@atlaskit/primitives/responsive" />
+
+### Mixing Show and Hide
+
+Prefer using consistent `above` or `below` for readability and consistency.
+
+<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />

package/constellation/responsive/02-hide/examples.mdx

@@ -0,0 +1,30 @@
+---
+title: Hide
+description: Hide is a responsive primitive that hides children at specified breakpoints
+order: 1
+---
+
+import HideExample from '../../../examples/constellation/responsive/hide';
+import ShowHideExample from '../../../examples/constellation/responsive/show-hide';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+### Hide
+
+This allows you to Hide the children using CSS `display: none` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+
+When hidden, this does not skip rendering of your children; the contents are rendered into the DOM at all times so there is typically little performance savings—primarily that this is not painted.
+
+<Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />
+
+### Mixing Show and Hide
+
+Prefer using consistent `above` or `below` for readability and consistency.
+
+<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />

package/constellation/responsive/03-breakpoints/examples.mdx

@@ -0,0 +1,51 @@
+---
+title: Breakpoints
+description: Breakpoints can be accessed through the media object for use in styles
+order: 1
+---
+
+import { MediaQueriesTable } from '@af/design-system-docs-ui';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+### Media Queries
+Media queries can be applied through the `media` object.
+
+
+<MediaQueriesTable />
+
+When used with `xcss`, be aware that a media query can't contain another media query to prevent arbitrary nesting. Additionally, pseudo-selectors can't contain media queries. To use media queries and pseudos, the media query must contain the pseudo.
+
+```
+import { xcss } from '@atlaskit/primitives';
+import { media } from '@atlaskit/primitives/responsive';
+
+const someStyles = xcss({
+  // This is okay, since media queries can contain pseudos
+  [media.above.md]: {
+    ':hover': {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+
+  // This is not okay, since pseudos can't contain media queries
+  ':hover': {
+    [media.above.md]: {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+
+  // This is not okay, since media queries can't contain media queries
+  [media.above.md]: {
+    [media.above.xs]: {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+});
+```

package/constellation/responsive/examples.mdx

@@ -10,6 +10,15 @@ import ShowExample from '../../examples/constellation/responsive/show';
 import HideExample from '../../examples/constellation/responsive/hide';
 import ShowHideExample from '../../examples/constellation/responsive/show-hide';
 
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Responsive `css` or `xcss`
 
 Utilize our media queries exposed in `css`, `styled`, or `xcss` as computed keys to build responsive UIs. Learn more about these media query exports in [usage](/components/primitives/responsive/usage).
@@ -26,26 +35,6 @@ Please use `xcss` whenever possible to ensure consistency and safety with style
 
 ## Responsive primitives
 
-Consider these shortcuts to writing your own custom media queries.  Composing with our primitives will be far quicker and consistent to implement, but may result in excess DOM nodes.
-
-### Show
-
-This allows you to Show the children using CSS `display: …` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
-
-Note that this does not skip rendering of your children; the contents are rendered into the DOM at all times, so there is typically little performance savings—primarily that this is not painted.
-
-<Example Component={ShowExample} packageName="@atlaskit/primitives/responsive" />
-
-### Hide
-
-This allows you to Hide the children using CSS `display: none` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
-
-When hidden, this does not skip rendering of your children; the contents are rendered into the DOM at all times so there is typically little performance savings—primarily that this is not painted.
-
-<Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />
-
-### Mixing Show and Hide
-
-Prefer using consistent `above` or `below` for readability and consistency.
-
-<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />
+Consider these shortcuts to writing your own custom media queries. Composing with our primitives will be far quicker and consistent to implement, but may result in excess DOM nodes.
+* [Show](/components/primitives/responsive/show)
+* [Hide](/components/primitives/responsive/hide)

package/constellation/stack/code.mdx

@@ -4,6 +4,14 @@ description: Stack is a primitive component based on flexbox that manages the ve
 order: 1
 ---
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 import StackProps from '!!extract-react-types-loader!../../extract-react-types/stack-props'
 
 ## Props

package/constellation/stack/examples.mdx

@@ -12,6 +12,14 @@ import StackSpread from '../../examples/constellation/stack/spread';
 import StackGrow from '../../examples/constellation/stack/grow';
 import StackAs from '../../examples/constellation/stack/as';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Basic
 
 Stack is an abstraction to lay-out a group of elements vertically.
@@ -46,7 +54,7 @@ Elements can be set to stay together next to each other (default behaviour) or s
 
 ## Width control
 
-By default a `Stack` will have its width influenced by the context where it appears.  
+By default a `Stack` will have its width influenced by the context where it appears.
 
 To control that the `grow` prop can be used with the values:
 

package/constellation/xcss/examples.mdx

@@ -8,6 +8,14 @@ import xcssBasic from '../../examples/constellation/xcss/basic';
 import xcssInteractive from '../../examples/constellation/xcss/interactivity';
 import xcssResponsive from '../../examples/constellation/xcss/responsiveness';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Basic
 
 `xcss` can pull together different types of interactions and UI in a safer more composable way.

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"sideEffects": false
 }

package/dist/cjs/xcss/style-maps.partial.js

@@ -60,11 +60,11 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
+ * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -79,7 +79,7 @@ var borderColorMap = {
   'color.border.accent.magenta': "var(--ds-border-accent-magenta, #CD519D)",
   'color.border.accent.gray': "var(--ds-border-accent-gray, #5E6C84)",
   'color.border.disabled': "var(--ds-border-disabled, #FAFBFC)",
-  'color.border.focused': "var(--ds-border-focused, #4C9AFF)",
+  'color.border.focused': "var(--ds-border-focused, #2684FF)",
   'color.border.input': "var(--ds-border-input, #FAFBFC)",
   'color.border.inverse': "var(--ds-border-inverse, #FFFFFF)",
   'color.border.selected': "var(--ds-border-selected, #0052CC)",
@@ -155,9 +155,15 @@ var backgroundColorMap = {
   'color.background.selected.bold': "var(--ds-background-selected-bold, #0052CC)",
   'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered, #2684FF)",
   'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed, #0052CC)",
+  'color.background.brand.subtlest': "var(--ds-background-brand-subtlest, #B3D4FF)",
+  'color.background.brand.subtlest.hovered': "var(--ds-background-brand-subtlest-hovered, #DEEBFF)",
+  'color.background.brand.subtlest.pressed': "var(--ds-background-brand-subtlest-pressed, #4C9AFF)",
   'color.background.brand.bold': "var(--ds-background-brand-bold, #0052CC)",
   'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered, #0065FF)",
   'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed, #0747A6)",
+  'color.background.brand.boldest': "var(--ds-background-brand-boldest, #0747A6)",
+  'color.background.brand.boldest.hovered': "var(--ds-background-brand-boldest-hovered, #0052CC)",
+  'color.background.brand.boldest.pressed': "var(--ds-background-brand-boldest-pressed, #0747A6)",
   'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
   'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
   'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"sideEffects": false
 }

package/dist/es2019/xcss/style-maps.partial.js

@@ -48,11 +48,11 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
+ * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 export const borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -67,7 +67,7 @@ export const borderColorMap = {
   'color.border.accent.magenta': "var(--ds-border-accent-magenta, #CD519D)",
   'color.border.accent.gray': "var(--ds-border-accent-gray, #5E6C84)",
   'color.border.disabled': "var(--ds-border-disabled, #FAFBFC)",
-  'color.border.focused': "var(--ds-border-focused, #4C9AFF)",
+  'color.border.focused': "var(--ds-border-focused, #2684FF)",
   'color.border.input': "var(--ds-border-input, #FAFBFC)",
   'color.border.inverse': "var(--ds-border-inverse, #FFFFFF)",
   'color.border.selected': "var(--ds-border-selected, #0052CC)",
@@ -142,9 +142,15 @@ export const backgroundColorMap = {
   'color.background.selected.bold': "var(--ds-background-selected-bold, #0052CC)",
   'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered, #2684FF)",
   'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed, #0052CC)",
+  'color.background.brand.subtlest': "var(--ds-background-brand-subtlest, #B3D4FF)",
+  'color.background.brand.subtlest.hovered': "var(--ds-background-brand-subtlest-hovered, #DEEBFF)",
+  'color.background.brand.subtlest.pressed': "var(--ds-background-brand-subtlest-pressed, #4C9AFF)",
   'color.background.brand.bold': "var(--ds-background-brand-bold, #0052CC)",
   'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered, #0065FF)",
   'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed, #0747A6)",
+  'color.background.brand.boldest': "var(--ds-background-brand-boldest, #0747A6)",
+  'color.background.brand.boldest.hovered': "var(--ds-background-brand-boldest-hovered, #0052CC)",
+  'color.background.brand.boldest.pressed': "var(--ds-background-brand-boldest-pressed, #0747A6)",
   'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
   'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
   'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"sideEffects": false
 }

package/dist/esm/xcss/style-maps.partial.js

@@ -49,11 +49,11 @@ export var spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
+ * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 export var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -68,7 +68,7 @@ export var borderColorMap = {
   'color.border.accent.magenta': "var(--ds-border-accent-magenta, #CD519D)",
   'color.border.accent.gray': "var(--ds-border-accent-gray, #5E6C84)",
   'color.border.disabled': "var(--ds-border-disabled, #FAFBFC)",
-  'color.border.focused': "var(--ds-border-focused, #4C9AFF)",
+  'color.border.focused': "var(--ds-border-focused, #2684FF)",
   'color.border.input': "var(--ds-border-input, #FAFBFC)",
   'color.border.inverse': "var(--ds-border-inverse, #FFFFFF)",
   'color.border.selected': "var(--ds-border-selected, #0052CC)",
@@ -143,9 +143,15 @@ export var backgroundColorMap = {
   'color.background.selected.bold': "var(--ds-background-selected-bold, #0052CC)",
   'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered, #2684FF)",
   'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed, #0052CC)",
+  'color.background.brand.subtlest': "var(--ds-background-brand-subtlest, #B3D4FF)",
+  'color.background.brand.subtlest.hovered': "var(--ds-background-brand-subtlest-hovered, #DEEBFF)",
+  'color.background.brand.subtlest.pressed': "var(--ds-background-brand-subtlest-pressed, #4C9AFF)",
   'color.background.brand.bold': "var(--ds-background-brand-bold, #0052CC)",
   'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered, #0065FF)",
   'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed, #0747A6)",
+  'color.background.brand.boldest': "var(--ds-background-brand-boldest, #0747A6)",
+  'color.background.brand.boldest.hovered': "var(--ds-background-brand-boldest-hovered, #0052CC)",
+  'color.background.brand.boldest.pressed': "var(--ds-background-brand-boldest-pressed, #0747A6)",
   'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
   'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
   'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",

package/dist/types/xcss/style-maps.partial.d.ts

@@ -50,11 +50,11 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
+ * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -145,9 +145,15 @@ export declare const backgroundColorMap: {
     readonly 'color.background.selected.bold': "var(--ds-background-selected-bold)";
     readonly 'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
     readonly 'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
+    readonly 'color.background.brand.subtlest': "var(--ds-background-brand-subtlest)";
+    readonly 'color.background.brand.subtlest.hovered': "var(--ds-background-brand-subtlest-hovered)";
+    readonly 'color.background.brand.subtlest.pressed': "var(--ds-background-brand-subtlest-pressed)";
     readonly 'color.background.brand.bold': "var(--ds-background-brand-bold)";
     readonly 'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
     readonly 'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
+    readonly 'color.background.brand.boldest': "var(--ds-background-brand-boldest)";
+    readonly 'color.background.brand.boldest.hovered': "var(--ds-background-brand-boldest-hovered)";
+    readonly 'color.background.brand.boldest.pressed': "var(--ds-background-brand-boldest-pressed)";
     readonly 'color.background.danger': "var(--ds-background-danger)";
     readonly 'color.background.danger.hovered': "var(--ds-background-danger-hovered)";
     readonly 'color.background.danger.pressed': "var(--ds-background-danger-pressed)";

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -50,11 +50,11 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
+ * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -145,9 +145,15 @@ export declare const backgroundColorMap: {
     readonly 'color.background.selected.bold': "var(--ds-background-selected-bold)";
     readonly 'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
     readonly 'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
+    readonly 'color.background.brand.subtlest': "var(--ds-background-brand-subtlest)";
+    readonly 'color.background.brand.subtlest.hovered': "var(--ds-background-brand-subtlest-hovered)";
+    readonly 'color.background.brand.subtlest.pressed': "var(--ds-background-brand-subtlest-pressed)";
     readonly 'color.background.brand.bold': "var(--ds-background-brand-bold)";
     readonly 'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
     readonly 'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
+    readonly 'color.background.brand.boldest': "var(--ds-background-brand-boldest)";
+    readonly 'color.background.brand.boldest.hovered': "var(--ds-background-brand-boldest-hovered)";
+    readonly 'color.background.brand.boldest.pressed': "var(--ds-background-brand-boldest-pressed)";
     readonly 'color.background.danger': "var(--ds-background-danger)";
     readonly 'color.background.danger.hovered': "var(--ds-background-danger-hovered)";
     readonly 'color.background.danger.pressed': "var(--ds-background-danger-pressed)";