@atlaskit/tokens 1.5.2 → 1.7.0

package/dist/cjs/set-global-theme.js

@@ -27,6 +27,7 @@ var themeStateDefaults = {
   colorMode: 'auto',
   dark: 'dark',
   light: 'light',
+  shape: undefined,
   spacing: undefined,
   typography: undefined
 };
@@ -44,10 +45,11 @@ var getThemePreferences = function getThemePreferences(themeState) {
   var colorMode = themeState.colorMode,
     dark = themeState.dark,
     light = themeState.light,
+    shape = themeState.shape,
     spacing = themeState.spacing,
     typography = themeState.typography;
   var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
-  [spacing, typography].forEach(function (themeId) {
+  [shape, spacing, typography].forEach(function (themeId) {
     if (themeId) {
       themePreferences.push(themeId);
     }
@@ -55,6 +57,16 @@ var getThemePreferences = function getThemePreferences(themeState) {
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1')) {
     themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
   }
+
+  // Load shape and spacing by default, currently behind a feature flag
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    if (!themePreferences.includes('shape')) {
+      themePreferences.push('shape');
+    }
+    if (!themePreferences.includes('spacing')) {
+      themePreferences.push('spacing');
+    }
+  }
   return (0, _toConsumableArray2.default)(new Set(themePreferences));
 };
 
@@ -65,6 +77,7 @@ var getThemePreferences = function getThemePreferences(themeState) {
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
  *
@@ -84,6 +97,8 @@ var setGlobalTheme = /*#__PURE__*/function () {
       dark,
       _ref2$light,
       light,
+      _ref2$shape,
+      shape,
       _ref2$spacing,
       spacing,
       _ref2$typography,
@@ -94,11 +109,12 @@ var setGlobalTheme = /*#__PURE__*/function () {
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
+          _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
           themePreferences = getThemePreferences({
             colorMode: colorMode,
             dark: dark,
             light: light,
+            shape: shape,
             spacing: spacing,
             typography: typography
           });
@@ -161,6 +177,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
             colorMode: colorMode,
             dark: dark,
             light: light,
+            shape: shape,
             spacing: spacing,
             typography: typography
           });
@@ -189,6 +206,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
  *
@@ -204,6 +222,8 @@ var getThemeStyles = /*#__PURE__*/function () {
       dark,
       _ref7$light,
       light,
+      _ref7$shape,
+      shape,
       _ref7$spacing,
       spacing,
       _ref7$typography,
@@ -214,11 +234,12 @@ var getThemeStyles = /*#__PURE__*/function () {
     return _regenerator.default.wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
-          _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
+          _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$shape = _ref7.shape, shape = _ref7$shape === void 0 ? themeStateDefaults['shape'] : _ref7$shape, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
           themePreferences = getThemePreferences({
             colorMode: colorMode,
             dark: dark,
             light: light,
+            shape: shape,
             spacing: spacing,
             typography: typography
           });
@@ -303,6 +324,8 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     dark = _ref9$dark === void 0 ? themeStateDefaults['dark'] : _ref9$dark,
     _ref9$light = _ref9.light,
     light = _ref9$light === void 0 ? themeStateDefaults['light'] : _ref9$light,
+    _ref9$shape = _ref9.shape,
+    shape = _ref9$shape === void 0 ? themeStateDefaults['shape'] : _ref9$shape,
     _ref9$spacing = _ref9.spacing,
     spacing = _ref9$spacing === void 0 ? themeStateDefaults['spacing'] : _ref9$spacing,
     _ref9$typography = _ref9.typography,
@@ -310,9 +333,21 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
   var themePreferences = {
     dark: dark,
     light: light,
+    shape: shape,
     spacing: spacing,
     typography: typography
   };
+
+  // Load shape and spacing by default, currently behind a feature flag
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    themePreferences = {
+      dark: dark,
+      light: light,
+      shape: 'shape',
+      spacing: 'spacing',
+      typography: typography
+    };
+  }
   var themeAttribute = (0, _themeStateTransformer.themeObjectToString)(themePreferences);
   return _ref10 = {}, (0, _defineProperty2.default)(_ref10, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_ref10, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref10;
 };

package/dist/cjs/tokens/atlassian-shape/shape.js

@@ -11,6 +11,9 @@ exports.default = void 0;
 var shape = {
   border: {
     width: {
+      '[default]': {
+        value: 'Size050'
+      },
       '0': {
         value: 'Size0'
       },
@@ -22,6 +25,9 @@ var shape = {
       }
     },
     radius: {
+      '[default]': {
+        value: 'Radius100'
+      },
       '050': {
         value: 'Radius050'
       },
@@ -37,7 +43,7 @@ var shape = {
       '400': {
         value: 'Radius400'
       },
-      round: {
+      circle: {
         value: 'RadiusCircle'
       }
     }

package/dist/cjs/tokens/default/shape/shape.js

@@ -7,6 +7,14 @@ exports.default = void 0;
 var shape = {
   border: {
     width: {
+      '[default]': {
+        attributes: {
+          group: 'shape',
+          state: 'active',
+          introduced: '1.5.2',
+          description: 'The default border width.'
+        }
+      },
       '0': {
         attributes: {
           group: 'shape',
@@ -18,67 +26,75 @@ var shape = {
       '050': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for all borders and dividers.'
         }
       },
       '100': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for bolder dividers and interaction states.'
         }
       }
     },
     radius: {
+      '[default]': {
+        attributes: {
+          group: 'shape',
+          state: 'active',
+          introduced: '1.5.2',
+          description: 'The default border radius.'
+        }
+      },
       '050': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for selection indicators, like tabs.'
         }
       },
       '100': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for buttons and inputs.'
         }
       },
       '200': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for smaller cards.'
         }
       },
       '300': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for cards and larger containers.'
         }
       },
       '400': {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for modals.'
         }
       },
-      round: {
+      circle: {
         attributes: {
           group: 'shape',
-          state: 'experimental',
+          state: 'active',
           introduced: '1.1.0',
-          description: 'Experimental, description needs to be amended'
+          description: 'Used for circular containers, like a rounded button.'
         }
       }
     }

package/dist/cjs/utils/theme-state-transformer.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.themeStringToObject = exports.themeObjectToString = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _themeConfig = require("../theme-config");
-var themeKinds = ['light', 'dark', 'spacing', 'typography'];
+var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {
     return kind === themeKind;
@@ -44,6 +44,7 @@ var themeStringToObject = function themeStringToObject(themeState) {
       themeObject[kind] = id;
     }
     if (isThemeKind(kind) && isThemeIds(id)) {
+      // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
     return themeObject;

package/dist/cjs/utils/token-order.js

@@ -27,7 +27,7 @@ var tokenOrder = [{
   path: 'utility',
   subpaths: []
 }, {
-  path: 'shape',
+  path: 'border',
   subpaths: ['radius', 'width']
 }, {
   path: 'space',

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.5.2",
+	"version": "1.7.0",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/es2019/artifacts/palettes-raw/shape-palette.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a2e59b8e1421ca4ad026a5b2161824b2>>
+ * @codegen <<SignedSource::ba57ec0a6991ab386479b6c9006397ba>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -79,14 +79,14 @@ const tokens = [{
   "name": "border.radius.Radius400",
   "path": ["border", "radius", "Radius400"]
 }, {
-  "value": "50%",
+  "value": "32032px",
   "attributes": {
     "group": "shape"
   },
   "filePath": "src/palettes/shape-palette.tsx",
   "isSource": true,
   "original": {
-    "value": "50%",
+    "value": 32032,
     "attributes": {
       "group": "shape"
     }

package/dist/es2019/artifacts/themes/atlassian-shape.js

@@ -1,18 +1,20 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::01d88a41c27f9a921fe1a40fec0a7ba0>>
+ * @codegen <<SignedSource::861a4448ac467155c8290f2b211e99c5>>
  * @codegenCommand yarn build tokens
  */
 export default `
 html[data-theme~="shape:shape"] {
-  --ds-radius-050: 0.125rem;
-  --ds-radius-100: 0.25rem;
-  --ds-radius-200: 0.5rem;
-  --ds-radius-300: 0.75rem;
-  --ds-radius-400: 1rem;
-  --ds-radius-round: 50%;
-  --ds-width-0: 0rem;
-  --ds-width-050: 0.0625rem;
-  --ds-width-100: 0.125rem;
+  --ds-border-radius-050: 0.125rem;
+  --ds-border-radius: 0.25rem;
+  --ds-border-radius-100: 0.25rem;
+  --ds-border-radius-200: 0.5rem;
+  --ds-border-radius-300: 0.75rem;
+  --ds-border-radius-400: 1rem;
+  --ds-border-radius-circle: 2002rem;
+  --ds-border-width: 0.0625rem;
+  --ds-border-width-0: 0rem;
+  --ds-border-width-050: 0.0625rem;
+  --ds-border-width-100: 0.125rem;
 }
 `;

package/dist/es2019/artifacts/token-default-values.js

@@ -4,19 +4,10 @@
  * Token names mapped to their value in the default Atlassian themes ('light').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::856ff062171d44deb03158a6fa7d7bd1>>
+ * @codegen <<SignedSource::cc9231cd2b7a9797c51b4b8b742bab92>>
  * @codegenCommand yarn build tokens
  */
 const defaultTokenValues = {
-  'border.radius.050': '0.125rem',
-  'border.radius.100': '0.25rem',
-  'border.radius.200': '0.5rem',
-  'border.radius.300': '0.75rem',
-  'border.radius.400': '1rem',
-  'border.radius.round': '50%',
-  'border.width.0': '0rem',
-  'border.width.050': '0.0625rem',
-  'border.width.100': '0.125rem',
   'color.text': '#172B4D',
   'color.text.accent.red': '#AE2A19',
   'color.text.accent.red.bolder': '#601E16',
@@ -303,6 +294,17 @@ const defaultTokenValues = {
   'opacity.disabled': '0.4',
   'opacity.loading': '0.2',
   'utility.UNSAFE.transparent': 'transparent',
+  'border.radius.050': '0.125rem',
+  'border.radius': '0.25rem',
+  'border.radius.100': '0.25rem',
+  'border.radius.200': '0.5rem',
+  'border.radius.300': '0.75rem',
+  'border.radius.400': '1rem',
+  'border.radius.circle': '2002rem',
+  'border.width': '0.0625rem',
+  'border.width.0': '0rem',
+  'border.width.050': '0.0625rem',
+  'border.width.100': '0.125rem',
   'space.0': '0rem',
   'space.025': '0.125rem',
   'space.050': '0.25rem',

package/dist/es2019/artifacts/token-names.js

@@ -1,18 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::462a85d7e15b8fb4e0c4225b94e89903>>
+ * @codegen <<SignedSource::488b6f348c638f30edc95365a3de0725>>
  * @codegenCommand yarn build tokens
  */
 const tokens = {
-  'border.radius.050': '--ds-radius-050',
-  'border.radius.100': '--ds-radius-100',
-  'border.radius.200': '--ds-radius-200',
-  'border.radius.300': '--ds-radius-300',
-  'border.radius.400': '--ds-radius-400',
-  'border.radius.round': '--ds-radius-round',
-  'border.width.0': '--ds-width-0',
-  'border.width.050': '--ds-width-050',
-  'border.width.100': '--ds-width-100',
   'color.text': '--ds-text',
   'color.text.accent.red': '--ds-text-accent-red',
   'color.text.accent.red.bolder': '--ds-text-accent-red-bolder',
@@ -299,6 +290,17 @@ const tokens = {
   'opacity.disabled': '--ds-opacity-disabled',
   'opacity.loading': '--ds-opacity-loading',
   'utility.UNSAFE.transparent': '--ds-UNSAFE-transparent',
+  'border.radius.050': '--ds-border-radius-050',
+  'border.radius': '--ds-border-radius',
+  'border.radius.100': '--ds-border-radius-100',
+  'border.radius.200': '--ds-border-radius-200',
+  'border.radius.300': '--ds-border-radius-300',
+  'border.radius.400': '--ds-border-radius-400',
+  'border.radius.circle': '--ds-border-radius-circle',
+  'border.width': '--ds-border-width',
+  'border.width.0': '--ds-border-width-0',
+  'border.width.050': '--ds-border-width-050',
+  'border.width.100': '--ds-border-width-100',
   'space.0': '--ds-space-0',
   'space.025': '--ds-space-025',
   'space.050': '--ds-space-050',