admin-bro/src/frontend/styles/variables.ts

Admin panel for apps written in node.js

import 'styled-components'

/**
 * @file Default AdminBro theme
 */

// sorted alphabetically
export const colors = {
  bck: '#fff',
  defaultText: '#111114',
  lightText: '#a9aabc',
  lightBck: '#F8F8FA',
  superLightBack: '#F1F1F5',
  border: '#eeeeef',
  borderOnDark: '#4E5779',
  innerBck: '#f7f7Fa',
  darkBck: '#303b62',
  superDarkBck: '#192035',
  inputBck: '#fff',
  filterDefaultText: '#fff',

  love: '#e6282b',
  primary: '#718af4',
  primaryHover: '#545B8C',
  success: '#21C197',
  successBorder: '#8CDAD9',
  lightSuccess: '#DBF0F1',
  error: '#F0616F',
  lightError: '#F6E1E6',
  warning: '#FF9F89',
}

export const sizes = {
  navbarHeight: '64px',
  sidebarWidth: '300px',
  sidebarMobileWidth: '98px',
  paddingLayout: '30px',
  padding: '15px',
  paddingMin: '5px',
}

export const fonts = {
  base: '14px',
  medium: '12px',
  min: '11px',
  header: '32px',
}

export const breakpoints = {
  minMobileWidth: '320px',
  minTabletWidth: '769px',
  minDesktopWidth: '1024px',
  minWidescreenWidth: '1216px',
  minFullhdWidth: '1408px',
}