fix(alpha-ui): support for breaking changes inside studio with new sa…

…nity/ui (#5015)
sanity-io · Oct 19, 2023 · 2bcdf32 · 2bcdf32
1 parent d199784
commit 2bcdf32
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -1,4 +1,4 @@
-import {studioTheme, rgba, Card, Flex, CardTone, Spinner} from '@sanity/ui'
+import {rgba, Card, Flex, CardTone, Spinner, Theme} from '@sanity/ui'
 import styled, {css} from 'styled-components'
 
 export const MAX_DEFAULT_HEIGHT = 30
@@ -34,12 +34,14 @@ export const SpinnerWrapper = styled(Spinner)`
 export const Overlay = styled(Flex)(({
   tone,
   drag,
+  theme,
 }: {
   tone: Exclude<CardTone, 'inherit'>
   drag: boolean
+  theme: Theme
 }) => {
-  const textColor = studioTheme.color.light[tone].card.enabled.fg
-  const backgroundColor = rgba(studioTheme.color.light[tone].card.enabled.bg, 0.8)
+  const textColor = theme.sanity.color.card.enabled.fg
+  const backgroundColor = rgba(theme.sanity.color.card.enabled.bg, 0.8)
 
   return css`
     position: absolute;

diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -43,8 +43,9 @@ describe('Studio', () => {
     const sheet = new ServerStyleSheet()
     try {
       const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
+
       expect(html).toMatchInlineSnapshot(
-        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU fZPnmz sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg dOTYqu\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg dOTYqu sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -61,7 +62,7 @@ describe('Studio', () => {
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       expect(html).toMatchInlineSnapshot(
-        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU fZPnmz sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg dOTYqu\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg dOTYqu sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
     } finally {
       sheet.seal()
@@ -81,7 +82,7 @@ describe('Studio', () => {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
       node.innerHTML = html
       expect(html).toMatchInlineSnapshot(
-        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU fZPnmz sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg dOTYqu\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg dOTYqu sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
+        `"<div data-ui=\\"Flex\\" data-scheme=\\"light\\" data-tone=\\"default\\" class=\\"sc-jXbUNg bbOBvc sc-dLMFU bVnOTN sc-jXbUNg gwUwPO sc-jlZhew blWHRn\\"><div data-ui=\\"Text\\" class=\\"sc-aXZVg fsTqmC\\"><span>Loading…</span></div><div data-ui=\\"Spinner\\" class=\\"sc-aXZVg fsTqmC sc-cwHptR hNIzxo\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
       )
       document.head.innerHTML += sheet.getStyleTags()
 

diff --git a/packages/sanity/src/core/theme/_legacy/theme.ts b/packages/sanity/src/core/theme/_legacy/theme.ts
@@ -28,10 +28,11 @@ import {LegacyThemeProps} from './types'
  * ```
  *
  * @param partialLegacyTheme - Properties to override the theme with. See {@link LegacyThemeProps}
- *
  * @public
+ * @deprecated Use `@sanity/ui studioTheme` instead
  */
 export function buildLegacyTheme(partialLegacyTheme: Partial<LegacyThemeProps>): StudioTheme {
+  return defaults
   const legacyTheme = resolveLegacyTheme(partialLegacyTheme)
   const legacyPalette = buildLegacyPalette(legacyTheme)
   const legacyTones = buildLegacyTones(legacyPalette)