theme-ui - npm Package Compare versions

Comparing version 0.0.0-0 to 0.0.0-1

index.js

@@ -5,2 +5,5 @@ import React from 'react'
 
+export { css } from '@styled-system/css'
+export { Context, Styled } from 'emotion-mdx'
+
 export const ThemeProvider = props =>
@@ -7,0 +10,0 @@ <ComponentProvider

package.json

 {
   "name": "theme-ui",
-  "version": "0.0.0-0",
+  "version": "0.0.0-1",
   "main": "index.js",
   "author": "Brent Jackson <[e-mail]>",
   "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
   "dependencies": {
     "@emotion/core": "^10.0.10",
     "@styled-system/css": "^1.0.3",
+    "css-what": "^2.1.3",
     "emotion-mdx": "^1.0.0-6",
-    "styled-system": "^4.1.0"
+    "emotion-theming": "^10.0.10",
+    "lodash.merge": "^4.6.1",
+    "styled-system": "^4.1.0",
+    "typography": "^0.16.19"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "jest": "^24.7.0",
+    "jest-emotion": "^10.0.10",
+    "typography-theme-wordpress-2016": "^0.16.19"
   }
 }

README.md

 
 # theme-ui
+
+Themeable UI components for themes
+
+```sh
+npm i theme-ui
+```
+
+```jsx
+// basic usage
+import React from 'react'
+import { ThemeProvider } from 'theme-ui'
+import theme from './theme'
+
+export default props =>
+  <ThemeProvider theme={theme}>
+    {props.children}
+  </ThemeProvider>
+```
+
+## `css` prop
+
+```jsx
+// with css prop and @styled-system/css
+import React from 'react'
+import css from '@styled-system/css'
+
+export default () =>
+  <div
+    css={css({
+      fontSize: 4,
+      fontWeight: 'bold',
+      color: 'primary', // picks up values from theme
+    })}>
+    Hello
+  </div>
+```
+
+## MDX Components
+
+Use the `components` prop to add components to MDX scope.
+
+```jsx
+// with mdx components
+import React from 'react'
+import { ThemeProvider } from 'theme-ui'
+import mdxComponents from './mdx-components'
+import theme from './theme'
+
+export default props =>
+  <ThemeProvider
+    components={mdxComponents}
+    theme={theme}>
+    {props.children}
+  </ThemeProvider>
+```
+
+This will render child MDX components with the components provided via context.
+
+## Styled components
+
+These components can also be consumed *outside* of an MDX doc with the `Styled` component.
+
+```jsx
+import React from 'react'
+import { Styled } from 'theme-ui'
+
+export default props =>
+  <Styled.div>
+    <Styled.h1>
+      Hello
+    </Styled.h1>
+  </Styled.div>
+```
+
+## `theme.styles`
+
+The MDX components can also be styled via the `theme.styles` object.
+
+```js
+// example theme
+export default {
+  colors: {
+    primary: '#33e',
+  },
+  styles: {
+    // this styles child MDX `<h1>` components
+    h1: {
+      fontSize: 32,
+      // this value comes from the `color` object
+      color: 'primary',
+    },
+  }
+}
+```
+
+## Typography.js
+
+The output of Typography.js can be added to the `theme.styles` object to style MDX content.
+
+See the [Demo Page](/typography)
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4249

increased by720.27%

Number of package files

4

increased by33.33%

Lines of code

58

increased by625%

Number of lines in readme file

104

increased by3366.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

8

increased by100%

Dev dependency count

6

increased byInfinity%

Dependency changes

• + Addedcss-what@^2.1.3

• + Addedemotion-theming@^10.0.10

• + Addedlodash.merge@^4.6.1

• + Addedtypography@^0.16.19

• + Addedcompass-vertical-rhythm@1.4.5(transitive)

• + Addedconsole-polyfill@0.1.2(transitive)

• + Addedconvert-css-length@1.0.2(transitive)

• + Addedcss-what@2.1.3(transitive)

• + Addeddecamelize@1.2.0(transitive)

• + Addedgray-percentage@2.0.0(transitive)

• + Addedlodash.isnumber@3.0.3(transitive)

• + Addedmodularscale@1.0.2(transitive)

• + Addedparse-unit@1.0.1(transitive)

• + Addedtypography@0.16.24(transitive)

• + Addedtypography-normalize@0.16.19(transitive)