Tokens: Border

[julien-deramond]

⚠️ On hold until https://github.com/ouds-sandbox/ouds-android/issues/34

---

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 Android, but also what we're using for OUDS Android: Jetpack Compose, Material 3, 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 Android.
  • These tokens cannot be used by developers using OUDS Android.
• Semantic applications: Depends on raw primitive values.
  • Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Android.
  • These tokens can be used by developers using OUDS Android.
• Component applications: Depends on semantic applications.:
  • Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Android.
  • These tokens can be used by developers using OUDS Android.

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

• [x] Add border raw primitive values in the "tokens-global-raw" module (common raw tokens)
• [x] Add border semantic tokens in the OudsCustomTheme interface of the "theme-contract" module and specify the default value for each semantic coming from "tokens-global-raw" module

⚠️ No need to override border semantic tokens in themes because default values are the Orange ones

[paulinea]

Do you agree that the values ​​of a border style are limited to the four provided? A new style of border cannot be added without a modification of the library code so I suggest that we materialize String values like border style by an enum. In the code we will have a switch with an else case for not handled values.

[paulinea]

A border radius should always have the same type, here we have a percentage for circle border radius where the other are integers. As Kotlin is typed, we have a problem with this.

[paulinea]

After meeting: remove border-radius-circle.