@atlaskit/tokens 0.3.0 → 0.4.0

package/dist/types/types.d.ts

@@ -1,24 +1,57 @@
-export interface Token<TValue, Group extends string> {
+import { ActiveTokens } from './artifacts/types';
+export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette';
+export declare type ActiveTokenStates = 'active';
+export declare type ReplacedTokenStates = 'deprecated' | 'deleted';
+export declare type TokenState = ActiveTokenStates | ReplacedTokenStates;
+export declare type Replacement = ActiveTokens[];
+export interface Token<TValue, Group extends Groups> {
     value: TValue;
     attributes: {
-        group?: Group;
+        group: Group;
         description?: string;
+        state?: TokenState;
+        replacement?: Replacement;
     };
 }
-export declare type ColorPalette = keyof PaletteColorTokenSchema['color']['palette'];
-export declare type PaintToken<Value extends string = ColorPalette> = Token<Value, 'paint'>;
-export declare type PaletteToken = Token<string, 'paint'> & {
+/**
+ * Base tokens define the raw values consumed by Design Tokens. They are a context-agnostic
+ * name:value pairing (for example, the base token N0 represents the value #FFFFFF ).
+ */
+export interface BaseToken<TValue, Group extends Groups> extends Token<TValue, Group> {
     attributes: {
-        isPalette: true;
+        group: Group;
     };
+}
+/**
+ * Design tokens represent single sources of truth to name and store semantic design decisions.
+ * They map a semantic name (color.background.default) to a base token (N0).
+ */
+export interface DesignToken<TValue, Group extends Groups> extends Token<TValue, Group> {
+    attributes: {
+        group: Group;
+        description: string;
+        state: ActiveTokenStates;
+        replacement?: undefined;
+    } | {
+        group: Group;
+        description: string;
+        state: ReplacedTokenStates;
+        replacement?: Replacement;
+    };
+}
+declare type OmitDistributive<T, K extends PropertyKey> = T extends any ? T extends object ? Id<DeepOmit<T, K>> : T : never;
+declare type Id<T> = {} & {
+    [P in keyof T]: T[P];
 };
-export declare type ValueSchema<Schema extends object> = {
-    [Key in keyof Schema]: ValueSchema<Omit<Schema[Key], 'attributes'>>;
-};
-export declare type AttributeSchema<Schema extends object> = {
-    [Key in keyof Schema]: AttributeSchema<Omit<Schema[Key], 'value'>>;
-};
-export declare type ShadowToken<Value extends string = ColorPalette> = Token<Array<{
+declare type DeepOmit<T extends any, K extends PropertyKey> = Omit<{
+    [P in keyof T]: OmitDistributive<T[P], K>;
+}, K>;
+export declare type ValueSchema<Schema extends object> = DeepOmit<Schema, 'attributes'>;
+export declare type AttributeSchema<Schema extends object> = DeepOmit<Schema, 'value'>;
+export declare type PaletteToken = BaseToken<string, 'palette'>;
+export declare type ColorPalette = keyof PaletteColorTokenSchema['color']['palette'];
+export declare type PaintToken<Value extends string = ColorPalette> = DesignToken<Value, 'paint'>;
+export declare type ShadowToken<Value extends string = ColorPalette> = DesignToken<Array<{
     color: Value;
     opacity: number;
     offset: {
@@ -29,7 +62,7 @@ export declare type ShadowToken<Value extends string = ColorPalette> = Token<Arr
     spread?: number;
     inset?: boolean;
 }>, 'shadow'>;
-export declare type RawToken = Token<string, 'raw'>;
+export declare type RawToken = DesignToken<string, 'raw'>;
 export interface PaletteColorTokenSchema {
     color: {
         palette: {
@@ -313,7 +346,9 @@ export interface ShadowTokenSchema {
 export interface UtilTokenSchema {
     UNSAFE_util: {
         transparent: RawToken;
+        MISSING_TOKEN: RawToken;
     };
 }
 export declare type ColorTokenSchema = BackgroundColorTokenSchema & BorderColorTokenSchema & IconBorderColorTokenSchema & TextColorTokenSchema & AccentColorTokenSchema & UtilTokenSchema;
 export declare type TokenSchema = PaletteColorTokenSchema & ColorTokenSchema & ShadowTokenSchema;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "Atlassian Pty Ltd",
   "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
   "license": "Apache-2.0",
@@ -21,8 +21,8 @@
   "af:exports": {
     ".": "./src/index.tsx",
     "./token-names": "./src/entry-points/token-names.tsx",
-    "./token-default-values": "./src/entry-points/token-default-values.tsx",
-    "./rename-mapping": "./src/entry-points/rename-mapping.tsx"
+    "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
+    "./babel-plugin": "./src/entry-points/babel-plugin.tsx"
   },
   "scripts": {
     "ak-postbuild": "yarn codegen-tokens && yarn check-clean-git",
@@ -30,12 +30,20 @@
     "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0"
+    "@babel/runtime": "^7.0.0",
+    "@babel/traverse": "^7.15.0",
+    "@babel/types": "^7.15.0"
   },
   "devDependencies": {
+    "@atlaskit/code": "*",
+    "@atlaskit/lozenge": "*",
+    "@atlaskit/tabs": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@babel/core": "^7.12.3",
+    "@emotion/core": "^10.0.9",
     "lodash": "^4.17.15",
     "prettier": "^2.1.1",
+    "react": "^16.8.0",
     "style-dictionary": "^3.0.0",
     "ts-node": "^10.0.0",
     "typescript": "3.9.6"
@@ -48,8 +56,11 @@
     "@repo/internal": {
       "design-system": "v1",
       "ui-components": "lite-mode",
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/dist/cjs/tokens/rename-mapping.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-/**
- * This file is intended to help create automation on top of renaming of tokens.
- *
- * When renaming tokens, you must first update the token at its source of truth.
- * For example: packages/design-system/tokens/src/tokens/atlassian-dark/color/accent.tsx
- *
- * That token might go from `color.accentBlueSubtle` to `color.accentBluePrimary`
- * which is totally acceptable on its own but for some platform targets, such as Figma,
- * we need to provide additional metadata to tell figma that this is a rename and not a removal/addition.
- *
- * To create a rename mapping:
- *
- * 1. Get the fully object path, separated by a '.', i.e. color.background.primary
- * 2. Create a key value pair to the renameMapping below, with key representing the old token and value representing the new token.
- * 3. Update the token at its source of truth
- * 4. run `yarn build tokens`
- * 5. The artifact containing the automation should now be available in the `/dist` folder. i.e. packages/design-system/tokens/dist/figma/atlassian-light/sync-figma-tokens.js
- * 6. After building make sure to remove the mapping from this file before checking it in
- */
-var renameMapping = {};
-var _default = renameMapping;
-exports.default = _default;

package/dist/es2019/entry-points/token-default-values.js

@@ -1 +0,0 @@
-export { default } from '../tokens/token-default-values';

package/dist/es2019/tokens/rename-mapping.js

@@ -1,21 +0,0 @@
-/**
- * This file is intended to help create automation on top of renaming of tokens.
- *
- * When renaming tokens, you must first update the token at its source of truth.
- * For example: packages/design-system/tokens/src/tokens/atlassian-dark/color/accent.tsx
- *
- * That token might go from `color.accentBlueSubtle` to `color.accentBluePrimary`
- * which is totally acceptable on its own but for some platform targets, such as Figma,
- * we need to provide additional metadata to tell figma that this is a rename and not a removal/addition.
- *
- * To create a rename mapping:
- *
- * 1. Get the fully object path, separated by a '.', i.e. color.background.primary
- * 2. Create a key value pair to the renameMapping below, with key representing the old token and value representing the new token.
- * 3. Update the token at its source of truth
- * 4. run `yarn build tokens`
- * 5. The artifact containing the automation should now be available in the `/dist` folder. i.e. packages/design-system/tokens/dist/figma/atlassian-light/sync-figma-tokens.js
- * 6. After building make sure to remove the mapping from this file before checking it in
- */
-const renameMapping = {};
-export default renameMapping;

package/dist/esm/entry-points/token-default-values.js

@@ -1 +0,0 @@
-export { default } from '../tokens/token-default-values';

package/dist/esm/tokens/rename-mapping.js

@@ -1,21 +0,0 @@
-/**
- * This file is intended to help create automation on top of renaming of tokens.
- *
- * When renaming tokens, you must first update the token at its source of truth.
- * For example: packages/design-system/tokens/src/tokens/atlassian-dark/color/accent.tsx
- *
- * That token might go from `color.accentBlueSubtle` to `color.accentBluePrimary`
- * which is totally acceptable on its own but for some platform targets, such as Figma,
- * we need to provide additional metadata to tell figma that this is a rename and not a removal/addition.
- *
- * To create a rename mapping:
- *
- * 1. Get the fully object path, separated by a '.', i.e. color.background.primary
- * 2. Create a key value pair to the renameMapping below, with key representing the old token and value representing the new token.
- * 3. Update the token at its source of truth
- * 4. run `yarn build tokens`
- * 5. The artifact containing the automation should now be available in the `/dist` folder. i.e. packages/design-system/tokens/dist/figma/atlassian-light/sync-figma-tokens.js
- * 6. After building make sure to remove the mapping from this file before checking it in
- */
-var renameMapping = {};
-export default renameMapping;

package/dist/types/entry-points/token-default-values.d.ts

@@ -1 +0,0 @@
-export { default } from '../tokens/token-default-values';

package/dist/types/tokens/rename-mapping.d.ts

@@ -1,24 +0,0 @@
-import tokens from './token-names';
-declare type Token = keyof typeof tokens | string;
-declare type RenameMapping = Partial<Record<Token, Token>>;
-/**
- * This file is intended to help create automation on top of renaming of tokens.
- *
- * When renaming tokens, you must first update the token at its source of truth.
- * For example: packages/design-system/tokens/src/tokens/atlassian-dark/color/accent.tsx
- *
- * That token might go from `color.accentBlueSubtle` to `color.accentBluePrimary`
- * which is totally acceptable on its own but for some platform targets, such as Figma,
- * we need to provide additional metadata to tell figma that this is a rename and not a removal/addition.
- *
- * To create a rename mapping:
- *
- * 1. Get the fully object path, separated by a '.', i.e. color.background.primary
- * 2. Create a key value pair to the renameMapping below, with key representing the old token and value representing the new token.
- * 3. Update the token at its source of truth
- * 4. run `yarn build tokens`
- * 5. The artifact containing the automation should now be available in the `/dist` folder. i.e. packages/design-system/tokens/dist/figma/atlassian-light/sync-figma-tokens.js
- * 6. After building make sure to remove the mapping from this file before checking it in
- */
-declare const renameMapping: RenameMapping;
-export default renameMapping;

package/token-default-values/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "@atlaskit/tokens/token-default-values",
-  "main": "../dist/cjs/entry-points/token-default-values.js",
-  "module": "../dist/esm/entry-points/token-default-values.js",
-  "module:es2019": "../dist/es2019/entry-points/token-default-values.js",
-  "types": "../dist/types/entry-points/token-default-values.d.ts"
-}