[Spike] Explore tokens export to mobile platforms Android and iOS
Open, Stalled, HighPublic
Actions

Assigned To

None

Authored By

	Volker_E
	Jan 17 2023, 7:01 PM

Description

Background/Goal

Style Dictionary (the library used for managing our design tokens) supports the ability to export tokens as mobile platform specific Android and iOS variables.

The output looks something like this:

Android:

<resources>
  <color name="color_base">#ff202122</color>
  <color name="color_base_hover">#ff404244</color>
  …
</resources>

iOS:
.h/.m file with references
iOS-Swift
.swift files

It's also possible to provide custom prefixes like Cdx if desired.

Is this something we should consider including in the public @wikimedia/codex-design-tokens package on NPM?

Development considerations

Token modularization, source of truth that can be extended, for example by dark mode colors?

Acceptance Criteria

Figure out if this is something we want to do (I believe at least one use-case exists per above)
Add a new build target with format: 'android/colors'/format: 'ios/colors.h' in the tokens build configuration if so

Supporting documentation

style-dictionary docs: https://github.com/amzn/style-dictionary/blob/main/lib/common/formats.js#L363

Details

	Subject	Repo	Branch	Lines +/-
	[POC]: Add Android and iOS Codex design token export	design/codex	main	+76 -0

Customize query in gerrit

Related Objects

Mentioned In: T324481: Front-end team lead check-ins
Mentioned Here: T324228: [EPIC] Codex as the Design System for Wikimedia

Event Timeline

Volker_E created this task.Jan 17 2023, 7:01 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 17 2023, 7:01 PM

Volker_E updated the task description. (Show Details)Jan 17 2023, 7:16 PM

Change 856036 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] [POC]: Add Android and iOS Codex design token export

https://gerrit.wikimedia.org/r/856036

gerritbot added a project: Patch-For-Review.Jan 17 2023, 7:25 PM

From conversation with @Dbrant and @cmadeo on Android platform:
Biggest value would be in pulling in color values and icons probably. With the strong emphasis of being able to modulate the colors on the platform if needed.

Color category output for Android right now as in the proof-of-concept patch:
https://phabricator.wikimedia.org/F36290472

Volker_E added a project: Design.Jan 17 2023, 7:53 PM

Volker_E updated the task description. (Show Details)

Another consideration is the dark mode reading themes, specifically where the source of truth should lie, if they could be incorporated into Codex Design tokens when overlapping iOS and Android themes were covered.

Volker_E updated the task description. (Show Details)Jan 17 2023, 8:10 PM

From conversation with @Tsevener and @OTichonova on iOS:
Tokens would only work for token categories where we are definitely clear on their application in the iOS app.
Native colors could work. Also the question about dark theme colors and their possible overlap with Android's dark themes came up. That could be Apps first integrated token sub-category, that we might later bring to Web.

Side-note, iOS doesn't work with npm right now.

I'll share the current iOS proof-of-concept export files here and continue the conv with @Tsevener and @Dbrant.

@Tsevener
iOS output:

ThemeWikimediaUIColor.m5 KBDownload

ThemeWikimediaUIColor.h1 KBDownload

iOS Swift:

ThemeWikimediaUI.swift7 KBDownload

ThemeWikimediaUI+Class.swift40 KBDownload

ThemeWikimediaUI+Struct.swift41 KBDownload

ThemeWikimediaUI+Enum.swift40 KBDownload

Volker_E mentioned this in T324481: Front-end team lead check-ins.Jan 20 2023, 5:28 AM

Moving to sprint board since it looks like work is in progress - feel free to move out if that's not the case @Volker_E.

Volker_E changed the task status from Open to In Progress.Jan 23 2023, 7:18 AM

Volker_E claimed this task.

Volker_E moved this task from Committed to In Development on the Design-System-Team (Design-System-Sprint) board.

Moving to Blocked column, as we're relaxed awaiting feedback from tech leads @Dbrant and @Tsevener. :)

Hi @Volker_E, thanks for the files, and sorry for the delay. The iOS engineers plan on discussing this tomorrow. For our reference, can you explain the process you went through for generating your swift files? I just want to understand if we would need to add some sort of automated CI action that can generate it and open PRs with changes.

That being said, just opening a manual PR with color file changes may suffice for now, if these might not change often.

This task is in reference to T324228: [EPIC] Codex as the Design System for Wikimedia

Pppery edited projects, added Patch-Needs-Improvement; removed Patch-For-Review.Apr 2 2023, 1:20 AM

Moving out of DST sprint board per discussion at planning/refinement

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.Apr 10 2023, 4:22 PM

Change 856036 abandoned by VolkerE: