@sok-brand-sites/common-frontend-components 0.0.1-security → 1.643.1

package/dist/themes/sokospalvelut/components.js

@@ -0,0 +1,936 @@
+import { colors } from './colors.js';
+import { Themes } from '../theme.types.js';
+import { fonts } from './fonts.js';
+import { spacings } from '../neutral/spacings.js';
+var components = {
+  name: Themes.SOKOS,
+  subHero: {
+    title: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size40,
+        tablet: fonts.FranklinGothic.sizes.size64,
+        desktop: fonts.FranklinGothic.sizes.size80
+      },
+      color: {
+        primary: colors.primary,
+        secondary: colors.primary
+      },
+      textTransform: 'unset'
+    }
+  },
+  paragraph: {},
+  button: {
+    rounded: true,
+    borderRadius: '',
+    border: '1px solid black',
+    hoverColor: '',
+    fontFamily: fonts.FranklinGothic.fontFamily,
+    textColor: colors.white,
+    focusColor: colors.primary900,
+    backgroundColor: colors.primary,
+    fontSizes: {
+      mobile: fonts.FranklinGothic.sizes.size18,
+      tablet: fonts.FranklinGothic.sizes.size18,
+      desktop: fonts.FranklinGothic.sizes.size18
+    }
+  },
+  sideBySide: {
+    separator: true,
+    buttonfill: true,
+    backgroundColor: 'transparent',
+    category: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size14,
+        tablet: fonts.FranklinGothic.sizes.size14,
+        desktop: fonts.FranklinGothic.sizes.size14
+      },
+      textTransform: 'unset',
+      color: colors.primary
+    },
+    logoSize: '48px',
+    title: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size40,
+        tablet: fonts.FranklinGothic.sizes.size64,
+        desktop: fonts.FranklinGothic.sizes.size64
+      },
+      textTransform: 'unset',
+      color: {
+        primary: colors.primary,
+        secondary: colors.primary
+      }
+    }
+  },
+  hero: {
+    buttonfill: true,
+    boldColor: colors.primary,
+    title: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size56,
+        tablet: fonts.FranklinGothic.sizes.size64,
+        desktop: fonts.FranklinGothic.sizes.size80
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    },
+    subTitle: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.light,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size16,
+        tablet: fonts.FranklinGothic.sizes.size16,
+        desktop: fonts.FranklinGothic.sizes.size16
+      },
+      color: colors.black,
+      textTransform: 'unset'
+    }
+  },
+  fullBgHero: {
+    minheight: {
+      mobile: '33rem',
+      tablet: '33rem',
+      desktop: '40rem'
+    },
+    title: {
+      color: colors.white,
+      boldColor: colors.white,
+      textTransform: 'unset',
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size48,
+        tablet: fonts.FranklinGothic.sizes.size48,
+        desktop: fonts.FranklinGothic.sizes.size96,
+        desktopLarge: fonts.FranklinGothic.sizes.size96
+      }
+    },
+    description: {
+      color: colors.white,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.light,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size16,
+        tablet: fonts.FranklinGothic.sizes.size16,
+        desktop: fonts.FranklinGothic.sizes.size16
+      },
+      textTransform: 'unset'
+    },
+    readmore: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.light,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size16,
+        tablet: fonts.FranklinGothic.sizes.size16,
+        desktop: fonts.FranklinGothic.sizes.size16
+      }
+    }
+  },
+  card: {
+    backgroundColor: 'transparent',
+    mediaHeight: {
+      mobile: '300px',
+      tablet: '320px',
+      desktop: '352px'
+    },
+    category: {
+      color: colors.primary,
+      textTransform: 'unset',
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size18,
+        tablet: fonts.FranklinGothic.sizes.size18,
+        desktop: fonts.FranklinGothic.sizes.size18
+      }
+    },
+    header: {
+      color: colors.primary,
+      textTransform: 'unset',
+      letterSpacing: '0.375rem',
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size32,
+        tablet: fonts.FranklinGothic.sizes.size32,
+        desktop: fonts.FranklinGothic.sizes.size40
+      }
+    }
+  },
+  restrictedWidthContainer: {
+    maxWidth: '1440px',
+    mobile: {
+      margin: {
+        left: '20px',
+        right: '20px',
+        top: '0px',
+        bottom: '0px'
+      }
+    },
+    tablet: {
+      margin: {
+        left: '40px',
+        right: '40px',
+        top: '0px',
+        bottom: '0px'
+      }
+    },
+    desktop: {
+      margin: {
+        left: '100px',
+        right: '100px',
+        top: '0px',
+        bottom: '0px'
+      }
+    }
+  },
+  marginwrapper: {
+    block: {
+      mobile: {
+        margin: {
+          bottom: spacings.spacing32
+        }
+      },
+      tablet: {
+        margin: {
+          bottom: spacings.spacing64
+        }
+      },
+      desktop: {
+        margin: {
+          bottom: spacings.spacing64
+        }
+      }
+    },
+    textBlock: {
+      mobile: {
+        margin: {
+          bottom: spacings.spacing16
+        }
+      },
+      tablet: {
+        margin: {
+          bottom: spacings.spacing16
+        }
+      },
+      desktop: {
+        margin: {
+          bottom: spacings.spacing32
+        }
+      }
+    }
+  },
+  blockGenerator: {
+    heroBackgroundColor: colors.white,
+    block: {
+      mobile: {
+        padding: {
+          bottom: spacings.spacing64,
+          top: spacings.spacing64
+        }
+      },
+      tablet: {
+        padding: {
+          bottom: spacings.spacing64,
+          top: spacings.spacing64
+        }
+      },
+      desktop: {
+        padding: {
+          bottom: spacings.spacing64,
+          top: spacings.spacing64
+        }
+      }
+    }
+  },
+  accordion: {
+    focusColor: '',
+    hoverColor: '',
+    buttonTextColor: colors.black,
+    buttonBackgroundColor: colors.white,
+    itemTextColor: colors.black,
+    itemBackgroundColor: colors.white,
+    fontFamily: fonts.FranklinGothic.fontFamily,
+    fontWeight: fonts.FranklinGothic.weights.light,
+    fontSizes: {
+      mobile: fonts.FranklinGothic.sizes.size16,
+      tablet: fonts.FranklinGothic.sizes.size16,
+      desktop: fonts.FranklinGothic.sizes.size16
+    }
+  },
+  list: {},
+  table: {
+    figcaption: {
+      fontFamily: fonts.FranklinGothic.fontFamily
+    },
+    th: {
+      color: colors.white,
+      minWidth: spacings.spacing48,
+      backgroundColor: colors.primary900,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size18,
+        tablet: fonts.FranklinGothic.sizes.size24,
+        desktop: fonts.FranklinGothic.sizes.size24
+      },
+      textTransform: 'unset'
+    },
+    td: {
+      backgroundColor: colors.white,
+      evenBackgroundColor: colors.primary50,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSize: fonts.FranklinGothic.sizes.size16,
+      textTransform: 'unset'
+    }
+  },
+  columns: {
+    columnGap: spacings.spacing64
+  },
+  column: {
+    mobile: {
+      margin: {
+        bottom: spacings.spacing32
+      }
+    },
+    tablet: {
+      margin: {
+        bottom: spacings.spacing32
+      }
+    },
+    desktop: {
+      margin: {
+        bottom: spacings.spacing32
+      }
+    },
+    columnItem: {
+      mobile: {
+        margin: {
+          bottom: spacings.spacing32
+        }
+      },
+      tablet: {
+        margin: {
+          bottom: spacings.spacing32
+        }
+      },
+      desktop: {
+        margin: {
+          bottom: spacings.spacing32
+        }
+      }
+    }
+  },
+  carousel: {
+    buttonfill: true,
+    dotColor: {
+      default: colors.coldLightGrey,
+      active: colors.primary
+    },
+    arrowBackgroundColor: '',
+    arrowColor: colors.white,
+    carouselItem: {
+      backgroundColor: colors.grey100
+    },
+    imageMobileHeight: '300px',
+    category: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size12,
+        tablet: fonts.FranklinGothic.sizes.size14,
+        desktop: fonts.FranklinGothic.sizes.size14
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    },
+    title: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size24,
+        tablet: fonts.FranklinGothic.sizes.size40,
+        desktop: fonts.FranklinGothic.sizes.size40
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    },
+    description: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.regular,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size16,
+        tablet: fonts.FranklinGothic.sizes.size16,
+        desktop: fonts.FranklinGothic.sizes.size16
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    }
+  },
+  carouselNarrow: {
+    dotColor: {
+      default: colors.coldLightGrey,
+      active: colors.primary
+    },
+    arrowBackgroundColor: '',
+    arrowColor: colors.white,
+    carouselItem: {
+      backgroundColor: colors.white
+    },
+    mediaHeight: {
+      mobile: '23rem',
+      tablet: '27rem',
+      desktop: '27rem'
+    },
+    category: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size12,
+        tablet: fonts.FranklinGothic.sizes.size14,
+        desktop: fonts.FranklinGothic.sizes.size14
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    },
+    title: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size24,
+        tablet: fonts.FranklinGothic.sizes.size40,
+        desktop: fonts.FranklinGothic.sizes.size40
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    },
+    description: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.light,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size16,
+        tablet: fonts.FranklinGothic.sizes.size16,
+        desktop: fonts.FranklinGothic.sizes.size16
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    },
+    link: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size16,
+        tablet: fonts.FranklinGothic.sizes.size16,
+        desktop: fonts.FranklinGothic.sizes.size16
+      },
+      color: colors.black,
+      textTransform: 'unset'
+    }
+  },
+  imageCarousel: {
+    arrowBackgroundColor: '',
+    arrowColor: colors.white
+  },
+  heading: {
+    boldColors: {
+      enabled: false
+    }
+  },
+  globalStyle: {
+    scrollMarginTop: '150px',
+    backgroundColor: colors.white,
+    a: {
+      color: colors.darkBlue,
+      textDecoration: 'none'
+    },
+    p: {
+      color: colors.black,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.light,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size20,
+        tablet: fonts.FranklinGothic.sizes.size20,
+        desktop: fonts.FranklinGothic.sizes.size20
+      }
+    },
+    ol: {
+      color: colors.black,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.light,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size20,
+        tablet: fonts.FranklinGothic.sizes.size20,
+        desktop: fonts.FranklinGothic.sizes.size20
+      }
+    },
+    li: {
+      color: colors.black,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.light,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size20,
+        tablet: fonts.FranklinGothic.sizes.size20,
+        desktop: fonts.FranklinGothic.sizes.size20
+      }
+    },
+    ul: {
+      color: colors.black,
+      fontFamily: fonts.FranklinGothic.fontFamily
+    },
+    h1: {
+      color: colors.primary,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size48,
+        tablet: fonts.FranklinGothic.sizes.size64,
+        desktop: fonts.FranklinGothic.sizes.size80
+      },
+      textTransform: 'unset',
+      letterSpacing: '0.375rem'
+    },
+    h2: {
+      color: colors.primary,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size40,
+        tablet: fonts.FranklinGothic.sizes.size48,
+        desktop: fonts.FranklinGothic.sizes.size64
+      },
+      textTransform: 'unset',
+      letterSpacing: '0.375rem'
+    },
+    h3: {
+      color: colors.primary,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size32,
+        tablet: fonts.FranklinGothic.sizes.size32,
+        desktop: fonts.FranklinGothic.sizes.size48
+      },
+      textTransform: 'unset',
+      letterSpacing: '0.375rem'
+    },
+    h4: {
+      color: colors.primary,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size24,
+        tablet: fonts.FranklinGothic.sizes.size24,
+        desktop: fonts.FranklinGothic.sizes.size32
+      },
+      textTransform: 'unset',
+      letterSpacing: '0.375rem'
+    },
+    h5: {
+      color: colors.primary,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size18,
+        tablet: fonts.FranklinGothic.sizes.size18,
+        desktop: fonts.FranklinGothic.sizes.size24
+      },
+      textTransform: 'unset',
+      letterSpacing: '0.375rem'
+    },
+    h6: {
+      color: colors.primary,
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size18,
+        tablet: fonts.FranklinGothic.sizes.size18,
+        desktop: fonts.FranklinGothic.sizes.size18
+      },
+      textTransform: 'unset',
+      letterSpacing: '0.375rem'
+    }
+  },
+  promotion: {
+    alignContent: 'center',
+    minHeight: {
+      mobile: '44vw',
+      tablet: '44vw',
+      desktop: '44vw'
+    },
+    category: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSize: fonts.FranklinGothic.sizes.size14,
+      color: colors.white,
+      textTransform: 'unset'
+    },
+    title: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.bold,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size48,
+        tablet: fonts.FranklinGothic.sizes.size64,
+        desktop: fonts.FranklinGothic.sizes.size96
+      },
+      color: colors.white,
+      textTransform: 'unset',
+      letterSpacing: '0.75rem'
+    }
+  },
+  languageSelector: {
+    textColor: colors.black,
+    fontFamily: fonts.FranklinGothic.fontFamily,
+    fontWeight: fonts.FranklinGothic.weights.light,
+    fontSizes: {
+      mobile: fonts.FranklinGothic.sizes.size20,
+      tablet: fonts.FranklinGothic.sizes.size20,
+      desktop: fonts.FranklinGothic.sizes.size20
+    },
+    activeColor: colors.primary900,
+    arrowColor: colors.grey600,
+    focusColor: colors.primary900,
+    dropdownBackground: colors.white,
+    dropdownBackgroundHover: colors.grey300
+  },
+  formBuilder: {
+    fontFamily: fonts.FranklinGothic.fontFamily,
+    fontWeight: fonts.FranklinGothic.weights.light,
+    fontSizes: {
+      mobile: fonts.FranklinGothic.sizes.size16,
+      tablet: fonts.FranklinGothic.sizes.size16,
+      desktop: fonts.FranklinGothic.sizes.size16
+    },
+    submitResult: {
+      color: {
+        success: {
+          background: colors.success50,
+          text: colors.success900
+        },
+        error: {
+          background: colors.error50,
+          text: colors.error900
+        }
+      },
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.light,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size16,
+        tablet: fonts.FranklinGothic.sizes.size16,
+        desktop: fonts.FranklinGothic.sizes.size16
+      }
+    },
+    section: {
+      title: {
+        color: colors.primary,
+        fontFamily: fonts.FranklinGothic.fontFamily,
+        fontWeight: fonts.FranklinGothic.weights.light,
+        fontSizes: {
+          mobile: fonts.FranklinGothic.sizes.size32,
+          tablet: fonts.FranklinGothic.sizes.size32,
+          desktop: fonts.FranklinGothic.sizes.size32
+        },
+        textTransform: 'unset'
+      },
+      label: {
+        fontWeight: fonts.FranklinGothic.weights.medium
+      },
+      labelError: {
+        color: colors.primary500,
+        fontWeight: fonts.FranklinGothic.weights.light,
+        fontSizes: {
+          mobile: fonts.FranklinGothic.sizes.size12,
+          tablet: fonts.FranklinGothic.sizes.size12,
+          desktop: fonts.FranklinGothic.sizes.size12
+        }
+      },
+      input: {
+        fontWeight: fonts.FranklinGothic.weights.light,
+        fontSizes: {
+          mobile: fonts.FranklinGothic.sizes.size16,
+          tablet: fonts.FranklinGothic.sizes.size16,
+          desktop: fonts.FranklinGothic.sizes.size16
+        }
+      },
+      textAreaInput: {
+        fontWeight: fonts.FranklinGothic.weights.light,
+        fontSizes: {
+          mobile: fonts.FranklinGothic.sizes.size16,
+          tablet: fonts.FranklinGothic.sizes.size16,
+          desktop: fonts.FranklinGothic.sizes.size16
+        }
+      }
+    },
+    reCaptchaSiteKey: '6LdyOwMeAAAAAFOgcqR6HGvI4nXZtKjNh2yYmGk_'
+  },
+  iconLinks: {
+    hoverColor: colors.primary500,
+    mediaHeight: {
+      mobile: '3rem',
+      tablet: '4rem',
+      desktop: '5rem'
+    },
+    imageWidth: {
+      mobile: spacings.spacing64,
+      tablet: spacings.spacing80,
+      desktop: spacings.spacing80
+    },
+    title: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size24,
+        tablet: fonts.FranklinGothic.sizes.size40,
+        desktop: fonts.FranklinGothic.sizes.size40
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    },
+    linkLabel: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.medium,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size24,
+        tablet: fonts.FranklinGothic.sizes.size40,
+        desktop: fonts.FranklinGothic.sizes.size40
+      },
+      color: colors.primary,
+      textTransform: 'unset'
+    },
+    itemWidth: {
+      mobile: '55%',
+      tablet: '55%',
+      desktop: '60%'
+    },
+    blurBoxWidth: {
+      mobile: spacings.spacing64,
+      tablet: spacings.spacing80,
+      desktop: spacings.spacing80
+    },
+    blurBoxHeight: {
+      mobile: spacings.spacing112,
+      tablet: spacings.spacing144
+    },
+    arrowButtonMargin: {
+      mobile: '-15px',
+      tablet: '-30px',
+      desktop: '-40px'
+    }
+  },
+  header: {
+    mainContent: {
+      backgroundColor: colors.white,
+      borderTop: 'none',
+      borderBottom: 'none'
+    },
+    hamburger: {
+      color: colors.primary
+    },
+    bottomBar: {
+      backgroundColor: colors.primary,
+      borderBottom: 'none'
+    },
+    boxShadow: '0 3px 4px 0px rgba(0, 0, 0, 0.08)',
+    activeLinkUnderline: true,
+    mobileLinksContainer: {
+      color: {
+        bottomBorder: colors.grey200
+      }
+    },
+    mobileArrowButton: {
+      color: colors.primary
+    },
+    firstLevelLink: {
+      color: {
+        default: colors.black,
+        active: colors.black,
+        hover: colors.black,
+        hoverActive: colors.black
+      },
+      font: {
+        fontFamily: fonts.FranklinGothic.fontFamily,
+        fontWeight: fonts.FranklinGothic.weights.light,
+        fontSizes: {
+          mobile: {
+            fontSize: fonts.FranklinGothic.sizes.size20.fontSize,
+            lineHeight: fonts.FranklinGothic.sizes.size20.lineHeight
+          },
+          tablet: {
+            fontSize: fonts.FranklinGothic.sizes.size20.fontSize,
+            lineHeight: fonts.FranklinGothic.sizes.size20.lineHeight
+          },
+          desktop: {
+            fontSize: fonts.FranklinGothic.sizes.size20.fontSize,
+            lineHeight: fonts.FranklinGothic.sizes.size20.lineHeight
+          }
+        }
+      }
+    },
+    secondLevelLink: {
+      color: {
+        desktop: {
+          default: colors.white,
+          active: colors.white,
+          hover: colors.white,
+          hoverActive: colors.white
+        },
+        mobile: {
+          default: colors.black,
+          active: colors.black,
+          hover: colors.black,
+          hoverActive: colors.black
+        }
+      },
+      font: {
+        fontFamily: fonts.FranklinGothic.fontFamily,
+        fontWeight: fonts.FranklinGothic.weights.light,
+        fontSizes: {
+          mobile: {
+            fontSize: fonts.FranklinGothic.sizes.size14.fontSize,
+            lineHeight: fonts.FranklinGothic.sizes.size14.lineHeight
+          },
+          tablet: {
+            fontSize: fonts.FranklinGothic.sizes.size14.fontSize,
+            lineHeight: fonts.FranklinGothic.sizes.size14.lineHeight
+          },
+          desktop: {
+            fontSize: fonts.FranklinGothic.sizes.size14.fontSize,
+            lineHeight: fonts.FranklinGothic.sizes.size14.lineHeight
+          }
+        }
+      }
+    }
+  },
+  socialMediaLinks: {
+    size: '50px',
+    foregroundColor: colors.white,
+    backgroundColor: colors.grey700
+  },
+  placeOfBusiness: {
+    fontFamily: fonts.FranklinGothic.fontFamily,
+    fontWeight: fonts.FranklinGothic.weights.light,
+    fontSizes: {
+      small: fonts.FranklinGothic.sizes.size14,
+      medium: fonts.FranklinGothic.sizes.size16,
+      large: fonts.FranklinGothic.sizes.size18
+    },
+    openToday: {
+      title: {
+        fontFamily: fonts.FranklinGothic.fontFamily,
+        fontWeight: fonts.FranklinGothic.weights.light,
+        fontSizes: {
+          mobile: fonts.FranklinGothic.sizes.size14,
+          tablet: fonts.FranklinGothic.sizes.size14,
+          desktop: fonts.FranklinGothic.sizes.size14
+        }
+      },
+      large: {
+        title: {
+          color: colors.black,
+          fontFamily: fonts.FranklinGothic.fontFamily,
+          fontWeight: fonts.FranklinGothic.weights.regular,
+          fontSizes: {
+            mobile: fonts.FranklinGothic.sizes.size24,
+            tablet: fonts.FranklinGothic.sizes.size24,
+            desktop: fonts.FranklinGothic.sizes.size24
+          }
+        }
+      }
+    },
+    logoTitle: {
+      logoSize: '80px',
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size24,
+        tablet: fonts.FranklinGothic.sizes.size24,
+        desktop: fonts.FranklinGothic.sizes.size32
+      },
+      fontWeight: fonts.FranklinGothic.weights.regular,
+      color: colors.black
+    },
+    openingHours: {
+      button: {
+        textColor: colors.primary600,
+        activeColor: colors.black,
+        hoverColor: colors.primary400,
+        fontFamily: fonts.FranklinGothic.fontFamily,
+        fontSizes: {
+          mobile: fonts.FranklinGothic.sizes.size20,
+          tablet: fonts.FranklinGothic.sizes.size20,
+          desktop: fonts.FranklinGothic.sizes.size20
+        },
+        fontWeight: fonts.FranklinGothic.weights.light
+      }
+    },
+    contactInformation: {
+      title: {
+        color: colors.black,
+        fontFamily: fonts.FranklinGothic.fontFamily,
+        fontWeight: fonts.FranklinGothic.weights.regular,
+        fontSizes: {
+          mobile: fonts.FranklinGothic.sizes.size24,
+          tablet: fonts.FranklinGothic.sizes.size24,
+          desktop: fonts.FranklinGothic.sizes.size24
+        }
+      }
+    },
+    services: {
+      title: {
+        color: colors.black,
+        fontFamily: fonts.FranklinGothic.fontFamily,
+        fontWeight: fonts.FranklinGothic.weights.regular,
+        fontSizes: {
+          mobile: fonts.FranklinGothic.sizes.size24,
+          tablet: fonts.FranklinGothic.sizes.size24,
+          desktop: fonts.FranklinGothic.sizes.size24
+        }
+      },
+      arrowColor: colors.primary
+    },
+    listItem: {
+      labelColor: colors.grey600,
+      borderColor: colors.grey100,
+      externalLinkColor: colors.black,
+      externalLinkHoverColor: colors.primary
+    }
+  },
+  footer: {
+    backgroundColor: colors.primary,
+    fontFamily: fonts.FranklinGothic.fontFamily,
+    fontWeight: fonts.FranklinGothic.weights.light,
+    fontSizes: {
+      mobile: fonts.FranklinGothic.sizes.size14,
+      tablet: fonts.FranklinGothic.sizes.size14,
+      desktop: fonts.FranklinGothic.sizes.size14
+    },
+    linkColor: colors.grey300
+  },
+  overlayCards: {
+    gap: '10px',
+    centerText: false,
+    title: {
+      fontFamily: fonts.FranklinGothic.fontFamily,
+      fontWeight: fonts.FranklinGothic.weights.regular,
+      fontSizes: {
+        mobile: fonts.FranklinGothic.sizes.size32,
+        tablet: fonts.FranklinGothic.sizes.size40,
+        desktop: fonts.FranklinGothic.sizes.size40
+      },
+      color: colors.white
+    },
+    description: {
+      color: colors.white
+    },
+    overlayBackgroundColor: colors.primary,
+    overlayBackgroundOpacity: 0.8,
+    cardHeight: '600px'
+  }
+};
+export { components };