@basic-ui/material 1.0.0-alpha.42 → 1.0.0-alpha.44

package/src/theme/theme.ts

@@ -1,499 +1,499 @@
-// material theme preset
-// work-in-progress
-
-// references
-// - 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),
-    fontWeight: weight,
-  };
-}
-
-export const theme = {
-  googleFonts:
-    'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
-  colors: {
-    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',
-    'outline-variant': '#d3c2c9',
-    on: {
-      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',
-      'outline-variant': '#22191e',
-    },
-    modes: {
-      dark: {
-        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',
-        'outline-variant': '#4f4349',
-        on: {
-          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',
-          'outline-variant': '#efdee5',
-        },
-      },
-    },
-  },
-  sizes: {
-    icon: rem(24),
-    avatar: rem(48),
-  },
-  radii: {
-    none: 0,
-    default: rem(4),
-    '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: {
-    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 1px 3px rgba(0,0,0,0.3),0 4px 8px 3px rgba(0,0,0,0.15)',
-    4: '0 2px 3px rgba(0,0,0,0.3),0 6px 10px 4px rgba(0,0,0,0.15)',
-    5: '0 4px 4px rgba(0,0,0,0.3),0 8px 12px 6px rgba(0,0,0,0.15)',
-  },
-  fonts: {
-    body: 'Roboto, sans-serif',
-    heading: 'Roboto, sans-serif',
-    brand: 'Roboto, sans-serif',
-    plain: 'Roboto, sans-serif',
-    monospace: '"Roboto Mono", monospace',
-  },
-  fontSizes: {
-    0: rem(10),
-    1: rem(12),
-    2: rem(14),
-    3: rem(16),
-    4: rem(20),
-    5: rem(24),
-    6: rem(34),
-    7: rem(48),
-    8: rem(60),
-    9: rem(96),
-  },
-  fontWeights: {
-    light: 300,
-    regular: 400,
-    medium: 500,
-  },
-  lineHeights: {
-    body: 1.43,
-    heading: 1.2,
-  },
-  space: {
-    0: rem(0),
-    1: rem(4),
-    2: rem(8),
-    3: rem(16),
-    4: rem(32),
-    5: rem(64),
-    6: rem(128),
-    7: rem(256),
-    8: rem(512),
-  },
-  text: {
-    caps: {
-      textTransform: 'uppercase',
-      fontFamily: 'body',
-      lineHeight: 'body',
-      letterSpacing: '0.1em',
-    },
-    heading: {
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-    },
-    display: {
-      fontFamily: 'body',
-      lineHeight: 'body',
-    },
-    'display-large': font('brand', 64, 57, -0.25, 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', 15, 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',
-      fontSize: 9,
-      letterSpacing: em(-1.5, 96),
-    },
-    h2: {
-      variant: 'text.heading',
-      fontWeight: 'light',
-      fontSize: 8,
-      letterSpacing: em(-0.5, 60),
-    },
-    h3: {
-      variant: 'text.heading',
-      fontWeight: 'regular',
-      fontSize: 7,
-      letterSpacing: em(0, 48),
-    },
-    h4: {
-      variant: 'text.heading',
-      fontWeight: 'regular',
-      fontSize: 6,
-      letterSpacing: em(0.25, 34),
-    },
-    h5: {
-      variant: 'text.heading',
-      fontWeight: 'regular',
-      fontSize: 5,
-      letterSpacing: em(0, 24),
-    },
-    h6: {
-      variant: 'text.heading',
-      fontWeight: 'medium',
-      fontSize: 4,
-      letterSpacing: em(0.15, 20),
-    },
-    subtitle1: {
-      variant: 'text.heading',
-      fontWeight: 'regular',
-      fontSize: 3,
-      letterSpacing: em(0.15, 16),
-    },
-    subtitle2: {
-      variant: 'text.heading',
-      fontWeight: 'medium',
-      fontSize: 2,
-      letterSpacing: em(0.1, 14),
-    },
-    body1: {
-      variant: 'text.display',
-      fontWeight: 'regular',
-      fontSize: 3,
-      letterSpacing: em(0.5, 16),
-    },
-    body2: {
-      variant: 'text.display',
-      fontWeight: 'regular',
-      fontSize: 2,
-      letterSpacing: em(0.25, 14),
-    },
-    button: {
-      variant: 'text.display',
-      fontSize: 2,
-      letterSpacing: em(1.2, 14),
-      fontWeight: 'medium',
-    },
-    caption: {
-      variant: 'text.display',
-      fontWeight: 'regular',
-      fontSize: 1,
-      letterSpacing: em(0.4, 12),
-    },
-    overline: {
-      variant: 'text.caps',
-      fontWeight: 'medium',
-      fontSize: 0,
-      letterSpacing: em(1.5, 10),
-    },
-  },
-  appbar: {
-    variants: {
-      base: {
-        fontFamily: 'body',
-        fontSize: 4,
-      },
-      default: {
-        variant: 'appbar.variants.base',
-        backgroundColor: 'surface',
-        color: 'on.surface',
-      },
-      primary: {
-        variant: 'appbar.variants.base',
-        backgroundColor: 'primary',
-        color: 'on.primary',
-      },
-      secondary: {
-        variant: 'appbar.variants.base',
-        backgroundColor: 'secondary',
-        color: 'on.secondary',
-      },
-      transparent: {
-        variant: 'appbar.variants.base',
-        backgroundColor: 'transparent',
-        color: 'inherit',
-      },
-    },
-    elevations: {
-      default: {},
-      elevated: {
-        boxShadow: 2,
-      },
-    },
-    sizes: {
-      default: {
-        height: rem(64),
-        p: 3,
-      },
-      dense: {
-        height: rem(56),
-      },
-    },
-  },
-  buttons: {
-    variants: {
-      base: {
-        variant: 'text.label-large',
-        boxShadow: 'none',
-        py: 0,
-        px: rem(24),
-        height: rem(40),
-        borderRadius: 'full',
-        cursor: 'pointer',
-        outline: 'none',
-      },
-      text: {
-        variant: 'buttons.variants.base',
-        px: rem(12),
-      },
-      filled: {
-        variant: 'buttons.variants.base',
-      },
-      outlined: {
-        variant: 'buttons.variants.base',
-      },
-      fab: {
-        variant: 'buttons.variants.base',
-        height: rem(56),
-        maxHeight: rem(56),
-        width: rem(56),
-        maxWidth: rem(56),
-        borderRadius: 'large',
-        px: 0,
-      },
-      'fab-mini': {
-        variant: 'buttons.variants.fab',
-        height: rem(40),
-        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(56),
-        px: rem(16),
-        borderRadius: 'large',
-      },
-      icon: {
-        variant: 'buttons.variants.base',
-        height: rem(48),
-        maxHeight: rem(48),
-        width: rem(48),
-        maxWidth: rem(48),
-        px: rem(12),
-        borderRadius: 'full',
-      },
-    },
-    elevations: {
-      none: {},
-      default: {
-        transition: `box-shadow .28s ${EASING_STANDARD}`,
-        '&:hover': {
-          boxShadow: 1,
-        },
-        '&: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 ${EASING_STANDARD}`,
-        boxShadow: 3,
-        ':hover': {
-          boxShadow: 4,
-        },
-        '&:active,&:focus-visible': {
-          boxShadow: 3,
-        },
-        '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
-          boxShadow: 0,
-        },
-      },
-    },
-    overlays: {
-      transparent: {
-        hover: {
-          opacity: 0.08,
-        },
-        focus: {
-          opacity: 0.12,
-        },
-        pressed: {
-          opacity: 0.16,
-        },
-      },
-      filled: {
-        hover: {
-          opacity: 0.08,
-        },
-        focus: {
-          opacity: 0.12,
-        },
-        pressed: {
-          opacity: 0.16,
-        },
-      },
-    },
-  },
-  chips: {
-    variants: {
-      base: {
-        variant: 'text.body2',
-        boxShadow: 'none',
-        py: 0,
-        px: 0,
-        height: rem(32),
-        borderRadius: 'small',
-        outline: 'none',
-        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: 3,
-  },
-  paper: {
-    overlays: {
-      0: 0,
-      1: 0.05,
-      2: 0.08,
-      3: 0.11,
-      4: 0.12,
-      5: 0.14,
-    },
-  },
-  zIndices: {
-    appBar: 1100,
-    drawer: 1200,
-    dialog: 1300,
-    snackbar: 1400,
-    tooltip: 1500,
-  },
-  styles: {
-    root: {
-      body: {
-        fontFamily: 'plain',
-        fontWeight: 'regular',
-        lineHeight: 'body',
-        backgroundColor: 'surface',
-        color: 'on.surface',
-      },
-    },
-  },
-};
-
-export type Theme = typeof theme;
+// material theme preset
+// work-in-progress
+
+// references
+// - 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),
+    fontWeight: weight,
+  };
+}
+
+export const theme = {
+  googleFonts:
+    'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
+  colors: {
+    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',
+    'outline-variant': '#d3c2c9',
+    on: {
+      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',
+      'outline-variant': '#22191e',
+    },
+    modes: {
+      dark: {
+        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',
+        'outline-variant': '#4f4349',
+        on: {
+          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',
+          'outline-variant': '#efdee5',
+        },
+      },
+    },
+  },
+  sizes: {
+    icon: rem(24),
+    avatar: rem(48),
+  },
+  radii: {
+    none: 0,
+    default: rem(4),
+    '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: {
+    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 1px 3px rgba(0,0,0,0.3),0 4px 8px 3px rgba(0,0,0,0.15)',
+    4: '0 2px 3px rgba(0,0,0,0.3),0 6px 10px 4px rgba(0,0,0,0.15)',
+    5: '0 4px 4px rgba(0,0,0,0.3),0 8px 12px 6px rgba(0,0,0,0.15)',
+  },
+  fonts: {
+    body: 'Roboto, sans-serif',
+    heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
+    monospace: '"Roboto Mono", monospace',
+  },
+  fontSizes: {
+    0: rem(10),
+    1: rem(12),
+    2: rem(14),
+    3: rem(16),
+    4: rem(20),
+    5: rem(24),
+    6: rem(34),
+    7: rem(48),
+    8: rem(60),
+    9: rem(96),
+  },
+  fontWeights: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+  },
+  lineHeights: {
+    body: 1.43,
+    heading: 1.2,
+  },
+  space: {
+    0: rem(0),
+    1: rem(4),
+    2: rem(8),
+    3: rem(16),
+    4: rem(32),
+    5: rem(64),
+    6: rem(128),
+    7: rem(256),
+    8: rem(512),
+  },
+  text: {
+    caps: {
+      textTransform: 'uppercase',
+      fontFamily: 'body',
+      lineHeight: 'body',
+      letterSpacing: '0.1em',
+    },
+    heading: {
+      fontFamily: 'heading',
+      lineHeight: 'heading',
+    },
+    display: {
+      fontFamily: 'body',
+      lineHeight: 'body',
+    },
+    'display-large': font('brand', 64, 57, -0.25, 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', 15, 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',
+      fontSize: 9,
+      letterSpacing: em(-1.5, 96),
+    },
+    h2: {
+      variant: 'text.heading',
+      fontWeight: 'light',
+      fontSize: 8,
+      letterSpacing: em(-0.5, 60),
+    },
+    h3: {
+      variant: 'text.heading',
+      fontWeight: 'regular',
+      fontSize: 7,
+      letterSpacing: em(0, 48),
+    },
+    h4: {
+      variant: 'text.heading',
+      fontWeight: 'regular',
+      fontSize: 6,
+      letterSpacing: em(0.25, 34),
+    },
+    h5: {
+      variant: 'text.heading',
+      fontWeight: 'regular',
+      fontSize: 5,
+      letterSpacing: em(0, 24),
+    },
+    h6: {
+      variant: 'text.heading',
+      fontWeight: 'medium',
+      fontSize: 4,
+      letterSpacing: em(0.15, 20),
+    },
+    subtitle1: {
+      variant: 'text.heading',
+      fontWeight: 'regular',
+      fontSize: 3,
+      letterSpacing: em(0.15, 16),
+    },
+    subtitle2: {
+      variant: 'text.heading',
+      fontWeight: 'medium',
+      fontSize: 2,
+      letterSpacing: em(0.1, 14),
+    },
+    body1: {
+      variant: 'text.display',
+      fontWeight: 'regular',
+      fontSize: 3,
+      letterSpacing: em(0.5, 16),
+    },
+    body2: {
+      variant: 'text.display',
+      fontWeight: 'regular',
+      fontSize: 2,
+      letterSpacing: em(0.25, 14),
+    },
+    button: {
+      variant: 'text.display',
+      fontSize: 2,
+      letterSpacing: em(1.2, 14),
+      fontWeight: 'medium',
+    },
+    caption: {
+      variant: 'text.display',
+      fontWeight: 'regular',
+      fontSize: 1,
+      letterSpacing: em(0.4, 12),
+    },
+    overline: {
+      variant: 'text.caps',
+      fontWeight: 'medium',
+      fontSize: 0,
+      letterSpacing: em(1.5, 10),
+    },
+  },
+  appbar: {
+    variants: {
+      base: {
+        fontFamily: 'body',
+        fontSize: 4,
+      },
+      default: {
+        variant: 'appbar.variants.base',
+        backgroundColor: 'surface',
+        color: 'on.surface',
+      },
+      primary: {
+        variant: 'appbar.variants.base',
+        backgroundColor: 'primary',
+        color: 'on.primary',
+      },
+      secondary: {
+        variant: 'appbar.variants.base',
+        backgroundColor: 'secondary',
+        color: 'on.secondary',
+      },
+      transparent: {
+        variant: 'appbar.variants.base',
+        backgroundColor: 'transparent',
+        color: 'inherit',
+      },
+    },
+    elevations: {
+      default: {},
+      elevated: {
+        boxShadow: 2,
+      },
+    },
+    sizes: {
+      default: {
+        height: rem(64),
+        p: 3,
+      },
+      dense: {
+        height: rem(56),
+      },
+    },
+  },
+  buttons: {
+    variants: {
+      base: {
+        variant: 'text.label-large',
+        boxShadow: 'none',
+        py: 0,
+        px: rem(24),
+        height: rem(40),
+        borderRadius: 'full',
+        cursor: 'pointer',
+        outline: 'none',
+      },
+      text: {
+        variant: 'buttons.variants.base',
+        px: rem(12),
+      },
+      filled: {
+        variant: 'buttons.variants.base',
+      },
+      outlined: {
+        variant: 'buttons.variants.base',
+      },
+      fab: {
+        variant: 'buttons.variants.base',
+        height: rem(56),
+        maxHeight: rem(56),
+        width: rem(56),
+        maxWidth: rem(56),
+        borderRadius: 'large',
+        px: 0,
+      },
+      'fab-mini': {
+        variant: 'buttons.variants.fab',
+        height: rem(40),
+        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(56),
+        px: rem(16),
+        borderRadius: 'large',
+      },
+      icon: {
+        variant: 'buttons.variants.base',
+        height: rem(48),
+        maxHeight: rem(48),
+        width: rem(48),
+        maxWidth: rem(48),
+        px: rem(12),
+        borderRadius: 'full',
+      },
+    },
+    elevations: {
+      none: {},
+      default: {
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
+        '&:hover': {
+          boxShadow: 1,
+        },
+        '&: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 ${EASING_STANDARD}`,
+        boxShadow: 3,
+        ':hover': {
+          boxShadow: 4,
+        },
+        '&:active,&:focus-visible': {
+          boxShadow: 3,
+        },
+        '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
+          boxShadow: 0,
+        },
+      },
+    },
+    overlays: {
+      transparent: {
+        hover: {
+          opacity: 0.08,
+        },
+        focus: {
+          opacity: 0.12,
+        },
+        pressed: {
+          opacity: 0.16,
+        },
+      },
+      filled: {
+        hover: {
+          opacity: 0.08,
+        },
+        focus: {
+          opacity: 0.12,
+        },
+        pressed: {
+          opacity: 0.16,
+        },
+      },
+    },
+  },
+  chips: {
+    variants: {
+      base: {
+        variant: 'text.body2',
+        boxShadow: 'none',
+        py: 0,
+        px: 0,
+        height: rem(32),
+        borderRadius: 'small',
+        outline: 'none',
+        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: 3,
+  },
+  paper: {
+    overlays: {
+      0: 0,
+      1: 0.05,
+      2: 0.08,
+      3: 0.11,
+      4: 0.12,
+      5: 0.14,
+    },
+  },
+  zIndices: {
+    appBar: 1100,
+    drawer: 1200,
+    dialog: 1300,
+    snackbar: 1400,
+    tooltip: 1500,
+  },
+  styles: {
+    root: {
+      body: {
+        fontFamily: 'plain',
+        fontWeight: 'regular',
+        lineHeight: 'body',
+        backgroundColor: 'surface',
+        color: 'on.surface',
+      },
+    },
+  },
+};
+
+export type Theme = typeof theme;