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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.tokens = void 0;
/**
 * 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::620de1bdd9882e214dcc9ae141009ae7>>
 * @codegenCommand yarn build tokens
 */

var tokens = exports.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.text',
  path: ['color', 'text', '[default]'],
  description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
  exampleValue: '#292A2E',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.lime',
  path: ['color', 'text', 'accent', 'lime', '[default]'],
  description: 'Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#4C6B1F',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.lime.bolder',
  path: ['color', 'text', 'accent', 'lime', 'bolder'],
  description: 'Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#37471F',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.red',
  path: ['color', 'text', 'accent', 'red', '[default]'],
  description: 'Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#AE2E24',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.red.bolder',
  path: ['color', 'text', 'accent', 'red', 'bolder'],
  description: 'Use for red text on subtle red accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#5D1F1A',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.orange',
  path: ['color', 'text', 'accent', 'orange', '[default]'],
  description: 'Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#9E4C00',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.orange.bolder',
  path: ['color', 'text', 'accent', 'orange', 'bolder'],
  description: 'Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#693200',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.yellow',
  path: ['color', 'text', 'accent', 'yellow', '[default]'],
  description: 'Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#7F5F01',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.yellow.bolder',
  path: ['color', 'text', 'accent', 'yellow', 'bolder'],
  description: 'Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#533F04',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.green',
  path: ['color', 'text', 'accent', 'green', '[default]'],
  description: 'Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#216E4E',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.green.bolder',
  path: ['color', 'text', 'accent', 'green', 'bolder'],
  description: 'Use for green text on subtle green accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#164B35',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.teal',
  path: ['color', 'text', 'accent', 'teal', '[default]'],
  description: 'Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#206A83',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.teal.bolder',
  path: ['color', 'text', 'accent', 'teal', 'bolder'],
  description: 'Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#164555',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.blue',
  path: ['color', 'text', 'accent', 'blue', '[default]'],
  description: 'Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#1558BC',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.blue.bolder',
  path: ['color', 'text', 'accent', 'blue', 'bolder'],
  description: 'Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#123263',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.purple',
  path: ['color', 'text', 'accent', 'purple', '[default]'],
  description: 'Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#803FA5',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.purple.bolder',
  path: ['color', 'text', 'accent', 'purple', 'bolder'],
  description: 'Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#48245D',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.magenta',
  path: ['color', 'text', 'accent', 'magenta', '[default]'],
  description: 'Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#943D73',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.magenta.bolder',
  path: ['color', 'text', 'accent', 'magenta', 'bolder'],
  description: 'Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color.',
  exampleValue: '#50253F',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.gray',
  path: ['color', 'text', 'accent', 'gray', '[default]'],
  description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.',
  exampleValue: '#505258',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.accent.gray.bolder',
  path: ['color', 'text', 'accent', 'gray', 'bolder'],
  description: 'Use for text and icons on gray subtle accent backgrounds.',
  exampleValue: '#1E1F21',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.disabled',
  path: ['color', 'text', 'disabled'],
  description: 'Use for text in a disabled state.',
  exampleValue: '#080F214A',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.inverse',
  path: ['color', 'text', 'inverse'],
  description: 'Use for text on bold backgrounds.',
  exampleValue: '#FFFFFF',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.selected',
  path: ['color', 'text', 'selected'],
  description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.',
  exampleValue: '#1868DB',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.brand',
  path: ['color', 'text', 'brand'],
  description: 'Use for text that reinforces our brand.',
  exampleValue: '#1868DB',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.danger',
  path: ['color', 'text', 'danger', '[default]'],
  description: 'Use for critical text, such as input field error messaging.',
  exampleValue: '#AE2E24',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.danger.bolder',
  path: ['color', 'text', 'danger', 'bolder'],
  description: 'Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance.',
  exampleValue: '#5D1F1A',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.warning',
  path: ['color', 'text', 'warning', '[default]'],
  description: 'Use for text to emphasize caution, such as in moved lozenges.',
  exampleValue: '#9E4C00',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.warning.inverse',
  path: ['color', 'text', 'warning', 'inverse'],
  description: 'Use for text when on bold warning backgrounds.',
  exampleValue: '#292A2E',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.warning.bolder',
  path: ['color', 'text', 'warning', 'bolder'],
  description: 'Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance.',
  exampleValue: '#693200',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.success',
  path: ['color', 'text', 'success', '[default]'],
  description: 'Use for text to communicate a favorable outcome, such as input field success messaging.',
  exampleValue: '#4C6B1F',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.success.bolder',
  path: ['color', 'text', 'success', 'bolder'],
  description: 'Use for text on top of success semantic labels to ensure accessibility and desired visual appearance.',
  exampleValue: '#37471F',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.discovery',
  path: ['color', 'text', 'discovery', '[default]'],
  description: 'Use for text to emphasize change or something new, such as in new lozenges.',
  exampleValue: '#803FA5',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.discovery.bolder',
  path: ['color', 'text', 'discovery', 'bolder'],
  description: 'Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance.',
  exampleValue: '#48245D',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.information',
  path: ['color', 'text', 'information', '[default]'],
  description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.',
  exampleValue: '#1558BC',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.information.bolder',
  path: ['color', 'text', 'information', 'bolder'],
  description: 'Use for text on top of information semantic labels to ensure accessibility and desired visual appearance.',
  exampleValue: '#123263',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.subtlest',
  path: ['color', 'text', 'subtlest'],
  description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.',
  exampleValue: '#6B6E76',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.text.subtle',
  path: ['color', 'text', 'subtle'],
  description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.',
  exampleValue: '#505258',
  usageGuidelines: {
    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
    cssProperties: ['color']
  }
}, {
  name: 'color.link',
  path: ['color', 'link', '[default]'],
  description: 'Use for links in a default or hovered state. Add an underline for hovered states.',
  exampleValue: '#1868DB',
  usageGuidelines: {
    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
    cssProperties: ['color']
  }
}, {
  name: 'color.link.pressed',
  path: ['color', 'link', 'pressed'],
  description: 'Use for links in a pressed state.',
  exampleValue: '#1558BC',
  usageGuidelines: {
    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
    cssProperties: ['color']
  }
}, {
  name: 'color.link.visited',
  path: ['color', 'link', 'visited', '[default]'],
  description: 'Use for visited links.',
  exampleValue: '#803FA5',
  usageGuidelines: {
    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
    cssProperties: ['color']
  }
}, {
  name: 'color.link.visited.pressed',
  path: ['color', 'link', 'visited', 'pressed'],
  description: 'Use for visited links in a pressed state.',
  exampleValue: '#48245D',
  usageGuidelines: {
    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
    cssProperties: ['color']
  }
}, {
  name: 'color.icon',
  path: ['color', 'icon', '[default]'],
  description: 'Use for icon-only buttons, or icons paired with color.text',
  exampleValue: '#292A2E',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.lime',
  path: ['color', 'icon', 'accent', 'lime'],
  description: 'Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#6A9A23',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.red',
  path: ['color', 'icon', 'accent', 'red'],
  description: 'Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#C9372C',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.orange',
  path: ['color', 'icon', 'accent', 'orange'],
  description: 'Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#E06C00',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.yellow',
  path: ['color', 'icon', 'accent', 'yellow'],
  description: 'Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#B38600',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.green',
  path: ['color', 'icon', 'accent', 'green'],
  description: 'Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#22A06B',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.teal',
  path: ['color', 'icon', 'accent', 'teal'],
  description: 'Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#2898BD',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.blue',
  path: ['color', 'icon', 'accent', 'blue'],
  description: 'Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#357DE8',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.purple',
  path: ['color', 'icon', 'accent', 'purple'],
  description: 'Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#AF59E1',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.magenta',
  path: ['color', 'icon', 'accent', 'magenta'],
  description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.',
  exampleValue: '#CD519D',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.accent.gray',
  path: ['color', 'icon', 'accent', 'gray'],
  description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.',
  exampleValue: '#7D818A',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.disabled',
  path: ['color', 'icon', 'disabled'],
  description: 'Use for icons in a disabled state.',
  exampleValue: '#080F214A',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.inverse',
  path: ['color', 'icon', 'inverse'],
  description: 'Use for icons on bold backgrounds.',
  exampleValue: '#FFFFFF',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.selected',
  path: ['color', 'icon', 'selected'],
  description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.',
  exampleValue: '#1868DB',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.brand',
  path: ['color', 'icon', 'brand'],
  description: 'Use for icons that reinforce our brand.',
  exampleValue: '#1868DB',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.danger',
  path: ['color', 'icon', 'danger'],
  description: 'Use for icons communicating critical information, such as those used in error handing.',
  exampleValue: '#C9372C',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.warning',
  path: ['color', 'icon', 'warning', '[default]'],
  description: 'Use for icons communicating caution, such as those used in warning section messages.',
  exampleValue: '#E06C00',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.warning.inverse',
  path: ['color', 'icon', 'warning', 'inverse'],
  description: 'Use for icons when on bold warning backgrounds.',
  exampleValue: '#292A2E',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.success',
  path: ['color', 'icon', 'success'],
  description: 'Use for icons communicating a favorable outcome, such as those used in success section messaged.',
  exampleValue: '#6A9A23',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.discovery',
  path: ['color', 'icon', 'discovery'],
  description: 'Use for icons communicating change or something new, such as discovery section messages.',
  exampleValue: '#AF59E1',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.information',
  path: ['color', 'icon', 'information'],
  description: 'Use for icons communicating information or something in-progress, such as information section messages.',
  exampleValue: '#357DE8',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.subtlest',
  path: ['color', 'icon', 'subtlest'],
  description: 'Use for icons paired with color.text.subtlest',
  exampleValue: '#6B6E76',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.icon.subtle',
  path: ['color', 'icon', 'subtle'],
  description: 'Use for icons paired with color.text.subtle',
  exampleValue: '#505258',
  usageGuidelines: {
    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
    cssProperties: ['color', 'fill', 'stroke']
  }
}, {
  name: 'color.border',
  path: ['color', 'border', '[default]'],
  description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.',
  exampleValue: '#0B120E24',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.lime',
  path: ['color', 'border', 'accent', 'lime', '[default]'],
  description: 'Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#6A9A23',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.lime.subtle',
  path: ['color', 'border', 'accent', 'lime', 'subtle'],
  description: 'Use for decorative lime borders that do not need to meet 3:1 contrast requirements.',
  exampleValue: '#B3DF72',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.red',
  path: ['color', 'border', 'accent', 'red', '[default]'],
  description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#E2483D',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.red.subtle',
  path: ['color', 'border', 'accent', 'red', 'subtle'],
  description: 'Use for decorative red borders that do not need to meet 3:1 contrast requirements.',
  exampleValue: '#FD9891',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.orange',
  path: ['color', 'border', 'accent', 'orange', '[default]'],
  description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#E06C00',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.orange.subtle',
  path: ['color', 'border', 'accent', 'orange', 'subtle'],
  description: 'Use for decorative orange borders that do not need to meet 3:1 contrast requirements.',
  exampleValue: '#FBC828',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.yellow',
  path: ['color', 'border', 'accent', 'yellow', '[default]'],
  description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#B38600',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.yellow.subtle',
  path: ['color', 'border', 'accent', 'yellow', 'subtle'],
  description: 'Use for decorative yellow borders that do not need to meet 3:1 contrast requirements.',
  exampleValue: '#EED12B',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.green',
  path: ['color', 'border', 'accent', 'green', '[default]'],
  description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#22A06B',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.green.subtle',
  path: ['color', 'border', 'accent', 'green', 'subtle'],
  description: 'Use for decorative green borders that do not need to meet 3:1 contrast requirements.',
  exampleValue: '#7EE2B8',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.teal',
  path: ['color', 'border', 'accent', 'teal', '[default]'],
  description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#2898BD',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.teal.subtle',
  path: ['color', 'border', 'accent', 'teal', 'subtle'],
  description: 'Use for decorative teal borders that do not need to meet 3:1 contrast requirements.',
  exampleValue: '#9DD9EE',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.blue',
  path: ['color', 'border', 'accent', 'blue', '[default]'],
  description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#357DE8',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.blue.subtle',
  path: ['color', 'border', 'accent', 'blue', 'subtle'],
  description: 'Use for decorative blue borders that do not need to meet 3:1 contrast requirements.',
  exampleValue: '#8FB8F6',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.purple',
  path: ['color', 'border', 'accent', 'purple', '[default]'],
  description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#AF59E1',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.purple.subtle',
  path: ['color', 'border', 'accent', 'purple', 'subtle'],
  description: 'Use for decorative purple borders that do not need to meet 3:1 contrast requirements.',
  exampleValue: '#D8A0F7',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    cssProperties: ['border-color', 'outline-color']
  }
}, {
  name: 'color.border.accent.magenta',
  path: ['color', 'border', 'accent', 'magenta', '[default]'],
  description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.',
  exampleValue: '#CD519D',
  usageGuidelines: {
    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
    css