@atlaskit/tokens 5.6.3 → 6.1.0

package/dist/es2019/theme-config.js

@@ -40,7 +40,7 @@ const themeContrastModes = ['more', 'no-preference', 'auto'];
  *
  * These ids must be kebab case
  */
-export const themeIds = ['light-increased-contrast', 'light', 'light-future', 'light-brand-refresh', 'dark', 'dark-future', 'dark-increased-contrast', 'dark-brand-refresh', 'legacy-light', 'legacy-dark', 'spacing', 'shape', 'typography', 'typography-adg3', 'typography-modernized', 'typography-refreshed'];
+export const themeIds = ['light-increased-contrast', 'light', 'light-future', 'light-brand-refresh', 'dark', 'dark-future', 'dark-increased-contrast', 'dark-brand-refresh', 'legacy-light', 'legacy-dark', 'spacing', 'shape', 'shape-rounder', 'shape-roundest', 'typography', 'typography-adg3', 'typography-modernized', 'typography-refreshed'];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
  * Theme overrides are temporary and there may not be any defined at times.
@@ -170,7 +170,23 @@ const themeConfig = {
   },
   'atlassian-shape': {
     id: 'shape',
-    displayName: 'Atlassian Shape',
+    displayName: 'Shape',
+    palette: 'shapePalette',
+    attributes: {
+      type: 'shape'
+    }
+  },
+  'atlassian-shape-rounder': {
+    id: 'shape-rounder',
+    displayName: 'Shape (Rounder)',
+    palette: 'shapePalette',
+    attributes: {
+      type: 'shape'
+    }
+  },
+  'atlassian-shape-roundest': {
+    id: 'shape-roundest',
+    displayName: 'Shape (Roundest)',
     palette: 'shapePalette',
     attributes: {
       type: 'shape'
@@ -239,10 +255,7 @@ export const themeStateDefaults = {
     if (fg('platform-disable-default-typography')) {
       return undefined;
     }
-    if (fg('platform-default-typography-refreshed')) {
-      return 'typography';
-    }
-    return undefined;
+    return 'typography';
   },
   UNSAFE_themeOptions: undefined
 };

package/dist/es2019/theme-state-transformer.js

@@ -23,7 +23,9 @@ const isColorMode = modeId => {
  * ```
  */
 export const themeStringToObject = themeState => {
-  return themeState.split(' ').map(theme => theme.split(/:(.*)/s)).reduce((themeObject, [kind, id]) => {
+  return themeState.split(' ')
+  // @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
+  .map(theme => theme.split(/:(.*)/s)).reduce((themeObject, [kind, id]) => {
     if (kind === 'colorMode' && isColorMode(id)) {
       themeObject[kind] = id;
     }

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

@@ -20,15 +20,18 @@ export const tokenOrder = [{
 {
   path: 'utility',
   subpaths: []
-}, {
-  path: 'border',
-  subpaths: ['radius', 'width']
 }, {
   path: 'space',
   subpaths: []
 }, {
   path: 'font',
   subpaths: ['heading', 'body', 'metric', 'code', 'weight', 'family', 'size', 'lineHeight']
+}, {
+  path: 'radius',
+  subpaths: []
+}, {
+  path: 'border',
+  subpaths: ['radius', 'width']
 }, {
   path: 'value',
   // Legacy palette

package/dist/esm/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::279b779961a28128ed651f2f529f7e86>>
+ * @codegen <<SignedSource::f4b022d6e18730437f14e3f2a6430c5a>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -16,8 +16,8 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.radius.Radius050",
-  "path": ["border", "radius", "Radius050"]
+  "name": "radius.Radius02",
+  "path": ["radius", "Radius02"]
 }, {
   "value": "4px",
   "attributes": {
@@ -31,8 +31,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": {
@@ -46,8 +61,8 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.radius.Radius200",
-  "path": ["border", "radius", "Radius200"]
+  "name": "radius.Radius08",
+  "path": ["radius", "Radius08"]
 }, {
   "value": "12px",
   "attributes": {
@@ -61,8 +76,8 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.radius.Radius300",
-  "path": ["border", "radius", "Radius300"]
+  "name": "radius.Radius12",
+  "path": ["radius", "Radius12"]
 }, {
   "value": "16px",
   "attributes": {
@@ -76,38 +91,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": {
@@ -121,8 +136,8 @@ var tokens = [{
       "group": "shape"
     }
   },
-  "name": "border.width.Size050",
-  "path": ["border", "width", "Size050"]
+  "name": "border.width.BorderWidth1",
+  "path": ["border", "width", "BorderWidth1"]
 }, {
   "value": "2px",
   "attributes": {
@@ -136,8 +151,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/esm/artifacts/replacement-mapping.js

@@ -12,12 +12,39 @@
  * 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"
 }];
 export default replacementMapper;

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

@@ -6,7 +6,7 @@
  * 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
  */
 
@@ -59,6 +59,14 @@ var themeImportsMap = {
     return import( /* webpackChunkName: "@atlaskit-internal_atlassian-shape" */
     './themes/atlassian-shape');
   },
+  'shape-rounder': function shapeRounder() {
+    return import( /* webpackChunkName: "@atlaskit-internal_atlassian-shape-rounder" */
+    './themes/atlassian-shape-rounder');
+  },
+  'shape-roundest': function shapeRoundest() {
+    return import( /* webpackChunkName: "@atlaskit-internal_atlassian-shape-roundest" */
+    './themes/atlassian-shape-roundest');
+  },
   'typography-modernized': function typographyModernized() {
     return import( /* webpackChunkName: "@atlaskit-internal_atlassian-typography-modernized" */
     './themes/atlassian-typography-modernized');

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

@@ -0,0 +1,6 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::b2f388559d723f17083d9711905b528f>>
+ * @codegenCommand yarn build tokens
+ */
+export 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/esm/artifacts/themes/atlassian-shape-roundest.js

@@ -0,0 +1,6 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::b1574d1a9deb339d6c42eb37e069a871>>
+ * @codegenCommand yarn build tokens
+ */
+export 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/esm/artifacts/themes/atlassian-shape.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::57c7e229053412965e492af01b042778>>
+ * @codegen <<SignedSource::5fd7a2193acea84566a4f17a6f50d7b2>>
  * @codegenCommand yarn build tokens
  */
-export 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";
+export 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/esm/artifacts/token-default-values.js

@@ -7,7 +7,7 @@
  * 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 = {
@@ -402,17 +402,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',
@@ -459,6 +448,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'
 };
 export default defaultTokenValues;

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

@@ -1,6 +1,6 @@
 /**
  * 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 = {
@@ -395,17 +395,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',
@@ -452,6 +441,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'
 };
 export default tokens;