My Themes, Next Experience (Polaris) Themes Part 4
This is Part 4. You should start with Part 1.
How do I make my Themes?
We have talked about how things are structured and how colors are generated in previous parts. Now we are going to start putting it all together and work out how to use it all in practice.
Absolute basic theme
As far as I know this is the true minimum for what you need to generate a theme. This assumes that you bring in all of the Polaris UX Styles into your UX Theme. The allows us to leverage all of the mapped colors as well as all of the colors that are not "themed" out of the box (i.e. the ones that the deoprototypes site or Theme Builder will always have the same and not based on your theme colors).
All colors are from the Polaris theme, so if you try this nothing will look any different.
{
"base": {
"--now-color--neutral": "79,86,100",
"--now-color--primary": "79,82,189",
"--now-color--secondary": "79,82,189",
"--now-color_selection--primary": "0,123,88",
"--now-color_selection--secondary": "79,82,189",
"--now-color--interactive": "79,82,189",
"--now-color_surface--brand": "79,82,189",
"--now-color_chrome--brand": "48,47,75",
"--now-color_chrome--divider": "42,41,65"
},
"properties": {
"--now-color_brand--neutral": "79,86,100",
"--now-color_brand--primary": "79,82,189",
"--now-color_brand--secondary": "48,47,75"
}
}
Despite the Polaris theme not doing it, I think that the intention is for the same value to be used for --now-color--primary
and --now-color_brand--primary
(same with secondary and neutral). This gives you a place to consistently find your brand colors. Depending on your chosen colors for primary and secondary the base color could end up at any number, and your neutral color will never appear in the --now-color--neutral
variations.
You will also need these colors, but they aren't related to your theme (by default, you can totally go nuts with them).
{
"base": {
"--now-color--link": "60,89,231",
"--now-color--focus": "60,89,231",
"--now-color_alert--critical": "228,35,56",
"--now-color_alert--high": "253,151,0",
"--now-color_alert--warning": "240,224,0",
"--now-color_alert--moderate": "123,92,240",
"--now-color_alert--info": "0,121,204",
"--now-color_alert--positive": "51,131,11",
"--now-color_alert--low": "117,117,129",
"--now-color_grouped--blue": "103,211,230",
"--now-color_grouped--brown": "211,166,117",
"--now-color_grouped--gray": "163,171,172",
"--now-color_grouped--green": "81,185,98",
"--now-color_grouped--green-yellow": "200,218,110",
"--now-color_grouped--magenta": "232,105,191",
"--now-color_grouped--orange": "255,140,114",
"--now-color_grouped--pink": "224,128,160",
"--now-color_grouped--purple": "189,122,234",
"--now-color_grouped--teal": "81,194,194",
"--now-color_grouped--yellow": "255,198,81"
},
"properties": {
"--now-datavis_color--blue-0": "206,241,247",
"--now-datavis_color--blue-1": "167,229,241",
"--now-datavis_color--blue-2": "128,218,235",
"--now-datavis_color--blue-3": "88,207,229",
"--now-datavis_color--blue-4": "49,195,223",
"--now-datavis_color--blue-5": "10,184,217",
"--now-datavis_color--blue-6": "9,162,191",
"--now-datavis_color--blue-7": "8,140,165",
"--now-datavis_color--blue-8": "6,118,139",
"--now-datavis_color--blue-9": "5,96,113",
"--now-datavis_color--blue-10": "4,74,87",
"--now-datavis_color--brown-0": "242,229,215",
"--now-datavis_color--brown-1": "232,208,182",
"--now-datavis_color--brown-2": "222,187,150",
"--now-datavis_color--brown-3": "212,166,118",
"--now-datavis_color--brown-4": "201,145,85",
"--now-datavis_color--brown-5": "191,124,53",
"--now-datavis_color--brown-6": "168,109,47",
"--now-datavis_color--brown-7": "145,94,40",
"--now-datavis_color--brown-8": "122,79,34",
"--now-datavis_color--brown-9": "99,65,28",
"--now-datavis_color--brown-10": "76,50,21",
"--now-datavis_color--green-0": "204,235,209",
"--now-datavis_color--green-1": "163,218,172",
"--now-datavis_color--green-2": "122,202,135",
"--now-datavis_color--green-3": "82,186,99",
"--now-datavis_color--green-4": "41,169,62",
"--now-datavis_color--green-5": "0,153,25",
"--now-datavis_color--green-6": "0,135,22",
"--now-datavis_color--green-7": "0,116,19",
"--now-datavis_color--green-8": "0,98,16",
"--now-datavis_color--green-9": "0,80,13",
"--now-datavis_color--green-10": "0,61,10",
"--now-datavis_color--olive-0": "224,231,211",
"--now-datavis_color--olive-1": "200,211,176",
"--now-datavis_color--olive-2": "175,192,141",
"--now-datavis_color--olive-3": "151,173,105",
"--now-datavis_color--olive-4": "127,153,70",
"--now-datavis_color--olive-5": "102,134,35",
"--now-datavis_color--olive-6": "90,118,31",
"--now-datavis_color--olive-7": "78,102,27",
"--now-datavis_color--olive-8": "65,86,22",
"--now-datavis_color--olive-9": "53,70,18",
"--now-datavis_color--olive-10": "41,54,14",
"--now-datavis_color--orange-0": "255,221,214",
"--now-datavis_color--orange-1": "255,195,181",
"--now-datavis_color--orange-2": "255,168,147",
"--now-datavis_color--orange-3": "255,141,114",
"--now-datavis_color--orange-4": "255,114,81",
"--now-datavis_color--orange-5": "255,87,48",
"--now-datavis_color--orange-6": "224,77,42",
"--now-datavis_color--orange-7": "194,66,37",
"--now-datavis_color--orange-8": "163,56,31",
"--now-datavis_color--orange-9": "133,45,25",
"--now-datavis_color--orange-10": "102,35,19",
"--now-datavis_color--pink-0": "248,209,235",
"--now-datavis_color--pink-1": "242,172,219",
"--now-datavis_color--pink-2": "237,135,204",
"--now-datavis_color--pink-3": "231,98,188",
"--now-datavis_color--pink-4": "226,61,172",
"--now-datavis_color--pink-5": "220,24,156",
"--now-datavis_color--pink-6": "194,21,137",
"--now-datavis_color--pink-7": "167,18,119",
"--now-datavis_color--pink-8": "141,15,100",
"--now-datavis_color--pink-9": "114,13,81",
"--now-datavis_color--pink-10": "88,10,62",
"--now-datavis_color--purple-0": "224,212,248",
"--now-datavis_color--purple-1": "199,178,242",
"--now-datavis_color--purple-2": "174,144,236",
"--now-datavis_color--purple-3": "149,110,231",
"--now-datavis_color--purple-4": "124,76,225",
"--now-datavis_color--purple-5": "99,42,219",
"--now-datavis_color--purple-6": "87,37,193",
"--now-datavis_color--purple-7": "75,32,166",
"--now-datavis_color--purple-8": "63,27,140",
"--now-datavis_color--purple-9": "52,22,114",
"--now-datavis_color--purple-10": "40,17,88",
"--now-datavis_color--red-0": "248,214,226",
"--now-datavis_color--red-1": "243,182,202",
"--now-datavis_color--red-2": "238,149,179",
"--now-datavis_color--red-3": "233,117,156",
"--now-datavis_color--red-4": "227,85,132",
"--now-datavis_color--red-5": "222,52,109",
"--now-datavis_color--red-6": "195,46,96",
"--now-datavis_color--red-7": "169,40,83",
"--now-datavis_color--red-8": "142,33,70",
"--now-datavis_color--red-9": "115,27,57",
"--now-datavis_color--red-10": "89,21,44",
"--now-datavis_color--teal-0": "204,237,237",
"--now-datavis_color--teal-1": "163,223,223",
"--now-datavis_color--teal-2": "122,209,209",
"--now-datavis_color--teal-3": "82,195,195",
"--now-datavis_color--teal-4": "41,180,180",
"--now-datavis_color--teal-5": "0,166,166",
"--now-datavis_color--teal-6": "0,146,146",
"--now-datavis_color--teal-7": "0,126,126",
"--now-datavis_color--teal-8": "0,106,106",
"--now-datavis_color--teal-9": "0,86,86",
"--now-datavis_color--teal-10": "0,66,66",
"--now-datavis_color--violet-0": "236,216,249",
"--now-datavis_color--violet-1": "220,185,244",
"--now-datavis_color--violet-2": "205,154,239",
"--now-datavis_color--violet-3": "190,123,234",
"--now-datavis_color--violet-4": "174,92,229",
"--now-datavis_color--violet-5": "159,61,224",
"--now-datavis_color--violet-6": "140,54,197",
"--now-datavis_color--violet-7": "121,46,170",
"--now-datavis_color--violet-8": "102,39,143",
"--now-datavis_color--violet-9": "83,32,117",
"--now-datavis_color--violet-10": "64,24,90",
"--now-datavis_color--yellow-0": "255,238,204",
"--now-datavis_color--yellow-1": "255,225,163",
"--now-datavis_color--yellow-2": "255,212,122",
"--now-datavis_color--yellow-3": "255,199,82",
"--now-datavis_color--yellow-4": "255,185,41",
"--now-datavis_color--yellow-5": "255,172,0",
"--now-datavis_color--yellow-6": "224,151,0",
"--now-datavis_color--yellow-7": "194,131,0",
"--now-datavis_color--yellow-8": "163,110,0",
"--now-datavis_color--yellow-9": "133,89,0",
"--now-datavis_color--yellow-10": "102,69,0",
"--now-datavis_color--yellow-green-0": "237,244,208",
"--now-datavis_color--yellow-green-1": "223,235,171",
"--now-datavis_color--yellow-green-2": "209,225,133",
"--now-datavis_color--yellow-green-3": "195,216,96",
"--now-datavis_color--yellow-green-4": "181,207,58",
"--now-datavis_color--yellow-green-5": "167,198,21",
"--now-datavis_color--yellow-green-6": "147,174,19",
"--now-datavis_color--yellow-green-7": "127,151,16",
"--now-datavis_color--yellow-green-8": "107,127,13",
"--now-datavis_color--yellow-green-9": "87,103,11",
"--now-datavis_color--yellow-green-10": "67,79,8",
"--now-color_presence--available": "78,168,0",
"--now-color_presence--busy": "255,51,75",
"--now-color_presence--away": "226,121,24",
"--now-color_presence--offline": "146,148,160"
}
}
The datavis colors really should be "base" so they can generate the variations...
Everything else in the 1700 or so lines of the UX Style record is just mappings defining colors as other existing colors.
Using the deoprototypes site we know that we only need to supply 3 colors to generate a theme. According to the code from deoprototypes (see Part 3) they get broken down like this.
Neutral color:
--now-color_brand--neutral
Primary color:
--now-color--primary
--now-color--interactive
--now-color_chrome--brand
--now-color_brand--primary
--now-color_chrome--divider *
--now-color--neutral **
Secondary color:
--now-color--secondary
--now-color_selection--primary
--now-color_selection--secondary
--now-color_surface--brand
--now-color_brand--secondary *
* It's complicated
** It's complicated and weird... the neutral colors are based on the Primary color's hue, with a max saturation of 5 and a luminosity of 35 (in the deoprototype code, if may be somewhat different in an instance).
Step by step guide
- Create a UX Theme record.
- Relate the UX styles for Typography, Shape and Form, Mobile Colors Default, UI16 Dashboard, Imagery
- Create a UX Style with all of the color mappings from the Polaris Colors UX Style (feel free to re-use this for multiple themes as well as including colors that you don't plan to override like the alert and datavis colors)
- Create a UX Styles for theming the Login page and applying the 'system' fonts (more details when I talk about useful variables)
- Pick some pretty colors
- Tweak colors and change color mappings as needed
- Repeat step 6. as needed (I usually end up with at least 10 revisions, usually 20+, sometimes it is many times more as I change my mind or an upgrade changes things).
Series
Part 4 <-- you are here