Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@indoqa/style-system

Package Overview
Dependencies
Maintainers
4
Versions
46
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@indoqa/style-system - npm Package Compare versions

Comparing version 1.0.0-alpha.6 to 1.0.0

dist/fela/createFelaConfig.d.ts
dist/theming/mediaQueryHelper.d.ts
dist/theming/PStyle.d.ts
dist/theming/sortBreakpoints.d.ts

87

dist/components/base.d.ts
import { IStyle } from 'fela';
import * as React from 'react';
import { ReactNode } from 'react';
import { FelaStyle, StyleFunction } from 'react-fela';
import { BaseTheme } from '..';
declare type Direction = 'column' | 'column-reverse' | 'row-reverse' | 'initial' | 'inherit';
declare type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'initial' | 'inherit';
declare type JustifyContent = 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
declare type Spacing = 0 | 1 | 2 | 3 | 4;
declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
export declare type HtmlDivAttributesWithoutStyle = Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;
export declare type HtmlSpanAttributesWithoutStyle = Omit<React.HTMLAttributes<HTMLSpanElement>, 'style'>;
export interface BoxProps<T extends BaseTheme> extends MarginProps, PaddingProps, FlexChildProps, FontProps<T>, StylingProps<T>, BoxModelProps {
}
export interface FlexProps<T extends BaseTheme> extends BoxProps<T>, FlexContainerProps {
}
export interface TextProps<T extends BaseTheme> extends MarginProps, PaddingProps, FlexChildProps, FontProps<T>, StylingProps<T> {
}
export interface BoxModelProps {

@@ -11,5 +27,2 @@ inline?: boolean;

}
export interface BoxProps extends MarginProps, PaddingProps, FlexChildProps, FontProps, StylingProps, BoxModelProps {
}
declare type Direction = 'column' | 'row';
export interface FlexChildProps {

@@ -20,3 +33,3 @@ grow?: number;

order?: number;
align?: string;
align?: AlignItems;
}

@@ -27,39 +40,36 @@ export interface FlexContainerProps {

nowrap?: boolean;
center?: string;
justifyContent?: string;
alignItems?: string;
stretch?: boolean;
center?: boolean;
justifyContent?: JustifyContent;
alignItems?: AlignItems;
}
export interface FlexProps extends BoxProps, FlexContainerProps {
}
export interface FontProps {
font?: string;
fontSize?: number | string;
color?: string;
export interface FontProps<T extends BaseTheme> {
fontStyle?: keyof T['fontStyles'];
fontSize?: keyof T['fontSizes'];
color?: string | keyof T['colors'];
bold?: boolean;
italic?: boolean;
ellipsis?: boolean;
textAlign?: TextAlign;
}
export interface MarginProps {
m?: number;
mt?: number;
mb?: number;
ml?: number;
mr?: number;
mx?: number;
my?: number;
m?: Spacing;
mt?: Spacing;
mb?: Spacing;
ml?: Spacing;
mr?: Spacing;
mx?: Spacing;
my?: Spacing;
}
export declare interface PaddingProps {
p?: number;
pt?: number;
pb?: number;
pl?: number;
pr?: number;
px?: number;
py?: number;
p?: Spacing;
pt?: Spacing;
pb?: Spacing;
pl?: Spacing;
pr?: Spacing;
px?: Spacing;
py?: Spacing;
}
export interface StylingProps {
bg?: string;
export interface StylingProps<T extends BaseTheme> {
bg?: string | keyof T['colors'];
}
export interface TextProps extends MarginProps, PaddingProps, FlexChildProps, FontProps {
}
interface WithBaseTheme {

@@ -71,2 +81,6 @@ theme?: BaseTheme;

}
export interface BaseProps<T extends BaseTheme, H> extends WithStyle<T> {
children?: ReactNode;
htmlAttrs?: H;
}
export declare const createBoxModelCSSProps: ({ inline, width, height, fullWidth, fullHeight }: BoxModelProps) => {

@@ -78,12 +92,7 @@ display: string;

export declare const createFlexChildCSSProps: ({ grow, shrink, basis, order, align }: FlexChildProps) => IStyle;
export declare const createFontCSSProps: ({ theme, font, fontSize, color, bold, ellipsis }: FontProps & WithBaseTheme) => IStyle;
export declare function createStylingCSSProps<T extends BaseTheme>({ theme, bg }: StylingProps<T> & WithBaseTheme): IStyle;
export declare function createFontCSSProps<T extends BaseTheme>({ theme, fontStyle, fontSize, color, bold, italic, ellipsis, textAlign }: FontProps<T> & WithBaseTheme): IStyle;
export declare const createMarginCSSProps: ({ theme, m, mt, mb, ml, mr, mx, my }: MarginProps & WithBaseTheme) => {};
export declare const createPaddingCSSProps: ({ theme, p, pt, pb, pl, pr, px, py }: PaddingProps & WithBaseTheme) => {};
export declare const createStylingCSSProps: ({ theme, bg }: StylingProps & WithBaseTheme) => {
backgroundColor?: undefined;
} | {
backgroundColor: any;
};
export declare function filterProps<T>(props: any): any;
export declare function mergeThemedStyles<T extends BaseTheme, P>(componentStyle: StyleFunction<T, P> | IStyle, passedStyle?: FelaStyle<T, P>): FelaStyle<T, P>;
export {};

12

dist/components/Box.d.ts

@@ -0,8 +1,6 @@

/// <reference types="react" />
import { IStyle } from 'fela';
import * as React from 'react';
import { BaseTheme } from '..';
import { BoxProps, WithStyle } from './base';
export declare const createBoxCSSStyles: (props: BoxProps) => IStyle;
export declare class Box<T extends BaseTheme> extends React.Component<BoxProps & WithStyle<T> & React.HTMLAttributes<HTMLDivElement>> {
render(): JSX.Element;
}
import { BaseProps, BaseTheme } from '..';
import { BoxProps, HtmlDivAttributesWithoutStyle } from './base';
export declare function createBoxCSSStyles<T extends BaseTheme>(props: BoxProps<T>): IStyle;
export declare function Box<T extends BaseTheme>(props: BoxProps<T> & BaseProps<T, HtmlDivAttributesWithoutStyle>): JSX.Element;

2

dist/components/extendBox.d.ts
/// <reference types="react" />
import { IStyle } from 'fela';
export declare const extendBox: (styles: IStyle) => import("react").ComponentType<import("./base").BoxProps & import("./base").WithStyle<import("..").BaseTheme> & import("react").HTMLAttributes<HTMLDivElement> & import("react-fela").FelaInjectedProps<import("./base").BoxProps & import("./base").WithStyle<import("..").BaseTheme> & import("react").HTMLAttributes<HTMLDivElement>, any> & import("react").HTMLProps<HTMLDivElement>>;
export declare const extendBox: (styles: IStyle) => import("react").ComponentType<import("./base").BoxProps<import("..").BaseTheme> & import("./base").BaseProps<import("..").BaseTheme, Pick<import("react").HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">> & import("react-fela").FelaInjectedProps<import("./base").BoxProps<import("..").BaseTheme> & import("./base").BaseProps<import("..").BaseTheme, Pick<import("react").HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>, any> & import("react").HTMLProps<HTMLElement>>;

12

dist/components/Flex.d.ts

@@ -0,8 +1,6 @@

/// <reference types="react" />
import { IStyle } from 'fela';
import * as React from 'react';
import { BaseTheme } from '..';
import { FlexContainerProps, FlexProps, WithStyle } from './base';
export declare const createFlexContainerCSSStyle: ({ inline, direction, nowrap, center, justifyContent, alignItems, stretch, }: FlexContainerProps) => IStyle;
export declare class Flex<T extends BaseTheme> extends React.Component<FlexProps & WithStyle<T> & React.HTMLAttributes<HTMLDivElement>> {
render(): JSX.Element;
}
import { BaseProps, BaseTheme, HtmlDivAttributesWithoutStyle } from '..';
import { FlexContainerProps, FlexProps } from './base';
export declare const createFlexContainerCSSStyle: ({ inline, direction, nowrap, center, justifyContent, alignItems, }: FlexContainerProps) => IStyle;
export declare function Flex<T extends BaseTheme>(props: FlexProps<T> & BaseProps<T, HtmlDivAttributesWithoutStyle>): JSX.Element;

10

dist/components/grid/Col.d.ts
import * as React from 'react';
declare type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export declare const GRID_SIZE: Size;
interface Props {
import { BaseTheme, WithStyle } from '../..';
declare type SizeValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export declare type Size = SizeValue | SizeValue[];
interface Props<T extends BaseTheme> extends WithStyle<T> {
size?: Size;
}
export declare class Col extends React.Component<Props> {
export declare const GRID_SIZE: Size;
export declare class Col<T extends BaseTheme> extends React.Component<Props<T>> {
static defaultProps: {

@@ -9,0 +11,0 @@ size: Size;

5

dist/components/grid/ColRow.d.ts
import * as React from 'react';
import { BaseTheme } from '../..';
import { BaseTheme } from '../../theming/baseTheme';
import { PaddingProps, StylingProps, WithStyle } from '../base';
interface Props<T extends BaseTheme> extends WithStyle<T>, PaddingProps, StylingProps {
interface Props<T extends BaseTheme> extends WithStyle<T>, PaddingProps, StylingProps<T> {
}
export declare class ColRow<T extends BaseTheme> extends React.Component<Props<T>> {
renderChildren(spacing: string | number): any[];
render(): JSX.Element;
}
export {};

6

dist/components/grid/Grid.d.ts
import * as React from 'react';
import { BaseTheme } from '../..';
import { BaseTheme, Spacing } from '../..';
import { BoxModelProps, FlexChildProps, MarginProps, PaddingProps, StylingProps, WithStyle } from '../base';
interface GridContainerStyleProps<T extends BaseTheme> extends WithStyle<T>, PaddingProps, FlexChildProps, StylingProps, BoxModelProps, MarginProps {
interface GridContainerStyleProps<T extends BaseTheme> extends WithStyle<T>, PaddingProps, FlexChildProps, StylingProps<T>, BoxModelProps, MarginProps {
children?: React.ReactNode;

@@ -10,3 +10,3 @@ maxWidth?: number | string;

interface Props<T extends BaseTheme> extends GridContainerStyleProps<T> {
spacing: number | string;
spacing: Spacing;
}

@@ -13,0 +13,0 @@ export declare class Grid<T extends BaseTheme> extends React.Component<Props<T>> {

2

dist/components/grid/Panel.d.ts
import * as React from 'react';
import { BaseTheme } from '../..';
import { FlexContainerProps, FontProps, PaddingProps, StylingProps, WithStyle } from '../base';
interface Props<T extends BaseTheme> extends WithStyle<T>, PaddingProps, StylingProps, FontProps, FlexContainerProps {
interface Props<T extends BaseTheme> extends WithStyle<T>, PaddingProps, StylingProps<T>, FontProps<T>, FlexContainerProps {
size?: number;

@@ -6,0 +6,0 @@ width?: string | number;

2

dist/components/grid/Row.d.ts
import * as React from 'react';
import { BaseTheme } from '../..';
import { PaddingProps, StylingProps, WithStyle } from '../base';
interface Props<T extends BaseTheme> extends WithStyle<T>, PaddingProps, StylingProps {
interface Props<T extends BaseTheme> extends WithStyle<T>, PaddingProps, StylingProps<T> {
height?: number | string;

@@ -6,0 +6,0 @@ minHeight?: number | string;

10

dist/components/Text.d.ts

@@ -1,6 +0,4 @@

import * as React from 'react';
import { BaseTheme } from '..';
import { TextProps, WithStyle } from './base';
export declare class Text<T extends BaseTheme> extends React.Component<TextProps & WithStyle<T> & React.HTMLAttributes<HTMLSpanElement>> {
render(): JSX.Element;
}
/// <reference types="react" />
import { BaseProps, BaseTheme, HtmlSpanAttributesWithoutStyle } from '..';
import { TextProps } from './base';
export declare function Text<T extends BaseTheme>(props: TextProps<T> & BaseProps<T, HtmlSpanAttributesWithoutStyle>): JSX.Element;

7

dist/css/renderRebootCss.d.ts

@@ -21,7 +21,10 @@ import { IRenderer, IStyle } from 'fela';

fontStyles: {
text: IStyle;
headline: IStyle;
base: IStyle;
alt: IStyle;
};
colors: {
text: string;
};
}
export declare const renderRebootCss: (renderer: IRenderer, props: BaseCssProps) => void;
export {};

6

dist/index.d.ts

@@ -15,5 +15,7 @@ export * from './components/base';

export * from './css/renderResetCss';
export * from './fela/createRenderer';
export * from './fela/createFelaConfig';
export * from './fela/withRenderer';
export * from './theming/baseTheme';
export * from './theming/buildTheme';
export * from './theming/mediaQueryHelper';
export * from './theming/PStyle';
export * from './theming/sortBreakpoints';

924

dist/indoqa-style-system.cjs.js

@@ -5,5 +5,9 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var reactFela = require('react-fela');
var React = require('react');
var fela = require('fela');
var monolithic = _interopDefault(require('fela-monolithic'));
var namedKeys = _interopDefault(require('fela-plugin-named-keys'));
var webPreset = _interopDefault(require('fela-preset-web'));

@@ -35,13 +39,52 @@ var THEME_NOT_AVAILABLE_ERR_MSG = 'There is no theme available or one of its properties is missing. ' +

};
var createFontCSSProps = function (_a) {
var theme = _a.theme, font = _a.font, fontSize = _a.fontSize, color = _a.color, bold = _a.bold, ellipsis = _a.ellipsis;
if (theme === undefined || theme.fonts === undefined || theme.fontSizes === undefined || theme.colors === undefined) {
function getColor(theme, color) {
if (color in theme.colors) {
return theme.colors[color];
}
return color;
}
function getFontSize(theme, fontSize) {
if (fontSize in theme.fontSizes) {
return theme.fontSizes[fontSize];
}
return '';
}
function getFontStyle(theme, fontStyle) {
if (fontStyle in theme.fontStyles) {
return theme.fontStyles[fontStyle];
}
return '';
}
function createStylingCSSProps(_a) {
var theme = _a.theme, bg = _a.bg;
if (theme === undefined || theme.colors === undefined) {
throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
}
var styles = {
fontFamily: (font) ? theme.fonts[font] : theme.fonts.text,
fontSize: (fontSize) ? theme.fontSizes[fontSize] : theme.fontSizes.text,
color: (color) ? theme.colors[color] : theme.colors.text,
fontWeight: (bold) ? 700 : 400,
};
var styles = {};
if (bg) {
Object.assign(styles, { backgroundColor: getColor(theme, bg) });
}
return styles;
}
function createFontCSSProps(_a) {
var theme = _a.theme, fontStyle = _a.fontStyle, fontSize = _a.fontSize, color = _a.color, bold = _a.bold, italic = _a.italic, ellipsis = _a.ellipsis, textAlign = _a.textAlign;
if (theme === undefined) {
throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
}
var styles = {};
if (bold) {
Object.assign(styles, { fontWeight: 700 });
}
if (italic) {
Object.assign(styles, { fontStyle: 'italic' });
}
if (fontStyle) {
Object.assign(styles, getFontStyle(theme, fontStyle));
}
if (fontSize) {
Object.assign(styles, { fontSize: getFontSize(theme, fontSize) });
}
if (color) {
Object.assign(styles, { color: getColor(theme, color) });
}
if (ellipsis) {

@@ -55,4 +98,7 @@ var ellipsisStyles = {

}
if (textAlign) {
Object.assign(styles, { textAlign: textAlign });
}
return styles;
};
}
var createMarginCSSProps = function (_a) {

@@ -120,48 +166,2 @@ var theme = _a.theme, m = _a.m, mt = _a.mt, mb = _a.mb, ml = _a.ml, mr = _a.mr, mx = _a.mx, my = _a.my;

};
var createStylingCSSProps = function (_a) {
var theme = _a.theme, bg = _a.bg;
if (theme === undefined || theme.colors === undefined) {
throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
}
if (bg === undefined) {
return {};
}
if (bg in theme.colors) {
return ({
backgroundColor: (bg) ? theme.colors[bg] : 'transparent',
});
}
if (process.env.NODE_ENV !== 'production') {
console.warn("The bg color " + bg + " is not available in theme.colors.");
}
return {};
};
var knownProps = [
'inline', 'width', 'height', 'fullWidth', 'fullHeight',
'grow', 'shrink', 'basis', 'order', 'align',
'direction', 'nowrap', 'center', 'justifyContent', 'alignItems', 'stretch',
'font', 'fontSize', 'color', 'bold', 'ellipsis',
'm', 'mt', 'mb', 'ml', 'mr', 'mx', 'my',
'p', 'pt', 'pb', 'pl', 'pr', 'px', 'py',
'bg',
'theme',
];
var isUnknownProps = function (prop) {
for (var _i = 0, knownProps_1 = knownProps; _i < knownProps_1.length; _i++) {
var eachKnownProps = knownProps_1[_i];
if (eachKnownProps === prop) {
return false;
}
}
return true;
};
function filterProps(props) {
return Object
.keys(props)
.filter(isUnknownProps)
.reduce(function (obj, key) {
obj[key] = props[key];
return obj;
}, {});
}
function mergeThemedStyles(componentStyle, passedStyle) {

@@ -177,6 +177,3 @@ if (!passedStyle) {

var spacing = function (theme, propValue) {
if (!propValue) {
throw new Error('A spacing value must not be null.');
}
if (theme === undefined || theme.spacing === undefined) {
if (theme === undefined) {
throw Error(THEME_NOT_AVAILABLE_ERR_MSG);

@@ -241,74 +238,61 @@ }

var createBoxCSSStyles = function (props) { return (__assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createStylingCSSProps(props), createFontCSSProps(props))); };
var themedBoxStyles = function (props) { return (__assign({}, createBoxCSSStyles(props))); };
var Box = (function (_super) {
__extends(Box, _super);
function Box() {
return _super !== null && _super.apply(this, arguments) || this;
}
Box.prototype.render = function () {
var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
var styles = mergeThemedStyles(themedBoxStyles, style);
return (React.createElement(reactFela.FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (React.createElement("div", __assign({ className: className }, filterProps(rest)), children));
}));
};
return Box;
}(React.Component));
function createBoxCSSStyles(props) {
return __assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createStylingCSSProps(props), createFontCSSProps(props));
}
function themedBoxStyles(props) {
return __assign({}, createBoxCSSStyles(props));
}
function Box(props) {
var children = props.children, style = props.style, htmlAttrs = props.htmlAttrs, rest = __rest(props, ["children", "style", "htmlAttrs"]);
var styles = mergeThemedStyles(themedBoxStyles, style);
return (React.createElement(reactFela.FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (React.createElement("div", __assign({ className: className }, htmlAttrs), children));
}));
}
var extendBox = function (styles) { return reactFela.createComponentWithProxy(styles, Box); };
var align = function (center, stretch, value) {
if (center) {
return 'center';
}
if (value) {
return value;
}
return (stretch) ? 'stretch' : 'flex-start';
};
var createFlexContainerCSSStyle = function (_a) {
var inline = _a.inline, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, nowrap = _a.nowrap, center = _a.center, justifyContent = _a.justifyContent, alignItems = _a.alignItems, stretch = _a.stretch;
return ({
var inline = _a.inline, direction = _a.direction, nowrap = _a.nowrap, center = _a.center, justifyContent = _a.justifyContent, alignItems = _a.alignItems;
var styles = ({
display: (inline) ? 'inline-flex' : 'flex',
flexDirection: direction,
flexDirection: direction || 'row',
flexWrap: (nowrap) ? 'nowrap' : 'wrap',
justifyContent: align(center, stretch, justifyContent),
alignItems: align(center, stretch, alignItems),
justifyContent: justifyContent || 'flex-start',
alignItems: alignItems || 'stretch',
});
if (center) {
var centerStyles = {
justifyContent: justifyContent || 'center',
alignItems: alignItems || 'center',
textAlign: 'center',
};
Object.assign(styles, centerStyles);
}
return styles;
};
var themedFlexStyles = function (props) { return (__assign({}, createBoxCSSStyles(props), createFlexContainerCSSStyle(props))); };
var Flex = (function (_super) {
__extends(Flex, _super);
function Flex() {
return _super !== null && _super.apply(this, arguments) || this;
}
Flex.prototype.render = function () {
var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
var styles = mergeThemedStyles(themedFlexStyles, style);
return (React.createElement(reactFela.FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (React.createElement("div", __assign({ className: className }, filterProps(rest)), children));
}));
};
return Flex;
}(React.Component));
function themedFlexStyles(props) {
return __assign({}, createBoxCSSStyles(props), createFlexContainerCSSStyle(props));
}
function Flex(props) {
var children = props.children, style = props.style, htmlAttrs = props.htmlAttrs, rest = __rest(props, ["children", "style", "htmlAttrs"]);
var styles = mergeThemedStyles(themedFlexStyles, style);
return (React.createElement(reactFela.FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (React.createElement("div", __assign({ className: className }, htmlAttrs), children));
}));
}
var themedTextStyle = function (props) { return (__assign({ display: 'inline-block' }, createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createFontCSSProps(props))); };
var Text = (function (_super) {
__extends(Text, _super);
function Text() {
return _super !== null && _super.apply(this, arguments) || this;
}
Text.prototype.render = function () {
var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
var styles = mergeThemedStyles(themedTextStyle, style);
return (React.createElement(reactFela.FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (React.createElement("span", __assign({ className: className }, filterProps(rest)), children));
}));
};
return Text;
}(React.Component));
function themedTextStyle(props) {
return __assign({ display: 'inline-block' }, createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createFontCSSProps(props), createStylingCSSProps(props));
}
function Text(props) {
var children = props.children, style = props.style, htmlAttrs = props.htmlAttrs, rest = __rest(props, ["children", "style", "htmlAttrs"]);
var styles = mergeThemedStyles(themedTextStyle, style);
return (React.createElement(reactFela.FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (React.createElement("span", __assign({ className: className }, htmlAttrs), children));
}));
}

@@ -332,11 +316,4 @@ var GridContext = React.createContext({

var addUnitIfNeeded = function (value, propertyUnit) {
var valueType = typeof value;
if ((valueType === 'number' || (valueType === 'string' && !isNaN(value)))) {
return "" + value + (propertyUnit || 'px');
}
return "" + value;
};
var GRID_SIZE = 12;
var EMPTY_STYLE = {};
var Col = (function (_super) {

@@ -348,20 +325,6 @@ __extends(Col, _super);

Col.prototype.render = function () {
var internalProps = this.props;
var children = internalProps.children, rowBreak = internalProps.rowBreak, marginTop = internalProps.marginTop, size = internalProps.size;
var effectiveSize = size ? size : 12;
var colStyle = function (_a) {
var spacing = _a.spacing;
var marginRight = rowBreak ? '0px' : spacing;
var spacingWithUnit = addUnitIfNeeded(spacing);
var availableSpace = "(100% - " + spacingWithUnit + " * " + (GRID_SIZE - 1) + ")";
var coveredSpacing = spacingWithUnit + " * " + (effectiveSize - 1);
return ({
width: "calc(" + availableSpace + " / " + GRID_SIZE + " * " + effectiveSize + " + " + coveredSpacing + ")",
marginRight: marginRight,
marginTop: marginTop,
});
};
var _a = this.props, children = _a.children, style = _a.style;
return (React.createElement(GridContext.Consumer, null, function (_a) {
var spacing = _a.spacing;
var child = (React.createElement(reactFela.FelaComponent, { style: colStyle, spacing: spacing }, children));
var child = (React.createElement(reactFela.FelaComponent, { style: style || EMPTY_STYLE, spacing: spacing }, children));
return testGridContext(spacing, child);

@@ -376,2 +339,461 @@ }));

var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
var _freeGlobal = freeGlobal;
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
var root = _freeGlobal || freeSelf || Function('return this')();
var _root = root;
var Symbol = _root.Symbol;
var _Symbol = Symbol;
var objectProto = Object.prototype;
var hasOwnProperty = objectProto.hasOwnProperty;
var nativeObjectToString = objectProto.toString;
var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
function getRawTag(value) {
var isOwn = hasOwnProperty.call(value, symToStringTag),
tag = value[symToStringTag];
try {
value[symToStringTag] = undefined;
var unmasked = true;
} catch (e) {}
var result = nativeObjectToString.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag] = tag;
} else {
delete value[symToStringTag];
}
}
return result;
}
var _getRawTag = getRawTag;
var objectProto$1 = Object.prototype;
var nativeObjectToString$1 = objectProto$1.toString;
function objectToString(value) {
return nativeObjectToString$1.call(value);
}
var _objectToString = objectToString;
var nullTag = '[object Null]',
undefinedTag = '[object Undefined]';
var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
function baseGetTag(value) {
if (value == null) {
return value === undefined ? undefinedTag : nullTag;
}
return (symToStringTag$1 && symToStringTag$1 in Object(value))
? _getRawTag(value)
: _objectToString(value);
}
var _baseGetTag = baseGetTag;
function isObject(value) {
var type = typeof value;
return value != null && (type == 'object' || type == 'function');
}
var isObject_1 = isObject;
var asyncTag = '[object AsyncFunction]',
funcTag = '[object Function]',
genTag = '[object GeneratorFunction]',
proxyTag = '[object Proxy]';
function isFunction(value) {
if (!isObject_1(value)) {
return false;
}
var tag = _baseGetTag(value);
return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
}
var isFunction_1 = isFunction;
var coreJsData = _root['__core-js_shared__'];
var _coreJsData = coreJsData;
var maskSrcKey = (function() {
var uid = /[^.]+$/.exec(_coreJsData && _coreJsData.keys && _coreJsData.keys.IE_PROTO || '');
return uid ? ('Symbol(src)_1.' + uid) : '';
}());
function isMasked(func) {
return !!maskSrcKey && (maskSrcKey in func);
}
var _isMasked = isMasked;
var funcProto = Function.prototype;
var funcToString = funcProto.toString;
function toSource(func) {
if (func != null) {
try {
return funcToString.call(func);
} catch (e) {}
try {
return (func + '');
} catch (e) {}
}
return '';
}
var _toSource = toSource;
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
var reIsHostCtor = /^\[object .+?Constructor\]$/;
var funcProto$1 = Function.prototype,
objectProto$2 = Object.prototype;
var funcToString$1 = funcProto$1.toString;
var hasOwnProperty$1 = objectProto$2.hasOwnProperty;
var reIsNative = RegExp('^' +
funcToString$1.call(hasOwnProperty$1).replace(reRegExpChar, '\\$&')
.replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
);
function baseIsNative(value) {
if (!isObject_1(value) || _isMasked(value)) {
return false;
}
var pattern = isFunction_1(value) ? reIsNative : reIsHostCtor;
return pattern.test(_toSource(value));
}
var _baseIsNative = baseIsNative;
function getValue(object, key) {
return object == null ? undefined : object[key];
}
var _getValue = getValue;
function getNative(object, key) {
var value = _getValue(object, key);
return _baseIsNative(value) ? value : undefined;
}
var _getNative = getNative;
var nativeCreate = _getNative(Object, 'create');
var _nativeCreate = nativeCreate;
function hashClear() {
this.__data__ = _nativeCreate ? _nativeCreate(null) : {};
this.size = 0;
}
var _hashClear = hashClear;
function hashDelete(key) {
var result = this.has(key) && delete this.__data__[key];
this.size -= result ? 1 : 0;
return result;
}
var _hashDelete = hashDelete;
var HASH_UNDEFINED = '__lodash_hash_undefined__';
var objectProto$3 = Object.prototype;
var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
function hashGet(key) {
var data = this.__data__;
if (_nativeCreate) {
var result = data[key];
return result === HASH_UNDEFINED ? undefined : result;
}
return hasOwnProperty$2.call(data, key) ? data[key] : undefined;
}
var _hashGet = hashGet;
var objectProto$4 = Object.prototype;
var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
function hashHas(key) {
var data = this.__data__;
return _nativeCreate ? (data[key] !== undefined) : hasOwnProperty$3.call(data, key);
}
var _hashHas = hashHas;
var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
function hashSet(key, value) {
var data = this.__data__;
this.size += this.has(key) ? 0 : 1;
data[key] = (_nativeCreate && value === undefined) ? HASH_UNDEFINED$1 : value;
return this;
}
var _hashSet = hashSet;
function Hash(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
Hash.prototype.clear = _hashClear;
Hash.prototype['delete'] = _hashDelete;
Hash.prototype.get = _hashGet;
Hash.prototype.has = _hashHas;
Hash.prototype.set = _hashSet;
var _Hash = Hash;
function listCacheClear() {
this.__data__ = [];
this.size = 0;
}
var _listCacheClear = listCacheClear;
function eq(value, other) {
return value === other || (value !== value && other !== other);
}
var eq_1 = eq;
function assocIndexOf(array, key) {
var length = array.length;
while (length--) {
if (eq_1(array[length][0], key)) {
return length;
}
}
return -1;
}
var _assocIndexOf = assocIndexOf;
var arrayProto = Array.prototype;
var splice = arrayProto.splice;
function listCacheDelete(key) {
var data = this.__data__,
index = _assocIndexOf(data, key);
if (index < 0) {
return false;
}
var lastIndex = data.length - 1;
if (index == lastIndex) {
data.pop();
} else {
splice.call(data, index, 1);
}
--this.size;
return true;
}
var _listCacheDelete = listCacheDelete;
function listCacheGet(key) {
var data = this.__data__,
index = _assocIndexOf(data, key);
return index < 0 ? undefined : data[index][1];
}
var _listCacheGet = listCacheGet;
function listCacheHas(key) {
return _assocIndexOf(this.__data__, key) > -1;
}
var _listCacheHas = listCacheHas;
function listCacheSet(key, value) {
var data = this.__data__,
index = _assocIndexOf(data, key);
if (index < 0) {
++this.size;
data.push([key, value]);
} else {
data[index][1] = value;
}
return this;
}
var _listCacheSet = listCacheSet;
function ListCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
ListCache.prototype.clear = _listCacheClear;
ListCache.prototype['delete'] = _listCacheDelete;
ListCache.prototype.get = _listCacheGet;
ListCache.prototype.has = _listCacheHas;
ListCache.prototype.set = _listCacheSet;
var _ListCache = ListCache;
var Map = _getNative(_root, 'Map');
var _Map = Map;
function mapCacheClear() {
this.size = 0;
this.__data__ = {
'hash': new _Hash,
'map': new (_Map || _ListCache),
'string': new _Hash
};
}
var _mapCacheClear = mapCacheClear;
function isKeyable(value) {
var type = typeof value;
return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
? (value !== '__proto__')
: (value === null);
}
var _isKeyable = isKeyable;
function getMapData(map, key) {
var data = map.__data__;
return _isKeyable(key)
? data[typeof key == 'string' ? 'string' : 'hash']
: data.map;
}
var _getMapData = getMapData;
function mapCacheDelete(key) {
var result = _getMapData(this, key)['delete'](key);
this.size -= result ? 1 : 0;
return result;
}
var _mapCacheDelete = mapCacheDelete;
function mapCacheGet(key) {
return _getMapData(this, key).get(key);
}
var _mapCacheGet = mapCacheGet;
function mapCacheHas(key) {
return _getMapData(this, key).has(key);
}
var _mapCacheHas = mapCacheHas;
function mapCacheSet(key, value) {
var data = _getMapData(this, key),
size = data.size;
data.set(key, value);
this.size += data.size == size ? 0 : 1;
return this;
}
var _mapCacheSet = mapCacheSet;
function MapCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
MapCache.prototype.clear = _mapCacheClear;
MapCache.prototype['delete'] = _mapCacheDelete;
MapCache.prototype.get = _mapCacheGet;
MapCache.prototype.has = _mapCacheHas;
MapCache.prototype.set = _mapCacheSet;
var _MapCache = MapCache;
var FUNC_ERROR_TEXT = 'Expected a function';
function memoize(func, resolver) {
if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
throw new TypeError(FUNC_ERROR_TEXT);
}
var memoized = function() {
var args = arguments,
key = resolver ? resolver.apply(this, args) : args[0],
cache = memoized.cache;
if (cache.has(key)) {
return cache.get(key);
}
var result = func.apply(this, args);
memoized.cache = cache.set(key, result) || cache;
return result;
};
memoized.cache = new (memoize.Cache || _MapCache);
return memoized;
}
memoize.Cache = _MapCache;
var memoize_1 = memoize;
function sortBreakpoints(breakpoints) {
var sortBreakpointsFn = function (breakpointsToBeSorted) { return Object
.keys(breakpointsToBeSorted)
.map(function (key) { return Object.assign(breakpoints[key], { name: key }); })
.sort(function (b1, b2) { return b1.sort - b2.sort; }); };
if (process.env.NODE_ENV === 'production') {
return memoize_1(function () { return sortBreakpointsFn(breakpoints); })();
}
return sortBreakpointsFn(breakpoints);
}
var addUnitIfNeeded = function (value, propertyUnit) {
var valueType = typeof value;
if ((valueType === 'number' || (valueType === 'string' && !isNaN(value)))) {
return "" + value + (propertyUnit || 'px');
}
return "" + value;
};
var calcWidthValue = function (size, spacing) {
var spacingWithUnit = addUnitIfNeeded(spacing);
var availableSpace = "(100% - " + spacingWithUnit + " * " + (GRID_SIZE - 1) + ")";
var coveredSpacing = spacingWithUnit + " * " + (size - 1);
return "calc(" + availableSpace + " / " + GRID_SIZE + " * " + size + " + " + coveredSpacing + " - 0.01px)";
};
var getEnhancedColStyles = function (child, breakpointName, size, willBreakAfter, needsMarginTop, spacing) {
var _a;
var style = {
width: calcWidthValue(size, spacing),
marginTop: needsMarginTop ? spacing : 0,
marginRight: willBreakAfter ? '0px' : spacing,
};
return breakpointName === null ? style : (_a = {}, _a[breakpointName] = style, _a);
};
var toSizeArray = function (size) {
if (Array.isArray(size)) {
return size;
}
return [size];
};
var initializeArray = function (length) {
var a = [];
for (var i = 0; i < length; i++) {
a.push(0);
}
return a;
};
var mergeStyles = function (style1, style2) {
if (style2 === null) {
return style1;
}
return [style1, style2];
};
var validateSizes = function (sizes, breakpointCount, child) {
if (sizes > breakpointCount + 1) {
if (process.env.NODE_ENV !== 'production') {
console.warn('There are more Col sizes than breakpoints.', child);
}
return false;
}
return true;
};
var rewriteCols = function (breakpoints, children, spacing) {
var currentRowSize = initializeArray(breakpoints.length);
var rowsCount = initializeArray(breakpoints.length);
return React.Children.map(children, function (child) {
var currentChild = child;
var sizes = toSizeArray(currentChild.props.size);
if (!validateSizes(sizes.length, breakpoints.length, child)) {
return;
}
var style = currentChild.props.style;
var enhancedColStyles = {};
for (var i = 0; i < sizes.length; i++) {
var currentBreakpoint = i === 0 ? null : breakpoints[i - 1].name;
currentRowSize[i] += sizes[i];
var willOverflow = currentRowSize[i] > GRID_SIZE;
if (willOverflow) {
currentRowSize[i] = sizes[i];
}
var completelyFillsRow = currentRowSize[i] === GRID_SIZE;
var needsMarginTop = willOverflow || rowsCount[i] > 0;
if (completelyFillsRow || willOverflow) {
rowsCount[i]++;
}
var enhancedColStyle = getEnhancedColStyles(currentChild, currentBreakpoint, sizes[i], completelyFillsRow, needsMarginTop, spacing);
Object.assign(enhancedColStyles, enhancedColStyle);
}
return React.cloneElement((currentChild), { style: mergeStyles(enhancedColStyles, style) });
});
};
var RowContainer = (function (_super) {

@@ -383,11 +805,16 @@ __extends(RowContainer, _super);

RowContainer.prototype.render = function () {
var _this = this;
var rowStyle = function (_a) {
var style = _a.style, spacing = _a.spacing, otherProps = __rest(_a, ["style", "spacing"]);
return (__assign({}, createPaddingCSSProps(otherProps), createStylingCSSProps(otherProps), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', marginTop: spacing, ':first-child': {
return (__assign({}, createPaddingCSSProps(otherProps), createStylingCSSProps(otherProps), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', marginTop: spacing, '&:first-child': {
marginTop: 0,
} }));
};
var _a = this.props, children = _a.children, style = _a.style, otherProps = __rest(_a, ["children", "style"]);
var _a = this.props, style = _a.style, otherProps = __rest(_a, ["style"]);
var styles = mergeThemedStyles(rowStyle, style);
return (React.createElement(reactFela.FelaComponent, __assign({ style: styles }, otherProps), children));
var renderCols = function (_a) {
var className = _a.className, theme = _a.theme;
return (React.createElement("div", { className: className }, rewriteCols(sortBreakpoints(theme.breakpoints), _this.props.children, _this.props.spacing)));
};
return (React.createElement(reactFela.FelaComponent, __assign({ style: styles }, otherProps), renderCols));
};

@@ -401,28 +828,2 @@ return RowContainer;

}
ColRow.prototype.renderChildren = function (spacing) {
var currentRowSize = 0;
var rowsCount = 0;
return React.Children.map(this.props.children, function (child) {
var currentChild = child;
currentRowSize += currentChild.props.size;
if (currentRowSize === GRID_SIZE) {
currentRowSize = 0;
rowsCount++;
return React.cloneElement((currentChild), {
rowBreak: true,
marginTop: rowsCount > 1 ? spacing : 0
});
}
if (currentRowSize >= GRID_SIZE) {
rowsCount++;
}
if (rowsCount > 0) {
return React.cloneElement((currentChild), {
rowBreak: false,
marginTop: spacing
});
}
return currentChild;
});
};
ColRow.prototype.render = function () {

@@ -432,3 +833,3 @@ var _this = this;

var spacing = _a.spacing;
var child = (React.createElement(RowContainer, __assign({ spacing: spacing }, _this.props), _this.renderChildren(spacing)));
var child = (React.createElement(RowContainer, __assign({ spacing: spacing }, _this.props), _this.props.children));
return testGridContext(spacing, child);

@@ -588,6 +989,6 @@ }));

}, 'html, body, #app');
var rebootCss = "\n hr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n }\n \n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: 0;\n }\n \n p {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n abbr[title],\n abbr[data-original-title] {\n text-decoration: underline;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n cursor: help;\n border-bottom: 0;\n }\n \n address {\n margin-bottom: " + props.spacing.space1 + ";\n font-style: normal;\n line-height: inherit;\n }\n \n ol,\n ul,\n dl {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n ol ol,\n ul ul,\n ol ul,\n ul ol {\n margin-bottom: 0;\n padding-left: calc(" + props.spacing.space1 + " + " + props.spacing.space2 + ");\n }\n \n dt {\n font-weight: 700;\n }\n \n dd {\n margin-bottom: " + props.spacing.space1 + ";\n margin-left: 0;\n }\n \n blockquote {\n margin: 0 0 " + props.spacing.space2 + ";\n }\n \n dfn {\n font-style: italic;\n }\n \n b,\n strong {\n font-weight: bolder;\n }\n \n small {\n font-size: 80%;\n }\n \n sub,\n sup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n }\n \n sub {\n bottom: -.25em;\n }\n \n sup {\n top: -.5em;\n }\n \n a {\n color: " + props.links.base + ";\n text-decoration: underline;\n background-color: transparent;\n -webkit-text-decoration-skip: objects;\n }\n \n a:hover {\n color: " + props.links.hover + ";\n text-decoration: underline;\n }\n\n a:active {\n color: " + props.links.active + ";\n text-decoration: underline;\n }\n \n a:visited {\n color: " + props.links.visited + ";\n text-decoration: underline;\n }\n \n a:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n }\n \n a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {\n color: inherit;\n }\n \n a:not([href]):not([tabindex]):focus {\n outline: 0;\n }\n \n pre,\n code,\n kbd,\n samp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 1em;\n }\n \n pre {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n overflow: auto;\n -ms-overflow-style: scrollbar;\n }\n \n figure {\n margin: 0 0 " + props.spacing.space2 + ";\n }\n \n img {\n vertical-align: middle;\n border-style: none;\n }\n \n svg {\n overflow: hidden;\n vertical-align: middle;\n }\n \n table {\n border-collapse: collapse;\n }\n \n caption {\n padding-top: " + props.spacing.space1 + ";\n padding-bottom: " + props.spacing.space1 + ";\n color: #6c757d;\n text-align: left;\n caption-side: bottom;\n }\n \n th {\n text-align: inherit;\n }\n \n label {\n display: inline-block;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n button {\n border-radius: 0;\n }\n \n button:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n }\n \n input,\n button,\n select,\n optgroup,\n textarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n \n button,\n input {\n overflow: visible;\n }\n \n button,\n select {\n text-transform: none;\n }\n \n button,\n html [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n -webkit-appearance: button;\n }\n \n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner {\n padding: 0;\n border-style: none;\n }\n \n input[type=\"radio\"],\n input[type=\"checkbox\"] {\n box-sizing: border-box;\n padding: 0;\n }\n \n input[type=\"date\"],\n input[type=\"time\"],\n input[type=\"datetime-local\"],\n input[type=\"month\"] {\n -webkit-appearance: listbox;\n }\n \n textarea {\n overflow: auto;\n resize: vertical;\n }\n \n fieldset {\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n }\n \n legend {\n display: block;\n width: 100%;\n max-width: 100%;\n padding: 0;\n margin-bottom: " + props.spacing.space1 + ";\n font-size: " + props.fontSizes.text + ";\n line-height: inherit;\n color: inherit;\n white-space: normal;\n }\n \n progress {\n vertical-align: baseline;\n }\n \n [type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n }\n \n [type=\"search\"] {\n outline-offset: -2px;\n -webkit-appearance: none;\n }\n \n [type=\"search\"]::-webkit-search-cancel-button,\n [type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n \n ::-webkit-file-upload-button {\n font: inherit;\n -webkit-appearance: button;\n }\n \n output {\n display: inline-block;\n }\n \n summary {\n display: list-item;\n cursor: pointer;\n }\n \n template {\n display: none;\n }\n \n [hidden] {\n display: none !important;\n }\n ";
var rebootCss = "\n hr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n }\n \n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n }\n \n p {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n abbr[title],\n abbr[data-original-title] {\n text-decoration: underline;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n cursor: help;\n border-bottom: 0;\n }\n \n address {\n margin-bottom: " + props.spacing.space1 + ";\n font-style: normal;\n line-height: inherit;\n }\n \n ol,\n ul,\n dl {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n ol ol,\n ul ul,\n ol ul,\n ul ol {\n margin-bottom: 0;\n padding-left: calc(" + props.spacing.space1 + " + " + props.spacing.space2 + ");\n }\n \n dt {\n font-weight: 700;\n }\n \n dd {\n margin-bottom: " + props.spacing.space1 + ";\n margin-left: 0;\n }\n \n blockquote {\n margin: 0 0 " + props.spacing.space2 + ";\n }\n \n dfn {\n font-style: italic;\n }\n \n b,\n strong {\n font-weight: bolder;\n }\n \n small {\n font-size: 80%;\n }\n \n sub,\n sup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n }\n \n sub {\n bottom: -.25em;\n }\n \n sup {\n top: -.5em;\n }\n \n a {\n color: " + props.links.base + ";\n text-decoration: underline;\n background-color: transparent;\n -webkit-text-decoration-skip: objects;\n }\n \n a:hover {\n color: " + props.links.hover + ";\n text-decoration: underline;\n }\n\n a:active {\n color: " + props.links.active + ";\n text-decoration: underline;\n }\n \n a:visited {\n color: " + props.links.visited + ";\n text-decoration: underline;\n }\n \n a:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n }\n \n a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {\n color: inherit;\n }\n \n a:not([href]):not([tabindex]):focus {\n outline: 0;\n }\n \n pre,\n code,\n kbd,\n samp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 1em;\n }\n \n pre {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n overflow: auto;\n -ms-overflow-style: scrollbar;\n }\n \n figure {\n margin: 0 0 " + props.spacing.space2 + ";\n }\n \n img {\n vertical-align: middle;\n border-style: none;\n }\n \n svg {\n overflow: hidden;\n vertical-align: middle;\n }\n \n table {\n border-collapse: collapse;\n }\n \n caption {\n padding-top: " + props.spacing.space1 + ";\n padding-bottom: " + props.spacing.space1 + ";\n color: #6c757d;\n text-align: left;\n caption-side: bottom;\n }\n \n th {\n text-align: inherit;\n }\n \n label {\n display: inline-block;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n button {\n border-radius: 0;\n }\n \n button:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n }\n \n input,\n button,\n select,\n optgroup,\n textarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n \n button,\n input {\n overflow: visible;\n }\n \n button,\n select {\n text-transform: none;\n }\n \n button,\n html [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n -webkit-appearance: button;\n }\n \n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner {\n padding: 0;\n border-style: none;\n }\n \n input[type=\"radio\"],\n input[type=\"checkbox\"] {\n box-sizing: border-box;\n padding: 0;\n }\n \n input[type=\"date\"],\n input[type=\"time\"],\n input[type=\"datetime-local\"],\n input[type=\"month\"] {\n -webkit-appearance: listbox;\n }\n \n textarea {\n overflow: auto;\n resize: vertical;\n }\n \n fieldset {\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n }\n \n legend {\n display: block;\n width: 100%;\n max-width: 100%;\n padding: 0;\n margin-bottom: " + props.spacing.space1 + ";\n font-size: " + props.fontSizes.text + ";\n line-height: inherit;\n color: inherit;\n white-space: normal;\n }\n \n progress {\n vertical-align: baseline;\n }\n \n [type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n }\n \n [type=\"search\"] {\n outline-offset: -2px;\n -webkit-appearance: none;\n }\n \n [type=\"search\"]::-webkit-search-cancel-button,\n [type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n \n ::-webkit-file-upload-button {\n font: inherit;\n -webkit-appearance: button;\n }\n \n output {\n display: inline-block;\n }\n \n summary {\n display: list-item;\n cursor: pointer;\n }\n \n template {\n display: none;\n }\n \n [hidden] {\n display: none !important;\n }\n ";
renderer.renderStatic(rebootCss);
renderer.renderStatic(__assign({}, props.fontStyles.text), 'body');
renderer.renderStatic(__assign({}, props.fontStyles.headline), 'h1, h2, h3, h4, h5, h6');
renderer.renderStatic(__assign({}, props.fontStyles.base, { color: props.colors.text }), 'body');
renderer.renderStatic(__assign({}, props.fontStyles.alt), 'h1, h2, h3, h4, h5, h6');
renderer.renderStatic({

@@ -611,2 +1012,3 @@ marginTop: props.spacing.space2,

}, 'ul ul, ol ul');
renderer.renderStatic("\n @page {\n margin: 2cm;\n }\n @media print {\n h1, h2, h3, h4, h5, h6 { \n page-break-after: avoid;\n page-break-inside: avoid;\n } \n }\n ");
};

@@ -619,25 +1021,13 @@

var DEFAULT_CONFIG = {
plugins: [],
};
var createRenderer$$1 = function (_a) {
var _b = _a.init, init = _b === void 0 ? function () { return ({}); } : _b, _c = _a.config, config = _c === void 0 ? DEFAULT_CONFIG : _c, _d = _a.resetCss, resetCss = _d === void 0 ? true : _d;
var renderer = fela.createRenderer(config);
if (resetCss) {
renderResetCss(renderer);
}
init(renderer);
return renderer;
};
function withRenderer(Component) {
return function BoundComponent(props) {
return (React.createElement(reactFela.RendererContext.Consumer, null, function (value) { return React.createElement(Component, __assign({ renderer: value }, props)); }));
};
}
var typeScaleFactor = 1.333;
var typeScaleBase = 14;
var standardFont = 'sans-serif';
var typeScale = function (level) { return typeScaleBase + (typeScaleFactor * level); };
var systemFonts = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, ' +
'sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
var monoSystemFonts = 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;';
var breakpoints = {
tablet: { minWidth: '768px', sort: 1 },
desktop: { minWidth: '992px', sort: 2 },
largeDesktop: { minWidth: '1400px', sort: 3 },
};
var baseTheme = {

@@ -651,4 +1041,17 @@ fontSizes: {

},
fonts: {
text: standardFont,
fontStyles: {
base: {
fontFamily: systemFonts,
lineHeight: 1.3,
fontWeight: 400,
},
alt: {
fontFamily: systemFonts,
lineHeight: 1.3,
fontWeight: 700,
},
mono: {
fontFamily: monoSystemFonts,
color: '#000000',
},
},

@@ -665,79 +1068,45 @@ colors: {

},
zIndexes: {
default: 0,
absolute: 1,
},
breakpoints: breakpoints,
layout: {},
};
var isMergeableObject = function isMergeableObject(value) {
return isNonNullObject(value)
&& !isSpecial(value)
var toMinMediaQuery = function (breakpoint) {
return "@media (min-width: " + breakpoint.minWidth + ")";
};
function isNonNullObject(value) {
return !!value && typeof value === 'object'
function toMediaQueryMap(breakpoints) {
var mediaQueryMap = {};
Object.keys(breakpoints).forEach(function (key) {
var _a;
Object.assign(mediaQueryMap, (_a = {}, _a[key] = toMinMediaQuery(breakpoints[key]), _a));
});
return mediaQueryMap;
}
function isSpecial(value) {
var stringValue = Object.prototype.toString.call(value);
return stringValue === '[object RegExp]'
|| stringValue === '[object Date]'
|| isReactElement(value)
function createNamedKeys(breakpoints) {
return namedKeys(__assign({}, toMediaQueryMap(breakpoints), { print: '@media print' }));
}
var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
function isReactElement(value) {
return value.$$typeof === REACT_ELEMENT_TYPE
function createFelaConfig(breakpoints) {
if (breakpoints === void 0) { breakpoints = baseTheme.breakpoints; }
var config = {
plugins: webPreset.concat([
createNamedKeys(breakpoints),
]),
enhancers: [],
devMode: false,
};
if (process.env.NODE_ENV !== 'production') {
config.enhancers = [monolithic({ prettySelectors: true })];
config.devMode = true;
}
return config;
}
function emptyTarget(val) {
return Array.isArray(val) ? [] : {}
}
function cloneUnlessOtherwiseSpecified(value, options) {
return (options.clone !== false && options.isMergeableObject(value))
? deepmerge(emptyTarget(value), value, options)
: value
}
function defaultArrayMerge(target, source, options) {
return target.concat(source).map(function(element) {
return cloneUnlessOtherwiseSpecified(element, options)
})
}
function mergeObject(target, source, options) {
var destination = {};
if (options.isMergeableObject(target)) {
Object.keys(target).forEach(function(key) {
destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
});
}
Object.keys(source).forEach(function(key) {
if (!options.isMergeableObject(source[key]) || !target[key]) {
destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
} else {
destination[key] = deepmerge(target[key], source[key], options);
}
});
return destination
}
function deepmerge(target, source, options) {
options = options || {};
options.arrayMerge = options.arrayMerge || defaultArrayMerge;
options.isMergeableObject = options.isMergeableObject || isMergeableObject;
var sourceIsArray = Array.isArray(source);
var targetIsArray = Array.isArray(target);
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
if (!sourceAndTargetTypesMatch) {
return cloneUnlessOtherwiseSpecified(source, options)
} else if (sourceIsArray) {
return options.arrayMerge(target, source, options)
} else {
return mergeObject(target, source, options)
}
}
deepmerge.all = function deepmergeAll(array, options) {
if (!Array.isArray(array)) {
throw new Error('first argument should be an array')
}
return array.reduce(function(prev, next) {
return deepmerge(prev, next, options)
}, {})
};
var deepmerge_1 = deepmerge;
function buildTheme(customTheme) {
return deepmerge_1(baseTheme, customTheme);
function withRenderer(Component) {
return function BoundComponent(props) {
return (React.createElement(reactFela.RendererContext.Consumer, null, function (value) { return React.createElement(Component, __assign({ renderer: value }, props)); }));
};
}

@@ -747,7 +1116,6 @@

exports.createFlexChildCSSProps = createFlexChildCSSProps;
exports.createStylingCSSProps = createStylingCSSProps;
exports.createFontCSSProps = createFontCSSProps;
exports.createMarginCSSProps = createMarginCSSProps;
exports.createPaddingCSSProps = createPaddingCSSProps;
exports.createStylingCSSProps = createStylingCSSProps;
exports.filterProps = filterProps;
exports.mergeThemedStyles = mergeThemedStyles;

@@ -770,6 +1138,10 @@ exports.extendBox = extendBox;

exports.renderResetCss = renderResetCss;
exports.createRenderer = createRenderer$$1;
exports.createFelaConfig = createFelaConfig;
exports.withRenderer = withRenderer;
exports.typeScale = typeScale;
exports.systemFonts = systemFonts;
exports.monoSystemFonts = monoSystemFonts;
exports.breakpoints = breakpoints;
exports.baseTheme = baseTheme;
exports.buildTheme = buildTheme;
exports.toMinMediaQuery = toMinMediaQuery;
exports.toMediaQueryMap = toMediaQueryMap;

915

dist/indoqa-style-system.es.js
import { FelaComponent, createComponentWithProxy, RendererContext } from 'react-fela';
import { createElement, Component, createContext, Children, cloneElement } from 'react';
import { createRenderer } from 'fela';
import { createElement, createContext, Component, Children, cloneElement } from 'react';
import monolithic from 'fela-monolithic';
import namedKeys from 'fela-plugin-named-keys';
import webPreset from 'fela-preset-web';

@@ -30,13 +32,52 @@ var THEME_NOT_AVAILABLE_ERR_MSG = 'There is no theme available or one of its properties is missing. ' +

};
var createFontCSSProps = function (_a) {
var theme = _a.theme, font = _a.font, fontSize = _a.fontSize, color = _a.color, bold = _a.bold, ellipsis = _a.ellipsis;
if (theme === undefined || theme.fonts === undefined || theme.fontSizes === undefined || theme.colors === undefined) {
function getColor(theme, color) {
if (color in theme.colors) {
return theme.colors[color];
}
return color;
}
function getFontSize(theme, fontSize) {
if (fontSize in theme.fontSizes) {
return theme.fontSizes[fontSize];
}
return '';
}
function getFontStyle(theme, fontStyle) {
if (fontStyle in theme.fontStyles) {
return theme.fontStyles[fontStyle];
}
return '';
}
function createStylingCSSProps(_a) {
var theme = _a.theme, bg = _a.bg;
if (theme === undefined || theme.colors === undefined) {
throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
}
var styles = {
fontFamily: (font) ? theme.fonts[font] : theme.fonts.text,
fontSize: (fontSize) ? theme.fontSizes[fontSize] : theme.fontSizes.text,
color: (color) ? theme.colors[color] : theme.colors.text,
fontWeight: (bold) ? 700 : 400,
};
var styles = {};
if (bg) {
Object.assign(styles, { backgroundColor: getColor(theme, bg) });
}
return styles;
}
function createFontCSSProps(_a) {
var theme = _a.theme, fontStyle = _a.fontStyle, fontSize = _a.fontSize, color = _a.color, bold = _a.bold, italic = _a.italic, ellipsis = _a.ellipsis, textAlign = _a.textAlign;
if (theme === undefined) {
throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
}
var styles = {};
if (bold) {
Object.assign(styles, { fontWeight: 700 });
}
if (italic) {
Object.assign(styles, { fontStyle: 'italic' });
}
if (fontStyle) {
Object.assign(styles, getFontStyle(theme, fontStyle));
}
if (fontSize) {
Object.assign(styles, { fontSize: getFontSize(theme, fontSize) });
}
if (color) {
Object.assign(styles, { color: getColor(theme, color) });
}
if (ellipsis) {

@@ -50,4 +91,7 @@ var ellipsisStyles = {

}
if (textAlign) {
Object.assign(styles, { textAlign: textAlign });
}
return styles;
};
}
var createMarginCSSProps = function (_a) {

@@ -115,48 +159,2 @@ var theme = _a.theme, m = _a.m, mt = _a.mt, mb = _a.mb, ml = _a.ml, mr = _a.mr, mx = _a.mx, my = _a.my;

};
var createStylingCSSProps = function (_a) {
var theme = _a.theme, bg = _a.bg;
if (theme === undefined || theme.colors === undefined) {
throw Error(THEME_NOT_AVAILABLE_ERR_MSG);
}
if (bg === undefined) {
return {};
}
if (bg in theme.colors) {
return ({
backgroundColor: (bg) ? theme.colors[bg] : 'transparent',
});
}
if (process.env.NODE_ENV !== 'production') {
console.warn("The bg color " + bg + " is not available in theme.colors.");
}
return {};
};
var knownProps = [
'inline', 'width', 'height', 'fullWidth', 'fullHeight',
'grow', 'shrink', 'basis', 'order', 'align',
'direction', 'nowrap', 'center', 'justifyContent', 'alignItems', 'stretch',
'font', 'fontSize', 'color', 'bold', 'ellipsis',
'm', 'mt', 'mb', 'ml', 'mr', 'mx', 'my',
'p', 'pt', 'pb', 'pl', 'pr', 'px', 'py',
'bg',
'theme',
];
var isUnknownProps = function (prop) {
for (var _i = 0, knownProps_1 = knownProps; _i < knownProps_1.length; _i++) {
var eachKnownProps = knownProps_1[_i];
if (eachKnownProps === prop) {
return false;
}
}
return true;
};
function filterProps(props) {
return Object
.keys(props)
.filter(isUnknownProps)
.reduce(function (obj, key) {
obj[key] = props[key];
return obj;
}, {});
}
function mergeThemedStyles(componentStyle, passedStyle) {

@@ -172,6 +170,3 @@ if (!passedStyle) {

var spacing = function (theme, propValue) {
if (!propValue) {
throw new Error('A spacing value must not be null.');
}
if (theme === undefined || theme.spacing === undefined) {
if (theme === undefined) {
throw Error(THEME_NOT_AVAILABLE_ERR_MSG);

@@ -236,74 +231,61 @@ }

var createBoxCSSStyles = function (props) { return (__assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createStylingCSSProps(props), createFontCSSProps(props))); };
var themedBoxStyles = function (props) { return (__assign({}, createBoxCSSStyles(props))); };
var Box = (function (_super) {
__extends(Box, _super);
function Box() {
return _super !== null && _super.apply(this, arguments) || this;
}
Box.prototype.render = function () {
var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
var styles = mergeThemedStyles(themedBoxStyles, style);
return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (createElement("div", __assign({ className: className }, filterProps(rest)), children));
}));
};
return Box;
}(Component));
function createBoxCSSStyles(props) {
return __assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createStylingCSSProps(props), createFontCSSProps(props));
}
function themedBoxStyles(props) {
return __assign({}, createBoxCSSStyles(props));
}
function Box(props) {
var children = props.children, style = props.style, htmlAttrs = props.htmlAttrs, rest = __rest(props, ["children", "style", "htmlAttrs"]);
var styles = mergeThemedStyles(themedBoxStyles, style);
return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (createElement("div", __assign({ className: className }, htmlAttrs), children));
}));
}
var extendBox = function (styles) { return createComponentWithProxy(styles, Box); };
var align = function (center, stretch, value) {
if (center) {
return 'center';
}
if (value) {
return value;
}
return (stretch) ? 'stretch' : 'flex-start';
};
var createFlexContainerCSSStyle = function (_a) {
var inline = _a.inline, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, nowrap = _a.nowrap, center = _a.center, justifyContent = _a.justifyContent, alignItems = _a.alignItems, stretch = _a.stretch;
return ({
var inline = _a.inline, direction = _a.direction, nowrap = _a.nowrap, center = _a.center, justifyContent = _a.justifyContent, alignItems = _a.alignItems;
var styles = ({
display: (inline) ? 'inline-flex' : 'flex',
flexDirection: direction,
flexDirection: direction || 'row',
flexWrap: (nowrap) ? 'nowrap' : 'wrap',
justifyContent: align(center, stretch, justifyContent),
alignItems: align(center, stretch, alignItems),
justifyContent: justifyContent || 'flex-start',
alignItems: alignItems || 'stretch',
});
if (center) {
var centerStyles = {
justifyContent: justifyContent || 'center',
alignItems: alignItems || 'center',
textAlign: 'center',
};
Object.assign(styles, centerStyles);
}
return styles;
};
var themedFlexStyles = function (props) { return (__assign({}, createBoxCSSStyles(props), createFlexContainerCSSStyle(props))); };
var Flex = (function (_super) {
__extends(Flex, _super);
function Flex() {
return _super !== null && _super.apply(this, arguments) || this;
}
Flex.prototype.render = function () {
var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
var styles = mergeThemedStyles(themedFlexStyles, style);
return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (createElement("div", __assign({ className: className }, filterProps(rest)), children));
}));
};
return Flex;
}(Component));
function themedFlexStyles(props) {
return __assign({}, createBoxCSSStyles(props), createFlexContainerCSSStyle(props));
}
function Flex(props) {
var children = props.children, style = props.style, htmlAttrs = props.htmlAttrs, rest = __rest(props, ["children", "style", "htmlAttrs"]);
var styles = mergeThemedStyles(themedFlexStyles, style);
return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (createElement("div", __assign({ className: className }, htmlAttrs), children));
}));
}
var themedTextStyle = function (props) { return (__assign({ display: 'inline-block' }, createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createFontCSSProps(props))); };
var Text = (function (_super) {
__extends(Text, _super);
function Text() {
return _super !== null && _super.apply(this, arguments) || this;
}
Text.prototype.render = function () {
var _a = this.props, children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
var styles = mergeThemedStyles(themedTextStyle, style);
return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (createElement("span", __assign({ className: className }, filterProps(rest)), children));
}));
};
return Text;
}(Component));
function themedTextStyle(props) {
return __assign({ display: 'inline-block' }, createMarginCSSProps(props), createPaddingCSSProps(props), createFlexChildCSSProps(props), createFontCSSProps(props), createStylingCSSProps(props));
}
function Text(props) {
var children = props.children, style = props.style, htmlAttrs = props.htmlAttrs, rest = __rest(props, ["children", "style", "htmlAttrs"]);
var styles = mergeThemedStyles(themedTextStyle, style);
return (createElement(FelaComponent, __assign({ style: styles }, rest), function (_a) {
var className = _a.className;
return (createElement("span", __assign({ className: className }, htmlAttrs), children));
}));
}

@@ -327,11 +309,4 @@ var GridContext = createContext({

var addUnitIfNeeded = function (value, propertyUnit) {
var valueType = typeof value;
if ((valueType === 'number' || (valueType === 'string' && !isNaN(value)))) {
return "" + value + (propertyUnit || 'px');
}
return "" + value;
};
var GRID_SIZE = 12;
var EMPTY_STYLE = {};
var Col = (function (_super) {

@@ -343,20 +318,6 @@ __extends(Col, _super);

Col.prototype.render = function () {
var internalProps = this.props;
var children = internalProps.children, rowBreak = internalProps.rowBreak, marginTop = internalProps.marginTop, size = internalProps.size;
var effectiveSize = size ? size : 12;
var colStyle = function (_a) {
var spacing = _a.spacing;
var marginRight = rowBreak ? '0px' : spacing;
var spacingWithUnit = addUnitIfNeeded(spacing);
var availableSpace = "(100% - " + spacingWithUnit + " * " + (GRID_SIZE - 1) + ")";
var coveredSpacing = spacingWithUnit + " * " + (effectiveSize - 1);
return ({
width: "calc(" + availableSpace + " / " + GRID_SIZE + " * " + effectiveSize + " + " + coveredSpacing + ")",
marginRight: marginRight,
marginTop: marginTop,
});
};
var _a = this.props, children = _a.children, style = _a.style;
return (createElement(GridContext.Consumer, null, function (_a) {
var spacing = _a.spacing;
var child = (createElement(FelaComponent, { style: colStyle, spacing: spacing }, children));
var child = (createElement(FelaComponent, { style: style || EMPTY_STYLE, spacing: spacing }, children));
return testGridContext(spacing, child);

@@ -371,2 +332,461 @@ }));

var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
var _freeGlobal = freeGlobal;
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
var root = _freeGlobal || freeSelf || Function('return this')();
var _root = root;
var Symbol = _root.Symbol;
var _Symbol = Symbol;
var objectProto = Object.prototype;
var hasOwnProperty = objectProto.hasOwnProperty;
var nativeObjectToString = objectProto.toString;
var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
function getRawTag(value) {
var isOwn = hasOwnProperty.call(value, symToStringTag),
tag = value[symToStringTag];
try {
value[symToStringTag] = undefined;
var unmasked = true;
} catch (e) {}
var result = nativeObjectToString.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag] = tag;
} else {
delete value[symToStringTag];
}
}
return result;
}
var _getRawTag = getRawTag;
var objectProto$1 = Object.prototype;
var nativeObjectToString$1 = objectProto$1.toString;
function objectToString(value) {
return nativeObjectToString$1.call(value);
}
var _objectToString = objectToString;
var nullTag = '[object Null]',
undefinedTag = '[object Undefined]';
var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
function baseGetTag(value) {
if (value == null) {
return value === undefined ? undefinedTag : nullTag;
}
return (symToStringTag$1 && symToStringTag$1 in Object(value))
? _getRawTag(value)
: _objectToString(value);
}
var _baseGetTag = baseGetTag;
function isObject(value) {
var type = typeof value;
return value != null && (type == 'object' || type == 'function');
}
var isObject_1 = isObject;
var asyncTag = '[object AsyncFunction]',
funcTag = '[object Function]',
genTag = '[object GeneratorFunction]',
proxyTag = '[object Proxy]';
function isFunction(value) {
if (!isObject_1(value)) {
return false;
}
var tag = _baseGetTag(value);
return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
}
var isFunction_1 = isFunction;
var coreJsData = _root['__core-js_shared__'];
var _coreJsData = coreJsData;
var maskSrcKey = (function() {
var uid = /[^.]+$/.exec(_coreJsData && _coreJsData.keys && _coreJsData.keys.IE_PROTO || '');
return uid ? ('Symbol(src)_1.' + uid) : '';
}());
function isMasked(func) {
return !!maskSrcKey && (maskSrcKey in func);
}
var _isMasked = isMasked;
var funcProto = Function.prototype;
var funcToString = funcProto.toString;
function toSource(func) {
if (func != null) {
try {
return funcToString.call(func);
} catch (e) {}
try {
return (func + '');
} catch (e) {}
}
return '';
}
var _toSource = toSource;
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
var reIsHostCtor = /^\[object .+?Constructor\]$/;
var funcProto$1 = Function.prototype,
objectProto$2 = Object.prototype;
var funcToString$1 = funcProto$1.toString;
var hasOwnProperty$1 = objectProto$2.hasOwnProperty;
var reIsNative = RegExp('^' +
funcToString$1.call(hasOwnProperty$1).replace(reRegExpChar, '\\$&')
.replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
);
function baseIsNative(value) {
if (!isObject_1(value) || _isMasked(value)) {
return false;
}
var pattern = isFunction_1(value) ? reIsNative : reIsHostCtor;
return pattern.test(_toSource(value));
}
var _baseIsNative = baseIsNative;
function getValue(object, key) {
return object == null ? undefined : object[key];
}
var _getValue = getValue;
function getNative(object, key) {
var value = _getValue(object, key);
return _baseIsNative(value) ? value : undefined;
}
var _getNative = getNative;
var nativeCreate = _getNative(Object, 'create');
var _nativeCreate = nativeCreate;
function hashClear() {
this.__data__ = _nativeCreate ? _nativeCreate(null) : {};
this.size = 0;
}
var _hashClear = hashClear;
function hashDelete(key) {
var result = this.has(key) && delete this.__data__[key];
this.size -= result ? 1 : 0;
return result;
}
var _hashDelete = hashDelete;
var HASH_UNDEFINED = '__lodash_hash_undefined__';
var objectProto$3 = Object.prototype;
var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
function hashGet(key) {
var data = this.__data__;
if (_nativeCreate) {
var result = data[key];
return result === HASH_UNDEFINED ? undefined : result;
}
return hasOwnProperty$2.call(data, key) ? data[key] : undefined;
}
var _hashGet = hashGet;
var objectProto$4 = Object.prototype;
var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
function hashHas(key) {
var data = this.__data__;
return _nativeCreate ? (data[key] !== undefined) : hasOwnProperty$3.call(data, key);
}
var _hashHas = hashHas;
var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
function hashSet(key, value) {
var data = this.__data__;
this.size += this.has(key) ? 0 : 1;
data[key] = (_nativeCreate && value === undefined) ? HASH_UNDEFINED$1 : value;
return this;
}
var _hashSet = hashSet;
function Hash(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
Hash.prototype.clear = _hashClear;
Hash.prototype['delete'] = _hashDelete;
Hash.prototype.get = _hashGet;
Hash.prototype.has = _hashHas;
Hash.prototype.set = _hashSet;
var _Hash = Hash;
function listCacheClear() {
this.__data__ = [];
this.size = 0;
}
var _listCacheClear = listCacheClear;
function eq(value, other) {
return value === other || (value !== value && other !== other);
}
var eq_1 = eq;
function assocIndexOf(array, key) {
var length = array.length;
while (length--) {
if (eq_1(array[length][0], key)) {
return length;
}
}
return -1;
}
var _assocIndexOf = assocIndexOf;
var arrayProto = Array.prototype;
var splice = arrayProto.splice;
function listCacheDelete(key) {
var data = this.__data__,
index = _assocIndexOf(data, key);
if (index < 0) {
return false;
}
var lastIndex = data.length - 1;
if (index == lastIndex) {
data.pop();
} else {
splice.call(data, index, 1);
}
--this.size;
return true;
}
var _listCacheDelete = listCacheDelete;
function listCacheGet(key) {
var data = this.__data__,
index = _assocIndexOf(data, key);
return index < 0 ? undefined : data[index][1];
}
var _listCacheGet = listCacheGet;
function listCacheHas(key) {
return _assocIndexOf(this.__data__, key) > -1;
}
var _listCacheHas = listCacheHas;
function listCacheSet(key, value) {
var data = this.__data__,
index = _assocIndexOf(data, key);
if (index < 0) {
++this.size;
data.push([key, value]);
} else {
data[index][1] = value;
}
return this;
}
var _listCacheSet = listCacheSet;
function ListCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
ListCache.prototype.clear = _listCacheClear;
ListCache.prototype['delete'] = _listCacheDelete;
ListCache.prototype.get = _listCacheGet;
ListCache.prototype.has = _listCacheHas;
ListCache.prototype.set = _listCacheSet;
var _ListCache = ListCache;
var Map = _getNative(_root, 'Map');
var _Map = Map;
function mapCacheClear() {
this.size = 0;
this.__data__ = {
'hash': new _Hash,
'map': new (_Map || _ListCache),
'string': new _Hash
};
}
var _mapCacheClear = mapCacheClear;
function isKeyable(value) {
var type = typeof value;
return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
? (value !== '__proto__')
: (value === null);
}
var _isKeyable = isKeyable;
function getMapData(map, key) {
var data = map.__data__;
return _isKeyable(key)
? data[typeof key == 'string' ? 'string' : 'hash']
: data.map;
}
var _getMapData = getMapData;
function mapCacheDelete(key) {
var result = _getMapData(this, key)['delete'](key);
this.size -= result ? 1 : 0;
return result;
}
var _mapCacheDelete = mapCacheDelete;
function mapCacheGet(key) {
return _getMapData(this, key).get(key);
}
var _mapCacheGet = mapCacheGet;
function mapCacheHas(key) {
return _getMapData(this, key).has(key);
}
var _mapCacheHas = mapCacheHas;
function mapCacheSet(key, value) {
var data = _getMapData(this, key),
size = data.size;
data.set(key, value);
this.size += data.size == size ? 0 : 1;
return this;
}
var _mapCacheSet = mapCacheSet;
function MapCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
MapCache.prototype.clear = _mapCacheClear;
MapCache.prototype['delete'] = _mapCacheDelete;
MapCache.prototype.get = _mapCacheGet;
MapCache.prototype.has = _mapCacheHas;
MapCache.prototype.set = _mapCacheSet;
var _MapCache = MapCache;
var FUNC_ERROR_TEXT = 'Expected a function';
function memoize(func, resolver) {
if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
throw new TypeError(FUNC_ERROR_TEXT);
}
var memoized = function() {
var args = arguments,
key = resolver ? resolver.apply(this, args) : args[0],
cache = memoized.cache;
if (cache.has(key)) {
return cache.get(key);
}
var result = func.apply(this, args);
memoized.cache = cache.set(key, result) || cache;
return result;
};
memoized.cache = new (memoize.Cache || _MapCache);
return memoized;
}
memoize.Cache = _MapCache;
var memoize_1 = memoize;
function sortBreakpoints(breakpoints) {
var sortBreakpointsFn = function (breakpointsToBeSorted) { return Object
.keys(breakpointsToBeSorted)
.map(function (key) { return Object.assign(breakpoints[key], { name: key }); })
.sort(function (b1, b2) { return b1.sort - b2.sort; }); };
if (process.env.NODE_ENV === 'production') {
return memoize_1(function () { return sortBreakpointsFn(breakpoints); })();
}
return sortBreakpointsFn(breakpoints);
}
var addUnitIfNeeded = function (value, propertyUnit) {
var valueType = typeof value;
if ((valueType === 'number' || (valueType === 'string' && !isNaN(value)))) {
return "" + value + (propertyUnit || 'px');
}
return "" + value;
};
var calcWidthValue = function (size, spacing) {
var spacingWithUnit = addUnitIfNeeded(spacing);
var availableSpace = "(100% - " + spacingWithUnit + " * " + (GRID_SIZE - 1) + ")";
var coveredSpacing = spacingWithUnit + " * " + (size - 1);
return "calc(" + availableSpace + " / " + GRID_SIZE + " * " + size + " + " + coveredSpacing + " - 0.01px)";
};
var getEnhancedColStyles = function (child, breakpointName, size, willBreakAfter, needsMarginTop, spacing) {
var _a;
var style = {
width: calcWidthValue(size, spacing),
marginTop: needsMarginTop ? spacing : 0,
marginRight: willBreakAfter ? '0px' : spacing,
};
return breakpointName === null ? style : (_a = {}, _a[breakpointName] = style, _a);
};
var toSizeArray = function (size) {
if (Array.isArray(size)) {
return size;
}
return [size];
};
var initializeArray = function (length) {
var a = [];
for (var i = 0; i < length; i++) {
a.push(0);
}
return a;
};
var mergeStyles = function (style1, style2) {
if (style2 === null) {
return style1;
}
return [style1, style2];
};
var validateSizes = function (sizes, breakpointCount, child) {
if (sizes > breakpointCount + 1) {
if (process.env.NODE_ENV !== 'production') {
console.warn('There are more Col sizes than breakpoints.', child);
}
return false;
}
return true;
};
var rewriteCols = function (breakpoints, children, spacing) {
var currentRowSize = initializeArray(breakpoints.length);
var rowsCount = initializeArray(breakpoints.length);
return Children.map(children, function (child) {
var currentChild = child;
var sizes = toSizeArray(currentChild.props.size);
if (!validateSizes(sizes.length, breakpoints.length, child)) {
return;
}
var style = currentChild.props.style;
var enhancedColStyles = {};
for (var i = 0; i < sizes.length; i++) {
var currentBreakpoint = i === 0 ? null : breakpoints[i - 1].name;
currentRowSize[i] += sizes[i];
var willOverflow = currentRowSize[i] > GRID_SIZE;
if (willOverflow) {
currentRowSize[i] = sizes[i];
}
var completelyFillsRow = currentRowSize[i] === GRID_SIZE;
var needsMarginTop = willOverflow || rowsCount[i] > 0;
if (completelyFillsRow || willOverflow) {
rowsCount[i]++;
}
var enhancedColStyle = getEnhancedColStyles(currentChild, currentBreakpoint, sizes[i], completelyFillsRow, needsMarginTop, spacing);
Object.assign(enhancedColStyles, enhancedColStyle);
}
return cloneElement((currentChild), { style: mergeStyles(enhancedColStyles, style) });
});
};
var RowContainer = (function (_super) {

@@ -378,11 +798,16 @@ __extends(RowContainer, _super);

RowContainer.prototype.render = function () {
var _this = this;
var rowStyle = function (_a) {
var style = _a.style, spacing = _a.spacing, otherProps = __rest(_a, ["style", "spacing"]);
return (__assign({}, createPaddingCSSProps(otherProps), createStylingCSSProps(otherProps), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', marginTop: spacing, ':first-child': {
return (__assign({}, createPaddingCSSProps(otherProps), createStylingCSSProps(otherProps), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', marginTop: spacing, '&:first-child': {
marginTop: 0,
} }));
};
var _a = this.props, children = _a.children, style = _a.style, otherProps = __rest(_a, ["children", "style"]);
var _a = this.props, style = _a.style, otherProps = __rest(_a, ["style"]);
var styles = mergeThemedStyles(rowStyle, style);
return (createElement(FelaComponent, __assign({ style: styles }, otherProps), children));
var renderCols = function (_a) {
var className = _a.className, theme = _a.theme;
return (createElement("div", { className: className }, rewriteCols(sortBreakpoints(theme.breakpoints), _this.props.children, _this.props.spacing)));
};
return (createElement(FelaComponent, __assign({ style: styles }, otherProps), renderCols));
};

@@ -396,28 +821,2 @@ return RowContainer;

}
ColRow.prototype.renderChildren = function (spacing) {
var currentRowSize = 0;
var rowsCount = 0;
return Children.map(this.props.children, function (child) {
var currentChild = child;
currentRowSize += currentChild.props.size;
if (currentRowSize === GRID_SIZE) {
currentRowSize = 0;
rowsCount++;
return cloneElement((currentChild), {
rowBreak: true,
marginTop: rowsCount > 1 ? spacing : 0
});
}
if (currentRowSize >= GRID_SIZE) {
rowsCount++;
}
if (rowsCount > 0) {
return cloneElement((currentChild), {
rowBreak: false,
marginTop: spacing
});
}
return currentChild;
});
};
ColRow.prototype.render = function () {

@@ -427,3 +826,3 @@ var _this = this;

var spacing = _a.spacing;
var child = (createElement(RowContainer, __assign({ spacing: spacing }, _this.props), _this.renderChildren(spacing)));
var child = (createElement(RowContainer, __assign({ spacing: spacing }, _this.props), _this.props.children));
return testGridContext(spacing, child);

@@ -583,6 +982,6 @@ }));

}, 'html, body, #app');
var rebootCss = "\n hr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n }\n \n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: 0;\n }\n \n p {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n abbr[title],\n abbr[data-original-title] {\n text-decoration: underline;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n cursor: help;\n border-bottom: 0;\n }\n \n address {\n margin-bottom: " + props.spacing.space1 + ";\n font-style: normal;\n line-height: inherit;\n }\n \n ol,\n ul,\n dl {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n ol ol,\n ul ul,\n ol ul,\n ul ol {\n margin-bottom: 0;\n padding-left: calc(" + props.spacing.space1 + " + " + props.spacing.space2 + ");\n }\n \n dt {\n font-weight: 700;\n }\n \n dd {\n margin-bottom: " + props.spacing.space1 + ";\n margin-left: 0;\n }\n \n blockquote {\n margin: 0 0 " + props.spacing.space2 + ";\n }\n \n dfn {\n font-style: italic;\n }\n \n b,\n strong {\n font-weight: bolder;\n }\n \n small {\n font-size: 80%;\n }\n \n sub,\n sup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n }\n \n sub {\n bottom: -.25em;\n }\n \n sup {\n top: -.5em;\n }\n \n a {\n color: " + props.links.base + ";\n text-decoration: underline;\n background-color: transparent;\n -webkit-text-decoration-skip: objects;\n }\n \n a:hover {\n color: " + props.links.hover + ";\n text-decoration: underline;\n }\n\n a:active {\n color: " + props.links.active + ";\n text-decoration: underline;\n }\n \n a:visited {\n color: " + props.links.visited + ";\n text-decoration: underline;\n }\n \n a:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n }\n \n a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {\n color: inherit;\n }\n \n a:not([href]):not([tabindex]):focus {\n outline: 0;\n }\n \n pre,\n code,\n kbd,\n samp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 1em;\n }\n \n pre {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n overflow: auto;\n -ms-overflow-style: scrollbar;\n }\n \n figure {\n margin: 0 0 " + props.spacing.space2 + ";\n }\n \n img {\n vertical-align: middle;\n border-style: none;\n }\n \n svg {\n overflow: hidden;\n vertical-align: middle;\n }\n \n table {\n border-collapse: collapse;\n }\n \n caption {\n padding-top: " + props.spacing.space1 + ";\n padding-bottom: " + props.spacing.space1 + ";\n color: #6c757d;\n text-align: left;\n caption-side: bottom;\n }\n \n th {\n text-align: inherit;\n }\n \n label {\n display: inline-block;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n button {\n border-radius: 0;\n }\n \n button:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n }\n \n input,\n button,\n select,\n optgroup,\n textarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n \n button,\n input {\n overflow: visible;\n }\n \n button,\n select {\n text-transform: none;\n }\n \n button,\n html [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n -webkit-appearance: button;\n }\n \n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner {\n padding: 0;\n border-style: none;\n }\n \n input[type=\"radio\"],\n input[type=\"checkbox\"] {\n box-sizing: border-box;\n padding: 0;\n }\n \n input[type=\"date\"],\n input[type=\"time\"],\n input[type=\"datetime-local\"],\n input[type=\"month\"] {\n -webkit-appearance: listbox;\n }\n \n textarea {\n overflow: auto;\n resize: vertical;\n }\n \n fieldset {\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n }\n \n legend {\n display: block;\n width: 100%;\n max-width: 100%;\n padding: 0;\n margin-bottom: " + props.spacing.space1 + ";\n font-size: " + props.fontSizes.text + ";\n line-height: inherit;\n color: inherit;\n white-space: normal;\n }\n \n progress {\n vertical-align: baseline;\n }\n \n [type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n }\n \n [type=\"search\"] {\n outline-offset: -2px;\n -webkit-appearance: none;\n }\n \n [type=\"search\"]::-webkit-search-cancel-button,\n [type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n \n ::-webkit-file-upload-button {\n font: inherit;\n -webkit-appearance: button;\n }\n \n output {\n display: inline-block;\n }\n \n summary {\n display: list-item;\n cursor: pointer;\n }\n \n template {\n display: none;\n }\n \n [hidden] {\n display: none !important;\n }\n ";
var rebootCss = "\n hr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n }\n \n h1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n }\n \n p {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n abbr[title],\n abbr[data-original-title] {\n text-decoration: underline;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n cursor: help;\n border-bottom: 0;\n }\n \n address {\n margin-bottom: " + props.spacing.space1 + ";\n font-style: normal;\n line-height: inherit;\n }\n \n ol,\n ul,\n dl {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n ol ol,\n ul ul,\n ol ul,\n ul ol {\n margin-bottom: 0;\n padding-left: calc(" + props.spacing.space1 + " + " + props.spacing.space2 + ");\n }\n \n dt {\n font-weight: 700;\n }\n \n dd {\n margin-bottom: " + props.spacing.space1 + ";\n margin-left: 0;\n }\n \n blockquote {\n margin: 0 0 " + props.spacing.space2 + ";\n }\n \n dfn {\n font-style: italic;\n }\n \n b,\n strong {\n font-weight: bolder;\n }\n \n small {\n font-size: 80%;\n }\n \n sub,\n sup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n }\n \n sub {\n bottom: -.25em;\n }\n \n sup {\n top: -.5em;\n }\n \n a {\n color: " + props.links.base + ";\n text-decoration: underline;\n background-color: transparent;\n -webkit-text-decoration-skip: objects;\n }\n \n a:hover {\n color: " + props.links.hover + ";\n text-decoration: underline;\n }\n\n a:active {\n color: " + props.links.active + ";\n text-decoration: underline;\n }\n \n a:visited {\n color: " + props.links.visited + ";\n text-decoration: underline;\n }\n \n a:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n }\n \n a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {\n color: inherit;\n }\n \n a:not([href]):not([tabindex]):focus {\n outline: 0;\n }\n \n pre,\n code,\n kbd,\n samp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 1em;\n }\n \n pre {\n margin-top: 0;\n margin-bottom: " + props.spacing.space1 + ";\n overflow: auto;\n -ms-overflow-style: scrollbar;\n }\n \n figure {\n margin: 0 0 " + props.spacing.space2 + ";\n }\n \n img {\n vertical-align: middle;\n border-style: none;\n }\n \n svg {\n overflow: hidden;\n vertical-align: middle;\n }\n \n table {\n border-collapse: collapse;\n }\n \n caption {\n padding-top: " + props.spacing.space1 + ";\n padding-bottom: " + props.spacing.space1 + ";\n color: #6c757d;\n text-align: left;\n caption-side: bottom;\n }\n \n th {\n text-align: inherit;\n }\n \n label {\n display: inline-block;\n margin-bottom: " + props.spacing.space1 + ";\n }\n \n button {\n border-radius: 0;\n }\n \n button:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n }\n \n input,\n button,\n select,\n optgroup,\n textarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n \n button,\n input {\n overflow: visible;\n }\n \n button,\n select {\n text-transform: none;\n }\n \n button,\n html [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n -webkit-appearance: button;\n }\n \n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner {\n padding: 0;\n border-style: none;\n }\n \n input[type=\"radio\"],\n input[type=\"checkbox\"] {\n box-sizing: border-box;\n padding: 0;\n }\n \n input[type=\"date\"],\n input[type=\"time\"],\n input[type=\"datetime-local\"],\n input[type=\"month\"] {\n -webkit-appearance: listbox;\n }\n \n textarea {\n overflow: auto;\n resize: vertical;\n }\n \n fieldset {\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n }\n \n legend {\n display: block;\n width: 100%;\n max-width: 100%;\n padding: 0;\n margin-bottom: " + props.spacing.space1 + ";\n font-size: " + props.fontSizes.text + ";\n line-height: inherit;\n color: inherit;\n white-space: normal;\n }\n \n progress {\n vertical-align: baseline;\n }\n \n [type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n }\n \n [type=\"search\"] {\n outline-offset: -2px;\n -webkit-appearance: none;\n }\n \n [type=\"search\"]::-webkit-search-cancel-button,\n [type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n \n ::-webkit-file-upload-button {\n font: inherit;\n -webkit-appearance: button;\n }\n \n output {\n display: inline-block;\n }\n \n summary {\n display: list-item;\n cursor: pointer;\n }\n \n template {\n display: none;\n }\n \n [hidden] {\n display: none !important;\n }\n ";
renderer.renderStatic(rebootCss);
renderer.renderStatic(__assign({}, props.fontStyles.text), 'body');
renderer.renderStatic(__assign({}, props.fontStyles.headline), 'h1, h2, h3, h4, h5, h6');
renderer.renderStatic(__assign({}, props.fontStyles.base, { color: props.colors.text }), 'body');
renderer.renderStatic(__assign({}, props.fontStyles.alt), 'h1, h2, h3, h4, h5, h6');
renderer.renderStatic({

@@ -606,2 +1005,3 @@ marginTop: props.spacing.space2,

}, 'ul ul, ol ul');
renderer.renderStatic("\n @page {\n margin: 2cm;\n }\n @media print {\n h1, h2, h3, h4, h5, h6 { \n page-break-after: avoid;\n page-break-inside: avoid;\n } \n }\n ");
};

@@ -614,25 +1014,13 @@

var DEFAULT_CONFIG = {
plugins: [],
};
var createRenderer$$1 = function (_a) {
var _b = _a.init, init = _b === void 0 ? function () { return ({}); } : _b, _c = _a.config, config = _c === void 0 ? DEFAULT_CONFIG : _c, _d = _a.resetCss, resetCss = _d === void 0 ? true : _d;
var renderer = createRenderer(config);
if (resetCss) {
renderResetCss(renderer);
}
init(renderer);
return renderer;
};
function withRenderer(Component$$1) {
return function BoundComponent(props) {
return (createElement(RendererContext.Consumer, null, function (value) { return createElement(Component$$1, __assign({ renderer: value }, props)); }));
};
}
var typeScaleFactor = 1.333;
var typeScaleBase = 14;
var standardFont = 'sans-serif';
var typeScale = function (level) { return typeScaleBase + (typeScaleFactor * level); };
var systemFonts = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, ' +
'sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
var monoSystemFonts = 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;';
var breakpoints = {
tablet: { minWidth: '768px', sort: 1 },
desktop: { minWidth: '992px', sort: 2 },
largeDesktop: { minWidth: '1400px', sort: 3 },
};
var baseTheme = {

@@ -646,4 +1034,17 @@ fontSizes: {

},
fonts: {
text: standardFont,
fontStyles: {
base: {
fontFamily: systemFonts,
lineHeight: 1.3,
fontWeight: 400,
},
alt: {
fontFamily: systemFonts,
lineHeight: 1.3,
fontWeight: 700,
},
mono: {
fontFamily: monoSystemFonts,
color: '#000000',
},
},

@@ -660,81 +1061,47 @@ colors: {

},
zIndexes: {
default: 0,
absolute: 1,
},
breakpoints: breakpoints,
layout: {},
};
var isMergeableObject = function isMergeableObject(value) {
return isNonNullObject(value)
&& !isSpecial(value)
var toMinMediaQuery = function (breakpoint) {
return "@media (min-width: " + breakpoint.minWidth + ")";
};
function isNonNullObject(value) {
return !!value && typeof value === 'object'
function toMediaQueryMap(breakpoints) {
var mediaQueryMap = {};
Object.keys(breakpoints).forEach(function (key) {
var _a;
Object.assign(mediaQueryMap, (_a = {}, _a[key] = toMinMediaQuery(breakpoints[key]), _a));
});
return mediaQueryMap;
}
function isSpecial(value) {
var stringValue = Object.prototype.toString.call(value);
return stringValue === '[object RegExp]'
|| stringValue === '[object Date]'
|| isReactElement(value)
function createNamedKeys(breakpoints) {
return namedKeys(__assign({}, toMediaQueryMap(breakpoints), { print: '@media print' }));
}
var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
function isReactElement(value) {
return value.$$typeof === REACT_ELEMENT_TYPE
function createFelaConfig(breakpoints) {
if (breakpoints === void 0) { breakpoints = baseTheme.breakpoints; }
var config = {
plugins: webPreset.concat([
createNamedKeys(breakpoints),
]),
enhancers: [],
devMode: false,
};
if (process.env.NODE_ENV !== 'production') {
config.enhancers = [monolithic({ prettySelectors: true })];
config.devMode = true;
}
return config;
}
function emptyTarget(val) {
return Array.isArray(val) ? [] : {}
}
function cloneUnlessOtherwiseSpecified(value, options) {
return (options.clone !== false && options.isMergeableObject(value))
? deepmerge(emptyTarget(value), value, options)
: value
}
function defaultArrayMerge(target, source, options) {
return target.concat(source).map(function(element) {
return cloneUnlessOtherwiseSpecified(element, options)
})
}
function mergeObject(target, source, options) {
var destination = {};
if (options.isMergeableObject(target)) {
Object.keys(target).forEach(function(key) {
destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
});
}
Object.keys(source).forEach(function(key) {
if (!options.isMergeableObject(source[key]) || !target[key]) {
destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
} else {
destination[key] = deepmerge(target[key], source[key], options);
}
});
return destination
}
function deepmerge(target, source, options) {
options = options || {};
options.arrayMerge = options.arrayMerge || defaultArrayMerge;
options.isMergeableObject = options.isMergeableObject || isMergeableObject;
var sourceIsArray = Array.isArray(source);
var targetIsArray = Array.isArray(target);
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
if (!sourceAndTargetTypesMatch) {
return cloneUnlessOtherwiseSpecified(source, options)
} else if (sourceIsArray) {
return options.arrayMerge(target, source, options)
} else {
return mergeObject(target, source, options)
}
}
deepmerge.all = function deepmergeAll(array, options) {
if (!Array.isArray(array)) {
throw new Error('first argument should be an array')
}
return array.reduce(function(prev, next) {
return deepmerge(prev, next, options)
}, {})
};
var deepmerge_1 = deepmerge;
function buildTheme(customTheme) {
return deepmerge_1(baseTheme, customTheme);
function withRenderer(Component) {
return function BoundComponent(props) {
return (createElement(RendererContext.Consumer, null, function (value) { return createElement(Component, __assign({ renderer: value }, props)); }));
};
}
export { createBoxModelCSSProps, createFlexChildCSSProps, createFontCSSProps, createMarginCSSProps, createPaddingCSSProps, createStylingCSSProps, filterProps, mergeThemedStyles, extendBox, createBoxCSSStyles, Box, createFlexContainerCSSStyle, Flex, Text, GRID_SIZE, Col, ColRow, Grid, GridContext, Row, Panel, testGridContext, renderRebootCss, renderResetCss, createRenderer$$1 as createRenderer, withRenderer, typeScale, baseTheme, buildTheme };
export { createBoxModelCSSProps, createFlexChildCSSProps, createStylingCSSProps, createFontCSSProps, createMarginCSSProps, createPaddingCSSProps, mergeThemedStyles, extendBox, createBoxCSSStyles, Box, createFlexContainerCSSStyle, Flex, Text, GRID_SIZE, Col, ColRow, Grid, GridContext, Row, Panel, testGridContext, renderRebootCss, renderResetCss, createFelaConfig, withRenderer, typeScale, systemFonts, monoSystemFonts, breakpoints, baseTheme, toMinMediaQuery, toMediaQueryMap };

43

dist/theming/baseTheme.d.ts

@@ -1,3 +0,3 @@

export declare const typeScale: (level: number) => number;
export declare interface BaseFontSizes {
import { IStyle } from 'fela';
export interface BaseFontSizes {
readonly verySmall: number | string;

@@ -9,9 +9,11 @@ readonly small: number | string;

}
export declare interface BaseFonts {
readonly text: string;
export interface BaseFontStyles {
readonly base: IStyle;
readonly alt: IStyle;
readonly mono: IStyle;
}
export declare interface BaseColors {
export interface BaseColors {
readonly text: string;
}
export declare interface BaseSpacing {
export interface BaseSpacing {
readonly space0: number | string;

@@ -23,9 +25,28 @@ readonly space1: number | string;

}
export declare interface BaseTheme {
readonly fontSizes: Partial<BaseFontSizes>;
readonly fonts: Partial<BaseFonts>;
readonly colors: Partial<BaseColors>;
readonly spacing: Partial<BaseSpacing>;
export interface BaseZIndexes {
default: number;
absolute: number;
}
export interface Breakpoint {
minWidth: string;
sort: number;
}
export interface BaseBreakpoints {
tablet: Breakpoint;
desktop: Breakpoint;
largeDesktop: Breakpoint;
}
export interface BaseTheme {
readonly fontSizes: BaseFontSizes;
readonly fontStyles: BaseFontStyles;
readonly colors: BaseColors;
readonly spacing: BaseSpacing;
readonly zIndexes: BaseZIndexes;
readonly breakpoints: BaseBreakpoints;
readonly layout: {};
}
export declare const typeScale: (level: number) => number;
export declare const systemFonts: string;
export declare const monoSystemFonts = "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;";
export declare const breakpoints: BaseBreakpoints;
export declare const baseTheme: BaseTheme;

29

package.json
{
"name": "@indoqa/style-system",
"version": "1.0.0-alpha.6",
"version": "1.0.0",
"author": "Indoqa Software Design und Beratung GmbH (https://www.indoqa.com)",
"description": "A style system for React with Typescript typed theme support and several base components.",
"license": "Apache-2.0",

@@ -9,2 +10,3 @@ "main": "dist/indoqa-style-system.cjs.js",

"typings": "dist/index.d.ts",
"sideEffects": false,
"files": [

@@ -23,5 +25,2 @@ "dist"

},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"keywords": [

@@ -35,14 +34,20 @@ "react",

"peerDependencies": {
"fela": ">=10",
"react": ">=16",
"react-fela": ">=10"
"fela": ">=10.2.2",
"fela-monolithic": ">=10.2.2",
"fela-plugin-named-keys": ">=10.2.2",
"fela-preset-web": ">=10.2.2",
"react": ">=16.7",
"react-fela": ">=10.2.2"
},
"dependencies": {
"deepmerge": "^2.2.1",
"fela": "^10.1.3",
"react": "16.7.0",
"react-fela": "^10.1.3",
"fela": "^10.2.2",
"fela-monolithic": "^10.2.2",
"fela-plugin-named-keys": "^10.2.2",
"fela-preset-web": "^10.2.2",
"lodash": "^4.17.11",
"react": "^16.8.4",
"react-fela": "^10.2.2",
"tslib": "^1.9.3"
},
"gitHead": "ded7490d9d7967dd2502ec6e265f35f49b693baf"
"gitHead": "abc600a3d8fec1c7cb7a03b621c5d1118676c22a"
}

151

README.md
# Indoqa Style-System
This project provides a React style system with Typescript typed theme support
and several base components.
This project provides an extensible style system for React with Typescript typed theme support
and several base components following the principle of [style as function of state](http://fela.js.org/docs/introduction/Principles.html):
* a base theme typed with Typescript
* base components as building blocks which integrate with the base theme:
* `<Box>`
* `<Flex>`
* `<Text>`
* `<Grid>`, `<Row>`, `<Panel>`, `<ColRow>`, `<Col>`
* Base components as building blocks which are integrated with theming:
* `<Box>` ([docs](./docs/base-components.md#Box))
* `<Flex>` ([docs](./docs/base-components.md#Flex))
* `<Text>` ([docs](./docs/base-components.md#Text))
* `<Grid>`, `<Row>`, `<Panel>`, `<ColRow>`, `<Col>` ([docs](./docs/Grid.md))
* Typed components with Typescript
![typesafe properties](./docs/typesafe-bg.png)
* A typed base theme with sensible defaults (e.g. font styles based on system fonts)
* Base CSS stylesheets ([Bootstrap Reboot 4.1](https://getbootstrap.com/docs/4.1/content/reboot/)
and [normalize.css](https://necolas.github.io/normalize.css/) are currently supported)
## Changelog
[Learn about the lastest improvements](./CHANGELOG.md)
# Installation and usage
`yarn install @indoqa/style-system`
## Theming
Setup the application theme based on the [BaseTheme](./src/main/theming/baseTheme.ts) provided by Indoqa Style-System:
```typescript
import {BaseColors, BaseFontSizes, baseTheme, BaseTheme, typeScale} from '@indoqa/style-system'
interface FontSizes extends BaseFontSizes {
readonly extraBig: number | string,
}
interface Colors extends BaseColors {
readonly primary: string,
readonly primaryDark: string,
readonly primaryLight: string,
readonly accent: string,
readonly textSecondary: string
readonly divider: string,
}
interface Layout {
readonly actionBarHeight: number,
readonly menuWidth: number,
}
export interface Theme extends BaseTheme {
readonly fontSizes: FontSizes,
readonly colors: Colors,
readonly layout: Layout,
}
const baseColors = {
black_1: '#000000',
black_2: '#120012',
grey_1: '#727272',
grey_2: '#BDBDBD',
white_3: '#d5d5d5',
white_1: '#ffffff',
blue_1: '#c5cae9',
blue_2: '#3f51b5',
blue_3: '#303f9f',
orange_1: '#ff5722',
}
const baseFontSizes: FontSizes = {
text: typeScale(1),
big: typeScale(2),
veryBig: typeScale(3),
extraBig: typeScale(3),
small: typeScale(0),
verySmall: typeScale(-1),
}
const theme: Theme = {
breakpoints: baseTheme.breakpoints,
colors: {
primary: baseColors.blue_2,
primaryDark: baseColors.blue_3,
primaryLight: baseColors.blue_1,
accent: baseColors.orange_1,
text: baseColors.black_2,
textSecondary: baseColors.grey_1,
divider: baseColors.white_1,
},
fontSizes: baseFontSizes,
fontStyles: baseTheme.fontStyles,
layout: {
actionBarHeight: 50,
menuWidth: 300,
},
spacing: baseTheme.spacing,
zIndexes: baseTheme.zIndexes,
}
export default theme
```
* The interface `Theme` extends the interface `BaseTheme`. This is important because all provided components are based on `BaseTheme`
or extensions of it.
* The implementation `theme` uses `baseTheme` properties or overrides them.
## Fela setup
```typescript
import {BaseCssProps, createFelaConfig, renderRebootCss} from '@indoqa/style-system'
import {createRenderer} from 'fela'
...
const felaConfig = createFelaConfig()
const renderer = createRenderer(felaConfig)
const baseCssProps: BaseCssProps = ...
const App: React.FC = () => {
React.useLayoutEffect(() => {
renderRebootCss(renderer, baseCssProps)
}, [])
return (
<RendererProvider renderer={renderer}>
<Router history={history}>
<ThemeProvider theme={theme}>
<Switch>
<Route path="/" component={StyleSystemUIExplorer}/>
</Switch>
</ThemeProvider>
</Router>
</RendererProvider>
)
}
export default App
```
* `renderRebootCss` provides basic CSS styles based on the theme
* provide a `RendererProvider` (all React components can get access to the Fela renderer)
* provide a `ThemeProvider` (all React components can get access to the application theme)
* `createFelaConfig` configures Fela with all the plugins which are usually
required for web applications. It also registers
[named keys](https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-named-keys)
for breakpoints and print styles which are aligned with the [PStyle](./docs/pstyle-and-breakpoints.md) type.
Complete samples can be found at [Indoqa Style-System demo](../style-system-demo/) and the [Indoqa React Starter](../react-starter/).
# Documentation
* [Base components](./docs/base-components.md#Box) (Box, Flex, Text)
* [Grid](./docs/grid.md)
* [PStyle and breakpoints](./docs/pstyle-and-breakpoints.md)
* [Theming](./docs/theming.md)
dist/fela/createRenderer.d.ts
dist/theming/buildTheme.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc