Tokens: Border

[julien-deramond]

Description

The aim of this issue is to study and implement the border tokens taking into account the cohesive multi-platform approach, the customization by libraries inheriting OUDS iOS, but also what we're using for OUDS iOS: Swift UI, etc.

• Define the possibilities
• Define the constraints
• Define the impacts
• Implement the tokens (with a future Style Dictionary usage in mind)

Reminder: there will be in the end 3 layers of tokens:

• Raw primitive values: Insertion of brand foundations.
  • These tokens will be customizable by libraries inheriting OUDS iOS.
  • These tokens cannot be used by developers using OUDS iOS.
• Semantic applications: Depends on raw primitive values.
  • Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS iOS.
  • These tokens can be used by developers using OUDS iOS.
• Component applications: Depends on semantic applications.:
  • Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS iOS.
  • These tokens can be used by developers using OUDS iOS.

Tokens: Border

Raw primitive values

Token name	Token value
border-base	4

Width

Token name	Token value
border-width-0	{border-base}*0 = 0
border-width-25	{border-base}*0.25 = 1
border-width-50	{border-base}*0.5 = 2
border-width-75	{border-base}*0.75 = 3
border-width-100	{border-base}*1 = 4
border-width-150	{border-base}*1.5 = 6
border-width-200	{border-base}*2 = 8

Radius

Token name	Token value
border-radius-0	{border-base}*0 = 0
border-radius-25	{border-base}*0.25 = 1
border-radius-50	{border-base}*0.5 = 2
border-radius-75	{border-base}*0.75 = 3
border-radius-100	{border-base}*1 = 4
border-radius-150	{border-base}*1.5 = 6
border-radius-200	{border-base}*2 = 8
border-radius-300	{border-base}*3 = 12
border-radius-400	{border-base}*4 = 16
border-radius-500	{border-base}*5 = 20
border-radius-600	{border-base}*6 = 24
border-radius-800	{border-base}*8 = 32
border-radius-9999	2000

Style

Token name	Token value
border-style-none	none
border-style-solid	solid
border-style-dashed	dashed
border-style-dotted	dotted

Semantic applications

Width

Token name	Token value
border-width-none	border-width-0
border-width-default	border-width-25
border-width-thin	border-width-25
border-width-thick	border-width-50
border-width-thicker	border-width-75
border-width-thickest	border-width-100
border-width-interactive-primary-focus	border-width-100

Radius

Token name	Token value
border-radius-none	border-radius-0
border-radius-default	border-radius-0
border-radius-short	border-radius-75
border-radius-medium	border-radius-150
border-radius-tall	border-radius-300
border-radius-pill	border-radius-9999
border-radius-circle	50%

Style

Token name	Token value
border-style-default	border-style-solid
border-style-drag	border-style-dashed

Study

• [x] Study the architecture of these tokens, and define the technical details

Technical details

TODO

[pylapp]

For information, a first draft is available in the implementation of #33 due to the need to test the architect with available tokens. Of course any improvements, fixes and implementations after the merge of #33 must be linked to this issue to keep consistency.

In addition, "shared" raw tokens defined in OUDSTheme module (common to all themes) are not customisable as is in OUDS iOS and should not supposed to be because they define raw types and true values for everything, like a kind of source of truth for everyone. However any theme can define its own raw tokens and assign them to semantic tokens. Of course raw tokens values can be defined thanks to generated Swift code, if we have any efficient and relevant tools suite.

What should be done for this issue:

• Review all tokens to check if some of them are missing or have bad values
• Add documentation
• Add unit tests
• Update demo app to display theses tokens (if we have guidelines)

[pylapp]

@julien-deramond Feel free to re-open this issue if you find it relevant, I needed to merge it to complete some tests on our CI/CD chain and for Ludovic re-onboarding.

[pylapp]

Avaialble since v0.0.0 except for the border-radius-circle 50% (see #58)