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

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

@@ -1,45 +1,166 @@
 import {THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
 import {Rules} from '../../types'
+import {toneMap, variantMap} from './_constants'
+
+const buttonVariantRules: Rules = {}
+
+for (const mode of THEME_COLOR_BUTTON_MODES) {
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    if (mode === 'default') {
+      buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
+        'boxShadow': 'none',
+        '--color-bg': `var(--color-solid-${tone}-bg-0)`,
+        '--color-border': `var(--color-solid-${tone}-border-1)`,
+        '--color-fg': `var(--color-solid-${tone}-fg-0)`,
+        '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
+
+        '@nest': {
+          '&:not([data-disabled]):hover': {
+            '--color-bg': `var(--color-solid-${tone}-bg-1)`,
+            '--color-border': `var(--color-solid-${tone}-border-2)`,
+            '--color-fg': `var(--color-solid-${tone}-fg-0)`,
+            '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
+          },
+
+          '&:not([data-disabled]):active': {
+            '--color-bg': `var(--color-solid-${tone}-bg-2)`,
+            '--color-border': `var(--color-solid-${tone}-border-3)`,
+            '--color-fg': `var(--color-solid-${tone}-fg-0)`,
+            '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
+          },
+
+          '&:not([data-disabled])[data-selected]': {
+            '--color-bg': `var(--color-solid-${tone}-bg-2)`,
+            '--color-border': `var(--color-solid-${tone}-border-3)`,
+            '--color-fg': `var(--color-solid-${tone}-fg-0)`,
+            '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
+          },
+
+          '&[data-disabled]': {
+            '--color-bg': `var(--color-tinted-default-bg-1)`,
+            '--color-border': `var(--color-tinted-default-border-0)`,
+            '--color-fg': `var(--color-tinted-default-border-2)`,
+            '--color-muted-fg': `var(--color-tinted-default-border-1)`,
+          },
+        },
+      }
+    }
+
+    if (mode === 'bleed') {
+      buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
+        'boxShadow': 'none',
+        '--color-bg': `var(--color-tinted-${tone}-bg-0)`,
+        '--color-border': `var(--color-tinted-${tone}-border-1)`,
+        '--color-fg': `var(--color-tinted-${tone}-fg-2)`,
+        '--color-muted-fg': `var(--color-tinted-${tone}-fg-4)`,
+
+        '@nest': {
+          '&:not([data-disabled]):hover': {
+            '--color-bg': `var(--color-tinted-${tone}-bg-1)`,
+            '--color-border': `var(--color-tinted-${tone}-border-2)`,
+            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+            '--color-muted-fg': `var(--color-tinted-${tone}-fg-3)`,
+          },
+
+          '&:not([data-disabled]):active': {
+            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
+            '--color-border': `var(--color-tinted-${tone}-border-3)`,
+            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+            '--color-muted-fg': `var(--color-tinted-${tone}-fg-3)`,
+          },
+
+          '&:not([data-disabled])[data-selected]': {
+            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
+            '--color-border': `var(--color-tinted-${tone}-border-3)`,
+            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+            '--color-muted-fg': `var(--color-tinted-${tone}-fg-3)`,
+          },
+
+          '&[data-disabled]': {
+            '--color-bg': `var(--color-tinted-default-bg-0)`,
+            '--color-border': `var(--color-tinted-default-border-0)`,
+            '--color-fg': `var(--color-tinted-default-border-2)`,
+            '--color-muted-fg': `var(--color-tinted-default-border-1)`,
+          },
+        },
+      }
+    }
+
+    if (mode === 'ghost') {
+      buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
+        '--color-bg': `var(--color-tinted-${tone}-bg-1)`,
+        '--color-border': `var(--color-tinted-${tone}-border-0)`,
+        '--color-fg': `var(--color-tinted-${tone}-fg-2)`,
+
+        '@nest': {
+          '&:not([data-disabled]):hover': {
+            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
+            '--color-border': `var(--color-tinted-${tone}-border-1)`,
+            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+          },
+
+          '&:not([data-disabled]):active': {
+            '--color-bg': `var(--color-tinted-${tone}-bg-3)`,
+            '--color-border': `var(--color-tinted-${tone}-border-2)`,
+            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+          },
+
+          '&:not([data-disabled])[data-selected]': {
+            '--color-bg': `var(--color-tinted-${tone}-bg-3)`,
+            '--color-border': `var(--color-tinted-${tone}-border-2)`,
+            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+          },
+
+          '&[data-disabled]': {
+            '--color-bg': `var(--color-tinted-default-bg-0)`,
+            '--color-border': `var(--color-tinted-default-border-0)`,
+            '--color-fg': `var(--color-tinted-default-border-2)`,
+          },
+        },
+      }
+    }
+  }
+}
 
 export const buttonRules: Rules = {
   'button': {
-    WebkitFontSmoothing: 'inherit',
-    appearance: 'none',
-    display: 'inline-flex',
-    alignItems: 'center',
-    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: 'var(--card-bg-color)',
-    color: 'var(--card-fg-color)',
-  },
+    'WebkitFontSmoothing': 'inherit',
+    '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': 'var(--color-bg)',
+    'color': 'var(--color-fg)',
+    'boxShadow': 'inset 0 0 0 var(--button-border-width) var(--color-border)',
 
-  // variants
-  ...THEME_COLOR_BUTTON_MODES.reduce((acc, mode) => {
-    return {
-      ...acc,
-      [`button-mode-${mode}`]: {
-        '@nest': THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-          return {
-            ...acc,
-            [`&.button-tone-${tone}`]: {
-              '--card-bg-color': `var(--card-button-${mode}-${tone}-enabled-bg-color, rgba(127, 127, 127, 0.1))`,
-              '--card-fg-color': `var(--card-button-${mode}-${tone}-enabled-fg-color, currentColor)`,
-            },
-          }
-        }, {} as Rules),
+    '@nest': {
+      '&::-moz-focus-inner': {
+        border: 0,
+        padding: 0,
+      },
+
+      '&:focus': {
+        outline: 'var(--button-focus-ring-width) solid var(--color-focus-ring)',
+        outlineOffset: 'var(--button-focus-ring-offset)',
       },
-    }
-  }, {} as Rules),
+
+      '&:focus:not(:focus-visible)': {
+        outline: 'none',
+      },
+
+      ...buttonVariantRules,
+    },
+  },
 
   'button-loading-box': {
     position: 'absolute',
@@ -47,12 +168,126 @@ export const buttonRules: Rules = {
     left: 0,
     right: 0,
     bottom: 0,
-    // display: 'flex',
-    // alignItems: 'center',
-    // justifyContent: 'center',
-    backgroundColor: 'var(--card-bg-color)',
+    backgroundColor: 'var(--color-bg)',
     borderRadius: 'inherit',
     zIndex: 1,
-    // boxShadow: 'inherit',
+    opacity: 0.8,
   },
 }
+
+// import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+// import {ThemeProps} from '../../_compat'
+// import {_cardColorStyle} from '../../_compat/styles/card'
+// import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
+// import {css} from '../../lib/styled'
+// import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
+
+// /**
+//  * @internal
+//  */
+// export function buttonBaseStyles(
+//   props: {$width?: ButtonWidth} & ThemeProps,
+// ): ReturnType<typeof css> {
+//   const {$width} = props
+//   const {style} = getTheme_v2(props.theme)
+
+//   return css`
+//     ${style?.button};
+
+//     -webkit-font-smoothing: inherit;
+//     appearance: none;
+//     display: inline-flex;
+//     align-items: center;
+//     font: inherit;
+//     border: 0;
+//     outline: none;
+//     user-select: none;
+//     text-decoration: none;
+//     border: 0;
+//     box-sizing: border-box;
+//     padding: 0;
+//     margin: 0;
+//     white-space: nowrap;
+//     text-align: left;
+//     position: relative;
+//     vertical-align: top;
+
+//     ${$width === 'fill' &&
+//     css`
+//       width: -moz-available;
+//       width: -webkit-fill-available;
+//       width: stretch;
+//     `}
+
+//     & > span {
+//       display: block;
+//       flex: 1;
+//       min-width: 0;
+//       border-radius: inherit;
+//     }
+
+//     &::-moz-focus-inner {
+//       border: 0;
+//       padding: 0;
+//     }
+//   `
+// }
+
+// function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
+//   return boxShadows.filter(Boolean).join(',')
+// }
+
+// /**
+//  * @internal
+//  */
+// export function buttonColorStyles(
+//   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
+// ): CSSObject[] {
+//   const {$mode} = props
+//   const {button, color: baseColor, style} = getTheme_v2(props.theme)
+//   const shadow = props.$mode === 'ghost'
+//   const mode = baseColor.button[$mode] || baseColor.button.default
+//   const color = mode[props.$tone] || mode.default
+//   const border = {
+//     width: button.border.width,
+//     color: 'var(--color-border)',
+//   }
+//   // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--color-border) 25%, var(--color-bg))`
+//   const defaultBoxShadow = undefined
+
+//   return [
+//     _cardColorStyle(baseColor, color.enabled),
+//     {
+//       'backgroundColor': 'var(--color-bg)',
+//       'color': 'var(--color-fg)',
+//       'boxShadow': focusRingBorderStyle(border),
+//       '&:disabled, &[data-disabled]': _cardColorStyle(baseColor, color.disabled),
+//       "&:not([data-disabled='true'])": {
+//         'boxShadow': combineBoxShadow(
+//           focusRingBorderStyle(border),
+//           shadow ? defaultBoxShadow : undefined,
+//         ),
+//         '&:focus': {
+//           boxShadow: focusRingStyle({
+//             base: baseColor,
+//             border: {width: 2, color: baseColor.bg},
+//             focusRing: button.focusRing,
+//           }),
+//         },
+//         '&:focus:not(:focus-visible)': {
+//           boxShadow: combineBoxShadow(
+//             focusRingBorderStyle(border),
+//             shadow ? defaultBoxShadow : undefined,
+//           ),
+//         },
+//         '@media (hover: hover)': {
+//           '&:hover': _cardColorStyle(baseColor, color.hovered),
+//           '&:active': _cardColorStyle(baseColor, color.pressed),
+//           '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
+//         },
+//         '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
+//       },
+//     },
+//     style?.button?.root,
+//   ].filter(Boolean) as CSSObject[]
+// }

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

@@ -0,0 +1,13 @@
+import {ThemeColorCardToneKey} from '@sanity/ui/theme'
+
+export const toneMap: Record<ThemeColorCardToneKey | 'inherit', string | undefined> = {
+  transparent: 'canvas',
+  default: 'surface',
+  neutral: 'neutral',
+  suggest: 'suggest',
+  primary: 'accent',
+  positive: 'positive',
+  caution: 'caution',
+  critical: 'critical',
+  inherit: undefined,
+} as const

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

@@ -1,21 +1,16 @@
 import {composeClassNames} from '../../composeClassNames'
-import {border, BorderStyleProps} from '../../styles/border'
-import {radius, RadiusStyleProps} from '../../styles/radius'
-import {ResponsiveProp} from '../../types'
-import {box, BoxStyleProps} from '../box'
+import {shadow} from '../../styles'
+import {box} from '../box'
+import {toneMap} from './_constants'
+import {CardStyleProps} from './types'
 
-export interface CardStyleProps extends BoxStyleProps, BorderStyleProps, RadiusStyleProps {
-  checkered?: boolean
-  shadow?: ResponsiveProp<number>
-}
-
-export function card(props: CardStyleProps): string {
+export function card(props: CardStyleProps): string | undefined {
   return composeClassNames(
+    props.scheme,
+    toneMap[props.tone ?? 'inherit'],
     'card',
     props.checkered && 'card-checkered',
     box(props),
-    border(props),
-    radius(props),
-    props.shadow === undefined ? undefined : `shadow-${props.shadow}`,
+    shadow(props),
   )
 }

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

@@ -1 +1,2 @@
 export * from './card'
+export * from './types'