-
Notifications
You must be signed in to change notification settings - Fork 6
0 ‐ FAQ (Frequently Asked Questions)
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.
Today OUDS provides libraries for:
The available themes since version 0.20.0 are:
- the Orange theme
- the Orange Business Tools theme
- the Sosh theme
- the Wireframe theme
You can get more details about API availability here.
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.
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.
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 license 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.
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.
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.
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
With version 0.21.0 we provide:
- 1,971 tokens (403 core raw tokens, 79 Orange brand raw tokens, 50 Sosh brand raw tokens, 139 Wireframe brand raw tokens, 967 core semantic tokens, 333 core component tokens)
- 26 components and variants
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("\nSosh raw tokens:")
occurrences = count_patterns_in_directory(project_root + "Themes/Sosh/Sources/Values", "public static let")
accumulator = 0
for file, counts in occurrences.items():
print(f"\t {file}: {counts}")
accumulator += counts
print(f"Sosh raw tokens --> {accumulator}")
global_tokens_accumulator += accumulator
print("\nWireframe raw tokens:")
occurrences = count_patterns_in_directory(project_root + "Themes/Wireframe/Sources/Values", "public static let")
accumulator = 0
for file, counts in occurrences.items():
print(f"\t {file}: {counts}")
accumulator += counts
print(f"Wireframe 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}")