feat(sigil): SL-677 add support for sigil

src/Box.tsx

@@ -29,48 +29,58 @@ import {
   zIndex,
 } from './utils';
 
-import { BorderRadius, BorderWidth, BoxDimension, BoxShadow, FontSize, FontWeight, FullSpace } from './types';
+import {
+  IBorderRadius,
+  IBorderWidth,
+  IBoxDimension,
+  IBoxShadow,
+  IFontSize,
+  IFontWeight,
+  IFullSpace,
+  ValueOf,
+} from './types';
 
 export interface IBoxProps {
   className?: string;
   css?: Object; // a valid javascript style object
+  as?: any; // TODO type string || jsx element
 
   fg?: string; // should ALWAYS be a theme color path to avoid hardcoding in values
   bg?: string; // should ALWAYS be a theme color path to avoid hardcoding in values
 
-  text?: FontSize;
+  text?: ValueOf<IFontSize>;
   align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit'; // textAlign
-  weight?: FontWeight;
+  weight?: ValueOf<IFontWeight>;
 
-  m?: FullSpace;
-  mt?: FullSpace;
-  mr?: FullSpace;
-  mb?: FullSpace;
-  ml?: FullSpace;
-  mx?: FullSpace;
-  my?: FullSpace;
-  p?: FullSpace;
-  pt?: FullSpace;
-  pr?: FullSpace;
-  pb?: FullSpace;
-  pl?: FullSpace;
-  px?: FullSpace;
-  py?: FullSpace;
+  m?: ValueOf<IFullSpace>;
+  mt?: ValueOf<IFullSpace>;
+  mr?: ValueOf<IFullSpace>;
+  mb?: ValueOf<IFullSpace>;
+  ml?: ValueOf<IFullSpace>;
+  mx?: ValueOf<IFullSpace>;
+  my?: ValueOf<IFullSpace>;
+  p?: ValueOf<IFullSpace>;
+  pt?: ValueOf<IFullSpace>;
+  pr?: ValueOf<IFullSpace>;
+  pb?: ValueOf<IFullSpace>;
+  pl?: ValueOf<IFullSpace>;
+  px?: ValueOf<IFullSpace>;
+  py?: ValueOf<IFullSpace>;
 
-  height?: BoxDimension | string | number;
-  maxHeight?: BoxDimension | string | number;
-  minHeight?: BoxDimension | string | number;
-  width?: BoxDimension | string | number;
-  maxWidth?: BoxDimension | string | number;
-  minWidth?: BoxDimension | string | number;
+  height?: ValueOf<IBoxDimension> | string | number;
+  maxHeight?: ValueOf<IBoxDimension> | string | number;
+  minHeight?: ValueOf<IBoxDimension> | string | number;
+  width?: ValueOf<IBoxDimension> | string | number;
+  maxWidth?: ValueOf<IBoxDimension> | string | number;
+  minWidth?: ValueOf<IBoxDimension> | string | number;
 
-  border?: BorderWidth;
-  borderTop?: BorderWidth;
-  borderLeft?: BorderWidth;
-  borderRight?: BorderWidth;
-  borderBottom?: BorderWidth;
+  border?: ValueOf<IBorderWidth>;
+  borderTop?: ValueOf<IBorderWidth>;
+  borderLeft?: ValueOf<IBorderWidth>;
+  borderRight?: ValueOf<IBorderWidth>;
+  borderBottom?: ValueOf<IBorderWidth>;
   borderColor?: string;
-  radius?: BorderRadius | string;
+  radius?: ValueOf<IBorderRadius> | string;
 
   cursor?:
     | 'auto'
@@ -121,7 +131,7 @@ export interface IBoxProps {
     | 'initial'
     | 'inherit';
   flex?: string | number;
-  shadow?: BoxShadow;
+  shadow?: ValueOf<IBoxShadow>;
   opacity?: number;
 
   overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'initial' | 'inherit';

src/Button.tsx

@@ -39,17 +39,17 @@ Button.defaultProps = {
   as: 'button',
   display: 'inline-block',
   decoration: 'none',
-  weight: 'semibold',
+  weight: '@semibold',
   align: 'center',
-  m: 'none',
-  px: 'md',
-  py: 'sm',
-  border: 'xs',
-  radius: 'md',
+  m: '@none',
+  px: '@md',
+  py: '@sm',
+  border: '@xs',
+  radius: '@md',
 
   // reference colors by path in theme
   // if path does not exist it at component, default to color.fg || color.bg || color.border respectively
-  fg: 'button.fg',
-  bg: 'button.bg',
-  borderColor: 'button.border',
+  fg: '@button.fg',
+  bg: '@button.bg',
+  borderColor: '@button.border',
 };

src/Checkbox.tsx

@@ -34,12 +34,12 @@ export const Checkbox = styled<ICheckboxProps>((props: ICheckboxProps) => {
         <Flex
           as="span"
           display="block"
-          m="none"
-          p="none"
-          radius="md"
+          m="@none"
+          p="@none"
+          radius="@md"
           items="center"
           justify="center"
-          bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
+          bg={checked ? '@toggle.checked.bg' : '@toggle.bg'}
           cursor={disabled ? 'not-allowed' : 'pointer'}
           width={width || '20px'}
           height={height || '20px'}
@@ -49,7 +49,7 @@ export const Checkbox = styled<ICheckboxProps>((props: ICheckboxProps) => {
             transition: 'background-color .15s ease-in-out',
           }}
         >
-          {checked && <Icon icon="check" fg="toggle.checked.fg" />}
+          {checked && <Icon icon="check" fg="@toggle.checked.fg" />}
         </Flex>
       </Box>
     </span>

src/Icon.tsx

@@ -2,7 +2,8 @@ import { FlipProp, IconName, IconPrefix, library, RotateProp } from '@fortawesom
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 
-import { BorderRadius, BorderWidth, FontSize, FullSpace } from './types';
+import { IBorderRadius, IBorderWidth, IFontSize, IFullSpace, ValueOf } from './types';
+
 import {
   bgColor,
   borderColor,
@@ -39,30 +40,30 @@ export interface IIconProps {
   fg?: string;
   bg?: string;
 
-  text?: FontSize;
+  text?: ValueOf<IFontSize>;
 
-  m?: FullSpace;
-  mt?: FullSpace;
-  mr?: FullSpace;
-  mb?: FullSpace;
-  ml?: FullSpace;
-  mx?: FullSpace;
-  my?: FullSpace;
-  p?: FullSpace;
-  pt?: FullSpace;
-  pr?: FullSpace;
-  pb?: FullSpace;
-  pl?: FullSpace;
-  px?: FullSpace;
-  py?: FullSpace;
+  m?: ValueOf<IFullSpace>;
+  mt?: ValueOf<IFullSpace>;
+  mr?: ValueOf<IFullSpace>;
+  mb?: ValueOf<IFullSpace>;
+  ml?: ValueOf<IFullSpace>;
+  mx?: ValueOf<IFullSpace>;
+  my?: ValueOf<IFullSpace>;
+  p?: ValueOf<IFullSpace>;
+  pt?: ValueOf<IFullSpace>;
+  pr?: ValueOf<IFullSpace>;
+  pb?: ValueOf<IFullSpace>;
+  pl?: ValueOf<IFullSpace>;
+  px?: ValueOf<IFullSpace>;
+  py?: ValueOf<IFullSpace>;
 
-  border?: BorderWidth;
-  borderTop?: BorderWidth;
-  borderLeft?: BorderWidth;
-  borderRight?: BorderWidth;
-  borderBottom?: BorderWidth;
+  border?: ValueOf<IBorderWidth>;
+  borderTop?: ValueOf<IBorderWidth>;
+  borderLeft?: ValueOf<IBorderWidth>;
+  borderRight?: ValueOf<IBorderWidth>;
+  borderBottom?: ValueOf<IBorderWidth>;
   borderColor?: string;
-  radius?: BorderRadius;
+  radius?: ValueOf<IBorderRadius>;
 
   opacity?: number;
 

src/Image.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 
 import { borderRadius, height, opacity, styled, width } from './utils';
 
-import { BorderRadius } from './types';
+import { IBorderRadius, ValueOf } from './types';
 
 export interface IImageProps {
   src: string;
   label?: string;
-  radius?: BorderRadius;
+  radius?: ValueOf<IBorderRadius>;
   hidden?: boolean;
   opacity?: number;
   responsive?: boolean;

src/Input.tsx

@@ -34,14 +34,14 @@ export const Input = styled<IInputProps>(Text as any).attrs({
 );
 
 Input.defaultProps = {
-  px: 'md',
-  py: 'sm',
-  border: 'xs',
-  radius: 'md',
+  px: '@md',
+  py: '@sm',
+  border: '@xs',
+  radius: '@md',
 
   // reference colors by path in theme
   // if path does not exist it at component, default to color.fg || color.bg || color.border respectively
-  fg: 'input.fg',
-  bg: 'input.bg',
-  borderColor: 'input.border',
+  fg: '@input.fg',
+  bg: '@input.bg',
+  borderColor: '@input.border',
 };

src/Text.tsx

@@ -1,12 +1,12 @@
 import { Box, IBoxProps } from './Box';
-import { LetterSpacing, LineHeight } from './types';
+import { ILetterSpacing, ILineHeight, ValueOf } from './types';
 import { casing, decoration, decorationColor, fontStyle, letterSpacing, lineHeight, styled } from './utils';
 
 type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'initial' | 'inherit';
 
 export interface ITextProps extends IBoxProps {
-  tracking?: LetterSpacing;
-  leading?: LineHeight;
+  tracking?: ValueOf<ILetterSpacing>;
+  leading?: ValueOf<ILineHeight>;
   // TODO customizae to use lodash from more more options like snakecase
   casing?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'initial' | 'inherit';
   decoration?: TextDecoration | TextDecoration[];

src/Textarea.tsx

@@ -34,14 +34,14 @@ export const Textarea = styled<ITextareaProps>(Text as any).attrs({
 );
 
 Textarea.defaultProps = {
-  px: 'md',
-  py: 'sm',
-  border: 'xs',
-  radius: 'md',
+  px: '@md',
+  py: '@sm',
+  border: '@xs',
+  radius: '@md',
 
   // reference colors by path in theme
   // if path does not exist it at component, default to color.fg || color.bg || color.border respectively
-  fg: 'textarea.fg',
-  bg: 'textarea.bg',
-  borderColor: 'textarea.border',
+  fg: '@textarea.fg',
+  bg: '@textarea.bg',
+  borderColor: '@textarea.border',
 };

src/Toggle.tsx

@@ -34,10 +34,10 @@ export const Toggle = styled<IToggleProps>((props: IToggleProps) => {
         <Flex
           as="span"
           display="block"
-          m="none"
-          p="none"
+          m="@none"
+          p="@none"
           radius="100px"
-          bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
+          bg={checked ? '@toggle.checked.bg' : '@toggle.bg'}
           cursor={disabled ? 'not-allowed' : 'pointer'}
           width={width || '40px'}
           height={height || '20px'}
@@ -50,7 +50,7 @@ export const Toggle = styled<IToggleProps>((props: IToggleProps) => {
         >
           <Icon
             icon="circle"
-            fg={checked ? 'toggle.checked.fg' : 'toggle.fg'}
+            fg={checked ? '@toggle.checked.fg' : '@toggle.fg'}
             css={{
               paddingLeft: checked ? '22px' : '4px',
               transition: 'padding .15s ease-in-out, color .25s ease-in-out',

src/storybook-addon/themes/index.ts

@@ -1,8 +1,5 @@
 // NOTE: ordering here matters - it determines the button order in the panel
 
-// empty default theme
-export { baseTheme as Default } from '../../theme';
-
 export { light as Light } from './light';
 
 export { dark as Dark } from './dark';

src/storybook-addon/withThemes.tsx

@@ -51,8 +51,8 @@ class ThemeContainer extends React.Component<any, any> {
     return (
       <ThemeProvider theme={theme}>
         <Flex
-          fg="fg"
-          bg="bg"
+          fg="@fg"
+          bg="@bg"
           items="center"
           justify="center"
           position="absolute"