feat: adds example theme for Fixing Fashion and Unbranded variant

src/stores/Theme/theme.store.ts

@@ -1,9 +1,13 @@
 import { action, makeAutoObservable } from 'mobx'
 import preciousPlasticTheme from 'src/themes/precious-plastic'
+import fixingFashionTheme from 'src/themes/fixing-fashion'
+import unbrandedTheme from 'src/themes/unbranded'
 import type { PlatformTheme } from 'src/themes/types'
 
 const themeMap = {
   'precious-plastic': preciousPlasticTheme,
+  'fixing-fashion': fixingFashionTheme,
+  unbranded: unbrandedTheme,
 }
 
 export class ThemeStore {
@@ -14,6 +18,14 @@ export class ThemeStore {
       value: 'precious-plastic',
       label: 'Precious Plastic',
     },
+    {
+      value: 'fixing-fashion',
+      label: 'Fixing Fashion',
+    },
+    {
+      value: 'unbranded',
+      label: 'Unbranded',
+    },
   ]
 
   constructor() {

src/themes/fixing-fashion/index.ts

@@ -0,0 +1,12 @@
+import logo from 'src/assets/images/themes/fixing-fashion/logo.svg'
+import type { PlatformTheme } from '../types';
+import styles from './styles'
+
+const Theme: PlatformTheme = {
+  siteName: 'Fixing Fashion',
+  logo,
+  howtoHeading: `Learn & share how to recycle and work with fashion`,
+  styles,
+}
+
+export default Theme;

src/themes/fixing-fashion/styles.tsx

@@ -0,0 +1,213 @@
+// use enum to specify list of possible colors for typing
+export const colors = {
+  white: 'white',
+  black: '#1b1b1b',
+  primary: 'green',
+  yellow: { base: '#ec1d23', hover: '#ffde45' },
+  blue: '#83ceeb',
+  red: '#eb1b1f',
+  red2: '#f58d8e',
+  softblue: '#e2edf7',
+  bluetag: '#5683b0',
+  grey: '#61646b',
+  green: '#00c3a9',
+  error: 'red',
+  background: '#fff',
+  silver: '#c0c0c0',
+}
+
+export const zIndex = {
+  behind: -1,
+  level: 0,
+  default: 1,
+  slickArrows: 100,
+  modalProfile: 900,
+  logoContainer: 999,
+  mapFlexBar: 2000,
+  header: 3000,
+  modalBackdrop: 4000,
+  modalContent: 5000,
+}
+
+export type ButtonVariants =
+  | 'primary'
+  | 'secondary'
+  | 'outline'
+  | 'disabled'
+  | 'dark'
+  | 'light'
+  | 'subtle'
+
+const space = [
+  0,
+  5,
+  10,
+  15,
+  20,
+  25,
+  30,
+  35,
+  40,
+  45,
+  50,
+  55,
+  60,
+  65,
+  70,
+  75,
+  80,
+  85,
+  90,
+  95,
+  100,
+  105,
+  110,
+  115,
+  120,
+  125,
+  130,
+  135,
+  140,
+]
+const radii = space
+const fontSizes = [10, 12, 14, 18, 22, 30, 38, 42, 46, 50, 58, 66, 74]
+const breakpoints = ['40em', '52em', '70em']
+// standard widths: 512px, 768px, 1024px
+const maxContainerWidth = 1280
+const regular = 400
+const bold = 600
+// cc - assume standard image widths are 4:3, however not clearly defined
+
+const buttons = {
+  primary: {
+    fontFamily: '"Varela Round", Arial, sans-serif',
+    border: '2px solid ' + colors.black,
+    color: colors.black,
+    bg: colors.yellow.base,
+    transition: '.2s ease-in-out',
+    '&:hover': {
+      bg: colors.yellow.hover,
+      cursor: 'pointer',
+    },
+    '&[disabled]': {
+      opacity: 0.5,
+      cursor: 'not-allowed',
+    },
+    '&[disabled]:hover': {
+      bg: colors.yellow.base,
+    },
+    borderRadius: radii[1] + 'px',
+  },
+  secondary: {
+    fontFamily: '"Varela Round", Arial, sans-serif',
+    border: '2px solid ' + colors.black,
+    color: colors.black,
+    display: 'flex',
+    bg: colors.softblue,
+    transition: '.2s ease-in-out',
+    '&:hover': {
+      bg: colors.white,
+      cursor: 'pointer',
+    },
+    '&[disabled]': {
+      opacity: 0.5,
+    },
+    '&[disabled]:hover': {
+      bg: colors.softblue,
+    },
+    borderRadius: radii[1] + 'px',
+  },
+  tertiary: {
+    fontFamily: '"Varela Round", Arial, sans-serif',
+    border: '2px solid ' + colors.black,
+    color: colors.black,
+    display: 'flex',
+    bg: colors.white,
+    transition: '.2s ease-in-out',
+    '&:hover': {
+      bg: colors.red,
+      cursor: 'pointer',
+    },
+    '&[disabled]': {
+      opacity: 0.5,
+    },
+    '&[disabled]:hover': {
+      bg: colors.white,
+    },
+    borderRadius: radii[1] + 'px',
+  },
+
+  outline: {
+    fontFamily: '"Varela Round", Arial, sans-serif',
+    border: '2px solid ' + colors.black,
+    color: colors.black,
+    backgroundColor: colors.white,
+    transition: '.2s ease-in-out',
+    display: 'flex',
+    alignItems: 'center',
+    width: 'fit-content',
+    height: 'fit-content',
+    '&:hover': {
+      backgroundColor: colors.softblue,
+      cursor: 'pointer',
+    },
+    borderRadius: radii[1] + 'px',
+  },
+  imageInput: {
+    border: '2px dashed #e0e0e0',
+    color: '#e0e0e0',
+    backgroundColor: 'transparent',
+  },
+  colorful: {
+    fontFamily: '"Varela Round", Arial, sans-serif',
+    border: '2px solid ' + colors.black,
+    color: colors.black,
+    display: 'flex',
+    bg: colors.white,
+    transition: '.2s ease-in-out',
+    '&:hover': {
+      bg: colors.yellow.base,
+      cursor: 'pointer',
+    },
+    '&[disabled]': {
+      opacity: 0.5,
+      cursor: 'not-allowed',
+    },
+    '&[disabled]:hover': {
+      bg: colors.yellow.base,
+    },
+    borderRadius: radii[1] + 'px',
+  },
+  subtle: {
+    fontFamily: '"Varela Round", Arial, sans-serif',
+    border: 'none',
+    color: colors.black,
+    display: 'flex',
+    bg: colors.softblue,
+    transition: '.2s ease-in-out',
+    '&:hover': {
+      bg: colors.white,
+      cursor: 'pointer',
+    },
+    '&[disabled]': {
+      opacity: 0.5,
+    },
+    '&[disabled]:hover': {
+      bg: colors.softblue,
+    },
+    borderRadius: radii[1] + 'px',
+  },
+}
+
+export default {
+  colors,
+  buttons,
+  breakpoints,
+  space,
+  radii,
+  fontSizes,
+  maxContainerWidth,
+  regular,
+  bold,
+  zIndex,
+}

src/themes/unbranded/index.ts

@@ -0,0 +1,9 @@
+import logo from 'src/assets/images/themes/unbranded/logo.svg'
+import styles from './styles'
+
+export default {
+  siteName: 'Unbranded',
+  logo,
+  howtoHeading: `Learn & share how to recycle, build and work`,
+  styles,
+}