Proper way to add layers to elements

[mscteck]

Hi. I loved this framework since i saw it, but it had me a little disapointed that there was no direct way to add custom layers for the components. One option was customize the default layers, but this apply to all the elements that use theme, not just the ones that you specify with the 'layer' option.
Anyway, it can be done editing the files of the 'lib' folder, and its relatively easy. This is how i did it.
First go to your Arwes module folder inside node_modules. The files that are needed to edit are all in the lib folder.

Inside lib, open the file at tools/createTheme/theme.js. You will see on the exports.default an object with the default properties for every option for the elements. In the property 'color' and 'background' are all the posible layers and their default colors, generated by the functions declarated on top. So here i added four more layers named 'extraOne', 'extraTwo', etc; all with the same color because i pretended to edit them later on the app. It ended like this

  {
    color: {
      primary: generateColor('#26dafd'),
      secondary: generateColor('#df9527'),
      header: generateColor('#a1ecfb'),
      control: generateColor('#acf9fb'),
      success: generateColor('#00ff00'),
      alert: generateColor('#ff0000'),
      disabled: generateColor('#999999'),
      extraOne: generateColor('#fc0086'),
      extraTwo: generateColor('#fc0086'),
      extraThree: generateColor('#fc0086'),
      extraFour: generateColor('#fc0086')
    },

    background: {
      primary: generateBackground('#021114'),
      secondary: generateBackground('#180f02'),
      header: generateBackground('#032026'),
      control: generateBackground('#041e1f'),
      success: generateBackground('#081402'),
      alert: generateBackground('#140202'),
      disabled: generateBackground('#141414'),
      extraOne: generateBackground('#1B0711'),
      extraTwo: generateBackground('#1B0711'),
      extraThree: generateBackground('#1B0711'),
      extraFour: generateBackground('#1B0711')
    }
  }

Is important to add both the color and background property with the same name, so they are linked. If not you will get an error.
Now, to be able to use this on the elements, you need to edit every file that you want to use with these. In my case, every element that have the 'layer' option, wich are: Button, Frame, Highlight, Image, Line, Loading and Words
Every element has a file on his folder named after his name, like Button.js, Frame.js, etc.
On that files, find a line where the 'layer' option is declared, it looks like this

     layer: _propTypes2.default.oneOf(['primary', 'secondary', 'header', 'control', 'success', 'alert', 'disabled']),

Now add the new layers

     layer: _propTypes2.default.oneOf(['primary', 'secondary', 'header', 'control', 'success', 'alert', 'disabled', 'extraOne', 'extraTwo', 'extraThree', 'extraFour']),

And thats all. Now in your code you can pass the layer option in an element like the default ones.

    <Button animate layer='extraOne'></Button>

And you can edit the colors as well

        const myTheme = {
          color: {
            extraOne: {
              base: '#be26fc',
              dark: '#8e1bbd',
              light: '#c95bf6'
            },
            extraTwo: {
              base: '#fc26fa',
              dark: '#a818a7',
              light: '#f458f2'
            }
          }
        };

        const App = () => (
          <ThemeProvider theme={createTheme(myTheme)}>
            <Arwes>
              <div style={{ padding: 20 }}>
                <Heading layer='extraTwo'>My App</Heading>
              </div>
            </Arwes>
          </ThemeProvider>
        );

I hope someone find this usefull, it is for me. And if there is a better way to do it, please tell me.

[romelperez]

Hi @mscteck !

I would like to add the flexibility for the framework to change and adapt the initial configuration for your own design system, but the current version does not support that.

Thank you for sharing your workaround.

[romelperez]

Closed due to #46 (comment)