@atlaskit/tokens 0.10.4 → 0.10.7

package/dist/esm/tokens/atlassian-light/color/accent.js

@@ -65,6 +65,14 @@ var color = {
           bolder: {
             value: 'M900'
           }
+        },
+        gray: {
+          '[default]': {
+            value: 'N800'
+          },
+          bolder: {
+            value: 'N1000'
+          }
         }
       }
     },
@@ -93,6 +101,9 @@ var color = {
         },
         magenta: {
           value: 'M600'
+        },
+        gray: {
+          value: 'N600'
         }
       }
     },
@@ -121,6 +132,9 @@ var color = {
         },
         magenta: {
           value: 'M600'
+        },
+        gray: {
+          value: 'N600'
         }
       }
     },
@@ -237,6 +251,20 @@ var color = {
           bolder: {
             value: 'M700'
           }
+        },
+        gray: {
+          subtlest: {
+            value: 'N200'
+          },
+          subtler: {
+            value: 'N300'
+          },
+          subtle: {
+            value: 'N500'
+          },
+          bolder: {
+            value: 'N700'
+          }
         }
       }
     }

package/dist/esm/tokens/default/color/accent.js

@@ -145,6 +145,24 @@ var color = {
               description: 'Use on bold magenta accent backgrounds.'
             }
           }
+        },
+        gray: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.10.5',
+              description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.10.5',
+              description: 'Use for text and icons on gray subtle accent backgrounds.'
+            }
+          }
         }
       }
     },
@@ -213,6 +231,14 @@ var color = {
             introduced: '0.6.0',
             description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
           }
+        },
+        gray: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.5',
+            description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.'
+          }
         }
       }
     },
@@ -281,6 +307,14 @@ var color = {
             introduced: '0.6.0',
             description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
+        },
+        gray: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.5',
+            description: 'Use for borders on non-bold gray accent backgrounds.'
+          }
         }
       }
     },
@@ -300,7 +334,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
+              description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
           subtle: {
@@ -308,7 +342,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
+              description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
           bolder: {
@@ -557,6 +591,40 @@ var color = {
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
             }
           }
+        },
+        gray: {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.7.0',
+              description: 'Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.7.0',
+              description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          subtle: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.7.0',
+              description: 'Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.7.0',
+              description: 'Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
+          }
         }
       }
     }

package/dist/esm/tokens/default/deprecated/deprecated.js

@@ -156,7 +156,7 @@ var color = {
               deprecated: '0.7.0',
               deleted: '0.8.0',
               replacement: 'color.background.accent.blue.subtler',
-              description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
+              description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
           bold: {
@@ -356,9 +356,10 @@ var color = {
           '[default]': {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].[default]',
               description: 'Use for the background of elements used to reinforce our brand.'
             }
@@ -366,9 +367,10 @@ var color = {
           hovered: {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].hovered',
               description: 'Hovered state for color.background.brand'
             }
@@ -376,9 +378,10 @@ var color = {
           pressed: {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].pressed',
               description: 'Pressed state for color.background.brand'
             }
@@ -621,9 +624,10 @@ var color = {
         '[default]': {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.8.3',
+            deleted: '0.10.5',
             replacement: 'color.background.inverse.subtle.[default]',
             description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
           }
@@ -644,9 +648,10 @@ var color = {
         resting: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].[default]',
             description: 'Use for backgrounds of elements in a selected state'
           }
@@ -654,9 +659,10 @@ var color = {
         hover: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for color.background.selected'
           }
@@ -690,9 +696,10 @@ var color = {
         hover: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for background.subtleBrand'
           }
@@ -700,9 +707,10 @@ var color = {
         pressed: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].pressed',
             description: 'Pressed state for background.subtleBrand'
           }
@@ -710,9 +718,10 @@ var color = {
         resting: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].[default]',
             description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
           }

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.4",
+	"version": "0.10.7",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::dd934162c3393bce214d694d47bbcf2a>>
+ * @codegen <<SignedSource::51fbaf5510a3fead6a2844d4df866a77>>
  * @codegenCommand yarn build tokens
  */
 import tokens from './token-names';

package/dist/types/artifacts/token-default-values.d.ts

@@ -3,7 +3,7 @@
  *
  * Token names mapped to their value in the default Atlassian theme ('light')
  *
- * @codegen <<SignedSource::3dd78c77e87d6557a4bade2368be7eb8>>
+ * @codegen <<SignedSource::a819b31f00d394be417445acd67bd024>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {
@@ -23,6 +23,8 @@ declare const defaultTokenValues: {
     readonly 'color.text.accent.teal.bolder': "#1D474C";
     readonly 'color.text.accent.magenta': "#943D73";
     readonly 'color.text.accent.magenta.bolder': "#50253F";
+    readonly 'color.text.accent.gray': "#44546F";
+    readonly 'color.text.accent.gray.bolder': "#172B4D";
     readonly 'color.text': "#172B4D";
     readonly 'color.text.subtle': "#44546F";
     readonly 'color.text.subtlest': "#626F86";
@@ -51,6 +53,7 @@ declare const defaultTokenValues: {
     readonly 'color.icon.accent.purple': "#8270DB";
     readonly 'color.icon.accent.teal': "#1D9AAA";
     readonly 'color.icon.accent.magenta': "#CD519D";
+    readonly 'color.icon.accent.gray': "#758195";
     readonly 'color.icon': "#44546F";
     readonly 'color.icon.subtle': "#626F86";
     readonly 'color.icon.inverse': "#FFFFFF";
@@ -71,6 +74,7 @@ declare const defaultTokenValues: {
     readonly 'color.border.accent.purple': "#8270DB";
     readonly 'color.border.accent.teal': "#1D9AAA";
     readonly 'color.border.accent.magenta': "#CD519D";
+    readonly 'color.border.accent.gray': "#758195";
     readonly 'color.border': "#091E4224";
     readonly 'color.border.inverse': "#FFFFFF";
     readonly 'color.border.focused': "#388BFF";
@@ -133,6 +137,10 @@ declare const defaultTokenValues: {
     readonly 'color.background.accent.magenta.bolder': "#AE4787";
     readonly 'color.background.accent.magenta': "#FDD0EC";
     readonly 'color.background.accent.magenta.bold': "#E774BB";
+    readonly 'color.background.accent.gray.subtlest': "#F1F2F4";
+    readonly 'color.background.accent.gray.subtler': "#DCDFE4";
+    readonly 'color.background.accent.gray.subtle': "#8993A5";
+    readonly 'color.background.accent.gray.bolder': "#626F86";
     readonly 'color.background.disabled': "#091E420F";
     readonly 'color.background.inverse.subtle': "#00000029";
     readonly 'color.background.inverse.subtle.hovered': "#0000003D";

package/dist/types/artifacts/token-names.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ab44c57c547c6cb7bb389b286bdd50f>>
+ * @codegen <<SignedSource::b251fc1793ba7f689b4c3707310c1556>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {
@@ -20,6 +20,8 @@ declare const tokens: {
     readonly 'color.text.accent.teal.bolder': "--ds-text-accent-teal-bolder";
     readonly 'color.text.accent.magenta': "--ds-text-accent-magenta";
     readonly 'color.text.accent.magenta.bolder': "--ds-text-accent-magenta-bolder";
+    readonly 'color.text.accent.gray': "--ds-text-accent-gray";
+    readonly 'color.text.accent.gray.bolder': "--ds-text-accent-gray-bolder";
     readonly 'color.text': "--ds-text";
     readonly 'color.text.subtle': "--ds-text-subtle";
     readonly 'color.text.subtlest': "--ds-text-subtlest";
@@ -48,6 +50,7 @@ declare const tokens: {
     readonly 'color.icon.accent.purple': "--ds-icon-accent-purple";
     readonly 'color.icon.accent.teal': "--ds-icon-accent-teal";
     readonly 'color.icon.accent.magenta': "--ds-icon-accent-magenta";
+    readonly 'color.icon.accent.gray': "--ds-icon-accent-gray";
     readonly 'color.icon': "--ds-icon";
     readonly 'color.icon.subtle': "--ds-icon-subtle";
     readonly 'color.icon.inverse': "--ds-icon-inverse";
@@ -68,6 +71,7 @@ declare const tokens: {
     readonly 'color.border.accent.purple': "--ds-border-accent-purple";
     readonly 'color.border.accent.teal': "--ds-border-accent-teal";
     readonly 'color.border.accent.magenta': "--ds-border-accent-magenta";
+    readonly 'color.border.accent.gray': "--ds-border-accent-gray";
     readonly 'color.border': "--ds-border";
     readonly 'color.border.inverse': "--ds-border-inverse";
     readonly 'color.border.focused': "--ds-border-focused";
@@ -130,6 +134,10 @@ declare const tokens: {
     readonly 'color.background.accent.magenta.bolder': "--ds-background-accent-magenta-bolder";
     readonly 'color.background.accent.magenta': "--ds-background-accent-magenta";
     readonly 'color.background.accent.magenta.bold': "--ds-background-accent-magenta-bold";
+    readonly 'color.background.accent.gray.subtlest': "--ds-background-accent-gray-subtlest";
+    readonly 'color.background.accent.gray.subtler': "--ds-background-accent-gray-subtler";
+    readonly 'color.background.accent.gray.subtle': "--ds-background-accent-gray-subtle";
+    readonly 'color.background.accent.gray.bolder': "--ds-background-accent-gray-bolder";
     readonly 'color.background.disabled': "--ds-background-disabled";
     readonly 'color.background.inverse.subtle': "--ds-background-inverse-subtle";
     readonly 'color.background.inverse.subtle.hovered': "--ds-background-inverse-subtle-hovered";
@@ -296,6 +304,8 @@ export declare type CSSTokenMap = {
     'color.text.accent.teal.bolder': 'var(--ds-text-accent-teal-bolder)';
     'color.text.accent.magenta': 'var(--ds-text-accent-magenta)';
     'color.text.accent.magenta.bolder': 'var(--ds-text-accent-magenta-bolder)';
+    'color.text.accent.gray': 'var(--ds-text-accent-gray)';
+    'color.text.accent.gray.bolder': 'var(--ds-text-accent-gray-bolder)';
     'color.text': 'var(--ds-text)';
     'color.text.subtle': 'var(--ds-text-subtle)';
     'color.text.subtlest': 'var(--ds-text-subtlest)';
@@ -324,6 +334,7 @@ export declare type CSSTokenMap = {
     'color.icon.accent.purple': 'var(--ds-icon-accent-purple)';
     'color.icon.accent.teal': 'var(--ds-icon-accent-teal)';
     'color.icon.accent.magenta': 'var(--ds-icon-accent-magenta)';
+    'color.icon.accent.gray': 'var(--ds-icon-accent-gray)';
     'color.icon': 'var(--ds-icon)';
     'color.icon.subtle': 'var(--ds-icon-subtle)';
     'color.icon.inverse': 'var(--ds-icon-inverse)';
@@ -344,6 +355,7 @@ export declare type CSSTokenMap = {
     'color.border.accent.purple': 'var(--ds-border-accent-purple)';
     'color.border.accent.teal': 'var(--ds-border-accent-teal)';
     'color.border.accent.magenta': 'var(--ds-border-accent-magenta)';
+    'color.border.accent.gray': 'var(--ds-border-accent-gray)';
     'color.border': 'var(--ds-border)';
     'color.border.inverse': 'var(--ds-border-inverse)';
     'color.border.focused': 'var(--ds-border-focused)';
@@ -406,6 +418,10 @@ export declare type CSSTokenMap = {
     'color.background.accent.magenta.bolder': 'var(--ds-background-accent-magenta-bolder)';
     'color.background.accent.magenta': 'var(--ds-background-accent-magenta)';
     'color.background.accent.magenta.bold': 'var(--ds-background-accent-magenta-bold)';
+    'color.background.accent.gray.subtlest': 'var(--ds-background-accent-gray-subtlest)';
+    'color.background.accent.gray.subtler': 'var(--ds-background-accent-gray-subtler)';
+    'color.background.accent.gray.subtle': 'var(--ds-background-accent-gray-subtle)';
+    'color.background.accent.gray.bolder': 'var(--ds-background-accent-gray-bolder)';
     'color.background.disabled': 'var(--ds-background-disabled)';
     'color.background.inverse.subtle': 'var(--ds-background-inverse-subtle)';
     'color.background.inverse.subtle.hovered': 'var(--ds-background-inverse-subtle-hovered)';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9d619d23cbcf93e5c937313843744a22>>
+ * @codegen <<SignedSource::3354689a803bcf6799054d3faa65df85>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: ({
@@ -57,33 +57,6 @@ declare const tokens: ({
     };
     name: string;
     path: string[];
-} | {
-    attributes: {
-        group: string;
-        state: string;
-        introduced: string;
-        deprecated: string;
-        replacement: string;
-        description: string;
-        deleted?: undefined;
-    };
-    value: string;
-    filePath: string;
-    isSource: boolean;
-    original: {
-        attributes: {
-            group: string;
-            state: string;
-            introduced: string;
-            deprecated: string;
-            replacement: string;
-            description: string;
-            deleted?: undefined;
-        };
-        value: string;
-    };
-    name: string;
-    path: string[];
 } | {
     attributes: {
         group: string;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0e47f76666554d1a967ff51c4cae1c25>>
+ * @codegen <<SignedSource::9b6960398363032e220473a356d04712>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: ({
@@ -57,33 +57,6 @@ declare const tokens: ({
     };
     name: string;
     path: string[];
-} | {
-    attributes: {
-        group: string;
-        state: string;
-        introduced: string;
-        deprecated: string;
-        replacement: string;
-        description: string;
-        deleted?: undefined;
-    };
-    value: string;
-    filePath: string;
-    isSource: boolean;
-    original: {
-        attributes: {
-            group: string;
-            state: string;
-            introduced: string;
-            deprecated: string;
-            replacement: string;
-            description: string;
-            deleted?: undefined;
-        };
-        value: string;
-    };
-    name: string;
-    path: string[];
 } | {
     attributes: {
         group: string;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b41790657bd6ccb424e840279549eee6>>
+ * @codegen <<SignedSource::1e50fa12ffb87ed9192ae36dd8a7e6e7>>
  * @codegenCommand yarn build tokens
  */
-export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
+export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.[default]' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cbc11cad85705333139fd9d6eda82f31>>
+ * @codegen <<SignedSource::0c60c851ecd817e78931dc713608d150>>
  * @codegenCommand yarn build tokens
  */
-export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
+export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border' | 'color.border.inverse' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

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

@@ -2,12 +2,12 @@ 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: {
+            enter(path: NodePath<t.Program>, state: {
+                opts: {
+                    shouldUseAutoFallback?: boolean;
+                };
+            }): void;
             exit(path: NodePath<t.Program>): void;
         };
     };

package/dist/types/types.d.ts

@@ -423,6 +423,10 @@ export interface AccentColorTokenSchema {
                     '[default]': PaintToken;
                     bolder: PaintToken;
                 };
+                gray: {
+                    '[default]': PaintToken;
+                    bolder: PaintToken;
+                };
             };
         };
         icon: {
@@ -435,6 +439,7 @@ export interface AccentColorTokenSchema {
                 purple: PaintToken;
                 teal: PaintToken;
                 magenta: PaintToken;
+                gray: PaintToken;
             };
         };
         border: {
@@ -447,6 +452,7 @@ export interface AccentColorTokenSchema {
                 purple: PaintToken;
                 teal: PaintToken;
                 magenta: PaintToken;
+                gray: PaintToken;
             };
         };
         background: {
@@ -499,6 +505,12 @@ export interface AccentColorTokenSchema {
                     subtle: PaintToken;
                     bolder: PaintToken;
                 };
+                gray: {
+                    subtlest: PaintToken;
+                    subtler: PaintToken;
+                    subtle: PaintToken;
+                    bolder: PaintToken;
+                };
             };
         };
     };