Skip to content

Commit 56dfbf9

Browse files
iampavaiampava
committed
custom-properties: extend ThemeProvider to insert CSS Custom Props
1 parent d533060 commit 56dfbf9

File tree

5 files changed

+192
-20
lines changed

5 files changed

+192
-20
lines changed

‎packages/custom-properties/README.md

+102-16
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,126 @@
11
# @theme-ui/custom-properties
22

3-
Generate CSS custom properties for use with Theme UI.
3+
Extend [ThemeUI](https://theme-ui.com)'s core functionality with CSS Custom Properties.
44

5-
https://theme-ui.com
65

76
## Installation
87

98
```
109
yarn add @theme-ui/custom-properties
1110
```
1211

12+
## API
1313

14-
## Usage
14+
### toCustomProperties
1515

16-
Transform your Theme UI compliant theme config with the library:
16+
Transform your Theme UI compliant theme to an object of CSS Custom Properties.
1717

18-
```js
19-
const toCustomProperties = require('@theme-ui/custom-properties')
20-
const theme = require('../theme');
18+
**Type**: `Function`
2119

22-
module.exports = () => {
23-
const customProperties = toCustomProperties(theme, '🍭');
20+
**Parameters**:
21+
1. theme - The theme ui specification object
22+
2. prefix - An optional string prefix for the css custom property (_optional_)
2423

25-
return customProperties;
24+
**Returns**: `Object`
25+
```js
26+
// Example response
27+
{
28+
'--color-primary': '#2980b9',
29+
'--color-secondary': '#f7df1e',
30+
'--fontSize-0': 12,
31+
' -fontSize-1': 14,
32+
'--fontSize-2': 16,
33+
'--fontSize-3': 24,
34+
'--fontSize-4': 32,
35+
'--fontSize-5': 48,
36+
'--fontSize-6': 64
2637
}
2738
```
2839

40+
**Example**:
41+
```js
42+
import toCustomProperties from '@theme-ui/custom-properties';
43+
import theme from '../theme';
2944

30-
## Parameters
45+
const customProperties = toCustomProperties(theme, '🍭');
46+
console.log(customProperties);
47+
```
3148

32-
The @theme-ui/custom-properties function takes two parameters:
49+
### withCustomProperties
50+
Extend the base `ThemeProvider` to allow native styling by using CSS Custom Properties.
3351

34-
```js
35-
toCustomProperties( $theme, $prefix );
52+
**Type**: `Function`
53+
54+
**Parameters**:
55+
1. prefix - An optional string prefix for the css custom property (_optional_)
56+
2. className - An optional class name to add onto the wrapper. All CSS Custom Properties will be defined on this element.
57+
58+
**Returns** a React Component which extends the default `ThemeProvider` by adding CSS Custom Properties to the wrapper element.
59+
60+
For example:
61+
62+
```jsx
63+
const ExtendedThemeProvider = withCustomProperties('app-name', 'extended-theme-provider');
64+
65+
ReactDOM.render(
66+
<ExtendedThemeProvider theme={theme}>
67+
<p> Hello world! </p>
68+
</ExtendedThemeProvider>,
69+
root
70+
);
3671
```
3772

38-
1. theme - The theme ui specification object
39-
1. prefix - An optional prefix for the css custom property _optional_
73+
will render:
74+
75+
```jsx
76+
<div class="extended-theme-provider">
77+
<p> Hello world! </p>
78+
</div>
79+
```
80+
81+
Then in CSS we can do something like:
82+
83+
```css
84+
p {
85+
color: var(--app-name-color-primary);
86+
background: var(--app-name-color-secondary);
87+
}
88+
```
4089

90+
These CSS Custom Properties are in total sync with the theme. Also, sub-theming works as expected.
91+
92+
```jsx
93+
const theme = {
94+
colors: {
95+
primary: 'red',
96+
secondary: 'blue'
97+
}
98+
};
99+
100+
const subTheme = {
101+
colors: {
102+
primary: 'orange'
103+
}
104+
};
105+
106+
const ExtendedThemeProvider = withCustomProperties('app-name');
107+
108+
ReactDOM.render(
109+
<ExtendedThemeProvider theme={theme}>
110+
<p> Hello world! </p> // red on a blue background
111+
112+
<ExtendedThemeProvider theme={subTheme}>
113+
<p> Hello Aliens! </p> // orange on a blue background
114+
</ExtendedThemeProvider>
115+
116+
</ExtendedThemeProvider>,
117+
root
118+
);
119+
```
120+
121+
```css
122+
p {
123+
color: var(--app-name-color-primary);
124+
background: var(--app-name-color-secondary);
125+
}
126+
```

‎packages/custom-properties/package.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@theme-ui/custom-properties",
33
"description": "Generate CSS custom properties for use with Theme UI",
4-
"version": "0.4.0-alpha.3",
4+
"version": "0.5.0-alpha.1",
55
"source": "src/index.ts",
66
"main": "dist/index.js",
77
"module": "dist/index.esm.js",
@@ -16,7 +16,11 @@
1616
"access": "public"
1717
},
1818
"dependencies": {
19-
"pluralize": "^8.0.0"
19+
"pluralize": "^8.0.0",
20+
"@theme-ui/core": "^0.3.1"
21+
},
22+
"peerDependencies": {
23+
"react": "^16.11.0"
2024
},
2125
"devDependencies": {
2226
"@theme-ui/css": "^0.4.0-alpha.3",

‎packages/custom-properties/src/index.ts

+37-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
import React, { useEffect, useRef } from 'react'
12
import pluralize from 'pluralize'
23
import { Theme } from '@theme-ui/css'
4+
import { ThemeProviderProps, useThemeUI, ThemeProvider } from '@theme-ui/core'
35

46
interface CustomProperties {
57
[key: string]: string | number
68
}
79

8-
export default (theme: Theme, prefix?: string) => {
10+
export default function toCustomProperties(theme: Theme, prefix?: string) {
911
const customProperties: CustomProperties = {}
1012

1113
const generateProperties = (object: object, previousKey?: string) => {
@@ -36,3 +38,37 @@ export default (theme: Theme, prefix?: string) => {
3638

3739
return customProperties
3840
}
41+
42+
export function withCustomProperties(
43+
prefix?: string,
44+
className: string = 'theme-ui-provider'
45+
) {
46+
return function customThemeProvider(props: ThemeProviderProps) {
47+
const ref = useRef<HTMLDivElement>(null)
48+
const outerTheme = useThemeUI().theme
49+
50+
useEffect(() => {
51+
if (!ref.current) {
52+
return
53+
}
54+
55+
const theme = typeof props.theme === 'function'
56+
? props.theme(outerTheme)
57+
: props.theme
58+
const cssProperties = toCustomProperties(theme, prefix)
59+
60+
Object.entries(cssProperties).forEach(([key, value]) => {
61+
ref.current!.style.setProperty(key, value.toString())
62+
})
63+
})
64+
65+
return React.createElement(
66+
'div',
67+
{
68+
ref,
69+
className,
70+
},
71+
React.createElement(ThemeProvider, props)
72+
)
73+
}
74+
}

‎packages/custom-properties/test/__snapshots__/test.js.snap

+20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`adds a specific className on the wrapping element of ThemeProvider 1`] = `
4+
<div
5+
className="🍧"
6+
>
7+
<p>
8+
Hello world!
9+
</p>
10+
</div>
11+
`;
12+
13+
exports[`adds the default className on the wrapping element of ThemeProvider 1`] = `
14+
<div
15+
className="theme-ui-provider"
16+
>
17+
<p>
18+
Hello world!
19+
</p>
20+
</div>
21+
`;
22+
323
exports[`transforms a theme config to CSS custom properties 1`] = `
424
Object {
525
"--color-accent": "#609",

‎packages/custom-properties/test/test.js

+27-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import toCustomProperties from '../src'
1+
import React from 'react'
2+
import renderer from 'react-test-renderer'
3+
import toCustomProperties, { withCustomProperties } from '../src'
24

35
const theme = {
46
colors: {
@@ -45,3 +47,27 @@ it('transforms a theme config to CSS custom properties with prefix', () => {
4547

4648
expect(result).toMatchSnapshot()
4749
})
50+
51+
it('adds the default className on the wrapping element of ThemeProvider', () => {
52+
const ExtendedThemeProvider = withCustomProperties('🍭')
53+
const themeProvider = renderer.create(
54+
<ExtendedThemeProvider theme={theme}>
55+
<p> Hello world! </p>
56+
</ExtendedThemeProvider>
57+
)
58+
59+
let tree = themeProvider.toJSON()
60+
expect(tree).toMatchSnapshot()
61+
})
62+
63+
it('adds a specific className on the wrapping element of ThemeProvider', () => {
64+
const ExtendedThemeProvider = withCustomProperties('🍭', '🍧')
65+
const themeProvider = renderer.create(
66+
<ExtendedThemeProvider theme={theme}>
67+
<p> Hello world! </p>
68+
</ExtendedThemeProvider>
69+
)
70+
71+
let tree = themeProvider.toJSON()
72+
expect(tree).toMatchSnapshot()
73+
})

0 commit comments

Comments
 (0)