@sanity/ui 3.0.0-static.0 → 3.0.0-static.1

package/src/css/components/skeleton/types.ts

@@ -0,0 +1,24 @@
+import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
+import {RadiusStyleProps} from '../../styles/radius'
+import {ResponsiveProp} from '../../types'
+
+/** @beta */
+export interface SkeletonStyleProps extends RadiusStyleProps {
+  // visible?: boolean
+}
+
+export interface CodeSkeletonStyleProps {
+  size?: ResponsiveProp<FontCodeSize>
+}
+
+export interface HeadingSkeletonStyleProps {
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
+export interface LabelSkeletonStyleProps {
+  size?: ResponsiveProp<FontLabelSize>
+}
+
+export interface TextSkeletonStyleProps {
+  size?: ResponsiveProp<FontTextSize>
+}

package/src/css/components/toast/rules.ts

@@ -0,0 +1,68 @@
+// import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
+// import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
+// import {styled, keyframes, css} from '../../lib/styled'
+// import {Flex} from '../../primitives'
+// import {ThemeProps} from '../../styles'
+
+// const loadingAnimation = keyframes`
+//   0% {
+//     width: 0;
+//   }
+//   100% {
+//     width: 100%;
+//   }
+// `
+
+// const LOADING_BAR_HEIGHT = 2
+
+// export function rootStyles(
+//   props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
+// ): ReturnType<typeof css> {
+//   const {color} = getTheme_v2(props.theme)
+
+//   const loadingBarColor = color.button.default[props.tone].enabled.bg
+
+//   if (!props.$duration)
+//     return css`
+//       pointer-events: all;
+//       & > * {
+//         opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+//         will-change: opacity;
+//       }
+//     `
+
+//   return css`
+//     pointer-events: all;
+//     width: 100%;
+//     position: relative;
+//     overflow: hidden;
+//     overflow: clip;
+//     padding-bottom: ${LOADING_BAR_HEIGHT}px;
+//     &::before {
+//       content: '';
+//       position: absolute;
+//       bottom: 0px;
+//       height: ${LOADING_BAR_HEIGHT}px;
+//       background: ${loadingBarColor};
+//       animation-name: ${loadingAnimation};
+//       animation-duration: ${props.$duration}ms;
+//       animation-fill-mode: both;
+//     }
+
+//     & > * {
+//       opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+//       will-change: opacity;
+//     }
+//   `
+// }
+
+export {}
+
+// const ToastContainer = styled.div`
+//   box-sizing: border-box;
+//   position: absolute;
+//   right: 0;
+//   bottom: 0;
+//   max-width: 420px;
+//   width: 100%;
+// `

package/src/css/components/tree/rules.ts

@@ -50,3 +50,118 @@ export const treeRules: Rules = {
     },
   },
 }
+
+// const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
+
+// const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
+
+// const ToggleArrowText = styled(Text)`
+//   & > svg {
+//     transition: transform 100ms;
+//   }
+// `
+
+// import {getTheme_v2} from '@sanity/ui/theme'
+// import {css} from '../../lib/styled'
+// import {rem, ThemeProps} from '../../styles'
+// import {_cardColorStyle} from '../../styles/card'
+
+// export function treeItemRootStyle(): ReturnType<typeof css> {
+//   return css`
+//     &[role='none'] > [role='treeitem'] {
+//       outline: none;
+//       cursor: default;
+//       border-radius: 3px;
+
+//       background-color: var(--card-bg-color);
+//       color: var(--treeitem-fg-color);
+
+//       &:focus {
+//         position: relative;
+//       }
+//     }
+
+//     &[role='treeitem'] {
+//       outline: none;
+
+//       & > div {
+//         cursor: default;
+//         border-radius: 3px;
+
+//         background-color: var(--card-bg-color);
+//         color: var(--treeitem-fg-color);
+//       }
+
+//       &:focus > div {
+//         position: relative;
+//       }
+//     }
+//   `
+// }
+
+// export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
+//   const $tone = 'default'
+//   const {color} = getTheme_v2(props.theme)
+//   const tone = color.selectable[$tone]
+
+//   return css`
+//     &[role='none'] {
+//       & > [role='treeitem'] {
+//         ${_cardColorStyle(color, tone.enabled)}
+//       }
+
+//       &[data-selected] > [role='treeitem'] {
+//         ${_cardColorStyle(color, tone.pressed)}
+//       }
+
+//       @media (hover: hover) {
+//         &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
+//           ${_cardColorStyle(color, tone.hovered)}
+//         }
+
+//         & > [role='treeitem']:focus {
+//           ${_cardColorStyle(color, tone.selected)}
+//         }
+//       }
+//     }
+
+//     &[role='treeitem'] {
+//       & > [data-ui='TreeItem__box'] {
+//         ${_cardColorStyle(color, tone.enabled)}
+//       }
+
+//       &[data-selected] > [data-ui='TreeItem__box'] {
+//         ${_cardColorStyle(color, tone.pressed)}
+//       }
+
+//       @media (hover: hover) {
+//         &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
+//           ${_cardColorStyle(color, tone.hovered)}
+//         }
+
+//         &:focus > [data-ui='TreeItem__box'] {
+//           ${_cardColorStyle(color, tone.selected)}
+//         }
+//       }
+//     }
+//   `
+// }
+
+// export interface TreeItemBoxStyleProps {
+//   $level: number
+// }
+
+// export function treeItemBoxStyle(
+//   props: TreeItemBoxStyleProps & ThemeProps,
+// ): ReturnType<typeof css> {
+//   const {$level} = props
+//   const {space} = getTheme_v2(props.theme)
+
+//   return css`
+//     padding-left: ${rem(space[2] * $level)};
+
+//     &[data-as='a'] {
+//       text-decoration: none;
+//     }
+//   `
+// }

package/src/css/index.ts

@@ -5,6 +5,8 @@ export * from './composeClassNames'
 
 export * from './components/breadcrumbs'
 export * from './components/dialog'
+export * from './components/menu'
+export * from './components/skeleton'
 export * from './components/tree'
 
 export * from './primitives/avatar'
@@ -35,9 +37,11 @@ export * from './styles/gap/types'
 export * from './styles/flex/types'
 export * from './styles/flexItem/types'
 export * from './styles/font/types'
+export * from './styles/grid/types'
 export * from './styles/gridItem/types'
 export * from './styles/margin/types'
 export * from './styles/maxWidth/types'
+export * from './styles/overflow/types'
 export * from './styles/padding/types'
 export * from './styles/pointerEvents/types'
 export * from './styles/position/types'

package/src/css/primitives/box/box.ts

@@ -3,9 +3,11 @@ import {composeClassNames} from '../../composeClassNames'
 import {flex} from '../../styles/flex'
 import {flexItem} from '../../styles/flexItem'
 import {gap} from '../../styles/gap'
+import {grid} from '../../styles/grid'
 import {gridItem} from '../../styles/gridItem'
 import {margin} from '../../styles/margin'
 import {maxWidth} from '../../styles/maxWidth'
+import {overflow} from '../../styles/overflow'
 import {padding} from '../../styles/padding'
 import {pointerEvents} from '../../styles/pointerEvents'
 import {position} from '../../styles/position'
@@ -18,14 +20,16 @@ export function box(props: BoxStyleProps): string {
     'box',
     _resp(undefined, props.display),
     _resp(`h`, props.height),
-    _resp(`overflow`, props.overflow),
     _resp(`box`, props.sizing),
     flex(props),
     flexItem(props),
+    grid(props),
     gridItem(props),
     gap(props),
     margin(props),
     maxWidth(props),
+    props.outline && `outline-${props.outline}`,
+    overflow(props),
     padding(props),
     pointerEvents(props),
     position(props),

package/src/css/primitives/box/types.ts

@@ -1,9 +1,11 @@
+import {GridStyleProps} from '@sanity/ui/css'
 import {FlexStyleProps} from '../../styles/flex'
 import {FlexItemStyleProps} from '../../styles/flexItem'
 import {GapStyleProps} from '../../styles/gap'
 import {GridItemStyleProps} from '../../styles/gridItem'
 import {MarginStyleProps} from '../../styles/margin'
 import {MaxWidthStyleProps} from '../../styles/maxWidth'
+import {OverflowStyleProps} from '../../styles/overflow'
 import {PaddingStyleProps} from '../../styles/padding'
 import {PointerEventsStyleProps} from '../../styles/pointerEvents'
 import {PositionStyleProps} from '../../styles/position'
@@ -18,32 +20,29 @@ export type BoxSizing = 'content' | 'border'
 /**
  * @public
  */
-export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+export type Display = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
 
 /**
  * @public
  */
 export type BoxHeight = 'stretch' | 'fill'
 
-/**
- * @public
- */
-export type BoxOverflow = 'visible' | 'hidden' | 'auto'
-
 /** @public */
 export interface BoxStyleProps
   extends FlexStyleProps,
     FlexItemStyleProps,
     GapStyleProps,
+    GridStyleProps,
     GridItemStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
     WidthStyleProps {
-  display?: ResponsiveProp<BoxDisplay>
+  display?: ResponsiveProp<Display>
   height?: ResponsiveProp<BoxHeight>
-  overflow?: ResponsiveProp<BoxOverflow>
+  outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>
 }

package/src/css/primitives/card/rules.ts

@@ -55,21 +55,19 @@ export const cardRules: Rules = {
     '--card-skeleton-from-color': 'var(--color-skeleton-from)',
     '--card-skeleton-to-color': 'var(--color-skeleton-to)',
 
-    /*
-      '--card-bg-image': checkered
-        ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
-        : undefined,
-
-      '--card-bg-image': checkered
-        ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
-        : undefined,
-
-      '--card-bg2-color': color.muted.bg,
-      '--card-link-color': color.link.fg,
-      '--card-hairline-soft-color': color.border,
-      '--card-hairline-hard-color': color.border, */
+    '--card-bg2-color': `var(--color-muted-bg)`,
+    '--card-link-color': `var(--color-link-fg)`,
+    '--card-hairline-soft-color': `var(--color-border)`,
+    '--card-hairline-hard-color': `var(--color-border)`,
 
     '@nest': {
+      '&[data-checkered]': {
+        '--card-bg-image': `repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-muted-bg) 0% 50%)`,
+        'backgroundSize': `var(--space-3) var(--space-3)`,
+        'backgroundPosition': '50% 50%',
+        'backgroundImage': 'var(--card-bg-image)',
+      },
+
       '&[data-as="button"]': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
@@ -91,3 +89,153 @@ export const cardRules: Rules = {
     },
   },
 }
+
+// import {getTheme_v2} from '@sanity/ui/theme'
+// import {css} from '../../lib/styled'
+// // import {ThemeProps} from '../../styles'
+// // import {_cardColorStyle} from '../../styles/card'
+// // import {focusRingStyle} from '../../styles/focusRing'
+// import {CardStyleProps} from './types'
+// import {ThemeProps} from '../../_compat'
+// import {_cardColorStyle} from '../../_compat/styles/card'
+// import {focusRingStyle} from '../../_compat/styles/focusRing'
+
+// export function cardStyle(
+//   props: CardStyleProps & ThemeProps,
+// ): Array<ReturnType<typeof css> | (() => ReturnType<typeof css>)> {
+//   return [cardBaseStyle(props), cardColorStyle(props)]
+// }
+
+// export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
+//   const {$checkered} = props
+//   const {space} = getTheme_v2(props.theme)
+
+//   return css`
+//     ${$checkered &&
+//     css`
+//       background-size: ${space[3]}px ${space[3]}px;
+//       background-position: 50% 50%;
+//       background-image: var(--card-bg-image);
+//     `}
+
+//     &[data-as='button'] {
+//       -webkit-font-smoothing: inherit;
+//       appearance: none;
+//       outline: none;
+//       font: inherit;
+//       text-align: inherit;
+//       border: 0;
+//       width: -moz-available;
+//       width: -webkit-fill-available;
+//       width: stretch;
+//     }
+
+//     /* &:is(a) */
+//     &[data-as='a'] {
+//       outline: none;
+//       text-decoration: none;
+//     }
+
+//     /* &:is(pre) */
+//     &[data-as='pre'] {
+//       font: inherit;
+//     }
+//   `
+// }
+
+// export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
+//   const {$checkered, $focusRing, $muted} = props
+//   const {card, color, style} = getTheme_v2(props.theme)
+//   const border = {width: card.border.width, color: 'var(--card-border-color)'}
+
+//   return css`
+//     color-scheme: ${color._dark ? 'dark' : 'light'};
+
+//     ${_cardColorStyle(color, color, $checkered)}
+
+//     background-color: ${$muted ? 'var(--card-muted-bg-color)' : 'var(--card-bg-color)'};
+//     color: var(--card-fg-color);
+
+//     /* &:is(button) */
+//     &[data-as='button'] {
+//       --card-focus-ring-box-shadow: none;
+
+//       cursor: default;
+//       box-shadow: var(--card-focus-ring-box-shadow);
+
+//       &:disabled {
+//         ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+//       }
+
+//       &:not(:disabled) {
+//         &[data-pressed] {
+//           ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+//         }
+
+//         &[data-selected] {
+//           ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+//         }
+
+//         @media (hover: hover) {
+//           &:not([data-pressed]):not([data-selected]) {
+//             &[data-hovered],
+//             &:hover {
+//               ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+//             }
+
+//             &:active {
+//               ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+//             }
+//           }
+//         }
+
+//         &:focus-visible {
+//           --card-focus-ring-box-shadow: ${$focusRing
+//             ? focusRingStyle({base: color, border, focusRing: card.focusRing})
+//             : undefined};
+//         }
+//       }
+//     }
+
+//     /* &:is(a) */
+//     &[data-as='a'] {
+//       cursor: pointer;
+//       box-shadow: var(--card-focus-ring-box-shadow);
+
+//       &[data-disabled] {
+//         ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+//       }
+
+//       &:not([data-disabled]) {
+//         &[data-pressed] {
+//           ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+//         }
+
+//         &[data-selected] {
+//           ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+//         }
+
+//         @media (hover: hover) {
+//           &:not([data-pressed]):not([data-selected]) {
+//             &[data-hovered],
+//             &:hover {
+//               ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+//             }
+
+//             &:active {
+//               ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+//             }
+//           }
+//         }
+
+//         &:focus-visible {
+//           --card-focus-ring-box-shadow: ${$focusRing
+//             ? focusRingStyle({base: color, border, focusRing: card.focusRing})
+//             : undefined};
+//         }
+//       }
+//     }
+
+//     ${style?.card?.root}
+//   `
+// }