@basic-ui/material 0.1.15 → 1.0.0-alpha.0

package/src/Chip/ChipBase.tsx

@@ -2,8 +2,12 @@ import { forwardRef } from 'react';
 import type * as React from 'react';
 import { variant } from 'styled-system';
 import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
-import { alpha } from '../color';
+import { Theme, useTheme } from '../theme';
+import {
+  alpha,
+  getDarkThemeBackgroundOverlay,
+  getColorOverlay,
+} from '../color';
 import { rem } from 'polished';
 
 export type ChipBaseProps<
@@ -17,15 +21,25 @@ export type ChipBaseProps<
   disabled?: boolean;
 };
 
-function getFilledCSS(bg: string, color: string) {
+function getFilledCSS(
+  theme: Theme,
+  bg: string,
+  color: string,
+  disabled: boolean
+) {
   return {
-    bg,
-    color: alpha(color, 0.87),
+    ...(!disabled && bg !== 'surface'
+      ? { bg }
+      : {
+          ...getColorOverlay(theme, 'surface', 'primary', 0.05),
+          ...getDarkThemeBackgroundOverlay(theme, 2),
+        }),
+    color,
     '&::before': {
       backgroundColor: 'currentColor',
       position: 'absolute',
       content: '""',
-      opacity: 0.12,
+      opacity: 0,
       pointerEvents: 'none',
       top: 0,
       right: 0,
@@ -38,13 +52,19 @@ function getFilledCSS(bg: string, color: string) {
     '& > *': {
       zIndex: 1,
     },
+    ...(disabled && { boxShadow: 0, bg: alpha('on.surface', 0.32) }),
   };
 }
 
-function getOutlinedCSS(bg: string, color: string, borderOpacity: number) {
+function getOutlinedCSS(
+  theme: Theme,
+  bg: string,
+  color: string,
+  borderOpacity: number
+) {
   return {
-    bg,
-    color: alpha(color, 0.87),
+    ...(bg !== 'surface' ? { bg } : getDarkThemeBackgroundOverlay(theme, 2)),
+    color: color,
     borderColor: alpha(color, borderOpacity),
     borderStyle: 'solid',
     borderWidth: rem(1),
@@ -71,6 +91,7 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
   return (
     <Box
       as={as}
+      data-disabled={disabled ? '' : undefined}
       ref={forwardedRef}
       __css={{
         boxSizing: 'border-box',
@@ -84,9 +105,11 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
         fontSize: 'inherit',
         border: 0,
         overflow: 'hidden',
+        whiteSpace: 'nowrap',
         cursor: 'default',
         WebkitTapHighlightColor: 'transparent',
         willChange: 'transform,opacity',
+        minWidth: 'auto',
         '&::-moz-focus-inner': {
           border: 0,
         },
@@ -98,9 +121,14 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
           },
         })({ variant: variantProp, theme }),
         ...(variantProp === 'filled'
-          ? getFilledCSS(backgroundColorProp, colorProp)
-          : getOutlinedCSS(backgroundColorProp, colorProp, borderOpacityProp)),
-        opacity: disabled ? 0.37 : 1,
+          ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled)
+          : getOutlinedCSS(
+              theme,
+              backgroundColorProp,
+              colorProp,
+              borderOpacityProp
+            )),
+        opacity: disabled ? 0.38 : 1,
         ...__css,
       }}
       {...otherProps}

package/src/Chip/ChoiceChip.tsx

@@ -14,7 +14,8 @@ export type ChoiceChipProps = ChipBaseProps<
   checked?: boolean;
   disabled?: boolean;
   type: 'checkbox' | 'radio';
-  leftIcon?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
 };
 
 const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
@@ -30,21 +31,23 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
       defaultValue,
       disabled,
       onChange,
-      leftIcon,
+      leadingIcon,
+      trailingIcon,
       children,
+      __css,
       ...otherProps
     } = props;
 
     const theme = useTheme();
-    const sumOpacity = checked ? 0.12 : 0;
 
     return (
       <ChipBase
         as="label"
         disabled={disabled}
-        backgroundColor={'surface'}
-        color={checked ? color : 'on.surface'}
-        borderOpacity={checked ? 0.6 : 0.24}
+        backgroundColor={checked ? color + '-container' : 'surface'}
+        color={checked ? 'on.' + color + '-container' : 'on.surface'}
+        borderOpacity={checked ? 0 : 0.24}
+        __css={__css}
         {...otherProps}
       >
         <Box
@@ -56,6 +59,8 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
           }}
         >
           <RippleBox<
@@ -75,13 +80,13 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             theme={theme}
             disabled={disabled}
             rippleColor={color}
-            baseOpacity={0 + sumOpacity}
-            hoverOpacity={0.12 + sumOpacity}
-            focusOpacity={0.24 + sumOpacity}
+            baseOpacity={0}
+            hoverOpacity={0.12}
+            focusOpacity={0.24}
             name={name}
             ref={forwardedRef}
             __css={{
-              backgroundColor: 'rgba(0,0,0,0)',
+              bg: 'transparent',
               top: 0,
               left: 0,
               width: '100%',
@@ -93,15 +98,11 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
               border: 'none',
               borderRadius: 0,
               position: 'absolute',
-              color: 'inherit',
             }}
           />
-          <Box as="span" pl={rem(4)} pr={rem(8)}>
-            {leftIcon}
-          </Box>
-          <Box as="span" pr={rem(12)}>
-            {children}
-          </Box>
+          {leadingIcon}
+          {children}
+          {trailingIcon}
         </Box>
       </ChipBase>
     );

package/src/Combobox/Combobox.tsx

@@ -98,10 +98,11 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         ref={forwardedRef}
         innerAs={as}
         outlined={false}
-        elevation={8}
+        elevation={2}
         __css={{
           maxHeight: rem(300),
           overflowY: 'auto',
+          borderRadius: 'default',
           '[data-popper-placement="top"] &': {
             transformOrigin: 'bottom center',
           },

package/src/Dialog/DialogSurface.tsx

@@ -4,33 +4,48 @@ import { Modal as _Modal, ModalProps } from '@basic-ui/core';
 import { Paper, PaperProps } from '../Paper';
 import { useTheme } from '../theme';
 import { rem } from 'polished';
+import { get, variant } from 'styled-system';
+import { getColorOverlay } from '../color';
 
 const Modal = _Modal as React.FC<
   DialogSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
 >;
 
-export type DialogSurfaceProps = ModalProps & PaperProps;
+export type DialogSurfaceProps = ModalProps &
+  PaperProps & {
+    variant?: 'base';
+  };
 
 export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
   function DialogSurface(props, forwardedRef) {
-    const { __css, ...otherProps } = props;
+    const { __css, variant: variantProp = 'base', ...otherProps } = props;
     const theme = useTheme();
 
+    const overlayValue =
+      (get(theme, 'dialogs.backgroundColorOverlay') as number) || 0;
+
     return (
       <Modal
         ref={forwardedRef}
         as={Paper}
         theme={theme}
-        elevation={24}
+        elevation={3}
         __css={{
+          ...getColorOverlay(theme, 'surface', 'primary', overlayValue),
           position: 'relative',
-          bg: 'surface',
-          borderRadius: rem(8),
+          borderRadius: 'small',
           width: '100%',
           maxWidth: rem(600),
           maxHeight: '100%',
           overflow: 'auto',
           pointerEvents: 'auto',
+          ...variant({
+            scale: 'dialogs.variants',
+            prop: 'variant',
+            variants: {
+              base: {},
+            },
+          })({ variant: variantProp, theme }),
           ...__css,
         }}
         {...otherProps}

package/src/FloatingLabel/FloatingLabel.tsx

@@ -11,7 +11,6 @@ export interface FloatingLabelProps
   offsetX?: number;
   height?: number;
   scale?: number;
-  top?: number;
   px?: number;
   translateX?: number;
   translateY?: number;
@@ -29,7 +28,6 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
       style = {},
       translateX: translateXProp,
       translateY: translateYProp,
-      top = 0,
       children,
       ...otherProps
     } = props;
@@ -58,7 +56,6 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
           fontWeight: 'regular',
           display: 'inline-flex',
           alignItems: 'center',
-          top: rem(top),
           left: rem(offsetX),
           height: typeof height === 'number' ? rem(height) : height,
           transformOrigin: 'left center',

package/src/ListItem/ListItem.tsx

@@ -1,10 +1,8 @@
 import { forwardRef } from 'react';
 import type * as React from 'react';
-import { BoxProps } from '../Box';
+import { BoxProps, Box } from '../Box';
 import { rem } from 'polished';
-import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
-import { ListItemProvider } from './context';
 import { get } from '@styled-system/css';
 import { alpha } from '../color';
 
@@ -33,41 +31,66 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       ...otherProps
     } = props;
     const selected = ariaSelectedProp || selectedProp;
-    const color = colorProp ? colorProp : selected ? 'primary' : 'on.surface';
+    const color = rippleColor || colorProp || 'primary';
     const theme = useTheme();
 
+    const baseOpacity = 0.12;
+    const hoverOpacity = 0.16;
+    const focusOpacity = 0.24;
+
     return (
-      <ListItemProvider value={{ color, disabled }}>
-        <RippleBox
-          ref={forwardedRef}
-          as={innerAs || as}
-          theme={theme}
-          display="flex"
-          data-disabled={disabled ? '' : undefined}
-          rippleColor={rippleColor || color}
-          baseOpacity={selected ? 0.12 : 0}
-          hoverOpacity={selected ? 0.16 : 0.04}
-          focusOpacity={selected ? 0.24 : 0.12}
-          aria-selected={selected ? 'true' : undefined}
-          disabled={disabled}
-          {...otherProps}
-          __css={{
-            px: 3,
-            py: rem(12),
-            backgroundColor: 'transparent',
-            color: disabled ? alpha(color, 0.6) : alpha(color, 0.87),
+      <Box
+        ref={forwardedRef}
+        as={innerAs || as}
+        theme={theme}
+        display="flex"
+        data-disabled={disabled ? '' : undefined}
+        aria-selected={selected ? 'true' : undefined}
+        disabled={disabled}
+        {...otherProps}
+        __css={{
+          px: 3,
+          py: rem(12),
+          transition: 'background-color 75ms linear',
+          backgroundColor: 'transparent',
+          color: alpha('on.surface', 0.87),
+          cursor: 'pointer',
+          ':hover': {
+            backgroundColor: alpha('on.surface', hoverOpacity),
+          },
+          ':focus': {
+            outline: 'none',
+            backgroundColor: alpha('on.surface', focusOpacity),
+          },
+          ':active': {
+            backgroundColor: alpha('on.surface', baseOpacity + 0.12),
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: alpha(color, baseOpacity + 0.12),
+            ':hover': {
+              backgroundColor: alpha(color, hoverOpacity + 0.12),
+            },
             ':focus': {
               outline: 'none',
+              backgroundColor: alpha(color, focusOpacity + 0.12),
             },
-            textDecoration: 'none',
-            WebkitTapHighlightColor: 'transparent',
-            ...get(theme, 'text.subtitle1'),
-            ...__css,
-          }}
-        >
-          {children}
-        </RippleBox>
-      </ListItemProvider>
+            ':active': {
+              backgroundColor: alpha(color, baseOpacity + 0.24),
+            },
+          },
+          '&[data-disabled]': {
+            color: alpha('on.surface', 0.6),
+            backgroundColor: 'transparent',
+            cursor: 'default',
+          },
+          textDecoration: 'none',
+          WebkitTapHighlightColor: 'transparent',
+          ...get(theme, 'text.subtitle1'),
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
     );
   }
 );

package/src/ListItem/ListItemText.tsx

@@ -1,8 +1,6 @@
 import { forwardRef } from 'react';
 import type * as React from 'react';
 import { Text } from '../Text';
-import { alpha } from '../color';
-import { useListItemContext } from './context';
 
 export interface ListItemTextProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,7 +12,6 @@ export interface ListItemTextProps
 export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
   function ListItemText(props, forwardedRef) {
     const { as: Comp = 'div', text, secondaryText, ...otherProps } = props;
-    const { color, disabled } = useListItemContext();
 
     return (
       <Comp ref={forwardedRef} {...otherProps}>
@@ -25,7 +22,8 @@ export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
             variant="body2"
             display="block"
             __css={{
-              color: alpha(color, disabled ? 0.3 : 0.57),
+              color: 'currentColor',
+              opacity: 0.65,
             }}
           >
             {secondaryText}

package/src/Menu/Menu.tsx

@@ -34,14 +34,14 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       as={List}
       innerAs={as}
       ref={ref as any}
-      elevation={8}
+      elevation={2}
       outlined={false}
       variant="default"
       __css={{
-        width: 0,
         minWidth: rem(112),
         maxWidth: rem(280),
         maxHeight: rem(300),
+        borderRadius: 'default',
         overflowY: 'auto',
         '[data-popper-placement="top"] &': {
           transformOrigin: 'bottom center',

package/src/NotchedOutline/NotchedOutline.story.tsx

@@ -17,7 +17,7 @@ const Example = () => {
       <Box
         m={3}
         display="inline-block"
-        sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+        sx={{ position: 'relative', bg: 'muted', borderRadius: 'extra-small' }}
       >
         <NotchedOutline
           borderColor="primary"

package/src/NotchedOutline/styledComponents.ts

@@ -15,7 +15,7 @@ const makeSelector = (
 ) =>
   `input:${state} ~ & [data-notch-outline-item],` +
   `select:${state} ~ & [data-notch-outline-item],` +
-  `button:${state} ~ & [data-notch-outline-item],` +
+  `[role="button"]:${state} ~ & [data-notch-outline-item],` +
   `textarea:${state} ~ & [data-notch-outline-item]`;
 
 export const InnerContainer = styled('div', {
@@ -78,18 +78,18 @@ export const InnerContainer = styled('div', {
     }
 
     const inactiveStyle = {
-      color: alpha('on.surface', 0.6),
-      borderColor: alpha('on.surface', 0.38),
+      color: 'on.surface-variant',
+      borderColor: 'outline',
       ...borderStyling(borderRadius, borderWidth),
     };
 
     const hoverStyle = {
-      borderColor: alpha('on.surface', 0.87),
-      color: alpha('on.surface', 0.6),
+      borderColor: 'on.surface',
+      color: 'on.surface-variant',
     };
 
     const focusStyle = {
-      borderColor: alpha(color, 0.87),
+      borderColor: color,
       color: alpha(color, 0.87),
       ...borderStyling(borderRadius, borderWidthWhenFocused),
     };

package/src/Paper/Paper.story.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Paper } from './';
 import { Text } from '../Text';
 import { Box } from '../Box';
+import { rem } from 'polished';
 
 export default {
   title: 'components/Paper',
@@ -11,8 +12,20 @@ const Example = ({}) => {
   const [elevation, setElevation] = useState(0);
 
   return (
-    <Box p="6" bg={'surface'} color={'on.surface'} width="100%" height="100vh">
-      <Paper outlined width="300px" height="300px" elevation={elevation} mb="4">
+    <Box
+      p="6"
+      bg={'surface'}
+      color={'on.primary-container'}
+      width="100%"
+      height="100vh"
+    >
+      <Paper
+        width="216px"
+        height="216px"
+        elevation={elevation}
+        mb="4"
+        sx={{ borderRadius: 'large' }}
+      >
         <Text variant="h3">Hello</Text>
         <Text variant="body1">This is looking cool</Text>
         Pretty cool.
@@ -24,7 +37,7 @@ const Example = ({}) => {
         <input
           type="range"
           min={0}
-          max={24}
+          max={5}
           value={elevation}
           onChange={(e) => setElevation(Number(e.target.value))}
         />

package/src/Paper/Paper.tsx

@@ -3,7 +3,7 @@ import type * as React from 'react';
 import { Box, BoxProps } from '../Box';
 import { useTheme } from '../theme';
 import { rem } from 'polished';
-import { alpha, getDarkThemeBackgroundOverlay } from '../color';
+import { alpha, getBackgroundOverlay } from '../color';
 
 export interface PaperProps extends BoxProps {
   as?: React.ElementType<any>;
@@ -43,7 +43,11 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
               borderColor: alpha('on.surface', 0.12),
             }
           : {}),
-        ...getDarkThemeBackgroundOverlay(theme, backgroundOverlay ?? elevation),
+        ...getBackgroundOverlay(
+          theme,
+          backgroundOverlay ?? elevation,
+          'primary'
+        ),
         ...__css,
       }}
       {...otherProps}

package/src/RadioButton/RadioButton.tsx

@@ -50,7 +50,7 @@ const RadioButtonInner = forwardRef<
             outline: 'none',
           },
           border: 'none',
-          borderRadius: '50%',
+          borderRadius: 'full',
           zIndex: 1,
           position: 'absolute',
           ...__css,

package/src/RadioButton/RadioButtonIcon.tsx

@@ -19,7 +19,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
         __css={{
           borderColor: 'currentColor',
           borderStyle: 'solid',
-          borderRadius: '50%',
+          borderRadius: 'full',
           borderWidth: rem(2),
           width: '100%',
           height: '100%',
@@ -30,7 +30,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
         <Box
           __css={{
             backgroundColor: 'currentColor',
-            borderRadius: '50%',
+            borderRadius: 'full',
             width: '100%',
             height: '100%',
             transition:

package/src/Ripple/Ripple.story.tsx

@@ -34,7 +34,7 @@ const Example = () => {
         bg="#eee"
         sx={{
           position: 'relative',
-          borderRadius: 30,
+          borderRadius: 'extra-large',
           overflow: 'hidden',
           willChange: 'transform',
         }}

package/src/Ripple/Ripple.tsx

@@ -22,7 +22,7 @@ export const rippleStyle = ({
   backgroundColor: `var(${RIPPLE_BACKGROUND_COLOR})`,
   transformOrigin: 'center center',
   opacity: 0,
-  borderRadius: '50%',
+  borderRadius: '999999px',
   animation,
   willChange: 'opacity,transform',
 });

package/src/Ripple/RippleBox.tsx

@@ -28,6 +28,7 @@ export const RippleBox: <
       rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars
       center, // eslint-disable-line @typescript-eslint/no-unused-vars
       disabled, // eslint-disable-line @typescript-eslint/no-unused-vars
+      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars
       style, // eslint-disable-line @typescript-eslint/no-unused-vars
       ...otherProps
     } = props;

package/src/Ripple/useRippleSurface.ts

@@ -7,11 +7,12 @@ import { wrapEvent } from '@basic-ui/core';
 import { SxStyleProp } from '../Box';
 
 export interface UseRippleSurfaceOptions<T extends HTMLElement> {
-  baseOpacity?: string | number;
-  hoverOpacity?: string | number;
-  focusOpacity?: string | number;
-  pressedOpacity?: string | number;
+  baseOpacity?: number;
+  hoverOpacity?: number;
+  focusOpacity?: number;
+  pressedOpacity?: number;
   rippleColor?: string;
+  rippleEnabled?: boolean;
   center?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
@@ -35,6 +36,7 @@ export function useRippleSurface<T extends HTMLElement>(
     onPointerDown,
     style = {},
     disabled,
+    rippleEnabled = true,
     ...rippleProps
   } = opts;
 
@@ -84,18 +86,40 @@ export function useRippleSurface<T extends HTMLElement>(
     '&:hover::before': {
       opacity: hoverOpacity,
     },
-    '&:focus::before': {
+    '&:focus-visible::before': {
       opacity: focusOpacity,
     },
+    ...(!rippleEnabled && {
+      '&:active::before': {
+        opacity: pressedOpacity,
+      },
+    }),
+    '&[aria-pressed="true"]::before': {
+      opacity: baseOpacity + pressedOpacity,
+    },
+    '&[aria-pressed="true"]:hover::before': {
+      opacity: pressedOpacity + hoverOpacity,
+    },
+    '&[aria-pressed="true"]:focus-visible::before': {
+      opacity: pressedOpacity + focusOpacity,
+    },
+    ...(!rippleEnabled && {
+      '&[aria-pressed="true"]:active::before': {
+        opacity: pressedOpacity + pressedOpacity,
+      },
+    }),
     ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
-    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,&[data-disabled]:active::before']: {
+    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
+    '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']: {
       opacity: 0,
     },
     '&:disabled,&[data-disabled]': {
       cursor: 'default',
     },
     // ripple
-    '&::after': { ...rippleStyle({ animation }) },
+    ...(rippleEnabled && {
+      '&::after': { ...rippleStyle({ animation }) },
+    }),
   };
 
   return {