@atlaskit/primitives 0.9.2 → 0.9.4

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

@@ -1,31 +1,31 @@
 import { css } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
 export const dimensionMap = {
   '100%': '100%',
-  'size.100': '16px',
-  'size.200': '24px',
-  'size.300': '32px',
-  'size.400': '40px',
-  'size.500': '48px',
-  'size.600': '96px',
-  'size.1000': '192px'
+  'size.100': '1rem',
+  'size.200': '1.5rem',
+  'size.300': '2rem',
+  'size.400': '2.5rem',
+  'size.500': '3rem',
+  'size.600': '6rem',
+  'size.1000': '12rem'
 };
 /**
  * @codegenEnd
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 export const spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",
@@ -48,10 +48,10 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
+ * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export const borderColorMap = {
@@ -224,18 +224,41 @@ export const textColorMap = {
   subtlest: "var(--ds-text-subtlest, #7A869A)",
   subtle: "var(--ds-text-subtle, #42526E)"
 };
+export const fillMap = {
+  'color.icon': "var(--ds-icon, #505F79)",
+  'accent.red': "var(--ds-icon-accent-red, #FF5630)",
+  'accent.orange': "var(--ds-icon-accent-orange, #D94008)",
+  'accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
+  'accent.green': "var(--ds-icon-accent-green, #36B37E)",
+  'accent.teal': "var(--ds-icon-accent-teal, #00B8D9)",
+  'accent.blue': "var(--ds-icon-accent-blue, #0065FF)",
+  'accent.purple': "var(--ds-icon-accent-purple, #6554C0)",
+  'accent.magenta': "var(--ds-icon-accent-magenta, #CD519D)",
+  'accent.gray': "var(--ds-icon-accent-gray, #5E6C84)",
+  disabled: "var(--ds-icon-disabled, #8993A4)",
+  inverse: "var(--ds-icon-inverse, #FFFFFF)",
+  selected: "var(--ds-icon-selected, #0052CC)",
+  brand: "var(--ds-icon-brand, #0065FF)",
+  danger: "var(--ds-icon-danger, #DE350B)",
+  warning: "var(--ds-icon-warning, #FFC400)",
+  'warning.inverse': "var(--ds-icon-warning-inverse, #253858)",
+  success: "var(--ds-icon-success, #00875A)",
+  discovery: "var(--ds-icon-discovery, #8777D9)",
+  information: "var(--ds-icon-information, #0747A6)",
+  subtle: "var(--ds-icon-subtle, #6B778C)"
+};
 /**
  * @codegenEnd
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -312,23 +335,23 @@ export const positionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
  * @codegenId border
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */
 export const borderWidthMap = {
-  'width.0': "var(--ds-width-0, 0)",
-  'width.050': "var(--ds-width-050, 0.0625rem)",
-  'width.100': "var(--ds-width-100, 0.125rem)"
+  'width.0': "var(--ds-width-0, 0px)",
+  'width.050': "var(--ds-width-050, 1px)",
+  'width.100': "var(--ds-width-100, 2px)"
 };
 export const borderRadiusMap = {
-  'radius.050': "var(--ds-radius-050, 0.125rem)",
-  'radius.100': "var(--ds-radius-100, 0.25rem)",
-  'radius.200': "var(--ds-radius-200, 0.5rem)",
-  'radius.300': "var(--ds-radius-300, 0.75rem)",
-  'radius.400': "var(--ds-radius-400, 1rem)",
+  'radius.050': "var(--ds-radius-050, 2px)",
+  'radius.100': "var(--ds-radius-100, 4px)",
+  'radius.200': "var(--ds-radius-200, 8px)",
+  'radius.300': "var(--ds-radius-300, 12px)",
+  'radius.400': "var(--ds-radius-400, 16px)",
   'radius.round': "var(--ds-radius-round, 50%)"
 };
 

package/dist/es2019/xcss/xcss.js

@@ -1,7 +1,7 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
+import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
   alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
@@ -15,6 +15,7 @@ const tokensMap = {
   color: textColorMap,
   columnGap: spaceMap,
   display: displayMap,
+  fill: fillMap,
   flex: flexMap,
   flexDirection: flexDirectionMap,
   flexGrow: flexGrowMap,

package/dist/esm/helpers/responsive/constants.js

@@ -1,6 +1,8 @@
 /**
  * Our internal configuration for breakpoints configuration.
  *
+ * These are `rem` based multiples.
+ *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
 export var UNSAFE_BREAKPOINTS_CONFIG = {
@@ -8,50 +10,57 @@ export var UNSAFE_BREAKPOINTS_CONFIG = {
   xxs: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-200, 16px)",
-    min: 0,
-    max: 479
+    below: '0rem',
+    min: '0rem',
+    max: '29.998rem'
   },
   // phablet
   xs: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-200, 16px)",
-    min: 480,
-    max: 767
+    below: '29.998rem',
+    min: '30rem',
+    max: '47.998rem'
   },
   // tablet
   sm: {
     gridItemGutter: "var(--ds-space-200, 16px)",
     gridMargin: "var(--ds-space-300, 24px)",
-    min: 768,
-    max: 1023
+    below: '47.998rem',
+    min: '48rem',
+    max: '63.998rem'
   },
   // laptop desktop
   md: {
     gridItemGutter: "var(--ds-space-300, 24px)",
     gridMargin: "var(--ds-space-400, 32px)",
-    min: 1024,
-    max: 1439
+    below: '63.998rem',
+    min: '64rem',
+    max: '89.998rem'
   },
   // monitor
   lg: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-400, 32px)",
-    min: 1440,
-    max: 1767
+    below: '89.998rem',
+    min: '90rem',
+    max: '109.998rem'
   },
   // large high res
   xl: {
     gridItemGutter: "var(--ds-space-400, 32px)",
     gridMargin: "var(--ds-space-500, 40px)",
-    min: 1768,
-    max: 2159
+    below: '109.998rem',
+    min: '110rem',
+    max: '134.998rem'
   },
   // extra large high res
   xxl: {
     gridItemGutter: "var(--ds-space-500, 40px)",
     gridMargin: "var(--ds-space-500, 40px)",
-    min: 2160,
-    max: Number.MAX_SAFE_INTEGER
+    below: '134.998rem',
+    min: '135rem',
+    max: "".concat(Number.MAX_SAFE_INTEGER, "rem")
   }
 };
 
@@ -62,9 +71,7 @@ export var UNSAFE_BREAKPOINTS_CONFIG = {
  *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
-export var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort(function (a, b) {
-  return UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min;
-});
+export var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
 
 /**
  * This is our smallest breakpoint with a few nuances to it:

package/dist/esm/helpers/responsive/media-helper.js

@@ -1,11 +1,5 @@
 import { UNSAFE_BREAKPOINTS_CONFIG } from './constants';
 
-/**
- * To ensure min-width and max-width do both target at the same time, we subtract a value.
- * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
- */
-var BELOW_PRECISION = 0.02;
-
 /**
  * This is the full internal version.  The import has been separated to only expose as-needed.
  */
@@ -20,37 +14,37 @@ var internalMedia = {
      *
      * Eg. this is `@media (min-width: 0px)`
      */
-    xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px)"),
-    xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px)"),
-    sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px)"),
-    md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, "px)"),
-    lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px)"),
-    xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px)"),
-    xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px)")
+    xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ")"),
+    xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
+    sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
+    md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
+    lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
+    xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")"),
+    xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, ")")
   },
   below: {
     /**
      * A media query to target viewports below the min width of a given breakpoint.
-     * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
+     * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
      */
-    xs: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION, "px)"),
-    sm: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION, "px)"),
-    md: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION, "px)"),
-    lg: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION, "px)"),
-    xl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION, "px)"),
-    xxl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION, "px)")
+    xs: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.below, ")"),
+    sm: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.below, ")"),
+    md: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.below, ")"),
+    lg: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.below, ")"),
+    xl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.below, ")"),
+    xxl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.below, ")")
   },
   /**
    * A media query to target viewports exactly between the min and max of a given breakpoint.
    */
   only: {
-    xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.max, "px)"),
-    xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xs.max, "px)"),
-    sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.sm.max, "px)"),
-    md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.md.max, "px)"),
-    lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.lg.max, "px)"),
-    xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xl.max, "px)"),
-    xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.max, "px)")
+    xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.max, ")"),
+    xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xs.max, ")"),
+    sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.sm.max, ")"),
+    md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.md.max, ")"),
+    lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.lg.max, ")"),
+    xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xl.max, ")"),
+    xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.max, ")")
   }
 };
 

package/dist/esm/version.json

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

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

@@ -2,31 +2,31 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from '@emotion/react';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
  * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["dimensions"]
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  */
 export var dimensionMap = {
   '100%': '100%',
-  'size.100': '16px',
-  'size.200': '24px',
-  'size.300': '32px',
-  'size.400': '40px',
-  'size.500': '48px',
-  'size.600': '96px',
-  'size.1000': '192px'
+  'size.100': '1rem',
+  'size.200': '1.5rem',
+  'size.300': '2rem',
+  'size.400': '2.5rem',
+  'size.500': '3rem',
+  'size.600': '6rem',
+  'size.1000': '12rem'
 };
 /**
  * @codegenEnd
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 export var spaceMap = {
   'space.0': "var(--ds-space-0, 0px)",
@@ -49,10 +49,10 @@ export var spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4da498214befc7e312ff00d4f9f5379f>>
+ * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow", "text"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export var borderColorMap = {
@@ -225,18 +225,41 @@ export var textColorMap = {
   subtlest: "var(--ds-text-subtlest, #7A869A)",
   subtle: "var(--ds-text-subtle, #42526E)"
 };
+export var fillMap = {
+  'color.icon': "var(--ds-icon, #505F79)",
+  'accent.red': "var(--ds-icon-accent-red, #FF5630)",
+  'accent.orange': "var(--ds-icon-accent-orange, #D94008)",
+  'accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
+  'accent.green': "var(--ds-icon-accent-green, #36B37E)",
+  'accent.teal': "var(--ds-icon-accent-teal, #00B8D9)",
+  'accent.blue': "var(--ds-icon-accent-blue, #0065FF)",
+  'accent.purple': "var(--ds-icon-accent-purple, #6554C0)",
+  'accent.magenta': "var(--ds-icon-accent-magenta, #CD519D)",
+  'accent.gray': "var(--ds-icon-accent-gray, #5E6C84)",
+  disabled: "var(--ds-icon-disabled, #8993A4)",
+  inverse: "var(--ds-icon-inverse, #FFFFFF)",
+  selected: "var(--ds-icon-selected, #0052CC)",
+  brand: "var(--ds-icon-brand, #0065FF)",
+  danger: "var(--ds-icon-danger, #DE350B)",
+  warning: "var(--ds-icon-warning, #FFC400)",
+  'warning.inverse': "var(--ds-icon-warning-inverse, #253858)",
+  success: "var(--ds-icon-success, #00875A)",
+  discovery: "var(--ds-icon-discovery, #8777D9)",
+  information: "var(--ds-icon-information, #0747A6)",
+  subtle: "var(--ds-icon-subtle, #6B778C)"
+};
 /**
  * @codegenEnd
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
  * @codegenId misc
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -313,23 +336,23 @@ export var positionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
  * @codegenId border
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
  */
 export var borderWidthMap = {
-  'width.0': "var(--ds-width-0, 0)",
-  'width.050': "var(--ds-width-050, 0.0625rem)",
-  'width.100': "var(--ds-width-100, 0.125rem)"
+  'width.0': "var(--ds-width-0, 0px)",
+  'width.050': "var(--ds-width-050, 1px)",
+  'width.100': "var(--ds-width-100, 2px)"
 };
 export var borderRadiusMap = {
-  'radius.050': "var(--ds-radius-050, 0.125rem)",
-  'radius.100': "var(--ds-radius-100, 0.25rem)",
-  'radius.200': "var(--ds-radius-200, 0.5rem)",
-  'radius.300': "var(--ds-radius-300, 0.75rem)",
-  'radius.400': "var(--ds-radius-400, 1rem)",
+  'radius.050': "var(--ds-radius-050, 2px)",
+  'radius.100': "var(--ds-radius-100, 4px)",
+  'radius.200': "var(--ds-radius-200, 8px)",
+  'radius.300': "var(--ds-radius-300, 12px)",
+  'radius.400': "var(--ds-radius-400, 16px)",
   'radius.round': "var(--ds-radius-round, 50%)"
 };
 

package/dist/esm/xcss/xcss.js

@@ -4,7 +4,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
+import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   alignSelf: alignSelfMap,
   backgroundColor: backgroundColorMap,
@@ -18,6 +18,7 @@ var tokensMap = {
   color: textColorMap,
   columnGap: spaceMap,
   display: displayMap,
+  fill: fillMap,
   flex: flexMap,
   flexDirection: flexDirectionMap,
   flexGrow: flexGrowMap,

package/dist/types/helpers/responsive/constants.d.ts

@@ -2,6 +2,8 @@ import type { Breakpoint, BreakpointConfig } from './types';
 /**
  * Our internal configuration for breakpoints configuration.
  *
+ * These are `rem` based multiples.
+ *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
 export declare const UNSAFE_BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;

package/dist/types/helpers/responsive/media-helper.d.ts

@@ -10,25 +10,25 @@ export declare const UNSAFE_media: {
          *
          * Eg. this is `@media (min-width: 0px)`
          */
-        readonly xxs: `@media (min-width: ${number}px)`;
-        readonly xs: `@media (min-width: ${number}px)`;
-        readonly sm: `@media (min-width: ${number}px)`;
-        readonly md: `@media (min-width: ${number}px)`;
-        readonly lg: `@media (min-width: ${number}px)`;
-        readonly xl: `@media (min-width: ${number}px)`;
-        readonly xxl: `@media (min-width: ${number}px)`;
+        readonly xxs: `@media (min-width: ${number}rem)`;
+        readonly xs: `@media (min-width: ${number}rem)`;
+        readonly sm: `@media (min-width: ${number}rem)`;
+        readonly md: `@media (min-width: ${number}rem)`;
+        readonly lg: `@media (min-width: ${number}rem)`;
+        readonly xl: `@media (min-width: ${number}rem)`;
+        readonly xxl: `@media (min-width: ${number}rem)`;
     };
     readonly below: {
         /**
          * A media query to target viewports below the min width of a given breakpoint.
-         * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
+         * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
          */
-        readonly xs: `@media (max-width: ${number}px)`;
-        readonly sm: `@media (max-width: ${number}px)`;
-        readonly md: `@media (max-width: ${number}px)`;
-        readonly lg: `@media (max-width: ${number}px)`;
-        readonly xl: `@media (max-width: ${number}px)`;
-        readonly xxl: `@media (max-width: ${number}px)`;
+        readonly xs: `@media (max-width: ${number}rem)`;
+        readonly sm: `@media (max-width: ${number}rem)`;
+        readonly md: `@media (max-width: ${number}rem)`;
+        readonly lg: `@media (max-width: ${number}rem)`;
+        readonly xl: `@media (max-width: ${number}rem)`;
+        readonly xxl: `@media (max-width: ${number}rem)`;
     };
 };
 /**

package/dist/types/helpers/responsive/types.d.ts

@@ -39,9 +39,14 @@ export type BreakpointConfig = {
     /**
      * The min-width used in media queries
      */
-    min: number;
+    min: `${number}rem`;
     /**
      * The max-width used in media queries
      */
-    max: number;
+    max: `${number}rem`;
+    /**
+     * To ensure min-width and max-width do both target at the same time, we subtract a value.
+     * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
+     */
+    below: `${number}rem`;
 };