system-ui · hasparus · Feb 7, 2023 · Nov 20, 2022 · Nov 20, 2022 · Nov 20, 2022
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -36,7 +36,7 @@ jobs:
       - run: pnpm build:docs
       - run: cd packages/e2e && pnpm cypress install
 
-      - uses: cypress-io/github-action@v4.2.0
+      - uses: cypress-io/github-action@v5.0.0
         with:
           record: true
           parallel: true

@@ -2,9 +2,11 @@ import { Button, useColorMode } from 'theme-ui'
 
 const Header = () => {
   const [colorMode, setColorMode] = useColorMode()
+
   return (
     <header>
       <Button
+        suppressHydrationWarning
         onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
       >
         Toggle {colorMode === 'light' ? 'Dark' : 'Light'}

@@ -16,6 +16,7 @@
     "@mdx-js/loader": "^2.1.2",
     "@mdx-js/react": "^2.1.2",
     "@next/mdx": "^12.0.7",
+    "@theme-ui/css": "workspace:^",
     "next": "^12.1.0",
     "react": "^18",
     "react-dom": "^18",

@@ -1,12 +1,14 @@
 import Head from 'next/head'
 import About from '../components/about.mdx'
+import { Global } from 'theme-ui'
 
 export default function Page() {
   return (
     <>
       <Head>
         <title>Next.js Theme UI</title>
       </Head>
+      <Global styles={{ h1: { color: 'salmon !important' } }} />
       <About />
     </>
   )

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "test:coverage": "cross-env \"NODE_OPTIONS=--experimental-vm-modules --no-warnings\" jest --coverage",
     "typecheck": "tsc --noEmit",
     "typecheck:tests": "tsc --noEmit -P ./tsconfig.test.json",
-    "logo": "pnpm run --filter docs docs logo",
+    "logo": "pnpm run --filter docs logo",
     "postinstall": "preconstruct dev",
     "dev": "preconstruct dev",
     "release": "pnpm clean && pnpm build && pnpm shipit && node scripts/publish-to-npm.mjs",

@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/color-modes",
-  "version": "0.15.4",
+  "version": "0.15.5-develop.2",
   "main": "dist/theme-ui-color-modes.cjs.js",
   "module": "dist/theme-ui-color-modes.esm.js",
   "types": "dist/theme-ui-color-modes.cjs.d.ts",

@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/color",
-  "version": "0.15.4",
+  "version": "0.15.5-develop.2",
   "source": "src/index.ts",
   "main": "dist/theme-ui-color.cjs.js",
   "module": "dist/theme-ui-color.esm.js",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/components",
-  "version": "0.15.4",
+  "version": "0.15.5-develop.2",
   "main": "dist/theme-ui-components.cjs.js",
   "module": "dist/theme-ui-components.esm.js",
   "types": "dist/theme-ui-components.cjs.d.ts",

diff --git a/packages/components/src/Spinner.tsx b/packages/components/src/Spinner.tsx
@@ -1,28 +1,17 @@
-import React, { SVGAttributes } from 'react'
-import { keyframes } from '@emotion/react'
-
+import React from 'react'
 import type { ThemeUICSSObject } from '@theme-ui/css'
 
 import { Box, BoxOwnProps, BoxProps } from './Box'
 import type { ForwardRef } from './types'
 import { __internalProps } from './util'
 
-const spin = keyframes({
-  from: {
-    transform: 'rotate(0deg)',
-  },
-  to: {
-    transform: 'rotate(360deg)',
-  },
-})
-
 export interface SpinnerProps
   extends Omit<
       React.ComponentPropsWithRef<'svg'>,
       'opacity' | 'color' | 'css' | 'sx' | 'strokeWidth'
     >,
     BoxOwnProps {
-  size?: number | string
+  size?: number
   strokeWidth?: number
   title?: string
   duration?: number
@@ -34,37 +23,17 @@ export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps> =
       size = 48,
       strokeWidth = 4,
       max = 1,
-      title = 'Loading...',
-      duration = 500,
+      title = 'Loading',
+      duration = 750,
       ...props
     },
     ref
   ) {
-    const r = 16 - strokeWidth
-    const C = 2 * r * Math.PI
-    const offset = C - (1 / 4) * C
-
     const __css: ThemeUICSSObject = {
       color: 'primary',
       overflow: 'visible',
     }
 
-    const circleProps: SVGAttributes<SVGCircleElement> = {
-      cx: 16,
-      cy: 16,
-      r,
-      strokeDasharray: C,
-      strokeDashoffset: offset,
-    }
-
-    const __circleCss: ThemeUICSSObject = {
-      transformOrigin: '50% 50%',
-      animationName: spin.toString(),
-      animationTimingFunction: 'linear',
-      animationDuration: duration + 'ms',
-      animationIterationCount: 'infinite',
-    }
-
     const svgProps = {
       strokeWidth,
 
@@ -77,6 +46,14 @@ export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps> =
       role: 'img',
     }
 
+    const circleProps = {
+      strokeWidth,
+      r: 16 - strokeWidth,
+      cx: 16,
+      cy: 16,
+      fill: 'none',
+    }
+
     return (
       <Box
         ref={ref}
@@ -86,14 +63,18 @@ export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps> =
         {...__internalProps({ __css })}
       >
         <title>{title}</title>
-        <circle cx={16} cy={16} r={r} opacity={1 / 8} />
-        <Box
-          as="circle"
-          {...(circleProps as {})}
-          {...__internalProps({
-            __css: __circleCss,
-          })}
-        />
+        <circle {...circleProps} opacity={1 / 8} />
+        <circle {...circleProps} strokeDasharray="20 110">
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            from="0 16 16"
+            to="360 16 16"
+            dur={`${duration}ms`}
+            repeatCount="indefinite"
+          />
+        </circle>
       </Box>
     )
   })
diff --git a/packages/components/test/__snapshots__/index.tsx.snap b/packages/components/test/__snapshots__/index.tsx.snap
@@ -1329,22 +1329,6 @@ exports[`Slider renders 1`] = `
 `;
 
 exports[`Spinner renders 1`] = `
-@keyframes animation-0 {
-  from {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  to {
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
 .emotion-0 {
   box-sizing: border-box;
   margin: 0;
@@ -1353,21 +1337,6 @@ exports[`Spinner renders 1`] = `
   overflow: visible;
 }
 
-.emotion-1 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-  transform-origin: 50% 50%;
-  -webkit-animation-name: animation-0;
-  animation-name: animation-0;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
-  -webkit-animation-duration: 500ms;
-  animation-duration: 500ms;
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-
 <svg
   className="emotion-0"
   fill="none"
@@ -1379,22 +1348,34 @@ exports[`Spinner renders 1`] = `
   width={48}
 >
   <title>
-    Loading...
+    Loading
   </title>
   <circle
     cx={16}
     cy={16}
+    fill="none"
     opacity={0.125}
     r={12}
+    strokeWidth={4}
   />
   <circle
-    className="emotion-1"
     cx={16}
     cy={16}
+    fill="none"
     r={12}
-    strokeDasharray={75.39822368615503}
-    strokeDashoffset={56.548667764616276}
-  />
+    strokeDasharray="20 110"
+    strokeWidth={4}
+  >
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      dur="750ms"
+      from="0 16 16"
+      repeatCount="indefinite"
+      to="360 16 16"
+      type="rotate"
+    />
+  </circle>
 </svg>
 `;
 

@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/core",
-  "version": "0.15.4",
+  "version": "0.15.5-develop.2",
   "source": "src/index.ts",
   "main": "dist/theme-ui-core.cjs.js",
   "module": "dist/theme-ui-core.esm.js",

@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/css",
-  "version": "0.15.4",
+  "version": "0.15.5-develop.2",
   "source": "src/index.ts",
   "main": "dist/theme-ui-css.cjs.js",
   "module": "dist/theme-ui-css.esm.js",

@@ -1,7 +1,7 @@
 {
   "name": "@theme-ui/custom-properties",
   "description": "Generate CSS custom properties for use with Theme UI",
-  "version": "0.15.4",
+  "version": "0.15.5-develop.2",
   "source": "src/index.ts",
   "main": "dist/theme-ui-custom-properties.cjs.js",
   "module": "dist/theme-ui-custom-properties.esm.js",

@@ -14,7 +14,7 @@ export default function makeCustomProperties(theme: Theme, prefix?: string) {
 
   const generateProperties = (object: object, previousKey?: string) => {
     Object.entries(object).forEach(([key, value]) => {
-      let formattedKey = pluralize(key, 1)
+      let formattedKey = pluralize(key, 1) || key
 
       if (
         process.env.NODE_ENV !== 'production' &&

@@ -18,6 +18,9 @@ exports[`transforms a theme config to CSS custom properties 1`] = `
   "--fontWeight-heading": 700,
   "--lineHeight-0": 1.5,
   "--lineHeight-1": 1.125,
+  "--radius-l": "0.5em",
+  "--radius-m": "0.25em",
+  "--radius-s": "0.125em",
   "--size-0": "10em",
   "--size-1": "20em",
   "--size-2": "30em",
@@ -49,6 +52,9 @@ exports[`transforms a theme config to CSS custom properties with prefix 1`] = `
   "--🍭-fontWeight-heading": 700,
   "--🍭-lineHeight-0": 1.5,
   "--🍭-lineHeight-1": 1.125,
+  "--🍭-radius-l": "0.5em",
+  "--🍭-radius-m": "0.25em",
+  "--🍭-radius-s": "0.125em",
   "--🍭-size-0": "10em",
   "--🍭-size-1": "20em",
   "--🍭-size-2": "30em",

@@ -37,6 +37,11 @@ const theme = {
   lineHeights: [1.5, 1.125],
   space: [0, 2, 3, 4, 5, 6],
   size: ['10em', '20em', '30em', '40em'],
+  radii: {
+    s: '0.125em',
+    m: '0.25em',
+    l: '0.5em',
+  },
 }
 
 it('transforms a theme config to CSS custom properties', () => {

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "docs",
-  "version": "0.15.4",
+  "version": "0.15.5-develop.2",
   "main": "dist/docs.cjs.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "@theme-ui/core": "workspace:^",
     "@theme-ui/components": "workspace:^",
     "@theme-ui/css": "workspace:^",
+    "@theme-ui/global": "workspace:^",
     "@theme-ui/match-media": "workspace:^",
     "@theme-ui/mdx": "workspace:^",
     "@theme-ui/presets": "workspace:^",