@sanity/ui 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -0,0 +1,288 @@
+/* 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(--bg);
+    color: var(--fg);
+    box-shadow:
+      inset 0 0 0 1px var(--border),
+      0 1px 0 0 color-mix(in srgb, var(--border), transparent 75%);
+    text-align: center;
+    border-radius: 3px;
+    font-weight: 500;
+    cursor: default;
+    transition: box-shadow 50ms ease-in-out;
+
+    --bg: var(--button-enabled-bg);
+    --fg: var(--button-enabled-fg);
+    --border: var(--button-enabled-border);
+    --bg2: var(--button-enabled-bg2);
+    --muted-fg: var(--button-enabled-muted-fg);
+  }
+
+  .button:hover {
+    --bg: var(--button-hovered-bg);
+    --fg: var(--button-hovered-fg);
+    --border: var(--button-hovered-border);
+    --bg2: var(--button-hovered-bg2);
+    --muted-fg: var(--button-hovered-muted-fg);
+  }
+
+  .button:focus {
+    outline: none;
+    box-shadow:
+      inset 0 0 0 1px var(--border),
+      0 0 0 1px var(--base-bg),
+      0 0 0 3px var(--focus-ring);
+
+    --bg: var(--button-hovered-bg);
+    --fg: var(--button-hovered-fg);
+    --border: var(--button-hovered-border);
+    --bg2: var(--button-hovered-bg2);
+    --muted-fg: var(--button-hovered-muted-fg);
+  }
+
+  .button:active {
+    background-color: var(--button-pressed-bg);
+    color: var(--button-pressed-fg);
+    box-shadow: inset 0 0 0 1px var(--border);
+    --border: var(--button-pressed-border);
+    --bg2: var(--button-pressed-bg2);
+    --muted-fg: var(--button-pressed-muted-fg);
+  }
+
+  .button.selected {
+    background-color: var(--button-selected-bg);
+    color: var(--button-selected-fg);
+    box-shadow: inset 0 0 0 1px var(--border);
+    --border: var(--button-selected-border);
+    --bg2: var(--button-selected-bg2);
+    --muted-fg: var(--button-selected-muted-fg);
+  }
+
+  .button.disabled {
+    background-color: var(--button-disabled-bg);
+    color: var(--button-disabled-fg);
+    box-shadow: inset 0 0 0 1px var(--border);
+    --border: var(--button-disabled-border);
+    --bg2: var(--button-disabled-bg2);
+    --muted-fg: var(--button-disabled-muted-fg);
+  }
+`
+
+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: 'var(--bg)',
+          color: 'var(--fg)',
+
+          '--base-bg': color[baseTone].base.bg,
+          '--bg': 'var(--base-bg)',
+          '--fg': color[baseTone].base.fg,
+          '--border': color[baseTone].base.border,
+          '--focus-ring': color[baseTone].base.focusRing,
+          '--shadow-outline': color[baseTone].base.shadow.outline,
+          '--shadow-umbra': color[baseTone].base.shadow.umbra,
+          '--shadow-penumbra': color[baseTone].base.shadow.penumbra,
+          '--shadow-ambient': color[baseTone].base.shadow.ambient,
+          '--skeleton-from': color[baseTone].base.skeleton.from,
+          '--skeleton-to': color[baseTone].base.skeleton.to,
+        } as any
+      }
+    >
+      <div style={{maxWidth: 320, margin: 'auto', padding: '20px 0'}}>
+        <pre style={{padding: 12}}>
+          color/{scheme}/{baseTone}
+        </pre>
+        <div style={{padding: 12}}>
+          <div
+            style={{
+              boxShadow: [
+                `0 0 0 1px var(--shadow-outline)`,
+                `0 6px 8px -4px var(--shadow-umbra)`,
+                `0 12px 17px 2px var(--shadow-penumbra)`,
+                `0 5px 22px 4px var(--shadow-ambient)`,
+              ].join(', '),
+              padding: 12,
+              borderRadius: 3,
+            }}
+          >
+            Shadow
+          </div>
+        </div>
+        <div style={{marginTop: 20, 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)',
+                        padding: 4,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        marginTop: -1,
+
+                        '--button-enabled-bg': button.enabled.bg,
+                        '--button-enabled-bg2': button.enabled.bg2,
+                        '--button-enabled-fg': button.enabled.fg,
+                        '--button-enabled-border': button.enabled.border,
+                        '--button-enabled-muted-fg': button.enabled.muted.fg,
+
+                        '--button-hovered-bg': button.hovered.bg,
+                        '--button-hovered-bg2': button.hovered.bg2,
+                        '--button-hovered-fg': button.hovered.fg,
+                        '--button-hovered-border': button.hovered.border,
+                        '--button-hovered-muted-fg': button.hovered.muted.fg,
+
+                        '--button-pressed-bg': button.pressed.bg,
+                        '--button-pressed-bg2': button.pressed.bg2,
+                        '--button-pressed-fg': button.pressed.fg,
+                        '--button-pressed-border': button.pressed.border,
+                        '--button-pressed-muted-fg': button.pressed.muted.fg,
+
+                        '--button-selected-bg': button.selected.bg,
+                        '--button-selected-bg2': button.selected.bg2,
+                        '--button-selected-fg': button.selected.fg,
+                        '--button-selected-border': button.selected.border,
+                        '--button-selected-muted-fg': button.selected.muted.fg,
+
+                        '--button-disabled-bg': button.disabled.bg,
+                        '--button-disabled-bg2': button.disabled.bg2,
+                        '--button-disabled-fg': button.disabled.fg,
+                        '--button-disabled-border': button.disabled.border,
+                        '--button-disabled-muted-fg': button.disabled.muted.fg,
+                      } as any
+                    }
+                  >
+                    <pre style={{padding: 8}}>{`mode="${mode}" tone="${tone}"`}</pre>
+                    <div
+                      style={{
+                        display: 'flex',
+                        gap: 4,
+                      }}
+                    >
+                      <div
+                        className="button"
+                        style={{flex: 'none', padding: 8, display: 'flex', gap: 4}}
+                        tabIndex={0}
+                      >
+                        <div style={{flex: 'none'}}>Button</div>
+                        <div style={{flex: 'none', color: 'var(--muted-fg)'}}>m</div>
+                        <div style={{flex: 'none'}}>
+                          <div
+                            style={{
+                              width: 4,
+                              height: 9,
+                              backgroundColor: 'var(--button-enabled-bg2)',
+                            }}
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className="button selected"
+                        style={{flex: 'none', padding: 8, display: 'flex', gap: 4}}
+                      >
+                        <div style={{flex: 'none'}}>Button</div>
+                        <div style={{flex: 'none', color: 'var(--muted-fg)'}}>m</div>
+                        <div style={{flex: 'none'}}>
+                          <div
+                            style={{
+                              width: 4,
+                              height: 9,
+                              backgroundColor: 'var(--bg2)',
+                            }}
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className="button disabled"
+                        style={{flex: 'none', padding: 8, display: 'flex', gap: 4}}
+                      >
+                        <div style={{flex: 'none'}}>Button</div>
+                        <div style={{flex: 'none', color: 'var(--muted-fg)'}}>m</div>
+                        <div style={{flex: 'none'}}>
+                          <div
+                            style={{
+                              width: 4,
+                              height: 9,
+                              backgroundColor: 'var(--bg2)',
+                            }}
+                          />
+                        </div>
+                      </div>
+                    </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,16 @@
+import {ThemeConfig} from '../config'
+import {TMP_Theme} from '../types'
+import {buildColorTheme} from './colorTheme/buildColorTheme'
+import {renderColorTheme} from './colorTheme/renderColorTheme'
+
+/** @internal */
+export function buildTheme(config?: ThemeConfig): TMP_Theme {
+  const color: TMP_Theme['color'] = {
+    light: buildColorTheme({scheme: 'light'}, config),
+    dark: buildColorTheme({scheme: 'dark'}, config),
+  }
+
+  return {
+    color: renderColorTheme(color, 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',
+      },
+    },
+  })
+})