Theme Orange Compact

Framework

Theme Orange Compact

The Orange Compact theme is dedicated to applications with strong dimensions constraints.

Overview

🧬 Theme version: 2.5.0

Some products may have heavy and very rich user interfaces with a lot of components and elements to display and with which users can interact. Thus for such products there are specific constraints of dimensions, spaces and sizes. That is the reason why this theme exists.

Note
This theme is related to Orange theme module to use some raw tokens of colors.

Note
It contains also colors dedicated to charts.

Important
The Orange Compact theme is read only: it cannot be suclassed or derivated.

How to use the theme

You can use OrangeCompactTheme directly. To use the OrangeCompactTheme without further modifications, you will have to use the OUDSThemeableView for your root view and give it an instance of OrangeCompactTheme. Keep in mind the themes are Swift class objects and can be heavy, so you may use only as instance as singleton and not store any properties.

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            OUDSThemeableView(theme: OrangeCompactTheme()) {
                // Your root view
            }
        }
    }
}

Then, in your views, you can simply use the theme through an environment variable to get the tokens:

struct SomeView: View {

    // Get OUDS environment variable for theme thanks to themeable view
    @Environment(\.theme) var theme
    
    var body: some View {
        
        // Use the theme to retrieve the tokens
        // For spaces: theme.spaces
        // For sizes: theme.sizes
        // For borders: theme.borders
        // For elevations: theme.elevations
        // For opacities: theme.opacities
        // For colors: theme.colors
        // For button configuration: theme.button
        // For link configuration: theme.link
        // Etc.
    }
}

This theme embeds and registers the fonts for the Orange Compact theme, you just need to use the theme object as is.

Tunable theme

The theme can be tuned with Tuning object to give at init. Some tuning object exists.

// Define your theme tuning
let tuning = Tuning(hasRoundedButtons: true, hasRoundedTextInputs: true, hasRoundedAlertMessages: true)

// Apply it to your theme
let theme = OrangeCompactTheme(tuning: tuning)
// Or in one line
let theme = OrangeCompactTheme(tuning: Tuning(hasRoundedButtons: true, hasRoundedTextInputs: true, hasRoundedAlertMessages: true))

// Or apply predefined tunings
let orangeFranceTheme = OrangeCompactTheme(tuning: Tuning.OrangeFrance)
let orangeBusinessTheme = OrangeCompactTheme(tuning: Tuning.OrangeBusiness)
let maxitTheme = OrangeCompactTheme(tuning: Tuning.MaxIt)

A default tuning is applied for this theme:

Tunable elements	Default values
rounded corners buttons	❌ false
rounded corners text inputs	✅ true
rounded corners alert messages	❌ false

Typography

Helvetica Neue

The Orange theme uses Helvetica Neue typography. This font is already available through iOS. It is possible to use another typography, by the ones recommended are the ones defined in tokens.

// The three following instanciations are the same
let theme = OrangeCompactTheme()
let theme = OrangeCompactTheme(fontFamily: OrangeBrandFontRawTokens.familyBrandDefault)
let theme = OrangeCompactTheme(fontFamily: "HelveticaNeue") // Which is PostScript name of the font

// This instanciation won't work as the font family is not recognised
let theme = OrangeCompactTheme(fontFamily: "Helvetica Neue")

Other fonts

However if, in very particular cases, you need to use another font family, you can try using it by changing the value in the theme init.

// Supposing you want to use another font:
// - like the Luciole font (https://luciole-vision.com/) (very good for accessibility)
// - or the Roboto font (https://fonts.google.com/specimen/Roboto) (to support cyrillic alphabet)
// - or hevletica Neue Arabic (for arabic alphabet Helvetica flavoured)
// 1. Add the TTF files in your project
    
// 2. Register the fonts with, for example, the function below
private func registerFonts() {
    let fonts = Bundle.main.urls(forResourcesWithExtension: "ttf", subdirectory: nil)
    fonts?.forEach { CTFontManagerRegisterFontsForURL($0 as CFURL, .process, nil) }
}

// 3. At theme init, given the font family name, add it to the theme.
// Keep in mind that it might not work because PostScript name is used combining
// font family name and font weight.
// For Luciole font, use "Luciole", for Roboto font, use "Roboto", etc.
let theme = OrangeCompactTheme(family: theFontFamilyNameInPostScript)

Note
Specific rules to compute PostScript value are defined in PostScriptFontNamesMap.swift

Tip
If your font family is not well managed, you can send an issue and explain your needs

Important
For production products and official tools, Helvetica Neue is preferred and should be used

Tip
If for your needs Helvetica Neue is not relevant (because does not support cyrilic, or not enough accessible, or not aligned with your needs), feel free to open a discussion

Caution
For ecodesign principles you should challenge the use of fonts because they can increase the needed storage of your apps

Important
Always check the license and terms of uses of the font your are using (distribution, hsoting, usage for comemrcial things, etc.)

How to enrich the theme

You cannot derivate the Orange Compact theme.

How it looks like

Actions

A button component in light and dark modes with Orange Compact theme

Content display

Bullet list

A bullet list component in light and dark modes with Orange Compact theme

Controls

Checkboxes

Radios

Switches

Chips

Text input

A text input component in light and dark modes with Orange Compact theme

Indicators

Badge

A badge component in light and dark modes with Orange Compact theme

Layouts

Dividers

Navigations

Link

A link component in light and dark modes with Orange Compact theme

Tab bar

Topics

Group

class OrangeCompactTheme
The Orange Compact theme is an Orange theme but tailored for some products with heavy UI.