@sanity/ui 2.0.0-alpha.13 → 2.0.0-alpha.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.14",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "2.0.0",
-    "@sanity/color": "3.0.0-beta.5",
+    "@sanity/color": "3.0.0-beta.6",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.2",

package/src/theme/_internal/__workshop__/build/story.tsx

@@ -0,0 +1,178 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {ReactElement} from 'react'
+import styled from 'styled-components'
+import {COLOR_BASE_TONES, COLOR_BUTTON_MODES, COLOR_STATE_TONES} from '../../constants'
+import {ColorBaseTone, TMP_Theme} from '../../types'
+import {theme} from './theme'
+
+const Root = styled.div`
+  background: #000;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 13px;
+  line-height: 9px;
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+
+  pre {
+    font: inherit;
+    font-family: 'SF Mono', Menlo, monospace;
+    margin: 0;
+    padding: 0;
+  }
+
+  .button {
+    background-color: var(--button-enabled-bg);
+    color: var(--button-enabled-fg);
+    box-shadow:
+      inset 0 0 0 1px var(--border-color),
+      0 1px 0 0 color-mix(in srgb, var(--border-color), transparent 75%);
+    text-align: center;
+    border-radius: 3px;
+    font-weight: 500;
+    cursor: default;
+    transition: box-shadow 80ms ease-in-out;
+
+    --border-color: var(--button-enabled-border);
+  }
+
+  .button:hover {
+    background-color: var(--button-hovered-bg);
+    color: var(--button-hovered-fg);
+    --border-color: var(--button-hovered-border);
+  }
+
+  .button:active {
+    background-color: var(--button-pressed-bg);
+    color: var(--button-pressed-fg);
+    --border-color: var(--button-pressed-border);
+    box-shadow: inset 0 0 0 1px var(--border-color);
+  }
+
+  .button.selected {
+    background-color: var(--button-selected-bg);
+    color: var(--button-selected-fg);
+    --border-color: var(--button-selected-border);
+    box-shadow: inset 0 0 0 1px var(--border-color);
+  }
+
+  .button.disabled {
+    background-color: var(--button-disabled-bg);
+    color: var(--button-disabled-fg);
+    --border-color: var(--button-disabled-border);
+    box-shadow: inset 0 0 0 1px var(--border-color);
+  }
+`
+
+export default function BuildStory(): ReactElement {
+  return (
+    <Root>
+      <div style={{display: 'flex'}}>
+        <div style={{flex: 1}}>
+          {COLOR_BASE_TONES.map((baseTone) => (
+            <BaseTonePreview baseTone={baseTone} key={baseTone} scheme="light" theme={theme} />
+          ))}
+        </div>
+        <div style={{flex: 1}}>
+          {COLOR_BASE_TONES.map((baseTone) => (
+            <BaseTonePreview baseTone={baseTone} key={baseTone} scheme="dark" theme={theme} />
+          ))}
+        </div>
+      </div>
+    </Root>
+  )
+}
+
+function BaseTonePreview(props: {
+  baseTone: ColorBaseTone
+  scheme: 'light' | 'dark'
+  theme: TMP_Theme
+}) {
+  const {baseTone, scheme, theme} = props
+  const color = theme.color[scheme]
+
+  return (
+    <div
+      style={
+        {
+          backgroundColor: color[baseTone].base.bg,
+          color: color[baseTone].base.fg,
+          '--border-color': color[baseTone].base.border,
+        } as any
+      }
+    >
+      <div style={{maxWidth: 540, margin: 'auto', padding: '20px 0'}}>
+        <pre style={{padding: 12}}>
+          color/{scheme}/{baseTone}
+        </pre>
+        <div style={{padding: '1px 12px 12px 12px'}}>
+          {COLOR_BUTTON_MODES.map((mode) => (
+            <div key={mode} style={{display: 'flex', flexDirection: 'column'}}>
+              {COLOR_STATE_TONES.map((tone) => {
+                const button = color[baseTone].button[tone][mode]
+
+                return (
+                  <div
+                    key={tone}
+                    style={
+                      {
+                        border: '1px solid var(--border-color)',
+                        padding: 4,
+                        display: 'flex',
+                        marginTop: -1,
+                        gap: 4,
+
+                        '--button-enabled-bg': button.enabled.bg,
+                        '--button-enabled-fg': button.enabled.fg,
+                        '--button-enabled-border': button.enabled.border,
+
+                        '--button-hovered-bg': button.hovered.bg,
+                        '--button-hovered-fg': button.hovered.fg,
+                        '--button-hovered-border': button.hovered.border,
+
+                        '--button-pressed-bg': button.pressed.bg,
+                        '--button-pressed-fg': button.pressed.fg,
+                        '--button-pressed-border': button.pressed.border,
+
+                        '--button-selected-bg': button.selected.bg,
+                        '--button-selected-fg': button.selected.fg,
+                        '--button-selected-border': button.selected.border,
+
+                        '--button-disabled-bg': button.disabled.bg,
+                        '--button-disabled-fg': button.disabled.fg,
+                        '--button-disabled-border': button.disabled.border,
+                      } as any
+                    }
+                  >
+                    <pre style={{flex: 2, padding: 8}}>{`mode="${mode}" tone="${tone}"`}</pre>
+                    <div className="button" style={{flex: 'none', padding: 8}}>
+                      Button
+                    </div>
+                    <div className="button selected" style={{flex: 'none', padding: 8}}>
+                      Button
+                    </div>
+                    <div className="button disabled" style={{flex: 'none', padding: 8}}>
+                      Button
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/theme/_internal/__workshop__/build/theme.ts

@@ -0,0 +1,3 @@
+import {buildTheme} from '../../build'
+
+export const theme = buildTheme()

package/src/theme/_internal/__workshop__/index.ts

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: '_internal/theme',
+  title: 'Theming',
+  stories: [
+    {
+      name: 'build',
+      title: 'Build theme',
+      component: lazy(() => import('./build/story')),
+    },
+  ],
+})

package/src/theme/_internal/build/buildTheme.test.ts

@@ -0,0 +1,78 @@
+import {buildTheme} from './buildTheme'
+
+test('build theme', () => {
+  const {color} = buildTheme({
+    color: {
+      tokens: {
+        default: {
+          bg: ['white/0', 'black/0'],
+        },
+        button: {
+          default: {
+            ghost: {
+              '*': {
+                border: ['white/0', 'black/0'],
+              },
+            },
+          },
+        },
+      },
+    },
+  })
+
+  expect({
+    light: {
+      bg: color.light.default.base.bg,
+      fg: color.light.default.base.fg,
+      default: {
+        button: {
+          ghost: {
+            enabled: {
+              border: color.light.default.button.default.ghost.enabled.border,
+            },
+          },
+        },
+      },
+    },
+    dark: {
+      bg: color.dark.default.base.bg,
+      fg: color.dark.default.base.fg,
+      default: {
+        button: {
+          ghost: {
+            enabled: {
+              border: color.dark.default.button.default.ghost.enabled.border,
+            },
+          },
+        },
+      },
+    },
+  }).toEqual({
+    light: {
+      bg: 'rgba(255,255,255,0)',
+      fg: '#ffffff',
+      default: {
+        button: {
+          ghost: {
+            enabled: {
+              border: 'rgba(255,255,255,0)',
+            },
+          },
+        },
+      },
+    },
+    dark: {
+      bg: 'rgba(0,0,0,0)',
+      fg: '#000000',
+      default: {
+        button: {
+          ghost: {
+            enabled: {
+              border: 'rgba(0,0,0,0)',
+            },
+          },
+        },
+      },
+    },
+  })
+})

package/src/theme/_internal/build/buildTheme.ts

@@ -0,0 +1,15 @@
+import {ThemeConfig} from '../config'
+import {TMP_Theme} from '../types'
+import {buildColorTheme} from './colorTheme/buildColorTheme'
+import {renderColorTheme} from './colorTheme/renderColorTheme'
+import {defaultColorPalette} from './defaults/colorPalette'
+
+/** @internal */
+export function buildTheme(config?: ThemeConfig): TMP_Theme {
+  return {
+    color: renderColorTheme(config?.color?.palette ?? defaultColorPalette, {
+      light: buildColorTheme({scheme: 'light'}, config),
+      dark: buildColorTheme({scheme: 'dark'}, config),
+    }),
+  }
+}

package/src/theme/_internal/build/colorTheme/buildColorTheme.test.ts

@@ -0,0 +1,185 @@
+import {ColorThemeConfig} from '../../config'
+import {buildColorTheme} from './buildColorTheme'
+
+test('buildColorTheme: base', () => {
+  const colorConfig: ColorThemeConfig = {
+    tokens: {
+      '*': {
+        bg: ['50', '900'],
+        fg: ['800', '200'],
+      },
+      transparent: {
+        bg: ['50', 'black'],
+      },
+      default: {
+        bg: ['white', '950'],
+        fg: ['black', '200'],
+      },
+      primary: {
+        _hue: 'purple',
+      },
+      positive: {
+        _hue: 'cyan',
+      },
+      caution: {
+        _hue: 'yellow',
+      },
+      critical: {
+        _hue: 'red',
+      },
+    },
+  }
+
+  const light = buildColorTheme({scheme: 'light'}, {color: colorConfig})
+  const dark = buildColorTheme({scheme: 'dark'}, {color: colorConfig})
+
+  expect({
+    light: {
+      transparent: {
+        bg: light.transparent.base.bg,
+        fg: light.transparent.base.fg,
+      },
+      default: {
+        bg: light.default.base.bg,
+        fg: light.default.base.fg,
+      },
+      primary: {
+        bg: light.primary.base.bg,
+        fg: light.primary.base.fg,
+      },
+    },
+    dark: {
+      transparent: {
+        bg: dark.transparent.base.bg,
+        fg: dark.transparent.base.fg,
+      },
+      default: {
+        bg: dark.default.base.bg,
+        fg: dark.default.base.fg,
+      },
+      primary: {
+        bg: dark.primary.base.bg,
+        fg: dark.primary.base.fg,
+      },
+    },
+  }).toEqual({
+    light: {
+      transparent: {
+        bg: 'gray/50',
+        fg: 'gray/800',
+      },
+      default: {
+        bg: 'white',
+        fg: 'black',
+      },
+      primary: {
+        bg: 'purple/50',
+        fg: 'purple/800',
+      },
+    },
+    dark: {
+      transparent: {
+        bg: 'black',
+        fg: 'gray/200',
+      },
+      default: {
+        bg: 'gray/950',
+        fg: 'gray/200',
+      },
+      primary: {
+        bg: 'purple/900',
+        fg: 'purple/200',
+      },
+    },
+  })
+})
+
+test('buildColorTheme: button', () => {
+  const colorConfig: ColorThemeConfig = {
+    tokens: {
+      '*': {
+        bg: ['50', '900'],
+        fg: ['800', '200'],
+      },
+      transparent: {
+        bg: ['50', 'black'],
+      },
+      default: {
+        bg: ['white', '950'],
+        fg: ['black', '200'],
+      },
+      primary: {
+        _hue: 'purple',
+      },
+      positive: {
+        _hue: 'cyan',
+      },
+      caution: {
+        _hue: 'yellow',
+      },
+      critical: {
+        _hue: 'red',
+      },
+      button: {
+        '*': {
+          default: {
+            '*': {
+              bg: ['500', '400'],
+              fg: ['white', 'black'],
+            },
+            hovered: {
+              bg: ['600', '300'],
+            },
+          },
+        },
+      },
+    },
+  }
+
+  const light = buildColorTheme({scheme: 'light'}, {color: colorConfig})
+  const dark = buildColorTheme({scheme: 'dark'}, {color: colorConfig})
+
+  expect({
+    light: {
+      enabled: {
+        bg: light.default.button.primary.default.enabled.bg,
+        fg: light.default.button.primary.default.enabled.fg,
+      },
+      hovered: {
+        bg: light.default.button.primary.default.hovered.bg,
+        fg: light.default.button.primary.default.hovered.fg,
+      },
+    },
+    dark: {
+      enabled: {
+        bg: dark.default.button.primary.default.enabled.bg,
+        fg: dark.default.button.primary.default.enabled.fg,
+      },
+      hovered: {
+        bg: dark.default.button.primary.default.hovered.bg,
+        fg: dark.default.button.primary.default.hovered.fg,
+      },
+    },
+  }).toEqual({
+    light: {
+      enabled: {
+        bg: 'purple/500',
+        fg: 'white',
+      },
+      hovered: {
+        bg: 'purple/600',
+        fg: 'white',
+      },
+    },
+    dark: {
+      enabled: {
+        bg: 'purple/400',
+        fg: 'black',
+      },
+      hovered: {
+        bg: 'purple/300',
+        fg: 'black',
+      },
+    },
+  })
+})