Skip to content

Commit a96e723

Browse files
author
LB
authored
Merge pull request #895 from system-ui/enable-highlighting
Enable highlight lines
2 parents ef9b2aa + c051c07 commit a96e723

31 files changed

+452
-83
lines changed

‎packages/color-modes/src/custom-properties.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css } from '@theme-ui/css'
22

3-
const toVarName = key => `--theme-ui-${key}`
3+
const toVarName = (key) => `--theme-ui-${key}`
44
const toVarValue = (key, value) => `var(${toVarName(key)}, ${value})`
55

66
const join = (...args) => args.filter(Boolean).join('-')
@@ -77,7 +77,7 @@ export const createColorStyles = (theme = {}) => {
7777
const { modes } = colors
7878
const styles = objectToVars('colors', colors)
7979

80-
Object.keys(modes).forEach(mode => {
80+
Object.keys(modes).forEach((mode) => {
8181
const key = `&.theme-ui-${mode}`
8282
styles[key] = objectToVars('colors', modes[mode])
8383
})

‎packages/color-modes/src/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { toCustomProperties, createColorStyles } from './custom-properties'
77
const STORAGE_KEY = 'theme-ui-color-mode'
88

99
const storage = {
10-
get: init => {
10+
get: (init) => {
1111
try {
1212
return window.localStorage.getItem(STORAGE_KEY) || init
1313
} catch (e) {
@@ -18,7 +18,7 @@ const storage = {
1818
)
1919
}
2020
},
21-
set: value => {
21+
set: (value) => {
2222
try {
2323
window.localStorage.setItem(STORAGE_KEY, value)
2424
} catch (e) {
@@ -102,7 +102,7 @@ const applyColorMode = (theme, mode) => {
102102

103103
const BodyStyles = () =>
104104
jsx(Global, {
105-
styles: theme => createColorStyles(theme),
105+
styles: (theme) => createColorStyles(theme),
106106
})
107107

108108
export const ColorModeProvider = ({ children }) => {

‎packages/color-modes/test/index.js

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ beforeEach(() => {
1515
})
1616
expect.extend(matchers)
1717

18-
const renderJSON = el => renderer.create(el).toJSON()
18+
const renderJSON = (el) => renderer.create(el).toJSON()
1919

2020
test('renders with color modes', () => {
2121
let json
2222
let mode
23-
const Mode = props => {
23+
const Mode = (props) => {
2424
const [colorMode] = useColorMode()
2525
mode = colorMode
2626
return <div>Mode</div>
@@ -50,7 +50,7 @@ test('renders with color modes', () => {
5050
test('renders with initial color mode name', () => {
5151
let json
5252
let mode
53-
const Mode = props => {
53+
const Mode = (props) => {
5454
const [colorMode] = useColorMode()
5555
mode = colorMode
5656
return <div>Mode</div>
@@ -77,12 +77,12 @@ test('renders with initial color mode name', () => {
7777

7878
test('useColorMode updates color mode state', () => {
7979
let mode
80-
const Button = props => {
80+
const Button = (props) => {
8181
const [colorMode, setMode] = useColorMode()
8282
mode = colorMode
8383
return (
8484
<button
85-
onClick={e => {
85+
onClick={(e) => {
8686
setMode('dark')
8787
}}
8888
children="test"
@@ -103,15 +103,15 @@ test('useColorMode updates color mode state', () => {
103103

104104
test('color mode is passed through theme context', () => {
105105
let mode
106-
const Button = props => {
106+
const Button = (props) => {
107107
const [colorMode, setMode] = useColorMode()
108108
mode = colorMode
109109
return (
110110
<button
111111
sx={{
112112
color: 'text',
113113
}}
114-
onClick={e => {
114+
onClick={(e) => {
115115
setMode('dark')
116116
}}
117117
children="test"
@@ -143,7 +143,7 @@ test('color mode is passed through theme context', () => {
143143
})
144144

145145
test('converts color modes to css custom properties', () => {
146-
const Box = props => (
146+
const Box = (props) => (
147147
<div
148148
sx={{
149149
color: 'text',
@@ -176,7 +176,7 @@ test('converts color modes to css custom properties', () => {
176176

177177
test('uses default mode', () => {
178178
let mode
179-
const Button = props => {
179+
const Button = (props) => {
180180
const [colorMode, setMode] = useColorMode()
181181
mode = colorMode
182182
return <button children="test" />
@@ -194,7 +194,7 @@ test('uses default mode', () => {
194194
test('initializes mode based on localStorage', () => {
195195
window.localStorage.setItem(STORAGE_KEY, 'dark')
196196
let mode
197-
const Button = props => {
197+
const Button = (props) => {
198198
const [colorMode, setMode] = useColorMode()
199199
mode = colorMode
200200
return <button children="test" />
@@ -212,7 +212,7 @@ test('initializes mode based on localStorage', () => {
212212
test('does not initialize mode based on localStorage if useLocalStorage is set to false', () => {
213213
window.localStorage.setItem(STORAGE_KEY, 'dark')
214214
let mode
215-
const Button = props => {
215+
const Button = (props) => {
216216
const [colorMode, setMode] = useColorMode()
217217
mode = colorMode
218218
return <button children="test" />
@@ -232,7 +232,7 @@ test('does not initialize mode based on localStorage if useLocalStorage is set t
232232

233233
test('retains initial context', () => {
234234
let context
235-
const Consumer = props => {
235+
const Consumer = (props) => {
236236
context = useThemeUI()
237237
return false
238238
}
@@ -249,14 +249,14 @@ test('retains initial context', () => {
249249
})
250250

251251
test('initializes mode from prefers-color-scheme media query', () => {
252-
window.matchMedia = jest.fn().mockImplementation(query => {
252+
window.matchMedia = jest.fn().mockImplementation((query) => {
253253
return {
254254
matches: query.includes('dark'),
255255
media: query,
256256
}
257257
})
258258
let mode
259-
const Consumer = props => {
259+
const Consumer = (props) => {
260260
const [colorMode] = useColorMode()
261261
mode = colorMode
262262
return false
@@ -275,14 +275,14 @@ test('initializes mode from prefers-color-scheme media query', () => {
275275
})
276276

277277
test('initializes light mode from prefers-color-scheme media query', () => {
278-
window.matchMedia = jest.fn().mockImplementation(query => {
278+
window.matchMedia = jest.fn().mockImplementation((query) => {
279279
return {
280280
matches: query.includes('light'),
281281
media: query,
282282
}
283283
})
284284
let mode
285-
const Consumer = props => {
285+
const Consumer = (props) => {
286286
const [colorMode] = useColorMode()
287287
mode = colorMode
288288
return false
@@ -301,14 +301,14 @@ test('initializes light mode from prefers-color-scheme media query', () => {
301301
})
302302

303303
test('does not initialize mode from prefers-color-scheme media query', () => {
304-
window.matchMedia = jest.fn().mockImplementation(query => {
304+
window.matchMedia = jest.fn().mockImplementation((query) => {
305305
return {
306306
matches: false,
307307
media: query,
308308
}
309309
})
310310
let mode
311-
const Consumer = props => {
311+
const Consumer = (props) => {
312312
const [colorMode] = useColorMode()
313313
mode = colorMode
314314
return false
@@ -327,14 +327,14 @@ test('does not initialize mode from prefers-color-scheme media query', () => {
327327
})
328328

329329
test('does not initialize mode from prefers-color-scheme media query when useColorSchemeMediaQuery is not set', () => {
330-
window.matchMedia = jest.fn().mockImplementation(query => {
330+
window.matchMedia = jest.fn().mockImplementation((query) => {
331331
return {
332332
matches: true,
333333
media: query,
334334
}
335335
})
336336
let mode
337-
const Consumer = props => {
337+
const Consumer = (props) => {
338338
const [colorMode] = useColorMode()
339339
mode = colorMode
340340
return false
@@ -378,7 +378,7 @@ test('ColorModeProvider renders with global colors', () => {
378378
test('useColorMode throws when there is no theme context', () => {
379379
const restore = mockConsole()
380380
expect(() => {
381-
const Consumer = props => {
381+
const Consumer = (props) => {
382382
const [colorMode] = useColorMode('beep')
383383
mode = colorMode
384384
return false
@@ -474,14 +474,14 @@ test('does not warn in production', () => {
474474
})
475475

476476
test('dot notation works with color modes', () => {
477-
const Button = props => {
477+
const Button = (props) => {
478478
const [colorMode, setMode] = useColorMode()
479479
return (
480480
<button
481481
sx={{
482482
color: 'header.title',
483483
}}
484-
onClick={e => {
484+
onClick={(e) => {
485485
setMode('dark')
486486
}}
487487
children="test"
@@ -516,14 +516,14 @@ test('dot notation works with color modes', () => {
516516
})
517517

518518
test('dot notation works with color modes and custom properties', () => {
519-
const Button = props => {
519+
const Button = (props) => {
520520
const [colorMode, setMode] = useColorMode()
521521
return (
522522
<button
523523
sx={{
524524
color: 'header.title',
525525
}}
526-
onClick={e => {
526+
onClick={(e) => {
527527
setMode('dark')
528528
}}
529529
children="test"
@@ -561,7 +561,7 @@ test('dot notation works with color modes and custom properties', () => {
561561

562562
test('raw color values are passed to theme-ui context when custom properties are enabled', () => {
563563
let color
564-
const Grabber = props => {
564+
const Grabber = (props) => {
565565
const context = useThemeUI()
566566
color = context.theme.colors.primary
567567
return false
@@ -599,7 +599,7 @@ test('warns when localStorage is disabled', () => {
599599
})
600600

601601
let mode
602-
const Consumer = props => {
602+
const Consumer = (props) => {
603603
const [colorMode] = useColorMode()
604604
mode = colorMode
605605
return false

‎packages/components/test/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import {
4040

4141
expect.extend(matchers)
4242

43-
const renderJSON = el => renderer.create(el).toJSON()
43+
const renderJSON = (el) => renderer.create(el).toJSON()
4444

4545
const theme = {
4646
boxes: {

‎packages/core/test/index.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ afterEach(cleanup)
1010

1111
expect.extend(matchers)
1212

13-
const renderJSON = el => renderer.create(el).toJSON()
13+
const renderJSON = (el) => renderer.create(el).toJSON()
1414

1515
describe('ThemeProvider', () => {
1616
test('renders', () => {
@@ -97,7 +97,7 @@ describe('ThemeProvider', () => {
9797
},
9898
cards: {
9999
default: {
100-
border: t => `1px solid ${t.colors.primary}`,
100+
border: (t) => `1px solid ${t.colors.primary}`,
101101
},
102102
},
103103
}
@@ -156,7 +156,7 @@ describe('jsx', () => {
156156
},
157157
},
158158
jsx('div', {
159-
css: t => ({
159+
css: (t) => ({
160160
color: t.colors.primary,
161161
}),
162162
})
@@ -270,7 +270,7 @@ describe('merge', () => {
270270
const h1 = React.forwardRef((props, ref) => <h1 ref={ref} {...props} />)
271271
const result = merge(
272272
{
273-
h1: props => <h1 {...props} />,
273+
h1: (props) => <h1 {...props} />,
274274
},
275275
{
276276
h1,
@@ -326,7 +326,7 @@ describe('merge', () => {
326326
describe('useThemeUI', () => {
327327
test('returns theme context', () => {
328328
let context
329-
const GetContext = props => {
329+
const GetContext = (props) => {
330330
context = useThemeUI()
331331
return false
332332
}

‎packages/docs/src/components/head.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet'
33
import { useThemeUI } from 'theme-ui'
44
import pkg from 'theme-ui/package.json'
55

6-
export default props => {
6+
export default (props) => {
77
const title = [
88
props.title,
99
props.pageContext.frontmatter ? props.pageContext.frontmatter.title : false,

‎packages/gatsby-plugin-theme-ui/test/provider.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ afterEach(() => {
1414
delete theme.colors
1515
})
1616

17-
const Consumer = props => {
17+
const Consumer = (props) => {
1818
context = useThemeUI()
1919
return false
2020
}

‎packages/prism/README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,28 @@ export default {
124124
}
125125
```
126126

127+
## Highlight support
128+
129+
This package supports highlighting inside code blocks. The following two syntaxes are supported:
130+
131+
```js
132+
let str = "highlight" // highlight-line
133+
```
134+
135+
```js
136+
// highlight-start
137+
let str = "highlight"
138+
// highlight-end
139+
```
140+
141+
The highlight styling is controlled in `styles.pre` under `.highlight`. For example:
142+
143+
```json
144+
".highlight": {
145+
"background": "hsla(0, 0%, 30%, .5)"
146+
}
147+
```
148+
127149
## Additional Languages
128150

129151
Please note that `@theme-ui/prism` uses [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer), [which does not include all languages supported in Prism](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) by default. So, if you happen to use one of the missing languages, your code block simply won't show up as highlighted.

‎packages/prism/presets/dracula.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,8 @@
2828
},
2929
".attr-name": {
3030
"color": "rgb(241, 250, 140)"
31+
},
32+
".highlight": {
33+
"background": "hsla(0, 0%, 30%, .5)"
3134
}
3235
}

‎packages/prism/presets/duotone-dark.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,8 @@
3636
},
3737
".important": {
3838
"color": "#c4b9fe"
39+
},
40+
".highlight": {
41+
"background": "hsla(0, 0%, 30%, .5)"
3942
}
4043
}

0 commit comments

Comments
 (0)