@atlaskit/tokens 0.4.1 → 0.6.1

package/dist/es2019/tokens/default/color/border.js

@@ -1,18 +1,74 @@
 const color = {
   color: {
     border: {
-      focus: {
+      '[default]': {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use for focus rings of elements in a focus state'
+          description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.'
         }
       },
-      neutral: {
+      focused: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use to create borders around UI elements such as text fields, checkboxes, and radio buttons, or to visually group or separate UI elements, such as flat cards or side panel dividers'
+          description: 'Use for focus rings of elements in a focus state.'
+        }
+      },
+      input: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.'
+        }
+      },
+      disabled: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders of elements in a disabled state.'
+        }
+      },
+      brand: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.'
+        }
+      },
+      danger: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders communicating critical information, such as the borders on invalid text fields.'
+        }
+      },
+      warning: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders communicating caution.'
+        }
+      },
+      success: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders communicating a favourable outcome, such as the borders on validated text fields.'
+        }
+      },
+      discovery: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.'
+        }
+      },
+      information: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for borders communicating information or something in-progress.'
         }
       }
     }

package/dist/es2019/tokens/default/color/icon.js

@@ -0,0 +1,86 @@
+const color = {
+  color: {
+    icon: {
+      '[default]': {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icon-only buttons, or icons paired with color.text'
+        }
+      },
+      subtle: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons paired with color.text.subtle'
+        }
+      },
+      inverse: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons on bold backgrounds.'
+        }
+      },
+      disabled: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons in a disabled state.'
+        }
+      },
+      brand: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.'
+        }
+      },
+      danger: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons communicating critical informaton, such as those used in error handing.'
+        }
+      },
+      warning: {
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            description: 'Use for icons communicating caution, such as those used in warning section messages.'
+          }
+        },
+        inverse: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            description: 'Use for icons when on bold warning backgrounds.'
+          }
+        }
+      },
+      success: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons communicating a favourable outcome, such as those used in success section messaged.'
+        }
+      },
+      discovery: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons communicating change or something new, such as discovery section messages.'
+        }
+      },
+      information: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for icons communicating information or something in-progress, such as information section messages.'
+        }
+      }
+    }
+  }
+};
+export default color;

package/dist/es2019/tokens/default/color/interaction.js

@@ -0,0 +1,37 @@
+const color = {
+  color: {
+    interaction: {
+      hovered: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars.'
+        }
+      },
+      pressed: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
+        }
+      },
+      inverse: {
+        hovered: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            description: 'Use as a background overlay for elements in a hovered state on bold backgrounds, such as the buttons on spotlight cards.'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            description: 'Use as a background overlay for elements in a hovered state on bold backgrounds, such as the buttons on spotlight cards.'
+          }
+        }
+      }
+    }
+  }
+};
+export default color;

package/dist/es2019/tokens/default/color/text.js

@@ -1,111 +1,106 @@
 const color = {
   color: {
     text: {
-      selected: {
+      '[default]': {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use for text, icons, borders, or other visual indicators in selected states'
+          description: 'Use for primary text, such as body copy, sentence case headers, and buttons.'
         }
       },
-      highEmphasis: {
+      subtle: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use for primary text, such as body copy, sentence case headers, and buttons'
+          description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.'
         }
       },
-      mediumEmphasis: {
+      subtlest: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: `
-Use for secondary text, such navigation, subtle button links, input field labels, and all caps subheadings.
-
-Use for icon-only buttons, or icons paired with text.highEmphasis text
-      `
+          description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.'
         }
       },
-      lowEmphasis: {
+      disabled: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for text in a disabled state.'
+        }
+      },
+      inverse: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: `
-Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.
-
-Use for icons that are paired with text.medEmphasis text`
+          description: 'Use for text on bold backgrounds.'
         }
       },
-      onBold: {
+      brand: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use for text and icons when on bold backgrounds'
+          description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.'
         }
       },
-      onBoldWarning: {
+      danger: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use for text and icons when on bold warning backgrounds'
+          description: 'Use for critical text, such as input field error messaging.'
         }
       },
-      link: {
-        resting: {
+      warning: {
+        '[default]': {
           attributes: {
             group: 'paint',
             state: 'active',
-            description: 'Use for links in a resting or hover state. Add an underline for hover states'
+            description: 'Use for text to emphasize caution, such as in moved lozenges.'
           }
         },
-        pressed: {
+        inverse: {
           attributes: {
             group: 'paint',
             state: 'active',
-            description: 'Use for links in a pressed state'
+            description: 'Use for text when on bold warning backgrounds.'
           }
         }
       },
-      brand: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: 'Use rarely for text on subtle brand backgrounds, such as in progress lozenges, or on subtle blue accent backgrounds, such as colored tags.'
-        }
-      },
-      warning: {
+      success: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use rarely for text on subtle warning backgrounds, such as in lozenges, or text on subtle warning backgrounds, such as in moved lozenges'
+          description: 'Use for text to communicate a favourable outcome, such as input field success messaging.'
         }
       },
-      danger: {
+      discovery: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use rarely for critical text, such as input field error messaging, or text on subtle danger backgrounds, such as in removed lozenges, or text on subtle red accent backgrounds, such as colored tags.'
+          description: 'Use for text to emphasize change or something new, such as in new lozenges.'
         }
       },
-      success: {
+      information: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use rarely for positive text, such as input field success messaging, or text on subtle success backgrounds, such as in success lozenges, or text on subtle green accent backgrounds, such as colored tags.'
+          description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.'
         }
-      },
-      discovery: {
+      }
+    },
+    link: {
+      '[default]': {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use rarely for text on subtle discovery backgrounds, such as in new lozenges, or text on subtle purple accent backgrounds, such as colored tags.'
+          description: 'Use for links in a default or hovered state. Add an underline for hovered states.'
         }
       },
-      disabled: {
+      pressed: {
         attributes: {
           group: 'paint',
           state: 'active',
-          description: 'Use for text and icons in disabled states'
+          description: 'Use for links in a pressed state.'
         }
       }
     }