@sanity/ui 1.8.2 → 2.0.0-alpha.2

package/src/primitives/switch/styles.ts

@@ -36,12 +36,13 @@ export function switchInputStyles(): ReturnType<typeof css> {
 /* Representation */
 export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
-  const {focusRing, input} = theme.sanity
-  const color = theme.sanity.color.button.default
+  const {input} = theme.sanity
+  const {focusRing} = input.switch
+  const color = theme.sanity.color.input
 
   return css`
-    --switch-bg-color: ${color.default.enabled.bg};
-    --switch-fg-color: ${color.default.enabled.fg};
+    --switch-bg-color: ${color.default.enabled.border};
+    --switch-fg-color: ${color.default.enabled.bg};
     --switch-box-shadow: none;
 
     &:not([hidden]) {
@@ -78,25 +79,30 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
     }
 
     input:checked + && {
-      --switch-bg-color: ${color.positive.enabled.bg};
-      --switch-fg-color: ${color.positive.enabled.fg};
+      --switch-bg-color: var(--card-focus-ring-color);
+      --switch-fg-color: ${color.default.enabled.bg};
     }
 
     @media (hover: hover) {
       input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.default.hovered.bg};
-        --switch-fg-color: ${color.default.hovered.fg};
+        --switch-bg-color: ${color.default.hovered.border};
+        --switch-fg-color: ${color.default.hovered.bg};
       }
 
       input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.positive.hovered.bg};
-        --switch-fg-color: ${color.positive.hovered.fg};
+        --switch-bg-color: var(--card-focus-ring-color);
+        --switch-fg-color: ${color.default.enabled.bg};
       }
     }
 
     input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.default.disabled.bg};
-      --switch-fg-color: ${color.default.disabled.fg};
+      --switch-bg-color: ${color.default.disabled.border};
+      --switch-fg-color: ${color.default.disabled.bg};
+    }
+
+    input[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.default.readOnly.border};
+      --switch-fg-color: ${color.default.readOnly.bg};
     }
   `
 }
@@ -149,6 +155,7 @@ export function switchThumbStyles(
     transition-timing-function: ${input.switch.transitionTimingFunction};
     background: var(--switch-fg-color);
     transform: translate3d(0, 0, 0);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
 
     ${checked &&
     css`

package/src/primitives/text/styles.ts

@@ -62,6 +62,7 @@ export function textBaseStyle(
 
     & [data-sanity-icon] {
       vertical-align: baseline;
+      color: var(--card-icon-color);
     }
   `
 }

package/src/primitives/textInput/textInput.tsx

@@ -17,6 +17,7 @@ import {
   textInputRootStyle,
 } from '../../styles/internal'
 import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {Radius} from '../../types'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
 import {Card} from '../card'
@@ -64,7 +65,7 @@ export interface TextInputProps {
   onClear?: () => void
   padding?: number | number[]
   prefix?: React.ReactNode
-  radius?: number | number[]
+  radius?: Radius | Radius[]
   space?: number | number[]
   suffix?: React.ReactNode
   type?: TextInputType

package/src/primitives/tooltip/tooltip.tsx

@@ -81,7 +81,7 @@ export const Tooltip = forwardRef(function Tooltip(
     disabled,
     fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
-    padding,
+    padding = 3,
     placement: placementProp = 'bottom',
     portal,
     scheme,
@@ -303,7 +303,7 @@ export const Tooltip = forwardRef(function Tooltip(
         data-ui="Tooltip__card"
         data-placement={placement}
         padding={padding}
-        radius={2}
+        radius={3}
         scheme={scheme}
         shadow={shadow}
       >

package/src/primitives/types.ts

@@ -17,6 +17,7 @@ import {
   GridItemRow,
   GridItemRowEnd,
   GridItemRowStart,
+  Radius,
 } from '../types'
 
 /**
@@ -113,7 +114,7 @@ export interface ResponsivePaddingProps {
  * @public
  */
 export interface ResponsiveRadiusProps {
-  radius?: number | number[]
+  radius?: Radius | Radius[]
 }
 
 /**
@@ -131,7 +132,7 @@ export interface ResponsiveWidthProps {
 }
 
 /**
- * @beta
+ * @public
  */
 export type Delay =
   | number

package/src/styles/colorVars/colorVarsStyle.ts

@@ -17,9 +17,11 @@ export function _colorVarsStyle(
     '--card-shadow-penumbra-color': base.shadow.penumbra,
     '--card-shadow-ambient-color': base.shadow.ambient,
     '--card-focus-ring-color': base.focusRing,
+    '--card-icon-color': color.iconColor,
 
     // Card
     '--card-bg-color': color.bg,
+    '--card-bg2-color': color.bg2,
     '--card-bg-image': checkered
       ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.bg2 || color.bg} 0% 50%)`
       : undefined,

package/src/styles/focusRing/index.ts

@@ -1,3 +1,5 @@
+import {FocusRing} from '../../theme'
+
 export function focusRingBorderStyle(border: {color: string; width: number}): string {
   return `inset 0 0 0 ${border.width}px ${border.color}`
 }
@@ -5,7 +7,7 @@ export function focusRingBorderStyle(border: {color: string; width: number}): st
 export function focusRingStyle(opts: {
   base?: {bg: string}
   border?: {color: string; width: number}
-  focusRing: {offset: number; width: number}
+  focusRing: FocusRing
 }): string {
   const {base, border, focusRing} = opts
   const focusRingOutsetWidth = focusRing.offset + focusRing.width

package/src/styles/input/textInputStyle.ts

@@ -130,7 +130,8 @@ export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
   const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
-  const {focusRing, input} = theme.sanity
+  const {input} = theme.sanity
+  const {focusRing} = input.text
   const color = theme.sanity.color.input
 
   return css`

package/src/styles/radius/radiusStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from '../../types/styled'
-import {rem, _responsive} from '../helpers'
+import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveRadiusStyleProps} from './types'
 
@@ -7,7 +7,17 @@ export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeP
   const {theme} = props
   const {media, radius} = theme.sanity
 
-  return _responsive(media, props.$radius, (radiusIndex) => ({
-    borderRadius: rem(radius[radiusIndex]),
-  }))
+  return _responsive(media, props.$radius, (value) => {
+    let borderRadius: string | 0 = 0
+
+    if (typeof value === 'number') {
+      borderRadius = rem(radius[value])
+    }
+
+    if (value === 'full') {
+      borderRadius = '9999px'
+    }
+
+    return {borderRadius}
+  })
 }

package/src/styles/radius/types.ts

@@ -1,6 +1,8 @@
+import {Radius} from '../../types'
+
 /**
  * @internal
  */
 export interface ResponsiveRadiusStyleProps {
-  $radius: number[]
+  $radius: Radius[]
 }

package/src/theme/lib/theme/avatar.ts

@@ -1,3 +1,5 @@
+import {FocusRing} from '../../types'
+
 /**
  * @public
  */
@@ -6,4 +8,5 @@ export interface ThemeAvatar {
     distance: number
     size: number
   }[]
+  focusRing: FocusRing
 }

package/src/theme/lib/theme/color/_generic/types.ts

@@ -9,6 +9,7 @@ export interface ThemeColorGenericState {
   bg2?: string
   border: string
   fg: string
+  iconColor: string
   muted: {
     fg: string
   }

package/src/theme/lib/theme/color/color.test.ts

@@ -39,6 +39,7 @@ describe('color', () => {
         bg2: 'hsl(0, 0%, 95%)',
         border: 'hsl(0, 0%, 70%)',
         fg: 'hsl(0, 0%, 20%)',
+        iconColor: 'hsl(0, 0%, 20%)',
         muted: {
           fg: 'hsl(0, 0%, 0%)',
         },

package/src/theme/lib/theme/color/defaults.ts

@@ -158,6 +158,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
         bg2: dark ? color.light : color.dark,
         border: dark ? color.lighter : color.darker,
         fg: dark ? color.darkest : color.lightest,
+        iconColor: dark ? color.darkest : color.lightest,
         muted: {
           fg: black,
         },
@@ -180,6 +181,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
       bg2: color.base,
       border: dark ? color.light : color.dark,
       fg: dark ? color.darkest : color.lightest,
+      iconColor: dark ? color.darkest : color.lightest,
       muted: {
         fg: black,
       },
@@ -206,6 +208,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
         bg2: dark ? color.darker : color.lighter,
         border: dark ? color.lighter : color.darker,
         fg: dark ? color.lightest : color.darkest,
+        iconColor: dark ? color.lightest : color.darkest,
         muted: {
           fg: black,
         },
@@ -228,6 +231,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
       bg2: dark ? color.darkest : color.lightest,
       border: dark ? color.darker : color.lighter,
       fg: dark ? color.lighter : color.darker,
+      iconColor: dark ? color.lighter : color.darker,
       muted: {
         fg: black,
       },
@@ -253,6 +257,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
           bg: 'transparent',
           bg2: 'transparent',
           fg: muted.enabled.fg,
+          iconColor: muted.enabled.fg,
           border: 'transparent',
           muted: {
             fg: black,
@@ -273,6 +278,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
           bg: muted.enabled.bg,
           bg2: muted.enabled.bg,
           fg: muted.hovered.fg,
+          iconColor: muted.hovered.fg,
           border: 'transparent',
           muted: {
             fg: black,
@@ -306,6 +312,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
       bg: black,
       bg2: black,
       fg: black,
+      iconColor: black,
       border: black,
       muted: {
         fg: black,
@@ -327,6 +334,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
   input: () => {
     return {
       bg: black,
+      bg2: black,
       fg: black,
       border: black,
       placeholder: black,

package/src/theme/lib/theme/color/input/types.ts

@@ -3,6 +3,7 @@
  */
 export interface ThemeColorInputState {
   bg: string
+  bg2: string
   fg: string
   border: string
   placeholder: string

package/src/theme/lib/theme/input.ts

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

package/src/theme/lib/theme/theme.ts

@@ -1,3 +1,4 @@
+import {FocusRing} from '../../types'
 import {ThemeAvatar} from './avatar'
 import {ThemeColorSchemes} from './color'
 import {ThemeFonts, ThemeFontWeightKey} from './fonts'
@@ -15,14 +16,20 @@ export interface BaseTheme<
   avatar: ThemeAvatar
   button: {
     textWeight: ThemeFontWeightKey
+    focusRing: FocusRing
+  }
+  card: {
+    focusRing: FocusRing
   }
   color: ThemeColorSchemes
   container: number[]
+  /** @deprecated Use component-specific `focusRing` values instead */
   focusRing: {
     offset: number
     width: number
   }
   fonts: ThemeFonts
+  input: ThemeInput
   /**
    * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
    * @beta
@@ -32,6 +39,5 @@ export interface BaseTheme<
   radius: number[]
   shadows: Array<ThemeShadow | null>
   space: number[]
-  input: ThemeInput
   styles?: Styles
 }