Skip to content

0 ‐ FAQ (Frequently Asked Questions)

Pierre-Yves Lapersonne edited this page Feb 20, 2025 · 18 revisions

What is OUDS?

OUDS means "Orange Unified Design System". This is a new design system, again, but unified, trying to merge all requirements of Orange brands and affiliates so as to provide a unique design system, unified across all platforms and for all countries, companies, users and apps. Guidelines for TV, Android, iOS and web environments will be merged in a "cohesive" approach, and any Orange-related softwares including brand apps like Parnasse and Sosh, Orange Innovation Cup apps and Orange countries and affiliates apps will have to use this project in the future. The project is open source and topics like accessibility and ecodesign are also managed. Some assets related to brand, like for Sosh or Parnasse are not planned ot be released in open source mode and will be defined in internal repositories.

For which platform OUDS is available?

Today OUDS provides an Android library, this iOS library and a web library. A Flutter version is in progress also.

Which themes are provided?

The Orange theme is provided, as the default theme. There is also an inverse theme for particular use cases. Brands themes like Sosh are not managed yet, but are planned to be, and will be defined in our internal repository so as to not allow users to subclass it and use it except if allowed.

You can get more details about API availability here.

Which components are provided?

Refer to this page on the wiki to have the list or also the Swift documentation.

You can get more details about API availability here.

What are the design system specifications?

All specifications are defined in Figma, used by the design team, even if we struggle to have well defined issues on GitHub for transparency and comfort of use. Do not expect to have much details here, sadly. You can find plenty of details in the official website at unified-design-system.orange.com.

Why OUDS is under MIT license?

To allow Orange subcontractors and affiliates, and also countries instances in fact, to use the OUDS products, it was necessary to provide the source code under an open source licence to avoid recharging or billing troubles within distinct juridical entities. MIT was enough permissive and understandable, so has been used. For legal reasons, it was not possible to keep internally the source code and give it to affiliates and subcontractors for free. For the same reasons, no inner source license was applied, nor common source process.

OUDS is not ODS?

ODS means "Orange Design System". It was an attempt to define whole new design system but for Orange affiliates and countries in AMEA and Europe areas. It provides components and themes for Android, iOS and Flutter apps and web projects. But because this design system did not embed the One-I system of Orange France, the project has been delayed, almost considered as unmaintained with two years of work and efforts wasted.

What is "tokenator" 🤖?

tokenator is a name given to an internal project based on amzn/style-dictionary (under Apache 2.0 license), with a lot of customizations, which will convert JSON files generated by Figma to Kotlin, Swift and Web objects for the own needs of the OUDS librairies ; that is the reason why there is no interest in publishing it in open source, it remains internal. The tool provides modifications using pull requests and a dedicated GitHub account. You can find tokenator contributions by filtering the Git history.

How are integrated tokenator, zeroheight and Figma?

Here is a simple chart explaining how things are defined in Figma side so as to be in the end integrated in the Swift codebase.

flowchart TD
%% Nodes
    A("Tokens and components are defined in Figma")
    B("zeroheight exposes the implementation through JSON")
    C("Tokenator (based on style-dictionary) converts JSON to Swift code")
    D("Swift code is publicly submitted on GitHub with pull requests")

%% Edge connections between nodes
    A --> B --> C --> D

%% Individual node styling.
    %% Purple
    style A color:#FFFFFF, fill:#AA00FF, stroke:#AA00FF
    %% Blue
    style B color:#FFFFFF, stroke:#2962FF, fill:#2962FF
    %% Green
    style C color:#FFFFFF, stroke:#00C853, fill:#00C853
    %% Red
    style D color:#FFFFFF, stroke:#FF1600, fill:#FF1600
Loading

How many tokens and components OUDS iOS provides?

With version 0.11.0 we provide:

  • 1,742 tokens (422 core raw tokens, 22 Orange brand raw tokens, 978 core semantic tokens, 320 core component tokens)
  • 2 components

You can find below a Python script to compute the number of tokens and components.

#!/usr/bin/env python3
# SPDX-FileCopyrightText: Copyright (c) Orange SA
# SPDX-License-Identifier: MIT

import os

def count_pattern_in_file(file_path, pattern):
    """
    Counts the number of instances for each pattern in a file.

    Args:
        file_path (str): Path to the file to process.
        pattern (str): Pattern to look for.

    Returns:
        int: Number of instances of the pattern in the file.
    """
    try:
        with open(file_path, 'r', encoding='utf-8') as file:
            content = file.read()
            return content.count(pattern)
    except Exception as e:
        print(f"Error: Error while reading the file '{file_path}': '{e}'")
        return 0

def count_patterns_in_directory(directory, pattern):
    """
    Counts the number of instances of pattern in all files of given directory.

    Args:
        directory (str): Path of directory to process.
        pattern (str): The apttern to look for.

    Returns:
        dict: Dictionnary with paths of files as keys and instances numbers as values.
    """    
    results = {}
    if os.path.isdir(directory):
        for root, _, files in os.walk(directory):
            for file in files:
                file_path = os.path.join(root, file)
                count = count_pattern_in_file(file_path, pattern)
                results[file] = count
    else:
        print(f"Error: The directory '{directory}' does not exist")
    return results

# ------------ Main ------------
if __name__ == "__main__":
    # Update references to directories of course
    # Do not forget to `chmod u+x` the file
    # And define the path to the ouds-ios repository
    project_root = "ouds-ios/OUDS/Core/"

    global_tokens_accumulator = 0

    print("Core raw tokens:")
    occurrences = count_patterns_in_directory(project_root + "Tokens/RawTokens/Sources/Values", "public static let")
    accumulator = 0
    for file, counts in occurrences.items():
        print(f"\t {file}: {counts}")
        accumulator += counts
    print(f"Core raw tokens --> {accumulator}")
    global_tokens_accumulator += accumulator

    print("\nOrange raw tokens:")
    occurrences = count_patterns_in_directory(project_root + "Themes/Orange/Sources/Values", "public static let")
    accumulator = 0
    for file, counts in occurrences.items():
        print(f"\t {file}: {counts}")
        accumulator += counts
    print(f"Orange raw tokens --> {accumulator}")
    global_tokens_accumulator += accumulator

    print("\nCore semantic tokens:")
    occurrences = count_patterns_in_directory(project_root + "Tokens/SemanticTokens/Sources/Values", "var")
    accumulator = 0
    for file, counts in occurrences.items():
        print(f"\t{file}: {counts}")
        accumulator += counts
    print(f"Core semantic tokens --> {accumulator}")
    global_tokens_accumulator += accumulator

    print("\nCore component tokens:")
    occurrences = count_patterns_in_directory(project_root + "Tokens/ComponentTokens/Sources/Values", "var")
    accumulator = 0
    for file, counts in occurrences.items():
        print(f"\t{file}: {counts}")
        accumulator += counts
    print(f"Core component tokens --> {accumulator}")
    global_tokens_accumulator += accumulator

    print("\nCore components:")
    occurrences = count_patterns_in_directory(project_root + "Components/Sources", "public struct OUDS")
    accumulator = 0
    for file, counts in occurrences.items():
        print(f"\t{file}: {counts}")
        accumulator += counts
    print(f"Core components --> {accumulator}")

    print(f"\nTotal number of tokens --> {global_tokens_accumulator}")
    print(f"Total number of components --> {accumulator}")