[OUDS] Tokens: Dimension

[julien-deramond]

⚠️ On hold until #2597

---

Description

The aim of this issue is to study and implement the dimension tokens taking into account the cohesive multi-platform approach, the customization by libraries inheriting OUDS Web, but also what we're using for OUDS Web: Boosted, Bootstrap 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 Web.
  • These tokens cannot be used by developers using OUDS Web.
• Semantic applications: Depends on raw primitive values.
  • Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Web.
  • These tokens can be used by developers using OUDS Web.
• Component applications: Depends on semantic applications.:
  • Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Web.
  • These tokens can be used by developers using OUDS Web.

Tokens: Dimension

Raw primitive values

$ouds-dimension-base: 4 !default;

$ouds-dimension-0: $ouds-dimension-base * 0 /* 0 */ !default;
$ouds-dimension-25: $ouds-dimension-base * 0.5 /* 2 */ !default;
$ouds-dimension-50: $ouds-dimension-base * 1 /* 4 */ !default;
$ouds-dimension-75: $ouds-dimension-base * 1.5 /* 6 */ !default;
$ouds-dimension-100: $ouds-dimension-base * 2 /* 8 */ !default;
$ouds-dimension-150: $ouds-dimension-base * 3 /* 12 */ !default;
$ouds-dimension-200: $ouds-dimension-base * 4 /* 16 */ !default;
$ouds-dimension-250: $ouds-dimension-base * 5 /* 20 */ !default;
$ouds-dimension-300: $ouds-dimension-base * 6 /* 24 */ !default;
$ouds-dimension-350: $ouds-dimension-base * 7 /* 28 */ !default;
$ouds-dimension-400: $ouds-dimension-base * 8 /* 32 */ !default;
$ouds-dimension-450: $ouds-dimension-base * 9 /* 36 */ !default;
$ouds-dimension-500: $ouds-dimension-base * 10 /* 40 */ !default;
$ouds-dimension-550: $ouds-dimension-base * 11 /* 44 */ !default;
$ouds-dimension-600: $ouds-dimension-base * 12 /* 48 */ !default;
$ouds-dimension-650: $ouds-dimension-base * 13 /* 52 */ !default;
$ouds-dimension-700: $ouds-dimension-base * 14 /* 56 */ !default;
$ouds-dimension-750: $ouds-dimension-base * 15 /* 60 */ !default;
$ouds-dimension-800: $ouds-dimension-base * 16 /* 64 */ !default;
$ouds-dimension-900: $ouds-dimension-base * 18 /* 72 */ !default;
$ouds-dimension-1000: $ouds-dimension-base * 20 /* 80 */ !default;
$ouds-dimension-1200: $ouds-dimension-base * 24 /* 96 */ !default;
$ouds-dimension-1400: $ouds-dimension-base * 28 /* 112 */ !default;
$ouds-dimension-1600: $ouds-dimension-base * 32 /* 128 */ !default;
$ouds-dimension-1800: $ouds-dimension-base * 36 /* 144 */ !default;
$ouds-dimension-2000: $ouds-dimension-base * 40 /* 160 */ !default;
$ouds-dimension-3000: $ouds-dimension-base * 80 /* 320 */ !default;
$ouds-dimension-4000: $ouds-dimension-base * 120 /* 480 */ !default;
$ouds-dimension-5000: $ouds-dimension-base * 140 /* 560 */ !default;
$ouds-dimension-6000: $ouds-dimension-base * 160 /* 640 */ !default;
$ouds-dimension-7000: $ouds-dimension-base * 180 /* 720 */ !default;
$ouds-dimension-9000: $ouds-dimension-base * 220 /* 880 */ !default;
$ouds-dimension-11000: $ouds-dimension-base * 260 /* 1040 */ !default;

Semantic applications

⚠️ Too many modification have been done on the design side, this description must be updated

---

Study

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

Technical details

TODO