@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.31

package/src/theme/{lib/theme/color/button/types.ts → system/color/button.ts}

@@ -1,9 +1,4 @@
-import {ThemeColorGenericState} from '../_generic'
-
-/**
- * @public
- */
-export type ThemeColorButtonModeKey = 'default' | 'ghost' | 'bleed'
+import {ThemeColorGenericState} from './_generic'
 
 /**
  * @deprecated Use `ThemeColorGenericState` instead.
@@ -15,11 +10,11 @@ export type ThemeColorButtonState = ThemeColorGenericState
  * @public
  */
 export interface ThemeColorButtonStates {
-  enabled: ThemeColorButtonState
-  hovered: ThemeColorButtonState
-  pressed: ThemeColorButtonState
-  selected: ThemeColorButtonState
-  disabled: ThemeColorButtonState
+  enabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+  disabled: ThemeColorGenericState
 }
 
 /**

package/src/theme/system/color/card.ts

@@ -0,0 +1,18 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export type ThemeColorCardState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export interface ThemeColorCard {
+  enabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+}

package/src/theme/system/color/index.ts

@@ -0,0 +1,20 @@
+export * from './_constants'
+export * from './_helpers'
+export * from './_system'
+
+//
+export * from './_generic'
+export * from './avatar'
+export * from './badge'
+export * from './base'
+export * from './button'
+export * from './card'
+export * from './input'
+export * from './kbd'
+export * from './selectable'
+export * from './syntax'
+
+// deprecated
+export * from './_deprecated/muted'
+export * from './_deprecated/solid'
+export * from './_deprecated/spot'

package/src/theme/{lib/theme/color/input/types.ts → system/color/input.ts}

@@ -1,7 +1,10 @@
+import {ThemeColorBlendModeKey} from './_system'
+
 /**
  * @public
  */
 export interface ThemeColorInputState {
+  _blend?: ThemeColorBlendModeKey
   bg: string
   bg2: string
   fg: string

package/src/theme/system/color/kbd.ts

@@ -0,0 +1,8 @@
+import {ThemeColorBlendModeKey} from './_system'
+
+export interface ThemeColorKBD {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  fg: string
+  border: string
+}

package/src/theme/{lib/theme/color/selectable/types.ts → system/color/selectable.ts}

@@ -1,4 +1,4 @@
-import {ThemeColorGenericState} from '../_generic'
+import {ThemeColorGenericState} from './_generic'
 
 /**
  * @deprecated Use `ThemeColorGenericState` instead.

package/src/theme/{lib/theme → system}/index.ts

@@ -1,7 +1,8 @@
+export * from './_system'
+
 export * from './avatar'
 export * from './color'
 export * from './fonts'
 export * from './input'
 export * from './layer'
 export * from './shadow'
-export * from './theme'

package/src/theme/{lib/theme → system}/input.ts

@@ -1,4 +1,4 @@
-import {FocusRing} from '../../types'
+import {ThemeFocusRing} from './_system'
 
 /**
  * @public
@@ -6,12 +6,12 @@ import {FocusRing} from '../../types'
 export interface ThemeInput {
   checkbox: {
     size: number
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
   radio: {
     size: number
     markSize: number
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
   switch: {
     width: number
@@ -19,15 +19,15 @@ export interface ThemeInput {
     padding: number
     transitionDurationMs: number
     transitionTimingFunction: string
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
   border: {
     width: number
   }
   select: {
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
   text: {
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
 }

package/src/theme/system/shadow.ts

@@ -0,0 +1,24 @@
+/**
+ * @public
+ */
+export type ThemeBoxShadow = [
+  // offsetX, offsetY, blurRadius, spreadRadius
+  number,
+  number,
+  number,
+  number,
+]
+
+/**
+ * @deprecated Use `ThemeBoxShadow` instead
+ */
+export type BoxShadow = ThemeBoxShadow
+
+/**
+ * @public
+ */
+export interface ThemeShadow {
+  umbra: ThemeBoxShadow
+  penumbra: ThemeBoxShadow
+  ambient: ThemeBoxShadow
+}

package/src/theme/themes/studio/config.ts

@@ -0,0 +1,69 @@
+import {RootTheme} from '../../system'
+
+const STROKE_WIDTH = 1
+const OUTLINE_WIDTH = 0.5
+
+export const config: Omit<RootTheme, 'color' | 'fonts'> = {
+  avatar: {
+    sizes: [
+      {distance: -3, size: 19},
+      {distance: -6, size: 31},
+      {distance: -9, size: 51},
+    ],
+    focusRing: {offset: 0, width: 1},
+  },
+  button: {
+    textWeight: 'medium',
+    border: {width: STROKE_WIDTH},
+    focusRing: {offset: -1, width: 2},
+  },
+  card: {
+    border: {width: STROKE_WIDTH},
+    focusRing: {offset: -1, width: 1},
+    shadow: {outline: OUTLINE_WIDTH},
+  },
+  container: [480, 640, 960, 1280, 1600, 1920],
+  focusRing: {
+    offset: -1,
+    width: 1,
+  },
+  media: [360, 600, 900, 1200, 1800, 2400],
+  radius: [0, 1, 3, 6, 9, 12, 21],
+  shadows: [
+    null,
+    {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
+    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
+    {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
+    {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
+    {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
+  ],
+  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
+  input: {
+    border: {
+      width: STROKE_WIDTH,
+    },
+    checkbox: {
+      size: 17,
+      focusRing: {offset: -1, width: 1},
+    },
+    radio: {
+      size: 17,
+      markSize: 9,
+      focusRing: {offset: -1, width: 1},
+    },
+    switch: {
+      width: 21,
+      height: 13,
+      padding: 2,
+      transitionDurationMs: 150,
+      transitionTimingFunction: 'ease-out',
+      focusRing: {offset: 1, width: 1},
+    },
+    select: {
+      focusRing: {offset: -1, width: 1},
+    },
+    text: {
+      focusRing: {offset: -1, width: 1},
+    },
+  },
+}

package/src/theme/{studioTheme → themes/studio}/fonts.ts

@@ -1,4 +1,4 @@
-import {ThemeFonts} from '../lib/theme'
+import {ThemeFonts} from '../../system'
 
 export const fonts: ThemeFonts = {
   code: {
@@ -11,43 +11,43 @@ export const fonts: ThemeFonts = {
     },
     sizes: [
       {
-        ascenderHeight: 3,
-        descenderHeight: 3,
+        ascenderHeight: 4,
+        descenderHeight: 4,
         fontSize: 10,
         iconSize: 17,
-        lineHeight: 13,
+        lineHeight: 15,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 4,
-        descenderHeight: 4,
+        ascenderHeight: 5,
+        descenderHeight: 5,
         fontSize: 13,
         iconSize: 21,
-        lineHeight: 17,
+        lineHeight: 19,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 5,
-        descenderHeight: 5,
+        ascenderHeight: 6,
+        descenderHeight: 6,
         fontSize: 16,
         iconSize: 25,
-        lineHeight: 21,
+        lineHeight: 23,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 6,
-        descenderHeight: 6,
+        ascenderHeight: 7,
+        descenderHeight: 7,
         fontSize: 19,
         iconSize: 29,
-        lineHeight: 25,
+        lineHeight: 27,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 7,
-        descenderHeight: 7,
+        ascenderHeight: 8,
+        descenderHeight: 8,
         fontSize: 22,
         iconSize: 33,
-        lineHeight: 29,
+        lineHeight: 31,
         letterSpacing: 0,
       },
     ],
@@ -63,51 +63,51 @@ export const fonts: ThemeFonts = {
     },
     sizes: [
       {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 12,
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
         iconSize: 17,
-        lineHeight: 17,
+        lineHeight: 19,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 5,
-        descenderHeight: 5,
+        ascenderHeight: 6,
+        descenderHeight: 6,
         fontSize: 16,
         iconSize: 25,
-        lineHeight: 21,
+        lineHeight: 23,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 6,
-        descenderHeight: 6,
+        ascenderHeight: 7,
+        descenderHeight: 7,
         fontSize: 21,
         iconSize: 33,
-        lineHeight: 27,
+        lineHeight: 29,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 7,
-        descenderHeight: 7,
+        ascenderHeight: 8,
+        descenderHeight: 8,
         fontSize: 27,
         iconSize: 41,
-        lineHeight: 33,
+        lineHeight: 35,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 8,
-        descenderHeight: 8,
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
         fontSize: 33,
         iconSize: 49,
-        lineHeight: 39,
+        lineHeight: 41,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 9,
-        descenderHeight: 9,
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
         fontSize: 38,
         iconSize: 53,
-        lineHeight: 45,
+        lineHeight: 47,
         letterSpacing: 0,
       },
     ],
@@ -175,43 +175,43 @@ export const fonts: ThemeFonts = {
     },
     sizes: [
       {
-        ascenderHeight: 3,
-        descenderHeight: 3,
+        ascenderHeight: 4,
+        descenderHeight: 4,
         fontSize: 10,
         iconSize: 17,
-        lineHeight: 13,
+        lineHeight: 15,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 4,
-        descenderHeight: 4,
+        ascenderHeight: 5,
+        descenderHeight: 5,
         fontSize: 13,
         iconSize: 21,
-        lineHeight: 17,
+        lineHeight: 19,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 5,
-        descenderHeight: 5,
+        ascenderHeight: 6,
+        descenderHeight: 6,
         fontSize: 16,
         iconSize: 25,
-        lineHeight: 21,
+        lineHeight: 23,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 6,
-        descenderHeight: 6,
+        ascenderHeight: 7.5,
+        descenderHeight: 6.5,
         fontSize: 19,
         iconSize: 29,
-        lineHeight: 25,
+        lineHeight: 27,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 7,
-        descenderHeight: 7,
+        ascenderHeight: 8.5,
+        descenderHeight: 7.5,
         fontSize: 22,
         iconSize: 33,
-        lineHeight: 29,
+        lineHeight: 31,
         letterSpacing: 0,
       },
     ],

package/src/theme/themes/studio/index.ts

@@ -0,0 +1 @@
+export * from './studioTheme'

package/src/theme/themes/studio/studioTheme.test.ts

@@ -0,0 +1,27 @@
+import {getContrastRatio} from '../../build'
+import {studioTheme} from './studioTheme'
+
+const AA_MIN = 4.5
+
+it('should …', () => {
+  expect(
+    getContrastRatio(
+      studioTheme.color.light.default.base.bg,
+      studioTheme.color.light.default.base.fg,
+    ),
+  ).toBeGreaterThan(AA_MIN)
+
+  expect(
+    getContrastRatio(
+      studioTheme.color.light.default.card.enabled.bg,
+      studioTheme.color.light.default.card.enabled.fg,
+    ),
+  ).toBeGreaterThan(AA_MIN)
+
+  expect(
+    getContrastRatio(
+      studioTheme.color.light.default.card.enabled.bg,
+      studioTheme.color.light.default.card.enabled.muted.fg,
+    ),
+  ).toBeGreaterThan(AA_MIN)
+})

package/src/theme/themes/studio/studioTheme.ts

@@ -0,0 +1,8 @@
+import {buildTheme} from '../../build'
+import {config} from './config'
+import {fonts} from './fonts'
+
+/**
+ * @public
+ */
+export const studioTheme = buildTheme({...config, fonts})

package/src/primitives/badge/styles.ts

@@ -1,20 +0,0 @@
-import {ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
-import {BadgeStyleProps} from './types'
-
-export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {
-  const {$mode, $tone, theme} = props
-  const palette = theme.sanity.color[$mode === 'outline' ? 'muted' : 'solid']
-  const color = palette[$tone] || palette.default
-
-  return {
-    backgroundColor: color.enabled.bg,
-    color: color.enabled.fg,
-    boxShadow: `inset 0 0 0 1px ${color.enabled.border}`,
-    cursor: 'default',
-
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
-  }
-}

package/src/primitives/popover/popoverArrow.tsx

@@ -1,76 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {DEFAULT_POPOVER_ARROW_HEIGHT, DEFAULT_POPOVER_ARROW_WIDTH} from './constants'
-
-const Root = styled.div`
-  position: absolute;
-  pointer-events: none;
-  width: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
-  height: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    display: block;
-    transform-origin: ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px;
-  }
-
-  [data-placement^='top'] > & {
-    bottom: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
-  }
-
-  [data-placement^='right'] > & {
-    left: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
-
-    & > svg {
-      transform: rotate(90deg);
-    }
-  }
-
-  [data-placement^='left'] > & {
-    right: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
-
-    & > svg {
-      transform: rotate(-90deg);
-    }
-  }
-
-  [data-placement^='bottom'] > & {
-    top: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
-
-    & > svg {
-      transform: rotate(180deg);
-    }
-  }
-`
-
-const BorderPath = styled.path`
-  fill: var(--card-shadow-outline-color);
-`
-
-const ShapePath = styled.path`
-  fill: var(--card-bg-color);
-`
-
-export const PopoverArrow = forwardRef(function PopoverArrow(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <Root data-ui="Popover__arrow" {...props} ref={ref}>
-      <svg
-        width={DEFAULT_POPOVER_ARROW_WIDTH}
-        height={DEFAULT_POPOVER_ARROW_HEIGHT}
-        viewBox="0 0 27 11"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <BorderPath d="M1.18708 1C3.29803 1.0011 5.29585 1.95479 6.62414 3.59561L11.1683 9.20895C12.369 10.6922 14.631 10.6922 15.8317 9.20894L20.3759 3.59561C21.7042 1.95478 23.702 1.0011 25.8129 1H21.9436C21.0533 1.49255 20.2545 2.15618 19.5986 2.96641L15.0545 8.57975C14.254 9.56855 12.746 9.56855 11.9455 8.57975L7.40139 2.96642C6.74548 2.15618 5.94673 1.49255 5.05643 1H1.18708Z" />
-        <ShapePath d="M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z" />
-      </svg>
-    </Root>
-  )
-})

package/src/primitives/tooltip/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/tooltip',
-  title: 'Tooltip',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./props')),
-    },
-  ],
-})

package/src/primitives/tooltip/constants.ts

@@ -1,16 +0,0 @@
-import {Placement} from '@floating-ui/react-dom'
-
-export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  top: ['bottom', 'left', 'right'],
-  'top-start': ['bottom-start', 'left-start', 'right-start'],
-  'top-end': ['bottom-end', 'left-end', 'right-end'],
-  bottom: ['top', 'left', 'right'],
-  'bottom-start': ['top-start', 'left-start', 'right-start'],
-  'bottom-end': ['top-end', 'left-end', 'right-end'],
-  left: ['right', 'top', 'bottom'],
-  'left-start': ['right-start', 'top-start', 'bottom-start'],
-  'left-end': ['right-end', 'top-end', 'bottom-end'],
-  right: ['left', 'top', 'bottom'],
-  'right-start': ['left-start', 'top-start', 'bottom-start'],
-  'right-end': ['left-end', 'top-end', 'bottom-end'],
-}