@salesforce-ux/design-system

{ "properties": [ { "access": "global", "release": "2.7.0", "name": "varSpacingXLarge", "value": "32", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size X Large" }, { "access": "global", "release": "2.7.0", "name": "varSpacingHorizontalSmall", "value": "12", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingHorizontalXxLarge", "value": "48", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XX Large" }, { "category": "spacing", "type": "size", "comment": "Constant spacing token for size X small", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "8", "access": "global", "name": "spacingXSmall" }, { "category": "spacing", "type": "size", "comment": "Constant spacing token for size XXX small", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "2", "access": "global", "name": "spacingXxxSmall" }, { "category": "spacing", "type": "size", "comment": "Constant spacing token for size XX small", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "4", "access": "global", "name": "spacingXxSmall" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "1px", "name": "borderWidthThin" }, { "access": "global", "release": "2.7.0", "name": "varSpacingVerticalLarge", "value": "24", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Large" }, { "access": "global", "release": "2.7.0", "name": "varSpacingLarge", "value": "24", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size Large" }, { "access": "global", "release": "2.7.0", "name": "varSpacingMedium", "value": "16", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size Medium" }, { "access": "global", "release": "2.7.0", "name": "varSpacingVerticalMedium", "value": "16", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Medium" }, { "access": "global", "release": "2.7.0", "name": "varSpacingVerticalXSmall", "value": "8", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size X Small" }, { "category": "spacing", "type": "size", "comment": "Constant spacing token for size Small", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "12", "access": "global", "name": "spacingSmall" }, { "access": "global", "release": "2.7.0", "name": "varSpacingVerticalXxxSmall", "value": "2", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XXX Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingXSmall", "value": "8", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size X Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingXxxSmall", "value": "2", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size XXX Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingHorizontalXLarge", "value": "32", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size X Large" }, { "access": "global", "release": "2.7.0", "name": "varSpacingHorizontalXxSmall", "value": "4", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XX Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingXxLarge", "value": "48", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size XX Large" }, { "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": "Constant spacing token for size Medium", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "16", "access": "global", "name": "spacingMedium" }, { "access": "global", "release": "2.7.0", "name": "varSpacingVerticalXxLarge", "value": "48", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XX Large" }, { "access": "global", "release": "2.7.0", "name": "varSpacingVerticalSmall", "value": "12", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingSmall", "value": "12", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size Small" }, { "category": "spacing", "type": "size", "comment": "Constant spacing token for 0", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "0", "name": "spacingNone" }, { "access": "global", "release": "2.7.0", "name": "varSpacingHorizontalLarge", "value": "24", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Large" }, { "category": "spacing", "type": "size", "comment": "Constant spacing token for size X Large", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "32", "access": "global", "name": "spacingXLarge" }, { "category": "spacing", "type": "size", "comment": "Constant spacing token for size XX Large", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "48", "name": "spacingXxLarge" }, { "access": "global", "release": "2.7.0", "name": "varSpacingHorizontalXxxSmall", "value": "2", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XXX Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingHorizontalXSmall", "value": "8", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size X Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingXxSmall", "value": "4", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "type": "size", "category": "spacing", "comment": "Variable spacing token for size XX Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingHorizontalMedium", "value": "16", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Medium" }, { "access": "global", "release": "2.7.0", "name": "varSpacingVerticalXxSmall", "value": "4", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XX Small" }, { "access": "global", "release": "2.7.0", "name": "varSpacingVerticalXLarge", "value": "32", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size X Large" }, { "category": "spacing", "type": "size", "comment": "Constant spacing token for size Large", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "24", "access": "global", "name": "spacingLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "10", "comment": "Constant typography token for font size 1", "name": "fontSize1" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "comment": "Constant typography token for font size 2", "name": "fontSize2" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "13", "comment": "Constant typography token for font size 3", "name": "fontSize3" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "32", "comment": "Variable typography token for font size 10", "name": "varFontSize10" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "14", "comment": "Constant typography token for font size 4", "name": "fontSize4" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "42", "comment": "Variable typography token for font size 11", "name": "varFontSize11" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "16", "comment": "Constant typography token for font size 5", "name": "fontSize5" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "comment": "Constant typography token for font size 6", "name": "fontSize6" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "20", "comment": "Constant typography token for font size 7", "name": "fontSize7" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "24", "comment": "Constant typography token for font size 8", "name": "fontSize8" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "10", "comment": "Variable typography token for font size 1", "name": "varFontSize1" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "28", "comment": "Constant typography token for font size 9", "name": "fontSize9" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "comment": "Variable typography token for font size 2", "name": "varFontSize2" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "13", "comment": "Variable typography token for font size 3", "name": "varFontSize3" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "32", "comment": "Constant typography token for font size 10", "name": "fontSize10" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "14", "comment": "Variable typography token for font size 4", "name": "varFontSize4" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "42", "comment": "Constant typography token for font size 11", "name": "fontSize11" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "16", "comment": "Variable typography token for font size 5", "name": "varFontSize5" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "comment": "Variable typography token for font size 6", "name": "varFontSize6" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "20", "comment": "Variable typography token for font size 7", "name": "varFontSize7" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "24", "comment": "Variable typography token for font size 8", "name": "varFontSize8" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "28", "comment": "Variable typography token for font size 9", "name": "varFontSize9" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.25", "comment": "Unitless line-heights for reusability", "access": "global", "name": "lineHeightHeading" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.5", "comment": "Unitless line-heights for reusability", "access": "global", "name": "lineHeightText" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1", "comment": "Remove extra leading. Unitless line-heights for reusability", "access": "global", "name": "lineHeightReset" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "40", "comment": "Line heights for tabs", "access": "global", "name": "lineHeightTab" }, { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.5", "comment": "Variable unitless line-heights for reusability", "name": "varLineHeightText" }, { "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": "48", "comment": "Generic sizing token scale for UI components.", "name": "sizeXxxSmall" }, { "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "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": "32", "comment": "Variable medium boundary for square icons", "name": "varSquareIconMediumBoundary" }, { "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": "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": "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": "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": "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": "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": "Alternate medium tap target size", "name": "squareIconMediumContentAlt" }, { "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", "name": "componentSpacingMargin" }, { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "16", "name": "componentSpacingPadding" }, { "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": "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": "26", "comment": "Minimum height of a pill.", "name": "heightPill" }, { "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": "38", "comment": "Use squareIconMediumBoundary", "deprecated": true, "name": "squareIconMedium" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(0, 112, 210)", "comment": "Brand fill color", "name": "fillBrand" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(0, 95, 178)", "comment": "Brand hover fill color", "name": "fillBrandHover" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(22, 50, 92)", "comment": "Brand active fill color", "name": "fillBrandActive" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(176, 173, 171)", "comment": "Header button icon color", "name": "fillHeaderButton" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(0, 95, 178)", "comment": "Hovered header button icon color", "name": "fillHeaderButtonHover" }, { "category": "fill", "type": "color", "cssProperties": [ "background", "color", "fill" ], "value": "rgb(0, 112, 210)", "comment": "Focused header button icon color", "name": "fillHeaderButtonFocus" }, { "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": "18", "comment": "Medium headings.", "deprecated": true, "name": "fontSizeHeadingMedium" }, { "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": "13", "comment": "Small body text.", "deprecated": true, "name": "fontSizeTextSmall" }, { "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": "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", "comment": "Extra large headings.", "deprecated": true, "name": "fontSizeHeadingXLarge" }, { "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.", "deprecated": true, "name": "fontSizeTextXxSmall" }, { "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", "comment": "Large headings.", "deprecated": true, "name": "fontSizeHeadingLarge" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "20", "comment": "Extra large body text.", "deprecated": true, "name": "fontSizeTextXLarge" }, { "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": "10", "comment": "Extra Extra small headings.", "deprecated": true, "name": "fontSizeHeadingXxSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "comment": "Extra small headings.", "deprecated": true, "name": "fontSizeHeadingXSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "18", "comment": "Large body text.", "deprecated": true, "name": "fontSizeTextLarge" }, { "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", "comment": "Medium body text.", "deprecated": true, "name": "fontSizeTextMedium" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "12", "comment": "Extra small body text.", "deprecated": true, "name": "fontSizeTextXSmall" }, { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "14", "comment": "Small headings.", "deprecated": true, "name": "fontSizeHeadingSmall" }, { "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.", "name": "fontFamily" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", "name": "fontFamilyText" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", "name": "fontFamilyHeading" }, { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "Consolas, Menlo, Monaco, Courier, monospace", "name": "fontFamilyMonospace" }, { "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" ], "value": "rgb(255, 255, 255)", "comment": "The borders to create the checkmark", "name": "colorBorderInputCheckboxSelectedCheckmark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.15)", "comment": "Border color for disabled inverse button.", "name": "colorBorderButtonInverseDisabled" }, { "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", "name": "colorBorderIconInverseHintHover" }, { "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.", "name": "colorBorderErrorDark" }, { "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", "name": "colorBorderIconInverseHint" }, { "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.", "name": "colorBorderBrandDark" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(107, 109, 112)", "comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).", "name": "colorBorderInfo" }, { "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.", "name": "colorBorderWarning" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(255, 255, 255)", "comment": "Border color for an active tab.", "name": "colorBorderTabActive" }, { "type": "color", "category": "border-color", "cssProperties": [ "stroke" ], "value": "rgb(233, 234, 236)", "comment": "Disabled stroke color.", "deprecated": true, "name": "colorStrokeDisabled" }, { "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.", "name": "colorBorderDestructiveHover" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "background*" ], "value": "rgb(217, 219, 221)", "comment": "Default border color for UI elements.", "name": "colorBorder" }, { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow" ], "value": "rgb(196, 198, 202)", "comment": "Border color on disabled form elements.", "name": "colorBorderInputDisabled" }, { "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.", "name": "colorBorderSuccessDark" }, { "type": "color", "category": "b