limestone/ThemeDecorator

Exports the limestone/ThemeDecoratorlimestone/ThemeDecorator.ThemeDecorator HOC

Import Usage

import ThemeDecorator from '@enact/limestone/ThemeDecorator';

Members

ThemeDecorator   Higher-Order Component

A higher-order component that applies Limestone theming to an application.

It also applies ui/FloatingLayerui/FloatingLayer.FloatingLayerDecorator, ui/resolutionui/resolution.ResolutionDecorator, limestone/Skinnablelimestone/Skinnable, spotlightspotlight.SpotlightRootDecorator, and i18n/I18nDecoratori18n/I18nDecorator.I18nDecorator. It is meant to be applied to the root element of an app.

limestone/Skinnablelimestone/Skinnable provide a way to change the coloration of your app. The currently supported skins for Limestone are "limestone" (the default, dark skin) and "limestone-light". Use the skin property to assign a skin. Ex: <DecoratedApp skin="light" />

Note: This HoC passes className to the wrapped component. It must be passed to the main DOM node.

Import Usage

import ThemeDecorator from '@enact/limestone/ThemeDecorator';

Includes: ui/FloatingLayerui/FloatingLayer.FloatingLayerDecorator
Includes: ui/resolutionui/resolution.ResolutionDecorator
Includes: spotlight/SpotlightRootDecoratorspotlight/SpotlightRootDecorator.SpotlightRootDecorator
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable
Includes: limestone/ThemeDecoratorlimestone/ThemeDecorator.AccessibilityDecorator

Configuration

accessible

Boolean

Applies AccessibilityDecorator.

If not applied, app will not support accessibility options.

Default: true

See: limestone/ThemeDecoratorlimestone/ThemeDecorator.AccessibilityDecorator

---

disableFullscreen

Boolean

Disables use of full screen.

Default: false

---

focusEffectClass

String

A CSS class name to apply globally to every spottable component when it receives spotlight focus.

This is the declarative equivalent of calling setFocusEffectClass imperatively. It acts as an app-wide default.

Default: null

---

float

Boolean

Enables a floating layer for popup components.

If not applied, app will be responsible for applying the decorator.

Default: true

See: ui/FloatingLayerui/FloatingLayer.FloatingLayerDecorator

---

i18n

Objectany

Options for I18nDecorator.

May be false to prevent applying the decorator. If not applied, app will be responsible for applying the decorator.

Default: {sync: true}

See: i18n/I18nDecoratori18n/I18nDecorator

---

noAutoFocus

Boolean

Disables setting spotlight focus on first render.

Default: false

---

overlay

Boolean

Enables overlay mode (no background color will be applied).

Default: false

---

ri

Object

Override the resolution independence settings.

See: ui/resolutionui/resolution

---

rootId

String

Specifies the id of the React DOM tree root node

Default: 'root'

---

skin

Boolean

Applies skinning support.

Default: true

See: limestone/Skinnablelimestone/Skinnable

---

spotlight

Boolean

Applies spotlight decorator.

If not applied, app will be responsible for applying the decorator.

Default: true

See: spotlight/SpotlightRootDecoratorspotlight/SpotlightRootDecorator

AccessibilityDecorator   Higher-Order Component

A higher-order component that classifies an application with a target set of font sizing rules.

Import Usage

import {AccessibilityDecorator} from '@enact/limestone/ThemeDecorator';

Properties added to wrapped component

focusRing

Boolean

Enables additional features to help users visually differentiate components.

The UI library will be responsible for using this information to add focus ring to some components.

Default: false

---

highContrast

Boolean

Enables additional features to help users visually differentiate components.

The UI library will be responsible for using this information to adjust the components' contrast to this preset.

Default: false

---

skinVariants

StringArray(String)Object

The variant(s) on a skin that a component should use when rendering. These will typically alter the appearance of a skin's existing definition in a way that does not override that skin's general styling.

Multiple data types are supported by this prop, which afford different conveniences and abilities. String and Array are effectively the same, supporting just additions to the variants being applied to a component, and are much more convenient. Objects may also be used, and have the ability to disable variants being passed by their ancestors. Objects take the format of a basic hash, with variants as key names and true/false Booleans as values, depicting their state. If a variant is excluded from any version of data type used to set this prop, that variant will ignored, falling back to the defaultVariant or parent variant, in that order.

skinVariants examples:

 // String
 skinVariants="highContrast"

 // Array
 skinVariants={['highContrast']}

 // Object
 skinVariants={{
 	highContrast: true,
 	grayscale: false
 }}

---

textSize

'normal''large'

Sets the goal size of the text.

The UI library will be responsible for using this information to adjust the components' text sizes to this preset. Current presets are 'normal' (default), and 'large'.

Default: 'normal'