@atlaskit/tokens 1.1.0 → 1.2.1

package/dist/esm/palettes/spacing-scale.js

@@ -6,94 +6,91 @@ var baseSpacingTokens = {
   Space0: {
     value: '0',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space025: {
     value: '0.125rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space050: {
     value: '0.25rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space075: {
     value: '0.375rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space100: {
     value: '0.5rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space150: {
     value: '0.75rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space200: {
     value: '1rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space250: {
     value: '1.25rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space300: {
     value: '1.5rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space400: {
     value: '2rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space500: {
     value: '2.5rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space600: {
     value: '3rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     }
   },
   Space800: {
     value: '4rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     },
     pixelValue: '64px'
   },
   Space1000: {
     value: '5rem',
     attributes: {
-      group: 'scale'
+      group: 'spacing'
     },
     pixelValue: '80px'
   }
 };
 var spacingPalette = {
-  spacing: {
-    scale: baseSpacingTokens
-  },
   space: baseSpacingTokens
 };
 export default spacingPalette;

package/dist/esm/palettes/typography-palette.js

@@ -6,37 +6,37 @@ var lineHeightScale = {
     LineHeight100: {
       value: '16px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight200: {
       value: '20px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight300: {
       value: '24px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight400: {
       value: '28px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight500: {
       value: '32px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     LineHeight600: {
       value: '40px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     }
   }
@@ -46,25 +46,25 @@ var fontWeightScale = {
     FontWeightRegular: {
       value: '400',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontWeightMedium: {
       value: '500',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontWeightSemiBold: {
       value: '600',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontWeightBold: {
       value: '700',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     }
   }
@@ -74,13 +74,13 @@ var fontFamilyPalette = {
     FontFamilySans: {
       value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontFamilyMonospace: {
       value: "\"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace",
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     }
   }
@@ -90,49 +90,49 @@ var fontSizeScale = {
     FontSize050: {
       value: '11px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize075: {
       value: '12px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize100: {
       value: '14px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize200: {
       value: '16px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize300: {
       value: '20px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize400: {
       value: '24px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize500: {
       value: '29px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     },
     FontSize600: {
       value: '35px',
       attributes: {
-        group: 'scale'
+        group: 'typography'
       }
     }
   }

package/dist/esm/theme-config.js

@@ -27,7 +27,7 @@ export var themeColorModes = ['light', 'dark', 'auto'];
  *
  * These ids must be kebab case
  */
-export var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography'];
+export var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape'];
 var themeConfig = {
   'atlassian-light': {
     id: 'light',
@@ -80,6 +80,14 @@ var themeConfig = {
     attributes: {
       type: 'typography'
     }
+  },
+  'atlassian-shape': {
+    id: 'shape',
+    displayName: 'Atlassian Shape',
+    palette: 'shapePalette',
+    attributes: {
+      type: 'shape'
+    }
   }
 };
 export default themeConfig;

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

@@ -0,0 +1,37 @@
+/**
+ * This is combined with the attribute schema.
+ * @link 'file:../default/shape/shape.tsx'
+ */
+var shape = {
+  border: {
+    width: {
+      '050': {
+        value: 'Size050'
+      },
+      '100': {
+        value: 'Size100'
+      }
+    },
+    radius: {
+      '050': {
+        value: 'Radius050'
+      },
+      '100': {
+        value: 'Radius100'
+      },
+      '200': {
+        value: 'Radius200'
+      },
+      '300': {
+        value: 'Radius300'
+      },
+      '400': {
+        value: 'Radius400'
+      },
+      round: {
+        value: 'RadiusCircle'
+      }
+    }
+  }
+};
+export default shape;

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

@@ -0,0 +1,73 @@
+var shape = {
+  border: {
+    width: {
+      '050': {
+        attributes: {
+          group: 'shape',
+          state: 'experimental',
+          introduced: '1.1.0',
+          description: 'Experimental, description needs to be amended'
+        }
+      },
+      '100': {
+        attributes: {
+          group: 'shape',
+          state: 'experimental',
+          introduced: '1.1.0',
+          description: 'Experimental, description needs to be amended'
+        }
+      }
+    },
+    radius: {
+      '050': {
+        attributes: {
+          group: 'shape',
+          state: 'experimental',
+          introduced: '1.1.0',
+          description: 'Experimental, description needs to be amended'
+        }
+      },
+      '100': {
+        attributes: {
+          group: 'shape',
+          state: 'experimental',
+          introduced: '1.1.0',
+          description: 'Experimental, description needs to be amended'
+        }
+      },
+      '200': {
+        attributes: {
+          group: 'shape',
+          state: 'experimental',
+          introduced: '1.1.0',
+          description: 'Experimental, description needs to be amended'
+        }
+      },
+      '300': {
+        attributes: {
+          group: 'shape',
+          state: 'experimental',
+          introduced: '1.1.0',
+          description: 'Experimental, description needs to be amended'
+        }
+      },
+      '400': {
+        attributes: {
+          group: 'shape',
+          state: 'experimental',
+          introduced: '1.1.0',
+          description: 'Experimental, description needs to be amended'
+        }
+      },
+      round: {
+        attributes: {
+          group: 'shape',
+          state: 'experimental',
+          introduced: '1.1.0',
+          description: 'Experimental, description needs to be amended'
+        }
+      }
+    }
+  }
+};
+export default shape;

package/dist/esm/version.json

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

package/dist/types/artifacts/palettes-raw/shape-palette.d.ts

@@ -0,0 +1,22 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::f260aa650535ab5be564f74e1ff1a157>>
+ * @codegenCommand yarn build tokens
+ */
+declare const tokens: {
+    value: string;
+    attributes: {
+        group: string;
+    };
+    filePath: string;
+    isSource: boolean;
+    original: {
+        value: string;
+        attributes: {
+            group: string;
+        };
+    };
+    name: string;
+    path: string[];
+}[];
+export default tokens;

package/dist/types/artifacts/palettes-raw/spacing-scale.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::496467b0392d344d04df137d9d8edf4c>>
+ * @codegen <<SignedSource::1599e85262f34ecc7fbda0662bc858cb>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: ({

package/dist/types/artifacts/palettes-raw/typography-palette.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::04c90c279da3841c8c8952b13bddb31b>>
+ * @codegen <<SignedSource::15f0ab59b776fd0726847c173399dd26>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {

package/dist/types/artifacts/theme-import-map.d.ts

@@ -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::dca5807b567cf95fcec4906be228f65f>>
+ * @codegen <<SignedSource::ce4463df8e613cb4c4a8b24907ce95ae>>
  * @codegenCommand yarn build tokens
  */
 import { ThemeIds } from '../theme-config';

package/dist/types/artifacts/themes/atlassian-shape.d.ts

@@ -0,0 +1,7 @@
+declare const _default: "\nhtml[data-theme~=\"shape:shape\"] {\n  --ds-radius-050: 0.125rem;\n  --ds-radius-100: 0.25rem;\n  --ds-radius-200: 0.5rem;\n  --ds-radius-300: 0.75rem;\n  --ds-radius-400: 1rem;\n  --ds-radius-round: 50%;\n  --ds-width-050: 0.0625rem;\n  --ds-width-100: 0.125rem;\n}\n";
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::309f92a792656831b0e137b75ca1156f>>
+ * @codegenCommand yarn build tokens
+ */
+export default _default;

package/dist/types/artifacts/token-default-values.d.ts

@@ -4,10 +4,18 @@
  * 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::1481aae8495313f724d4e6c09ccaac8d>>
+ * @codegen <<SignedSource::f5109afc580f9e67007907726883450e>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {
+    readonly 'border.radius.050': "0.125rem";
+    readonly 'border.radius.100': "0.25rem";
+    readonly 'border.radius.200': "0.5rem";
+    readonly 'border.radius.300': "0.75rem";
+    readonly 'border.radius.400': "1rem";
+    readonly 'border.radius.round': "50%";
+    readonly 'border.width.050': "0.0625rem";
+    readonly 'border.width.100': "0.125rem";
     readonly 'color.text': "#172B4D";
     readonly 'color.text.accent.red': "#AE2A19";
     readonly 'color.text.accent.red.bolder': "#601E16";

package/dist/types/artifacts/token-names.d.ts

@@ -1,9 +1,17 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7d8f37c15df01017e141b2e709521993>>
+ * @codegen <<SignedSource::0d28771b28a7bf28109534471c1383d4>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {
+    readonly 'border.radius.050': "--ds-radius-050";
+    readonly 'border.radius.100': "--ds-radius-100";
+    readonly 'border.radius.200': "--ds-radius-200";
+    readonly 'border.radius.300': "--ds-radius-300";
+    readonly 'border.radius.400': "--ds-radius-400";
+    readonly 'border.radius.round': "--ds-radius-round";
+    readonly 'border.width.050': "--ds-width-050";
+    readonly 'border.width.100': "--ds-width-100";
     readonly 'color.text': "--ds-text";
     readonly 'color.text.accent.red': "--ds-text-accent-red";
     readonly 'color.text.accent.red.bolder': "--ds-text-accent-red-bolder";
@@ -326,6 +334,14 @@ declare const tokens: {
     readonly 'font.lineHeight.600': "--ds-font-lineHeight-600";
 };
 export declare type CSSTokenMap = {
+    'border.radius.050': 'var(--ds-radius-050)';
+    'border.radius.100': 'var(--ds-radius-100)';
+    'border.radius.200': 'var(--ds-radius-200)';
+    'border.radius.300': 'var(--ds-radius-300)';
+    'border.radius.400': 'var(--ds-radius-400)';
+    'border.radius.round': 'var(--ds-radius-round)';
+    'border.width.050': 'var(--ds-width-050)';
+    'border.width.100': 'var(--ds-width-100)';
     'color.text': 'var(--ds-text)';
     'color.text.accent.red': 'var(--ds-text-accent-red)';
     'color.text.accent.red.bolder': 'var(--ds-text-accent-red-bolder)';

package/dist/types/artifacts/tokens-raw/atlassian-shape.d.ts

@@ -0,0 +1,29 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::c9a10991e5bb0b7dbbb35a5f644bceb0>>
+ * @codegenCommand yarn build tokens
+ */
+declare const tokens: {
+    attributes: {
+        group: string;
+        state: string;
+        introduced: string;
+        description: string;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            introduced: string;
+            description: string;
+        };
+        value: string;
+    };
+    name: string;
+    path: string[];
+    cleanName: string;
+}[];
+export default tokens;

package/dist/types/entry-points/tokens-raw.d.ts

@@ -2,3 +2,4 @@ export { default as light } from '../artifacts/tokens-raw/atlassian-light';
 export { default as dark } from '../artifacts/tokens-raw/atlassian-dark';
 export { default as spacing } from '../artifacts/tokens-raw/atlassian-spacing';
 export { default as typography } from '../artifacts/tokens-raw/atlassian-typography';
+export { default as shape } from '../artifacts/tokens-raw/atlassian-shape';

package/dist/types/palettes/shape-palette.d.ts

@@ -0,0 +1,61 @@
+import type { ShapeScaleTokenSchema } from '../types';
+/**
+ * Types are inferred from the base tokens below
+ */
+export declare type ShapePaletteToken = BaseRadiusToken | BaseSizeToken;
+export declare type BaseSizeToken = keyof typeof baseSizeTokens;
+export declare type BaseRadiusToken = keyof typeof baseRadiusTokens;
+declare const baseSizeTokens: {
+    readonly Size050: {
+        readonly value: "0.0625rem";
+        readonly attributes: {
+            readonly group: "shape";
+        };
+    };
+    readonly Size100: {
+        readonly value: "0.125rem";
+        readonly attributes: {
+            readonly group: "shape";
+        };
+    };
+};
+declare const baseRadiusTokens: {
+    readonly Radius050: {
+        readonly value: "0.125rem";
+        readonly attributes: {
+            readonly group: "shape";
+        };
+    };
+    readonly Radius100: {
+        readonly value: "0.25rem";
+        readonly attributes: {
+            readonly group: "shape";
+        };
+    };
+    readonly Radius200: {
+        readonly value: "0.5rem";
+        readonly attributes: {
+            readonly group: "shape";
+        };
+    };
+    readonly Radius300: {
+        readonly value: "0.75rem";
+        readonly attributes: {
+            readonly group: "shape";
+        };
+    };
+    readonly Radius400: {
+        readonly value: "1rem";
+        readonly attributes: {
+            readonly group: "shape";
+        };
+    };
+    readonly RadiusCircle: {
+        readonly value: "50%";
+        readonly attributes: {
+            readonly group: "shape";
+        };
+    };
+};
+declare const shapePalette: ShapeScaleTokenSchema<BaseRadiusToken, BaseSizeToken>;
+export default shapePalette;