@atlaskit/primitives 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/primitives
 
+## 1.2.1
+
+### Patch Changes
+
+- [`9a88d718e48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9a88d718e48) - This package is now onboarded onto the product push model.
+
+## 1.2.0
+
+### Minor Changes
+
+- [`37e0d67942b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37e0d67942b) - - Add missing `xcss` type export for `TextColor`
+  - Fixes a bug where the `xcss` function did not accept `color.link` or `color.link.pressed` token values for text color
+
 ## 1.1.0
 
 ### Minor Changes

package/constellation/box/examples.mdx

@@ -21,7 +21,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 ## Basic
 
 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)
+[To learn more about styling primitive components visit our `xcss` documentation.](/components/primitives/xcss/usage)
 
 <Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
 
@@ -41,7 +41,7 @@ The nomenclature used by these props follows [logical properties](https://develo
 
 ## xcss
 
-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.
+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" />

package/constellation/inline/usage.mdx

@@ -32,6 +32,7 @@ The various Inline props can then be used to customize the spacing and styling o
 - `rowSpace`
 - `separator`
 
+## Related
 - [Learn more about the Primitives](/components/primitives/overview)
 - [Learn more about the Box primitive](/components/primitives/box/usage)
 - [Learn more about the Stack primitive](/components/primitives/stack/usage)

package/constellation/overview/index.mdx

@@ -76,4 +76,4 @@ The ESLint rule <a href="/components/eslint-plugin-design-system/usage#use-primi
 - [Learn more about the Stack primitive](/components/primitives/stack/usage)
 - [Learn more about the Grid primitive](/components/primitives/grid/examples)
 - [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
-- [Learn more about the Fkex primitive](/components/primitives/flex/examples)
+- [Learn more about the Flex primitive](/components/primitives/flex/examples)

package/constellation/responsive/usage.mdx

@@ -41,10 +41,3 @@ const customStyles = css({
   [media.above.xl]: { marginBlock: token('space.150') },
 });
 ```
-
-### `media.below` usage
-
-This is intentionally excluded at the moment as we're shipping our opinion that teams should design mobile-first.
-We understand this will not scale and we're open to change, but we'd like to change this with feedback.
-
-If we do add it back, we'd suggest codebases prefer a single approach (eg. `above` or `below`) and use that consistently.  Mixing them results in confusion (though they can be safely used together and can result in better CSS performance when done correctly).

package/constellation/xcss/examples.mdx

@@ -7,6 +7,7 @@ order: 1
 import xcssBasic from '../../examples/constellation/xcss/basic';
 import xcssInteractive from '../../examples/constellation/xcss/interactivity';
 import xcssResponsive from '../../examples/constellation/xcss/responsiveness';
+import xcssConditional from '../../examples/constellation/xcss/conditional-styles';
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
@@ -31,6 +32,12 @@ To enable interactivity, use familiar selectors like `:hover` and `:focus-visibl
 
 ## Responsiveness
 
-xCSS also accepts a subset of media queries at [predefined breakpoints](/components/primitives/responsive/breakpoints/examples).
+`xcss` also accepts a subset of media queries at [predefined breakpoints](/components/primitives/responsive/breakpoints/examples).
 
 <Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />
+
+## Conditional styles
+
+To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.
+
+<Example Component={xcssConditional} packageName="@atlaskit/primitives/xcss" />

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

@@ -60,7 +60,7 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -250,7 +250,9 @@ var textColorMap = {
   'color.text.discovery': "var(--ds-text-discovery, #403294)",
   'color.text.information': "var(--ds-text-information, #0052CC)",
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
-  'color.text.subtle': "var(--ds-text-subtle, #42526E)"
+  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
+  'color.link': "var(--ds-link, #0052CC)",
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
 };
 exports.textColorMap = textColorMap;
 var fillMap = {

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

@@ -48,7 +48,7 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -235,7 +235,9 @@ export const textColorMap = {
   'color.text.discovery': "var(--ds-text-discovery, #403294)",
   'color.text.information': "var(--ds-text-information, #0052CC)",
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
-  'color.text.subtle': "var(--ds-text-subtle, #42526E)"
+  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
+  'color.link': "var(--ds-link, #0052CC)",
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
 };
 export const fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",

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

@@ -49,7 +49,7 @@ export var spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -236,7 +236,9 @@ export var textColorMap = {
   'color.text.discovery': "var(--ds-text-discovery, #403294)",
   'color.text.information': "var(--ds-text-information, #0052CC)",
   'color.text.subtlest': "var(--ds-text-subtlest, #7A869A)",
-  'color.text.subtle': "var(--ds-text-subtle, #42526E)"
+  'color.text.subtle': "var(--ds-text-subtle, #42526E)",
+  'color.link': "var(--ds-link, #0052CC)",
+  'color.link.pressed': "var(--ds-link-pressed, #0747A6)"
 };
 export var fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
+export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, TextColor, Shadow, } from './xcss/style-maps.partial';
 export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
 export { default as Inline } from './components/inline';

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

@@ -50,7 +50,7 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -241,6 +241,8 @@ export declare const textColorMap: {
     readonly 'color.text.information': "var(--ds-text-information)";
     readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
+    readonly 'color.link': "var(--ds-link)";
+    readonly 'color.link.pressed': "var(--ds-link-pressed)";
 };
 export type TextColor = keyof typeof textColorMap;
 export declare const fillMap: {

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
-export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
+export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, TextColor, Shadow, } from './xcss/style-maps.partial';
 export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
 export { default as Inline } from './components/inline';

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

@@ -50,7 +50,7 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
+ * @codegen <<SignedSource::0de38f66a11617229ed4985ae2051e3e>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -241,6 +241,8 @@ export declare const textColorMap: {
     readonly 'color.text.information': "var(--ds-text-information)";
     readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
+    readonly 'color.link': "var(--ds-link)";
+    readonly 'color.link.pressed': "var(--ds-link-pressed)";
 };
 export type TextColor = keyof typeof textColorMap;
 export declare const fillMap: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,6 +16,9 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
+    "productPushConsumption": [
+      "jira"
+    ],
     "inPublicMirror": false,
     "releaseModel": "continuous",
     "website": {

package/report.api.md

@@ -887,7 +887,7 @@ export type StackProps<T extends ElementType = 'div'> = {
 } & BasePrimitiveProps;
 
 // @public (undocumented)
-type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 
 // @public (undocumented)
 const textColorMap: {
@@ -924,6 +924,8 @@ const textColorMap: {
   readonly 'color.text.information': 'var(--ds-text-information)';
   readonly 'color.text.subtlest': 'var(--ds-text-subtlest)';
   readonly 'color.text.subtle': 'var(--ds-text-subtle)';
+  readonly 'color.link': 'var(--ds-link)';
+  readonly 'color.link.pressed': 'var(--ds-link-pressed)';
 };
 
 // @public (undocumented)

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -512,6 +512,8 @@ exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
   'color.text.information': token('color.text.information', '#0052CC'),
   'color.text.subtlest': token('color.text.subtlest', '#7A869A'),
   'color.text.subtle': token('color.text.subtle', '#42526E'),
+  'color.link': token('color.link', '#0052CC'),
+  'color.link.pressed': token('color.link.pressed', '#0747A6'),
 } as const;
 
 export type TextColor = keyof typeof textColorMap;

package/scripts/color-codegen-template.tsx

@@ -25,7 +25,8 @@ const tokenStyles = {
     prefix: 'color.text.',
     cssProperty: 'color',
     filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.text.prefix),
+      t.token.startsWith(tokenStyles.text.prefix) ||
+      t.token.startsWith('color.link'),
   },
   background: {
     objectName: 'backgroundColor',

package/tmp/api-report-tmp.d.ts

@@ -599,7 +599,7 @@ export type StackProps<T extends ElementType = 'div'> = {
 } & BasePrimitiveProps;
 
 // @public (undocumented)
-type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 
 // @public (undocumented)
 const textColorMap: {
@@ -636,6 +636,8 @@ const textColorMap: {
     readonly 'color.text.information': "var(--ds-text-information)";
     readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
+    readonly 'color.link': "var(--ds-link)";
+    readonly 'color.link.pressed': "var(--ds-link-pressed)";
 };
 
 // @public (undocumented)

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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