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 Flutter, but also what we're using for OUDS Flutter: Flutter, 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 Flutter.
These tokens cannot be used by developers using OUDS Flutter.
Semantic applications: Depends on raw primitive values.
Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Flutter.
These tokens can be used by developers using OUDS Flutter.
Component applications: Depends on semantic applications.:
Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Flutter.
These tokens can be used by developers using OUDS Flutter.
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
⚠️ On hold until https://github.com/ouds-sandbox/ouds-flutter/issues/25 is resolved
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 Flutter, but also what we're using for OUDS Flutter: Flutter, Material 3, etc.
Reminder: there will be in the end 3 layers of tokens:
Tokens: Border
Raw primitive values
Width
Radius
Style
Semantic applications
Width
Radius
Style
Study
Technical details
TODO