@basic-ui/material 1.0.0-alpha.32 → 1.0.0-alpha.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.33",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "42c1e44b1429227fe589e0f7a4bfeeb15b5e395a"
+  "gitHead": "475bece40050a72ea07ed47cf3f34eecd51d4484"
 }

package/src/Select/CustomContainerExample.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from 'react';
+
+import { alpha } from '../color';
+import { Box } from '../Box';
+import type { FilledContainerProps } from '../';
+import { FilledContainerOverlay } from '../';
+
+export const CustomContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
+  function CustomContainer(props, forwardedRef) {
+    const {
+      label,
+      labelIsFloating,
+      inputId,
+      hasFocus,
+      color: colorProp,
+      children,
+      error = false,
+      disabled = false,
+      forceActive = false,
+      leadingIcon,
+      ...otherProps
+    } = props;
+
+    const active = hasFocus || forceActive;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        disabled={disabled}
+        active={active || error}
+        __css={{
+          variant: 'text.label-small',
+          position: 'relative',
+          lineHeight: 0,
+          width: '100%',
+          height: 32,
+          overflow: 'hidden',
+          boxSizing: 'border-box',
+          borderRadius: 'full',
+          color: alpha('on.surface-variant', 0.87),
+          ...(disabled && {
+            backgroundColor: alpha('on.surface-variant', 0.08),
+            color: alpha('on.surface-variant', 0.38),
+          }),
+          ...(active && { color: 'primary' }),
+          '& > [role="button"]': {
+            variant: 'text.label-medium',
+            minHeight: 32,
+            py: 0,
+          },
+        }}
+        {...otherProps}
+      >
+        {children}
+        <FilledContainerOverlay forceActive={active} />
+      </Box>
+    );
+  }
+);

package/src/Select/Select.story.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
 
+import type { SelectProps } from './';
 import { Select } from './';
 import { SelectItem } from '../SelectItem';
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
+import { CustomContainer as CustomContainerExample } from './CustomContainerExample';
 // import './styles.css';
 
 export default {
@@ -23,7 +25,15 @@ const SearchIcon = (props) => (
   </svg>
 );
 
-const Example = ({ variant, native = false }) => {
+const Example = ({
+  variant,
+  native = false,
+  CustomContainer: Container = undefined,
+}: {
+  variant?: 'outlined' | 'filled';
+  native?: boolean;
+  CustomContainer?: SelectProps['CustomContainer'];
+}) => {
   const [error, setError] = useState<boolean | string>(false);
   const [color, setColor] = useState<'primary' | 'secondary'>('primary');
 
@@ -86,6 +96,7 @@ const Example = ({ variant, native = false }) => {
           value={color}
           onChange={(e, value) => setColor(value as 'primary' | 'secondary')}
           label="Color"
+          CustomContainer={Container}
         >
           <SelectItem value="primary">Primary</SelectItem>
           <SelectItem value="secondary">Secondary</SelectItem>
@@ -144,6 +155,7 @@ const Example = ({ variant, native = false }) => {
             helperText="Helper text"
             children={children}
             placeholder="Empty"
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
@@ -156,6 +168,7 @@ const Example = ({ variant, native = false }) => {
             defaultValue="20"
             helperText="Helper text"
             children={children}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
@@ -166,6 +179,7 @@ const Example = ({ variant, native = false }) => {
             variant={variant}
             label="Standard"
             children={children}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
@@ -178,6 +192,7 @@ const Example = ({ variant, native = false }) => {
             helperText="Helper text"
             disabled
             children={children}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
@@ -189,6 +204,7 @@ const Example = ({ variant, native = false }) => {
             label=""
             helperText="Helper text"
             children={children}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
@@ -201,6 +217,7 @@ const Example = ({ variant, native = false }) => {
             helperText="Helper text"
             children={children}
             leadingIcon={<SearchIcon />}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
@@ -213,6 +230,7 @@ const Example = ({ variant, native = false }) => {
             helperText="Helper text"
             children={children}
             leadingIcon={<SearchIcon />}
+            CustomContainer={Container}
           />
         </Box>
       </Box>
@@ -221,6 +239,9 @@ const Example = ({ variant, native = false }) => {
 };
 
 export const Filled = () => <Example variant="filled" />;
+export const CustomContainer = () => (
+  <Example CustomContainer={CustomContainerExample} />
+);
 export const Outlined = () => <Example variant="outlined" />;
 export const FilledNative = () => <Example variant="filled" native />;
 export const OutlinedNative = () => <Example variant="outlined" native />;

package/src/Select/Select.tsx

@@ -14,6 +14,7 @@ import {
 import type { Theme } from '../theme';
 import { useTheme } from '../theme';
 import { Select as SelectComp, SelectButton } from './styledComponents';
+import type { FilledContainerProps } from '../TextField/FilledContainer';
 import { FilledContainer } from '../TextField/FilledContainer';
 import { HelperText } from '../TextField/HelperText';
 import { OutlinedContainer } from '../TextField/OutlinedContainer';
@@ -48,6 +49,7 @@ export interface SelectProps
   onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
   renderValue?: (value?: string) => string | undefined;
   leadingIcon?: ReactNode;
+  CustomContainer?: ComponentType<FilledContainerProps>;
 }
 
 export const Select = forwardRef<
@@ -73,6 +75,7 @@ export const Select = forwardRef<
     children,
     renderValue: renderValueProp,
     leadingIcon = null,
+    CustomContainer: overwrittenContainer,
     ...otherProps
   } = props;
   const [value, onChange] = useControlledState(
@@ -89,7 +92,8 @@ export const Select = forwardRef<
   const fallbackId = useId();
   const theme = useTheme();
 
-  const Container = componentMap[variant] || OutlinedContainer;
+  const Container =
+    overwrittenContainer || componentMap[variant] || OutlinedContainer;
 
   const handleFocus = () => {
     setHasFocus(true);
@@ -147,7 +151,7 @@ export const Select = forwardRef<
           labelIsFloating={labelIsFloating}
           inputId={inputId}
           hasFocus={hasFocus}
-          disabled={disabled}
+          disabled={disabled ?? false}
           forceActive={open}
           error={hasError}
           leadingIcon={Boolean(leadingIcon)}

package/src/TextField/FilledContainer.tsx

@@ -24,9 +24,10 @@ const makeSelector = (
   `input:${state} ~ &,` +
   `select:${state} ~ &,` +
   `button:${state} ~ &,` +
-  `textarea:${state} ~ &`;
+  `textarea:${state} ~ &,` +
+  `[role="button"]:${state} ~ &`;
 
-const Overlay = (props: { forceActive?: boolean }) => {
+export const FilledContainerOverlay = (props: { forceActive?: boolean }) => {
   const { forceActive } = props;
   const theme = useTheme();
 
@@ -60,7 +61,7 @@ const Overlay = (props: { forceActive?: boolean }) => {
   );
 };
 
-const BorderBottom = () => (
+const FilledContainerBorderBottom = () => (
   <Box
     __css={{
       position: 'absolute',
@@ -163,8 +164,8 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
 
         {children}
 
-        <Overlay forceActive={active} />
-        <BorderBottom />
+        <FilledContainerOverlay forceActive={active} />
+        <FilledContainerBorderBottom />
         <LineRipple active={active || error} color={color} />
       </Box>
     );

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -1,9 +1,10 @@
 import type { ComponentType } from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import {
-  CorePalette,
   argbFromHex,
   hexFromArgb,
+  TonalPalette,
+  HCT,
 } from '@material/material-color-utilities';
 import type { Color } from '@basic-ui/color-picker';
 import { toColor } from '@basic-ui/color-picker';
@@ -98,10 +99,20 @@ const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
     'primary'
   );
 
-  const { a1, a2, a3, error, n1, n2 } = useMemo(
-    () => CorePalette.of(argbFromHex(primaryColor.hex)),
-    [primaryColor.hex]
-  );
+  const { a1, a2, a3, error, n1, n2 } = useMemo(() => {
+    /* This is from CorePalette.of(...) */
+    const argb = argbFromHex(primaryColor.hex);
+    const hct = HCT.fromInt(argb);
+    const hue = hct.hue;
+    return {
+      a1: TonalPalette.fromHueAndChroma(hue, Math.max(48, hct.chroma)),
+      a2: TonalPalette.fromHueAndChroma(hue, 16),
+      a3: TonalPalette.fromHueAndChroma(hue + 60, 24),
+      n1: TonalPalette.fromHueAndChroma(hue, 6),
+      n2: TonalPalette.fromHueAndChroma(hue, 8),
+      error: TonalPalette.fromHueAndChroma(25, 84),
+    };
+  }, [primaryColor.hex]);
 
   const [secondaryColor, secondaryColorTonal, setSecondaryColor] =
     useDeferredColor('secondary', a2);

package/src/ThemeExplorer/ThemeColors.tsx

@@ -43,33 +43,57 @@ export const ThemeColors = memo(
         <ColorRow
           colors={[
             {
-              token: `background`,
-              bg: scheme.background,
-              color: scheme.on.background,
+              token: `surface-dim`,
+              bg: scheme['surface-dim'],
+              color: scheme.on['surface'],
             },
             {
-              token: `on.background`,
-              bg: scheme.on.background,
-              color: scheme.background,
+              token: `surface`,
+              bg: scheme['surface'],
+              color: scheme.on['surface'],
             },
             {
-              token: `surface`,
-              bg: scheme.surface,
-              color: scheme.on.surface,
+              token: `surface-bright`,
+              bg: scheme['surface-bright'],
+              color: scheme.on['surface'],
             },
+          ]}
+        />
+        <ColorRow
+          colors={[
             {
-              token: `on.surface`,
-              bg: scheme.on.surface,
-              color: scheme.surface,
+              token: `surface-container-lowest`,
+              bg: scheme['surface-container-lowest'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-low`,
+              bg: scheme['surface-container-low'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container`,
+              bg: scheme['surface-container'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-high`,
+              bg: scheme['surface-container-high'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-highest`,
+              bg: scheme['surface-container-highest'],
+              color: scheme.on['surface'],
             },
           ]}
         />
         <ColorRow
           colors={[
             {
-              token: `surface-variant`,
-              bg: scheme['surface-variant'],
-              color: scheme.on['surface-variant'],
+              token: `on.surface`,
+              bg: scheme.on['surface'],
+              color: scheme['surface'],
             },
             {
               token: `on.surface-variant`,

package/src/ThemeExplorer/components.tsx

@@ -10,9 +10,9 @@ export const ColorItem = memo(
     token: string;
     style: CSSProperties;
     height?: number;
-    width: string;
+    flex: number;
   }) => {
-    const { token, style, width, height = '100%' } = props;
+    const { token, style, flex, height = '100%' } = props;
     const [computedColor, setComputedColor] = useState<string>();
     const hslColor = computedColor
       ? parseToHsl(computedColor)
@@ -43,7 +43,7 @@ export const ColorItem = memo(
       >
         <Text
           as="div"
-          variant="body-small"
+          variant="body-medium"
           style={style}
           ref={(ref: HTMLDivElement | null) => {
             if (ref) {
@@ -51,12 +51,10 @@ export const ColorItem = memo(
             }
           }}
           sx={{
-            width,
+            flex,
             height,
-            px: '10px',
-            py: '10px',
-            fontSize: '11px',
-            lineHeight: '11px',
+            px: '12px',
+            py: '12px',
             textOverflow: 'ellipsis',
             overflow: 'hidden',
           }}
@@ -80,27 +78,21 @@ export const ColorRow = memo(
         display="flex"
         sx={{
           ':first-of-type': {
-            borderTopLeftRadius: 'extra-large',
-            borderTopRightRadius: 'extra-large',
+            borderTopLeftRadius: 'large',
+            borderTopRightRadius: 'large',
             overflow: 'hidden',
           },
           ':last-of-type': {
-            borderBottomLeftRadius: 'extra-large',
-            borderBottomRightRadius: 'extra-large',
+            borderBottomLeftRadius: 'large',
+            borderBottomRightRadius: 'large',
             overflow: 'hidden',
           },
           height,
         }}
       >
-        {colors.map(({ token, bg, color }, idx) => (
+        {colors.map(({ token, bg, color }) => (
           <ColorItem
-            width={
-              colors.length % 2 === 1
-                ? idx === colors.length - 1
-                  ? '50%'
-                  : '25%'
-                : '33.33%'
-            }
+            flex={1}
             key={token}
             token={token}
             style={{ backgroundColor: bg, color: color }}

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -22,11 +22,19 @@ export function makeColorScheme(opts: {
     'secondary-container': c(opts.secondary, 90),
     'tertiary-container': c(opts.tertiary, 90),
     'error-container': c(opts.error, 90),
-    background: c(opts.neutral, 99),
-    surface: c(opts.neutral, 99),
+    background: c(opts.neutral, 98),
     'surface-variant': c(opts.neutralVariant, 90),
     outline: c(opts.neutralVariant, 50),
     'outline-variant': c(opts.neutralVariant, 80),
+    // https://material.io/blog/tone-based-surface-color-m3
+    'surface-dim': c(opts.neutral, 87),
+    surface: c(opts.neutral, 98),
+    'surface-bright': c(opts.neutral, 98),
+    'surface-container-lowest': c(opts.neutral, 100),
+    'surface-container-low': c(opts.neutral, 96),
+    'surface-container': c(opts.neutral, 94),
+    'surface-container-high': c(opts.neutral, 92),
+    'surface-container-highest': c(opts.neutral, 90),
     on: {
       primary: c(opts.primary, 100),
       secondary: c(opts.secondary, 100),
@@ -37,10 +45,18 @@ export function makeColorScheme(opts: {
       'tertiary-container': c(opts.tertiary, 10),
       'error-container': c(opts.error, 10),
       background: c(opts.neutral, 10),
-      surface: c(opts.neutral, 10),
       'surface-variant': c(opts.neutralVariant, 30),
       outline: c(opts.neutralVariant, 95),
       'outline-variant': c(opts.neutralVariant, 10),
+      // https://material.io/blog/tone-based-surface-color-m3
+      'surface-dim': c(opts.neutral, 10),
+      surface: c(opts.neutral, 10),
+      'surface-bright': c(opts.neutral, 10),
+      'surface-container-lowest': c(opts.neutral, 10),
+      'surface-container-low': c(opts.neutral, 10),
+      'surface-container': c(opts.neutral, 10),
+      'surface-container-high': c(opts.neutral, 10),
+      'surface-container-highest': c(opts.neutral, 10),
     },
     modes: {
       dark: {
@@ -52,11 +68,20 @@ export function makeColorScheme(opts: {
         'secondary-container': c(opts.secondary, 30),
         'tertiary-container': c(opts.tertiary, 30),
         'error-container': c(opts.error, 30),
-        background: c(opts.neutral, 10),
-        surface: c(opts.neutral, 10),
+        background: c(opts.neutral, 6),
         'surface-variant': c(opts.neutralVariant, 30),
         outline: c(opts.neutralVariant, 60),
         'outline-variant': c(opts.neutralVariant, 30),
+        // https://material.io/blog/tone-based-surface-color-m3
+        // TODO: get the actual values from here once updated: https://github.com/material-foundation/material-color-utilities/blob/main/dart/lib/scheme/scheme.dart#L126-L156
+        'surface-dim': c(opts.neutral, 6),
+        surface: c(opts.neutral, 6),
+        'surface-bright': c(opts.neutral, 24),
+        'surface-container-lowest': c(opts.neutral, 4),
+        'surface-container-low': c(opts.neutral, 10),
+        'surface-container': c(opts.neutral, 12),
+        'surface-container-high': c(opts.neutral, 17),
+        'surface-container-highest': c(opts.neutral, 22),
         on: {
           primary: c(opts.primary, 20),
           secondary: c(opts.secondary, 20),
@@ -67,10 +92,18 @@ export function makeColorScheme(opts: {
           'tertiary-container': c(opts.tertiary, 90),
           'error-container': c(opts.error, 90),
           background: c(opts.neutral, 90),
-          surface: c(opts.neutral, 90),
           'surface-variant': c(opts.neutralVariant, 80),
           outline: c(opts.neutralVariant, 10),
           'outline-variant': c(opts.neutralVariant, 90),
+          // https://material.io/blog/tone-based-surface-color-m3
+          'surface-dim': c(opts.neutral, 90),
+          surface: c(opts.neutral, 90),
+          'surface-bright': c(opts.neutral, 90),
+          'surface-container-lowest': c(opts.neutral, 90),
+          'surface-container-low': c(opts.neutral, 90),
+          'surface-container': c(opts.neutral, 90),
+          'surface-container-high': c(opts.neutral, 90),
+          'surface-container-highest': c(opts.neutral, 90),
         },
       },
     },