@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
301 lines (280 loc) • 9.75 kB
YAML
# Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
# Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
aliases:
## COOL GRAYS
PALETTE_COOL_GRAY_1: "#FFFFFF"
PALETTE_COOL_GRAY_2: "#F9F9FA"
PALETTE_COOL_GRAY_3: "#F2F2F3"
PALETTE_COOL_GRAY_4: "#E9EAEC"
PALETTE_COOL_GRAY_5: "#D9DBDD"
PALETTE_COOL_GRAY_6: "#C4C6CA"
PALETTE_COOL_GRAY_7: "#ABADB0"
PALETTE_COOL_GRAY_8: "#919297"
PALETTE_COOL_GRAY_9: "#6B6D70"
PALETTE_COOL_GRAY_10: "#4E5356"
PALETTE_COOL_GRAY_11: "#3E4041"
PALETTE_COOL_GRAY_12: "#292C2E"
PALETTE_COOL_GRAY_13: "#070808"
## WARM GRAYS
PALETTE_WARM_GRAY_1: "#FFFFFF"
PALETTE_WARM_GRAY_2: "#fafaf9"
PALETTE_WARM_GRAY_3: "#f3f2f2"
PALETTE_WARM_GRAY_4: "#ecebea"
PALETTE_WARM_GRAY_5: "#dddbda"
PALETTE_WARM_GRAY_6: "#c9c7c5"
PALETTE_WARM_GRAY_7: "#b0adab"
PALETTE_WARM_GRAY_8: "#969492"
PALETTE_WARM_GRAY_9: "#706e6b"
PALETTE_WARM_GRAY_10: "#514f4d"
PALETTE_WARM_GRAY_11: "#3e3e3c"
PALETTE_WARM_GRAY_12: "#2B2826"
PALETTE_WARM_GRAY_13: "#080707"
## GRAYS (APPLIED)
PALETTE_GRAY_1: "{!PALETTE_WARM_GRAY_1}"
PALETTE_GRAY_2: "{!PALETTE_WARM_GRAY_2}"
PALETTE_GRAY_3: "{!PALETTE_WARM_GRAY_3}"
PALETTE_GRAY_4: "{!PALETTE_WARM_GRAY_4}"
PALETTE_GRAY_5: "{!PALETTE_WARM_GRAY_5}"
PALETTE_GRAY_6: "{!PALETTE_WARM_GRAY_6}"
PALETTE_GRAY_7: "{!PALETTE_WARM_GRAY_7}"
PALETTE_GRAY_8: "{!PALETTE_WARM_GRAY_8}"
PALETTE_GRAY_9: "{!PALETTE_WARM_GRAY_9}"
PALETTE_GRAY_10: "{!PALETTE_WARM_GRAY_10}"
PALETTE_GRAY_11: "{!PALETTE_WARM_GRAY_11}"
PALETTE_GRAY_12: "{!PALETTE_WARM_GRAY_12}"
PALETTE_GRAY_13: "{!PALETTE_WARM_GRAY_13}"
## TRANSPARENT GRAYS BASED ON DARKEST GRAY (PALETTE_GRAY_12)
PALETTE_DARK_GRAY_TRANSPARENT_10: "rgba(8, 7, 7, 0.1)"
PALETTE_DARK_GRAY_TRANSPARENT_20: "rgba(8, 7, 7, 0.2)"
PALETTE_DARK_GRAY_TRANSPARENT_30: "rgba(8, 7, 7, 0.3)"
PALETTE_DARK_GRAY_TRANSPARENT_40: "rgba(8, 7, 7, 0.4)"
PALETTE_DARK_GRAY_TRANSPARENT_50: "rgba(8, 7, 7, 0.5)"
PALETTE_DARK_GRAY_TRANSPARENT_60: "rgba(8, 7, 7, 0.6)"
PALETTE_DARK_GRAY_TRANSPARENT_70: "rgba(8, 7, 7, 0.7)"
PALETTE_DARK_GRAY_TRANSPARENT_80: "rgba(8, 7, 7, 0.8)"
PALETTE_DARK_GRAY_TRANSPARENT_90: "rgba(8, 7, 7, 0.9)"
## TRANSPARENT GRAYS BASED ON LIGHTEST GRAY (PALETTE_GRAY_1)
PALETTE_LIGHT_GRAY_TRANSPARENT_10: "rgba(255, 255, 255, 0.1)"
PALETTE_LIGHT_GRAY_TRANSPARENT_20: "rgba(255, 255, 255, 0.2)"
PALETTE_LIGHT_GRAY_TRANSPARENT_30: "rgba(255, 255, 255, 0.3)"
PALETTE_LIGHT_GRAY_TRANSPARENT_40: "rgba(255, 255, 255, 0.4)"
PALETTE_LIGHT_GRAY_TRANSPARENT_50: "rgba(255, 255, 255, 0.5)"
PALETTE_LIGHT_GRAY_TRANSPARENT_60: "rgba(255, 255, 255, 0.6)"
PALETTE_LIGHT_GRAY_TRANSPARENT_70: "rgba(255, 255, 255, 0.7)"
PALETTE_LIGHT_GRAY_TRANSPARENT_80: "rgba(255, 255, 255, 0.8)"
PALETTE_LIGHT_GRAY_TRANSPARENT_90: "rgba(255, 255, 255, 0.9)"
## WHITES (APPLIED)
WHITE: "#FFFFFF"
WHITE_TRANSPARENT_10: "rgba(255, 255, 255, 0.10)"
WHITE_TRANSPARENT_15: "rgba(255, 255, 255, 0.15)"
WHITE_TRANSPARENT_20: "rgba(255, 255, 255, 0.20)"
WHITE_TRANSPARENT_30: "rgba(255, 255, 255, 0.30)"
WHITE_TRANSPARENT_40: "rgba(255, 255, 255, 0.40)"
WHITE_TRANSPARENT_50: "rgba(255, 255, 255, 0.50)"
WHITE_TRANSPARENT_60: "rgba(255, 255, 255, 0.60)"
WHITE_TRANSPARENT_75: "rgba(255, 255, 255, 0.75)"
WHITE_TRANSPARENT_80: "rgba(255, 255, 255, 0.80)"
WHITE_TRANSPARENT_90: "rgba(255, 255, 255, 0.90)"
WHITE_TRANSPARENT_97: "rgba(255, 255, 255, 0.97)"
## BLACKS (APPLIED)
BLACK: "#000000"
BLACK_TRANSPARENT_05: "rgba(0, 0, 0, 0.05)"
BLACK_TRANSPARENT_07: "rgba(0, 0, 0, 0.07)"
BLACK_TRANSPARENT_10: "rgba(0, 0, 0, 0.10)"
BLACK_TRANSPARENT_16: "rgba(0, 0, 0, 0.16)"
BLACK_TRANSPARENT_20: "rgba(0, 0, 0, 0.20)"
BLACK_TRANSPARENT_24: "rgba(0, 0, 0, 0.24)"
BLACK_TRANSPARENT_30: "rgba(0, 0, 0, 0.30)"
BLACK_TRANSPARENT_40: "rgba(0, 0, 0, 0.40)"
BLACK_TRANSPARENT_50: "rgba(0, 0, 0, 0.50)"
BLACK_TRANSPARENT_60: "rgba(0, 0, 0, 0.60)"
BLACK_TRANSPARENT_70: "rgba(0, 0, 0, 0.70)"
BLACK_TRANSPARENT_80: "rgba(0, 0, 0, 0.80)"
BLACK_TRANSPARENT_90: "rgba(0, 0, 0, 0.90)"
## Brand
BRAND_PRIMARY: "{!PALETTE_BLUE_60}"
BRAND_PRIMARY_ACTIVE: "{!PALETTE_BLUE_50}"
BRAND_LIGHT: "#f4f6fe"
BRAND_LIGHT_ACTIVE: "#e3e5ed"
BRAND_DARK: "{!PALETTE_BLUE_50}"
BRAND_DARK_ACTIVE: "#253045"
BRAND_ACCESSIBLE: "{!PALETTE_BLUE_50}"
BRAND_ACCESSIBLE_ACTIVE: "{!PALETTE_BLUE_30}"
BRAND_DISABLED: "#c9c7c5"
BRAND_CONTRAST: "#1a1b1e"
BRAND_CONTRAST_ACTIVE: "#0d0e12"
BRAND_BACKGROUND_PRIMARY: "{!PALETTE_BLUE_95}"
BRAND_BACKGROUND_DARK: "{!PALETTE_BLUE_30}"
BRAND_TEXT_LINK: "{!PALETTE_BLUE_50}"
BRAND_TEXT_LINK_ACTIVE: "{!PALETTE_BLUE_30}"
## Blue
PALETTE_BLUE_10: "#001639"
PALETTE_BLUE_15: "#03234d"
PALETTE_BLUE_20: "#032d60"
PALETTE_BLUE_30: "#014486"
PALETTE_BLUE_40: "#0b5cab"
PALETTE_BLUE_50: "#0176d3"
PALETTE_BLUE_60: "#1b96ff"
PALETTE_BLUE_65: "#57a3fd"
PALETTE_BLUE_70: "#78b0fd"
PALETTE_BLUE_80: "#aacbff"
PALETTE_BLUE_90: "#d8e6fe"
PALETTE_BLUE_95: "#eef4ff"
## Cloud Blue
PALETTE_CLOUD_BLUE_10: "#001a28"
PALETTE_CLOUD_BLUE_15: "#0a2636"
PALETTE_CLOUD_BLUE_20: "#023248"
PALETTE_CLOUD_BLUE_30: "#084968"
PALETTE_CLOUD_BLUE_40: "#05628a"
PALETTE_CLOUD_BLUE_50: "#107cad"
PALETTE_CLOUD_BLUE_60: "#0d9dda"
PALETTE_CLOUD_BLUE_65: "#08abed"
PALETTE_CLOUD_BLUE_70: "#1ab9ff"
PALETTE_CLOUD_BLUE_80: "#90d0fe"
PALETTE_CLOUD_BLUE_90: "#cfe9fe"
PALETTE_CLOUD_BLUE_95: "#eaf5fe"
## Green
PALETTE_GREEN_10: "#071b12"
PALETTE_GREEN_15: "#0c2912"
PALETTE_GREEN_20: "#1c3326"
PALETTE_GREEN_30: "#194e31"
PALETTE_GREEN_40: "#396547"
PALETTE_GREEN_50: "#2e844a"
PALETTE_GREEN_60: "#3ba755"
PALETTE_GREEN_65: "#41b658"
PALETTE_GREEN_70: "#45c65a"
PALETTE_GREEN_80: "#91db8b"
PALETTE_GREEN_90: "#cdefc4"
PALETTE_GREEN_95: "#ebf7e6"
## Hot Orange
PALETTE_HOT_ORANGE_10: "#281202"
PALETTE_HOT_ORANGE_15: "#421604"
PALETTE_HOT_ORANGE_20: "#4a2413"
PALETTE_HOT_ORANGE_30: "#7e2600"
PALETTE_HOT_ORANGE_40: "#aa3001"
PALETTE_HOT_ORANGE_50: "#d83a00"
PALETTE_HOT_ORANGE_60: "#ff5d2d"
PALETTE_HOT_ORANGE_65: "#ff784f"
PALETTE_HOT_ORANGE_70: "#ff906e"
PALETTE_HOT_ORANGE_80: "#feb9a5"
PALETTE_HOT_ORANGE_90: "#ffded5"
PALETTE_HOT_ORANGE_95: "#fef1ed"
## Indigo
PALETTE_INDIGO_10: "#200647"
PALETTE_INDIGO_15: "#1f0974"
PALETTE_INDIGO_20: "#321d71"
PALETTE_INDIGO_30: "#2f2cb7"
PALETTE_INDIGO_40: "#3a49da"
PALETTE_INDIGO_50: "#5867e8"
PALETTE_INDIGO_60: "#7f8ced"
PALETTE_INDIGO_65: "#8e9bef"
PALETTE_INDIGO_70: "#9ea9f1"
PALETTE_INDIGO_80: "#bec7f6"
PALETTE_INDIGO_90: "#e0e5f8"
PALETTE_INDIGO_95: "#f1f3fb"
## Orange
PALETTE_ORANGE_10: "#201600"
PALETTE_ORANGE_15: "#371e03"
PALETTE_ORANGE_20: "#3e2b02"
PALETTE_ORANGE_30: "#5f3e02"
PALETTE_ORANGE_40: "#825101"
PALETTE_ORANGE_50: "#a96404"
PALETTE_ORANGE_60: "#dd7a01"
PALETTE_ORANGE_65: "#f38303"
PALETTE_ORANGE_70: "#fe9339"
PALETTE_ORANGE_80: "#ffba90"
PALETTE_ORANGE_90: "#fedfd0"
PALETTE_ORANGE_95: "#fff1ea"
## Pink
PALETTE_PINK_10: "#370114"
PALETTE_PINK_15: "#4b0620"
PALETTE_PINK_20: "#61022a"
PALETTE_PINK_30: "#8a033e"
PALETTE_PINK_40: "#b60554"
PALETTE_PINK_50: "#e3066a"
PALETTE_PINK_60: "#ff538a"
PALETTE_PINK_65: "#fe7298"
PALETTE_PINK_70: "#fe8aa7"
PALETTE_PINK_80: "#fdb6c5"
PALETTE_PINK_90: "#fddde3"
PALETTE_PINK_95: "#fef0f3"
## Purple
PALETTE_PURPLE_10: "#240643"
PALETTE_PURPLE_15: "#300b60"
PALETTE_PURPLE_20: "#401075"
PALETTE_PURPLE_30: "#5a1ba9"
PALETTE_PURPLE_40: "#7526e3"
PALETTE_PURPLE_50: "#9050e9"
PALETTE_PURPLE_60: "#ad7bee"
PALETTE_PURPLE_65: "#b78def"
PALETTE_PURPLE_70: "#c29ef1"
PALETTE_PURPLE_80: "#d7bff2"
PALETTE_PURPLE_90: "#ece1f9"
PALETTE_PURPLE_95: "#f6f2fb"
## Red
PALETTE_RED_10: "#300c01"
PALETTE_RED_15: "#4a0c04"
PALETTE_RED_20: "#640103"
PALETTE_RED_30: "#8e030f"
PALETTE_RED_40: "#ba0517"
PALETTE_RED_50: "#ea001e"
PALETTE_RED_60: "#fe5c4c"
PALETTE_RED_65: "#fe7765"
PALETTE_RED_70: "#fe8f7d"
PALETTE_RED_80: "#feb8ab"
PALETTE_RED_90: "#feded8"
PALETTE_RED_95: "#fef1ee"
## Teal
PALETTE_TEAL_10: "#071b12"
PALETTE_TEAL_15: "#072825"
PALETTE_TEAL_20: "#023434"
PALETTE_TEAL_30: "#024d4c"
PALETTE_TEAL_40: "#056764"
PALETTE_TEAL_50: "#0b827c"
PALETTE_TEAL_60: "#06a59a"
PALETTE_TEAL_65: "#03b4a7"
PALETTE_TEAL_70: "#01c3b3"
PALETTE_TEAL_80: "#04e1cb"
PALETTE_TEAL_90: "#acf3e4"
PALETTE_TEAL_95: "#def9f3"
## Violet
PALETTE_VIOLET_10: "#2e0039"
PALETTE_VIOLET_15: "#3d0157"
PALETTE_VIOLET_20: "#481a54"
PALETTE_VIOLET_30: "#730394"
PALETTE_VIOLET_40: "#9602c7"
PALETTE_VIOLET_50: "#ba01ff"
PALETTE_VIOLET_60: "#cb65ff"
PALETTE_VIOLET_65: "#d17dfe"
PALETTE_VIOLET_70: "#d892fe"
PALETTE_VIOLET_80: "#e5b9fe"
PALETTE_VIOLET_90: "#f2defe"
PALETTE_VIOLET_95: "#f9f0ff"
## Yellow
PALETTE_YELLOW_10: "#281202"
PALETTE_YELLOW_15: "#2e2204"
PALETTE_YELLOW_20: "#4f2100"
PALETTE_YELLOW_30: "#6f3400"
PALETTE_YELLOW_40: "#8c4b02"
PALETTE_YELLOW_50: "#a86403"
PALETTE_YELLOW_60: "#ca8501"
PALETTE_YELLOW_65: "#d79304"
PALETTE_YELLOW_70: "#e4a201"
PALETTE_YELLOW_80: "#fcc003"
PALETTE_YELLOW_90: "#f9e3b6"
PALETTE_YELLOW_95: "#fbf3e0"
## Neutral
PALETTE_NEUTRAL_00: "#000000"
PALETTE_NEUTRAL_10: "#181818"
PALETTE_NEUTRAL_15: "#242424"
PALETTE_NEUTRAL_20: "#2e2e2e"
PALETTE_NEUTRAL_30: "#444444"
PALETTE_NEUTRAL_40: "#5c5c5c"
PALETTE_NEUTRAL_50: "#747474"
PALETTE_NEUTRAL_60: "#939393"
PALETTE_NEUTRAL_65: "#a0a0a0"
PALETTE_NEUTRAL_70: "#aeaeae"
PALETTE_NEUTRAL_80: "#c9c9c9"
PALETTE_NEUTRAL_90: "#e5e5e5"
PALETTE_NEUTRAL_95: "#f3f3f3"
PALETTE_NEUTRAL_100: "#ffffff"