@atlaskit/primitives 1.0.8 → 1.0.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 1.0.9
+
+### Patch Changes
+
+- [`1859bc0b8c7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1859bc0b8c7) - Update the casing on `xcss` to ensure consistency with the API and package consumption.
+
 ## 1.0.8
 
 ### Patch Changes
@@ -96,7 +102,7 @@
 
 ### Patch Changes
 
-- [`4c026f170d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c026f170d6) - Remove warnings for non-token values passed to xCSS in non-development environments.
+- [`4c026f170d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c026f170d6) - Remove warnings for non-token values passed to xcss in non-development environments.
 
 ## 0.14.2
 
@@ -173,7 +179,7 @@
 
 ### Minor Changes
 
-- [`8bd6dc6027f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8bd6dc6027f) - Box backgroundColor prop now accepts full token names, abbreviated forms will no longer work. xCSS now accepts full token names, abbreviated forms will no longer work.
+- [`8bd6dc6027f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8bd6dc6027f) - Box backgroundColor prop now accepts full token names, abbreviated forms will no longer work. xcss now accepts full token names, abbreviated forms will no longer work.
 
 ## 0.10.1
 
@@ -186,7 +192,7 @@
 
 ### Minor Changes
 
-- [`313d71fce9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/313d71fce9c) - Allow media queries at predefined breakpoints to be applied through xCSS.
+- [`313d71fce9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/313d71fce9c) - Allow media queries at predefined breakpoints to be applied through xcss.
 
 ## 0.9.5
 

package/README.md

@@ -10,4 +10,4 @@ Detailed docs and example usage can be found at:
 - [Box](https://staging.atlassian.design/components/primitives/box)
 - [Inline](https://staging.atlassian.design/components/primitives/inline)
 - [Stack](https://staging.atlassian.design/components/primitives/stack)
-- [xCSS](https://staging.atlassian.design/components/primitives/xcss)
+- [xcss](https://staging.atlassian.design/components/primitives/xcss)

package/constellation/box/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Box
-description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
+description: A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
 order: 1
 ---
 

package/constellation/box/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Box
-description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
+description: A box is a primitive component that acts as a generic container, and provides managed access to design tokens.
 order: 0
 ---
 
@@ -20,32 +20,33 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-Box is a general-purpose container with controlled use of design tokens. Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+Box is a general-purpose container that allows for controlled use of design tokens. Use the given props to configure display behaviour and styling that aligns with the Atlassian Design System.
+[To learn more about styling primitive components visit our xcss documentation.](/components/primitives/xcss/usage)
 
 <Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
 
 ## Padding
 
-Padding props can be used to access spacing design token and control internal layout. The following example demonstrates how each prop works individually:
+Padding props can be used to access spacing design tokens and control internal layout. The following example demonstrates how each prop works with space tokens.
 
 <Example Component={BoxPadding} packageName="@atlaskit/primitives/box" />
 
-*Note*: The nomenclature used by these props follows [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). It might be less intuitive at first but they are adequate to properly support different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in our products.
+The nomenclature used by these props follows [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). This naming is used to support different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in our products.
 
 ## Background color
 
-`Box` accepts a wide variety of background colors, referenced as semantic design tokens.
+`Box` accepts a wide variety of background colors, referenced as semantic design tokens. For the full list of color tokens or to learn more, visit our [Token documentation](/tokens/design-tokens/).
 
 <Example Component={BoxBackgroundColor} packageName="@atlaskit/primitives/box" />
 
-## xCSS
+## 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 exposes an `xcss` prop. This prop accepts `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xcss accepts most CSS properties, and when a token exists, the rule accepts that token as a value.
+For more information on xcss, see the dedicated [xcss documentation](/components/primitives/xcss).
 
 <Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
 
-For more information on xCSS, see the dedicated [xCSS](/components/primitives/xcss) documentation.
-
-## Practical Use Case
+## Practical use case
 
+`Box` is designed to be used in conjunction with `Inline` and `Stack` to create layouts. This example demonstrates how primitives can be used to create familiar components and patterns.
 <Example Component={PracticalUseCase} packageName="@atlaskit/primitives/box" />

package/constellation/box/usage.mdx

@@ -4,12 +4,10 @@ description: A box is a primitive component that acts as a generic container, an
 order: 2
 ---
 
-Use box to compose layouts with the valid spacing and background colors. A `Box` is a generic container with convenient and managed access to design tokens, and built-in guidance for the best practices of the Atlassian Design System.
+A `Box` is a generic container with convenient and managed access to design tokens, and built-in guidance for the best practices of the Atlassian Design System.
+Use a `Box` to compose layouts and add styling to child elements through visual props, including spacing and color through design tokens.
 
-A `Box` is primarily a containment element, with visual props that affect the whitespace available to child elements. 
-
-
-## Use `Box`
+## `Box` styling
 Display behavior is set by using the available props or using `xcss`. Makers can make design decisions for `Box` by setting:
 
 - `padding`
@@ -21,10 +19,10 @@ Display behavior is set by using the available props or using `xcss`. Makers can
 - `paddingBlockEnd`
 - `backgroundColor`
 
-To identify usages of `Box` in a given design, look for where a UI element (could be as small as the parent of a button or as a big as the wrapper of an entire section) will receive some visual styles applied to a container.
-
+## Using `Box`
+To identify usages of `Box` in a given design, look for where a UI element will receive some visual styles applied to a container. `Box` can be used on a range of sizes of elements, from buttons to section wrappers.
 `Box`, being generic in nature, can be "over-used", so it’s important to consider situations where more specific and expressive primitives could be used, for example: `Inline` and `Stack` to manage horizontal and vertical layouts, respectively.
 
-Related
+## Related
 - [Learn more about the Inline primitive](/components/primitives/inline/usage)
 - [Learn more about the Stack primitive](/components/primitives/stack/usage)

package/constellation/inline/usage.mdx

@@ -1,6 +1,6 @@
 ---
 title: Inline
-description: An Inline is a primitive component that is responsible for the horizontal layout of its child elements.
+description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
 order: 2
 ---
 

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

@@ -19,33 +19,3 @@ 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/stack/usage.mdx

@@ -1,6 +1,6 @@
 ---
 title: Stack
-description: A Stack is a primitive component that is responsible for the vertical layout of its child elements.
+description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
 order: 2
 ---
 

package/constellation/xcss/examples.mdx

@@ -1,6 +1,6 @@
 ---
-title: xCSS
-description: xCSS is a safer, tokens-first approach to CSS-in-JS.
+title: xcss
+description: xcss is a safer, tokens-first approach to CSS-in-JS.
 order: 1
 ---
 
@@ -31,6 +31,6 @@ To enable interactivity, use familiar selectors like `:hover` and `:focus-visibl
 
 ## Responsiveness
 
-xCSS also accepts a subset of media queries at predefined breakpoints:
+xcss also accepts a subset of media queries at predefined breakpoints:
 
 <Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />

package/constellation/xcss/migration.mdx

@@ -1,6 +1,6 @@
 ---
-title: Migrating your app to xCSS
-description: xCSS is a safer, tokens-first approach to CSS-in-JS.
+title: Migrating your app to xcss
+description: xcss is a safer, tokens-first approach to CSS-in-JS.
 order: 2
 ---
 

package/constellation/xcss/usage.mdx

@@ -1,6 +1,6 @@
 ---
-title: xCSS
-description: xCSS is a safer, tokens-first approach to CSS-in-JS.
+title: xcss
+description: xcss is a safer, tokens-first approach to CSS-in-JS.
 order: 0
 ---
 import { MediaQueriesTable } from '@af/design-system-docs-ui';
@@ -55,7 +55,7 @@ Note: styles generated from `xcss` cannot be applied directly to the `className`
 
 ### Type safety
 
-`xcss` uses strongly-typed values generated from design token definitions, making it simpler to apply the right token to the right CSS property. 
+`xcss` uses strongly-typed values generated from design token definitions, making it simpler to apply the right token to the right CSS property.
 This is intended to be more ergonomic and intuitive, but also prevent the misapplication of tokens to the wrong properties.
 
 Any [valid token name](/components/tokens/all-tokens) is available to be applied against its
@@ -74,7 +74,7 @@ const someStyles = xcss({
 ```
 
 ### Restricted nesting
-`xcss` is flexible enough to implement any design, but it does restrict the application of styles in one key way. 
+`xcss` is flexible enough to implement any design, but it does restrict the application of styles in one key way.
 Selectors cannot be nested or target elements beyond the element on which styles are applied.
 This restriction is intended to encourage better component encapsulation, reduce side-effects and make the codebase more resilient to change.
 
@@ -108,14 +108,14 @@ These unsafe selectors will throw a type error if applied.
 For richer examples of how to use `xcss` please see the [primitives `xcss` documentation](/components/primitives/xcss/examples).
 
 ### Media Queries
-xCSS can create responsive layouts at predefined breakpoints that are consistent with the Atlassian Design System. To enable responsive behavior, xCSS exposes the following pre-defined breakpoints:
+xcss can create responsive layouts at predefined breakpoints that are consistent with the Atlassian Design System. To enable responsive behavior, xcss exposes the following pre-defined breakpoints:
 <MediaQueriesTable />
 
 Media queries can be applied through keys that can be imported from `@atlaskit/primitives/responsive`.
 For in depth examples on how to enable responsive behavior, please see our [primitive responsiveness documentation](/components/primitives/xcss/examples#responsiveness).
 
-The objects defined at each breakpoint behave in much the same way as a normal xCSS object, and can apply responsiveness to any CSS.
-The only limitation is that a media query can't contain another media query. This is to prevent arbitrary nesting. 
+The objects defined at each breakpoint behave in much the same way as a normal xcss object, and can apply responsiveness to any CSS.
+The only limitation is that a media query can't contain another media query. This is 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.
 
 ```

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -89,7 +89,7 @@
           }
         },
         {
-          "title": "xCSS",
+          "title": "xcss",
           "folder": "xcss",
           "slug": "primitives/xcss",
           "id": "@atlaskit/primitives/xcss",