Skip to content

Commit e565940

Browse files
cassernicasserni
committed
feat(sigil): SL-677 add support for sigil
1 parent 1e6336f commit e565940

File tree

13 files changed

+272
-135
lines changed

13 files changed

+272
-135
lines changed

‎src/Box.tsx

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -29,48 +29,58 @@ import {
2929
zIndex,
3030
} from './utils';
3131

32-
import { BorderRadius, BorderWidth, BoxDimension, BoxShadow, FontSize, FontWeight, FullSpace } from './types';
32+
import {
33+
IBorderRadius,
34+
IBorderWidth,
35+
IBoxDimension,
36+
IBoxShadow,
37+
IFontSize,
38+
IFontWeight,
39+
IFullSpace,
40+
ValueOf,
41+
} from './types';
3342

3443
export interface IBoxProps {
3544
className?: string;
3645
css?: Object; // a valid javascript style object
46+
as?: any; // TODO type string || jsx element
3747

3848
fg?: string; // should ALWAYS be a theme color path to avoid hardcoding in values
3949
bg?: string; // should ALWAYS be a theme color path to avoid hardcoding in values
4050

41-
text?: FontSize;
51+
text?: ValueOf<IFontSize>;
4252
align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit'; // textAlign
43-
weight?: FontWeight;
53+
weight?: ValueOf<IFontWeight>;
4454

45-
m?: FullSpace;
46-
mt?: FullSpace;
47-
mr?: FullSpace;
48-
mb?: FullSpace;
49-
ml?: FullSpace;
50-
mx?: FullSpace;
51-
my?: FullSpace;
52-
p?: FullSpace;
53-
pt?: FullSpace;
54-
pr?: FullSpace;
55-
pb?: FullSpace;
56-
pl?: FullSpace;
57-
px?: FullSpace;
58-
py?: FullSpace;
55+
m?: ValueOf<IFullSpace>;
56+
mt?: ValueOf<IFullSpace>;
57+
mr?: ValueOf<IFullSpace>;
58+
mb?: ValueOf<IFullSpace>;
59+
ml?: ValueOf<IFullSpace>;
60+
mx?: ValueOf<IFullSpace>;
61+
my?: ValueOf<IFullSpace>;
62+
p?: ValueOf<IFullSpace>;
63+
pt?: ValueOf<IFullSpace>;
64+
pr?: ValueOf<IFullSpace>;
65+
pb?: ValueOf<IFullSpace>;
66+
pl?: ValueOf<IFullSpace>;
67+
px?: ValueOf<IFullSpace>;
68+
py?: ValueOf<IFullSpace>;
5969

60-
height?: BoxDimension | string | number;
61-
maxHeight?: BoxDimension | string | number;
62-
minHeight?: BoxDimension | string | number;
63-
width?: BoxDimension | string | number;
64-
maxWidth?: BoxDimension | string | number;
65-
minWidth?: BoxDimension | string | number;
70+
height?: ValueOf<IBoxDimension> | string | number;
71+
maxHeight?: ValueOf<IBoxDimension> | string | number;
72+
minHeight?: ValueOf<IBoxDimension> | string | number;
73+
width?: ValueOf<IBoxDimension> | string | number;
74+
maxWidth?: ValueOf<IBoxDimension> | string | number;
75+
minWidth?: ValueOf<IBoxDimension> | string | number;
6676

67-
border?: BorderWidth;
68-
borderTop?: BorderWidth;
69-
borderLeft?: BorderWidth;
70-
borderRight?: BorderWidth;
71-
borderBottom?: BorderWidth;
77+
border?: ValueOf<IBorderWidth>;
78+
borderTop?: ValueOf<IBorderWidth>;
79+
borderLeft?: ValueOf<IBorderWidth>;
80+
borderRight?: ValueOf<IBorderWidth>;
81+
borderBottom?: ValueOf<IBorderWidth>;
7282
borderColor?: string;
73-
radius?: BorderRadius | string;
83+
radius?: ValueOf<IBorderRadius> | string;
7484

7585
cursor?:
7686
| 'auto'
@@ -121,7 +131,7 @@ export interface IBoxProps {
121131
| 'initial'
122132
| 'inherit';
123133
flex?: string | number;
124-
shadow?: BoxShadow;
134+
shadow?: ValueOf<IBoxShadow>;
125135
opacity?: number;
126136

127137
overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'initial' | 'inherit';

‎src/Button.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,17 @@ Button.defaultProps = {
3939
as: 'button',
4040
display: 'inline-block',
4141
decoration: 'none',
42-
weight: 'semibold',
42+
weight: '@semibold',
4343
align: 'center',
44-
m: 'none',
45-
px: 'md',
46-
py: 'sm',
47-
border: 'xs',
48-
radius: 'md',
44+
m: '@none',
45+
px: '@md',
46+
py: '@sm',
47+
border: '@xs',
48+
radius: '@md',
4949

5050
// reference colors by path in theme
5151
// if path does not exist it at component, default to color.fg || color.bg || color.border respectively
52-
fg: 'button.fg',
53-
bg: 'button.bg',
54-
borderColor: 'button.border',
52+
fg: '@button.fg',
53+
bg: '@button.bg',
54+
borderColor: '@button.border',
5555
};

‎src/Checkbox.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ export const Checkbox = styled<ICheckboxProps>((props: ICheckboxProps) => {
3434
<Flex
3535
as="span"
3636
display="block"
37-
m="none"
38-
p="none"
39-
radius="md"
37+
m="@none"
38+
p="@none"
39+
radius="@md"
4040
items="center"
4141
justify="center"
42-
bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
42+
bg={checked ? '@toggle.checked.bg' : '@toggle.bg'}
4343
cursor={disabled ? 'not-allowed' : 'pointer'}
4444
width={width || '20px'}
4545
height={height || '20px'}
@@ -49,7 +49,7 @@ export const Checkbox = styled<ICheckboxProps>((props: ICheckboxProps) => {
4949
transition: 'background-color .15s ease-in-out',
5050
}}
5151
>
52-
{checked && <Icon icon="check" fg="toggle.checked.fg" />}
52+
{checked && <Icon icon="check" fg="@toggle.checked.fg" />}
5353
</Flex>
5454
</Box>
5555
</span>

‎src/Icon.tsx

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { FlipProp, IconName, IconPrefix, library, RotateProp } from '@fortawesom
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
33
import * as React from 'react';
44

5-
import { BorderRadius, BorderWidth, FontSize, FullSpace } from './types';
5+
import { IBorderRadius, IBorderWidth, IFontSize, IFullSpace, ValueOf } from './types';
6+
67
import {
78
bgColor,
89
borderColor,
@@ -39,30 +40,30 @@ export interface IIconProps {
3940
fg?: string;
4041
bg?: string;
4142

42-
text?: FontSize;
43+
text?: ValueOf<IFontSize>;
4344

44-
m?: FullSpace;
45-
mt?: FullSpace;
46-
mr?: FullSpace;
47-
mb?: FullSpace;
48-
ml?: FullSpace;
49-
mx?: FullSpace;
50-
my?: FullSpace;
51-
p?: FullSpace;
52-
pt?: FullSpace;
53-
pr?: FullSpace;
54-
pb?: FullSpace;
55-
pl?: FullSpace;
56-
px?: FullSpace;
57-
py?: FullSpace;
45+
m?: ValueOf<IFullSpace>;
46+
mt?: ValueOf<IFullSpace>;
47+
mr?: ValueOf<IFullSpace>;
48+
mb?: ValueOf<IFullSpace>;
49+
ml?: ValueOf<IFullSpace>;
50+
mx?: ValueOf<IFullSpace>;
51+
my?: ValueOf<IFullSpace>;
52+
p?: ValueOf<IFullSpace>;
53+
pt?: ValueOf<IFullSpace>;
54+
pr?: ValueOf<IFullSpace>;
55+
pb?: ValueOf<IFullSpace>;
56+
pl?: ValueOf<IFullSpace>;
57+
px?: ValueOf<IFullSpace>;
58+
py?: ValueOf<IFullSpace>;
5859

59-
border?: BorderWidth;
60-
borderTop?: BorderWidth;
61-
borderLeft?: BorderWidth;
62-
borderRight?: BorderWidth;
63-
borderBottom?: BorderWidth;
60+
border?: ValueOf<IBorderWidth>;
61+
borderTop?: ValueOf<IBorderWidth>;
62+
borderLeft?: ValueOf<IBorderWidth>;
63+
borderRight?: ValueOf<IBorderWidth>;
64+
borderBottom?: ValueOf<IBorderWidth>;
6465
borderColor?: string;
65-
radius?: BorderRadius;
66+
radius?: ValueOf<IBorderRadius>;
6667

6768
opacity?: number;
6869

‎src/Image.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import * as React from 'react';
22

33
import { borderRadius, height, opacity, styled, width } from './utils';
44

5-
import { BorderRadius } from './types';
5+
import { IBorderRadius, ValueOf } from './types';
66

77
export interface IImageProps {
88
src: string;
99
label?: string;
10-
radius?: BorderRadius;
10+
radius?: ValueOf<IBorderRadius>;
1111
hidden?: boolean;
1212
opacity?: number;
1313
responsive?: boolean;

‎src/Input.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ export const Input = styled<IInputProps>(Text as any).attrs({
3434
);
3535

3636
Input.defaultProps = {
37-
px: 'md',
38-
py: 'sm',
39-
border: 'xs',
40-
radius: 'md',
37+
px: '@md',
38+
py: '@sm',
39+
border: '@xs',
40+
radius: '@md',
4141

4242
// reference colors by path in theme
4343
// if path does not exist it at component, default to color.fg || color.bg || color.border respectively
44-
fg: 'input.fg',
45-
bg: 'input.bg',
46-
borderColor: 'input.border',
44+
fg: '@input.fg',
45+
bg: '@input.bg',
46+
borderColor: '@input.border',
4747
};

‎src/Text.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Box, IBoxProps } from './Box';
2-
import { LetterSpacing, LineHeight } from './types';
2+
import { ILetterSpacing, ILineHeight, ValueOf } from './types';
33
import { casing, decoration, decorationColor, fontStyle, letterSpacing, lineHeight, styled } from './utils';
44

55
type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'initial' | 'inherit';
66

77
export interface ITextProps extends IBoxProps {
8-
tracking?: LetterSpacing;
9-
leading?: LineHeight;
8+
tracking?: ValueOf<ILetterSpacing>;
9+
leading?: ValueOf<ILineHeight>;
1010
// TODO customizae to use lodash from more more options like snakecase
1111
casing?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'initial' | 'inherit';
1212
decoration?: TextDecoration | TextDecoration[];

‎src/Textarea.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ export const Textarea = styled<ITextareaProps>(Text as any).attrs({
3434
);
3535

3636
Textarea.defaultProps = {
37-
px: 'md',
38-
py: 'sm',
39-
border: 'xs',
40-
radius: 'md',
37+
px: '@md',
38+
py: '@sm',
39+
border: '@xs',
40+
radius: '@md',
4141

4242
// reference colors by path in theme
4343
// if path does not exist it at component, default to color.fg || color.bg || color.border respectively
44-
fg: 'textarea.fg',
45-
bg: 'textarea.bg',
46-
borderColor: 'textarea.border',
44+
fg: '@textarea.fg',
45+
bg: '@textarea.bg',
46+
borderColor: '@textarea.border',
4747
};

‎src/Toggle.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@ export const Toggle = styled<IToggleProps>((props: IToggleProps) => {
3434
<Flex
3535
as="span"
3636
display="block"
37-
m="none"
38-
p="none"
37+
m="@none"
38+
p="@none"
3939
radius="100px"
40-
bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
40+
bg={checked ? '@toggle.checked.bg' : '@toggle.bg'}
4141
cursor={disabled ? 'not-allowed' : 'pointer'}
4242
width={width || '40px'}
4343
height={height || '20px'}
@@ -50,7 +50,7 @@ export const Toggle = styled<IToggleProps>((props: IToggleProps) => {
5050
>
5151
<Icon
5252
icon="circle"
53-
fg={checked ? 'toggle.checked.fg' : 'toggle.fg'}
53+
fg={checked ? '@toggle.checked.fg' : '@toggle.fg'}
5454
css={{
5555
paddingLeft: checked ? '22px' : '4px',
5656
transition: 'padding .15s ease-in-out, color .25s ease-in-out',

‎src/storybook-addon/themes/index.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
// NOTE: ordering here matters - it determines the button order in the panel
22

3-
// empty default theme
4-
export { baseTheme as Default } from '../../theme';
5-
63
export { light as Light } from './light';
74

85
export { dark as Dark } from './dark';

‎src/storybook-addon/withThemes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ class ThemeContainer extends React.Component<any, any> {
5151
return (
5252
<ThemeProvider theme={theme}>
5353
<Flex
54-
fg="fg"
55-
bg="bg"
54+
fg="@fg"
55+
bg="@bg"
5656
items="center"
5757
justify="center"
5858
position="absolute"

0 commit comments

Comments
 (0)