Skip to main content

Design system

Design system​

The Deltatre Apps Roku design system offers a comprehensive collection of configurable views, UI components, and design tokens that streamline the theming and skinning of apps.

  • Configurable View and UI components: {screen}.style.brs, {component}.style.brs, {rowTemplate}_Item.style.brs, GridSystem.brs.
  • Design tokens: Colors, typography

Design tokens​

Fonts​

Add project fonts to /project/project_code/resources/fonts. Supported font types are TrueType (.ttf) and OpenType (.otf), with Regular, Bold and Italic styles.

Colours and Font sizes​

The theme (theme.json file) defines the colors and fonts mapped to each view (in the screen object), and to each component and rowTemplate (in the mui object). Within the theme, each screen, component, and rowTemplate includes references to:

  • Font name, using the font_{FONT_NAME} naming convention. The FONT_NAME refers to the Font id defined in the font definition files (AppFonts.xml and AppFonts.brs). By default, Heading1Tv refers to the pkg:/resources/fonts/Inter-Bold.ttf font and the size 56, etc.

  • Color name. There are two naming conventions with colors:

    1. Using the Design System color key names (defined in the designSystemMasterColors.json file)
    2. Using the fallback_color_{FALLBACK_COLORS} naming convention and defined in the fallbackColors object at the top of the theme.json file. These are intended as a fallback color choice if there is no equivilent color in the designSystemMasterColors.json file.

Reusable UI components​

Logos, Icons and Gradients​

Logos, icons and gradients are themed by providing raster (.png and .jpg) graphics files.

Note: Dynamic gradients are supported on the Roku platform but are not yet implemented in Deltatre Apps. Once implemented, all graphic gradients can be replaced with dynamic versions.

Buttons​

The following button types are supported:

  1. MuiButton for use as a general/ configurable button type. MuiButton can be configured as a (Label, Label with underline, Icon only, Icon and label etc.) button type and is reskinned via the MuiButton.style.brs file and the mui.MuiButton object in the theme.json file.
  2. ProfileButton is a custom button style for use in the side menu only.
  3. DropDownButton is a custom button style that allows selection of List items.

Note: There are also CTA (Call to Action) UI components that visually indicate focus but are not intended to be the actual focused element on screen. This state exists in Roku SceneGraph when a RowList or Grid component has focus, and internal items within the list visually denote focus.

The following CTA types are supported:

  1. CtaRounded denotes focus in the hero/ header Rowlist row item.
  2. CtaIcon denotes focus on the Channel Detail screen Rowlist.

Other Design system configuration​

GridSystem​

The GridSystem file defines borderSize and various other layout values that apply to overall screen, main menu's and the grid and list components items ({rowTemplate}_Item) layout.

To edit the GridSystem file, define a duplicate GridSystem.brs file, from the example in the Core project, in the project/{project_code}/src/source/models/utils/GridSystem.brs folder.

Deltatre Apps uses an auto-scaling approach for UI device resolutions. By default, the Deltatre Apps sets all images to FHD/1080 UI resolution and automatically scales down to HD/720 UI device resolution if the device only supports HD or is set to an HD UI resolution.

The GridSystem follows the recommended Roku safe-zone areas for FHD/ 1080 and HD/ 720 UI device resolutions.

Language files​

Configure supported languages in the application via:

  1. Local config file (ie. project/{project_code}/env/common/config.json), under: supportedLanguages and using the following format: en-us, fr, fr-ca etc.
  2. Define a duplicate en_CA.json (and/or duplicate fr_CA.json etc.) file, from the example in the Core project, in the project/{project_code}/resources/locale/en_CA.json folder.

Registry storage​

Deltatre Apps uses the Roku device Registry to store a small number of persistent settings. To ensure storage of the Registry data we define a _SECTION_NAME using the naming convention d3studio_{project_code}_refApp in the AppStorageCommand.brs file.

Override the default files​

Any default files from the Core project (ie. XML, BRS, JSON, graphics files, manifest) that are defined in the /lib, /project/common or /src folder can be overridden in the project by creating a file with the same name and folder structure in the /project/{project_code} folder.

Was this page helpful?