Quartz Dark is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.

Usages of the Quartz Dark theme could be working at night, in a factory or other environment with low light, or working outside at night using portable devices.

Be aware that Quartz Dark does not replace high-contrast themes and supports the minimal contrast requirements of the Web Contrast Accessibility Guidelines (WCAG) 2.1.

Color Balance

Color Usage

Each theme is based on a set of individual base reference values. These are:

Primary (main user interface colors)

Secondary (accent colors)

Grayscale (neutral values)

Semantic (value state colors)

The reference colors listed on this page give a helpful indication as to where they are used in the UI controls and layouts. However, it is extremely important that reference values are not used directly in the control styling. The Quartz Dark reference color values are specific to this particular theme, but are assigned to control parameters.

The reference colors are used as base values, which are then distributed into the UI controls via a stable set of theme control parameters that are available in each theme. Theme control parameters represent semantically named parts of the controls. They are decoupled from the actual color values so that the color values can be easily replaced. The theming guideline explains how these reference values are mapped to the user interface controls.

Primary Colors

The recommended primary colors leverage the uniqueness of SAP Fiori apps. The primary colors represent the overall look and feel.

Quartz Dark Theme Primary Colors

SAP Fiori Launchpad Gradient

The gradient is mainly applied to launchpad or dashboard overview page types.

Accent Colors

Secondary colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and should be used sparingly.

Grayscale

Grayscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and the light grays are mainly used for areas in the background or for borders. Darker gray shades are primarily used for text.

Semantic Colors

Semantic colors can be used to represent a negative, critical, positive, neutral, or information status. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Semantic Foregroud Colors

Semantic Background Colors

Indication Colors

The indication color palette is used to follow the color conventions in a line of business or industry. All values are themeable and the meaning of each color depends on the business context. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Accessibility

Color Contrast

Color usages for the Quartz Dark theme within SAP UI controls are checked against the WCAG 2.1 accessibility requirements.

Controls and colors are carefully selected to fulfill the minimum contrast requirements. Contrast ratios vary for different controls due to variations in size, weight, fill, or structure.

The minimum contrast thresholds for the standard SAP Fiori theme are as follows:

• 4.5:1 for text and icons in normal size or smaller.
• 3.0:1 for text and icons in large size (and normal size bold).
• 3.0:1 for graphical objects (like charts) as well as visual details that identify a UI element and its state.

Goals of Good Color Contrast

The user must be able to see everything that is needed to understand and operate the screen.

• Texts are readable.
• Icons are recognizable and distinguishable (unless they are purely decorative).
• UI elements can be identified visually (not by trial and error).
• Active elements can be recognized as such.
• The focus indicator can be found quickly (on a 15″ monitor, a user with good vision should find it in less than a second from a distance of 2.5 meters).
• Emphasized and selected controls are recognizable.
• Scroll indicators are recognizable.
• Groups and other structure elements can be recognized.
• All other visual information can be recognized.

For the last two points, you can also use other options to make the visual elements easier to recognize, such as layout, spacing, or additional texts.

Related Links

The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.

When to Use

Use the calendar if:

• You want the user to select a single date, multiple days, entire week(s), or a date range.
• You want to display multiple months at once.
• The calendar always needs to be visible and prominent.
• Users need to see the year, month, week, weekday and date at a glance to decide which date to select. For example, a user might want to select a date based on the day of the week.
• Users might be used to different locale-specific date formats (such as day-month-year or month-day-year). Enabling them to select the date visually using the calendar bypasses format-specific interpretation.
• You want to highlight special days or hide/disable specific days.

Do not use the calendar if:

• The user is a power user who has to enter a lot of data fast. In this case, use the date picker.
• The keyboard is the primary input device. In this case, use the date picker.
• The available screen space is limited and displaying the calendar permanently would take up too much space.
• The user’s primary goal is to select a date range. In this case, use date range selection.
• You want to display a range of weekdays in a single row. In this case, use the calendar date interval.
• The user wants to compare calendars from different people. In this case, use the planning calendar.
• The user wants to select combined date and time values. In this case, use the date/time picker.

Components

The calendar can stand alone as a control, but is also part of many other controls, such as the date picker, date/time picker or the date range selector.

By default, the focus starts on the current day, but can be customized to fit the use case.

The control allows you to show or hide the calendar weeks. You can also customize the calendar by defining the start and end of a week, or by defining the earliest or latest date.

Specific days can also be disabled, for example non-working days or public holidays.

Month and Year View

The control offers a day view, month view, year view, or year ranges.

Legend for Highlighted Days

Types

The following calendar types are available:

• Single day selection: The user can select a single day at a time.
• Single interval selection: The user can select an interval or one entire week.
• Multiple day selection: The user can select multiple days, which do not have to be next to each other. It’s also possible to select entire week(s) and a date range.
• Multiple months: Use this calendar type if users need to see more than one month to make their selection. You can offer single day selection or multiple selection (such as multiple days, entire weeks, or date ranges). We recommend showing no more than two or three calendars at the same time.

Behavior and Interaction

The behavior and interaction of the calendar depends on the calendar type. Some interactions are only available for specific calendar types.

Responsiveness

Use the calendar within a responsive layout container. The calendar control itself is not responsive.

When using the multiple month view, the calendar adapts to the size of the screen. On small screens, only one calendar is displayed.

Related Topics

The avatar group displays a number of avatars, which act as a digital representation of a user. This control is useful for visualizing a team, project team members, or a group of employees, for example.

When to Use

Use the avatar group if:

• You want to display a group of at least 2 people.
• You want to display several people who have something in common (for example, people who are in the same team, project, or company).

Do not use the avatar group if:

• You want to display a gallery for simple images. Use the carousel instead.
• You want to display a single avatar.
• You want to show visual content other than avatars.

Types

Components

Avatars

Overflow Button

Overflow (Popover) Content

Behavior and Interaction

The group and individual types have different behavior and interactions.

Group Type

Individual Type

Responsiveness

Top Tips

Carefully select the primary and secondary information you want to display for the avatars. Base the content on your user research findings.

Related Topics