Browse Source

changed theme types

pull/5/head landing-blocks_1.0.35
remorses 1 year ago
parent
commit
9d6298119d
4 changed files with 66 additions and 34 deletions
  1. +2
    -1
      landing-blocks/package.json
  2. +48
    -32
      landing-blocks/src/LandingProvider.tsx
  3. +11
    -1
      website/pages/demos/datocms.tsx
  4. +5
    -0
      yarn.lock

+ 2
- 1
landing-blocks/package.json View File

@ -61,6 +61,7 @@
"react-script-hook": "^1.0.17",
"react-twitter-embed": "^3.0.3",
"react-typical": "^0.1.3",
"react-typist": "^2.0.5"
"react-typist": "^2.0.5",
"utility-types": "^3.10.0"
}
}

+ 48
- 32
landing-blocks/src/LandingProvider.tsx View File

@ -1,18 +1,33 @@
import { CSSReset, DarkMode, DefaultTheme, theme as chakraTheme, useColorMode } from '@chakra-ui/core'
import {
CSSReset,
DarkMode,
ITheme,
theme as chakraTheme,
useColorMode,
} from '@chakra-ui/core'
import { css, Global } from '@emotion/core'
import { FlexProps, Stack } from 'layout-kit-react'
import merge from 'lodash/fp/merge'
import React, { Fragment, useMemo } from 'react'
import { PropagatedThemeProvider } from './layout'
import { DeepPartial } from 'utility-types'
export interface ThemeExtension extends DefaultTheme {
export interface ThemeExtension extends ITheme {
colors: {
primary: string
secondary: string
} & DefaultTheme['colors']
black: string
white: string
} & ITheme['colors']
sizes: {
pageContainer: any
} & DefaultTheme['sizes']
} & ITheme['sizes']
fontSizes: {
text: any
heading: any
subheading: any
subtext: any
} & ITheme['fontSizes']
}
export type LandingProviderProps = {
@ -22,7 +37,7 @@ export type LandingProviderProps = {
white?: string
secondary?: string
pageWidth?: string
theme?: typeof chakraTheme
theme?: DeepPartial<ThemeExtension>
children?: any
} & FlexProps
@ -53,35 +68,36 @@ export function LandingProvider({
const { colorMode } = useColorMode()
const Mode = dark ? DarkMode : Fragment
dark = dark ?? colorMode === 'dark'
const theme = useMemo(() =>
merge(
chakraTheme,
const theme = useMemo(
() =>
merge(
{
colors: {
primary,
secondary,
black,
white,
chakraTheme,
merge(
{
colors: {
primary,
secondary,
black,
white,
},
sizes: {
pageContainer: pageWidth,
},
fonts: {
body: fontFamily,
heading: fontFamily,
},
fontSizes: {
text: '18px',
heading: '42px',
subheading: '24px',
subtext: '15px',
},
},
sizes: {
pageContainer: pageWidth,
},
fonts: {
body: fontFamily,
heading: fontFamily,
},
fontSizes: {
text: '18px',
heading: '42px',
subheading: '24px',
subtext: '15px',
},
},
themeProp
)
),
[pageWidth, primary, secondary, themeProp],
themeProp,
),
),
[pageWidth, primary, secondary, black, white, fontFamily, themeProp],
)
return (
<PropagatedThemeProvider theme={theme}>

+ 11
- 1
website/pages/demos/datocms.tsx View File

@ -1,4 +1,14 @@
import { Feature, FeaturesList, Footer, Heading, Hero, LandingProvider, NavBar, SectionTitle, TestimonialsLogos } from 'landing-blocks/src'
import {
Feature,
FeaturesList,
Footer,
Heading,
Hero,
LandingProvider,
NavBar,
SectionTitle,
TestimonialsLogos,
} from 'landing-blocks/src'
import { Button } from 'landing-blocks/src/Button'
import { GradientRect } from 'landing-blocks/src/decorations'
import { MailchimpForm } from 'landing-blocks/src/EmailForm'

+ 5
- 0
yarn.lock View File

@ -8570,6 +8570,11 @@ util@^0.11.0:
dependencies:
inherits "2.0.3"
utility-types@^3.10.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
utils-merge@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"

Loading…
Cancel
Save