Theme Orange

Framework

Theme Orange

The Orange theme overrides some tokens from the basic OUDSTheme and should be seen as the default theme for the OUDS library with the Orange brand colors for example.

Overview

🧬 Theme version: 2.5.0

This is the default theme any Orange branded app should use, and can be subclassed to define for example themes dedicated to countries. It embeds also in its target the brand colors which are not shared nor exposed in lower level targets or outside any module not depending to it.

In other words, this OrangeTheme is based on the abstract OUDSTheme, uses all the Orange Unified Design System kit and brings the Orange brand colors and assets.

Note
It contains also colors dedicated to charts.

How to use the theme

You can use OrangeTheme directly. To use the OrangeTheme without further modifications, you will have to use the OUDSThemeableView for your root view and give it an instance of OrangeTheme. 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: OrangeTheme()) {
                // 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.
    }
}

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 = OrangeTheme(tuning: tuning)
    // Or in one line
    let theme = OrangeTheme(tuning: Tuning(hasRoundedButtons: true, hasRoundedTextInputs: true, hasRoundedAlertMessages: true))

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

“Orange France” tuning

A predefined tuning configuration is also available for Orange France, which is also the default tuning:

let theme = OrangeTheme(tuning: Tuning.OrangeFrance)

It applies the following settings:

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

“Orange Business” tuning

A predefined tuning configuration is also available for Orange Business:

let theme = OrangeTheme(tuning: Tuning.OrangeBusiness)

It applies the following settings:

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

“Max it” tuning

A predefined tuning configuration is also available for “Max it”:

let theme = OrangeTheme(tuning: Tuning.MaxIt)

It applies the following settings:

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

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. For Orange products the Helevetica Neue font family must be used.

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

// This instanciation won't work as the font family is not recognised
let theme = OrangeTheme(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 Robot font (https://fonts.google.com/specimen/Roboto) (to support arabic and cyrillic alphabets)
// 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""
   let theme = OrangeTheme(fontFamily: 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

Tip
If for your needs Helvetica Neue is not relevant (because does not support cyrilic and arabic, 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 can enrich the OrangeTheme by subclassing it or by overriding some tokens.

Important
Only the Orange theme can be subclassed today. If this theme does not fill your need you can also implement your own theme from scratch.

Tip
Because theme definition is based on thousands of tokens, you should contact the design team to get helped.

By using your own theme and subclassing existing token providers

You may want to define your own theme, thus you can override the OrangeTheme with your own class or just override the providers.

You will have to consider the semantic tokens providers you need:

spaces tokens are OrangeThemeSpaceSemanticTokensProvider
sizes tokens are in OrangeThemeSizeSemanticTokensProvider
colors tokens are all defined in OrangeThemeColorSemanticTokensProvider
borders tokens are in OUDSBorderSemanticTokensProvider
elevations tokens are in OrangeThemeElevationSemanticTokensProvider
opacity tokens are in OrangeThemeOpacitySemanticTokensProvider
grid tokens are in OrangeThemeGridSemanticTokensProvider
font tokens are in OrangeThemeFontSemanticTokensProvider
etc.

The color semantic tokens of charts are not overridable as they are highly related to the brand. However it can change in the future.

You can also override the component tokens providers you need. Have a look on the documentation to know which one you need to update.

Example for semantic tokens providers:

// MARK: - For semantic tokens

// Token provider for spaces

class YourAppThemeSpaceTokensProvider: OrangeThemeSpaceSemanticTokensProvider {
    override var fixedMedium: SpaceSemanticToken {
        DimensionRawTokens._400
    }
    override var scaledSmall: MultipleSpaceSemanticToken {
        MultipleSpaceSemanticToken(compact: fixed5xl, regular: fixed5xl)
    }
}

// Token provider for sizes

class YourAppThemeSizeTokensProvider: OrangeThemeSizeSemanticTokensProvider {
    override var iconDecorative2xl: SizeSemanticToken {
        DimensionRawTokens._300
    }
    override var iconDecorativeMd: SizeSemanticToken {
        DimensionRawTokens._900
    }
}

// Token provider for colors

class YourAppThemeColorTokensProvider: OrangeThemeColorSemanticTokensProvider {
    override var bgSecondary: MultipleColorSemanticToken {
        MultipleColorSemanticToken(light: ColorRawTokens.colorDecorativeAmber500, dark: OrangeBrandColorRawTokens.colorOrange900)
    }
    override var actionEnabled: MultipleColorSemanticToken {
        MultipleColorSemanticToken(light: ColorRawTokens.colorDecorativeShockingPink100, dark: ColorRawTokens.functionalScarlet600)
    }
}

// Token provider for border

class YourAppThemeBorderTokensProvider: OUDSBorderSemanticTokensProvider {
    override var styleDefault: BorderStyleSemanticToken {
        BorderRawTokens.styleDashed
    }
    override var widthMedium: BorderWidthSemanticToken {
        BorderRawTokens.width100
    }
    override var radiusLarge: BorderRadiusSemanticToken {
        BorderRawTokens.radius800
    }
}

// Token provider for elevation

class YourAppThemeElevationTokensProvider: OrangeThemeElevationSemanticTokensProvider {
    override var stickyEmphasized: ElevationCompositeSemanticToken {
        ElevationCompositeSemanticToken(ElevationRawTokens.bottom_4_600)
    }
}

// Token provider for opacity

class YourAppThemeOpacityTokensProvider: OrangeThemeOpacitySemanticTokensProvider {
    override var strong: OpacitySemanticToken {
        OpacityRawTokens._920
    }
}

// Token provider for grid

class YourAppThemeGridTokensProvider: OrangeThemeGridSemanticTokensProvider {
    override var extraCompactColumnGap: GridSemanticToken {
        GridRawTokens.columnGap200
    }
    override var compactColumnGap: GridSemanticToken {
        GridRawTokens.columnGap200
    }
    override var regularColumnGap: GridSemanticToken {
        GridRawTokens.columnGap200
    }
}

// Token provider for font

class YourAppThemeFontTokensProvider: OrangeThemeFontSemanticTokensProvider {
   
    override var displayLarge: MultipleFontCompositeSemanticToken { 
        MultipleFontCompositeSemanticToken(FontCompositeSemanticToken(
            size: sizeDisplayLargeMobile,
            lineHeight: lineHeightDisplayLargeMobile,
            weight: weightDisplay,
            letterSpacing: letterSpacingDisplayLargeMobile))) 
    }
}

// MARK: - And also for components tokens

class YourAppThemeButtonComponentTokensProvider: OrangeThemeButtonComponentTokensProvider {
    override public var sizeMaxHeightIconOnly: SizeSemanticToken { DimensionRawTokens._600 }
    override public var borderWidthDefault: BorderWidthSemanticToken { borders.widthThicker }
    override public var borderRadius: BorderRadiusSemanticToken { borders.radiusMedium }
    override public var colorBgDefaultPressedMono: MultipleColorSemanticToken { colors.repositoryOpacityBlackHigher }
    override public var spacePaddingBlock: SpaceSemanticToken { spaces.paddingInlineSpacious }
}

// Etc.

You can instead of overriding existing semantic tokens provider implement your own provider but it will imply to implement maybe hundreds of tokens. Your own provider must match the suitable signature.

Then define your own theme class and assign the providers you want to override. If some are missing, default implementation will be used.

// Define your theme
class YourAppTheme: OrangeTheme {
    
    override init() {
        super.init(colors: YourAppThemeColorTokensProvider(),
                   borders: YourAppThemeBorderTokensProvider(),
                   elevations: YourAppThemeElevationTokensProvider(),
                   fonts: YourAppThemeFontTokensProvider(),
                   grids: YourAppThemeGridTokensProvider(),
                   opacities: YourAppThemeOpacityTokensProvider(),
                   sizes: YourAppThemeSizeTokensProvider(),
                   spaces: YourAppThemeSpaceTokensProvider(),
                   button: YourAppThemeButtonComponentTokensProvider,
                   // Etc. ...
    }
}

Then add the theme:

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

By overriding only existing tokens providers

Quite simple and similar to the previous solution, but give only the providers to the OrangeTheme. But we recommend to define your own theme for clarity reasons.

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            OUDSThemeableView(theme: 
                OrangeTheme(colors: ..., spaces: ..., button: ...)) { 
                // Your root view
            }
        }
    }
}

How it looks like

Actions

Button

A button component in light and dark modes with Orange theme

Content display

Bullet list

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

Controls

Checkboxes

Radios

Switches

Chips

Text input

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

Indicators

Badge

A badge component in light and dark modes with Orange theme

Layouts

Dividers

Navigations

Link

A link component in light and dark modes with Orange theme

Tab bar

Topics

Group

class OrangeTheme
The Orange theme is the bsic, default, theme for any Orange products. This is an override of the abtract OUDSTheme and must be seen as the default theme for the OUDS library. It can override any properties from its superclass, and can be derived too.
enum OrangeBrandColorRawTokens
This enum helps to add new color raw tokens exclusive to this OrangeTheme. Such tokens are packed in a Swift enum so as to gather them in one object with the suitable namespace and avoid to have just constants in nothing else (i.e. publicly accessible from everywhere). More optimized than dimensionstruct_.
enum OrangeBrandFontRawTokens
This enum helps to add new font raw tokens exclusive to this OrangeTheme Such tokens are packed in a Swift enum so as to gather them in one object with the suitable namespace and avoid to have just constants in nothing else (i.e. publicly accessible from everywhere). More optimized than dimensionstruct_.

Classes

class OrangeThemeAlertComponentTokensProvider
A class which wraps all component tokens of alert for alert objects like OUDSAlert. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllAlertComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeAlertComponentTokensProvider and apply the provider they need. It implements also the protocol AlertComponentTokens so as to expose the component tokens for alert through any OUDSTheme. Alert components tokens are defined with semantic tokens of borders (AllBorderSemanticTokensProviders), spaces (from AllSpaceSemanticTokensProvider) and sizes (from AllSizeSemanticTokensProvider).
class OrangeThemeBadgeComponentTokensProvider
A class which wraps all component tokens of badge for badge objects like OUDSBadge. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllBadgeComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeBadgeComponentTokensProvider and apply the provider they need. It implements also the protocol BadgeComponentTokens so as to expose the component tokens for badge through any OUDSTheme. Badge components tokens are defined with semantic tokens of dimensions (AllDimensionSemanticTokensProviders), and spaces (from AllSpaceSemanticTokensProvider).
class OrangeThemeBarComponentTokensProvider
A class which wraps all component tokens of bar. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllBarComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeBarComponentTokensProvider and apply the provider they need. It implements also the protocol BarComponentTokens so as to expose the component tokens for bar through any OUDSTheme. Bar components tokens are defined with semantic tokens of colors (AllColorSemanticTokensProviders), sizes (from AllSizeSemanticTokensProvider), borders (from AllBorderSemanticTokensProvider) and effects (from AllEffectSemanticTokensProvider).
class OrangeThemeBorderSemanticTokensProvider
A class which wraps all border semantic tokens and expose them. This provider should be integrated as a AllBorderSemanticTokensProvider implementation inside some OUDSTheme so as to provide all tokens to the users. It helps also users to override some of the tokens and assign them to an OUDSTheme implementation to use.
class OrangeThemeBulletListComponentTokensProvider
A class which wraps all component tokens of bullet list for bullet list objects like OUDSBulletList. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllBulletListComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeBulletListComponentTokensProvider and apply the provider they need. It implements also the protocol BulletListComponentTokens so as to expose the component tokens for bullet list through any OUDSTheme. Bullet list components tokens are defined with raw and semantic tokens of spaces (from AllSpaceSemanticTokensProvider).
class OrangeThemeButtonComponentTokensProvider
A class which wraps all component tokens of buttons for button objects like OUDSButton. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllButtonComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeButtonComponentTokensProvider and apply the provider they need. It implements also the protocol ButtonComponentTokens so as to expose the component tokens for buttons through any OUDSTheme. Button components tokens are defined with raw and semantic tokens of sizes (from AllSizeSemanticTokensProvider), borders spaces (from AllSpaceSemanticTokensProvider).
class OrangeThemeCheckboxComponentTokensProvider
A class which wraps all component tokens of checkbox for checkboxes objects like OUDSCheckbox and OUDSCheckboxItem. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllCheckboxComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeCheckboxComponentTokensProvider and apply the provider they need. It implements also the protocol CheckboxComponentTokens so as to expose the component tokens for checkboxes through any OUDSTheme. Checkboxes components tokens are defined with raw and semantic tokens of sizes (from SizeSemanticToken) and borders (BorderRadiusSemanticToken, BorderWidthSemanticToken). These components share the same type of tokens which are all gather edhere.
class OrangeThemeChipComponentTokensProvider
A class which wraps all component tokens of chip for chip objects like OUDSFilterChip and OUDSSuggestionChip. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllChipComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeChipComponentTokensProvider and apply the provider they need. It implements also the protocol ChipComponentTokens so as to expose the component tokens for chip through any OUDSTheme. Chip components tokens are defined with semantic tokens of colors (from AllColorSemanticTokensProvider) , spaces (from AllSpaceSemanticTokensProvider), dimensions (AllDimensionSemanticTokensProvider) and border (from AllBorderSemanticTokensProvider).
class OrangeThemeColorChartSemanticTokensProvider
A class which wraps all color semantic tokens of charts, multiple or not, and expose them. This provider should be integrated as a AllColorChartSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users.
class OrangeThemeColorDecorativeSemanticTokensProvider
A class which wraps all color semantic tokens of decorative colors and expose them. This provider should be integrated as a AllColorDecorativeSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users.
class OrangeThemeColorModeSemanticTokensProvider
A class which wraps all color mode semantic tokens, multiple or not, and expose them. This provider should be integrated as a AllColorModeSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use.
class OrangeThemeColorSemanticTokensProvider
A class which wraps all color semantic tokens, multiple or not, and expose them. This provider should be integrated as a AllColorSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use.
class OrangeThemeControlItemComponentTokensProvider
A class which wraps all component tokens for components with a control item layout like OUDSSwitch, OUDSRadioButton and OUDSCheckboItem. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllControlItemComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeControlItemComponentTokensProvider and apply the provider they need. It implements also the protocol ControlItemComponentTokens so as to expose the component tokens for control-item-layout-basded components through any OUDSTheme. Such components tokens are defined with raw and semantic tokens of sizes (from SizeSemanticTokensProvider), borders (from AllBorderSemanticTokensProvider), colors (from AllColorSemanticTokensProvider) and spaces (from AllSpaceSemanticTokensProvider).
class OrangeThemeDimensionSemanticTokensProvider
A class which wraps all dimension semantic tokens, and expose them. This provider should be integrated as a AllDimensionSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users.
class OrangeThemeDividerComponentTokensProvider
A class which wraps all component tokens of divider for divider objects like OUDSHorizontalDivider and OUDSVerticalDivider. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllDividerComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeDividerComponentTokensProvider and apply the provider they need. It implements also the protocol DividerComponentTokens so as to expose the component tokens for divider through any OUDSTheme. Divider components tokens are defined with raw and semantic tokens of borders (from AllBorderSemanticTokensProvider).
class OrangeThemeEffectSemanticTokensProvider
A class which wraps all effect semantic tokens, and expose them. This provider should be integrated as a AllEffectSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users.
class OrangeThemeElevationSemanticTokensProvider
A class which wraps all elevation semantic tokens, multiple, composite or not, and expose them. This provider should be integrated as a AllElevationSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use.
class OrangeThemeFontSemanticTokensProvider
A class which wraps all font semantic tokens, multiple, composite or not, and expose them. This provider should be integrated as a AllFontSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use.
class OrangeThemeGridSemanticTokensProvider
A class which wraps all grid semantic tokens and expose them. This provider should be integrated as a AllGridSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use.
class OrangeThemeIconComponentTokensProvider
A class which wraps all component tokens of icons for icons used in some components like OUDSTag. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllIconComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeIconComponentTokensProvider and apply the provider they need. It implements also the protocol IconomponentTokens so as to expose the component tokens for icons through any OUDSTheme. Icons components tokens are defined with raw and semantic tokens of colors (from AllColorSemanticTokensProvider).
class OrangeThemeInputTagComponentTokensProvider
A class which wraps all component tokens of tag input objects like OUDSInputTag. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllInputTagComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeInputTagComponentTokensProvider and apply the provider they need. It implements also the protocol InputTagComponentTokens so as to expose the component tokens for tag inputs through any OUDSTheme. Tag inputs components tokens are defined with semantic tokens of colors (from AllColorSemanticTokensProvider), and borders (from AllBorderSemanticTokensProvider).
class OrangeThemeLinkComponentTokensProvider
A class which wraps all component tokens of links for link objects like OUDSLink. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllLinkComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeLinkComponentTokensProvider and apply the provider they need. It implements also the protocol LinkComponentTokens so as to expose the component tokens for links through any OUDSTheme. Link components tokens are defined with raw and semantic tokens of sizes (from AllSizeSemanticTokensProvider), colors (from AllColorSemanticTokensProvider) and spaces (from AllSpaceSemanticTokensProvider).
class OrangeThemeOpacitySemanticTokensProvider
A class which wraps all opacity semantic tokens and expose them. This provider should be integrated as a AllOpacitySemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use.
class OrangeThemePinCodeInputComponentTokensProvider
A class which wraps all component tokens of pin code input objects like OUDSPinCodeInput. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllPinCodeInputComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemePinCodeInputComponentTokensProvider and apply the provider they need. It implements also the protocol PinceCodeInputComponentTokens so as to expose the component tokens for pin code input through any OUDSTheme. Pin code input components tokens are defined with raw and semantic tokens of dimensions (from AllDimensionSemanticTokensProvider), and spaces (from AllSpaceSemanticTokensProvider).
class OrangeThemeQuantityInputComponentTokensProvider
A class which wraps all component tokens of quantity input objects like OUDSQuantityInput. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllQuantityInputComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeQuantityInputComponentTokensProvider and apply the provider they need. It implements also the protocol QuantityInputComponentTokens so as to expose the component tokens for tag inputs through any OUDSTheme. Quantity inputs components tokens are defined with semantic tokens of sizes (from AllSizeSemanticTokensProvider), and spaces (from AllSpaceSemanticTokensProvider).
class OrangeThemeRadioButtonComponentTokensProvider
A class which wraps all component tokens of radio button for radios objects like OUDSRadioButton and OUDSRadioButtonItem. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllRadioButtonComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeRadioButtonComponentTokensProvider and apply the provider they need. It implements also the protocol RadioButtonComponentTokens so as to expose the component tokens for radio buttons through any OUDSTheme. Radio buttons components tokens are defined with raw and semantic tokens of sizes (from SizeSemanticToken) and borders (BorderRadiusSemanticToken, BorderWidthSemanticToken). These components share the same type of tokens which are all gathered here.
class OrangeThemeSelectInputComponentTokensProvider
A class which wraps all component tokens of select input for objects like OUDSSelectInput. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllSelectInputComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeSelectInputComponentTokensProvider and apply the provider they need. It implements also the protocol SelectInputComponentTokens so as to expose the component tokens for select input through any OUDSTheme. Select input components tokens are defined with semantic tokens of dimensions (from AllDimensionSemanticTokensProvider)
class OrangeThemeSizeSemanticTokensProvider
A class which wraps all size semantic tokens, multiple or not, and expose them. This provider should be integrated as a AllSizeSemanticTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Closed tokens of dimensions (AllDimensionSemanticTokensProvider) are used so as to keep consistancy beweetn Figma specifications and library for developers.
class OrangeThemeSkeletonComponentTokensProvider
A class which wraps all component tokens of skeleton for skeleton objects like OUDSSkeleton. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllSkeletonComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeSkeletonComponentTokensProvider and apply the provider they need. It implements also the protocol SkeletonComponentTokens so as to expose the component tokens for skeleton through any OUDSTheme. Skeleton components tokens are defined with semantic tokens of colors (from AllColorSemanticTokensProvider).
class OrangeThemeSpaceSemanticTokensProvider
A class which wraps all space semantic tokens, multiple or not, and expose them. This provider should be integrated as a AllSpaceSemanticTokens implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Closed tokens of dimensions (AllDimensionSemanticTokensProvider) are used so as to keep consistancy beweetn Figma specifications and library for developers.
class OrangeThemeSwitchComponentTokensProvider
A class which wraps all component tokens of switch for switch / toggle objects like OUDSSwitch. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllSwitchComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeSwitchComponentTokensProvider and apply the provider they need. It implements also the protocol SwitchComponentTokens so as to expose the component tokens for switch / toggle through any OUDSTheme. Switch components tokens are defined with semantic tokens of colors (from AllColorSemanticTokensProvider), spaces (from AllSpacesSemanticTokensProvider) , dimensions (AllDimensionSemanticTokensProvider), sizes (AllSizeSemanticTokensProvider), borders (AllBorderSemanticTokensProvider) and opacities (AllOpacitiySemanticTokensProvider).
class OrangeThemeTagComponentTokensProvider
A class which wraps all component tokens of tag for tag objects like OUDSTag. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllTagComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeTagComponentTokensProvider and apply the provider they need. It implements also the protocol TagComponentTokens so as to expose the component tokens for tags through any OUDSTheme. Tags components tokens are defined with semantic tokens of dimensions (AllDimensionSemanticTokensProvider) , spaces (from AllSpaceSemanticTokensProvider) , sizes (from AllSizesSemanticTokensProvider) and borders (from AllBorderSemanticTokensProvider).
class OrangeThemeTextAreaComponentTokensProvider
A class which wraps all component tokens of text area objects like OUDSTextArea. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllTextAreaComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeTextAreaComponentTokensProvider and apply the provider they need. It implements also the protocol TextAreaComponentTokens so as to expose the component tokens for text area through any OUDSTheme. Text area components tokens are defined with semantic tokens of sizes (from AllSizeSemanticTokensProvider) and spaces (from AllSpaceSemanticTokensProvider).
class OrangeThemeTextInputComponentTokensProvider
A class which wraps all component tokens of input text for input text objects like OUDSTextInput. Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. This provider should be integrated as a AllTextInputComponentTokensProvider implementation inside OUDSTheme so as to provide all tokens to the users. It helps users to override some of the tokens and assign them to an OUDSTheme implementation to use. Custom themes can use subclass of OrangeThemeTextInputComponentTokensProvider and apply the provider they need. It implements also the protocol TextInputComponentTokens so as to expose the component tokens for input text through any OUDSTheme. Inout text components tokens are defined with raw and semantic tokens of colors (AllColorSemanticTokensProvider), borders (from AllBorderSemanticTokensProvider), spaces (from AllSpaceSemanticTokensProvider) and dimensions (from AllDimensionSemanticTokensProvider).