{ "aliases": { "SANS_SERIF": { "value": "'Salesforce Sans', Arial, sans-serif" }, "MONOSPACE": { "value": "Consolas, Menlo, Monaco, Courier, monospace" }, "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" }, "BORDER_RADIUS_SMALL": { "value": "0.125rem" }, "BORDER_RADIUS_MEDIUM": { "value": "0.25rem" }, "BORDER_RADIUS_LARGE": { "value": "0.5rem" }, "BORDER_RADIUS_CIRCLE": { "value": "50%" }, "BORDER_RADIUS_PILL": { "value": "15rem" }, "OFFSET_NONE": { "value": "0" }, "OFFSET_X_SMALL": { "value": 2 }, "OFFSET_SMALL": { "value": 3 }, "OFFSET_MEDIUM": { "value": 4 }, "OFFSET_LARGE": { "value": 8 }, "OFFSET_X_LARGE": { "value": 16 }, "OFFSET_XX_LARGE": { "value": 32 }, "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" }, "FONT_WEIGHT_LIGHT": { "value": "300" }, "FONT_WEIGHT_REGULAR": { "value": "400" }, "FONT_WEIGHT_BOLD": { "value": "700" }, "SIZE_SQUARE_XX_LARGE": { "value": "2rem" }, "SIZE_X_SMALL": { "value": "12rem" }, "SIZE_XXX_SMALL": { "value": "3rem" }, "SIZE_SQUARE_SMALL": { "value": "0.875rem" }, "SIZE_XX_SMALL": { "value": "6rem" }, "SIZE_SMALL": { "value": "15rem" }, "SIZE_SQUARE_XX_SMALL": { "value": "0.75rem" }, "SIZE_SQUARE_XXX_LARGE": { "value": "2.25rem" }, "SIZE_SQUARE_X_LARGE": { "value": "1.5rem" }, "SIZE_MEDIUM": { "value": "20rem" }, "SIZE_X_LARGE": { "value": "40rem" }, "SIZE_SQUARE_LARGE": { "value": "1.25rem" }, "SIZE_SQUARE_MEDIUM": { "value": "1rem" }, "SIZE_XX_LARGE": { "value": "60rem" }, "SIZE_SQUARE_X_SMALL": { "value": "0.8125rem" }, "SIZE_SQUARE_XXX_SMALL": { "value": "0.5rem" }, "SIZE_LARGE": { "value": "25rem" }, "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" } }, "props": { "FONT_FAMILY": { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "deprecated": true, "value": "'Salesforce Sans', Arial, sans-serif", "comment": "Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.", "originalValue": "{!SANS_SERIF}", "name": "FONT_FAMILY" }, "COLOR_BACKGROUND_ROW_ACTIVE": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#F2F2F3", "comment": "Used as the background color for the active state on rows or items on list-like components.", "access": "global", "originalValue": "{!PALETTE_COOL_GRAY_3}", "name": "COLOR_BACKGROUND_ROW_ACTIVE" }, "COLOR_BACKGROUND_LIGHT": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFFFFF", "comment": "Light variant of COLOR_BACKGROUND.", "release": "2.8.0", "originalValue": "{!PALETTE_COOL_GRAY_1}", "name": "COLOR_BACKGROUND_LIGHT" }, "COLOR_BACKGROUND_ROW_HOVER": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#F9F9FA", "comment": "Used as the background color for the hover state on rows or items on list-like components.", "access": "global", "originalValue": "{!PALETTE_COOL_GRAY_2}", "name": "COLOR_BACKGROUND_ROW_HOVER" }, "COLOR_BACKGROUND_ERROR_DARK": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#C23934", "comment": "Dark color for UI elements related to errors. Accessible with white text.", "originalValue": "{!FLUSH_MAHOGANY}", "name": "COLOR_BACKGROUND_ERROR_DARK" }, "COLOR_BACKGROUND_INFO": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#6B6D70", "comment": "Background color for UI elements related to providing neutral information (not error, success, or warning).", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_BACKGROUND_INFO" }, "COLOR_BACKGROUND_ALT_INVERSE": { "originalValue": "{!BISCAY}", "access": "global", "release": "1.0.0", "name": "COLOR_BACKGROUND_ALT_INVERSE", "value": "#16325C", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Alternative background color for dark portions of the app." }, "COLOR_BACKGROUND_ROW_NEW": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#D9FFDF", "comment": "Used as the background color for the new state on rows or items on list-like components.", "access": "global", "originalValue": "{!SNOWY_MINT}", "name": "COLOR_BACKGROUND_ROW_NEW" }, "COLOR_BACKGROUND_SUCCESS_DARK": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#04844B", "comment": "Dark color for UI elements that have to do with success. Accessible with white text.", "originalValue": "{!SALEM}", "name": "COLOR_BACKGROUND_SUCCESS_DARK" }, "COLOR_BACKGROUND_STENCIL": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#F2F2F3", "comment": "Used as background for loading stencils on white background.", "originalValue": "{!PALETTE_COOL_GRAY_3}", "name": "COLOR_BACKGROUND_STENCIL" }, "COLOR_BACKGROUND_WARNING": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FFB75D", "comment": "Color for UI elements that have to do with warning.", "originalValue": "{!KOROMIKO}", "name": "COLOR_BACKGROUND_WARNING" }, "COLOR_BACKGROUND_HIGHLIGHT_SEARCH": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#fff03f", "comment": "Background color for highlighting text in search results.", "originalValue": "{!GORSE}", "name": "COLOR_BACKGROUND_HIGHLIGHT_SEARCH" }, "COLOR_BACKGROUND_DESTRUCTIVE_HOVER": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#A61A14", "comment": "Hover color for UI elements related to destructive actions.", "originalValue": "{!TABASCO}", "name": "COLOR_BACKGROUND_DESTRUCTIVE_HOVER" }, "COLOR_BACKGROUND": { "originalValue": "{!PALETTE_COOL_GRAY_2}", "access": "global", "release": "1.0.0", "name": "COLOR_BACKGROUND", "value": "#F9F9FA", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default background color for the whole app." }, "COLOR_BRAND_DARK": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#0070D2", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text.", "access": "global", "originalValue": "{!SCIENCE_BLUE}", "name": "COLOR_BRAND_DARK" }, "COLOR_BACKGROUND_BACKDROP": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "rgba(255, 255, 255, 0.75)", "comment": "The color of the mask overlay that appears when you enter a modal state.", "originalValue": "{!WHITE_TRANSPARENT_75}", "name": "COLOR_BACKGROUND_BACKDROP" }, "COLOR_BACKGROUND_DARK": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#E9EAEC", "comment": "Light variant of COLOR_BACKGROUND.", "release": "2.8.0", "originalValue": "{!PALETTE_COOL_GRAY_4}", "name": "COLOR_BACKGROUND_DARK" }, "COLOR_BRAND": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#1589EE", "comment": "Our product brand blue.", "access": "global", "originalValue": "{!AZURE}", "name": "COLOR_BRAND" }, "COLOR_BACKGROUND_DESTRUCTIVE": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#C23934", "comment": "Color for UI elements related to destructive actions.", "originalValue": "{!FLUSH_MAHOGANY}", "name": "COLOR_BACKGROUND_DESTRUCTIVE" }, "COLOR_BACKGROUND_SUCCESS": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#4BCA81", "comment": "Color for UI elements that have to do with success.", "originalValue": "{!EMERALD}", "name": "COLOR_BACKGROUND_SUCCESS" }, "COLOR_BACKGROUND_WARNING_DARK": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FF9E2C", "comment": "Dark Color for UI elements that have to do with warning.", "originalValue": "{!SUNSHADE}", "name": "COLOR_BACKGROUND_WARNING_DARK" }, "COLOR_BACKGROUND_OFFLINE": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#3E4041", "comment": "Color for UI elements related to the offline state.", "originalValue": "{!PALETTE_COOL_GRAY_11}", "name": "COLOR_BACKGROUND_OFFLINE" }, "COLOR_BACKGROUND_STENCIL_ALT": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#E9EAEC", "comment": "Used as an alternate background for loading stencils on gray backgrounds.", "originalValue": "{!PALETTE_COOL_GRAY_4}", "name": "COLOR_BACKGROUND_STENCIL_ALT" }, "COLOR_BACKGROUND_INVERSE_LIGHT": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#16325C", "comment": "Light variant of COLOR_BACKGROUND_INVERSE.", "release": "2.8.0", "originalValue": "{!BISCAY}", "name": "COLOR_BACKGROUND_INVERSE_LIGHT" }, "COLOR_BACKGROUND_CUSTOMER": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FF9A3C", "comment": "Background color for UI elements related to the concept of an external user or customer.", "originalValue": "{!TANGERINE}", "name": "COLOR_BACKGROUND_CUSTOMER" }, "COLOR_BACKGROUND_ERROR": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#D4504C", "comment": "Color for UI elements related to errors.", "originalValue": "{!VALENCIA}", "name": "COLOR_BACKGROUND_ERROR" }, "COLOR_BACKGROUND_ALT": { "originalValue": "{!WHITE}", "access": "global", "release": "1.0.0", "name": "COLOR_BACKGROUND_ALT", "value": "#FFFFFF", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Second default background color for the app." }, "COLOR_BACKGROUND_SUCCESS_DARKER": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#004a29", "comment": "Darker color for UI elements that have to do with success. Accessible with white text.", "originalValue": "{!KAITOKE_GREEN}", "name": "COLOR_BACKGROUND_SUCCESS_DARKER" }, "COLOR_BACKGROUND_ROW_SELECTED": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#E9EAEC", "comment": "Used as the background color for selected rows or items on list-like components.", "access": "global", "originalValue": "{!PALETTE_COOL_GRAY_4}", "name": "COLOR_BACKGROUND_ROW_SELECTED" }, "COLOR_BRAND_DARKER": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#005FB2", "comment": "Our product brand blue, darkened even further.", "originalValue": "{!ENDEAVOUR}", "name": "COLOR_BRAND_DARKER" }, "COLOR_BACKGROUND_SELECTION": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#D8EDFF", "comment": "Background color for text selected with a mouse.", "originalValue": "{!PATTEN_BLUE}", "name": "COLOR_BACKGROUND_SELECTION" }, "COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#870500", "comment": "Active color for UI elements related to destructive actions.", "originalValue": "{!MAROON}", "name": "COLOR_BACKGROUND_DESTRUCTIVE_ACTIVE" }, "COLOR_BACKGROUND_INVERSE": { "originalValue": "{!DEEP_COVE}", "access": "global", "release": "1.0.0", "name": "COLOR_BACKGROUND_INVERSE", "value": "#061C3F", "cssProperties": [ "background*", "border*", "box-shadow" ], "type": "color", "category": "background-color", "comment": "Default background color for dark portions of the app (like Stage Left or tooltips)." }, "COLOR_BACKGROUND_HIGHLIGHT": { "type": "color", "category": "background-color", "cssProperties": [ "background*", "border*", "box-shadow" ], "value": "#FAFFBD", "comment": "Background color for highlighting UI elements.", "access": "global", "originalValue": "{!LEMON_CHIFFON}", "name": "COLOR_BACKGROUND_HIGHLIGHT" }, "COLOR_BORDER_ERROR_DARK": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#EA8288", "comment": "Dark alternative border color for UI elements related to errors.", "originalValue": "{!DEEP_BLUSH}", "name": "COLOR_BORDER_ERROR_DARK" }, "COLOR_BORDER_BRAND_DARK": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#0070D2", "comment": "Our product brand blue, darkened to meet accessibility color contrast ratios with white text.", "originalValue": "{!SCIENCE_BLUE}", "name": "COLOR_BORDER_BRAND_DARK" }, "COLOR_BORDER_INFO": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#6B6D70", "comment": "Border color for UI elements related to providing neutral information (not error, success, or warning).", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_BORDER_INFO" }, "COLOR_BORDER_WARNING": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#FFB75D", "comment": "Border color for UI elements that have to do with warnings.", "access": "global", "originalValue": "{!KOROMIKO}", "name": "COLOR_BORDER_WARNING" }, "COLOR_BORDER_DESTRUCTIVE_HOVER": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#A61A14", "comment": "Hover border color for UI elements that have to do with destructive actions.", "originalValue": "{!TABASCO}", "name": "COLOR_BORDER_DESTRUCTIVE_HOVER" }, "COLOR_BORDER": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "background*" ], "value": "#D9DBDD", "comment": "Default border color for UI elements.", "access": "global", "originalValue": "{!PALETTE_COOL_GRAY_5}", "name": "COLOR_BORDER" }, "COLOR_BORDER_SUCCESS_DARK": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#04844B", "comment": "Dark alternative border color for UI elements that have to do with success.", "originalValue": "{!SALEM}", "name": "COLOR_BORDER_SUCCESS_DARK" }, "COLOR_BORDER_DESTRUCTIVE": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#C23934", "comment": "Border color for UI elements that have to do with destructive actions.", "originalValue": "{!FLUSH_MAHOGANY}", "name": "COLOR_BORDER_DESTRUCTIVE" }, "COLOR_BORDER_SEPARATOR_ALT_2": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#C4C6CA", "comment": "Darkest separator color - used as an alternate separator color when more differentiation is desired.", "originalValue": "{!PALETTE_COOL_GRAY_6}", "name": "COLOR_BORDER_SEPARATOR_ALT_2" }, "COLOR_BORDER_OFFLINE": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#3E4041", "comment": "Border color for UI elements related to the offline state.", "originalValue": "{!PALETTE_COOL_GRAY_11}", "name": "COLOR_BORDER_OFFLINE" }, "COLOR_BORDER_SUCCESS": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#4BCA81", "comment": "Border color for UI elements that have to do with success.", "originalValue": "{!EMERALD}", "name": "COLOR_BORDER_SUCCESS" }, "COLOR_BORDER_SEPARATOR": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#F9F9FA", "comment": "Lightest separator color - used as default separator on white backgrounds.", "access": "global", "originalValue": "{!PALETTE_COOL_GRAY_2}", "name": "COLOR_BORDER_SEPARATOR" }, "COLOR_BORDER_BRAND": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#1589EE", "comment": "Our product brand blue.", "access": "global", "originalValue": "{!AZURE}", "name": "COLOR_BORDER_BRAND" }, "COLOR_BORDER_SELECTION_ACTIVE": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#F9F9FA", "specificity": "builders", "comment": "Used to delineate the boundary of a component that is being clicked. Specific to builders.", "originalValue": "{!PALETTE_COOL_GRAY_2}", "name": "COLOR_BORDER_SELECTION_ACTIVE" }, "COLOR_BORDER_ERROR": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#C23934", "comment": "Border color for UI elements that have to do with errors.", "access": "global", "originalValue": "{!FLUSH_MAHOGANY}", "name": "COLOR_BORDER_ERROR" }, "COLOR_BORDER_SELECTION_HOVER": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#1589EE", "specificity": "builders", "comment": "Used to delineate the boundary of a component that is being hovered over. Specific to builders.", "originalValue": "{!AZURE}", "name": "COLOR_BORDER_SELECTION_HOVER" }, "COLOR_BORDER_ROW_SELECTED_HOVER": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#1589EE", "comment": "Used as the border color for the hover state on selected rows or items on list-like components.", "access": "global", "originalValue": "{!AZURE}", "name": "COLOR_BORDER_ROW_SELECTED_HOVER" }, "COLOR_BORDER_CUSTOMER": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#FF9A3C", "comment": "Border color for UI elements related to the concept of an external user or customer.", "originalValue": "{!TANGERINE}", "name": "COLOR_BORDER_CUSTOMER" }, "COLOR_BORDER_SELECTION": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#0070D2", "specificity": "builders", "comment": "Used to delineate the boundary of a selected component. Specific to builders.", "originalValue": "{!SCIENCE_BLUE}", "name": "COLOR_BORDER_SELECTION" }, "COLOR_BORDER_ROW_SELECTED": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#0070D2", "comment": "Used as the border color for selected rows or items on list-like components.", "access": "global", "originalValue": "{!SCIENCE_BLUE}", "name": "COLOR_BORDER_ROW_SELECTED" }, "COLOR_BORDER_SEPARATOR_ALT": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#D9DBDD", "comment": "Medium separator color - used as default separator on light gray backgrounds.", "access": "global", "originalValue": "{!PALETTE_COOL_GRAY_5}", "name": "COLOR_BORDER_SEPARATOR_ALT" }, "COLOR_BORDER_INVERSE": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#061C3F", "comment": "Border color to match UI elements using color-background-inverse.", "originalValue": "{!DEEP_COVE}", "name": "COLOR_BORDER_INVERSE" }, "COLOR_BORDER_DESTRUCTIVE_ACTIVE": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#870500", "comment": "Active border color for UI elements that have to do with destructive actions.", "originalValue": "{!MAROON}", "name": "COLOR_BORDER_DESTRUCTIVE_ACTIVE" }, "COLOR_BORDER_ERROR_ALT": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#EA8288", "comment": "Alternative border color for UI elements related to errors.", "originalValue": "{!DEEP_BLUSH}", "name": "COLOR_BORDER_ERROR_ALT" }, "COLOR_BORDER_SEPARATOR_INVERSE": { "type": "color", "category": "border-color", "cssProperties": [ "border*", "box-shadow", "outline", "outline-color" ], "value": "#2A426C", "comment": "Used as a separator on dark backgrounds, such as stage left navigation.", "access": "global", "originalValue": "{!SAN_JUAN}", "name": "COLOR_BORDER_SEPARATOR_INVERSE" }, "BORDER_RADIUS_SMALL": { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0.125rem", "access": "global", "originalValue": "{!BORDER_RADIUS_SMALL}", "name": "BORDER_RADIUS_SMALL" }, "BORDER_RADIUS_MEDIUM": { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0.25rem", "comment": "Icons in lists, record home icon, unbound input elements", "access": "global", "originalValue": "{!BORDER_RADIUS_MEDIUM}", "name": "BORDER_RADIUS_MEDIUM" }, "BORDER_RADIUS_LARGE": { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "0.5rem", "access": "global", "originalValue": "{!BORDER_RADIUS_LARGE}", "name": "BORDER_RADIUS_LARGE" }, "BORDER_RADIUS_PILL": { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "15rem", "access": "global", "originalValue": "{!BORDER_RADIUS_PILL}", "name": "BORDER_RADIUS_PILL" }, "BORDER_RADIUS_CIRCLE": { "type": "size", "category": "radius", "cssProperties": [ "border*radius" ], "value": "50%", "comment": "Circle for global use, action icon bgd shape", "access": "global", "originalValue": "{!BORDER_RADIUS_CIRCLE}", "name": "BORDER_RADIUS_CIRCLE" }, "SHADOW_DRAG": { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 4px 0 rgba(0, 0, 0, 0.40)", "comment": "Shadow for drag-n-drop.", "access": "global", "originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_40}", "name": "SHADOW_DRAG" }, "SHADOW_DROP_DOWN": { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 3px 0 rgba(0, 0, 0, 0.16)", "comment": "Shadow for drop down.", "access": "global", "originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}", "name": "SHADOW_DROP_DOWN" }, "SHADOW_HEADER": { "type": "box-shadow", "category": "shadow", "cssProperties": [ "box-shadow" ], "value": "0 2px 4px rgba(0, 0, 0, 0.07)", "comment": "Shadow for header.", "access": "global", "originalValue": "{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07}", "name": "SHADOW_HEADER" }, "FONT_FAMILY_TEXT": { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", "originalValue": "{!SANS_SERIF}", "name": "FONT_FAMILY_TEXT" }, "FONT_FAMILY_HEADING": { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "'Salesforce Sans', Arial, sans-serif", "originalValue": "{!SANS_SERIF}", "name": "FONT_FAMILY_HEADING" }, "FONT_FAMILY_MONOSPACE": { "category": "font", "type": "font", "cssProperties": [ "font", "font-family" ], "value": "Consolas, Menlo, Monaco, Courier, monospace", "originalValue": "{!MONOSPACE}", "name": "FONT_FAMILY_MONOSPACE" }, "FONT_SIZE_1": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.625rem", "comment": "Constant typography token for font size 1", "originalValue": "{!FONT_SIZE_1}", "name": "FONT_SIZE_1" }, "FONT_SIZE_2": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.75rem", "comment": "Constant typography token for font size 2", "originalValue": "{!FONT_SIZE_2}", "name": "FONT_SIZE_2" }, "FONT_SIZE_3": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.8125rem", "comment": "Constant typography token for font size 3", "originalValue": "{!FONT_SIZE_3}", "name": "FONT_SIZE_3" }, "VAR_FONT_SIZE_10": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "2rem", "comment": "Variable typography token for font size 10", "originalValue": "{!FONT_SIZE_10}", "name": "VAR_FONT_SIZE_10" }, "FONT_SIZE_4": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.875rem", "comment": "Constant typography token for font size 4", "originalValue": "{!FONT_SIZE_4}", "name": "FONT_SIZE_4" }, "VAR_FONT_SIZE_11": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "2.625rem", "comment": "Variable typography token for font size 11", "originalValue": "{!FONT_SIZE_11}", "name": "VAR_FONT_SIZE_11" }, "FONT_SIZE_5": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1rem", "comment": "Constant typography token for font size 5", "originalValue": "{!FONT_SIZE_5}", "name": "FONT_SIZE_5" }, "FONT_SIZE_6": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1.125rem", "comment": "Constant typography token for font size 6", "originalValue": "{!FONT_SIZE_6}", "name": "FONT_SIZE_6" }, "FONT_SIZE_7": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1.25rem", "comment": "Constant typography token for font size 7", "originalValue": "{!FONT_SIZE_7}", "name": "FONT_SIZE_7" }, "FONT_SIZE_8": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1.5rem", "comment": "Constant typography token for font size 8", "originalValue": "{!FONT_SIZE_8}", "name": "FONT_SIZE_8" }, "VAR_FONT_SIZE_1": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.625rem", "comment": "Variable typography token for font size 1", "originalValue": "{!FONT_SIZE_1}", "name": "VAR_FONT_SIZE_1" }, "FONT_SIZE_9": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1.75rem", "comment": "Constant typography token for font size 9", "originalValue": "{!FONT_SIZE_9}", "name": "FONT_SIZE_9" }, "VAR_FONT_SIZE_2": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.75rem", "comment": "Variable typography token for font size 2", "originalValue": "{!FONT_SIZE_2}", "name": "VAR_FONT_SIZE_2" }, "VAR_FONT_SIZE_3": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.8125rem", "comment": "Variable typography token for font size 3", "originalValue": "{!FONT_SIZE_3}", "name": "VAR_FONT_SIZE_3" }, "FONT_SIZE_10": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "2rem", "comment": "Constant typography token for font size 10", "originalValue": "{!FONT_SIZE_10}", "name": "FONT_SIZE_10" }, "VAR_FONT_SIZE_4": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "0.875rem", "comment": "Variable typography token for font size 4", "originalValue": "{!FONT_SIZE_4}", "name": "VAR_FONT_SIZE_4" }, "FONT_SIZE_11": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "2.625rem", "comment": "Constant typography token for font size 11", "originalValue": "{!FONT_SIZE_11}", "name": "FONT_SIZE_11" }, "VAR_FONT_SIZE_5": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1rem", "comment": "Variable typography token for font size 5", "originalValue": "{!FONT_SIZE_5}", "name": "VAR_FONT_SIZE_5" }, "VAR_FONT_SIZE_6": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1.125rem", "comment": "Variable typography token for font size 6", "originalValue": "{!FONT_SIZE_6}", "name": "VAR_FONT_SIZE_6" }, "VAR_FONT_SIZE_7": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1.25rem", "comment": "Variable typography token for font size 7", "originalValue": "{!FONT_SIZE_7}", "name": "VAR_FONT_SIZE_7" }, "VAR_FONT_SIZE_8": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1.5rem", "comment": "Variable typography token for font size 8", "originalValue": "{!FONT_SIZE_8}", "name": "VAR_FONT_SIZE_8" }, "VAR_FONT_SIZE_9": { "category": "font-size", "type": "font-size", "cssProperties": [ "font", "font-size" ], "value": "1.75rem", "comment": "Variable typography token for font size 9", "originalValue": "{!FONT_SIZE_9}", "name": "VAR_FONT_SIZE_9" }, "FONT_WEIGHT_LIGHT": { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "300", "comment": "Use for large headings only.", "access": "global", "originalValue": "{!FONT_WEIGHT_LIGHT}", "name": "FONT_WEIGHT_LIGHT" }, "FONT_WEIGHT_REGULAR": { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "400", "comment": "Most all body copy.", "access": "global", "originalValue": "{!FONT_WEIGHT_REGULAR}", "name": "FONT_WEIGHT_REGULAR" }, "FONT_WEIGHT_BOLD": { "category": "font", "type": "font-weight", "cssProperties": [ "font", "font-weight" ], "value": "700", "comment": "Used sparingly for emphasized text within regular body copy.", "access": "global", "originalValue": "{!FONT_WEIGHT_BOLD}", "name": "FONT_WEIGHT_BOLD" }, "ILLUSTRATION_EMPTY_STATE_ASSISTANT": { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-assistant.svg", "originalValue": "/assets/images/illustrations/empty-state-assistant.svg", "name": "ILLUSTRATION_EMPTY_STATE_ASSISTANT" }, "ILLUSTRATION_EMPTY_STATE_EVENTS": { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-events.svg", "originalValue": "/assets/images/illustrations/empty-state-events.svg", "name": "ILLUSTRATION_EMPTY_STATE_EVENTS" }, "ILLUSTRATION_EMPTY_STATE_TASKS": { "type": "string", "category": "illustrations", "value": "/assets/images/illustrations/empty-state-tasks.svg", "originalValue": "/assets/images/illustrations/empty-state-tasks.svg", "name": "ILLUSTRATION_EMPTY_STATE_TASKS" }, "LINE_HEIGHT_HEADING": { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.25", "comment": "Unitless line-heights for reusability", "access": "global", "originalValue": "1.25", "name": "LINE_HEIGHT_HEADING" }, "LINE_HEIGHT_TEXT": { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.5", "comment": "Unitless line-heights for reusability", "access": "global", "originalValue": "1.5", "name": "LINE_HEIGHT_TEXT" }, "LINE_HEIGHT_RESET": { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1", "comment": "Remove extra leading. Unitless line-heights for reusability", "access": "global", "originalValue": "1", "name": "LINE_HEIGHT_RESET" }, "LINE_HEIGHT_TAB": { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "2.5rem", "comment": "Line heights for tabs", "access": "global", "originalValue": "2.5rem", "name": "LINE_HEIGHT_TAB" }, "VAR_LINE_HEIGHT_TEXT": { "category": "line-height", "type": "number", "cssProperties": [ "font", "*height" ], "value": "1.5", "comment": "Variable unitless line-heights for reusability", "originalValue": "1.5", "name": "VAR_LINE_HEIGHT_TEXT" }, "OPACITY_5": { "type": "opacity", "category": "opacity", "cssProperties": [ "opacity" ], "value": "0.5", "comment": "50% transparency of an element", "originalValue": "0.5", "name": "OPACITY_5" }, "OPACITY_8": { "type": "opacity", "category": "opacity", "cssProperties": [ "opacity" ], "value": "0.8", "comment": "80% transparency of an element", "originalValue": "0.8", "name": "OPACITY_8" }, "BRAND_HEADER_CONTRAST_WEAK_DISABLED": { "originalValue": "rgba(166,166,166,0.25)", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_WEAK_DISABLED", "value": "rgba(166,166,166,0.25)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_HEADER_CONTRAST_WEAK" }, "COLOR_GRAY_11": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#3e3e3c", "comment": "Gray Color 11", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_11}", "name": "COLOR_GRAY_11" }, "BRAND_PRIMARY_TRANSPARENT_10": { "originalValue": "rgba(21,137,238,0.1)", "themeable": true, "release": "2.6.0", "name": "BRAND_PRIMARY_TRANSPARENT_10", "value": "rgba(21,137,238,0.1)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY at 10%" }, "COLOR_GRAY_12": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#2B2826", "comment": "Gray Color 12", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_12}", "name": "COLOR_GRAY_12" }, "BRAND_BACKGROUND_DARK_TRANSPARENT": { "originalValue": "rgba(221,219,218,0)", "themeable": true, "release": "2.6.0", "name": "BRAND_BACKGROUND_DARK_TRANSPARENT", "value": "rgba(221,219,218,0)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug" }, "COLOR_GRAY_13": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#080707", "comment": "Gray Color 13", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_13}", "name": "COLOR_GRAY_13" }, "BRAND_HEADER": { "originalValue": "#ffffff", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER", "value": "#ffffff", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Background color a branded app header" }, "BRAND_LIGHT_ACTIVE": { "originalValue": "#e3e5ed", "themeable": true, "release": "2.6.0", "name": "BRAND_LIGHT_ACTIVE", "value": "#e3e5ed", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_LIGHT" }, "BRAND_HEADER_CONTRAST_WARM": { "originalValue": "#BF0201", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_WARM", "value": "#BF0201", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER_CONTRAST that provides a warm color" }, "BRAND_HEADER_ICON_DISABLED": { "originalValue": "rgba(145,145,145,0.25)", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_ICON_DISABLED", "value": "rgba(145,145,145,0.25)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_HEADER_ICON" }, "BRAND_HEADER_CONTRAST_ACTIVE": { "originalValue": "#505050", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_ACTIVE", "value": "#505050", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST" }, "BRAND_BACKGROUND_PRIMARY": { "originalValue": "#fafaf9", "themeable": true, "release": "2.6.0", "name": "BRAND_BACKGROUND_PRIMARY", "value": "#fafaf9", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary page background color" }, "BRAND_PRIMARY": { "originalValue": "#1589ee", "themeable": true, "release": "2.6.0", "name": "BRAND_PRIMARY", "value": "#1589ee", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary brand color" }, "BRAND_HEADER_CONTRAST_WEAK_ACTIVE": { "originalValue": "#818181", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_WEAK_ACTIVE", "value": "#818181", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_WEAK" }, "BRAND_CONTRAST_ACTIVE": { "originalValue": "#0d0e12", "themeable": true, "release": "2.6.0", "name": "BRAND_CONTRAST_ACTIVE", "value": "#0d0e12", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_CONTRAST" }, "BRAND_HEADER_CONTRAST_COOL": { "originalValue": "#005583", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_COOL", "value": "#005583", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER_CONTRAST that provides a cool color" }, "BRAND_HEADER_CONTRAST_INVERSE": { "originalValue": "#ffffff", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_INVERSE", "value": "#ffffff", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER that is accessible with BRAND_HEADER" }, "BRAND_DARK": { "originalValue": "#182337", "themeable": true, "release": "2.6.0", "name": "BRAND_DARK", "value": "#182337", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND that is accessible with light colors" }, "BRAND_ACCESSIBLE": { "originalValue": "#0070d2", "themeable": true, "release": "2.6.0", "name": "BRAND_ACCESSIBLE", "value": "#0070d2", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND that is accessible with white" }, "BRAND_BACKGROUND_DARK": { "originalValue": "#e8e8e8", "themeable": true, "release": "2.6.0", "name": "BRAND_BACKGROUND_DARK", "value": "#e8e8e8", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color" }, "BRAND_TEXT_LINK_ACTIVE": { "originalValue": "#005fb2", "themeable": true, "release": "2.6.0", "name": "BRAND_TEXT_LINK_ACTIVE", "value": "#005fb2", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_TEXT_LINK" }, "COLOR_GRAY_1": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#FFFFFF", "comment": "Gray Color 1", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_1}", "name": "COLOR_GRAY_1" }, "COLOR_GRAY_2": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#fafaf9", "comment": "Gray Color 2", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_2}", "name": "COLOR_GRAY_2" }, "BRAND_HEADER_ICON_ACTIVE": { "originalValue": "#818181", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_ICON_ACTIVE", "value": "#818181", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_ICON" }, "COLOR_GRAY_3": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#f3f2f2", "comment": "Gray Color 3", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_3}", "name": "COLOR_GRAY_3" }, "BRAND_HEADER_ICON": { "originalValue": "#919191", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_ICON", "value": "#919191", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Icons of BRAND_HEADER that is accessible with BRAND_HEADER" }, "BRAND_DISABLED": { "originalValue": "#c9c7c5", "themeable": true, "release": "2.6.0", "name": "BRAND_DISABLED", "value": "#c9c7c5", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Disabled state of BRAND_A11Y" }, "BRAND_TEXT_LINK": { "originalValue": "#006DCC", "themeable": true, "release": "2.6.0", "name": "BRAND_TEXT_LINK", "value": "#006DCC", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Primary text link brand color" }, "COLOR_GRAY_4": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#ecebea", "comment": "Gray Color 4", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_4}", "name": "COLOR_GRAY_4" }, "COLOR_GRAY_5": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#dddbda", "comment": "Gray Color 5", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_5}", "name": "COLOR_GRAY_5" }, "COLOR_GRAY_6": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#c9c7c5", "comment": "Gray Color 6", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_6}", "name": "COLOR_GRAY_6" }, "BRAND_ACCESSIBLE_ACTIVE": { "originalValue": "#005fb2", "themeable": true, "release": "2.6.0", "name": "BRAND_ACCESSIBLE_ACTIVE", "value": "#005fb2", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_A11Y" }, "COLOR_GRAY_7": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#b0adab", "comment": "Gray Color 7", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_7}", "name": "COLOR_GRAY_7" }, "BRAND_DARK_ACTIVE": { "originalValue": "#253045", "themeable": true, "release": "2.6.0", "name": "BRAND_DARK_ACTIVE", "value": "#253045", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_DARK" }, "COLOR_GRAY_8": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#969492", "comment": "Gray Color 8", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_8}", "name": "COLOR_GRAY_8" }, "BRAND_HEADER_CONTRAST_INVERSE_ACTIVE": { "originalValue": "#eeeeee", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_INVERSE_ACTIVE", "value": "#eeeeee", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST" }, "BRAND_HEADER_CONTRAST_COOL_ACTIVE": { "originalValue": "#005583", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_COOL_ACTIVE", "value": "#005583", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_COOL" }, "COLOR_GRAY_9": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#706e6b", "comment": "Gray Color 9", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_9}", "name": "COLOR_GRAY_9" }, "BRAND_CONTRAST": { "originalValue": "#1a1b1e", "themeable": true, "release": "2.6.0", "name": "BRAND_CONTRAST", "value": "#1a1b1e", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND that is accessible with BRAND" }, "BRAND_HEADER_CONTRAST_WEAK": { "originalValue": "#919191", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_WEAK", "value": "#919191", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Weak contrast ratio, useful for iconography" }, "BRAND_PRIMARY_ACTIVE": { "originalValue": "#007add", "themeable": true, "release": "2.6.0", "name": "BRAND_PRIMARY_ACTIVE", "value": "#007add", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_PRIMARY" }, "BRAND_BACKGROUND_PRIMARY_TRANSPARENT": { "originalValue": "rgba(250,250,249,0)", "themeable": true, "release": "2.6.0", "name": "BRAND_BACKGROUND_PRIMARY_TRANSPARENT", "value": "rgba(250,250,249,0)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug" }, "BRAND_HEADER_CONTRAST": { "originalValue": "#5e5e5e", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST", "value": "#5e5e5e", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Variant of BRAND_HEADER that is accessible with BRAND_HEADER" }, "BRAND_PRIMARY_TRANSPARENT": { "originalValue": "rgba(21,137,238,0.1)", "themeable": true, "release": "2.6.0", "name": "BRAND_PRIMARY_TRANSPARENT", "value": "rgba(21,137,238,0.1)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY" }, "BRAND_HEADER_CONTRAST_WARM_ACTIVE": { "originalValue": "#ac0000", "themeable": true, "release": "2.6.0", "name": "BRAND_HEADER_CONTRAST_WARM_ACTIVE", "value": "#ac0000", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Active / Hover state of BRAND_HEADER_CONTRAST_WARM" }, "BRAND_PRIMARY_TRANSPARENT_40": { "originalValue": "rgba(21,137,238,0.4)", "themeable": true, "release": "2.6.0", "name": "BRAND_PRIMARY_TRANSPARENT_40", "value": "rgba(21,137,238,0.4)", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Transparent value of BRAND_PRIMARY at 40%" }, "BRAND_LIGHT": { "originalValue": "#f4f6fe", "themeable": true, "release": "2.6.0", "name": "BRAND_LIGHT", "value": "#f4f6fe", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "type": "color", "category": "color", "comment": "Light variant of BRAND that is accessible with dark colors" }, "COLOR_GRAY_10": { "type": "color", "category": "color", "cssProperties": [ "background-color", "border*color", "box-shadow", "fill", "color" ], "value": "#514f4d", "comment": "Gray Color 10", "release": "2.5.0", "originalValue": "{!PALETTE_GRAY_10}", "name": "COLOR_GRAY_10" }, "SIZE_X_SMALL": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "12rem", "comment": "Generic sizing token scale for UI components.", "access": "global", "originalValue": "{!SIZE_X_SMALL}", "name": "SIZE_X_SMALL" }, "SIZE_XXX_SMALL": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "3rem", "comment": "Generic sizing token scale for UI components.", "originalValue": "{!SIZE_XXX_SMALL}", "name": "SIZE_XXX_SMALL" }, "SQUARE_ICON_UTILITY_LARGE": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1.5rem", "comment": "Large utility icon without border.", "access": "global", "originalValue": "{!SIZE_SQUARE_X_LARGE}", "name": "SQUARE_ICON_UTILITY_LARGE" }, "SIZE_XX_SMALL": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "6rem", "comment": "Generic sizing token scale for UI components.", "access": "global", "originalValue": "{!SIZE_XX_SMALL}", "name": "SIZE_XX_SMALL" }, "SQUARE_ICON_SMALL_BOUNDARY": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1.5rem", "comment": "Search Results: Outer colored tile", "access": "global", "originalValue": "{!SIZE_SQUARE_X_LARGE}", "name": "SQUARE_ICON_SMALL_BOUNDARY" }, "SIZE_SMALL": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "15rem", "comment": "Generic sizing token scale for UI components.", "access": "global", "originalValue": "{!SIZE_SMALL}", "name": "SIZE_SMALL" }, "SQUARE_ICON_UTILITY_MEDIUM": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1.25rem", "comment": "Medium utility icon without border.", "access": "global", "originalValue": "{!SIZE_SQUARE_LARGE}", "name": "SQUARE_ICON_UTILITY_MEDIUM" }, "SQUARE_ICON_X_SMALL_BOUNDARY": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1.25rem", "comment": "Very small icon button boundary.", "access": "global", "originalValue": "{!SIZE_SQUARE_LARGE}", "name": "SQUARE_ICON_X_SMALL_BOUNDARY" }, "SQUARE_ICON_UTILITY_SMALL": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1rem", "comment": "Small utility icon without border.", "access": "global", "originalValue": "{!SIZE_SQUARE_MEDIUM}", "name": "SQUARE_ICON_UTILITY_SMALL" }, "SQUARE_ICON_MEDIUM_BOUNDARY": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "2rem", "comment": "Stage left & actions: Outer colored tile", "access": "global", "originalValue": "{!SIZE_SQUARE_XX_LARGE}", "name": "SQUARE_ICON_MEDIUM_BOUNDARY" }, "SQUARE_ICON_LARGE_CONTENT": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "2rem", "comment": "Anchor: Icon content (white shape)", "access": "global", "originalValue": "{!SIZE_SQUARE_XX_LARGE}", "name": "SQUARE_ICON_LARGE_CONTENT" }, "SQUARE_ICON_LARGE_BOUNDARY": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "3rem", "comment": "Anchor: Outer colored tile", "access": "global", "originalValue": "3rem", "name": "SQUARE_ICON_LARGE_BOUNDARY" }, "SIZE_MEDIUM": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "20rem", "comment": "Generic sizing token scale for UI components.", "access": "global", "originalValue": "{!SIZE_MEDIUM}", "name": "SIZE_MEDIUM" }, "SQUARE_ICON_MEDIUM_CONTENT": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1rem", "comment": "Stage left & actions: Icon content (white shape)", "access": "global", "originalValue": "{!SIZE_SQUARE_MEDIUM}", "name": "SQUARE_ICON_MEDIUM_CONTENT" }, "SIZE_X_LARGE": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "40rem", "comment": "Generic sizing token scale for UI components.", "access": "global", "originalValue": "{!SIZE_X_LARGE}", "name": "SIZE_X_LARGE" }, "SQUARE_ICON_X_SMALL_CONTENT": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "0.5rem", "comment": "Very small icons in icon buttons.", "access": "global", "originalValue": "{!SIZE_SQUARE_XXX_SMALL}", "name": "SQUARE_ICON_X_SMALL_CONTENT" }, "VAR_SQUARE_ICON_MEDIUM_BOUNDARY": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "2rem", "comment": "Variable medium boundary for square icons", "originalValue": "{!SIZE_SQUARE_XX_LARGE}", "name": "VAR_SQUARE_ICON_MEDIUM_BOUNDARY" }, "SQUARE_ICON_MEDIUM_BOUNDARY_ALT": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "2.25rem", "comment": "Icon button boundary.", "access": "global", "originalValue": "{!SIZE_SQUARE_XXX_LARGE}", "name": "SQUARE_ICON_MEDIUM_BOUNDARY_ALT" }, "SIZE_XX_LARGE": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "60rem", "comment": "Generic sizing token scale for UI components.", "access": "global", "originalValue": "{!SIZE_XX_LARGE}", "name": "SIZE_XX_LARGE" }, "SQUARE_ICON_LARGE_BOUNDARY_ALT": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "5rem", "comment": "Anchor: avatar", "access": "global", "originalValue": "5rem", "name": "SQUARE_ICON_LARGE_BOUNDARY_ALT" }, "SIZE_LARGE": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "25rem", "comment": "Generic sizing token scale for UI components.", "access": "global", "originalValue": "{!SIZE_LARGE}", "name": "SIZE_LARGE" }, "SQUARE_ICON_SMALL_CONTENT": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "0.75rem", "comment": "Search Results: Icon content (white shape)", "access": "global", "originalValue": "{!SIZE_SQUARE_XX_SMALL}", "name": "SQUARE_ICON_SMALL_CONTENT" }, "SQUARE_ICON_XX_SMALL_BOUNDARY": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "1rem", "comment": "Very very small icon button boundary.", "originalValue": "{!SIZE_SQUARE_MEDIUM}", "name": "SQUARE_ICON_XX_SMALL_BOUNDARY" }, "SQUARE_ICON_MEDIUM_CONTENT_ALT": { "type": "size", "category": "sizing", "cssProperties": [ "font", "font-size", "*width", "*height", "flex", "top", "right", "bottom", "left", "margin*", "padding*", "transform" ], "value": "0.875rem", "comment": "Alternate medium tap target size", "originalValue": "{!SIZE_SQUARE_SMALL}", "name": "SQUARE_ICON_MEDIUM_CONTENT_ALT" }, "VAR_SPACING_X_LARGE": { "originalValue": "{!SPACING_X_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_X_LARGE", "value": "2rem", "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" }, "VAR_SPACING_HORIZONTAL_SMALL": { "originalValue": "{!SPACING_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_HORIZONTAL_SMALL", "value": "0.75rem", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Small" }, "VAR_SPACING_HORIZONTAL_XX_LARGE": { "originalValue": "{!SPACING_XX_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_HORIZONTAL_XX_LARGE", "value": "3rem", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XX Large" }, "SPACING_X_SMALL": { "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": "0.5rem", "access": "global", "originalValue": "{!SPACING_X_SMALL}", "name": "SPACING_X_SMALL" }, "SPACING_XXX_SMALL": { "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": "0.125rem", "access": "global", "originalValue": "{!SPACING_XXX_SMALL}", "name": "SPACING_XXX_SMALL" }, "SPACING_XX_SMALL": { "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": "0.25rem", "access": "global", "originalValue": "{!SPACING_XX_SMALL}", "name": "SPACING_XX_SMALL" }, "BORDER_WIDTH_THIN": { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "1px", "access": "global", "originalValue": "1px", "name": "BORDER_WIDTH_THIN" }, "VAR_SPACING_VERTICAL_LARGE": { "originalValue": "{!SPACING_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_VERTICAL_LARGE", "value": "1.5rem", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Large" }, "VAR_SPACING_LARGE": { "originalValue": "{!SPACING_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_LARGE", "value": "1.5rem", "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" }, "VAR_SPACING_MEDIUM": { "originalValue": "{!SPACING_MEDIUM}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_MEDIUM", "value": "1rem", "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" }, "VAR_SPACING_VERTICAL_MEDIUM": { "originalValue": "{!SPACING_MEDIUM}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_VERTICAL_MEDIUM", "value": "1rem", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Medium" }, "VAR_SPACING_VERTICAL_X_SMALL": { "originalValue": "{!SPACING_X_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_VERTICAL_X_SMALL", "value": "0.5rem", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size X Small" }, "SPACING_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": "0.75rem", "access": "global", "originalValue": "{!SPACING_SMALL}", "name": "SPACING_SMALL" }, "VAR_SPACING_VERTICAL_XXX_SMALL": { "originalValue": "{!SPACING_XXX_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_VERTICAL_XXX_SMALL", "value": "0.125rem", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XXX Small" }, "VAR_SPACING_X_SMALL": { "originalValue": "{!SPACING_X_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_X_SMALL", "value": "0.5rem", "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" }, "VAR_SPACING_XXX_SMALL": { "originalValue": "{!SPACING_XXX_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_XXX_SMALL", "value": "0.125rem", "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" }, "VAR_SPACING_HORIZONTAL_X_LARGE": { "originalValue": "{!SPACING_X_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_HORIZONTAL_X_LARGE", "value": "2rem", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size X Large" }, "VAR_SPACING_HORIZONTAL_XX_SMALL": { "originalValue": "{!SPACING_XX_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_HORIZONTAL_XX_SMALL", "value": "0.25rem", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XX Small" }, "VAR_SPACING_XX_LARGE": { "originalValue": "{!SPACING_XX_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_XX_LARGE", "value": "3rem", "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" }, "BORDER_WIDTH_THICK": { "category": "spacing", "type": "size", "comment": "", "cssProperties": [ "top", "right", "bottom", "left", "margin*", "padding*", "border*", "*width", "*height", "box-shadow", "stroke", "stroke-width" ], "value": "2px", "access": "global", "originalValue": "2px", "name": "BORDER_WIDTH_THICK" }, "SPACING_MEDIUM": { "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": "1rem", "access": "global", "originalValue": "{!SPACING_MEDIUM}", "name": "SPACING_MEDIUM" }, "VAR_SPACING_VERTICAL_XX_LARGE": { "originalValue": "{!SPACING_XX_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_VERTICAL_XX_LARGE", "value": "3rem", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XX Large" }, "VAR_SPACING_VERTICAL_SMALL": { "originalValue": "{!SPACING_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_VERTICAL_SMALL", "value": "0.75rem", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size Small" }, "VAR_SPACING_SMALL": { "originalValue": "{!SPACING_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_SMALL", "value": "0.75rem", "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" }, "SPACING_NONE": { "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", "originalValue": "{!SPACING_NONE}", "name": "SPACING_NONE" }, "VAR_SPACING_HORIZONTAL_LARGE": { "originalValue": "{!SPACING_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_HORIZONTAL_LARGE", "value": "1.5rem", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Large" }, "SPACING_X_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": "2rem", "access": "global", "originalValue": "{!SPACING_X_LARGE}", "name": "SPACING_X_LARGE" }, "SPACING_XX_LARGE": { "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": "3rem", "originalValue": "{!SPACING_XX_LARGE}", "name": "SPACING_XX_LARGE" }, "VAR_SPACING_HORIZONTAL_XXX_SMALL": { "originalValue": "{!SPACING_XXX_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_HORIZONTAL_XXX_SMALL", "value": "0.125rem", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size XXX Small" }, "VAR_SPACING_HORIZONTAL_X_SMALL": { "originalValue": "{!SPACING_X_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_HORIZONTAL_X_SMALL", "value": "0.5rem", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size X Small" }, "VAR_SPACING_XX_SMALL": { "originalValue": "{!SPACING_XX_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_XX_SMALL", "value": "0.25rem", "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" }, "VAR_SPACING_HORIZONTAL_MEDIUM": { "originalValue": "{!SPACING_MEDIUM}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_HORIZONTAL_MEDIUM", "value": "1rem", "cssProperties": [ "left", "right", "margin-left", "margin-right", "padding-left", "padding-right" ], "type": "size", "category": "spacing", "comment": "Variable horizontal spacing token for size Medium" }, "VAR_SPACING_VERTICAL_XX_SMALL": { "originalValue": "{!SPACING_XX_SMALL}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_VERTICAL_XX_SMALL", "value": "0.25rem", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size XX Small" }, "VAR_SPACING_VERTICAL_X_LARGE": { "originalValue": "{!SPACING_X_LARGE}", "access": "global", "release": "2.7.0", "name": "VAR_SPACING_VERTICAL_X_LARGE", "value": "2rem", "cssProperties": [ "top", "bottom", "margin-top", "margin-bottom", "padding-top", "padding-bottom" ], "type": "size", "category": "spacing", "comment": "Variable vertical spacing token for size X Large" }, "SPACING_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": "1.5rem", "access": "global", "originalValue": "{!SPACING_LARGE}", "name": "SPACING_LARGE" }, "COLOR_TEXT_ACTION_LABEL": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#6B6D70", "comment": "Action label text color", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_TEXT_ACTION_LABEL" }, "COLOR_TEXT_LINK_INVERSE": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#FFFFFF", "comment": "Link color on dark background", "access": "global", "originalValue": "{!WHITE}", "name": "COLOR_TEXT_LINK_INVERSE" }, "COLOR_TEXT_LINK_INVERSE_ACTIVE": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgba(255, 255, 255, 0.50)", "comment": "Link color on dark background - active state", "access": "global", "originalValue": "{!WHITE_TRANSPARENT_50}", "name": "COLOR_TEXT_LINK_INVERSE_ACTIVE" }, "COLOR_TEXT_ACTION_LABEL_ACTIVE": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#16325C", "comment": "Action label active text color", "originalValue": "{!BISCAY}", "name": "COLOR_TEXT_ACTION_LABEL_ACTIVE" }, "COLOR_TEXT_WARNING": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#FFB75D", "comment": "Color for texts or icons that are related to warnings on a dark background.", "originalValue": "{!KOROMIKO}", "name": "COLOR_TEXT_WARNING" }, "COLOR_TEXT_LINK_FOCUS": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#005FB2", "comment": "Focus link text", "access": "global", "originalValue": "{!ENDEAVOUR}", "name": "COLOR_TEXT_LINK_FOCUS" }, "COLOR_TEXT_DESTRUCTIVE_HOVER": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#A12B2B", "comment": "Text color for destructive actions - hover state", "originalValue": "{!MEXICAN_RED}", "name": "COLOR_TEXT_DESTRUCTIVE_HOVER" }, "COLOR_TEXT_LINK_DISABLED": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#16325C", "comment": "Disabled link text", "access": "global", "originalValue": "{!BISCAY}", "name": "COLOR_TEXT_LINK_DISABLED" }, "COLOR_TEXT_DEFAULT": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#16325C", "comment": "Body text color", "access": "global", "originalValue": "{!BISCAY}", "name": "COLOR_TEXT_DEFAULT" }, "COLOR_TEXT_PRIMARY": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#16325C", "comment": "Primary body text color", "originalValue": "{!BISCAY}", "name": "COLOR_TEXT_PRIMARY" }, "COLOR_TEXT_DESTRUCTIVE": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#C23934", "comment": "Text color for destructive actions", "originalValue": "{!FLUSH_MAHOGANY}", "name": "COLOR_TEXT_DESTRUCTIVE" }, "COLOR_TEXT_LINK_HOVER": { "type": "color", "category": "text-color", "cssProperties": [ "color", "border*" ], "value": "#005FB2", "comment": "Hover link text", "access": "global", "originalValue": "{!ENDEAVOUR}", "name": "COLOR_TEXT_LINK_HOVER" }, "COLOR_TEXT_SUCCESS": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#027E46", "comment": "Text color for success text.", "originalValue": "{!FOREST_GREEN}", "name": "COLOR_TEXT_SUCCESS" }, "COLOR_TEXT_WEAK": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#6B6D70", "comment": "Color for text that is purposefully de-emphasized to create visual hierarchy.", "access": "global", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_TEXT_WEAK" }, "COLOR_TEXT_LINK": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#0070D2", "comment": "Link text (508)", "access": "global", "originalValue": "{!SCIENCE_BLUE}", "name": "COLOR_TEXT_LINK" }, "COLOR_TEXT_WARNING_ALT": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#844800", "comment": "Color for texts that are related to warnings on a light background.", "originalValue": "{!CINNAMON}", "name": "COLOR_TEXT_WARNING_ALT" }, "COLOR_TEXT_ICON_DEFAULT": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#6B6D70", "comment": "Default icon color.", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_TEXT_ICON_DEFAULT" }, "COLOR_TEXT_BRAND": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#1589EE", "comment": "Our product brand blue.", "access": "global", "originalValue": "{!AZURE}", "name": "COLOR_TEXT_BRAND" }, "COLOR_TEXT_ERROR": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#C23934", "comment": "Error text for inputs and error misc", "originalValue": "{!FLUSH_MAHOGANY}", "name": "COLOR_TEXT_ERROR" }, "COLOR_TEXT_CUSTOMER": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#FF9A3C", "comment": "Customer text used in anchor subtitle", "originalValue": "{!TANGERINE}", "name": "COLOR_TEXT_CUSTOMER" }, "COLOR_TEXT_BRAND_PRIMARY": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#FFFFFF", "comment": "Text color found on any primary brand color", "originalValue": "{!WHITE}", "name": "COLOR_TEXT_BRAND_PRIMARY" }, "COLOR_TEXT_LINK_ACTIVE": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#00396B", "comment": "Active link text", "access": "global", "originalValue": "{!MIDNIGHT_BLUE}", "name": "COLOR_TEXT_LINK_ACTIVE" }, "COLOR_TEXT_REQUIRED": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#C23934", "comment": "Color of required field marker.", "originalValue": "{!FLUSH_MAHOGANY}", "name": "COLOR_TEXT_REQUIRED" }, "COLOR_TEXT_LINK_INVERSE_DISABLED": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgba(255, 255, 255, 0.15)", "comment": "Link color on dark background - disabled state", "access": "global", "originalValue": "{!WHITE_TRANSPARENT_15}", "name": "COLOR_TEXT_LINK_INVERSE_DISABLED" }, "COLOR_TEXT_INVERSE": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#FFFFFF", "comment": "Inverse text color for dark backgrounds", "originalValue": "{!WHITE}", "name": "COLOR_TEXT_INVERSE" }, "COLOR_TEXT_PLACEHOLDER": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#6B6D70", "comment": "Input placeholder text.", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_TEXT_PLACEHOLDER" }, "COLOR_TEXT_INVERSE_WEAK": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#ABADB0", "comment": "Weak inverse text color for dark backgrounds", "originalValue": "{!PALETTE_COOL_GRAY_7}", "name": "COLOR_TEXT_INVERSE_WEAK" }, "COLOR_TEXT_LINK_INVERSE_HOVER": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "rgba(255, 255, 255, 0.75)", "comment": "Link color on dark background - hover state", "access": "global", "originalValue": "{!WHITE_TRANSPARENT_75}", "name": "COLOR_TEXT_LINK_INVERSE_HOVER" }, "COLOR_TEXT_SUCCESS_INVERSE": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#4BCA81", "comment": "Text color for success text on dark backgrounds.", "originalValue": "{!EMERALD}", "name": "COLOR_TEXT_SUCCESS_INVERSE" }, "COLOR_TEXT_LABEL": { "type": "color", "category": "text-color", "cssProperties": [ "color", "fill" ], "value": "#6B6D70", "comment": "Text color for field labels.", "originalValue": "{!PALETTE_COOL_GRAY_9}", "name": "COLOR_TEXT_LABEL" }, "Z_INDEX_DROPDOWN": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "7000", "comment": "Dropdown", "originalValue": "7000", "name": "Z_INDEX_DROPDOWN" }, "Z_INDEX_DOCKED": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "4", "comment": "Docked element", "originalValue": "4", "name": "Z_INDEX_DOCKED" }, "Z_INDEX_REMINDER": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "8500", "comment": "Notifications under modals", "originalValue": "8500", "name": "Z_INDEX_REMINDER" }, "Z_INDEX_SPINNER": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "9050", "comment": "Spinner", "originalValue": "9050", "name": "Z_INDEX_SPINNER" }, "Z_INDEX_DEFAULT": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "1", "comment": "Default", "originalValue": "1", "name": "Z_INDEX_DEFAULT" }, "Z_INDEX_DEEPDIVE": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "-99999", "comment": "Deep dive", "originalValue": "-99999", "name": "Z_INDEX_DEEPDIVE" }, "Z_INDEX_TOAST": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "10000", "comment": "Toasts", "originalValue": "10000", "name": "Z_INDEX_TOAST" }, "Z_INDEX_DIALOG": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "6000", "comment": "Dialog", "originalValue": "6000", "name": "Z_INDEX_DIALOG" }, "Z_INDEX_POPUP": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "5000", "comment": "Popup", "originalValue": "5000", "name": "Z_INDEX_POPUP" }, "Z_INDEX_MODAL": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "9000", "comment": "Modal", "originalValue": "9000", "name": "Z_INDEX_MODAL" }, "Z_INDEX_STICKY": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "100", "comment": "Stickied element", "originalValue": "100", "name": "Z_INDEX_STICKY" }, "Z_INDEX_OVERLAY": { "type": "z-index", "category": "z-index", "cssProperties": [ "z-index" ], "value": "8000", "comment": "Overlay", "originalValue": "8000", "name": "Z_INDEX_OVERLAY" } } }