@finbertmds/fuselage-tokens/breakpoints.js

Design tokens for Fuselage, Rocket.Chat's design system

'use strict';

module.exports = {
  xs: {
    name: 'xs',
    minViewportWidth: null,
    columns: 4,
    gutterWidth: 16,
  },
  sm: {
    name: 'sm',
    minViewportWidth: 600,
    columns: 8,
    gutterWidth: 16,
  },
  md: {
    name: 'md',
    minViewportWidth: 768,
    columns: 8,
    gutterWidth: 24,
  },
  lg: {
    name: 'lg',
    minViewportWidth: 1024,
    columns: 12,
    gutterWidth: 24,
  },
  xl: {
    name: 'xl',
    minViewportWidth: 1280,
    columns: 12,
    gutterWidth: 24,
  },
  xxl: {
    name: 'xxl',
    minViewportWidth: 1600,
    columns: 12,
    gutterWidth: 24,
  },
  xxxl: {
    name: 'xxxl',
    minViewportWidth: 1920,
    columns: 12,
    gutterWidth: 24,
  },
};