@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/css/primitives/button/button.css.ts

@@ -0,0 +1,287 @@
+import {AVATAR_COLORS, type ButtonMode, ELEMENT_TONES, type ElementTone} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root: string = _style(layers.primitives, {
+  WebkitFontSmoothing: 'inherit',
+  alignItems: 'center',
+  appearance: 'none',
+  font: 'inherit',
+  outline: 'none',
+  userSelect: 'none',
+  textDecoration: 'none',
+  border: 0,
+  boxSizing: 'border-box',
+  padding: 0,
+  overflow: 'hidden',
+  margin: 0,
+  textAlign: 'left',
+  position: 'relative',
+  verticalAlign: 'top',
+  backgroundColor: vars.color.bg,
+  color: vars.color.fg,
+
+  //
+  transition:
+    'background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
+
+  selectors: {
+    '&::-moz-focus-inner': {
+      border: 0,
+      padding: 0,
+    },
+
+    '&:focus': {
+      outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
+      outlineOffset: vars.button.focusRing.offset,
+    },
+
+    '&:focus:not(:focus-visible)': {
+      outline: 'none',
+    },
+  },
+})
+
+export const modes: Record<ButtonMode, string> = {
+  default: _style(layers.primitives, {}),
+  ghost: _style(layers.primitives, {boxShadow: vars.button.boxShadow}),
+  bleed: _style(layers.primitives, {}),
+}
+
+export const loadingBox: string = _style(layers.primitives, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: vars.color.bg,
+  borderRadius: 'inherit',
+  zIndex: 1,
+  opacity: 0.8,
+})
+
+export const tones: Record<ElementTone, string> = {
+  ..._fromEntries(
+    ELEMENT_TONES.map((t) => {
+      const solid = vars.color.solid[t]
+      const tinted = vars.color.tinted[t]
+
+      return [
+        t,
+        _style(layers.primitives, {
+          selectors: {
+            // default
+
+            [`&.${modes.default}`]: {
+              vars: {
+                [vars.color.bg]: solid.bg[0],
+                [vars.color.border]: solid.border[1],
+                [vars.color.code.bg]: solid.bg[1],
+                [vars.color.code.fg]: solid.fg[4],
+                [vars.color.fg]: solid.fg[0],
+                [vars.color.muted.bg]: solid.bg[1],
+                [vars.color.muted.fg]: solid.fg[4],
+                [vars.button.boxShadow]: 'none',
+              },
+            },
+
+            [`&.${modes.default}:not([data-disabled]):hover`]: {
+              vars: {
+                [vars.color.bg]: solid.bg[1],
+                [vars.color.border]: solid.border[2],
+                [vars.color.code.bg]: solid.bg[2],
+                [vars.color.code.fg]: solid.fg[4],
+                [vars.color.fg]: solid.fg[0],
+                [vars.color.muted.bg]: solid.bg[2],
+                [vars.color.muted.fg]: solid.fg[4],
+              },
+            },
+
+            [`&.${modes.default}:not([data-disabled]):active`]: {
+              vars: {
+                [vars.color.bg]: solid.bg[2],
+                [vars.color.border]: solid.border[3],
+                [vars.color.code.bg]: solid.bg[3],
+                [vars.color.code.fg]: solid.fg[4],
+                [vars.color.fg]: solid.fg[0],
+                [vars.color.muted.bg]: solid.bg[3],
+                [vars.color.muted.fg]: solid.fg[4],
+              },
+            },
+
+            [`&.${modes.default}:not([data-disabled])[data-selected]`]: {
+              vars: {
+                [vars.color.bg]: solid.bg[2],
+                [vars.color.border]: solid.border[3],
+                [vars.color.code.bg]: solid.bg[3],
+                [vars.color.code.fg]: solid.fg[4],
+                [vars.color.fg]: solid.fg[0],
+                [vars.color.muted.bg]: solid.bg[3],
+                [vars.color.muted.fg]: solid.fg[4],
+              },
+            },
+
+            [`&.${modes.default}[data-disabled]`]: {
+              vars: {
+                ..._fromEntries(
+                  AVATAR_COLORS.map((c) => [
+                    vars.color.avatar[c].bg,
+                    vars.color.tinted.default.bg[3],
+                  ]),
+                ),
+
+                [vars.color.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.border]: vars.color.tinted.default.border[1],
+                [vars.color.code.bg]: vars.color.tinted.default.bg[2],
+                [vars.color.code.fg]: vars.color.tinted.default.border[4],
+                [vars.color.fg]: vars.color.tinted.default.border[4],
+                [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
+                [vars.color.muted.fg]: vars.color.tinted.default.border[4],
+              },
+            },
+
+            // ghost
+
+            [`&.${modes.ghost}`]: {
+              vars: {
+                [vars.color.bg]: `color-mix(in srgb, transparent, ${tinted.bg[1]} 50%)`,
+                [vars.color.border]: tinted.border[0],
+                [vars.color.fg]: tinted.fg[2],
+                [vars.color.code.bg]: tinted.bg[2],
+                [vars.color.code.fg]: tinted.fg[4],
+                [vars.color.muted.bg]: tinted.bg[2],
+                [vars.color.muted.fg]: tinted.fg[4],
+                [vars.button.boxShadow]:
+                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+              },
+            },
+
+            [`&.${modes.ghost}:not([data-disabled]):hover`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[1],
+                [vars.color.border]: tinted.border[1],
+                [vars.color.code.bg]: tinted.bg[3],
+                [vars.color.code.fg]: tinted.fg[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[3],
+                [vars.color.muted.fg]: tinted.fg[3],
+              },
+            },
+
+            [`&.${modes.ghost}:not([data-disabled]):active`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[2],
+                [vars.color.border]: tinted.border[2],
+                [vars.color.code.bg]: tinted.bg[4],
+                [vars.color.code.fg]: tinted.fg[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[4],
+                [vars.color.muted.fg]: tinted.fg[3],
+                [vars.button.boxShadow]:
+                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+              },
+            },
+
+            [`&.${modes.ghost}:not([data-disabled])[data-selected]`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[2],
+                [vars.color.border]: tinted.border[2],
+                [vars.color.code.bg]: tinted.bg[4],
+                [vars.color.code.fg]: tinted.fg[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[4],
+                [vars.color.muted.fg]: tinted.fg[3],
+                [vars.button.boxShadow]:
+                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+              },
+            },
+
+            [`&.${modes.ghost}[data-disabled]`]: {
+              vars: {
+                ..._fromEntries(
+                  AVATAR_COLORS.map((c) => [
+                    vars.color.avatar[c].bg,
+                    vars.color.tinted.default.bg[2],
+                  ]),
+                ),
+
+                [vars.color.bg]: vars.color.tinted.default.bg[0],
+                [vars.color.border]: vars.color.tinted.default.border[0],
+                [vars.color.code.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.code.fg]: vars.color.tinted.default.border[3],
+                [vars.color.fg]: vars.color.tinted.default.border[4],
+                [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.muted.fg]: vars.color.tinted.default.border[3],
+              },
+            },
+
+            // bleed
+
+            [`&.${modes.bleed}`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[0],
+                [vars.color.border]: tinted.border[1],
+                [vars.color.fg]: tinted.fg[2],
+                [vars.color.muted.bg]: tinted.bg[1],
+                [vars.color.muted.fg]: tinted.fg[4],
+                [vars.button.boxShadow]: 'none',
+              },
+            },
+
+            [`&.${modes.bleed}:not([data-disabled]):hover`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[1],
+                [vars.color.border]: tinted.border[2],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[2],
+                [vars.color.muted.fg]: tinted.fg[3],
+              },
+            },
+
+            [`&.${modes.bleed}:not([data-disabled]):active`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[2],
+                [vars.color.border]: tinted.border[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[3],
+                [vars.color.muted.fg]: tinted.fg[3],
+              },
+            },
+
+            [`&.${modes.bleed}:not([data-disabled])[data-selected]`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[2],
+                [vars.color.border]: tinted.border[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[3],
+                [vars.color.muted.fg]: tinted.fg[3],
+              },
+            },
+
+            [`&.${modes.bleed}[data-disabled]`]: {
+              vars: {
+                ..._fromEntries(
+                  AVATAR_COLORS.map((c) => [
+                    vars.color.avatar[c].bg,
+                    vars.color.tinted.default.bg[2],
+                  ]),
+                ),
+
+                [vars.color.bg]: vars.color.tinted.default.bg[0],
+                [vars.color.border]: vars.color.tinted.default.border[0],
+                [vars.color.code.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.code.fg]: vars.color.tinted.default.border[3],
+                [vars.color.fg]: vars.color.tinted.default.border[4],
+                [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.muted.fg]: vars.color.tinted.default.border[3],
+              },
+            },
+          },
+        }),
+      ]
+    }),
+  ),
+}

package/src/css/primitives/button/button.ts

@@ -0,0 +1,26 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {display} from '../../props/display/display'
+import {flex} from '../../props/flex/flex'
+import {radius} from '../../props/radius/radius'
+import {width} from '../../props/width/width'
+import {loadingBox, modes, root, tones} from './button.css'
+import type {ButtonStyleProps} from './types'
+
+/** @public */
+export function button(props: ButtonStyleProps): string | undefined {
+  return _composeClassNames(
+    props.className,
+    root,
+    modes[props.mode ?? 'default'],
+    tones[props.tone ?? 'default'],
+    display({display: 'flex'}),
+    flex(props),
+    radius(props),
+    width(props),
+  )
+}
+
+/** @public */
+export function buttonLoadingBox(): string {
+  return loadingBox
+}

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

@@ -0,0 +1,12 @@
+import type {ButtonMode, ElementTone} from '@sanity/ui/theme'
+
+import type {FlexStyleProps} from '../../props/flex/types'
+import type {RadiusStyleProps} from '../../props/radius/types'
+import type {WidthStyleProps} from '../../props/width/types'
+
+/** @public */
+export interface ButtonStyleProps extends FlexStyleProps, RadiusStyleProps, WidthStyleProps {
+  className?: string
+  mode?: ButtonMode
+  tone?: ElementTone
+}

package/src/css/primitives/card/__workshop__/color.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import {Box, Card, Code} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {
+  CARD_TONES,
+  type CardTone,
+  COLOR_SCHEMES,
+  COLOR_VARIANTS,
+  type ColorScheme,
+  type ColorVariant,
+} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+import {useState} from 'react'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop'
+
+interface ColorRecordNode extends Record<string, ColorNode> {}
+
+type ColorNode = string | ColorRecordNode
+
+export default function ColorStory(): React.JSX.Element {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
+
+  return (
+    <Card display="flex" flexDirection="column" gap={4} padding={4} tone={tone}>
+      {Object.entries(vars.color).map(([key, value]) => {
+        if (key === 'palette') {
+          return null
+        }
+
+        if (COLOR_SCHEMES.includes(key as ColorScheme)) {
+          return null
+        }
+
+        if (CARD_TONES.includes(key as CardTone)) {
+          return null
+        }
+
+        if (COLOR_VARIANTS.includes(key as ColorVariant)) {
+          // return null
+        }
+
+        return <ColorBox key={key} node={{key, value}} />
+      })}
+    </Card>
+  )
+}
+
+function ColorBox({node}: {node: {key: string; value: ColorNode}}) {
+  const {key, value} = node
+  const [open, setOpen] = useState(true)
+
+  if (typeof value === 'string') {
+    return (
+      <Box radius={2} padding={3} style={{backgroundColor: value}}>
+        <Code size={1}>{key}</Code>
+      </Box>
+    )
+  }
+
+  return (
+    <Box overflow="hidden" radius={3} shadow={1}>
+      <Card as="button" onClick={() => setOpen(!open)} padding={3} tone="inherit">
+        <Code size={1}>{`${key} +`}</Code>
+      </Card>
+
+      <Box display="flex" flexDirection="column" gap={3} hidden={!open} padding={3}>
+        {Object.entries(value).map(([key, value]) => (
+          <ColorBox key={key} node={{key, value}} />
+        ))}
+      </Box>
+    </Box>
+  )
+}

package/src/css/primitives/card/__workshop__/index.ts

@@ -0,0 +1,16 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'css/card',
+  title: 'Card',
+  stories: [
+    {
+      name: 'color',
+      title: 'Color',
+      component: lazy(() => import('./color')),
+    },
+  ],
+}
+
+export default scope