dstoyanoff/e-prim

A set of tools to implement a design system on top of @emotion/css and @emotion/react as well as add some primitive components to make prototyping UI faster and easier

Hi there 👋

Contact

e-prim's Issues

[feature] Strictly typed colors

At the moment, the color config in the theme allows an arbitrary string. With the recent version of Typescript, it's now possible to have string template types which would make it easier to validate the color format. We are looking after:

• hex: #000000
• hex with alpha: #000000
• rgb: rgb(0, 0, 0),
• rgba: rgba(0, 0, 0, 1)
• hsl: hsl(0, 0%, 0%)
• hsla: hsl(0, 0%, 0%, 1) or hsl(0, 0%, 0%, 100%)

[feature] Use TS path aliases to make the code more beautiful

[bug] px and py should be combined

The px and py props need to be merged in padding in the resulting style. At the moment all 4 sides are set as different props, which is not optimal

Property 'css' does not exist in the primitives

I tried to use this Box with the css prop from the example. Compiler is not happy.

      <Box
        onClick={console.log}
        p={4}
        shadow="xl"
        css={({ palette }) => ({
          outline: `${palette.warning.normal} solid 1px`,
        })}
      >

And the error is

Property 'css' does not exist on type 'IntrinsicAttributes & MarginSystem & PaddingSystem & PositionProps & SizeProps & ColorProps & BorderProps & { ...; } & { ...; } & Omit<...>'

[feature] Add transparency util

Add an util function in the theme that given a color variable, can add transparency layer. The functionality should be supported for hex, rgb and hsl colors.

Add inline property to Flex

Add inline bool property to the flex component (default false) and render as inline-flex if provided as true.

[feature] Add first-level support for shadows

Shadows are currently not part of the theme, but can rather be used as part of the custom props. Defining shadows as first level citizens would also add a shadow property to the box which can easily be used then.

[bug] centerMain usage with false (responsive) doesn't work

centerMain={{ xs: true, md: false }}

Automate ellipsis on typography

[feat] expose hooks to get breakpoint matches

Expose a hook that returns boolean if the current resolution is up/down a given breakpoint. This can be used for conditional rendering.