For certain user experiences, visual design effects can be dynamically generated in different formats such as CSS, SVG, 2D Canvas, and 3D WebGL. ARWES provides a few tools to create and share visual configurations and effects across them.

Theming

A theme is a design configuration for an app. It is mostly visual design settings and tokens but it can also contain other configurations for motion design or even audio design.

• Units such as pixels or REMs.
• Colors such as hexadecimal, hsl, or rgb.
• Device viewport breakpoints for CSS media queries.
• Styles of any CSS property such as typographies or shadows.
• Feature toggle booleans such as light and dark mode, or if to reduce motion effects.

ARWES does not provide nor enforce a particular design theme but rather offers a few tools to create individual pieces of configuration and compose them into a theme as flexible as required and integrate it with any styling solution such as Tailwind or MUI.

An example ARWES theme is basically a JavaScript object and it could look like:

import {
  createThemeUnit,
  createThemeMultiplier,
  createThemeColor,
  createThemeBreakpoints
} from 'arwes'

const theme = Object.freeze({
  // REM units.
  space: createThemeUnit((index) => `${index * 0.25}rem`),

  // Pixel units.
  spacen: createThemeMultiplier((index) => index * 4),

  // Media query breakpoints.
  breakpoints: createThemeBreakpoints([
    { key: '3sm', value: '375px' },
    { key: '2sm', value: '410px' },
    { key: 'sm', value: '640px' },
    { key: 'md', value: '768px' },
    { key: 'lg', value: '1024px' },
    { key: 'xl', value: '1280px' },
    { key: '2xl', value: '1536px' },
    { key: '3xl', value: '1980px' }
  ]),

  // Color palettes.
  colors: {
    primary: createThemeColor(i => [180, 10 + i, 92.5 - i * 9.44]),
    secondary: createThemeColor(i => [60, 10 + i, 92.5 - i * 9.44])
  },

  // Typography.
  fontFamily: {
    header: ['Tomorrow', 'sans-serif'],
    body: ['Roboto', 'sans-serif']
  }
})

export { theme }

For an app with complex designs, a theme can be defined in one place and then be used in:

• HTML/SVG with the style attribute.
• SVG with any SVG attribute such as fill or stroke.
• CSS classes via a class utility tool like Tailwind.
• CSS classes by just defining their properties in a dynamically generated <style>.
• In 2D Canvas or 3D WebGL, by defining styles programatically.
• JavaScript animations by defining the animated properties directly in the animation library API.
• JavaScript animations using the ARWES motion tools.

Style Effects

ARWES provides a few styling effects such as background patterns and clip-path tricks.