Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

theme-ui

Package Overview
Dependencies
Maintainers
2
Versions
500
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

theme-ui - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

10

dist/index.esm.js

@@ -8,3 +8,3 @@ import { MDXProvider } from '@mdx-js/react';

import css, { css as css$1, get } from '@styled-system/css';
export { css } from '@styled-system/css';
export { css, get } from '@styled-system/css';

@@ -292,6 +292,10 @@ function _defineProperty(obj, key, value) {

var cssProp = function cssProp(props) {
return css(props.css)(props.theme);
};
var Box = styled('div')(css({
boxSizing: 'border-box',
minWidth: 0
}), space, color, layout, flexbox);
}), space, color, layout, flexbox, cssProp);
var Flex = styled(Box)({

@@ -354,3 +358,3 @@ display: 'flex'

export { jsx$1 as jsx, ThemeProvider, Context, useThemeUI, ColorMode, useColorMode, Styled, Box, Flex, Layout, Header, Main, Container, Footer, ThemeProvider as ColorModeProvider, ThemeProvider as ComponentProvider };
export { jsx$1 as jsx, ThemeProvider, Context, useThemeUI, ColorMode, useColorMode, Styled, components, Box, Flex, Layout, Header, Main, Container, Footer, ThemeProvider as ColorModeProvider, ThemeProvider as ComponentProvider };
//# sourceMappingURL=index.esm.js.map

8

dist/index.js

@@ -294,6 +294,10 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var cssProp = function cssProp(props) {
return css__default(props.css)(props.theme);
};
var Box = styled('div')(css__default({
boxSizing: 'border-box',
minWidth: 0
}), styledSystem.space, styledSystem.color, styledSystem.layout, styledSystem.flexbox);
}), styledSystem.space, styledSystem.color, styledSystem.layout, styledSystem.flexbox, cssProp);
var Flex = styled(Box)({

@@ -357,2 +361,3 @@ display: 'flex'

exports.css = css.css;
exports.get = css.get;
exports.jsx = jsx;

@@ -365,2 +370,3 @@ exports.ThemeProvider = ThemeProvider;

exports.Styled = Styled;
exports.components = components;
exports.Box = Box;

@@ -367,0 +373,0 @@ exports.Flex = Flex;

8

dist/index.umd.js

@@ -292,6 +292,10 @@ (function (global, factory) {

var cssProp = function cssProp(props) {
return css__default(props.css)(props.theme);
};
var Box = styled('div')(css__default({
boxSizing: 'border-box',
minWidth: 0
}), styledSystem.space, styledSystem.color, styledSystem.layout, styledSystem.flexbox);
}), styledSystem.space, styledSystem.color, styledSystem.layout, styledSystem.flexbox, cssProp);
var Flex = styled(Box)({

@@ -355,2 +359,3 @@ display: 'flex'

exports.css = css.css;
exports.get = css.get;
exports.jsx = jsx;

@@ -363,2 +368,3 @@ exports.ThemeProvider = ThemeProvider;

exports.Styled = Styled;
exports.components = components;
exports.Box = Box;

@@ -365,0 +371,0 @@ exports.Flex = Flex;

2

LICENSE.md

@@ -1,2 +0,1 @@

# The MIT License (MIT)

@@ -11,2 +10,1 @@

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

4

package.json
{
"name": "theme-ui",
"version": "0.1.6",
"version": "0.1.7",
"description": "Build consistent, themeable React UIs based on design system constraints and design tokens",

@@ -30,3 +30,3 @@ "main": "dist/index.js",

},
"gitHead": "6de923bc451e7db879ebb2a16af37d802793a55c"
"gitHead": "e7aecff15597150925b6c5f2def98d6d84a78db9"
}

82

README.md

@@ -1,2 +0,1 @@

<img src='https://raw.githubusercontent.com/system-ui/theme-ui/master/packages/docs/static/icon.png' width='64' heigh='64' />

@@ -8,3 +7,2 @@

[![GitHub][github-badge]][github]

@@ -61,6 +59,5 @@ [![Build Status][circleci-badge]][circleci]

export default props =>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
export default props => (
<ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)
```

@@ -97,11 +94,13 @@

export default () =>
export default () => (
<div
css={css({
fontWeight: 'bold',
fontSize: 4, // picks up value from `theme.fontSizes[4]`
fontSize: 4, // picks up value from `theme.fontSizes[4]`
color: 'primary', // picks up value from `theme.colors.primary`
})}>
})}
>
Hello
</div>
)
```

@@ -119,3 +118,3 @@

export default props =>
export default props => (
<div

@@ -126,5 +125,6 @@ css={css({

// and 25% above the next breakpoint
width: [ '100%', '50%', '25%' ],
width: ['100%', '50%', '25%'],
})}
/>
)
```

@@ -140,3 +140,3 @@

export default props =>
export default props => (
<div

@@ -149,2 +149,3 @@ css={{

/>
)
```

@@ -167,8 +168,7 @@

export default props =>
<ThemeProvider
components={mdxComponents}
theme={theme}>
export default props => (
<ThemeProvider components={mdxComponents} theme={theme}>
{props.children}
</ThemeProvider>
)
```

@@ -194,3 +194,3 @@

},
}
},
}

@@ -201,4 +201,4 @@ ```

These components' styles can also be consumed *outside* of an MDX doc with the `Styled` component.
Note that these are only *styled* using the same `theme.styles` object and *not* the same components passed to the `ThemeProvider` context.
These components' styles can also be consumed _outside_ of an MDX doc with the `Styled` component.
Note that these are only _styled_ using the same `theme.styles` object and _not_ the same components passed to the `ThemeProvider` context.

@@ -209,8 +209,7 @@ ```jsx

export default props =>
export default props => (
<Styled.div>
<Styled.h1>
Hello
</Styled.h1>
<Styled.h1>Hello</Styled.h1>
</Styled.div>
)
```

@@ -221,3 +220,5 @@

```jsx
<Styled.a as={Link} to='/'>Home</Styled.a>
<Styled.a as={Link} to="/">
Home
</Styled.a>
```

@@ -237,24 +238,13 @@

import React from 'react'
import {
Layout,
Header,
Main,
Container,
Footer
} from 'theme-ui'
import { Layout, Header, Main, Container, Footer } from 'theme-ui'
export default props =>
export default props => (
<Layout>
<Header>
Hello
</Header>
<Header>Hello</Header>
<Main>
<Container>
{props.children}
</Container>
<Container>{props.children}</Container>
</Main>
<Footer>
© 2019
</Footer>
<Footer>© 2019</Footer>
</Layout>
)
```

@@ -270,7 +260,8 @@

export default props =>
<Flex flexWrap='wrap'>
<Box width={[ 1, 1/2 ]} />
<Box width={[ 1, 1/2 ]} />
export default props => (
<Flex flexWrap="wrap">
<Box width={[1, 1 / 2]} />
<Box width={[1, 1 / 2]} />
</Flex>
)
```

@@ -287,3 +278,2 @@

[typography demo]: https://theme-ui.com/typography

@@ -290,0 +280,0 @@ [demo]: https://theme-ui.com/demo

29

src/color-modes.js

@@ -1,6 +0,2 @@

import React, {
useState,
useEffect,
useLayoutEffect,
} from 'react'
import React, { useState, useEffect, useLayoutEffect } from 'react'
import merge from 'lodash.merge'

@@ -14,4 +10,4 @@ import { css } from '@styled-system/css'

const storage = {
get: (init) => window.localStorage.getItem(STORAGE_KEY) || init,
set: (value) => window.localStorage.setItem(STORAGE_KEY, value),
get: init => window.localStorage.getItem(STORAGE_KEY) || init,
set: value => window.localStorage.setItem(STORAGE_KEY, value),
}

@@ -26,4 +22,4 @@

export const useColorState = (initialMode) => {
const [ mode, setMode ] = useState(initialMode)
export const useColorState = initialMode => {
const [mode, setMode] = useState(initialMode)

@@ -46,17 +42,15 @@ useLayoutEffect(() => {

storage.set(mode)
}, [ mode ])
}, [mode])
return [ mode, setMode ]
return [mode, setMode]
}
export const useColorMode = (initialMode) => {
export const useColorMode = initialMode => {
const { colorMode, setColorMode } = useThemeUI()
if (typeof setColorMode !== 'function') {
throw new Error(
`[useColorMode] requires the ThemeProvider component`
)
throw new Error(`[useColorMode] requires the ThemeProvider component`)
}
return [ colorMode, setColorMode ]
return [colorMode, setColorMode]
}

@@ -85,5 +79,4 @@

export const ColorMode = () =>
<Global styles={bodyColor} />
export const ColorMode = () => <Global styles={bodyColor} />
export default useColorMode

50

src/core.js

@@ -19,17 +19,19 @@ import styled from '@emotion/styled'

export const ThemeProvider = ({
theme,
components,
...props
}) => {
export const ThemeProvider = ({ theme, components, ...props }) => {
const outer = useThemeUI()
const initialColorMode = outer.colorMode || (theme ? theme.initialColorMode : undefined)
const [ colorMode, setColorMode ] = useColorState(initialColorMode)
const context = merge({}, {
colorMode,
setColorMode,
}, outer, {
theme,
components: createComponents(components),
})
const initialColorMode =
outer.colorMode || (theme ? theme.initialColorMode : undefined)
const [colorMode, setColorMode] = useColorState(initialColorMode)
const context = merge(
{},
{
colorMode,
setColorMode,
},
outer,
{
theme,
components: createComponents(components),
}
)

@@ -39,16 +41,18 @@ if (context.colorMode) {

context.theme = merge({}, context.theme, {
colors: get(modes, context.colorMode, context.theme.colors)
colors: get(modes, context.colorMode, context.theme.colors),
})
}
return (
jsx(EmotionContext.Provider, { value: context.theme },
jsx(MDXProvider, { components: context.components },
jsx(Context.Provider, {
value: context,
children: props.children
})
)
return jsx(
EmotionContext.Provider,
{ value: context.theme },
jsx(
MDXProvider,
{ components: context.components },
jsx(Context.Provider, {
value: context,
children: props.children,
})
)
)
}

21

src/index.js

@@ -1,19 +0,8 @@

export { css } from '@styled-system/css'
export { css, get } from '@styled-system/css'
export { jsx } from './jsx'
export { ThemeProvider } from './core'
export { Context, useThemeUI } from './context'
export {
ColorMode,
useColorMode,
} from './color-modes'
export { Styled } from './components'
export {
Box,
Flex,
Layout,
Header,
Main,
Container,
Footer,
} from './layout'
export { ColorMode, useColorMode } from './color-modes'
export { Styled, components } from './components'
export { Box, Flex, Layout, Header, Main, Container, Footer } from './layout'

@@ -23,3 +12,3 @@ // DEPRECATED

ThemeProvider as ColorModeProvider,
ThemeProvider as ComponentProvider
ThemeProvider as ComponentProvider,
} from './core'

12

src/jsx.js

@@ -7,9 +7,11 @@ import { jsx as emotion } from '@emotion/core'

type,
props ? ({
...props,
css: props.css ? css(props.css) : undefined
}) : null,
...children
props
? {
...props,
css: props.css ? css(props.css) : undefined,
}
: null,
...children,
])
export default jsx

32

src/layout.js
import jsx from './jsx'
import styled from '@emotion/styled'
import {
space,
color,
layout,
flexbox,
} from 'styled-system'
import { space, color, layout, flexbox } from 'styled-system'
import css from '@styled-system/css'
export const Box = styled('div')(css({
boxSizing: 'border-box',
minWidth: 0,
}),
// fallback for missing emotion pragma or for use in MDX
const cssProp = props => css(props.css)(props.theme)
export const Box = styled('div')(
css({
boxSizing: 'border-box',
minWidth: 0,
}),
space,
color,
layout,
flexbox
flexbox,
cssProp
)

@@ -34,3 +34,3 @@

variant: 'styles.Layout',
}
},
})

@@ -45,3 +45,3 @@

variant: 'styles.Header',
}
},
})

@@ -56,3 +56,3 @@

variant: 'styles.Main',
}
},
})

@@ -70,3 +70,3 @@

variant: 'styles.Container',
}
},
})

@@ -81,3 +81,3 @@

variant: 'styles.Footer',
}
},
})

3

src/themed.js
import { css, get } from '@styled-system/css'
export const themed = key => props => css(get(props.theme, `styles.${key}`))(props.theme)
export const themed = key => props =>
css(get(props.theme, `styles.${key}`))(props.theme)
export default themed
dist/index.esm.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc