@twilio-paste/design-tokens

{ "properties": [ { "type": "color", "category": "background-color", "value": "rgb(200, 175, 240)", "comment": "Background color used for user avatars.", "name": "colorBackgroundUser" }, { "type": "color", "category": "background-color", "value": "rgb(209, 250, 224)", "comment": "Background color used for trial accounts.", "name": "colorBackgroundTrial" }, { "type": "color", "category": "background-color", "value": "rgb(255, 251, 234)", "comment": "Background color used for subaccounts.", "name": "colorBackgroundSubaccount" }, { "type": "color", "category": "background-color", "value": "rgb(3, 11, 93)", "comment": "Stronger background color used for primary actions or highlights.", "name": "colorBackgroundPrimaryStronger" }, { "type": "color", "category": "background-color", "value": "rgb(74, 11, 11)", "comment": "Stronger background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveStronger" }, { "type": "color", "category": "background-color", "value": "rgb(204, 228, 255)", "comment": "Weaker background color used for primary actions or highlights.", "name": "colorBackgroundPrimaryWeaker" }, { "type": "color", "category": "background-color", "value": "rgb(252, 207, 207)", "comment": "Weaker background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveWeaker" }, { "type": "color", "category": "background-color", "value": "rgb(244, 124, 34)", "comment": "Background color used for warning alerts and toasts.", "name": "colorBackgroundWarning" }, { "type": "color", "category": "background-color", "value": "rgb(254, 245, 238)", "comment": "Weakest background color used for warning alerts and toasts.", "name": "colorBackgroundWarningWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(57, 71, 98)", "comment": "Strong inverse background color used for containers.", "name": "colorBackgroundInverseStrong" }, { "type": "color", "category": "background-color", "value": "rgb(245, 240, 252)", "comment": "Background color used to represent a new status.", "name": "colorBackgroundNew" }, { "type": "color", "category": "background-color", "value": "rgb(225, 227, 234)", "comment": "Strong background color used for containers.", "name": "colorBackgroundStrong" }, { "type": "color", "category": "background-color", "value": "rgb(250, 247, 253)", "comment": "Weakest background color for indicating a new status.", "name": "colorBackgroundNewWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(214, 31, 31)", "comment": "Background color used for destructive actions or highlights.", "name": "colorBackgroundDestructive" }, { "type": "color", "category": "background-color", "value": "rgb(249, 249, 250)", "comment": "Weak background color used for containers.", "name": "colorBackgroundWeak" }, { "type": "color", "category": "background-color", "value": "rgb(2, 99, 224)", "comment": "Background color used for primary actions or highlights.", "name": "colorBackgroundPrimary" }, { "type": "color", "category": "background-color", "value": "rgb(235, 244, 255)", "comment": "Weakest background color used for primary actions or highlights.", "name": "colorBackgroundPrimaryWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(244, 124, 34)", "comment": "Background color used to represent an entity or person as \"busy\".", "name": "colorBackgroundBusy" }, { "type": "color", "category": "background-color", "value": "rgb(20, 176, 83)", "comment": "Background color used for success alerts and toasts.", "name": "colorBackgroundSuccess" }, { "type": "color", "category": "background-color", "value": "rgb(254, 236, 236)", "comment": "Weakest background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(174, 178, 193)", "comment": "Background color used to represent an entity or person as \"offline\".", "name": "colorBackgroundOffline" }, { "type": "color", "category": "background-color", "value": "rgb(244, 244, 246)", "comment": "Background color used for alternative striped rows.", "name": "colorBackgroundRowStriped" }, { "type": "color", "category": "background-color", "value": "rgb(6, 3, 58)", "comment": "Strongest background color used for primary actions or highlights.", "name": "colorBackgroundPrimaryStrongest" }, { "type": "color", "category": "background-color", "value": "rgb(237, 253, 243)", "comment": "Weakest background color used for success alerts and toasts.", "name": "colorBackgroundSuccessWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(49, 12, 12)", "comment": "Strongest background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveStrongest" }, { "type": "color", "category": "background-color", "value": "rgb(117, 12, 12)", "comment": "Strongest background color used for error alerts and toasts.", "name": "colorBackgroundErrorStrong" }, { "type": "color", "category": "background-color", "value": "rgb(3, 11, 93)", "comment": "Strong primary brand background, accessible with inverse text.", "name": "colorBackgroundBrandStrong" }, { "type": "color", "category": "background-color", "value": "rgb(0, 20, 137)", "comment": "Primary brand background, accessible with inverse text.", "name": "colorBackgroundBrand" }, { "type": "color", "category": "background-color", "value": "rgb(214, 31, 31)", "comment": "Background color used for error alerts and toasts.", "name": "colorBackgroundError" }, { "type": "color", "category": "background-color", "value": "rgb(235, 244, 255)", "comment": "Weakest background color used for neutral or default variants.", "name": "colorBackgroundNeutralWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(20, 176, 83)", "comment": "Background color used to represent an entity or person as \"available\".", "name": "colorBackgroundAvailable" }, { "type": "color", "category": "background-color", "value": "rgb(254, 236, 236)", "comment": "Weakest background color used for error alerts and toasts.", "name": "colorBackgroundErrorWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(235, 86, 86)", "comment": "Background color used to represent required form fields.", "name": "colorBackgroundRequired" }, { "type": "color", "category": "background-color", "value": "rgb(49, 12, 12)", "comment": "Strongest error background color", "name": "colorBackgroundErrorStrongest" }, { "type": "color", "category": "background-color", "value": "rgb(245, 240, 252)", "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": "colorBackgroundDecorative40Weakest" }, { "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": "colorBackgroundInverseStronger" }, { "type": "color", "category": "background-color", "value": "rgb(237, 253, 243)", "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": "colorBackgroundDecorative30Weakest" }, { "type": "color", "category": "background-color", "value": "rgb(255, 255, 255)", "comment": "Background color used for the main page body.", "name": "colorBackgroundBody" }, { "type": "color", "category": "background-color", "value": "rgb(0, 20, 137)", "comment": "Strong background color used for primary actions or highlights.", "name": "colorBackgroundPrimaryStrong" }, { "type": "color", "category": "background-color", "value": "rgb(235, 244, 255)", "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": "colorBackgroundDecorative20Weakest" }, { "type": "color", "category": "background-color", "value": "rgb(117, 12, 12)", "comment": "Strong background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveStrong" }, { "type": "color", "category": "background-color", "value": "rgb(246, 177, 177)", "comment": "Weak background color used for destructive actions or highlights.", "name": "colorBackgroundDestructiveWeak" }, { "type": "color", "category": "background-color", "value": "rgb(244, 244, 246)", "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": "colorBackgroundDecorative10Weakest" }, { "type": "color", "category": "background-color", "value": "rgb(244, 244, 246)", "comment": "Default background color for any container.", "name": "colorBackground" }, { "type": "color", "category": "background-color", "value": "rgb(153, 205, 255)", "comment": "Weak background color used for primary actions or highlights.", "name": "colorBackgroundPrimaryWeak" }, { "type": "color", "category": "background-color", "value": "rgb(136, 145, 170)", "comment": "Stronger background color used for containers.", "name": "colorBackgroundStronger" }, { "type": "color", "category": "background-color", "value": "rgb(242, 47, 70)", "comment": "Highlight brand background, accessible with black text.", "name": "colorBackgroundBrandHighlight" }, { "type": "color", "category": "background-color", "value": "rgba(242, 47, 70, 0.1)", "comment": "Weakest background color used for brand highlights.", "name": "colorBackgroundBrandHighlightWeakest" }, { "type": "color", "category": "background-color", "value": "rgb(75, 86, 113)", "comment": "Strongest background color used for containers.", "name": "colorBackgroundStrongest" }, { "type": "color", "category": "background-color", "value": "rgb(18, 28, 45)", "comment": "Inverse background color used for the main page body.", "name": "colorBackgroundBodyInverse" }, { "type": "color", "category": "background-color", "value": "rgb(31, 48, 76)", "comment": "Inverse background color used for containers.", "name": "colorBackgroundInverse" }, { "type": "color", "category": "background-color", "value": "rgba(6, 3, 58, 0.4)", "comment": "Background color used for overlays.", "name": "colorBackgroundOverlay" }, { "type": "color", "category": "background-color", "value": "rgb(214, 31, 31)", "comment": "Background color used to represent an entity or person as \"unavailable\".", "name": "colorBackgroundUnavailable" }, { "type": "color", "category": "background-color", "value": "rgb(74, 11, 11)", "comment": "Stronger error background color", "name": "colorBackgroundErrorStronger" }, { "type": "color", "category": "background-color", "value": "rgb(6, 3, 58)", "comment": "Stronger primary brand background, accessible with inverse text.", "name": "colorBackgroundBrandStronger" }, { "type": "color", "category": "border-color", "value": "rgb(74, 11, 11)", "comment": "Stronger error border color", "name": "colorBorderErrorStronger" }, { "type": "color", "category": "border-color", "value": "rgb(255, 179, 122)", "comment": "Weak warning border color", "name": "colorBorderWarningWeak" }, { "type": "color", "category": "border-color", "value": "rgb(231, 220, 250)", "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": "colorBorderDecorative40Weaker" }, { "type": "color", "category": "border-color", "value": "rgb(252, 207, 207)", "comment": "Weaker error border color", "name": "colorBorderErrorWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(231, 220, 250)", "comment": "User avatar border color.", "name": "colorBorderUser" }, { "type": "color", "category": "border-color", "value": "rgb(204, 228, 255)", "comment": "Weaker neutral border color", "name": "colorBorderNeutralWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(244, 124, 34)", "comment": "Warning border color", "name": "colorBorderWarning" }, { "type": "color", "category": "border-color", "value": "rgb(209, 250, 224)", "comment": "Weaker success border color", "name": "colorBorderSuccessWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(3, 11, 93)", "comment": "Stronger primary border color", "uicontrol_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-new", "color-background-row-striped", "color-background-primary-weak", "color-background-primary-weaker", "color-background-primary-weakest", "color-background-destructive-weak", "color-background-destructive-weaker", "color-background-destructive-weakest" ], "name": "colorBorderPrimaryStronger" }, { "type": "color", "category": "border-color", "value": "rgb(74, 11, 11)", "comment": "Stronger destructive hover border color", "uicontrol_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-new", "color-background-row-striped", "color-background-primary-weak", "color-background-primary-weaker", "color-background-primary-weakest", "color-background-destructive-weak", "color-background-destructive-weaker", "color-background-destructive-weakest" ], "name": "colorBorderDestructiveStronger" }, { "type": "color", "category": "border-color", "value": "rgb(254, 245, 238)", "comment": "Weakest warning border color", "name": "colorBorderWarningWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(204, 228, 255)", "comment": "Weaker primary border color", "name": "colorBorderPrimaryWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(252, 207, 207)", "comment": "Destructive focus border color", "name": "colorBorderDestructiveWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(231, 220, 250)", "comment": "Weaker border color for something designated as new", "name": "colorBorderNewWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(214, 31, 31)", "comment": "Destructive border color", "uicontrol_contrast_pairing": [ "color-background", "color-background-body", "color-background-neutral-weakest", "color-background-row-striped", "color-background-primary-weakest", "color-background-destructive-weakest" ], "name": "colorBorderDestructive" }, { "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": "colorBorderInverseStrong" }, { "type": "color", "category": "border-color", "value": "rgb(2, 99, 224)", "comment": "Primary border color", "uicontrol_contrast_pairing": [ "color-background", "color-background-body", "color-background-neutral-weakest", "color-background-row-striped", "color-background-primary-weakest", "color-background-destructive-weakest" ], "name": "colorBorderPrimary" }, { "type": "color", "category": "border-color", "value": "rgb(235, 244, 255)", "comment": "Weakest primary border color", "name": "colorBorderPrimaryWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(20, 176, 83)", "comment": "Success border color", "name": "colorBorderSuccess" }, { "type": "color", "category": "border-color", "value": "rgb(254, 236, 236)", "comment": "Destructive focus border color", "name": "colorBorderDestructiveWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(49, 12, 12)", "comment": "Strongest destructive hover border color", "name": "colorBorderDestructiveStrongest" }, { "type": "color", "category": "border-color", "value": "rgb(6, 3, 58)", "comment": "Strongest primary border color", "name": "colorBorderPrimaryStrongest" }, { "type": "color", "category": "border-color", "value": "rgb(237, 253, 243)", "comment": "Weakest success border color", "name": "colorBorderSuccessWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(253, 220, 196)", "comment": "Weaker warning border color", "name": "colorBorderWarningWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(96, 107, 133)", "comment": "Strong border color", "uicontrol_contrast_pairing": [ "color-background", "color-background-strong", "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-new", "color-background-row-striped", "color-background-primary-weaker", "color-background-primary-weakest", "color-background-destructive-weaker", "color-background-destructive-weakest" ], "name": "colorBorderStrong" }, { "type": "color", "category": "border-color", "value": "rgb(202, 205, 216)", "comment": "Weak border color", "name": "colorBorderWeak" }, { "type": "color", "category": "border-color", "value": "rgb(2, 99, 224)", "comment": "Neutral border color", "name": "colorBorderNeutral" }, { "type": "color", "category": "border-color", "value": "rgb(214, 31, 31)", "comment": "Error border color", "uicontrol_contrast_pairing": [ "color-background", "color-background-body", "color-background-neutral-weakest", "color-background-warning-weakest", "color-background-error-weakest", "color-background-row-striped", "color-background-primary-weakest", "color-background-destructive-weakest" ], "name": "colorBorderError" }, { "type": "color", "category": "border-color", "value": "rgb(254, 236, 236)", "comment": "Weakest error border color", "name": "colorBorderErrorWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(49, 12, 12)", "comment": "Strongest error border color", "name": "colorBorderErrorStrongest" }, { "type": "color", "category": "border-color", "value": "rgb(117, 12, 12)", "comment": "Strong error border color", "name": "colorBorderErrorStrong" }, { "type": "color", "category": "border-color", "value": "rgb(245, 138, 138)", "comment": "Weak error border color", "name": "colorBorderErrorWeak" }, { "type": "color", "category": "border-color", "value": "rgb(102, 179, 255)", "comment": "Weak neutral border color", "name": "colorBorderNeutralWeak" }, { "type": "color", "category": "border-color", "value": "rgb(136, 145, 170)", "comment": "Default border color", "uicontrol_contrast_pairing": [ "color-background-body" ], "name": "colorBorder" }, { "type": "color", "category": "border-color", "value": "rgb(255, 255, 255)", "comment": "Weakest border color", "name": "colorBorderWeakest" }, { "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": "colorBorderInverseStronger" }, { "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": "colorBorderInverseWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(54, 213, 118)", "comment": "Weak success border color", "name": "colorBorderSuccessWeak" }, { "type": "color", "category": "border-color", "value": "rgb(0, 20, 137)", "comment": "Strong primary border color", "uicontrol_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-new", "color-background-row-striped", "color-background-primary-weak", "color-background-primary-weaker", "color-background-primary-weakest", "color-background-destructive-weak", "color-background-destructive-weaker", "color-background-destructive-weakest" ], "name": "colorBorderPrimaryStrong" }, { "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": "colorBorderInverse" }, { "type": "color", "category": "border-color", "value": "rgb(117, 12, 12)", "comment": "Destructive focus border color", "uicontrol_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-new", "color-background-row-striped", "color-background-primary-weak", "color-background-primary-weaker", "color-background-primary-weakest", "color-background-destructive-weak", "color-background-destructive-weaker", "color-background-destructive-weakest" ], "name": "colorBorderDestructiveStrong" }, { "type": "color", "category": "border-color", "value": "rgb(153, 205, 255)", "comment": "Weak primary border color", "name": "colorBorderPrimaryWeak" }, { "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": "colorBorderInverseWeakest" }, { "type": "color", "category": "border-color", "value": "rgb(246, 177, 177)", "comment": "Destructive focus border color", "name": "colorBorderDestructiveWeak" }, { "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": "colorBorderInverseStrongest" }, { "type": "color", "category": "border-color", "value": "rgb(225, 227, 234)", "comment": "Weaker border color", "name": "colorBorderWeaker" }, { "type": "color", "category": "border-color", "value": "rgb(225, 227, 234)", "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": "colorBorderDecorative10Weaker" }, { "type": "color", "category": "border-color", "value": "rgb(204, 228, 255)", "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": "colorBorderDecorative20Weaker" }, { "type": "color", "category": "border-color", "value": "rgb(209, 250, 224)", "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": "colorBorderDecorative30Weaker" }, { "type": "size", "category": "radius", "value": "0", "comment": "Border radius reset", "name": "borderRadius0" }, { "type": "size", "category": "radius", "value": "2px", "comment": "Small border radius", "name": "borderRadius10" }, { "type": "size", "category": "radius", "value": "4px", "comment": "Large border radius", "name": "borderRadius20" }, { "type": "size", "category": "radius", "value": "8px", "comment": "Larger border radius", "name": "borderRadius30" }, { "type": "size", "category": "radius", "value": "0.5", "comment": "Circular border radius", "name": "borderRadiusCircle" }, { "type": "size", "category": "radius", "value": "100px", "comment": "Pill border radius", "name": "borderRadiusPill" }, { "type": "size", "category": "border-width", "value": "0", "comment": "Border width reset", "name": "borderWidth0" }, { "type": "size", "category": "border-width", "value": "1px", "comment": "Constant border width token for border width 10", "name": "borderWidth10" }, { "type": "size", "category": "border-width", "value": "2px", "comment": "Constant border width token for border width 20", "name": "borderWidth20" }, { "type": "size", "category": "border-width", "value": "4px", "comment": "Constant border width token for border width 30", "name": "borderWidth30" }, { "type": "size", "category": "border-width", "value": "8px", "comment": "Constant border width token for border width 40", "name": "borderWidth40" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #e7dcfa", "comment": "Weaker bottom shadow border for new status", "name": "shadowBorderBottomNewWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 4px 16px 0 rgba(18, 28, 45, 0.2)", "comment": "Default shadow.", "name": "shadow" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #fff1b3", "comment": "Shadow border for subaccount badge.", "name": "shadowBorderSubaccount" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #4a0b0b", "comment": "Strong shadow border for destructive interactions", "name": "shadowBorderDestructiveStronger" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #d1fae0", "comment": "Weaker shadow border for success inputs.", "name": "shadowBorderSuccessWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #5817bd", "comment": "Shadow border for the sidebar beta badge.", "name": "shadowBorderInverseNewWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #030b5d", "comment": "Stronger shadow border for inputs active.", "name": "shadowBorderPrimaryStronger" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #fddcc4", "comment": "Weaker bottom shadow border for warning status", "name": "shadowBorderBottomWarningWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #fccfcf", "comment": "Weaker shadow border for destructive interactions.", "name": "shadowBorderDestructiveWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #cce4ff", "comment": "Weaker shadow border for primary interactions.", "name": "shadowBorderPrimaryWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #e7dcfa", "comment": "Weaker shadow border for new status inputs.", "name": "shadowBorderNewWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)", "comment": "Low elevation default shadow.", "name": "shadowLow" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #e1e3ea", "comment": "Strong shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #fddcc4", "comment": "Weaker shadow border for warning inputs.", "name": "shadowBorderWarningWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #606b85", "comment": "Strong shadow border for inputs.", "name": "shadowBorderStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 4px rgba(2, 99, 224, 0.7)", "comment": "Shadow for focus ring on interactive elements.", "name": "shadowFocus" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #cacdd8", "comment": "Weak shadow border for disabled inputs.", "name": "shadowBorderWeak" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 4px rgba(255, 255, 255, 0.4)", "comment": "Shadow for focus ring on interactive elements on inverse backgrounds.", "name": "shadowFocusInverse" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #0263e0", "comment": "Default shadow border for primary interactions.", "name": "shadowBorderPrimary" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #d61f1f", "comment": "Shadow border for destructive interactions.", "name": "shadowBorderDestructive" }, { "type": "shadow", "category": "box-shadow", "value": "0 16px 24px 0 rgba(18, 28, 45, 0.2)", "comment": "High elevation default shadow.", "name": "shadowHigh" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #750c0c", "comment": "Shadow border for error inputs hover.", "name": "shadowBorderErrorStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #06033a", "comment": "Strongest shadow border for inputs active.", "name": "shadowBorderPrimaryStrongest" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #310c0c", "comment": "Strongest shadow border for destructive interactions", "name": "shadowBorderDestructiveStrongest" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #eb5656", "comment": "Shadow border for inverse error inputs.", "name": "shadowBorderErrorWeak" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #d61f1f", "comment": "Shadow border for error inputs.", "name": "shadowBorderError" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #e1e3ea", "comment": "Weaker bottom shadow border for decorative 10", "name": "shadowBorderBottomDecorative10Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #006dfa", "comment": "Bottom shadow border for primary status", "name": "shadowBorderBottomPrimary" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #cce4ff", "comment": "Weaker bottom shadow border for decorative 20", "name": "shadowBorderBottomDecorative20Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #f4f4f6", "comment": "Stronger shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseStronger" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #310c0c", "comment": "Strongest shadow border for error inputs hover.", "name": "shadowBorderErrorStrongest" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #750c0c", "comment": "Strong shadow border for destructive interactions", "name": "shadowBorderDestructiveStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #394762", "comment": "Weaker shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #d1fae0", "comment": "Weaker bottom shadow border for decorative 30", "name": "shadowBorderBottomDecorative30Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #001489", "comment": "Strong shadow border for inputs hover.", "name": "shadowBorderPrimaryStrong" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #99cdff", "comment": "Weaker shadow border for primary interactions.", "name": "shadowBorderPrimaryWeak" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa", "comment": "Shadow for simultaneous focus and border.", "name": "shadowFocusShadowBorder" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #e7dcfa", "comment": "Weaker bottom shadow border for decorative 40", "name": "shadowBorderBottomDecorative40Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #f6b1b1", "comment": "Weak shadow border for destructive interactions.", "name": "shadowBorderDestructiveWeak" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #fccfcf", "comment": "Weaker bottom shadow border for error status", "name": "shadowBorderBottomErrorWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #e1e3ea", "comment": "Weaker shadow border for disabled inputs.", "name": "shadowBorderWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #8891aa", "comment": "Shadow border for inputs.", "name": "shadowBorder" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #cce4ff", "comment": "Weaker bottom shadow border for neutral status", "name": "shadowBorderBottomNeutralWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #e1e3ea", "comment": "Weaker shadow border for decorative 10", "name": "shadowBorderDecorative10Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #cce4ff", "comment": "Weaker shadow border for decorative 20", "name": "shadowBorderDecorative20Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #ffdd35", "comment": "Bottom shadow border for subaccount badge", "name": "shadowBorderBottomSubaccount" }, { "type": "shadow", "category": "box-shadow", "value": "inset 0 0 0 2px rgba(2, 99, 224, 0.7)", "comment": "Shadow for inset focus on elements, such as DataGrid cells.", "name": "shadowFocusInset" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #8891aa", "comment": "Shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverse" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #d1fae0", "comment": "Weaker shadow border for decorative 30", "name": "shadowBorderDecorative30Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #1f304c", "comment": "Weakest shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseWeakest" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #5817bd", "comment": "Bottom shadow border for the sidebar beta badge", "name": "shadowBorderBottomInverseNewWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 1px 0 #d1fae0", "comment": "Weaker bottom shadow border for success status", "name": "shadowBorderBottomSuccessWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #e7dcfa", "comment": "Weaker shadow border for decorative 40", "name": "shadowBorderDecorative40Weaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #4a0b0b", "comment": "Shadow border for error inputs hover.", "name": "shadowBorderErrorStronger" }, { "type": "shadow", "category": "box-shadow", "value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)", "comment": "Shadow for cards.", "name": "shadowCard" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #fccfcf", "comment": "Weaker shadow border for error inputs.", "name": "shadowBorderErrorWeaker" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #ffffff", "comment": "Strongest shadow border on interactive elements on inverse backgrounds.", "name": "shadowBorderInverseStrongest" }, { "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": "shadowFocusInverseInset" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #8c5bd8", "comment": "Shadow border for user.", "name": "shadowBorderUser" }, { "type": "shadow", "category": "box-shadow", "value": "0 0 0 1px #cce4ff", "comment": "Weaker shadow border for neutral inputs.", "name": "shadowBorderNeutralWeaker" }, { "type": "color", "category": "data-visualization", "value": "rgb(235, 86, 86)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-9", "color-data-visualization-1" ], "name": "colorDataVisualization10" }, { "type": "color", "category": "data-visualization", "value": "rgb(0, 20, 137)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-10", "color-data-visualization-2" ], "name": "colorDataVisualization1" }, { "type": "color", "category": "data-visualization", "value": "rgb(14, 124, 58)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-1", "color-data-visualization-3" ], "name": "colorDataVisualization2" }, { "type": "color", "category": "data-visualization", "value": "rgb(13, 58, 31)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-2", "color-data-visualization-4" ], "name": "colorDataVisualization3" }, { "type": "color", "category": "data-visualization", "value": "rgb(0, 140, 255)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-3", "color-data-visualization-5" ], "name": "colorDataVisualization4" }, { "type": "color", "category": "data-visualization", "value": "rgb(57, 71, 98)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-4", "color-data-visualization-6" ], "name": "colorDataVisualization5" }, { "type": "color", "category": "data-visualization", "value": "rgb(166, 127, 227)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-5", "color-data-visualization-7" ], "name": "colorDataVisualization6" }, { "type": "color", "category": "data-visualization", "value": "rgb(109, 46, 209)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-6", "color-data-visualization-8" ], "name": "colorDataVisualization7" }, { "type": "color", "category": "data-visualization", "value": "rgb(136, 145, 170)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-7", "color-data-visualization-9" ], "name": "colorDataVisualization8" }, { "type": "color", "category": "data-visualization", "value": "rgb(117, 12, 12)", "comment": "Color used for data visualizations. Must be used in a sequence.", "uicontrol_contrast_pairing": [ "color-background-body" ], "data_visualization_contrast_pairing": [ "color-data-visualization-8", "color-data-visualization-10" ], "name": "colorDataVisualization9" }, { "category": "font", "type": "font", "value": "'Colfax', Helvetica, Arial, sans-serif", "name": "fontFamilyText" }, { "category": "font", "type": "font", "value": "'TwilioSansMono', Courier, monospace", "name": "fontFamilyCode" }, { "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": "fontFamilyTextJapanese" }, { "category": "font", "type": "font", "value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif", "name": "fontFamilyTextKorean" }, { "category": "font", "type": "font", "value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif", "name": "fontFamilyTextChineseTraditional" }, { "category": "font", "type": "font", "value": "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif", "name": "fontFamilyTextChineseSimplified" }, { "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": "fontFamilyDisplay" }, { "category": "font-size", "type": "font-size", "value": "48", "comment": "Constant typography token for font size 110", "name": "fontSize110" }, { "category": "font-size", "type": "font-size", "value": "40", "comment": "Constant typography token for font size 100", "name": "fontSize100" }, { "category": "font-size", "type": "font-size", "value": "32", "comment": "Constant typography token for font size 90", "name": "fontSize90" }, { "category": "font-size", "type": "font-size", "value": "28", "comment": "Constant typography token for font size 80", "name": "fontSize80" }, { "category": "font-size", "type": "font-size", "value": "24", "comment": "Constant typography token for font size 70", "name": "fontSize70" }, { "category": "font-size", "type": "font-size", "value":