packages/styles/scss/lib/_config.scss

   1 @use 'sass:math';
   2 @use 'im-to-em' as *;
   3
   4 $base-font-size: 14 !default; // if "14" then 1em = 14px
   5 $base-line-height: math.div(20, $base-font-size) !default; // Design specs says 20px
   6
   7 $title-sizes: (
   8         h1: 36,
   9         h2: 28,
  10         h3: 20,
  11         h4: 18,
  12         h5: 17,
  13         h6: 16,
  14 ) !default;
  15
  16 // Use typo helpers on demand
  17 $use-other-typo-helpers: true !default;
  18 $use-other-line-height-helpers: true !default;
  19
  20 // fonts
  21 /* stylelint-disable-next-line value-keyword-case */
  22 $font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
  23         monospace !default;
  24
  25 // Breakpoints for include-media
  26 $breakpoints: im-to-em(
  27         (
  28                 'xlarge': 1500px,
  29                 'large': 1100px,
  30                 'medium': 910px,
  31                 'small': 680px,
  32                 'xsmall': 450px,
  33         )
  34 ) !default;
  35
  36 // specific breakpoints
  37 $breakpoint-for-drawer: 1400px;
  38
  39 // Media expressions for include-media
  40 $media-expressions: (
  41         'all': 'all',
  42         'screen': 'screen',
  43         'print': 'print',
  44         'mouse': '(hover: hover) and (pointer: fine)',
  45         'touch': '(hover: hover) and (pointer: coarse), (hover: none)',
  46         'landscape': '(orientation: landscape)',
  47         'portrait': '(orientation: portrait)',
  48         'reduced-motion': '(prefers-reduced-motion: reduce)',
  49 ) !default;
  50
  51 // RTL
  52 // RTL = Right To Left =>
  53 // to adapt a website in a language that is written from right to left
  54 // designed for multilingual websites with LTR et RTL
  55 $rtl-option: true !default;
  56
  57 // Custom scrollbar everywhere
  58 $custom-scroll: true !default;
  59
  60 // hyphens
  61 $hyphenation: false !default;
  62
  63 // clear floats
  64 $use-clearleft-right: false !default;
  65 $use-clearhidden: false !default;
  66 $use-clearfix: false !default;
  67
  68 // basic premise: default user setting for font size is at 16 pixels in the browser
  69 // you should NEVER update this value, however… who can predict the future…
  70 $root-default-font-size: 16 !default;
  71
  72 // others
  73 $use-reset-button: true !default;
  74 $use-vertical-align-img-iframe: true !default;
  75 $use-ie-calc-font-fallback: false !default;
  76 $use-old-ie-fallbacks: true !default;
  77 $use-height-auto-img: true !default;
  78 $use-height-auto-td: true !default;
  79 $use-height-auto-table: true !default;
  80
  81 // default config for webpack
  82 $path-images: '~@proton/styles/assets/img/illustrations/' !default;
  83
  84 // variables for global layouts, allowing you to use calc for components and adapt quickly if needed
  85 $header-height: 60 !default;
  86 $header-height-small: 44 !default;
  87 $width-sidebar: 250 !default; // main navigation
  88 $context-bar-width: 25vw !default; // context bar on the right
  89 $context-bar-min-width: 300 !default;
  90 $context-bar-max-width: 400 !default;
  91 $default-height-fields: 36 !default;
  92 /* stylelint-disable-next-line */
  93 $focus-ring-size: 0.1875rem; // 3px
  94
  95 $conversations-column-width: 35% !default; // used also to align search bar on top
  96
  97 $label-width: 18em !default;
  98 $conversation-icon-size: 32 !default;
  99 $conversation-icon-size-small: 28 !default;
 100
 101 // Z-indexes for stacking management
 102 $z-indexes: (
 103         'up': 10,
 104         'dropzone': 100,
 105         'floating-action-buttons': 200,
 106         'drawer': 300,
 107         'floating-frames': 400,
 108         'previewer': 500,
 109         'transfer-manager': 600,
 110         'spotlights': 700,
 111         // Can be overridden to display above modals
 112         'mobile-navigation': 800,
 113         'modals': 900,
 114         'notifications': 1000,
 115         'tooltips': 1100,
 116 );