zeta_flutter_theme 1.0.0

Theme resources for the Zeta Design System from Zebra Technologies.

Zeta Flutter Theme

Theme resources for zeta_flutter form Zebra Technologies.

These resources are a part of the Zeta Design System, and can be used either on their own or with Zeta Flutter

Template

To quickly set up a new project to use zeta_flutter, clone zeta_flutter_template to get started.

Set up

To use Zeta theme in you app, first the whole app must be wrapped with ZetaProvider. The easiest way to do this is with the ZetaProvider.

There are various values that can be passed in; the most commonly used are:

• initialThemeMode (optional) sets whether the app starts in light or dark mode, or uses the device default.
• initialContrast (optional) sets whether the app starts with standard (WCAG AA) contrast, or if it attempts to use the more accessible contrast (WCAG AAA).
• builder (required) is used to construct the app with all Zeta themes injected.

return ZetaProvider(
    initialThemeMode: initialThemeMode,
    initialContrast: initialContrast,
    builder: (context, lightTheme, darkTheme, themeMode) {
        /// The following is just an example of how you can use the theme in your app.
        return MaterialApp.router(
            routerConfig: router,
            themeMode: themeMode,
            theme: lightTheme,
            darkTheme: darkTheme,
        );
    },
);

copied to clipboard

Colors

This package contains the color resources used by Zeta. These files are automatically generated from our Zeta Foundations Figma, ensuring that the token names match with any designs that use Zeta. Custom colors can be passed into ZetaProvider. These must follow the same pattern as is defined in the interface for ZetaColors.

Contrast

Apps using Zeta for theming can use either ZetaContrast.AA or ZetaContrast.AAA. AA is regular contrast and AAA is high contrast according to WCAG Guidelines. This affects most colors in [ZetaColors] object.

Typography

This package contains the typography styles from Zeta Foundations Figma, and this library provides access to IBM Plex Sans, Copyright © 2017 IBM Corp, see LICENSE-3RD-PARTY

Rounded

Zeta includes a rounded boolean that can be used to toggle the app between using round and sharp variants of components