protomaps-themes-base
Version:
Protomaps basemap themes for MapLibre GL JS
671 lines (604 loc) • 15.7 kB
text/typescript
export interface Theme {
background: string;
earth: string;
park_a: string;
park_b: string;
hospital: string;
industrial: string;
school: string;
wood_a: string;
wood_b: string;
pedestrian: string;
scrub_a: string;
scrub_b: string;
glacier: string;
sand: string;
beach: string;
aerodrome: string;
runway: string;
water: string;
zoo: string;
military: string;
tunnel_other_casing: string;
tunnel_minor_casing: string;
tunnel_link_casing: string;
tunnel_major_casing: string;
tunnel_highway_casing: string;
tunnel_other: string;
tunnel_minor: string;
tunnel_link: string;
tunnel_major: string;
tunnel_highway: string;
pier: string;
buildings: string;
minor_service_casing: string;
minor_casing: string;
link_casing: string;
major_casing_late: string;
highway_casing_late: string;
other: string;
minor_service: string;
minor_a: string;
minor_b: string;
link: string;
major_casing_early: string;
major: string;
highway_casing_early: string;
highway: string;
railway: string;
boundaries: string;
bridges_other_casing: string;
bridges_minor_casing: string;
bridges_link_casing: string;
bridges_major_casing: string;
bridges_highway_casing: string;
bridges_other: string;
bridges_minor: string;
bridges_link: string;
bridges_major: string;
bridges_highway: string;
roads_label_minor: string;
roads_label_minor_halo: string;
roads_label_major: string;
roads_label_major_halo: string;
ocean_label: string;
subplace_label: string;
subplace_label_halo: string;
city_label: string;
city_label_halo: string;
state_label: string;
state_label_halo: string;
country_label: string;
address_label: string;
address_label_halo: string;
regular?: string;
bold?: string;
italic?: string;
pois?: Pois;
landcover?: Landcover;
// deprecated
peak_label: string;
waterway_label: string;
}
export interface Pois {
blue: string;
green: string;
lapis: string;
pink: string;
red: string;
slategray: string;
tangerine: string;
turquoise: string;
}
export interface Landcover {
barren: string;
farmland: string;
forest: string;
glacier: string;
grassland: string;
scrub: string;
urban_area: string;
}
export const CONTRAST: Theme = {
background: "#dddddd",
earth: "#ededed",
park_a: "#bfc99c",
park_b: "#bfc99c",
hospital: "#ffeae8",
industrial: "#f8ffed",
school: "#f2fef9",
wood_a: "#bfc99c",
wood_b: "#bfc99c",
pedestrian: "#eef0f0",
scrub_a: "#bfc99c",
scrub_b: "#bfc99c",
glacier: "#ffffff",
sand: "#ebe7da",
beach: "#ebe7da",
aerodrome: "#dbe7e7",
runway: "#d1d9d9",
water: "#84b7cf",
zoo: "#ebe6ed",
military: "#ebe6ed",
tunnel_other_casing: "#ffffff",
tunnel_minor_casing: "#e2e2e2",
tunnel_link_casing: "#e2e2e2",
tunnel_major_casing: "#e3cfd3",
tunnel_highway_casing: "#ebcea2",
tunnel_other: "#f7f7f7",
tunnel_minor: "#ebebeb",
tunnel_link: "#ebebeb",
tunnel_major: "#ebebeb",
tunnel_highway: "#ebebeb",
pier: "#ededed",
buildings: "#cbcece",
minor_service_casing: "#e2e2e2",
minor_casing: "#e2e2e2",
link_casing: "#e2e2e2",
major_casing_late: "#e3cfd3",
highway_casing_late: "#ebcea2",
other: "#ffffff",
minor_service: "#ffffff",
minor_a: "#fff2bb",
minor_b: "#fff2bb",
link: "#fff2bb",
major_casing_early: "#e3cfd3",
major: "#ffdf59",
highway_casing_early: "#ebcea2",
highway: "#e9ac77",
railway: "#b3bcc9",
boundaries: "#5c4a6b",
waterway_label: "#a4cae1",
bridges_other_casing: "#ffffff",
bridges_minor_casing: "#e2e2e2",
bridges_link_casing: "#e1e1e1",
bridges_major_casing: "#e3cfd3",
bridges_highway_casing: "#ebcea2",
bridges_other: "#ffffff",
bridges_minor: "#ffffff",
bridges_link: "#e1e1e1",
bridges_major: "#ffffff",
bridges_highway: "#fefffc",
roads_label_minor: "#91888b",
roads_label_minor_halo: "#ffffff",
roads_label_major: "#91888b",
roads_label_major_halo: "#ffffff",
ocean_label: "#ffffff",
peak_label: "#61bb5b",
subplace_label: "#757d91",
subplace_label_halo: "#ffffff",
city_label: "#3c3c3c",
city_label_halo: "#ffffff",
state_label: "#777777",
state_label_halo: "#ffffff",
country_label: "#9590aa",
address_label: "#91888b",
address_label_halo: "#ffffff",
};
export const LIGHT: Theme = {
background: "#cccccc",
earth: "#e2dfda",
park_a: "#cfddd5",
park_b: "#9cd3b4",
hospital: "#e4dad9",
industrial: "#d1dde1",
school: "#e4ded7",
wood_a: "#d0ded0",
wood_b: "#a0d9a0",
pedestrian: "#e3e0d4",
scrub_a: "#cedcd7",
scrub_b: "#99d2bb",
glacier: "#e7e7e7",
sand: "#e2e0d7",
beach: "#e8e4d0",
aerodrome: "#dadbdf",
runway: "#e9e9ed",
water: "#80deea",
zoo: "#c6dcdc",
military: "#dcdcdc",
tunnel_other_casing: "#e0e0e0",
tunnel_minor_casing: "#e0e0e0",
tunnel_link_casing: "#e0e0e0",
tunnel_major_casing: "#e0e0e0",
tunnel_highway_casing: "#e0e0e0",
tunnel_other: "#d5d5d5",
tunnel_minor: "#d5d5d5",
tunnel_link: "#d5d5d5",
tunnel_major: "#d5d5d5",
tunnel_highway: "#d5d5d5",
pier: "#e0e0e0",
buildings: "#cccccc",
minor_service_casing: "#e0e0e0",
minor_casing: "#e0e0e0",
link_casing: "#e0e0e0",
major_casing_late: "#e0e0e0",
highway_casing_late: "#e0e0e0",
other: "#ebebeb",
minor_service: "#ebebeb",
minor_a: "#ebebeb",
minor_b: "#ffffff",
link: "#ffffff",
major_casing_early: "#e0e0e0",
major: "#ffffff",
highway_casing_early: "#e0e0e0",
highway: "#ffffff",
railway: "#a7b1b3",
boundaries: "#adadad",
waterway_label: "#ffffff",
bridges_other_casing: "#e0e0e0",
bridges_minor_casing: "#e0e0e0",
bridges_link_casing: "#e0e0e0",
bridges_major_casing: "#e0e0e0",
bridges_highway_casing: "#e0e0e0",
bridges_other: "#ebebeb",
bridges_minor: "#ffffff",
bridges_link: "#ffffff",
bridges_major: "#f5f5f5",
bridges_highway: "#ffffff",
roads_label_minor: "#91888b",
roads_label_minor_halo: "#ffffff",
roads_label_major: "#938a8d",
roads_label_major_halo: "#ffffff",
ocean_label: "#728dd4",
peak_label: "#7e9aa0",
subplace_label: "#8f8f8f",
subplace_label_halo: "#e0e0e0",
city_label: "#5c5c5c",
city_label_halo: "#e0e0e0",
state_label: "#b3b3b3",
state_label_halo: "#e0e0e0",
country_label: "#a3a3a3",
address_label: "#91888b",
address_label_halo: "#ffffff",
pois: {
blue: "#1A8CBD",
green: "#20834D",
lapis: "#315BCF",
pink: "#EF56BA",
red: "#F2567A",
slategray: "#6A5B8F",
tangerine: "#CB6704",
turquoise: "#00C3D4",
},
landcover: {
grassland: "rgba(210, 239, 207, 1)",
barren: "rgba(255, 243, 215, 1)",
urban_area: "rgba(230, 230, 230, 1)",
farmland: "rgba(216, 239, 210, 1)",
glacier: "rgba(255, 255, 255, 1)",
scrub: "rgba(234, 239, 210, 1)",
forest: "rgba(196, 231, 210, 1)",
},
};
export const DARK: Theme = {
background: "#34373d",
earth: "#1f1f1f",
park_a: "#1c2421",
park_b: "#192a24",
hospital: "#252424",
industrial: "#222222",
school: "#262323",
wood_a: "#202121",
wood_b: "#202121",
pedestrian: "#1e1e1e",
scrub_a: "#222323",
scrub_b: "#222323",
glacier: "#1c1c1c",
sand: "#212123",
beach: "#28282a",
aerodrome: "#1e1e1e",
runway: "#333333",
water: "#31353f",
zoo: "#222323",
military: "#242323",
tunnel_other_casing: "#141414",
tunnel_minor_casing: "#141414",
tunnel_link_casing: "#141414",
tunnel_major_casing: "#141414",
tunnel_highway_casing: "#141414",
tunnel_other: "#292929",
tunnel_minor: "#292929",
tunnel_link: "#292929",
tunnel_major: "#292929",
tunnel_highway: "#292929",
pier: "#333333",
buildings: "#111111",
minor_service_casing: "#1f1f1f",
minor_casing: "#1f1f1f",
link_casing: "#1f1f1f",
major_casing_late: "#1f1f1f",
highway_casing_late: "#1f1f1f",
other: "#333333",
minor_service: "#333333",
minor_a: "#3d3d3d",
minor_b: "#333333",
link: "#3d3d3d",
major_casing_early: "#1f1f1f",
major: "#3d3d3d",
highway_casing_early: "#1f1f1f",
highway: "#474747",
railway: "#000000",
boundaries: "#5b6374",
waterway_label: "#717784",
bridges_other_casing: "#2b2b2b",
bridges_minor_casing: "#1f1f1f",
bridges_link_casing: "#1f1f1f",
bridges_major_casing: "#1f1f1f",
bridges_highway_casing: "#1f1f1f",
bridges_other: "#333333",
bridges_minor: "#333333",
bridges_link: "#3d3d3d",
bridges_major: "#3d3d3d",
bridges_highway: "#474747",
roads_label_minor: "#525252",
roads_label_minor_halo: "#1f1f1f",
roads_label_major: "#666666",
roads_label_major_halo: "#1f1f1f",
ocean_label: "#717784",
peak_label: "#898080",
subplace_label: "#525252",
subplace_label_halo: "#1f1f1f",
city_label: "#7a7a7a",
city_label_halo: "#212121",
state_label: "#3d3d3d",
state_label_halo: "#1f1f1f",
country_label: "#5c5c5c",
address_label: "#525252",
address_label_halo: "#1f1f1f",
pois: {
blue: "#4299BB",
green: "#30C573",
lapis: "#2B5CEA",
pink: "#EF56BA",
red: "#F2567A",
slategray: "#93939F",
tangerine: "#F19B6E",
turquoise: "#00C3D4",
},
landcover: {
grassland: "rgba(30, 41, 31, 1)",
barren: "rgba(38, 38, 36, 1)",
urban_area: "rgba(28, 28, 28, 1)",
farmland: "rgba(31, 36, 32, 1)",
glacier: "rgba(43, 43, 43, 1)",
scrub: "rgba(34, 36, 30, 1)",
forest: "rgba(28, 41, 37, 1)",
},
};
export const WHITE: Theme = {
background: "#ffffff",
earth: "#ffffff",
park_a: "#fcfcfc",
park_b: "#fcfcfc",
hospital: "#f8f8f8",
industrial: "#fcfcfc",
school: "#f8f8f8",
wood_a: "#fafafa",
wood_b: "#fafafa",
pedestrian: "#fdfdfd",
scrub_a: "#fafafa",
scrub_b: "#fafafa",
glacier: "#fcfcfc",
sand: "#fafafa",
beach: "#f6f6f6",
aerodrome: "#fdfdfd",
runway: "#efefef",
water: "#dcdcdc",
zoo: "#f7f7f7",
military: "#fcfcfc",
tunnel_other_casing: "#d6d6d6",
tunnel_minor_casing: "#fcfcfc",
tunnel_link_casing: "#fcfcfc",
tunnel_major_casing: "#fcfcfc",
tunnel_highway_casing: "#fcfcfc",
tunnel_other: "#d6d6d6",
tunnel_minor: "#d6d6d6",
tunnel_link: "#d6d6d6",
tunnel_major: "#d6d6d6",
tunnel_highway: "#d6d6d6",
pier: "#efefef",
buildings: "#efefef",
minor_service_casing: "#ffffff",
minor_casing: "#ffffff",
link_casing: "#ffffff",
major_casing_late: "#ffffff",
highway_casing_late: "#ffffff",
other: "#f5f5f5",
minor_service: "#f5f5f5",
minor_a: "#ebebeb",
minor_b: "#f5f5f5",
link: "#ebebeb",
major_casing_early: "#ffffff",
major: "#ebebeb",
highway_casing_early: "#ffffff",
highway: "#ebebeb",
railway: "#d6d6d6",
boundaries: "#adadad",
waterway_label: "#adadad",
bridges_other_casing: "#ffffff",
bridges_minor_casing: "#ffffff",
bridges_link_casing: "#ffffff",
bridges_major_casing: "#ffffff",
bridges_highway_casing: "#ffffff",
bridges_other: "#f5f5f5",
bridges_minor: "#f5f5f5",
bridges_link: "#ebebeb",
bridges_major: "#ebebeb",
bridges_highway: "#ebebeb",
roads_label_minor: "#adadad",
roads_label_minor_halo: "#ffffff",
roads_label_major: "#999999",
roads_label_major_halo: "#ffffff",
ocean_label: "#adadad",
peak_label: "#adadad",
subplace_label: "#8f8f8f",
subplace_label_halo: "#ffffff",
city_label: "#5c5c5c",
city_label_halo: "#ffffff",
state_label: "#b3b3b3",
state_label_halo: "#ffffff",
country_label: "#b8b8b8",
address_label: "#adadad",
address_label_halo: "#ffffff",
};
export const GRAYSCALE: Theme = {
background: "#a3a3a3",
earth: "#cccccc",
park_a: "#c2c2c2",
park_b: "#c2c2c2",
hospital: "#d0d0d0",
industrial: "#c6c6c6",
school: "#d0d0d0",
wood_a: "#c2c2c2",
wood_b: "#c2c2c2",
pedestrian: "#c4c4c4",
scrub_a: "#c2c2c2",
scrub_b: "#c2c2c2",
glacier: "#d2d2d2",
sand: "#d2d2d2",
beach: "#d2d2d2",
aerodrome: "#c9c9c9",
runway: "#f5f5f5",
water: "#a3a3a3",
zoo: "#c7c7c7",
military: "#bfbfbf",
tunnel_other_casing: "#b8b8b8",
tunnel_minor_casing: "#b8b8b8",
tunnel_link_casing: "#b8b8b8",
tunnel_major_casing: "#b8b8b8",
tunnel_highway_casing: "#b8b8b8",
tunnel_other: "#d6d6d6",
tunnel_minor: "#d6d6d6",
tunnel_link: "#d6d6d6",
tunnel_major: "#d6d6d6",
tunnel_highway: "#d6d6d6",
pier: "#b8b8b8",
buildings: "#e0e0e0",
minor_service_casing: "#cccccc",
minor_casing: "#cccccc",
link_casing: "#cccccc",
major_casing_late: "#cccccc",
highway_casing_late: "#cccccc",
other: "#e0e0e0",
minor_service: "#e0e0e0",
minor_a: "#ebebeb",
minor_b: "#e0e0e0",
link: "#ebebeb",
major_casing_early: "#cccccc",
major: "#ebebeb",
highway_casing_early: "#cccccc",
highway: "#ebebeb",
railway: "#f5f5f5",
boundaries: "#5c5c5c",
waterway_label: "#7a7a7a",
bridges_other_casing: "#cccccc",
bridges_minor_casing: "#cccccc",
bridges_link_casing: "#cccccc",
bridges_major_casing: "#cccccc",
bridges_highway_casing: "#cccccc",
bridges_other: "#e0e0e0",
bridges_minor: "#e0e0e0",
bridges_link: "#ebebeb",
bridges_major: "#ebebeb",
bridges_highway: "#ebebeb",
roads_label_minor: "#999999",
roads_label_minor_halo: "#e0e0e0",
roads_label_major: "#8f8f8f",
roads_label_major_halo: "#ebebeb",
ocean_label: "#7a7a7a",
peak_label: "#5c5c5c",
subplace_label: "#7a7a7a",
subplace_label_halo: "#cccccc",
city_label: "#474747",
city_label_halo: "#cccccc",
state_label: "#999999",
state_label_halo: "#cccccc",
country_label: "#858585",
address_label: "#999999",
address_label_halo: "#e0e0e0",
};
export const BLACK: Theme = {
background: "#2b2b2b",
earth: "#141414",
park_a: "#181818",
park_b: "#181818",
hospital: "#1d1d1d",
industrial: "#101010",
school: "#111111",
wood_a: "#1a1a1a",
wood_b: "#1a1a1a",
pedestrian: "#191919",
scrub_a: "#1c1c1c",
scrub_b: "#1c1c1c",
glacier: "#191919",
sand: "#161616",
beach: "#1f1f1f",
aerodrome: "#191919",
runway: "#323232",
water: "#333333",
zoo: "#191919",
military: "#121212",
tunnel_other_casing: "#101010",
tunnel_minor_casing: "#101010",
tunnel_link_casing: "#101010",
tunnel_major_casing: "#101010",
tunnel_highway_casing: "#101010",
tunnel_other: "#292929",
tunnel_minor: "#292929",
tunnel_link: "#292929",
tunnel_major: "#292929",
tunnel_highway: "#292929",
pier: "#0a0a0a",
buildings: "#0a0a0a",
minor_service_casing: "#141414",
minor_casing: "#141414",
link_casing: "#141414",
major_casing_late: "#141414",
highway_casing_late: "#141414",
other: "#1f1f1f",
minor_service: "#1f1f1f",
minor_a: "#292929",
minor_b: "#1f1f1f",
link: "#1f1f1f",
major_casing_early: "#141414",
major: "#292929",
highway_casing_early: "#141414",
highway: "#292929",
railway: "#292929",
boundaries: "#707070",
waterway_label: "#707070",
bridges_other_casing: "#141414",
bridges_minor_casing: "#141414",
bridges_link_casing: "#141414",
bridges_major_casing: "#141414",
bridges_highway_casing: "#141414",
bridges_other: "#1f1f1f",
bridges_minor: "#1f1f1f",
bridges_link: "#292929",
bridges_major: "#292929",
bridges_highway: "#292929",
roads_label_minor: "#525252",
roads_label_minor_halo: "#141414",
roads_label_major: "#5c5c5c",
roads_label_major_halo: "#141414",
ocean_label: "#707070",
peak_label: "#707070",
subplace_label: "#5c5c5c",
subplace_label_halo: "#141414",
city_label: "#999999",
city_label_halo: "#141414",
state_label: "#3d3d3d",
state_label_halo: "#141414",
country_label: "#707070",
address_label: "#525252",
address_label_halo: "#141414",
};
const themes: Record<string, Theme> = {
light: LIGHT,
dark: DARK,
white: WHITE,
grayscale: GRAYSCALE,
black: BLACK,
contrast: CONTRAST,
};
export default themes;