@atlaskit/tokens/dist/esm/entry-points/token-metadata.codegen.js

Design tokens are the single source of truth to name and store design decisions.

/**
 * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
 *
 * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
 *
 * @codegen <<SignedSource::ae4acbb8ddfe6f3a0c28dc3479fd9d0d>>
 * @codegenCommand yarn build tokens
 */

export var tokens = [{
  name: 'motion.avatar.enter',
  path: ['motion', 'avatar', 'enter'],
  description: 'Use for avatar group enter transitions.',
  exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.avatar.exit',
  path: ['motion', 'avatar', 'exit'],
  description: 'Use for avatar group exit transitions.',
  exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to80, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.avatar.hovered',
  path: ['motion', 'avatar', 'hovered'],
  description: 'Use for hover state on avatar elements.',
  exampleValue: 'transform 250ms linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1)',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.blanket.enter',
  path: ['motion', 'blanket', 'enter'],
  description: 'Use for blanket enter transitions.',
  exampleValue: '250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.blanket.exit',
  path: ['motion', 'blanket', 'exit'],
  description: 'Use for blanket exit transitions.',
  exampleValue: '200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.duration.instant',
  path: ['motion', 'duration', 'instant'],
  description: 'Use for instant feedback with no perceptible delay, such as list item hover, selected and focus states.',
  exampleValue: '0ms',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.duration.long',
  path: ['motion', 'duration', 'long'],
  description: 'Use for medium entrance transitions, such as modal enter and flag enter.',
  exampleValue: '250ms',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.duration.medium',
  path: ['motion', 'duration', 'medium'],
  description: 'Use for medium exit transitions, such as modal exit and flag exit.',
  exampleValue: '200ms',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.duration.short',
  path: ['motion', 'duration', 'short'],
  description: 'Use for interactive state emphasis and small entrances, such as button hover and pressed states, popup enter, and avatar appear.',
  exampleValue: '150ms',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.duration.xlong',
  path: ['motion', 'duration', 'xlong'],
  description: 'Use for large transitions, such as panel enter/exit, page transitions, and full-screen overlays.',
  exampleValue: '400ms',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.duration.xshort',
  path: ['motion', 'duration', 'xshort'],
  description: 'Use for subtle pressed states and quick exits, such as component press feedback, popup dismiss, and avatar transitions.',
  exampleValue: '100ms',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.duration.xxlong',
  path: ['motion', 'duration', 'xxlong'],
  description: 'Use for large transitions, such as onboarding steps and full-screen overlays.',
  exampleValue: '600ms',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.duration.xxshort',
  path: ['motion', 'duration', 'xxshort'],
  description: 'Use for instant feedback, such as list item hover, selected and focus states.',
  exampleValue: '50ms',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.easing.in.practical',
  path: ['motion', 'easing', 'in', 'practical'],
  description: 'Starts slowly and accelerates away. Best for exit transitions where elements leaving the screen should feel like they are getting out of the way.',
  exampleValue: 'cubic-bezier(0.6, 0, 0.8, 0.6)',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.easing.inout.bold',
  path: ['motion', 'easing', 'inout', 'bold'],
  description: 'The bold in-out curve pairs naturally with scale and repositioning of elements. It controls both the start and end of the motion.',
  exampleValue: 'cubic-bezier(0.4, 0, 0, 1)',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.easing.out.practical',
  path: ['motion', 'easing', 'out', 'practical'],
  description: 'A practical, everyday enter curve. Less dramatic than the bold variant, good for subtle transitions like content swaps, tab changes, and list reordering.',
  exampleValue: 'cubic-bezier(0.4, 1, 0.6, 1)',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.easing.out.bold',
  path: ['motion', 'easing', 'out', 'bold'],
  description: 'Elements arrive quickly and decelerate to a stop. The fast start grabs attention and the gentle landing feels controlled.',
  exampleValue: 'cubic-bezier(0, 0.4, 0, 1)',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.flag.enter',
  path: ['motion', 'flag', 'enter'],
  description: 'Use for flag enter transitions.',
  exampleValue: '250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.flag.exit',
  path: ['motion', 'flag', 'exit'],
  description: 'Use for flag exit transitions.',
  exampleValue: '200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.flag.reposition',
  path: ['motion', 'flag', 'reposition'],
  description: 'Use for repositioning flag elements.',
  exampleValue: 'transform 250ms cubic-bezier(0.4, 0, 0, 1)',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.fade.in',
  path: ['motion', 'keyframe', 'fade', 'in'],
  description: 'Use for fade-in transitions where an element goes from fully transparent to fully opaque.',
  exampleValue: 'FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.fade.out',
  path: ['motion', 'keyframe', 'fade', 'out'],
  description: 'Use for fade-out transitions where an element goes from fully opaque to fully transparent.',
  exampleValue: 'FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.scale.in.medium',
  path: ['motion', 'keyframe', 'scale', 'in', 'medium'],
  description: 'Use for medium scale-in transitions where an element grows from 80% to full size on enter.',
  exampleValue: 'ScaleIn80to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.scale.in.small',
  path: ['motion', 'keyframe', 'scale', 'in', 'small'],
  description: 'Use for small scale-in transitions where an element grows from 95% to full size on enter.',
  exampleValue: 'ScaleIn95to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.scale.out.medium',
  path: ['motion', 'keyframe', 'scale', 'out', 'medium'],
  description: 'Use for medium scale-out transitions where an element shrinks from full size to 80% on exit.',
  exampleValue: 'ScaleOut100to80',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.scale.out.small',
  path: ['motion', 'keyframe', 'scale', 'out', 'small'],
  description: 'Use for small scale-out transitions where an element shrinks from full size to 95% on exit.',
  exampleValue: 'ScaleOut100to95',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.in.bottom.short',
  path: ['motion', 'keyframe', 'slide', 'in', 'bottom', 'short'],
  description: 'Use for short slide-in transitions where an element enters from below its final position by 8px.',
  exampleValue: 'SlideInBottom8px',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.in.left.half',
  path: ['motion', 'keyframe', 'slide', 'in', 'left', 'half'],
  description: 'Use for slide-in transitions where an element enters from the left of its final position by 50%.',
  exampleValue: 'SlideIn50PercentLeft',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.in.left.short',
  path: ['motion', 'keyframe', 'slide', 'in', 'left', 'short'],
  description: 'Use for short slide-in transitions where an element enters from the left of its final position by 8px.',
  exampleValue: 'SlideInLeft8px',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.in.right.short',
  path: ['motion', 'keyframe', 'slide', 'in', 'right', 'short'],
  description: 'Use for short slide-in transitions where an element enters from the right of its final position by 8px.',
  exampleValue: 'SlideInRight8px',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.in.top.short',
  path: ['motion', 'keyframe', 'slide', 'in', 'top', 'short'],
  description: 'Use for short slide-in transitions where an element enters from above its final position by 8px.',
  exampleValue: 'SlideInTop8px',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.out.bottom.short',
  path: ['motion', 'keyframe', 'slide', 'out', 'bottom', 'short'],
  description: 'Use for short slide-out transitions where an element exits downward by 8px from its starting position.',
  exampleValue: 'SlideOutBottom8px',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.out.left.half',
  path: ['motion', 'keyframe', 'slide', 'out', 'left', 'half'],
  description: 'Use for slide-out transitions where an element exits to the left of its starting position by 15%.',
  exampleValue: 'SlideOut15PercentLeft',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.out.left.short',
  path: ['motion', 'keyframe', 'slide', 'out', 'left', 'short'],
  description: 'Use for short slide-out transitions where an element exits to the left by 8px from its starting position.',
  exampleValue: 'SlideOutLeft8px',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.out.right.short',
  path: ['motion', 'keyframe', 'slide', 'out', 'right', 'short'],
  description: 'Use for short slide-out transitions where an element exits to the right by 8px from its starting position.',
  exampleValue: 'SlideOutRight8px',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.keyframe.slide.out.top.short',
  path: ['motion', 'keyframe', 'slide', 'out', 'top', 'short'],
  description: 'Use for short slide-out transitions where an element exits upward by 8px from its starting position.',
  exampleValue: 'SlideOutTop8px',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.modal.enter',
  path: ['motion', 'modal', 'enter'],
  description: 'Use for modal enter transitions.',
  exampleValue: '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.modal.exit',
  path: ['motion', 'modal', 'exit'],
  description: 'Use for modal exit transitions.',
  exampleValue: '200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.popup.enter.bottom',
  path: ['motion', 'popup', 'enter', 'bottom'],
  description: 'Use for popup enter from the bottom.',
  exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.popup.enter.left',
  path: ['motion', 'popup', 'enter', 'left'],
  description: 'Use for popup enter from the left.',
  exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.popup.enter.right',
  path: ['motion', 'popup', 'enter', 'right'],
  description: 'Use for popup enter from the right.',
  exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.popup.enter.top',
  path: ['motion', 'popup', 'enter', 'top'],
  description: 'Use for popup enter from the top: popup, tooltip, dropdown, inline message, inline dialog.',
  exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.popup.exit.bottom',
  path: ['motion', 'popup', 'exit', 'bottom'],
  description: 'Use for popup exit toward the bottom.',
  exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.popup.exit.left',
  path: ['motion', 'popup', 'exit', 'left'],
  description: 'Use for popup exit toward the left.',
  exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.popup.exit.right',
  path: ['motion', 'popup', 'exit', 'right'],
  description: 'Use for popup exit toward the right.',
  exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.popup.exit.top',
  path: ['motion', 'popup', 'exit', 'top'],
  description: 'Use for popup exit toward the top.',
  exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.spotlight.enter',
  path: ['motion', 'spotlight', 'enter'],
  description: 'Use for spotlight enter transitions.',
  exampleValue: '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'motion.spotlight.exit',
  path: ['motion', 'spotlight', 'exit'],
  description: 'Use for spotlight exit transitions.',
  exampleValue: '200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
  usageGuidelines: {
    usage: '',
    cssProperties: []
  }
}, {
  name: 'color.background.accent.lime.subtlest',
  path: ['color', 'background', 'accent', 'lime', 'subtlest', '[default]'],
  description: 'Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
  exampleValue: '#EFFFD6',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.subtlest.hovered',
  path: ['color', 'background', 'accent', 'lime', 'subtlest', 'hovered'],
  description: 'Hovered state of color.background.accent.lime.subtlest.',
  exampleValue: '#D3F1A7',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.subtlest.pressed',
  path: ['color', 'background', 'accent', 'lime', 'subtlest', 'pressed'],
  description: 'Pressed state of color.background.accent.lime.subtlest.',
  exampleValue: '#BDE97C',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.subtler',
  path: ['color', 'background', 'accent', 'lime', 'subtler', '[default]'],
  description: 'Use for for backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#D3F1A7',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.subtler.hovered',
  path: ['color', 'background', 'accent', 'lime', 'subtler', 'hovered'],
  description: 'Hovered state of color.background.accent.lime.subtler.',
  exampleValue: '#BDE97C',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.subtler.pressed',
  path: ['color', 'background', 'accent', 'lime', 'subtler', 'pressed'],
  description: 'Pressed state of color.background.accent.lime.subtler.',
  exampleValue: '#B3DF72',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.subtle',
  path: ['color', 'background', 'accent', 'lime', 'subtle', '[default]'],
  description: 'Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#94C748',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.subtle.hovered',
  path: ['color', 'background', 'accent', 'lime', 'subtle', 'hovered'],
  description: 'Hovered state of color.background.accent.lime.subtle.',
  exampleValue: '#B3DF72',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.subtle.pressed',
  path: ['color', 'background', 'accent', 'lime', 'subtle', 'pressed'],
  description: 'Pressed state of color.background.accent.lime.subtle.',
  exampleValue: '#BDE97C',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.bolder',
  path: ['color', 'background', 'accent', 'lime', 'bolder', '[default]'],
  description: 'Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
  exampleValue: '#5B7F24',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.bolder.hovered',
  path: ['color', 'background', 'accent', 'lime', 'bolder', 'hovered'],
  description: 'Hovered state of color.background.accent.lime.bolder.',
  exampleValue: '#4C6B1F',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.lime.bolder.pressed',
  path: ['color', 'background', 'accent', 'lime', 'bolder', 'pressed'],
  description: 'Pressed state of color.background.accent.lime.bolder.',
  exampleValue: '#3F5224',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtlest',
  path: ['color', 'background', 'accent', 'red', 'subtlest', '[default]'],
  description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
  exampleValue: '#FFECEB',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtlest.hovered',
  path: ['color', 'background', 'accent', 'red', 'subtlest', 'hovered'],
  description: 'Hovered state of color.background.accent.red.subtlest.',
  exampleValue: '#FFD5D2',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtlest.pressed',
  path: ['color', 'background', 'accent', 'red', 'subtlest', 'pressed'],
  description: 'Pressed state of color.background.accent.red.subtlest.',
  exampleValue: '#FFB8B2',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtler',
  path: ['color', 'background', 'accent', 'red', 'subtler', '[default]'],
  description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#FFD5D2',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtler.hovered',
  path: ['color', 'background', 'accent', 'red', 'subtler', 'hovered'],
  description: 'Hovered state of color.background.accent.red.subtler.',
  exampleValue: '#FFB8B2',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtler.pressed',
  path: ['color', 'background', 'accent', 'red', 'subtler', 'pressed'],
  description: 'Pressed state of color.background.accent.red.subtler.',
  exampleValue: '#FD9891',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtle',
  path: ['color', 'background', 'accent', 'red', 'subtle', '[default]'],
  description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#F87168',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtle.hovered',
  path: ['color', 'background', 'accent', 'red', 'subtle', 'hovered'],
  description: 'Hovered state of color.background.accent.red.subtle.',
  exampleValue: '#FD9891',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.subtle.pressed',
  path: ['color', 'background', 'accent', 'red', 'subtle', 'pressed'],
  description: 'Pressed state of color.background.accent.red.subtle.',
  exampleValue: '#FFB8B2',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.bolder',
  path: ['color', 'background', 'accent', 'red', 'bolder', '[default]'],
  description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
  exampleValue: '#C9372C',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.bolder.hovered',
  path: ['color', 'background', 'accent', 'red', 'bolder', 'hovered'],
  description: 'Hovered state of color.background.accent.red.bolder.',
  exampleValue: '#AE2E24',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.red.bolder.pressed',
  path: ['color', 'background', 'accent', 'red', 'bolder', 'pressed'],
  description: 'Pressed state of color.background.accent.red.bolder.',
  exampleValue: '#872821',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtlest',
  path: ['color', 'background', 'accent', 'orange', 'subtlest', '[default]'],
  description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
  exampleValue: '#FFF5DB',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtlest.hovered',
  path: ['color', 'background', 'accent', 'orange', 'subtlest', 'hovered'],
  description: 'Hovered state of color.background.accent.orange.subtlest.',
  exampleValue: '#FCE4A6',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtlest.pressed',
  path: ['color', 'background', 'accent', 'orange', 'subtlest', 'pressed'],
  description: 'Pressed state of color.background.accent.orange.subtlest.',
  exampleValue: '#FBD779',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtler',
  path: ['color', 'background', 'accent', 'orange', 'subtler', '[default]'],
  description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#FCE4A6',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtler.hovered',
  path: ['color', 'background', 'accent', 'orange', 'subtler', 'hovered'],
  description: 'Hovered state of color.background.accent.orange.subtler.',
  exampleValue: '#FBD779',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtler.pressed',
  path: ['color', 'background', 'accent', 'orange', 'subtler', 'pressed'],
  description: 'Pressed state of color.background.accent.orange.subtler.',
  exampleValue: '#FBC828',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtle',
  path: ['color', 'background', 'accent', 'orange', 'subtle', '[default]'],
  description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#FCA700',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtle.hovered',
  path: ['color', 'background', 'accent', 'orange', 'subtle', 'hovered'],
  description: 'Hovered state of color.background.accent.orange.subtle.',
  exampleValue: '#FBC828',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.subtle.pressed',
  path: ['color', 'background', 'accent', 'orange', 'subtle', 'pressed'],
  description: 'Pressed state of color.background.accent.orange.subtle.',
  exampleValue: '#FBD779',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.bolder',
  path: ['color', 'background', 'accent', 'orange', 'bolder', '[default]'],
  description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
  exampleValue: '#BD5B00',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.bolder.hovered',
  path: ['color', 'background', 'accent', 'orange', 'bolder', 'hovered'],
  description: 'Hovered state of color.background.accent.orange.bolder.',
  exampleValue: '#9E4C00',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.orange.bolder.pressed',
  path: ['color', 'background', 'accent', 'orange', 'bolder', 'pressed'],
  description: 'Pressed state of color.background.accent.orange.bolder.',
  exampleValue: '#7A3B00',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtlest',
  path: ['color', 'background', 'accent', 'yellow', 'subtlest', '[default]'],
  description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
  exampleValue: '#FEF7C8',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtlest.hovered',
  path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'hovered'],
  description: 'Hovered state of color.background.accent.yellow.subtlest.',
  exampleValue: '#F5E989',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtlest.pressed',
  path: ['color', 'background', 'accent', 'yellow', 'subtlest', 'pressed'],
  description: 'Pressed state of color.background.accent.yellow.subtlest.',
  exampleValue: '#EFDD4E',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtler',
  path: ['color', 'background', 'accent', 'yellow', 'subtler', '[default]'],
  description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#F5E989',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtler.hovered',
  path: ['color', 'background', 'accent', 'yellow', 'subtler', 'hovered'],
  description: 'Hovered state of color.background.accent.yellow.subtler.',
  exampleValue: '#EFDD4E',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtler.pressed',
  path: ['color', 'background', 'accent', 'yellow', 'subtler', 'pressed'],
  description: 'Pressed state of color.background.accent.yellow.subtler.',
  exampleValue: '#EED12B',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtle',
  path: ['color', 'background', 'accent', 'yellow', 'subtle', '[default]'],
  description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#EED12B',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtle.hovered',
  path: ['color', 'background', 'accent', 'yellow', 'subtle', 'hovered'],
  description: 'Hovered state of color.background.accent.yellow.subtle.',
  exampleValue: '#DDB30E',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.subtle.pressed',
  path: ['color', 'background', 'accent', 'yellow', 'subtle', 'pressed'],
  description: 'Pressed state of color.background.accent.yellow.subtle.',
  exampleValue: '#EFDD4E',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.bolder',
  path: ['color', 'background', 'accent', 'yellow', 'bolder', '[default]'],
  description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
  exampleValue: '#946F00',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.bolder.hovered',
  path: ['color', 'background', 'accent', 'yellow', 'bolder', 'hovered'],
  description: 'Hovered state of color.background.accent.yellow.bolder.',
  exampleValue: '#7F5F01',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.yellow.bolder.pressed',
  path: ['color', 'background', 'accent', 'yellow', 'bolder', 'pressed'],
  description: 'Pressed state of color.background.accent.yellow.bolder.',
  exampleValue: '#614A05',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtlest',
  path: ['color', 'background', 'accent', 'green', 'subtlest', '[default]'],
  description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
  exampleValue: '#DCFFF1',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtlest.hovered',
  path: ['color', 'background', 'accent', 'green', 'subtlest', 'hovered'],
  description: 'Hovered state of color.background.accent.green.subtlest.',
  exampleValue: '#BAF3DB',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtlest.pressed',
  path: ['color', 'background', 'accent', 'green', 'subtlest', 'pressed'],
  description: 'Pressed state of color.background.accent.green.subtlest.',
  exampleValue: '#97EDC9',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtler',
  path: ['color', 'background', 'accent', 'green', 'subtler', '[default]'],
  description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#BAF3DB',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtler.hovered',
  path: ['color', 'background', 'accent', 'green', 'subtler', 'hovered'],
  description: 'Hovered state of color.background.accent.green.subtler.',
  exampleValue: '#97EDC9',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtler.pressed',
  path: ['color', 'background', 'accent', 'green', 'subtler', 'pressed'],
  description: 'Pressed state of color.background.accent.green.subtler.',
  exampleValue: '#7EE2B8',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtle',
  path: ['color', 'background', 'accent', 'green', 'subtle', '[default]'],
  description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#4BCE97',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtle.hovered',
  path: ['color', 'background', 'accent', 'green', 'subtle', 'hovered'],
  description: 'Hovered state of color.background.accent.green.subtle.',
  exampleValue: '#7EE2B8',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.subtle.pressed',
  path: ['color', 'background', 'accent', 'green', 'subtle', 'pressed'],
  description: 'Pressed state of color.background.accent.green.subtle.',
  exampleValue: '#97EDC9',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.bolder',
  path: ['color', 'background', 'accent', 'green', 'bolder', '[default]'],
  description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
  exampleValue: '#1F845A',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.bolder.hovered',
  path: ['color', 'background', 'accent', 'green', 'bolder', 'hovered'],
  description: 'Hovered state of color.background.accent.green.bolder.',
  exampleValue: '#216E4E',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.green.bolder.pressed',
  path: ['color', 'background', 'accent', 'green', 'bolder', 'pressed'],
  description: 'Pressed state of color.background.accent.green.bolder.',
  exampleValue: '#19573D',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtlest',
  path: ['color', 'background', 'accent', 'teal', 'subtlest', '[default]'],
  description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
  exampleValue: '#E7F9FF',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtlest.hovered',
  path: ['color', 'background', 'accent', 'teal', 'subtlest', 'hovered'],
  description: 'Hovered state of color.background.accent.teal.subtlest.',
  exampleValue: '#C6EDFB',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtlest.pressed',
  path: ['color', 'background', 'accent', 'teal', 'subtlest', 'pressed'],
  description: 'Pressed state of color.background.accent.teal.subtlest.',
  exampleValue: '#B1E4F7',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtler',
  path: ['color', 'background', 'accent', 'teal', 'subtler', '[default]'],
  description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#C6EDFB',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtler.hovered',
  path: ['color', 'background', 'accent', 'teal', 'subtler', 'hovered'],
  description: 'Hovered state of color.background.accent.teal.subtler.',
  exampleValue: '#B1E4F7',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtler.pressed',
  path: ['color', 'background', 'accent', 'teal', 'subtler', 'pressed'],
  description: 'Pressed state of color.background.accent.teal.subtler.',
  exampleValue: '#9DD9EE',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtle',
  path: ['color', 'background', 'accent', 'teal', 'subtle', '[default]'],
  description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#6CC3E0',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtle.hovered',
  path: ['color', 'background', 'accent', 'teal', 'subtle', 'hovered'],
  description: 'Hovered state of color.background.accent.teal.subtle.',
  exampleValue: '#9DD9EE',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.subtle.pressed',
  path: ['color', 'background', 'accent', 'teal', 'subtle', 'pressed'],
  description: 'Pressed state of color.background.accent.teal.subtle.',
  exampleValue: '#B1E4F7',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.bolder',
  path: ['color', 'background', 'accent', 'teal', 'bolder', '[default]'],
  description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.',
  exampleValue: '#227D9B',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.bolder.hovered',
  path: ['color', 'background', 'accent', 'teal', 'bolder', 'hovered'],
  description: 'Hovered state of color.background.accent.teal.bolder.',
  exampleValue: '#206A83',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.teal.bolder.pressed',
  path: ['color', 'background', 'accent', 'teal', 'bolder', 'pressed'],
  description: 'Pressed state of color.background.accent.teal.bolder.',
  exampleValue: '#1A5265',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.blue.subtlest',
  path: ['color', 'background', 'accent', 'blue', 'subtlest', '[default]'],
  description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.',
  exampleValue: '#E9F2FE',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.blue.subtlest.hovered',
  path: ['color', 'background', 'accent', 'blue', 'subtlest', 'hovered'],
  description: 'Hovered state of color.background.accent.blue.subtlest.',
  exampleValue: '#CFE1FD',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.blue.subtlest.pressed',
  path: ['color', 'background', 'accent', 'blue', 'subtlest', 'pressed'],
  description: 'Pressed state of color.background.accent.blue.subtlest.',
  exampleValue: '#ADCBFB',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.blue.subtler',
  path: ['color', 'background', 'accent', 'blue', 'subtler', '[default]'],
  description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.',
  exampleValue: '#CFE1FD',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.blue.subtler.hovered',
  path: ['color', 'background', 'accent', 'blue', 'subtler', 'hovered'],
  description: 'Hovered state of color.background.accent.blue.subtler.',
  exampleValue: '#ADCBFB',
  usageGuidelines: {
    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
    cssProperties: ['background-color']
  }
}, {
  name: 'color.background.accent.blue.subtler.pressed',
  path: ['color', 'back