@twilio-paste/design-tokens/dist/themes/console/tokens.gatsby.json

{
    "tokens": [{
    "categoryName": "background-colors",
    "tokens": [{"type":"color","category":"background-color","value":"rgb(248, 248, 249)","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","name":"color-background"},{"type":"color","category":"background-color","value":"rgb(255, 255, 255)","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"rgb(35, 54, 89)","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"rgb(242, 47, 70)","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"rgb(228, 231, 233)","comment":"Dark default background color","originalValue":"{!palette-gray-40}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(200, 204, 207)","comment":"Darker default background color","originalValue":"{!palette-gray-50}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(112, 117, 120)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(226, 37, 37)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(146, 18, 0)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(96, 1, 1)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(236, 182, 182)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(245, 221, 221)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(226, 37, 37)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(146, 18, 0)","comment":"Dark error background color","originalValue":"{!palette-red-80}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgb(40, 42, 43)","comment":"Inverse background color for any container, the darkest gray in the system","originalValue":"{!palette-gray-100}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"rgb(245, 248, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgba(40, 42, 43, 0.5)","comment":"Default background for overlays","originalValue":"{!palette-gray-100-transparent-50}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(2, 122, 197)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 62, 130)","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"rgb(3, 44, 94)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"rgb(179, 211, 233)","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"rgb(220, 234, 244)","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"rgb(245, 248, 255)","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"rgb(222, 88, 88)","comment":"Required background color","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(248, 248, 249)","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-20}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"rgb(0, 153, 74)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(224, 255, 239)","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"rgb(228, 98, 22)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(255, 236, 216)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
  },
{
    "categoryName": "border-colors",
    "tokens": [{"type":"color","category":"border-color","value":"rgb(136, 140, 142)","comment":"Default border color","originalValue":"{!palette-gray-60}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(136, 140, 142)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(226, 37, 37)","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(146, 18, 0)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(96, 1, 1)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(236, 182, 182)","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(245, 221, 221)","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(226, 37, 37)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(146, 18, 0)","comment":"Dark error border color","originalValue":"{!palette-red-80}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(222, 88, 88)","comment":"Light error border color","originalValue":"{!palette-red-50}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(255, 233, 231)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Border on inverse backgrounds","originalValue":"{!palette-gray-0}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgb(228, 231, 233)","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(200, 204, 207)","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"rgb(2, 122, 197)","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"rgb(0, 62, 130)","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"rgb(3, 44, 94)","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"rgb(179, 211, 233)","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"rgb(220, 234, 244)","comment":"Lighter primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"rgb(0, 153, 74)","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"rgb(224, 255, 239)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(228, 98, 22)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(242, 133, 16)","comment":"Light warning border color","originalValue":"{!palette-orange-50}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(255, 236, 216)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
  },
{
    "categoryName": "border-widths",
    "tokens": [{"type":"size","category":"border-width","value":"0","comment":"Border width reset","originalValue":"{!border-width-0}","name":"border-width-0"},{"type":"size","category":"border-width","value":"1px","comment":"Small border width","originalValue":"{!border-width-10}","name":"border-width-10"},{"type":"size","category":"border-width","value":"2px","comment":"Large border width","originalValue":"{!border-width-20}","name":"border-width-20"},{"type":"size","category":"border-width","value":"4px","comment":"Small border width","originalValue":"{!border-width-30}","name":"border-width-30"},{"type":"size","category":"border-width","value":"8px","comment":"Large border width","originalValue":"{!border-width-40}","name":"border-width-40"}]
  },
{
    "categoryName": "box-shadows",
    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #888c8e","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e22525","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #921200","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e4e7e9","comment":"Shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-40}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #003e82","comment":"Shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #032c5e","comment":"Shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(40, 42, 43, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(2, 122, 197, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20}px {!palette-blue-60-transparent-80}","name":"shadow-focus"}]
  },
{
    "categoryName": "colors",
    "tokens": [{"type":"color","category":"color","value":"rgb(35, 54, 89)","comment":"Default branding color","originalValue":"{!midnight}","name":"color-brand"},{"type":"color","category":"color","value":"rgb(242, 47, 70)","comment":"Twilio brand red","originalValue":"{!amaranth}","name":"color-brand-highlight"},{"type":"color","category":"color","value":"rgb(255, 255, 255)","comment":"Gray Color 0","originalValue":"{!palette-gray-0}","name":"color-gray-0"},{"type":"color","category":"color","value":"rgb(249, 250, 251)","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"rgb(40, 42, 43)","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"rgb(248, 248, 249)","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"rgb(242, 243, 244)","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"rgb(228, 231, 233)","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"rgb(200, 204, 207)","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"rgb(136, 140, 142)","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"rgb(112, 117, 120)","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"rgb(79, 83, 85)","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"rgb(66, 69, 71)","comment":"Gray Color 9","originalValue":"{!palette-gray-90}","name":"color-gray-90"}]
  },
{
    "categoryName": "fonts",
    "tokens": [{"category":"font","type":"font","value":"'Fira Mono', 'Courier New', Courier, monospace","originalValue":"{!font-family-20}","name":"font-family-code"},{"category":"font","type":"font","value":"'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif","originalValue":"{!font-family-10}","name":"font-family-text"}]
  },
{
    "categoryName": "font-sizes",
    "tokens": [{"category":"font-size","type":"font-size","value":"0.625rem","comment":"Constant typography token for font size 10","originalValue":"{!font-size-10}","name":"font-size-10"},{"category":"font-size","type":"font-size","value":"2.5rem","comment":"Constant typography token for font size 100","originalValue":"{!font-size-100}","name":"font-size-100"},{"category":"font-size","type":"font-size","value":"3rem","comment":"Constant typography token for font size 110","originalValue":"{!font-size-110}","name":"font-size-110"},{"category":"font-size","type":"font-size","value":"0.75rem","comment":"Constant typography token for font size 20","originalValue":"{!font-size-20}","name":"font-size-20"},{"category":"font-size","type":"font-size","value":"0.875rem","comment":"Constant typography token for font size 30","originalValue":"{!font-size-30}","name":"font-size-30"},{"category":"font-size","type":"font-size","value":"1rem","comment":"Constant typography token for font size 40","originalValue":"{!font-size-40}","name":"font-size-40"},{"category":"font-size","type":"font-size","value":"1.125rem","comment":"Constant typography token for font size 50","originalValue":"{!font-size-50}","name":"font-size-50"},{"category":"font-size","type":"font-size","value":"1.25rem","comment":"Constant typography token for font size 60","originalValue":"{!font-size-60}","name":"font-size-60"},{"category":"font-size","type":"font-size","value":"1.5rem","comment":"Constant typography token for font size 70","originalValue":"{!font-size-70}","name":"font-size-70"},{"category":"font-size","type":"font-size","value":"1.75rem","comment":"Constant typography token for font size 80","originalValue":"{!font-size-80}","name":"font-size-80"},{"category":"font-size","type":"font-size","value":"2rem","comment":"Constant typography token for font size 90","originalValue":"{!font-size-90}","name":"font-size-90"}]
  },
{
    "categoryName": "font-weights",
    "tokens": [{"category":"font-weight","type":"font-weight","value":"700","comment":"Font weight for bold weight","originalValue":"{!font-weight-bold}","name":"font-weight-bold"},{"category":"font-weight","type":"font-weight","value":"300","comment":"Font weight for light weight","originalValue":"{!font-weight-light}","name":"font-weight-light"},{"category":"font-weight","type":"font-weight","value":"500","comment":"Font weight for medium weight","originalValue":"{!font-weight-medium}","name":"font-weight-medium"},{"category":"font-weight","type":"font-weight","value":"400","comment":"Font weight for normal weight","originalValue":"{!font-weight-normal}","name":"font-weight-normal"},{"category":"font-weight","type":"font-weight","value":"500","comment":"Font weight for semibold weight","originalValue":"{!font-weight-medium}","name":"font-weight-semibold"}]
  },
{
    "categoryName": "line-heights",
    "tokens": [{"category":"line-height","type":"number","value":"1rem","comment":"Constant line-height token for line-height 10","originalValue":"{!line-height-10}","name":"line-height-10"},{"category":"line-height","type":"number","value":"3.25rem","comment":"Constant line-height token for line-height 100","originalValue":"{!line-height-100}","name":"line-height-100"},{"category":"line-height","type":"number","value":"3.75rem","comment":"Constant line-height token for line-height 110","originalValue":"{!line-height-110}","name":"line-height-110"},{"category":"line-height","type":"number","value":"1.25rem","comment":"Constant line-height token for line-height 20","originalValue":"{!line-height-20}","name":"line-height-20"},{"category":"line-height","type":"number","value":"1.5rem","comment":"Constant line-height token for line-height 30","originalValue":"{!line-height-30}","name":"line-height-30"},{"category":"line-height","type":"number","value":"1.75rem","comment":"Constant line-height token for line-height 40","originalValue":"{!line-height-40}","name":"line-height-40"},{"category":"line-height","type":"number","value":"1.75rem","comment":"Constant line-height token for line-height 50","originalValue":"{!line-height-50}","name":"line-height-50"},{"category":"line-height","type":"number","value":"1.75rem","comment":"Constant line-height token for line-height 60","originalValue":"{!line-height-60}","name":"line-height-60"},{"category":"line-height","type":"number","value":"2rem","comment":"Constant line-height token for line-height 70","originalValue":"{!line-height-70}","name":"line-height-70"},{"category":"line-height","type":"number","value":"2.25rem","comment":"Constant line-height token for line-height 80","originalValue":"{!line-height-80}","name":"line-height-80"},{"category":"line-height","type":"number","value":"2.5rem","comment":"Constant line-height token for line-height 90","originalValue":"{!line-height-90}","name":"line-height-90"}]
  },
{
    "categoryName": "radii",
    "tokens": [{"type":"size","category":"radius","value":"0","comment":"Border radius reset","originalValue":"{!border-radius-0}","name":"border-radius-0"},{"type":"size","category":"radius","value":"3px","comment":"Small border radius","originalValue":"{!border-radius-10}","name":"border-radius-10"},{"type":"size","category":"radius","value":"4px","comment":"Large border radius","originalValue":"{!border-radius-20}","name":"border-radius-20"},{"type":"size","category":"radius","value":"8px","comment":"Larger border radius","originalValue":"{!border-radius-30}","name":"border-radius-30"},{"type":"size","category":"radius","value":"50%","comment":"Circular border radius","originalValue":"{!border-radius-circle}","name":"border-radius-circle"}]
  },
{
    "categoryName": "sizings",
    "tokens": [{"type":"size","category":"sizing","value":"0","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-0}","name":"size-0"},{"type":"size","category":"sizing","value":"5.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-10}","name":"size-10"},{"type":"size","category":"sizing","value":"64rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-100}","name":"size-100"},{"type":"size","category":"sizing","value":"70.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-110}","name":"size-110"},{"type":"size","category":"sizing","value":"77rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-120}","name":"size-120"},{"type":"size","category":"sizing","value":"12rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-20}","name":"size-20"},{"type":"size","category":"sizing","value":"18.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-30}","name":"size-30"},{"type":"size","category":"sizing","value":"25rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-40}","name":"size-40"},{"type":"size","category":"sizing","value":"31.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-50}","name":"size-50"},{"type":"size","category":"sizing","value":"38rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-60}","name":"size-60"},{"type":"size","category":"sizing","value":"44.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-70}","name":"size-70"},{"type":"size","category":"sizing","value":"51rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-80}","name":"size-80"},{"type":"size","category":"sizing","value":"57.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-90}","name":"size-90"},{"type":"size","category":"sizing","value":"1rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-10}","name":"size-icon-10"},{"type":"size","category":"sizing","value":"3.25rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-100}","name":"size-icon-100"},{"type":"size","category":"sizing","value":"3.75rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-110}","name":"size-icon-110"},{"type":"size","category":"sizing","value":"1.25rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-20}","name":"size-icon-20"},{"type":"size","category":"sizing","value":"1.5rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-30}","name":"size-icon-30"},{"type":"size","category":"sizing","value":"1.75rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-40}","name":"size-icon-40"},{"type":"size","category":"sizing","value":"1.75rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-50}","name":"size-icon-50"},{"type":"size","category":"sizing","value":"1.75rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-60}","name":"size-icon-60"},{"type":"size","category":"sizing","value":"2rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-70}","name":"size-icon-70"},{"type":"size","category":"sizing","value":"2.25rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-80}","name":"size-icon-80"},{"type":"size","category":"sizing","value":"2.5rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-90}","name":"size-icon-90"},{"type":"size","category":"sizing","value":"0","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-0}","name":"size-square-0"},{"type":"size","category":"sizing","value":"0.125rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-10}","name":"size-square-10"},{"type":"size","category":"sizing","value":"2.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-100}","name":"size-square-100"},{"type":"size","category":"sizing","value":"2.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-110}","name":"size-square-110"},{"type":"size","category":"sizing","value":"2.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-120}","name":"size-square-120"},{"type":"size","category":"sizing","value":"3rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-130}","name":"size-square-130"},{"type":"size","category":"sizing","value":"3.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-140}","name":"size-square-140"},{"type":"size","category":"sizing","value":"3.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-150}","name":"size-square-150"},{"type":"size","category":"sizing","value":"3.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-160}","name":"size-square-160"},{"type":"size","category":"sizing","value":"4rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-170}","name":"size-square-170"},{"type":"size","category":"sizing","value":"4.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-180}","name":"size-square-180"},{"type":"size","category":"sizing","value":"4.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-190}","name":"size-square-190"},{"type":"size","category":"sizing","value":"0.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-20}","name":"size-square-20"},{"type":"size","category":"sizing","value":"4.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-200}","name":"size-square-200"},{"type":"size","category":"sizing","value":"0.375rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-25}","name":"size-square-25"},{"type":"size","category":"sizing","value":"0.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-30}","name":"size-square-30"},{"type":"size","category":"sizing","value":"0.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-40}","name":"size-square-40"},{"type":"size","category":"sizing","value":"1rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-50}","name":"size-square-50"},{"type":"size","category":"sizing","value":"1.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-60}","name":"size-square-60"},{"type":"size","category":"sizing","value":"1.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-70}","name":"size-square-70"},{"type":"size","category":"sizing","value":"1.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-80}","name":"size-square-80"},{"type":"size","category":"sizing","value":"2rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-90}","name":"size-square-90"}]
  },
{
    "categoryName": "spacings",
    "tokens": [{"category":"spacing","type":"size","value":"0","originalValue":"{!space-0}","name":"space-0"},{"category":"spacing","type":"size","value":"0.125rem","originalValue":"{!space-10}","name":"space-10"},{"category":"spacing","type":"size","value":"2.25rem","originalValue":"{!space-100}","name":"space-100"},{"category":"spacing","type":"size","value":"2.5rem","originalValue":"{!space-110}","name":"space-110"},{"category":"spacing","type":"size","value":"2.75rem","originalValue":"{!space-120}","name":"space-120"},{"category":"spacing","type":"size","value":"3rem","originalValue":"{!space-130}","name":"space-130"},{"category":"spacing","type":"size","value":"3.25rem","originalValue":"{!space-140}","name":"space-140"},{"category":"spacing","type":"size","value":"3.5rem","originalValue":"{!space-150}","name":"space-150"},{"category":"spacing","type":"size","value":"3.75rem","originalValue":"{!space-160}","name":"space-160"},{"category":"spacing","type":"size","value":"4rem","originalValue":"{!space-170}","name":"space-170"},{"category":"spacing","type":"size","value":"4.25rem","originalValue":"{!space-180}","name":"space-180"},{"category":"spacing","type":"size","value":"4.5rem","originalValue":"{!space-190}","name":"space-190"},{"category":"spacing","type":"size","value":"0.25rem","originalValue":"{!space-20}","name":"space-20"},{"category":"spacing","type":"size","value":"4.75rem","originalValue":"{!space-200}","name":"space-200"},{"category":"spacing","type":"size","value":"0.5rem","originalValue":"{!space-30}","name":"space-30"},{"category":"spacing","type":"size","value":"0.75rem","originalValue":"{!space-40}","name":"space-40"},{"category":"spacing","type":"size","value":"1rem","originalValue":"{!space-50}","name":"space-50"},{"category":"spacing","type":"size","value":"1.25rem","originalValue":"{!space-60}","name":"space-60"},{"category":"spacing","type":"size","value":"1.5rem","originalValue":"{!space-70}","name":"space-70"},{"category":"spacing","type":"size","value":"1.75rem","originalValue":"{!space-80}","name":"space-80"},{"category":"spacing","type":"size","value":"2rem","originalValue":"{!space-90}","name":"space-90"}]
  },
{
    "categoryName": "text-colors",
    "tokens": [{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 94, 166)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 62, 130)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 44, 94)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(178, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(179, 211, 233)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
  },
{
    "categoryName": "z-indices",
    "tokens": [{"type":"z-index","category":"z-index","value":"0","originalValue":"{!z-index-0}","name":"z-index-0"},{"type":"z-index","category":"z-index","value":"10","originalValue":"{!z-index-10}","name":"z-index-10"},{"type":"z-index","category":"z-index","value":"20","originalValue":"{!z-index-20}","name":"z-index-20"},{"type":"z-index","category":"z-index","value":"30","originalValue":"{!z-index-30}","name":"z-index-30"},{"type":"z-index","category":"z-index","value":"40","originalValue":"{!z-index-40}","name":"z-index-40"},{"type":"z-index","category":"z-index","value":"50","originalValue":"{!z-index-50}","name":"z-index-50"},{"type":"z-index","category":"z-index","value":"60","originalValue":"{!z-index-60}","name":"z-index-60"},{"type":"z-index","category":"z-index","value":"70","originalValue":"{!z-index-70}","name":"z-index-70"},{"type":"z-index","category":"z-index","value":"80","originalValue":"{!z-index-80}","name":"z-index-80"},{"type":"z-index","category":"z-index","value":"90","originalValue":"{!z-index-90}","name":"z-index-90"}]
  }]
  }