@atlaskit/tokens 0.1.0 → 0.3.0

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

@@ -0,0 +1,331 @@
+var color = {
+  color: {
+    background: {
+      sunken: {
+        attributes: {
+          group: 'paint',
+          description: 'Use as a secondary background for the UI'
+        }
+      },
+      default: {
+        attributes: {
+          group: 'paint',
+          description: 'Use as the primary background for the UI'
+        }
+      },
+      card: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card.'
+        }
+      },
+      overlay: {
+        attributes: {
+          group: 'paint',
+          description: "\nUse for the background of overlay elements, such as modals, dropdown menus, flags, and inline dialogs (i.e. elements that sit on top of the UI).\n\nAlso use for the background of raised cards in a dragged state.\n\nCombine with shadow.overlay."
+        }
+      },
+      selected: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Use for backgrounds of elements in a selected state'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state of background.selected'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state of background.selected'
+          }
+        }
+      },
+      blanket: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for the screen overlay that appears with modal dialogs'
+        }
+      },
+      disabled: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for backgrounds of elements in a disabled state'
+        }
+      },
+      boldBrand: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'A vibrant background for small UI elements like primary buttons and bold in progress lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state of background.boldBrand'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state of background.boldBrand'
+          }
+        }
+      },
+      subtleBrand: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state for background.subtleBrand'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state for background.subtleBrand'
+          }
+        }
+      },
+      boldDanger: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'A vibrant background for small UI elements like danger buttons and bold removed lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state of background.boldDanger'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state of background.boldDanger'
+          }
+        }
+      },
+      subtleDanger: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Use for subdued backgrounds of UI elements like error section messages and removed lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state for background.subtleDanger'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state for background.subtleDanger'
+          }
+        }
+      },
+      boldWarning: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'A vibrant background for small UI elements like warning buttons and bold moved lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state of background.boldWarning'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state of background.boldWarning'
+          }
+        }
+      },
+      subtleWarning: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Use for subdued backgrounds of UI elements like warning section messages and moved lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state for background.subtleWarning'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state for background.subtleWarning'
+          }
+        }
+      },
+      boldSuccess: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'A vibrant background for small UI elements like checked toggles and bold success lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state of background.boldSuccess'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state of background.boldSuccess'
+          }
+        }
+      },
+      subtleSuccess: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Use for subdued backgrounds of UI elements like success section messages and success lozenges. '
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state for background.subtleSuccess'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state for background.subtleSuccess'
+          }
+        }
+      },
+      boldDiscovery: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'A vibrant background for small UI elements like onboarding buttons and bold new lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state of background.boldDiscovery'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state of background.boldDiscovery'
+          }
+        }
+      },
+      subtleDiscovery: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Use for subdued backgrounds of UI elements like discovery section messages and new lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state for background.subtleDiscovery'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state for background.subtleDiscovery'
+          }
+        }
+      },
+      boldNeutral: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'A vibrant background for small UI elements like unchecked toggles and bold default lozenges.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state of background.boldNeutral'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state of background.boldNeutral'
+          }
+        }
+      },
+      transparentNeutral: {
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state for UIs that don’t have a default background, such as menu items or subtle buttons.'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state for UIs that don’t have a default background, such as menu items or subtle buttons.'
+          }
+        }
+      },
+      subtleNeutral: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Use as the default background of UI elements like buttons, lozenges, and tags.'
+          }
+        },
+        hover: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state for background.subtleNeutral'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state for background.subtleNeutral'
+          }
+        }
+      },
+      subtleBorderedNeutral: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Hover state for background.subtleBorderedNeutral'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Pressed state for background.subtleBorderedNeutral'
+          }
+        }
+      }
+    }
+  }
+};
+export default color;

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

@@ -0,0 +1,19 @@
+var color = {
+  color: {
+    border: {
+      focus: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for focus rings of elements in a focus state'
+        }
+      },
+      neutral: {
+        attributes: {
+          group: 'paint',
+          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'
+        }
+      }
+    }
+  }
+};
+export default color;

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

@@ -0,0 +1,37 @@
+var color = {
+  color: {
+    iconBorder: {
+      brand: {
+        attributes: {
+          group: 'paint',
+          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',
+          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',
+          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',
+          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',
+          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"
+        }
+      }
+    }
+  }
+};
+export default color;

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

@@ -0,0 +1,19 @@
+var color = {
+  color: {
+    overlay: {
+      hover: {
+        attributes: {
+          group: 'paint',
+          description: 'Use as a background overlay for elements in a hover state when their background color cannot change, such as avatars.'
+        }
+      },
+      pressed: {
+        attributes: {
+          group: 'paint',
+          description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
+        }
+      }
+    }
+  }
+};
+export default color;

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

@@ -0,0 +1,93 @@
+var color = {
+  color: {
+    text: {
+      selected: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for text, icons, borders, or other visual indicators in selected states'
+        }
+      },
+      highEmphasis: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for primary text, such as body copy, sentence case headers, and buttons'
+        }
+      },
+      mediumEmphasis: {
+        attributes: {
+          group: 'paint',
+          description: "\nUse for secondary text, such navigation, subtle button links, input field labels, and all caps subheadings.\n\nUse for icon-only buttons, or icons paired with text.highEmphasis text\n      "
+        }
+      },
+      lowEmphasis: {
+        attributes: {
+          group: 'paint',
+          description: "\nUse for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.\n\nUse for icons that are paired with text.medEmphasis text"
+        }
+      },
+      onBold: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for text and icons when on bold backgrounds'
+        }
+      },
+      onBoldWarning: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for text and icons when on bold warning backgrounds'
+        }
+      },
+      link: {
+        resting: {
+          attributes: {
+            group: 'paint',
+            description: 'Use for links in a resting or hover state. Add an underline for hover states'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            description: 'Use for links in a pressed state'
+          }
+        }
+      },
+      brand: {
+        attributes: {
+          group: 'paint',
+          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: {
+        attributes: {
+          group: 'paint',
+          description: 'Use rarely for text on subtle warning backgrounds, such as in lozenges, or text on subtle warning backgrounds, such as in moved lozenges'
+        }
+      },
+      danger: {
+        attributes: {
+          group: 'paint',
+          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.'
+        }
+      },
+      success: {
+        attributes: {
+          group: 'paint',
+          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.'
+        }
+      },
+      discovery: {
+        attributes: {
+          group: 'paint',
+          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.'
+        }
+      },
+      disabled: {
+        attributes: {
+          group: 'paint',
+          description: 'Use for text and icons in disabled states'
+        }
+      }
+    }
+  }
+};
+export default color;

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

@@ -0,0 +1,17 @@
+var shadow = {
+  shadow: {
+    card: {
+      attributes: {
+        group: 'shadow',
+        description: "\nUse for the box shadow of raised card elements, such as Jira cards on a Kanban board.\n\nCombine with background.overlay"
+      }
+    },
+    overlay: {
+      attributes: {
+        group: 'shadow',
+        description: "\nUse for the box shadow of overlay elements, such as modals, dropdown menus, flags, and inline dialogs (i.e. elements that sit on top of the UI).\n\nAlso use for the box shadow of raised cards in a dragged state.\n\nCombine with background.overlay"
+      }
+    }
+  }
+};
+export default shadow;

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

@@ -0,0 +1,13 @@
+var utility = {
+  UNSAFE_util: {
+    transparent: {
+      attributes: {
+        description: 'Transparent token used for backwards compatibility between new and old theming solutions',
+        group: 'raw'
+      }
+    }
+  }
+};
+export default {
+  utility: utility
+};

package/dist/esm/tokens/rename-mapping.js

@@ -17,15 +17,5 @@
  * 5. The artifact containing the automation should now be available in the `/dist` folder. i.e. packages/design-system/tokens/dist/figma/atlassian-light/sync-figma-tokens.js
  * 6. After building make sure to remove the mapping from this file before checking it in
  */
-var renameMapping = {
-  'color.accent.blueSubtle': 'color.accent.subtleBlue',
-  'color.accent.greenSubtle': 'color.accent.subtleGreen',
-  'color.accent.magentaSubtle': 'color.accent.subtleMagenta',
-  'color.accent.orangeSubtle': 'color.accent.subtleOrange',
-  'color.accent.purpleSubtle': 'color.accent.subtlePurple',
-  'color.accent.redSubtle': 'color.accent.subtleRed',
-  'color.accent.tealSubtle': 'color.accent.subtleTeal',
-  'color.background.selected': 'color.background.selected.resting',
-  'color.border.disabled': 'color.background.disabled'
-};
+var renameMapping = {};
 export default renameMapping;

package/dist/esm/tokens/token-default-values.js

@@ -0,0 +1,97 @@
+// THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
+// Re-generate by running `yarn build tokens`.
+
+/**
+ * A map of token names to their value in the default Atlassian theme ('light')
+ */
+var defaultTokenValues = {
+  'color.accent.boldBlue': '#579DFF',
+  'color.accent.boldGreen': '#3ACF91',
+  'color.accent.boldOrange': '#FFA333',
+  'color.accent.boldPurple': '#9F8FEF',
+  'color.accent.boldRed': '#F97362',
+  'color.accent.boldTeal': '#53C8D5',
+  'color.accent.subtleBlue': '#CCE0FF',
+  'color.accent.subtleGreen': '#AFF3D6',
+  'color.accent.subtleMagenta': '#FDD0EC',
+  'color.accent.subtleOrange': '#FFDEB8',
+  'color.accent.subtlePurple': '#DFD8FD',
+  'color.accent.subtleRed': '#FFD2CC',
+  'color.accent.subtleTeal': '#ADEEF5',
+  'color.background.sunken': '#091E4208',
+  'color.background.default': '#FFFFFF',
+  'color.background.card': '#FFFFFF',
+  'color.background.overlay': '#FFFFFF',
+  'color.background.selected.resting': '#E9F2FF',
+  'color.background.selected.hover': '#CCE0FF',
+  'color.background.selected.pressed': '#85B8FF',
+  'color.background.blanket': '#091E427A',
+  'color.background.disabled': '#091E420F',
+  'color.background.boldBrand.resting': '#0C66E4',
+  'color.background.boldBrand.hover': '#0055CC',
+  'color.background.boldBrand.pressed': '#09326C',
+  'color.background.subtleBrand.resting': '#E9F2FF',
+  'color.background.subtleBrand.hover': '#CCE0FF',
+  'color.background.subtleBrand.pressed': '#85B8FF',
+  'color.background.boldDanger.resting': '#CE2E1C',
+  'color.background.boldDanger.hover': '#B22515',
+  'color.background.boldDanger.pressed': '#601D16',
+  'color.background.subtleDanger.resting': '#FFEDEB',
+  'color.background.subtleDanger.hover': '#FFD2CC',
+  'color.background.subtleDanger.pressed': '#FF9A8F',
+  'color.background.boldWarning.resting': '#EBB800',
+  'color.background.boldWarning.hover': '#D19D00',
+  'color.background.boldWarning.pressed': '#B38600',
+  'color.background.subtleWarning.resting': '#FFF7D6',
+  'color.background.subtleWarning.hover': '#FFE785',
+  'color.background.subtleWarning.pressed': '#FFD138',
+  'color.background.boldSuccess.resting': '#1F845A',
+  'color.background.boldSuccess.hover': '#216E4E',
+  'color.background.boldSuccess.pressed': '#164B35',
+  'color.background.subtleSuccess.resting': '#DFFCF0',
+  'color.background.subtleSuccess.hover': '#AFF3D6',
+  'color.background.subtleSuccess.pressed': '#76E0B4',
+  'color.background.boldDiscovery.resting': '#6E5DC6',
+  'color.background.boldDiscovery.hover': '#5E4DB2',
+  'color.background.boldDiscovery.pressed': '#352C63',
+  'color.background.subtleDiscovery.resting': '#F3F0FF',
+  'color.background.subtleDiscovery.hover': '#DFD8FD',
+  'color.background.subtleDiscovery.pressed': '#B8ACF6',
+  'color.background.boldNeutral.resting': '#44546F',
+  'color.background.boldNeutral.hover': '#2C3E5D',
+  'color.background.boldNeutral.pressed': '#172B4D',
+  'color.background.transparentNeutral.hover': '#091E420F',
+  'color.background.transparentNeutral.pressed': '#091E4224',
+  'color.background.subtleNeutral.resting': '#091E420F',
+  'color.background.subtleNeutral.hover': '#091E4224',
+  'color.background.subtleNeutral.pressed': '#091E424F',
+  'color.background.subtleBorderedNeutral.resting': '#091E4208',
+  'color.background.subtleBorderedNeutral.pressed': '#091E420F',
+  'color.border.focus': '#388BFF',
+  'color.border.neutral': '#091E4224',
+  'color.iconBorder.brand': '#1D7AFC',
+  'color.iconBorder.danger': '#E8422C',
+  'color.iconBorder.warning': '#DB6E00',
+  'color.iconBorder.success': '#22A06B',
+  'color.iconBorder.discovery': '#8270DB',
+  'color.overlay.hover': '#091E424F',
+  'color.overlay.pressed': '#091E427A',
+  'color.text.selected': '#0C66E4',
+  'color.text.highEmphasis': '#172B4D',
+  'color.text.mediumEmphasis': '#44546F',
+  'color.text.lowEmphasis': '#626F86',
+  'color.text.onBold': '#FFFFFF',
+  'color.text.onBoldWarning': '#172B4D',
+  'color.text.link.resting': '#0C66E4',
+  'color.text.link.pressed': '#0055CC',
+  'color.text.brand': '#0055CC',
+  'color.text.warning': '#974F0C',
+  'color.text.danger': '#B22515',
+  'color.text.success': '#216E4E',
+  'color.text.discovery': '#5E4DB2',
+  'color.text.disabled': '#8993A5',
+  'shadow.card': '0px 1px 1px #091E4240, 0px 0px 1px #091E424F',
+  'shadow.overlay': '0px 8px 12px #091E4226, 0px 0px 1px #091E424F',
+  'utility.UNSAFE_util.transparent': 'transparent'
+};
+export default defaultTokenValues;