packages/ketcher-react/src/style/variables.less

/****************************************************************************
 * Copyright 2021 EPAM Systems
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 ***************************************************************************/

//Fonts
@font-size-header: 14px;
@line-height-header: 12px;

@font-size-regular: 12px;
@line-height-regular: 14px;

@font-size-input: 14px;
@line-height-input: 16px;

@font-size-small: 8px;

@font-weight-medium: 500;

@Inter: Inter, FreeSans, Arimo, 'Droid Sans', Helvetica, 'Helvetica Neue', Arial,
  sans-serif;

//Modal margin
@margin-top-bottom: 12px;
@margin-left-right: 12px;

@padding-modal: 12px;

@color-gray: #dddddd;

//using for changing color of SVG for checkboxes and radiobuttons
@color-input: escape(@color-primary);
@color-input-hover-svg: escape(@color-button-primary-clicked);
@color-input-default: escape(@color-grey-5);

// new styles
@color-primary-light: #eff2f5;
@color-primary-green: #167782;
@color-grey-3: #e1e5ea;
@color-grey-4: #cad3dd;
@color-grey-5: #b4b9d6;
@color-grey-6: #585858;

@color-secondary-red: #f40724;

@color-primary: #167782;
@color-primary-hover: #006775;

@color-background-primary: #ffffff;
@color-background-canvas: #f2f2f2;
@color-background-canvas-light: #fcfcfc;
@color-background-secondary: #f8feff;
@color-background-panel: #F5F6F7;

// Buttons
@color-button-primary: #005662;
@color-button-primary-hover: #00838f;
@color-spec-button-primary-hover: #188794;
@color-button-primary-clicked: #4fb3bf;
@color-button-primary-disabled: rgba(0, 131, 143, 0.4);

@color-button-secondary: #717171;
@color-button-secondary-hover: #333333;
@color-button-secondary-disabled: rgba(113, 113, 113, 0.4);
@color-button-secondary-clicked: #aeaeae;

@color-button-atom: #f2f2f2;
@color-button-atom-hover: #d1d5e3;
@color-button-atom-clicked: #00838f;

// Text
@color-text-primary: #333333;
@color-text-secondary: #585858;
@color-text-light: #ffffff;
@color-text-legend: #aeaeae;
@color-text-black: #000000;

// Icons
@color-icon-active: #525252;
@color-icon-disabled: rgba(82, 82, 82, 0.4);
@color-icon-hover: #005662;

// Tabs
@color-tab-active: #005662;

@color-divider: #aeaeae;

// Scroll
@color-scroll: #a5afb9;
@color-scroll-inactive: #dddddd;

// Borders
@color-border-hover: #dddddd;
@color-border-main: #005662;
@color-border-input: #cad3dd;

// Shadows
@color-dropcontainer-shadow: rgba(103, 104, 132, 0.18);
@color-open-window-shadow: rgba(103, 104, 132, 0.25);
@color-accordion-shadow: rgba(1, 1, 50, 0.1);

// Dropdown
@color-dropdown-hover: #dddddd;

//Slider
@color-slider-background: #c4c4c4;
@color-slider-body-background: rgba(255, 255, 255, 0.3);

// Input
@color-input-hover: #43b5c0;

//Select
@color-select-border: #cad3d0;
@color-select-text: #5b6077;
@color-select-box-shadow: rgba(103, 104, 132, 0.15);
@color-select-background: rgba(243, 245, 247, 0.6);

//Floating windows size
@width-large: 520px;
@width-medium: 440px;
@width-medium-new: 430px; // TODO: rename when redesign is completed
@width-settings: 324px;
@width-small: 260px;
@width-x-small: 220px;

// old styles
@static-path: '.';

@gray-background-color: #f3f3f3;

@main-color: #333;
@active-color: #1a7090;
@hover-color: #5e5e5e;
@border-color: #cad3dd;
@error-color: #ff4a4a;

@disabled-color: #baa;
@form-hover-background: lighten(@border-color, 15%);
@form-selected-background: #9dc2d0;

@input-height: 2.4em + 2 * 0.35em;

// breakpoints for popular resolutions
// are copied from bootstrap and unused yet;)
// See: http://getbootstrap.com/css/#grid-media-queries
@common-screen-tiny: 480px;
@common-screen-small: 768px;
@common-screen-medium: 992px;
@common-screen-large: 1200px;

#large-dim() {
  @base-size: 14px;

  @icon-size: 22px;
  @expanded-icon-size: 20px;
  @button-size: 32px;
  @button-grow: 4px; // additional padding button may grow

  @atom-size: 19px;

  @menu-pad: 7px;
  @menu-font-size: 14px;
  @menu-icon-size: 18px;

  @app-gap: 7px - @button-grow;
  @toolbar-gap: 6px - @button-grow;

  @toolbar-size: @button-size + 2 * @button-grow; // + border?
  @canvas-padding: @toolbar-size + @toolbar-gap + @app-gap;
}

#small-dim() {
  @base-size: 12px;

  @icon-size: 20px;
  @expanded-icon-size: 17px;
  @button-size: 24px;
  @button-grow: 4px;

  @atom-size: 16px;

  @menu-pad: 5px;
  @menu-font-size: 12px;
  @menu-icon-size: 16px;

  @app-gap: 7px - @button-grow;
  @toolbar-gap: 6px - @button-grow;

  @toolbar-size: @button-size + 2 * @button-grow;
  @canvas-padding: @toolbar-size + @toolbar-gap + @app-gap;
}

// Periodic table coloring

@atom-periodic-alkali-metal: #ffa2a5;
@atom-periodic-alkaline-earth-metal: #ffe0b5;
@atom-periodic-transition-metal: #ffd2d4;
@atom-periodic-post-transition-metal: #c5c5c5;
@atom-periodic-metalloid: #e2e2be;
@atom-periodic-other-nonmetal: #e8ff94;
@atom-periodic-halogen: #fffea6;
@atom-periodic-noble-gas: #c2ffff;
@atom-periodic-lanthanide: #f4c8f4;
@atom-periodic-actinide: #fd98cb;
@atom-periodic-unknown-properties: #e8e8e8;