@salesforce-ux/design-system

{ "properties": [ { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "1px", "name": "borderWidthThin" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "2px", "name": "borderWidthThick" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "1px", "name": "borderStrokeWidthThin" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "2px", "name": "borderStrokeWidthThick" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "0", ".alias": { "value": "0" }, "name": "spacingNone" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "2", ".alias": { "value": "0.125rem" }, "name": "spacingXxxSmall" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "4", ".alias": { "value": "0.25rem" }, "name": "spacingXxSmall" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "8", ".alias": { "value": "0.5rem" }, "name": "spacingXSmall" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "12", ".alias": { "value": "0.75rem" }, "name": "spacingSmall" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "16", ".alias": { "value": "1rem" }, "name": "spacingMedium" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "24", ".alias": { "value": "1.5rem" }, "name": "spacingLarge" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "32", ".alias": { "value": "2rem" }, "name": "spacingXLarge" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "48", ".alias": { "value": "3rem" }, "name": "spacingXxLarge" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "96", "comment": "Generic sizing token scale for UI components.", "name": "sizeXxSmall" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "192", "comment": "Generic sizing token scale for UI components.", "name": "sizeXSmall" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "240", "comment": "Generic sizing token scale for UI components.", "name": "sizeSmall" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "320", "comment": "Generic sizing token scale for UI components.", "name": "sizeMedium" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "400", "comment": "Generic sizing token scale for UI components.", "name": "sizeLarge" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "640", "comment": "Generic sizing token scale for UI components.", "name": "sizeXLarge" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "960", "comment": "Generic sizing token scale for UI components.", "name": "sizeXxLarge" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "16", "comment": "Small utility icon without border.", "name": "squareIconUtilitySmall" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "20", "comment": "Medium utility icon without border.", "name": "squareIconUtilityMedium" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "24", "comment": "Large utility icon without border.", "name": "squareIconUtilityLarge" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "48", "comment": "Anchor: Outer colored tile", "name": "squareIconLargeBoundary" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "80", "comment": "Anchor: avatar", "name": "squareIconLargeBoundaryAlt" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "32", "comment": "Anchor: Icon content (white shape)", "name": "squareIconLargeContent" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "38", "comment": "Use squareIconMediumBoundary", "deprecated": true, "name": "squareIconMedium" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "32", "comment": "Stage left & actions: Outer colored tile", "name": "squareIconMediumBoundary" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "36", "comment": "Icon button boundary.", "name": "squareIconMediumBoundaryAlt" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "16", "comment": "Stage left & actions: Icon content (white shape)", "name": "squareIconMediumContent" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "14", "comment": "Alternate medium tap target size", "name": "squareIconMediumContentAlt" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "16", "comment": "Small tap target size", "deprecated": true, "name": "squareIconSmall" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "24", "comment": "Search Results: Outer colored tile", "name": "squareIconSmallBoundary" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "12", "comment": "Search Results: Icon content (white shape)", "name": "squareIconSmallContent" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "20", "comment": "Very small icon button boundary.", "name": "squareIconXSmallBoundary" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "8", "comment": "Very small icons in icon buttons.", "name": "squareIconXSmallContent" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "16", "comment": "Very very small icon button boundary.", "name": "squareIconXxSmallBoundary" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "14", "comment": "Very small icons to replace force font with temporary override.", "deprecated": true, "name": "squareIconXxSmallContent" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "50", "comment": "Large tap target size.", "deprecated": true, "name": "squareIconLarge" }, { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "26", "comment": "Minimum height of a pill.", "name": "heightPill" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(0, 112, 210)", "comment": "Brand fill color", ".alias": { "value": "#0070D2" }, "name": "fillBrand" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(0, 95, 178)", "comment": "Brand hover fill color", ".alias": { "value": "#005FB2" }, "name": "fillBrandHover" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(22, 50, 92)", "comment": "Brand active fill color", ".alias": { "value": "#16325C" }, "name": "fillBrandActive" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(159, 170, 181)", "comment": "Header button icon color", ".alias": { "value": "#9FAAB5" }, "name": "fillHeaderButton" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(0, 95, 178)", "comment": "Hovered header button icon color", ".alias": { "value": "#005FB2" }, "name": "fillHeaderButtonHover" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "300", "comment": "Use for large headings only.", "name": "fontWeightLight" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "comment": "Most all body copy.", "name": "fontWeightRegular" }, { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "700", "comment": "Used sparingly for emphasized text within regular body copy.", "name": "fontWeightBold" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "10", "deprecated": true, "name": "fontSizeXSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "14", "deprecated": true, "name": "fontSizeSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "16", "deprecated": true, "name": "fontSizeMedium" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "deprecated": true, "name": "fontSizeMediumA" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "20", "deprecated": true, "name": "fontSizeLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "24", "deprecated": true, "name": "fontSizeXLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "25.12", "deprecated": true, "name": "fontSizeXLargeA" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "32", "deprecated": true, "name": "fontSizeXxLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "10", "comment": "Extra extra small text.", ".alias": { "value": ".625rem" }, "name": "fontSizeTextXxSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "comment": "Extra small body text.", ".alias": { "value": ".75rem" }, "name": "fontSizeTextXSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "13", "comment": "Small body text.", ".alias": { "value": ".8125rem" }, "name": "fontSizeTextSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "16", "comment": "Medium body text.", ".alias": { "value": "1rem" }, "name": "fontSizeTextMedium" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "comment": "Large body text.", ".alias": { "value": "1.125rem" }, "name": "fontSizeTextLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "20", "comment": "Extra large body text.", ".alias": { "value": "1.25rem" }, "name": "fontSizeTextXLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "10", "comment": "Extra Extra small headings.", ".alias": { "value": ".625rem" }, "name": "fontSizeHeadingXxSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "comment": "Extra small headings.", ".alias": { "value": ".75rem" }, "name": "fontSizeHeadingXSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "14", "comment": "Small headings.", ".alias": { "value": ".875rem" }, "name": "fontSizeHeadingSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "comment": "Medium headings.", ".alias": { "value": "1.125rem" }, "name": "fontSizeHeadingMedium" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "24", "comment": "Large headings.", ".alias": { "value": "1.5rem" }, "name": "fontSizeHeadingLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "32", "comment": "Extra large headings.", ".alias": { "value": "2rem" }, "name": "fontSizeHeadingXLarge" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.25", "comment": "Unitless line-heights for reusability", "name": "lineHeightHeading" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.375", "comment": "Unitless line-heights for reusability", "name": "lineHeightText" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1", "comment": "Remove extra leading. Unitless line-heights for reusability", "name": "lineHeightReset" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "40", "comment": "Line heights for tabs", "name": "lineHeightTab" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", "deprecated": true, "comment": "Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.", ".alias": { "value": "'Salesforce Sans', Arial, sans-serif" }, "name": "fontFamily" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", ".alias": { "value": "'Salesforce Sans', Arial, sans-serif" }, "name": "fontFamilyText" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", ".alias": { "value": "'Salesforce Sans', Arial, sans-serif" }, "name": "fontFamilyHeading" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "2", "name": "borderRadiusSmall" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "4", "comment": "Icons in lists, record home icon, unbound input elements", "name": "borderRadiusMedium" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "8", "name": "borderRadiusLarge" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "240", "name": "borderRadiusPill" }, { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0.5", "comment": "Circle for global use, action icon bgd shape", "name": "borderRadiusCircle" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "background*" ], "value": "rgb(216, 221, 230)", "comment": "Default border color for UI elements.", ".alias": { "value": "#D8DDE6" }, "name": "colorBorder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "rgb(21, 137, 238)", "comment": "Our product brand blue.", ".alias": { "value": "#1589EE" }, "name": "colorBorderBrand" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(0, 112, 210)", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text.", ".alias": { "value": "#0070D2" }, "name": "colorBorderBrandDark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 154, 60)", "comment": "Border color for UI elements related to the concept of an external user or customer.", ".alias": { "value": "#FF9A3C" }, "name": "colorBorderCustomer" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(194, 57, 52)", "comment": "Border color for UI elements that have to do with destructive actions.", ".alias": { "value": "#C23934" }, "name": "colorBorderDestructive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(166, 26, 20)", "comment": "Hover border color for UI elements that have to do with destructive actions.", ".alias": { "value": "#A61A14" }, "name": "colorBorderDestructiveHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(135, 5, 0)", "comment": "Active border color for UI elements that have to do with destructive actions.", ".alias": { "value": "#870500" }, "name": "colorBorderDestructiveActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(84, 105, 141)", "comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).", ".alias": { "value": "#54698D" }, "name": "colorBorderInfo" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(194, 57, 52)", "comment": "Border color for UI elements that have to do with errors.", ".alias": { "value": "#C23934" }, "name": "colorBorderError" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(234, 130, 136)", "comment": "Alternative border color for UI elements related to errors.", ".alias": { "value": "#EA8288" }, "name": "colorBorderErrorAlt" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(234, 130, 136)", "comment": "Dark alternative border color for UI elements related to errors.", ".alias": { "value": "#EA8288" }, "name": "colorBorderErrorDark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(68, 68, 68)", "comment": "Border color for UI elements related to the offline state.", ".alias": { "value": "#444444" }, "name": "colorBorderOffline" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(75, 202, 129)", "comment": "Border color for UI elements that have to do with success.", ".alias": { "value": "#4BCA81" }, "name": "colorBorderSuccess" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(4, 132, 75)", "comment": "Dark alternative border color for UI elements that have to do with success.", ".alias": { "value": "#04844B" }, "name": "colorBorderSuccessDark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 183, 93)", "comment": "Border color for UI elements that have to do with warnings.", ".alias": { "value": "#FFB75D" }, "name": "colorBorderWarning" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(6, 28, 63)", "comment": "Border color to match UI elements using color-background-inverse.", ".alias": { "value": "#061C3F" }, "name": "colorBorderInverse" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(0, 112, 210)", "comment": "Border color for a selected tab in a tab group.", ".alias": { "value": "#0070D2" }, "name": "colorBorderTabSelected" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Border color for an active tab.", ".alias": { "value": "#FFFFFF" }, "name": "colorBorderTabActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(244, 246, 249)", "comment": "Lightest separator color - used as default separator on white backgrounds.", ".alias": { "value": "#F4F6F9" }, "name": "colorBorderSeparator" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(216, 221, 230)", "comment": "Medium separator color - used as default separator on light gray backgrounds.", ".alias": { "value": "#D8DDE6" }, "name": "colorBorderSeparatorAlt" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(168, 183, 199)", "comment": "Darkest separator color - used as an alternate separator color when more differentiation is desired.", ".alias": { "value": "#A8B7C7" }, "name": "colorBorderSeparatorAlt2" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(42, 66, 108)", "comment": "Used as a separator on dark backgrounds, such as stage left navigation.", ".alias": { "value": "#2A426C" }, "name": "colorBorderSeparatorInverse" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(0, 112, 210)", "comment": "Used as the border color for selected rows or items on list-like components.", ".alias": { "value": "#0070D2" }, "name": "colorBorderRowSelected" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(21, 137, 238)", "comment": "Used as the border color for the hover state on selected rows or items on list-like components.", ".alias": { "value": "#1589EE" }, "name": "colorBorderRowSelectedHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(42, 66, 108)", "specificity": "builders", "comment": "Used to delineate the boundary of a specific region. Specific to builders.", "deprecated": true, ".alias": { "value": "#2A426C" }, "name": "colorBorderHint" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(0, 112, 210)", "specificity": "builders", "comment": "Used to delineate the boundary of a selected component. Specific to builders.", ".alias": { "value": "#0070D2" }, "name": "colorBorderSelection" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(21, 137, 238)", "specificity": "builders", "comment": "Used to delineate the boundary of a component that is being hovered over. Specific to builders.", ".alias": { "value": "#1589EE" }, "name": "colorBorderSelectionHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(244, 246, 249)", "specificity": "builders", "comment": "Used to delineate the boundary of a component that is being clicked. Specific to builders.", ".alias": { "value": "#F4F6F9" }, "name": "colorBorderSelectionActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(94, 180, 255)", "specificity": "builders", "comment": "Used to delineate the boundary of a selected canvas element. Specific to builders.", ".alias": { "value": "#5EB4FF" }, "name": "colorBorderCanvasElementSelection" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(0, 95, 178)", "specificity": "builders", "comment": "Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.", ".alias": { "value": "#005FB2" }, "name": "colorBorderCanvasElementSelectionHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.5)", "comment": "Border color for a button with an icon that has a parent element that has a hover state", ".alias": { "value": "rgba(255, 255, 255, 0.50)" }, "name": "colorBorderIconInverseHint" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.75)", "comment": "Hovered border color for a button with an icon that has a parent element that has a hover state", ".alias": { "value": "rgba(255, 255, 255, 0.75)" }, "name": "colorBorderIconInverseHintHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(0, 112, 210)", "comment": "Border color for brandable primary button", ".alias": { "value": "#0070D2" }, "name": "colorBorderButtonBrand" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(0, 0, 0, 0)", "comment": "Border color for brandable primary button - disabled state", ".alias": { "value": "transparent" }, "name": "colorBorderButtonBrandDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(216, 221, 230)", "comment": "Border color for default secondary button", ".alias": { "value": "#D8DDE6" }, "name": "colorBorderButtonDefault" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.15)", "comment": "Border color for disabled inverse button.", ".alias": { "value": "rgba(255, 255, 255, 0.15)" }, "name": "colorBorderButtonInverseDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(216, 221, 230)", "comment": "Border color on form elements.", ".alias": { "value": "#D8DDE6" }, "name": "colorBorderInput" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(21, 137, 238)", "comment": "Border color on active form elements.", ".alias": { "value": "#1589EE" }, "name": "colorBorderInputActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(168, 183, 199)", "comment": "Border color on disabled form elements.", ".alias": { "value": "#A8B7C7" }, "name": "colorBorderInputDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "The borders to create the checkmark", ".alias": { "value": "#FFFFFF" }, "name": "colorBorderInputCheckboxSelectedCheckmark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "These borders create the faux checkmark when the checkbox toggle is in the checked state.", ".alias": { "value": "#FFFFFF" }, "name": "colorBorderToggleChecked" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "value": "rgb(0, 112, 210)", "comment": "Our product brand blue.", ".alias": { "value": "#0070D2" }, "name": "colorStrokeBrand" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "value": "rgb(0, 112, 210)", "comment": "Hover stroke color for our product brand blue.", ".alias": { "value": "#0070D2" }, "name": "colorStrokeBrandHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "value": "rgb(22, 50, 92)", "comment": "Active stroke color for our product brand blue.", ".alias": { "value": "#16325C" }, "name": "colorStrokeBrandActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "value": "rgb(224, 229, 238)", "comment": "Disabled stroke color.", ".alias": { "value": "#E0E5EE" }, "name": "colorStrokeDisabled" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "value": "rgb(159, 170, 181)", "comment": "Stroke color for our global header buttons.", ".alias": { "value": "#9FAAB5" }, "name": "colorStrokeHeaderButton" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(244, 246, 249)", "comment": "Default background color for the whole app.", ".alias": { "value": "#F4F6F9" }, "name": "colorBackground" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(253, 253, 253)", "comment": "Second default background color for the app.", ".alias": { "value": "#FDFDFD" }, "name": "colorBackgroundAlt" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(238, 241, 246)", "comment": "Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.", ".alias": { "value": "#EEF1F6" }, "name": "colorBackgroundAlt2" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(22, 50, 92)", "comment": "Alternative background color for dark portions of the app.", ".alias": { "value": "#16325C" }, "name": "colorBackgroundAltInverse" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(244, 246, 249)", "comment": "Used as the background color for the hover state on rows or items on list-like components.", ".alias": { "value": "#F4F6F9" }, "name": "colorBackgroundRowHover" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(238, 241, 246)", "comment": "Used as the background color for the active state on rows or items on list-like components.", ".alias": { "value": "#EEF1F6" }, "name": "colorBackgroundRowActive" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(240, 248, 252)", "comment": "Used as the background color for selected rows or items on list-like components.", ".alias": { "value": "#F0F8FC" }, "name": "colorBackgroundRowSelected" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(217, 255, 223)", "comment": "Used as the background color for the new state on rows or items on list-like components.", ".alias": { "value": "#D9FFDF" }, "name": "colorBackgroundRowNew" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(6, 28, 63)", "comment": "Default background color for dark portions of the app (like Stage Left or tooltips).", ".alias": { "value": "#061C3F" }, "name": "colorBackgroundInverse" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(84, 105, 141)", "comment": "Secondary top bar background color (child browser, file preview, etc.)", ".alias": { "value": "#54698D" }, "name": "colorBackgroundBrowser" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(0, 112, 210)", "comment": "Background color for default mobile chrome (ex. global header)", ".alias": { "value": "#0070D2" }, "name": "colorBackgroundChromeMobile" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Background color for default desktop chrome (ex. global header)", ".alias": { "value": "#FFFFFF" }, "name": "colorBackgroundChromeDesktop" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(255, 154, 60)", "comment": "Background color for UI elements related to the concept of an external user or customer.", ".alias": { "value": "#FF9A3C" }, "name": "colorBackgroundCustomer" }, { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgb(250, 255,