[docs]
thematic_tokens = {
# background tokens
"background": {
"White": "#ffffff",
"Gray10": "#f4f4f4",
"Gray90": "#262626",
"Gray100": "#161616",
},
"background_hover": {
"White": ("#8d8d8d", 0.12),
"Gray10": ("#8d8d8d", 0.12),
"Gray90": "#262626",
"Gray100": ("#8d8d8d", 0.16),
},
"background_active": {
"White": ("#8d8d8d", 0.50),
"Gray10": ("#8d8d8d", 0.50),
"Gray90": "#262626",
"Gray100": ("#8d8d8d", 0.40),
},
"background_selected": {
"White": ("#8d8d8d", 0.20),
"Gray10": ("#8d8d8d", 0.20),
"Gray90": "#262626",
"Gray100": ("#8d8d8d", 0.24),
},
"background_selected_hover": {
"White": ("#8d8d8d", 0.32),
"Gray10": ("#8d8d8d", 0.32),
"Gray90": "#262626",
"Gray100": ("#8d8d8d", 0.32),
},
"background_inverse": {
"White": "#393939",
"Gray10": "#393939",
"Gray90": "#262626",
"Gray100": "#f4f4f4",
},
"background_inverse_hover": {
"White": "#4c4c4c",
"Gray10": "#4c4c4c",
"Gray90": "#262626",
"Gray100": "#e5e5e5",
},
"background_brand": {
"White": "#0f62fe",
"Gray10": "#0f62fe",
"Gray90": "#262626",
"Gray100": "#0f62fe",
},
# layer tokens
"layer_01": {
"White": "#f4f4f4",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#262626",
},
"layer_02": {
"White": "#ffffff",
"Gray10": "#f4f4f4",
"Gray90": "#262626",
"Gray100": "#393939",
},
"layer_03": {
"White": "#f4f4f4",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#525252",
},
"layer_hover_01": {
"White": "#e8e8e8",
"Gray10": "#e8e8e8",
"Gray90": "#262626",
"Gray100": "#333333",
},
"layer_hover_02": {
"White": "#e8e8e8",
"Gray10": "#e8e8e8",
"Gray90": "#262626",
"Gray100": "#474747",
},
"layer_hover_03": {
"White": "#e8e8e8",
"Gray10": "#e8e8e8",
"Gray90": "#262626",
"Gray100": "#636363",
},
"layer_active_01": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#525252",
},
"layer_active_02": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"layer_active_03": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#8d8d8d",
},
"layer_selected_01": {
"White": "#e0e0e0",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#393939",
},
"layer_selected_02": {
"White": "#e0e0e0",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#525252",
},
"layer_selected_03": {
"White": "#e0e0e0",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"layer_selected_hover_01": {
"White": "#cacaca",
"Gray10": "#d1d1d1",
"Gray90": "#262626",
"Gray100": "#474747",
},
"layer_selected_hover_02": {
"White": "#cacaca",
"Gray10": "#d1d1d1",
"Gray90": "#262626",
"Gray100": "#636363",
},
"layer_selected_hover_03": {
"White": "#cacaca",
"Gray10": "#d1d1d1",
"Gray90": "#262626",
"Gray100": "#5e5e5e",
},
"layer_selected_inverse": {
"White": "#161616",
"Gray10": "#161616",
"Gray90": "#262626",
"Gray100": "#f4f4f4",
},
"layer_selected_disabled": {
"White": "#8d8d8d",
"Gray10": "#8d8d8d",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
# layer accent tokens
"layer_accent_01": {
"White": "#e0e0e0",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#393939",
},
"layer_accent_02": {
"White": "#e0e0e0",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#525252",
},
"layer_accent_03": {
"White": "#e0e0e0",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#6f6d6f",
},
"layer_accent_hover_01": {
"White": "#cacaca",
"Gray10": "#cacaca",
"Gray90": "#262626",
"Gray100": "#4c4c4c",
},
"layer_accent_hover_02": {
"White": "#cacaca",
"Gray10": "#cacaca",
"Gray90": "#262626",
"Gray100": "#656565",
},
"layer_accent_hover_03": {
"White": "#cacaca",
"Gray10": "#cacaca",
"Gray90": "#262626",
"Gray100": "#5e5e5e",
},
"layer_accent_active_01": {
"White": "#a8a8a8",
"Gray10": "#a8a8a8",
"Gray90": "#262626",
"Gray100": "#525252",
},
"layer_accent_active_02": {
"White": "#a8a8a8",
"Gray10": "#a8a8a8",
"Gray90": "#262626",
"Gray100": "#8d8d8d",
},
"layer_accent_active_03": {
"White": "#a8a8a8",
"Gray10": "#a8a8a8",
"Gray90": "#262626",
"Gray100": "#393939",
},
# field tokens
"field_01": {
"White": "#f4f4f4",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#262626",
},
"field_02": {
"White": "#ffffff",
"Gray10": "#f4f4f4",
"Gray90": "#262626",
"Gray100": "#393939",
},
"field_03": {
"White": "#f4f4f4",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#525252",
},
"field_hover_01": {
"White": "#e8e8e8",
"Gray10": "#e8e8e8",
"Gray90": "#262626",
"Gray100": "#333333",
},
"field_hover_02": {
"White": "#e8e8e8",
"Gray10": "#e8e8e8",
"Gray90": "#262626",
"Gray100": "#474747",
},
"field_hover_03": {
"White": "#e8e8e8",
"Gray10": "#e8e8e8",
"Gray90": "#262626",
"Gray100": "#636363",
},
# border tokens
"border_interactive": {
"White": "#0f62fe",
"Gray10": "#0f62fe",
"Gray90": "#262626",
"Gray100": "#4589ff",
},
"border_subtle_00": {
"White": "#e0e0e0",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#393939",
},
"border_subtle_01": {
"White": "#c6c6c6",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#393939",
},
"border_subtle_02": {
"White": "#e0e0e0",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#525252",
},
"border_subtle_03": {
"White": "#c6c6c6",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"border_subtle_selected_01": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#525252",
},
"border_subtle_selected_02": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"border_subtle_selected_03": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#8d8d8d",
},
"border_strong_01": {
"White": "#8d8d8d",
"Gray10": "#8d8d8d",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"border_strong_02": {
"White": "#8d8d8d",
"Gray10": "#8d8d8d",
"Gray90": "#262626",
"Gray100": "#8d8d8d",
},
"border_strong_03": {
"White": "#8d8d8d",
"Gray10": "#8d8d8d",
"Gray90": "#262626",
"Gray100": "#a8a8a8",
},
"border_tile_01": {
"White": "#c6c6c6",
"Gray10": "#a8a8a8",
"Gray90": "#262626",
"Gray100": "#525252",
},
"border_tile_02": {
"White": "#a8a8a8",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"border_tile_03": {
"White": "#c6c6c6",
"Gray10": "#a8a8a8",
"Gray90": "#262626",
"Gray100": "#8d8d8d",
},
"border_inverse": {
"White": "#161616",
"Gray10": "#161616",
"Gray90": "#262626",
"Gray100": "#f4f4f4",
},
"border_disabled": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": ("#8d8d8d", 0.50),
},
# text tokens
"text_primary": {
"White": "#161616",
"Gray10": "#161616",
"Gray90": "#262626",
"Gray100": "#f4f4f4",
},
"text_secondary": {
"White": "#525252",
"Gray10": "#525252",
"Gray90": "#262626",
"Gray100": "#c6c6c6",
},
"text_placeholder": {
"White": "#a8a8a8",
"Gray10": "#a8a8a8",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"text_on_color": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#ffffff",
},
"text_on_color_disabled": {
"White": "#8d8d8d",
"Gray10": "#8d8d8d",
"Gray90": "#262626",
"Gray100": ("#ffffff", 0.25),
},
"text_helper": {
"White": "#6f6f6f",
"Gray10": "#6f6f6f",
"Gray90": "#262626",
"Gray100": "#8d8d8d",
},
"text_error": {
"White": "#da1e28",
"Gray10": "#da1e28",
"Gray90": "#262626",
"Gray100": "#ff8389",
},
"text_inverse": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#161616",
},
"text_disabled": {
"White": ("#161616", 0.25),
"Gray10": ("#161616", 0.25),
"Gray90": "#262626",
"Gray100": ("#f4f4f4", 0.25),
},
# link tokens
"link_primary": {
"White": "#0f62fe",
"Gray10": "#0f62fe",
"Gray90": "#262626",
"Gray100": "#78a9ff",
},
"link_primary_hover": {
"White": "#0043ce",
"Gray10": "#0043ce",
"Gray90": "#262626",
"Gray100": "#a6c8ff",
},
"link_secondary": {
"White": "#0043ce",
"Gray10": "#0043ce",
"Gray90": "#262626",
"Gray100": "#a6c8ff",
},
"link_inverse": {
"White": "#78a9ff",
"Gray10": "#78a9ff",
"Gray90": "#262626",
"Gray100": "#0f62fe",
},
"link_inverse_hover": {
"White": "#a6c8ff",
"Gray10": "#a6c8ff",
"Gray90": "#262626",
"Gray100": "#0043ce",
},
"link_inverse_active": {
"White": "#f4f4f4",
"Gray10": "#f4f4f4",
"Gray90": "#262626",
"Gray100": "#161616",
},
"link_inverse_visited": {
"White": "#be95ff",
"Gray10": "#be95ff",
"Gray90": "#262626",
"Gray100": "#8a3ffc",
},
"link_visited": {
"White": "#8a3ffc",
"Gray10": "#8a3ffc",
"Gray90": "#262626",
"Gray100": "#be95ff",
},
# icon tokens
"icon_primary": {
"White": "#161616",
"Gray10": "#161616",
"Gray90": "#262626",
"Gray100": "#f4f4f4",
},
"icon_secondary": {
"White": "#525252",
"Gray10": "#525252",
"Gray90": "#262626",
"Gray100": "#c6c6c6",
},
"icon_on_color": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#ffffff",
},
"icon_on_color_disabled": {
"White": "#8d8d8d",
"Gray10": "#8d8d8d",
"Gray90": "#262626",
"Gray100": ("#ffffff", 0.25),
},
"icon_interactive": {
"White": "#0f62fe",
"Gray10": "#0f62fe",
"Gray90": "#262626",
"Gray100": "#ffffff",
},
"icon_inverse": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#161616",
},
"icon_disabled": {
"White": ("#161616", 0.25),
"Gray10": ("#161616", 0.25),
"Gray90": "#262626",
"Gray100": ("#f4f4f4", 0.25),
},
# support tokens
"support_error": {
"White": "#da1e28",
"Gray10": "#da1e28",
"Gray90": "#262626",
"Gray100": "#fa4d56",
},
"support_success": {
"White": "#24a148",
"Gray10": "#24a148",
"Gray90": "#262626",
"Gray100": "#42be65",
},
"support_warning": {
"White": "#f1c21b",
"Gray10": "#f1c21b",
"Gray90": "#262626",
"Gray100": "#f1c21b",
},
"support_info": {
"White": "#0043ce",
"Gray10": "#0043ce",
"Gray90": "#262626",
"Gray100": "#4589ff",
},
"support_error_inverse": {
"White": "#fa4d56",
"Gray10": "#fa4d56",
"Gray90": "#262626",
"Gray100": "#da1e28",
},
"support_success_inverse": {
"White": "#42be65",
"Gray10": "#42be65",
"Gray90": "#262626",
"Gray100": "#24a148",
},
"support_warning_inverse": {
"White": "#f1c21b",
"Gray10": "#f1c21b",
"Gray90": "#262626",
"Gray100": "#f1c21b",
},
"support_info_inverse": {
"White": "#4589ff",
"Gray10": "#4589ff",
"Gray90": "#262626",
"Gray100": "#0043ce",
},
"support_caution_minor": {
"White": "#f1c21b",
"Gray10": "#f1c21b",
"Gray90": "#262626",
"Gray100": "#f1c21b",
},
"support_caution_major": {
"White": "#ff832b",
"Gray10": "#ff832b",
"Gray90": "#262626",
"Gray100": "#ff832b",
},
"support_caution_undefined": {
"White": "#8a3ffc",
"Gray10": "#8a3ffc",
"Gray90": "#262626",
"Gray100": "#a56eff",
},
# focus tokens
"focus": {
"White": "#0f62fe",
"Gray10": "#0f62fe",
"Gray90": "#262626",
"Gray100": "#ffffff",
},
"focus_inset": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#161616",
},
"focus_inverse": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#0f62fe",
},
# miscellaneous
"interactive": {
"White": "#0f62fe",
"Gray10": "#0f62fe",
"Gray90": "#262626",
"Gray100": "#4589ff",
},
"highlight": {
"White": "#d0e2ff",
"Gray10": "#d0e2ff",
"Gray90": "#262626",
"Gray100": "#001d6c",
},
"toggle_off": {
"White": "#8d8d8d",
"Gray10": "#8d8d8d",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"overlay": {
"White": ("#000000", 0.60),
"Gray10": ("#000000", 0.60),
"Gray90": "#262626",
"Gray100": ("#000000", 0.60),
},
"skeleton_element": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#525252",
},
"skeleton_background": {
"White": "#e5e5e5",
"Gray10": "#e5e5e5",
"Gray90": "#262626",
"Gray100": "#353535",
},
# button tokens
"button_primary": {
"White": "#0f62fe",
"Gray10": "#0f62fe",
"Gray90": "#262626",
"Gray100": "#0f62fe",
},
"button_primary_hover": {
"White": "#0353e9",
"Gray10": "#0353e9",
"Gray90": "#262626",
"Gray100": "#0353e9",
},
"button_primary_active": {
"White": "#002d9c",
"Gray10": "#002d9c",
"Gray90": "#262626",
"Gray100": "#002d9c",
},
"button_secondary": {
"White": "#393939",
"Gray10": "#393939",
"Gray90": "#262626",
"Gray100": "#6f6f6f",
},
"button_secondary_hover": {
"White": "#4c4c4c",
"Gray10": "#4c4c4c",
"Gray90": "#262626",
"Gray100": "#606060",
},
"button_secondary_active": {
"White": "#6f6f6f",
"Gray10": "#6f6f6f",
"Gray90": "#262626",
"Gray100": "#393939",
},
"button_tertiary": {
"White": "#0f62fe",
"Gray10": "#0f62fe",
"Gray90": "#262626",
"Gray100": "#ffffff",
},
"button_tertiary_hover": {
"White": "#0353e9",
"Gray10": "#0353e9",
"Gray90": "#262626",
"Gray100": "#f4f4f4",
},
"button_tertiary_active": {
"White": "#002d9c",
"Gray10": "#002d9c",
"Gray90": "#262626",
"Gray100": "#c6c6c6",
},
"button_danger_primary": {
"White": "#da1e28",
"Gray10": "#da1e28",
"Gray90": "#262626",
"Gray100": "#da1e28",
},
"button_danger_secondary": {
"White": "#da1e28",
"Gray10": "#da1e28",
"Gray90": "#262626",
"Gray100": "#fa4d56",
},
"button_danger_hover": {
"White": "#ba1b23",
"Gray10": "#ba1b23",
"Gray90": "#262626",
"Gray100": "#ba1b23",
},
"button_danger_active": {
"White": "#750e13",
"Gray10": "#750e13",
"Gray90": "#262626",
"Gray100": "#750e13",
},
"button_separator": {
"White": "#e0e0e0",
"Gray10": "#e0e0e0",
"Gray90": "#262626",
"Gray100": "#161616",
},
"button_disabled": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#525252",
},
# notification tokens
"notification_background_error": {
"White": "#fff1f1",
"Gray10": "#fff1f1",
"Gray90": "#262626",
"Gray100": "#262626",
},
"notification_background_success": {
"White": "#defbe6",
"Gray10": "#defbe6",
"Gray90": "#262626",
"Gray100": "#262626",
},
"notification_background_info": {
"White": "#edf5ff",
"Gray10": "#edf5ff",
"Gray90": "#262626",
"Gray100": "#262626",
},
"notification_background_warning": {
"White": "#fcf4d6",
"Gray10": "#fcf4d6",
"Gray90": "#262626",
"Gray100": "#262626",
},
"notification_action_hover": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#333333",
},
"notification_action_tertiary_inverse": {
"White": "#ffffff",
"Gray10": "#8d8d8d",
"Gray90": "#262626",
"Gray100": "#0f62fe",
},
"notification_action_tertiary_inverse_active": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#161616",
},
"notification_action_tertiary_inverse_hover": {
"White": "#c6c6c6",
"Gray10": "#c6c6c6",
"Gray90": "#262626",
"Gray100": "#002d9c",
},
"notification_action_tertiary_inverse_text": {
"White": "#161616",
"Gray10": "#161616",
"Gray90": "#262626",
"Gray100": "#ffffff",
},
"notification_action_tertiary_inverse_text_on_color_disabled": {
"White": "#ffffff",
"Gray10": "#ffffff",
"Gray90": "#262626",
"Gray100": "#ffffff",
},
}
[docs]
static_tokens = {
"blue_10": "#edf5ff",
"blue_20": "#d0e2ff",
"blue_30": "#a6c8ff",
"blue_40": "#78a9ff",
"blue_50": "#4589ff",
"blue_60": "#0f62fe",
"blue_70": "#0043ce",
"blue_80": "#002d9c",
"blue_90": "#001d6c",
"blue_100": "#001141",
"cyan_10": "#e5f6ff",
"cyan_20": "#bae6ff",
"cyan_30": "#82cfff",
"cyan_40": "#33b1ff",
"cyan_50": "#1192e8",
"cyan_60": "#0072c3",
"cyan_70": "#00539a",
"cyan_80": "#003a6d",
"cyan_90": "#012749",
"cyan_100": "#061727",
"gray_10": "#f4f4f4",
"gray_20": "#e0e0e0",
"gray_30": "#c6c6c6",
"gray_40": "#a8a8a8",
"gray_50": "#8d8d8d",
"gray_60": "#6f6f6f",
"gray_70": "#525252",
"gray_80": "#393939",
"gray_90": "#262626",
"gray_100": "#161616",
"green_10": "#defbe6",
"green_20": "#a7f0ba",
"green_30": "#6fdc8c",
"green_40": "#42be65",
"green_50": "#24a148",
"green_60": "#198038",
"green_70": "#0e6027",
"green_80": "#044317",
"green_90": "#022d0d",
"green_100": "#071908",
"magenta_10": "#fff0f7",
"magenta_20": "#ffd6e8",
"magenta_30": "#ffafd2",
"magenta_40": "#ff7eb6",
"magenta_50": "#ee5396",
"magenta_60": "#d02670",
"magenta_70": "#9f1853",
"magenta_80": "#740937",
"magenta_90": "#510224",
"magenta_100": "#2a0a18",
"orange_10": "#fff2e8",
"orange_20": "#ffd9be",
"orange_30": "#ffb784",
"orange_40": "#ff832b",
"orange_50": "#eb6200",
"orange_60": "#ba4e00",
"orange_70": "#8a3800",
"orange_80": "#5e2900",
"orange_90": "#3e1a00",
"orange_100": "#231000",
"purple_10": "#f6f2ff",
"purple_20": "#e8daff",
"purple_30": "#d4bbff",
"purple_40": "#be95ff",
"purple_50": "#a56eff",
"purple_60": "#8a3ffc",
"purple_70": "#6929c4",
"purple_80": "#491d8b",
"purple_90": "#31135e",
"purple_100": "#1c0f30",
"red_10": "#fff1f1",
"red_20": "#ffd7d9",
"red_30": "#ffb3b8",
"red_40": "#ff8389",
"red_50": "#fa4d56",
"red_60": "#da1e28",
"red_70": "#a2191f",
"red_80": "#750e13",
"red_90": "#520408",
"red_100": "#2d0709",
"teal_10": "#d9fbfb",
"teal_20": "#9ef0f0",
"teal_30": "#3ddbd9",
"teal_40": "#08bdba",
"teal_50": "#009d9a",
"teal_60": "#007d79",
"teal_70": "#005d5d",
"teal_80": "#004144",
"teal_90": "#022b30",
"teal_100": "#081a1c",
"yellow_10": "#fcf4d6",
"yellow_20": "#fddc69",
"yellow_30": "#f1c21b",
"yellow_40": "#d2a106",
"yellow_50": "#b28600",
"yellow_60": "#8e6a00",
"yellow_70": "#684e00",
"yellow_80": "#483700",
"yellow_90": "#302400",
"yellow_100": "#1c1500",
}
