$tokens-map: (
  /* Background color used for user avatars. */
  'color-background-user': (rgb(200, 175, 240)),
  /* Background color used for trial accounts. */
  'color-background-trial': (rgb(209, 250, 224)),
  /* Background color used for subaccounts. */
  'color-background-subaccount': (rgb(255, 241, 179)),
  /* Stronger background color used for primary actions or highlights. */
  'color-background-primary-stronger': (rgb(3, 11, 93)),
  /* Stronger background color used for destructive actions or highlights. */
  'color-background-destructive-stronger': (rgb(74, 11, 11)),
  /* Weaker background color used for primary actions or highlights. */
  'color-background-primary-weaker': (rgb(204, 228, 255)),
  /* Weaker background color used for destructive actions or highlights. */
  'color-background-destructive-weaker': (rgb(252, 207, 207)),
  /* Background color used for warning alerts and toasts. */
  'color-background-warning': (rgb(244, 124, 34)),
  /* Weakest background color used for warning alerts and toasts. */
  'color-background-warning-weakest': (rgb(254, 245, 238)),
  /* Strong inverse background color used for containers. */
  'color-background-inverse-strong': (rgb(57, 71, 98)),
  /* Background color used to represent a new status. */
  'color-background-new': (rgb(245, 240, 252)),
  /* Strong background color used for containers. */
  'color-background-strong': (rgb(225, 227, 234)),
  /* Weakest background color for indicating a new status. */
  'color-background-new-weakest': (rgb(250, 247, 253)),
  /* Background color used for destructive actions or highlights. */
  'color-background-destructive': (rgb(214, 31, 31)),
  /* Weak background color used for containers. */
  'color-background-weak': (rgb(249, 249, 250)),
  /* Background color used for primary actions or highlights. */
  'color-background-primary': (rgb(2, 99, 224)),
  /* Weakest background color used for primary actions or highlights. */
  'color-background-primary-weakest': (rgb(235, 244, 255)),
  /* Background color used to represent an entity or person as "busy". */
  'color-background-busy': (rgb(244, 124, 34)),
  /* Background color used for success alerts and toasts. */
  'color-background-success': (rgb(20, 176, 83)),
  /* Weakest background color used for destructive actions or highlights. */
  'color-background-destructive-weakest': (rgb(254, 236, 236)),
  /* Background color used to represent an entity or person as "offline". */
  'color-background-offline': (rgb(174, 178, 193)),
  /* Background color used for alternative striped rows. */
  'color-background-row-striped': (rgb(244, 244, 246)),
  /* Strongest background color used for primary actions or highlights. */
  'color-background-primary-strongest': (rgb(6, 3, 58)),
  /* Weakest background color used for success alerts and toasts. */
  'color-background-success-weakest': (rgb(237, 253, 243)),
  /* Strongest background color used for destructive actions or highlights. */
  'color-background-destructive-strongest': (rgb(49, 12, 12)),
  /* Strongest background color used for error alerts and toasts. */
  'color-background-error-strong': (rgb(117, 12, 12)),
  /* Strong primary brand background, accessible with inverse text. */
  'color-background-brand-strong': (rgb(3, 11, 93)),
  /* Primary brand background, accessible with inverse text. */
  'color-background-brand': (rgb(0, 20, 137)),
  /* Background color used for error alerts and toasts. */
  'color-background-error': (rgb(214, 31, 31)),
  /* Weakest background color used for neutral or default variants. */
  'color-background-neutral-weakest': (rgb(235, 244, 255)),
  /* Background color used to represent an entity or person as "available". */
  'color-background-available': (rgb(20, 176, 83)),
  /* Weakest background color used for error alerts and toasts. */
  'color-background-error-weakest': (rgb(254, 236, 236)),
  /* Background color used to represent required form fields. */
  'color-background-required': (rgb(235, 86, 86)),
  /* Strongest error background color */
  'color-background-error-strongest': (rgb(49, 12, 12)),
  /* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
  'color-background-decorative-40-weakest': (rgb(245, 240, 252)),
  /* Stronger inverse background color for any container. Must be used on color-background-body-inverse. */
  'color-background-inverse-stronger': (rgb(57, 71, 98)),
  /* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
  'color-background-decorative-30-weakest': (rgb(237, 253, 243)),
  /* Background color used for the main page body. */
  'color-background-body': (rgb(255, 255, 255)),
  /* Strong background color used for primary actions or highlights. */
  'color-background-primary-strong': (rgb(0, 20, 137)),
  /* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
  'color-background-decorative-20-weakest': (rgb(235, 244, 255)),
  /* Strong background color used for destructive actions or highlights. */
  'color-background-destructive-strong': (rgb(117, 12, 12)),
  /* Weak background color used for destructive actions or highlights. */
  'color-background-destructive-weak': (rgb(246, 177, 177)),
  /* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
  'color-background-decorative-10-weakest': (rgb(244, 244, 246)),
  /* Default background color for any container. */
  'color-background': (rgb(244, 244, 246)),
  /* Weak background color used for primary actions or highlights. */
  'color-background-primary-weak': (rgb(153, 205, 255)),
  /* Stronger background color used for containers. */
  'color-background-stronger': (rgb(136, 145, 170)),
  /* Highlight brand background, accessible with black text. */
  'color-background-brand-highlight': (rgb(242, 47, 70)),
  /* Weakest background color used for brand highlights. */
  'color-background-brand-highlight-weakest': (rgba(242, 47, 70, 0.1)),
  /* Strongest background color used for containers. */
  'color-background-strongest': (rgb(75, 86, 113)),
  /* Inverse background color used for the main page body. */
  'color-background-body-inverse': (rgb(18, 28, 45)),
  /* Inverse background color used for containers. */
  'color-background-inverse': (rgb(31, 48, 76)),
  /* Background color used for overlays. */
  'color-background-overlay': (rgba(6, 3, 58, 0.4)),
  /* Background color used to represent an entity or person as "unavailable". */
  'color-background-unavailable': (rgb(214, 31, 31)),
  /* Stronger error background color */
  'color-background-error-stronger': (rgb(74, 11, 11)),
  /* Stronger primary brand background, accessible with inverse text. */
  'color-background-brand-stronger': (rgb(6, 3, 58)),
  /* Stronger error border color */
  'color-border-error-stronger': (rgb(74, 11, 11)),
  /* Weak warning border color */
  'color-border-warning-weak': (rgb(255, 179, 122)),
  /* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
  'color-border-decorative-40-weaker': (rgb(231, 220, 250)),
  /* Weaker error border color */
  'color-border-error-weaker': (rgb(252, 207, 207)),
  /* User avatar border color. */
  'color-border-user': (rgb(231, 220, 250)),
  /* Weaker neutral border color */
  'color-border-neutral-weaker': (rgb(204, 228, 255)),
  /* Warning border color */
  'color-border-warning': (rgb(244, 124, 34)),
  /* Weaker success border color */
  'color-border-success-weaker': (rgb(209, 250, 224)),
  /* Stronger primary border color */
  'color-border-primary-stronger': (rgb(3, 11, 93)),
  /* Stronger destructive hover border color */
  'color-border-destructive-stronger': (rgb(74, 11, 11)),
  /* Weakest warning border color */
  'color-border-warning-weakest': (rgb(254, 245, 238)),
  /* Weaker primary border color */
  'color-border-primary-weaker': (rgb(204, 228, 255)),
  /* Destructive focus border color */
  'color-border-destructive-weaker': (rgb(252, 207, 207)),
  /* Weaker border color for something designated as new */
  'color-border-new-weaker': (rgb(231, 220, 250)),
  /* Destructive border color */
  'color-border-destructive': (rgb(214, 31, 31)),
  /* Strong border on inverse backgrounds. Must be used on color-background-body-inverse. */
  'color-border-inverse-strong': (rgb(225, 227, 234)),
  /* Primary border color */
  'color-border-primary': (rgb(2, 99, 224)),
  /* Weakest primary border color */
  'color-border-primary-weakest': (rgb(235, 244, 255)),
  /* Success border color */
  'color-border-success': (rgb(20, 176, 83)),
  /* Destructive focus border color */
  'color-border-destructive-weakest': (rgb(254, 236, 236)),
  /* Strongest destructive hover border color */
  'color-border-destructive-strongest': (rgb(49, 12, 12)),
  /* Strongest primary border color */
  'color-border-primary-strongest': (rgb(6, 3, 58)),
  /* Weakest success border color */
  'color-border-success-weakest': (rgb(237, 253, 243)),
  /* Weaker warning border color */
  'color-border-warning-weaker': (rgb(253, 220, 196)),
  /* Strong border color */
  'color-border-strong': (rgb(96, 107, 133)),
  /* Weak border color */
  'color-border-weak': (rgb(202, 205, 216)),
  /* Neutral border color */
  'color-border-neutral': (rgb(2, 99, 224)),
  /* Error border color */
  'color-border-error': (rgb(214, 31, 31)),
  /* Weakest error border color */
  'color-border-error-weakest': (rgb(254, 236, 236)),
  /* Strongest error border color */
  'color-border-error-strongest': (rgb(49, 12, 12)),
  /* Strong error border color */
  'color-border-error-strong': (rgb(117, 12, 12)),
  /* Weak error border color */
  'color-border-error-weak': (rgb(245, 138, 138)),
  /* Weak neutral border color */
  'color-border-neutral-weak': (rgb(102, 179, 255)),
  /* Default border color */
  'color-border': (rgb(136, 145, 170)),
  /* Stronger border on inverse backgrounds. Must be used on color-background-body-inverse. */
  'color-border-inverse-stronger': (rgb(244, 244, 246)),
  /* Weaker border on inverse backgrounds. Must be used on color-background-body-inverse. */
  'color-border-inverse-weaker': (rgb(57, 71, 98)),
  /* Weak success border color */
  'color-border-success-weak': (rgb(54, 213, 118)),
  /* Strong primary border color */
  'color-border-primary-strong': (rgb(0, 20, 137)),
  /* Border on inverse backgrounds. Must be used on color-background-body-inverse. */
  'color-border-inverse': (rgb(136, 145, 170)),
  /* Destructive focus border color */
  'color-border-destructive-strong': (rgb(117, 12, 12)),
  /* Weak primary border color */
  'color-border-primary-weak': (rgb(153, 205, 255)),
  /* Weakest border on inverse backgrounds. Must be used on color-background-body-inverse. */
  'color-border-inverse-weakest': (rgb(31, 48, 76)),
  /* Destructive focus border color */
  'color-border-destructive-weak': (rgb(246, 177, 177)),
  /* Strongest border on inverse backgrounds. Must be used on color-background-body-inverse. */
  'color-border-inverse-strongest': (rgb(255, 255, 255)),
  /* Weaker border color */
  'color-border-weaker': (rgb(225, 227, 234)),
  /* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
  'color-border-decorative-10-weaker': (rgb(225, 227, 234)),
  /* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
  'color-border-decorative-20-weaker': (rgb(204, 228, 255)),
  /* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
  'color-border-decorative-30-weaker': (rgb(209, 250, 224)),
  /* Border radius reset */
  'border-radius-0': (0),
  /* Small border radius */
  'border-radius-10': (2px),
  /* Large border radius */
  'border-radius-20': (4px),
  /* Larger border radius */
  'border-radius-30': (8px),
  /* Circular border radius */
  'border-radius-circle': (50%),
  /* Pill border radius */
  'border-radius-pill': (100px),
  /* Border width reset */
  'border-width-0': (0),
  /* Constant border width token for border width 10 */
  'border-width-10': (1px),
  /* Constant border width token for border width 20 */
  'border-width-20': (2px),
  /* Constant border width token for border width 30 */
  'border-width-30': (4px),
  /* Constant border width token for border width 40 */
  'border-width-40': (8px),
  /* Weaker bottom shadow border for new status */
  'shadow-border-bottom-new-weaker': (0 1px 0 #e7dcfa),
  /* Default shadow. */
  'shadow': (0 4px 16px 0 rgba(18, 28, 45, 0.2)),
  /* Strong shadow border for destructive interactions */
  'shadow-border-destructive-stronger': (0 0 0 1px #4a0b0b),
  /* Weaker shadow border for success inputs. */
  'shadow-border-success-weaker': (0 0 0 1px #d1fae0),
  /* Stronger shadow border for inputs active. */
  'shadow-border-primary-stronger': (0 0 0 1px #030b5d),
  /* Weaker bottom shadow border for warning status */
  'shadow-border-bottom-warning-weaker': (0 1px 0 #fddcc4),
  /* Weaker shadow border for destructive interactions. */
  'shadow-border-destructive-weaker': (0 0 0 1px #fccfcf),
  /* Weaker shadow border for primary interactions. */
  'shadow-border-primary-weaker': (0 0 0 1px #cce4ff),
  /* Weaker shadow border for new status inputs. */
  'shadow-border-new-weaker': (0 0 0 1px #e7dcfa),
  /* Low elevation default shadow. */
  'shadow-low': (0 2px 8px 0 rgba(18, 28, 45, 0.1)),
  /* Strong shadow border on interactive elements on inverse backgrounds. */
  'shadow-border-inverse-strong': (0 0 0 1px #e1e3ea),
  /* Weaker shadow border for warning inputs. */
  'shadow-border-warning-weaker': (0 0 0 1px #fddcc4),
  /* Strong shadow border for inputs. */
  'shadow-border-strong': (0 0 0 1px #606b85),
  /* Shadow for focus ring on interactive elements. */
  'shadow-focus': (0 0 0 4px rgba(2, 99, 224, 0.7)),
  /* Weak shadow border for disabled inputs. */
  'shadow-border-weak': (0 0 0 1px #cacdd8),
  /* Shadow for focus ring on interactive elements on inverse backgrounds. */
  'shadow-focus-inverse': (0 0 0 4px rgba(255, 255, 255, 0.4)),
  /* Default shadow border for primary interactions. */
  'shadow-border-primary': (0 0 0 1px #0263e0),
  /* Shadow border for destructive interactions. */
  'shadow-border-destructive': (0 0 0 1px #d61f1f),
  /* High elevation default shadow. */
  'shadow-high': (0 16px 24px 0 rgba(18, 28, 45, 0.2)),
  /* Shadow border for error inputs hover. */
  'shadow-border-error-strong': (0 0 0 1px #750c0c),
  /* Strongest shadow border for inputs active. */
  'shadow-border-primary-strongest': (0 0 0 1px #06033a),
  /* Strongest shadow border for destructive interactions */
  'shadow-border-destructive-strongest': (0 0 0 1px #310c0c),
  /* Shadow border for inverse error inputs. */
  'shadow-border-error-weak': (0 0 0 1px #eb5656),
  /* Shadow border for error inputs. */
  'shadow-border-error': (0 0 0 1px #d61f1f),
  /* Weaker bottom shadow border for decorative 10 */
  'shadow-border-bottom-decorative-10-weaker': (0 1px 0 #e1e3ea),
  /* Bottom shadow border for primary status */
  'shadow-border-bottom-primary': (0 1px 0 #006dfa),
  /* Weaker bottom shadow border for decorative 20 */
  'shadow-border-bottom-decorative-20-weaker': (0 1px 0 #cce4ff),
  /* Stronger shadow border on interactive elements on inverse backgrounds. */
  'shadow-border-inverse-stronger': (0 0 0 1px #f4f4f6),
  /* Strongest shadow border for error inputs hover. */
  'shadow-border-error-strongest': (0 0 0 1px #310c0c),
  /* Strong shadow border for destructive interactions */
  'shadow-border-destructive-strong': (0 0 0 1px #750c0c),
  /* Weaker shadow border on interactive elements on inverse backgrounds. */
  'shadow-border-inverse-weaker': (0 0 0 1px #394762),
  /* Weaker bottom shadow border for decorative 30 */
  'shadow-border-bottom-decorative-30-weaker': (0 1px 0 #d1fae0),
  /* Strong shadow border for inputs hover. */
  'shadow-border-primary-strong': (0 0 0 1px #001489),
  /* Weaker shadow border for primary interactions. */
  'shadow-border-primary-weak': (0 0 0 1px #99cdff),
  /* Shadow for simultaneous focus and border */
  'shadow-focus-shadow-border': (0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa),
  /* Weaker bottom shadow border for decorative 40 */
  'shadow-border-bottom-decorative-40-weaker': (0 1px 0 #e7dcfa),
  /* Weak shadow border for destructive interactions. */
  'shadow-border-destructive-weak': (0 0 0 1px #f6b1b1),
  /* Weaker bottom shadow border for error status */
  'shadow-border-bottom-error-weaker': (0 1px 0 #fccfcf),
  /* Weaker shadow border for disabled inputs. */
  'shadow-border-weaker': (0 0 0 1px #e1e3ea),
  /* Shadow border for inputs. */
  'shadow-border': (0 0 0 1px #8891aa),
  /* Weaker bottom shadow border for neutral status */
  'shadow-border-bottom-neutral-weaker': (0 1px 0 #cce4ff),
  /* Weaker shadow border for decorative 10 */
  'shadow-border-decorative-10-weaker': (0 0 0 1px #e1e3ea),
  /* Weaker shadow border for decorative 20 */
  'shadow-border-decorative-20-weaker': (0 0 0 1px #cce4ff),
  /* Shadow for inset focus on elements, such as DataGrid cells. */
  'shadow-focus-inset': (inset 0 0 0 2px rgba(2, 99, 224, 0.7)),
  /* Shadow border on interactive elements on inverse backgrounds. */
  'shadow-border-inverse': (0 0 0 1px #8891aa),
  /* Weaker shadow border for decorative 30 */
  'shadow-border-decorative-30-weaker': (0 0 0 1px #d1fae0),
  /* Weakest shadow border on interactive elements on inverse backgrounds. */
  'shadow-border-inverse-weakest': (0 0 0 1px #1f304c),
  /* Weaker bottom shadow border for success status */
  'shadow-border-bottom-success-weaker': (0 1px 0 #d1fae0),
  /* Weaker shadow border for decorative 40 */
  'shadow-border-decorative-40-weaker': (0 0 0 1px #e7dcfa),
  /* Shadow border for error inputs hover. */
  'shadow-border-error-stronger': (0 0 0 1px #4a0b0b),
  /* Shadow for cards. */
  'shadow-card': (0 2px 8px 0 rgba(18, 28, 45, 0.1)),
  /* Weaker shadow border for error inputs. */
  'shadow-border-error-weaker': (0 0 0 1px #fccfcf),
  /* Strongest shadow border on interactive elements on inverse backgrounds. */
  'shadow-border-inverse-strongest': (0 0 0 1px #ffffff),
  /* Shadow border for user. */
  'shadow-border-user': (#c8aff0),
  /* Weaker shadow border for neutral inputs. */
  'shadow-border-neutral-weaker': (0 0 0 1px #cce4ff),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-10': (rgb(235, 86, 86)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-1': (rgb(0, 20, 137)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-2': (rgb(14, 124, 58)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-3': (rgb(13, 58, 31)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-4': (rgb(0, 140, 255)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-5': (rgb(57, 71, 98)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-6': (rgb(166, 127, 227)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-7': (rgb(109, 46, 209)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-8': (rgb(136, 145, 170)),
  /* Color used for data visualizations. Must be used in a sequence. */
  'color-data-visualization-9': (rgb(117, 12, 12)),
  'font-family-text': ('Colfax', Helvetica, Arial, sans-serif),
  'font-family-code': ('TwilioSansMono', Courier, monospace),
  'font-family-text-japanese': ('Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif),
  'font-family-text-korean': ('Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif),
  'font-family-text-chinese-traditional': ('Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif),
  'font-family-text-chinese-simplified': ('Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif),
  'font-family-display': ('Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif),
  /* Constant typography token for font size 110 */
  'font-size-110': (3rem),
  /* Constant typography token for font size 100 */
  'font-size-100': (2.5rem),
  /* Constant typography token for font size 90 */
  'font-size-90': (2rem),
  /* Constant typography token for font size 80 */
  'font-size-80': (1.75rem),
  /* Constant typography token for font size 70 */
  'font-size-70': (1.5rem),
  /* Constant typography token for font size 60 */
  'font-size-60': (1.25rem),
  /* Constant typography token for font size 50 */
  'font-size-50': (1.125rem),
  /* Constant typography token for font size 40 */
  'font-size-40': (1rem),
  /* Constant typography token for font size 30 */
  'font-size-30': (0.875rem),
  /* Constant typography token for font size 20 */
  'font-size-20': (0.75rem),
  /* Constant typography token for font size 10 */
  'font-size-10': (0.625rem),
  /* Constant typography token for font size display 30 */
  'font-size-display-30': (4rem),
  /* Constant typography token for font size display 20 */
  'font-size-display-20': (3rem),
  /* Constant typography token for font size display 10 */
  'font-size-display-10': (2rem),
  /* Base font size applied to the html element, used for rem calculations */
  'font-size-base': (100%),
  /* Font weight for light weight */
  'font-weight-light': (400),
  /* Font weight for normal weight */
  'font-weight-normal': (400),
  /* Font weight for medium weight */
  'font-weight-medium': (500),
  /* Font weight for semibold weight */
  'font-weight-semibold': (600),
  /* Font weight for bold weight */
  'font-weight-bold': (700),
  /* Font weight for extrabold weight */
  'font-weight-extrabold': (800),
  /* Constant line-height token for line-height 0 */
  'line-height-0': (0),
  /* Constant line-height token for line-height 110 */
  'line-height-110': (4rem),
  /* Constant line-height token for line-height 90 */
  'line-height-90': (2.75rem),
  /* Constant line-height token for line-height 100 */
  'line-height-100': (3.25rem),
  /* Constant line-height token for line-height 80 */
  'line-height-80': (2.5rem),
  /* Constant line-height token for line-height 70 */
  'line-height-70': (2rem),
  /* Constant line-height token for line-height 60 */
  'line-height-60': (1.75rem),
  /* Constant line-height token for line-height 50 */
  'line-height-50': (1.75rem),
  /* Constant line-height token for line-height 40 */
  'line-height-40': (1.5rem),
  /* Constant line-height token for line-height 30 */
  'line-height-30': (1.25rem),
  /* Constant line-height token for line-height 20 */
  'line-height-20': (1.25rem),
  /* Constant line-height token for line-height 10 */
  'line-height-10': (1rem),
  /* Constant line-height token for line-height 05 */
  'line-height-05': (0.75rem),
  /* Constant line-height token for line-height-display 30 */
  'line-height-display-30': (5rem),
  /* Constant line-height token for line-height-display 20 */
  'line-height-display-20': (3.75rem),
  /* Constant line-height token for line-height-display 10 */
  'line-height-display-10': (2.5rem),
  /* Twilio brand red */
  'color-brand-highlight': (rgb(242, 47, 70)),
  /* Gray Color 0 */
  'color-gray-0': (rgb(255, 255, 255)),
  /* Gray Color 10 */
  'color-gray-100': (rgb(18, 28, 45)),
  /* Gray Color 9 */
  'color-gray-90': (rgb(31, 48, 76)),
  /* Gray Color 8 */
  'color-gray-80': (rgb(57, 71, 98)),
  /* Gray Color 7 */
  'color-gray-70': (rgb(75, 86, 113)),
  /* Gray Color 6 */
  'color-gray-60': (rgb(96, 107, 133)),
  /* Gray Color 5 */
  'color-gray-50': (rgb(136, 145, 170)),
  /* Gray Color 4 */
  'color-gray-40': (rgb(174, 178, 193)),
  /* Default branding color */
  'color-brand': (rgb(0, 20, 137)),
  /* Gray Color 3 */
  'color-gray-30': (rgb(202, 205, 216)),
  /* Gray Color 2 */
  'color-gray-20': (rgb(225, 227, 234)),
  /* Gray Color 1 */
  'color-gray-10': (rgb(244, 244, 246)),
  /* Generic square sizing token scale for UI components. */
  'size-square-40': (0.75rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-80': (2.5rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-30': (0.5rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-70': (2rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-20': (0.25rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-60': (1.75rem),
  /* Generic sizing token scale for UI components. */
  'size-90': (57.5rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-10': (0.125rem),
  /* Generic sizing token scale for UI components. */
  'size-120': (77rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-50': (1.75rem),
  /* Generic sizing token scale for UI components. */
  'size-80': (51rem),
  /* Generic sizing token scale for UI components. */
  'size-0': (0),
  /* Generic sizing token scale for UI components. */
  'size-110': (70.5rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-40': (1.5rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-190': (4.5rem),
  /* Generic sizing token scale for UI components. */
  'size-70': (44.5rem),
  /* Generic sizing token scale for UI components. */
  'size-100': (64rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-30': (1.25rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-180': (4.25rem),
  /* Generic sizing token scale for UI components. */
  'size-60': (38rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-20': (1.25rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-170': (4rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-10': (1rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-25': (0.375rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-160': (3.75rem),
  /* Generic sizing token scale for UI components. */
  'size-50': (31.5rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-110': (4rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-150': (3.5rem),
  /* Generic sizing token scale for UI components. */
  'size-40': (25rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-100': (3.25rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-140': (3.25rem),
  /* Generic sizing token scale for UI components. */
  'size-30': (18.5rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-130': (3rem),
  /* Generic sizing token scale for UI components. */
  'size-20': (12rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-120': (2.75rem),
  /* Generic sizing token scale for UI components. */
  'size-10': (5.5rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-110': (2.5rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-0': (0),
  /* Maps to line-height tokens 1:1 */
  'size-icon-05': (0.75rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-100': (2.25rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-200': (4.75rem),
  /* Sizing token for sidebar width. */
  'size-sidebar': (13.75rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-90': (2rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-80': (1.75rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-70': (1.5rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-60': (1.25rem),
  /* Generic square sizing token scale for UI components. */
  'size-square-50': (1rem),
  /* Maps to line-height tokens 1:1 */
  'size-icon-90': (2.75rem),
  'space-70': (1.5rem),
  'space-negative-100': (-2.25rem),
  'space-60': (1.25rem),
  'space-negative-200': (-4.75rem),
  'space-190': (4.5rem),
  'space-50': (1rem),
  'space-180': (4.25rem),
  'space-40': (0.75rem),
  'space-170': (4rem),
  'space-30': (0.5rem),
  'space-160': (3.75rem),
  'space-20': (0.25rem),
  'space-150': (3.5rem),
  'space-10': (0.125rem),
  'space-140': (3.25rem),
  'space-130': (3rem),
  'space-120': (2.75rem),
  'space-negative-90': (-2rem),
  'space-110': (2.5rem),
  'space-0': (0),
  'space-negative-80': (-1.75rem),
  'space-100': (2.25rem),
  'space-negative-70': (-1.5rem),
  'space-200': (4.75rem),
  'space-negative-60': (-1.25rem),
  'space-negative-50': (-1rem),
  'space-negative-40': (-0.75rem),
  'space-negative-30': (-0.5rem),
  'space-negative-20': (-0.25rem),
  'space-negative-10': (-0.125rem),
  'space-negative-190': (-4.5rem),
  'space-negative-180': (-4.25rem),
  'space-negative-170': (-4rem),
  'space-negative-160': (-3.75rem),
  'space-negative-150': (-3.5rem),
  'space-negative-140': (-3.25rem),
  'space-negative-130': (-3rem),
  'space-90': (2rem),
  'space-negative-120': (-2.75rem),
  'space-80': (1.75rem),
  'space-negative-110': (-2.5rem),
  /* Weak shade of destructive link text to be used in interactions */
  'color-text-link-destructive-weak': (rgb(246, 177, 177)),
  /* Stronger shade of link text to be used in interactions */
  'color-text-link-stronger': (rgb(3, 11, 93)),
  /* Text color for user avatar. */
  'color-text-user': (rgb(18, 28, 45)),
  /* Icon color for indicating a new status. */
  'color-text-icon-new': (rgb(109, 46, 209)),
  /* Icon color for indicating a offline status */
  'color-text-icon-offline': (rgb(96, 107, 133)),
  /* Destructive link text */
  'color-text-link-destructive': (rgb(214, 31, 31)),
  /* Stronger primary text. */
  'color-text-primary-stronger': (rgb(3, 11, 93)),
  /* Icon color for indicating success. */
  'color-text-icon-success': (rgb(14, 124, 58)),
  /* Color for warning text. */
  'color-text-warning': (rgb(141, 49, 24)),
  /* Strongest shade of destructive link text to be used in interactions */
  'color-text-link-destructive-strongest': (rgb(49, 12, 12)),
  /* Icon color for being neutral. */
  'color-text-icon-neutral': (rgb(0, 20, 137)),
  /* Color for text indicating a new status. */
  'color-text-new': (rgb(109, 46, 209)),
  /* Icon color for indicating an error. */
  'color-text-icon-error': (rgb(214, 31, 31)),
  /* Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
  'color-text-inverse-weak': (rgb(174, 178, 193)),
  /* Icon color for indicating a available status */
  'color-text-icon-available': (rgb(14, 124, 58)),
  /* Stronger shade of destructive link text to be used in interactions */
  'color-text-link-destructive-stronger': (rgb(74, 11, 11)),
  /* Twilio brand icon color used for the Twilio logo on inverse backgrounds. */
  'color-text-icon-brand-inverse': (rgb(255, 255, 255)),
  /* Primary text. */
  'color-text-primary': (rgb(2, 99, 224)),
  /* Text color for success text. */
  'color-text-success': (rgb(14, 124, 58)),
  /* Weak body text for visual hierarchy. */
  'color-text-weak': (rgb(96, 107, 133)),
  /* Strongest primary text. */
  'color-text-primary-strongest': (rgb(6, 3, 58)),
  /* Default icon color. */
  'color-text-icon': (rgb(96, 107, 133)),
  /* Link text */
  'color-text-link': (rgb(2, 99, 224)),
  /* Twilio brand red icon color used for the Twilio logo. */
  'color-text-icon-brand-highlight': (rgb(242, 47, 70)),
  /* Color for text indicating a neutral status. */
  'color-text-neutral': (rgb(0, 20, 137)),
  /* Strongest shade of link text to be used in interactions */
  'color-text-link-strongest': (rgb(6, 3, 58)),
  /* Error text for inputs and error misc */
  'color-text-error': (rgb(214, 31, 31)),
  /* Default icon color for inverse backgrounds. */
  'color-text-icon-inverse': (rgb(136, 145, 170)),
  /* Strong error text for inputs and error misc */
  'color-text-error-strong': (rgb(173, 17, 17)),
  /* Icon color for indicating a unavailable status */
  'color-text-icon-unavailable': (rgb(214, 31, 31)),
  /* Weak error text for inputs and error misc */
  'color-text-error-weak': (rgb(235, 86, 86)),
  /* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
  'color-text-decorative-40': (rgb(109, 46, 209)),
  /* Strong shade of link text to be used in interactions */
  'color-text-link-strong': (rgb(0, 20, 137)),
  /* Text color used on any brand color */
  'color-text-brand-inverse': (rgb(255, 255, 255)),
  /* Strongest error text for inputs and error misc. */
  'color-text-error-strongest': (rgb(49, 12, 12)),
  /* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
  'color-text-decorative-30': (rgb(14, 124, 58)),
  /* Weak shade of link text to be used in interactions */
  'color-text-link-weak': (rgb(153, 205, 255)),
  /* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
  'color-text-decorative-20': (rgb(0, 20, 137)),
  /* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
  'color-text-decorative-10': (rgb(96, 107, 133)),
  /* Body text color */
  'color-text': (rgb(18, 28, 45)),
  /* Icon color for indicating a busy status */
  'color-text-icon-busy': (rgb(227, 106, 25)),
  /* Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls. */
  'color-text-weakest': (rgb(255, 255, 255)),
  /* Twilio brand red, accessible on large text only. */
  'color-text-brand-highlight': (rgb(242, 47, 70)),
  /* Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
  'color-text-inverse-weaker': (rgb(96, 107, 133)),
  /* Strong primary text. */
  'color-text-primary-strong': (rgb(0, 20, 137)),
  /* Weak primary text. */
  'color-text-primary-weak': (rgb(153, 205, 255)),
  /* Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
  'color-text-inverse': (rgb(255, 255, 255)),
  /* Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls. */
  'color-text-weaker': (rgb(174, 178, 193)),
  /* Color for dark warning text. */
  'color-text-warning-strong': (rgb(141, 49, 24)),
  /* Icon color for indicating a warning. */
  'color-text-icon-warning': (rgb(227, 106, 25)),
  /* Stronger error text for inputs and error misc */
  'color-text-error-stronger': (rgb(74, 11, 11)),
  /* Strong shade of destructive link text to be used in interactions */
  'color-text-link-destructive-strong': (rgb(173, 17, 17)),
  'z-index-0': (0),
  'z-index-90': (90),
  'z-index-80': (80),
  'z-index-70': (70),
  'z-index-60': (60),
  'z-index-50': (50),
  'z-index-40': (40),
  'z-index-30': (30),
  'z-index-20': (20),
  'z-index-10': (10),
  'color-scheme': ("light"),
);