feat: implement customPageTheme which includes core material-ui theming features & backstage pages theming features

2020-10-04 17:55:43 +05:30
parent 34c6f38bf9
commit 5cf3f854d3
4 changed files with 108 additions and 1 deletions
@@ -19,6 +19,8 @@ import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
 import { Overrides } from '@material-ui/core/styles/overrides';

 import {
+  BackstagePageTheme,
+  BackstagePageThemeOptions,
  BackstageTheme,
  BackstageThemeOptions,
  SimpleThemeOptions,
@@ -242,3 +244,15 @@ export function createTheme(options: SimpleThemeOptions): BackstageTheme {
  const theme = { ...baseTheme, overrides };
  return theme;
 }
+
+export function createPageTheme(
+  options: BackstagePageThemeOptions,
+): BackstagePageTheme {
+  const baseTheme = createTheme(options);
+  const pageTheme = options.pageTheme;
+
+  return {
+    pageTheme,
+    baseTheme,
+  };
+}
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PageTheme } from './types';
+
+/*
+  # How to add a shape
+  1. Get the svg shape from figma, should be ~1400 wide, ~400 high
+    and only the white->transparent mask, no colors.
+  2. Run it through https://jakearchibald.github.io/svgomg/
+  3. Run that through https://github.com/tigt/mini-svg-data-uri
+    with something like https://npm.runkit.com/mini-svg-data-uri
+  4. Wrap the output in `url("")`
+  5. Give it a name and paste it into the `shapes` object below.
+*/
+export const shapes: Record<string, string> = {
+  wave: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1368' height='401' x='0' y='0' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M437 116C223 116 112 0 112 0h1256v400c-82 0-225-21-282-109-112-175-436-175-649-175z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1368 400V282C891-29 788 40 711 161 608 324 121 372 0 361v39h1368z'/%3e%3cpath fill='url(%23paint2_linear)' d='M1368 244v156H0V94c92-24 198-46 375 0l135 41c176 51 195 109 858 109z'/%3e%3cpath fill='url(%23paint3_linear)' d='M1252 400h116c-14-7-35-14-116-16-663-14-837-128-1013-258l-85-61C98 28 46 8 0 0v400h1252z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M-172-98h1671v601H-172z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='602' x2='1093.5' y1='-960.5' y2='272' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='482' x2='480' y1='1058.5' y2='70.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='424' x2='446.1' y1='-587.5' y2='274.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='587' x2='349' y1='-1120.5' y2='341' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`,
+  wave2: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1764' height='479' x='-229' y='-6' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M0 400h1350C1321 336 525 33 179-2c-345-34-395 236-408 402H0z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1378 177v223H0V217s219 75 327 52C436 246 717-35 965 45s254 144 413 132z'/%3e%3cpath fill='url(%23paint2_linear)' d='M26 400l-78-16c-170 205-44-6-137-30l-4-1 4 1 137 30c37-45 89-110 159-201 399-514-45 238 1176-50 275-65 354-39 91 267H26z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='431' x2='397.3' y1='-599' y2='372.8' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='236.5' x2='446.6' y1='-586' y2='381.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='851.8' x2='640.4' y1='-867.2' y2='363.7' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`,
+  round: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='2269' height='1408' x='-610' y='-509' maskUnits='userSpaceOnUse'%3e%3ccircle cx='1212.8' cy='74.8' r='317.5' fill='url(%23paint0_linear)' transform='rotate(-52 1213 75)'/%3e%3ccircle cx='737.8' cy='445.8' r='317.5' fill='url(%23paint1_linear)' transform='rotate(-116 738 446)'/%3e%3ccircle cx='601.8' cy='52.8' r='418.6' fill='url(%23paint2_linear)' transform='rotate(-117 602 53)'/%3e%3ccircle cx='999.8' cy='364' r='389.1' fill='url(%23paint3_linear)' transform='rotate(31 1000 364)'/%3e%3cellipse cx='-109.2' cy='263.5' fill='url(%23paint4_linear)' rx='429.2' ry='465.8' transform='rotate(-85 -109 264)'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='1301.2' x2='161.4' y1='-1879.7' y2='-969.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='826.2' x2='-313.6' y1='-1508.7' y2='-598.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='718.4' x2='-784.3' y1='-2524' y2='-1324.2' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='1108.2' x2='-288.6' y1='-2031.1' y2='-915.9' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint4_linear' x1='10.4' x2='-1626.5' y1='-2603.8' y2='-1399.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`,
+};
+
+export const colorVariants: Record<string, string[]> = {
+  darkGrey: ['#171717', '#383838'],
+  marineBlue: ['#006D8F', '#0049A1'],
+  veryBlue: ['#0027AF', '#270094'],
+  rubyRed: ['#98002B', '#8D1134'],
+  toastyOrange: ['#BE2200', '#A41D00'],
+  purpleSky: ['#8912CA', '#3E00EA'],
+  eveningSea: ['#00FFF2', '#035355'],
+  teal: ['#005B4B'],
+  pinkSea: ['#C8077A', '#C2297D'],
+};
+
+// As the background shapes and colors are decorative, we place them onto
+// the page as a css background-image instead of an html element of its own.
+// Utility to not have to write colors and shapes twice.
+export function genPageTheme(colors: string[], shape: string): PageTheme {
+  const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;
+  const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`;
+  const backgroundImage = `${shape},  ${gradient}`;
+
+  return { colors, shape, backgroundImage };
+}
+
+export const pageTheme: Record<string, PageTheme> = {
+  home: genPageTheme(colorVariants.teal, shapes.wave),
+  documentation: genPageTheme(colorVariants.pinkSea, shapes.wave2),
+  tool: genPageTheme(colorVariants.purpleSky, shapes.round),
+  service: genPageTheme(colorVariants.marineBlue, shapes.wave),
+  website: genPageTheme(colorVariants.veryBlue, shapes.wave),
+  library: genPageTheme(colorVariants.rubyRed, shapes.wave),
+  other: genPageTheme(colorVariants.darkGrey, shapes.wave),
+  app: genPageTheme(colorVariants.toastyOrange, shapes.wave),
+};
@@ -14,7 +14,8 @@
 * limitations under the License.
 */

-import { createTheme } from './baseTheme';
+import { createTheme, createPageTheme } from './baseTheme';
+import { pageTheme } from './pageTheme';
 import { yellow } from '@material-ui/core/colors';

 export const lightTheme = createTheme({
@@ -132,3 +133,8 @@ export const darkTheme = createTheme({
    },
  },
 });
+
+export const customPageTheme = createPageTheme({
+  pageTheme,
+  palette: lightTheme.palette,
+});
@@ -87,3 +87,24 @@ export type SimpleThemeOptions = {
  palette: BackstagePaletteOptions;
  fontFamily?: string;
 };
+
+export type PageTheme = {
+  colors: string[];
+  shape: string;
+  backgroundImage: string;
+};
+
+export type BackstagePage = Record<string, PageTheme>;
+
+export interface BackstagePageThemeOptions extends SimpleThemeOptions {
+  pageTheme: BackstagePage;
+}
+
+export interface BackstagePageTheme {
+  pageTheme: BackstagePage;
+  baseTheme: BackstageTheme;
+}
+
+export interface BackstagePageThemeConsumer extends BackstageTheme {
+  pageTheme: PageTheme;
+}