@sanity/ui 2.0.0-alpha.6 → 2.0.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.8",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/components/menu/menuGroup.tsx

@@ -34,7 +34,7 @@ export function MenuGroup(
   const {
     as = 'button',
     children,
-    fontSize,
+    fontSize = 1,
     icon,
     onClick,
     padding = 3,
@@ -176,28 +176,24 @@ export function MenuGroup(
         tabIndex={-1}
         type={as === 'button' ? 'button' : undefined}
       >
-        <Box padding={padding}>
-          <Flex>
-            {icon && (
-              <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
-              </Text>
-            )}
-
-            <Box flex={1} marginLeft={icon ? space : undefined}>
-              <Text size={fontSize} textOverflow="ellipsis">
-                {text}
-              </Text>
-            </Box>
-
-            <Box marginLeft={space}>
-              <Text size={fontSize}>
-                <ChevronRightIcon />
-              </Text>
-            </Box>
-          </Flex>
-        </Box>
+        <Flex gap={space} padding={padding}>
+          {icon && (
+            <Text size={fontSize}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </Text>
+          )}
+
+          <Box flex={1}>
+            <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+              {text}
+            </Text>
+          </Box>
+
+          <Text size={fontSize}>
+            <ChevronRightIcon />
+          </Text>
+        </Flex>
       </Selectable>
     </Popover>
   )

package/src/components/menu/menuItem.tsx

@@ -122,7 +122,7 @@ export const MenuItem = forwardRef(function MenuItem(
       forwardedAs={as}
       $radius={useArrayProp(radius)}
       $padding={useArrayProp(0)}
-      $tone={tone}
+      $tone={disabled ? 'default' : tone}
       $scheme={scheme}
       disabled={disabled}
       onClick={handleClick}
@@ -134,43 +134,34 @@ export const MenuItem = forwardRef(function MenuItem(
       type={as === 'button' ? 'button' : undefined}
     >
       {(icon || text || iconRight) && (
-        <Box as="span" {...paddingProps}>
-          <Flex as="span">
-            {icon && (
-              <Text size={fontSize}>
-                {isValidElement(icon) && icon}
-                {isValidElementType(icon) && createElement(icon)}
-              </Text>
-            )}
+        <Flex as="span" gap={space} align="center" {...paddingProps}>
+          {icon && (
+            <Text size={fontSize}>
+              {isValidElement(icon) && icon}
+              {isValidElementType(icon) && createElement(icon)}
+            </Text>
+          )}
 
-            {text && (
-              <Box
-                flex={1}
-                marginLeft={icon ? space : undefined}
-                marginRight={iconRight ? space : undefined}
-              >
-                <Text size={fontSize} textOverflow="ellipsis">
-                  {text}
-                </Text>
-              </Box>
-            )}
+          {text && (
+            <Box flex={1}>
+              <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+                {text}
+              </Text>
+            </Box>
+          )}
 
-            {hotkeys && (
-              <Box marginLeft={space} style={{marginTop: -4, marginBottom: -4}}>
-                <Hotkeys fontSize={fontSize} keys={hotkeys} />
-              </Box>
-            )}
+          {hotkeys && (
+            <Hotkeys fontSize={fontSize} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
+          )}
 
-            {iconRight && (
-              <Text size={fontSize}>
-                {isValidElement(iconRight) && iconRight}
-                {isValidElementType(iconRight) && createElement(iconRight)}
-              </Text>
-            )}
-          </Flex>
-        </Box>
+          {iconRight && (
+            <Text size={fontSize}>
+              {isValidElement(iconRight) && iconRight}
+              {isValidElementType(iconRight) && createElement(iconRight)}
+            </Text>
+          )}
+        </Flex>
       )}
-
       {children && (
         <Box as="span" {...paddingProps}>
           {children}

package/src/primitives/_selectable/style.ts

@@ -1,9 +1,7 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {
-  _colorVarStyleActive,
   _colorVarStyleHover,
-  _colorVarStyleSelected,
   _selectableVarStyle,
   _selectableVarStyleDisabled,
 } from '../../styles/colorVars'
@@ -47,7 +45,7 @@ export function selectableColorStyle(
 
   return css`
     ${$tone !== 'default' && createCssVars($scheme, theme.sanity.color.tones, $tone)}
-    ${_selectableVarStyle()}
+    ${_selectableVarStyle($tone)}
 
     background-color: ${cssVars.mutable['bg-color']};
     color: ${cssVars[$tone]['text-secondary']};
@@ -61,12 +59,12 @@ export function selectableColorStyle(
 
       &:not(:disabled) {
         &[aria-pressed='true'] {
-          ${_colorVarStyleActive()}
+          ${_colorVarStyleHover()}
         }
 
         &[data-selected],
         &[aria-selected='true'] > & {
-          ${_colorVarStyleSelected()}
+          ${_colorVarStyleHover()}
         }
 
         @media (hover: hover) {
@@ -77,7 +75,7 @@ export function selectableColorStyle(
             }
 
             &:active {
-              ${_colorVarStyleActive()}
+              ${_colorVarStyleHover()}
             }
           }
         }
@@ -92,11 +90,11 @@ export function selectableColorStyle(
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarStyleActive()}
+          ${_colorVarStyleHover()}
         }
 
         &[data-selected] {
-          ${_colorVarStyleSelected()}
+          ${_colorVarStyleHover()}
         }
 
         @media (hover: hover) {
@@ -105,9 +103,8 @@ export function selectableColorStyle(
             &:hover {
               ${_colorVarStyleHover()}
             }
-
             &:active {
-              ${_colorVarStyleActive()}
+              ${_colorVarStyleHover()}
             }
           }
         }

package/src/primitives/badge/badge.tsx

@@ -4,7 +4,7 @@ import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
-import {Label} from '../label'
+import {Text} from '../text'
 import {ResponsiveRadiusProps} from '../types'
 import {badgeStyle} from './styles'
 import {BadgeStyleProps} from './types'
@@ -51,7 +51,9 @@ export const Badge = forwardRef(function Badge(
       padding={useArrayProp(padding)}
       ref={ref}
     >
-      <Label size={fontSize}>{children}</Label>
+      <Text size={fontSize} weight="medium">
+        {children}
+      </Text>
     </Root>
   )
 })

package/src/primitives/badge/styles.ts

@@ -1,3 +1,4 @@
+import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
 import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 import {CSSObject} from '../../types/styled'
 import {BadgeStyleProps} from './types'
@@ -6,9 +7,8 @@ export function badgeStyle(props: BadgeStyleProps): CSSObject {
   const {$mode, $tone} = props
 
   return {
-    // backgroundColor: color.enabled.bg,
     backgroundColor: $mode === 'outline' ? cssVars[$tone]['bg-base'] : cssVars[$tone]['bg-tint'],
-    color: cssVars[$tone]['text-secondary'],
+    [mutableCardVariables['fg-color']]: cssVars[$tone]['text-secondary'],
     boxShadow: $mode === 'outline' ? `inset 0 0 0 1px ${cssVars[$tone]['border-base']}` : undefined,
     cursor: 'default',
 

package/src/styles/colorVars/colorVarsStyle.ts

@@ -1,4 +1,4 @@
-import {cssVars} from '../../theme'
+import {ThemeColorToneKey, cssVars} from '../../theme'
 import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
 import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
 import {CSSObject} from '../../types/styled'
@@ -14,8 +14,8 @@ export function _colorVarStyleDisabled(checkered = false): CSSObject {
     [getToneCssVar('default', 'text-code')]: cssVars.default['text-secondary'],
     [getToneCssVar('default', 'text-primary')]: cssVars.default['text-secondary'],
 
-    [mutableCardVariables['fg-color']]: cssVars.primary['text-inactive'],
-    [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-inactive'],
+    [mutableCardVariables['fg-color']]: cssVars.primary['text-secondary'],
+    [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-secondary'],
     [mutableCardVariables['icon-color']]: cssVars.primary['border-base'],
     [mutableCardVariables['accent-color']]: cssVars.primary['base-bg-card'],
     [mutableCardVariables['bg-color']]: cssVars.primary['bg-tint'],
@@ -46,6 +46,7 @@ export function _colorVarStyleSelected(): CSSObject {
 export function _colorVarStyleHover(): CSSObject {
   return {
     [mutableCardVariables['bg-color']]: cssVars.default['bg-base-hover'],
+    [getToneCssVar('default', 'bg-tint')]: cssVars.default['bg-base-active'],
   }
 }
 
@@ -63,10 +64,11 @@ export function _colorVarStyleActive(): CSSObject {
  * @internal
  * Selectable needs to redefine bg-color and fg-color
  */
-export function _selectableVarStyle(): CSSObject {
+export function _selectableVarStyle(tone: ThemeColorToneKey): CSSObject {
   return {
     [mutableCardVariables['bg-color']]: 'inherit',
-    [mutableCardVariables['fg-color']]: cssVars.default['text-secondary'],
+    [mutableCardVariables['fg-color']]:
+      tone === 'default' ? cssVars.default['text-primary'] : cssVars.default['text-secondary'],
   }
 }
 

package/src/theme/lib/theme/color/_legacy/createColorTheme.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ * @deprecated Use studioTheme instead.
+ */
+export function createColorTheme(): null {
+  return null
+}

package/src/theme/lib/theme/color/_legacy/index.ts

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