declare const Tokens: { "tokens":{"background-colors": [ { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Default background color for any container."; name: "color-background"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(20, 176, 83)"; comment: "Background color used to represent an entity or person as \"available\"."; name: "color-background-available"; altValue: "#14B053"; }, { type: "color"; category: "background-color"; value: "rgb(13, 19, 28)"; comment: "Background color used for the main page body."; name: "color-background-body"; altValue: "#0D131C"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Inverse background color used for the main page body."; name: "color-background-body-inverse"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Primary brand background, accessible with inverse text."; name: "color-background-brand"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(242, 47, 70)"; comment: "Highlight brand background, accessible with black text."; name: "color-background-brand-highlight"; altValue: "#F22F46"; }, { type: "color"; category: "background-color"; value: "rgba(242, 47, 70, 0.1)"; comment: "Weakest background color used for brand highlights."; name: "color-background-brand-highlight-weakest"; altValue: "#F22F461A"; }, { type: "color"; category: "background-color"; value: "rgb(31, 48, 76)"; comment: "Strong primary brand background, accessible with inverse text."; name: "color-background-brand-strong"; altValue: "#1F304C"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Stronger primary brand background, accessible with inverse text."; name: "color-background-brand-stronger"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(244, 124, 34)"; comment: "Background color used to represent an entity or person as \"busy\"."; name: "color-background-busy"; altValue: "#F47C22"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."; name: "color-background-decorative-10-weakest"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(3, 11, 93)"; comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."; name: "color-background-decorative-20-weakest"; altValue: "#030B5D"; }, { type: "color"; category: "background-color"; value: "rgb(5, 41, 18)"; comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."; name: "color-background-decorative-30-weakest"; altValue: "#052912"; }, { type: "color"; category: "background-color"; value: "rgb(56, 14, 120)"; comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."; name: "color-background-decorative-40-weakest"; altValue: "#380E78"; }, { type: "color"; category: "background-color"; value: "rgb(214, 31, 31)"; comment: "Background color used for destructive actions or highlights."; name: "color-background-destructive"; altValue: "#D61F1F"; }, { type: "color"; category: "background-color"; value: "rgb(246, 177, 177)"; comment: "Strong background color used for destructive actions or highlights."; name: "color-background-destructive-strong"; altValue: "#F6B1B1"; }, { type: "color"; category: "background-color"; value: "rgb(252, 207, 207)"; comment: "Stronger background color used for destructive actions or highlights."; name: "color-background-destructive-stronger"; altValue: "#FCCFCF"; }, { type: "color"; category: "background-color"; value: "rgb(254, 236, 236)"; comment: "Strongest background color used for destructive actions or highlights."; name: "color-background-destructive-strongest"; altValue: "#FEECEC"; }, { type: "color"; category: "background-color"; value: "rgb(57, 71, 98)"; comment: "Weak background color used for destructive actions or highlights."; name: "color-background-destructive-weak"; altValue: "#394762"; }, { type: "color"; category: "background-color"; value: "rgb(31, 48, 76)"; comment: "Weaker background color used for destructive actions or highlights."; name: "color-background-destructive-weaker"; altValue: "#1F304C"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Weakest background color used for destructive actions or highlights."; name: "color-background-destructive-weakest"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(214, 31, 31)"; comment: "Error background color."; name: "color-background-error"; altValue: "#D61F1F"; }, { type: "color"; category: "background-color"; value: "rgb(245, 138, 138)"; comment: "Strong error background color."; name: "color-background-error-strong"; altValue: "#F58A8A"; }, { type: "color"; category: "background-color"; value: "rgb(252, 207, 207)"; comment: "Stronger error background color."; name: "color-background-error-stronger"; altValue: "#FCCFCF"; }, { type: "color"; category: "background-color"; value: "rgb(254, 236, 236)"; comment: "Strongest error background color."; name: "color-background-error-strongest"; altValue: "#FEECEC"; }, { type: "color"; category: "background-color"; value: "rgb(49, 12, 12)"; comment: "Weakest error background color."; name: "color-background-error-weakest"; altValue: "#310C0C"; }, { type: "color"; category: "background-color"; value: "rgb(31, 48, 76)"; comment: "Inverse background color for any container. Must be used on color-background-body-inverse."; name: "color-background-inverse"; altValue: "#1F304C"; }, { type: "color"; category: "background-color"; value: "rgb(57, 71, 98)"; comment: "Strong inverse background color for any container. Must be used on color-background-body-inverse."; name: "color-background-inverse-strong"; altValue: "#394762"; }, { type: "color"; category: "background-color"; value: "rgb(57, 71, 98)"; comment: "Stronger inverse background color for any container. Must be used on color-background-body-inverse."; name: "color-background-inverse-stronger"; altValue: "#394762"; }, { type: "color"; category: "background-color"; value: "rgb(3, 11, 93)"; comment: "Weakest neutral background color."; name: "color-background-neutral-weakest"; altValue: "#030B5D"; }, { type: "color"; category: "background-color"; value: "rgb(56, 14, 120)"; comment: "Background color for indicating a new status."; name: "color-background-new"; altValue: "#380E78"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Weakest background color for indicating a new status."; name: "color-background-new-weakest"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(174, 178, 193)"; comment: "Color used to represent an entity or person as \"offline\"."; name: "color-background-offline"; altValue: "#AEB2C1"; }, { type: "color"; category: "background-color"; value: "rgba(18, 28, 45, 0.9)"; comment: "Default background for overlays."; name: "color-background-overlay"; altValue: "#121C2DE6"; }, { type: "color"; category: "background-color"; value: "rgb(2, 99, 224)"; comment: "Background for primary actions or highlights."; name: "color-background-primary"; altValue: "#0263E0"; }, { type: "color"; category: "background-color"; value: "rgb(153, 205, 255)"; comment: "Strong background for primary actions or highlights."; name: "color-background-primary-strong"; altValue: "#99CDFF"; }, { type: "color"; category: "background-color"; value: "rgb(204, 228, 255)"; comment: "Stronger background for primary actions or highlights."; name: "color-background-primary-stronger"; altValue: "#CCE4FF"; }, { type: "color"; category: "background-color"; value: "rgb(235, 244, 255)"; comment: "Strongest background for primary actions or highlights."; name: "color-background-primary-strongest"; altValue: "#EBF4FF"; }, { type: "color"; category: "background-color"; value: "rgb(57, 71, 98)"; comment: "Weak background for primary actions or highlights."; name: "color-background-primary-weak"; altValue: "#394762"; }, { type: "color"; category: "background-color"; value: "rgb(31, 48, 76)"; comment: "Weaker background for primary actions or highlights."; name: "color-background-primary-weaker"; altValue: "#1F304C"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Weakest background for primary actions or highlights."; name: "color-background-primary-weakest"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(235, 86, 86)"; comment: "Background color used to represent required form fields."; name: "color-background-required"; altValue: "#EB5656"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Background color for alternative striped rows."; name: "color-background-row-striped"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(31, 48, 76)"; comment: "Strong default background color."; name: "color-background-strong"; altValue: "#1F304C"; }, { type: "color"; category: "background-color"; value: "rgb(96, 107, 133)"; comment: "Stronger default background color."; name: "color-background-stronger"; altValue: "#606B85"; }, { type: "color"; category: "background-color"; value: "rgb(225, 227, 234)"; comment: "Strongest default background color."; name: "color-background-strongest"; altValue: "#E1E3EA"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Subaccount background color."; name: "color-background-subaccount"; altValue: "#121C2D"; }, { type: "color"; category: "background-color"; value: "rgb(20, 176, 83)"; comment: "Success background color."; name: "color-background-success"; altValue: "#14B053"; }, { type: "color"; category: "background-color"; value: "rgb(5, 41, 18)"; comment: "Weakest success background color."; name: "color-background-success-weakest"; altValue: "#052912"; }, { type: "color"; category: "background-color"; value: "rgb(5, 41, 18)"; comment: "Trial account background color."; name: "color-background-trial"; altValue: "#052912"; }, { type: "color"; category: "background-color"; value: "rgb(214, 31, 31)"; comment: "Color used to represent an entity or person as \"unavailable\"."; name: "color-background-unavailable"; altValue: "#D61F1F"; }, { type: "color"; category: "background-color"; value: "rgb(88, 23, 189)"; comment: "User avatar background color."; name: "color-background-user"; altValue: "#5817BD"; }, { type: "color"; category: "background-color"; value: "rgb(244, 124, 34)"; comment: "Warning background color"; name: "color-background-warning"; altValue: "#F47C22"; }, { type: "color"; category: "background-color"; value: "rgb(64, 19, 15)"; comment: "Weakest warning background color."; name: "color-background-warning-weakest"; altValue: "#40130F"; }, { type: "color"; category: "background-color"; value: "rgb(18, 28, 45)"; comment: "Weak default background color."; name: "color-background-weak"; altValue: "#121C2D"; } ] "border-colors": [ { type: "color"; category: "border-color"; value: "rgb(96, 107, 133)"; comment: "Default border color"; name: "color-border"; altValue: "#606B85"; }, { type: "color"; category: "border-color"; value: "rgb(31, 48, 76)"; comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens."; name: "color-border-decorative-10-weaker"; altValue: "#1F304C"; }, { type: "color"; category: "border-color"; value: "rgb(0, 20, 137)"; comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens."; name: "color-border-decorative-20-weaker"; altValue: "#001489"; }, { type: "color"; category: "border-color"; value: "rgb(13, 58, 31)"; comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens."; name: "color-border-decorative-30-weaker"; altValue: "#0D3A1F"; }, { type: "color"; category: "border-color"; value: "rgb(88, 23, 189)"; comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens."; name: "color-border-decorative-40-weaker"; altValue: "#5817BD"; }, { type: "color"; category: "border-color"; value: "rgb(214, 31, 31)"; comment: "Destructive border color"; name: "color-border-destructive"; altValue: "#D61F1F"; }, { type: "color"; category: "border-color"; value: "rgb(246, 177, 177)"; comment: "Destructive focus border color"; name: "color-border-destructive-strong"; altValue: "#F6B1B1"; }, { type: "color"; category: "border-color"; value: "rgb(252, 207, 207)"; comment: "Stronger destructive hover border color"; name: "color-border-destructive-stronger"; altValue: "#FCCFCF"; }, { type: "color"; category: "border-color"; value: "rgb(254, 236, 236)"; comment: "Strongest destructive hover border color"; name: "color-border-destructive-strongest"; altValue: "#FEECEC"; }, { type: "color"; category: "border-color"; value: "rgb(57, 71, 98)"; comment: "Destructive focus border color"; name: "color-border-destructive-weak"; altValue: "#394762"; }, { type: "color"; category: "border-color"; value: "rgb(31, 48, 76)"; comment: "Destructive focus border color"; name: "color-border-destructive-weaker"; altValue: "#1F304C"; }, { type: "color"; category: "border-color"; value: "rgb(18, 28, 45)"; comment: "Destructive focus border color"; name: "color-border-destructive-weakest"; altValue: "#121C2D"; }, { type: "color"; category: "border-color"; value: "rgb(214, 31, 31)"; comment: "Error border color"; name: "color-border-error"; altValue: "#D61F1F"; }, { type: "color"; category: "border-color"; value: "rgb(246, 177, 177)"; comment: "Strong error border color"; name: "color-border-error-strong"; altValue: "#F6B1B1"; }, { type: "color"; category: "border-color"; value: "rgb(252, 207, 207)"; comment: "Stronger error border color"; name: "color-border-error-stronger"; altValue: "#FCCFCF"; }, { type: "color"; category: "border-color"; value: "rgb(254, 236, 236)"; comment: "Strongest error border color"; name: "color-border-error-strongest"; altValue: "#FEECEC"; }, { type: "color"; category: "border-color"; value: "rgb(173, 17, 17)"; comment: "Weak error border color"; name: "color-border-error-weak"; altValue: "#AD1111"; }, { type: "color"; category: "border-color"; value: "rgb(117, 12, 12)"; comment: "Weaker error border color"; name: "color-border-error-weaker"; altValue: "#750C0C"; }, { type: "color"; category: "border-color"; value: "rgb(49, 12, 12)"; comment: "Weakest error border color"; name: "color-border-error-weakest"; altValue: "#310C0C"; }, { type: "color"; category: "border-color"; value: "rgb(136, 145, 170)"; comment: "Border on inverse backgrounds. Must be used on color-background-body-inverse."; uicontrol_contrast_pairing: ["color-background-body-inverse"]; name: "color-border-inverse"; altValue: "#8891AA"; }, { type: "color"; category: "border-color"; value: "rgb(225, 227, 234)"; comment: "Strong border on inverse backgrounds. Must be used on color-background-body-inverse."; uicontrol_contrast_pairing: ["color-background-body-inverse"]; name: "color-border-inverse-strong"; altValue: "#E1E3EA"; }, { type: "color"; category: "border-color"; value: "rgb(244, 244, 246)"; comment: "Stronger border on inverse backgrounds. Must be used on color-background-body-inverse."; uicontrol_contrast_pairing: ["color-background-body-inverse"]; name: "color-border-inverse-stronger"; altValue: "#F4F4F6"; }, { type: "color"; category: "border-color"; value: "rgb(255, 255, 255)"; comment: "Strongest border on inverse backgrounds. Must be used on color-background-body-inverse."; uicontrol_contrast_pairing: ["color-background-body-inverse"]; name: "color-border-inverse-strongest"; altValue: "#FFFFFF"; }, { type: "color"; category: "border-color"; value: "rgb(57, 71, 98)"; comment: "Weaker border on inverse backgrounds. Must be used on color-background-body-inverse."; name: "color-border-inverse-weaker"; altValue: "#394762"; }, { type: "color"; category: "border-color"; value: "rgb(31, 48, 76)"; comment: "Weakest border on inverse backgrounds. Must be used on color-background-body-inverse."; name: "color-border-inverse-weakest"; altValue: "#1F304C"; }, { type: "color"; category: "border-color"; value: "rgb(2, 99, 224)"; comment: "Neutral border color"; name: "color-border-neutral"; altValue: "#0263E0"; }, { type: "color"; category: "border-color"; value: "rgb(4, 60, 181)"; comment: "Weak neutral border color"; name: "color-border-neutral-weak"; altValue: "#043CB5"; }, { type: "color"; category: "border-color"; value: "rgb(0, 20, 137)"; comment: "Weaker neutral border color"; name: "color-border-neutral-weaker"; altValue: "#001489"; }, { type: "color"; category: "border-color"; value: "rgb(88, 23, 189)"; comment: "Weaker border color for something designated as new"; name: "color-border-new-weaker"; altValue: "#5817BD"; }, { type: "color"; category: "border-color"; value: "rgb(2, 99, 224)"; comment: "Primary border color"; name: "color-border-primary"; altValue: "#0263E0"; }, { type: "color"; category: "border-color"; value: "rgb(153, 205, 255)"; comment: "Strong primary border color"; name: "color-border-primary-strong"; altValue: "#99CDFF"; }, { type: "color"; category: "border-color"; value: "rgb(204, 228, 255)"; comment: "Stronger primary border color"; name: "color-border-primary-stronger"; altValue: "#CCE4FF"; }, { type: "color"; category: "border-color"; value: "rgb(235, 244, 255)"; comment: "Strongest primary border color"; name: "color-border-primary-strongest"; altValue: "#EBF4FF"; }, { type: "color"; category: "border-color"; value: "rgb(57, 71, 98)"; comment: "Weak primary border color"; name: "color-border-primary-weak"; altValue: "#394762"; }, { type: "color"; category: "border-color"; value: "rgb(31, 48, 76)"; comment: "Weaker primary border color"; name: "color-border-primary-weaker"; altValue: "#1F304C"; }, { type: "color"; category: "border-color"; value: "rgb(18, 28, 45)"; comment: "Weakest primary border color"; name: "color-border-primary-weakest"; altValue: "#121C2D"; }, { type: "color"; category: "border-color"; value: "rgb(136, 145, 170)"; comment: "Strong border color"; name: "color-border-strong"; altValue: "#8891AA"; }, { type: "color"; category: "border-color"; value: "rgb(20, 176, 83)"; comment: "Success border color"; name: "color-border-success"; altValue: "#14B053"; }, { type: "color"; category: "border-color"; value: "rgb(14, 124, 58)"; comment: "Weak success border color"; name: "color-border-success-weak"; altValue: "#0E7C3A"; }, { type: "color"; category: "border-color"; value: "rgb(13, 58, 31)"; comment: "Weaker success border color"; name: "color-border-success-weaker"; altValue: "#0D3A1F"; }, { type: "color"; category: "border-color"; value: "rgb(5, 41, 18)"; comment: "Weakest success border color"; name: "color-border-success-weakest"; altValue: "#052912"; }, { type: "color"; category: "border-color"; value: "rgb(88, 23, 189)"; comment: "User avatar border color."; name: "color-border-user"; altValue: "#5817BD"; }, { type: "color"; category: "border-color"; value: "rgb(244, 124, 34)"; comment: "Warning border color"; name: "color-border-warning"; altValue: "#F47C22"; }, { type: "color"; category: "border-color"; value: "rgb(195, 83, 35)"; comment: "Weak warning border color"; name: "color-border-warning-weak"; altValue: "#C35323"; }, { type: "color"; category: "border-color"; value: "rgb(84, 25, 20)"; comment: "Weaker warning border color"; name: "color-border-warning-weaker"; altValue: "#541914"; }, { type: "color"; category: "border-color"; value: "rgb(64, 19, 15)"; comment: "Weakest warning border color"; name: "color-border-warning-weakest"; altValue: "#40130F"; }, { type: "color"; category: "border-color"; value: "rgb(57, 71, 98)"; comment: "Weak border color"; name: "color-border-weak"; altValue: "#394762"; }, { type: "color"; category: "border-color"; value: "rgb(31, 48, 76)"; comment: "Weaker border color"; name: "color-border-weaker"; altValue: "#1F304C"; }, { type: "color"; category: "border-color"; value: "rgb(13, 19, 28)"; comment: "Weakest border color"; name: "color-border-weakest"; altValue: "#0D131C"; } ] "border-widths": [ { type: "size"; category: "border-width"; value: 0; comment: "Border width reset"; name: "border-width-0"; altValue: null; }, { type: "size"; category: "border-width"; value: "1px"; comment: "Constant border width token for border width 10"; name: "border-width-10"; altValue: null; }, { type: "size"; category: "border-width"; value: "2px"; comment: "Constant border width token for border width 20"; name: "border-width-20"; altValue: null; }, { type: "size"; category: "border-width"; value: "4px"; comment: "Constant border width token for border width 30"; name: "border-width-30"; altValue: null; }, { type: "size"; category: "border-width"; value: "8px"; comment: "Constant border width token for border width 40"; name: "border-width-40"; altValue: null; } ] "box-shadows": [ { type: "shadow"; category: "box-shadow"; value: "0 4px 16px 0 rgba(0, 0, 0, 0.5)"; comment: "Default shadow."; name: "shadow"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #606b85"; comment: "Shadow border for inputs."; name: "shadow-border"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #1f304c"; comment: "Weaker bottom shadow border for decorative 10"; name: "shadow-border-bottom-decorative-10-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #001489"; comment: "Weaker bottom shadow border for decorative 20"; name: "shadow-border-bottom-decorative-20-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #0d3a1f"; comment: "Weaker bottom shadow border for decorative 30"; name: "shadow-border-bottom-decorative-30-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #5817bd"; comment: "Weaker bottom shadow border for decorative 40"; name: "shadow-border-bottom-decorative-40-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #750c0c"; comment: "Weaker bottom shadow border for error status"; name: "shadow-border-bottom-error-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #5817bd"; comment: "Bottom shadow border for the sidebar beta badge"; name: "shadow-border-bottom-inverse-new-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #001489"; comment: "Weaker bottom shadow border for neutral status"; name: "shadow-border-bottom-neutral-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #5817bd"; comment: "Weaker bottom shadow border for new status"; name: "shadow-border-bottom-new-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #006dfa"; comment: "Bottom shadow border for primary status"; name: "shadow-border-bottom-primary"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #c28e00"; comment: "Bottom shadow border for subaccount badge"; name: "shadow-border-bottom-subaccount"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #0d3a1f"; comment: "Weaker bottom shadow border for success status"; name: "shadow-border-bottom-success-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 1px 0 #541914"; comment: "Weaker bottom shadow border warning warning status"; name: "shadow-border-bottom-warning-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #1f304c"; comment: "Weaker shadow border for decorative 10"; name: "shadow-border-decorative-10-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #043cb5"; comment: "Weaker shadow border for decorative 20"; name: "shadow-border-decorative-20-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #0e7c3a"; comment: "Weaker shadow border for decorative 30"; name: "shadow-border-decorative-30-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #5817bd"; comment: "Weaker shadow border for decorative 40"; name: "shadow-border-decorative-40-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #d61f1f"; comment: "Shadow border for destructive interactions."; name: "shadow-border-destructive"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #f6b1b1"; comment: "Strong shadow border for destructive interactions"; name: "shadow-border-destructive-strong"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #fccfcf"; comment: "Stronger shadow border for destructive interactions"; name: "shadow-border-destructive-stronger"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #feecec"; comment: "Strongest shadow border for destructive interactions"; name: "shadow-border-destructive-strongest"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #394762"; comment: "Weak shadow border for destructive interactions."; name: "shadow-border-destructive-weak"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #1f304c"; comment: "Weaker shadow border for destructive interactions."; name: "shadow-border-destructive-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #d61f1f"; comment: "Shadow border for error inputs."; name: "shadow-border-error"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #f6b1b1"; comment: "Shadow border for error inputs hover."; name: "shadow-border-error-strong"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #fccfcf"; comment: "Shadow border for error inputs hover."; name: "shadow-border-error-stronger"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #feecec"; comment: "Strongest shadow border for error inputs hover."; name: "shadow-border-error-strongest"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #ad1111"; comment: "Shadow border for inverse error inputs."; name: "shadow-border-error-weak"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #ad1111"; comment: "Weaker shadow border for error inputs."; name: "shadow-border-error-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #8891aa"; comment: "Shadow border on interactive elements on inverse backgrounds."; name: "shadow-border-inverse"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #5817bd"; comment: "Shadow border for the sidebar beta badge."; name: "shadow-border-inverse-new-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #e1e3ea"; comment: "Strong shadow border on interactive elements on inverse backgrounds."; name: "shadow-border-inverse-strong"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #f4f4f6"; comment: "Stronger shadow border on interactive elements on inverse backgrounds."; name: "shadow-border-inverse-stronger"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #ffffff"; comment: "Strongest shadow border on interactive elements on inverse backgrounds."; name: "shadow-border-inverse-strongest"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #394762"; comment: "Weaker shadow border on interactive elements on inverse backgrounds."; name: "shadow-border-inverse-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #1f304c"; comment: "Weakest shadow border on interactive elements on inverse backgrounds."; name: "shadow-border-inverse-weakest"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #043cb5"; comment: "Weaker shadow border for neutral inputs."; name: "shadow-border-neutral-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #5817bd"; comment: "Weaker shadow border for new status inputs."; name: "shadow-border-new-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #0263e0"; comment: "Default shadow border for primary interactions."; name: "shadow-border-primary"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #99cdff"; comment: "Strong shadow border for inputs hover."; name: "shadow-border-primary-strong"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #cce4ff"; comment: "Stronger shadow border for inputs active."; name: "shadow-border-primary-stronger"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #ebf4ff"; comment: "Strongest shadow border for inputs active."; name: "shadow-border-primary-strongest"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #394762"; comment: "Weaker shadow border for primary interactions."; name: "shadow-border-primary-weak"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #1f304c"; comment: "Weaker shadow border for primary interactions."; name: "shadow-border-primary-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #8891aa"; comment: "Strong shadow border for inputs."; name: "shadow-border-strong"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #c28e00"; comment: "Shadow border for subaccount badge."; name: "shadow-border-subaccount"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #0e7c3a"; comment: "Weaker shadow border for success inputs."; name: "shadow-border-success-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #f5f0fc"; comment: "Shadow border for user."; name: "shadow-border-user"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #c35323"; comment: "Weaker shadow border for warning inputs."; name: "shadow-border-warning-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #394762"; comment: "Weak shadow border for disabled inputs."; name: "shadow-border-weak"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 1px #1f304c"; comment: "Weaker shadow border for disabled inputs."; name: "shadow-border-weaker"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 2px 4px 0 rgba(0, 0, 0, 0.4)"; comment: "Shadow for cards."; name: "shadow-card"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 4px #606b85"; comment: "Shadow for focus ring on interactive elements."; name: "shadow-focus"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "inset 0 0 0 2px #606b85"; comment: "Shadow for inset focus on elements, such as DataGrid cells."; name: "shadow-focus-inset"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 4px #8891aa"; comment: "Shadow for focus ring on interactive elements on inverse backgrounds."; name: "shadow-focus-inverse"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "inset 0 0 0 2px rgba(255, 255, 255, 0.4)"; comment: "Shadow for inset focus ring on interactive elements on inverse backgrounds."; name: "shadow-focus-inverse-inset"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 0 0 4px #606b85, 0 0 0 1px #606b85"; comment: "Shadow for simultaneous focus and border"; name: "shadow-focus-shadow-border"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 16px 24px 4px rgba(0, 0, 0, 0.5)"; comment: "High elevation default shadow."; name: "shadow-high"; altValue: null; }, { type: "shadow"; category: "box-shadow"; value: "0 2px 4px 0 rgba(0, 0, 0, 0.4)"; comment: "Low elevation default shadow."; name: "shadow-low"; altValue: null; } ] "colors": [ { type: "color"; category: "color"; value: "rgb(0, 20, 137)"; comment: "Default branding color"; name: "color-brand"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(242, 47, 70)"; comment: "Twilio brand red"; name: "color-brand-highlight"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(255, 255, 255)"; comment: "Gray Color 0"; name: "color-gray-0"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(244, 244, 246)"; comment: "Gray Color 1"; name: "color-gray-10"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(225, 227, 234)"; comment: "Gray Color 2"; name: "color-gray-20"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(202, 205, 216)"; comment: "Gray Color 3"; name: "color-gray-30"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(174, 178, 193)"; comment: "Gray Color 4"; name: "color-gray-40"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(136, 145, 170)"; comment: "Gray Color 5"; name: "color-gray-50"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(96, 107, 133)"; comment: "Gray Color 6"; name: "color-gray-60"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(75, 86, 113)"; comment: "Gray Color 7"; name: "color-gray-70"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(57, 71, 98)"; comment: "Gray Color 8"; name: "color-gray-80"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(31, 48, 76)"; comment: "Gray Color 9"; name: "color-gray-90"; altValue: null; }, { type: "color"; category: "color"; value: "rgb(18, 28, 45)"; comment: "Gray Color 10"; name: "color-gray-100"; altValue: null; } ] "color-schemes": [ { type: "string"; category: "color-scheme"; value: "dark"; name: "color-scheme"; altValue: null; } ] "data-visualization": [ { type: "color"; category: "data-visualization"; value: "rgb(2, 99, 224)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-1"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(200, 175, 240)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-2"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(96, 107, 133)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-3"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(102, 179, 255)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-4"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(14, 124, 58)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-5"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(250, 153, 80)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-6"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(195, 83, 35)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-7"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(246, 177, 177)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-8"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(140, 91, 216)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-9"; altValue: null; }, { type: "color"; category: "data-visualization"; value: "rgb(232, 180, 7)"; comment: "Color used for data visualizations. Must be used in a sequence."; name: "color-data-visualization-10"; altValue: null; } ] "fonts": [ { category: "font"; type: "font"; value: "'TwilioSansMono', Courier, monospace"; name: "font-family-code"; altValue: null; }, { category: "font"; type: "font"; value: "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"; name: "font-family-display"; altValue: null; }, { category: "font"; type: "font"; value: "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"; name: "font-family-text"; altValue: null; }, { category: "font"; type: "font"; value: "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif"; name: "font-family-text-chinese-simplified"; altValue: null; }, { category: "font"; type: "font"; value: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif"; name: "font-family-text-chinese-traditional"; altValue: null; }, { category: "font"; type: "font"; value: "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif"; name: "font-family-text-japanese"; altValue: null; }, { category: "font"; type: "font"; value: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif"; name: "font-family-text-korean"; altValue: null; } ] "font-sizes": [ { category: "font-size"; type: "font-size"; value: "0.625rem"; comment: "Constant typography token for font size 10"; name: "font-size-10"; altValue: "10px"; }, { category: "font-size"; type: "font-size"; value: "0.75rem"; comment: "Constant typography token for font size 20"; name: "font-size-20"; altValue: "12px"; }, { category: "font-size"; type: "font-size"; value: "0.875rem"; comment: "Constant typography token for font size 30"; name: "font-size-30"; altValue: "14px"; }, { category: "font-size"; type: "font-size"; value: "1rem"; comment: "Constant typography token for font size 40"; name: "font-size-40"; altValue: "16px"; }, { category: "font-size"; type: "font-size"; value: "1.125rem"; comment: "Constant typography token for font size 50"; name: "font-size-50"; altValue: "18px"; }, { category: "font-size"; type: "font-size"; value: "1.25rem"; comment: "Constant typography token for font size 60"; name: "font-size-60"; altValue: "20px"; }, { category: "font-size"; type: "font-size"; value: "1.5rem"; comment: "Constant typography token for font size 70"; name: "font-size-70"; altValue: "24px"; }, { category: "font-size"; type: "font-size"; value: "1.75rem"; comment: "Constant typography token for font size 80"; name: "font-size-80"; altValue: "28px"; }, { category: "font-size"; type: "font-size"; value: "2rem"; comment: "Constant typography token for font size 90"; name: "font-size-90"; altValue: "32px"; }, { category: "font-size"; type: "font-size"; value: "2.5rem"; comment: "Constant typography token for font size 100"; name: "font-size-100"; altValue: "40px"; }, { category: "font-size"; type: "font-size"; value: "3rem"; comment: "Constant typography token for font size 110"; name: "font-size-110"; altValue: "48px"; }, { category: "font-size"; type: "font-size"; value: "100%"; comment: "Base font size applied to the html element, used for rem calculations"; name: "font-size-base"; altValue: "1600px"; }, { category: "font-size"; type: "font-size"; value: "2rem"; comment: "Constant typography token for font size display 10"; name: "font-size-display-10"; altValue: "32px"; }, { category: "font-size"; type: "font-size"; value: "3rem"; comment: "Constant typography token for font size display 20"; name: "font-size-display-20"; altValue: "48px"; }, { category: "font-size"; type: "font-size"; value: "4rem"; comment: "Constant typography token for font size display 30"; name: "font-size-display-30"; altValue: "64px"; } ] "font-weights": [ { category: "font-weight"; type: "font-weight"; value: 400; comment: "Font weight for light weight"; name: "font-weight-light"; altValue: null; }, { category: "font-weight"; type: "font-weight"; value: 400; comment: "Font weight for normal weight"; name: "font-weight-normal"; altValue: null; }, { category: "font-weight"; type: "font-weight"; value: 500; comment: "Font weight for medium weight"; name: "font-weight-medium"; altValue: null; }, { category: "font-weight"; type: "font-weight"; value: 600; comment: "Font weight for semibold weight"; name: "font-weight-semibold"; altValue: null; }, { category: "font-weight"; type: "font-weight"; value: 700; comment: "Font weight for bold weight"; name: "font-weight-bold"; altValue: null; }, { category: "font-weight"; type: "font-weight"; value: 800; comment: "Font weight for extrabold weight"; name: "font-weight-extrabold"; altValue: null; } ] "line-heights": [ { category: "line-height"; type: "number"; value: 0; comment: "Constant line-height token for line-height 0"; name: "line-height-0"; altValue: "0px"; }, { category: "line-height"; type: "number"; value: "0.75rem"; comment: "Constant line-height token for line-height 05"; name: "line-height-05"; altValue: "12px"; }, { category: "line-height"; type: "number"; value: "1rem"; comment: "Constant line-height token for line-height 10"; name: "line-height-10"; altValue: "16px"; }, { category: "line-height"; type: "number"; value: "1.25rem"; comment: "Constant line-height token for line-height 20"; name: "line-height-20"; altValue: "20px"; }, { category: "line-height"; type: "number"; value: "1.25rem"; comment: "Constant line-height token for line-height 30"; name: "line-height-30"; altValue: "20px"; }, { category: "line-height"; type: "number"; value: "1.5rem"; comment: "Constant line-height token for line-height 40"; name: "line-height-40"; altValue: "24px"; }, { category: "line-height"; type: "number"; value: "1.75rem"; comment: "Constant line-height token for line-height 50"; name: "line-height-50"; altValue: "28px"; }, { category: "line-height"; type: "number"; value: "1.75rem"; comment: "Constant line-height token for line-height 60"; name: "line-height-60"; altValue: "28px"; }, { category: "line-height"; type: "number"; value: "2rem"; comment: "Constant line-height token for line-height 70"; name: "line-height-70"; altValue: "32px"; }, { category: "line-height"; type: "number"; value: "2.5rem"; comment: "Constant line-height token for line-height 80"; name: "line-height-80"; altValue: "40px"; }, { category: "line-height"; type: "number"; value: "2.75rem"; comment: "Constant line-height token for line-height 90"; name: "line-height-90"; altValue: "44px"; }, { category: "line-height"; type: "number"; value: "3.25rem"; comment: "Constant line-height token for line-height 100"; name: "line-height-100"; altValue: "52px"; }, { category: "line-height"; type: "number"; value: "4rem"; comment: "Constant line-height token for line-height 110"; name: "line-height-110"; altValue: "64px"; }, { category: "line-height"; type: "number"; value: "2.5rem"; comment: "Constant line-height token for line-height-display 10"; name: "line-height-display-10"; altValue: "40px"; }, { category: "line-height"; type: "number"; value: "3.75rem"; comment: "Constant line-height token for line-height-display 20"; name: "line-height-display-20"; altValue: "60px"; }, { category: "line-height"; type: "number"; value: "5rem"; comment: "Constant line-height token for line-height-display 30"; name: "line-height-display-30"; altValue: "80px"; } ] "radii": [ { type: "size"; category: "radius"; value: 0; comment: "Border radius reset"; name: "border-radius-0"; altValue: null; }, { type: "size"; category: "radius"; value: "2px"; comment: "Small border radius"; name: "border-radius-10"; altValue: null; }, { type: "size"; category: "radius"; value: "4px"; comment: "Large border radius"; name: "border-radius-20"; altValue: null; }, { type: "size"; category: "radius"; value: "8px"; comment: "Larger border radius"; name: "border-radius-30"; altValue: null; }, { type: "size"; category: "radius"; value: "50%"; comment: "Circular border radius"; name: "border-radius-circle"; altValue: null; }, { type: "size"; category: "radius"; value: "100px"; comment: "Pill border radius"; name: "border-radius-pill"; altValue: null; } ] "sizings": [ { type: "size"; category: "sizing"; value: 0; comment: "Generic sizing token scale for UI components."; name: "size-0"; altValue: "0px"; }, { type: "size"; category: "sizing"; value: "5.5rem"; comment: "Generic sizing token scale for UI components."; name: "size-10"; altValue: "88px"; }, { type: "size"; category: "sizing"; value: "12rem"; comment: "Generic sizing token scale for UI components."; name: "size-20"; altValue: "192px"; }, { type: "size"; category: "sizing"; value: "18.5rem"; comment: "Generic sizing token scale for UI components."; name: "size-30"; altValue: "296px"; }, { type: "size"; category: "sizing"; value: "25rem"; comment: "Generic sizing token scale for UI components."; name: "size-40"; altValue: "400px"; }, { type: "size"; category: "sizing"; value: "31.5rem"; comment: "Generic sizing token scale for UI components."; name: "size-50"; altValue: "504px"; }, { type: "size"; category: "sizing"; value: "38rem"; comment: "Generic sizing token scale for UI components."; name: "size-60"; altValue: "608px"; }, { type: "size"; category: "sizing"; value: "44.5rem"; comment: "Generic sizing token scale for UI components."; name: "size-70"; altValue: "712px"; }, { type: "size"; category: "sizing"; value: "51rem"; comment: "Generic sizing token scale for UI components."; name: "size-80"; altValue: "816px"; }, { type: "size"; category: "sizing"; value: "57.5rem"; comment: "Generic sizing token scale for UI components."; name: "size-90"; altValue: "920px"; }, { type: "size"; category: "sizing"; value: "64rem"; comment: "Generic sizing token scale for UI components."; name: "size-100"; altValue: "1024px"; }, { type: "size"; category: "sizing"; value: "70.5rem"; comment: "Generic sizing token scale for UI components."; name: "size-110"; altValue: "1128px"; }, { type: "size"; category: "sizing"; value: "77rem"; comment: "Generic sizing token scale for UI components."; name: "size-120"; altValue: "1232px"; }, { type: "size"; category: "sizing"; value: "0.75rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-05"; altValue: "12px"; }, { type: "size"; category: "sizing"; value: "1rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-10"; altValue: "16px"; }, { type: "size"; category: "sizing"; value: "1.25rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-20"; altValue: "20px"; }, { type: "size"; category: "sizing"; value: "1.25rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-30"; altValue: "20px"; }, { type: "size"; category: "sizing"; value: "1.5rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-40"; altValue: "24px"; }, { type: "size"; category: "sizing"; value: "1.75rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-50"; altValue: "28px"; }, { type: "size"; category: "sizing"; value: "1.75rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-60"; altValue: "28px"; }, { type: "size"; category: "sizing"; value: "2rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-70"; altValue: "32px"; }, { type: "size"; category: "sizing"; value: "2.5rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-80"; altValue: "40px"; }, { type: "size"; category: "sizing"; value: "2.75rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-90"; altValue: "44px"; }, { type: "size"; category: "sizing"; value: "3.25rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-100"; altValue: "52px"; }, { type: "size"; category: "sizing"; value: "4rem"; comment: "Maps to line-height tokens 1:1"; name: "size-icon-110"; altValue: "64px"; }, { type: "size"; category: "sizing"; value: "15rem"; comment: "Sizing token for sidebar width."; name: "size-sidebar"; altValue: "240px"; }, { type: "size"; category: "sizing"; value: "4.75rem"; comment: "Sizing token for the compact sidebar width."; name: "size-sidebar-compact"; altValue: "76px"; }, { type: "size"; category: "sizing"; value: 0; comment: "Generic square sizing token scale for UI components."; name: "size-square-0"; altValue: "0px"; }, { type: "size"; category: "sizing"; value: "0.125rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-10"; altValue: "2px"; }, { type: "size"; category: "sizing"; value: "0.25rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-20"; altValue: "4px"; }, { type: "size"; category: "sizing"; value: "0.375rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-25"; altValue: "6px"; }, { type: "size"; category: "sizing"; value: "0.5rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-30"; altValue: "8px"; }, { type: "size"; category: "sizing"; value: "0.75rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-40"; altValue: "12px"; }, { type: "size"; category: "sizing"; value: "1rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-50"; altValue: "16px"; }, { type: "size"; category: "sizing"; value: "1.25rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-60"; altValue: "20px"; }, { type: "size"; category: "sizing"; value: "1.5rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-70"; altValue: "24px"; }, { type: "size"; category: "sizing"; value: "1.75rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-80"; altValue: "28px"; }, { type: "size"; category: "sizing"; value: "2rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-90"; altValue: "32px"; }, { type: "size"; category: "sizing"; value: "2.25rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-100"; altValue: "36px"; }, { type: "size"; category: "sizing"; value: "2.5rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-110"; altValue: "40px"; }, { type: "size"; category: "sizing"; value: "2.75rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-120"; altValue: "44px"; }, { type: "size"; category: "sizing"; value: "3rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-130"; altValue: "48px"; }, { type: "size"; category: "sizing"; value: "3.25rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-140"; altValue: "52px"; }, { type: "size"; category: "sizing"; value: "3.5rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-150"; altValue: "56px"; }, { type: "size"; category: "sizing"; value: "3.75rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-160"; altValue: "60px"; }, { type: "size"; category: "sizing"; value: "4rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-170"; altValue: "64px"; }, { type: "size"; category: "sizing"; value: "4.25rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-180"; altValue: "68px"; }, { type: "size"; category: "sizing"; value: "4.5rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-190"; altValue: "72px"; }, { type: "size"; category: "sizing"; value: "4.75rem"; comment: "Generic square sizing token scale for UI components."; name: "size-square-200"; altValue: "76px"; }, { type: "size"; category: "sizing"; value: "4.75rem"; comment: "Sizing token for the minimum topbar height."; name: "size-topbar"; altValue: "76px"; } ] "spacings": [ { category: "spacing"; type: "size"; value: 0; name: "space-0"; altValue: "0px"; }, { category: "spacing"; type: "size"; value: "0.125rem"; name: "space-10"; altValue: "2px"; }, { category: "spacing"; type: "size"; value: "0.25rem"; name: "space-20"; altValue: "4px"; }, { category: "spacing"; type: "size"; value: "0.5rem"; name: "space-30"; altValue: "8px"; }, { category: "spacing"; type: "size"; value: "0.75rem"; name: "space-40"; altValue: "12px"; }, { category: "spacing"; type: "size"; value: "1rem"; name: "space-50"; altValue: "16px"; }, { category: "spacing"; type: "size"; value: "1.25rem"; name: "space-60"; altValue: "20px"; }, { category: "spacing"; type: "size"; value: "1.5rem"; name: "space-70"; altValue: "24px"; }, { category: "spacing"; type: "size"; value: "1.75rem"; name: "space-80"; altValue: "28px"; }, { category: "spacing"; type: "size"; value: "2rem"; name: "space-90"; altValue: "32px"; }, { category: "spacing"; type: "size"; value: "2.25rem"; name: "space-100"; altValue: "36px"; }, { category: "spacing"; type: "size"; value: "2.5rem"; name: "space-110"; altValue: "40px"; }, { category: "spacing"; type: "size"; value: "2.75rem"; name: "space-120"; altValue: "44px"; }, { category: "spacing"; type: "size"; value: "3rem"; name: "space-130"; altValue: "48px"; }, { category: "spacing"; type: "size"; value: "3.25rem"; name: "space-140"; altValue: "52px"; }, { category: "spacing"; type: "size"; value: "3.5rem"; name: "space-150"; altValue: "56px"; }, { category: "spacing"; type: "size"; value: "3.75rem"; name: "space-160"; altValue: "60px"; }, { category: "spacing"; type: "size"; value: "4rem"; name: "space-170"; altValue: "64px"; }, { category: "spacing"; type: "size"; value: "4.25rem"; name: "space-180"; altValue: "68px"; }, { category: "spacing"; type: "size"; value: "4.5rem"; name: "space-190"; altValue: "72px"; }, { category: "spacing"; type: "size"; value: "4.75rem"; name: "space-200"; altValue: "76px"; }, { category: "spacing"; type: "size"; value: "-0.125rem"; name: "space-negative-10"; altValue: "-2px"; }, { category: "spacing"; type: "size"; value: "-0.25rem"; name: "space-negative-20"; altValue: "-4px"; }, { category: "spacing"; type: "size"; value: "-0.5rem"; name: "space-negative-30"; altValue: "-8px"; }, { category: "spacing"; type: "size"; value: "-0.75rem"; name: "space-negative-40"; altValue: "-12px"; }, { category: "spacing"; type: "size"; value: "-1rem"; name: "space-negative-50"; altValue: "-16px"; }, { category: "spacing"; type: "size"; value: "-1.25rem"; name: "space-negative-60"; altValue: "-20px"; }, { category: "spacing"; type: "size"; value: "-1.5rem"; name: "space-negative-70"; altValue: "-24px"; }, { category: "spacing"; type: "size"; value: "-1.75rem"; name: "space-negative-80"; altValue: "-28px"; }, { category: "spacing"; type: "size"; value: "-2rem"; name: "space-negative-90"; altValue: "-32px"; }, { category: "spacing"; type: "size"; value: "-2.25rem"; name: "space-negative-100"; altValue: "-36px"; }, { category: "spacing"; type: "size"; value: "-2.5rem"; name: "space-negative-110"; altValue: "-40px"; }, { category: "spacing"; type: "size"; value: "-2.75rem"; name: "space-negative-120"; altValue: "-44px"; }, { category: "spacing"; type: "size"; value: "-3rem"; name: "space-negative-130"; altValue: "-48px"; }, { category: "spacing"; type: "size"; value: "-3.25rem"; name: "space-negative-140"; altValue: "-52px"; }, { category: "spacing"; type: "size"; value: "-3.5rem"; name: "space-negative-150"; altValue: "-56px"; }, { category: "spacing"; type: "size"; value: "-3.75rem"; name: "space-negative-160"; altValue: "-60px"; }, { category: "spacing"; type: "size"; value: "-4rem"; name: "space-negative-170"; altValue: "-64px"; }, { category: "spacing"; type: "size"; value: "-4.25rem"; name: "space-negative-180"; altValue: "-68px"; }, { category: "spacing"; type: "size"; value: "-4.5rem"; name: "space-negative-190"; altValue: "-72px"; }, { category: "spacing"; type: "size"; value: "-4.75rem"; name: "space-negative-200"; altValue: "-76px"; } ] "text-colors": [ { type: "color"; category: "text-color"; value: "rgb(244, 244, 246)"; comment: "Body text color"; name: "color-text"; altValue: "#F4F4F6"; }, { type: "color"; category: "text-color"; value: "rgb(242, 47, 70)"; comment: "Twilio brand red, accessible on large text only."; name: "color-text-brand-highlight"; altValue: "#F22F46"; }, { type: "color"; category: "text-color"; value: "rgb(255, 255, 255)"; comment: "Text color used on any brand color"; name: "color-text-brand-inverse"; altValue: "#FFFFFF"; }, { type: "color"; category: "text-color"; value: "rgb(225, 227, 234)"; comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens."; name: "color-text-decorative-10"; altValue: "#E1E3EA"; }, { type: "color"; category: "text-color"; value: "rgb(204, 228, 255)"; comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens."; name: "color-text-decorative-20"; altValue: "#CCE4FF"; }, { type: "color"; category: "text-color"; value: "rgb(162, 246, 195)"; comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens."; name: "color-text-decorative-30"; altValue: "#A2F6C3"; }, { type: "color"; category: "text-color"; value: "rgb(231, 220, 250)"; comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens."; name: "color-text-decorative-40"; altValue: "#E7DCFA"; }, { type: "color"; category: "text-color"; value: "rgb(235, 86, 86)"; comment: "Destructive text."; text_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"]; name: "color-text-destructive"; altValue: "#EB5656"; }, { type: "color"; category: "text-color"; value: "rgb(246, 177, 177)"; comment: "Strong shade of destructive text."; text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"]; name: "color-text-destructive-strong"; altValue: "#F6B1B1"; }, { type: "color"; category: "text-color"; value: "rgb(254, 236, 236)"; comment: "Stronger shade of destructive text."; text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"]; name: "color-text-destructive-stronger"; altValue: "#FEECEC"; }, { type: "color"; category: "text-color"; value: "rgb(255, 255, 255)"; comment: "Strongest shade of destructive text."; text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"]; name: "color-text-destructive-strongest"; altValue: "#FFFFFF"; }, { type: "color"; category: "text-color"; value: "rgb(57, 71, 98)"; comment: "Weak shade of destructive text."; name: "color-text-destructive-weak"; altValue: "#394762"; }, { type: "color"; category: "text-color"; value: "rgb(235, 86, 86)"; comment: "Error text for inputs and error misc"; name: "color-text-error"; altValue: "#EB5656"; }, { type: "color"; category: "text-color"; value: "rgb(246, 177, 177)"; comment: "Strong error text for inputs and error misc"; name: "color-text-error-strong"; altValue: "#F6B1B1"; }, { type: "color"; category: "text-color"; value: "rgb(254, 236, 236)"; comment: "Stronger error text for inputs and error misc"; name: "color-text-error-stronger"; altValue: "#FEECEC"; }, { type: "color"; category: "text-color"; value: "rgb(254, 236, 236)"; comment: "Strongest error text for inputs and error misc."; name: "color-text-error-strongest"; altValue: "#FEECEC"; }, { type: "color"; category: "text-color"; value: "rgb(235, 86, 86)"; comment: "Weak error text for inputs and error misc"; name: "color-text-error-weak"; altValue: "#EB5656"; }, { type: "color"; category: "text-color"; value: "rgb(136, 145, 170)"; comment: "Default icon color."; name: "color-text-icon"; altValue: "#8891AA"; }, { type: "color"; category: "text-color"; value: "rgb(54, 213, 118)"; comment: "Icon color for indicating a available status"; name: "color-text-icon-available"; altValue: "#36D576"; }, { type: "color"; category: "text-color"; value: "rgb(242, 47, 70)"; comment: "Twilio brand red icon color used for the Twilio logo."; uicontrol_contrast_pairing: ["color-background","color-background-body"]; name: "color-text-icon-brand-highlight"; altValue: "#F22F46"; }, { type: "color"; category: "text-color"; value: "rgb(255, 255, 255)"; comment: "Twilio brand icon color used for the Twilio logo on inverse backgrounds."; text_contrast_pairing: ["color-background-body-inverse"]; name: "color-text-icon-brand-inverse"; altValue: "#FFFFFF"; }, { type: "color"; category: "text-color"; value: "rgb(255, 179, 122)"; comment: "Icon color for indicating a busy status"; name: "color-text-icon-busy"; altValue: "#FFB37A"; }, { type: "color"; category: "text-color"; value: "rgb(235, 86, 86)"; comment: "Icon color for indicating an error."; name: "color-text-icon-error"; altValue: "#EB5656"; }, { type: "color"; category: "text-color"; value: "rgb(225, 227, 234)"; comment: "Default icon color for inverse backgrounds."; name: "color-text-icon-inverse"; altValue: "#E1E3EA"; }, { type: "color"; category: "text-color"; value: "rgb(102, 179, 255)"; comment: "Icon color for being neutral."; name: "color-text-icon-neutral"; altValue: "#66B3FF"; }, { type: "color"; category: "text-color"; value: "rgb(200, 175, 240)"; comment: "Icon color for indicating a new status."; name: "color-text-icon-new"; altValue: "#C8AFF0"; }, { type: "color"; category: "text-color"; value: "rgb(244, 244, 246)"; comment: "Icon color for indicating a offline status"; name: "color-text-icon-offline"; altValue: "#F4F4F6"; }, { type: "color"; category: "text-color"; value: "rgb(54, 213, 118)"; comment: "Icon color for indicating success."; name: "color-text-icon-success"; altValue: "#36D576"; }, { type: "color"; category: "text-color"; value: "rgb(235, 86, 86)"; comment: "Icon color for indicating a unavailable status"; name: "color-text-icon-unavailable"; altValue: "#EB5656"; }, { type: "color"; category: "text-color"; value: "rgb(255, 179, 122)"; comment: "Icon color for indicating a warning."; name: "color-text-icon-warning"; altValue: "#FFB37A"; }, { 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-body-inverse."; text_contrast_pairing: ["color-background-body-inverse","color-background-brand","color-background-error","color-background-primary","color-background-destructive"]; name: "color-text-inverse"; altValue: "#FFFFFF"; }, { type: "color"; category: "text-color"; value: "rgb(200, 175, 240)"; comment: "Inverse color for indicating a new status."; name: "color-text-inverse-new"; altValue: "#C8AFF0"; }, { type: "color"; category: "text-color"; value: "rgb(202, 205, 216)"; comment: "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse."; text_contrast_pairing: ["color-background-body-inverse","color-background-brand"]; name: "color-text-inverse-weak"; altValue: "#CACDD8"; }, { type: "color"; category: "text-color"; value: "rgb(136, 145, 170)"; comment: "Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse."; name: "color-text-inverse-weaker"; altValue: "#8891AA"; }, { type: "color"; category: "text-color"; value: "rgb(75, 86, 113)"; comment: "Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse."; name: "color-text-inverse-weakest"; altValue: "#4B5671"; }, { type: "color"; category: "text-color"; value: "rgb(0, 140, 255)"; comment: "Link text"; name: "color-text-link"; altValue: "#008CFF"; }, { type: "color"; category: "text-color"; value: "rgb(235, 86, 86)"; comment: "Destructive link text"; name: "color-text-link-destructive"; altValue: "#EB5656"; }, { type: "color"; category: "text-color"; value: "rgb(246, 177, 177)"; comment: "Strong shade of destructive link text to be used in interactions"; name: "color-text-link-destructive-strong"; altValue: "#F6B1B1"; }, { type: "color"; category: "text-color"; value: "rgb(254, 236, 236)"; comment: "Stronger shade of destructive link text to be used in interactions"; name: "color-text-link-destructive-stronger"; altValue: "#FEECEC"; }, { type: "color"; category: "text-color"; value: "rgb(255, 255, 255)"; comment: "Strongest shade of destructive link text to be used in interactions"; name: "color-text-link-destructive-strongest"; altValue: "#FFFFFF"; }, { type: "color"; category: "text-color"; value: "rgb(57, 71, 98)"; comment: "Weak shade of destructive link text to be used in interactions"; name: "color-text-link-destructive-weak"; altValue: "#394762"; }, { type: "color"; category: "text-color"; value: "rgb(153, 205, 255)"; comment: "Strong shade of link text to be used in interactions"; name: "color-text-link-strong"; altValue: "#99CDFF"; }, { type: "color"; category: "text-color"; value: "rgb(235, 244, 255)"; comment: "Stronger shade of link text to be used in interactions"; name: "color-text-link-stronger"; altValue: "#EBF4FF"; }, { type: "color"; category: "text-color"; value: "rgb(255, 255, 255)"; comment: "Strongest shade of link text to be used in interactions"; name: "color-text-link-strongest"; altValue: "#FFFFFF"; }, { type: "color"; category: "text-color"; value: "rgb(57, 71, 98)"; comment: "Weak shade of link text to be used in interactions"; name: "color-text-link-weak"; altValue: "#394762"; }, { type: "color"; category: "text-color"; value: "rgb(204, 228, 255)"; comment: "Color for text indicating a neutral status."; name: "color-text-neutral"; altValue: "#CCE4FF"; }, { type: "color"; category: "text-color"; value: "rgb(231, 220, 250)"; comment: "Color for text indicating a new status."; name: "color-text-new"; altValue: "#E7DCFA"; }, { type: "color"; category: "text-color"; value: "rgb(0, 140, 255)"; comment: "Primary text."; name: "color-text-primary"; altValue: "#008CFF"; }, { type: "color"; category: "text-color"; value: "rgb(153, 205, 255)"; comment: "Strong primary text."; name: "color-text-primary-strong"; altValue: "#99CDFF"; }, { type: "color"; category: "text-color"; value: "rgb(153, 205, 255)"; comment: "Stronger primary text."; name: "color-text-primary-stronger"; altValue: "#99CDFF"; }, { type: "color"; category: "text-color"; value: "rgb(255, 255, 255)"; comment: "Strongest primary text."; name: "color-text-primary-strongest"; altValue: "#FFFFFF"; }, { type: "color"; category: "text-color"; value: "rgb(57, 71, 98)"; comment: "Weak primary text."; name: "color-text-primary-weak"; altValue: "#394762"; }, { type: "color"; category: "text-color"; value: "rgb(255, 233, 128)"; comment: "Text color for the subaccount badge"; name: "color-text-subaccount"; altValue: "#FFE980"; }, { type: "color"; category: "text-color"; value: "rgb(162, 246, 195)"; comment: "Text color for success text."; name: "color-text-success"; altValue: "#A2F6C3"; }, { type: "color"; category: "text-color"; value: "rgb(255, 255, 255)"; comment: "Text color for user avatar."; name: "color-text-user"; altValue: "#FFFFFF"; }, { type: "color"; category: "text-color"; value: "rgb(255, 179, 122)"; comment: "Color for warning text."; name: "color-text-warning"; altValue: "#FFB37A"; }, { type: "color"; category: "text-color"; value: "rgb(250, 194, 160)"; comment: "Color for dark warning text."; name: "color-text-warning-strong"; altValue: "#FAC2A0"; }, { type: "color"; category: "text-color"; value: "rgb(136, 145, 170)"; comment: "Weak body text for visual hierarchy."; name: "color-text-weak"; altValue: "#8891AA"; }, { type: "color"; category: "text-color"; value: "rgb(57, 71, 98)"; comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls."; name: "color-text-weaker"; altValue: "#394762"; }, { type: "color"; category: "text-color"; value: "rgb(13, 19, 28)"; comment: "Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls."; name: "color-text-weakest"; altValue: "#0D131C"; } ] "z-indices": [ { type: "z-index"; category: "z-index"; value: 0; name: "z-index-0"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 10; name: "z-index-10"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 20; name: "z-index-20"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 30; name: "z-index-30"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 40; name: "z-index-40"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 50; name: "z-index-50"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 60; name: "z-index-60"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 70; name: "z-index-70"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 80; name: "z-index-80"; altValue: null; }, { type: "z-index"; category: "z-index"; value: 90; name: "z-index-90"; altValue: null; } ]} } export default Tokens;