jxnblk / axs Goto Github PK

Currently axs uses palx to generate the palette. When working on an existing design using incremental refactor, I must use our brand colors. However palx only accept the main color. It would be a greet improvement to expose functions to generate the palette (especially the shades).

import {config, palette} from "axs"

// Possible API satisfying the need:
config.set({
  colors: palette({
    orange: "#ff8000",
    red: "#d62828",
    green: "#128811",
    blue: "#2f638b",
  })
})

Currently the following would render a bold text.

<Box bold={false}>Foo</Box>

I would expect the font-weight to be unchanged.
Note: using null lets the text unstyled.

The motivation is to be able to write the following:

<Box bold={active} {...props} />
<Box bold={active ? true : null} {...props} /> // Too verbose

In the Border component i can't modify the border width, like '3px solid #ffff', its only 1px default.

Adding ellipsis to text would be really nice

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Thanks!

Would you consider being able to add custom props that any withAxs component can use? For example I'd like to change font-family easily without making extra layers or using css={}, as it might apply to different types of components, so just specifying mono would be nice.

Love the idea of this. It would nice if it was "agnostic" in a sense that it doesn't reference any CSS in JS library. That way I could easily use either Fela, Glamor, Styletron, etc. https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955

The following has no effect:

<Box rounded="circle" {...props} />

Should the documentation be updated or is it a bug?

Given the following props on any withAxs-wrapped component:

{
  width: [1, 2/3]
  pr: [0, 1]
}

This only generates a cxs media query for the last responsive props given:

@media screen and (min-width:40em) {
  .cxs-12406165 {
    padding-right:8px
   /** -> missing `width` here */
  }
}

I just throw this out here in case you run into it too. I'll eventually send a PR.