@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
822 lines • 20.6 kB
JSON
{
"aliases": {
"ALUMINIUM_BLUE": {
"value": "hsl(210, 25%, 48%)"
},
"FOREST_GREEN": {
"value": "#027E46"
},
"KOROMIKO": {
"value": "#FFB75D"
},
"RAIN_PURPLE_900": {
"value": "hsl(257, 39.2%, 42%)"
},
"SUNSHADE": {
"value": "#FF9E2C"
},
"FUN_GREEN": {
"value": "#028048"
},
"ATHENS_BLUE": {
"value": "hsl(210, 42.36%, 96.53%)"
},
"ROME_BLUE": {
"value": "hsl(210, 30.56%, 82.72%)"
},
"EMERALD": {
"value": "#4BCA81"
},
"MALIBU": {
"value": "#5EB4FF"
},
"SEA_GREEN_100": {
"value": "hsl(177, 64.7%, 51.9%)"
},
"GEYSER": {
"value": "#D8DDE6"
},
"RHINO_BLUE": {
"value": "hsl(210, 42.86%, 28%)"
},
"SALEM": {
"value": "#04844B"
},
"SEA_GREEN_300": {
"value": "hsl(177, 61.3%, 47.1%)"
},
"REGENT_GREY": {
"value": "#7E8C99"
},
"MIDNIGHT_BLUE": {
"value": "#00396B"
},
"SEA_GREEN_500": {
"value": "hsl(177, 62.6%, 41.2%)"
},
"GHOST_BLUE": {
"value": "hsl(210, 25.93%, 59.5%)"
},
"SKY_BLUE_100": {
"value": "hsl(208, 93.3%, 70.1%)"
},
"SEA_GREEN_700": {
"value": "hsl(177, 65.3%, 35.7%)"
},
"CERULEAN": {
"value": "#00A1DF"
},
"SNOWY_MINT": {
"value": "#D9FFDF"
},
"KAITOKE_GREEN": {
"value": "#004a29"
},
"SKY_BLUE_300": {
"value": "hsl(208, 89.6%, 61.4%)"
},
"SEA_GREEN_900": {
"value": "hsl(177, 65.3%, 30.9%)"
},
"ENDEAVOUR": {
"value": "#005FB2"
},
"TANGERINE": {
"value": "#FF9A3C"
},
"SANTORINI": {
"value": "#006DCC"
},
"DEEP_BLUSH": {
"value": "#EA8288"
},
"SKY_BLUE_500": {
"value": "hsl(208, 84.3%, 55.3%)"
},
"TOREA_BAY": {
"value": "#0B2399"
},
"DEEP_COVE": {
"value": "#061C3F"
},
"AZURE": {
"value": "#1589EE"
},
"BISCAY": {
"value": "#16325C"
},
"MAROON": {
"value": "#870500"
},
"SKY_BLUE_700": {
"value": "hsl(208, 73.9%, 48.3%)"
},
"STEAM": {
"value": "#E0E5EE"
},
"CINNAMON": {
"value": "#844800"
},
"VALENCIA": {
"value": "#D4504C"
},
"SKY_BLUE_900": {
"value": "hsl(208, 77%, 41.8%)"
},
"LINK_WATER": {
"value": "#F4F6F9"
},
"TRANSPARENT": {
"value": "transparent"
},
"TABASCO": {
"value": "#A61A14"
},
"BIGSTONE_BLUE": {
"value": "hsl(210, 66.67%, 12%)"
},
"SPIDER_BLUE": {
"value": "hsl(210, 28.57%, 72%)"
},
"SCIENCE_BLUE": {
"value": "#0070D2"
},
"LEMON_CHIFFON": {
"value": "#FAFFBD"
},
"SAN_JUAN": {
"value": "#2A426C"
},
"RAIN_PURPLE_100": {
"value": "hsl(257, 83.1%, 76.3%)"
},
"MEXICAN_RED": {
"value": "#A12B2B"
},
"ROLLINGSTONE_BLUE": {
"value": "hsl(210, 33.33%, 37.5%)"
},
"WHITE_LILAC": {
"value": "#EEF1F6"
},
"FLUSH_MAHOGANY": {
"value": "#C23934"
},
"GRADIENT_SHADOW_BOTTOM": {
"value": "linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)"
},
"RAIN_PURPLE_300": {
"value": "hsl(257, 72.2%, 67.6%)"
},
"GORSE": {
"value": "#fff03f"
},
"REGENT_GREY_TRANSPARENT_80": {
"value": "rgba(126, 140, 153, 0.80)"
},
"ZODIAC_BLUE": {
"value": "hsl(210, 53.85%, 19.5%)"
},
"RAIN_PURPLE_500": {
"value": "hsl(257, 61.2%, 58.8%)"
},
"PIPPIN": {
"value": "#FFDDE1"
},
"SPARTA_BLUE": {
"value": "hsl(210, 32.2%, 92.62%)"
},
"PATTEN_BLUE": {
"value": "#D8EDFF"
},
"RAIN_PURPLE_700": {
"value": "hsl(257, 50.2%, 50%)"
},
"PALETTE_DARK_GRAY_TRANSPARENT_40": {
"value": "rgba(8, 7, 7, 0.4)"
},
"WHITE_TRANSPARENT_30": {
"value": "rgba(255, 255, 255, 0.30)"
},
"PALETTE_GRAY_8": {
"value": "#969492"
},
"WHITE_TRANSPARENT_75": {
"value": "rgba(255, 255, 255, 0.75)"
},
"WHITE_TRANSPARENT_97": {
"value": "rgba(255, 255, 255, 0.97)"
},
"PALETTE_DARK_GRAY_TRANSPARENT_30": {
"value": "rgba(8, 7, 7, 0.3)"
},
"WHITE_TRANSPARENT_20": {
"value": "rgba(255, 255, 255, 0.20)"
},
"PALETTE_GRAY_9": {
"value": "#706e6b"
},
"PALETTE_DARK_GRAY_TRANSPARENT_20": {
"value": "rgba(8, 7, 7, 0.2)"
},
"WHITE_TRANSPARENT_10": {
"value": "rgba(255, 255, 255, 0.10)"
},
"PALETTE_DARK_GRAY_TRANSPARENT_10": {
"value": "rgba(8, 7, 7, 0.1)"
},
"BLACK_TRANSPARENT_90": {
"value": "rgba(0, 0, 0, 0.90)"
},
"PALETTE_WARM_GRAY_10": {
"value": "#514f4d"
},
"BLACK_TRANSPARENT_80": {
"value": "rgba(0, 0, 0, 0.80)"
},
"PALETTE_WARM_GRAY_11": {
"value": "#3e3e3c"
},
"BLACK_TRANSPARENT_70": {
"value": "rgba(0, 0, 0, 0.70)"
},
"PALETTE_WARM_GRAY_12": {
"value": "#2B2826"
},
"BLACK_TRANSPARENT_60": {
"value": "rgba(0, 0, 0, 0.60)"
},
"PALETTE_COOL_GRAY_1": {
"value": "#FFFFFF"
},
"WHITE_TRANSPARENT_15": {
"value": "rgba(255, 255, 255, 0.15)"
},
"PALETTE_WARM_GRAY_13": {
"value": "#080707"
},
"BLACK_TRANSPARENT_50": {
"value": "rgba(0, 0, 0, 0.50)"
},
"PALETTE_COOL_GRAY_2": {
"value": "#F9F9FA"
},
"WHITE": {
"value": "#FFFFFF"
},
"BLACK_TRANSPARENT_40": {
"value": "rgba(0, 0, 0, 0.40)"
},
"PALETTE_COOL_GRAY_10": {
"value": "#4E5356"
},
"PALETTE_COOL_GRAY_3": {
"value": "#F2F2F3"
},
"BLACK_TRANSPARENT_30": {
"value": "rgba(0, 0, 0, 0.30)"
},
"PALETTE_COOL_GRAY_11": {
"value": "#3E4041"
},
"PALETTE_COOL_GRAY_4": {
"value": "#E9EAEC"
},
"PALETTE_WARM_GRAY_1": {
"value": "#FFFFFF"
},
"BLACK_TRANSPARENT_20": {
"value": "rgba(0, 0, 0, 0.20)"
},
"PALETTE_COOL_GRAY_12": {
"value": "#292C2E"
},
"PALETTE_COOL_GRAY_5": {
"value": "#D9DBDD"
},
"PALETTE_WARM_GRAY_2": {
"value": "#fafaf9"
},
"BLACK_TRANSPARENT_10": {
"value": "rgba(0, 0, 0, 0.10)"
},
"PALETTE_COOL_GRAY_13": {
"value": "#070808"
},
"PALETTE_COOL_GRAY_6": {
"value": "#C4C6CA"
},
"PALETTE_WARM_GRAY_3": {
"value": "#f3f2f2"
},
"PALETTE_COOL_GRAY_7": {
"value": "#ABADB0"
},
"PALETTE_WARM_GRAY_4": {
"value": "#ecebea"
},
"PALETTE_COOL_GRAY_8": {
"value": "#919297"
},
"PALETTE_WARM_GRAY_5": {
"value": "#dddbda"
},
"BLACK_TRANSPARENT_24": {
"value": "rgba(0, 0, 0, 0.24)"
},
"PALETTE_COOL_GRAY_9": {
"value": "#6B6D70"
},
"PALETTE_WARM_GRAY_6": {
"value": "#c9c7c5"
},
"PALETTE_WARM_GRAY_7": {
"value": "#b0adab"
},
"PALETTE_WARM_GRAY_8": {
"value": "#969492"
},
"BLACK_TRANSPARENT_05": {
"value": "rgba(0, 0, 0, 0.05)"
},
"BLACK_TRANSPARENT_16": {
"value": "rgba(0, 0, 0, 0.16)"
},
"PALETTE_WARM_GRAY_9": {
"value": "#706e6b"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_90": {
"value": "rgba(255, 255, 255, 0.9)"
},
"BLACK_TRANSPARENT_07": {
"value": "rgba(0, 0, 0, 0.07)"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_80": {
"value": "rgba(255, 255, 255, 0.8)"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_70": {
"value": "rgba(255, 255, 255, 0.7)"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_60": {
"value": "rgba(255, 255, 255, 0.6)"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_50": {
"value": "rgba(255, 255, 255, 0.5)"
},
"PALETTE_GRAY_10": {
"value": "#514f4d"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_40": {
"value": "rgba(255, 255, 255, 0.4)"
},
"PALETTE_GRAY_11": {
"value": "#3e3e3c"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_30": {
"value": "rgba(255, 255, 255, 0.3)"
},
"PALETTE_GRAY_12": {
"value": "#2B2826"
},
"PALETTE_GRAY_1": {
"value": "#FFFFFF"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_20": {
"value": "rgba(255, 255, 255, 0.2)"
},
"WHITE_TRANSPARENT_90": {
"value": "rgba(255, 255, 255, 0.90)"
},
"PALETTE_GRAY_13": {
"value": "#080707"
},
"PALETTE_GRAY_2": {
"value": "#fafaf9"
},
"WHITE_TRANSPARENT_80": {
"value": "rgba(255, 255, 255, 0.80)"
},
"PALETTE_DARK_GRAY_TRANSPARENT_90": {
"value": "rgba(8, 7, 7, 0.9)"
},
"PALETTE_GRAY_3": {
"value": "#f3f2f2"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_10": {
"value": "rgba(255, 255, 255, 0.1)"
},
"PALETTE_DARK_GRAY_TRANSPARENT_80": {
"value": "rgba(8, 7, 7, 0.8)"
},
"PALETTE_GRAY_4": {
"value": "#ecebea"
},
"PALETTE_DARK_GRAY_TRANSPARENT_70": {
"value": "rgba(8, 7, 7, 0.7)"
},
"PALETTE_GRAY_5": {
"value": "#dddbda"
},
"WHITE_TRANSPARENT_60": {
"value": "rgba(255, 255, 255, 0.60)"
},
"PALETTE_DARK_GRAY_TRANSPARENT_60": {
"value": "rgba(8, 7, 7, 0.6)"
},
"PALETTE_GRAY_6": {
"value": "#c9c7c5"
},
"WHITE_TRANSPARENT_50": {
"value": "rgba(255, 255, 255, 0.50)"
},
"PALETTE_DARK_GRAY_TRANSPARENT_50": {
"value": "rgba(8, 7, 7, 0.5)"
},
"WHITE_TRANSPARENT_40": {
"value": "rgba(255, 255, 255, 0.40)"
},
"PALETTE_GRAY_7": {
"value": "#b0adab"
},
"BLACK": {
"value": "#000000"
}
},
"props": {
"COLOR_BACKGROUND_ROW_ACTIVE": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#ecebea",
"comment": "Used as the background color for the active state on rows or items on list-like components.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_4}",
"name": "COLOR_BACKGROUND_ROW_ACTIVE"
},
"COLOR_BACKGROUND_LIGHT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#FFFFFF",
"comment": "Light variant of COLOR_BACKGROUND.",
"release": "2.8.0",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "COLOR_BACKGROUND_LIGHT"
},
"COLOR_BACKGROUND_ROW_HOVER": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#f3f2f2",
"comment": "Used as the background color for the hover state on rows or items on list-like components.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_3}",
"name": "COLOR_BACKGROUND_ROW_HOVER"
},
"COLOR_BACKGROUND_INFO": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#706e6b",
"comment": "Background color for UI elements related to providing neutral information (not error, success, or warning).",
"originalValue": "{!PALETTE_GRAY_9}",
"name": "COLOR_BACKGROUND_INFO"
},
"COLOR_BACKGROUND_STENCIL": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#f3f2f2",
"comment": "Used as background for loading stencils on white background.",
"originalValue": "{!PALETTE_GRAY_3}",
"name": "COLOR_BACKGROUND_STENCIL"
},
"COLOR_BACKGROUND": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#f3f2f2",
"comment": "Default background color for the whole app.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_3}",
"name": "COLOR_BACKGROUND"
},
"COLOR_BACKGROUND_DARK": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#ecebea",
"comment": "Light variant of COLOR_BACKGROUND.",
"release": "2.8.0",
"originalValue": "{!PALETTE_GRAY_4}",
"name": "COLOR_BACKGROUND_DARK"
},
"COLOR_BACKGROUND_STENCIL_ALT": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#ecebea",
"comment": "Used as an alternate background for loading stencils on gray backgrounds.",
"originalValue": "{!PALETTE_GRAY_4}",
"name": "COLOR_BACKGROUND_STENCIL_ALT"
},
"COLOR_BACKGROUND_ROW_SELECTED": {
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow",
"text-shadow"
],
"value": "#ecebea",
"comment": "Used as the background color for selected rows or items on list-like components.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_4}",
"name": "COLOR_BACKGROUND_ROW_SELECTED"
},
"COLOR_BORDER": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow",
"background*"
],
"value": "#dddbda",
"comment": "Default border color for UI elements.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_5}",
"name": "COLOR_BORDER"
},
"COLOR_BORDER_SEPARATOR": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#f3f2f2",
"comment": "Lightest separator color - used as default separator on white backgrounds.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_3}",
"name": "COLOR_BORDER_SEPARATOR"
},
"COLOR_BORDER_SEPARATOR_ALT": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#dddbda",
"comment": "Medium separator color - used as default separator on light gray backgrounds.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_5}",
"name": "COLOR_BORDER_SEPARATOR_ALT"
},
"COLOR_BORDER_SEPARATOR_ALT_2": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#c9c7c5",
"comment": "Darkest separator color - used as an alternate separator color when more differentiation is desired.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_6}",
"name": "COLOR_BORDER_SEPARATOR_ALT_2"
},
"COLOR_BORDER_INFO": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#706e6b",
"comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).",
"originalValue": "{!PALETTE_GRAY_9}",
"name": "COLOR_BORDER_INFO"
},
"COLOR_BORDER_OFFLINE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#3e3e3c",
"comment": "Border color for UI elements related to the offline state.",
"originalValue": "{!PALETTE_GRAY_11}",
"name": "COLOR_BORDER_OFFLINE"
},
"COLOR_BORDER_SELECTION_ACTIVE": {
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#f3f2f2",
"specificity": "builders",
"comment": "Used to delineate the boundary of a component that is being clicked. Specific to builders.",
"originalValue": "{!PALETTE_GRAY_3}",
"name": "COLOR_BORDER_SELECTION_ACTIVE"
},
"COLOR_TEXT_ACTION_LABEL": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#3e3e3c",
"comment": "Action label text color",
"access": "global",
"originalValue": "{!PALETTE_GRAY_11}",
"name": "COLOR_TEXT_ACTION_LABEL"
},
"COLOR_TEXT_ACTION_LABEL_ACTIVE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#080707",
"comment": "Action label active text color",
"access": "global",
"originalValue": "{!PALETTE_GRAY_13}",
"name": "COLOR_TEXT_ACTION_LABEL_ACTIVE"
},
"COLOR_TEXT_DEFAULT": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#080707",
"comment": "Body text color",
"access": "global",
"originalValue": "{!PALETTE_GRAY_13}",
"name": "COLOR_TEXT_DEFAULT"
},
"COLOR_TEXT_PRIMARY": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#080707",
"comment": "Primary body text color",
"originalValue": "{!PALETTE_GRAY_13}",
"name": "COLOR_TEXT_PRIMARY"
},
"COLOR_TEXT_WEAK": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#3e3e3c",
"comment": "Color for text that is purposefully de-emphasized to create visual hierarchy.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_11}",
"name": "COLOR_TEXT_WEAK"
},
"COLOR_TEXT_PLACEHOLDER_INVERSE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#ecebea",
"comment": "Input placeholder text on dark backgrounds.",
"originalValue": "{!PALETTE_GRAY_4}",
"name": "COLOR_TEXT_PLACEHOLDER_INVERSE"
},
"COLOR_TEXT_LINK": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#006DCC",
"comment": "Link text (508)",
"access": "global",
"originalValue": "{!SANTORINI}",
"name": "COLOR_TEXT_LINK"
},
"COLOR_TEXT_ICON_DEFAULT": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#706e6b",
"comment": "Default icon color.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_9}",
"name": "COLOR_TEXT_ICON_DEFAULT"
},
"COLOR_TEXT_INVERSE": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#FFFFFF",
"comment": "Inverse text color for dark backgrounds",
"access": "global",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "COLOR_TEXT_INVERSE"
},
"COLOR_TEXT_PLACEHOLDER": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#3e3e3c",
"comment": "Input placeholder text.",
"access": "global",
"originalValue": "{!PALETTE_GRAY_11}",
"name": "COLOR_TEXT_PLACEHOLDER"
},
"COLOR_TEXT_INVERSE_WEAK": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#b0adab",
"comment": "Weak inverse text color for dark backgrounds",
"access": "global",
"originalValue": "{!PALETTE_GRAY_7}",
"name": "COLOR_TEXT_INVERSE_WEAK"
},
"COLOR_TEXT_LABEL": {
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#3e3e3c",
"comment": "Text color for field labels.",
"originalValue": "{!PALETTE_GRAY_11}",
"name": "COLOR_TEXT_LABEL"
}
}
}