@n3/pn-declaration NPM

@n3/pn-declaration

typescript-описание конфигурации проектов на базе @n3/pn-core.

Описание

Базовые стили

BreakpointsType

Объект брейкпоинтов разных разрешений (mobile, tablet, desktop).

ConditionsType

Объект условий разных разрешений (mobile, tablet, desktop) для styled-components.

Пример:

import styled from 'styled-components';

const StyledExample = styled.div(({
  theme: {
    conditions,
  },
}) => ({
  opacity: 0.3,

  [conditions.mobile]: {
    opacity: 0.5,
  },

  [conditions.tablet]: {
    opacity: 0.7,
  },

  [conditions.desktop]: {
    opacity: 0.9,
  },
}));

FontSourcesType

Объект, содержащий функции генерации шрифтов h1, h2, h3, h4, body, caption. Каждая функция принимает аргументы:

fontFamily - строка;
conditions - объект с ключами mobile, tablet, desktop, значениями которого являются строки-условия для генерации разрешений.

Должен вернуть объект styled-components.

Пример:

const h1: FontSourceType = (fontFamily, conditions) => ({
  fontFamily,
  fontWeight: 500,
  fontSize: 24,
  lineHeight: 1.2,

  [conditions.tablet]: {
    fontSize: 28,
  },

  [conditions.desktop]: {
    fontSize: 32,
  },
});

FontsType

Объект, с ключами FontSourcesType и значениями сгенерированными шрифтами в виде CSSObject styled-components.

Пример:

import styled from 'styled-components';

const StyledExample = styled.div(({
  fonts: {
    h1,
  },
}) => ({
  ...h1,
}));

ColorsType

Объект, содержащий используемые цвета.

DistancesType

Объект, содержащий расстояния:

fieldHeightDefault - высота стандартных полей ввода и кнопок;
fieldHeightSmall - высота маленьких полей ввода и кнопок;
fieldBorderRadius - закругление полей ввода и кнопок;
fieldIconWidth - ширина иконки поля ввода;
tooltipBorderRadius - закругление выпадающих подсказок;
tooltipMaxWidth - максимальная ширина выпадающих подсказок;
tooltipPadding - отступы внутри выпадающих подсказок;
tooltipVerticalOffset - вертикальный отступ от всплывающей подсказки до элемента.