@basic-ui/material 1.0.0-alpha.25 → 1.0.0-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.25",
+  "version": "1.0.0-alpha.27",
   "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": "0d58f1872e2d6e046d1f17296322c9a6588a8a57"
+  "gitHead": "062149324aa0b0df6dd2a3cd9b7e8b88fdd2e783"
 }

package/src/Button/OutlinedButton.tsx

@@ -17,7 +17,7 @@ export const OutlinedButton = styled(TransparentButton)(
     },
     '&:disabled': {
       color: alpha('on.surface', 0.38),
-      borderColor: alpha('on.surface', 0.12),
+      borderColor: alpha('outline', 0.12),
       cursor: 'default',
     },
   }),

package/src/Divider/Divider.tsx

@@ -4,7 +4,6 @@ import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
-import { alpha } from '../color';
 
 export interface DividerProps extends BoxProps {
   as?: ElementType<any>;
@@ -33,13 +32,13 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
             height: 0,
             borderBottomWidth: rem(1),
             borderBottomStyle: 'solid',
-            borderBottomColor: alpha('on.surface', 0.12),
+            borderBottomColor: 'outline',
           }),
           ...(direction === 'vertical' && {
             width: 0,
             borderRightWidth: rem(1),
             borderRightStyle: 'solid',
-            borderRightColor: alpha('on.surface', 0.12),
+            borderRightColor: 'outline',
           }),
           ...__css,
         }}

package/src/NavRail/NavRailItem.tsx

@@ -35,10 +35,10 @@ export const NavRailIndicator = forwardRef<
       data-nav-rail-item-indicator=""
       {...otherProps}
       __css={{
-        width: '100%',
         height: '100%',
-        maxWidth: rem(56),
-        maxHeight: rem(56),
+        width: [rem(64), rem(56)],
+        maxWidth: [rem(64), rem(56)],
+        maxHeight: [rem(64), rem(56)],
         borderRadius: 'full',
         bg: 'var(--indicator-background-color)',
         display: 'flex',

package/src/Paper/Paper.tsx

@@ -5,11 +5,7 @@ import { rem } from 'polished';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { useTheme } from '../theme';
-import {
-  alpha,
-  getBackgroundOverlay,
-  getDarkThemeBackgroundOverlay,
-} from '../color';
+import { getBackgroundOverlay, getDarkThemeBackgroundOverlay } from '../color';
 
 export interface PaperProps extends BoxProps {
   as?: ElementType<any>;
@@ -48,7 +44,7 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
           ? {
               borderStyle: 'solid',
               borderWidth: rem(1),
-              borderColor: alpha('on.surface', 0.12),
+              borderColor: 'surface-variant',
             }
           : {}),
         ...(backgroundOverlay

package/src/Snackbar/index.ts

@@ -1,2 +1,3 @@
 export * from './Snackbar';
 export * from './Stack';
+export * from './useSnackbarAnimation';

package/src/Snackbar/useSnackbarAnimation.ts

@@ -66,7 +66,7 @@ const slideFromLeft = {
 };
 
 type AnimationState = 'entering' | 'entered' | 'exiting';
-export const placements = {
+const placements = {
   'top-right': {
     style: { top: 3, right: 3 },
     animate: (state: AnimationState, translateY: number) =>

package/src/Table/Table.tsx

@@ -1,3 +1,4 @@
+import { rem } from 'polished';
 import { forwardRef } from 'react';
 
 import type { PaperProps } from '../Paper';
@@ -6,7 +7,7 @@ import { Paper } from '../Paper';
 export type TableProps = PaperProps;
 
 export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
-  const { children, elevation = 1, ...rest } = props;
+  const { children, elevation = 0, __css, ...rest } = props;
 
   return (
     <Paper
@@ -17,6 +18,14 @@ export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
       flexDirection="column"
       elevation={elevation}
       darkThemeBackgroundOverlay={elevation}
+      borderRadius="extra-large"
+      __css={{
+        borderColor: 'surface-variant',
+        borderWidth: rem(2),
+        borderStyle: 'solid',
+        overflowX: 'auto',
+        ...__css,
+      }}
       {...rest}
     >
       {children}

package/src/Table/TableHead.tsx

@@ -4,7 +4,7 @@ import { rem } from 'polished';
 import { TableHeadProvider } from './context';
 import type { TableBodyProps } from './TableBody';
 import { TableBody } from './TableBody';
-import { alpha } from '../color';
+import { mixColor } from '../color';
 
 export type TableHeadProps = TableBodyProps;
 
@@ -18,7 +18,8 @@ export const TableHead = forwardRef<HTMLDivElement, TableHeadProps>(
         __css={{
           borderBottomStyle: 'solid',
           borderBottomWidth: rem(1),
-          borderBottomColor: alpha('on.surface', 0.12),
+          borderBottomColor: 'surface-variant',
+          background: mixColor('surface', 'primary', 0.05),
           ...__css,
         }}
         {...rest}

package/src/Table/TableRow.tsx

@@ -3,7 +3,6 @@ import { rem } from 'polished';
 
 import type { TextProps } from '../Text';
 import { Text } from '../Text';
-import { alpha } from '../color';
 
 export type TableRowProps = TextProps;
 
@@ -24,7 +23,7 @@ export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
         __css={{
           borderBottomStyle: 'solid',
           borderBottomWidth: rem(1),
-          borderBottomColor: alpha('on.surface', 0.12),
+          borderBottomColor: 'surface-variant',
           '&:last-of-type': {
             borderBottom: 'none',
           },

package/src/ThemeExplorer/ThemeColors.tsx

@@ -81,6 +81,11 @@ export const ThemeColors = memo(
               bg: scheme.outline,
               color: scheme.on.outline,
             },
+            {
+              token: `outline-variant`,
+              bg: scheme['outline-variant'],
+              color: scheme.on['outline-variant'],
+            },
           ]}
         />
       </Box>

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -26,6 +26,7 @@ export function makeColorScheme(opts: {
     surface: c(opts.neutral, 99),
     'surface-variant': c(opts.neutralVariant, 90),
     outline: c(opts.neutralVariant, 50),
+    'outline-variant': c(opts.neutralVariant, 80),
     on: {
       primary: c(opts.primary, 100),
       secondary: c(opts.secondary, 100),
@@ -39,6 +40,7 @@ export function makeColorScheme(opts: {
       surface: c(opts.neutral, 10),
       'surface-variant': c(opts.neutralVariant, 30),
       outline: c(opts.neutralVariant, 95),
+      'outline-variant': c(opts.neutralVariant, 10),
     },
     modes: {
       dark: {
@@ -54,6 +56,7 @@ export function makeColorScheme(opts: {
         surface: c(opts.neutral, 10),
         'surface-variant': c(opts.neutralVariant, 30),
         outline: c(opts.neutralVariant, 60),
+        'outline-variant': c(opts.neutralVariant, 30),
         on: {
           primary: c(opts.primary, 20),
           secondary: c(opts.secondary, 20),
@@ -67,6 +70,7 @@ export function makeColorScheme(opts: {
           surface: c(opts.neutral, 90),
           'surface-variant': c(opts.neutralVariant, 80),
           outline: c(opts.neutralVariant, 10),
+          'outline-variant': c(opts.neutralVariant, 90),
         },
       },
     },

package/src/color.ts

@@ -12,6 +12,9 @@ export const alpha =
       const color = get(theme, 'colors.' + colorString + '_rgb', colorString);
       return `rgba(${color},${alphaValue})`;
     }
+    if (color.startsWith('rgba(')) {
+      return color;
+    }
 
     const rgb = parseToRgb(color);
     return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;