@basic-ui/material 0.1.16 → 1.0.0-alpha.10

package/src/theme/theme.ts

@@ -3,49 +3,83 @@
 
 // references
 // - https://material.io/design/typography/the-type-system.html#type-scale
-import { rem, readableColor, mix, em } from 'polished';
+import { rem, em } from 'polished';
 
-const primary = '#5d1049';
-const secondary = '#e30425';
-const error = '#BF360C';
-const background = '#f6f6f6';
-const surface = '#fff';
-const muted = '#f6f6f6';
+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),
+    fontWeight: weight,
+  };
+}
 
 export const theme = {
   googleFonts:
     'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
   colors: {
-    background,
-    surface,
-    error,
-    primary,
-    secondary,
-    muted,
+    primary: '#934078',
+    secondary: '#705765',
+    tertiary: '#80543e',
+    error: '#ba1b1b',
+    'primary-container': '#ffd7ed',
+    'secondary-container': '#fbd9ea',
+    'tertiary-container': '#ffdbc9',
+    'error-container': '#ffdad4',
+    background: '#fcfcfc',
+    surface: '#fcfcfc',
+    'surface-variant': '#efdee5',
+    outline: '#81747a',
     on: {
-      primary: readableColor(primary),
-      secondary: readableColor(secondary),
-      error: readableColor(error),
-      background: readableColor(background),
-      surface: readableColor(surface),
-      muted: readableColor(muted),
+      primary: '#ffffff',
+      secondary: '#ffffff',
+      tertiary: '#ffffff',
+      error: '#ffffff',
+      'primary-container': '#3b002d',
+      'secondary-container': '#291521',
+      'tertiary-container': '#321303',
+      'error-container': '#410001',
+      background: '#1f1a1c',
+      surface: '#1f1a1c',
+      'surface-variant': '#4f4349',
+      outline: '#feecf3',
     },
     modes: {
       dark: {
-        text: '#000',
-        background: mix(0.08, primary, '#121212'),
-        surface: mix(0.08, primary, '#121212'),
-        error,
-        primary: '#EE89BD',
-        secondary,
-        muted,
+        primary: '#ffade0',
+        secondary: '#debece',
+        tertiary: '#f4ba9e',
+        error: '#ffb4a9',
+        'primary-container': '#77285f',
+        'secondary-container': '#57404d',
+        'tertiary-container': '#653d28',
+        'error-container': '#930006',
+        background: '#1f1a1c',
+        surface: '#1f1a1c',
+        'surface-variant': '#4f4349',
+        outline: '#9b8d93',
         on: {
-          primary: readableColor('#EE89BD'),
-          secondary: readableColor(secondary),
-          error: readableColor(error),
-          background: readableColor('#121212'),
-          surface: readableColor('#121212'),
-          muted: readableColor(muted),
+          primary: '#5b0e47',
+          secondary: '#402a37',
+          tertiary: '#4b2714',
+          error: '#680003',
+          'primary-container': '#ffd7ed',
+          'secondary-container': '#fbd9ea',
+          'tertiary-container': '#ffdbc9',
+          'error-container': '#ffdad4',
+          background: '#eae0e3',
+          surface: '#eae0e3',
+          'surface-variant': '#d3c2c9',
+          outline: '#22191e',
         },
       },
     },
@@ -57,10 +91,19 @@ export const theme = {
   radii: {
     none: 0,
     default: rem(4),
-    large: rem(8),
+    'extra-small': rem(4),
+    'extra-small_top': `${rem(4)} ${rem(4)} 0 0`,
+    small: rem(8),
+    medium: rem(12),
+    large: rem(16),
+    large_end: `0 ${rem(16)} ${rem(16)} 0`,
+    large_top: `${rem(16)} ${rem(16)} 0 0`,
+    'extra-large': rem(28),
+    'extra-large_top': `${rem(28)} ${rem(28)} 0 0`,
+    full: rem(99999),
     circle: '100%',
   },
-  shadows: {
+  shadowsOriginal: {
     0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
     1: '0 2px 1px -1px rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.14),0 1px 3px 0 rgba(0,0,0,0.12)',
     2: '0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)',
@@ -87,9 +130,19 @@ export const theme = {
     23: '0 11px 14px -7px rgba(0,0,0,0.2),0 23px 36px 3px rgba(0,0,0,0.14),0 9px 44px 8px rgba(0,0,0,0.12)',
     24: '0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12)',
   },
+  shadows: {
+    0: '0 0 0 0 rgba(0,0,0,0.2),0 0 0 0 rgba(0,0,0,0.14),0 0 0 0 rgba(0,0,0,0.12)',
+    1: '0 1px 2px rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15)',
+    2: '0 1px 2px rgba(0,0,0,0.3),0 2px 6px 2px rgba(0,0,0,0.15)',
+    3: '0 4px 8px 3px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.3)',
+    4: '0 6px 10px 4px rgba(0,0,0,0.15),0 2px 3px rgba(0,0,0,0.3)',
+    5: '0 8px 12px 6px rgba(0,0,0,0.15),0 4px 4px rgba(0,0,0,0.3)',
+  },
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
     monospace: '"Roboto Mono", monospace',
   },
   fontSizes: {
@@ -139,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('brand', 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',
@@ -200,11 +268,10 @@ export const theme = {
       letterSpacing: em(0.25, 14),
     },
     button: {
-      variant: 'text.caps',
+      variant: 'text.display',
       fontSize: 2,
+      letterSpacing: em(1.2, 14),
       fontWeight: 'medium',
-      letterSpacing: em(1.25, 14),
-      lineHeight: 'normal',
     },
     caption: {
       variant: 'text.display',
@@ -249,34 +316,34 @@ export const theme = {
     elevations: {
       default: {},
       elevated: {
-        boxShadow: 4,
+        boxShadow: 2,
       },
     },
     sizes: {
       default: {
-        height: rem(56),
+        height: rem(64),
         p: 3,
       },
       dense: {
-        height: rem(48),
+        height: rem(56),
       },
     },
   },
   buttons: {
     variants: {
       base: {
-        variant: 'text.button',
-        borderRadius: 'default',
+        variant: 'text.label-large',
         boxShadow: 'none',
         py: 0,
-        px: 3,
-        height: rem(36),
+        px: rem(24),
+        height: rem(40),
+        borderRadius: 'full',
         cursor: 'pointer',
         outline: 'none',
       },
       text: {
         variant: 'buttons.variants.base',
-        px: 2,
+        px: rem(12),
       },
       filled: {
         variant: 'buttons.variants.base',
@@ -290,7 +357,8 @@ export const theme = {
         maxHeight: rem(56),
         width: rem(56),
         maxWidth: rem(56),
-        borderRadius: 'circle',
+        borderRadius: 'large',
+        px: 0,
       },
       'fab-mini': {
         variant: 'buttons.variants.fab',
@@ -298,13 +366,23 @@ export const theme = {
         maxHeight: rem(40),
         width: rem(40),
         maxWidth: rem(40),
+        borderRadius: 'medium',
+        px: 0,
+      },
+      'fab-large': {
+        variant: 'buttons.variants.fab',
+        height: rem(96),
+        maxHeight: rem(96),
+        width: rem(96),
+        maxWidth: rem(96),
+        borderRadius: 'extra-large',
         px: 0,
       },
       'fab-extended': {
         variant: 'buttons.variants.base',
-        height: rem(48),
-        px: rem(20),
-        borderRadius: rem(24),
+        height: rem(56),
+        px: rem(16),
+        borderRadius: 'large',
       },
       icon: {
         variant: 'buttons.variants.base',
@@ -313,32 +391,41 @@ export const theme = {
         width: rem(48),
         maxWidth: rem(48),
         px: rem(12),
-        borderRadius: '100%',
+        borderRadius: 'full',
       },
     },
     elevations: {
       none: {},
-      contained: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
-        boxShadow: 2,
-        ':focus,:hover': {
-          boxShadow: 4,
+      default: {
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
+        '&:hover': {
+          boxShadow: 1,
         },
-        ':active': {
-          boxShadow: 8,
+        '&:active,&:focus-visible,&:disabled': {
+          boxShadow: 0,
+        },
+      },
+      elevated: {
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
+        boxShadow: 1,
+        '&:hover': {
+          boxShadow: 2,
+        },
+        '&:active,&:focus-visible': {
+          boxShadow: 1,
         },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0,
         },
       },
       floating: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
-        boxShadow: 6,
-        ':focus,:hover': {
-          boxShadow: 8,
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
+        boxShadow: 3,
+        ':hover': {
+          boxShadow: 4,
         },
-        ':active': {
-          boxShadow: 12,
+        '&:active,&:focus-visible': {
+          boxShadow: 3,
         },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0,
@@ -348,13 +435,13 @@ export const theme = {
     overlays: {
       transparent: {
         hover: {
-          opacity: 0.04,
+          opacity: 0.08,
         },
         focus: {
           opacity: 0.12,
         },
         pressed: {
-          opacity: 0.12,
+          opacity: 0.16,
         },
       },
       filled: {
@@ -362,10 +449,10 @@ export const theme = {
           opacity: 0.08,
         },
         focus: {
-          opacity: 0.24,
+          opacity: 0.12,
         },
         pressed: {
-          opacity: 0.24,
+          opacity: 0.16,
         },
       },
     },
@@ -378,45 +465,38 @@ export const theme = {
         py: 0,
         px: 0,
         height: rem(32),
-        borderRadius: rem(16),
+        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',
+        boxShadow: 1,
+        ':active:not([data-disabled])': {
+          boxShadow: 2,
+        },
       },
       outlined: {
         variant: 'chips.variants.base',
       },
     },
   },
+  dialogs: {
+    variants: {
+      base: {
+        borderRadius: 'extra-large',
+      },
+    },
+    backgroundColorOverlay: 0.11,
+  },
   paper: {
     overlays: {
-      '0': 0,
-      '1': 0.05,
-      '2': 0.07,
-      '3': 0.08,
-      '4': 0.09,
-      '5': 0.1,
-      '6': 0.11,
-      '7': 0.115,
-      '8': 0.12,
-      '9': 0.125,
-      '10': 0.13,
-      '11': 0.135,
-      '12': 0.14,
-      '13': 0.1425,
-      '14': 0.145,
-      '15': 0.1475,
-      '16': 0.15,
-      '17': 0.15125,
-      '18': 0.1525,
-      '19': 0.15375,
-      '20': 0.155,
-      '21': 0.15625,
-      '22': 0.1575,
-      '23': 0.15875,
-      '24': 0.16,
+      0: 0,
+      1: 0.05,
+      2: 0.08,
+      3: 0.11,
+      4: 0.12,
+      5: 0.14,
     },
   },
   zIndices: {

package/src/theme/useTheme.ts

@@ -1,5 +1,7 @@
 import { useTheme as useEmotionTheme } from '@emotion/react';
-import { theme, Theme as MaterialTheme } from './theme';
+
+import type { Theme as MaterialTheme } from './theme';
+import { theme } from './theme';
 
 declare module '@emotion/react' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

package/src/ListItem/context.ts

@@ -1,13 +0,0 @@
-import { useContext, createContext } from 'react';
-
-// ListItem Component
-export interface ListItemContextProps {
-  color: string;
-  disabled?: boolean;
-}
-
-const listitemContext = createContext<ListItemContextProps>({
-  color: 'on.surface',
-});
-export const { Provider: ListItemProvider } = listitemContext;
-export const useListItemContext = () => useContext(listitemContext);