@atlaskit/ads-mcp 0.0.1

package/dist/es2019/tools/get-tokens/tokens.js

@@ -0,0 +1,772 @@
+const textColorTokens = [{
+  name: 'color.text',
+  description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
+  example: {
+    light: '#172B4D',
+    dark: '#C7D1DB'
+  }
+}, {
+  name: 'color.text.subtle',
+  description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.',
+  example: {
+    light: '#44546F',
+    dark: '#9FADBC'
+  }
+}, {
+  name: 'color.text.subtlest',
+  description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.',
+  example: {
+    light: '#626F86',
+    dark: '#738496'
+  }
+}, {
+  name: 'color.text.disabled',
+  description: 'Use for text in a disabled state.',
+  example: {
+    light: '#091E424F',
+    dark: '#7384964F'
+  }
+}, {
+  name: 'color.text.inverse',
+  description: 'Use for text on bold backgrounds.',
+  example: {
+    light: '#FFFFFF',
+    dark: '#1D2125'
+  }
+}, {
+  name: 'color.text.selected',
+  description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.',
+  example: {
+    light: '#0C66E4',
+    dark: '#85B8FF'
+  }
+}, {
+  name: 'color.text.brand',
+  description: 'Use for text that reinforces our brand.',
+  example: {
+    light: '#0C66E4',
+    dark: '#85B8FF'
+  }
+}, {
+  name: 'color.text.danger',
+  description: 'Use for critical text, such as input field error messaging.',
+  example: {
+    light: '#CA3521',
+    dark: '#FF9C8F'
+  }
+}, {
+  name: 'color.text.warning',
+  description: 'Use for text to emphasize caution, such as in moved lozenges.',
+  example: {
+    light: '#B38600',
+    dark: '#E2B203'
+  }
+}, {
+  name: 'color.text.warning.inverse',
+  description: 'Use for text when on bold warning backgrounds.',
+  example: {
+    light: '#172B4D',
+    dark: '#C7D1DB'
+  }
+}, {
+  name: 'color.text.success',
+  description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
+  example: {
+    light: '#1F845A',
+    dark: '#4BCE97'
+  }
+}, {
+  name: 'color.text.discovery',
+  description: 'Use for text to emphasize change or something new, such as in new lozenges.',
+  example: {
+    light: '#5E4DB2',
+    dark: '#B8ACF6'
+  }
+}, {
+  name: 'color.text.information',
+  description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.',
+  example: {
+    light: '#0C66E4',
+    dark: '#85B8FF'
+  }
+}];
+const linkColorTokens = [{
+  name: 'color.link',
+  description: 'Use for links in a default or hovered state. Add an underline for hovered states.',
+  example: {
+    light: '#0C66E4',
+    dark: '#85B8FF'
+  }
+}, {
+  name: 'color.link.pressed',
+  description: 'Use for links in a pressed state.',
+  example: {
+    light: '#0055CC',
+    dark: '#579DFF'
+  }
+}];
+const backgroundColorTokens = [{
+  name: 'color.background.brand.bold',
+  description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.',
+  example: {
+    light: '#0C66E4',
+    dark: '#1D7AFC'
+  }
+}, {
+  name: 'color.background.brand.bold.hovered',
+  description: 'Hovered state of color.background.brand.bold.',
+  example: {
+    light: '#0055CC',
+    dark: '#388BFF'
+  }
+}, {
+  name: 'color.background.brand.bold.pressed',
+  description: 'Pressed state of brand.bold',
+  example: {
+    light: '#09326C',
+    dark: '#1D7AFC'
+  }
+}, {
+  name: 'color.background.brand.boldest',
+  description: 'Brand elements that need to stand out',
+  example: {
+    light: '#0C66E4',
+    dark: '#1D7AFC'
+  }
+}, {
+  name: 'color.background.brand.boldest.hovered',
+  description: 'Hover state of brand.boldest',
+  example: {
+    light: '#0055CC',
+    dark: '#388BFF'
+  }
+}, {
+  name: 'color.background.brand.boldest.pressed',
+  description: 'Pressed state of brand.boldest',
+  example: {
+    light: '#09326C',
+    dark: '#1D7AFC'
+  }
+}, {
+  name: 'color.background.brand.subtlest',
+  description: 'Brand elements with less emphasis',
+  example: {
+    light: '#E9F2FF',
+    dark: '#0C66E4'
+  }
+}, {
+  name: 'color.background.brand.subtlest.hovered',
+  description: 'Hover state of brand.subtlest',
+  example: {
+    light: '#CCE0FF',
+    dark: '#1D7AFC'
+  }
+}, {
+  name: 'color.background.brand.subtlest.pressed',
+  description: 'Pressed state of brand.subtlest',
+  example: {
+    light: '#85B8FF',
+    dark: '#1D7AFC'
+  }
+}, {
+  name: 'color.background.danger',
+  description: 'Critical information backgrounds',
+  example: {
+    light: '#FFEDEB',
+    dark: '#4F1C16'
+  }
+}, {
+  name: 'color.background.danger.hovered',
+  description: 'Hover state of danger',
+  example: {
+    light: '#FFD5D2',
+    dark: '#5D1F1A'
+  }
+}, {
+  name: 'color.background.danger.pressed',
+  description: 'Pressed state of danger',
+  example: {
+    light: '#FFC2BE',
+    dark: '#6D231B'
+  }
+}, {
+  name: 'color.background.danger.bold',
+  description: 'Vibrant danger backgrounds',
+  example: {
+    light: '#CA3521',
+    dark: '#FF9C8F'
+  }
+}, {
+  name: 'color.background.danger.bold.hovered',
+  description: 'Hover state of danger.bold',
+  example: {
+    light: '#AE2A19',
+    dark: '#FFB3A8'
+  }
+}, {
+  name: 'color.background.danger.bold.pressed',
+  description: 'Pressed state of danger.bold',
+  example: {
+    light: '#601E16',
+    dark: '#FF9C8F'
+  }
+}, {
+  name: 'color.background.discovery',
+  description: 'Change/new feature backgrounds',
+  example: {
+    light: '#F3F0FF',
+    dark: '#2B2451'
+  }
+}, {
+  name: 'color.background.discovery.hovered',
+  description: 'Hover state of discovery',
+  example: {
+    light: '#DFD8FD',
+    dark: '#352C63'
+  }
+}, {
+  name: 'color.background.discovery.pressed',
+  description: 'Pressed state of discovery',
+  example: {
+    light: '#C0B6F2',
+    dark: '#3D3274'
+  }
+}, {
+  name: 'color.background.discovery.bold',
+  description: 'Vibrant discovery backgrounds',
+  example: {
+    light: '#5E4DB2',
+    dark: '#B8ACF6'
+  }
+}, {
+  name: 'color.background.discovery.bold.hovered',
+  description: 'Hover state of discovery.bold',
+  example: {
+    light: '#4C3B9C',
+    dark: '#C7BFFF'
+  }
+}, {
+  name: 'color.background.discovery.bold.pressed',
+  description: 'Pressed state of discovery.bold',
+  example: {
+    light: '#352C63',
+    dark: '#B8ACF6'
+  }
+}, {
+  name: 'color.background.information',
+  description: 'Information/in-progress backgrounds',
+  example: {
+    light: '#E9F2FF',
+    dark: '#1C2B41'
+  }
+}, {
+  name: 'color.background.information.hovered',
+  description: 'Hover state of information',
+  example: {
+    light: '#CCE0FF',
+    dark: '#22324B'
+  }
+}, {
+  name: 'color.background.information.pressed',
+  description: 'Pressed state of information',
+  example: {
+    light: '#85B8FF',
+    dark: '#2B3E5C'
+  }
+}, {
+  name: 'color.background.information.bold',
+  description: 'Vibrant information backgrounds',
+  example: {
+    light: '#0C66E4',
+    dark: '#85B8FF'
+  }
+}, {
+  name: 'color.background.information.bold.hovered',
+  description: 'Hover state of information.bold',
+  example: {
+    light: '#0055CC',
+    dark: '#99C7FF'
+  }
+}, {
+  name: 'color.background.information.bold.pressed',
+  description: 'Pressed state of information.bold',
+  example: {
+    light: '#09326C',
+    dark: '#85B8FF'
+  }
+}];
+const chartColorTokens = [{
+  name: 'color.chart.brand',
+  description: 'Our primary color for data visualisation. Use when only one color is required.',
+  example: {
+    light: '#0C66E4',
+    dark: '#85B8FF'
+  }
+}, {
+  name: 'color.chart.danger',
+  description: 'For data visualisation communicating negative information, such as "off track".',
+  example: {
+    light: '#CA3521',
+    dark: '#FF9C8F'
+  }
+}];
+const blanketColorTokens = [{
+  name: 'color.blanket',
+  description: 'Use for the screen overlay that appears with modal dialogs',
+  example: {
+    light: 'rgba(9, 30, 66, 0.54)',
+    dark: 'rgba(255, 255, 255, 0.24)'
+  }
+}, {
+  name: 'color.blanket.selected',
+  description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements",
+  example: {
+    light: 'rgba(9, 30, 66, 0.08)',
+    dark: 'rgba(255, 255, 255, 0.08)'
+  }
+}];
+const typographyTokens = [{
+  name: 'font.heading.xxlarge',
+  description: 'For overlapping brand with product promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.'
+}, {
+  name: 'font.heading.xlarge',
+  description: 'For overlapping brand with product promotions, such as marketplace content. Migrate instances of H800 to Heading XL.'
+}, {
+  name: 'font.heading.large',
+  description: 'Product page titles, such as forms. Migrate instances of H700 to Heading L.'
+}, {
+  name: 'font.heading.medium',
+  description: 'Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.'
+}, {
+  name: 'font.heading.small',
+  description: 'For headers in small components where space is limited. Migrate instances of H500 to Heading S.'
+}, {
+  name: 'font.heading.xsmall',
+  description: 'For headers in small components where space is limited. Migrate instances of H400 to Heading XS.'
+}, {
+  name: 'font.heading.xxsmall',
+  description: 'For headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.'
+}, {
+  name: 'font.body.large',
+  description: 'For long-form text, such as in blogs.'
+}, {
+  name: 'font.body',
+  description: 'Use in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.'
+}, {
+  name: 'font.body.small',
+  description: 'Use in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.'
+}, {
+  name: 'font.body.UNSAFE_small',
+  description: 'UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token'
+}, {
+  name: 'font.code',
+  description: 'For representing code only, either inline or in code blocks.'
+}];
+const fontWeightTokens = [{
+  name: 'font.weight.regular',
+  description: 'Default font weight for body text styles.',
+  example: {
+    default: '400'
+  }
+}, {
+  name: 'font.weight.medium',
+  description: 'For all text that may appear beside iconography, such as in a button.',
+  example: {
+    default: '500'
+  }
+}, {
+  name: 'font.weight.semibold',
+  description: 'Use with caution as fallback fonts do not support this font weight and will default to bold weight.',
+  example: {
+    default: '600'
+  }
+}, {
+  name: 'font.weight.bold',
+  description: 'Use sparingly for emphasising text, such as in a lozenge.',
+  example: {
+    default: '700'
+  }
+}];
+const fontFamilyTokens = [{
+  name: 'font.family.heading',
+  description: 'For our default product UI heading text.'
+}, {
+  name: 'font.family.body',
+  description: 'For our default product UI body text.'
+}, {
+  name: 'font.family.code',
+  description: 'For representing code only.'
+}, {
+  name: 'font.family.brand.heading',
+  description: 'For our brand heading text. Uses Charlie Display.'
+}, {
+  name: 'font.family.brand.body',
+  description: 'For our brand body text. Uses Charlie Text.'
+}];
+const spacingTokens = [{
+  name: 'space.0',
+  description: 'Equates to `0`. Use for resetting default spacing styles.',
+  example: {
+    default: '0px'
+  }
+}, {
+  name: 'space.025',
+  description: 'Use for small and compact pieces of UI.',
+  example: {
+    default: '2px'
+  }
+}, {
+  name: 'space.050',
+  description: 'Use for small and compact pieces of UI.',
+  example: {
+    default: '4px'
+  }
+}, {
+  name: 'space.075',
+  description: 'Use for small and compact pieces of UI.',
+  example: {
+    default: '6px'
+  }
+}, {
+  name: 'space.100',
+  description: 'Use for small and compact pieces of UI.',
+  example: {
+    default: '8px'
+  }
+}, {
+  name: 'space.150',
+  description: 'Use for larger and less dense pieces of UI.',
+  example: {
+    default: '12px'
+  }
+}, {
+  name: 'space.200',
+  description: 'Use for larger and less dense pieces of UI.',
+  example: {
+    default: '16px'
+  }
+}, {
+  name: 'space.250',
+  description: 'Use for larger and less dense pieces of UI.',
+  example: {
+    default: '20px'
+  }
+}, {
+  name: 'space.300',
+  description: 'Use for larger and less dense pieces of UI.',
+  example: {
+    default: '24px'
+  }
+}, {
+  name: 'space.400',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  example: {
+    default: '32px'
+  }
+}, {
+  name: 'space.500',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  example: {
+    default: '40px'
+  }
+}, {
+  name: 'space.600',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  example: {
+    default: '48px'
+  }
+}, {
+  name: 'space.800',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  example: {
+    default: '64px'
+  }
+}, {
+  name: 'space.1000',
+  description: 'Use for the largest pieces of UI and for layout elements.',
+  example: {
+    default: '80px'
+  }
+}];
+const negativeSpacingTokens = [{
+  name: 'space.negative.025',
+  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
+  example: {
+    default: '-2px'
+  }
+}, {
+  name: 'space.negative.050',
+  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
+  example: {
+    default: '-4px'
+  }
+}, {
+  name: 'space.negative.075',
+  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
+  example: {
+    default: '-6px'
+  }
+}, {
+  name: 'space.negative.100',
+  description: 'Use to negate parent whitespace or overlap small pieces of UI.',
+  example: {
+    default: '-8px'
+  }
+}, {
+  name: 'space.negative.150',
+  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
+  example: {
+    default: '-12px'
+  }
+}, {
+  name: 'space.negative.200',
+  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
+  example: {
+    default: '-16px'
+  }
+}, {
+  name: 'space.negative.250',
+  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
+  example: {
+    default: '-20px'
+  }
+}, {
+  name: 'space.negative.300',
+  description: 'Use to negate parent whitespace or overlap larger pieces of UI.',
+  example: {
+    default: '-24px'
+  }
+}, {
+  name: 'space.negative.400',
+  description: 'Use to negate parent whitespace or overlap the largest pieces of UI.',
+  example: {
+    default: '-32px'
+  }
+}];
+const borderRadiusTokens = [{
+  name: 'border.radius.050',
+  description: 'Used for selection indicators, like tabs.',
+  example: {
+    default: '2px'
+  }
+}, {
+  name: 'border.radius',
+  description: 'The default border radius.',
+  example: {
+    default: '3px'
+  }
+}, {
+  name: 'border.radius.100',
+  description: 'Used for buttons and inputs.',
+  example: {
+    default: '3px'
+  }
+}, {
+  name: 'border.radius.200',
+  description: 'Used for smaller cards.',
+  example: {
+    default: '4px'
+  }
+}, {
+  name: 'border.radius.300',
+  description: 'Used for cards and larger containers.',
+  example: {
+    default: '8px'
+  }
+}, {
+  name: 'border.radius.400',
+  description: 'Used for modals.',
+  example: {
+    default: '12px'
+  }
+}, {
+  name: 'border.radius.circle',
+  description: 'Used for circular containers, like a rounded button.',
+  example: {
+    default: '50%'
+  }
+}];
+const borderWidthTokens = [{
+  name: 'border.width',
+  description: 'The default border width. Used for all borders.',
+  example: {
+    default: '1px'
+  }
+}, {
+  name: 'border.width.0',
+  description: 'Used for zero width borders.',
+  example: {
+    default: '0px'
+  }
+}, {
+  name: 'border.width.indicator',
+  description: 'Used for indicators like tab and menu selected states.',
+  example: {
+    default: '3px'
+  }
+}, {
+  name: 'border.width.outline',
+  description: 'Used for focus, active or selected inputs.',
+  example: {
+    default: '2px'
+  }
+}];
+const surfaceElevationTokens = [{
+  name: 'elevation.surface',
+  description: 'Use as the primary background for the UI.',
+  example: {
+    light: '#FFFFFF',
+    dark: '#1D2125'
+  }
+}, {
+  name: 'elevation.surface.hovered',
+  description: 'Hovered state of elevation.surface',
+  example: {
+    light: '#F7F8F9',
+    dark: '#2C3338'
+  }
+}, {
+  name: 'elevation.surface.pressed',
+  description: 'Pressed state of elevation.surface',
+  example: {
+    light: '#F7F8F9',
+    dark: '#2C3338'
+  }
+}, {
+  name: 'elevation.surface.overlay',
+  description: 'Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay.',
+  example: {
+    light: '#FFFFFF',
+    dark: '#1D2125'
+  }
+}, {
+  name: 'elevation.surface.overlay.hovered',
+  description: 'Hovered state of elevation.surface.overlay',
+  example: {
+    light: '#F7F8F9',
+    dark: '#2C3338'
+  }
+}, {
+  name: 'elevation.surface.overlay.pressed',
+  description: 'Pressed state of elevation.surface.overlay',
+  example: {
+    light: '#F7F8F9',
+    dark: '#2C3338'
+  }
+}, {
+  name: 'elevation.surface.raised',
+  description: 'Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised.',
+  example: {
+    light: '#FFFFFF',
+    dark: '#1D2125'
+  }
+}, {
+  name: 'elevation.surface.raised.hovered',
+  description: 'Hovered state of elevation.surface.raised',
+  example: {
+    light: '#F7F8F9',
+    dark: '#2C3338'
+  }
+}, {
+  name: 'elevation.surface.raised.pressed',
+  description: 'Pressed state of elevation.surface.raised',
+  example: {
+    light: '#F7F8F9',
+    dark: '#2C3338'
+  }
+}, {
+  name: 'elevation.surface.sunken',
+  description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.',
+  example: {
+    light: '#F7F8F9',
+    dark: '#2C3338'
+  }
+}];
+const shadowElevationTokens = [{
+  name: 'elevation.shadow.overflow',
+  description: 'Use to create a shadow when content scrolls under other content.'
+}, {
+  name: 'elevation.shadow.overflow.perimeter',
+  description: 'Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow.'
+}, {
+  name: 'elevation.shadow.overflow.spread',
+  description: 'Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow.'
+}, {
+  name: 'elevation.shadow.overlay',
+  description: 'Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay  Also use for the box shadow of raised cards in a dragged state.'
+}, {
+  name: 'elevation.shadow.raised',
+  description: 'Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised'
+}];
+const interactionTokens = [{
+  name: 'color.interaction.hovered',
+  description: 'Hover overlay',
+  example: {
+    light: '#091E4208',
+    dark: '#A1BDD908'
+  }
+}, {
+  name: 'color.interaction.pressed',
+  description: 'Pressed overlay',
+  example: {
+    light: '#091E4214',
+    dark: '#A1BDD914'
+  }
+}, {
+  name: 'color.interaction.inverse.hovered',
+  description: 'Inverse hover overlay',
+  example: {
+    light: '#FFFFFF14',
+    dark: '#FFFFFF14'
+  }
+}, {
+  name: 'color.interaction.inverse.pressed',
+  description: 'Inverse pressed overlay',
+  example: {
+    light: '#FFFFFF29',
+    dark: '#FFFFFF29'
+  }
+}];
+const skeletonTokens = [{
+  name: 'color.skeleton',
+  description: 'Loading state',
+  example: {
+    light: '#091E4208',
+    dark: '#A1BDD908'
+  }
+}, {
+  name: 'color.skeleton.subtle',
+  description: 'Loading effect',
+  example: {
+    light: '#091E4204',
+    dark: '#A1BDD904'
+  }
+}];
+const opacityTokens = [{
+  name: 'opacity.disabled',
+  description: 'Disabled state',
+  example: {
+    default: '0.4'
+  }
+}, {
+  name: 'opacity.loading',
+  description: 'Loading state',
+  example: {
+    default: '0.4'
+  }
+}];
+const utilityTokens = [{
+  name: 'utility.UNSAFE.textTransformUppercase',
+  description: 'Text transform uppercase token used for backwards compatibility between new and old theming solutions'
+}, {
+  name: 'utility.UNSAFE.transparent',
+  description: 'Transparent token used for backwards compatibility between new and old theming solutions'
+}, {
+  name: 'utility.elevation.surface.current',
+  description: 'A dynamic token that represents the current surface color set by a parent element. It defaults to the "elevation.surface" token value.'
+}];
+
+/**
+ * All Atlassian Design System tokens
+ */
+export const tokens = [...textColorTokens, ...linkColorTokens, ...backgroundColorTokens, ...chartColorTokens, ...blanketColorTokens, ...typographyTokens, ...fontWeightTokens, ...fontFamilyTokens, ...spacingTokens, ...negativeSpacingTokens, ...borderRadiusTokens, ...borderWidthTokens, ...surfaceElevationTokens, ...shadowElevationTokens, ...interactionTokens, ...skeletonTokens, ...opacityTokens, ...utilityTokens];