@atlaskit/tokens 0.3.0 → 0.5.0

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"sideEffects": false
 }

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

@@ -0,0 +1,21 @@
+/**
+ * This file is intended to help automate renaming of tokens.
+ *
+ * 1. Mark the old token's 'state' as deprecated
+ * 2. Add a 'rename' attribute to the token with the value 'my.new.token'
+ * 3. Create a new token matching the token above: 'my.new.token'
+ * 4. Run 'bolt build tokens' to have you changes reflected in this map
+ * 5. eslint and other tools will now use this to automate replacing tokens
+ *
+ * These changes will then be picked up by our tooling, which will attempt to
+ * migrate as many of these renames as possible
+ */
+import tokens from './token-names';
+declare type Token = keyof typeof tokens | string;
+declare type RenameMap = {
+    path: string;
+    state: 'deprecated' | 'deleted';
+    replacement: Token;
+};
+declare const renameMapper: RenameMap[];
+export default renameMapper;

package/dist/types/{tokens → artifacts}/token-default-values.d.ts

@@ -3,18 +3,18 @@
  */
 declare const defaultTokenValues: {
     readonly 'color.accent.boldBlue': "#579DFF";
-    readonly 'color.accent.boldGreen': "#3ACF91";
-    readonly 'color.accent.boldOrange': "#FFA333";
+    readonly 'color.accent.boldGreen': "#4BCE97";
+    readonly 'color.accent.boldOrange': "#FAA53D";
     readonly 'color.accent.boldPurple': "#9F8FEF";
-    readonly 'color.accent.boldRed': "#F97362";
-    readonly 'color.accent.boldTeal': "#53C8D5";
+    readonly 'color.accent.boldRed': "#F87462";
+    readonly 'color.accent.boldTeal': "#60C6D2";
     readonly 'color.accent.subtleBlue': "#CCE0FF";
-    readonly 'color.accent.subtleGreen': "#AFF3D6";
+    readonly 'color.accent.subtleGreen': "#BAF3DB";
     readonly 'color.accent.subtleMagenta': "#FDD0EC";
-    readonly 'color.accent.subtleOrange': "#FFDEB8";
+    readonly 'color.accent.subtleOrange': "#FFE2BD";
     readonly 'color.accent.subtlePurple': "#DFD8FD";
     readonly 'color.accent.subtleRed': "#FFD2CC";
-    readonly 'color.accent.subtleTeal': "#ADEEF5";
+    readonly 'color.accent.subtleTeal': "#C1F0F5";
     readonly 'color.background.sunken': "#091E4208";
     readonly 'color.background.default': "#FFFFFF";
     readonly 'color.background.card': "#FFFFFF";
@@ -30,24 +30,24 @@ declare const defaultTokenValues: {
     readonly 'color.background.subtleBrand.resting': "#E9F2FF";
     readonly 'color.background.subtleBrand.hover': "#CCE0FF";
     readonly 'color.background.subtleBrand.pressed': "#85B8FF";
-    readonly 'color.background.boldDanger.resting': "#CE2E1C";
-    readonly 'color.background.boldDanger.hover': "#B22515";
-    readonly 'color.background.boldDanger.pressed': "#601D16";
+    readonly 'color.background.boldDanger.resting': "#CA3521";
+    readonly 'color.background.boldDanger.hover': "#AE2A19";
+    readonly 'color.background.boldDanger.pressed': "#601E16";
     readonly 'color.background.subtleDanger.resting': "#FFEDEB";
     readonly 'color.background.subtleDanger.hover': "#FFD2CC";
-    readonly 'color.background.subtleDanger.pressed': "#FF9A8F";
-    readonly 'color.background.boldWarning.resting': "#EBB800";
-    readonly 'color.background.boldWarning.hover': "#D19D00";
+    readonly 'color.background.subtleDanger.pressed': "#FF9C8F";
+    readonly 'color.background.boldWarning.resting': "#E2B203";
+    readonly 'color.background.boldWarning.hover': "#CF9F02";
     readonly 'color.background.boldWarning.pressed': "#B38600";
     readonly 'color.background.subtleWarning.resting': "#FFF7D6";
-    readonly 'color.background.subtleWarning.hover': "#FFE785";
-    readonly 'color.background.subtleWarning.pressed': "#FFD138";
+    readonly 'color.background.subtleWarning.hover': "#F8E6A0";
+    readonly 'color.background.subtleWarning.pressed': "#F5CD47";
     readonly 'color.background.boldSuccess.resting': "#1F845A";
     readonly 'color.background.boldSuccess.hover': "#216E4E";
     readonly 'color.background.boldSuccess.pressed': "#164B35";
     readonly 'color.background.subtleSuccess.resting': "#DFFCF0";
-    readonly 'color.background.subtleSuccess.hover': "#AFF3D6";
-    readonly 'color.background.subtleSuccess.pressed': "#76E0B4";
+    readonly 'color.background.subtleSuccess.hover': "#BAF3DB";
+    readonly 'color.background.subtleSuccess.pressed': "#7EE2B8";
     readonly 'color.background.boldDiscovery.resting': "#6E5DC6";
     readonly 'color.background.boldDiscovery.hover': "#5E4DB2";
     readonly 'color.background.boldDiscovery.pressed': "#352C63";
@@ -67,8 +67,8 @@ declare const defaultTokenValues: {
     readonly 'color.border.focus': "#388BFF";
     readonly 'color.border.neutral': "#091E4224";
     readonly 'color.iconBorder.brand': "#1D7AFC";
-    readonly 'color.iconBorder.danger': "#E8422C";
-    readonly 'color.iconBorder.warning': "#DB6E00";
+    readonly 'color.iconBorder.danger': "#E34935";
+    readonly 'color.iconBorder.warning': "#D97008";
     readonly 'color.iconBorder.success': "#22A06B";
     readonly 'color.iconBorder.discovery': "#8270DB";
     readonly 'color.overlay.hover': "#091E424F";
@@ -83,12 +83,13 @@ declare const defaultTokenValues: {
     readonly 'color.text.link.pressed': "#0055CC";
     readonly 'color.text.brand': "#0055CC";
     readonly 'color.text.warning': "#974F0C";
-    readonly 'color.text.danger': "#B22515";
+    readonly 'color.text.danger': "#AE2A19";
     readonly 'color.text.success': "#216E4E";
     readonly 'color.text.discovery': "#5E4DB2";
     readonly 'color.text.disabled': "#8993A5";
     readonly 'shadow.card': "0px 1px 1px #091E4240, 0px 0px 1px #091E424F";
     readonly 'shadow.overlay': "0px 8px 12px #091E4226, 0px 0px 1px #091E424F";
     readonly 'utility.UNSAFE_util.transparent': "transparent";
+    readonly 'utility.UNSAFE_util.MISSING_TOKEN': "#FA11F2";
 };
 export default defaultTokenValues;

package/dist/types/{tokens → artifacts}/token-names.d.ts

@@ -87,6 +87,7 @@ declare const tokens: {
     readonly 'shadow.card': "--ds-card";
     readonly 'shadow.overlay': "--ds-overlay";
     readonly 'utility.UNSAFE_util.transparent': "--ds-UNSAFE_util-transparent";
+    readonly 'utility.UNSAFE_util.MISSING_TOKEN': "--ds-UNSAFE_util-MISSING_TOKEN";
 };
 export declare type CSSTokenMap = {
     'color.accent.boldBlue': 'var(--ds-accent-boldBlue)';
@@ -177,6 +178,7 @@ export declare type CSSTokenMap = {
     'shadow.card': 'var(--ds-card)';
     'shadow.overlay': 'var(--ds-overlay)';
     'utility.UNSAFE_util.transparent': 'var(--ds-UNSAFE_util-transparent)';
+    'utility.UNSAFE_util.MISSING_TOKEN': 'var(--ds-UNSAFE_util-MISSING_TOKEN)';
 };
 export declare type CSSToken = CSSTokenMap[keyof CSSTokenMap];
 export default tokens;

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

@@ -0,0 +1,80 @@
+declare const tokens: ({
+    attributes: {
+        group: string;
+        state: string;
+        description: string;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            description: string;
+        };
+        value: string;
+    };
+    name: string;
+    path: string[];
+} | {
+    attributes: {
+        group: string;
+        state: string;
+        description: string;
+    };
+    value: ({
+        radius: number;
+        spread: number;
+        color: string;
+        offset: {
+            x: number;
+            y: number;
+        };
+        opacity: number;
+        inset: boolean;
+    } | {
+        radius: number;
+        offset: {
+            x: number;
+            y: number;
+        };
+        color: string;
+        opacity: number;
+        spread?: undefined;
+        inset?: undefined;
+    })[];
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            description: string;
+        };
+        value: ({
+            radius: number;
+            spread: number;
+            color: string;
+            offset: {
+                x: number;
+                y: number;
+            };
+            opacity: number;
+            inset: boolean;
+        } | {
+            radius: number;
+            offset: {
+                x: number;
+                y: number;
+            };
+            color: string;
+            opacity: number;
+            spread?: undefined;
+            inset?: undefined;
+        })[];
+    };
+    name: string;
+    path: string[];
+})[];
+export default tokens;

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

@@ -0,0 +1,56 @@
+declare const tokens: ({
+    attributes: {
+        group: string;
+        state: string;
+        description: string;
+    };
+    value: string;
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            description: string;
+        };
+        value: string;
+    };
+    name: string;
+    path: string[];
+} | {
+    attributes: {
+        group: string;
+        state: string;
+        description: string;
+    };
+    value: {
+        radius: number;
+        offset: {
+            x: number;
+            y: number;
+        };
+        color: string;
+        opacity: number;
+    }[];
+    filePath: string;
+    isSource: boolean;
+    original: {
+        attributes: {
+            group: string;
+            state: string;
+            description: string;
+        };
+        value: {
+            radius: number;
+            offset: {
+                x: number;
+                y: number;
+            };
+            color: string;
+            opacity: number;
+        }[];
+    };
+    name: string;
+    path: string[];
+})[];
+export default tokens;

package/dist/types/artifacts/types.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Type representing the currently active tokens
+ */
+export declare type ActiveTokens = 'color.accent.boldBlue' | 'color.accent.boldGreen' | 'color.accent.boldOrange' | 'color.accent.boldPurple' | 'color.accent.boldRed' | 'color.accent.boldTeal' | 'color.accent.subtleBlue' | 'color.accent.subtleGreen' | 'color.accent.subtleMagenta' | 'color.accent.subtleOrange' | 'color.accent.subtlePurple' | 'color.accent.subtleRed' | 'color.accent.subtleTeal' | 'color.background.sunken' | 'color.background.default' | 'color.background.card' | 'color.background.overlay' | 'color.background.selected.resting' | 'color.background.selected.hover' | 'color.background.selected.pressed' | 'color.background.blanket' | 'color.background.disabled' | 'color.background.boldBrand.resting' | 'color.background.boldBrand.hover' | 'color.background.boldBrand.pressed' | 'color.background.subtleBrand.resting' | 'color.background.subtleBrand.hover' | 'color.background.subtleBrand.pressed' | 'color.background.boldDanger.resting' | 'color.background.boldDanger.hover' | 'color.background.boldDanger.pressed' | 'color.background.subtleDanger.resting' | 'color.background.subtleDanger.hover' | 'color.background.subtleDanger.pressed' | 'color.background.boldWarning.resting' | 'color.background.boldWarning.hover' | 'color.background.boldWarning.pressed' | 'color.background.subtleWarning.resting' | 'color.background.subtleWarning.hover' | 'color.background.subtleWarning.pressed' | 'color.background.boldSuccess.resting' | 'color.background.boldSuccess.hover' | 'color.background.boldSuccess.pressed' | 'color.background.subtleSuccess.resting' | 'color.background.subtleSuccess.hover' | 'color.background.subtleSuccess.pressed' | 'color.background.boldDiscovery.resting' | 'color.background.boldDiscovery.hover' | 'color.background.boldDiscovery.pressed' | 'color.background.subtleDiscovery.resting' | 'color.background.subtleDiscovery.hover' | 'color.background.subtleDiscovery.pressed' | 'color.background.boldNeutral.resting' | 'color.background.boldNeutral.hover' | 'color.background.boldNeutral.pressed' | 'color.background.transparentNeutral.hover' | 'color.background.transparentNeutral.pressed' | 'color.background.subtleNeutral.resting' | 'color.background.subtleNeutral.hover' | 'color.background.subtleNeutral.pressed' | 'color.background.subtleBorderedNeutral.resting' | 'color.background.subtleBorderedNeutral.pressed' | 'color.border.focus' | 'color.border.neutral' | 'color.iconBorder.brand' | 'color.iconBorder.danger' | 'color.iconBorder.warning' | 'color.iconBorder.success' | 'color.iconBorder.discovery' | 'color.overlay.hover' | 'color.overlay.pressed' | 'color.text.selected' | 'color.text.highEmphasis' | 'color.text.mediumEmphasis' | 'color.text.lowEmphasis' | 'color.text.onBold' | 'color.text.onBoldWarning' | 'color.text.link.resting' | 'color.text.link.pressed' | 'color.text.brand' | 'color.text.warning' | 'color.text.danger' | 'color.text.success' | 'color.text.discovery' | 'color.text.disabled' | 'shadow.card' | 'shadow.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

package/dist/types/babel-plugin/index.d.ts

@@ -0,0 +1 @@
+export { default } from './plugin';

package/dist/types/babel-plugin/plugin.d.ts

@@ -0,0 +1,14 @@
+import { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+export default function plugin(): {
+    visitor: {
+        CallExpression(path: NodePath<t.CallExpression>, state: {
+            opts: {
+                shouldUseAutoFallback?: boolean;
+            };
+        }): void;
+        Program: {
+            exit(path: NodePath<t.Program>): void;
+        };
+    };
+};

package/dist/types/entry-points/babel-plugin.d.ts

@@ -0,0 +1 @@
+export { default } from '../babel-plugin/plugin';

package/dist/types/entry-points/rename-mapping.d.ts

@@ -1 +1 @@
-export { default } from '../tokens/rename-mapping';
+export { default } from '../artifacts/rename-mapping';

package/dist/types/entry-points/token-names.d.ts

@@ -1,2 +1,2 @@
-export { default } from '../tokens/token-names';
-export type { CSSToken } from '../tokens/token-names';
+export { default } from '../artifacts/token-names';
+export type { CSSToken } from '../artifacts/token-names';

package/dist/types/get-token.d.ts

@@ -1,4 +1,4 @@
-import tokens, { CSSTokenMap } from './tokens/token-names';
+import tokens, { CSSTokenMap } from './artifacts/token-names';
 declare type tokenSchema = typeof tokens;
 declare function token<T extends keyof tokenSchema>(path: T, fallback?: string): CSSTokenMap[T];
 export default token;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { default as token } from './get-token';
 export { default as setGlobalTheme } from './set-global-theme';
-export type { CSSToken } from './tokens/token-names';
+export type { CSSToken } from './artifacts/token-names';

package/dist/types/tokens/atlassian-dark/utility/utility.d.ts

@@ -1,5 +1,13 @@
-import type { UtilTokenSchema, ValueSchema } from '../../../types';
 declare const _default: {
-    utility: ValueSchema<UtilTokenSchema>;
+    utility: Pick<{
+        UNSAFE_util: {
+            transparent: {
+                value: string;
+            };
+            MISSING_TOKEN: {
+                value: string;
+            };
+        };
+    }, "UNSAFE_util">;
 };
 export default _default;

package/dist/types/tokens/atlassian-light/utility/utility.d.ts

@@ -1,5 +1,13 @@
-import type { UtilTokenSchema, ValueSchema } from '../../../types';
 declare const _default: {
-    utility: ValueSchema<UtilTokenSchema>;
+    utility: Pick<{
+        UNSAFE_util: {
+            transparent: {
+                value: string;
+            };
+            MISSING_TOKEN: {
+                value: string;
+            };
+        };
+    }, "UNSAFE_util">;
 };
 export default _default;