@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.28

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

@@ -1,11 +1,9 @@
-import {RootTheme} from '../types'
-import {color} from './color'
-import {fonts} from './fonts'
+import {RootTheme} from '../../system'
 
-/**
- * @public
- */
-export const studioTheme: RootTheme = {
+const STROKE_WIDTH = 1
+const OUTLINE_WIDTH = 0.5
+
+export const config: Omit<RootTheme, 'color' | 'fonts'> = {
   avatar: {
     sizes: [
       {distance: -3, size: 19},
@@ -16,18 +14,19 @@ export const studioTheme: RootTheme = {
   },
   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},
   },
-  color,
-  container: [320, 640, 960, 1280, 1600, 1920],
+  container: [480, 640, 960, 1280, 1600, 1920],
   focusRing: {
     offset: 1,
     width: 2,
   },
-  fonts,
   media: [360, 600, 900, 1200, 1800, 2400],
   radius: [0, 1, 3, 6, 9, 12, 21],
   shadows: [
@@ -40,6 +39,9 @@ export const studioTheme: RootTheme = {
   ],
   space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
   input: {
+    border: {
+      width: STROKE_WIDTH,
+    },
     checkbox: {
       size: 17,
       focusRing: {offset: -1, width: 1},
@@ -57,9 +59,6 @@ export const studioTheme: RootTheme = {
       transitionTimingFunction: 'ease-out',
       focusRing: {offset: 1, width: 1},
     },
-    border: {
-      width: 1,
-    },
     select: {
       focusRing: {offset: -1, width: 1},
     },
@@ -67,16 +66,4 @@ export const studioTheme: RootTheme = {
       focusRing: {offset: -1, width: 1},
     },
   },
-  // styles: {
-  //   button: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  //   card: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  // },
 }

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,22 +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 {
-    '--card-fg-color': color.enabled.fg,
-
-    backgroundColor: color.enabled.bg2,
-    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/tooltipArrow.tsx

@@ -1,89 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-
-const Root = styled.div`
-  position: absolute;
-  pointer-events: none;
-  width: 15px;
-  height: 15px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    display: block;
-    transform-origin: 7.5px 7.5px;
-  }
-
-  /* position: absolute;
-  width: 15px;
-  height: 15px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    &:not([hidden]) {
-      display: block;
-    }
-    transform-origin: 7.5px 7.5px;
-  } */
-
-  [data-placement^='top'] > & {
-    bottom: -27px;
-  }
-
-  [data-placement^='right'] > & {
-    left: -27px;
-
-    & > svg {
-      transform: rotate(90deg);
-    }
-  }
-
-  [data-placement^='left'] > & {
-    right: -27px;
-
-    & > svg {
-      transform: rotate(-90deg);
-    }
-  }
-
-  [data-placement^='bottom'] > & {
-    top: -27px;
-
-    & > svg {
-      transform: rotate(180deg);
-    }
-  }
-`
-
-const Border = styled.path`
-  fill: var(--card-shadow-outline-color);
-`
-
-const Shape = styled.path`
-  fill: var(--card-bg-color);
-`
-
-interface TooltipArrowProps {}
-
-export const TooltipArrow = forwardRef(function TooltipArrow(
-  props: TooltipArrowProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {...restProps} = props
-
-  return (
-    <Root data-ui="Tooltip__arrow" {...restProps} ref={ref}>
-      <svg width="15" height="15" viewBox="0 0 15 15">
-        <Border d="M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z" />
-        <Shape d="M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z" />
-      </svg>
-    </Root>
-  )
-})