Styling

Widgets enable you to seamlessly integrate new functionality into your application. However, the default appearance of a widget may not always align with the visual guidelines of your design system. This is why the library offers various tools to configure widgets, allowing you to style them according to your requirements.

Each widget allows you to set the theme by props:

newWatchListWidget({
  /* ... */
  theme: 'light',
  /* ... */
})

By default, you can set light or dark theme and change it dynamically, if it is necessary. But, if you want to set your own theme or patch existent, you need to provide the theme object.

Theme object

A theme object describes the visual characteristics of a widget through a specific set of properties.

info

Creating one from scratch may not be an easy task. To simplify the process of creating a custom theme, you can use the configurator located on the page of any widget. The configurator allows you to set all the necessary colors and settings interactively, and then simply copy the result and use it in your project.

Let's take a closer look at what the topic consists of:

interface Theme {
  fontFamily: string
  palette: PaletteProps
  background: BackgroundProps
  typography: TypographyProps
  shadow: {
    normal: string
    small: string
  }
  zIndex: {
    sticky: number
    popover: number
  }
  borderRadius: {
    small: string
    normal: string
  }
}

Properties

• fontFamily - A string that defines font for all UI elements.
  Default: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC'.
• palette - An object that describes color palette for text, buttons, icons, etc. More details here.
• background - An object that describes colors for layout background colors. More details here.
• typography - An object that describes different text groups and sizes. More details here.
• shadow - An object that describes shadow variants. Each string should contain box-shadow CSS properties.
• zIndex - An object that describes zIndex levels.
• borderRadius - An object that describes available values for border radius.

Usage

Then, to use this theme object you need to provide it to widget like that:

const customTheme = {
  /* ... */
}

newWatchListWidget({
  /* ... */
  theme: customTheme,
  /* ... */
})

Palette

Palette object has the next interface:

interface ColorVariants {
  main: string
  light: string // usually used for color on hover
}

interface PaletteProps {
  primary: ColorVariants
  primaryContrast: ColorVariants
  accent: ColorVariants
  accentContrast: ColorVariants
  secondary: ColorVariants
  tertiary: ColorVariants
  green: ColorVariants
  red: ColorVariants
  separator: {
    primary: string
    secondary: string
  }
  focus: string
  autofill: string
}

All string values in this interface represent colors, which are utilized directly in CSS, as illustrated in the example below:

const palette = {
  /* ... */
  primary: {
    main: '#31383d',
    light: '#4e585f',
  },
  /* ... */
}

Background

Background object has the following interface:

interface ColorVariants {
  main: string
  light: string
}

interface BackgroundProps {
  base: string
  notification: string
  primary: ColorVariants
  secondary: ColorVariants
  tertiary: ColorVariants
}

All string values in this interface are simply colors used directly as they are in CSS.

Typography

Typography object has the following interface:

interface TypographyProps {
  header: Record<1 | 2 | 3 | 4 | 5, string>

  body: {
    regular: Record<1 | 2 | 3 | 4 | 5, string>
    medium: Record<1 | 2 | 3, string>
  }

  bodyWide: {
    regular: Record<1 | 2 | 3 | 4, string>
    medium: Record<1 | 2 | 3, string>
  }
}

Each string value represents a CSS block defining font properties, like that:

font-size: 14px; line-height: 18px; font-weight: 400;

Patching

If the default theme is satisfying, but you want to change just a few properties and don't want to create the whole theme from scratch, you can import one of the default theme object and just patch it:

import { lightTheme } from '@dxfeed-widgets/core'

const customTheme = {
  ...lightTheme,
  palette: {
    ...lightTheme.palette,
    // changing outline color on focus for interactive elements to red
    focus: 'red',
  },
}