- lighten((theme as MyTheme).colors.blue.__default, 0.1)(theme),
+ lighten((theme as MyTheme).rawColors.blue.__default, 0.1)(theme),
}}>
Hello
diff --git a/packages/color/tsconfig.json b/packages/color/tsconfig.json
deleted file mode 100644
index 36be9b168..000000000
--- a/packages/color/tsconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
-}
diff --git a/packages/components/package.json b/packages/components/package.json
index dec96c77a..e7b2a86c0 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,34 +1,29 @@
{
"name": "@theme-ui/components",
- "version": "0.6.0-alpha.7",
- "main": "dist/index.js",
- "module": "dist/index.esm.js",
+ "version": "0.6.1",
+ "main": "dist/theme-ui-components.cjs.js",
+ "module": "dist/theme-ui-components.esm.js",
"types": "index.d.ts",
"sideEffects": false,
- "scripts": {
- "prepare": "microbundle --no-compress --jsx React.createElement",
- "watch": "microbundle watch --no-compress --jsx React.createElement",
- "typecheck": "tsc --noEmit"
- },
+ "scripts": {},
"dependencies": {
- "@emotion/react": "^11.1.1",
"@emotion/styled": "^11.0.0",
"@styled-system/color": "^5.1.2",
"@styled-system/should-forward-prop": "^5.1.2",
"@styled-system/space": "^5.1.2",
- "@theme-ui/css": "0.6.0-alpha.7",
- "@types/styled-system": "^5.1.10"
+ "@theme-ui/css": "^0.6.0",
+ "@types/styled-system": "^5.1.10",
+ "@emotion/react": "^11.1.1"
},
"peerDependencies": {
"react": "^16.14.0 || ^17.0.0"
},
- "devDependencies": {
- "react": "^17.0.1"
- },
"publishConfig": {
"access": "public"
},
"author": "Brent Jackson ",
"license": "MIT",
- "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
+ "devDependencies": {
+ "react": "^17.0.1"
+ }
}
diff --git a/packages/components/src/Paragraph.js b/packages/components/src/Paragraph.js
index 0f95573df..b129fa6b4 100644
--- a/packages/components/src/Paragraph.js
+++ b/packages/components/src/Paragraph.js
@@ -14,11 +14,7 @@ export const Paragraph = React.forwardRef(function Paragraph(
sx={{
// reset margin by default: avoid relying on user-agent margins (not aware of theme-ui space scale)
margin: 0,
- // set a max-width: avoid full-page paragraphs
- '@media screen and (min-width: 36em)': {
- maxWidth: '48rem',
- },
- ...sx,
+ ...sx
}}
__themeKey="text"
__css={{
diff --git a/packages/components/test/__snapshots__/index.js.snap b/packages/components/test/__snapshots__/index.js.snap
index 2c291d785..7048a822c 100644
--- a/packages/components/test/__snapshots__/index.js.snap
+++ b/packages/components/test/__snapshots__/index.js.snap
@@ -1100,12 +1100,6 @@ exports[`Paragraph renders 1`] = `
margin: 0;
}
-@media screen and (min-width: 36em) {
- .emotion-0 {
- max-width: 48rem;
- }
-}
-
diff --git a/packages/components/test/index.js b/packages/components/test/index.js
index 07404e2da..384bd56b4 100644
--- a/packages/components/test/index.js
+++ b/packages/components/test/index.js
@@ -67,6 +67,8 @@ const theme = {
fontSize: 3,
},
block: {
+ my: 0,
+ maxWidth: [0, '48em'],
variant: 'default',
textAlign: 'justify',
textAlignLast: 'start',
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
deleted file mode 100644
index e8abfbb5e..000000000
--- a/packages/components/tsconfig.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": [
- "src/**/*.ts",
- "src/**/*.tsx",
- "test/**/*.ts",
- "test/**/*.tsx",
- "index.d.ts"
- ]
-}
diff --git a/packages/core/jsx-dev-runtime/package.json b/packages/core/jsx-dev-runtime/package.json
index c1ddbbd4e..cbc073d53 100644
--- a/packages/core/jsx-dev-runtime/package.json
+++ b/packages/core/jsx-dev-runtime/package.json
@@ -1,9 +1,9 @@
{
"name": "@theme-ui/core-jsx-dev-runtime",
"source": "../src/jsx-dev-runtime.ts",
- "main": "dist/index.js",
- "module": "dist/index.esm.js",
- "types": "dist/jsx-dev-runtime.d.ts",
+ "main": "dist/theme-ui-core-jsx-dev-runtime.cjs.js",
+ "module": "dist/theme-ui-core-jsx-dev-runtime.esm.js",
+ "types": "dist/theme-ui-core-jsx-dev-runtime.cjs.d.ts",
"dependencies": {
"@emotion/react": "*",
"@theme-ui/parse-props": "*",
diff --git a/packages/core/jsx-runtime/package.json b/packages/core/jsx-runtime/package.json
index bd75c07bd..097bcf852 100644
--- a/packages/core/jsx-runtime/package.json
+++ b/packages/core/jsx-runtime/package.json
@@ -1,9 +1,9 @@
{
"name": "@theme-ui/core-jsx-runtime",
"source": "../src/jsx-runtime.ts",
- "main": "dist/index.js",
- "module": "dist/index.esm.js",
- "types": "dist/jsx-runtime.d.ts",
+ "main": "dist/theme-ui-core-jsx-runtime.cjs.js",
+ "module": "dist/theme-ui-core-jsx-runtime.esm.js",
+ "types": "dist/theme-ui-core-jsx-runtime.cjs.d.ts",
"dependencies": {
"@emotion/react": "*",
"@theme-ui/parse-props": "*",
diff --git a/packages/core/package.json b/packages/core/package.json
index c2f01b1b6..5086b452c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,19 +1,12 @@
{
"name": "@theme-ui/core",
- "version": "0.6.0-alpha.7",
+ "version": "0.6.1",
"source": "src/index.ts",
- "main": "dist/index.js",
- "module": "dist/index.esm.js",
- "types": "dist/index.d.ts",
+ "main": "dist/theme-ui-core.cjs.js",
+ "module": "dist/theme-ui-core.esm.js",
+ "types": "dist/theme-ui-core.cjs.d.ts",
"sideEffects": false,
- "scripts": {
- "prepare": "yarn prepare:index && yarn prepare:jsx-runtime && yarn prepare:jsx-dev-runtime",
- "prepare:index": "microbundle --no-compress --tsconfig tsconfig.json",
- "prepare:jsx-runtime": "microbundle --no-compress --tsconfig tsconfig.json --cwd jsx-runtime",
- "prepare:jsx-dev-runtime": "microbundle --no-compress --tsconfig tsconfig.json --cwd jsx-dev-runtime",
- "watch": "microbundle watch --no-compress --tsconfig tsconfig.json",
- "typecheck": "tsc --noEmit"
- },
+ "scripts": {},
"repository": "system-ui/theme-ui",
"author": "Brent Jackson",
"license": "MIT",
@@ -22,8 +15,8 @@
},
"dependencies": {
"@emotion/react": "^11.1.1",
- "@theme-ui/css": "0.6.0-alpha.7",
- "@theme-ui/parse-props": "0.6.0-alpha.7",
+ "@theme-ui/css": "^0.6.0",
+ "@theme-ui/parse-props": "^0.6.1",
"deepmerge": "^4.2.2"
},
"peerDependencies": {
@@ -33,5 +26,11 @@
"@types/react": "^17.0.0",
"react": "^17.0.1"
},
- "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
+ "preconstruct": {
+ "entrypoints": [
+ "index.ts",
+ "jsx-dev-runtime.ts",
+ "jsx-runtime.ts"
+ ]
+ }
}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index ff7cb312c..ca3dcc7d3 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -33,7 +33,6 @@ export type {
VariantProperty,
} from '@theme-ui/css'
-
export { __internalGetUseRootStyles } from '@theme-ui/css'
export * from './types'
@@ -45,6 +44,12 @@ export const jsx: typeof React.createElement = (
...children: React.ReactNode[]
): any => emotionJsx(type, parseProps(props), ...children)
+/**
+ * @internal for Babel JSX pragma
+ * @see https://github.com/system-ui/theme-ui/issues/1603
+ */
+export const createElement: unknown = jsx
+
export declare namespace jsx {
export namespace JSX {
export interface Element extends ThemeUIJSX.Element {}
@@ -65,17 +70,20 @@ export declare namespace jsx {
}
}
-export interface ContextValue {
+export interface ThemeUIContextValue {
__EMOTION_VERSION__: string
theme: Theme
}
-export const Context = React.createContext({
+/**
+ * @internal
+ */
+export const __ThemeUIContext = React.createContext({
__EMOTION_VERSION__,
theme: {},
})
-export const useThemeUI = () => React.useContext(Context)
+export const useThemeUI = () => React.useContext(__ThemeUIContext)
const canUseSymbol = typeof Symbol === 'function' && Symbol.for
@@ -109,14 +117,20 @@ function mergeAll(...args: Partial[]) {
merge.all = mergeAll
-interface BaseProviderProps {
- context: ContextValue
+export interface __ThemeUIInternalBaseThemeProviderProps {
+ context: ThemeUIContextValue
}
-const BaseProvider: React.FC = ({ context, children }) =>
+/**
+ * @internal
+ */
+export const __ThemeUIInternalBaseThemeProvider: React.FC<__ThemeUIInternalBaseThemeProviderProps> = ({
+ context,
+ children,
+}) =>
jsx(
EmotionContext.Provider,
{ value: context.theme },
- jsx(Context.Provider, {
+ jsx(__ThemeUIContext.Provider, {
value: context,
children,
})
@@ -145,5 +159,5 @@ export function ThemeProvider({ theme, children }: ThemeProviderProps) {
? { ...outer, theme: theme(outer.theme) }
: merge.all({}, outer, { theme })
- return jsx(BaseProvider, { context }, children)
+ return jsx(__ThemeUIInternalBaseThemeProvider, { context }, children)
}
diff --git a/packages/core/test/index.tsx b/packages/core/test/index.tsx
index 019df5387..d67cdefc2 100644
--- a/packages/core/test/index.tsx
+++ b/packages/core/test/index.tsx
@@ -5,11 +5,12 @@ import { matchers } from '@emotion/jest'
import mockConsole from 'jest-mock-console'
import {
jsx,
- Context,
+ __ThemeUIContext,
useThemeUI,
merge,
ThemeProvider,
- ContextValue,
+ ThemeUIContextValue,
+ Theme,
} from '../src'
afterEach(cleanup)
@@ -29,13 +30,13 @@ describe('ThemeProvider', () => {
test('warns when multiple versions of emotion are installed', () => {
const restore = mockConsole()
const json = renderJSON(
-
Conflicting versions
-
+
)
expect(console.warn).toBeCalled()
restore()
@@ -96,13 +97,13 @@ describe('ThemeProvider', () => {
})
test('variants support functional values', () => {
- const theme = {
+ const theme: Theme = {
colors: {
primary: 'tomato',
},
cards: {
default: {
- border: (t) => `1px solid ${t.colors.primary}`,
+ border: (t) => `1px solid ${t.colors!.primary}`,
},
},
}
@@ -333,7 +334,7 @@ describe('merge', () => {
describe('useThemeUI', () => {
test('returns theme context', () => {
- let context: ContextValue | undefined
+ let context: ThemeUIContextValue | undefined
const GetContext = () => {
context = useThemeUI()
return null
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
deleted file mode 100644
index cab60c39c..000000000
--- a/packages/core/tsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "compilerOptions": {
- "jsx": "react",
- "strictFunctionTypes": true
- },
- "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
-}
diff --git a/packages/css/package.json b/packages/css/package.json
index e548ed670..213065939 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,24 +1,19 @@
{
"name": "@theme-ui/css",
- "version": "0.6.0-alpha.7",
+ "version": "0.6.0",
"source": "src/index.ts",
- "main": "dist/index.js",
- "module": "dist/index.esm.js",
- "types": "dist/index.d.ts",
+ "main": "dist/theme-ui-css.cjs.js",
+ "module": "dist/theme-ui-css.esm.js",
"sideEffects": false,
- "scripts": {
- "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
- "watch": "microbundle watch --no-compress --tsconfig tsconfig.json",
- "typecheck": "tsc --noEmit"
- },
+ "scripts": {},
"author": "Brent Jackson",
"license": "MIT",
"publishConfig": {
"access": "public"
},
"dependencies": {
- "@emotion/react": "^11.1.1",
- "csstype": "^3.0.5"
+ "csstype": "^3.0.5",
+ "@emotion/react": "^11.1.1"
},
"gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
}
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 0855f424c..abb69a78b 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -361,18 +361,6 @@ interface OverwriteCSSProperties {
* @see https://developer.mozilla.org/docs/Web/CSS/border-top-style
*/
borderTopStyle?: CSS.Property.BorderTopStyle | string
- /**
- * The **`border-top-width`** CSS property sets the width of the top border of an element.
- *
- * **Initial value**: `medium`
- *
- * | Chrome | Firefox | Safari | Edge | IE |
- * | :----: | :-----: | :----: | :----: | :---: |
- * | **1** | **1** | **1** | **12** | **4** |
- *
- * @see https://developer.mozilla.org/docs/Web/CSS/border-top-width
- */
- borderTopWidth?: CSS.Property.BorderTopWidth | string
/**
* The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
*
@@ -708,6 +696,14 @@ export interface Theme {
*/
colors?: ColorModesScale
+ /**
+ * Colors are transformed into CSS custom properties.
+ *
+ * If you need to read their raw values to pass them somewhere where CSS
+ * custom properties are not supported, use `rawColors`.
+ */
+ rawColors?: ColorModesScale
+
/**
* Styles for elements rendered in MDX can be added to the theme.styles
* object. This is the primary, low-level way to control typographic and
diff --git a/packages/css/test/errors-and-inference.ts b/packages/css/test/errors-and-inference.ts
index ce0f94e6b..597c041bf 100644
--- a/packages/css/test/errors-and-inference.ts
+++ b/packages/css/test/errors-and-inference.ts
@@ -72,7 +72,7 @@ describe('Theme', () => {
declare module 'theme-ui' {
interface Theme {
- syntaxHighlighting: MySyntaxHighlightingTheme
+ syntaxHighlighting?: MySyntaxHighlightingTheme
}
}
@@ -82,7 +82,7 @@ describe('Theme', () => {
},
}
- const syntaxHighlighting = theme.syntaxHighlighting
+ const syntaxHighlighting = theme.syntaxHighlighting!
`).toInfer('syntaxHighlighting', 'MySyntaxHighlightingTheme')
})
@@ -140,26 +140,12 @@ describe('ColorMode', () => {
const colorMode: ColorMode = {}
- const baseColors = [
- colorMode.text,
- colorMode.background,
- colorMode.primary,
- colorMode.secondary,
- colorMode.muted,
- colorMode.highlight,
- colorMode.accent,
- ];
-
const seriousPink = colorMode.seriousPink
if (Array.isArray(seriousPink)) {
const [light, medium, dark] = seriousPink
}
`)
- expectedSnippet.toInfer(
- 'baseColors',
- '((string & {}) | Color[] | NestedScaleDict | undefined)[]'
- )
expectedSnippet.toInfer('light', 'Color')
expectedSnippet.toInfer('dark', 'Color')
})
diff --git a/packages/css/test/index.ts b/packages/css/test/index.ts
index ff94a15cb..add6f5cf6 100644
--- a/packages/css/test/index.ts
+++ b/packages/css/test/index.ts
@@ -1,4 +1,4 @@
-import { css, NestedScale, NestedScaleDict, Theme } from '../src'
+import { css, NestedScale, NestedScaleDict, Theme, ThemeUIExtendedCSSProperties } from '../src'
const theme: Theme = {
colors: {
@@ -676,3 +676,20 @@ test('omits empty values', () => {
})(theme)
).toStrictEqual({ border: '1px solid black' })
})
+
+
+test('borderTopWidth accepts number', () => {
+ expect(css({
+ borderTopWidth: 7,
+ })(theme)).toEqual({
+ borderTopWidth: 7,
+ })
+
+ expect(css({
+ borderTopWidth: 1,
+ })({
+ borderWidths: ['10px', '20px']
+ })).toEqual({
+ borderTopWidth: '20px',
+ })
+})
\ No newline at end of file
diff --git a/packages/css/test/internal.ts b/packages/css/test/internal.ts
index 6cb8b869e..68e116b1c 100644
--- a/packages/css/test/internal.ts
+++ b/packages/css/test/internal.ts
@@ -29,7 +29,7 @@ describe(__internalGetUseRootStyles, () => {
(value) => {
const theme: Theme = {
useBodyStyles: value,
- useRootStyles: null,
+ useRootStyles: null as any as undefined,
}
expect(__internalGetUseRootStyles(theme)).toStrictEqual({
diff --git a/packages/css/tsconfig.json b/packages/css/tsconfig.json
deleted file mode 100644
index 36be9b168..000000000
--- a/packages/css/tsconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
-}
diff --git a/packages/custom-properties/babel.config.js b/packages/custom-properties/babel.config.js
deleted file mode 100644
index 46bf5309f..000000000
--- a/packages/custom-properties/babel.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../../babel.config')
diff --git a/packages/custom-properties/package.json b/packages/custom-properties/package.json
index ebfc63004..dd4830b09 100644
--- a/packages/custom-properties/package.json
+++ b/packages/custom-properties/package.json
@@ -1,18 +1,13 @@
{
"name": "@theme-ui/custom-properties",
"description": "Generate CSS custom properties for use with Theme UI",
- "version": "0.6.0-alpha.7",
+ "version": "0.6.1",
"source": "src/index.ts",
- "main": "dist/index.js",
- "module": "dist/index.esm.js",
- "types": "dist/index.d.ts",
+ "main": "dist/theme-ui-custom-properties.cjs.js",
+ "module": "dist/theme-ui-custom-properties.esm.js",
"author": "Alex Page ",
"license": "MIT",
- "scripts": {
- "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
- "watch": "microbundle watch --no-compress --tsconfig tsconfig.json",
- "typecheck": "tsc --noEmit"
- },
+ "scripts": {},
"publishConfig": {
"access": "public"
},
@@ -20,7 +15,7 @@
"pluralize": "^8.0.0"
},
"devDependencies": {
- "@theme-ui/css": "0.6.0-alpha.7",
+ "@theme-ui/css": "0.6.0",
"@types/pluralize": "^0.0.29"
},
"gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
diff --git a/packages/custom-properties/tsconfig.json b/packages/custom-properties/tsconfig.json
deleted file mode 100644
index 4082f16a5..000000000
--- a/packages/custom-properties/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "extends": "../../tsconfig.json"
-}
diff --git a/packages/docs/.eslintrc.js b/packages/docs/.eslintrc.js
new file mode 100644
index 000000000..2778802ce
--- /dev/null
+++ b/packages/docs/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+ globals: {
+ __PATH_PREFIX__: true,
+ },
+ extends: `react-app`,
+}
diff --git a/packages/docs/package.json b/packages/docs/package.json
index f610031ce..6e177ee72 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,8 +1,8 @@
{
"private": true,
"name": "docs",
- "version": "0.6.0-alpha.7",
- "main": "index.js",
+ "version": "0.6.1",
+ "main": "dist/docs.cjs.js",
"author": "Brent Jackson ",
"license": "MIT",
"scripts": {
@@ -16,29 +16,30 @@
"icon": "npx repng src/components/logo.js -d static -f icon.png -w=32 -h=32 --props='{\"size\":32}'"
},
"dependencies": {
- "@emotion/react": "^11.1.1",
+ "@emotion/react": "11.1.5",
"@emotion/styled": "^11.0.0",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
- "@theme-ui/color": "0.6.0-alpha.7",
- "@theme-ui/components": "0.6.0-alpha.7",
- "@theme-ui/css": "0.6.0-alpha.7",
- "@theme-ui/editor": "0.6.0-alpha.7",
- "@theme-ui/match-media": "0.6.0-alpha.7",
- "@theme-ui/presets": "0.6.0-alpha.7",
- "@theme-ui/prism": "0.6.0-alpha.7",
- "@theme-ui/sidenav": "0.6.0-alpha.7",
- "@theme-ui/style-guide": "0.6.0-alpha.7",
- "@theme-ui/typography": "0.6.0-alpha.7",
+ "@theme-ui/color": "^0.6.1",
+ "@theme-ui/components": "^0.6.1",
+ "@theme-ui/css": "0.6.0",
+ "@theme-ui/editor": "^0.6.1",
+ "@theme-ui/match-media": "^0.6.1",
+ "@theme-ui/presets": "^0.6.1",
+ "@theme-ui/prism": "^0.6.1",
+ "@theme-ui/sidenav": "^0.6.1",
+ "@theme-ui/style-guide": "^0.6.1",
+ "@theme-ui/typography": "^0.6.1",
"copy-to-clipboard": "^3.2.0",
+ "eslint-config-react-app": "^6.0.0",
"gatsby": "^2.26.1",
"gatsby-plugin-catch-links": "^2.4.0",
"gatsby-plugin-compile-es6-packages": "^2.1.0",
- "gatsby-plugin-mdx": "^1.6.0",
+ "gatsby-plugin-mdx": "^2.0.1",
"gatsby-plugin-react-helmet": "^3.4.0",
- "gatsby-plugin-theme-ui": "0.6.0-alpha.7",
- "gatsby-theme-code-recipes": "0.6.0-alpha.7",
- "gatsby-theme-style-guide": "0.6.0-alpha.7",
+ "gatsby-plugin-theme-ui": "^0.6.0",
+ "gatsby-theme-code-recipes": "^0.6.0",
+ "gatsby-theme-style-guide": "^0.6.1",
"lodash.merge": "^4.6.1",
"lodash.omit": "^4.5.0",
"prismjs": "^1.16.0",
@@ -48,7 +49,7 @@
"react-live": "^2.1.2",
"remark-slug": "^6.0.0",
"stringify-object": "^3.3.0",
- "theme-ui": "0.6.0-alpha.7",
+ "theme-ui": "^0.6.1",
"typography-theme-alton": "^0.16.19",
"typography-theme-anonymous": "^0.15.10",
"typography-theme-bootstrap": "^0.16.19",
@@ -90,5 +91,8 @@
},
"devDependencies": {
"@babel/register": "^7.8.6"
+ },
+ "resolutions": {
+ "@emotion/react": "11.1.5"
}
}
diff --git a/packages/docs/src/components/code.js b/packages/docs/src/components/code.js
index bb5a554a2..20b3a7c60 100644
--- a/packages/docs/src/components/code.js
+++ b/packages/docs/src/components/code.js
@@ -56,16 +56,27 @@ const scope = {
images,
}
-const transformCode = (src) => `/** @jsx jsx */\n<>${src}`
+const stripTrailingNewline = (str) => {
+ if (typeof str === 'string' && str[str.length - 1] === '\n') {
+ return str.slice(0, -1)
+ }
+ return str
+}
+
+const transformCode = (src) => {
+ return `/** @jsx jsx */\n<>${src}`
+}
const liveTheme = { styles: [] }
export const LiveCode = ({ children, preview, xray }) => {
+ const code = stripTrailingNewline(children)
+
if (preview) {
return (
@@ -76,7 +87,7 @@ export const LiveCode = ({ children, preview, xray }) => {
return (
{
-
+
)
diff --git a/packages/docs/src/components/debug-theme.js b/packages/docs/src/components/debug-theme.js
index b727cce80..4c3cefcc5 100644
--- a/packages/docs/src/components/debug-theme.js
+++ b/packages/docs/src/components/debug-theme.js
@@ -1,8 +1,7 @@
/** @jsx jsx */
-import { jsx, Context } from 'theme-ui'
-import { useContext } from 'react'
+import { jsx, useThemeUI } from 'theme-ui'
-export default (props) => {
- const theme = useContext(Context)
+export default () => {
+ const theme = useThemeUI()
return
}
diff --git a/packages/docs/src/components/editor-demo.js b/packages/docs/src/components/editor-demo.js
new file mode 100644
index 000000000..7a49646f5
--- /dev/null
+++ b/packages/docs/src/components/editor-demo.js
@@ -0,0 +1,27 @@
+// @ts-check
+
+import React from 'react'
+import { Box } from 'theme-ui'
+import { EditorProvider, Theme } from '@theme-ui/editor'
+
+export function EditorPackageDemo() {
+ return (
+
+
+ Demo Box
+
+
+
+ Font Weights
+
+ Line Heights
+
+
+ )
+}
diff --git a/packages/docs/src/components/google-fonts.js b/packages/docs/src/components/google-fonts.js
index 2a20fcce7..4812266d5 100644
--- a/packages/docs/src/components/google-fonts.js
+++ b/packages/docs/src/components/google-fonts.js
@@ -1,6 +1,6 @@
// for development only
import { useEffect, useContext } from 'react'
-import { Context } from 'theme-ui'
+import { useThemeUI } from 'theme-ui'
const parseTypographyGoogleFonts = (typography) => {
const { googleFonts } = typography.options
@@ -15,7 +15,7 @@ const parseTypographyGoogleFonts = (typography) => {
}
export default (props) => {
- const { theme } = useContext(Context)
+ const { theme } = useThemeUI()
if (!theme.typography) return false
const href = parseTypographyGoogleFonts(theme.typography)
useEffect(() => {
diff --git a/packages/docs/src/components/layout.js b/packages/docs/src/components/layout.js
index d6e3f40db..301b6e4aa 100644
--- a/packages/docs/src/components/layout.js
+++ b/packages/docs/src/components/layout.js
@@ -29,8 +29,11 @@ const getModeName = (mode) => {
return 'Deep'
case 'swiss':
return 'Swiss'
+ case 'light':
case 'default':
return 'Light'
+ case undefined:
+ return ' '
default:
return mode
}
@@ -92,6 +95,7 @@ export default (props) => {
Accept `false` in responsive tuple types. PR #1499
-- Skip `false` values before passing style objects to Emotion. Issue #1297, PR #1460.
- -