[OUDS] Tokens: Elevation

[julien-deramond]

Description

The aim of this issue is to study and implement the elevation 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: Elevation

Raw primitive values

X

Token name	Token value
elevation-x-0	0

Y

Token name	Token value
elevation-y-0	0
elevation-y-100	1
elevation-y-200	2
elevation-y-300	4
elevation-y-400	8
elevation-y-500	12
elevation-y-600	20

Blur

Token name	Token value
elevation-blur-0	0
elevation-blur-100	1
elevation-blur-200	2
elevation-blur-300	3
elevation-blur-400	4
elevation-blur-500	8
elevation-blur-600	12
elevation-blur-700	20

Spread

Token name	Token value
elevation-spread-n100	-1
elevation-spread-n200	-2
elevation-spread-n300	-4
elevation-spread-n400	-8
elevation-spread-0	0
elevation-spread-300	3

Box shadow (Composite)

Caution

Figma doesn't accept composite tokens

Token name	Token value
elevation-bottom-0	box-shadow: 0 0px 0px 0 rgba({core.color.transparent.black.0});
elevation-bottom-1-100	box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.100});
elevation-bottom-1-200	box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.200});
elevation-bottom-1-300	box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.300});
elevation-bottom-1-400	box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.400});
elevation-bottom-1-500	box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.500});
elevation-bottom-1-600	box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.600});
elevation-bottom-2-100	box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.100});
elevation-bottom-2-200	box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.200});
elevation-bottom-2-300	box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.300});
elevation-bottom-2-400	box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.400});
elevation-bottom-2-500	box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.500});
elevation-bottom-2-600	box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.600});
elevation-bottom-3-100	box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.100});
elevation-bottom-3-200	box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.200});
elevation-bottom-3-300	box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.300});
elevation-bottom-3-400	box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.400});
elevation-bottom-3-500	box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.500});
elevation-bottom-3-600	box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.600});
elevation-bottom-4-100	box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.100});
elevation-bottom-4-200	box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.200});
elevation-bottom-4-300	box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.300});
elevation-bottom-4-400	box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.400});
elevation-bottom-4-500	box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.500});
elevation-bottom-4-600	box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.600});
elevation-bottom-5-100	box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.100});
elevation-bottom-5-200	box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.200});
elevation-bottom-5-300	box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.300});
elevation-bottom-5-400	box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.400});
elevation-bottom-5-500	box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.500});
elevation-bottom-5-600	box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.600});
elevation-bottom-6-100	box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.100});
elevation-bottom-6-200	box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.200});
elevation-bottom-6-300	box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.300});
elevation-bottom-6-400	box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.400});
elevation-bottom-6-500	box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.500});
elevation-bottom-6-600	box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.600});

Semantic applications

X

Token name	Token value
elevation-x-none	elevation-x-0
elevation-x-raised	elevation-x-0
elevation-x-drag	elevation-x-0
elevation-x-overlay-default	elevation-x-0
elevation-x-overlay-emphasized	elevation-x-0
elevation-x-sticky-default	elevation-x-0
elevation-x-sticky-emphasized	elevation-x-0
elevation-x-sticky-navigation-scrolled	elevation-x-0
elevation-x-focus	elevation-x-0

Y

Token name	Token value
elevation-y-none	elevation-y-0
elevation-y-raised	elevation-y-100
elevation-y-drag	elevation-y-300
elevation-y-overlay-default	elevation-y-200
elevation-y-overlay-emphasized	elevation-y-500
elevation-y-sticky-default	elevation-y-300
elevation-y-sticky-emphasized	elevation-y-300
elevation-y-sticky-navigation-scrolled	elevation-y-300
elevation-y-focus	elevation-y-0

Blur

Token name	Token value
elevation-blur-none	elevation-blur-0
elevation-blur-raised	elevation-blur-200
elevation-blur-drag	elevation-blur-400
elevation-blur-overlay-default	elevation-blur-300
elevation-blur-overlay-emphasized	elevation-blur-600
elevation-blur-sticky-default	elevation-blur-400
elevation-blur-sticky-emphasized	elevation-blur-400
elevation-blur-sticky-navigation-scrolled	elevation-blur-400
elevation-blur-focus	elevation-blur-0

Spread

Token name	Token value
elevation-spread-none	elevation-spread-0
elevation-spread-raised	elevation-spread-0
elevation-spread-drag	elevation-spread-n100
elevation-spread-overlay-default	elevation-spread-n100
elevation-spread-overlay-emphasized	elevation-spread-n300
elevation-spread-sticky-default	elevation-spread-n100
elevation-spread-sticky-emphasized	elevation-spread-n100
elevation-spread-sticky-navigation-scrolled	elevation-spread-n100
elevation-spread-focus	elevation-spread-300

Color

Token name	Token value (light)	Token value (inverse)	Token value (dark)
elevation-color-none	color-transparent-black-0	color-transparent-black-0	color-transparent-black-0
elevation-color-raised	color-transparent-black-500	color-transparent-black-500	color-transparent-black-500
elevation-color-drag	color-transparent-black-600	color-transparent-black-600	color-transparent-black-600
elevation-color-overlay-default	color-transparent-black-400	color-transparent-black-400	color-transparent-black-400
elevation-color-overlay-emphasized	color-transparent-black-300	color-transparent-black-300	color-transparent-black-300
elevation-color-sticky-default	color-transparent-black-300	color-transparent-black-300	color-transparent-black-300
elevation-color-sticky-emphasized	color-transparent-black-300	color-transparent-black-300	color-transparent-black-300
elevation-color-sticky-navigation-scrolled	color-transparent-black-300	color-transparent-black-300	color-transparent-black-300
elevation-color-focus	color-transparent-white-900	color-transparent-white-900	color-transparent-white-900

Box shadow (Composite)

Caution

Figma doesn't accept composite tokens

Token name	Token value (light)	Token value (inverse)	Token value (dark)
elevation-none	elevation-bottom-0	elevation-bottom-0	elevation-bottom-0
elevation-raised	elevation-bottom-1-500	elevation-bottom-1-500	elevation-bottom-1-500
elevation-drag	elevation-bottom-3-500	elevation-bottom-3-500	elevation-bottom-3-500
elevation-overlay-default	elevation-bottom-2-400	elevation-bottom-2-400	elevation-bottom-2-400
elevation-overlay-emphasized	elevation-bottom-5-300	elevation-bottom-5-300	elevation-bottom-5-300
elevation-sticky-default	elevation-bottom-3-300	elevation-bottom-3-300	elevation-bottom-3-300
elevation-sticky-emphasized	elevation-bottom-3-300	elevation-bottom-3-300	elevation-bottom-3-300
elevation-sticky-navigation-scrolled	elevation-bottom-3-300	elevation-bottom-3-300	elevation-bottom-3-300
elevation-focus	box-shadow: 0 0px 0px 3px rgba({sys-color-transparent-black-900});	box-shadow: 0 0px 0px 3px rgba({sys-color-transparent-white-900});	box-shadow: 0 0px 0px 3px rgba({sys-color-transparent-white-900});

---

Study

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

Technical details

TODO