@atlaskit/tokens 0.5.0 → 0.6.0

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,295 @@ 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: {
+                '[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;
+            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;
+            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;
+            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;
@@ -196,7 +485,6 @@ export interface BackgroundColorTokenSchema {
                 hover: PaintToken;
                 pressed: PaintToken;
             };
-            disabled: PaintToken;
             blanket: PaintToken;
             boldBrand: {
                 resting: PaintToken;
@@ -267,18 +555,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,10 +566,6 @@ export interface IconBorderColorTokenSchema {
             success: PaintToken;
             discovery: PaintToken;
         };
-    };
-}
-export interface TextColorTokenSchema {
-    color: {
         text: {
             selected: PaintToken;
             highEmphasis: PaintToken;
@@ -301,54 +577,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.5.0",
+  "version": "0.6.0",
   "author": "Atlassian Pty Ltd",
   "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
   "license": "Apache-2.0",
@@ -31,6 +31,7 @@
     "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build"
   },
   "dependencies": {
+    "@atlaskit/ds-lib": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@babel/traverse": "^7.15.0",
     "@babel/types": "^7.15.0"

package/tokens-browser-extension/manifest.json

@@ -16,7 +16,6 @@
         "storage",
         "webNavigation"
     ],
-    "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAs88BPdeATfZMpEmyioaG2gS8OXpcEYKTnfriDiOPrHApjiMOrbiMU2cFZsbxqKpBMktKrmOa6PRq328H6N4QN42p2c9eGdY1Mgun9UAQFV1EQWsUelAWzKeZRMRPWVBTnMHVRIHe7p9cXoHCTRB0kIbqR+P7zhxaf2bCaaiQ/UUMeX7LFLDoXNCmuFOnjLLupkNgJJdPIDCHpEypwQCpNNUH4UsOxJ0yTfAplYdw7cc7ZwSh/BJqAWRplywkXwRrL5FeFfXknIi/tMZzxYv4ZM89CY5ogPr1JZMVA5sw0xW0oh81wLHa6Y47mmPXgMtzyNKZ/QJRP6b66uNuot+FXQIDAQAB",
     "content_scripts": [
         {
             "matches": [
@@ -33,4 +32,4 @@
         }
     ],
     "manifest_version": 2
-}
+}

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;

package/dist/cjs/tokens/default/color/icon-border.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var color = {
-  color: {
-    iconBorder: {
-      brand: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: "\nUse rarely for icons or borders representing brand, in-progress, or information, such as the icons in information sections messages.\n\nAlso use for blue icons or borders when there is no meaning tied to the color, such as file type icons."
-        }
-      },
-      danger: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: "\nUse rarely for icons and borders representing critical information, such the icons in error section messages or the borders on invalid text fields.\n\nAlso use for red icons or borders when there is no meaning tied to the color, such as file type icons."
-        }
-      },
-      warning: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: "\nUse rarely for icons and borders representing semi-urgent information, such as the icons in warning section messages.\n\nAlso use for yellow icons or borders when there is no meaning tied to the color, such as file type icons.\n"
-        }
-      },
-      success: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: "\nUse rarely for icons and borders representing positive information, such as the icons in success section messages or the borders on validated text fields.\n\nAlso use for green icons or borders when there is no meaning tied to the color, such as file type icons.\n"
-        }
-      },
-      discovery: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: "\nUse rarely for icons and borders representing new information, such as the icons in discovery section mesages or the borders in onboarding spotlights.\n\nAlso use for purple icons or borders when there is no meaning tied to the color, such as file type icons.\n"
-        }
-      }
-    }
-  }
-};
-var _default = color;
-exports.default = _default;