@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1,983 lines • 107 kB
JSON
{
"aliases": {
"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)"
},
"BRAND_LIGHT_ACTIVE": {
"value": "#e3e5ed"
},
"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"
},
"BRAND_BACKGROUND_PRIMARY": {
"value": "#b0c4df"
},
"BLACK_TRANSPARENT_30": {
"value": "rgba(0, 0, 0, 0.30)"
},
"BRAND_PRIMARY": {
"value": "#1589ee"
},
"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"
},
"BRAND_CONTRAST_ACTIVE": {
"value": "#0d0e12"
},
"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"
},
"BRAND_DARK": {
"value": "#182337"
},
"PALETTE_COOL_GRAY_8": {
"value": "#919297"
},
"BRAND_ACCESSIBLE": {
"value": "#0070d2"
},
"PALETTE_WARM_GRAY_5": {
"value": "#dddbda"
},
"BLACK_TRANSPARENT_24": {
"value": "rgba(0, 0, 0, 0.24)"
},
"BRAND_BACKGROUND_DARK": {
"value": "#195594"
},
"PALETTE_COOL_GRAY_9": {
"value": "#6B6D70"
},
"PALETTE_WARM_GRAY_6": {
"value": "#c9c7c5"
},
"PALETTE_WARM_GRAY_7": {
"value": "#b0adab"
},
"BRAND_TEXT_LINK_ACTIVE": {
"value": "#005fb2"
},
"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)"
},
"BRAND_DISABLED": {
"value": "#c9c7c5"
},
"BLACK_TRANSPARENT_07": {
"value": "rgba(0, 0, 0, 0.07)"
},
"PALETTE_LIGHT_GRAY_TRANSPARENT_80": {
"value": "rgba(255, 255, 255, 0.8)"
},
"BRAND_TEXT_LINK": {
"value": "#006DCC"
},
"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)"
},
"BRAND_ACCESSIBLE_ACTIVE": {
"value": "#005fb2"
},
"BRAND_DARK_ACTIVE": {
"value": "#253045"
},
"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)"
},
"BRAND_CONTRAST": {
"value": "#1a1b1e"
},
"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"
},
"BRAND_PRIMARY_ACTIVE": {
"value": "#007add"
},
"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)"
},
"BRAND_LIGHT": {
"value": "#f4f6fe"
},
"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"
},
"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%)"
},
"SPACING_X_SMALL": {
"value": "0.5rem"
},
"SPACING_XXX_SMALL": {
"value": "0.125rem"
},
"SPACING_XX_SMALL": {
"value": "0.25rem"
},
"SPACING_SMALL": {
"value": "0.75rem"
},
"SPACING_MEDIUM": {
"value": "1rem"
},
"SPACING_NONE": {
"value": "0"
},
"SPACING_X_LARGE": {
"value": "2rem"
},
"SPACING_XX_LARGE": {
"value": "3rem"
},
"SPACING_LARGE": {
"value": "1.5rem"
},
"FONT_SIZE_1": {
"value": "0.625rem"
},
"FONT_SIZE_2": {
"value": "0.75rem"
},
"FONT_SIZE_3": {
"value": "0.8125rem"
},
"FONT_SIZE_4": {
"value": "0.875rem"
},
"FONT_SIZE_5": {
"value": "1rem"
},
"FONT_SIZE_6": {
"value": "1.125rem"
},
"FONT_SIZE_7": {
"value": "1.25rem"
},
"FONT_SIZE_8": {
"value": "1.5rem"
},
"FONT_SIZE_9": {
"value": "1.75rem"
},
"FONT_SIZE_10": {
"value": "2rem"
},
"FONT_SIZE_11": {
"value": "2.625rem"
}
},
"props": {
"AVATAR_GROUP_COLOR_BACKGROUND_LIGHTEST": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "White avatar group background color.",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "AVATAR_GROUP_COLOR_BACKGROUND_LIGHTEST"
},
"AVATAR_GROUP_COLOR_BACKGROUND_INVERSE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#706e6b",
"comment": "Dark gray avatar group background color.",
"originalValue": "{!PALETTE_GRAY_9}",
"name": "AVATAR_GROUP_COLOR_BACKGROUND_INVERSE"
},
"BADGE_COLOR_BACKGROUND_LIGHTEST": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "White badge background color.",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "BADGE_COLOR_BACKGROUND_LIGHTEST"
},
"BADGE_COLOR_BACKGROUND_INVERSE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#706e6b",
"comment": "Dark gray badge background color.",
"originalValue": "{!PALETTE_GRAY_9}",
"name": "BADGE_COLOR_BACKGROUND_INVERSE"
},
"BRAND_BAND_DEFAULT_IMAGE": {
"scope": "component",
"type": "string",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "",
"originalValue": "",
"name": "BRAND_BAND_DEFAULT_IMAGE"
},
"BRAND_BAND_COLOR_BACKGROUND_PRIMARY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "transparent",
"originalValue": "transparent",
"name": "BRAND_BAND_COLOR_BACKGROUND_PRIMARY"
},
"BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "transparent",
"originalValue": "transparent",
"name": "BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT"
},
"BRAND_BAND_COLOR_BACKGROUND_SECONDARY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "transparent",
"originalValue": "transparent",
"name": "BRAND_BAND_COLOR_BACKGROUND_SECONDARY"
},
"BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "transparent",
"originalValue": "transparent",
"name": "BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT"
},
"BRAND_BAND_IMAGE_HEIGHT_SMALL": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "6rem",
"originalValue": "6rem",
"name": "BRAND_BAND_IMAGE_HEIGHT_SMALL"
},
"BRAND_BAND_IMAGE_HEIGHT_MEDIUM": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "12.5rem",
"originalValue": "12.5rem",
"name": "BRAND_BAND_IMAGE_HEIGHT_MEDIUM"
},
"BRAND_BAND_IMAGE_HEIGHT_LARGE": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "18.75rem",
"originalValue": "18.75rem",
"name": "BRAND_BAND_IMAGE_HEIGHT_LARGE"
},
"BRAND_BAND_SCRIM_HEIGHT": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"*width",
"*height"
],
"value": "3.125rem",
"originalValue": "3.125rem",
"name": "BRAND_BAND_SCRIM_HEIGHT"
},
"TEMPLATE_GUTTERS": {
"scope": "component",
"category": "spacing",
"type": "size",
"cssProperties": [
"margin*",
"padding*"
],
"value": "0",
"originalValue": "0",
"name": "TEMPLATE_GUTTERS"
},
"TEMPLATE_PROFILE_GUTTERS": {
"scope": "component",
"category": "spacing",
"type": "size",
"cssProperties": [
"margin*",
"padding*"
],
"value": "0",
"originalValue": "0",
"name": "TEMPLATE_PROFILE_GUTTERS"
},
"BUTTON_ICON_COLOR_BORDER_PRIMARY": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "BUTTON_ICON_COLOR_BORDER_PRIMARY"
},
"BUTTON_ICON_BOUNDARY_TOUCH": {
"scope": "component",
"type": "sizing",
"category": "height",
"cssProperties": [
"width",
"height"
],
"value": "2.75rem",
"originalValue": "2.75rem",
"name": "BUTTON_ICON_BOUNDARY_TOUCH"
},
"BUTTON_COLOR_BORDER_PRIMARY": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#D8DDE6",
"originalValue": "{!GEYSER}",
"name": "BUTTON_COLOR_BORDER_PRIMARY"
},
"BUTTON_COLOR_BORDER_BRAND_PRIMARY": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#0070D2",
"deprecated": true,
"originalValue": "{!SCIENCE_BLUE}",
"name": "BUTTON_COLOR_BORDER_BRAND_PRIMARY"
},
"BUTTON_COLOR_BORDER_SECONDARY": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "rgba(255, 255, 255, 0.80)",
"deprecated": true,
"originalValue": "{!WHITE_TRANSPARENT_80}",
"name": "BUTTON_COLOR_BORDER_SECONDARY"
},
"BUTTON_BORDER_RADIUS": {
"scope": "component",
"type": "size",
"category": "radius",
"cssProperties": [
"border*radius"
],
"value": ".25rem",
"originalValue": ".25rem",
"name": "BUTTON_BORDER_RADIUS"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS": {
"originalValue": "{!LINK_WATER}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT_FOCUS",
"value": "#F4F6F9",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button - focus state"
},
"BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY": {
"originalValue": "{!SCIENCE_BLUE}",
"name": "BUTTON_COLOR_BACKGROUND_BRAND_PRIMARY",
"value": "#0070D2",
"deprecated": true,
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Use BRAND_ACCESSIBLE to pick up theming capabilities"
},
"COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED": {
"originalValue": "{!TRANSPARENT}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_INVERSE_DISABLED",
"value": "transparent",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Disabled button backgrounds on inverse/dark backgrounds"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER": {
"originalValue": "{!LINK_WATER}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT_HOVER",
"value": "#F4F6F9",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button - hover state"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT": {
"originalValue": "{!WHITE}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT",
"value": "#FFFFFF",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button"
},
"COLOR_BACKGROUND_BUTTON_ICON_DISABLED": {
"originalValue": "{!WHITE}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON_DISABLED",
"value": "#FFFFFF",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button - disabled state"
},
"COLOR_BACKGROUND_BUTTON_ICON_FOCUS": {
"originalValue": "{!LINK_WATER}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON_FOCUS",
"value": "#F4F6F9",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button - focus state"
},
"BUTTON_COLOR_BACKGROUND_SECONDARY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "rgba(255, 255, 255, 0.80)",
"deprecated": true,
"originalValue": "{!WHITE_TRANSPARENT_80}",
"name": "BUTTON_COLOR_BACKGROUND_SECONDARY"
},
"COLOR_BACKGROUND_BUTTON_BRAND_DISABLED": {
"originalValue": "{!STEAM}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_BRAND_DISABLED",
"value": "#E0E5EE",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable primary button - disabled state"
},
"COLOR_BACKGROUND_BUTTON_BRAND_HOVER": {
"originalValue": "{!ENDEAVOUR}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_BRAND_HOVER",
"value": "#005FB2",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable primary button - hover state"
},
"COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE": {
"originalValue": "{!BLACK_TRANSPARENT_24}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_INVERSE_ACTIVE",
"value": "rgba(0, 0, 0, 0.24)",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Active button backgrounds on inverse backgrounds on mobile"
},
"COLOR_BACKGROUND_BUTTON_ICON_HOVER": {
"originalValue": "{!LINK_WATER}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON_HOVER",
"value": "#F4F6F9",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button - hover state"
},
"COLOR_BACKGROUND_BUTTON_BRAND": {
"originalValue": "{!SCIENCE_BLUE}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_BRAND",
"value": "#0070D2",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable primary button"
},
"COLOR_BACKGROUND_BUTTON_ICON": {
"originalValue": "{!TRANSPARENT}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON",
"value": "transparent",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED": {
"originalValue": "{!WHITE}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT_DISABLED",
"value": "#FFFFFF",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button - disabled state"
},
"COLOR_BACKGROUND_BUTTON_ICON_ACTIVE": {
"originalValue": "{!WHITE_LILAC}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_ICON_ACTIVE",
"value": "#EEF1F6",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Background color for icon-only button - active state"
},
"COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE": {
"originalValue": "{!MIDNIGHT_BLUE}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE",
"value": "#00396B",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Brandable primary button - active state"
},
"COLOR_BACKGROUND_BUTTON_INVERSE": {
"originalValue": "{!TRANSPARENT}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_INVERSE",
"value": "transparent",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Button backgrounds on inverse/dark backgrounds"
},
"BUTTON_COLOR_BACKGROUND_PRIMARY": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"originalValue": "{!WHITE}",
"name": "BUTTON_COLOR_BACKGROUND_PRIMARY"
},
"COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE": {
"originalValue": "{!WHITE_LILAC}",
"access": "global",
"name": "COLOR_BACKGROUND_BUTTON_DEFAULT_ACTIVE",
"value": "#EEF1F6",
"scope": "component",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"type": "color",
"category": "background-color",
"comment": "Default secondary button - active state"
},
"LINE_HEIGHT_BUTTON": {
"originalValue": "1.875rem",
"access": "global",
"name": "LINE_HEIGHT_BUTTON",
"value": "1.875rem",
"scope": "component",
"cssProperties": [
"font",
"*height",
"bottom"
],
"type": "number",
"category": "line-height",
"comment": "Line heights for regular buttons"
},
"LINE_HEIGHT_BUTTON_SMALL": {
"originalValue": "1.75rem",
"access": "global",
"name": "LINE_HEIGHT_BUTTON_SMALL",
"value": "1.75rem",
"scope": "component",
"cssProperties": [
"font",
"*height"
],
"type": "number",
"category": "line-height",
"comment": "Line heights for small buttons"
},
"BUTTON_LINE_HEIGHT_TOUCH": {
"originalValue": "2.65rem",
"name": "BUTTON_LINE_HEIGHT_TOUCH",
"value": "2.65rem",
"deprecated": true,
"scope": "component",
"cssProperties": [
"font",
"*height"
],
"type": "number",
"category": "line-height",
"comment": "Line height for touch screens"
},
"BUTTON_COLOR_TEXT_PRIMARY": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#FFFFFF",
"originalValue": "{!WHITE}",
"name": "BUTTON_COLOR_TEXT_PRIMARY"
},
"CARD_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "Default Card component background color.",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "CARD_COLOR_BACKGROUND"
},
"CARD_COLOR_BORDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "#dddbda",
"originalValue": "{!PALETTE_GRAY_5}",
"name": "CARD_COLOR_BORDER"
},
"CARD_FOOTER_COLOR_BORDER": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*",
"box-shadow"
],
"value": "transparent",
"originalValue": "transparent",
"name": "CARD_FOOTER_COLOR_BORDER"
},
"CARD_SHADOW": {
"scope": "component",
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "none",
"originalValue": "none",
"name": "CARD_SHADOW"
},
"CARD_FONT_WEIGHT": {
"scope": "component",
"category": "font",
"type": "font-weight",
"cssProperties": [
"font",
"font-weight"
],
"value": "400",
"comment": "Use for active tab.",
"originalValue": "400",
"name": "CARD_FONT_WEIGHT"
},
"CARD_FOOTER_MARGIN": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0.75rem",
"originalValue": "{!SPACING_SMALL}",
"name": "CARD_FOOTER_MARGIN"
},
"CARD_BODY_PADDING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0 1rem",
"originalValue": "0 {!SPACING_MEDIUM}",
"name": "CARD_BODY_PADDING"
},
"CARD_WRAPPER_SPACING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "1rem",
"originalValue": "{!SPACING_MEDIUM}",
"name": "CARD_WRAPPER_SPACING"
},
"CARD_HEADER_PADDING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0.75rem 1rem 0",
"originalValue": "{!SPACING_SMALL} {!SPACING_MEDIUM} 0",
"name": "CARD_HEADER_PADDING"
},
"CARD_SPACING_LARGE": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "1.5rem",
"originalValue": "{!SPACING_LARGE}",
"name": "CARD_SPACING_LARGE"
},
"CARD_HEADER_MARGIN": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0 0 0.75rem",
"originalValue": "0 0 {!SPACING_SMALL}",
"name": "CARD_HEADER_MARGIN"
},
"CARD_SPACING_MARGIN": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "Use for vertical spacing between cards",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "1rem",
"originalValue": "{!SPACING_MEDIUM}",
"name": "CARD_SPACING_MARGIN"
},
"CARD_FOOTER_PADDING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0 1rem 0.75rem",
"originalValue": "0 {!SPACING_MEDIUM} {!SPACING_SMALL}",
"name": "CARD_FOOTER_PADDING"
},
"CARD_SPACING_SMALL": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0.75rem",
"originalValue": "{!SPACING_SMALL}",
"name": "CARD_SPACING_SMALL"
},
"CARD_FOOTER_TEXT_ALIGN": {
"scope": "component",
"category": "text",
"type": "text-align",
"cssProperties": [
"text-align"
],
"value": "right",
"originalValue": "right",
"name": "CARD_FOOTER_TEXT_ALIGN"
},
"CAROUSEL_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "Default background for carousel card",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "CAROUSEL_COLOR_BACKGROUND"
},
"CAROUSEL_INDICATOR_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "Default background for carousel navigation indicators",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND"
},
"CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#fafaf9",
"comment": "Default hover background for carousel navigation indicators",
"originalValue": "{!PALETTE_GRAY_2}",
"name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_HOVER"
},
"CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#005FB2",
"comment": "Default focus background for carousel navigation indicators",
"originalValue": "{!ENDEAVOUR}",
"name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_FOCUS"
},
"CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#0070D2",
"comment": "Default background for active state on carousel navigation indicators",
"originalValue": "{!SCIENCE_BLUE}",
"name": "CAROUSEL_INDICATOR_COLOR_BACKGROUND_ACTIVE"
},
"CAROUSEL_INDICATOR_WIDTH": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1rem",
"comment": "Default width for carousel indicator width",
"originalValue": "1rem",
"name": "CAROUSEL_INDICATOR_WIDTH"
},
"CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#F2F2F3",
"comment": "Inbound chat message background color.",
"originalValue": "{!PALETTE_COOL_GRAY_3}",
"name": "CHAT_MESSAGE_COLOR_BACKGROUND_INBOUND"
},
"CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#005FB2",
"comment": "Outbound chat message background color.",
"originalValue": "{!ENDEAVOUR}",
"name": "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND"
},
"CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#6B6D70",
"comment": "Outbound agent chat message background color.",
"originalValue": "{!PALETTE_COOL_GRAY_9}",
"name": "CHAT_MESSAGE_COLOR_BACKGROUND_OUTBOUND_AGENT"
},
"CHAT_MESSAGE_COLOR_BACKGROUND_STATUS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "Status chat message background color.",
"originalValue": "{!PALETTE_COOL_GRAY_1}",
"name": "CHAT_MESSAGE_COLOR_BACKGROUND_STATUS"
},
"LINE_HEIGHT_TOGGLE": {
"scope": "component",
"category": "line-height",
"type": "number",
"cssProperties": [
"font",
"*height"
],
"value": "1.3rem",
"comment": "Line heights for toggle buttons",
"originalValue": "1.3rem",
"name": "LINE_HEIGHT_TOGGLE"
},
"SQUARE_TOGGLE_SLIDER": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1.25rem",
"comment": "Slider size for toggle.",
"originalValue": "1.25rem",
"name": "SQUARE_TOGGLE_SLIDER"
},
"WIDTH_TOGGLE": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "3rem",
"comment": "Slider width.",
"originalValue": "3rem",
"name": "WIDTH_TOGGLE"
},
"HEIGHT_TOGGLE": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "1.5rem",
"comment": "Slider height.",
"originalValue": "1.5rem",
"name": "HEIGHT_TOGGLE"
},
"COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*"
],
"value": "#fafaf9",
"originalValue": "{!PALETTE_GRAY_2}",
"name": "COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND"
},
"COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR": {
"scope": "component",
"type": "color",
"category": "border-color",
"cssProperties": [
"border*"
],
"value": "#514f4d",
"originalValue": "{!PALETTE_GRAY_10}",
"name": "COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR"
},
"COLOR_PICKER_SWATCH_SHADOW": {
"scope": "component",
"type": "box-shadow",
"category": "shadow",
"cssProperties": [
"box-shadow"
],
"value": "inset 0 0 1px rgba(0,0,0,0.4)",
"originalValue": "inset 0 0 1px rgba(0,0,0,0.4)",
"name": "COLOR_PICKER_SWATCH_SHADOW"
},
"COLOR_PICKER_INPUT_CUSTOM_HEX_FONT_SIZE": {
"scope": "component",
"category": "font-size",
"type": "font-size",
"cssProperties": [
"font",
"font-size"
],
"value": "0.75rem",
"originalValue": "0.75rem",
"name": "COLOR_PICKER_INPUT_CUSTOM_HEX_FONT_SIZE"
},
"COLOR_PICKER_SELECTOR_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "14rem",
"originalValue": "14rem",
"name": "COLOR_PICKER_SELECTOR_WIDTH"
},
"COLOR_PICKER_SWATCHES_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "13.3rem",
"originalValue": "13.3rem",
"name": "COLOR_PICKER_SWATCHES_WIDTH"
},
"COLOR_PICKER_RANGE_HEIGHT": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "5rem",
"originalValue": "5rem",
"name": "COLOR_PICKER_RANGE_HEIGHT"
},
"COLOR_PICKER_SLIDER_HEIGHT": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "1.5rem",
"originalValue": "1.5rem",
"name": "COLOR_PICKER_SLIDER_HEIGHT"
},
"COLOR_PICKER_THUMB_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "0.375rem",
"originalValue": "0.375rem",
"name": "COLOR_PICKER_THUMB_WIDTH"
},
"COLOR_PICKER_RANGE_INDICATOR_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "0.75rem",
"originalValue": "0.75rem",
"name": "COLOR_PICKER_RANGE_INDICATOR_SIZE"
},
"COLOR_PICKER_INPUT_CUSTOM_HEX_WIDTH": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "4.2rem",
"originalValue": "4.2rem",
"name": "COLOR_PICKER_INPUT_CUSTOM_HEX_WIDTH"
},
"COLOR_PICKER_SWATCH_SIZE": {
"scope": "component",
"category": "sizing",
"type": "size",
"cssProperties": [
"*height",
"*width"
],
"value": "1.25rem",
"originalValue": "1.25rem",
"name": "COLOR_PICKER_SWATCH_SIZE"
},
"TABLE_COLOR_BACKGROUND_STRIPES": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#fafaf9",
"comment": "Alternating row background color for tables",
"originalValue": "{!PALETTE_GRAY_2}",
"name": "TABLE_COLOR_BACKGROUND_STRIPES"
},
"TABLE_COLOR_BACKGROUND_HEADER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "Default background color for table headers",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "TABLE_COLOR_BACKGROUND_HEADER"
},
"TABLE_COLOR_BACKGROUND_HEADER_HOVER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#fafaf9",
"comment": "Hover state for table header cells",
"originalValue": "{!PALETTE_GRAY_2}",
"name": "TABLE_COLOR_BACKGROUND_HEADER_HOVER"
},
"TABLE_COLOR_BACKGROUND_HEADER_FOCUS": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "Focused state for table header cells",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "TABLE_COLOR_BACKGROUND_HEADER_FOCUS"
},
"TABLE_COLOR_BACKGROUND_HEADER_RESIZABLE_HANDLE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#b0adab",
"comment": "Resizable handle color for table header cells",
"originalValue": "{!PALETTE_GRAY_7}",
"name": "TABLE_COLOR_BACKGROUND_HEADER_RESIZABLE_HANDLE"
},
"TABLE_BORDER_RADIUS": {
"scope": "component",
"type": "size",
"category": "radius",
"cssProperties": [
"border*radius"
],
"value": "0",
"originalValue": "0",
"name": "TABLE_BORDER_RADIUS"
},
"TABLE_CELL_SPACING": {
"scope": "component",
"category": "spacing",
"type": "size",
"comment": "",
"cssProperties": [
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"border*",
"*width",
"*height",
"box-shadow"
],
"value": "0.5rem",
"originalValue": "{!SPACING_X_SMALL}",
"name": "TABLE_CELL_SPACING"
},
"TABLE_COLOR_TEXT_HEADER": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color",
"fill"
],
"value": "#514f4d",
"originalValue": "{!PALETTE_GRAY_10}",
"name": "TABLE_COLOR_TEXT_HEADER"
},
"DATEPICKER_COLOR_TEXT_DAY_ADJACENT_MONTH": {
"scope": "component",
"type": "color",
"category": "text-color",
"cssProperties": [
"color"
],
"value": "#706e6b",
"originalValue": "{!PALETTE_GRAY_9}",
"name": "DATEPICKER_COLOR_TEXT_DAY_ADJACENT_MONTH"
},
"COLOR_BACKGROUND_DOCKED_PANEL_HEADER": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "Docked panel header’s background color.",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "COLOR_BACKGROUND_DOCKED_PANEL_HEADER"
},
"COLOR_BACKGROUND_DOCKED_PANEL": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#FFFFFF",
"comment": "Docked panel’s background color when open.",
"originalValue": "{!PALETTE_GRAY_1}",
"name": "COLOR_BACKGROUND_DOCKED_PANEL"
},
"HEIGHT_DOCKED_BAR": {
"scope": "component",
"type": "size",
"category": "sizing",
"cssProperties": [
"font",
"font-size",
"*width",
"*height",
"flex",
"top",
"right",
"bottom",
"left",
"margin*",
"padding*",
"transform"
],
"value": "2.5rem",
"comment": "Height of the docked bar.",
"originalValue": "2.5rem",
"name": "HEIGHT_DOCKED_BAR"
},
"UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_BADGE": {
"scope": "component",
"type": "color",
"category": "background-color",
"cssProperties": [
"background*",
"border*",
"box-shadow"
],
"value": "#D4504C",
"comment": "Utility bar notifications badge background color.",
"originalValue": "{!VALENCIA}",
"name": "UTILITY_BAR_COLOR_BACKGROUND_NOTIFICATION_BADGE"
},
"UTILITY