@atlaskit/tokens 0.4.2 → 0.6.2

package/dist/types/types.d.ts

@@ -1,9 +1,9 @@
-import { ActiveTokens } from './artifacts/types';
+import { InternalTokenIds } from './artifacts/types-internal';
 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 declare type Replacement = InternalTokenIds | InternalTokenIds[];
 export interface Token<TValue, Group extends Groups> {
     value: TValue;
     attributes: {
@@ -186,6 +186,305 @@ export interface PaletteColorTokenSchema {
 }
 export interface BackgroundColorTokenSchema {
     color: {
+        blanket: PaintToken;
+        background: {
+            disabled: PaintToken;
+            inverse: PaintToken;
+            input: {
+                '[default]': PaintToken;
+                hovered: PaintToken;
+                pressed: PaintToken;
+            };
+            neutral: {
+                '[default]': {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+                subtle: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+                bold: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
+            brand: {
+                bold: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
+            selected: {
+                '[default]': {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+                bold: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
+            danger: {
+                '[default]': {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+                bold: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
+            warning: {
+                '[default]': {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+                bold: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
+            success: {
+                '[default]': {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+                bold: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
+            discovery: {
+                '[default]': {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+                bold: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
+            information: {
+                '[default]': {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+                bold: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
+        };
+    };
+}
+export interface BorderColorTokenSchema {
+    color: {
+        border: {
+            '[default]': PaintToken;
+            focused: PaintToken;
+            input: PaintToken;
+            disabled: PaintToken;
+            brand: PaintToken;
+            selected: PaintToken;
+            danger: PaintToken;
+            warning: PaintToken;
+            success: PaintToken;
+            discovery: PaintToken;
+            information: PaintToken;
+        };
+    };
+}
+export interface IconColorTokenSchema {
+    color: {
+        icon: {
+            '[default]': PaintToken;
+            subtle: PaintToken;
+            inverse: PaintToken;
+            disabled: PaintToken;
+            brand: PaintToken;
+            selected: PaintToken;
+            danger: PaintToken;
+            warning: {
+                '[default]': PaintToken;
+                inverse: PaintToken;
+            };
+            success: PaintToken;
+            discovery: PaintToken;
+            information: PaintToken;
+        };
+    };
+}
+export interface TextColorTokenSchema {
+    color: {
+        text: {
+            '[default]': PaintToken;
+            subtle: PaintToken;
+            subtlest: PaintToken;
+            inverse: PaintToken;
+            brand: PaintToken;
+            selected: PaintToken;
+            danger: PaintToken;
+            warning: {
+                '[default]': PaintToken;
+                inverse: PaintToken;
+            };
+            success: PaintToken;
+            information: PaintToken;
+            discovery: PaintToken;
+            disabled: PaintToken;
+        };
+        link: {
+            '[default]': PaintToken;
+            pressed: PaintToken;
+        };
+    };
+}
+export interface AccentColorTokenSchema {
+    color: {
+        text: {
+            accent: {
+                blue: PaintToken;
+                red: PaintToken;
+                orange: PaintToken;
+                yellow: PaintToken;
+                green: PaintToken;
+                purple: PaintToken;
+                teal: PaintToken;
+                magenta: PaintToken;
+            };
+        };
+        icon: {
+            accent: {
+                blue: PaintToken;
+                red: PaintToken;
+                orange: PaintToken;
+                yellow: PaintToken;
+                green: PaintToken;
+                purple: PaintToken;
+                teal: PaintToken;
+                magenta: PaintToken;
+            };
+        };
+        border: {
+            accent: {
+                blue: PaintToken;
+                red: PaintToken;
+                orange: PaintToken;
+                yellow: PaintToken;
+                green: PaintToken;
+                purple: PaintToken;
+                teal: PaintToken;
+                magenta: PaintToken;
+            };
+        };
+        background: {
+            accent: {
+                blue: {
+                    '[default]': PaintToken;
+                    bold: PaintToken;
+                };
+                red: {
+                    '[default]': PaintToken;
+                    bold: PaintToken;
+                };
+                orange: {
+                    '[default]': PaintToken;
+                    bold: PaintToken;
+                };
+                yellow: {
+                    '[default]': PaintToken;
+                    bold: PaintToken;
+                };
+                green: {
+                    '[default]': PaintToken;
+                    bold: PaintToken;
+                };
+                teal: {
+                    '[default]': PaintToken;
+                    bold: PaintToken;
+                };
+                purple: {
+                    '[default]': PaintToken;
+                    bold: PaintToken;
+                };
+                magenta: {
+                    '[default]': PaintToken;
+                    bold: PaintToken;
+                };
+            };
+        };
+    };
+}
+export interface InteractionColorTokenSchema {
+    color: {
+        interaction: {
+            pressed: PaintToken;
+            hovered: PaintToken;
+            inverse: {
+                pressed: PaintToken;
+                hovered: PaintToken;
+            };
+        };
+    };
+}
+export interface UtilTokenSchema {
+    UNSAFE_util: {
+        transparent: RawToken;
+        MISSING_TOKEN: RawToken;
+    };
+}
+export interface SurfaceTokenSchema {
+    elevation: {
+        surface: {
+            '[default]': PaintToken;
+            sunken: PaintToken;
+            raised: PaintToken;
+            overlay: PaintToken;
+        };
+    };
+}
+export interface ShadowTokenSchema {
+    elevation: {
+        shadow: {
+            raised: ShadowToken;
+            overlay: ShadowToken;
+        };
+    };
+}
+export interface DeprecatedTokenSchema {
+    color: {
+        accent: {
+            boldBlue: PaintToken;
+            boldGreen: PaintToken;
+            boldOrange: PaintToken;
+            boldPurple: PaintToken;
+            boldRed: PaintToken;
+            boldTeal: PaintToken;
+            subtleBlue: PaintToken;
+            subtleRed: PaintToken;
+            subtleGreen: PaintToken;
+            subtleOrange: PaintToken;
+            subtleTeal: PaintToken;
+            subtlePurple: PaintToken;
+            subtleMagenta: PaintToken;
+        };
         background: {
             default: PaintToken;
             sunken: PaintToken;
@@ -194,10 +493,15 @@ export interface BackgroundColorTokenSchema {
             selected: {
                 resting: PaintToken;
                 hover: PaintToken;
-                pressed: PaintToken;
             };
-            disabled: PaintToken;
             blanket: PaintToken;
+            brand: {
+                '[default]': {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
             boldBrand: {
                 resting: PaintToken;
                 hover: PaintToken;
@@ -267,18 +571,10 @@ export interface BackgroundColorTokenSchema {
                 pressed: PaintToken;
             };
         };
-    };
-}
-export interface BorderColorTokenSchema {
-    color: {
         border: {
             focus: PaintToken;
             neutral: PaintToken;
         };
-    };
-}
-export interface IconBorderColorTokenSchema {
-    color: {
         iconBorder: {
             brand: PaintToken;
             danger: PaintToken;
@@ -286,12 +582,7 @@ export interface IconBorderColorTokenSchema {
             success: PaintToken;
             discovery: PaintToken;
         };
-    };
-}
-export interface TextColorTokenSchema {
-    color: {
         text: {
-            selected: PaintToken;
             highEmphasis: PaintToken;
             mediumEmphasis: PaintToken;
             lowEmphasis: PaintToken;
@@ -301,54 +592,18 @@ export interface TextColorTokenSchema {
                 resting: PaintToken;
                 pressed: PaintToken;
             };
-            brand: PaintToken;
-            warning: PaintToken;
-            danger: PaintToken;
-            success: PaintToken;
-            discovery: PaintToken;
-            disabled: PaintToken;
         };
-    };
-}
-export interface AccentColorTokenSchema {
-    color: {
-        accent: {
-            boldBlue: PaintToken;
-            boldGreen: PaintToken;
-            boldOrange: PaintToken;
-            boldPurple: PaintToken;
-            boldRed: PaintToken;
-            boldTeal: PaintToken;
-            subtleBlue: PaintToken;
-            subtleRed: PaintToken;
-            subtleGreen: PaintToken;
-            subtleOrange: PaintToken;
-            subtleTeal: PaintToken;
-            subtlePurple: PaintToken;
-            subtleMagenta: PaintToken;
-        };
-    };
-}
-export interface OverlayColorTokenSchema {
-    color: {
         overlay: {
             pressed: PaintToken;
             hover: PaintToken;
         };
     };
-}
-export interface ShadowTokenSchema {
     shadow: {
         card: ShadowToken;
         overlay: ShadowToken;
     };
 }
-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 declare type ElevationTokenSchema = SurfaceTokenSchema & ShadowTokenSchema;
+export declare type ColorTokenSchema = BackgroundColorTokenSchema & BorderColorTokenSchema & IconColorTokenSchema & TextColorTokenSchema & AccentColorTokenSchema & UtilTokenSchema;
+export declare type TokenSchema = PaletteColorTokenSchema & ColorTokenSchema & ElevationTokenSchema;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.4.2",
+  "version": "0.6.2",
   "author": "Atlassian Pty Ltd",
   "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
   "license": "Apache-2.0",
@@ -26,22 +26,31 @@
     "./css": "./css"
   },
   "scripts": {
-    "ak-postbuild": "yarn codegen-tokens && yarn check-clean-git",
-    "check-clean-git": "git diff --exit-code -- packages/design-system/tokens/ || (echo 'tokens are is out of date, run bolt build tokens' && false)",
-    "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build"
+    "ak-postbuild": "yarn codegen-tokens && yarn check-clean-git && yarn build-chrome-extension",
+    "check-clean-git": "git diff --exit-code -- packages/design-system/tokens/ || (echo 'tokens are is out of date, run yarn build tokens' && false)",
+    "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build",
+    "build-chrome-extension": "yarn --cwd tokens-browser-extension build-chrome-extension"
   },
   "dependencies": {
+    "@atlaskit/ds-lib": "^1.4.0",
     "@babel/runtime": "^7.0.0",
     "@babel/traverse": "^7.15.0",
     "@babel/types": "^7.15.0"
   },
   "devDependencies": {
-    "@atlaskit/code": "*",
-    "@atlaskit/lozenge": "*",
-    "@atlaskit/tabs": "*",
+    "@atlaskit/code": "^14.3.0",
+    "@atlaskit/icon": "^21.10.2",
+    "@atlaskit/lozenge": "^11.0.0",
+    "@atlaskit/section-message": "^6.1.7",
+    "@atlaskit/tabs": "^13.2.4",
+    "@atlaskit/textfield": "^5.1.5",
+    "@atlaskit/theme": "^12.1.2",
+    "@atlaskit/toggle": "^12.4.2",
     "@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",
+    "@types/chrome": "^0.0.171",
+    "copy-webpack-plugin": "^6.4.0",
     "lodash": "^4.17.21",
     "prettier": "^2.1.1",
     "react": "^16.8.0",

package/dist/cjs/tokens/atlassian-dark/color/icon-border.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var color = {
-  color: {
-    iconBorder: {
-      brand: {
-        value: 'B500'
-      },
-      danger: {
-        value: 'R500'
-      },
-      warning: {
-        value: 'Y500'
-      },
-      success: {
-        value: 'G500'
-      },
-      discovery: {
-        value: 'P500'
-      }
-    }
-  }
-};
-var _default = color;
-exports.default = _default;

package/dist/cjs/tokens/atlassian-dark/color/overlay.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var color = {
-  color: {
-    overlay: {
-      hover: {
-        value: 'DN400A'
-      },
-      pressed: {
-        value: 'DN500A'
-      }
-    }
-  }
-};
-var _default = color;
-exports.default = _default;

package/dist/cjs/tokens/atlassian-dark/shadow/shadow.js

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var shadow = {
-  shadow: {
-    card: {
-      value: [{
-        radius: 1,
-        offset: {
-          x: 0,
-          y: 1
-        },
-        color: 'DN-100A',
-        // This opacity overrides the color alpha.
-        opacity: 0.5
-      }, {
-        radius: 1,
-        offset: {
-          x: 0,
-          y: 0
-        },
-        color: 'DN-100A',
-        // This opacity overrides the color alpha.
-        opacity: 0.5
-      }]
-    },
-    overlay: {
-      value: [{
-        radius: 0,
-        spread: 1,
-        color: 'DN100A',
-        offset: {
-          x: 0,
-          y: 0
-        },
-        opacity: 0.04,
-        inset: true
-      }, {
-        radius: 12,
-        offset: {
-          x: 0,
-          y: 8
-        },
-        color: 'DN-100A',
-        // This opacity overrides the color alpha.
-        opacity: 0.36
-      }, {
-        radius: 1,
-        offset: {
-          x: 0,
-          y: 0
-        },
-        color: 'DN-100A',
-        // This opacity overrides the color alpha.
-        opacity: 0.5
-      }]
-    }
-  }
-};
-var _default = shadow;
-exports.default = _default;

package/dist/cjs/tokens/atlassian-light/color/icon-border.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var color = {
-  color: {
-    iconBorder: {
-      brand: {
-        value: 'B600'
-      },
-      danger: {
-        value: 'R600'
-      },
-      warning: {
-        value: 'O600'
-      },
-      success: {
-        value: 'G600'
-      },
-      discovery: {
-        value: 'P600'
-      }
-    }
-  }
-};
-var _default = color;
-exports.default = _default;

package/dist/cjs/tokens/atlassian-light/color/overlay.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var color = {
-  color: {
-    overlay: {
-      hover: {
-        value: 'N400A'
-      },
-      pressed: {
-        value: 'N500A'
-      }
-    }
-  }
-};
-var _default = color;
-exports.default = _default;

package/dist/cjs/tokens/atlassian-light/shadow/shadow.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var shadow = {
-  shadow: {
-    card: {
-      value: [{
-        radius: 1,
-        offset: {
-          x: 0,
-          y: 1
-        },
-        color: 'N1100',
-        opacity: 0.25
-      }, {
-        radius: 1,
-        offset: {
-          x: 0,
-          y: 0
-        },
-        color: 'N1100',
-        opacity: 0.31
-      }]
-    },
-    overlay: {
-      value: [{
-        radius: 12,
-        offset: {
-          x: 0,
-          y: 8
-        },
-        color: 'N1100',
-        opacity: 0.15
-      }, {
-        radius: 1,
-        offset: {
-          x: 0,
-          y: 0
-        },
-        color: 'N1100',
-        opacity: 0.31
-      }]
-    }
-  }
-};
-var _default = shadow;
-exports.default = _default;