@basic-ui/material 1.0.0-alpha.6 → 1.0.0-alpha.9

package/src/color.ts

@@ -17,17 +17,38 @@ export const alpha =
     return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
   };
 
+export function mixColor(
+  baseColor: string,
+  overlayColor: string
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity?: number
+): (theme: any) => string {
+  return (theme) => {
+    baseColor = get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity
+      ? alpha(overlayColor, overlayOpacity)(theme)
+      : get(theme, `colors.${overlayColor}`, overlayColor);
+
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
+
 export function getColorOverlay(
   theme: Theme,
   baseColor: string,
   overlayColor: string,
   overlayOpacity: number
 ): SystemStyleObject {
-  baseColor = get(theme, `colors.${baseColor}`) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
-
   return {
-    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),
   };
 }
 

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';
@@ -33,5 +34,6 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';

package/src/motion.ts

@@ -0,0 +1,7 @@
+export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';

package/src/theme/theme.ts

@@ -5,6 +5,24 @@
 // - https://material.io/design/typography/the-type-system.html#type-scale
 import { rem, em } from 'polished';
 
+import { EASING_STANDARD } from '../motion';
+
+function font(
+  fontFamily: 'plain' | 'brand',
+  lineHeight: number,
+  fontSize: number,
+  letterSpacing: number,
+  weight: number
+) {
+  return {
+    fontFamily,
+    lineHeight: rem(lineHeight),
+    fontSize: rem(fontSize),
+    letterSpacing: rem(letterSpacing),
+    weight,
+  };
+}
+
 export const theme = {
   googleFonts:
     'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
@@ -123,6 +141,8 @@ export const theme = {
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
     monospace: '"Roboto Mono", monospace',
   },
   fontSizes: {
@@ -172,6 +192,21 @@ export const theme = {
       fontFamily: 'body',
       lineHeight: 'body',
     },
+    'display-large': font('brand', 64, 57, 0, 400),
+    'display-medium': font('brand', 52, 45, 0, 400),
+    'display-small': font('brand', 44, 36, 0, 400),
+    'headline-large': font('brand', 40, 32, 0, 400),
+    'headline-medium': font('brand', 36, 28, 0, 400),
+    'headline-small': font('brand', 32, 24, 0, 400),
+    'title-large': font('plain', 28, 22, 0, 400),
+    'title-medium': font('plain', 24, 16, 0.15, 500),
+    'title-small': font('plain', 20, 14, 0.1, 500),
+    'label-large': font('plain', 20, 14, 0.1, 500),
+    'label-medium': font('plain', 16, 12, 0.5, 500),
+    'label-small': font('plain', 16, 11, 0.5, 500),
+    'body-large': font('plain', 24, 16, 0.5, 400),
+    'body-medium': font('plain', 20, 14, 0.25, 400),
+    'body-small': font('plain', 16, 12, 0.4, 400),
     h1: {
       variant: 'text.heading',
       fontWeight: 'light',
@@ -362,7 +397,7 @@ export const theme = {
     elevations: {
       none: {},
       default: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         '&:hover': {
           boxShadow: 1,
         },
@@ -371,7 +406,7 @@ export const theme = {
         },
       },
       elevated: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 1,
         '&:hover': {
           boxShadow: 2,
@@ -381,7 +416,7 @@ export const theme = {
         },
       },
       floating: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 3,
         ':hover': {
           boxShadow: 4,
@@ -426,7 +461,7 @@ export const theme = {
         height: rem(32),
         borderRadius: 'small',
         outline: 'none',
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
       },
       filled: {
         variant: 'chips.variants.base',

package/src/ThemeExplorer/ThemeExplorer.story.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { useTheme } from '@emotion/react';
-
-import { ThemeColors } from './ThemeColors';
-import { DARK_THEME_CLASS, DEFAULT_THEME_CLASS, Box } from '../';
-
-export default {
-  title: 'components/ThemeExplorer',
-};
-
-const ThemeExplorer = () => {
-  const theme = useTheme();
-  return (
-    <>
-      <Box
-        flex="1"
-        p={3}
-        borderRadius="extra-large"
-        overflow="hidden"
-        border="1px solid #fff"
-        borderColor="outline"
-        bg="surface"
-        className={DEFAULT_THEME_CLASS}
-      >
-        <ThemeColors scheme={theme.colors as any} />
-      </Box>
-      <Box
-        flex="1"
-        p={3}
-        borderRadius="extra-large"
-        overflow="hidden"
-        border="1px solid #fff"
-        borderColor="outline"
-        bg="surface"
-        className={DARK_THEME_CLASS}
-      >
-        <ThemeColors scheme={theme.colors.modes.dark as any} />
-      </Box>
-    </>
-  );
-};
-
-export const Explorer = () => <ThemeExplorer />;