theme-orange-compact

The OUDS Theme Orange Compact module provides the concrete implementation of the Orange Compact design system theme. It maps the abstract definitions from the Theme Contract to the specific Raw Tokens of the Orange Compact brand.

It serves as the "factory" that assembles the specific visual identity of Orange Compact.

Purpose

While the core module provides the mechanisms to access the theme, and theme-contract defines what a theme is, theme-orange-compact defines what the Orange Compact theme looks like.

• Implementation: It implements the interfaces defined in theme-contract (OudsColorSemanticTokens, OudsFontSemanticTokens, etc.).

• Mapping: It assigns specific values from Orange raw tokens (e.g., ColorOrange500) or global raw tokens (e.g., ColorFunctionalBlack) to semantic slots (e.g., contentBrandPrimaryDark, contentDefaultLight).

Usage

To use the Orange Compact theme in your application, follow these steps:

1. Add the dependency

Ensure the theme-orange-compact module is included in your module's build.gradle.kts file in addition to the core module:

dependencies {
    // ...
    implementation("com.orange.ouds.android:ouds-core:1.2.0")
    implementation("com.orange.ouds.android:ouds-theme-orange-compact:1.2.0")
    // ...
}

dependencies {
    // ...
    implementation 'com.orange.ouds.android:ouds-core:1.2.0'
    implementation 'com.orange.ouds.android:ouds-theme-orange-compact:1.2.0'
    // ...
}

2. Initialize and Customize the Theme

In your application, you must provide the OrangeCompactTheme instance to the OudsTheme composable. This effectively "injects" the Orange Compact visual style into the OUDS system.

Use OudsTheme as a replacement for the traditional MaterialTheme.

OudsTheme(
    theme = OrangeCompactTheme(
        orangeFontFamily = OrangeFontFamily(
            latin = OrangeHelveticaNeueLatin.Bundled(
                regularFontResId = R.font.helvetica_neue_latin_roman,
                mediumFontResId = R.font.helvetica_neue_latin_medium,
                boldFontResId = R.font.helvetica_neue_latin_bold
            ),
            arabic = OrangeHelveticaNeueArabic.Bundled(
                lightFontResId = R.font.helvetica_neue_arabic_light,
                regularFontResId = R.font.helvetica_neue_arabic_roman,
                boldFontResId = R.font.helvetica_neue_arabic_bold
            )
        ),
        roundedCornerButtons = true,
        roundedCornerTextInputs = true
    )
) {
    // Use OUDS Android or Material components here for an interface
    // matching the Orange Unified Design System with the customized Orange Compact theme
}

In the example above, you can see that Orange Compact theme includes several customizable elements such as the Helvetica Neue font family configuration, as well as the possibility of having rounded corners on certain components rather than rectangular ones.

Important note on fonts: The theme-orange-compact module does not bundle the Helvetica Neue font files. As OUDS Android is an open-source library, we are not licensed to distribute this proprietary font. As a consequence, you are responsible for obtaining the necessary font files from the official Orange Brand portal and including them in your application's res/font directory. The example above shows how to provide these local font resources to the Orange Compact.

Relationship with other modules

Tokens versions

This module implements the design specifications versioned below:

🤖 Note: The majority of the files in this module (specifically within the tokens packages) are automatically generated by Tokenator based on the design definitions.

Any manual changes to these files will be lost during the next synchronization.