@atlaskit/tokens 5.6.3 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/tokens
 
+## 6.1.0
+
+### Minor Changes
+
+- [`fcd8f46058cd2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fcd8f46058cd2) -
+  Added new radius and border width tokens. Added new shape themes: `shape-rounder` and
+  `shape-roundest`. Note these new themes are experimental and may be deleted without notice.
+  Deprecated old border radius and border width tokens.
+
+## 6.0.0
+
+### Major Changes
+
+- [#195371](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195371)
+  [`44ae158e84619`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/44ae158e84619) -
+  [ux] Refreshed typography theme enabled by default.
+
 ## 5.6.3
 
 ### Patch Changes

package/babel-plugin/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/babel-plugin.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/babel-plugin.d.ts"
       ]

package/codemods/theme-to-design-tokens/transform.tsx

@@ -85,6 +85,7 @@ function getColorFromIdentifier(expression: any) {
 function getTokenFromNode(j: JSCodeshift, path: any, value: string, propertyName: string): string {
 	const valueMeta = cleanMeta(legacyColorMetaMap[value!] || []);
 	const ancestorMeta = cleanMeta(
+		// @ts-ignore - TS2872 TypeScript 5.9.2 upgrade
 		[...getMetaFromAncestors(j, path), ...kebabize(propertyName).split('-')] || [],
 	);
 

package/css-type-schema/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/css-type-schema.codegen.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts"
       ]

package/custom-themes/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/custom-themes.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/custom-themes.d.ts"
       ]

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::279b779961a28128ed651f2f529f7e86>>
+ * @codegen <<SignedSource::f4b022d6e18730437f14e3f2a6430c5a>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -22,8 +22,8 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.radius.Radius050",
-  "path": ["border", "radius", "Radius050"]
+  "name": "radius.Radius02",
+  "path": ["radius", "Radius02"]
 }, {
   "value": "4px",
   "attributes": {
@@ -37,8 +37,23 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.radius.Radius100",
-  "path": ["border", "radius", "Radius100"]
+  "name": "radius.Radius04",
+  "path": ["radius", "Radius04"]
+}, {
+  "value": "6px",
+  "attributes": {
+    "group": "shape"
+  },
+  "filePath": "schema/palettes/shape-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 6,
+    "attributes": {
+      "group": "shape"
+    }
+  },
+  "name": "radius.Radius06",
+  "path": ["radius", "Radius06"]
 }, {
   "value": "8px",
   "attributes": {
@@ -52,8 +67,8 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.radius.Radius200",
-  "path": ["border", "radius", "Radius200"]
+  "name": "radius.Radius08",
+  "path": ["radius", "Radius08"]
 }, {
   "value": "12px",
   "attributes": {
@@ -67,8 +82,8 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.radius.Radius300",
-  "path": ["border", "radius", "Radius300"]
+  "name": "radius.Radius12",
+  "path": ["radius", "Radius12"]
 }, {
   "value": "16px",
   "attributes": {
@@ -82,38 +97,38 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.radius.Radius400",
-  "path": ["border", "radius", "Radius400"]
+  "name": "radius.Radius16",
+  "path": ["radius", "Radius16"]
 }, {
-  "value": "32032px",
+  "value": "20px",
   "attributes": {
     "group": "shape"
   },
   "filePath": "schema/palettes/shape-palette.tsx",
   "isSource": true,
   "original": {
-    "value": 32032,
+    "value": 20,
     "attributes": {
       "group": "shape"
     }
   },
-  "name": "border.radius.RadiusCircle",
-  "path": ["border", "radius", "RadiusCircle"]
+  "name": "radius.Radius20",
+  "path": ["radius", "Radius20"]
 }, {
-  "value": "0px",
+  "value": "9999px",
   "attributes": {
     "group": "shape"
   },
   "filePath": "schema/palettes/shape-palette.tsx",
   "isSource": true,
   "original": {
-    "value": 0,
+    "value": 9999,
     "attributes": {
       "group": "shape"
     }
   },
-  "name": "border.width.Size0",
-  "path": ["border", "width", "Size0"]
+  "name": "radius.Radius99",
+  "path": ["radius", "Radius99"]
 }, {
   "value": "1px",
   "attributes": {
@@ -127,8 +142,8 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.width.Size050",
-  "path": ["border", "width", "Size050"]
+  "name": "border.width.BorderWidth1",
+  "path": ["border", "width", "BorderWidth1"]
 }, {
   "value": "2px",
   "attributes": {
@@ -142,8 +157,23 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.width.Size100",
-  "path": ["border", "width", "Size100"]
+  "name": "border.width.BorderWidth2",
+  "path": ["border", "width", "BorderWidth2"]
+}, {
+  "value": "0px",
+  "attributes": {
+    "group": "shape"
+  },
+  "filePath": "schema/palettes/shape-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 0,
+    "attributes": {
+      "group": "shape"
+    }
+  },
+  "name": "border.width.Size0",
+  "path": ["border", "width", "Size0"]
 }, {
   "value": "3px",
   "attributes": {

package/dist/cjs/artifacts/replacement-mapping.js

@@ -18,12 +18,39 @@ exports.default = void 0;
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::32dc903e7e4405ed9f0a75811b32c2e1>>
+ * @codegen <<SignedSource::7ca64db3c8d60ea8d78edec946e325bc>>
  * @codegenCommand yarn build tokens
  */
 
 var replacementMapper = [{
+  "path": "border.radius.[default]",
+  "state": "deprecated"
+}, {
+  "path": "border.radius.050",
+  "state": "deprecated"
+}, {
+  "path": "border.radius.100",
+  "state": "deprecated"
+}, {
+  "path": "border.radius.200",
+  "state": "deprecated"
+}, {
+  "path": "border.radius.300",
+  "state": "deprecated"
+}, {
+  "path": "border.radius.400",
+  "state": "deprecated"
+}, {
+  "path": "border.radius.circle",
+  "state": "deprecated"
+}, {
   "path": "border.width.0",
-  "state": "experimental"
+  "state": "deprecated"
+}, {
+  "path": "border.width.indicator",
+  "state": "deprecated"
+}, {
+  "path": "border.width.outline",
+  "state": "deprecated"
 }];
 var _default = exports.default = replacementMapper;

package/dist/cjs/artifacts/theme-import-map.js

@@ -15,7 +15,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * This allows users to compose their themes and only use the tokens that are requested.
  * When a new theme is created, the import should automatically be added to the map
  *
- * @codegen <<SignedSource::4131829e60733a1a5e513dcc84af81de>>
+ * @codegen <<SignedSource::3db020c00d91d31fe8e413b082708618>>
  * @codegenCommand yarn build tokens
  */
 
@@ -92,6 +92,18 @@ var themeImportsMap = {
       './themes/atlassian-shape'));
     });
   },
+  'shape-rounder': function shapeRounder() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-shape-rounder" */
+      './themes/atlassian-shape-rounder'));
+    });
+  },
+  'shape-roundest': function shapeRoundest() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-shape-roundest" */
+      './themes/atlassian-shape-roundest'));
+    });
+  },
   'typography-modernized': function typographyModernized() {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-typography-modernized" */

package/dist/cjs/artifacts/themes/atlassian-shape-rounder.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::b2f388559d723f17083d9711905b528f>>
+ * @codegenCommand yarn build tokens
+ */
+var _default = exports.default = "\nhtml[data-theme~=\"shape:shape-rounder\"] {\n  --ds-radius-xsmall: 0.125rem;\n  --ds-radius-small: 0.25rem;\n  --ds-radius-medium: 0.375rem;\n  --ds-radius-large: 0.75rem;\n  --ds-radius-xlarge: 1rem;\n  --ds-radius-full: 624.9375rem;\n  --ds-border-radius: 0.25rem;\n  --ds-border-radius-050: 0.125rem;\n  --ds-border-radius-100: 0.25rem;\n  --ds-border-radius-200: 0.5rem;\n  --ds-border-radius-300: 0.75rem;\n  --ds-border-radius-400: 1rem;\n  --ds-border-radius-circle: 624.9375rem;\n  --ds-border-width: 0.0625rem;\n  --ds-border-width-0: 0rem;\n  --ds-border-width-indicator: 0.1875rem;\n  --ds-border-width-outline: 0.125rem;\n  --ds-border-width-selected: 0.125rem;\n  --ds-border-width-focused: 0.125rem;\n}\n";

package/dist/cjs/artifacts/themes/atlassian-shape-roundest.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::b1574d1a9deb339d6c42eb37e069a871>>
+ * @codegenCommand yarn build tokens
+ */
+var _default = exports.default = "\nhtml[data-theme~=\"shape:shape-roundest\"] {\n  --ds-radius-xsmall: 0.125rem;\n  --ds-radius-small: 0.25rem;\n  --ds-radius-medium: 0.75rem;\n  --ds-radius-large: 1rem;\n  --ds-radius-xlarge: 1.25rem;\n  --ds-radius-full: 624.9375rem;\n  --ds-border-radius: 0.25rem;\n  --ds-border-radius-050: 0.125rem;\n  --ds-border-radius-100: 0.25rem;\n  --ds-border-radius-200: 0.5rem;\n  --ds-border-radius-300: 0.75rem;\n  --ds-border-radius-400: 1rem;\n  --ds-border-radius-circle: 624.9375rem;\n  --ds-border-width: 0.0625rem;\n  --ds-border-width-0: 0rem;\n  --ds-border-width-indicator: 0.1875rem;\n  --ds-border-width-outline: 0.125rem;\n  --ds-border-width-selected: 0.125rem;\n  --ds-border-width-focused: 0.125rem;\n}\n";

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::57c7e229053412965e492af01b042778>>
+ * @codegen <<SignedSource::5fd7a2193acea84566a4f17a6f50d7b2>>
  * @codegenCommand yarn build tokens
  */
-var _default = exports.default = "\nhtml[data-theme~=\"shape:shape\"] {\n  --ds-border-radius-050: 0.125rem;\n  --ds-border-radius: 0.25rem;\n  --ds-border-radius-100: 0.25rem;\n  --ds-border-radius-200: 0.5rem;\n  --ds-border-radius-300: 0.75rem;\n  --ds-border-radius-400: 1rem;\n  --ds-border-radius-circle: 2002rem;\n  --ds-border-width: 0.0625rem;\n  --ds-border-width-0: 0rem;\n  --ds-border-width-indicator: 0.1875rem;\n  --ds-border-width-outline: 0.125rem;\n}\n";
+var _default = exports.default = "\nhtml[data-theme~=\"shape:shape\"] {\n  --ds-radius-xsmall: 0.125rem;\n  --ds-radius-small: 0.25rem;\n  --ds-radius-medium: 0.375rem;\n  --ds-radius-large: 0.5rem;\n  --ds-radius-xlarge: 0.75rem;\n  --ds-radius-full: 624.9375rem;\n  --ds-border-radius: 0.25rem;\n  --ds-border-radius-050: 0.125rem;\n  --ds-border-radius-100: 0.25rem;\n  --ds-border-radius-200: 0.5rem;\n  --ds-border-radius-300: 0.75rem;\n  --ds-border-radius-400: 1rem;\n  --ds-border-radius-circle: 624.9375rem;\n  --ds-border-width: 0.0625rem;\n  --ds-border-width-0: 0rem;\n  --ds-border-width-indicator: 0.1875rem;\n  --ds-border-width-outline: 0.125rem;\n  --ds-border-width-selected: 0.125rem;\n  --ds-border-width-focused: 0.125rem;\n}\n";

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

@@ -13,7 +13,7 @@ exports.default = void 0;
  * 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::14617f23058b2551ba4bc304aee7628f>>
+ * @codegen <<SignedSource::2992e1957578e92ec58e9b373bf9b813>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -408,17 +408,6 @@ var defaultTokenValues = {
   'utility.UNSAFE.textTransformUppercase': 'uppercase',
   'utility.UNSAFE.transparent': 'transparent',
   'utility.elevation.surface.current': '#FFFFFF',
-  '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.indicator': '0.1875rem',
-  'border.width.outline': '0.125rem',
   'space.0': '0rem',
   'space.025': '0.125rem',
   'space.050': '0.25rem',
@@ -465,6 +454,25 @@ var defaultTokenValues = {
   'font.family.body': 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
   'font.family.code': 'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
   'font.family.brand.heading': '"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
-  'font.family.brand.body': '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
+  'font.family.brand.body': '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+  'radius.xsmall': '0.125rem',
+  'radius.small': '0.25rem',
+  'radius.medium': '0.375rem',
+  'radius.large': '0.5rem',
+  'radius.xlarge': '0.75rem',
+  'radius.full': '624.9375rem',
+  'border.radius': '0.25rem',
+  '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.circle': '624.9375rem',
+  'border.width': '0.0625rem',
+  'border.width.0': '0rem',
+  'border.width.indicator': '0.1875rem',
+  'border.width.outline': '0.125rem',
+  'border.width.selected': '0.125rem',
+  'border.width.focused': '0.125rem'
 };
 var _default = exports.default = defaultTokenValues;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5e39d81369b0c277ebeac5d0b02ae5cb>>
+ * @codegen <<SignedSource::06d7df9fd7562fac091fccfbf1704240>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -401,17 +401,6 @@ var tokens = {
   'utility.UNSAFE.textTransformUppercase': '--ds-UNSAFE-textTransformUppercase',
   'utility.UNSAFE.transparent': '--ds-UNSAFE-transparent',
   'utility.elevation.surface.current': '--ds-elevation-surface-current',
-  '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.indicator': '--ds-border-width-indicator',
-  'border.width.outline': '--ds-border-width-outline',
   'space.0': '--ds-space-0',
   'space.025': '--ds-space-025',
   'space.050': '--ds-space-050',
@@ -458,6 +447,25 @@ var tokens = {
   'font.family.body': '--ds-font-family-body',
   'font.family.code': '--ds-font-family-code',
   'font.family.brand.heading': '--ds-font-family-brand-heading',
-  'font.family.brand.body': '--ds-font-family-brand-body'
+  'font.family.brand.body': '--ds-font-family-brand-body',
+  'radius.xsmall': '--ds-radius-xsmall',
+  'radius.small': '--ds-radius-small',
+  'radius.medium': '--ds-radius-medium',
+  'radius.large': '--ds-radius-large',
+  'radius.xlarge': '--ds-radius-xlarge',
+  'radius.full': '--ds-radius-full',
+  'border.radius': '--ds-border-radius',
+  'border.radius.050': '--ds-border-radius-050',
+  '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.indicator': '--ds-border-width-indicator',
+  'border.width.outline': '--ds-border-width-outline',
+  'border.width.selected': '--ds-border-width-selected',
+  'border.width.focused': '--ds-border-width-focused'
 };
 var _default = exports.default = tokens;