Skip to content

Vuetify-preset-reply

Reply is an email app that uses Material Design components and Material Theming to create an on-brand communication experience.

index.js 

require('./overrides.sass')

const preset = {
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#344955',
        secondary: '#F9AA33',
        tertiary: '#232F34',
        quaternary: '#4A6572',
      },
    },
  },
}

module.exports = { preset }

overrides.sass 

@import './variables.scss'

.theme--light
  // Remove after v2.2 release
  .v-card.v-sheet
    +elevation(0)

  .v-btn.v-btn--fab
    &.v-btn--absolute,
    &.v-btn--fixed
      +elevation(1)

  .v-bottom-sheet.v-dialog
    border-radius: $dialog-border-radius
    box-shadow: none

    > *:only-child
      border-radius: inherit
      box-shadow: none

variables.sass 

@import '~vuetify/src/styles/styles.sass';

// Reply specific variables
$reply-font-size: 16;

// Preset variables
$body-font-family: 'Work Sans', sans-serif;
$btn-font-weight: 500;
$card-border-radius: 0;
$card-elevation: 0;
$dialog-border-radius: 12px 12px 0 0;
$headings: (
  'h1':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{96 / $reply-font-size}rem,
    'weight': 300
  ),
  'h2':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{60 / $reply-font-size}rem,
    'weight': 600
  ),
  'h3':(
    'font-family': $heading-font-family,
    'letter-spacing': initial,
    'size': #{48 / $reply-font-size}rem,
    'weight': 400
  ),
  'h4':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{34 / $reply-font-size}rem,
    'weight': 400
  ),
  'h5':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{24 / $reply-font-size}rem,
    'weight': 700
  ),
  'h6':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{20 / $reply-font-size}rem,
    'weight': 500
  ),
  'subtitle-1':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{16 / $reply-font-size}rem,
    'weight': 400
  ),
  'subtitle-2':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{14 / $reply-font-size}rem,
    'weight': 500
  ),
  'body-1':(
    'font-family': $heading-font-family,
    'letter-spacing': initial,
    'size': #{18 / $reply-font-size}rem,
    'weight': 400
  ),
  'body-2':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{14 / $reply-font-size}rem,
    'weight': 400
  ),
  'caption':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{12 / $reply-font-size}rem,
    'weight': 400
  ),
  'overline':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{12 / $reply-font-size}rem,
    'weight': 600
  )
);
$material-light: (
  'status-bar': (
    'regular': #D2DBE0
  ),
  'background': #FFFFFF,
);

See also

Favorite site