Skip to content

Commit

Permalink
feat: closes #51
Browse files Browse the repository at this point in the history
  • Loading branch information
@mauroerta
mauroerta committed Jul 17, 2021
1 parent a3f2535 commit 0ab4270
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 27 deletions.
27 changes: 14 additions & 13 deletions docs/docs/theme-specification.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ In this table, for each slice, are indicated the css properties that will be res
| slice | properties |
| :------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| colors | **bg**, fill, color, stroke, caretColor, borderColor, outlineColor, borderTopColor, backgroundColor, columnRuleColor, borderLeftColor, borderRightColor, borderBottomColor |
| radii | borderRadius, borderEndEndRadius, borderTopLeftRadius, borderEndStartRadius, borderTopRightRadius, borderStartEndRadius, borderStartStartRadius, borderBottomLeftRadius, borderBottomRightRadius |
| radii | borderRadius, borderEndEndRadius, borderTopLeftRadius, borderEndStartRadius, borderTopRightRadius, borderStartEndRadius, borderStartStartRadius, borderBottomLeftRadius, borderBottomRightRadius, **corner**, **cornerEndEnd**, **cornerTopLeft**, **cornerEndStart**, **cornerTopRight**, **cornerStartEnd**, **cornerStartStart**, **cornerBottomLeft**, **cornerBottomRight**, |
| sizes | **size**, width, height, minWidth, maxWidth, minHeight, maxHeight, flexBasis, blockSize, inlineSize, maxBlockSize, minBlockSize, minInlineSize, maxInlineSize |
| fonts | fontFamily |
| shadows | boxShadow, textShadow, shadow |
Expand All @@ -69,18 +69,19 @@ Custom Properties
Some of the properties do not correspond to any CSS rule but they will be resolved to valid CSS rules.
This table will clarify better:

| property | resolved |
| -------------------- | ------------------------------------------------------------- |
| bg | backgroundColor |
| size | height + width |
| m, mt, ml, mr, mb | margin, marginTop, marginLeft, marginRight, marginBottom |
| mx | marginLeft + marginRight |
| my | marginTop + marginBottom |
| p, pt, pl, pr, pb | padding, paddingTop, paddingLeft, paddingRight, paddingBottom |
| px | paddingLeft + paddingRight |
| py | paddingTop + paddingBottom |
| gradient, bgGradient | background |
| textGradient | background + backgroundClip + textFillColor |
| property | resolved |
| ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bg | backgroundColor |
| size | height + width |
| m, mt, ml, mr, mb | margin, marginTop, marginLeft, marginRight, marginBottom |
| mx | marginLeft + marginRight |
| my | marginTop + marginBottom |
| p, pt, pl, pr, pb | padding, paddingTop, paddingLeft, paddingRight, paddingBottom |
| px | paddingLeft + paddingRight |
| py | paddingTop + paddingBottom |
| gradient, bgGradient | background |
| textGradient | background + backgroundClip + textFillColor |
| corner, cornerEndEnd, cornerTopLeft, cornerEndStart, cornerTopRight, cornerStartEnd, cornerStartStart, cornerBottomLeft, cornerBottomRight, | borderRadius, borderEndEndRadius, borderTopLeftRadius, borderEndStartRadius, borderTopRightRadius, borderStartEndRadius, borderStartStartRadius, borderBottomLeftRadius, borderBottomRightRadius, |

**componentName, variant** will be explained better later in the [components slice](#components) section.

Expand Down
2 changes: 2 additions & 0 deletions packages/core/src/parsers/createParsers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
} from '../types';
import { baseParser } from './baseParser';
import { sizeParsers } from './sizes';
import { radiiParsers } from './radii';
import { colorsParsers } from './colors';
import { shadowsParsers } from './shadows';
import { spacingsParsers } from './spacings';
Expand All @@ -39,6 +40,7 @@ const DEFAULT_PARSERS = allPropertiesKeys.reduce(

const ADDITIONAL_PARSERS = {
...sizeParsers,
...radiiParsers,
...colorsParsers,
...shadowsParsers,
...spacingsParsers,
Expand Down
33 changes: 33 additions & 0 deletions packages/core/src/parsers/radii.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { radiiProperties } from '@morfeo/spec';
import { SliceParsers } from '../types';
import { baseParser } from './baseParser';

type RadiiParsers = SliceParsers<
typeof radiiProperties,
keyof typeof radiiProperties
>;

const radiiAliasesMap = {
corner: 'borderRadius',
cornerEndEnd: 'borderEndEndRadius',
cornerTopLeft: 'borderTopLeftRadius',
cornerEndStart: 'borderEndStartRadius',
cornerTopRight: 'borderTopRightRadius',
cornerStartEnd: 'borderStartEndRadius',
cornerStartStart: 'borderStartStartRadius',
cornerBottomLeft: 'borderBottomLeftRadius',
cornerBottomRight: 'borderBottomRightRadius',
};

export const radiiParsers = Object.keys(radiiAliasesMap).reduce(
(acc, prop) => ({
...acc,
[prop]: props =>
baseParser({
...props,
scale: 'radii',
property: radiiAliasesMap[prop],
}),
}),
{},
) as RadiiParsers;
43 changes: 43 additions & 0 deletions packages/core/tests/parsers/radii.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { Theme } from '@morfeo/spec';
import { parsers, theme } from '../../src';

const THEME: Theme = {
radii: {
s: '2px',
m: '4px',
},
} as any;

describe('radii', () => {
beforeAll(() => {
theme.set(THEME);
});
afterAll(() => {
theme.reset();
});

test('should resolve the value of the property `corner` from the radii slice', () => {
const result = parsers.resolve({
corner: 'm',
cornerEndEnd: 'm',
cornerTopLeft: 'm',
cornerEndStart: 'm',
cornerTopRight: 'm',
cornerStartEnd: 'm',
cornerStartStart: 'm',
cornerBottomLeft: 'm',
cornerBottomRight: 'm',
});
expect(result).toEqual({
borderRadius: '4px',
borderEndEndRadius: '4px',
borderTopLeftRadius: '4px',
borderEndStartRadius: '4px',
borderTopRightRadius: '4px',
borderStartEndRadius: '4px',
borderStartStartRadius: '4px',
borderBottomLeftRadius: '4px',
borderBottomRightRadius: '4px',
});
});
});
Loading

0 comments on commit 0ab4270

Please sign in to comment.