overleaf/services/web/frontend/stylesheets/variables/css-variables.less

:root {
  // Neutral
  --white: @white;
  --neutral-10: @neutral-10;
  --neutral-20: @neutral-20;
  --neutral-30: @neutral-30;
  --neutral-40: @neutral-40;
  --neutral-50: @neutral-50;
  --neutral-60: @neutral-60;
  --neutral-70: @neutral-70;
  --neutral-80: @neutral-80;
  --neutral-90: @neutral-90;

  // Green
  --green-10: @green-10;
  --green-20: @green-20;
  --green-30: @green-30;
  --green-40: @green-40;
  --green-50: @green-50;
  --green-60: @green-60;
  --green-70: @green-70;

  // Blue
  --blue-10: @blue-10;
  --blue-20: @blue-20;
  --blue-30: @blue-30;
  --blue-40: @blue-40;
  --blue-50: @blue-50;
  --blue-60: @blue-60;
  --blue-70: @blue-70;

  // Red
  --red-10: @red-10;
  --red-20: @red-20;
  --red-30: @red-30;
  --red-40: @red-40;
  --red-50: @red-50;
  --red-60: @red-60;
  --red-70: @red-70;

  // Yellow
  --yellow-10: @yellow-10;
  --yellow-20: @yellow-20;
  --yellow-30: @yellow-30;
  --yellow-40: @yellow-40;
  --yellow-50: @yellow-50;
  --yellow-60: @yellow-60;
  --yellow-70: @yellow-70;

  // legacy variables
  --ol-blue: @ol-blue;

  --ol-blue-gray-0: @ol-blue-gray-0;
  --ol-blue-gray-1: @ol-blue-gray-1;
  --ol-blue-gray-2: @ol-blue-gray-2;
  --ol-blue-gray-3: @ol-blue-gray-3;
  --ol-blue-gray-4: @ol-blue-gray-4;
  --ol-blue-gray-5: @ol-blue-gray-5;
  --ol-blue-gray-6: @ol-blue-gray-6;

  // input
  --input-color: @input-color;
  --input-border: @input-border;
  --input-border-radius: @input-border-radius;
  --input-border-focus: @input-border-focus;
  --input-border-danger: @state-danger-border;
  --input-shadow-danger-color: fade(@state-danger-border, 50%);

  // border
  --btn-border-radius-base: @btn-border-radius-base;
  --btn-default-bg: @btn-default-bg;

  // text
  --line-height-base: @line-height-base;

  // toolbar
  --toolbar-btn-color: @toolbar-btn-color;
  --editor-toolbar-bg: @editor-toolbar-bg;

  // gradient
  --premium-gradient: @premium-gradient;

  // website-redesign
  --emerald-green: @emerald-green;
  --emerald-green-dark: @emerald-green-dark;
  --mint-green: @mint-green;
  --ceil: @ceil;
  --caramel: @caramel;
  --dark-jungle-green: @dark-jungle-green;
  --malachite: @malachite;
  --sapphire-blue: @sapphire-blue;
  --sapphire-blue-dark: @sapphire-blue-dark;
  --vivid-tangerine: @vivid-tangerine;

  // spacing
  --spacing-00: @spacing-00; // 0px
  --spacing-01: @spacing-01; // 2px
  --spacing-02: @spacing-02; // 4px
  --spacing-03: @spacing-03; // 6px
  --spacing-04: @spacing-04; // 8px
  --spacing-05: @spacing-05; // 12px
  --spacing-06: @spacing-06; // 16px
  --spacing-07: @spacing-07; // 20px
  --spacing-08: @spacing-08; // 24px
  --spacing-09: @spacing-09; // 32px
  --spacing-10: @spacing-10; // 40px
  --spacing-11: @spacing-11; // 48px
  --spacing-12: @spacing-12; // 56px
  --spacing-13: @spacing-13; // 64px
  --spacing-14: @spacing-14; // 72px
  --spacing-15: @spacing-15; // 80px
  --spacing-16: @spacing-16; // 96px

  // layout
  --header-height: @header-height;

  // font-size
  --font-size-01: @font-size-01; // 0.75rem | 12px
  --font-size-02: @font-size-02; // 0.875rem | 14px
  --font-size-03: @font-size-03; // 1rem | 16px
  --font-size-04: @font-size-04; // 1.125rem | 18px
  --font-size-05: @font-size-05; // 1.25rem | 20px
  --font-size-06: @font-size-06; // 1.5rem | 24px
  --font-size-07: @font-size-07; // 1.875rem | 30px
  --font-size-08: @font-size-08; // 2.25rem | 36px
  --font-size-09: @font-size-09; // 3rem | 48px
  --font-size-10: @font-size-10; // 3.25rem | 52px
  --font-size-11: @font-size-11; // 3.75rem | 60px
  --font-size-12: @font-size-12; // 4.5rem | 72px
  --font-size-13: @font-size-13; // 6rem | 96px
  --font-size-body-base: @font-size-body-base;

  // line-height
  --line-height-01: @line-height-01; // 1rem | 16px
  --line-height-02: @line-height-02; // 1.25rem | 20px
  --line-height-03: @line-height-03; // 1.5rem | 24px
  --line-height-04: @line-height-04; // 1.75rem | 28px
  --line-height-05: @line-height-05; // 2rem | 32px
  --line-height-06: @line-height-06; // 2.5rem | 40px
  --line-height-07: @line-height-07; // 3rem | 48px
  --line-height-08: @line-height-08; // 4rem | 64px
  --line-height-09: @line-height-09; // 4.25rem | 68px
  --line-height-10: @line-height-10; // 5rem | 80px
  --line-height-11: @line-height-11; // 6rem | 96px
  --line-height-12: @line-height-12; // 8rem | 128px

  // border-radius
  --border-radius-base-new: @border-radius-base-new;
  --border-radius-medium-new: @border-radius-medium-new;
  --border-radius-large-new: @border-radius-large-new;
  --border-radius-full-new: @border-radius-full-new;

  // border-width
  --border-width-sm: @border-width-sm;
  --border-width-base: @border-width-base;
}