@atlaskit/tokens 1.1.0 → 1.2.0

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

@@ -7,86 +7,86 @@ declare const baseSpacingTokens: {
     readonly Space0: {
         readonly value: "0";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space025: {
         readonly value: "0.125rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space050: {
         readonly value: "0.25rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space075: {
         readonly value: "0.375rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space100: {
         readonly value: "0.5rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space150: {
         readonly value: "0.75rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space200: {
         readonly value: "1rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space250: {
         readonly value: "1.25rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space300: {
         readonly value: "1.5rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space400: {
         readonly value: "2rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space500: {
         readonly value: "2.5rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space600: {
         readonly value: "3rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
     };
     readonly Space800: {
         readonly value: "4rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
         readonly pixelValue: "64px";
     };
     readonly Space1000: {
         readonly value: "5rem";
         readonly attributes: {
-            readonly group: "scale";
+            readonly group: "spacing";
         };
         readonly pixelValue: "80px";
     };

package/dist/types/theme-config.d.ts

@@ -6,14 +6,14 @@
  * These ids are what the actual theme files/folders are called.
  * style-dictionary will attempt to locate these in the file-system.
  */
-export declare type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-spacing' | 'atlassian-typography';
+export declare type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
 export declare type ThemeFileNames = Themes;
 /**
  * Theme kinds: The type of theme.
  * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
  * In the future other types may be introduced such as typography.
  */
-export declare type ThemeKinds = 'color' | 'spacing' | 'typography';
+export declare type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape';
 /**
  * Theme modes: The general purpose of a theme.
  * This attr is used to apply the appropriate system-preference option
@@ -29,7 +29,7 @@ export declare type DataColorModes = Omit<ThemeColorModes, 'auto'>;
  *
  * These ids must be kebab case
  */
-export declare const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography"];
+export declare const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape"];
 export declare type ThemeIds = typeof themeIds[number];
 /**
  * Theme to use a base. This will create the theme as
@@ -42,7 +42,7 @@ export declare type ExtensionThemeId = ThemeIds;
  * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
  * previous color set.
  */
-export declare type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale' | 'typographyPalette';
+export declare type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale' | 'shapePalette' | 'typographyPalette';
 /**
  * ThemeConfig: the source of truth for all theme meta-data.
  * This object should be used whenever interfacing with themes.
@@ -55,9 +55,7 @@ interface ThemeConfig {
         type: 'color';
         mode: Exclude<ThemeColorModes, 'auto'>;
     } | {
-        type: 'spacing';
-    } | {
-        type: 'typography';
+        type: Extract<ThemeKinds, 'spacing' | 'typography' | 'shape'>;
     }) & {
         extends?: ExtensionThemeId;
     };

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

@@ -0,0 +1,7 @@
+import type { ShapeTokenSchema, ValueSchema } from '../../types';
+/**
+ * This is combined with the attribute schema.
+ * @link 'file:../default/shape/shape.tsx'
+ */
+declare const shape: ValueSchema<ShapeTokenSchema>;
+export default shape;

package/dist/types/tokens/default/shape/shape.d.ts

@@ -0,0 +1,3 @@
+import type { AttributeSchema, ShapeTokenSchema } from '../../../types';
+declare const shape: AttributeSchema<ShapeTokenSchema>;
+export default shape;

package/dist/types/types.d.ts

@@ -1,6 +1,7 @@
 import type { InternalTokenIds } from './artifacts/types-internal';
+import type { ShapePaletteToken } from './palettes/shape-palette';
 import type { SpacingPaletteToken } from './palettes/spacing-scale';
-export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'scale' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight';
+export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight';
 export declare type ActiveTokenState = 'active';
 export declare type DeprecatedTokenState = 'deprecated';
 export declare type DeletedTokenState = 'deleted';
@@ -103,17 +104,13 @@ export declare type ShadowToken<BaseToken> = DesignToken<Array<{
 }>, 'shadow'>;
 export declare type OpacityToken = DesignToken<string, 'opacity'>;
 export declare type SpacingToken = DesignToken<SpacingPaletteToken, 'spacing'>;
+export declare type ShapeToken = DesignToken<ShapePaletteToken, 'shape'>;
 export declare type FontSizeToken<BaseToken> = DesignToken<BaseToken, 'fontSize'>;
 export declare type FontWeightToken<BaseToken> = DesignToken<BaseToken, 'fontWeight'>;
 export declare type FontFamilyToken<BaseToken> = DesignToken<BaseToken, 'fontFamily'>;
 export declare type LineHeightToken<BaseToken> = DesignToken<BaseToken, 'lineHeight'>;
 export declare type TypographyToken<BaseToken> = DesignToken<BaseToken, 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight'>;
 export declare type RawToken = DesignToken<string, 'raw'>;
-export interface ScaleToken extends BaseToken<string, 'scale'> {
-    attributes: {
-        group: 'scale';
-    };
-}
 export interface PaletteColorTokenSchema<PaletteValues extends string> {
     value: {
         opacity: {
@@ -125,23 +122,29 @@ export interface PaletteColorTokenSchema<PaletteValues extends string> {
         palette: Record<PaletteValues, PaletteToken>;
     };
 }
+declare type SpacingSchemaValue = BaseToken<string, 'spacing'>;
+declare type TypographySchemaValue = BaseToken<string, 'typography'>;
+declare type ShapeSchemaValue = BaseToken<string, 'shape'>;
 export interface SpacingScaleTokenSchema<ScaleValues extends string> {
-    space: Record<ScaleValues, ScaleToken>;
-    spacing: {
-        scale: Record<ScaleValues, ScaleToken>;
+    space: Record<ScaleValues, SpacingSchemaValue>;
+}
+export interface ShapeScaleTokenSchema<RadiusScaleValues extends string, SizeScaleValues extends string> {
+    border: {
+        radius: Record<RadiusScaleValues, ShapeSchemaValue>;
+        width: Record<SizeScaleValues, ShapeSchemaValue>;
     };
 }
 export interface FontSizeScaleTokenSchema<ScaleValues extends string> {
-    fontSize: Record<ScaleValues, ScaleToken>;
+    fontSize: Record<ScaleValues, TypographySchemaValue>;
 }
 export interface FontWeightScaleTokenSchema<ScaleValues extends string> {
-    fontWeight: Record<ScaleValues, ScaleToken>;
+    fontWeight: Record<ScaleValues, TypographySchemaValue>;
 }
 export interface FontFamilyPaletteTokenSchema<ScaleValues extends string> {
-    fontFamily: Record<ScaleValues, ScaleToken>;
+    fontFamily: Record<ScaleValues, TypographySchemaValue>;
 }
 export interface LineHeightScaleTokenSchema<ScaleValues extends string> {
-    lineHeight: Record<ScaleValues, ScaleToken>;
+    lineHeight: Record<ScaleValues, TypographySchemaValue>;
 }
 export interface BackgroundColorTokenSchema<BaseToken> {
     color: {
@@ -762,6 +765,22 @@ export interface SpacingTokenSchema {
         '1000': SpacingToken;
     };
 }
+export interface ShapeTokenSchema {
+    border: {
+        width: {
+            '050': ShapeToken;
+            '100': ShapeToken;
+        };
+        radius: {
+            '050': ShapeToken;
+            '100': ShapeToken;
+            '200': ShapeToken;
+            '300': ShapeToken;
+            '400': ShapeToken;
+            round: ShapeToken;
+        };
+    };
+}
 export interface FontSizeTokenSchema<BaseToken> {
     font: {
         size: {

package/figma/atlassian-shape.json

@@ -0,0 +1,78 @@
+{
+  "name": "Shape",
+  "tokens": {
+    "Shape/border.radius.050": {
+      "attributes": {
+        "group": "shape",
+        "state": "experimental",
+        "introduced": "1.1.0",
+        "description": "Experimental, description needs to be amended"
+      },
+      "value": "0.125rem"
+    },
+    "Shape/border.radius.100": {
+      "attributes": {
+        "group": "shape",
+        "state": "experimental",
+        "introduced": "1.1.0",
+        "description": "Experimental, description needs to be amended"
+      },
+      "value": "0.25rem"
+    },
+    "Shape/border.radius.200": {
+      "attributes": {
+        "group": "shape",
+        "state": "experimental",
+        "introduced": "1.1.0",
+        "description": "Experimental, description needs to be amended"
+      },
+      "value": "0.5rem"
+    },
+    "Shape/border.radius.300": {
+      "attributes": {
+        "group": "shape",
+        "state": "experimental",
+        "introduced": "1.1.0",
+        "description": "Experimental, description needs to be amended"
+      },
+      "value": "0.75rem"
+    },
+    "Shape/border.radius.400": {
+      "attributes": {
+        "group": "shape",
+        "state": "experimental",
+        "introduced": "1.1.0",
+        "description": "Experimental, description needs to be amended"
+      },
+      "value": "1rem"
+    },
+    "Shape/border.radius.round": {
+      "attributes": {
+        "group": "shape",
+        "state": "experimental",
+        "introduced": "1.1.0",
+        "description": "Experimental, description needs to be amended"
+      },
+      "value": "50%"
+    },
+    "Shape/border.width.050": {
+      "attributes": {
+        "group": "shape",
+        "state": "experimental",
+        "introduced": "1.1.0",
+        "description": "Experimental, description needs to be amended"
+      },
+      "value": "0.0625rem"
+    },
+    "Shape/border.width.100": {
+      "attributes": {
+        "group": "shape",
+        "state": "experimental",
+        "introduced": "1.1.0",
+        "description": "Experimental, description needs to be amended"
+      },
+      "value": "0.125rem"
+    }
+  },
+  "renameMap": {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",

package/report.api.md

@@ -22,6 +22,14 @@ export type CSSToken = CSSTokenMap[keyof CSSTokenMap];
 
 // @public (undocumented)
 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)';
@@ -383,6 +391,7 @@ export function getTokenValue<T extends keyof Tokens_2>(
 type Palettes =
   | 'defaultPalette'
   | 'legacyPalette'
+  | 'shapePalette'
   | 'spacingScale'
   | 'typographyPalette';
 
@@ -410,10 +419,7 @@ interface ThemeConfig {
         mode: Exclude<ThemeColorModes, 'auto'>;
       }
     | {
-        type: 'spacing';
-      }
-    | {
-        type: 'typography';
+        type: Extract<ThemeKinds, 'shape' | 'spacing' | 'typography'>;
       }
   ) & {
     extends?: ExtensionThemeId;
@@ -440,8 +446,12 @@ const themeIds: readonly [
   'legacy-dark',
   'spacing',
   'typography',
+  'shape',
 ];
 
+// @public
+type ThemeKinds = 'color' | 'shape' | 'spacing' | 'typography';
+
 // @public
 export class ThemeMutationObserver {
   constructor(callback: (theme: Partial<ThemeState>) => unknown);
@@ -464,6 +474,7 @@ export type Themes =
   | 'atlassian-legacy-dark'
   | 'atlassian-legacy-light'
   | 'atlassian-light'
+  | 'atlassian-shape'
   | 'atlassian-spacing'
   | 'atlassian-typography';
 
@@ -505,6 +516,14 @@ type Tokens = typeof tokens;
 
 // @public
 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';

package/tmp/api-report-tmp.d.ts

@@ -11,6 +11,14 @@ export type CSSToken = CSSTokenMap[keyof CSSTokenMap];
 
 // @public (undocumented)
 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)';
@@ -352,7 +360,7 @@ export const getThemeStyles: ({ colorMode, dark, light, spacing, typography, }?:
 export function getTokenValue<T extends keyof Tokens_2>(tokenId: T, fallback?: string): string;
 
 // @public
-type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale' | 'typographyPalette';
+type Palettes = 'defaultPalette' | 'legacyPalette' | 'shapePalette' | 'spacingScale' | 'typographyPalette';
 
 // @public
 export const setGlobalTheme: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Promise<UnbindFn>;
@@ -370,9 +378,7 @@ interface ThemeConfig {
         type: 'color';
         mode: Exclude<ThemeColorModes, 'auto'>;
     } | {
-        type: 'spacing';
-    } | {
-        type: 'typography';
+        type: Extract<ThemeKinds, 'shape' | 'spacing' | 'typography'>;
     }) & {
         extends?: ExtensionThemeId;
     };
@@ -391,7 +397,10 @@ export const themeConfig: Record<Themes, ThemeConfig>;
 export type ThemeIds = typeof themeIds[number];
 
 // @public
-const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography"];
+const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape"];
+
+// @public
+type ThemeKinds = 'color' | 'shape' | 'spacing' | 'typography';
 
 // @public
 export class ThemeMutationObserver {
@@ -410,7 +419,7 @@ export class ThemeMutationObserver {
 export const themeObjectToString: (themeState: Partial<ThemeState>) => string;
 
 // @public
-export type Themes = 'atlassian-dark' | 'atlassian-legacy-dark' | 'atlassian-legacy-light' | 'atlassian-light' | 'atlassian-spacing' | 'atlassian-typography';
+export type Themes = 'atlassian-dark' | 'atlassian-legacy-dark' | 'atlassian-legacy-light' | 'atlassian-light' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
 
 // @public (undocumented)
 export interface ThemeState {
@@ -447,6 +456,14 @@ type Tokens = typeof tokens;
 
 // @public
 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";